:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #05050a; touch-action: manipulation; }
canvas { display: block; width: 100vw; height: 100vh; }
.sound-button { position: fixed; z-index: 4; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid #ffffff26; border-radius: 999px; background: #11121de8; box-shadow: 0 8px 24px #00000045; color: #e8e8ef; cursor: pointer; font-size: .76rem; font-weight: 700; letter-spacing: .02em; transition: border-color .2s, background .2s, transform .2s; }
.sound-button:hover { border-color: #4fc3f7aa; background: #191c2bea; }
.sound-button:active { transform: scale(.96); }
.sound-icon { font-size: 1rem; line-height: 1; }
.sound-label { min-width: 52px; text-align: left; }
.screenshot-button { position: fixed; z-index: 4; top: 66px; right: 18px; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid #ffffff26; border-radius: 999px; background: #11121de8; box-shadow: 0 8px 24px #00000045; color: #e8e8ef; cursor: pointer; font-size: .76rem; font-weight: 700; letter-spacing: .02em; transition: border-color .2s, background .2s, transform .2s; }
.screenshot-button:hover { border-color: #4fc3f7aa; background: #191c2bea; }
.screenshot-button:active { transform: scale(.96); }
.panel { position: fixed; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px 20px; text-align: center; pointer-events: none; }
.panel > * { pointer-events: auto; }
.hidden { display: none !important; }
.panel.hidden { display: none; }
.screen-card { width: min(520px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: clamp(28px, 6vw, 48px) clamp(20px, 6vw, 52px); border: 1px solid #ffffff24; border-radius: 28px; background: linear-gradient(145deg, #171a2af5, #0b0d17f5); box-shadow: 0 24px 80px #00000080, inset 0 1px #ffffff12; }
.panel.modal { pointer-events: auto; background: #05050acc; backdrop-filter: blur(8px); overflow: auto; }
.modal-card { width: min(520px, 100%); max-height: calc(100vh - 80px); overflow: auto; padding: 28px 20px; border: 1px solid #ffffff18; border-radius: 24px; background: #11111beF; box-shadow: 0 20px 70px #00000080; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.modal-header .eyebrow { margin: 0; }
.modal-actions { display: flex; gap: 6px; align-items: center; }
.modal-summary { margin: 0 auto 18px; max-width: 360px; color: #9292a0; }
.tutorial-card { text-align: left; }
.tutorial-card h1 { text-align: center; }
.tutorial-steps { margin: 16px auto 20px; max-width: 380px; }
.tutorial-steps p { margin: 0; padding: 11px 0; border-bottom: 1px solid #ffffff12; }
.tutorial-steps p:last-child { border-bottom: 0; }
.tutorial-steps strong { color: #f5f5f5; }
.tutorial-card .primary { display: block; margin: 0 auto; }
.tutorial-card .primary:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.tutorial-install { margin: 18px auto; max-width: 380px; padding: 10px 12px; border: 1px solid #4fc3f744; border-radius: 10px; background: #4fc3f712; color: #c8eefe !important; font-size: .78rem; }
.completion-banner { margin: 0 !important; padding: 9px 14px; border: 1px solid #f5d76e66; border-radius: 999px; background: #f5d76e14; color: #fff2af !important; font-weight: 800; }
.daily-card { width: min(340px, 100%); margin: 10px auto 8px; padding: 12px 14px 11px; border: 1px solid #f5d76e38; border-radius: 14px; background: linear-gradient(135deg, #f5d76e0d, #ffffff08); }
.daily-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.daily-heading h2 { margin: 0; color: #eee; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.daily-streak { color: #ffe0a0; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.daily-challenge { margin: 5px 0 9px !important; color: #b9bbca !important; font-size: .8rem; }
.daily-challenge strong { color: #fff; }
.daily-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #ffffff18; }
.daily-progress { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f5d76e, #ffab26); box-shadow: 0 0 12px #f5d76e88; transition: width .3s ease; }
.daily-progress-label { margin: 5px 0 0 !important; color: #8e90a0 !important; font-size: .68rem; text-align: right; }
.daily-button { width: 100%; margin-top: 10px; padding: 8px 12px; border: 1px solid #f5d76e66; border-radius: 999px; background: #f5d76e18; color: #ffe9a8; cursor: pointer; font-size: .76rem; font-weight: 800; }
.daily-button:disabled { cursor: not-allowed; opacity: .55; }
.mission-list-panel { margin-top: 10px; color: #c8c9d2; font-size: .72rem; text-align: left; }
.mission-list-panel summary { cursor: pointer; color: #aeb1c0; text-align: center; }
.mission-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 12px; max-height: 130px; overflow: auto; margin: 8px 0 0; padding-left: 0; list-style: none; color: #858896; }
.mission { color: #858896; }
.mission.complete { color: #ffe0a0; font-weight: 700; }
.panel h1 { margin: 0; color: #f5f5f5; font-size: clamp(2rem, 9vw, 3.5rem); letter-spacing: .08em; }
.panel p { color: #9292a0; line-height: 1.5; }
.eyebrow { color: #4fc3f7 !important; font-size: .72rem; font-weight: 700; letter-spacing: .18em; }
button { font: inherit; }
.primary { min-width: 170px; border: 0; border-radius: 999px; padding: 14px 28px; background: linear-gradient(135deg, #63d5ff, #4fc3f7); box-shadow: 0 8px 24px #4fc3f744; color: #061018; font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px #4fc3f766; }
.text-button, .close { border: 0; background: none; color: #aeb1c0; cursor: pointer; }
.text-button:hover, .close:hover { color: #fff; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(300px, 100%); margin: 2px auto 6px; }
.player-bar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 24px; color: #c8eefe; font-size: .78rem; font-weight: 700; }
.player-bar .text-button { color: #9292a0; font-size: .72rem; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 12px; border: 1px solid #ffffff18; border-radius: 12px; background: #ffffff08; color: #fff; }
.stat strong { font-size: 1.35rem; line-height: 1; }
.stat-label { color: #9292a0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.score-line strong { color: #fff; }
section { width: min(440px, 100%); }
h2 { margin: 8px 0; color: #bbb; font-size: .9rem; font-weight: 600; }
.skin-picker { width: min(260px, 100%); margin: 0 auto; }
.skin-select { width: 100%; min-height: 42px; padding: 9px 34px 9px 12px; border: 1px solid var(--skin); border-radius: 10px; outline: 0; background: #ffffff0d; color: #fff; cursor: pointer; font-size: .86rem; font-weight: 700; }
.skin-select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--skin), transparent 70%); }
.skin-select option { background: #11131f; color: #eee; font-size: .86rem; }
.skin-select option:disabled { color: #777; }
.skin-message { min-height: 18px; margin: 8px 0 0; color: #ffdb91 !important; font-size: .78rem; }
.earned { min-height: 24px; color: #ffe0a0 !important; }
.close { flex: 0 0 auto; padding: 8px 12px; border: 1px solid #ffffff24; border-radius: 999px; background: #ffffff0a; font-size: .78rem; }
.badge-list { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 8px; width: min(520px, 100%); max-height: 300px; overflow: auto; padding: 2px; }
.badge { padding: 10px; border: 1px solid #ffffff18; border-radius: 10px; text-align: left; color: #777; }
.badge.unlocked { border-color: #4fc3f755; color: #eee; }
.badge small { display: block; margin-top: 3px; color: #888; }
.history-wrap { width: 100%; max-height: 280px; overflow: auto; border: 1px solid #ffffff18; border-radius: 12px; }
.history { width: 100%; border-collapse: collapse; color: #aaa; font-size: .76rem; text-align: left; }
.history th, .history td { padding: 10px 8px; border-bottom: 1px solid #ffffff12; vertical-align: top; }
.history th { position: sticky; top: 0; background: #171a2a; color: #c6c8d4; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.history tr:last-child td { border-bottom: 0; }
.history td:first-child { color: #fff; font-weight: 800; }
.history-badges { color: #ffe0a0; }
.history-empty { color: #777; text-align: center; }
.username-card { text-align: center; }
.username-input { width: min(280px, 100%); padding: 12px 14px; border: 1px solid #4fc3f7aa; border-radius: 10px; outline: 0; background: #ffffff0d; color: #fff; text-align: center; font: inherit; }
.username-input:focus { box-shadow: 0 0 0 3px #4fc3f733; }
.form-message { min-height: 22px; margin: 8px 0 !important; color: #ffdb91 !important; font-size: .78rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.username-card .primary { margin-top: 4px; }
.leaderboard th:first-child, .leaderboard td:first-child { width: 36px; color: #ffe0a0; }
.leaderboard td:nth-child(2) { color: #fff; font-weight: 700; }
.leaderboard td:last-child { color: #ffe0a0; }
@media (max-width: 480px) {
  .sound-button { top: 12px; right: 12px; }
  .screenshot-button { top: 58px; right: 12px; }
  .screenshot-button span:last-child { display: none; }
  .screen-card { max-height: calc(100vh - 24px); padding: 28px 16px; border-radius: 22px; }
}