.comet-scene-host {
  min-width: 0;
  min-height: 0;
}

.comet-art-study { position: relative; width: 100%; height: 100%; overflow: hidden; color: #173f39; background: linear-gradient(180deg, #e6f2de0d, #43817b05 60%, #173f4826), url('../../assets/reference-art-v3/sky-temples-v2.png') center 48% / cover, #b7d9d5; font-family: system-ui, sans-serif; }
.comet-art-canvas { position: absolute; top: 55px; display: block; width: 100%; height: calc(100% - 210px); touch-action: none; }
.comet-art-heading { position: absolute; top: max(22px, env(safe-area-inset-top)); left: 28px; pointer-events: none; text-shadow: 0 1px 10px #f4f4dd; }
.comet-art-eyebrow { font-size: 10px; letter-spacing: .2em; font-weight: 700; }
.comet-art-heading h1 { margin: 8px 0; font: 500 clamp(20px, 3vw, 32px)/1.1 Georgia, serif; }
.comet-art-heading p { margin: 0; font-size: 11px; }
.comet-art-controls { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(430px, calc(100% - 32px)); display: grid; gap: 9px; padding: 14px; box-sizing: border-box; border: 1px solid #ffffff75; border-radius: 20px; background: #edf3eae8; box-shadow: 0 12px 40px #234d4220; }
.comet-art-variants, .comet-art-actions { display: flex; gap: 6px; }
.comet-art-controls button { flex: 1; min-height: 40px; padding: 8px; color: #244840; background: #ffffff7a; border: 1px solid #8aaba36b; border-radius: 10px; font: 600 12px system-ui; cursor: pointer; }
.comet-art-controls button[aria-pressed="true"], .comet-art-actions button:first-child { background: #32675b; color: #fff9ec; }
.comet-art-timeline { display: flex; align-items: center; gap: 12px; font-size: 11px; }
.comet-art-timeline input { flex: 1; width: 30%; accent-color: #32675b; }
.comet-art-status { margin: 0; font-size: 10px; text-align: center; }
.comet-art-game-link { color: #244840; font-size: 11px; text-align: center; }
.comet-art-study [hidden] { display: none !important; }
.comet-art-navigation { display: flex; align-items: center; justify-content: center; gap: 16px; }
.comet-art-navigation button { flex: initial; min-height: 28px; padding: 4px 10px; font-size: 11px; }
@media (max-height: 600px) { .comet-art-heading { top: 12px; left: 14px; } .comet-art-heading h1 { font-size: 18px; } .comet-art-controls { width: 310px; left: auto; right: 12px; transform: none; padding: 10px; } }

.comet-gesture { position: absolute; width: 70px; height: 88px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 150ms ease; }
.comet-gesture:not([data-cue="none"]) { transition-duration: 200ms; }
.comet-gesture svg { overflow: visible; width: 100%; height: 100%; }
.comet-finger { fill: #FFF4E7; stroke: #1E2233; stroke-width: 3; stroke-linejoin: round; }
.comet-touch-ring { fill: none; stroke: #1F3BE0; stroke-width: 4; }
.comet-gesture[data-cue="release"] .comet-touch-ring { stroke: #23252B; stroke-width: 6; }
.comet-play[data-mode="paused"] .comet-gesture, .comet-play[data-mode="failed"] .comet-gesture, .comet-play[data-mode="won"] .comet-gesture { visibility: hidden; }

.comet-play { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #fffbe24d 0%, #f5f4df1f 27%, transparent 52%), linear-gradient(180deg, #bfe9e514 0%, transparent 54%, #276f7440 78%, #0d4d5770 100%), url('../../assets/reference-art-v3/sky-temples-v2.png') center 48% / cover no-repeat, #b7d9d5; color: #1E2233; font-family: system-ui, sans-serif; }
.comet-play[data-palette="P02"] { background: radial-gradient(ellipse at 50% 31%, #fff4c13b 0%, transparent 46%), linear-gradient(180deg, #31c7d114 0%, transparent 55%, #087b8970 100%), url('../../assets/reference-art-v3/sky-lagoon-p02-v1.png') center 48% / cover no-repeat, #70d4db; }
.comet-play[data-palette="P03"] { background: radial-gradient(ellipse at 50% 27%, #fff0c82e 0%, transparent 45%), linear-gradient(180deg, #fff1d20d 0%, #8d78a51c 54%, #4b536878 100%), url('../../assets/reference-art-v3/celestial-dawn-p03-v1.png') center 48% / cover no-repeat, #cbb8cf; }
.comet-play[data-palette="P04"] { background: radial-gradient(ellipse at 50% 26%, #f6fbff42 0%, transparent 44%), linear-gradient(180deg, #cce9f11c 0%, #8fa8c12b 55%, #344b687d 100%), url('../../assets/reference-art-v3/celestial-dawn-p03-v1.png') center 48% / cover no-repeat, #9ebdca; }
.comet-play[data-palette="P05"] { background: radial-gradient(ellipse at 50% 27%, #ffc28a30 0%, transparent 42%), linear-gradient(180deg, #3a1f2e2e 0%, #ff5e3a14 48%, #2514248a 100%), url('../../assets/reference-art-v3/ember-citadel-p05-v1.png') center 47% / cover no-repeat, #3a1f2e; }
.comet-play[data-palette="P06"] { background: radial-gradient(ellipse at 50% 28%, #fff0c43a 0%, transparent 43%), linear-gradient(180deg, #ffbf7010 0%, #54a7ba0d 52%, #215f7770 100%), url('../../assets/reference-art-v3/amber-hanging-gardens-p06-v3.png') center 48% / cover no-repeat, #d8bd94; }
.comet-play[data-palette="P07"] { background: radial-gradient(ellipse at 50% 27%, #f9ffff38 0%, transparent 44%), linear-gradient(180deg, #b8e9ef12 0%, #aa8fc112 50%, #365e8070 100%), url('../../assets/reference-art-v3/moonlit-jade-gardens-p07-v1.png') center 48% / cover no-repeat, #b8d8dc; }
.comet-play[data-palette="P08"] { background: radial-gradient(ellipse at 50% 25%, #ddffff3d 0%, transparent 42%), linear-gradient(180deg, #285d791f 0%, #67dbd91f 48%, #241c628c 100%), url('../../assets/reference-art-v3/moonlit-jade-gardens-p07-v1.png') center 48% / cover no-repeat, #719eb8; }
.comet-play[data-palette="P09"] { background: radial-gradient(ellipse at 50% 29%, #fff5d53d 0%, transparent 43%), linear-gradient(180deg, #193e8026 0%, #768bc20d 50%, #24386d70 100%), url('../../assets/reference-art-v3/celestial-orrery-gardens-p09-v1.png') center 48% / cover no-repeat, #879ed0; }
.comet-play[data-palette="P10"] { background: radial-gradient(ellipse at 50% 28%, #ffe4af42 0%, transparent 42%), linear-gradient(180deg, #351b482e 0%, #d48b6817 48%, #171a477d 100%), url('../../assets/reference-art-v3/celestial-orrery-gardens-p09-v1.png') center 52% / cover no-repeat, #8f7790; }
.comet-play[data-palette="P11"] { background: radial-gradient(ellipse at 50% 27%, #fff2bd36 0%, transparent 42%), linear-gradient(180deg, #2fbec10d 0%, #d99a4012 51%, #28778a66 100%), url('../../assets/reference-art-v3/sun-courtyard-gardens-p11-v1.png') center 48% / cover no-repeat, #8fcfd2; }
.comet-play[data-palette="P12"] { background: radial-gradient(ellipse at 50% 24%, #e3f4ff7a 0%, transparent 40%), linear-gradient(180deg, #1d3970b0 0%, #31768aa3 48%, #181b4dd1 100%), url('../../assets/reference-art-v3/sun-courtyard-gardens-p11-v1.png') center 56% / cover no-repeat, #546f91; background-blend-mode: screen, color, normal; }
.comet-play[data-palette="P_relax"] { background: radial-gradient(ellipse at 50% 27%, #fff9df70 0%, transparent 48%), linear-gradient(180deg, #e9fff42e 0%, #c8e8e12a 55%, #41899772 100%), url('../../assets/reference-art-v3/sun-courtyard-gardens-p11-v1.png') center 48% / cover no-repeat, #9fd5d8; }
.comet-play[data-palette="P11a"] { background: radial-gradient(ellipse at 50% 27%, #fff2bd36 0%, transparent 42%), linear-gradient(180deg, #2fbec10d 0%, #d99a4012 51%, #28778a66 100%), url('../../assets/reference-art-v3/sun-courtyard-gardens-p11-a-v1.png') center 48% / cover no-repeat, #8fcfd2; }
.comet-play[data-palette="P11b"] { background: radial-gradient(ellipse at 50% 27%, #fffbd83d 0%, transparent 43%), linear-gradient(180deg, #d7ffff12 0%, #a899d514 50%, #4a78ad66 100%), url('../../assets/reference-art-v3/prismatic-sky-gardens-p11-b-v1.png') center 48% / cover no-repeat, #b9dbea; }
.comet-play[data-palette="P11c"] { background: radial-gradient(ellipse at 50% 28%, #fff0d83d 0%, transparent 43%), linear-gradient(180deg, #f6d9e814 0%, #78bfc814 52%, #607fa466 100%), url('../../assets/reference-art-v3/lotus-cloud-palaces-p11-c-v1.png') center 48% / cover no-repeat, #c7d9e4; }
/* Full-screen blur re-rasterizes the live WebGL canvas on Android WebView and
   can exhaust its compositor tile budget after an idle/resume transition. */
html[data-comet-native="true"] .comet-play:has(.comet-result:not([hidden]))::after,
html[data-comet-native="true"] .comet-settings-overlay,
html[data-comet-native="true"] .comet-profile-overlay { backdrop-filter: none; }
.comet-play [hidden] { display: none !important; }
.comet-qa-level-panel { position: absolute; z-index: 25; left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; max-width: calc(100% - 16px); padding: 5px; border-radius: 11px; background: #183f3be8; box-shadow: 0 3px 14px #0006; pointer-events: auto; }
.comet-qa-level-panel input { width: 58px; min-height: 32px; padding: 2px 5px; border-radius: 6px; border: 1px solid #afc9bc; font: 600 13px system-ui; }
.comet-qa-level-panel button { min-height: 34px; padding: 3px 7px; border: 0; border-radius: 6px; color: #193b34; background: #ecf4dd; font: 700 11px system-ui; }
.comet-qa-level-panel .comet-qa-status { flex-basis: 100%; color: #f7f6e7; font: 600 11px/1.3 system-ui; }
.comet-home-screen { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: space-between; padding: max(22px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); box-sizing: border-box; pointer-events: none; }
.comet-home-screen::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #f7fff13d 0%, transparent 28%, transparent 60%, #0f515b5c 100%); }
.comet-home-top { display: flex; align-items: center; justify-content: space-between; }
.comet-brand { color: #214b45; font: 900 clamp(22px, 7vw, 34px)/1 system-ui, sans-serif; letter-spacing: .22em; text-shadow: 0 2px 18px #fff; }
.comet-icon-button { display: grid; place-items: center; inline-size: 52px; block-size: 52px; padding: 0; border: 1px solid #ffffffaa; border-radius: 50%; color: #214b45; background: #f3f5e9e8; box-shadow: 0 8px 22px #173f3926; font: 700 25px/1 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.comet-settings-button { pointer-events: auto; }
.comet-home-card { align-self: center; display: grid; justify-items: center; width: min(390px, calc(100vw - 40px)); padding: 22px 24px; box-sizing: border-box; border: 1px solid #ffffffa8; border-radius: 26px; background: #eff3e8e8; box-shadow: 0 18px 50px #164e4a33; backdrop-filter: blur(12px); text-align: center; }
.comet-home-kicker { color: #397066; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.comet-home-title { margin: 7px 0 4px; font: 700 clamp(27px, 8vw, 42px)/1.05 Georgia, serif; }
.comet-home-instruction { margin: 7px 0 15px; color: #32544e; font-size: clamp(15px, 4vw, 18px); line-height: 1.35; }
.comet-home-pulse { inline-size: 52px; block-size: 9px; border-radius: 999px; background: #ff681f; box-shadow: 0 0 0 0 #ff681f55; animation: comet-home-pulse 1.5s ease-out infinite; }
@keyframes comet-home-pulse { 60% { box-shadow: 0 0 0 14px transparent; } }
.comet-hud::before { content: ''; position: absolute; inset: -10px; z-index: -1; border-radius: 16px; background: #edf3ea; }
.comet-hud { isolation: isolate; }
.comet-preview-switch { position: absolute; bottom: 2px; left: 16px; max-width: calc(100% - 165px); padding: 8px 12px; font-size: 12px; }
.comet-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -4px; }
.comet-hud { position: absolute; inset: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) auto max(16px, env(safe-area-inset-left)); display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; pointer-events: none; }
.comet-title { font-size: clamp(16px, 4vw, 22px); min-width: 0; }
.comet-score { grid-column: 1; justify-self: start; font-size: 15px; padding: 2px 8px; border-radius: 6px; }
.comet-pause { grid-column: 2; grid-row: 1 / span 2; pointer-events: auto; }
.comet-progress { grid-column: 1 / -1; width: 100%; height: 9px; accent-color: #1F3BE0; }
.comet-button { min-height: 44px; padding: 10px 18px; border: 1px solid #1E223344; border-radius: 14px; background: #1F3BE0; color: white; font: 700 15px/1.3 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.comet-button:disabled { opacity: .5; cursor: default; }
.comet-button-secondary { background: #FFF4E7; color: #1E2233; }
.comet-hint { position: absolute; inset: auto 24px 96px; max-width: 360px; margin: auto; padding: 10px 14px; border-radius: 14px; background: #FFF4E7ED; text-align: center; font-size: 16px; line-height: 1.4; font-weight: 650; pointer-events: none; }
.comet-note { position: absolute; inset: auto 16px 50px; margin: 0; padding: 5px; border-radius: 7px; background: #FFD9A8ED; text-align: center; font-size: 11px; line-height: 1.35; pointer-events: none; }
.comet-result { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 12px; width: min(340px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 24px; background: #FFF4E7F5; border: 1px solid #1E223333; border-radius: 24px; box-shadow: 0 16px 48px #1E223326; text-align: center; }
.comet-result { z-index: 7; }
.comet-result::before { content: ''; position: fixed; inset: 0; z-index: -1; background: #153e436b; backdrop-filter: blur(4px); }
.comet-result[data-result="won"] { animation: comet-result-arrive .28s cubic-bezier(.18,.89,.32,1.15) both; }
.comet-result-title { margin: 0; font-size: 24px; line-height: 1.15; }
.comet-result-text { margin: 0; font-size: 14px; line-height: 1.5; }
.comet-finish-win-mult { position: absolute; z-index: 2; transform: translate(-50%, -50%); pointer-events: none; color: #1E2233; text-shadow: 0 1px 0 #FFF4E7, 0 0 5px #FFF4E7; font: 800 12px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.comet-finish-win-mult { z-index: 4; color: #ff681f; font-size: clamp(42px, 12vw, 76px); text-shadow: 0 2px 0 #FFF4E7, 0 0 18px #FFF4E7; animation: comet-finish-pop .7s cubic-bezier(.18,.89,.32,1.28) both; }
.comet-finish-win-mult[data-impact="true"] { animation: comet-multiplier-strike .68s cubic-bezier(.18,.89,.32,1.18) both; }
.comet-finish-score-impact {
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: clamp(6px, 1.8vw, 12px); min-width: max-content;
  padding: 0; border: 0; border-radius: 0;
  color: #214c41; background: transparent; box-shadow: none;
  text-shadow: 0 2px 0 #fffde8, 0 0 12px #fffde8, 0 0 24px #ffd779a8;
  font: 900 clamp(28px, 7vw, 46px)/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
  pointer-events: none; animation: comet-score-impact-arrive .82s cubic-bezier(.2,.75,.25,1) both;
}
.comet-finish-score-impact[hidden] { display: none; }
.comet-finish-impact-multiplier { color: #ec641d; font-size: 1.22em; text-shadow: 0 2px 0 #fff6dc; }
.comet-finish-impact-equals { color: #83662e; }
.comet-finish-impact-value { min-width: 2.2ch; color: #153f38; transform-origin: left center; }
.comet-finish-score-impact[data-phase="count"] .comet-finish-impact-value { animation: comet-score-count-pulse .28s ease-in-out infinite alternate; }
.comet-finish-score-impact[data-phase="reward"] { gap: 0; }
.comet-finish-score-impact[data-phase="reward"] .comet-finish-impact-value {
  color: #ffe68d; font-size: 1.65em; letter-spacing: .015em; text-align: center;
  -webkit-text-stroke: 1px #713914;
  text-shadow: 0 2px 0 #fff9db, 0 4px 0 #9a4918, 0 0 18px #ff7b24, 0 0 36px #ffae39cc;
  animation: comet-score-reward-hold .9s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes comet-finish-pop { from { opacity: 0; transform: translate(-50%, -25%) scale(.55); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes comet-multiplier-strike {
  0% { opacity: 0; transform: translate(-50%, 5%) scale(.35) rotate(-7deg); }
  38% { opacity: 1; transform: translate(-50%, -56%) scale(1.24) rotate(2deg); }
  58% { transform: translate(-50%, -50%) scale(.96); }
  100% { opacity: 0; transform: translate(-50%, -185%) scale(.74); }
}
@keyframes comet-score-impact-arrive {
  0% { opacity: 0; transform: translate(-50%, 95px) scale(.72); }
  48% { opacity: 1; transform: translate(-50%, -53%) scale(1.035); }
  78%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes comet-score-count-pulse { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes comet-score-reward-hold { 0% { transform: scale(.92); } 36% { transform: scale(1.1); } 70%, 100% { transform: scale(1.04); } }
@keyframes comet-result-arrive { from { opacity: 0; transform: translate(-50%, -44%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .comet-finish-win-mult, .comet-finish-score-impact, .comet-finish-impact-value, .comet-result[data-result="won"] { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .comet-home-pulse { animation: none; } }
.comet-resume-countdown { margin: 0; color: #1E2233; font: 800 64px/1.1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.comet-charge { position: absolute; transform: translate(-50%, 0); width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--charge-color, #1F3BE0) var(--charge), #FFF4E777 0); padding: 5px; pointer-events: none; }
.comet-charge-value { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #FFD9A8; color: #1E2233; font: 700 12px system-ui, sans-serif; }
.comet-fever-warning { position: absolute; transform: translate(-50%, -100%); width: 28px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #FFF4E7; color: #1E2233; border: 2px solid #1E2233; font: 900 24px/1 system-ui, sans-serif; pointer-events: none; }
.comet-charge[data-lesson="true"] { background: transparent; border: 5px solid #23252B; outline: 2px solid #FFF4E7; height: 20px; width: 60px; padding: 0; }
@media (max-height: 500px) { .comet-hint { inset-block-end: 88px; font-size: 13px; } .comet-note { inset-block-end: 52px; text-align: start; } .comet-result { padding: 16px; gap: 8px; } }

.comet-settings-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); box-sizing: border-box; background: #153e436b; backdrop-filter: blur(6px); color: #1e3834; font-family: system-ui, sans-serif; }
.comet-settings-panel { width: min(380px, 100%); display: grid; gap: 10px; padding: 20px; box-sizing: border-box; border: 1px solid #ffffffaa; border-radius: 28px; background: #eff3e8f5; box-shadow: 0 24px 70px #123b3a55; }
.comet-settings-heading { display: flex; align-items: center; justify-content: space-between; margin-block-end: 5px; }
.comet-settings-heading h1 { margin: 0; font: 700 29px/1.1 Georgia, serif; }
.comet-settings-section { margin: 8px 4px 0; color: #42655d; font: 900 12px/1 system-ui,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.comet-setting-action small { max-width: 46%; color: #60736d; font: 750 11px/1.2 system-ui,sans-serif; text-align: right; }
.comet-settings-version { margin: 8px 4px 0; color: #60736d; font: 700 11px/1.3 system-ui,sans-serif; text-align: center; }
.comet-setting-action:disabled > .comet-ui-surface { filter: saturate(.55) brightness(1.08) !important; opacity: .88; }
.comet-settings-content { min-height: 0; display: grid; gap: 16px; overflow-y: auto; overflow-x: hidden; padding: 2px 8px 12px 2px; scrollbar-width: thin; scrollbar-color: #527b70 transparent; }
.comet-settings-content::-webkit-scrollbar { width: 6px; }
.comet-settings-content::-webkit-scrollbar-track { border-radius: 999px; background: transparent; }
.comet-settings-content::-webkit-scrollbar-thumb { border: 1px solid #eff3e8; border-radius: 999px; background: #527b70; }
:root[data-comet-high-contrast="true"] .comet-settings-overlay,
.comet-play[data-high-contrast="true"] { filter: contrast(1.16) saturate(1.08); }
:root[data-comet-colorblind="true"] .comet-play { --comet-danger-accent: #ffd84a; }
:root[data-comet-colorblind="true"] .comet-settings-panel { outline: 4px solid #173f59; }
.comet-setting-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 12px 10px 16px; border: 1px solid #7b9c9366; border-radius: 16px; color: inherit; background: #ffffff8a; font: 700 16px/1.2 system-ui, sans-serif; cursor: pointer; }
.comet-setting-row[href] { text-decoration: none; }
.comet-setting-row[aria-disabled="true"] { cursor: default; color: #52645f; }
.comet-switch { min-width: 54px; padding: 7px 10px; border-radius: 999px; color: #fff; background: #397b6e; font-size: 12px; text-align: center; }
.comet-setting-row[aria-pressed="false"] .comet-switch { color: #4c615d; background: #d8dfda; }

.comet-scene-preview {
  position: relative;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 1px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #FFD9A8 0%, #FF9A5C 100%);
}

.comet-scene-preview__canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.comet-scene-preview__label,
.comet-scene-preview__detail {
  position: absolute;
  z-index: 1;
  inset-inline: 12px;
  margin: 0;
  color: #1E2233;
  font-family: system-ui, sans-serif;
  pointer-events: none;
}

.comet-scene-preview__label {
  inset-block-start: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comet-scene-preview__detail {
  inset-block-start: 31px;
  max-inline-size: 270px;
  font-size: 11px;
  line-height: 1.3;
}

/* Product UI — ivory ceramic, jade glaze and a warm metal edge.
   One visual system inside the existing Framework components; no new UI root. */
.comet-play, .comet-settings-overlay {
  --ui-ink: #203f3a;
  --ui-muted: #496259;
  --ui-ivory: #fff9e9;
  --ui-jade-light: #397965;
  --ui-jade: #286451;
  --ui-jade-dark: #194b3e;
  --ui-edge: #b8a576;
  --ui-panel: linear-gradient(145deg, #fffef4 0%, #f3f1df 52%, #e4e9d9 100%);
  color: var(--ui-ink);
}
.comet-play button, .comet-settings-overlay button { -webkit-tap-highlight-color: transparent; }
:where(.comet-play, .comet-settings-overlay) [data-icon]::before {
  content: ''; display: inline-block; flex: 0 0 auto; width: 24px; height: 24px;
  background: currentColor; mask: var(--comet-icon) center / contain no-repeat;
  -webkit-mask: var(--comet-icon) center / contain no-repeat; pointer-events: none;
}
.comet-button, .comet-icon-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; min-height: 54px; padding: 13px 22px; border: 1px solid #c3d8b4;
  border-radius: 19px; color: var(--ui-ivory);
  background: linear-gradient(180deg, var(--ui-jade-light), var(--ui-jade) 60%, #235b4b);
  box-shadow: inset 0 2px 1px #dffff45c, inset 0 -2px 3px #123c453d, 0 5px 0 var(--ui-jade-dark), 0 9px 15px #193c3933;
  font: 750 16px/1.3 system-ui, sans-serif; text-shadow: 0 1px 1px #143c46;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.comet-button-secondary, .comet-icon-button {
  color: var(--ui-ink); text-shadow: 0 1px 0 #fff;
  background: linear-gradient(180deg, #fffff7, #f0f0dd 65%, #dce4d0);
  border-color: #d5c7a3;
  box-shadow: inset 0 2px 1px #fff, inset 0 -2px 3px #bbbe9d66, 0 5px 0 #9caa8f, 0 9px 15px #193c3929;
}
.comet-icon-button { width: 54px; height: 54px; padding: 0; border-radius: 19px; font-size: 0; }
.comet-icon-button::before { width: 27px; height: 27px; }
.comet-button:enabled:active, .comet-icon-button:enabled:active {
  transform: translateY(4px); box-shadow: inset 0 2px 4px #153d3a38, 0 1px 0 #33594b, 0 3px 6px #193c3926;
}
.comet-button:focus-visible, .comet-icon-button:focus-visible, .comet-setting-row:focus-visible {
  outline: 3px solid #214b45; outline-offset: 5px;
}
.comet-button:disabled { opacity: .6; filter: saturate(.35); text-shadow: none; }
@media (hover: hover) { .comet-button:enabled:hover, .comet-icon-button:enabled:hover { filter: brightness(1.07); } }
.comet-home-card, .comet-result, .comet-settings-panel {
  border: 1px solid var(--ui-edge); background: var(--ui-panel);
  box-shadow: inset 0 0 0 4px #fffdf2, inset 0 0 0 5px #c9c3a085, 0 7px 0 #859988, 0 20px 42px #163e3b40;
  border-radius: 30px; color: var(--ui-ink);
}
.comet-home-screen { padding-bottom: max(38px, env(safe-area-inset-bottom)); }
.comet-home-top { align-items: flex-start; }
.comet-brand {
  display: flex; gap: 10px; align-items: center; letter-spacing: .13em;
  font: 900 clamp(24px, 6vw, 34px)/1.2 system-ui, sans-serif;
  color: #fff6de; text-shadow: 0 2px 0 #496958, 0 4px 0 #264e45, 0 7px 14px #1a474b55;
}
.comet-brand::before { width: 39px; height: 39px; filter: drop-shadow(0 3px 0 #316052); }
.comet-home-card { width: min(360px, 100%); padding: 22px 24px 24px; backdrop-filter: none; }
.comet-home-kicker {
  padding: 6px 16px; border-radius: 999px; color: #295b4b; background: #e0e7ce;
  box-shadow: inset 0 2px 4px #48614826, 0 1px 0 #fff; font-size: 12px;
}
.comet-home-title { margin: 14px 0 4px; font: 750 clamp(28px, 7vw, 36px)/1.12 Georgia, serif; }
.comet-home-instruction { max-width: 250px; margin: 8px 0 18px; color: var(--ui-muted); font-size: 16px; }
.comet-home-pulse { background: linear-gradient(#edb468, #c67536); border: 1px solid #bd935c; height: 7px; width: 64px; }
.comet-hud { gap: 4px 14px; padding: 7px 9px; color: var(--ui-ink); }
.comet-hud::before {
  inset: -3px; border-radius: 24px; background: var(--ui-panel); border: 1px solid #c7bc99;
  box-shadow: inset 0 2px 0 #fffef7, 0 4px 0 #8faaa080, 0 10px 22px #1c52452b;
}
.comet-title { font-size: clamp(15px, 3.8vw, 19px); line-height: 1.3; }
.comet-score { padding: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.comet-pause { width: 48px; height: 48px; min-height: 48px; padding: 0; font-size: 0; border-radius: 16px; }
.comet-pause::before { width: 22px; height: 22px; }
.comet-progress {
  appearance: none; -webkit-appearance: none; display: block; height: 10px; margin: 8px 0 2px;
  overflow: hidden; border: 1px solid #c0cab3; border-radius: 999px; background: #d2dcc7; color: #428875;
}
.comet-progress::-webkit-progress-bar { background: #d2dcc7; box-shadow: inset 0 2px 3px #325a492e; }
.comet-progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(#7bab8f, #37715b); box-shadow: inset 0 1px 0 #b7dfb5; }
.comet-progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(#7bab8f, #37715b); }
.comet-hint { background: #fff9e9f2; color: var(--ui-ink); border: 1px solid #d2c6a9; box-shadow: inset 0 1px 0 #fff, 0 4px 14px #163e3b26; border-radius: 18px; font-size: 14px; }
.comet-hint[data-cue="release"], .comet-hint[data-cue="hold"] {
  z-index: 6; left: 20px; right: 20px; max-width: 370px; margin-inline: auto;
  background: #fff9e9f7; border: 2px solid #e89b42; color: #1f443b;
  box-shadow: inset 0 1px 0 #fff, 0 5px 0 #9e602b, 0 10px 24px #173f3947;
  font-size: clamp(15px, 4vw, 18px); line-height: 1.3; font-weight: 800;
}
.comet-result { box-sizing: border-box; width: min(370px, calc(100% - 36px)); padding: 25px 25px 29px; gap: 16px; }
.comet-result::before { display: none; }
.comet-result-emblem {
  order: -1; justify-self: center; display: grid; place-items: center; width: 66px; height: 66px;
  border-radius: 22px; border: 1px solid #dac594; color: #72572a;
  background: linear-gradient(145deg, #fffff1, #ead6a8); box-shadow: inset 0 2px 0 #fff, 0 4px 0 #c0af85, 0 7px 13px #594b2620;
}
.comet-result-emblem::before { width: 34px; height: 34px; }
.comet-result-title { font: 750 29px/1.13 Georgia, serif; }
.comet-result-text { color: var(--ui-muted); font-size: 14px; }
.comet-play:has(.comet-result:not([hidden]))::after {
  content: ''; position: absolute; inset: 0; z-index: 6; background: #153e4366; backdrop-filter: blur(4px); pointer-events: none;
}
.comet-settings-panel { padding: 25px; gap: 10px; max-height: 100%; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); }
.comet-settings-heading { gap: 12px; margin-bottom: 8px; }
.comet-settings-heading h1 { font-size: 30px; }
.comet-setting-row {
  min-height: 68px; gap: 12px; padding: 12px; border-color: #c8ceb6; border-radius: 19px;
  background: linear-gradient(145deg, #fffff6, #e8eddb); box-shadow: inset 0 2px 0 #fff, 0 3px 0 #bbc5ac;
}
.comet-setting-row > [data-icon] { display: inline-flex; align-items: center; gap: 12px; }
.comet-setting-row > [data-icon]::before { color: #416957; }
.comet-switch {
  position: relative; box-sizing: border-box; width: 78px; min-width: 78px; height: 34px; padding: 9px 31px 9px 7px;
  border: 1px solid #557762; color: #fff9e9; background: linear-gradient(#39735a, #28614e);
  box-shadow: inset 0 2px 4px #173e3b66, 0 1px 0 #fff; font-size: 11px; line-height: 14px;
}
.comet-switch::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(150deg, #fffef5, #e4dfc9); box-shadow: inset 0 1px 0 #fff, 0 2px 4px #163e3b55;
  transition: transform 120ms ease;
}
.comet-setting-row[aria-pressed="false"] .comet-switch { padding: 9px 6px 9px 30px; color: #3e5046; background: #cad2bf; border-color: #a2b09a; }
.comet-setting-row[aria-pressed="false"] .comet-switch::after { transform: translateX(-43px); }
.comet-preview-switch { min-height: 44px; padding: 8px 12px; font-size: 12px; }
@media (max-height: 600px) {
  .comet-home-screen { padding-top: 16px; padding-bottom: 20px; }
  .comet-home-card { padding: 12px 22px 16px; width: 310px; align-self: flex-end; }
  .comet-home-title { font-size: 26px; margin-top: 9px; }
  .comet-home-instruction { font-size: 14px; margin: 5px 0 10px; }
  .comet-result { max-height: calc(100% - 32px); gap: 12px; padding: 18px 23px 23px; }
  .comet-result-emblem { display: none; }
  .comet-result-title { font-size: 25px; }
  .comet-settings-panel { padding: 18px 22px 24px; gap: 8px; }
  .comet-settings-content { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .comet-button, .comet-icon-button, .comet-switch::after { transition: none; }
}

/* Production B: surface bodies are offline renders of the actual models;
   interactive glyphs use the accepted clean two-colour menu vectors. */
[data-ui-surface] {
  isolation: isolate; background: none !important; border: 0 !important;
  box-shadow: none !important; border-radius: 0 !important;
}
.comet-home-card, .comet-settings-panel, .comet-result-emblem, .comet-setting-row,
.comet-charge-value { position: relative; }
.comet-ui-surface {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  display: grid; grid-template-columns: var(--ui-slice-corner) minmax(0, 1fr) var(--ui-slice-corner);
  grid-template-rows: var(--ui-slice-corner) minmax(0, 1fr) var(--ui-slice-corner);
}
.comet-ui-surface > svg { display: block; width: calc(100% + 2px); height: calc(100% + 2px); min-width: 0; min-height: 0; overflow: hidden; margin: -1px; }
.comet-play:not(.ui-study-stage) [data-icon]::before,
.comet-settings-overlay [data-icon]::before,
.ui-study-bake-catalogue [data-icon]::before {
  content: ''; display: block;
  mask: none; -webkit-mask: none; background-color: transparent;
  background-image: var(--comet-icon);
  background-size: contain; background-position: center;
  background-repeat: no-repeat; filter: none; width: 38px; height: 38px;
}
.comet-play:not(.ui-study-stage) [data-ui-surface="jade"][data-icon]::before,
.comet-play:not(.ui-study-stage) [data-ui-surface="primary"][data-icon]::before,
.comet-play:not(.ui-study-stage) .comet-brand[data-icon]::before {
  background-image: var(--comet-icon-light);
}
.comet-play:not(.ui-study-stage) .comet-brand::before { width: 48px; height: 48px; }
.comet-play:not(.ui-study-stage) .comet-result-emblem::before { width: 48px; height: 48px; }
.comet-play:not(.ui-study-stage) .comet-icon-button { color: #fff9e9; }
.comet-play:not(.ui-study-stage) .comet-button { min-height: 60px; padding: 12px 22px 15px; gap: 8px; }
.comet-play:not(.ui-study-stage) .comet-pause { min-height: 54px; width: 54px; height: 54px; padding: 0; }
.comet-play:not(.ui-study-stage) .comet-button-secondary { color: #203f3a; }
.comet-play:not(.ui-study-stage) .comet-button:enabled:active,
.comet-play:not(.ui-study-stage) .comet-icon-button:enabled:active,
.comet-settings-overlay button:enabled:active { transform: translateY(3px) scale(.96); filter: brightness(.9); }
.comet-play:not(.ui-study-stage) .comet-button:disabled,
.comet-settings-overlay button:disabled { opacity: 1; color: #203f3a; filter: none; cursor: default; text-shadow: none; }
.comet-play:not(.ui-study-stage) .comet-button:disabled > .comet-ui-surface,
.comet-settings-overlay button:disabled > .comet-ui-surface { filter: grayscale(1) brightness(1.6); }
.comet-play:not(.ui-study-stage) .comet-button:disabled::before { filter: grayscale(1); }
[data-ui-surface]:focus-visible { outline: 3px solid #214b45; outline-offset: 4px; border-radius: 22px !important; }
[data-ui-surface][aria-busy="true"]::before {
  background: none !important; border: 3px solid currentColor; border-right-color: transparent;
  border-radius: 50%; box-sizing: border-box; animation: comet-ui-loading 1s linear infinite;
}
@keyframes comet-ui-loading { to { transform: rotate(360deg); } }
.comet-home-card[data-ui-surface] { padding: 30px 32px 32px; }
.comet-hud[data-ui-surface] { padding: 16px 20px 18px; gap: 4px 14px; }
.comet-hud[data-ui-surface]::before { display: none; }
.comet-home-kicker[data-ui-surface] { position: relative; --ui-slice-corner: 12px !important; padding: 8px 20px; }
.comet-progress-frame { position: relative; grid-column: 1 / -1; height: 14px; margin-top: 7px; --ui-slice-corner: 7px !important; }
.comet-progress-frame .comet-progress { width: calc(100% - 12px); height: 6px; margin: 3px 6px 5px; border: 0; }
.comet-result[data-ui-surface] { padding: 30px 30px 34px; gap: 14px; }
.comet-settings-panel[data-ui-surface] { padding: 30px; gap: 10px; }
.comet-setting-row[data-ui-surface] { padding: 12px 16px; min-height: 70px; }
.comet-setting-row > [data-icon] { gap: 6px; }
.comet-switch[data-ui-surface] {
  --ui-slice-corner: 15px !important; width: 78px; min-width: 78px; height: 34px;
  padding: 8px 31px 8px 8px; color: #fff9e9;
}
.comet-switch::after {
  top: 1px; right: 1px; width: 32px; height: 32px; border-radius: 0;
  background: url('../../assets/ui-material-v1/ui-atlas.png') var(--ui-knob-x) var(--ui-knob-y) / var(--ui-knob-size) var(--ui-knob-size) no-repeat;
  box-shadow: none;
}
.comet-setting-row[aria-pressed="false"] .comet-switch { color: #203f3a; padding: 8px 6px 8px 32px; }
.comet-setting-row[aria-pressed="false"] .comet-switch > .comet-ui-surface { filter: grayscale(1) brightness(1.65); }
.comet-setting-row[aria-pressed="false"] .comet-switch::after { transform: translateX(-44px); }
.comet-hint[data-ui-surface], .comet-note[data-ui-surface] { --ui-slice-corner: 20px !important; padding: 15px 24px; }
.comet-note[data-ui-surface] { --ui-slice-corner: 12px !important; }
.comet-charge-value[data-ui-surface] { --ui-slice-corner: 20px !important; }
.comet-fever-warning[data-ui-surface] { --ui-slice-corner: 12px !important; }
.comet-finger {
  position: absolute; inset: 0; background: url('../../assets/ui-material-v1/ui-atlas.png') var(--ui-hand-x) var(--ui-hand-y) / var(--ui-hand-size) var(--ui-hand-size) no-repeat;
  width: 88px; height: 88px; left: -9px; filter: drop-shadow(0 3px 2px #153e4355);
}
.comet-touch-ring { position: absolute; left: 12px; bottom: 2px; width: 46px; height: 14px; border: 3px solid #397965; border-radius: 50%; }
.comet-gesture[data-cue="release"] .comet-touch-ring { border-color: #23252b; }
@media (max-height: 600px) {
  .comet-home-card[data-ui-surface] { padding: 22px 30px 26px; }
  .comet-result[data-ui-surface] { padding: 25px 30px 28px; gap: 9px; }
  .comet-settings-panel[data-ui-surface] { padding: 25px 30px 28px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ui-surface][aria-busy="true"]::before { animation: none; border-style: dotted; }
  [data-ui-surface]:active { transform: none !important; }
}
.ui-study-bake-catalogue { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 12px; max-width: 980px; margin: 24px auto; }
.ui-study-bake-catalogue figure { display: grid; justify-items: center; gap: 6px; margin: 0; font: 12px system-ui; color: #203f3a; }
.ui-study-bake-catalogue [data-icon]::before { width: 60px; height: 60px; }

/* B icon placement: the glyph owns a column, never the label's centring. */
.comet-play:not(.ui-study-stage) .comet-result > .comet-button[data-icon] {
  justify-content: flex-start; text-align: left; min-height: 64px;
  padding: 12px 22px 15px 76px;
}
.comet-play:not(.ui-study-stage) .comet-result > .comet-button[data-icon]::before {
  position: absolute; left: 20px; top: 50%; margin-top: -22px;
  width: 44px; height: 44px;
}
.comet-play:not(.ui-study-stage) .comet-result > .comet-button:enabled:is([data-icon="play"], [data-icon="restart"], [data-icon="home"])::before {
  filter: drop-shadow(0 2px 1px rgb(17 48 42 / 28%));
}
.comet-play:not(.ui-study-stage) .comet-icon-button,
.comet-play:not(.ui-study-stage) .comet-pause,
.comet-settings-overlay .comet-icon-button { gap: 0; }
.comet-play:not(.ui-study-stage) .comet-icon-button[data-icon]::before,
.comet-play:not(.ui-study-stage) .comet-pause[data-icon]::before,
.comet-settings-overlay .comet-icon-button[data-icon]::before {
  position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px;
  width: 44px; height: 44px;
}

/* HUD/Home information pass: one ceramic language for gameplay and menu. */
.comet-home-card[data-ui-surface] {
  width: min(510px, 100%); padding: 22px 24px 25px; gap: 10px;
}
.comet-home-stats, .comet-hud-stats { margin: 0; }
.comet-home-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  width: 100%; margin-top: 2px;
}
.comet-home-stat {
  display: grid; gap: 2px; padding: 8px 12px; color: var(--ui-ink);
  border: 1px solid #c7bea0; border-radius: 15px;
  background: linear-gradient(155deg, #fffdf1, #e4ead9);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #9baa8f, 0 6px 10px #173e3921;
}
.comet-home-stat dt, .comet-hud-stat dt {
  color: var(--ui-muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.comet-home-stat dd, .comet-hud-stat dd { margin: 0; font-variant-numeric: tabular-nums; }
.comet-home-stat dd { font: 850 19px/1.1 system-ui, sans-serif; }
.comet-home-actions {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px;
  width: 100%; margin-top: 2px; pointer-events: auto;
}
.comet-home-action {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 1px;
  min-width: 0; min-height: 64px; padding: 6px 2px 7px; color: var(--ui-ink);
  font: 750 9px/1.05 system-ui, sans-serif; cursor: pointer;
}
.comet-home-action[data-icon]::before { width: 34px !important; height: 34px !important; }
.comet-home-action-copy { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comet-home-action:disabled { cursor: default; }
.comet-home-action:disabled > .comet-ui-surface { filter: saturate(.62) brightness(1.05); }
.comet-home-shop { width: min(290px, 88%); justify-self: center; pointer-events: auto; }
.comet-home-shop[data-icon]::before { width: 38px !important; height: 38px !important; }

.comet-hud[data-ui-surface] {
  grid-template-columns: 46px minmax(90px, 1fr) 46px 54px;
  grid-template-rows: 46px auto; column-gap: 9px; row-gap: 7px;
  padding: 10px 13px 13px;
}
.comet-level-badge {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: #fff9e9; background: linear-gradient(#4a8a75, #286451);
  box-shadow: inset 0 2px 1px #dffff45c, inset 0 -2px 3px #123c453d, 0 3px 0 #194b3e;
  font: 850 16px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.comet-title { grid-column: 1; grid-row: 1; }
.comet-progress-frame { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.comet-next-level-badge {
  grid-column: 3; grid-row: 1; color: var(--ui-ink);
  background: linear-gradient(#fffef4, #e5ead9); box-shadow: inset 0 2px 1px #fff, 0 3px 0 #9caa8f;
}
.comet-pause { grid-column: 4; grid-row: 1; }
.comet-hud-stats {
  grid-column: 1 / -1; grid-row: 2; display: grid;
  grid-template-columns: .85fr .85fr .95fr 1.35fr; gap: 5px;
}
.comet-hud-stat {
  min-width: 0; display: grid; gap: 1px; padding: 4px 7px 5px;
  border-radius: 9px; background: #dce6d7a8; box-shadow: inset 0 1px 2px #49614822;
}
.comet-hud-stat dd { overflow: hidden; color: var(--ui-ink); font: 850 13px/1.1 system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.comet-mode-status { color: #286451 !important; }
.comet-play[data-fever]:not([data-fever="0"]) .comet-mode-status { color: #d94f16 !important; }

@media (max-width: 430px) {
  .comet-home-screen { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
  .comet-home-card[data-ui-surface] { padding: 18px 16px 20px; gap: 8px; }
  .comet-home-title { font-size: 27px; margin-top: 8px; }
  .comet-home-instruction { margin: 3px 0 7px; font-size: 14px; }
  .comet-home-action { min-height: 58px; font-size: 8px; }
  .comet-home-action[data-icon]::before { width: 30px !important; height: 30px !important; }
  .comet-hud[data-ui-surface] { inset-inline: 8px; padding: 9px 9px 11px; column-gap: 6px; }
  .comet-hud-stats { gap: 3px; }
  .comet-hud-stat { padding-inline: 5px; }
  .comet-hud-stat dt { font-size: 8px; letter-spacing: .04em; }
  .comet-hud-stat dd { font-size: 11px; }
}

@media (max-height: 720px) {
  .comet-home-card[data-ui-surface] { padding-block: 14px 17px; gap: 5px; }
  .comet-home-kicker[data-ui-surface] { padding-block: 5px; }
  .comet-home-title { margin-top: 6px; font-size: 25px; }
  .comet-home-instruction { margin-block: 2px 5px; }
  .comet-home-action { min-height: 54px; }
  .comet-home-shop { min-height: 50px !important; }
}

/* Iteration 120 — Home is its own product screen, not gameplay HUD overlaid on Ready. */
.comet-home-screen {
  z-index: 7; display: block; padding: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(18 77 86 / 12%) 0 18%, transparent 42% 66%, rgb(18 77 86 / 38%) 100%);
}
.comet-home-top {
  position: absolute; top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right));
  display: grid; grid-template-columns: minmax(0, 1fr) 58px; align-items: start; gap: 12px;
  pointer-events: none;
}
.comet-home-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  width: min(590px, calc(100% - 4px)); margin: 0; pointer-events: none;
}
.comet-home-stat {
  min-width: 0; padding: 8px 11px 10px; border: 1px solid #d4c59c; border-radius: 18px;
  background: linear-gradient(155deg, rgb(255 253 241 / 96%), rgb(220 230 215 / 94%));
  box-shadow: inset 0 2px 0 #fff, inset 0 -2px 2px #758a7752, 0 4px 0 #8c9c82, 0 9px 18px #173e3930;
}
.comet-home-stat dt { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.comet-home-stat dd { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.comet-settings-button {
  position: relative; display: grid; place-items: center; width: 58px; height: 58px; padding: 0;
  color: #fff9e9; pointer-events: auto; cursor: pointer;
}
.comet-settings-button[data-icon]::before { position: absolute; width: 44px !important; height: 44px !important; margin: 0; }
.comet-home-instruction {
  position: absolute; left: 50%; bottom: calc(max(110px, env(safe-area-inset-bottom) + 100px) + 42px);
  width: max-content; max-width: calc(100% - 32px); transform: translateX(-50%);
  margin: 0; padding: 10px 20px 12px; color: #173d38; border: 1px solid #d2c6a9; border-radius: 999px;
  background: rgb(255 249 233 / 92%); box-shadow: inset 0 2px 0 #fff, 0 4px 0 #91a38e, 0 9px 22px #153f3a2e;
  font: 800 14px/1.15 system-ui, sans-serif; pointer-events: none;
}
.comet-home-countdown {
  position: absolute; z-index: 4; left: 50%; top: 44%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 92px; height: 92px; margin: 0; border-radius: 50%;
  color: #fff9e9; background: radial-gradient(circle at 35% 25%, #7eaf93, #286451 64%, #173f38);
  box-shadow: inset 0 3px 2px #ddffe1a3, inset 0 -5px 7px #0e373f78, 0 6px 0 #d2b972, 0 15px 28px #173e395c;
  font: 900 44px/1 Georgia, serif; text-shadow: 0 3px 0 #173f38; pointer-events: none;
}
.comet-home-countdown[hidden] { display: none; }
.comet-home-card[data-ui-surface] {
  position: absolute; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom)); display: block; width: auto; max-width: 760px;
  margin-inline: auto; padding: 12px 12px 15px; pointer-events: none;
}
.comet-home-card[data-ui-surface] > .comet-ui-surface { display: grid; }
.comet-home-actions {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 104px repeat(3, minmax(0, 1fr));
  align-items: end; gap: 5px; width: 100%; margin: 0; pointer-events: auto;
}
.comet-home-action {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 1px;
  min-width: 0; min-height: 66px; padding: 5px 2px 7px; color: #203f3a;
  font: 750 8px/1.05 system-ui, sans-serif;
}
.comet-home-action[data-icon]::before { width: 38px !important; height: 38px !important; }
.comet-home-action-copy { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comet-home-action:disabled { cursor: default; }
.comet-home-action:disabled > .comet-ui-surface { filter: saturate(.72) brightness(1.04); }
.comet-home-play-socket {
  position: relative; align-self: center; display: grid; place-items: center; width: 104px; height: 104px;
  margin-block: -42px -5px; border-radius: 50%; pointer-events: auto;
}
.comet-home-play-socket > .comet-ui-surface,
.comet-home-play > .comet-ui-surface { overflow: hidden; border-radius: 50%; }
.comet-home-play {
  position: relative; z-index: 1; display: grid; place-items: center; width: 88px; height: 88px; padding: 0;
  border: 0; border-radius: 50%; color: #fff9e9; cursor: pointer;
}
.comet-home-play[data-icon]::before { position: absolute; top: 23px; width: 48px !important; height: 48px !important; }
.comet-home-play-copy { position: absolute; bottom: 10px; z-index: 2; font: 850 9px/1 system-ui, sans-serif; text-shadow: 0 1px 1px #173f38; }
.comet-home-play:enabled:active { transform: translateY(3px) scale(.96); filter: brightness(.92); }

@media (max-width: 600px) {
  .comet-home-top { grid-template-columns: minmax(0, 1fr) 54px; gap: 7px; }
  .comet-home-stats { gap: 4px; }
  .comet-home-stat { padding: 7px 5px 8px; border-radius: 14px; text-align: center; }
  .comet-home-stat dt { font-size: 7px; letter-spacing: .02em; }
  .comet-home-stat dd { font-size: 14px; }
  .comet-settings-button { width: 54px; height: 54px; }
  .comet-home-card[data-ui-surface] { padding: 9px 5px 12px; }
  .comet-home-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) 82px repeat(3, minmax(0, 1fr)); gap: 2px; }
  .comet-home-action { min-height: 58px; padding-inline: 0; font-size: 6.7px; }
  .comet-home-action[data-icon]::before { width: 32px !important; height: 32px !important; }
  .comet-home-play-socket { width: 82px; height: 82px; margin-block: -32px -3px; }
  .comet-home-play { width: 70px; height: 70px; }
  .comet-home-play[data-icon]::before { top: 16px; width: 41px !important; height: 41px !important; }
  .comet-home-play-copy { bottom: 7px; font-size: 7px; }
  .comet-home-instruction { bottom: calc(max(92px, env(safe-area-inset-bottom) + 86px) + 28px); font-size: 12px; }
}

@media (max-width: 370px) {
  .comet-home-action-copy { display: none; }
  .comet-home-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) 78px repeat(3, minmax(0, 1fr)); }
}

/* UI-010/UI-100 TЗ composition: tower first, compact top HUD, detached bottom menu. */
.comet-hud { z-index: 6; }
.comet-hud[data-ui-surface] {
  grid-template-columns: 46px minmax(110px, 1fr) 46px 54px;
  grid-template-rows: 46px auto; width: min(680px, calc(100% - 32px));
  inset-inline: 50%; transform: translateX(-50%); padding: 0; column-gap: 10px; row-gap: 5px;
}
.comet-hud[data-ui-surface] > .comet-ui-surface { display: none; }
.comet-hud-stats {
  grid-column: 1 / 4; grid-row: 2; display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(92px, 1.4fr) minmax(72px, 1fr);
  align-items: start; gap: 8px; padding-inline: 10px;
}
.comet-hud-stat { background: none; box-shadow: none; padding: 0; text-align: center; }
.comet-hud-stat:first-child { position: relative; }
.comet-hud-stat:nth-child(1) { grid-column: 2; grid-row: 1; }
.comet-hud-stat:nth-child(2) { grid-column: 1; grid-row: 1; }
.comet-hud-stat:nth-child(3) { grid-column: 3; grid-row: 1; }
.comet-hud-stat:nth-child(4) { display: none; }
.comet-hud-stat dt { font-size: 8px; color: #2b5149; text-shadow: 0 1px 0 #fff; }
.comet-hud-stat dd { font-size: 11px; color: #173d38; text-shadow: 0 1px 0 #fff; }
.comet-hud-stat:nth-child(1) dt { display: none; }
.comet-hud-stat:nth-child(1) dd { font: 900 21px/1 Georgia, serif; color: #173d38; }

.comet-home-screen {
  z-index: 5; display: block; padding: 0;
  background: linear-gradient(180deg, transparent 0 58%, #124d5652 100%);
}
.comet-home-screen::after { background: none; }
.comet-home-top, .comet-home-kicker, .comet-home-title { display: none; }
.comet-home-card[data-ui-surface] {
  position: absolute; inset: auto max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  display: grid; justify-items: center; width: auto; max-width: 560px; margin-inline: auto;
  padding: 0; gap: 9px; text-align: center; pointer-events: none;
}
.comet-home-card[data-ui-surface] > .comet-ui-surface { display: none; }
.comet-home-instruction {
  position: absolute; bottom: calc(100% + 82px); width: max-content; max-width: calc(100vw - 40px);
  margin: 0; padding: 11px 22px 13px; color: #173d38; font: 800 15px/1.15 system-ui, sans-serif;
  border: 1px solid #d2c6a9; border-radius: 999px; background: #fff9e9eb;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #91a38e, 0 9px 22px #153f3a2e;
}
.comet-home-pulse {
  position: absolute; bottom: calc(100% + 68px); width: 58px; height: 7px; margin: 0;
}
.comet-home-stats {
  width: min(280px, 72vw); gap: 6px; margin: 0; pointer-events: none;
}
.comet-home-stat {
  padding: 4px 10px 5px; border-radius: 12px; background: #fffdf1dc;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #91a38e, 0 5px 12px #173e3921;
}
.comet-home-stat dt { font-size: 8px; }
.comet-home-stat dd { font-size: 14px; }
.comet-home-actions { width: min(520px, 100%); margin: 0; pointer-events: auto; }
.comet-home-action { min-height: 62px; }
.comet-home-shop { width: clamp(190px, 44vw, 280px); min-height: 56px !important; pointer-events: auto; }

@media (max-width: 430px) {
  .comet-hud[data-ui-surface] {
    grid-template-columns: 42px minmax(100px, 1fr) 42px 50px;
    width: calc(100% - 18px); inset-inline: 50%; padding: 0; column-gap: 7px;
  }
  .comet-level-badge { width: 40px; height: 40px; }
  .comet-hud-stats { gap: 4px; padding-inline: 5px; }
  .comet-home-card[data-ui-surface] { padding: 0; gap: 7px; }
  .comet-home-stats { display: none; }
  .comet-home-action { min-height: 58px; }
  .comet-home-instruction { bottom: calc(100% + 68px); font-size: 14px; padding: 10px 18px 12px; }
  .comet-home-pulse { bottom: calc(100% + 56px); }
}

@media (max-height: 720px) {
  .comet-home-card[data-ui-surface] { padding: 0; gap: 5px; }
  .comet-home-instruction { bottom: calc(100% + 52px); }
  .comet-home-pulse { bottom: calc(100% + 42px); }
  .comet-home-stats { display: none; }
  .comet-home-action { min-height: 52px; }
  .comet-home-shop { min-height: 48px !important; }
}

/* Iteration 121 — large mobile navigation with flat, legible symbols. */
.comet-home-top { display: grid; }
.comet-home-stats { display: grid; width: min(590px, calc(100% - 4px)); }
.comet-home-stat {
  min-height: 54px; box-sizing: border-box; padding: 8px 6px 9px;
  border: 1px solid #baa575; border-radius: 15px;
  background: linear-gradient(155deg, #fffef6 0%, #fff8df 50%, #e3dfc6 100%);
  box-shadow: inset 0 3px 1px #fff, inset 2px 0 1px #fffdf4, inset 0 -3px 2px #b4ad89,
    0 4px 0 #8c8e70, 0 6px 0 #596d57, 0 10px 13px #163e3945;
}
.comet-home-stat dt { font: 750 9px/1.15 system-ui, sans-serif; white-space: normal; overflow: visible; color: #446054; }
.comet-home-stat dd { margin-top: 4px; font: 900 16px/1.1 system-ui, sans-serif; color: #193e35; }
.comet-home-stat:nth-child(n+2) { display:grid; align-content:center; justify-items:center; text-align:center; }
.comet-home-stat:nth-child(n+2) dt,.comet-home-stat:nth-child(n+2) dd { width:100%; text-align:center; }
.comet-home-card[data-ui-surface] {
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-width: 530px;
  padding: 12px 10px 16px; border-radius: 30px;
}
.comet-home-card[data-ui-surface] > .comet-ui-surface { display: grid; }
.comet-home-actions {
  width: 100%; grid-template-columns: minmax(0, 1fr) 122px minmax(0, 1fr);
  grid-template-rows: repeat(3, 60px); align-items: center; column-gap: 8px; row-gap: 6px;
}
.comet-home-action {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  min-height: 60px; padding: 0; gap: 3px; opacity: 1;
  color: #214c41; font: 750 11px/1.1 system-ui, sans-serif; text-shadow: none;
}
.comet-home-action:disabled { opacity: 1; filter: none; }
.comet-home-action::before {
  content: ''; position: static; display: block; width: 40px; height: 40px;
  background: var(--comet-menu-icon) center / contain no-repeat;
  mask: none; -webkit-mask: none; pointer-events: none;
}
.comet-home-action-copy { display: block; overflow: visible; white-space: normal; text-align: center; }
.comet-home-action:nth-child(1) { grid-column: 1; grid-row: 1; }
.comet-home-action:nth-child(2) { grid-column: 1; grid-row: 2; }
.comet-home-action:nth-child(3) { grid-column: 1; grid-row: 3; }
.comet-home-action:nth-child(5) { grid-column: 3; grid-row: 1; }
.comet-home-action:nth-child(6) { grid-column: 3; grid-row: 2; }
.comet-home-action:nth-child(7) { grid-column: 3; grid-row: 3; }
.comet-home-play-socket {
  grid-column: 2; grid-row: 1 / 4; width: 122px; height: 122px; margin: 0;
  border-radius: 50%; background: linear-gradient(140deg, #fff8d0, #d9b961 60%, #80612a);
  box-shadow: 0 3px 1px #fff7dd, 0 7px 0 #a48b4d, 0 15px 20px #3154424d;
}
.comet-home-play-socket > .comet-ui-surface, .comet-home-play > .comet-ui-surface { display: none; }
.comet-home-play {
  width: 110px; height: 110px; border: 2px solid #fff5cb; border-radius: 50%;
  background: radial-gradient(ellipse at 35% 12%, #ffe0a0 0%, #ffad39 24%, #fa7615 62%, #dc4b08 100%);
  box-shadow: inset 0 4px 2px #fff0caa6, inset 0 -6px 4px #b34213a6,
    0 6px 0 #a93f17, 0 8px 0 #fff3bd;
}
.comet-play:not(.ui-study-stage) .comet-home-play[data-icon]::before {
  top: 18px; left: 50%; transform: translateX(-50%); width: 54px !important; height: 54px !important;
  background: #fffdf0; mask: var(--comet-icon) center / contain no-repeat;
  -webkit-mask: var(--comet-icon) center / contain no-repeat; filter: drop-shadow(0 2px 0 #a6432066);
}
.comet-home-play-copy { bottom: 16px; font: 900 16px/1 system-ui, sans-serif; text-shadow: 0 2px 0 #983d2780; }
.comet-play[data-menu-style="jade"] .comet-home-play {
  background: radial-gradient(ellipse at 35% 12%, #bdffe4 0%, #51c69d 24%, #148d69 62%, #06614e 100%);
  box-shadow: inset 0 4px 2px #edffe8a6, inset 0 -6px 4px #034f4699, 0 6px 0 #0a5141, 0 8px 0 #fff3bd;
}
.comet-play[data-menu-style="jade"] .comet-home-play-copy { text-shadow: 0 2px 0 #064e39; }
.comet-menu-candidates {
  position: absolute; top: 92px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; padding: 4px; background: #fffaf0ed; border-radius: 14px; pointer-events: auto;
  box-shadow: 0 3px 10px #164a3c33; white-space: nowrap;
}
.comet-menu-candidates a { padding: 8px 12px; border-radius: 10px; color: #214c41; font: 750 12px/1 system-ui,sans-serif; text-decoration: none; }
.comet-menu-candidates a[aria-current] { background: #285c51; color: #fffbed; }
.comet-menu-candidates a:focus-visible, .comet-home-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.comet-home-instruction {
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 242px); font-size: 13px;
}
@media (max-width: 600px) {
  .comet-home-stats { display: grid; }
  .comet-home-top { left: 10px; right: 10px; gap: 8px; }
  .comet-home-stat dt { font-size: 9px; }
  .comet-home-stat dd { font-size: 15px; }
}
@media (max-height: 720px) {
  .comet-home-stats { display: grid; }
  .comet-home-actions { grid-template-rows: repeat(3, 53px); row-gap: 4px; }
  .comet-home-action { min-height: 53px; }
  .comet-home-action::before { width: 34px; height: 34px; }
  .comet-home-instruction { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 211px); }
  .comet-menu-candidates { top: 85px; }
}
@media (max-width: 350px) {
  .comet-home-stat dd { font-size: 12px; white-space: normal; overflow: visible; text-overflow: clip; }
  .comet-home-actions { grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1fr); column-gap: 4px; }
  .comet-home-play-socket { width: 108px; height: 108px; }
  .comet-home-play { width: 98px; height: 98px; }
  .comet-home-play[data-icon]::before { top: 14px; width: 48px !important; height: 48px !important; }
  .comet-home-play-copy { font-size: 14px; }
  .comet-home-action { font-size: 10px; }
}

.comet-home-profile {
  position: absolute; z-index: 3; top: max(81px, calc(env(safe-area-inset-top) + 69px)); left: max(14px, env(safe-area-inset-left));
  display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 2px solid #fff9dd;
  border-radius: 50%; pointer-events: auto; cursor: pointer; color: #fff8df;
  background: radial-gradient(circle at 30% 22%, #77bba3, #286d5e 62%, #15483e);
  box-shadow: inset 0 3px 2px #e6ffe7a8, inset 0 -5px 5px #0d473e99, 0 4px 0 #b4a776, 0 9px 18px #153c3a70;
}
.comet-home-profile svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.comet-home-profile[data-photo="true"] svg { display: none; }
.comet-home-profile-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.comet-home-profile:active { transform: translateY(2px); }
.comet-profile-overlay {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 18px;
  box-sizing: border-box; background: #153e4380; backdrop-filter: blur(7px); font-family: system-ui, sans-serif;
}
.comet-profile-panel {
  position: relative; width: min(390px, 100%); padding: 27px 20px 22px; box-sizing: border-box;
  border: 2px solid #fff8d9; border-radius: 28px; color: #1d453d;
  background: linear-gradient(145deg, #fffdf0, #e8f1df 72%, #c9dfcc);
  box-shadow: inset 0 3px 1px #fff, inset 0 -5px 6px #93b49c80, 0 8px 0 #839b80, 0 24px 50px #123c3a77;
}
.comet-profile-close { position: absolute; top: 8px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%;
  color: #fff8e9; background: #236555; font: 800 29px/1 system-ui, sans-serif; cursor: pointer; }
.comet-profile-hero { display: flex; align-items: center; gap: 15px; padding: 16px 24px 22px 0; min-width: 0; }
.comet-profile-hero > div { min-width: 0; }
.comet-profile-avatar { display: grid; place-items: center; flex: 0 0 76px; width: 76px; height: 76px; overflow: hidden;
  border: 3px solid #fff9e0; border-radius: 50%; background: radial-gradient(circle at 35% 24%, #91d4c3, #2c786b 65%, #194940);
  box-shadow: inset 0 3px 3px #fff9, 0 4px 0 #a89561, 0 8px 15px #24463c66; cursor: pointer; }
.comet-profile-avatar::before { content: '✦'; color: #fff8dc; font: 900 34px/1 Georgia, serif; }
.comet-profile-avatar[data-photo="true"]::before { display: none; }
.comet-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comet-profile-hero h1 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font: 900 22px/1.12 system-ui, sans-serif; }
.comet-profile-hero p { margin: 6px 0 0; font: 700 12px/1.3 system-ui, sans-serif; color: #567568; }
.comet-profile-avatar-hint, .comet-profile-entry-hint { margin: -14px 0 16px; color: #47695d;
  font: 700 11px/1.35 system-ui,sans-serif; }
.comet-profile-entry-hint { margin: 0 0 13px; padding: 9px 11px; border-radius: 12px;
  background: #fff3ca; color: #605024; }
.comet-profile-entry-hint[hidden] { display: none; }
.comet-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0 0 19px; }
.comet-profile-stats > div { min-width: 0; padding: 11px 4px; border: 1px solid #c9bd94; border-radius: 14px; text-align: center;
  background: #fffdf0; box-shadow: inset 0 2px 1px #fff, 0 3px 0 #a4ae8c; }
.comet-profile-stats dt { font: 750 11px/1.2 system-ui, sans-serif; }
.comet-profile-stats dd { overflow: hidden; margin: 5px 0 0; text-overflow: ellipsis; font: 900 19px/1.1 system-ui, sans-serif; }
.comet-profile-account { width: 100%; min-height: 50px; border: 2px solid #fff9df; border-radius: 16px; color: #fffbed;
  background: linear-gradient(150deg, #5ca98d, #1b755b 70%, #155241); box-shadow: inset 0 3px 1px #aaf0ca, 0 5px 0 #134d40;
  font: 850 14px/1.2 system-ui, sans-serif; cursor: pointer; margin-top: 9px; }
.comet-profile-account.secondary { background: linear-gradient(150deg, #f7eac9, #d6c396); color: #31594b; box-shadow: inset 0 3px 1px #fff, 0 5px 0 #8b997d; }
.comet-profile-conflict { margin: 14px 0 4px; padding: 13px; border: 1px solid #cbb376; border-radius: 16px;
  background: #fff5d7; color: #4b452e; box-shadow: inset 0 2px 2px #fff9; }
.comet-profile-conflict[hidden] { display: none; }
.comet-profile-conflict p { margin: 0 0 10px; font: 750 13px/1.4 system-ui, sans-serif; }
.comet-profile-edit { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-bottom: 8px; }
.comet-profile-edit input { min-width: 0; padding: 0 12px; border: 1px solid #9cae95; border-radius: 13px; background: #fffdf2; color: #1d453d; font: 700 15px/1.3 system-ui,sans-serif; }
.comet-profile-edit button { min-height: 48px; padding: 0 12px; border: 1px solid #fff9df; border-radius: 13px; background: #e5ac55; color: #2f493f; font: 800 12px/1.1 system-ui,sans-serif; }
.comet-profile-feedback { min-height: 18px; margin: 10px 2px 0; color: #31594b; font: 700 12px/1.3 system-ui,sans-serif; }
.comet-profile-privacy-options { display: block; margin: 10px auto 0; padding: 6px 12px; border: 0;
  background: transparent; color: #31594b; text-decoration: underline; font: 700 12px/1.3 system-ui,sans-serif; cursor: pointer; }
.comet-profile-privacy-options[hidden] { display: none; }

/* Iteration122: accepted amber palette; two composition candidates. */
.comet-home-stat:first-child { display: grid; place-items: center; }
.comet-home-stat:first-child dt { display: none; }
.comet-home-stat:first-child dd { margin: 0; }
.comet-home-shortcuts {
  position: absolute; top: max(196px, 21%); left: 18px; right: 18px;
  display: flex; justify-content: space-between; pointer-events: none;
}
.comet-home-shortcuts .comet-home-action {
  width: 76px; min-height: 78px; padding: 8px 4px; border-radius: 22px;
  background: linear-gradient(145deg,#fffff3,#ece4c5); border: 1px solid #b7ad83;
  box-shadow: inset 0 3px 1px #fff, inset 0 -3px 2px #d1c59c, 0 4px 0 #7c8c6c, 0 8px 14px #25473833;
  pointer-events: auto;
}
.comet-home-actions { grid-template-rows: repeat(2, 62px); }
.comet-home-actions > .comet-home-action:nth-child(1) { grid-column: 1; grid-row: 1; }
.comet-home-actions > .comet-home-action:nth-child(2) { grid-column: 1; grid-row: 2; }
.comet-home-actions > .comet-home-action:nth-child(4) { grid-column: 3; grid-row: 1; }
.comet-home-actions > .comet-home-action:nth-child(5) { grid-column: 3; grid-row: 2; }
.comet-home-play-socket { grid-row: 1 / 3; }
.comet-home-instruction { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 177px); }
.comet-menu-candidates { top: 132px; z-index: 12; }
.comet-hud[data-ui-surface] {
  box-sizing: border-box; top: max(12px, env(safe-area-inset-top));
  width: min(580px, calc(100% - 20px)); padding: 12px 12px 14px;
  grid-template-columns: 38px minmax(32px, 1fr) 38px 46px;
  grid-template-rows: 42px auto; column-gap: 6px; row-gap: 8px;
}
.comet-hud[data-ui-surface] > .comet-ui-surface { display: grid; }
.comet-hud .comet-level-badge { width: 36px; height: 36px; font-size: 16px; }
.comet-hud .comet-pause { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; }
.comet-hud-stats {
  grid-column: 1 / 5; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);
  padding: 6px 3px 0; border-top: 1px solid #acb39b; gap: 5px;
}
.comet-hud-stat dt { font: 750 9px/1.2 system-ui,sans-serif; letter-spacing: .02em; }
.comet-hud-stat dd { font: 850 15px/1.2 system-ui,sans-serif; margin-top: 2px; }
.comet-hud-stat:nth-child(1) dt { display: block; }
.comet-hud-stat:nth-child(1) dd { font: 900 22px/1.1 system-ui,sans-serif; }
.comet-hud-stat .comet-score { justify-self: stretch; width: auto; text-align: center; }
.comet-play[data-layout="b"] .comet-home-actions {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) 112px minmax(0,1fr) minmax(0,1fr);
  grid-template-rows: 108px; column-gap: 3px;
}
.comet-play[data-layout="b"] .comet-home-actions > .comet-home-action { grid-row: 1; font-size: 9px; align-self: end; }
.comet-play[data-layout="b"] .comet-home-actions > .comet-home-action:nth-child(1) { grid-column: 1; }
.comet-play[data-layout="b"] .comet-home-actions > .comet-home-action:nth-child(2) { grid-column: 2; }
.comet-play[data-layout="b"] .comet-home-actions > .comet-home-action:nth-child(4) { grid-column: 4; }
.comet-play[data-layout="b"] .comet-home-actions > .comet-home-action:nth-child(5) { grid-column: 5; }
.comet-play[data-layout="b"] .comet-home-play-socket { grid-column: 3; grid-row: 1; width: 112px; height: 112px; transform: translateY(-8px); }
.comet-play[data-layout="b"] .comet-home-play { width: 100px; height: 100px; }
.comet-play[data-layout="b"] .comet-home-instruction { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 160px); }
.comet-play[data-layout="b"] .comet-hud[data-ui-surface] {
  padding: 11px 12px 13px; border-radius: 28px !important;
  border: 1px solid #d9d1ae !important;
  background: linear-gradient(145deg,#fffdf0,#e4e6cf) !important;
  box-shadow: inset 0 3px 1px #fff, inset 0 -3px 2px #b9c2a5, 0 5px 0 #6b8770, 0 9px 16px #20473c33 !important;
}
.comet-play[data-layout="b"] .comet-hud[data-ui-surface] > .comet-ui-surface { display: none; }
.comet-play[data-layout="b"] .comet-hud-stats { border: 0; padding-top: 0; }
.comet-play[data-layout="b"] .comet-hud-stat {
  border-radius: 13px; padding: 5px 2px; background: #d1ddc6;
  box-shadow: inset 0 2px 3px #718e6f44, 0 1px 0 #fff;
}
.comet-play[data-layout="b"] .comet-menu-candidates { top: 146px; }
@media(max-width:350px) {
  .comet-home-shortcuts { left: 12px; right: 12px; }
  .comet-home-shortcuts .comet-home-action { width: 68px; }
  .comet-play[data-layout="b"] .comet-home-actions { grid-template-columns: minmax(0,1fr) 108px minmax(0,1fr); grid-template-rows: repeat(2,62px); }
  .comet-play[data-layout="b"] .comet-home-actions > .comet-home-action { font-size: 10px; align-self: center; }
  .comet-play[data-layout="b"] .comet-home-actions > .comet-home-action:nth-child(1) { grid-column: 1; grid-row: 1; }
  .comet-play[data-layout="b"] .comet-home-actions > .comet-home-action:nth-child(2) { grid-column: 1; grid-row: 2; }
  .comet-play[data-layout="b"] .comet-home-actions > .comet-home-action:nth-child(4) { grid-column: 3; grid-row: 1; }
  .comet-play[data-layout="b"] .comet-home-actions > .comet-home-action:nth-child(5) { grid-column: 3; grid-row: 2; }
  .comet-play[data-layout="b"] .comet-home-play-socket { grid-column: 2; grid-row: 1 / 3; width: 108px; height: 108px; transform: none; }
  .comet-play[data-layout="b"] .comet-home-play { width: 98px; height: 98px; }
  .comet-play[data-layout="b"] .comet-home-instruction { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 177px); }
}

/* Iteration124: selected sketch1 HUD, with sketch2's side charge.
   The FTUE release ellipse is a ball-contact cue, not the charge meter. */
.comet-menu-candidates { display: none; }
.comet-play[data-layout] .comet-hud[data-ui-surface] {
  padding: 0; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  grid-template-rows: 44px auto; row-gap: 12px;
  pointer-events: none;
}
.comet-play[data-layout] .comet-hud[data-ui-surface] > .comet-ui-surface { display: none; }
.comet-play[data-layout] .comet-hud-stats {
  grid-column: 1 / 5; display: block; padding: 0; border: 0; margin: 0;
}
.comet-play[data-layout] .comet-hud-stat {
  background: none; box-shadow: none; border-radius: 0; padding: 0;
}
.comet-play[data-layout] .comet-hud-stat:not(:first-child),
.comet-play[data-layout] .comet-hud-stat:first-child dt { display: none; }
.comet-play[data-layout] .comet-hud-stat:first-child dd {
  margin: 0; font: 900 28px/1.15 system-ui,sans-serif; color: #173d38;
  text-shadow: 0 1px 0 #fffde8, 0 0 5px #fffde8;
}
.comet-play[data-layout] .comet-pause { pointer-events: auto; }
.comet-play {
  --charge-side-x: min(calc(100% - 80px - env(safe-area-inset-right)), calc(50% + 180px));
  --charge-side-y: clamp(156px, 52%, calc(100% - 112px));
}
.comet-charge[data-lesson="false"] {
  box-sizing: border-box; width: 64px; height: 64px;
  left: var(--charge-side-x) !important; top: var(--charge-side-y) !important;
  transform: none; z-index: 5; filter: drop-shadow(0 3px 3px #1a493c55);
}
.comet-fever-warning {
  left: calc(var(--charge-side-x) + 32px) !important;
  top: var(--charge-side-y) !important; z-index: 5;
}

/* Long translated labels stay within their own tap target at mobile widths. */
.comet-home-action { min-width: 0; }
.comet-home-action-copy {
  display: block; max-width: 100%; min-width: 0;
  overflow: visible; text-overflow: clip; white-space: normal;
  overflow-wrap: anywhere; word-break: normal; hyphens: auto;
  text-align: center; line-height: 1.12;
}
.comet-home-stat dt {
  overflow-wrap: anywhere; hyphens: auto; text-overflow: clip;
}
.comet-home-action[data-long-label="true"] { font-size: 9px; gap: 1px; }
.comet-home-action[data-long-label="true"]::before {
  width: 32px; height: 32px;
}

/* The Settings grid must shrink before long translated text is wrapped. */
.comet-settings-panel[data-ui-surface] {
  min-width: 0; grid-template-columns: minmax(0, 1fr);
}
.comet-settings-content {
  box-sizing: border-box; min-width: 0; width: 100%;
  grid-template-columns: minmax(0, 1fr);
}
.comet-setting-row[data-ui-surface] {
  box-sizing: border-box; min-width: 0; width: 100%; overflow: hidden;
}
.comet-setting-row > span:first-child {
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
}
.comet-setting-row > [data-icon]::before { flex: 0 0 auto; }
.comet-setting-action small {
  flex: 0 1 40%; min-width: 0; max-width: 40%; overflow-wrap: anywhere;
}
.comet-setting-row .comet-switch { flex: 0 0 78px; }

/* Home identity and level: one top row, with the level by the start cue. */
.comet-home-top { left: max(132px, env(safe-area-inset-left) + 122px); }
.comet-home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.comet-home-stats .comet-home-stat:first-child { display: grid; align-content: center; justify-items: center; }
.comet-home-stats .comet-home-stat:first-child dt { display: block; }
.comet-home-stats .comet-home-stat:first-child dd { margin-top: 4px; }
.comet-home-profile {
  top: max(14px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  display: flex; justify-content: flex-start; gap: 5px; width: 116px; height: 54px;
  padding: 4px 7px 4px 4px; box-sizing: border-box; border-radius: 28px;
}
.comet-home-profile svg, .comet-home-profile-photo { flex: 0 0 42px; width: 42px; height: 42px; }
.comet-home-profile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fffbea; font: 800 11px/1.15 system-ui,sans-serif; text-align: left; }
.comet-home-level-anchor {
  position: absolute; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 244px);
  transform: translateX(-50%); pointer-events: none;
}
.comet-home-level-anchor .comet-home-stat { min-height: 34px; padding: 7px 17px; border-radius: 999px; }
.comet-home-level-anchor .comet-home-stat dt { display: none; }
.comet-home-level-anchor .comet-home-stat dd { margin: 0; white-space: nowrap; font-size: 16px; }
.comet-wallet-badge {
  position: absolute; z-index: 8; top: max(76px, calc(env(safe-area-inset-top) + 66px));
  right: max(12px, env(safe-area-inset-right)); display: inline-flex; align-items: center;
  gap: 7px; min-width: 58px; padding: 5px 11px; border: 1px solid #ffe4a0;
  border-radius: 999px; color: #fff7d8; background: linear-gradient(135deg, #254f49e8, #176455e8);
  box-shadow: 0 3px 10px #143c3d70, inset 0 1px 0 #ffffff77;
  font: 800 13px/1.2 system-ui, sans-serif; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.comet-wallet-badge::before { content: '✦'; color: #ffd56f; font-size: 19px; line-height: .8; }
.comet-wallet-gain { position: absolute; right: 10px; bottom: 100%; color: #fff9c9;
  font: 900 18px/1 system-ui,sans-serif; text-shadow: 0 2px 4px #285047;
  white-space: nowrap; animation: comet-wallet-gain 1.1s ease-out both; }
@keyframes comet-wallet-gain { from { opacity: 0; transform: translateY(12px) scale(.6); } 25% { opacity: 1; transform: translateY(0) scale(1.18); } to { opacity: 0; transform: translateY(-24px) scale(1); } }
.comet-play[data-screen="win"] .comet-wallet-badge,
.comet-play[data-screen="fail"] .comet-wallet-badge,
.comet-play[data-screen="pause"] .comet-wallet-badge { display: none; }
.comet-wallet-earned { animation: comet-wallet-earned .9s ease-out; }
@keyframes comet-wallet-earned {
  0% { transform: scale(1); filter: brightness(1); }
  36% { transform: scale(1.22); filter: brightness(1.65); }
  100% { transform: scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) { .comet-wallet-earned, .comet-wallet-gain { animation: none; } }
.comet-result > :is(.comet-rewarded-x2, .comet-rewarded-continue, .comet-rewarded-skip) {
  position: relative; min-height: 55px; border: 2px solid #ffdf89;
  border-radius: 19px; color: #fffbed; text-align: left;
  background: linear-gradient(155deg, #ffb94e, #e5701c 72%, #be501b);
  box-shadow: inset 0 2px 0 #fff8, 0 5px 0 #8d4621, 0 10px 20px #263b3650;
  font: 900 14px/1.15 system-ui,sans-serif; letter-spacing: .01em;
  text-shadow: 0 1px 2px #6c351e;
  animation: comet-reward-button-pulse 1.8s ease-in-out infinite;
}
.comet-result > .comet-rewarded-continue { border-color: #dbfff2; background: linear-gradient(155deg, #5bb99c, #238875 72%, #176754); box-shadow: inset 0 2px 0 #fff8, 0 5px 0 #155246, 0 10px 20px #263b3650; }
.comet-result > :is(.comet-rewarded-x2, .comet-rewarded-continue, .comet-rewarded-skip):disabled { animation: none; opacity: .65; }
.comet-x2-confirmed { display: block; color: #a74617; font: 900 24px/1.1 Georgia,serif; text-shadow: 0 1px 0 #fff5cc; }
.comet-x2-confirmed[hidden] { display: none; }
.comet-x2-confirmed-enter { animation: comet-x2-burst .7s cubic-bezier(.18,.89,.32,1.2) both; }
@keyframes comet-reward-button-pulse { 50% { filter: brightness(1.13); transform: scale(1.025); } }
@keyframes comet-x2-burst { from { opacity: 0; transform: scale(.55); } 55% { opacity: 1; transform: scale(1.24); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .comet-result > :is(.comet-rewarded-x2, .comet-rewarded-continue, .comet-rewarded-skip), .comet-x2-confirmed-enter { animation: none; } }
.comet-play:not(.ui-study-stage) .comet-result > :is(.comet-rewarded-x2, .comet-rewarded-continue, .comet-rewarded-skip) {
  color: #fffbed; text-shadow: 0 1px 2px #6c351e;
}
.comet-play:not(.ui-study-stage) .comet-result > :is(.comet-rewarded-x2, .comet-rewarded-continue, .comet-rewarded-skip)[data-icon]::before {
  background-image: var(--comet-icon-light);
}
.comet-reward-burst {
  position: fixed; z-index: 10000; left: 50%; top: 38%; transform: translateX(-50%);
  pointer-events: none; padding: 11px 24px; border: 2px solid #fff0a3;
  border-radius: 999px; color: #fffce4; background: linear-gradient(135deg, #f8aa35, #c65d17);
  box-shadow: 0 5px 0 #864520, 0 12px 28px #183f4077, inset 0 1px 0 #fff9;
  font: 900 25px/1.15 system-ui, sans-serif; white-space: nowrap;
  text-shadow: 0 2px 2px #713c1b; animation: comet-reward-burst 1.7s ease-out both;
}
.comet-reward-burst[data-x2="true"] { top: 28%; padding: 14px 22px; border-width: 3px; font-size: clamp(22px, 6vw, 30px); background: linear-gradient(135deg,#ffca58,#ef8122 60%,#b74e17); animation-duration: 2.5s; }
@keyframes comet-reward-burst {
  0% { opacity: 0; transform: translate(-50%, 28px) scale(.65); }
  24% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  65% { opacity: 1; transform: translate(-50%, -16px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58px) scale(.92); }
}
@media (prefers-reduced-motion: reduce) { .comet-reward-burst { animation: none; opacity: 1; } }
@media (max-width: 600px) {
  .comet-home-top { left: max(132px, env(safe-area-inset-left) + 122px); }
  .comet-home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 350px) {
  .comet-home-top { left: max(104px, env(safe-area-inset-left) + 94px); }
  .comet-home-profile { width: 92px; }
  .comet-home-profile svg, .comet-home-profile-photo { flex-basis: 38px; width: 38px; height: 38px; }
  .comet-home-profile-name { font-size: 9px; }
}