:root { color-scheme: dark; --ink:#0d0e15; --cyan:#00f3ff; --magenta:#ff0055; --muted:#7d829a; --white:#e9fbff; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; overflow-x:hidden; background:var(--ink); color:var(--white); font-family:"IBM Plex Mono",monospace; touch-action:manipulation; }
button,input { font:inherit; } button { -webkit-tap-highlight-color:transparent; }
.app-shell { position:relative; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; overflow:hidden; background:radial-gradient(circle at 20% 20%,rgba(255,0,85,.08),transparent 28%),radial-gradient(circle at 80% 60%,rgba(0,243,255,.08),transparent 30%),#07080d; }
.ambient-grid { position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(rgba(0,243,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(255,0,85,.08) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 85%); transform:perspective(600px) rotateX(56deg) scale(1.7) translateY(22%); }
.game-frame { position:relative; width:min(1120px,94vw); height:min(840px,calc(100dvh - 48px)); min-height:600px; display:grid; grid-template-rows:58px minmax(0,1fr) 44px; background:rgba(10,12,19,.92); border:1px solid rgba(0,243,255,.38); box-shadow:0 0 0 1px #05060a,0 0 42px rgba(0,243,255,.12),inset 0 0 80px rgba(0,0,0,.6); clip-path:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.topbar { z-index:5; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid rgba(0,243,255,.25); background:linear-gradient(90deg,rgba(0,243,255,.08),transparent 35%,rgba(255,0,85,.06)); }
.brand-lockup { display:flex; align-items:center; gap:14px; }.brand-kicker,.topbar-status { font-size:9px; letter-spacing:.18em; color:var(--muted); }.mini-brand { margin:0; font:18px "Black Ops One",sans-serif; letter-spacing:.08em; color:var(--cyan); }.topbar-status { display:flex; align-items:center; gap:14px; }
.icon-button { width:34px; height:30px; color:var(--cyan); background:rgba(0,243,255,.08); border:1px solid rgba(0,243,255,.5); cursor:pointer; }
.display-area { position:relative; min-height:0; overflow:hidden; } #gameCanvas { width:100%; height:100%; display:block; }
.screen-layer { position:absolute; z-index:4; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease,visibility .18s ease; background:radial-gradient(circle,rgba(13,14,21,.3),rgba(7,8,13,.82) 80%); }.screen-layer.active { opacity:1; visibility:visible; pointer-events:auto; }
.menu-card,.panel-card { position:relative; width:min(430px,100%); min-width:0; justify-self:center; text-align:center; }.wide-card { width:min(540px,100%); }
.title-wrap { position:relative; margin-bottom:38px; transform:skewY(-2deg); }.game-title,.title-shadow { font:clamp(52px,8.5vw,104px)/.8 "Black Ops One",sans-serif; letter-spacing:-.055em; }.game-title { position:relative; z-index:2; margin:0; color:#dfffff; -webkit-text-stroke:2px var(--cyan); text-shadow:0 0 7px var(--cyan),0 0 22px rgba(0,243,255,.7),7px 7px 0 #420023,11px 11px 0 var(--magenta); }.title-shadow { position:absolute; inset:14px auto auto 50%; transform:translateX(-50%); color:transparent; -webkit-text-stroke:1px rgba(255,0,85,.65); filter:blur(1px); }.title-sub { margin:23px 0 0; color:var(--magenta); font-size:10px; font-weight:700; letter-spacing:.38em; }
.menu-actions { display:grid; gap:10px; margin:0 auto; width:min(320px,100%); }.menu-button,.back-button,.toggle-button { position:relative; border:1px solid rgba(0,243,255,.38); color:#bdc2d1; background:rgba(10,15,24,.82); letter-spacing:.14em; font-weight:700; cursor:pointer; transition:.15s; }.menu-button { min-height:48px; padding:0 24px; text-align:left; clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%); }.menu-button span { margin-right:22px; color:#545a71; font-size:10px; }.menu-button:hover,.menu-button:focus-visible,.menu-button.primary { color:var(--cyan); border-color:var(--cyan); box-shadow:inset 4px 0 var(--cyan),0 0 18px rgba(0,243,255,.15); outline:none; }.menu-hint { margin-top:25px; color:#51566a; font-size:8px; letter-spacing:.13em; }.menu-hint b { color:var(--magenta); }
.panel-card { padding:30px; border:1px solid rgba(0,243,255,.4); background:rgba(9,11,18,.94); box-shadow:0 0 40px rgba(0,0,0,.6),inset 0 0 35px rgba(0,243,255,.04); }.panel-card::before,.panel-card::after { content:""; position:absolute; width:36px; height:3px; background:var(--magenta); box-shadow:0 0 8px var(--magenta); }.panel-card::before { top:-2px; left:18px; }.panel-card::after { right:18px; bottom:-2px; }.panel-eyebrow { margin:0 0 4px; color:var(--cyan); font-size:9px; letter-spacing:.22em; }.panel-eyebrow.danger { color:var(--magenta); }.panel-title { margin:0 0 24px; font:clamp(28px,5vw,44px) "Black Ops One",sans-serif; letter-spacing:.04em; }
.leaderboard-list { min-height:300px; padding:0; margin:0 0 18px; list-style:none; counter-reset:rank; }.leaderboard-list li { counter-increment:rank; display:grid; grid-template-columns:42px 1fr auto; align-items:center; min-height:29px; border-bottom:1px solid rgba(125,130,154,.13); font-size:12px; }.leaderboard-list li::before { content:counter(rank,decimal-leading-zero); color:var(--magenta); font-size:9px; }.leaderboard-list .player { text-align:left; letter-spacing:.2em; }.leaderboard-list .score { color:var(--cyan); font-weight:700; }.leaderboard-list .empty { grid-template-columns:1fr; padding-top:110px; color:#555b70; }.leaderboard-list .empty::before { display:none; }
.back-button { padding:11px 18px; color:var(--muted); background:transparent; }.back-button:hover,.back-button:focus-visible { color:var(--magenta); border-color:var(--magenta); outline:none; }.option-row { display:flex; align-items:center; justify-content:space-between; padding:17px 0; border-bottom:1px solid rgba(125,130,154,.16); text-align:left; }.option-row b,.option-row small { display:block; }.option-row b { font-size:12px; }.option-row small { margin-top:4px; font-size:8px; color:#555b70; }.toggle-button { width:72px; height:34px; color:var(--cyan); border-color:var(--cyan); }.toggle-button.off { color:#666b7d; border-color:#444858; }.panel-card>.back-button { margin-top:24px; }
.score-card .menu-button { width:100%; text-align:center; }.final-label { margin:0; color:var(--muted); font-size:9px; letter-spacing:.2em; }.final-score { display:block; margin:2px 0 22px; color:var(--cyan); font-size:clamp(32px,6vw,56px); text-shadow:0 0 18px rgba(0,243,255,.4); }.name-entry label { display:block; margin-bottom:8px; color:var(--magenta); font-size:9px; }.name-entry input { width:100%; height:55px; margin-bottom:10px; border:1px solid var(--magenta); outline:none; background:#080910; color:var(--white); text-align:center; text-transform:uppercase; font-size:27px; letter-spacing:.4em; padding-left:.4em; }.game-over-actions { display:grid; gap:10px; }
.desktop-help { display:flex; align-items:center; justify-content:center; gap:30px; border-top:1px solid rgba(255,0,85,.18); color:#5e6376; font-size:8px; }.desktop-help kbd { display:inline-grid; min-width:22px; min-height:20px; place-items:center; margin-right:3px; padding:0 5px; border:1px solid #343849; border-bottom-width:2px; color:#a7adbe; background:#12141d; }.touch-controls { display:none; }.hidden { display:none!important; }
@media (max-width:700px),(pointer:coarse) and (max-width:900px) { body { overscroll-behavior:none; }.app-shell { display:flex; flex-direction:column; justify-content:flex-start; min-height:100dvh; padding:0; overflow:auto; }.game-frame { width:100%; height:min(72dvh,660px); min-height:440px; flex:1 1 auto; grid-template-rows:46px minmax(0,1fr); border:0; clip-path:none; }.topbar { padding:0 12px; }.brand-kicker { display:none; }.mini-brand { font-size:15px; }.desktop-help { display:none; }.display-area { min-height:380px; }.screen-layer { padding:14px; }.title-wrap { margin-bottom:30px; }.menu-card { width:100%; overflow:hidden; }.game-title,.title-shadow { font-size:clamp(34px,10vw,72px); }.title-sub { margin-top:18px; font-size:7px; }.menu-actions { width:min(300px,calc(100% - 12px)); }.menu-button { min-height:44px; }.panel-card { padding:22px; max-height:100%; overflow-y:auto; }.panel-title { margin-bottom:14px; }.leaderboard-list { min-height:250px; }.touch-controls { position:relative; z-index:8; width:100%; min-height:142px; flex:0 0 auto; display:grid; grid-template-columns:1fr 88px 1fr; align-items:center; gap:10px; padding:13px max(13px,env(safe-area-inset-right)) calc(13px + env(safe-area-inset-bottom)) max(13px,env(safe-area-inset-left)); border-top:1px solid rgba(0,243,255,.25); background:#090a10; }.touch-group { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.touch-button,.drop-button { height:80px; border:1px solid rgba(0,243,255,.45); color:var(--cyan); background:linear-gradient(145deg,#151824,#0b0d14); box-shadow:inset 0 -4px rgba(0,0,0,.4); font-weight:700; user-select:none; }.touch-button { font-size:29px; }.touch-button small,.drop-button span { display:block; margin-top:2px; font-size:7px; letter-spacing:.12em; color:#71778b; }.touch-button.magenta { color:var(--magenta); border-color:rgba(255,0,85,.45); }.drop-button { width:88px; height:88px; border-color:var(--cyan); border-radius:50%; box-shadow:0 0 18px rgba(0,243,255,.16),inset 0 -5px rgba(0,0,0,.4); font-size:16px; }.touch-button:active,.drop-button:active { transform:translateY(2px); filter:brightness(1.5); } }
@media (max-height:680px) and (max-width:700px) { .game-frame { height:calc(100dvh - 112px); min-height:360px; }.touch-controls { min-height:112px; padding-top:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); grid-template-columns:1fr 70px 1fr; }.touch-button { height:65px; }.drop-button { width:70px; height:70px; } }