:root { --u: 1px; --ice: #cfefff; --cyan: #8fe6ff; --gold: #ffb347; --amber: #ff7a2e; --navy: #060b18; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--navy); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#scope { position: fixed; inset: -40px; background: url(img/space_sky.webp) center / 70vh auto repeat; filter: blur(10px) brightness(0.45); animation: drift 90s linear infinite; }
@keyframes drift { from { background-position: 50% 0; } to { background-position: 50% 89vh; } }
#col { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; background: var(--navy); box-shadow: 0 0 80px rgba(40,120,255,.25); font-family: 'Saira', sans-serif; color: var(--ice); }
#game, #game canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* HUD: holographic glass, like the dome */
#hud { position: absolute; inset: 0; pointer-events: none; opacity: .9; }
#hud .frame { position: absolute; inset: calc(var(--u)*8); border: 1px solid rgba(143,230,255,.22); box-shadow: inset 0 0 calc(var(--u)*30) rgba(80,180,255,.12); border-radius: calc(var(--u)*6); }
.bracket { position: absolute; width: calc(var(--u)*50); height: calc(var(--u)*50); border: calc(var(--u)*2.5) solid rgba(143,230,255,.85); filter: drop-shadow(0 0 4px rgba(90,200,255,.8)); }
.bracket.tl { left: calc(var(--u)*8); top: calc(var(--u)*8); border-right: 0; border-bottom: 0; }
.bracket.tr { right: calc(var(--u)*8); top: calc(var(--u)*8); border-left: 0; border-bottom: 0; }
.bracket.bl { left: calc(var(--u)*8); bottom: calc(var(--u)*8); border-right: 0; border-top: 0; }
.bracket.br { right: calc(var(--u)*8); bottom: calc(var(--u)*8); border-left: 0; border-top: 0; }
.ticks { position: absolute; left: calc(var(--u)*8); top: 17%; bottom: 25%; width: calc(var(--u)*12);
  background: repeating-linear-gradient(to bottom, rgba(143,230,255,.55) 0 calc(var(--u)*2), transparent calc(var(--u)*2) calc(var(--u)*30)); }
.ticks.right { left: auto; right: calc(var(--u)*8); }
#score-box { position: absolute; left: calc(var(--u)*26); top: calc(var(--u)*16); }
#score, #wave { font-family: 'Saira Condensed', sans-serif; font-weight: 600; line-height: 1; letter-spacing: .08em; color: var(--ice); text-shadow: 0 0 calc(var(--u)*10) rgba(80,190,255,.9), 0 0 2px rgba(143,230,255,1); }
#score { font-size: calc(var(--u)*58); }
#lives { display: flex; gap: calc(var(--u)*10); margin-top: calc(var(--u)*8); }
#lives span { width: calc(var(--u)*32); height: calc(var(--u)*34); background: url(img/life_icon.webp) center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(120,210,255,.8)); }
#lives span.lost { background: none; position: relative; filter: drop-shadow(0 0 3px rgba(255,140,40,.9)); }
#lives span.lost::before, #lives span.lost::after { content: ""; position: absolute; -webkit-mask: url(img/life_icon.webp) center / contain no-repeat; mask: url(img/life_icon.webp) center / contain no-repeat; }
#lives span.lost::before { inset: 0; background: var(--gold); }
#lives span.lost::after { inset: calc(var(--u)*4); background: #0a1428; }
#wave-box { position: absolute; right: calc(var(--u)*26); top: calc(var(--u)*16); }
#wave { font-size: calc(var(--u)*48); }
#pause-btn { position: absolute; left: 50%; top: calc(var(--u)*10); transform: translateX(-50%); width: calc(var(--u)*76); height: calc(var(--u)*76); pointer-events: auto; }
#pause-btn img { width: 100%; height: 100%; object-fit: contain; }

/* wave banner: draws in from a thin line over a brief portal flare */
#banner { position: absolute; left: 0; right: 0; top: 13%; text-align: center; pointer-events: none; }
#banner .flare { position: absolute; left: 50%; top: 50%; width: calc(var(--u)*300); transform: translate(-50%,-50%) scale(.2); mix-blend-mode: screen; opacity: 0; animation: flare .7s ease-out both; }
@keyframes flare { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.1, .05); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.4, .5); } }
#banner .rule { height: calc(var(--u)*2); margin: 0 calc(var(--u)*20); background: linear-gradient(90deg, transparent, rgba(143,230,255,.95) 20%, #fff 50%, rgba(143,230,255,.95) 80%, transparent); box-shadow: 0 0 8px rgba(90,200,255,.9); animation: rule .35s ease-out both; }
@keyframes rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#banner-text { position: relative; font-family: 'Michroma', sans-serif; font-size: calc(var(--u)*40); letter-spacing: .14em; padding: calc(var(--u)*14) 0; color: #fff;
  text-shadow: 0 0 calc(var(--u)*14) rgba(80,190,255,.95); background: linear-gradient(90deg, transparent, rgba(8,24,52,.6) 15%, rgba(8,24,52,.6) 85%, transparent); animation: open .45s .15s ease-out both; }
@keyframes open { from { clip-path: inset(48% 0 48% 0); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
#banner.out { animation: fade .4s ease-in both; }
@keyframes fade { to { opacity: 0; } }

/* touch strip along the bottom fifth */
#touch { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(to top, rgba(6,14,32,.55), rgba(6,14,32,.15) 80%, transparent); }
.pad { position: absolute; bottom: 12%; touch-action: none; }
.pad img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; opacity: .85; }
.pad img.flip { transform: rotate(180deg); }
#pad-l { left: 3%; width: 27%; height: 78%; }
#pad-r { left: 31%; width: 27%; height: 78%; }
#fire { right: 3%; width: 32%; height: 92%; bottom: 5%; }
.pad.on img { opacity: 1; filter: brightness(1.4) drop-shadow(0 0 8px rgba(120,220,255,.9)); }
#fire .down { display: none; position: absolute; inset: 0; }
#fire.on .up { display: none; } #fire.on .down { display: block; }

/* screens */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u)*22); text-align: center; text-transform: uppercase; padding: 0 6%; }
#title { justify-content: flex-start; padding-top: 16%; background: linear-gradient(to bottom, rgba(6,11,24,.5), rgba(6,11,24,0) 50%); }
#title-art { margin: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*10); font-family: 'Michroma', sans-serif; font-weight: 400; color: #fff;
  text-shadow: 0 0 calc(var(--u)*18) rgba(80,190,255,.95), 0 0 calc(var(--u)*4) rgba(180,240,255,1); }
#title-art .l1 { font-size: calc(var(--u)*70); letter-spacing: .12em; line-height: 1; padding-left: .12em; }
#title-art .l2 { font-size: calc(var(--u)*58); letter-spacing: .14em; line-height: 1; padding-left: .14em; }
#title-art .line { width: 100%; height: calc(var(--u)*2); background: linear-gradient(90deg, transparent, var(--gold) 20%, #fff 50%, var(--gold) 80%, transparent); box-shadow: 0 0 10px rgba(255,170,60,.9); }
.caption { font-weight: 500; font-size: calc(var(--u)*17); letter-spacing: .22em; color: var(--cyan); text-shadow: 0 0 8px rgba(60,170,255,.8); }
.hint { font-weight: 400; font-size: calc(var(--u)*18); letter-spacing: .18em; line-height: 1.7; color: var(--ice); background: rgba(6,18,40,.6); padding: calc(var(--u)*8) calc(var(--u)*18); border: 1px solid rgba(143,230,255,.4); border-radius: calc(var(--u)*6); box-shadow: inset 0 0 12px rgba(80,180,255,.15); }
.best { font-size: calc(var(--u)*17); letter-spacing: .26em; color: var(--cyan); opacity: .85; }
.stamp { font-family: 'Michroma', sans-serif; font-size: calc(var(--u)*40); letter-spacing: .2em; padding: calc(var(--u)*14) calc(var(--u)*44) calc(var(--u)*14) calc(var(--u)*52); color: #fff;
  background: linear-gradient(rgba(30,80,140,.45), rgba(8,26,60,.6)); border: calc(var(--u)*2) solid rgba(143,230,255,.9); border-radius: calc(var(--u)*8);
  box-shadow: 0 0 calc(var(--u)*18) rgba(60,170,255,.55), inset 0 0 calc(var(--u)*16) rgba(120,210,255,.3); text-shadow: 0 0 10px rgba(90,200,255,.9); backdrop-filter: blur(3px); }
.stamp:active { background: rgba(143,230,255,.55); }
.stamp.thin { font-size: calc(var(--u)*22); padding: calc(var(--u)*8) calc(var(--u)*26); }
#title .stamp { margin-top: auto; animation: pulse 1.8s ease-in-out infinite; }
#title .best { margin-bottom: 30%; }
@keyframes pulse { 50% { box-shadow: 0 0 calc(var(--u)*34) rgba(80,190,255,.9), inset 0 0 calc(var(--u)*20) rgba(140,220,255,.45); } }
#paused { background: rgba(6,11,24,.72); }
#over { background: radial-gradient(ellipse 120% 60% at 50% 115%, rgba(40,120,220,.55), rgba(6,11,24,.92) 60%); gap: calc(var(--u)*16); }
.big { font-family: 'Michroma', sans-serif; font-size: calc(var(--u)*74); line-height: 1.15; letter-spacing: .1em; color: #fff; text-shadow: 0 0 calc(var(--u)*24) rgba(80,190,255,.95); }
.big.small { font-size: calc(var(--u)*60); }
.final { font-family: 'Saira Condensed', sans-serif; font-weight: 700; font-size: calc(var(--u)*92); letter-spacing: .08em; color: var(--gold); text-shadow: 0 0 18px rgba(255,140,40,.7); line-height: 1; }
#board { list-style: none; margin: 0; padding: 0; font-size: calc(var(--u)*19); letter-spacing: .15em; min-width: 70%; }
#board li { display: flex; justify-content: space-between; gap: 1em; padding: calc(var(--u)*3) 0; border-bottom: 1px solid rgba(143,230,255,.2); }
#board li.mine { color: var(--gold); }
#board a { color: inherit; }