/* Snake host shell. Same chrome as the Frogger V2 / Rocket V2 platform adapters (top bar with status dot + account chip + SHARE/RANKS, footer logo,
 * toast, RANKS card). Plain CSS; no external requests. The game itself stays in its own iframe. */
:root { color-scheme: dark; --bg:#0b1020; --panel:#0e1530; --line:#3b5bdb; --fg:#e8f0ff; --mut:#9aa6d4; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:#0f2748; color:var(--fg); font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; overflow:hidden; }
.s2-app { position:fixed; inset:0; display:flex; flex-direction:column; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pg-top, .pg-foot { flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:0 max(8px, env(safe-area-inset-left, 0px)); background:rgba(15, 39, 72, 0.9); }
.pg-top { height:30px; padding-top:env(safe-area-inset-top, 0px); font-size:11px; line-height:1; font-weight:700; }
.pg-foot { height:30px; padding-bottom:env(safe-area-inset-bottom, 0px); justify-content:center; font-size:9px; letter-spacing:.04em; gap:8px; }
.pg-who { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pg-tag { flex:0 0 auto; padding:3px 4px; background:#2a2140; color:#d9c8ff; font-size:9px; }
.pg-dot { flex:0 0 auto; width:6px; height:6px; background:#7a8599; image-rendering:pixelated; }
.pg-dot[data-run="ranked"] { background:#3ddc84; }
.pg-dot[data-run="practice"] { background:#ffc83d; }
.pg-btns { flex:0 0 auto; display:flex; gap:4px; }
.pg-btn { font:inherit; font-weight:700; font-size:10px; line-height:1; padding:5px 6px; color:#0b1020; background:#cfe3ff; border:0; border-radius:0; cursor:pointer; text-decoration:none; touch-action:manipulation; }
.pg-btn.pg-on { background:#ffc83d; }
.pg-btn:focus-visible { outline:2px solid #ffc83d; outline-offset:1px; }
.pg-hide { display:none !important; }
.pg-foot-t { white-space:nowrap; opacity:.85; }
.pg-logo { height:100%; max-height:18px; width:auto; image-rendering:pixelated; image-rendering:crisp-edges; }
.s2-stage { position:relative; flex:1 1 auto; min-height:0; background:#000; overflow:hidden; }
.s2-stage iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.s2-stage iframe[inert] { pointer-events:none; filter:saturate(.6) brightness(.6); }
.pg-toast { position:fixed; left:50%; bottom:34px; transform:translateX(-50%); z-index:6; max-width:min(94vw,560px); padding:6px 9px; background:rgba(15, 39, 72, 0.94); border:1px solid #3b5bdb; font-size:11px; line-height:1.5; opacity:0; pointer-events:none; transition:opacity .2s; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.pg-toast.show { opacity:1; }
.pg-toast[data-state="error"], .pg-toast[data-state="offline"] { border-color:#ff5d6c; }
.s2-extra { color:#9aa6d4; }
.s2-extra:empty { display:none; }
.s2-modal { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15, 39, 72, 0.72); padding:12px; z-index:5; }
.s2-modal[hidden] { display:none; }
.s2-card, .s2-result { background:var(--panel); border:2px solid var(--line); padding:14px; font-size:12px; line-height:1.6; }
.s2-card { width:min(420px,100%); }
.s2-result { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); width:min(94%,460px); z-index:4; }
.s2-result[hidden] { display:none; }
.s2-card h2, .s2-result h2 { margin:0 0 6px; font-size:14px; color:#ffc83d; font-weight:400; }
.s2-card p, .s2-result p { margin:0 0 10px; color:var(--mut); }
.s2-actions { display:flex; flex-wrap:wrap; gap:8px; }
.s2-btn { display:inline-block; font:inherit; font-weight:700; font-size:12px; border:0; background:#cfe3ff; color:#0b1020; padding:9px 11px; min-height:36px; cursor:pointer; text-decoration:none; }
.s2-btn.primary { background:#3ddc84; }
.s2-btn:focus-visible { outline:2px solid #ffc83d; outline-offset:2px; }
.s2-muted { color:var(--mut); }
/* RANKS panel (same card as Frogger V2) */
.pg-panel { position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; background:rgba(15, 39, 72, 0.72); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#e8f0ff; }
.pg-card { width:min(94vw,460px); max-height:88dvh; overflow:auto; background:#0e1530; border:2px solid #3b5bdb; padding:12px; display:flex; flex-direction:column; gap:8px; font-size:12px; line-height:1.5; }
.pg-h { font-size:14px; color:#ffc83d; }
.pg-sub { opacity:.7; font-size:10px; }
.pg-tabs { display:flex; gap:4px; }
.pg-pb { padding:6px; background:#17224a; color:#9fe8b4; }
.pg-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.pg-list li { display:grid; grid-template-columns:40px 1fr auto auto; gap:6px; align-items:center; padding:3px 4px; background:#121b3b; }
.pg-list li.pg-you { outline:1px solid #ffc83d; }
.pg-list .pg-n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-list i { font-style:normal; opacity:.8; }
.pg-list li.pg-empty { display:block; opacity:.8; }
.pg-close { align-self:flex-end; font-size:11px; padding:6px 10px; }
@media (max-width:420px) { .pg-top { font-size:10px; } .pg-btn { font-size:9px; padding:5px; } .pg-foot { font-size:8px; } .pg-toast { font-size:10px; } .pg-card, .s2-card, .s2-result { font-size:11px; } }
@media (min-width:1024px) and (min-height:600px) { .pg-top { height:40px; font-size:15px; gap:12px; padding:0 20px; } .pg-dot { width:10px; height:10px; } .pg-btn { font-size:13px; padding:8px 12px; } .pg-btns { gap:8px; } .pg-tag { font-size:11px; }
  .pg-foot { height:46px; font-size:12px; gap:12px; } .pg-logo { max-height:32px; } .pg-toast { font-size:13px; bottom:58px; } .pg-card { width:min(94vw,600px); font-size:14px; } .pg-sub { font-size:11px; } }
/* touch / narrow screens: the status toast must not cover the engine's D-pad, the top bar (Games / Main Menu / identity / RANKS) or the sign-in banner.
 * It takes the place of the (purely decorative) "BROUGHT TO YOU BY" footer strip instead: full width, opaque, at most two lines, ignores pointer events. */
@media (max-width:560px), (pointer:coarse) {
  .pg-toast { top:auto; left:0; right:0; bottom:0; transform:none; width:auto; max-width:none; min-height:30px; max-height:calc(2.5em + 8px + env(safe-area-inset-bottom, 0px)); overflow:hidden; display:block; text-align:center; background:#0f2748; border-width:1px 0 0; line-height:1.25; font-size:10px; padding:3px max(8px, env(safe-area-inset-right, 0px)) calc(3px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); z-index:8; }
  .pg-toast > span { display:inline; }
  .pg-toast > span + span:not(:empty) { margin-left:6px; }
}
@media (pointer:coarse) and (min-width:1024px) and (min-height:600px) { .pg-toast { min-height:46px; font-size:13px; } }
@media (prefers-reduced-motion:reduce) { .pg-toast { transition:none; } }
/* the sign-in / ranked-unavailable explanation is non-blocking: never taller than half the stage, and it can be dismissed */
.s2-result { max-height:55%; overflow:auto; }
@media (max-width:420px) { .pg-who .pg-pre { display:none; } }
@media (min-width:1024px) and (min-height:600px) and (pointer:fine) { .s2-result { bottom:64px; } }
/* short landscape phones: a compact one-row explanation (text left, buttons right) so the buttons are never cut off and the panel stays small */
@media (max-height:520px) { .s2-result { max-height:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:8px 10px; line-height:1.35; }
  .s2-result h2 { flex:1 0 100%; margin:0; font-size:12px; } .s2-result p { flex:1 1 240px; margin:0; font-size:11px; } .s2-result .s2-actions { flex:0 0 auto; } .s2-result .s2-btn { min-height:32px; padding:6px 10px; } }