/* ═══════════════════════════════════════════════════════════
   CLAUDUSSEUM — sand, bronze and bad decisions
   ═══════════════════════════════════════════════════════════ */
@font-face{font-family:'Cinzel';src:url('../assets/fonts/cinzel-latin.woff2') format('woff2');
  font-weight:400 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cinzel';src:url('../assets/fonts/cinzel-latin-ext.woff2') format('woff2');
  font-weight:400 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'CinzelDec';src:url('../assets/fonts/cinzeldec-latin.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'KenneyNarrow';src:url('../assets/fonts/KenneyFutureNarrow.ttf') format('truetype');font-display:swap;}

:root{
  --sand:#d9b98a; --sand-lit:#f0dcb4; --sand-dark:#8d7048;
  --stone:#3a3128; --stone-lit:#5b4c3c; --ink:#150e07;
  --gold:#e8c46a; --gold-hot:#ffe9a8; --gold-dim:#9a7f3d;
  --rome:#c2402f; --rome-lit:#f2705c; --rome-dark:#6d1d15;
  --sparta:#3f7ea6; --sparta-lit:#79bcdf; --sparta-dark:#1c4359;
  --blood:#8e1f14;
  --ui-shadow:0 .6rem 1.6rem rgba(0,0,0,.6);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--ink)}
body{
  font-family:'Cinzel',Georgia,'Times New Roman',serif; color:var(--sand-lit);
  overscroll-behavior:none; touch-action:none; user-select:none; -webkit-user-select:none;
  text-rendering:optimizeLegibility;
}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ── screens ─────────────────────────────────────────── */
.screen{
  position:fixed;inset:0;display:none;place-items:center;z-index:40;
  padding:calc(1rem + var(--safe-t)) calc(1rem + var(--safe-r)) calc(1rem + var(--safe-b)) calc(1rem + var(--safe-l));
  background:radial-gradient(ellipse at 50% 35%,rgba(60,40,20,.55),rgba(8,5,2,.94) 70%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .35s ease both;
}
/* The title and loading screens sit over the arena rather than over play, so
   they get a much lighter veil — the building is the best thing on screen and
   burying it under 94% black was a waste of it. */
#menu, #loader, #credits{
  background:
    radial-gradient(ellipse at 50% 40%, rgba(20,12,4,.10), rgba(10,6,2,.62) 78%),
    linear-gradient(180deg, rgba(8,5,2,.42), rgba(8,5,2,.20) 40%, rgba(8,5,2,.66));
  backdrop-filter:blur(2.5px) saturate(1.05);-webkit-backdrop-filter:blur(2.5px) saturate(1.05);
}
/* …which means the text on them needs its own contrast */
#menu .subtitle, #loader .loadtext{text-shadow:0 .12rem .5rem rgba(0,0,0,.95)}
#menu .menu-label{text-shadow:0 .1rem .4rem rgba(0,0,0,.95)}
#menu .linkbtn{text-shadow:0 .1rem .4rem rgba(0,0,0,.95)}
.screen.active{display:grid}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── title ───────────────────────────────────────────── */
.title{
  font-family:'CinzelDec','Cinzel',serif;font-weight:700;letter-spacing:.14em;
  font-size:clamp(1.9rem,7vw,4.4rem);line-height:1;
  background:linear-gradient(180deg,var(--gold-hot) 0%,var(--gold) 42%,#7d5f22 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .18rem .3rem rgba(0,0,0,.85));
  text-align:center;
}
.title.big{font-size:clamp(2.2rem,9vw,5.6rem)}
.subtitle{
  text-align:center;letter-spacing:.34em;text-transform:uppercase;
  font-size:clamp(.58rem,1.7vw,.82rem);color:#b99a68;margin-top:.7rem;
}

/* ── loader ──────────────────────────────────────────── */

.loader-inner{text-align:center;max-width:32rem;width:100%}
.laurel{font-size:clamp(2.5rem,10vw,4rem);filter:drop-shadow(0 0 2rem rgba(232,196,106,.35));animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
.loadbar{margin:2rem auto 0;width:min(22rem,80vw);height:.55rem;background:#2a2016;border:1px solid #5a4526;border-radius:99px;overflow:hidden}
.loadbar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-dim),var(--gold-hot));transition:width .3s ease;box-shadow:0 0 .8rem rgba(232,196,106,.6)}
.loadtext{margin-top:.9rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#8d7048;min-height:1.2em}

/* ── menu ────────────────────────────────────────────── */
.menu-inner{width:min(60rem,100%);max-height:100%;overflow-y:auto;overflow-x:hidden;text-align:center;padding:.5rem;
  scrollbar-width:thin;scrollbar-color:#5a4526 transparent}
.menu-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.7rem;margin:clamp(1rem,3vh,2.2rem) 0 1.2rem}
.mcard{
  background:linear-gradient(170deg,rgba(70,56,36,.85),rgba(28,21,13,.9));
  border:1.5px solid #5a4526;border-radius:.5rem;padding:1rem .8rem;cursor:pointer;color:var(--sand-lit);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;transition:.18s;font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,225,170,.14),var(--ui-shadow);
}
.mcard:hover,.mcard:focus-visible{border-color:var(--gold);transform:translateY(-3px);outline:none}
.mcard.on{border-color:var(--gold-hot);background:linear-gradient(170deg,rgba(120,90,40,.9),rgba(48,34,16,.95));
  box-shadow:inset 0 1px 0 rgba(255,235,190,.3),0 0 0 1px var(--gold-dim),0 .7rem 1.8rem rgba(0,0,0,.6)}
.mcard-ico{width:1.9rem;height:1.9rem;object-fit:contain;
  /* Kenney's icons ship white; tint them to the gold the rest of the UI uses */
  filter:brightness(0) saturate(100%) invert(83%) sepia(24%) saturate(720%) hue-rotate(348deg) brightness(97%) contrast(89%);}
.mcard-t{font-weight:700;letter-spacing:.08em;font-size:.95rem}
.mcard-d{font-size:.68rem;color:#a78e63;letter-spacing:.04em}

.menu-row{display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;margin:.55rem 0}
.menu-label{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:#8d7048}
.seg{display:inline-flex;border:1.5px solid #5a4526;border-radius:.4rem;overflow:hidden;background:rgba(20,14,8,.7)}
.seg button{
  background:none;border:none;color:#a78e63;padding:.45rem .8rem;font-family:inherit;font-size:.72rem;
  letter-spacing:.1em;cursor:pointer;transition:.15s;border-right:1px solid #3d2f1c;
}
.seg button:last-child{border-right:none}
.seg button.on{background:linear-gradient(180deg,var(--gold-dim),#6b5322);color:#1a1208;font-weight:700}
.seg button:hover:not(.on){background:rgba(232,196,106,.12);color:var(--gold-hot)}
#aiOpts{transition:.2s;overflow:hidden}
#aiOpts.hide{opacity:0;max-height:0;margin:0;pointer-events:none}

/* ── buttons ─────────────────────────────────────────── */
.bigbtn{
  display:block;margin:1.3rem auto 0;padding:.85rem 2.4rem;min-height:3rem;
  font-family:'Cinzel',serif;font-weight:900;font-size:clamp(.85rem,2.4vw,1.1rem);letter-spacing:.18em;
  color:#2a1a06;cursor:pointer;border:none;border-radius:.4rem;
  background:linear-gradient(180deg,var(--gold-hot),var(--gold) 45%,#a5822f 100%);
  box-shadow:0 .3rem 0 #6b5322,0 .8rem 1.6rem rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4);
  transition:.12s;
}
.bigbtn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 .45rem 0 #6b5322,0 1rem 2rem rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.bigbtn:active{transform:translateY(2px);box-shadow:0 .1rem 0 #6b5322,0 .3rem .8rem rgba(0,0,0,.5)}
.btn{
  padding:.6rem 1.3rem;min-height:2.6rem;background:linear-gradient(180deg,#5b4c3c,#332920);
  border:1.5px solid #6b5a45;border-radius:.35rem;color:var(--sand-lit);cursor:pointer;
  font-family:inherit;font-size:.8rem;letter-spacing:.12em;transition:.15s;
}
.btn:hover{border-color:var(--gold);background:linear-gradient(180deg,#6b5a45,#3d3126)}
.btn.wide{display:block;width:100%;margin-top:.6rem}
.btn.danger{border-color:#7d3226;color:#e39182}
.btn.danger:hover{background:linear-gradient(180deg,#7d3226,#4a1c14);color:#ffd9d0}
.linkbtn{background:none;border:none;color:#8d7048;font-family:inherit;font-size:.72rem;letter-spacing:.14em;
  cursor:pointer;padding:.5rem .7rem;text-decoration:underline dotted transparent;transition:.15s}
.linkbtn:hover{color:var(--gold-hot);text-decoration-color:var(--gold-dim)}
.menu-foot{margin-top:1.2rem;display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}

/* ── panels ──────────────────────────────────────────── */
.panel{
  width:min(30rem,100%);max-height:100%;padding:clamp(1.2rem,4vw,2rem);text-align:center;
  background:linear-gradient(170deg,rgba(58,49,40,.96),rgba(21,14,7,.97));
  border:1.5px solid #5a4526;border-radius:.6rem;box-shadow:var(--ui-shadow),inset 0 1px 0 rgba(255,225,170,.12);
}
.panel.wide{width:min(52rem,100%)}
.panel.scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5a4526 transparent}
/* a long reference panel shouldn't hide its own way out */
.panel.scroll > .bigbtn{position:sticky;bottom:0;z-index:2}
.panel.scroll > .bigbtn::before{
  content:'';position:absolute;left:-50vw;right:-50vw;top:-1.4rem;bottom:-1.4rem;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(18,12,6,.92) 55%);pointer-events:none;
}
.panel h2{font-family:'Cinzel',serif;font-weight:900;letter-spacing:.16em;font-size:clamp(1rem,3.4vw,1.5rem);
  color:var(--gold);margin-bottom:.8rem}
.panel h2.mt{margin-top:1.6rem}
.ptext{font-size:.82rem;line-height:1.65;color:#b99a68;margin-bottom:1.1rem}
.ptext em{color:var(--gold-hot);font-style:normal}

.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.8rem;text-align:left}
.how-item{background:rgba(0,0,0,.28);border-left:2px solid var(--gold-dim);padding:.7rem .9rem;border-radius:.25rem}
.how-item h3{font-size:.74rem;letter-spacing:.12em;color:var(--gold);margin-bottom:.35rem;text-transform:uppercase}
.how-item p{font-size:.76rem;line-height:1.55;color:#ad9066}
.how-item em{color:var(--gold-hot);font-style:italic}

.ctrl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.7rem;text-align:left}
.ctrl-blk{background:rgba(0,0,0,.28);padding:.7rem .9rem;border-radius:.25rem;border-left:2px solid #5a4526}
.ctrl-blk h4{font-size:.7rem;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;margin-bottom:.5rem}
.ctrl-line{display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:#ad9066;margin:.3rem 0;flex-wrap:wrap}
.ctrl-line img{height:1.5rem;width:auto;image-rendering:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.ctrl-line .kk{background:#2a2016;border:1px solid #5a4526;border-radius:.2rem;padding:.1rem .4rem;
  font-family:'KenneyNarrow',monospace;font-size:.7rem;color:var(--gold-hot)}

.credits-list{text-align:left;font-size:.76rem;line-height:1.9;color:#a78e63;list-style:none}
.credits-list li{padding-left:1rem;position:relative}
.credits-list li::before{content:'✦';position:absolute;left:0;color:var(--gold-dim);font-size:.6rem;top:.45rem}
.credits-list b{color:var(--gold)}
.credits-list i{color:#c9ab7b;font-style:italic}

.codebox{display:flex;gap:.5rem;justify-content:center;margin-bottom:.4rem}
#roomInput{
  flex:1;max-width:12rem;background:#1a1208;border:1.5px solid #5a4526;border-radius:.35rem;
  color:var(--gold-hot);font-family:'KenneyNarrow',monospace;font-size:1.5rem;letter-spacing:.3em;
  text-align:center;padding:.6rem .4rem;text-transform:uppercase;min-height:3rem;
}
#roomInput:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,196,106,.18)}
.netstatus{font-size:.72rem;letter-spacing:.1em;color:#8d7048;margin:.8rem 0;min-height:2.4em;line-height:1.5}
.netstatus.err{color:#e39182}
.netstatus.ok{color:#8fd08a}

.hand-crest,.tri-crest{font-size:3rem;margin-bottom:.4rem;filter:drop-shadow(0 .3rem .6rem rgba(0,0,0,.7))}
.tri-crest{font-size:4rem;animation:breathe 2.6s ease-in-out infinite}
.tri-stats{display:grid;gap:.35rem;margin:1rem 0;font-size:.76rem;color:#ad9066;text-align:left}
.tri-stats div{display:flex;justify-content:space-between;border-bottom:1px dotted #3d2f1c;padding:.25rem 0}
.tri-stats b{color:var(--gold-hot)}

/* ═══════════ HUD ═══════════════════════════════════════ */
.hud{position:fixed;inset:0;z-index:20;pointer-events:none;display:none}
.hud.on{display:block}
.hud>*{pointer-events:none}

/* top bar */
.hud-top{
  position:absolute;top:calc(.4rem + var(--safe-t));left:calc(.4rem + var(--safe-l));right:calc(.4rem + var(--safe-r));
  display:flex;align-items:flex-start;justify-content:space-between;gap:.4rem;
}
.side-badge{
  display:flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:.35rem;
  background:linear-gradient(180deg,rgba(30,22,12,.86),rgba(12,8,4,.9));border:1.5px solid #5a4526;
  box-shadow:var(--ui-shadow);flex-wrap:wrap;max-width:42%;
}
.side-badge.left{border-left:3px solid var(--rome)}
.side-badge.right{border-right:3px solid var(--sparta);flex-direction:row-reverse}
.side-badge.act{border-color:var(--gold-hot);box-shadow:0 0 0 1px var(--gold-dim),0 0 1.2rem rgba(232,196,106,.3)}
.sb-crest{font-size:1.1rem;line-height:1}
.sb-name{font-size:.7rem;font-weight:900;letter-spacing:.16em}
.side-badge.left .sb-name{color:var(--rome-lit)}
.side-badge.right .sb-name{color:var(--sparta-lit)}
.sb-lives{display:flex;gap:.16rem;align-items:center}
.life{width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);box-shadow:0 0 .3rem rgba(232,196,106,.7);transition:.3s}
.life.dead{background:#3a2a1a;box-shadow:none;transform:scale(.7)}
.life.out{background:#6b2018;box-shadow:none;opacity:.5}

.round-plate{text-align:center;padding:.3rem .8rem;background:rgba(12,8,4,.75);border-radius:.3rem;
  border:1px solid #4a3a24;box-shadow:var(--ui-shadow);flex-shrink:0}
.round-no{font-family:'CinzelDec','Cinzel',serif;font-size:.78rem;letter-spacing:.2em;color:var(--gold)}
.round-phase{font-size:.56rem;letter-spacing:.2em;color:#8d7048;text-transform:uppercase;margin-top:.1rem}

/* announcer */
.announce{
  position:absolute;top:22%;left:50%;transform:translate(-50%,-50%) scale(.9);width:min(90vw,44rem);
  text-align:center;font-family:'CinzelDec','Cinzel',serif;font-weight:700;
  font-size:clamp(1.1rem,4.6vw,2.6rem);letter-spacing:.1em;line-height:1.2;
  color:var(--gold-hot);text-shadow:0 .15rem .5rem #000,0 0 2.4rem rgba(232,196,106,.5);
  opacity:0;transition:opacity .3s,transform .3s;
}
.announce.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.announce small{display:block;font-family:'Cinzel',serif;font-weight:400;
  font-size:.4em;letter-spacing:.26em;color:#c0a274;margin-top:.5rem;text-transform:uppercase}

/* duel bars */
.duel-bars{
  position:absolute;top:calc(3.6rem + var(--safe-t));left:50%;transform:translateX(-50%);
  width:min(94vw,50rem);display:flex;align-items:center;gap:.6rem;opacity:0;transition:opacity .3s;
}
.duel-bars.on{opacity:1}
.dbar{flex:1;min-width:0}
.dbar-head{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.2rem}
.dbar.right .dbar-head{justify-content:flex-end}
.dbar-name{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--gold-hot);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #000}
.dbar-tag{font-size:.54rem;letter-spacing:.14em;color:#a78e63;text-transform:uppercase;white-space:nowrap}
.dbar-track{height:.75rem;background:rgba(10,6,3,.85);border:1.5px solid #4a3a24;border-radius:99px;
  overflow:hidden;position:relative;box-shadow:inset 0 2px 4px rgba(0,0,0,.7)}
.dbar-fill,.dbar-ghost{position:absolute;top:0;bottom:0;transition:width .18s cubic-bezier(.2,.8,.3,1)}
.dbar-ghost{background:rgba(255,255,255,.28);transition:width .55s ease .12s}
.dbar.left .dbar-fill,.dbar.left .dbar-ghost{left:0}
.dbar.right .dbar-fill,.dbar.right .dbar-ghost{right:0}
.dbar-fill.a{background:linear-gradient(180deg,var(--rome-lit),var(--rome) 60%,var(--rome-dark))}
.dbar-fill.b{background:linear-gradient(180deg,var(--sparta-lit),var(--sparta) 60%,var(--sparta-dark))}
.dbar-fill.low{animation:pulseLow .5s ease-in-out infinite alternate}
@keyframes pulseLow{from{filter:brightness(1)}to{filter:brightness(1.7) saturate(1.4)}}
.dbar-vs{font-size:1.1rem;color:var(--gold-dim);text-shadow:0 1px 3px #000;flex-shrink:0}

/* pen */
.pen{
  position:absolute;bottom:calc(.4rem + var(--safe-b));left:calc(.4rem + var(--safe-l));right:calc(.4rem + var(--safe-r));
  pointer-events:auto;opacity:0;transform:translateY(1.2rem);transition:.28s;
}
.pen.on{opacity:1;transform:none}
.pen:not(.on){pointer-events:none}
.pen-label{text-align:center;font-size:.6rem;letter-spacing:.2em;color:#a78e63;text-transform:uppercase;
  margin-bottom:.35rem;text-shadow:0 1px 3px #000}
.pen-label b{color:var(--gold-hot)}
.pen-cards{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.gate{
  position:relative;width:clamp(3.1rem,8.6vw,4.4rem);aspect-ratio:.82;cursor:pointer;
  background:linear-gradient(175deg,#6b5a45,#2a2016 55%,#171008);
  border:1.5px solid #5a4526;border-radius:.3rem .3rem .2rem .2rem;
  box-shadow:var(--ui-shadow),inset 0 1px 0 rgba(255,225,170,.16);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:.25rem .15rem;transition:.16s;overflow:hidden;
}
.gate::before{ /* portcullis bars */
  content:'';position:absolute;inset:.22rem;border-radius:.15rem;
  background:repeating-linear-gradient(90deg,transparent 0 .22rem,rgba(90,69,38,.55) .22rem .3rem),
             repeating-linear-gradient(0deg,transparent 0 .5rem,rgba(90,69,38,.4) .5rem .58rem);
  pointer-events:none;transition:.25s;
}
.gate:hover{transform:translateY(-4px);border-color:var(--gold)}
.gate.sel{border-color:var(--gold-hot);transform:translateY(-7px) scale(1.04);
  box-shadow:0 0 0 2px var(--gold-dim),0 0 1.6rem rgba(232,196,106,.5),0 .8rem 1.6rem rgba(0,0,0,.6)}
.gate.sel::before{opacity:.15}
.gate.spent{opacity:.34;pointer-events:none;filter:grayscale(.8)}
.gate.spent::after{content:'✕';position:absolute;inset:0;display:grid;place-items:center;
  font-size:1.6rem;color:var(--blood);text-shadow:0 0 .6rem #000;font-family:sans-serif}
.gate.known{border-color:#7d6a4a}
.gate-num{position:absolute;top:.12rem;left:.28rem;font-family:'CinzelDec','Cinzel',serif;font-size:.6rem;
  color:var(--gold-dim);z-index:2;text-shadow:0 1px 2px #000}
.gate-ico{font-size:clamp(1.1rem,3.4vw,1.7rem);line-height:1;z-index:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8));
  margin-bottom:.1rem}
.gate-name{font-size:.46rem;letter-spacing:.06em;color:#c0a274;z-index:2;text-align:center;line-height:1.1;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gate-pips{display:flex;gap:.09rem;z-index:2;margin-top:.12rem}
.gate-pip{width:.22rem;height:.22rem;border-radius:50%;background:var(--gold-dim)}
.gate-pip.on{background:var(--gold-hot);box-shadow:0 0 .22rem var(--gold)}
.gate-veil{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem;color:#4a3a24;z-index:3;
  background:linear-gradient(175deg,#3a3128,#150e07);transition:.3s}
.gate.reveal .gate-veil{opacity:0;transform:translateY(-100%)}

.pen-actions{display:flex;justify-content:center;margin-top:.4rem}
.sendbtn{
  padding:.5rem 1.8rem;min-height:2.7rem;font-family:'Cinzel',serif;font-weight:900;font-size:.8rem;
  letter-spacing:.18em;border:none;border-radius:.35rem;cursor:pointer;color:#2a1a06;
  background:linear-gradient(180deg,var(--gold-hot),var(--gold) 45%,#a5822f);
  box-shadow:0 .25rem 0 #6b5322,0 .6rem 1.2rem rgba(0,0,0,.5);transition:.12s;
}
.sendbtn:disabled{background:linear-gradient(180deg,#4a3f30,#2a2016);color:#6b5a45;box-shadow:none;cursor:default}
.sendbtn:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-2px)}
.sendbtn:not(:disabled):active{transform:translateY(2px);box-shadow:0 .08rem 0 #6b5322}
.sendbtn.waiting{background:linear-gradient(180deg,#5b4c3c,#332920);color:var(--gold);
  animation:pulseWait 1.1s ease-in-out infinite}
@keyframes pulseWait{0%,100%{opacity:.7}50%{opacity:1}}

/* intel strip */
.intel{
  position:absolute;top:50%;transform:translateY(-50%);right:calc(.4rem + var(--safe-r));
  display:flex;flex-direction:column;gap:.25rem;opacity:0;transition:.3s;max-width:5.4rem;
}
.intel.on{opacity:1}
.intel-title{font-size:.5rem;letter-spacing:.16em;color:#8d7048;text-transform:uppercase;text-align:right;
  margin-bottom:.1rem;text-shadow:0 1px 2px #000}
.intel-item{display:flex;align-items:center;gap:.25rem;justify-content:flex-end;font-size:.54rem;color:#c0a274;
  background:rgba(12,8,4,.7);border-radius:.2rem;padding:.14rem .3rem;border-right:2px solid var(--sparta)}
.intel-item.dead{opacity:.4;text-decoration:line-through}

/* camera hint */
.camhint{
  position:absolute;top:calc(3.4rem + var(--safe-t));left:50%;transform:translateX(-50%);
  font-size:.56rem;letter-spacing:.14em;color:#c0a274;text-transform:uppercase;text-align:center;
  opacity:0;transition:.5s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;
  background:rgba(12,8,4,.66);padding:.22rem .7rem;border-radius:.25rem;border:1px solid #4a3a24;
}
.camhint.on{opacity:1}

/* verdict */
.verdict{position:absolute;inset:0;display:none;place-items:center;pointer-events:auto;
  /* the sand under this is bright, and at 40% the sub-line was competing with
     it — the middle needs to be dark enough to read against */
  background:radial-gradient(ellipse at 50% 45%,rgba(28,8,3,.72),rgba(5,3,1,.90) 78%);
  animation:fadeIn .4s ease both}
.verdict.on{display:grid}
.verdict-in{text-align:center;padding:1rem;max-width:min(34rem,92vw)}
.verdict-glyph{font-size:clamp(2.4rem,9vw,4rem);filter:drop-shadow(0 .3rem .8rem rgba(0,0,0,.8));margin-bottom:.4rem}
.verdict-main{font-family:'CinzelDec','Cinzel',serif;font-weight:700;font-size:clamp(1.2rem,5.4vw,2.4rem);
  letter-spacing:.12em;color:var(--gold-hot);text-shadow:0 .15rem .5rem #000,0 0 2rem rgba(232,196,106,.4)}
.verdict-sub{font-size:.82rem;color:#cbac78;margin-top:.7rem;line-height:1.6;
  text-shadow:0 .1rem .4rem rgba(0,0,0,.9)}
.verdict-sub em{color:var(--gold-hot);font-style:normal}
.thumbs{display:flex;gap:.7rem;justify-content:center;margin-top:1.2rem;flex-wrap:wrap}
.thumb{
  flex:1;min-width:8rem;max-width:12rem;padding:.7rem .5rem;cursor:pointer;font-family:inherit;
  background:linear-gradient(175deg,rgba(70,56,36,.9),rgba(22,15,8,.95));
  border:1.5px solid #5a4526;border-radius:.4rem;color:var(--sand-lit);
  display:flex;flex-direction:column;align-items:center;gap:.15rem;transition:.16s;
}
.thumb span{font-size:1.6rem;line-height:1}
.thumb b{font-family:'CinzelDec','Cinzel',serif;font-size:.8rem;letter-spacing:.14em}
.thumb i{font-size:.6rem;color:#a78e63;font-style:normal;letter-spacing:.06em}
.thumb.up:hover{border-color:#8fd08a;background:linear-gradient(175deg,rgba(50,90,45,.9),rgba(14,26,12,.95))}
.thumb.up:hover b{color:#a8e0a2}
.thumb.down:hover{border-color:#c2402f;background:linear-gradient(175deg,rgba(110,35,22,.9),rgba(34,9,5,.95))}
.thumb.down:hover b{color:#f2705c}
#nextRoundBtn{display:none}

/* touch controls ────────────────────────────────────────────────
   Two arrangements. Solo: stick on the left, buttons on the right, the way a
   phone game normally sits under two thumbs. Shared: two people are holding
   the same phone, so each gets a stick at their own outer edge and their
   buttons just inboard of it — one player entirely within each half, and no
   reaching across the other's hands. */
.touch{position:absolute;inset:0;display:none;pointer-events:none}
.touch.on{display:block}
.tstick{
  position:absolute;bottom:calc(1.1rem + var(--safe-b));left:calc(1.1rem + var(--safe-l));
  width:clamp(5.4rem,19vw,8rem);aspect-ratio:1;border-radius:50%;pointer-events:auto;
  background:radial-gradient(circle,rgba(232,196,106,.1),rgba(10,6,3,.42));
  border:2px solid rgba(232,196,106,.28);touch-action:none;
}
.tstick-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,var(--gold-hot),var(--gold-dim));
  box-shadow:0 .2rem .6rem rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.4);
}
.tbtns{
  position:absolute;bottom:calc(1.1rem + var(--safe-b));right:calc(1.1rem + var(--safe-r));
  display:grid;grid-template-columns:repeat(2,auto);grid-template-areas:'blk hvy' 'lgt lgt';
  gap:.45rem;pointer-events:auto;
}
.tbtn{
  width:clamp(2.9rem,8.6vw,3.9rem);aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(232,196,106,.3);
  background:radial-gradient(circle at 35% 30%,rgba(90,72,40,.85),rgba(16,10,5,.85));
  color:var(--gold-hot);font-size:clamp(1rem,3.2vw,1.4rem);cursor:pointer;touch-action:none;
  display:grid;place-items:center;transition:.08s;
}
.tbtn[data-act=light]{grid-area:lgt;width:auto;aspect-ratio:auto;border-radius:2rem;
  min-height:clamp(2.4rem,7vw,3.1rem);padding:0 1rem}
.tbtn[data-act=heavy]{grid-area:hvy}
.tbtn[data-act=block]{grid-area:blk}
.tbtn.down{background:radial-gradient(circle at 35% 30%,var(--gold),var(--gold-dim));
  color:#1a1208;transform:scale(.93)}

/* shared device: player one owns the left half, player two the right */
.touch.shared .tstick{left:calc(.5rem + var(--safe-l))}
.touch.shared .tbtns{right:auto;left:calc(.5rem + var(--safe-l) + clamp(5.4rem,19vw,8rem) + .5rem)}
.touch.shared.p2 .tstick{left:auto;right:calc(.5rem + var(--safe-r))}
.touch.shared.p2 .tbtns{
  left:auto;right:calc(.5rem + var(--safe-r) + clamp(5.4rem,19vw,8rem) + .5rem);
  grid-template-areas:'hvy blk' 'lgt lgt';
}

/* corner buttons ───────────────────────────────────────────────
   Bottom-right normally. With on-screen controls up, that corner belongs to a
   player's thumb, so the cluster drops to the one place nothing else wants:
   dead centre along the bottom, between the two sets of hands. */
.hud-corner{position:absolute;bottom:calc(.4rem + var(--safe-b));right:calc(.4rem + var(--safe-r));
  display:flex;gap:.3rem;pointer-events:auto;transition:.2s}
.hud-corner.touching{right:auto;left:50%;transform:translateX(-50%)}
.hud-corner.touching .cbtn:not(#menuBtn){display:none}
.cbtn{
  width:2.5rem;height:2.5rem;border-radius:.35rem;border:1.5px solid #5a4526;cursor:pointer;
  background:linear-gradient(180deg,rgba(40,30,18,.85),rgba(14,9,4,.9));color:var(--gold);
  font-size:1rem;display:grid;place-items:center;transition:.15s;font-family:inherit;padding:0;
}
.cbtn img{width:1.25rem;height:1.25rem;object-fit:contain;opacity:.82;transition:.15s;
  filter:brightness(0) saturate(100%) invert(83%) sepia(24%) saturate(720%) hue-rotate(348deg) brightness(97%) contrast(89%);}
.cbtn:hover{border-color:var(--gold);color:var(--gold-hot)}
.cbtn:hover img{opacity:1}
.cbtn.hidden{display:none}

/* damage flash & shake */
.hitflash{position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(142,31,20,.55));}
.hitflash.on{animation:flash .28s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}

/* floating combat text */
.floater{position:fixed;z-index:22;pointer-events:none;font-family:'CinzelDec','Cinzel',serif;font-weight:700;
  text-shadow:0 2px 5px #000;animation:floatUp 1s ease-out forwards;white-space:nowrap}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,0) scale(.6)}
  18%{opacity:1;transform:translate(-50%,-.6rem) scale(1.18)}
  100%{opacity:0;transform:translate(-50%,-3.4rem) scale(.95)}}

/* rotate nag */
.rotate-nag{position:fixed;inset:0;z-index:90;display:none;place-items:center;background:#0b0703;
  text-align:center;font-size:1rem;letter-spacing:.14em;color:var(--gold);line-height:2}
.rotate-nag small{color:#8d7048;font-size:.7rem;letter-spacing:.2em}
.rotate-nag.on{display:grid}

/* ── responsive ──────────────────────────────────────── */
/* Phone landscape: about 390px of height for everything. */
@media (max-height:460px){
  .title{font-size:clamp(1.5rem,5vw,2.6rem)}
  .title.big{font-size:clamp(1.7rem,5.6vw,3rem)}
  .subtitle{margin-top:.35rem;font-size:.52rem;letter-spacing:.24em}
  .bigbtn{margin-top:.7rem;padding:.6rem 1.6rem;min-height:2.6rem}
  .menu-row{margin:.3rem 0}
  .menu-foot{margin-top:.5rem}
  .mcard-t{font-size:.8rem}
  .mcard-d{font-size:.6rem}
  .panel{padding:.9rem 1rem}
  .panel h2{font-size:.95rem;margin-bottom:.5rem}
  .ptext{font-size:.72rem;margin-bottom:.6rem}
  .hand-crest,.tri-crest{font-size:1.9rem;margin-bottom:.2rem}
  .tri-stats{margin:.5rem 0;font-size:.68rem}
  .verdict-glyph{font-size:1.8rem;margin-bottom:.15rem}
  .verdict-sub{font-size:.7rem;margin-top:.4rem}
  .thumbs{margin-top:.6rem}
  .thumb{padding:.45rem .4rem}
  .thumb span{font-size:1.2rem}
  .pen-label{font-size:.52rem;margin-bottom:.2rem}
  .gate{width:clamp(2.6rem,7vw,3.6rem)}
  .gate-name{display:none}
  .sendbtn{padding:.4rem 1.2rem;min-height:2.3rem;font-size:.7rem}
  .duel-bars{top:calc(2.9rem + var(--safe-t))}
  .announce{top:26%}
  .menu-cards{margin:.6rem 0 .6rem}
  .mcard{padding:.6rem .5rem}
  .mcard-ico{font-size:1.3rem}
}
@media (max-width:520px){
  .sb-name{font-size:.58rem;letter-spacing:.1em}
  .round-plate{padding:.22rem .5rem}
  .round-no{font-size:.66rem}
  .round-phase{font-size:.48rem}
  .intel{max-width:4.2rem}
  .camhint{display:none}
}
@media (pointer:coarse){
  .camhint{font-size:.5rem;letter-spacing:.08em}
}