/* Phone portrait layout (2026-10-29). Scoped to #rotWrap.native so desktop and landscape are untouched. CHICKEN ESCAPE (#escapeStage) and VAULT (#vaultStage): the scene plate fills the phone; a fixed top stack (logo + tools row, progress strip, HUD, scene title) and a thumb-zone panel at the bottom. Escape's on-art route markers become big route buttons (the art is cropped, so the markers could not line up); the picked route pans the plate/clip towards its anchor (escape.js sets --ce-px). Top stack rows: 44px tools row, 44px strip, 46px HUD, title. */ #rotWrap.native .stage.escape-stage, #rotWrap.native .stage.vault-stage { width:100% !important; height:100%; max-height:none !important; } #rotWrap.native .ce-inner, #rotWrap.native .vt-inner { --t0:calc(env(safe-area-inset-top) + 6px); --sb:calc(env(safe-area-inset-bottom) + 10px); aspect-ratio:auto; width:100%; height:100%; container-type:normal; border-radius:0; } /* ---------------------------------------------------------------- shared: art */ #rotWrap.native .ce-inner > img.ce-still, #rotWrap.native .ce-inner > video.ce-video { object-fit:cover; object-position:var(--ce-px, 50%) 50%; transition:object-position .9s cubic-bezier(.3,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s; } #rotWrap.native .escape-stage.ce-entry-on .ce-still { object-position:71% 50%; } #rotWrap.native .vt-inner > img.vt-still, #rotWrap.native .vt-inner > video.vt-video { object-fit:cover; object-position:56% 50%; } #rotWrap.native .ce-vignette, #rotWrap.native .vt-vignette { background:linear-gradient(180deg, rgba(0,0,0,.72) 0, rgba(0,0,0,.42) 24%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 48%, rgba(0,0,0,.55) 66%, rgba(0,0,0,.9) 100%); } #rotWrap.native .escape-stage.ce-suspense .ce-vignette { box-shadow:inset 0 0 120px 40px rgba(0,0,0,.9); animation:none; } /* ---------------------------------------------------------------- shared: History + Reduce motion, a tidy pair beside the close button */ #rotWrap.native .ce-tools, #rotWrap.native .vt-tools { left:auto; bottom:auto; top:calc(env(safe-area-inset-top) + 2px); right:calc(env(safe-area-inset-right) + 46px); gap:0; font-size:12px; z-index:7; } #rotWrap.native .ce-tools button, #rotWrap.native .ce-tools label, #rotWrap.native .vt-tools button, #rotWrap.native .vt-tools label { box-sizing:border-box; min-height:44px !important; height:44px; padding:0 11px !important; display:inline-flex; align-items:center; gap:7px; border:5px solid transparent; border-radius:999px; background:rgba(12,12,14,.62) padding-box; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font:600 12px/1 Inter, system-ui, sans-serif; letter-spacing:.01em; color:#f1ece2; text-decoration:none; white-space:nowrap; cursor:pointer; } #rotWrap.native .ce-tools input, #rotWrap.native .vt-tools input { appearance:none; -webkit-appearance:none; margin:0; padding:0 !important; border:0 !important; min-height:0 !important; min-width:0; box-sizing:border-box; flex:none; position:relative; width:26px; height:15px; border-radius:99px; background:rgba(255,255,255,.22); transition:background .2s; cursor:pointer; } #rotWrap.native .ce-tools input::after, #rotWrap.native .vt-tools input::after { content:""; position:absolute; left:2px; top:2px; width:11px; height:11px; border-radius:50%; background:#fff; transition:transform .2s; } #rotWrap.native .ce-tools input:checked { background:#46a758; } #rotWrap.native .vt-tools input:checked { background:#c8911e; } #rotWrap.native .ce-tools input:checked::after, #rotWrap.native .vt-tools input:checked::after { transform:translateX(11px); } #rotWrap.native .ce-tools input:focus-visible, #rotWrap.native .vt-tools input:focus-visible { outline:2px solid #fff; outline-offset:2px; } #rotWrap.native .ce-history, #rotWrap.native .vt-history { left:8px; right:8px; width:auto; top:calc(var(--t0) + 46px); bottom:auto; max-height:52%; box-sizing:border-box; padding:14px 14px 10px; border-radius:16px; font-size:13px; z-index:8; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); background:rgba(14,11,8,.94); } #rotWrap.native .vt-history { background:rgba(6,8,12,.95); } #rotWrap.native .ce-history h3, #rotWrap.native .vt-history h3 { font-size:16px; margin:0 0 8px; } #rotWrap.native .ce-history th, #rotWrap.native .vt-history th { font-size:11px; letter-spacing:.06em; padding-bottom:4px; } #rotWrap.native .ce-history td, #rotWrap.native .vt-history td { padding:7px 4px 7px 0; } #rotWrap.native .ce-history p, #rotWrap.native .vt-history p { margin:4px 0; color:#b9ad98; } /* ================================================================ CHICKEN ESCAPE */ #rotWrap.native .ce-top { inset:0; padding:0; display:block; } #rotWrap.native .ce-topleft, #rotWrap.native .ce-topright { display:contents; } #rotWrap.native .ce-top .ce-logo-sm { position:absolute; left:calc(env(safe-area-inset-left) + 10px); top:var(--t0); width:auto; height:40px; } /* progress strip: one tile per scene + the exit, multiplier under the number; the scene name is in the title */ #rotWrap.native .ce-trail { position:absolute; left:8px; right:8px; top:calc(var(--t0) + 48px); box-sizing:border-box; height:46px; padding:4px 4px; border-radius:14px; } #rotWrap.native .ce-trail li { flex:1 1 0; min-width:0; gap:2px; } #rotWrap.native .ce-trail li b { width:22px; height:22px; font-size:12px; border-width:1px; } #rotWrap.native .ce-trail li span { display:none; } #rotWrap.native .ce-trail li em { font-size:11px; font-weight:700; line-height:1.1; } #rotWrap.native .ce-trail li + li::before { right:calc(50% + 14px); width:calc(100% - 28px); top:11px; border-top-width:1px; } #rotWrap.native .ce-trail li.at b { transform:scale(1.12); } #rotWrap.native .ce-trail li.exit b { font-size:0; border:1px solid rgba(242,193,78,.6); background:transparent; } #rotWrap.native .ce-trail li.exit b::after { content:""; width:12px; height:12px; background:#f2c14e; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h2v18H5zM8 4h11l-2.5 4L19 12H8z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h2v18H5zM8 4h11l-2.5 4L19 12H8z'/%3E%3C/svg%3E") center/contain no-repeat; } #rotWrap.native .ce-trail li.exit.done b { background:#f2c14e; } #rotWrap.native .ce-trail li.exit.done b::after { background:#1b1206; } #rotWrap.native .ce-trail li.exit em { display:block; visibility:hidden; } #rotWrap.native .ce-trail li.exit em::before { content:"0"; } /* HUD: three equal chips */ #rotWrap.native .ce-hud { position:absolute; left:8px; right:8px; top:calc(var(--t0) + 100px); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .86fr) minmax(0, 1.2fr); gap:6px; } #rotWrap.native .ce-hud > div { box-sizing:border-box; height:50px; padding:5px 8px; border-radius:12px; text-align:left; min-width:0; display:flex; flex-direction:column; justify-content:space-between; } #rotWrap.native .ce-hud label { font-size:11px; line-height:1.1; letter-spacing:.03em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } #rotWrap.native .ce-hud b { display:block; font-size:17px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rotWrap.native .ce-title { position:absolute; left:14px; right:14px; top:calc(var(--t0) + 158px); } #rotWrap.native .ce-title small { font-size:11px; letter-spacing:.16em; } #rotWrap.native .ce-title b { font-size:28px; } #rotWrap.native .ce-msg { top:calc(var(--t0) + 218px); max-width:88%; text-align:center; font-size:14px; } /* route buttons: bottom thumb zone, two columns for four routes, three across for three */ #rotWrap.native .ce-routes { inset:auto 10px var(--sb) 10px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; transition:opacity .3s; } #rotWrap.native .ce-routes:has(> :nth-child(4)) { grid-template-columns:repeat(2, minmax(0, 1fr)); } #rotWrap.native .ce-route { position:relative; left:auto !important; top:auto !important; transform:none !important; flex-direction:row; justify-content:center; gap:9px; box-sizing:border-box; min-height:58px; padding:6px 10px; border-radius:16px; background:rgba(14,11,8,.74); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#f4ede0; } #rotWrap.native .ce-route:active:not(:disabled) { background:rgba(40,32,20,.85); } #rotWrap.native .ce-route .ce-ring { flex:none; width:16px; height:16px; border-width:2px; animation:none; } #rotWrap.native .ce-route .ce-label { padding:0; background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; font-size:15px; font-weight:700; line-height:1.15; white-space:normal; text-align:left; color:inherit; } #rotWrap.native .ce-route.chosen { border:2px solid #f2c14e; background:rgba(60,44,14,.85); } #rotWrap.native .ce-route.chosen .ce-ring { border-color:#f2c14e; background:#f2c14e; } #rotWrap.native .escape-stage.ce-suspense .ce-route:not(.chosen) { opacity:.3; } /* once revealed, the routes become a compact result strip under the title, out of the way of COLLECT / KEEP RUNNING */ #rotWrap.native .ce-routes:has(.revealed) { inset:calc(var(--t0) + 214px) 8px auto 8px; gap:6px; } #rotWrap.native .ce-route.revealed { min-height:40px; padding:4px 10px 4px 6px; gap:7px; justify-content:flex-start; border-radius:12px; } #rotWrap.native .ce-route.revealed .ce-label { font-size:13px; font-weight:600; } #rotWrap.native .ce-route.revealed:not(.picked) { opacity:.85; } #rotWrap.native .ce-route.picked { border:2px solid #fff; opacity:1; } #rotWrap.native .ce-route.fail { background:rgba(150,28,34,.88); border-color:rgba(255,120,120,.6); } #rotWrap.native .ce-route.fail.picked { border-color:#fff; } #rotWrap.native .ce-route.bonus { background:rgba(120,88,14,.88); border-color:#f2c14e; } #rotWrap.native .ce-route.fail .ce-label, #rotWrap.native .ce-route.bonus .ce-label { background:none; color:#fff; } #rotWrap.native .ce-mark { flex:none; width:24px; height:24px; } #rotWrap.native .escape-stage.ce-caughtview .ce-route:not(.picked) { opacity:.8; } /* the panel: bottom-anchored, above the route buttons when they are showing */ #rotWrap.native .ce-panel { padding:0 10px var(--sb); gap:8px; justify-content:flex-end; align-items:stretch; } #rotWrap.native .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-panel { padding-bottom:calc(var(--sb) + 58px + 10px); } #rotWrap.native .ce-inner:has(#ceRoutes > .ce-route:nth-child(3):not(.revealed)):has(#ceRoutes > .ce-route:nth-child(4)) .ce-panel { padding-bottom:calc(var(--sb) + 124px + 10px); } #rotWrap.native .ce-btn { border-radius:16px; padding:8px 14px; font-size:19px; font-weight:800; letter-spacing:.02em; min-height:56px; line-height:1.1; } #rotWrap.native .ce-btn small { font-size:12px; margin-top:2px; } /* start card */ #rotWrap.native .ce-card { align-self:stretch; width:auto; margin:0; padding:16px 16px 12px; border-radius:22px; } #rotWrap.native .ce-card .ce-logo { width:auto; height:96px; max-width:62%; object-fit:contain; margin:-58px auto 4px; } #rotWrap.native .ce-card.ce-entry { margin-top:60px; } #rotWrap.native .ce-card h3 { font-size:19px; margin:0 0 6px; } #rotWrap.native .ce-card p { font-size:12.5px; line-height:1.45; margin:0 0 12px; } #rotWrap.native .ce-tiers { gap:6px; margin-bottom:12px; } #rotWrap.native .ce-tiers button { min-height:56px !important; padding:6px 2px; border-radius:12px; } #rotWrap.native .ce-tiers button small { font-size:11px; letter-spacing:.08em; margin-bottom:2px; } #rotWrap.native .ce-tiers button b { font-size:15px; line-height:1.05; display:block; } #rotWrap.native #ceStart { min-height:60px; } #rotWrap.native .ce-legal { font-size:11px; margin-top:8px; } /* SCENE_READY: pick card */ #rotWrap.native .ce-pick { flex-direction:column; align-items:stretch; gap:8px; padding:12px 14px; border-radius:18px; } #rotWrap.native .ce-pick-h { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; } #rotWrap.native .ce-pick-h b { font-size:21px; display:inline; } #rotWrap.native .ce-pick-h span { font-size:12px; } #rotWrap.native .ce-next, #rotWrap.native .ce-pick .ce-next, #rotWrap.native .ce-bar .ce-next { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 12px; } #rotWrap.native .ce-next label, #rotWrap.native .ce-pend label { font-size:11px; letter-spacing:.08em; margin-bottom:2px; } #rotWrap.native .ce-next b { font-size:16px; } #rotWrap.native .ce-next label, #rotWrap.native .ce-next b { white-space:normal; } #rotWrap.native .ce-next b.odds { display:block; font-size:13px; font-weight:600; padding:0; background:none; border-radius:0; line-height:1.3; white-space:normal; color:#f4ede0; } #rotWrap.native .ce-pick .ce-next > div:nth-child(2) { grid-column:1 / -1; order:3; } /* DECISION: pending reward, next scene, COLLECT / KEEP RUNNING */ #rotWrap.native .ce-bar { flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px 14px; border-radius:20px; max-width:none; } #rotWrap.native .ce-pend { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:10px; padding:0 0 10px; border-right:0; border-bottom:1px solid rgba(255,255,255,.14); } #rotWrap.native .ce-pend label { grid-column:1; grid-row:1; } #rotWrap.native .ce-pend small { grid-column:1; grid-row:2; font-size:11px; } #rotWrap.native .ce-pend b { grid-column:2; grid-row:1 / span 2; font-size:32px; line-height:1; } #rotWrap.native .ce-choice { display:grid; grid-template-columns:1fr 1fr; gap:8px; } #rotWrap.native .ce-choice .ce-btn { min-width:0; min-height:62px; padding:8px 8px; font-size:17px; white-space:nowrap; } #rotWrap.native .ce-choice .ce-btn small { white-space:normal; } #rotWrap.native .ce-phew { position:static; width:auto; max-width:none; margin:0; box-sizing:border-box; padding:9px 14px; border-radius:14px; font-size:13px; line-height:1.35; } /* result card */ #rotWrap.native .ce-final { padding:16px 16px 14px; } #rotWrap.native .ce-final h2 { font-size:32px; margin:0 0 2px; } #rotWrap.native .ce-final.ce-exit h2 { font-size:38px; } #rotWrap.native .ce-final .ce-amount { font-size:40px; line-height:1.1; } #rotWrap.native .ce-final.ce-lose .ce-amount { text-decoration-thickness:3px; } #rotWrap.native .ce-final > small { font-size:12px; margin-bottom:12px; } #rotWrap.native .ce-final dl { gap:8px; margin:0 0 14px; } #rotWrap.native .ce-final dt { font-size:11px; letter-spacing:.06em; } #rotWrap.native .ce-final dd { font-size:14px; margin-top:3px; } #rotWrap.native .ce-final.ce-lose { padding-top:12px; } #rotWrap.native .ce-portrait { margin:0 0 12px; border-radius:14px; aspect-ratio:16 / 9; } #rotWrap.native .ce-portrait figcaption { font-size:13px; padding:28px 12px 8px; } #rotWrap.native .ce-final .ce-go { min-height:58px; } /* effects */ #rotWrap.native .ce-stamp { top:46%; font-size:64px; } #rotWrap.native .ce-feather { width:12px; height:20px; } #rotWrap.native .ce-coin { width:14px; height:14px; } #rotWrap.native .ce-skip { right:14px; bottom:var(--sb); font-size:11px; padding:6px 12px; border-radius:99px; background:rgba(0,0,0,.45); } /* ================================================================ VAULT */ #rotWrap.native .vt-top { inset:0 0 auto 0; padding:0; display:block; } #rotWrap.native .vt-top .vt-logo-sm { position:absolute; left:calc(env(safe-area-inset-left) + 10px); top:var(--t0); width:auto; height:40px; } #rotWrap.native .vt-ladder { position:absolute; left:8px; right:8px; top:calc(var(--t0) + 48px); display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:5px; } #rotWrap.native .vt-ladder li { min-width:0; box-sizing:border-box; height:46px; padding:4px 2px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; } #rotWrap.native .vt-ladder li b { width:20px; height:20px; font-size:11px; flex:none; } #rotWrap.native .vt-ladder li.core b { width:auto; padding:0 7px; border-radius:99px; font-size:11px; letter-spacing:.06em; } #rotWrap.native .vt-ladder li span { display:none; } #rotWrap.native .vt-ladder li em { font-size:11px; font-weight:700; line-height:1.1; } #rotWrap.native .vt-ladder li.at { box-shadow:none; } #rotWrap.native .vt-hud { left:8px; right:8px; top:calc(var(--t0) + 100px); display:grid; grid-template-columns:1fr 1fr; gap:6px; } #rotWrap.native .vt-hud > div { box-sizing:border-box; height:50px; display:flex; flex-direction:column; justify-content:space-between; padding:6px 12px; border-radius:12px; text-align:left; min-width:0; } #rotWrap.native .vt-hud label { font-size:11px; line-height:1.1; letter-spacing:.08em; } #rotWrap.native .vt-hud b { display:block; font-size:18px; line-height:1.15; } #rotWrap.native .vt-title { left:14px; right:14px; top:calc(var(--t0) + 158px); } #rotWrap.native .vt-title small { font-size:11px; letter-spacing:.16em; } #rotWrap.native .vt-title b { font-size:28px; } #rotWrap.native .vault-stage.vt-entry-on .vt-hud, #rotWrap.native .vault-stage.vt-entry-on .vt-title { visibility:hidden; } #rotWrap.native .vt-msg { top:calc(var(--t0) + 218px); max-width:88%; text-align:center; font-size:14px; } #rotWrap.native .vt-panel { flex-direction:column; justify-content:flex-end; align-items:stretch; gap:8px; padding:0 10px var(--sb); } #rotWrap.native .vt-btn { box-shadow:none; border-radius:16px; padding:8px 14px; font-size:18px; min-height:56px; line-height:1.1; } #rotWrap.native .vt-btn small { font-size:12px; margin-top:2px; } #rotWrap.native .vt-primary, #rotWrap.native .vt-collect { background:#f2c14e; box-shadow:none; } #rotWrap.native .vt-continue { background:#d5dbe3; box-shadow:none; } #rotWrap.native .vt-card { align-self:stretch; width:auto; margin:0; padding:16px 16px 12px; border-radius:22px; box-shadow:none; } #rotWrap.native .vt-card .vt-logo { width:auto; height:104px; max-width:60%; object-fit:contain; margin:-64px auto 6px; } #rotWrap.native .vt-card.vt-entry { margin-top:64px; } #rotWrap.native .vt-card p { font-size:12.5px; line-height:1.45; margin:0 0 12px; } #rotWrap.native .vt-tiers { gap:6px; margin-bottom:12px; } #rotWrap.native .vt-tiers button { min-height:56px !important; padding:6px 2px; border-radius:12px; } #rotWrap.native .vt-tiers button small { font-size:11px; letter-spacing:.08em; margin-bottom:2px; } #rotWrap.native .vt-tiers button b { font-size:15px; line-height:1.05; display:block; } #rotWrap.native #vtStart { min-height:60px; font-size:20px; } #rotWrap.native .vt-legal { font-size:11px; margin-top:8px; } #rotWrap.native .vt-bar { width:auto; box-sizing:border-box; flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px 14px; border-radius:20px; } #rotWrap.native .vt-next { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 12px; } #rotWrap.native .vt-next label, #rotWrap.native .vt-pend label { font-size:11px; letter-spacing:.08em; margin-bottom:2px; } #rotWrap.native .vt-next b { font-size:16px; } #rotWrap.native .vt-next .risk { display:inline-block; font-size:12px; padding:3px 10px; } #rotWrap.native .vt-bar .vt-open { width:100%; min-width:0; font-size:22px; min-height:62px; } #rotWrap.native .vt-pend { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:10px; padding:0 0 10px; border-right:0; border-bottom:1px solid rgba(255,255,255,.14); } #rotWrap.native .vt-pend label { grid-column:1; grid-row:1; } #rotWrap.native .vt-pend small { grid-column:1; grid-row:2; font-size:11px; } #rotWrap.native .vt-pend b { grid-column:2; grid-row:1 / span 2; font-size:32px; line-height:1; } #rotWrap.native .vt-choice { display:grid; grid-template-columns:1fr 1fr; gap:8px; } #rotWrap.native .vt-choice .vt-btn { min-width:0; min-height:62px; padding:8px 10px; font-size:18px; } #rotWrap.native .vt-final { padding:18px 16px 14px; } #rotWrap.native .vt-final h2 { font-size:24px; margin:0 0 4px; } #rotWrap.native .vt-final .vt-amount { font-size:40px; line-height:1.1; } #rotWrap.native .vt-final.vt-lose .vt-amount { text-decoration-thickness:3px; } #rotWrap.native .vt-final > small { font-size:12px; margin-bottom:12px; } #rotWrap.native .vt-final dl { gap:8px; margin:0 0 14px; } #rotWrap.native .vt-final dt { font-size:11px; letter-spacing:.06em; } #rotWrap.native .vt-final dd { font-size:14px; margin-top:3px; } #rotWrap.native .vt-final .vt-primary { min-height:58px; } /* narrow phones (360px): keep the HUD labels whole */ @media (max-width:374px) { #rotWrap.native .ce-hud > div { padding:5px 6px; } #rotWrap.native .ce-hud label { letter-spacing:0; } #rotWrap.native .ce-top .ce-logo-sm, #rotWrap.native .vt-top .vt-logo-sm { height:30px; top:calc(var(--t0) + 5px); } #rotWrap.native .ce-tools button, #rotWrap.native .ce-tools label, #rotWrap.native .vt-tools button, #rotWrap.native .vt-tools label { padding:0 8px !important; gap:6px; } } /* ================================================================ CHICKEN ESCAPE, phone redesign (2026-10-30) The founder: "you've lost the full visual which is what makes it and too much pops up over the video screen". The scene now plays as a full, uncropped 16:9 screen under the logo and escape trail; nothing sits on it except the moment effects (feathers, stamp). Title, HUD, messages, route choices and cards live below it, over a blurred copy of the same scene, so the phone still feels like the game's world. */ #rotWrap.native #escapeStage .ce-inner { --scr-top:calc(var(--t0) + 98px); --scr-h:calc(var(--short, 100vw) * 9 / 16); --below:calc(var(--scr-top) + var(--scr-h)); background:#0b0805; } #rotWrap.native #escapeStage .ce-inner::before { content:""; position:absolute; inset:-48px; z-index:0; pointer-events:none; background:var(--ce-bg, none) center / cover no-repeat; filter:blur(28px) saturate(1.2) brightness(.4); transform:scale(1.08); } #rotWrap.native #escapeStage .ce-inner::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(8,6,4,.55) 0, rgba(8,6,4,.2) 30%, rgba(8,6,4,.35) 60%, rgba(8,6,4,.85) 100%); } /* the screen: the whole frame, edge to edge */ #rotWrap.native #escapeStage .ce-inner > img.ce-still, #rotWrap.native #escapeStage .ce-inner > video.ce-video { inset:auto; left:0; right:0; top:var(--scr-top); width:100%; height:var(--scr-h); z-index:1; object-fit:cover; object-position:50% 50% !important; transform:none !important; box-shadow:0 -1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(255,255,255,.12); } #rotWrap.native #escapeStage.ce-finalcard .ce-still { filter:none; } #rotWrap.native #escapeStage .ce-vignette { top:var(--scr-top); height:var(--scr-h); bottom:auto; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.18), transparent 22%, transparent 78%, rgba(0,0,0,.28)); } #rotWrap.native #escapeStage.ce-suspense .ce-vignette { box-shadow:inset 0 0 60px 18px rgba(0,0,0,.85); } #rotWrap.native #escapeStage .ce-top, #rotWrap.native #escapeStage .ce-tools, #rotWrap.native #escapeStage .ce-history { z-index:6; } /* below the screen: scene title, then one slim HUD row */ #rotWrap.native #escapeStage .ce-title { top:calc(var(--below) + 12px); left:14px; right:14px; z-index:3; } #rotWrap.native #escapeStage .ce-title b { font-size:26px; line-height:1.05; } #rotWrap.native #escapeStage .ce-hud { top:calc(var(--below) + 60px); z-index:3; } #rotWrap.native #escapeStage .ce-hud > div { height:44px; padding:4px 9px; background:rgba(20,15,10,.62); } #rotWrap.native #escapeStage .ce-hud b { font-size:15px; } #rotWrap.native #escapeStage.ce-entry-on .ce-hud { display:none; } #rotWrap.native #escapeStage .ce-msg { top:calc(var(--below) + 12px); left:auto; right:14px; transform:none; max-width:60%; text-align:right; font-size:13px; z-index:4; } /* playback controls sit just under the screen, not on it */ #rotWrap.native #escapeStage .ce-skip { top:calc(var(--below) + 8px); bottom:auto; right:12px; z-index:4; } /* the stamp lands on the lower edge of the screen, smaller, so the scene stays readable behind it */ #rotWrap.native #escapeStage .ce-stamp { top:calc(var(--below) - 26px); font-size:46px; z-index:5; } /* routes: once revealed, a compact result strip under the HUD */ #rotWrap.native #escapeStage .ce-routes:has(.revealed) { inset:calc(var(--below) + 112px) 8px auto 8px; z-index:3; } #rotWrap.native #escapeStage .ce-routes, #rotWrap.native #escapeStage .ce-panel { z-index:3; } /* the start card sits under the screen; the logo no longer needs to break out of it */ #rotWrap.native #escapeStage .ce-card .ce-logo { height:74px; margin:-6px auto 2px; } #rotWrap.native #escapeStage .ce-card.ce-entry { margin-top:0; } /* a caught ending shows who caught you on the screen itself; the card keeps just the caption */ #rotWrap.native #escapeStage .ce-portrait { aspect-ratio:auto; margin:0 0 10px; background:none; } #rotWrap.native #escapeStage .ce-portrait img { display:none; } #rotWrap.native #escapeStage .ce-portrait figcaption { position:static; padding:0; background:none; font-size:14px; text-align:center; color:#f4ede0; } @media (max-height:760px) { #rotWrap.native #escapeStage .ce-title b { font-size:22px; } #rotWrap.native #escapeStage .ce-hud { top:calc(var(--below) + 50px); } #rotWrap.native #escapeStage .ce-routes:has(.revealed) { top:calc(var(--below) + 100px); } #rotWrap.native #escapeStage .ce-card p { display:none; } } #rotWrap.native #escapeStage .ce-inner:has(.ce-final) .ce-hud { display:none; } /* result cards carry their own numbers */ /* ================================================================ CHICKEN ESCAPE, flowing lower half (2026-10-30, round 2) Real phones lose a fifth of the height to the browser's bars, and the fixed positions above piled up after a move. Everything under the screen now stacks in one column (flex), so nothing can overlap; the panel and the route buttons sit at the bottom for thumbs. Fixed-size things above the screen (logo, tools, trail) and the screen itself stay put. */ #rotWrap.native #escapeStage .ce-inner { display:flex; flex-direction:column; gap:8px; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; padding:calc(var(--below) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px); } #rotWrap.native #escapeStage .ce-top { display:contents; } #rotWrap.native #escapeStage .ce-title, #rotWrap.native #escapeStage .ce-hud, #rotWrap.native #escapeStage .ce-routes, #rotWrap.native #escapeStage .ce-panel { position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; z-index:3; } #rotWrap.native #escapeStage .ce-title { order:1; margin:0 4px; } #rotWrap.native #escapeStage .ce-hud { order:2; flex:none; } #rotWrap.native #escapeStage .ce-panel { order:4; margin-top:auto; padding:0 !important; gap:8px; justify-content:flex-end; pointer-events:auto; } #rotWrap.native #escapeStage .ce-routes { order:5; flex:none; pointer-events:auto; } #rotWrap.native #escapeStage .ce-routes:empty { display:none; } /* after a move: one clean panel. The result line names the danger; the route strip and the stats row repeat what the panel says */ #rotWrap.native #escapeStage .ce-routes:has(.revealed) { display:none; } #rotWrap.native #escapeStage .ce-inner:has(.ce-bar) .ce-hud { display:none; } #rotWrap.native #escapeStage .ce-bar { gap:10px; padding:12px 14px; } #rotWrap.native #escapeStage .ce-phew { order:-1; border-radius:12px; padding:8px 12px; font-size:13px; text-align:left; } #rotWrap.native #escapeStage .ce-pend { padding-bottom:8px; } #rotWrap.native #escapeStage .ce-pend b { font-size:28px; } #rotWrap.native #escapeStage .ce-next { gap:6px 12px; } #rotWrap.native #escapeStage .ce-next b { font-size:15px; } #rotWrap.native #escapeStage .ce-bar .ce-next > div:has(b.odds) { grid-column:1 / -1; } #rotWrap.native #escapeStage .ce-choice .ce-btn { min-height:54px; font-size:16px; } /* choosing a route: a compact card above the buttons */ #rotWrap.native #escapeStage .ce-pick { padding:10px 14px; gap:6px; } #rotWrap.native #escapeStage .ce-pick-h b { font-size:19px; } #rotWrap.native #escapeStage .ce-route { min-height:52px; } /* results and the start card also sit at the bottom of the column */ #rotWrap.native #escapeStage .ce-card, #rotWrap.native #escapeStage .ce-final { width:100%; box-sizing:border-box; } /* short screens (browser bars showing): tighter type, drop the extra lines */ @media (max-height:700px) { #rotWrap.native #escapeStage .ce-inner { gap:6px; padding-top:calc(var(--below) + 8px); } #rotWrap.native #escapeStage .ce-title small { font-size:10px; } #rotWrap.native #escapeStage .ce-title b { font-size:21px; } #rotWrap.native #escapeStage .ce-hud > div { height:40px; } #rotWrap.native #escapeStage .ce-pick-h span, #rotWrap.native #escapeStage .ce-card p { display:none; } #rotWrap.native #escapeStage .ce-pend small { display:none; } #rotWrap.native #escapeStage .ce-pend b { font-size:24px; } #rotWrap.native #escapeStage .ce-route { min-height:46px; } #rotWrap.native #escapeStage .ce-choice .ce-btn { min-height:50px; } #rotWrap.native #escapeStage .ce-card .ce-logo { height:56px; } } #rotWrap.native #escapeStage .ce-hud label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; font-size:10px; letter-spacing:.06em; } /* very short screens (small iPhone with the browser bars): slimmer trail, and after a move the panel alone carries the story */ @media (max-height:620px) { #rotWrap.native #escapeStage .ce-inner { --scr-top:calc(var(--t0) + 82px); } #rotWrap.native #escapeStage .ce-trail { height:34px; } #rotWrap.native #escapeStage .ce-trail li em { display:none; } #rotWrap.native #escapeStage .ce-inner:has(.ce-bar) .ce-title { display:none; } #rotWrap.native #escapeStage .ce-bar { padding:10px 12px; gap:8px; } #rotWrap.native #escapeStage .ce-bar .ce-next > div:has(b.odds) { display:none; } #rotWrap.native #escapeStage .ce-phew { padding:6px 10px; font-size:12px; } #rotWrap.native #escapeStage .ce-pick .ce-next > div:has(b.odds) { display:none; } } @media (max-height:620px) { #rotWrap.native #escapeStage .ce-hud { display:none; } /* the trail and the panels already carry these numbers */ #rotWrap.native #escapeStage .ce-final { padding:12px 14px; } #rotWrap.native #escapeStage .ce-final h2 { font-size:26px; } #rotWrap.native #escapeStage .ce-final .ce-amount { font-size:32px; } #rotWrap.native #escapeStage .ce-final > small { display:none; } #rotWrap.native #escapeStage .ce-final dl { margin-bottom:10px; } #rotWrap.native #escapeStage .ce-final .ce-go { min-height:50px; } } /* the painted badges land centred on the scene (the moment is the point), sized to the phone screen */ #rotWrap.native #escapeStage .ce-stamp.art { top:calc(var(--scr-top) + var(--scr-h) / 2); width:min(86vw, 400px); font-size:0; } /* the game sits exactly on the screen: no scrolling inside it (the compact rules above make everything fit) */ #rotWrap.native #escapeStage .ce-inner { overflow:hidden; } /* the near miss card on phones: PHEW sign, portrait, line of text, in the flow above the panel */ #rotWrap.native #escapeStage .ce-phew:has(.ce-phew-art) { width:auto; padding:6px 12px 6px 6px; gap:8px; border-radius:16px; font-size:13px; } #rotWrap.native #escapeStage .ce-phew-art { width:96px; } #rotWrap.native #escapeStage .ce-phew-txt { font-size:13px; gap:8px; } #rotWrap.native #escapeStage .ce-lurk { width:46px; } #rotWrap.native #escapeStage .ce-stamp.art.egg { top:calc(var(--scr-top) + var(--scr-h) / 2); } @media (max-height:620px) { #rotWrap.native #escapeStage .ce-phew-art { width:72px; } #rotWrap.native #escapeStage .ce-lurk { width:38px; } #rotWrap.native #escapeStage .ce-phew-txt { font-size:12px; } } /* after a move with a near miss the card tells the story: drop the scene title, and on shorter screens the odds line */ #rotWrap.native #escapeStage .ce-inner:has(.ce-phew-art) .ce-title { display:none; } @media (max-height:760px) { #rotWrap.native #escapeStage .ce-inner:has(.ce-phew-art) .ce-bar .ce-next > div:has(b.odds) { display:none; } } /* very small phones: "if caught you lose" repeats the pending reward shown just above, so it goes; the PHEW sign shrinks */ @media (max-height:620px) { #rotWrap.native #escapeStage .ce-bar .ce-next > div:has(b.loss) { display:none; } #rotWrap.native #escapeStage .ce-phew-art { width:60px; } #rotWrap.native #escapeStage .ce-lurk { width:34px; } #rotWrap.native #escapeStage .ce-phew:has(.ce-phew-art) { padding:4px 10px 4px 4px; } } /* cash-out on phones: the COLLECTED! sign crowns the result card */ #rotWrap.native #escapeStage .ce-final-badge { width:min(78%, 300px); margin:-64px auto 2px; } #rotWrap.native #escapeStage .ce-final:has(.ce-final-badge) { margin-top:56px; } @media (max-height:620px) { #rotWrap.native #escapeStage .ce-final-badge { width:min(60%, 220px); margin-top:-44px; } #rotWrap.native #escapeStage .ce-final:has(.ce-final-badge) { margin-top:40px; } } @media (max-height:780px) { #rotWrap.native #escapeStage .ce-final:has(.ce-final-badge) dl { display:none; } #rotWrap.native #escapeStage .ce-final:has(.ce-final-badge) > small { margin-bottom:10px; } } @media (max-height:620px) { #rotWrap.native #escapeStage .ce-final-badge { width:min(44%, 160px); margin-top:-36px; } #rotWrap.native #escapeStage .ce-final:has(.ce-final-badge) { margin-top:30px; } #rotWrap.native #escapeStage .ce-final:has(.ce-final-badge) .ce-amount { font-size:30px; } } /* the cash-out card always fits: the COLLECTED! sign takes only the height left under the scene after the amount and Play again (and the home indicator) are reserved, so no phone size or browser bar can push the button off screen */ #rotWrap.native #escapeStage .ce-final:has(.ce-final-badge) { margin-top:0; padding-top:10px; } #rotWrap.native #escapeStage .ce-final-badge { width:auto; max-width:82%; margin:0 auto 2px; height:clamp(56px, calc(var(--long, 100dvh) - var(--below) - 236px - env(safe-area-inset-bottom, 0px)), 210px); object-fit:contain; } #rotWrap.native #escapeStage .ce-final:has(.ce-final-badge) .ce-go { margin-top:2px; } /* caught card on phones: the scene already shows who caught you, so the card keeps the sign, the "caught by" row and the loss */ #rotWrap.native #escapeStage .ce-final.ce-lose .ce-portrait { display:none; } #rotWrap.native #escapeStage .ce-final.ce-lose:has(.ce-final-badge) dl { display:none; } #rotWrap.native #escapeStage .ce-final.ce-lose .ce-final-badge { height:clamp(52px, calc(var(--long, 100dvh) - var(--below) - 290px - env(safe-area-inset-bottom, 0px)), 170px); } #rotWrap.native #escapeStage .ce-by { gap:10px; margin:2px 0 4px; } #rotWrap.native #escapeStage .ce-by img { width:44px; } #rotWrap.native #escapeStage .ce-by small { font-size:10px; } #rotWrap.native #escapeStage .ce-by b { font-size:20px; } #rotWrap.native #escapeStage .ce-final.ce-lose .ce-amount { gap:8px; font-size:30px; } #rotWrap.native #escapeStage .ce-amt-ico { width:38px; } #rotWrap.native #escapeStage .ce-final.ce-lose .ce-final-badge { height:clamp(56px, calc(var(--long, 100dvh) - var(--below) - 232px - env(safe-area-inset-bottom, 0px)), 180px); } /* ================================================================ CHICKEN ESCAPE, painted pick screen (2026-10-30, round 3) The founder: "looks very AI developed… empty space in the middle… the 4 options should stand out much more". While a route is being picked the area under the scene is: the scene name on a wooden plank (with the pending reward), one stakes line (who is lurking and behind how many routes, what clearing pays, what getting caught costs), then the routes as painted Nano Banana cards that fill the rest of the screen, each named on a plank. */ #rotWrap.native #escapeStage .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-hud { display:none; } #rotWrap.native #escapeStage .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:10px; margin:0; min-height:58px; box-sizing:border-box; padding:8px 26px 7px 30px; background:var(--ce-plank, url("../assets/escape/plank.webp")) center / 100% 100% no-repeat; text-shadow:0 1px 0 rgba(255,226,170,.45); } #rotWrap.native #escapeStage .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title small { grid-column:1; color:#6a3810 !important; font-size:10px; letter-spacing:.18em; text-shadow:none; } #rotWrap.native #escapeStage .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title > b { grid-column:1; color:#3b1d07; font-size:24px; line-height:1.02; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rotWrap.native #escapeStage .ce-title-pend { display:flex; grid-column:2; grid-row:1 / span 2; flex-direction:column; align-items:flex-end; font-style:normal; } #rotWrap.native #escapeStage .ce-title-pend i { font:700 9px/1.1 Inter, system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#7a4517; font-style:normal; } #rotWrap.native #escapeStage .ce-title-pend b { font:400 21px/1.05 "Lilita One", sans-serif; color:#3b1d07; } /* the stakes line replaces the "Pick a route" box */ #rotWrap.native #escapeStage .ce-inner:has(.ce-stakes) .ce-panel { margin-top:0; } #rotWrap.native #escapeStage .ce-pick:has(.ce-stakes) { padding:8px 10px 8px 8px; border-radius:16px; background:rgba(16,11,7,.78); border:1px solid rgba(242,193,78,.22); } #rotWrap.native #escapeStage .ce-pick:has(.ce-stakes) .ce-pick-h, #rotWrap.native #escapeStage .ce-pick:has(.ce-stakes) .ce-next { display:none; } #rotWrap.native #escapeStage .ce-stakes { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; grid-template-rows:auto auto; align-items:center; column-gap:10px; row-gap:4px; } #rotWrap.native #escapeStage .ce-stakes .ce-lurk { grid-row:1 / span 2; width:50px; height:auto; margin:0; } #rotWrap.native #escapeStage .ce-st-who { grid-row:1 / span 2; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.2; } #rotWrap.native #escapeStage .ce-st-who b { font:400 17px/1.05 "Lilita One", sans-serif; color:#f4ede0; } #rotWrap.native #escapeStage .ce-st-who span { font:600 12px/1.25 Inter, system-ui, sans-serif; color:#d4c7b0; } #rotWrap.native #escapeStage .ce-st-egg { display:inline-flex; align-items:center; gap:4px; color:#f2c14e !important; } #rotWrap.native #escapeStage .ce-st-egg img { width:15px; height:auto; } #rotWrap.native #escapeStage .ce-st-amt { display:flex; align-items:center; gap:6px; justify-self:end; } #rotWrap.native #escapeStage .ce-st-amt img { width:24px; height:24px; object-fit:contain; flex:none; } #rotWrap.native #escapeStage .ce-st-amt div { display:flex; flex-direction:column; align-items:flex-end; line-height:1.05; } #rotWrap.native #escapeStage .ce-st-amt i { font:700 9px/1.1 Inter, system-ui, sans-serif; letter-spacing:.1em; text-transform:uppercase; font-style:normal; color:#a99c86; } #rotWrap.native #escapeStage .ce-st-amt b { font:400 18px/1.05 "Lilita One", sans-serif; font-variant-numeric:tabular-nums; } #rotWrap.native #escapeStage .ce-st-amt.win b { color:#f6cf5a; } #rotWrap.native #escapeStage .ce-st-amt.lose b { color:#ff7a70; } #rotWrap.native #escapeStage .ce-panel.ce-dim { opacity:.45; transition:opacity .3s; } /* the painted route cards fill everything under the stakes line */ #rotWrap.native #escapeStage .ce-routes:has(> .ce-route:not(.revealed)) { flex:1 1 0; min-height:0; grid-template-columns:minmax(0, 1fr); grid-auto-rows:minmax(0, 1fr); gap:8px; } #rotWrap.native #escapeStage .ce-routes:has(> .ce-route:not(.revealed)):has(> :nth-child(4)) { grid-template-columns:repeat(2, minmax(0, 1fr)); } #rotWrap.native #escapeStage .ce-route:not(.revealed) { display:block; min-height:0; height:auto; padding:0; overflow:hidden; border-radius:16px; border:1.5px solid rgba(242,193,78,.4); background:#1a120a; backdrop-filter:none; -webkit-backdrop-filter:none; transition:opacity .3s, border-color .2s, transform .15s; -webkit-tap-highlight-color:transparent; } #rotWrap.native #escapeStage .ce-route:not(.revealed) .ce-route-art { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; -webkit-user-select:none; } #rotWrap.native #escapeStage .ce-route:not(.revealed)::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 52%, rgba(10,6,3,.55)); } #rotWrap.native #escapeStage .ce-route:not(.revealed) .ce-ring { display:none; } #rotWrap.native #escapeStage .ce-route:not(.revealed) .ce-label { position:absolute; z-index:1; left:50%; bottom:8px; transform:translateX(-50%); box-sizing:border-box; width:max-content; min-width:58%; max-width:calc(100% - 14px); padding:7px 16px 6px; background:var(--ce-plank, url("../assets/escape/plank.webp")) center / 100% 100% no-repeat; border:0; font:400 16px/1.05 "Lilita One", sans-serif; letter-spacing:.01em; color:#3b1d07; text-align:center; text-shadow:0 1px 0 rgba(255,226,170,.5); white-space:nowrap; } #rotWrap.native #escapeStage .ce-route:not(.revealed):active:not(:disabled) { transform:scale(.97) !important; background:#1a120a; } #rotWrap.native #escapeStage .ce-route:not(.revealed):focus-visible { outline:3px solid #fff; outline-offset:2px; } #rotWrap.native #escapeStage .ce-route.chosen:not(.revealed) { border:3px solid #f2c14e; background:#1a120a; } #rotWrap.native #escapeStage.ce-suspense .ce-route:not(.chosen) { opacity:.28; } /* three routes: stacked wide cards on tall screens, side by side when the space is short */ @media (max-height:700px) { #rotWrap.native #escapeStage .ce-routes:has(> .ce-route:not(.revealed)):not(:has(> :nth-child(4))) { grid-template-columns:repeat(3, minmax(0, 1fr)); } #rotWrap.native #escapeStage .ce-routes:has(> .ce-route:not(.revealed)):not(:has(> :nth-child(4))) .ce-label { font-size:13px; padding:6px 8px 5px; white-space:normal; width:calc(100% - 10px); min-width:0; bottom:5px; } #rotWrap.native #escapeStage .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title { min-height:46px; padding:6px 18px 5px; } #rotWrap.native #escapeStage .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title > b { font-size:19px; } #rotWrap.native #escapeStage .ce-title-pend b { font-size:17px; } #rotWrap.native #escapeStage .ce-stakes .ce-lurk { width:40px; } #rotWrap.native #escapeStage .ce-st-who b { font-size:15px; } #rotWrap.native #escapeStage .ce-st-who span { font-size:11px; } #rotWrap.native #escapeStage .ce-st-amt b { font-size:16px; } #rotWrap.native #escapeStage .ce-st-amt img { width:20px; height:20px; } #rotWrap.native #escapeStage .ce-route:not(.revealed) .ce-label { font-size:14px; padding:5px 12px 4px; bottom:5px; } } @media (max-height:620px) { #rotWrap.native #escapeStage .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title { display:none; } #rotWrap.native #escapeStage .ce-pick:has(.ce-stakes) { padding:5px 8px 5px 6px; } #rotWrap.native #escapeStage .ce-stakes .ce-lurk { width:34px; } } /* ================================================================ CHICKEN ESCAPE worlds on phones (2026-10-30) The start card gains a world row (the free farm + paid worlds, bought once and kept forever); a locked world opens the unlock sheet (art on the screen, return / top win / scenes, one-off unlock). Paid worlds bring their own label plate: Neon City labels sit on a dark neon sign with light lettering instead of the farm's wooden plank. */ #rotWrap.native #escapeStage .ce-worlds-h { font-size:10px; letter-spacing:.14em; margin:0 0 6px; } #rotWrap.native #escapeStage .ce-worlds { display:flex; gap:8px; margin:0 -16px 12px; padding:0 16px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; } #rotWrap.native #escapeStage .ce-worlds::-webkit-scrollbar { display:none; } #rotWrap.native #escapeStage .ce-world { flex:0 0 calc(50% - 4px); scroll-snap-align:start; border-radius:14px; padding-bottom:7px; gap:1px; min-height:44px; } #rotWrap.native #escapeStage .ce-world img { margin-bottom:5px; } #rotWrap.native #escapeStage .ce-world b { font-size:15px; padding:0 9px; } #rotWrap.native #escapeStage .ce-world em { font-size:11px; padding:0 9px; } #rotWrap.native #escapeStage .ce-world-tag { top:6px; right:6px; font-size:10px; padding:3px 8px; } #rotWrap.native #escapeStage .ce-world:hover { transform:none; } #rotWrap.native #escapeStage .ce-inner:has(.ce-worlds) .ce-card.ce-entry h3 { display:none; } /* the world row says where you're playing */ #rotWrap.native #escapeStage .ce-inner:has(.ce-worlds) .ce-card.ce-entry > p { display:none; } #rotWrap.native #escapeStage .ce-unlock { padding:12px 16px 10px; } #rotWrap.native #escapeStage .ce-unlock .ce-logo { height:clamp(44px, calc(var(--long, 100dvh) - var(--below) - 330px - env(safe-area-inset-bottom, 0px)), 96px); margin:0 auto 4px; } #rotWrap.native #escapeStage .ce-unlock h3 { display:block; font-size:19px; margin:0 0 10px; } #rotWrap.native #escapeStage .ce-unlock-stats { gap:6px; margin-bottom:10px; } #rotWrap.native #escapeStage .ce-unlock-stats div { padding:8px 4px; border-radius:12px; } #rotWrap.native #escapeStage .ce-unlock-stats b { font-size:24px; } #rotWrap.native #escapeStage .ce-unlock-stats small { font-size:10px; } #rotWrap.native #escapeStage .ce-unlock p { font-size:12px; margin:0 0 10px; } #rotWrap.native #escapeStage .ce-textbtn { font-size:13px; min-height:44px; margin-top:2px; } #rotWrap.native #escapeStage .ce-unlock .ce-legal { margin-top:2px; } @media (max-height:620px) { #rotWrap.native #escapeStage .ce-unlock p { display:none; } #rotWrap.native #escapeStage .ce-world img { aspect-ratio:21 / 9; } } /* Neon City lettering on the dark neon sign plates */ #rotWrap.native #escapeStage[data-world="neon"] .ce-route:not(.revealed) .ce-label { color:#eafcff; text-shadow:0 0 6px rgba(56,232,255,.8); padding-top:8px; padding-bottom:8px; } #rotWrap.native #escapeStage[data-world="neon"] .ce-route:not(.revealed) { border-color:rgba(56,232,255,.45); } #rotWrap.native #escapeStage[data-world="neon"] .ce-route.chosen:not(.revealed) { border-color:#ff2e9a; } #rotWrap.native #escapeStage[data-world="neon"] .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title { text-shadow:0 0 8px rgba(56,232,255,.6); } #rotWrap.native #escapeStage[data-world="neon"] .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title small { color:#ff8ae0 !important; } #rotWrap.native #escapeStage[data-world="neon"] .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title > b, #rotWrap.native #escapeStage[data-world="neon"] .ce-title-pend b { color:#eafcff; } #rotWrap.native #escapeStage[data-world="neon"] .ce-title-pend i { color:#9fdcff; } #rotWrap.native #escapeStage[data-world="neon"] .ce-pick:has(.ce-stakes) { border-color:rgba(56,232,255,.28); background:rgba(10,8,22,.8); } /* short phones (browser bars showing): the world row turns into compact side-by-side chips (thumb + name) and the card drops its logo, so the tiers and START always fit; the unlock sheet compacts the same way */ @media (max-height:700px) { #rotWrap.native #escapeStage .ce-unlock h3 { font-size:16px; margin-bottom:6px; } #rotWrap.native #escapeStage .ce-unlock-stats div { padding:4px; } #rotWrap.native #escapeStage .ce-unlock-stats b { font-size:19px; } #rotWrap.native #escapeStage .ce-unlock .ce-logo { height:clamp(30px, calc(var(--long, 100dvh) - var(--below) - 270px - env(safe-area-inset-bottom, 0px)), 96px); } #rotWrap.native #escapeStage .ce-textbtn { min-height:40px; } } @media (max-height:620px) { #rotWrap.native #escapeStage .ce-card.ce-entry:has(.ce-worlds) { padding-top:10px; } #rotWrap.native #escapeStage .ce-card.ce-entry:has(.ce-worlds) .ce-logo { display:none; } #rotWrap.native #escapeStage .ce-world { flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:0; padding:5px 8px 5px 5px; min-height:56px; } #rotWrap.native #escapeStage .ce-world img { width:62px; height:46px; aspect-ratio:auto; border-radius:9px; margin:0; flex:none; } #rotWrap.native #escapeStage .ce-world b, #rotWrap.native #escapeStage .ce-world em { padding:0; flex:1 1 calc(100% - 80px); min-width:0; } #rotWrap.native #escapeStage .ce-world b { align-self:flex-end; font-size:14px; } #rotWrap.native #escapeStage .ce-world em { align-self:flex-start; font-size:10px; } #rotWrap.native #escapeStage .ce-world { display:grid; grid-template-columns:62px minmax(0, 1fr); grid-template-rows:1fr 1fr; } #rotWrap.native #escapeStage .ce-world img { grid-row:1 / span 2; } #rotWrap.native #escapeStage .ce-world-tag { top:3px; right:3px; font-size:9px; padding:2px 6px; } #rotWrap.native #escapeStage .ce-worlds { margin-bottom:8px; } #rotWrap.native #escapeStage .ce-unlock .ce-legal, #rotWrap.native #escapeStage .ce-card.ce-entry:has(.ce-worlds) .ce-legal { display:none; } } @media (max-height:700px) { #rotWrap.native #escapeStage .ce-unlock { padding:8px 14px 4px; } #rotWrap.native #escapeStage .ce-unlock #ceUnlock { min-height:50px; } #rotWrap.native #escapeStage .ce-unlock .ce-textbtn { margin-top:0; } } /* start card polish (2026-10-30): world cards composed for the tile, painted coin tiers, painted START plate */ #rotWrap.native #escapeStage .ce-world img { aspect-ratio:4 / 3; } #rotWrap.native #escapeStage .ce-tiers { gap:6px; } #rotWrap.native #escapeStage .ce-tiers button { min-height:74px !important; padding:6px 2px 6px; gap:1px; border-radius:14px; } #rotWrap.native #escapeStage .ce-tier-ico { width:30px; height:30px; margin-bottom:2px; } #rotWrap.native #escapeStage .ce-tiers button small { font-size:10px; letter-spacing:.1em; margin:0; } #rotWrap.native #escapeStage .ce-tiers button b { font-size:16px; line-height:1.05; } #rotWrap.native #escapeStage .ce-go.ce-go-art { border-width:0 30px; border-image:var(--ce-gobtn) 0 14% fill / 0 30px stretch; border-radius:0; min-height:64px; padding:6px 0; font-size:21px; } #rotWrap.native #escapeStage .ce-go.ce-go-art small { font-size:12px; opacity:.92; } @media (max-height:760px) { #rotWrap.native #escapeStage .ce-world img { aspect-ratio:16 / 9; } } @media (max-height:700px) { #rotWrap.native #escapeStage .ce-tiers button { min-height:58px !important; padding:4px 2px; flex-direction:column; } #rotWrap.native #escapeStage .ce-tier-ico { width:22px; height:22px; margin-bottom:0; } #rotWrap.native #escapeStage .ce-tiers button b { font-size:14px; } #rotWrap.native #escapeStage .ce-go.ce-go-art { min-height:54px; font-size:19px; } } @media (max-height:620px) { #rotWrap.native #escapeStage .ce-world img { aspect-ratio:auto; } } #rotWrap.native #escapeStage .ce-world em i { font-style:normal; } @media (max-height:620px) { #rotWrap.native #escapeStage .ce-world { grid-template-columns:62px minmax(0, 1fr) auto; } #rotWrap.native #escapeStage .ce-world b { grid-column:2 / span 2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #rotWrap.native #escapeStage .ce-world em { grid-column:2; white-space:nowrap; } #rotWrap.native #escapeStage .ce-world em i { display:none; } #rotWrap.native #escapeStage .ce-world-tag { position:static; grid-column:3; grid-row:2; align-self:flex-start; justify-self:end; } } #rotWrap.native #escapeStage .ce-world em u, #rotWrap.native #escapeStage .ce-world em s { text-decoration:none; } #rotWrap.native #escapeStage .ce-wcost { display:none; } @media (max-height:620px) { #rotWrap.native #escapeStage .ce-world { grid-template-columns:62px minmax(0, 1fr); } #rotWrap.native #escapeStage .ce-world-tag { display:none; } #rotWrap.native #escapeStage .ce-wcost { display:inline; color:#fff; } #rotWrap.native #escapeStage .ce-world.locked .ce-wx { display:none; } } /* start card v3 (2026-10-30): the logo is painted into the world banner above the card (banner.jpg); the world row is a swipe strip (2 tiles, or 2.4 so the next one peeks in once there are 3+ worlds); the tiles take only the height left after the tiers and START, so START is always on screen at any height or with the browser bars showing */ #rotWrap.native #escapeStage.ce-entry-on .ce-card .ce-logo { display:none; } #rotWrap.native #escapeStage .ce-card.ce-entry:has(.ce-worlds) { padding-top:12px; } #rotWrap.native #escapeStage .ce-worlds:has(> :nth-child(3)) .ce-world { flex-basis:41%; } #rotWrap.native #escapeStage .ce-world img { aspect-ratio:auto; height:clamp(46px, calc(var(--long, 100dvh) - var(--below) - 318px - env(safe-area-inset-bottom, 0px)), 150px); object-fit:cover; } @media (max-height:620px) { #rotWrap.native #escapeStage .ce-world img { height:46px; } } @media (max-height:600px) { #rotWrap.native #escapeStage .ce-tiers button { min-height:50px !important; } #rotWrap.native #escapeStage .ce-tier-ico { width:18px; height:18px; } #rotWrap.native #escapeStage .ce-go.ce-go-art { min-height:48px; font-size:18px; } #rotWrap.native #escapeStage .ce-worlds-h { margin-bottom:4px; } #rotWrap.native #escapeStage .ce-card.ce-entry:has(.ce-worlds) { padding:8px 14px 8px; } } /* Pirate Island: route names and the scene name on parchment bound with rope (the rope takes the ends, so wider side padding) */ #rotWrap.native #escapeStage[data-world="pirate"] .ce-route:not(.revealed) .ce-label { padding-left:22px; padding-right:22px; color:#3a2410; } #rotWrap.native #escapeStage[data-world="pirate"] .ce-route:not(.revealed) { border-color:rgba(242,178,51,.45); } #rotWrap.native #escapeStage[data-world="pirate"] .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title { padding-left:40px; padding-right:40px; } #rotWrap.native #escapeStage[data-world="pirate"] .ce-pick:has(.ce-stakes) { border-color:rgba(242,178,51,.3); background:rgba(10,24,26,.82); } /* Haunted Castle: names on an aged-bronze plaque with gothic end pieces */ #rotWrap.native #escapeStage[data-world="castle"] .ce-route:not(.revealed) .ce-label { padding-left:22px; padding-right:22px; color:#2a1a0e; } #rotWrap.native #escapeStage[data-world="castle"] .ce-route:not(.revealed) { border-color:rgba(183,148,255,.45); } #rotWrap.native #escapeStage[data-world="castle"] .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title { padding-left:40px; padding-right:40px; } #rotWrap.native #escapeStage[data-world="castle"] .ce-pick:has(.ce-stakes) { border-color:rgba(183,148,255,.3); background:rgba(16,10,26,.82); } #rotWrap.native #escapeStage .ce-worlds:has(> :nth-child(3)) .ce-world em i { display:none; } #rotWrap.native #escapeStage .ce-world em { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Alien Mothership: names on a dark gunmetal-and-glass panel in light lettering with a teal glow */ #rotWrap.native #escapeStage[data-world="alien"] .ce-route:not(.revealed) .ce-label { color:#effffd; text-shadow:0 0 6px rgba(47,227,211,.75); padding-left:18px; padding-right:18px; } #rotWrap.native #escapeStage[data-world="alien"] .ce-route:not(.revealed) { border-color:rgba(47,227,211,.45); } #rotWrap.native #escapeStage[data-world="alien"] .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title { text-shadow:0 0 8px rgba(47,227,211,.6); } #rotWrap.native #escapeStage[data-world="alien"] .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title small { color:#a6ff3a !important; } #rotWrap.native #escapeStage[data-world="alien"] .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title > b, #rotWrap.native #escapeStage[data-world="alien"] .ce-title-pend b { color:#effffd; } #rotWrap.native #escapeStage[data-world="alien"] .ce-title-pend i { color:#9ff5ec; } #rotWrap.native #escapeStage[data-world="alien"] .ce-pick:has(.ce-stakes) { border-color:rgba(47,227,211,.3); background:rgba(8,18,24,.82); } /* Dino Jungle: names carved on a stone slab with vines at the corners */ #rotWrap.native #escapeStage[data-world="dino"] .ce-route:not(.revealed) .ce-label { color:#3a2412; padding-left:22px; padding-right:22px; } #rotWrap.native #escapeStage[data-world="dino"] .ce-route:not(.revealed) { border-color:rgba(245,166,35,.45); } #rotWrap.native #escapeStage[data-world="dino"] .ce-inner:has(#ceRoutes > .ce-route:not(.revealed)) .ce-title { padding-left:36px; padding-right:36px; } #rotWrap.native #escapeStage[data-world="dino"] .ce-pick:has(.ce-stakes) { border-color:rgba(245,166,35,.3); background:rgba(20,14,8,.82); } /* long worlds (8-10 scenes): the trail's multipliers get a smaller face so they never run together */ #rotWrap.native #escapeStage .ce-trail:has(li:nth-child(9)) li em { font-size:9.5px; letter-spacing:-.02em; } #rotWrap.native #escapeStage .ce-trail:has(li:nth-child(11)) li em { font-size:8.5px; } #rotWrap.native #escapeStage .ce-trail:has(li:nth-child(11)) li b { width:20px; height:20px; font-size:11px; }