:root{
  --night:#3A2118;
  --bar:#53342A;
  --ink:#FFF3E4;
  --muted:#D9B69C;
  --gold:#FFC168;
  --gold-dark:#C98A2E;
  --font:"Baloo 2", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--night)}
body{margin:0;color:var(--ink);font:16px/1.4 var(--font);padding-inline:14px;padding-block:8px 12px;-webkit-tap-highlight-color:transparent}
.app{max-width:1150px;margin-inline:auto;height:calc(100vh - 20px);height:calc(100dvh - 20px);min-height:340px;display:grid;grid-template-rows:auto 1fr;gap:8px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.back{color:var(--muted);text-decoration:none;font-weight:700;font-size:15px}
.back:hover{color:var(--ink)}
.title{margin:0;font-weight:800;font-size:clamp(1.2rem,3.4vw,1.8rem)}
.title span{color:var(--gold)}
.bar-actions{display:flex;gap:8px;align-items:center}
.count{background:var(--bar);border-radius:999px;padding:7px 16px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.icon-btn{width:42px;height:42px;border-radius:12px;border:0;background:var(--bar);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.icon-btn span{display:grid;place-items:center}
.icon-btn span[hidden]{display:none}
.icon-btn svg{width:22px;height:22px}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.stage{position:relative;min-height:0;border-radius:18px;overflow:hidden;background:#FFE3C8}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.role{position:absolute;left:50%;top:10px;translate:-50% 0;margin:0;background:rgba(58,33,24,.78);color:#fff;border-radius:999px;padding:7px 20px;font-weight:800;white-space:nowrap;pointer-events:none;font-size:clamp(.95rem,2.6vw,1.2rem)}
.role[hidden]{display:none}
.tip{display:none;margin:0;text-align:center;color:var(--muted);font-size:13px;font-weight:700}

@media (max-width:760px) and (orientation:portrait){
  .app{grid-template-rows:auto 1fr auto}
  .tip{display:block}
}
@media (max-width:640px){
  .count{padding:6px 12px;font-size:14px}
}