:root{
  --wood-0:#2a1a0e; --wood-1:#5a3a22; --wood-2:#8a5a35; --wood-3:#b07e4e; --wood-hi:#d9b483;
  --gold-0:#7a4e10; --gold-1:#c8922e; --gold-2:#f0c766; --gold-hi:#ffe6ab;
  --silver-0:#5c626b; --silver-1:#9aa2ad; --silver-2:#cfd6df; --silver-hi:#eef2f7;
  --cream:#f4e9cf; --ink:#1c130a; --line:#2c1c0e;
  --ok:#4fae6a; --bad:#c8502e;
  --shadow: 0 10px 30px rgba(10,5,2,.55);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:'Trebuchet MS',Georgia,serif;
  color:var(--cream);
  background:
    radial-gradient(1100px 700px at 50% -5%, rgba(255,225,170,.10), transparent 55%),
    linear-gradient(180deg, rgba(12,16,9,.72), rgba(8,11,6,.9)),
    url('assets/bg.jpg') center center / cover fixed no-repeat,
    linear-gradient(180deg,#16200f,#0c1207);
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  padding:10px 10px 20px; overflow-x:hidden; user-select:none;
}

/* ---------- cabeçalho ---------- */
.title{ text-align:center; margin:2px 0 2px; }
.title img{ width:min(460px,84vw); height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.65)); }

/* ---------- HUD ---------- */
.hud{ width:min(860px,94vw,74vh); display:flex; align-items:center; gap:8px; margin:10px 0 6px; }
.badge{
  display:flex; align-items:center; gap:8px; padding:6px 13px; border-radius:12px;
  background:linear-gradient(180deg,var(--wood-3),var(--wood-1) 70%,var(--wood-0));
  border:2px solid transparent;
  border-image:linear-gradient(180deg,var(--gold-2),var(--gold-0)) 1;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,235,200,.28), inset 0 -3px 7px rgba(30,15,4,.5);
  font-weight:bold; font-size:16px; white-space:nowrap; color:var(--gold-2);
}
.badge .ico{ width:22px;height:22px;display:block; }
.badge.jaguar .ico{ color:var(--gold-2); } .badge.dogs .ico{ color:var(--silver-2); }
.badge .num{ font-variant-numeric:tabular-nums; }
.badge .max{ font-size:12px; opacity:.65; }
.status{
  flex:1; text-align:center; font-size:clamp(13px,3.4vw,17px); min-height:22px;
  text-shadow:0 2px 5px rgba(0,0,0,.5); line-height:1.2;
}
.status .who{ font-weight:bold; }
.status .who.jaguar{ color:var(--gold-2); } .status .who.dogs{ color:var(--silver-2); }

/* ---------- tabuleiro ---------- */
.board-wrap{ width:min(860px,94vw,74vh); position:relative; filter:drop-shadow(0 18px 30px rgba(8,4,1,.6)); }
canvas#board{ width:100%; height:auto; display:block; border-radius:20px; touch-action:none; }
.stop-chain{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); }

/* ---------- botões ---------- */
button.wbtn{
  font:inherit; font-weight:bold; color:var(--cream); cursor:pointer; letter-spacing:.02em;
  background:linear-gradient(180deg,var(--wood-3),var(--wood-2) 55%,var(--wood-0));
  border:none; border-radius:13px; padding:11px 18px; font-size:15px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,235,200,.28), inset 0 -3px 7px rgba(30,15,4,.5);
  transition:transform .12s ease, filter .12s ease;
}
button.wbtn:hover{ filter:brightness(1.1); }
button.wbtn:active{ transform:translateY(2px); }
button.wbtn:disabled{ opacity:.4; cursor:default; transform:none; filter:none; }
button.wbtn.gold{ color:#2a1806; background:linear-gradient(180deg,var(--gold-hi),var(--gold-1) 55%,var(--gold-0)); }
button.wbtn.silver{ color:#1a1e24; background:linear-gradient(180deg,var(--silver-hi),var(--silver-1) 55%,var(--silver-0)); }
.toolbar{ width:min(860px,94vw,74vh); display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; justify-content:center; align-items:center; }
.toolbar .wbtn{ flex:0 1 auto; min-width:120px; }
.imgbtn{ background:none; border:none; padding:0; cursor:pointer; line-height:0;
  transition:transform .12s ease, filter .12s ease; }
.imgbtn img{ height:clamp(46px,8vw,58px); width:auto; display:block;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.imgbtn:hover{ filter:brightness(1.08); }
.imgbtn:active{ transform:translateY(2px); }
.imgbtn:disabled{ opacity:.4; cursor:default; transform:none; }

/* ---------- overlays ---------- */
.overlay{
  position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(18,10,3,.78); backdrop-filter:blur(4px);
}
.card{
  width:100%; max-width:430px; text-align:center; border-radius:20px; padding:26px 26px 22px;
  background:linear-gradient(180deg,var(--wood-3),var(--wood-1) 55%,var(--wood-0));
  box-shadow:0 24px 60px rgba(0,0,0,.65), inset 0 2px 0 rgba(255,235,200,.3), inset 0 -6px 12px rgba(30,15,4,.55);
}
.card h2{ margin:0 0 6px; font-size:26px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-1));
  -webkit-background-clip:text;background-clip:text;color:transparent; }
.card p{ margin:4px 0 16px; font-size:13.5px; line-height:1.6; color:rgba(244,233,207,.86); }
.card .choices{ display:flex; flex-direction:column; gap:10px; }
.card .choices .row{ display:flex; gap:10px; }
.card .choices .row button{ flex:1; }
.card input{
  width:100%; font:inherit; font-size:22px; text-align:center; letter-spacing:.4em; text-transform:uppercase;
  padding:12px; border-radius:12px; border:2px solid rgba(255,235,200,.25);
  background:rgba(20,12,5,.55); color:var(--gold-2); font-weight:bold; margin-bottom:4px;
}
.rules{ font-size:12px; text-align:left; line-height:1.6; color:rgba(244,233,207,.78);
  border-top:1px solid rgba(244,233,207,.2); margin-top:16px; padding-top:12px; }
.room-code{ font-size:40px; font-weight:900; letter-spacing:.3em; color:var(--gold-2);
  text-shadow:0 2px 0 rgba(0,0,0,.4); margin:6px 0; }
.hint{ font-size:12px; color:rgba(244,233,207,.6); margin-top:8px; }
.err{ color:#ffb59d; font-size:13px; min-height:16px; margin-top:6px; }
.spin{ display:inline-block; width:16px;height:16px; border:3px solid rgba(255,235,200,.3);
  border-top-color:var(--gold-2); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-3px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.hidden{ display:none !important; }
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:linear-gradient(180deg,var(--wood-2),var(--wood-0)); color:var(--cream);
  padding:10px 18px; border-radius:12px; box-shadow:var(--shadow); font-size:14px;
  opacity:0; transition:opacity .3s, transform .3s; z-index:60; pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }