:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; }
body { margin: 0; min-height: 0; overflow: hidden; background: radial-gradient(70% 70% at 12% 0%, rgba(255,106,61,.09), transparent 62%), radial-gradient(65% 70% at 90% 0%, rgba(46,123,255,.08), transparent 65%), radial-gradient(70% 75% at 50% 110%, rgba(124,92,255,.1), transparent 68%), #101218; color: #f4f5f7; }
button { font: inherit; }
#app { width: min(100%, 600px); height: 100%; min-height: 0; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; overflow: hidden; }
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 49px; }
.title { text-align: center; line-height: 1.05; }
.title small { display: block; color: #8d96a8; font: 10px "Space Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.title b { display: block; margin-top: 4px; font: 700 clamp(17px, 4.8vw, 23px)/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.04em; white-space: nowrap; }
.stat { min-width: 0; }
.stat.right { text-align: right; }
.stat span, .stat b { display: block; }
.stat span { color: #8d96a8; font: 10px "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.stat b { margin-top: 3px; color: #ffcf8b; font: 700 clamp(17px, 4.5vw, 22px) "Bricolage Grotesque", sans-serif; font-variant-numeric: tabular-nums; }
.stats { width: min(100%, 450px); justify-self: center; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.stats span { min-width: 0; padding: 7px 5px 6px; text-align: center; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px rgba(255,255,255,.07); }
.stats b, .stats small { display: block; }
.stats b { color: #fff; font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; }
.stats small { margin-top: 4px; color: #8d96a8; font: 9px "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.stage { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 7px; }
.prompt { min-height: 19px; color: #c79dff; font: 700 12px "Space Mono", monospace; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.board { position: relative; width: min(100%, 450px); max-height: 100%; aspect-ratio: 1; align-self: center; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: clamp(5px, 1.5vw, 9px); padding: clamp(9px, 2vw, 13px); border: 1px solid rgba(255,255,255,.13); border-radius: 25px; background: radial-gradient(circle at 50% 5%, rgba(255,255,255,.08), transparent 43%), linear-gradient(145deg, #20242e, #151820); box-shadow: 0 18px 45px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.12); overflow: visible; }
.board::before { content: ""; position: absolute; inset: 8px; z-index: 0; border-radius: 19px; opacity: .22; background-image: radial-gradient(rgba(255,255,255,.25) 1px, transparent 1.6px); background-size: 17px 17px; pointer-events: none; }
.bloom { --delay: 0ms; position: relative; z-index: 1; min-width: 0; min-height: 0; border: 0; border-radius: 38%; padding: 0; cursor: pointer; color: #fff; background: transparent; transform: translateZ(0); touch-action: manipulation; }
.bloom.entering { animation: bloom-in .38s cubic-bezier(.18,.82,.3,1.25) both; animation-delay: var(--delay); }
.bloom::before { content: ""; position: absolute; inset: 4%; border-radius: 42% 58% 46% 54%; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.93) 0 7%, rgba(255,255,255,.3) 8% 16%, transparent 17%), radial-gradient(circle at 68% 69%, rgba(0,0,0,.18), transparent 44%), var(--color); box-shadow: 0 5px 12px rgba(0,0,0,.27), inset 0 2px 2px rgba(255,255,255,.32); transform: rotate(11deg); transition: transform .16s ease, filter .16s ease; }
.bloom::after { content: ""; position: absolute; inset: 27%; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.11), inset 0 1px 2px rgba(0,0,0,.2); }
.bloom:active::before { transform: rotate(11deg) scale(.87); filter: brightness(1.26); }
.bloom.tutorial-target::before { animation: target-pulse 1.05s ease-in-out infinite; box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(255,224,132,.7), 0 0 25px 9px rgba(255,205,103,.75); }
.bloom.clearing { pointer-events: none; animation: clear-burst .3s cubic-bezier(.3,.1,.55,1) both; animation-delay: calc(var(--order) * 24ms); }
.bloom.clearing::before { filter: brightness(1.55) saturate(1.2); }
.bloom.nova::before { background: conic-gradient(from 25deg, #fff3b2, #ffb6e5, #8deaff, #bca4ff, #fff3b2); box-shadow: 0 0 18px rgba(255,233,132,.8), inset 0 2px 3px rgba(255,255,255,.75); animation: nova-pulse 1.35s ease-in-out infinite; }
.bloom.nova::after { content: "✦"; display: grid; place-items: center; inset: 0; border: 0; border-radius: 0; box-shadow: none; color: #492a72; font-size: clamp(19px, 6vw, 34px); text-shadow: 0 1px #fff; }
.bloom.power-row::before, .bloom.power-column::before { background: linear-gradient(135deg, #ffcf8b, #ff8b6d 48%, #f4aeff); box-shadow: 0 0 15px rgba(255,154,123,.5), inset 0 2px 3px rgba(255,255,255,.65); }
.bloom.power-row::after, .bloom.power-column::after { content: "↔"; display: grid; place-items: center; inset: 0; border: 0; border-radius: 0; box-shadow: none; color: #42243f; font-size: clamp(18px, 5vw, 29px); font-weight: 900; text-shadow: 0 1px rgba(255,255,255,.8); }
.bloom.power-column::after { content: "↕"; }
.bloom.power-bomb::before { background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,.28) 8% 16%, transparent 17%), radial-gradient(circle, #ffcf8b, #ff8b6d 58%, #f4aeff); box-shadow: 0 0 18px rgba(244,174,255,.65), inset 0 2px 3px rgba(255,255,255,.7); }
.bloom.power-bomb::after, .bloom.power-prism::after { content: "✹"; display: grid; place-items: center; inset: 0; border: 0; border-radius: 0; box-shadow: none; color: #442841; font-size: clamp(18px, 5vw, 29px); font-weight: 900; text-shadow: 0 1px rgba(255,255,255,.8); }
.bloom.power-prism::before { background: conic-gradient(from 25deg, #ffcf8b, #ff8b6d, #f4aeff, #8dd9ff, #ffcf8b); box-shadow: 0 0 20px rgba(141,217,255,.6), inset 0 2px 3px rgba(255,255,255,.75); animation: nova-pulse 1.35s ease-in-out infinite; }
.bloom.power-prism::after { content: "✧"; color: #3a294b; }
.score-pop { position: absolute; z-index: 4; left: 50%; top: 45%; padding: 5px 9px; border-radius: 999px; color: #30215e; background: #fff2ad; box-shadow: 0 4px 16px rgba(0,0,0,.3); font-size: 15px; font-weight: 1000; pointer-events: none; animation: score-pop .65s cubic-bezier(.15,.8,.25,1) both; }
.hint { width: min(100%, 450px); min-height: 32px; padding: 0 5px; color: #9ba2af; font-size: 11.5px; font-weight: 650; line-height: 1.32; text-align: center; }
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 450px); justify-self: center; }
.button { min-width: 0; min-height: 42px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 0 8px; color: #e7eaf0; background: rgba(255,255,255,.07); font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .15s ease, background .15s ease; touch-action: manipulation; }
.button:active { transform: translateY(2px) scale(.98); }
.button.primary { border-color: #ffb08f; color: #2b1d2a; background: linear-gradient(135deg, #ffcf8b, #f4aeff); box-shadow: 0 4px 14px rgba(244,174,255,.18); }
.modal { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(8,10,14,.78); backdrop-filter: blur(10px); }
.modal.hidden { display: none; }
.dialog { width: min(100%, 425px); padding: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: radial-gradient(90% 80% at 50% 0%, rgba(244,174,255,.12), transparent 68%), linear-gradient(145deg, #252934, #171a21); box-shadow: 0 24px 80px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.13); text-align: center; animation: dialog-in .28s ease-out both; }
.dialog h2 { margin: 0; font-size: 26px; letter-spacing: -.04em; }
.dialog > p { margin: 8px 0 18px; color: #b8bec9; font-size: 13px; line-height: 1.45; }
.guide-steps { display: grid; gap: 8px; margin: 0 0 18px; text-align: left; }
.guide-step { display: grid; grid-template-columns: 29px 1fr; gap: 9px; align-items: center; padding: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.055); }
.guide-step b { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: #34205d; background: #ffe09a; font-size: 14px; }
.guide-step strong { display: block; font-size: 12px; }
.guide-step span { display: block; margin-top: 2px; color: #9ba2af; font-size: 11px; line-height: 1.25; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal-actions .button { padding: 0 7px; }
.power-guide { display: grid; justify-items: center; }
.power-guide-icon { width: 72px; height: 72px; display: grid; place-items: center; margin: -2px auto 14px; border-radius: 22px; color: #432742; font-size: 36px; font-weight: 900; text-shadow: 0 1px rgba(255,255,255,.8); box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 2px 3px rgba(255,255,255,.62); }
.power-guide-icon.power-line, .power-guide-icon.power-row { background: linear-gradient(135deg, #ffcf8b, #ff8b6d 48%, #f4aeff); }
.power-guide-icon.power-bomb { background: radial-gradient(circle, #ffcf8b, #ff8b6d 58%, #f4aeff); }
.power-guide-icon.power-prism { color: #3a294b; background: conic-gradient(from 25deg, #ffcf8b, #ff8b6d, #f4aeff, #8dd9ff, #ffcf8b); }
.power-guide-icon.power-nova { color: #492a72; background: conic-gradient(from 25deg, #fff3b2, #ffb6e5, #8deaff, #bca4ff, #fff3b2); }
.guide-callout { width: 100%; display: grid; gap: 3px; margin: 0 0 16px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.055); text-align: left; }
.guide-callout b { font-size: 11px; color: #ffcf8b; letter-spacing: .08em; text-transform: uppercase; }
.guide-callout span { color: #b8bec9; font-size: 12px; }
.map { max-height: min(490px, 75dvh); overflow-y: auto; display: grid; gap: 13px; text-align: left; }
.world h3 { margin: 0 0 7px; color: #ffe4a3; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.level { min-height: 52px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; color: #fff; background: rgba(255,255,255,.08); font-size: 12px; font-weight: 900; cursor: pointer; }
.level small { display: block; margin-top: 3px; color: #ffe6a3; font-size: 10px; }
.level.locked { opacity: .42; cursor: not-allowed; }
.close { width: 100%; margin-top: 14px; }
@keyframes bloom-in { from { opacity: 0; transform: translateY(-12px) scale(.55) rotate(-12deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes target-pulse { 50% { transform: rotate(11deg) scale(1.11); filter: brightness(1.2); } }
@keyframes clear-burst { 0% { opacity: 1; transform: scale(1); } 55% { opacity: 1; transform: scale(1.25) rotate(18deg); } 100% { opacity: 0; transform: translateY(-22px) scale(.15) rotate(55deg); } }
@keyframes score-pop { 0% { opacity: 0; transform: translate(-50%, 15px) scale(.65); } 22% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -55px) scale(.92); } }
@keyframes nova-pulse { 50% { transform: rotate(23deg) scale(1.1); filter: brightness(1.13); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 380px) { #app { padding-inline: 9px; gap: 7px; } .board { border-radius: 20px; gap: 4px; padding: 8px; } .title small, .stat span { font-size: 8.5px; } .title b { font-size: 16px; } .stat b { font-size: 16px; } .button { font-size: 11px; } }
@media (max-height: 680px) { #app { gap: 6px; padding-top: 8px; padding-bottom: 8px; } .top { min-height: 38px; } .stats span { padding-block: 5px; } .board { width: min(100%, 400px); max-height: 100%; } .hint { min-height: 25px; } .button { min-height: 37px; } }