/* Shared shell for the Holy Dude Bible-story games (five-stones, walk-on-water). Per-game colours override :root. */
:root{
  --bg:#120c07; --ink:#f8f1e4; --muted:#c9bda8; --gold:#ffc861; --gold2:#ff9b3d; --aqua:#7fe0d0; --deep:#2a1a0e;
  --glass:rgba(24,15,8,.74); --line:rgba(255,255,255,.14); --danger:#ff6b5b;
  --display: Impact, "Haettenschweiler", "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
*{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.15rem;text-transform:uppercase;background:linear-gradient(180deg,var(--gold),var(--gold2));
  color:#2a1300;box-shadow:0 6px 24px rgba(255,160,60,.35),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.aqua{background:linear-gradient(180deg,#9ff3e6,#39bba9);color:#032621;box-shadow:0 6px 24px rgba(60,220,200,.3)}
.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:rgba(255,200,97,.18);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)}
.chars{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.chars button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:.74rem;line-height:1.15}
.chars button img{width:100%;max-width:68px;aspect-ratio:1;border-radius:50%;object-fit:cover}
.chars button.sel{box-shadow:inset 0 0 0 2px var(--gold);background:rgba(255,200,97,.12)}
.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}
.advs{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.advs button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 1px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:.66rem;line-height:1.1}
.advs button img,.advs button .ini{width:100%;max-width:52px;aspect-ratio:1;border-radius:50%;object-fit:cover;background:#3a2a1a}
.advs button .ini{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.3rem;color:var(--gold)}
.advs button small{color:var(--muted);font-size:.6rem}
.advs button.sel{box-shadow:inset 0 0 0 2px var(--aqua);background:rgba(127,224,208,.14)}
.advs button.none{justify-content:center;font-weight:700}
.advpick{display:flex;gap:12px;align-items:center;margin-top:10px;padding:10px;border-radius:14px;background:rgba(127,224,208,.08);font-size:.85rem;line-height:1.35}
.advpick .face{width:54px;height:54px;flex:none}

/* adviser face (video or image) */
.face{position:relative;border-radius:50%;overflow:hidden;background:#3a2a1a;display:inline-block}
.face video,.face img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.face .ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);color:var(--gold);font-size:1.4em}

/* title */
#title{background:#0b0704}
#titleVid,#title .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#title .poster{background:center/cover}
#title .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,6,3,.84) 0%,rgba(10,6,3,.45) 45%,rgba(10,6,3,0) 75%),linear-gradient(0deg,rgba(10,6,3,.88),transparent 48%)}
#title .content{position:relative;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:max(20px,env(safe-area-inset-top)) max(20px,4vw) max(28px,env(safe-area-inset-bottom));max-width:740px}
.logo{font-family:var(--display);font-size:clamp(3.2rem,12vw,8rem);line-height:.86;letter-spacing:.02em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff6d8 0%,var(--gold) 45%,var(--gold2) 100%);-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(--aqua);-webkit-text-fill-color:var(--aqua);margin-top:.4em}
.tagline{font-size:clamp(1rem,2.6vw,1.22rem);max-width:34em;margin:14px 0 20px;color:#f1ead9;text-shadow:0 2px 12px rgba(0,0,0,.6);line-height:1.45}
.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,.35);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:.88;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}
/* start rule: big PLAY, how-to line, difficulty + mode pickers, best */
.playbox{display:flex;flex-direction:column;gap:10px;max-width:460px;margin:0 0 14px}
.btn.play{width:100%;min-height:72px;font-size:2.3rem;letter-spacing:.14em;border-radius:22px;box-shadow:0 10px 34px rgba(255,160,60,.55),0 0 0 3px rgba(255,236,190,.55),inset 0 -4px 0 rgba(0,0,0,.2);animation:playpulse 2.2s ease-in-out infinite}
@keyframes playpulse{50%{box-shadow:0 10px 44px rgba(255,170,70,.85),0 0 0 5px rgba(255,236,190,.8),inset 0 -4px 0 rgba(0,0,0,.2)}}
.howline{font-size:.92rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);line-height:1.35}
.pick .plbl{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.pick .seg{flex-wrap:nowrap;gap:6px}
.pick .seg button{flex:1 1 0;min-width:0;min-height:44px;padding:.45em .5em;font-size:.9rem;background:rgba(0,0,0,.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick .seg.diff button.sel[data-v=easy]{box-shadow:inset 0 0 0 2px #7fe08a;background:rgba(127,224,138,.2)}
.pick .seg.diff button.sel[data-v=hard]{box-shadow:inset 0 0 0 2px #ff6b5b;background:rgba(255,107,91,.2)}
.bestline{font-size:.82rem;color:var(--muted);min-height:1.2em}
.bestline b{color:#fff}
.dtag{display:inline-block;padding:0 .45em;border-radius:6px;font-weight:700;letter-spacing:.08em;color:#1a1008!important;background:var(--gold)}
.dtag.d-easy{background:#7fe08a}
.dtag.d-hard{background:#ff6b5b;color:#fff!important}
.row.sec .btn{min-height:42px;font-size:.95rem;padding:.5em 1.1em}
#resBest{font-size:.95rem;margin:6px 0 4px}
#resBest b{color:#fff}
.how{font-size:.88rem;line-height:1.55;color:#efe6d4}
.how kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.12);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{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 */
#hud{pointer-events:none;background:none;overflow:hidden}
#hud .top{position:absolute;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.hudbox{background:rgba(14,9,5,.56);border-radius:14px;padding:8px 12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#hScore{font-family:var(--display);font-size:clamp(1.5rem,4.5vw,2.4rem);line-height:1}
#hCombo{font-size:.8rem;color:var(--gold);min-height:1em;white-space:nowrap}
#hTime{font-family:var(--display);font-size:clamp(1.3rem,4vw,2rem);text-align:center;line-height:1}
#hMode{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center}
#hBoard{font-size:.78rem;min-width:130px;max-width:44vw}
#hBoard div{display:flex;justify-content:space-between;gap:8px;white-space:nowrap;overflow:hidden}
#hBoard .me{color:var(--gold);font-weight:700}
#hBoard .adv{color:var(--aqua)}
#hBoard .down{color:var(--danger)}
#center{position:absolute;left:0;right:0;top:30%;text-align:center;font-family:var(--display);font-size:clamp(2rem,8vw,4.4rem);letter-spacing:.05em;text-shadow:0 4px 20px rgba(0,0,0,.7);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;position:absolute;left:12px;top:calc(max(10px,env(safe-area-inset-top)) + 74px);width:40px;height:40px;border-radius:50%;background:rgba(14,9,5,.56);font-size:1rem}
#advCard{position:absolute;right:12px;top:calc(max(10px,env(safe-area-inset-top)) + 150px);display:none;align-items:flex-start;gap:8px;flex-direction:row-reverse;max-width:min(300px,60vw)}
#advCard.on{display:flex}
#advCard .face{width:64px;height:64px;flex:none;box-shadow:0 0 0 2.5px var(--aqua),0 6px 18px rgba(0,0,0,.5)}
#advCard .bub{background:rgba(250,244,230,.95);color:#2a1a0e;border-radius:14px 4px 14px 14px;padding:8px 11px;font-size:.84rem;line-height:1.3;box-shadow:0 6px 18px rgba(0,0,0,.4);opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
#advCard .bub.on{opacity:1;transform:none}
#advCard .bub b{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#1f7d70}
@keyframes pulse{50%{transform:scale(1.08)}}

/* results */
#results{background:#0b0704}
#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:linear-gradient(0deg,rgba(10,6,3,.95) 22%,rgba(10,6,3,.55))}
#results .wrap{position:relative}
.rank{font-family:var(--display);font-size:clamp(2.6rem,11vw,5.4rem);line-height:.92;background:linear-gradient(180deg,#fff6d8,var(--gold) 50%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pct{font-family:var(--display);font-size:clamp(1.2rem,5vw,1.9rem);color:var(--aqua)}
.bars{display:grid;gap:10px;margin:18px 0}
.bar{display:grid;grid-template-columns:92px 1fr 44px;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(--aqua),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:#f5e8c8;border-left:3px solid var(--gold);padding:4px 0 4px 12px;margin:14px 0;line-height:1.5}
.verse cite{display:block;font-style:normal;font-size:.78rem;letter-spacing:.12em;color:var(--muted);margin-top:4px}
.advsay{display:none;gap:12px;align-items:center;margin:0 0 14px}
.advsay.on{display:flex}
.advsay .face{width:58px;height:58px;flex:none;box-shadow:0 0 0 2px var(--aqua)}
.advsay p{margin:0;background:rgba(250,244,230,.95);color:#2a1a0e;border-radius:4px 14px 14px 14px;padding:9px 12px;font-size:.92rem;line-height:1.35}
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 tr.adv td:nth-child(2){color:var(--aqua)}
table.lb .r{text-align:right;white-space:nowrap}
#pause{background:rgba(10,6,3,.72)}
@media (max-width:600px){
  .chars{grid-template-columns:repeat(3,1fr)}
  .advs{grid-template-columns:repeat(4,1fr)}
  #hBoard{font-size:.7rem;min-width:0}
  #advCard{top:auto;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 104px);right:10px}
  #advCard .face{width:50px;height:50px}
  #advCard .bub{font-size:.76rem}
  .bar{grid-template-columns:78px 1fr 40px}
  #title .pillars{display:none}
  #title .tagline{font-size:.9rem;margin:8px 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .row.sec{gap:8px}
  .row.sec .btn{flex:1 1 auto;font-size:.82rem;padding:.45em .8em;min-height:40px}
  .pick .seg button{font-size:.82rem}
}
@media (min-width:601px) and (max-height:900px){
  #title .logo{font-size:clamp(3rem,8.6vh,5.4rem)}
  #title .tagline{margin:10px 0 12px}
  #title .pillars{display:none}
  #title .content{padding-top:70px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}