/* Shared Holy Dude game chrome (title / setup / lobby / hud / results). Each game sets the colour tokens in its own index.html. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);overflow:hidden;overscroll-behavior:none}
#game{position:fixed;inset:0;touch-action:none}
#game canvas{display:block}
.screen{position:fixed;inset:0;display:none;z-index:10;overflow-y:auto;-webkit-overflow-scrolling:touch}
.screen.on{display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.4em;border-radius:999px;
  font-family:var(--display);letter-spacing:.06em;font-size:1.12rem;text-transform:uppercase;background:linear-gradient(180deg,var(--gold),var(--gold2));
  color:var(--btnInk);box-shadow:0 6px 24px var(--glow),inset 0 -3px 0 rgba(0,0,0,.18);transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.alt{background:linear-gradient(180deg,var(--alt),var(--alt2));color:var(--altInk);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.btn[disabled]{opacity:.45;pointer-events:none}
.panel{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:22px;padding:22px}
.wrap{max-width:780px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px 28px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.04em;margin:0}
.kicker{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{min-height:44px;padding:.55em 1em;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:600}
.seg button.sel{background:var(--selBg);box-shadow:inset 0 0 0 2px var(--gold);color:#fff}
label.lbl{display:block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
input.txt{width:100%;min-height:48px;border-radius:14px;border:1.5px solid var(--line);background:rgba(0,0,0,.3);color:var(--ink);padding:0 14px;font-size:1.05rem}
input.txt:focus{outline:none;border-color:var(--gold)}
.advs{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.advs button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:.74rem;line-height:1.1}
.advs button small{font-size:.62rem;color:var(--muted)}
.advs button.sel{box-shadow:inset 0 0 0 2px var(--gold);background:var(--selBg)}
.af{width:54px;height:54px;border-radius:50%;object-fit:cover;background:#223;display:block;flex:none}
.af.none{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.3rem;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line);background:rgba(0,0,0,.25)}
.bots{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:10px}
.bot{display:flex;gap:8px;align-items:center;padding:8px;border-radius:14px;background:rgba(255,255,255,.05);font-size:.8rem;line-height:1.25}
.bot img{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover}
.bot b{display:block;font-size:.88rem}
.bot.off{opacity:.3}
.advnote{margin-top:10px;display:flex;gap:10px;align-items:center;font-size:.86rem;color:var(--muted);min-height:44px}
.advnote .af{width:44px;height:44px}

/* title */
#title{background:var(--bg)}
#title #titleVid,#title .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#title .poster{background-position:center;background-size:cover}
#title .shade{position:absolute;inset:0;background:var(--titleShade)}
#title .content{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:max(66px,calc(env(safe-area-inset-top) + 56px)) max(20px,4vw) max(28px,env(safe-area-inset-bottom));max-width:760px}
.logo{font-family:var(--display);font-size:clamp(3.1rem,12vw,7.6rem);line-height:.86;letter-spacing:.02em;text-transform:uppercase;
  background:var(--logoGrad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 22px rgba(0,0,0,.55))}
.logo small{display:block;font-size:.28em;letter-spacing:.2em;color:var(--alt);-webkit-text-fill-color:var(--alt);margin-top:.4em}
.tagline{font-size:clamp(1rem,2.6vw,1.22rem);max-width:34em;margin:14px 0 20px;color:var(--ink);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.pillars{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
.pillars span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px var(--line)}
.home{position:absolute;top:max(14px,env(safe-area-inset-top));left:16px;z-index:2;font-size:.85rem;color:#fff;text-decoration:none;opacity:.9;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.4)}
.loadnote{font-size:.8rem;color:var(--muted);margin-top:10px;min-height:1.2em}
.how{font-size:.88rem;line-height:1.55}
.how kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.14);box-shadow:inset 0 -2px 0 rgba(0,0,0,.3);font-family:var(--body);font-size:.8em;text-align:center}

/* lobby */
.code{font-family:var(--display);font-size:clamp(2.6rem,11vw,4rem);letter-spacing:.18em;color:var(--gold)}
.plist{display:grid;gap:8px;margin-top:12px}
.pl{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.06)}
.pl img,.pl video{width:38px;height:38px;border-radius:50%;object-fit:cover}
.pl .tag{margin-left:auto;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.msg{margin-top:12px;font-size:.9rem;color:var(--muted);min-height:1.3em}
.msg.err{color:var(--danger)}

/* hud (shared bits) */
#hud{pointer-events:none;background:none;overflow:hidden}
.hudbox{background:var(--hudBg);border-radius:14px;padding:7px 11px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#hBoard{font-size:.76rem;min-width:124px;max-width:42vw}
#hBoard div{display:flex;justify-content:space-between;gap:8px;white-space:nowrap;overflow:hidden}
#hBoard .me{color:var(--gold);font-weight:700}
#hBoard .tm{color:var(--alt)}
#center{position:absolute;left:0;right:0;top:30%;text-align:center;font-family:var(--display);font-size:clamp(2rem,8vw,4.2rem);letter-spacing:.05em;text-shadow:0 4px 20px rgba(0,0,0,.6);opacity:0;transition:opacity .25s;padding:0 12px}
#center.on{opacity:1}
#sub{position:absolute;left:0;right:0;top:calc(30% + clamp(2.6rem,9vw,5rem));text-align:center;font-size:clamp(.9rem,2.8vw,1.15rem);text-shadow:0 2px 10px rgba(0,0,0,.85);opacity:0;transition:opacity .25s;padding:0 16px}
#sub.on{opacity:1}
#hPause{pointer-events:auto;width:40px;height:40px;border-radius:50%;background:var(--hudBg);font-size:1rem;flex:none}
#advCard{position:absolute;display:none;align-items:center;gap:8px;max-width:min(78vw,340px);padding:6px 12px 6px 6px;border-radius:999px;background:var(--hudBg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .3s,transform .3s}
#advCard.on{display:flex}
#advCard .af{width:46px;height:46px;box-shadow:0 0 0 2px var(--alt)}
#advCard b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--alt)}
#advCard span{font-size:.84rem;line-height:1.25}
#advCard.talk{transform:scale(1.04)}
@keyframes pulse{50%{transform:scale(1.08)}}

/* results */
#results{background:var(--bg)}
#results #resVid,#results .poster{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
#results .poster{background:center/cover}
#results .shade{position:fixed;inset:0;background:var(--resShade)}
#results .wrap{position:relative}
.rank{font-family:var(--display);font-size:clamp(2.6rem,11vw,5.2rem);line-height:.9;background:var(--logoGrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pct{font-family:var(--display);font-size:clamp(1.2rem,5vw,1.9rem);color:var(--alt)}
.bars{display:grid;gap:10px;margin:18px 0}
.bar{display:grid;grid-template-columns:84px 1fr 40px;gap:10px;align-items:center;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.bar span{height:12px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.bar span b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--alt),var(--gold));transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.bar em{font-style:normal;text-align:right;font-weight:700}
.verse{font-style:italic;color:var(--verse);border-left:3px solid var(--gold);padding:4px 0 4px 12px;margin:14px 0;line-height:1.5}
.advsay{display:flex;gap:10px;align-items:center;margin:10px 0;font-size:.95rem}
.advsay .af{width:52px;height:52px;box-shadow:0 0 0 2px var(--alt)}
table.lb{width:100%;border-collapse:collapse;font-size:.9rem}
table.lb td{padding:8px 6px;border-bottom:1px solid var(--line)}
table.lb td:first-child{font-family:var(--display);color:var(--gold);width:28px}
table.lb img{width:28px;height:28px;border-radius:50%;vertical-align:middle;margin-right:8px;object-fit:cover}
table.lb tr.me td{color:var(--gold)}
table.lb .r{text-align:right;white-space:nowrap}
#pause{background:rgba(0,0,0,.6)}
@media (max-width:560px){
  #hBoard{font-size:.68rem;min-width:0}
  .bar{grid-template-columns:70px 1fr 34px}
  .panel{padding:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}