@import"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&display=swap";:root{color-scheme:dark;font-family:Chakra Petch,system-ui,sans-serif;background:#05060b;color:#f1f3ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 18% 15%,rgba(76,110,245,.16),transparent 30rem),radial-gradient(circle at 85% 82%,rgba(12,166,120,.1),transparent 28rem),#05060b}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px}.app-shell{width:min(940px,calc(100vw - 32px));margin:0 auto;padding:18px 0 20px}.brand{display:flex;align-items:center;gap:11px;margin-bottom:10px;min-height:34px}.brand-mark{width:34px;height:34px;display:grid;grid-template-columns:1fr 1fr;gap:3px;transform:rotate(2deg)}.brand-mark i{display:block;border-radius:3px;background:#5c7cfa;box-shadow:0 0 16px #5c7cfa66}.brand-mark i:nth-child(2){background:#c77dff}.brand-mark i:nth-child(3){background:#38d9ff}.brand-mark i:nth-child(4){background:#69db7c}h1{display:flex;align-items:baseline;gap:10px;margin:0;font-size:clamp(22px,3vw,30px);line-height:1;letter-spacing:.04em}h1 span{color:#748ffc;font-size:.38em;font-weight:600;letter-spacing:.18em}.game-card{position:relative;overflow:hidden;border:1px solid rgba(120,138,205,.24);border-radius:18px;background:rgba(10,12,23,.78);box-shadow:0 28px 80px #00000080,inset 0 1px #ffffff0a;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.game-card:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 60px #5368c80f;z-index:2}#game-container{width:100%;aspect-ratio:860 / 680}#game-container canvas{display:block;width:100%!important;height:100%!important}.game-card,#game-container,#game-container canvas,.touch-controls,.touch-controls *{user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none;-webkit-user-drag:none}.game-card,#game-container,#game-container canvas,.touch-controls{touch-action:none}footer{display:flex;justify-content:space-between;padding:14px 4px 0;color:#59617d;font-size:11px;letter-spacing:.12em}.status{color:#6d789a}.status b{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#51cf66;box-shadow:0 0 10px #51cf66}.touch-controls{display:none}.touch-controls button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(119,139,210,.45);color:#dce4ff;background:linear-gradient(145deg,rgba(37,45,76,.96),rgba(18,22,41,.96));box-shadow:inset 0 1px #ffffff14,0 7px 18px #00000040;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.touch-controls button.is-pressed{transform:scale(.92);border-color:#69dbff;background:linear-gradient(145deg,#36548b,#202b50);box-shadow:0 0 18px #38d9ff40,inset 0 2px 6px #00000059}.touch-controls button.is-selected{border-color:#63e6be;color:#e6fff8;background:linear-gradient(145deg,#236c62,#173c42);box-shadow:0 0 14px #63e6be33,inset 0 1px #ffffff1a}.touch-speed-selector{display:none}@media (pointer: coarse),(max-width: 800px){.touch-controls{display:block;position:relative;bottom:auto;z-index:40;margin-top:10px;padding:10px 12px 14px;border:1px solid rgba(120,138,205,.24);border-radius:14px;background:rgba(10,13,25,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.touch-controls__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:22px;color:#828dab;font-size:10px;letter-spacing:.06em}.touch-indicator{color:#65d9bb;white-space:nowrap}.touch-indicator b{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#63e6be;box-shadow:0 0 8px #63e6be}.touch-controls__body{display:flex;align-items:center;justify-content:space-between;min-height:190px;margin-top:5px}body[data-game-profile=snake] .touch-speed-selector{display:flex;align-items:center;gap:7px;margin-top:8px}.touch-speed-selector span{margin-right:auto;color:#8490af;font-size:11px}.touch-speed-selector button{min-width:76px;height:46px;padding:0 12px;border-radius:23px;font:13px Chakra Petch,sans-serif}.touch-controls[data-profile=menu] .touch-controls__body{display:none}.touch-dpad{display:grid;grid-template:repeat(3,58px) / repeat(3,58px);gap:6px}.touch-dpad button{width:58px;height:58px;border-radius:16px;font-size:23px}.touch-dpad [data-control=up]{grid-area:1 / 2}.touch-dpad [data-control=left]{grid-area:2 / 1}.touch-dpad [data-control=down]{grid-area:2 / 2}.touch-dpad [data-control=right]{grid-area:2 / 3}.touch-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;max-width:190px}.touch-actions button{width:82px;height:82px;border-radius:50%;display:grid;place-content:center;gap:4px}.touch-actions button strong{font-size:23px;line-height:1}.touch-actions button span{color:#8f9bbc;font:11px/1 Chakra Petch,sans-serif}.touch-actions button.touch-small{width:56px;height:56px}.touch-actions button.touch-small strong{font-size:17px}.touch-actions button[hidden],.touch-dpad button[hidden],.touch-speed-selector button[hidden]{display:none}body[data-game-profile=tetris] #game-container{aspect-ratio:620 / 680}body[data-game-profile=tetris] .brand,body[data-game-profile=snake] .brand,body[data-game-profile=maryJump] .brand,body[data-game-profile=tank] .brand,body[data-game-profile=tetris] footer,body[data-game-profile=snake] footer,body[data-game-profile=maryJump] footer,body[data-game-profile=tank] footer{display:none}body[data-game-profile=tetris] .app-shell,body[data-game-profile=snake] .app-shell,body[data-game-profile=maryJump] .app-shell,body[data-game-profile=tank] .app-shell{padding-top:2px}body[data-game-profile=tetris] .touch-controls__body{min-height:190px}body[data-game-profile=tetris] .touch-dpad{grid-template:repeat(2,68px) / repeat(2,68px);gap:8px}body[data-game-profile=tetris] .touch-dpad button{width:68px;height:68px}body[data-game-profile=tetris] .touch-dpad [data-control=left]{grid-area:1 / 1}body[data-game-profile=tetris] .touch-dpad [data-control=right]{grid-area:1 / 2}body[data-game-profile=tetris] .touch-dpad [data-control=down]{grid-area:2 / 1 / 3 / 3;justify-self:center}}@supports (-webkit-touch-callout: none){@media (pointer: coarse),(max-width: 800px){.app-shell{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 90px)}.touch-controls{margin-bottom:calc(env(safe-area-inset-bottom,0px) + 58px)}}}@media (max-width: 600px){.app-shell{width:100%;padding:8px 10px}.game-card{border-radius:10px}.brand{margin-bottom:6px;min-height:30px}.brand-mark{width:30px;height:30px}h1{font-size:23px;gap:8px}.touch-controls__head{align-items:flex-start}footer{font-size:8px}.touch-controls{--dpad-size: clamp(50px, 14vw, 58px);--action-size: clamp(72px, 19vw, 82px);--small-action-size: clamp(50px, 14vw, 56px);padding:9px 9px 12px}.touch-controls__body{gap:8px;min-height:166px}.touch-dpad{grid-template:repeat(3,var(--dpad-size)) / repeat(3,var(--dpad-size));gap:4px;flex:0 0 auto}.touch-dpad button{width:var(--dpad-size);height:var(--dpad-size);border-radius:14px;font-size:22px}.touch-actions{gap:8px;max-width:calc(var(--small-action-size) * 2 + 8px)}.touch-actions button{width:var(--action-size);height:var(--action-size)}.touch-actions button.touch-small{width:var(--small-action-size);height:var(--small-action-size)}body[data-game-profile=tetris] .touch-controls__body{flex-direction:row;justify-content:space-between;min-height:270px;gap:8px}body[data-game-profile=tetris] .touch-dpad{--tetris-direction-size: clamp(60px, 17vw, 70px);grid-template:repeat(2,var(--tetris-direction-size)) / repeat(2,var(--tetris-direction-size));gap:7px}body[data-game-profile=tetris] .touch-dpad button{width:var(--tetris-direction-size);height:var(--tetris-direction-size)}body[data-game-profile=tetris] .touch-actions{width:auto;max-width:calc(var(--action-size) * 2 + 8px);justify-content:flex-end}body[data-game-profile=maryJump] .touch-controls__body{min-height:82px}body[data-game-profile=maryJump] .touch-dpad{grid-template:62px / repeat(2,62px);gap:8px}body[data-game-profile=maryJump] .touch-dpad button{width:62px;height:62px}body[data-game-profile=maryJump] .touch-dpad [data-control=left]{grid-area:1 / 1}body[data-game-profile=maryJump] .touch-dpad [data-control=right]{grid-area:1 / 2}}@media (max-width: 340px){body[data-game-profile=tetris] .touch-controls__body{gap:4px}body[data-game-profile=tetris] .touch-dpad{--tetris-direction-size: 58px;gap:5px}body[data-game-profile=tetris] .touch-actions{max-width:var(--action-size);gap:6px}}@media (pointer: coarse),(max-width: 800px){body[data-game-profile=snake] .touch-dpad,body[data-game-profile=tank] .touch-dpad{grid-template:repeat(2,var(--dpad-size, 58px)) / repeat(3,var(--dpad-size, 58px))}body[data-game-profile=snake] .touch-dpad [data-control=left],body[data-game-profile=tank] .touch-dpad [data-control=left]{grid-area:1 / 1}body[data-game-profile=snake] .touch-dpad [data-control=up],body[data-game-profile=tank] .touch-dpad [data-control=up]{grid-area:1 / 2}body[data-game-profile=snake] .touch-dpad [data-control=right],body[data-game-profile=tank] .touch-dpad [data-control=right]{grid-area:1 / 3}body[data-game-profile=snake] .touch-dpad [data-control=down],body[data-game-profile=tank] .touch-dpad [data-control=down]{grid-area:2 / 2}}
