:root {
    --parch:#f3e6c4; --parch-d:#d9c594; --ink:#3a2a16; --wood:#6b4526; --wood-d:#3f2714;
    --leaf:#3f9b4f; --leaf-l:#b7e04a; --apple:#d6402f;
  }
  * { box-sizing:border-box; }
  body {
    margin:0; min-height:100vh; color:var(--parch);
    font-family:Georgia,'Palatino Linotype',Palatino,serif;
    background:
      radial-gradient(ellipse at 20% 0%, rgba(120,190,110,.18), transparent 55%),
      radial-gradient(ellipse at 90% 100%, rgba(240,200,110,.12), transparent 50%),
      linear-gradient(160deg,#21402f 0%,#13271d 60%,#0d1b14 100%);
    display:flex; justify-content:center; padding:16px;
  }
  .stage { width:min(100%,520px); display:flex; flex-direction:column; gap:12px; align-items:stretch; }
  header { text-align:center; }
  h1 { margin:4px 0 0; font-size:44px; letter-spacing:.04em; font-weight:700;
       background:linear-gradient(180deg,#f7ecc8,#d9b25a); -webkit-background-clip:text; background-clip:text; color:transparent;
       text-shadow:0 2px 0 rgba(0,0,0,.25); }
  .sub { margin:0; font-style:italic; opacity:.75; letter-spacing:.18em; font-size:13px; text-transform:uppercase; }
  .orn { height:10px; margin:6px auto 0; width:60%;
         background:radial-gradient(circle,#d9b25a 2px,transparent 3px) center/14px 10px repeat-x; opacity:.6; }

  .hud { display:flex; gap:8px; }
  .chip { flex:1; text-align:center; padding:6px 8px; border-radius:10px; color:var(--ink);
          background:linear-gradient(180deg,var(--parch),var(--parch-d)); border:2px solid var(--wood);
          box-shadow:0 2px 0 var(--wood-d), inset 0 1px 0 rgba(255,255,255,.5); font-size:13px; }
  .chip b { display:block; font-size:22px; line-height:1.1; }

  .progress { color:var(--parch); }
  .progress .row { display:flex; justify-content:space-between; font-size:13px; opacity:.85; margin-bottom:4px; letter-spacing:.04em; }
  .track { position:relative; height:22px; border-radius:999px; background:#0c1912; border:3px solid var(--wood);
           box-shadow:inset 0 3px 6px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.12); overflow:hidden; }
  .fill { position:absolute; inset:0 auto 0 0; width:0; border-radius:999px; transition:width .25s ease-out;
          background:
            repeating-linear-gradient(115deg, rgba(0,0,0,.14) 0 6px, transparent 6px 12px),
            linear-gradient(90deg,var(--leaf),var(--leaf-l));
          box-shadow:0 0 12px rgba(183,224,74,.6); }
  .fill::after { content:""; position:absolute; right:2px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%;
                 background:radial-gradient(circle at 35% 35%,#e6ff9a,#7cc63a); box-shadow:0 0 6px rgba(0,0,0,.4); }
  .track.full .fill { background:linear-gradient(90deg,#e0b13a,#fff0a0); box-shadow:0 0 16px rgba(255,220,100,.9); }

  .board { position:relative; border-radius:18px; padding:10px;
           background:linear-gradient(135deg,#8a5d33,var(--wood) 45%,var(--wood-d));
           box-shadow:0 14px 30px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.35); }
  canvas { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:10px; box-shadow:inset 0 0 0 2px rgba(0,0,0,.4); touch-action:none; }
  .overlay { position:absolute; inset:10px; border-radius:10px; display:flex; align-items:center; justify-content:center;
             background:rgba(8,20,12,.55); backdrop-filter:blur(2px); }
  .overlay[hidden] { display:none; }
  .card { width:min(86%,320px); text-align:center; padding:20px 18px; color:var(--ink); border-radius:14px;
          background:radial-gradient(ellipse at 30% 10%,#fbf1d4,var(--parch) 55%,var(--parch-d));
          border:3px solid var(--wood); box-shadow:0 10px 24px rgba(0,0,0,.5), inset 0 0 22px rgba(120,80,30,.25); }
  .card h2 { margin:0 0 6px; font-size:28px; }
  .card p { margin:0 0 14px; font-size:15px; line-height:1.35; }
  button { font:inherit; font-weight:700; padding:10px 22px; border-radius:999px; cursor:pointer; color:#10260f;
           border:2px solid #2b6a2e; background:linear-gradient(180deg,#c8f27a,#6cbf3c);
           box-shadow:0 3px 0 #2b6a2e, 0 6px 10px rgba(0,0,0,.3); }
  button:active { transform:translateY(2px); box-shadow:0 1px 0 #2b6a2e; }
  .card input { width:100%; font:inherit; font-size:17px; text-align:center; padding:9px 12px; margin:0 0 12px; color:var(--ink);
                border-radius:10px; border:2px solid var(--wood); background:#fffaf0; box-shadow:inset 0 2px 4px rgba(0,0,0,.15); }
  .card .err { color:#a3261b; font-size:13px; min-height:16px; margin:-6px 0 8px; }
  .lb { padding:12px 14px; border-radius:14px; color:var(--ink);
        background:radial-gradient(ellipse at 30% 0%,#fbf1d4,var(--parch) 60%,var(--parch-d));
        border:3px solid var(--wood); box-shadow:0 8px 18px rgba(0,0,0,.4), inset 0 0 22px rgba(120,80,30,.22); }
  .lb h3 { margin:0 0 6px; font-size:20px; text-align:center; }
  .lb ol { list-style:none; margin:0; padding:0; counter-reset:r; }
  .lb li { display:flex; gap:8px; align-items:baseline; padding:4px 6px; border-bottom:1px dashed rgba(107,69,38,.35); counter-increment:r; font-size:15px; }
  .lb li::before { content:counter(r); width:20px; text-align:right; font-weight:700; color:var(--wood); }
  .lb li:nth-child(1)::before { content:"🥇"; } .lb li:nth-child(2)::before { content:"🥈"; } .lb li:nth-child(3)::before { content:"🥉"; }
  .lb li.me { background:rgba(120,190,60,.25); border-radius:6px; font-weight:700; }
  .lb .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lb .sc { font-weight:700; } .lb .rd { opacity:.65; font-size:13px; min-width:64px; text-align:right; }
  .lb .empty { text-align:center; opacity:.7; font-style:italic; padding:8px; }
  .hint { text-align:center; font-size:13px; opacity:.65; font-style:italic; }