:root {
  --ink: #f4f8ff;
  --muted: rgba(220, 232, 255, .58);
  --cyan: #68f4ff;
  --cyan-soft: rgba(104, 244, 255, .17);
  --violet: #9b8cff;
  --magenta: #ff65c8;
  --lime: #91ffba;
  --danger: #ff526f;
  --panel: rgba(5, 10, 27, .63);
  --line: rgba(155, 215, 255, .18);
  --display: "Avenir Next", "SF Pro Display", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #02040e; }
body { color: var(--ink); font-family: var(--display); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

#app { position: relative; width: 100%; height: 100%; min-height: 460px; isolation: isolate; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette, .noise, .scanlines { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vignette { background: radial-gradient(circle at 50% 48%, transparent 34%, rgba(0,2,12,.22) 72%, rgba(0,1,8,.72) 120%); }
.noise { opacity: .09; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.hidden { display: none !important; }

/* HUD */
.hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hud-card {
  position: absolute; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(135deg, rgba(8,16,39,.78), rgba(3,7,22,.43));
  border: 1px solid var(--line); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 14px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(18px) saturate(135%);
}
.hud-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 12%, rgba(112,232,255,.06), transparent 58%); pointer-events: none; }
.hud-label { color: rgba(218,230,255,.5); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.lives-card { left: max(24px, env(safe-area-inset-left)); top: max(22px, env(safe-area-inset-top)); padding: 13px 17px; border-radius: 14px; gap: 14px; }
.lives { display: grid; grid-template-columns: repeat(10, 7px); gap: 3px; }
.life-count { min-width: 20px; color: #ff8eb8; font-size: 13px; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(255,62,116,.45); }
.life-pip { width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(145deg, #ff9bc3, #ff376f); box-shadow: 0 0 7px rgba(255,58,112,.58); transition: transform .25s, opacity .25s, filter .25s; }
.life-pip.lost { opacity: .12; filter: grayscale(1); transform: scale(.7); box-shadow: none; }
.life-heart { position: relative; width: 21px; height: 19px; filter: drop-shadow(0 0 8px rgba(255,68,128,.48)); transition: transform .35s, opacity .35s; }
.life-heart::before, .life-heart::after { content: ""; position: absolute; width: 10px; height: 16px; top: 1px; border-radius: 10px 10px 0 0; background: linear-gradient(145deg, #ff93bf, #ff3b74); }
.life-heart::before { left: 5px; transform: rotate(-45deg); transform-origin: 0 100%; }
.life-heart::after { left: 5px; transform: rotate(45deg); transform-origin: 100% 100%; }
.life-heart.lost { opacity: .18; filter: none; transform: scale(.78); }
.score-card { right: max(24px, env(safe-area-inset-right)); top: max(22px, env(safe-area-inset-top)); min-width: 178px; justify-content: center; flex-direction: column; align-items: flex-end; padding: 11px 18px 12px; border-radius: 14px; gap: 2px; }
.score-card strong { font-size: 34px; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(104,244,255,.55); }
.score-delta { position: absolute; right: 18px; bottom: 8px; color: var(--lime); font-size: 12px; opacity: 0; transform: translateY(8px); }
.score-delta.show { animation: scoreFloat .65s ease-out; }
@keyframes scoreFloat { 0% { opacity: 0; transform: translateY(8px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
.stage-card { left: 50%; top: max(22px, env(safe-area-inset-top)); transform: translateX(-50%); width: min(460px, 44vw); min-width: 330px; border-radius: 14px; padding: 10px 13px 10px 17px; gap: 12px; }
.stage-copy { flex: 1; min-width: 0; }
.stage-title-row { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 0 7px; }
.stage-title-row strong { font-size: 18px; letter-spacing: .08em; }
.stage-title-row span { color: var(--cyan); font-size: 10px; letter-spacing: .16em; }
.progress-track { height: 3px; border-radius: 4px; background: rgba(160,200,255,.13); overflow: hidden; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 14px var(--cyan); transition: width .35s ease; }
.progress-meta { display: flex; justify-content: space-between; gap: 10px; color: rgba(218,231,255,.5); font-size: 10px; margin-top: 6px; }
.stage-glyph { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; color: var(--cyan); font-size: 24px; border: 1px solid rgba(105,229,255,.2); border-radius: 50%; background: radial-gradient(circle, rgba(85,230,255,.18), transparent 68%); box-shadow: inset 0 0 15px rgba(93,238,255,.11); text-shadow: 0 0 12px currentColor; }
.ability-pill { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 9px 15px; color: rgba(231,240,255,.68); font-size: 11px; letter-spacing: .08em; border: 1px solid rgba(127,203,255,.18); border-radius: 999px; background: rgba(4,10,27,.64); backdrop-filter: blur(15px); transition: .2s; }
.ability-pill.active { color: white; border-color: rgba(144,255,186,.55); background: rgba(18,70,58,.73); box-shadow: 0 0 28px rgba(95,255,168,.2); }
.boost-pill { position: absolute; left: calc(50% + 102px); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(255,220,111,.2); border-radius: 999px; background: rgba(5,10,27,.66); color: rgba(230,238,255,.56); font-size: 9px; letter-spacing: .06em; backdrop-filter: blur(15px); transition: .2s; }
.boost-pill b { color: #ffe27c; font-size: 8px; letter-spacing: .12em; }
.boost-pill.active { color: white; border-color: rgba(255,225,105,.66); background: rgba(83,63,17,.75); box-shadow: 0 0 28px rgba(255,214,73,.22); transform: translateY(-2px); }
.camera-dot { width: 7px; height: 7px; border-radius: 50%; background: #7e90a8; box-shadow: 0 0 8px currentColor; }
.ability-pill.active .camera-dot { background: var(--lime); color: var(--lime); animation: pulseDot .7s infinite alternate; }
@keyframes pulseDot { to { transform: scale(1.6); opacity: .65; } }

/* Camera panel */
.gesture-panel { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 5; width: 208px; padding: 6px; border-radius: 17px; background: rgba(3,8,23,.72); border: 1px solid rgba(137,208,255,.17); box-shadow: 0 18px 60px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(16px); transition: transform .3s, opacity .3s; }
.gesture-panel.disabled { opacity: .58; }
.camera-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #070c1b; }
.camera-frame video, .camera-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-frame video { transform: scaleX(-1); filter: saturate(.75) contrast(1.08) brightness(.75) hue-rotate(-5deg); }
.camera-frame canvas { transform: scaleX(-1); }
.camera-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(105,236,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(105,236,255,.07) 1px, transparent 1px); background-size: 25% 25%; mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 85%); }
.camera-loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; align-items: center; justify-content: center; color: rgba(222,237,255,.65); font-size: 9px; letter-spacing: .13em; background: rgba(2,6,18,.7); }
.camera-loading i { width: 24px; height: 24px; border: 1px solid rgba(100,233,255,.2); border-top-color: var(--cyan); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.camera-meta { display: flex; align-items: center; justify-content: space-between; padding: 8px 5px 3px; }
.camera-meta div { display: flex; flex-direction: column; gap: 1px; }
.camera-meta b { font-size: 10px; color: rgba(236,244,255,.84); font-weight: 600; }
.camera-meta span { color: rgba(113,220,245,.65); font-size: 7px; letter-spacing: .16em; }
.camera-meta button, .floating-mute { border: 0; background: transparent; color: rgba(184,223,255,.55); font-size: 8px; letter-spacing: .1em; cursor: pointer; padding: 5px; }
.hand-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; padding: 4px 5px 2px; color: rgba(208,223,249,.52); font-size: 8px; }
.hand-guides span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.guide-boost { color: #ffe27c !important; background: rgba(255,226,124,.12) !important; border: 1px solid rgba(255,226,124,.28) !important; }
.pinch-hand b, .pinch-hand i { position: absolute; border: 1px solid rgba(255,226,124,.58); background: rgba(255,226,124,.1); }
.pinch-hand b { width: 18px; height: 54px; left: 13px; bottom: 15px; border-radius: 10px; transform: rotate(25deg); }
.pinch-hand i { width: 18px; height: 58px; right: 13px; bottom: 14px; border-radius: 10px; transform: rotate(-27deg); }
.pinch-hand::after { content: ""; position: absolute; width: 16px; height: 16px; left: 28px; top: 17px; border-radius: 50%; background: #ffe27c; box-shadow: 0 0 17px rgba(255,226,124,.72); }
.hand-guides i { font-style: normal; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; font-size: 7px; }
.guide-left { color: var(--cyan); background: rgba(104,244,255,.12); border: 1px solid rgba(104,244,255,.25); }
.guide-right { color: #ffe783; background: rgba(255,222,94,.12); border: 1px solid rgba(255,222,94,.25); }
.gesture-sensitivity { display: grid; grid-template-columns: auto 1fr 24px; align-items: center; gap: 6px; margin: 6px 5px 1px; color: rgba(193,218,248,.52); font-size: 8px; letter-spacing: .04em; }
.gesture-sensitivity input { width: 100%; height: 3px; margin: 0; appearance: none; border-radius: 4px; outline: none; background: linear-gradient(90deg, #68f4ff, #9b8cff); cursor: pointer; }
.gesture-sensitivity input::-webkit-slider-thumb { appearance: none; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); background: #68f4ff; box-shadow: 0 0 9px rgba(104,244,255,.8); }
.gesture-sensitivity input::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); background: #68f4ff; box-shadow: 0 0 9px rgba(104,244,255,.8); }
.gesture-sensitivity b { color: var(--cyan); text-align: right; font-weight: 600; }
.floating-mute { position: absolute; z-index: 4; right: 25px; top: 26px; width: 38px; height: 38px; border: 1px solid var(--line); background: var(--panel); border-radius: 50%; font-size: 13px; backdrop-filter: blur(10px); }

/* Screens */
.screen { position: absolute; inset: 0; z-index: 10; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s ease, visibility .8s; overflow: hidden; }
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; }
#startScreen { background: radial-gradient(circle at 73% 38%, rgba(75,42,145,.19), transparent 28%), linear-gradient(90deg, rgba(1,3,13,.88) 0%, rgba(1,4,14,.53) 48%, rgba(1,4,12,.13) 75%, rgba(1,3,10,.42) 100%); }
#startScreen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), transparent 25%, transparent 77%, rgba(0,0,0,.52)); pointer-events: none; }
.screen-inner { position: relative; z-index: 2; width: min(1260px, calc(100% - 96px)); height: calc(100% - 150px); margin: 0 auto; }
.start-layout { display: grid; grid-template-columns: 1.14fr .86fr; gap: 80px; align-items: center; }
.hero-copy { max-width: 670px; padding-left: 4px; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: rgba(152,224,255,.68); font-size: 10px; letter-spacing: .27em; margin-bottom: 20px; opacity: 0; animation: revealUp .65s .15s forwards; }
.eyebrow span { width: 38px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); box-shadow: 0 0 8px var(--cyan); }
.hero-copy h1 { margin: 0; font-size: clamp(58px, 7.2vw, 108px); line-height: .82; letter-spacing: -.06em; font-weight: 600; text-shadow: 0 0 48px rgba(111,226,255,.18); opacity: 0; animation: revealUp .75s .22s forwards; }
.hero-copy h1 span { color: transparent; -webkit-text-stroke: 1px rgba(192,235,255,.7); filter: drop-shadow(0 0 12px rgba(90,218,255,.2)); }
.cn-title { margin: 13px 0 0 5px; color: var(--cyan); font-size: 22px; letter-spacing: .58em; text-shadow: 0 0 20px rgba(104,244,255,.46); opacity: 0; animation: revealUp .7s .3s forwards; }
.hero-desc { color: rgba(218,231,255,.64); font-size: 14px; line-height: 2; margin: 27px 0 30px 4px; opacity: 0; animation: revealUp .7s .38s forwards; }
@keyframes revealUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.start-actions { display: flex; flex-wrap: wrap; gap: 12px; opacity: 0; animation: revealUp .7s .46s forwards; }
.primary-button, .ghost-button { position: relative; cursor: pointer; border: 0; transition: transform .22s, box-shadow .22s, border-color .22s, background .22s; }
.primary-button { min-height: 68px; display: flex; align-items: center; gap: 15px; padding: 11px 16px 11px 14px; border-radius: 16px; background: linear-gradient(120deg, rgba(113,93,255,.92), rgba(70,207,241,.84)); box-shadow: 0 14px 45px rgba(66,134,255,.28), inset 0 1px rgba(255,255,255,.28); text-align: left; overflow: hidden; }
.primary-button::before { content: ""; position: absolute; inset: 1px; border-radius: 15px; background: linear-gradient(110deg, rgba(255,255,255,.14), transparent 42%, rgba(0,0,0,.1)); pointer-events: none; }
.primary-button:hover { transform: translateY(-3px); box-shadow: 0 18px 55px rgba(66,163,255,.38), inset 0 1px rgba(255,255,255,.32); }
.primary-button span { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.primary-button b { font-size: 14px; letter-spacing: .04em; }
.primary-button small { color: rgba(240,249,255,.7); font-size: 9px; }
.primary-button em { font-style: normal; margin-left: auto; font-size: 22px; position: relative; z-index: 1; }
.button-orb { width: 39px; height: 39px; position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; box-shadow: inset 0 0 18px rgba(255,255,255,.18), 0 0 18px rgba(93,236,255,.36); }
.button-orb::after { content: ""; position: absolute; width: 7px; height: 7px; left: 15px; top: 15px; border-radius: 50%; background: white; box-shadow: 0 0 12px white; }
.ghost-button { min-height: 68px; padding: 0 22px; border-radius: 16px; background: rgba(5,13,32,.42); border: 1px solid rgba(155,215,255,.19); color: rgba(226,238,255,.7); font-size: 11px; letter-spacing: .08em; backdrop-filter: blur(12px); }
.ghost-button:hover { transform: translateY(-2px); border-color: rgba(104,244,255,.55); color: white; background: rgba(14,25,52,.65); }
.primary-button.compact { min-height: 58px; min-width: 220px; justify-content: center; }
.camera-message { min-height: 18px; margin: 14px 0 0 3px; color: rgba(175,196,226,.48); font-size: 10px; letter-spacing: .03em; }
.camera-message.error { color: #ff9bad; }
.camera-message.success { color: var(--lime); }

.instruction-board { position: relative; align-self: center; padding: 24px; border-radius: 22px; background: linear-gradient(135deg, rgba(11,18,41,.72), rgba(4,8,24,.48)); border: 1px solid rgba(152,216,255,.18); box-shadow: 0 24px 85px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(22px); opacity: 0; animation: revealUp .8s .4s forwards; }
.instruction-board::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(140deg, rgba(151,119,255,.08), transparent 25%, rgba(103,242,255,.04)); pointer-events: none; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 15px; border-bottom: 1px solid rgba(155,215,255,.12); }
.board-head span { color: rgba(124,213,245,.55); font-size: 8px; letter-spacing: .2em; }
.board-head b { font-size: 13px; letter-spacing: .1em; }
.gesture-instruction { display: grid; grid-template-columns: 94px 1fr; align-items: center; gap: 18px; min-height: 117px; border-bottom: 1px solid rgba(155,215,255,.1); }
.gesture-instruction strong { display: block; font-size: 13px; margin-bottom: 8px; }
.gesture-instruction p { margin: 0; color: rgba(203,218,243,.5); font-size: 10px; line-height: 1.75; }
.hand-visual { position: relative; width: 72px; height: 88px; margin: auto; filter: drop-shadow(0 0 14px rgba(104,244,255,.25)); }
.open-hand b { position: absolute; width: 29px; height: 42px; left: 22px; bottom: 4px; border: 1px solid rgba(154,247,255,.52); border-radius: 11px 11px 15px 15px; background: linear-gradient(160deg, rgba(104,244,255,.18), rgba(96,113,255,.08)); }
.open-hand i { position: absolute; width: 7px; height: 39px; bottom: 40px; border: 1px solid rgba(154,247,255,.52); border-radius: 6px 6px 2px 2px; background: rgba(104,244,255,.12); transform-origin: bottom; }
.open-hand i:nth-child(1) { left: 4px; height: 26px; transform: rotate(-58deg); }
.open-hand i:nth-child(2) { left: 17px; height: 38px; transform: rotate(-14deg); }
.open-hand i:nth-child(3) { left: 32px; height: 43px; }
.open-hand i:nth-child(4) { left: 47px; height: 37px; transform: rotate(13deg); }
.open-hand i:nth-child(5) { left: 59px; height: 25px; transform: rotate(52deg); }
.fist i { position: absolute; width: 57px; height: 50px; left: 8px; bottom: 7px; border: 1px solid rgba(255,226,121,.55); border-radius: 16px 18px 14px 14px; background: linear-gradient(150deg, rgba(255,224,112,.14), rgba(255,123,92,.06)); }
.fist i::before, .fist i::after { content: ""; position: absolute; left: 4px; right: 4px; height: 1px; background: rgba(255,228,135,.28); top: 15px; box-shadow: 0 9px rgba(255,228,135,.22), 0 18px rgba(255,228,135,.16); }
.fist b { position: absolute; width: 25px; height: 35px; right: 1px; bottom: 14px; border: 1px solid rgba(255,226,121,.42); border-radius: 5px 10px 10px 10px; }
.rule-strip { display: grid; grid-template-columns: 42px 1fr 42px 1fr; align-items: center; gap: 9px; padding-top: 16px; }
.rule-strip > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--cyan); border: 1px solid rgba(104,244,255,.22); background: rgba(104,244,255,.07); font-size: 17px; }
.rule-strip p { display: flex; flex-direction: column; margin: 0; gap: 2px; }
.rule-strip b { font-size: 10px; }
.rule-strip small { color: rgba(190,207,235,.43); font-size: 8px; }

.chain-note { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 10px 12px; border: 1px solid rgba(110,231,255,.13); border-radius: 10px; background: rgba(82,183,255,.04); }
.chain-note b { flex: 0 0 auto; color: var(--cyan); font-size: 9px; letter-spacing: .08em; }
.chain-note span { color: rgba(200,218,244,.48); font-size: 8px; line-height: 1.55; }
.evolution-rail { position: absolute; z-index: 3; left: 4.5vw; right: 4.5vw; bottom: 40px; height: 72px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.rail-line { position: absolute; left: 0; right: 0; top: 16px; height: 1px; background: rgba(147,211,255,.15); }
.rail-line::before { content: ""; position: absolute; inset: 0 70% 0 0; background: linear-gradient(90deg, var(--cyan), transparent); box-shadow: 0 0 9px var(--cyan); }
.rail-item { position: relative; display: flex; flex-direction: column; gap: 2px; padding-top: 10px; color: rgba(213,227,251,.4); transition: color .3s, transform .3s; }
.rail-item::before { content: ""; position: absolute; top: 12px; left: 0; width: 8px; height: 8px; border: 1px solid rgba(159,222,255,.34); background: #071126; border-radius: 50%; box-shadow: 0 0 0 4px #030711; }
.rail-item i { font-style: normal; font-size: 8px; letter-spacing: .12em; margin-left: 17px; }
.rail-item b { font-size: 9px; font-weight: 500; margin-left: 17px; }
.rail-item small { font-size: 7px; margin-left: 17px; opacity: .55; }
.rail-item.active { color: var(--cyan); transform: translateY(-2px); }
.rail-item.active::before { background: var(--cyan); box-shadow: 0 0 14px var(--cyan), 0 0 0 4px #071126; }
.start-footer { position: absolute; z-index: 3; left: 4.5vw; right: 4.5vw; bottom: 14px; display: flex; justify-content: space-between; color: rgba(154,179,216,.25); font-size: 7px; letter-spacing: .22em; }

/* Death and revive choice */
.death-screen { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(125,17,47,.32), transparent 45%), rgba(2,2,10,.87); backdrop-filter: blur(13px); }
.death-pulse { position: absolute; width: min(780px, 92vw); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,48,96,.16); box-shadow: inset 0 0 90px rgba(255,35,80,.07), 0 0 90px rgba(255,35,80,.09); animation: deathPulse 1.8s ease-in-out infinite alternate; }
@keyframes deathPulse { to { transform: scale(1.08); opacity: .55; } }
.death-card { position: relative; width: min(650px, calc(100% - 40px)); padding: 36px 44px 28px; text-align: center; border: 1px solid rgba(255,93,126,.34); border-radius: 22px; background: linear-gradient(145deg, rgba(28,8,20,.93), rgba(7,6,17,.94)); box-shadow: 0 35px 100px rgba(0,0,0,.64), inset 0 1px rgba(255,255,255,.06), 0 0 55px rgba(255,36,89,.08); }
.death-icon { width: 56px; height: 56px; display: grid; place-items: center; margin: -64px auto 18px; border-radius: 50%; border: 1px solid rgba(255,100,133,.56); color: #ff789b; background: #160914; font-size: 32px; box-shadow: 0 0 25px rgba(255,47,96,.28); }
.death-kicker { color: rgba(255,118,151,.62); font-size: 8px; letter-spacing: .3em; }
.death-card h2 { margin: 13px 0 15px; font-size: clamp(34px, 5vw, 56px); letter-spacing: .1em; text-shadow: 0 0 30px rgba(255,48,98,.28); }
.death-phrase { min-height: 52px; margin: 0 auto; max-width: 520px; color: rgba(239,229,241,.76); font-size: 14px; line-height: 1.8; letter-spacing: .04em; }
.death-revives { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 22px 0; padding: 14px 0; border-top: 1px solid rgba(255,116,148,.14); border-bottom: 1px solid rgba(255,116,148,.14); }
.death-revives span { color: rgba(208,185,205,.48); font-size: 9px; letter-spacing: .12em; }
.death-revives strong { color: #ff8aae; font-size: 28px; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(255,47,96,.5); }
.death-actions { display: flex; justify-content: center; gap: 12px; }
.death-actions .primary-button { background: linear-gradient(120deg, rgba(229,56,105,.94), rgba(255,139,92,.82)); box-shadow: 0 14px 44px rgba(255,45,97,.22); }
.revive-button[disabled] { opacity: .38; cursor: not-allowed; filter: grayscale(.7); }
.death-tip { margin: 15px 0 0 !important; color: rgba(190,165,185,.34) !important; font-size: 8px !important; letter-spacing: .08em; }

/* Certificate and alien ending */
.certificate-screen { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(83,48,164,.34), transparent 42%), rgba(1,3,12,.88); backdrop-filter: blur(14px); }
.certificate-glow { position: absolute; width: min(850px, 92vw); aspect-ratio: 1.65; border-radius: 50%; background: radial-gradient(ellipse, rgba(91,226,255,.12), rgba(113,76,255,.06) 42%, transparent 72%); filter: blur(16px); animation: certificatePulse 3s ease-in-out infinite alternate; }
@keyframes certificatePulse { to { transform: scale(1.06); opacity: .62; } }
.certificate-card { position: relative; width: min(780px, calc(100% - 40px)); padding: 42px 52px 38px; overflow: hidden; border: 1px solid rgba(144,232,255,.36); border-radius: 24px; background: linear-gradient(145deg, rgba(8,18,42,.92), rgba(5,8,24,.9)); box-shadow: 0 35px 110px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.08), 0 0 60px rgba(76,192,255,.09); text-align: center; }
.certificate-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(157,212,255,.12); border-radius: 17px; pointer-events: none; }
.certificate-card::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(156,240,255,.08) 50%, transparent 58%); transform: translateX(-55%); animation: certificateScan 5s linear infinite; pointer-events: none; }
@keyframes certificateScan { to { transform: translateX(55%); } }
.certificate-seal { position: absolute; right: 36px; top: 32px; width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid rgba(255,104,194,.55); border-radius: 50%; color: #ff9bd0; font-size: 17px; letter-spacing: .15em; text-shadow: 0 0 12px rgba(255,82,182,.75); box-shadow: inset 0 0 28px rgba(255,55,168,.1), 0 0 22px rgba(255,55,168,.1); transform: rotate(9deg); }
.certificate-kicker { color: rgba(105,238,255,.63); font-size: 8px; letter-spacing: .28em; }
.certificate-card h2 { margin: 18px 0 14px; font-size: clamp(32px, 5vw, 56px); letter-spacing: .08em; text-shadow: 0 0 32px rgba(111,230,255,.25); }
.certificate-congrats { max-width: 540px; margin: 0 auto; color: rgba(224,236,255,.72); font-size: 14px; line-height: 1.9; letter-spacing: .04em; }
.certificate-rule { width: 72%; height: 1px; margin: 27px auto 22px; background: linear-gradient(90deg, transparent, rgba(101,235,255,.45), transparent); }
.certificate-stats { display: grid; grid-template-columns: 1fr 1.4fr; gap: 9px 16px; max-width: 410px; margin: 0 auto 25px; text-align: left; }
.certificate-stats span { color: rgba(185,209,241,.43); font-size: 9px; letter-spacing: .12em; }
.certificate-stats strong { color: rgba(234,245,255,.82); font-size: 11px; letter-spacing: .08em; }
.certificate-question { margin: 0 0 17px; color: rgba(212,228,251,.6); font-size: 11px; letter-spacing: .1em; }
.certificate-actions { display: flex; justify-content: center; align-items: stretch; gap: 12px; }
.alien-choice { min-height: 60px; }
.human-choice { min-height: 60px; }
.alien-caption { position: absolute; z-index: 8; left: 50%; top: max(30px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; pointer-events: none; text-shadow: 0 0 18px rgba(111,230,255,.46); }
.alien-caption span { color: rgba(109,225,255,.58); font-size: 8px; letter-spacing: .26em; }
.alien-caption strong { font-size: 15px; letter-spacing: .12em; }
.alien-caption.farewell { top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); }
.alien-caption.farewell strong { color: #effcff; font-size: clamp(38px, 7vw, 82px); letter-spacing: .08em; text-shadow: 0 0 40px rgba(104,244,255,.85), 0 0 80px rgba(168,91,255,.5); animation: byeBye 1.1s ease-in-out infinite alternate; }
@keyframes byeBye { to { transform: scale(1.06); filter: hue-rotate(18deg); } }
@media (max-width: 720px) {
  .certificate-card { padding: 32px 22px 26px; }
  .certificate-seal { width: 58px; height: 58px; right: 20px; top: 20px; font-size: 13px; }
  .certificate-actions, .death-actions { flex-direction: column; }
  .death-card { padding: 34px 20px 24px; }
}

/* End screen */
.end-screen { background: radial-gradient(circle at 50% 50%, rgba(51,36,117,.3), transparent 36%), rgba(1,3,12,.82); backdrop-filter: blur(8px); }
.end-halo { position: absolute; left: 50%; top: 50%; width: min(720px, 90vw); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(111,232,255,.12); border-radius: 50%; box-shadow: 0 0 100px rgba(105,119,255,.13), inset 0 0 100px rgba(78,207,255,.04); animation: haloSpin 16s linear infinite; }
.end-halo::before, .end-halo::after { content: ""; position: absolute; border-radius: inherit; border: 1px solid rgba(117,208,255,.09); inset: 9%; }
.end-halo::after { inset: 22%; border-color: rgba(255,100,194,.11); }
@keyframes haloSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.end-content { position: relative; z-index: 2; width: min(800px, calc(100% - 48px)); height: 100%; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.end-code { color: var(--cyan); font-size: 9px; letter-spacing: .32em; }
.end-content h2 { margin: 17px 0 9px; font-size: clamp(42px, 6vw, 82px); letter-spacing: .08em; text-shadow: 0 0 35px rgba(102,225,255,.28); }
.end-content > p { margin: 0; color: rgba(211,225,250,.57); font-size: 12px; letter-spacing: .12em; }
.end-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: min(580px, 100%); margin: 38px 0 28px; padding: 19px 0; border-top: 1px solid rgba(147,211,255,.15); border-bottom: 1px solid rgba(147,211,255,.15); }
.end-stats div { display: flex; flex-direction: column; gap: 7px; border-right: 1px solid rgba(147,211,255,.12); }
.end-stats div:last-child { border: 0; }
.end-stats span { color: rgba(181,202,233,.44); font-size: 9px; letter-spacing: .14em; }
.end-stats strong { font-size: 22px; letter-spacing: .05em; }
.end-actions { display: flex; gap: 12px; }
.end-quote { margin-top: 27px !important; color: rgba(153,180,220,.38) !important; font-size: 10px !important; }
.end-screen.failed .end-code { color: var(--danger); }
.end-screen.failed .end-content h2 { text-shadow: 0 0 35px rgba(255,61,112,.28); }

/* Certificate celebration */
.confetti-layer { position: absolute; inset: 0; z-index: 35; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -12%; width: 8px; height: 18px; border-radius: 2px; opacity: .95; animation: confettiFall var(--duration) cubic-bezier(.16,.68,.42,1) var(--delay) forwards; transform: translateX(0) rotate(0deg); box-shadow: 0 0 8px currentColor; }
.confetti-piece.round { width: 9px; height: 9px; border-radius: 50%; }
@keyframes confettiFall { 0% { transform: translate3d(0,-12vh,0) rotate(0deg); opacity: 0; } 8% { opacity: 1; } 55% { transform: translate3d(var(--drift),55vh,0) rotate(540deg); } 100% { transform: translate3d(var(--drift-back),118vh,0) rotate(1080deg); opacity: .2; } }

/* Countdown / toast */
.countdown { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; pointer-events: none; }
.countdown span { font-size: clamp(90px, 14vw, 180px); font-weight: 200; color: rgba(230,247,255,.9); text-shadow: 0 0 45px rgba(93,226,255,.7); animation: countPulse .8s ease-out; }
@keyframes countPulse { from { transform: scale(1.5); opacity: 0; } 40% { opacity: 1; } to { transform: scale(.8); opacity: 0; } }
.toast { position: absolute; z-index: 20; left: 50%; top: 18%; transform: translate(-50%, -10px); padding: 10px 18px; border: 1px solid rgba(137,213,255,.21); border-radius: 999px; background: rgba(4,10,28,.82); color: rgba(234,244,255,.85); font-size: 11px; letter-spacing: .08em; backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.danger { border-color: rgba(255,73,111,.42); color: #ffafbf; }
.toast.success { border-color: rgba(111,255,177,.42); color: #b3ffd2; }
.rotate-notice { display: none; }

@media (max-width: 980px) {
  .screen-inner { width: calc(100% - 48px); }
  .start-layout { grid-template-columns: 1fr; gap: 20px; }
  .hero-copy { max-width: 590px; }
  .instruction-board { display: none; }
  .hero-copy h1 { font-size: clamp(52px, 12vw, 84px); }
  .stage-card { width: min(430px, 48vw); min-width: 290px; }
  .gesture-panel { width: 178px; }
}

@media (max-width: 720px) and (orientation: portrait) {
  .rotate-notice { position: absolute; z-index: 50; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(1,3,12,.9); backdrop-filter: blur(18px); }
  .rotate-notice b { font-size: 20px; letter-spacing: .08em; }
  .rotate-notice span { color: var(--muted); font-size: 11px; }
}

/* Gesture-mode performance profile: keep all gameplay data, remove costly blur/filter work. */
#app.performance-mode .noise { display: none; }
#app.performance-mode .hud-card,
#app.performance-mode .gesture-panel,
#app.performance-mode .ability-pill,
#app.performance-mode .boost-pill { backdrop-filter: none !important; }
#app.performance-mode .camera-frame video { filter: none; }
#app.performance-mode .hud-card::after { display: none; }
#app.performance-mode .stage-glyph { text-shadow: none; }
#app.performance-mode .hud-card,
#app.performance-mode .gesture-panel { box-shadow: 0 8px 28px rgba(0,0,0,.24); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}