:root{
  --pine:#23623A;
  --pine-50:#eaf4ee;
  --ink:#111;
  --muted:#666;
  --card:#fff;
}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--ink); background:var(--pine-50)}
header{background:var(--pine); color:#fff; padding:14px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; position:sticky; top:0; z-index:10}
.logo{width:44px; height:44px; border-radius:10px; background:#fff2; display:grid; place-items:center; font-weight:800; font-size:20px; box-shadow:inset 0 0 0 2px #fff4}
.brand h1{margin:0; font-size:20px; line-height:1.2}
.brand small{opacity:.9}
main{max-width:1100px; margin:20px auto; padding:0 16px 40px}
.panel{background:var(--card); border-radius:16px; padding:16px; box-shadow:0 6px 16px rgba(0,0,0,.06)}
.grid{display:grid; gap:14px}
@media(min-width:900px){ .grid{grid-template-columns:320px 1fr} }
fieldset{border:1px dashed #ccc; border-radius:12px; padding:12px}
legend{padding:0 8px; color:var(--pine); font-weight:700}
label{display:block; margin:.2rem 0 .1rem; font-size:.95rem}
select, input[type="number"], button{ width:100%; padding:10px 12px; border:1px solid #cfd6cf; border-radius:12px; background:#fff; font:inherit }
button{cursor:pointer; background:var(--pine); color:#fff; border-color:transparent; font-weight:700}
button.ghost{background:#fff; color:var(--pine); border:2px solid var(--pine)}
button.flat{background:#f5f7f6; color:var(--ink); border-color:#e0e6e0}
.toolbar{display:flex; gap:10px; flex-wrap:wrap}
.status{display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); font-weight:600}
.status b{color:var(--pine)}
.task{background:#fff; border:2px solid #e8eee9; border-radius:16px; padding:16px; min-height:160px}
.task h3{margin:0 0 10px}
.pill{ display:inline-block; padding:4px 10px; border-radius:999px; background:#eaf6ef; color:var(--pine); font-size:.85rem; font-weight:700 }
.mc-options{display:grid; gap:10px}
.mc-options button{justify-content:flex-start}
.dragzone{display:grid; gap:14px}
.pair{display:grid; grid-template-columns:160px 1fr; gap:8px; align-items:center}
.drop{min-height:40px; border:2px dashed #cdd8cf; border-radius:12px; padding:8px; display:flex; gap:6px; flex-wrap:wrap}
.chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:12px; background:#f1f5f2; border:1px solid #dae4db; user-select:none }
.chip[draggable="true"]{cursor:grab}
.chip.good{background:#e8fff0; border-color:#bfe9c9}
.chip.bad{background:#fff1f1; border-color:#f0c5c5}
.muted{color:var(--muted)}
.result{padding:10px 12px; border-radius:12px; background:#f6faf7; border:1px solid #dfe9e2}
footer{ margin-top:26px; padding:16px; color:#234; text-align:center; font-size:.9rem }
.linkrow{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.hidden{display:none !important}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.card{background:#fff; border:2px solid #e7eee9; border-radius:14px; padding:14px; text-align:center; font-weight:700}
.card.solved{background:#e8fff0; border-color:#bfe9c9}
.board{ display:grid; grid-template-columns:repeat(5, 1fr); gap:8px }
.square{ background:#fff; border:2px solid #dfe7e1; border-radius:10px; padding:10px; text-align:center }
.square.active{ outline:3px solid var(--pine) }
.notice{ padding:10px; border-radius:10px; background:#fffdf2; border:1px solid #f0e3b0 }
.print-only{ display:none }
@media print{
  header, .noprint{ display:none !important }
  .print-only{ display:block }
  body{ background:#fff }
  main{ max-width: 100%; margin:0; padding:0 }
  .panel{ box-shadow:none; border:none; padding:0 }
}


/* ===== Ladder Game Enhancements ===== */
.ladder-wrap{ display:flex; gap:18px; align-items:flex-end; }
.ladder{
  position:relative; width:180px; height:520px; background:linear-gradient(180deg,#f6fbf7,#fff);
  border:2px solid #e2ece4; border-radius:16px; padding:16px; box-shadow:inset 0 0 0 2px #eef4ef;
}
.ladder .rails{
  position:absolute; left:26px; right:26px; top:16px; bottom:16px;
}
.rail{ position:absolute; top:0; bottom:0; width:8px; background:#c9d9ce; border-radius:10px; }
.rail.left{ left:0 } .rail.right{ right:0 }
.rungs{ position:absolute; left:0; right:0; top:0; bottom:0; }
.rung{
  position:absolute; left:0; right:0; height:10px; background:#c9d9ce; border-radius:8px;
  transform:translateY(-50%);
}
.rung.active{ background:var(--pine) }
.rung.passed{ background:#9fd5b0 }
.climber{
  position:absolute; left:50%; transform:translate(-50%, 0);
  font-size:34px; line-height:1; transition:top .5s ease-in-out;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.12));
}
.progressbar{ width:100%; height:12px; background:#eef4ef; border-radius:999px; overflow:hidden; }
.progressbar > div{ height:100%; width:0%; background:var(--pine); transition:width .4s ease; }
.qcard{ background:#fff; border:2px solid #e7eee9; border-radius:16px; padding:16px; }
.qpill{ display:inline-block; padding:4px 10px; border-radius:999px; background:#eaf6ef; color:var(--pine); font-weight:700; font-size:.85rem }
.bigbtn{ font-size:1.05rem; padding:12px 14px }
.shake{ animation:shake .25s linear 2 }
@keyframes shake{ 0%{transform:translateX(0)} 25%{transform:translateX(-6px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-4px)} 100%{transform:translateX(0)} }
.pop{ animation:pop .28s ease-out 1 }
@keyframes pop{ 0%{transform:scale(.9)} 100%{transform:scale(1)} }
.confetti{ position:fixed; left:0; top:0; width:100%; height:0; pointer-events:none }
.confetti b{ position:absolute; top:-10px }


/* ===== Two-Player Ladder Additions ===== */
.scorebar{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px }
.score{
  background:#fff; border:2px solid #e7eee9; border-radius:12px; padding:10px;
  display:flex; justify-content:space-between; align-items:center; gap:8px; font-weight:700
}
.tag{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-weight:800 }
.tag.p1{ background:#e7f6ee; color:#1e7a46 }
.tag.p2{ background:#e7f0fb; color:#1d51b8 }
.pb{ width:100%; height:10px; background:#eef4ef; border-radius:999px; overflow:hidden }
.pb > div{ height:100%; width:0%; transition:width .35s ease }
.pb .p1{ background:#1e7a46 } .pb .p2{ background:#1d51b8 }
.turn{ padding:6px 10px; border-radius:999px; background:#fffcec; border:1px solid #f3e2a2; font-weight:700; }
.qcard.p1{ border-color:#1e7a46 } .qcard.p2{ border-color:#1d51b8 }
.climber.p1{ left:36%; } .climber.p2{ left:64%; }
.rung.p1{ box-shadow: inset 0 0 0 3px #1e7a46aa }
.rung.p2{ box-shadow: inset 0 0 0 3px #1d51b8aa }
.rung.both{ box-shadow: inset 0 0 0 3px #1e7a46aa, inset 0 0 0 6px #1d51b8aa }
.avatar{ font-size:22px }


/* ===== Memory Game Enhancements ===== */
.mem-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.mem-stats{ display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-weight:700 }
.mem-grid{ display:grid; grid-template-columns:repeat(4, minmax(90px,1fr)); gap:12px }
@media(min-width:700px){ .mem-grid{ grid-template-columns:repeat(6, minmax(100px,1fr)) } }
.mem-card{
  perspective:1000px; cursor:pointer; border-radius:14px;
}
.mem-inner{
  position:relative; width:100%; padding-top:100%; transform-style:preserve-3d; transition:transform .38s ease;
}
.mem-card.open .mem-inner, .mem-card.solved .mem-inner{ transform:rotateY(180deg) }
.mem-face{
  position:absolute; inset:0; display:grid; place-items:center;
  backface-visibility:hidden; border-radius:14px; border:2px solid #e3ece5;
}
.mem-front{
  background:#fff;
  transform:rotateY(180deg);
  font-weight:800; font-size:1rem; padding:8px; text-align:center;
}
.mem-back{
  background:linear-gradient(180deg,#d8efe1,#c9e9d6);
  color:#124a2d; font-size:1.6rem; font-weight:900;
}
.mem-card.solved .mem-front{ background:#e8fff0; border-color:#bfe9c9 }
.mem-card.miss{ animation:shake .25s linear 2 }
@keyframes shake{ 0%{transform:translateX(0)} 25%{transform:translateX(-6px)} 50%{transform:translateX(6px)} 75%{transform:translateX(-4px)} 100%{transform:translateX(0)} }
.mem-progress{ width:100%; height:12px; background:#eef4ef; border-radius:999px; overflow:hidden }
.mem-progress > div{ height:100%; width:0%; background:var(--pine); transition:width .4s ease }
.mem-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#eaf6ef; color:var(--pine); font-weight:800 }
.timer{ padding:4px 10px; border-radius:999px; background:#fffcec; border:1px solid #f3e2a2; font-weight:700 }