/* SK-2A flagship game treatment — visual layer only; game canvases remain authoritative. */ .sk2a-shell{position:relative;isolation:isolate} .sk2a-shell::before{content:"";position:absolute;inset:-1px;pointer-events:none;z-index:20;border:1px solid rgba(201,168,118,.34);box-shadow:inset 0 0 0 1px rgba(20,17,15,.75),inset 0 0 44px rgba(0,0,0,.38)} /* Grain only. The radial vignette that used to sit in this layer was inert: screen-blending black is an identity operation, so it painted nothing. The vignette is the inset shadow on ::before above, which actually renders. */ .sk2a-shell::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:21;opacity:.09;background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 4px);mix-blend-mode:screen} /* z-index clears the arcade start/game-over card (.msg, fixed inset:0, z-index 10 in sk-arcade.css), which otherwise covers the whole viewport and makes the selector unreachable at exactly the moment you want it — before a run starts. align-self/align-content/flex keep the bar its own height when it lands inside a game's flex stage: without them a stretched box plus flex-wrap spreads the three buttons down the full height of the stage (The Fever Walk did this). */ .sk2a-controls{position:relative;z-index:32;display:flex;align-items:center;align-content:flex-start;align-self:flex-start;flex:0 0 auto;gap:.45rem;flex-wrap:wrap;margin:.55rem 0 .7rem;padding:.45rem .55rem;background:#14110f;border:1px solid #4a4136;font-family:"Space Mono",monospace;text-transform:uppercase;letter-spacing:.08em} .sk2a-kicker{font-size:9px;color:#8a7f6d;margin-right:.2rem} /* width:auto is load-bearing — The Fever Walk sets a bare `button{width:100%}`, which wins by default because this rule never declared a width, and the three modes come out full-width and stacked. */ .sk2a-controls button{appearance:none;width:auto;border:1px solid #4a4136;background:#1b1712;color:#8a7f6d;padding:.55rem .7rem;min-height:44px;font:700 10px/1 "Space Mono",monospace;letter-spacing:.08em;cursor:pointer} .sk2a-controls button:hover{color:#ede3d0;border-color:#c9a876} .sk2a-controls button[aria-pressed=true]{background:#7a8b54;color:#14110f;border-color:#7a8b54} .sk2a-note{font-size:9px;color:#6b6153;margin-left:auto} .sk2a-frame{position:relative} /* Only used when a game canvas sits directly in with no container of its own (Big Cat); elsewhere the game's existing stage box carries the frame. */ .sk2a-wrap{position:relative;display:block} .sk2a-frame .sk2a-difficulty-ribbon{position:absolute;top:8px;right:8px;z-index:30;padding:.28rem .45rem;background:rgba(20,17,15,.88);border:1px solid rgba(201,168,118,.45);color:#c9a876;font:700 9px/1 "Space Mono",monospace;letter-spacing:.1em;text-transform:uppercase;pointer-events:none} /* On phones give the kicker its own line so the three modes share one row of equal, thumb-sized targets instead of Master wrapping alone underneath. */ @media(max-width:640px){.sk2a-controls{gap:.3rem}.sk2a-kicker{flex:1 0 100%;margin:0 0 .1rem}.sk2a-note{width:100%;margin-left:0}.sk2a-controls button{flex:1 1 30%;padding:.55rem .4rem}} /* Play-stage: overlay the bar on .wrap so it does not steal a flex row. House menu now sits top-LEFT. The old padding-right cleared Info / Full view on the right and left Story / Challenge under the House chip — Challenge looked selected and never took a tap. */ html.play-frame .wrap > .sk2a-controls, html.play-frame[data-sk-game-slug="alleycat"] .sk-game-app-root > .sk2a-controls, html.play-frame[data-sk-game-slug="long-road"] .sk-game-app-root > .sk2a-controls, html.play-frame[data-sk-app-family="long-road"] .lr-stage > .sk2a-controls, html.play-frame[data-sk-game-slug="fever-walk"] .sk-game-app-root > .sk2a-controls, html.play-frame #app > .sk2a-controls, html.play-frame body[data-play="1"] .sk-game-app-root > .sk2a-controls{ position:absolute;z-index:40;top:env(safe-area-inset-top,0px);left:0;right:0; margin:0;border-left:0;border-right:0;border-top:0; padding-left:max(4.75rem, calc(52px + env(safe-area-inset-left, 0px))); padding-right:.65rem; background:rgba(20,17,15,.88); pointer-events:auto; } html.play-frame .wrap > .sk2a-controls button, html.play-frame[data-sk-game-slug="alleycat"] .sk-game-app-root > .sk2a-controls button, html.play-frame[data-sk-game-slug="long-road"] .sk-game-app-root > .sk2a-controls button, html.play-frame[data-sk-app-family="long-road"] .lr-stage > .sk2a-controls button, html.play-frame[data-sk-game-slug="fever-walk"] .sk-game-app-root > .sk2a-controls button, html.play-frame #app > .sk2a-controls button, html.play-frame body[data-play="1"] .sk-game-app-root > .sk2a-controls button{pointer-events:auto;position:relative;z-index:1} html.play-frame[data-sk-game-slug="climb"] .sk2a-frame .sk2a-difficulty-ribbon, html.play-frame[data-sk-game-slug="alleycat"] .sk2a-frame .sk2a-difficulty-ribbon{display:none} @media (max-height:520px) and (orientation:landscape){ html.play-frame .wrap > .sk2a-controls, html.play-frame[data-sk-game-slug="alleycat"] .sk-game-app-root > .sk2a-controls, html.play-frame[data-sk-game-slug="long-road"] .sk-game-app-root > .sk2a-controls, html.play-frame[data-sk-app-family="long-road"] .lr-stage > .sk2a-controls, html.play-frame[data-sk-game-slug="fever-walk"] .sk-game-app-root > .sk2a-controls, html.play-frame #app > .sk2a-controls, html.play-frame body[data-play="1"] .sk-game-app-root > .sk2a-controls{ padding:.28rem .45rem; padding-left:max(4.5rem, calc(52px + env(safe-area-inset-left, 0px))); padding-right:.45rem; gap:.3rem; } html.play-frame .wrap > .sk2a-controls .sk2a-kicker, html.play-frame .wrap > .sk2a-controls .sk2a-note, html.play-frame[data-sk-game-slug="alleycat"] .sk-game-app-root > .sk2a-controls .sk2a-kicker, html.play-frame[data-sk-game-slug="alleycat"] .sk-game-app-root > .sk2a-controls .sk2a-note, html.play-frame[data-sk-game-slug="long-road"] .sk-game-app-root > .sk2a-controls .sk2a-kicker, html.play-frame[data-sk-game-slug="long-road"] .sk-game-app-root > .sk2a-controls .sk2a-note, html.play-frame[data-sk-app-family="long-road"] .lr-stage > .sk2a-controls .sk2a-kicker, html.play-frame[data-sk-app-family="long-road"] .lr-stage > .sk2a-controls .sk2a-note, html.play-frame[data-sk-game-slug="fever-walk"] .sk-game-app-root > .sk2a-controls .sk2a-kicker, html.play-frame[data-sk-game-slug="fever-walk"] .sk-game-app-root > .sk2a-controls .sk2a-note, html.play-frame #app > .sk2a-controls .sk2a-kicker, html.play-frame #app > .sk2a-controls .sk2a-note, html.play-frame body[data-play="1"] .sk-game-app-root > .sk2a-controls .sk2a-kicker, html.play-frame body[data-play="1"] .sk-game-app-root > .sk2a-controls .sk2a-note{display:none} html.play-frame .wrap > .sk2a-controls button, html.play-frame[data-sk-game-slug="alleycat"] .sk-game-app-root > .sk2a-controls button, html.play-frame[data-sk-game-slug="long-road"] .sk-game-app-root > .sk2a-controls button, html.play-frame[data-sk-app-family="long-road"] .lr-stage > .sk2a-controls button, html.play-frame[data-sk-game-slug="fever-walk"] .sk-game-app-root > .sk2a-controls button, html.play-frame #app > .sk2a-controls button, html.play-frame body[data-play="1"] .sk-game-app-root > .sk2a-controls button{min-height:36px;padding:.35rem .5rem;font-size:9px} } @media(prefers-reduced-motion:reduce){.sk2a-shell::after{opacity:.045}}