#boot-error { position:fixed; z-index:999; left:12px; right:12px; bottom:12px; padding:16px; color:white; background:#852c35; white-space:pre-wrap; }
button:disabled { opacity:.45; cursor:wait; }
:root {
  --bg: #080d18;
  --panel: rgba(15, 25, 43, 0.88);
  --panel-soft: rgba(20, 33, 55, 0.72);
  --line: rgba(150, 190, 220, 0.22);
  --muted: #8ea5b8;
  --text: #edf8ff;
  --cyan: #61e8ff;
  --blue: #4f8dff;
  --orange: #ff762d;
  --yellow: #ffd75a;
  --danger: #ff4f5e;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: "Trebuchet MS", "Yu Gothic", YuGothic, sans-serif; }
body { overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
.app-shell { min-height: 100vh; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 20%, #182845 0, #080d18 54%, #050811 100%); }
.app-shell::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .26; background-image: linear-gradient(rgba(112, 218, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 218, 255, .035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.site-header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(18px, 4vw, 54px); border-bottom: 1px solid rgba(167, 214, 237, .14); position: relative; z-index: 5; background: rgba(7, 12, 23, .52); }
.brand-lockup, .header-status { font-size: 11px; letter-spacing: .2em; color: #9ab4c5; }
.brand-lockup { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.brand-mark { color: var(--cyan); font-size: 16px; text-shadow: 0 0 16px var(--cyan); }
.header-status { display: flex; align-items: center; gap: 7px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #68f6ad; box-shadow: 0 0 10px #68f6ad; }
main { min-height: calc(100vh - 58px); position: relative; z-index: 1; }
.screen { display: none; min-height: calc(100vh - 58px); padding: clamp(26px, 6vh, 74px) 20px; place-items: center; position: relative; }
.screen--active { display: grid; }
.panel-glass { border: 1px solid rgba(167, 218, 240, .22); background: linear-gradient(135deg, rgba(21, 38, 63, .9), rgba(8, 16, 30, .93)); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(16px); }
.title-panel { width: min(740px, 100%); padding: clamp(34px, 6vw, 66px); text-align: center; position: relative; overflow: hidden; }
.title-panel::after { content: ""; position: absolute; width: 320px; height: 320px; right: -170px; top: -180px; border: 1px solid rgba(97, 232, 255, .22); border-radius: 50%; box-shadow: 0 0 0 22px rgba(97,232,255,.025), 0 0 0 45px rgba(97,232,255,.018); }
.eyebrow { color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 20px 0 14px; font-size: clamp(52px, 11vw, 112px); line-height: .9; letter-spacing: -.06em; font-weight: 900; color: #f4fbff; text-shadow: 0 8px 0 rgba(79, 141, 255, .18), 0 0 40px rgba(97, 232, 255, .2); }
h1 span { color: var(--orange); }
h2 { margin: 14px 0 10px; font-size: clamp(28px, 5vw, 48px); letter-spacing: -.04em; }
h3 { margin: 8px 0; font-size: 21px; }
.title-copy, .screen-lead { color: #b7c8d6; line-height: 1.8; }
.title-copy { max-width: 520px; margin: 0 auto 25px; }
.title-lava-line { height: 11px; display: flex; justify-content: center; gap: 3px; margin: 26px 0 31px; overflow: hidden; }
.title-lava-line i { display: block; width: 80px; height: 12px; background: var(--orange); transform: skewX(-30deg); box-shadow: 0 0 16px rgba(255,118,45,.65); animation: lava-pulse 1.4s ease-in-out infinite alternate; }
.title-lava-line i:nth-child(2) { animation-delay: -.3s; opacity: .8; }.title-lava-line i:nth-child(3) { animation-delay: -.6s; }.title-lava-line i:nth-child(4) { animation-delay: -.9s; opacity: .75; }.title-lava-line i:nth-child(5) { animation-delay: -1.2s; }
@keyframes lava-pulse { from { transform: translateY(3px) skewX(-30deg); } to { transform: translateY(-3px) skewX(-30deg); } }
.mode-buttons, .result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.button { border: 1px solid rgba(171, 224, 244, .34); background: rgba(21, 38, 61, .72); min-height: 44px; padding: 0 20px; letter-spacing: .08em; font-size: 12px; font-weight: 800; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.button--large { min-height: 56px; padding-inline: 30px; font-size: 14px; }
.button--primary { color: #06121b; border-color: var(--cyan); background: linear-gradient(135deg, #a5f6ff, #42cde7); box-shadow: 0 0 22px rgba(97,232,255,.2); }
.button--outline { color: var(--cyan); background: rgba(30, 92, 118, .18); }
.button--ghost { border-color: transparent; background: transparent; color: #9fb4c5; }
.micro-copy, .lobby-note { margin: 22px 0 0; color: #7c94a7; font-size: 11px; letter-spacing: .08em; }
.title-decoration { position: absolute; color: rgba(151, 194, 215, .35); font-size: 10px; letter-spacing: .22em; writing-mode: vertical-rl; }
.decoration-left { left: clamp(14px, 4vw, 56px); top: 25%; }.decoration-right { right: clamp(14px, 4vw, 56px); bottom: 20%; writing-mode: horizontal-tb; }
.setup-panel, .lobby-panel { width: min(900px, 100%); padding: clamp(26px, 5vw, 54px); }
.back-button { border: 0; padding: 0; background: transparent; color: #9eb9c8; font-size: 12px; letter-spacing: .06em; margin-bottom: 28px; }
.back-button:hover { color: var(--cyan); }
.screen-lead { max-width: 620px; margin-bottom: 28px; }
.difficulty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 34px; }
.difficulty-card { min-height: 150px; padding: 22px 17px; text-align: left; background: rgba(8, 17, 31, .6); border: 1px solid var(--line); color: var(--text); transition: .18s ease; }
.difficulty-card:hover, .difficulty-card--selected { transform: translateY(-3px); border-color: var(--cyan); background: rgba(35, 70, 93, .4); }
.difficulty-name { display: block; color: var(--cyan); font-size: 18px; font-weight: 900; letter-spacing: .12em; }
.difficulty-detail { display: block; color: #9bb2c2; font-size: 12px; line-height: 1.6; margin: 12px 0 20px; }
.difficulty-meter { display: flex; gap: 4px; }.difficulty-meter i { width: 23px; height: 4px; background: #2a3e51; }.difficulty-card--selected .difficulty-meter i { background: var(--orange); box-shadow: 0 0 7px rgba(255,118,45,.45); }
.control-reference { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 26px; color: #829aaa; font-size: 12px; }.control-reference b { color: #e4f5ff; margin-right: 5px; }
.online-panel { max-width: 980px; }.online-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 30px 0 18px; }.online-action-card { padding: 25px; background: rgba(5, 13, 25, .46); border: 1px solid rgba(140, 192, 220, .16); min-height: 270px; }.card-index { color: var(--orange); font-size: 12px; letter-spacing: .2em; }.online-action-card p { color: #94a9b8; font-size: 13px; line-height: 1.7; min-height: 45px; }.field-label { display: block; color: #87a6b9; font-size: 10px; letter-spacing: .16em; font-weight: 800; margin: 18px 0 7px; }.text-input { width: 100%; height: 48px; padding: 0 14px; color: var(--text); background: #080f1c; border: 1px solid rgba(145, 193, 218, .25); outline: 0; text-transform: uppercase; letter-spacing: .2em; margin-bottom: 12px; }.text-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(97,232,255,.1); }.inline-status { min-height: 18px; color: var(--yellow); font-size: 12px; line-height: 1.5; }
.lobby-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.room-code-box { display: flex; align-items: center; gap: 16px; margin: 28px 0 18px; padding: 16px 18px; border: 1px solid rgba(255, 118, 45, .38); background: rgba(99, 39, 19, .18); }.room-code-label { color: #ad8f7e; font-size: 10px; letter-spacing: .15em; }.room-code-box strong { color: var(--orange); font-size: 25px; letter-spacing: .23em; }.copy-button { margin-left: auto; padding: 8px 11px; border: 1px solid rgba(255, 188, 140, .25); background: transparent; color: #eab496; font-size: 11px; }.roster-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 18px 0 22px; }.roster-slot { min-height: 84px; padding: 14px; border: 1px solid rgba(143, 184, 208, .18); background: rgba(6, 15, 27, .6); position: relative; }.roster-slot.is-filled { border-color: rgba(97, 232, 255, .45); }.roster-slot.is-cpu { border-color: rgba(255, 118, 45, .38); }.roster-color { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; }.roster-name { display: block; font-size: 13px; font-weight: 800; margin-top: 12px; }.roster-type { display: block; color: #7790a1; font-size: 10px; margin-top: 5px; letter-spacing: .1em; }.cpu-control { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 0; border-top: 1px solid rgba(145, 185, 208, .13); border-bottom: 1px solid rgba(145, 185, 208, .13); }.cpu-control p { margin: 0; color: #8198a8; font-size: 12px; }.cpu-stepper { display: flex; align-items: center; gap: 16px; }.cpu-stepper strong { min-width: 24px; text-align: center; color: var(--orange); font-size: 21px; }.step-button { width: 33px; height: 33px; border: 1px solid rgba(255, 149, 96, .4); color: var(--orange); background: rgba(100, 41, 20, .25); font-size: 20px; line-height: 1; }.lobby-panel > .button--large { width: 100%; margin-top: 18px; }
.game-screen { padding: 0; min-height: calc(100vh - 58px); display: none; align-items: stretch; justify-content: stretch; background: #070d17; }.game-screen.screen--active { display: flex; }.game-root { width: 100%; min-height: calc(100vh - 58px); display: flex; align-items: center; justify-content: center; padding: 75px 0 0; }.game-root canvas { display: block; max-width: 100%; max-height: calc(100vh - 75px); object-fit: contain; }
.game-hud { position: absolute; top: 0; left: 0; width: 100%; min-height: 72px; z-index: 20; display: flex; align-items: center; gap: 25px; padding: 10px clamp(12px, 3vw, 32px); background: linear-gradient(180deg, rgba(3, 8, 17, .95), rgba(3, 8, 17, .55)); border-bottom: 1px solid rgba(145, 188, 214, .18); }.hud-block { display: flex; flex-direction: column; gap: 3px; }.hud-kicker { color: #7695a8; font-size: 9px; letter-spacing: .15em; }.hud-block strong { color: #effcff; font-size: 16px; }.hud-title strong { color: var(--cyan); }.hud-players { display: flex; gap: 6px; margin-left: auto; }.hud-player { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(142, 189, 212, .18); color: #a9c0ce; font-size: 10px; }.hud-player-dot { width: 7px; height: 7px; border-radius: 50%; }.hud-player.is-out { opacity: .4; text-decoration: line-through; }.speed-banner { position: absolute; left: 50%; top: 50%; z-index: 25; transform: translate(-50%, -50%) scale(.8); pointer-events: none; opacity: 0; color: var(--orange); font-size: clamp(28px, 6vw, 70px); font-weight: 900; letter-spacing: .08em; text-shadow: 0 0 28px rgba(255, 118, 45, .8); }.speed-banner.show { animation: speed-banner 1.15s ease both; } @keyframes speed-banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.75); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); } }
.spectator-banner { position: absolute; right: 20px; bottom: 98px; z-index: 22; opacity: 0; color: var(--yellow); font-size: 11px; letter-spacing: .16em; pointer-events: none; }.spectator-banner.show { opacity: 1; animation: blink 1.1s ease-in-out infinite alternate; } @keyframes blink { to { opacity: .38; } }
.mobile-controls { display: none; position: absolute; z-index: 30; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); padding: 0 14px; gap: 12px; pointer-events: none; }.touch-control { pointer-events: auto; flex: 1; height: 64px; border: 1px solid rgba(210, 245, 255, .34); color: #effdff; font-weight: 900; letter-spacing: .12em; background: rgba(17, 55, 75, .75); backdrop-filter: blur(8px); touch-action: none; }.touch-control span { display: block; font-size: 16px; color: var(--cyan); margin-top: 3px; }.touch-control--duck { background: rgba(100, 52, 24, .78); }.touch-control--duck span { color: var(--orange); }
.result-overlay { position: absolute; inset: 0; z-index: 40; display: none; place-items: center; padding: 20px; background: rgba(2, 5, 12, .67); }.result-overlay.show { display: grid; }.result-card { width: min(550px, 100%); padding: clamp(28px, 6vw, 54px); text-align: center; }.result-label { color: var(--orange); font-size: 18px; letter-spacing: .2em; font-weight: 900; margin-top: 32px; }.result-card h2 { color: #f2fdff; font-size: clamp(34px, 8vw, 64px); margin: 8px 0 12px; }.result-detail { color: #a6bcc9; line-height: 1.7; }.result-actions { margin-top: 26px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 20px); padding: 11px 16px; color: #dffaff; background: rgba(8, 24, 38, .95); border: 1px solid rgba(97, 232, 255, .5); font-size: 12px; opacity: 0; pointer-events: none; transition: .22s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) {
  .site-header { height: 48px; }.brand-lockup, .header-status { font-size: 9px; }.screen { min-height: calc(100vh - 48px); padding: 20px 12px; }.title-panel { padding: 32px 19px; }.title-decoration { display: none; }.mode-buttons .button { width: 100%; }.difficulty-grid, .online-actions { grid-template-columns: 1fr; }.difficulty-card { min-height: 108px; }.difficulty-detail { margin: 8px 0 12px; }.online-action-card { min-height: auto; }.lobby-panel { padding: 24px 17px; }.roster-list { grid-template-columns: repeat(2, 1fr); }.room-code-box { gap: 9px; }.room-code-box strong { font-size: 19px; }.cpu-control { align-items: flex-start; }.game-hud { min-height: 58px; gap: 10px; padding: 8px 10px; }.hud-kicker { font-size: 7px; }.hud-block strong { font-size: 12px; }.hud-title { display: none; }.hud-players { display: none; }.game-root { min-height: calc(100vh - 48px); padding-top: 58px; padding-bottom: 84px; }.game-root canvas { max-height: calc(100vh - 142px); }.mobile-controls { display: flex; }.spectator-banner { bottom: 92px; right: 12px; }.result-overlay { align-items: start; padding-top: 80px; }.result-actions .button { width: 100%; }.control-reference { gap: 12px; font-size: 11px; }
}
@media (min-width: 761px) and (pointer: coarse) { .mobile-controls { display: flex; max-width: 520px; left: 50%; right: auto; width: 100%; transform: translateX(-50%); } }