:root{--vvh:100vh;--vvt:0px;color-scheme:dark;--bg:#0b0713;--card:#161026;--ink:#efe8f6;--dim:#a99dc0;--glow:#7cf7c6;--hot:#ff6a12;--purple:#b46bff;--bad:#ff6b4a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
@supports (height:100dvh){:root{--vvh:100dvh}}
html,body{margin:0;background:var(--bg);height:100%;overflow:hidden;overscroll-behavior:none}
body{color:var(--ink);font:17px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(ellipse 120% 60% at 50% -10%,#3a1b6b 0,#1a0d33 45%,var(--bg) 100%) fixed}
/* #app is exactly the visible area (script keeps --vvh/--vvt equal to the visual viewport, so the on-screen keyboard never covers it) and scrolls inside itself */
#app{position:fixed;left:0;right:0;top:var(--vvt);height:var(--vvh);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.wrap{max-width:520px;margin:0 auto;padding:10px 14px 28px}
.screen{display:flex;flex-direction:column;align-items:center;text-align:center}
.logo{margin:6px 0 0;font-size:2.5rem;line-height:.95;letter-spacing:.06em;font-weight:900;color:var(--hot);text-shadow:0 0 22px #ff6a1288,0 3px 0 #5b1f00}
.hero{width:min(74vw,330px);height:auto;margin:6px 0;filter:drop-shadow(0 0 22px #b46bff88);animation:bob 3.2s ease-in-out infinite}
.tag{margin:4px 0 12px;color:var(--ink)}
.small{font-size:.82rem;color:var(--dim);margin:6px 0}
button{font:inherit;cursor:pointer;border:2px solid var(--hot);background:#ff6a1224;color:var(--hot);padding:.6rem 1.1rem;border-radius:999px;font-weight:800;letter-spacing:.03em;min-height:46px}
button.big{background:linear-gradient(#ff7a22,#e65500);color:#1a0900;border-color:#ff9a4a;font-size:1.15rem;padding:.75rem 1.4rem;box-shadow:0 4px 0 #7a2f00,0 0 22px #ff6a1255}
button.big:active{transform:translateY(2px);box-shadow:0 2px 0 #7a2f00}
button.alt{border-color:#b46bff88;color:#d8b8ff;background:#b46bff1c}
button.big.alt{background:linear-gradient(#6e3fb5,#4a2486);color:#fff;border-color:#b46bff;box-shadow:0 4px 0 #2a1052}
button:disabled{opacity:.45;cursor:default}
.btns{display:flex;flex-direction:column;gap:10px;width:100%;max-width:360px;margin:8px auto}
.badge{display:inline-block;font-size:.7rem;background:#0b0713;color:var(--glow);border-radius:99px;padding:.05rem .5rem;margin-left:.3rem;vertical-align:middle}
.stats{min-height:1.2em}
.rules{margin-top:10px;width:100%;max-width:400px;text-align:left;color:var(--dim);font-size:.92rem}
.rules summary{cursor:pointer;text-align:center;color:var(--purple);font-weight:700}
.rules ol{padding-left:1.2rem;margin:.5rem 0}
/* game: one visible-area-high block (Gus, bubble, question box); history and the back link sit below it */
.zone{width:100%;display:flex;flex-direction:column;min-height:250px;
  height:min(720px,calc(var(--vvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px))}
.zone>*{flex:none}
.meta{text-align:center;margin:4px 0 0;min-height:1.2em}
.chip{font-size:.68rem;color:var(--dim);border:1px dashed #ffffff40;border-radius:8px;padding:.12rem .4rem;max-width:34%;text-align:right;line-height:1.15}
.chip.ai{color:var(--glow);border-color:#7cf7c680}
.chip.scripted{color:#ffd36b;border-color:#ffd36b80}
.hintbar{width:100%;margin:0;padding:.35rem .6rem;border-radius:12px;background:#2a1450;border:1px solid #b46bff66;font-size:.9rem;text-align:center}
.hintbar b{color:var(--hot)}
.loadbar{width:100%;margin:8px 0 0;padding:.5rem .7rem;border-radius:12px;background:#120a22;border:1px solid #ffffff1f;text-align:left}
.lrow{display:flex;justify-content:space-between;gap:10px;font-size:.88rem}
.bar{height:10px;background:#0b0713;border-radius:99px;overflow:hidden;border:1px solid #ffffff22;margin:6px 0 2px}
.bar>i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--purple),var(--glow));transition:width .25s}
.stage{flex:1 1 0;min-height:48px;max-height:340px;display:flex;align-items:flex-end;justify-content:center;width:100%;margin-top:6px;overflow:hidden}
.zone>.stage{flex:1 1 0}
.gus{min-height:0;max-height:100%;max-width:92%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 18px #b46bff77);transition:transform .2s}
.gus.think{animation:bob .8s ease-in-out infinite}
.gus.shake{animation:shake .3s 3}
.gus.pop{animation:pop .5s}
@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.bubble{position:relative;width:100%;background:#fff;color:#1a1026;border-radius:16px;padding:.6rem .8rem;margin:10px 0 8px;font-weight:700;font-style:italic;min-height:3.4em;text-align:center}
.bubble::before{content:"";position:absolute;top:-10px;left:50%;margin-left:-10px;border:10px solid transparent;border-top:0;border-bottom-color:#fff}
.bubble.admit{background:#d8ffef}.bubble.admit::before{border-bottom-color:#d8ffef}
.bubble.deny{background:#ffe6da}.bubble.deny::before{border-bottom-color:#ffe6da}
.verdict{font-style:normal;font-weight:900;letter-spacing:.08em;margin-right:.5rem}
.verdict.admit{color:#0a8f62}.verdict.deny{color:#d63a1c}
.after{display:flex;gap:8px;width:100%;margin:0 0 8px;flex-wrap:wrap;justify-content:center}
.after button{flex:1 1 40%;font-size:.95rem}
#form{width:100%;display:flex;flex-direction:column;gap:8px}
textarea{width:100%;font:inherit;font-size:max(16px,1.1rem);background:#0e0a1b;color:var(--ink);border:2px solid #b46bff77;border-radius:14px;padding:.7rem .8rem;resize:none;min-height:5.2em}
textarea:focus{outline:none;border-color:var(--glow);box-shadow:0 0 0 3px #7cf7c633}
.hist{list-style:none;padding:0;margin:14px 0 0;width:100%;text-align:left;font-size:.85rem;color:var(--dim)}
.hist li{padding:4px 0;border-top:1px solid #ffffff12}
.hist .a{color:var(--glow);font-weight:800}.hist .d{color:var(--bad);font-weight:800}
.reward{width:100%;max-width:360px;border:1px solid #ffd36b66;background:#2a2108;border-radius:12px;padding:.6rem;margin:6px auto;font-size:.9rem}
.reward .row{display:flex;gap:8px;justify-content:center;margin-top:8px}
.reward button{font-size:.9rem;min-height:40px}
h2{margin:6px 0;font-size:1.6rem}
.promo{margin-top:18px;text-align:center;font-size:.85rem}.promo a{color:var(--purple)}
.dbg{margin-top:20px;font-size:.78rem;color:var(--dim)}
.dbg summary{cursor:pointer}
.dbgt{width:100%;border-collapse:collapse}.dbgt td{padding:2px 4px;border-top:1px solid #ffffff12;vertical-align:top;word-break:break-word}.dbgt td:first-child{color:var(--dim);white-space:nowrap}
pre{white-space:pre-wrap;word-break:break-word;background:#0e0a1b;padding:6px;border-radius:8px;font-size:.72rem}
/* modal + toast */
.modal{position:fixed;inset:0;background:#000c;display:flex;align-items:flex-start;justify-content:center;overflow:auto;z-index:50;padding:12px}
.mbox{background:var(--card);border:1px solid #ffffff22;border-radius:16px;padding:12px;width:100%;max-width:420px;text-align:center}
#card-preview{width:100%;height:auto;border-radius:12px;background:#000;display:block;margin-bottom:8px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#fff;color:#1a1026;padding:.5rem 1rem;border-radius:99px;font-weight:700;z-index:60;max-width:90vw;box-shadow:0 4px 20px #0008}
.adMock{position:fixed;inset:0;background:#000e;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.adBox{background:#222;border:3px dashed #ffd36b;border-radius:14px;padding:18px;max-width:340px;text-align:center}
.adTag{font-size:.72rem;color:#ffd36b;margin-bottom:8px}
.ghostbtn{background:transparent}
@media (max-height:700px){.logo{font-size:2rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

.brainopt{margin:12px 0;padding:10px 12px;border:1px dashed #ffffff30;border-radius:12px;text-align:center}
.brainopt p{margin:6px 0}
.site-foot{margin-top:22px;text-align:center;color:var(--dim)}.site-foot a{color:var(--purple)}
.hidden{display:none!important}

/* keyboard focus */
button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--glow);outline-offset:3px}
textarea:focus-visible{outline:none}
button.mini{padding:.25rem .7rem;font-size:.8rem;min-height:0}
button:hover:not(:disabled){filter:brightness(1.12)}
.site-foot a{color:#d8b8ff}

.linkbtn{background:none;border:0;box-shadow:none;color:#d8b8ff;text-decoration:underline;font-weight:600;letter-spacing:0;min-height:44px;padding:.4rem .6rem;border-radius:8px;display:block;margin:0 auto}
.linkbtn.hidden{display:none}
/* keyboard open (or any short visible area): squeeze Gus first, make the question box 2 rows, put BLUFF beside it */
.compact .zone{min-height:0}
.compact .hintbar{font-size:.8rem;padding:.2rem .5rem}
.compact .stage{margin-top:4px;min-height:36px}
.compact .bubble{margin:8px 0 6px;padding:.35rem .6rem;min-height:0;font-size:.95rem;line-height:1.3}
.compact .bubble::before{top:-8px;border-width:8px;margin-left:-8px}
.compact .after{margin:0 0 6px}.compact .after button{min-height:38px;padding:.3rem .8rem;font-size:.85rem}
.compact #form{flex-direction:row;align-items:stretch;gap:6px}
.compact textarea{min-height:0;height:3.4em;padding:.4rem .6rem}
.compact #send{flex:0 0 auto;min-height:0;font-size:1rem;padding:.4rem 1rem}
.compact .meta{margin:2px 0 0;font-size:.74rem;min-height:1em}