:root{
    --felt:#3c7d5b;
    --felt-deep:#274d3a;
    --paper:#f6ecdf;
    --paper-edge:#e7d8c4;
    --ink:#3d2c26;
    --ink-soft:#7a655b;
    --pig:#e8899a;
    --pig-deep:#cf6b7e;
    --gold:#edb230;
    --gold-deep:#c98f14;
    --brick:#c65b4b;
    --shadow:0 10px 30px rgba(20,40,30,.28);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;height:100%;overflow:hidden;}
  body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:var(--felt-deep);
    position:fixed;inset:0;
    -webkit-user-select:none;user-select:none;
  }
  #stage{position:fixed;top:0;left:0;display:block;}
  #vignette{position:fixed;inset:0;pointer-events:none;
    background:radial-gradient(120% 90% at 50% 32%, transparent 55%, rgba(15,35,25,.55) 100%);}

  /* ---------- shared panel look ---------- */
  .sheet{
    background:linear-gradient(180deg,var(--paper),var(--paper-edge));
    border-radius:26px 26px 0 0;
    box-shadow:var(--shadow);
    border-top:3px solid #fff8;
  }
  button{font-family:inherit;cursor:pointer;border:none;color:inherit;}
  button:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
  .btn{
    width:100%;padding:17px 18px;border-radius:16px;font-size:19px;font-weight:800;
    letter-spacing:.2px;transition:transform .08s ease, filter .15s ease, background .15s ease;
    display:flex;align-items:center;justify-content:center;gap:10px;line-height:1;
  }
  .btn:active{transform:translateY(2px);}
  .btn:disabled{opacity:.42;cursor:default;transform:none;}
  .btn-primary{background:linear-gradient(180deg,#f39ba9,var(--pig));color:#fff;
    box-shadow:0 5px 0 var(--pig-deep);}
  .btn-primary:active{box-shadow:0 3px 0 var(--pig-deep);}
  .btn-gold{background:linear-gradient(180deg,#f4c34a,var(--gold));color:#4a3410;
    box-shadow:0 5px 0 var(--gold-deep);}
  .btn-gold:active{box-shadow:0 3px 0 var(--gold-deep);}
  .btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--paper-edge);}

  /* ---------- setup ---------- */
  #setup{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:flex-end;z-index:20;}
  #setup .hero{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;padding:24px;}
  .title{font-size:clamp(40px,13vw,62px);font-weight:900;letter-spacing:-1.5px;color:#fff;
    text-shadow:0 3px 0 rgba(0,0,0,.18);line-height:.95;}
  .title .b{color:var(--gold);}
  .pack{margin-top:14px;display:inline-flex;align-items:center;gap:8px;
    background:rgba(237,178,48,.92);color:#4a3410;font-weight:900;font-size:14px;
    letter-spacing:1.5px;text-transform:uppercase;padding:7px 16px;border-radius:999px;
    box-shadow:0 3px 12px rgba(20,40,30,.25);}
  .tag{margin-top:12px;color:#eafff2;font-size:16px;font-weight:600;opacity:.92;
    background:rgba(20,45,32,.35);padding:8px 14px;border-radius:999px;backdrop-filter:blur(3px);}
  .disclaimer{margin:13px 4px 0;text-align:center;font-size:11px;line-height:1.45;
    font-weight:600;color:var(--ink-soft);opacity:.85;}
  #setup .panel{padding:22px 20px calc(22px + env(safe-area-inset-bottom));}
  .lbl{font-size:13px;font-weight:800;color:var(--ink-soft);margin:0 2px 8px;}
  .players{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
  .prow{display:flex;gap:10px;align-items:center;}
  .prow .dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px #fff inset;}
  .prow input{flex:1;padding:14px 14px;border-radius:13px;border:2px solid var(--paper-edge);
    background:#fff;font-size:17px;font-weight:700;color:var(--ink);min-width:0;}
  .prow input:focus{outline:none;border-color:var(--pig);}
  .prow .x{width:42px;height:46px;border-radius:12px;background:#fff;color:var(--ink-soft);
    box-shadow:inset 0 0 0 2px var(--paper-edge);font-size:20px;font-weight:800;flex:0 0 auto;}
  .setup-row{display:flex;gap:10px;margin-bottom:14px;}
  .setup-row .btn{padding:13px;font-size:15px;}
  .goalrow{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
  .goalrow .lbl{margin:0;}
  .chips{display:flex;gap:8px;margin-left:auto;}
  .chip{padding:9px 16px;border-radius:999px;font-weight:800;font-size:15px;background:#fff;
    color:var(--ink-soft);box-shadow:inset 0 0 0 2px var(--paper-edge);}
  .chip.on{background:var(--ink);color:#fff;box-shadow:none;}
  .optrow{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
  .opttext{flex:1;min-width:0;}
  .opttext .lbl{margin:0 0 3px;}
  .optdesc{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);line-height:1.3;}
  .switch{flex:0 0 auto;width:54px;height:32px;border-radius:999px;background:#fff;
    box-shadow:inset 0 0 0 2px var(--paper-edge);position:relative;transition:background .18s ease;}
  .switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
    background:var(--ink-soft);box-shadow:0 1px 3px rgba(0,0,0,.25);
    transition:transform .18s ease, background .18s ease;}
  .switch.on{background:linear-gradient(180deg,#f4c34a,var(--gold));box-shadow:none;}
  .switch.on .knob{transform:translateX(22px);background:#fff;}

  /* ---------- game hud ---------- */
  #hud{position:fixed;left:0;right:0;bottom:0;z-index:15;display:none;flex-direction:column;}
  #topbar{position:fixed;top:0;left:0;right:0;z-index:16;display:none;
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
    justify-content:space-between;align-items:center;pointer-events:none;}
  .leadchip{pointer-events:auto;background:rgba(20,45,32,.5);color:#eafff2;backdrop-filter:blur(4px);
    padding:7px 13px;border-radius:999px;font-weight:800;font-size:13px;display:flex;gap:7px;align-items:center;}
  .iconbtn{pointer-events:auto;width:38px;height:38px;border-radius:50%;background:rgba(20,45,32,.5);
    color:#eafff2;font-weight:800;font-size:17px;backdrop-filter:blur(4px);}

  #banner{position:fixed;left:50%;top:19%;transform:translate(-50%,-8px);z-index:17;
    display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;width:86%;max-width:420px;}
  #banner.show{opacity:1;transform:translate(-50%,0);}
  #banner .pill{font-weight:900;font-size:clamp(20px,6.5vw,30px);color:#fff;text-align:center;
    padding:12px 20px;border-radius:16px;box-shadow:var(--shadow);line-height:1.05;}
  .pill.good{background:linear-gradient(180deg,#f4c34a,var(--gold));color:#4a3410;}
  .pill.plain{background:linear-gradient(180deg,#5aa27c,var(--felt));}
  .pill.bad{background:linear-gradient(180deg,#d6705f,var(--brick));}
  #banner .sub{font-weight:800;font-size:15px;color:#fff;background:rgba(20,45,32,.45);
    padding:5px 12px;border-radius:999px;backdrop-filter:blur(3px);}

  #hud .panel{padding:18px 18px calc(16px + env(safe-area-inset-bottom));}
  .turnhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;}
  .whoami{font-size:23px;font-weight:900;display:flex;align-items:center;gap:9px;}
  .whoami .dot{width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 3px #fff inset;}
  .goal{font-size:13px;font-weight:800;color:var(--ink-soft);}
  .turnbox{display:flex;align-items:center;gap:14px;margin:8px 0 15px;}
  .turnnum{font-size:52px;font-weight:900;line-height:.9;color:var(--pig-deep);
    min-width:1.4em;text-align:right;font-variant-numeric:tabular-nums;}
  .turnnum.risk{color:var(--brick);}
  .turncap{font-size:13px;font-weight:800;color:var(--ink-soft);}
  .turncap b{display:block;font-size:15px;color:var(--ink);}
  .actions{display:flex;flex-direction:column;gap:11px;}
  .scoreboard{display:flex;gap:8px;overflow-x:auto;margin-top:15px;padding-bottom:2px;
    scrollbar-width:none;}
  .scoreboard::-webkit-scrollbar{display:none;}
  .scard{flex:0 0 auto;min-width:88px;background:#fff;border-radius:14px;padding:10px 12px;
    box-shadow:inset 0 0 0 2px var(--paper-edge);}
  .scard.cur{box-shadow:inset 0 0 0 3px var(--pig);}
  .scard .nm{font-size:12px;font-weight:800;color:var(--ink-soft);display:flex;gap:6px;align-items:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;}
  .scard .nm .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
  .scard .tot{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1;margin-top:3px;}

  /* ---------- win ---------- */
  #win{position:fixed;inset:0;z-index:30;display:none;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;padding:28px;
    background:radial-gradient(120% 90% at 50% 30%, rgba(60,125,91,.25), rgba(20,45,32,.82));}
  #win .crown{font-size:15px;font-weight:900;letter-spacing:2px;color:var(--gold);text-transform:uppercase;}
  #win .wname{font-size:clamp(44px,15vw,74px);font-weight:900;color:#fff;line-height:1;margin:6px 0 4px;
    text-shadow:0 3px 0 rgba(0,0,0,.2);}
  #win .wname::after{content:"";display:block;height:6px;width:70%;margin:14px auto 0;border-radius:99px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);}
  #win .wscore{color:#eafff2;font-weight:700;font-size:18px;margin-bottom:26px;}
  #win .btn{max-width:300px;}

  /* ---------- motion prompt ---------- */
  #motionPrompt{display:none;margin-bottom:11px;}
  #motionPrompt .btn{background:#fff;box-shadow:inset 0 0 0 2px var(--paper-edge);font-size:15px;padding:12px;}
  .hint{text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-top:11px;}

  @media (prefers-reduced-motion: reduce){
    .btn,#banner{transition:none;}
  }