:root{color-scheme:dark;--bg:#080a12;--surface:#121625;--surface-2:#1a2034;--line:#29304a;--text:#f7f8ff;--muted:#8c94af;--cyan:#2de2e6;--violet:#9b6cff;--safe-top:max(env(safe-area-inset-top),8px);--safe-bottom:max(env(safe-area-inset-bottom),8px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden}html{background:var(--bg)}body{background:radial-gradient(circle at 50% -10%,rgba(96,76,190,.2),transparent 38%),var(--bg);color:var(--text);font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none}button{border:0;color:inherit;font:inherit;cursor:pointer;user-select:none;-webkit-user-select:none}.screen{display:none;width:min(100%,560px);height:100dvh;min-height:100svh;margin:0 auto}.screen.active{display:flex}
#menu{align-items:center;justify-content:center;padding:var(--safe-top) clamp(14px,5vw,24px) var(--safe-bottom)}.menu-content{width:100%;transform:translateY(-2vh)}.brand{text-align:center;font-size:clamp(38px,12vw,56px);font-weight:900;letter-spacing:-.065em;line-height:1;text-shadow:0 0 28px rgba(45,226,230,.1)}.brand span{color:var(--cyan)}.subtitle{margin:12px 0 clamp(22px,7vh,42px);color:var(--muted);text-align:center;font-size:clamp(16px,4.5vw,19px)}.game-list{display:grid;gap:14px}.game-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;width:100%;min-height:clamp(96px,15vh,120px);padding:18px clamp(18px,5vw,25px);overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:24px;background:linear-gradient(135deg,rgba(28,34,57,.98),rgba(15,19,33,.98));box-shadow:0 14px 35px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.05);text-align:left;transition:transform .12s ease,border-color .12s ease}.game-card::after{content:"";position:absolute;inset:auto -25px -45px auto;width:120px;height:120px;border-radius:50%;filter:blur(4px);opacity:.13}.tetris-card::after{background:var(--violet)}.snake-card::after{background:#35e681}.game-card:active{transform:scale(.975);border-color:rgba(255,255,255,.22)}.game-icon{display:grid;place-items:center;width:57px;height:57px;border-radius:17px;background:rgba(255,255,255,.06);font-size:31px;box-shadow:inset 0 0 18px rgba(255,255,255,.035)}.game-copy{display:flex;flex-direction:column;gap:7px}.game-copy b{font-size:clamp(20px,6vw,25px);letter-spacing:.055em}.game-copy small{color:var(--muted);font-size:14px}.game-copy strong{color:var(--text);font-size:16px}.chevron{z-index:1;color:#707996;font-size:37px;font-weight:300}.note{min-height:17px;margin:18px 4px 0;color:var(--muted);text-align:center;font-size:12px}
.game-screen{flex-direction:column;padding:var(--safe-top) clamp(8px,3vw,16px) var(--safe-bottom)}.game-header{flex:0 0 clamp(36px,6dvh,46px);display:grid;grid-template-columns:44px 1fr 44px;align-items:center}.game-header h1{margin:0;text-align:center;font-size:clamp(19px,5.2vw,24px);letter-spacing:.04em}.back-button{width:40px;height:36px;padding:0;border-radius:12px;background:var(--surface);color:var(--cyan);font-size:31px;line-height:30px}.stats{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:5px 0 8px}.stats>div{min-width:0;padding:5px 2px;text-align:center}.stats span{display:block;margin-bottom:2px;color:var(--muted);font-size:clamp(9px,2.8vw,12px);text-transform:uppercase;letter-spacing:.055em}.stats b{display:block;overflow:hidden;font-size:clamp(17px,5vw,23px);line-height:1.1;text-overflow:ellipsis}.play-area{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.board-row{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(7px,2.5vw,13px);width:100%}.canvas-shell{position:relative;flex:none;max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 0 0 1px var(--line),0 13px 36px rgba(0,0,0,.42),0 0 25px rgba(45,226,230,.035);overflow:hidden}#canvas{display:block;background:#070911;touch-action:none}.next-panel{flex:none;align-self:flex-start;width:clamp(54px,17vw,76px);margin-top:2px;padding:9px 5px 7px;border:1px solid var(--line);border-radius:12px;background:rgba(18,22,37,.9);text-align:center}.next-panel span{display:block;margin-bottom:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.12em}#next-canvas{display:block;margin:auto}
#controls{flex:0 0 auto;width:min(100%,430px);margin-top:clamp(7px,1.5dvh,12px);touch-action:none}#controls button{min-width:0;padding:0;border:1px solid var(--line);border-radius:clamp(11px,3.5vw,15px);background:linear-gradient(180deg,#202740,#151a2c);box-shadow:inset 0 1px rgba(255,255,255,.07),0 4px 9px rgba(0,0,0,.2);font-size:clamp(21px,6vw,27px);font-weight:800;touch-action:none}#controls button.pressed,#controls button:active{transform:translateY(1px);background:#293252;border-color:#465174}.controls-tetris{display:grid;grid-template-columns:repeat(4,1fr) 1.25fr;gap:clamp(5px,2vw,9px)}.controls-tetris button{height:clamp(48px,8.5dvh,62px)}.controls-tetris .drop-button{color:var(--cyan);font-size:clamp(11px,3.1vw,14px);letter-spacing:.05em}.controls-snake{display:grid;grid-template:repeat(2,clamp(48px,8dvh,60px))/repeat(3,minmax(64px,92px));justify-content:center;gap:clamp(6px,1.6dvh,10px)}.controls-snake button:nth-child(1){grid-column:2}.controls-snake button:nth-child(2){grid-row:2;grid-column:1}.controls-snake button:nth-child(3){grid-row:2;grid-column:2}.controls-snake button:nth-child(4){grid-row:2;grid-column:3}
.overlay{position:absolute;z-index:4;inset:0;display:none;place-items:center;padding:14px;background:rgba(5,7,13,.82);backdrop-filter:blur(6px)}.overlay.show{display:grid}.overlay-card{width:min(100%,250px);padding:clamp(17px,4dvh,27px) 16px 16px;border:1px solid rgba(255,255,255,.12);border-radius:21px;background:linear-gradient(155deg,rgba(28,34,57,.98),rgba(12,15,26,.98));box-shadow:0 20px 50px rgba(0,0,0,.45);text-align:center}.overlay-icon{display:block;color:var(--cyan);font-size:25px;text-shadow:0 0 16px var(--cyan)}.overlay h2{margin:4px 0 10px;font-size:clamp(20px,6vw,27px)}.overlay p{display:inline-block;margin:0 7px 16px;color:var(--muted);font-size:12px}.overlay p b{display:block;margin-top:2px;color:var(--text);font-size:18px}.overlay button{width:100%;height:44px;border-radius:12px;font-weight:800}.primary-action{background:linear-gradient(135deg,#8b5cf6,#7047db);box-shadow:0 7px 18px rgba(139,92,246,.25)}.secondary-action{margin-top:8px;border:1px solid var(--line);background:var(--surface);color:#c5cae0}.snake-mode .stats{grid-template-columns:repeat(2,minmax(90px,150px));justify-content:center}.snake-mode .tetris-only,.snake-mode .next-panel{display:none}.snake-mode .board-row{flex:0 1 auto}
@media(max-width:340px){.game-screen{padding-left:7px;padding-right:7px}.board-row{gap:6px}.next-panel{width:50px;padding-left:2px;padding-right:2px}}@media(max-height:620px){.game-header{flex-basis:32px}.stats{padding:2px 0 4px}.stats>div{padding:2px}.next-panel{padding-top:5px}#controls{margin-top:5px}.controls-tetris button{height:43px}.controls-snake{grid-template-rows:repeat(2,43px);gap:5px}}

/* Four-game menu and shared layouts for the additional arcade games. */
.game-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(9px,3vw,14px)}
.game-card{display:flex;min-height:clamp(120px,18vh,150px);padding:clamp(13px,4vw,20px);flex-direction:column;justify-content:center;align-items:flex-start;gap:9px;border-radius:22px}
.game-icon{width:44px;height:44px;border-radius:14px;font-size:24px}.game-copy{gap:5px;min-width:0}.game-copy b{font-size:clamp(13px,4vw,18px);letter-spacing:.04em;white-space:nowrap}.game-copy small{font-size:clamp(11px,3vw,13px)}.game-copy strong{font-size:14px}.chevron{display:none}
.arkanoid-card::after{background:#d255ff}.crossy-card::after{background:#2de2e6}.arkanoid-only{display:none}
.snake-mode .level-stat,.crossy-mode .tetris-only,.crossy-mode .next-panel,.arkanoid-mode .tetris-only,.arkanoid-mode .next-panel{display:none}
.arkanoid-mode .arkanoid-only{display:block}.arkanoid-mode .stats{grid-template-columns:repeat(4,1fr)}.crossy-mode .stats{grid-template-columns:repeat(3,minmax(72px,120px));justify-content:center}
.arkanoid-mode .board-row,.crossy-mode .board-row{flex:0 1 auto}.controls-arkanoid{display:grid;grid-template-columns:repeat(2,minmax(100px,150px));justify-content:center;gap:12px}.controls-arkanoid button{height:clamp(52px,9dvh,66px)}
.controls-crossy{display:grid;grid-template:repeat(2,clamp(48px,8dvh,60px))/repeat(3,minmax(64px,92px));justify-content:center;gap:clamp(6px,1.6dvh,10px)}.controls-crossy button:nth-child(1){grid-column:2}.controls-crossy button:nth-child(2){grid-row:2;grid-column:1}.controls-crossy button:nth-child(3){grid-row:2;grid-column:2}.controls-crossy button:nth-child(4){grid-row:2;grid-column:3}
@media(max-height:680px){.menu-content{transform:none}.subtitle{margin-bottom:14px}.game-card{min-height:108px}.game-icon{width:38px;height:38px;font-size:21px}}