:root { --ink: #eaf4ff; --dim: #8ea4c4; --cyan: #7fe3ff; --gold: #ffd166; --pink: #ff5ad8; --panel: rgba(8, 16, 34, .78); --edge: rgba(127, 227, 255, .35); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050a18; color: var(--ink); font-family: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
#boot { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; background: radial-gradient(ellipse at 50% 40%, #16305c, #050a18 70%); z-index: 50; transition: opacity .6s; }
#boot.gone { opacity: 0; pointer-events: none; }
.boot-logo { font-weight: 900; font-size: clamp(34px, 7vw, 72px); letter-spacing: .08em; background: linear-gradient(#fff, #9fe0ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(127, 227, 255, .5)); }
.boot-sub { font-weight: 900; letter-spacing: .5em; color: var(--gold); margin: 6px 0 26px; font-size: clamp(14px, 2.4vw, 22px); }
.boot-bar { width: min(320px, 70vw); height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 0 auto; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), #fff); border-radius: 8px; transition: width .3s; }

/* buttons */
.btn { font: inherit; font-weight: 900; color: #06101e; background: linear-gradient(#ffffff, #b8ecff); border: 0; border-radius: 999px; padding: 14px 26px; font-size: 18px; letter-spacing: .04em; box-shadow: 0 6px 0 #3a7aa8, 0 10px 24px rgba(0, 0, 0, .4); cursor: pointer; transition: transform .08s; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #3a7aa8, 0 4px 12px rgba(0, 0, 0, .4); }
.btn.gold { background: linear-gradient(#fff4cc, #ffc64a); box-shadow: 0 6px 0 #b07a10, 0 10px 24px rgba(0, 0, 0, .4); }
.btn.ghost { background: rgba(255, 255, 255, .12); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.btn.small { padding: 9px 16px; font-size: 14px; }

/* HUD */
.hud-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 10px; align-items: flex-start; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.objective { background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; padding: 10px 14px; max-width: min(460px, 60vw); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.objective b { display: block; color: var(--cyan); font-size: 12px; letter-spacing: .14em; }
.objective span { font-weight: 800; font-size: 17px; }
.objective .bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); margin-top: 7px; overflow: hidden; }
.objective .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--gold)); width: 0; transition: width .25s; }
.cells { margin-left: auto; background: var(--panel); border: 1px solid var(--edge); border-radius: 999px; padding: 8px 14px; font-weight: 900; display: flex; gap: 8px; align-items: center; }
.cells i { width: 16px; height: 16px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: conic-gradient(from 200deg, #ff3a3a, #ff8a2a, #ffd23f, #3ad06a, #3a8aff, #9a4aff, #ff3a3a); box-shadow: 0 0 12px rgba(255, 210, 63, .7); }
.timer { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font-weight: 900; font-size: 26px; background: var(--panel); border-radius: 999px; padding: 6px 18px; border: 1px solid var(--edge); }
.timer.low { color: #ff8a8a; border-color: #ff5a5a; }

/* touch controls */
.pad-btn { position: absolute; width: 86px; height: 86px; border-radius: 50%; display: grid; place-content: center; font-weight: 900; font-size: 15px; letter-spacing: .06em; color: #fff; background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .35), rgba(127, 227, 255, .18)); border: 2px solid rgba(255, 255, 255, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pad-btn.on { background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, .6), rgba(127, 227, 255, .4)); }
.pad-btn.action { width: 74px; height: 74px; font-size: 13px; background: radial-gradient(circle at 40% 35%, rgba(255, 230, 150, .5), rgba(255, 180, 60, .25)); border-color: rgba(255, 220, 140, .7); }
.pad-btn.hidden { display: none; }
.stick { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); pointer-events: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.prompt { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--gold); border-radius: 999px; padding: 8px 18px; font-weight: 900; color: var(--gold); white-space: nowrap; }

/* the air bar under water */
.air { position: absolute; left: 50%; bottom: max(64px, calc(env(safe-area-inset-bottom) + 52px)); transform: translateX(-50%); width: min(280px, 46vw); background: var(--panel); border: 1px solid var(--edge); border-radius: 999px; padding: 6px 12px; display: flex; align-items: center; gap: 10px; }
.air b { font-size: 12px; letter-spacing: .18em; color: var(--cyan); }
.air .bar { flex: 1; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.air .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #3ad0ff, #bff4ff); transition: width .2s; }
.air.low .bar i { background: linear-gradient(90deg, #ff5a5a, #ffb0b0); }
.air.low { border-color: #ff5a5a; animation: blink .6s infinite; }
.pad-btn.dive { width: 74px; height: 74px; font-size: 13px; background: radial-gradient(circle at 40% 35%, rgba(150, 230, 255, .5), rgba(30, 140, 220, .3)); border-color: rgba(150, 230, 255, .7); }
body.underwater #ui::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(0, 40, 80, .55); }

/* dialogue */
.dialogue { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(760px, calc(100% - 24px)); display: flex; gap: 14px; align-items: flex-end; animation: rise .35s cubic-bezier(.2, .9, .3, 1.2); }
.dialogue .face { width: 96px; height: 96px; flex: none; border-radius: 22px; background: #0c1830; border: 3px solid var(--edge); overflow: hidden; }
.dialogue .face canvas { width: 100%; height: 100%; }
.dialogue .box { flex: 1; background: var(--panel); border: 1px solid var(--edge); border-radius: 20px; padding: 14px 18px 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-height: 96px; }
.dialogue .who { font-weight: 900; color: var(--cyan); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.dialogue .who.villain { color: var(--pink); }
.dialogue .who.bolt { color: #9ad8ff; }
.dialogue .line { font-weight: 700; font-size: clamp(17px, 2.3vw, 21px); line-height: 1.35; margin-top: 4px; }
.dialogue .next { float: right; color: var(--gold); font-weight: 900; font-size: 13px; letter-spacing: .1em; margin-top: 6px; animation: blink 1s infinite; }
@keyframes rise { from { transform: translate(-50%, 30px); opacity: 0; } }
@keyframes blink { 50% { opacity: .3; } }

/* toasts and banners */
.toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--edge); border-radius: 999px; padding: 10px 22px; font-weight: 900; font-size: 18px; animation: pop .3s cubic-bezier(.2, .9, .3, 1.4); white-space: nowrap; }
.banner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; pointer-events: none; }
.banner .t1 { font-weight: 900; font-size: clamp(16px, 2.6vw, 22px); letter-spacing: .4em; color: var(--gold); }
.banner .t2 { font-weight: 900; font-size: clamp(36px, 7vw, 76px); letter-spacing: .04em; background: linear-gradient(#fff, #9fe0ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 20px rgba(127, 227, 255, .6)); animation: pop .5s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
.banner .t2 { animation-name: pop2; }
@keyframes pop2 { from { transform: scale(.6); opacity: 0; } }

/* full-screen menus */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.screen.dim { background: rgba(4, 8, 20, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.title-logo { font-weight: 900; font-size: clamp(40px, 9vw, 104px); line-height: .95; letter-spacing: .04em; background: linear-gradient(#fff, #9fe0ff 60%, #5ab0ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(127, 227, 255, .55)); }
.title-sub { font-weight: 900; letter-spacing: .6em; color: var(--gold); font-size: clamp(16px, 3vw, 28px); margin-top: -6px; padding-left: .6em; }
.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.card { background: var(--panel); border: 1px solid var(--edge); border-radius: 22px; padding: 18px 22px; max-width: 560px; }
.stars { font-size: 44px; letter-spacing: 8px; color: #3a4a66; }
.stars .on { color: var(--gold); text-shadow: 0 0 18px rgba(255, 209, 102, .8); }
.corner { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; }
.screen.title { justify-content: flex-start; padding-bottom: max(26px, env(safe-area-inset-bottom)); background: linear-gradient(rgba(4,8,20,.45), rgba(4,8,20,0) 30%, rgba(4,8,20,0) 70%, rgba(4,8,20,.5)); }
.cells.bolts i { background: radial-gradient(circle at 35% 35%, #fff, #ffd166 50%, #b07a10); box-shadow: 0 0 12px #ffd166; border-radius: 30%; }
@media (max-width: 760px), (max-height: 420px) {
  .timer { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); font-size: 20px; padding: 4px 14px; }
  .objective { max-width: 50vw; padding: 7px 10px; }
  .objective span { font-size: 14px; }
  .cells { padding: 6px 10px; font-size: 14px; }
  .pad-btn { width: 72px; height: 72px; font-size: 13px; }
  .pad-btn.action { width: 62px; height: 62px; }
  .dialogue .face { width: 70px; height: 70px; }
  .dialogue .box { min-height: 70px; padding: 10px 12px; }
}

/* the rainbow word */
.rainbow { background: linear-gradient(90deg, #ff3a3a, #ff8a2a, #ffd23f, #3ad06a, #3a8aff, #9a4aff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }