:root{--ink:#17202a;--yellow:#ffd844;--red:#f04d55;--cream:#efe6ce}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#333;color:var(--ink);font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,sans-serif;touch-action:none}main{position:relative;width:100%;height:100%;max-width:520px;margin:auto;overflow:hidden;background:var(--cream)}canvas{position:absolute;inset:0;width:100%;height:100%}header{z-index:2;position:absolute;top:max(15px,env(safe-area-inset-top));left:16px;right:16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:white;text-shadow:0 2px 8px #0008;pointer-events:none}header>b{font-size:17px;letter-spacing:-1px}header>b span{color:var(--yellow)}header div{font-size:9px;background:#151b21cc;border:1px solid #fff3;border-radius:16px;padding:7px 12px;letter-spacing:1px}header div strong{color:var(--yellow);font-size:15px}header aside{justify-self:end;font-size:13px;color:var(--yellow)}header aside strong{color:white}.card{z-index:3;position:absolute;left:21px;right:21px;top:50%;transform:translateY(-46%) scale(.94);opacity:0;pointer-events:none;text-align:center;padding:27px 24px;border-radius:27px;background:#f9f2dfef;border:2px solid #17202a22;box-shadow:0 22px 65px #1118;transition:.22s}.card.visible{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}.crow{display:grid;place-items:center;margin:auto;width:68px;height:68px;border-radius:50%;background:#17202a;color:white;font-size:27px;transform:rotate(-10deg);box-shadow:0 7px 0 #0003}h1{margin:12px 0 8px;font-size:45px;line-height:.76;letter-spacing:-3px;font-style:italic}h1 i{color:var(--red)}.card p{font-size:14px;line-height:1.45;color:#58616a}.card p strong{color:var(--ink)}.steps{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px 0}.steps span{font-size:9px;font-weight:1000}.steps span b{display:grid;place-items:center;margin:0 auto 4px;width:24px;height:24px;border-radius:50%;background:var(--yellow)}.steps em{font-style:normal;color:#a8a08d}button{width:100%;border:0;border-radius:14px;padding:15px;background:var(--yellow);box-shadow:0 6px 0 #b78c15;color:var(--ink);font:1000 14px system-ui;letter-spacing:.4px}button:active{transform:translateY(3px);box-shadow:0 3px 0 #b78c15}.card small{display:block;margin-top:13px;color:#968e7e;font-size:9px}.over{margin:0!important;color:var(--red)!important;font-size:11px!important;font-weight:1000;letter-spacing:2px}h2{margin:5px 0 0;font-size:72px;line-height:.9}.card label{display:block;margin-bottom:20px;font-size:9px;letter-spacing:1.4px;color:#777}.reward{background:linear-gradient(90deg,#ef4d55,#ff8a3d);color:white;box-shadow:0 6px 0 #a92e39;margin-bottom:10px}#retry{margin-bottom:10px}.ghost{background:#17202a;color:white;box-shadow:none}#callout{z-index:2;position:absolute;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:10px 16px;border-radius:18px;background:#141b22e8;color:white;border:1px solid #fff3;font-size:11px;font-weight:1000;letter-spacing:1px;opacity:0;white-space:nowrap;transition:.18s}#callout.show{opacity:1}#toast{z-index:4;position:absolute;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));transform:translate(-50%,15px);padding:10px 15px;border-radius:18px;background:#141b22ed;color:white;font-size:11px;font-weight:900;opacity:0;transition:.2s;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}@media(max-height:670px){.card{padding:19px 23px}.crow{width:52px;height:52px}h1{font-size:38px}.steps{margin:12px 0}.card small{display:none}}
#banner{z-index:6;position:absolute;left:10px;right:10px;bottom:max(6px,env(safe-area-inset-bottom));height:50px;border:1px solid #17202a24;border-radius:12px;background:#f8f5ed;box-shadow:0 -4px 18px #17202a24;display:flex;align-items:center;justify-content:center;gap:9px;color:#7d817f;font-size:9px;letter-spacing:1.5px;pointer-events:auto;overflow:hidden}#banner:before{content:"";position:absolute;inset:0;border-top:4px solid #fff}#banner span{position:relative;border:1px solid #aeb2b0;border-radius:3px;padding:2px 4px;font-size:7px}#banner strong{position:relative;font-size:9px}#banner iframe,#banner>div{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Swapped lower utility zones: standard mobile banner above, gameplay prompt below. */
#banner{left:50%;right:auto;bottom:calc(68px + env(safe-area-inset-bottom));width:min(320px,calc(100% - 24px));height:auto;aspect-ratio:320/50;transform:translateX(-50%);border-radius:8px}
#callout{bottom:max(8px,env(safe-area-inset-bottom));min-width:220px;max-width:calc(100% - 24px);min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 18px}
#toast{bottom:calc(130px + env(safe-area-inset-bottom))}
/* Brighter presentation layer; no gameplay geometry changes. */
:root{--yellow:#ffe14a;--red:#ff4f67;--cream:#fff2c7}
html,body{background:#263744}
main{background:#fff2c7}
.card{background:#fffaf0f5;border-color:#ffffffcc;box-shadow:0 20px 55px #18314059}
header div{background:#152431e6;border-color:#ffffff66}
#banner{background:#ffffff;border-color:#28425130;box-shadow:0 5px 18px #1d3c4d33}
#sound{z-index:5;position:absolute;top:max(58px,calc(env(safe-area-inset-top) + 44px));right:15px;width:34px;height:34px;padding:0;border:1px solid #ffffff66;border-radius:50%;background:#152431d9;color:#ffe14a;box-shadow:0 3px 10px #18314044;font:900 17px system-ui;letter-spacing:0;display:grid;place-items:center}
#sound:active{transform:scale(.94);box-shadow:0 2px 7px #18314044}
#sound.muted{color:#9da8ad;background:#263744cc}
#roast{min-height:34px;margin:0 0 13px!important;color:#42515a!important;font-size:12px!important;font-weight:800;font-style:italic}
.share-primary{margin-bottom:10px;background:#17202a;color:#fff;box-shadow:0 6px 0 #070b0e}
.socials{display:grid;grid-template-columns:.7fr 1.5fr 1fr;gap:7px;margin-bottom:12px}
.socials button{padding:10px 4px;border-radius:10px;background:#eef3f4;color:#263744;box-shadow:0 4px 0 #b9c3c6;font-size:9px}
.socials button:active{box-shadow:0 2px 0 #b9c3c6}
.card a{color:#52636d;text-decoration:underline;text-underline-offset:2px}.consent{z-index:9;position:absolute;left:20px;right:20px;top:50%;transform:translateY(-46%) scale(.96);padding:24px;border-radius:22px;background:#fffaf0;color:#17202a;box-shadow:0 24px 70px #0009;text-align:center;opacity:0;pointer-events:none;transition:.18s}.consent.visible{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}.consent h3{margin:0 0 12px;font-size:20px}.consent p{font-size:12px;line-height:1.5;color:#4b5a62}.consent small{display:block;margin:10px 0 17px;color:#66747b}.consent>div:last-child{display:grid;grid-template-columns:1fr 1.35fr;gap:9px}.consent button{padding:12px}.consent .ghost{background:#e7ecec;color:#263744}#sharePreview{padding:12px;border-radius:12px;background:#17202a;color:#ffe14a;font-size:17px;font-weight:1000}#consentShade{z-index:8;position:absolute;inset:0;background:#10171cc7;opacity:0;pointer-events:none;transition:.18s}#consentShade.visible{opacity:1;pointer-events:auto}
#challengeNotice{display:none;margin:12px 0 -5px;padding:8px;border-radius:10px;background:#17202a;color:#ffe14a;font-size:11px;font-weight:1000;letter-spacing:.5px}#challengeNotice.show{display:block}

/* Release presentation and policy-safe ad surfaces. */
[hidden]{display:none!important}
.menu-art{display:block;width:94px;height:94px;margin:-8px auto 9px;border:3px solid #fff;border-radius:23px;object-fit:cover;object-position:50% 43%;box-shadow:0 8px 20px #17313e42}
#start h1{margin:3px 0 8px;font-size:41px}
#start .steps{margin:14px 0}
.reward{background:var(--yellow);color:var(--ink);box-shadow:0 6px 0 #b78c15}
.reward:active{box-shadow:0 3px 0 #b78c15}
#adLoading{z-index:12;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#11202be8;color:#fff;opacity:0;pointer-events:none;transition:opacity .14s;font-size:11px;letter-spacing:1px}
#adLoading.visible{opacity:1;pointer-events:auto}
#adLoading span{width:34px;height:34px;border:4px solid #ffffff45;border-top-color:#ffe14a;border-radius:50%;animation:adSpin .8s linear infinite}
@keyframes adSpin{to{transform:rotate(360deg)}}
.ad-rail{display:none;width:300px;height:250px;align-self:center;position:relative;background:#ffffff08;border:1px solid #ffffff18;border-radius:12px;color:#b7c1c6;text-align:center;overflow:hidden}
.ad-rail small{display:block;padding:7px;font-size:8px;letter-spacing:1.5px}
.ad-rail>div{width:300px;height:250px}
@media(min-width:1460px){body[data-platform="website"]{display:grid;grid-template-columns:300px 520px 300px;gap:160px;justify-content:center;align-items:center;background:radial-gradient(circle at 50% 16%,#46697a,#1a2933 65%)}body[data-platform="website"] .ad-rail.mounted{display:block}}
@media(max-height:720px){#start .menu-art{width:70px;height:70px;margin:-8px auto 5px}#start h1{font-size:36px}.steps{margin:9px 0}.card{padding-top:18px;padding-bottom:18px}}

/* Device-fit and rendering safeguards. The canvas itself remains capped at 2x DPR in game.js. */
body{overscroll-behavior:none;-webkit-user-select:none;user-select:none}
main{contain:layout paint;isolation:isolate}
canvas{image-rendering:auto;touch-action:none}
header{left:max(16px,calc(env(safe-area-inset-left) + 8px));right:max(16px,calc(env(safe-area-inset-right) + 8px))}
.card,.consent{left:max(20px,calc(env(safe-area-inset-left) + 10px));right:max(20px,calc(env(safe-area-inset-right) + 10px))}
@media(min-width:600px){main{box-shadow:0 0 55px #08131a80}}
@media(max-width:520px){main{max-width:none}}
@media(max-height:560px){
  .card{padding:12px 18px;border-radius:20px}
  #start .menu-art{display:none}
  #start h1{font-size:31px;line-height:.82;margin:2px 0 5px}
  #start p{margin:5px 0;font-size:12px;line-height:1.25}
  #start .steps{margin:6px 0}
  #start button,#result button{min-height:38px;padding:9px}
  #start small,#result small{display:none}
  h2{font-size:52px}.socials{margin-bottom:7px}.socials button{padding:7px 3px}
}
@media(prefers-reduced-motion:reduce){.card,.consent,#toast,#callout{transition:none}#adLoading span{animation-duration:1.5s}}

/* Explicit 13+ entry choice. It is session-only and stays outside gameplay. */
.card{max-height:calc(100% - 24px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
button:disabled{opacity:.48;filter:saturate(.55);cursor:not-allowed;box-shadow:0 3px 0 #8d8a7a}
button:disabled:active{transform:none;box-shadow:0 3px 0 #8d8a7a}
#start .steps{margin:10px 0}
#entryGate{margin:8px 0 12px;padding:9px 10px 10px;border:1px solid #17202a24;border-radius:14px;background:#ffffffb8;text-align:left}
#entryGate legend{padding:0 6px;color:#45545c;font-size:9px;font-weight:1000;letter-spacing:1px}
.age-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.age-choice{min-height:38px;padding:8px;background:#eef3f4;color:#263744;box-shadow:0 3px 0 #b9c3c6;font-size:12px}
.age-choice[aria-pressed="true"]{background:#17202a;color:#ffe14a;box-shadow:0 3px 0 #070b0e}
.terms-check{display:grid!important;grid-template-columns:18px 1fr;gap:7px;align-items:start;margin:10px 1px 4px!important;color:#46555d!important;font-size:9px!important;line-height:1.35;letter-spacing:0!important;text-align:left}
.terms-check input{width:17px;height:17px;margin:0;accent-color:#17202a}
#entryNote{margin:6px 1px 0!important;min-height:14px;color:#6c777c!important;font-size:9px!important;line-height:1.3!important}
#entryNote.teen{color:#8a5a18!important}
@media(max-height:560px){#entryGate{margin:5px 0 8px;padding:6px 8px}.terms-check{margin-top:7px!important}#entryNote{display:none}}
