:root { color-scheme:dark; --bg:#09101e; --card:#151f33; --card2:#1d2940; --ink:#f6f7fb; --muted:#9daac2; --stroke:#2a3650; --mint:#75eed3; --gold:#ffcf73; --violet:#aeb3ff; --rad:20px; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { min-height:100%; background:var(--bg); }
body { margin:0; min-height:100dvh; background: radial-gradient(ellipse at 50% -10%, #20254d 0%, transparent 48%), linear-gradient(165deg,#0b1426 0%,#09101e 62%,#080e1a 100%); font: 500 15px/1.3 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--ink); overscroll-behavior-y:none; }
button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }
button:focus-visible { outline:2px solid #b7ffec; outline-offset:3px; }
.ambient { position:fixed; z-index:0; border-radius:100%; pointer-events:none; filter:blur(56px); opacity:.18; }
.ambient-a { width:260px; height:260px; background:#936cff; top:18%; left:-150px; }
.ambient-b { width:240px; height:240px; background:#26bea5; top:60%; right:-160px; }
.app { position:relative; z-index:1; width:min(100%,490px); min-height:100dvh; margin:0 auto; padding:calc(19px + env(safe-area-inset-top)) clamp(16px,4.7vw,26px) calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:16px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:47px; height:47px; flex:none; border:1px solid #445373; border-radius:15px; background:linear-gradient(140deg,#34405e,#1e2942); box-shadow:inset 0 1px 0 #ffffff2d,0 8px 18px #0003; display:grid; place-content:center; grid-template-columns:18px 18px; gap:2px; transform:rotate(-6deg); }
.brand-mark span { font-size:10px; font-weight:950; display:grid; place-items:center; background:#ffd38f; color:#2d3356; border-radius:4px; }
.brand-mark span:nth-child(2) { background:#b7bdff; }
.brand-mark span:nth-child(3) { grid-column:1 / 3; background:#7ae8ce; }
.eyebrow { color:#8698b6; letter-spacing:3px; font-size:8px; font-weight:900; margin-bottom:1px; }
.brand-title { font-size:21px; line-height:1.1; font-weight:950; letter-spacing:-.65px; white-space:nowrap; }
.brand-title strong { color:#85e8da; }
.icon-button { display:grid; place-items:center; width:45px; height:45px; border-radius:14px; border:1px solid #334058; background:#19243a; box-shadow:inset 0 1px 0 #ffffff12; }
.icon-button svg { width:23px; height:23px; }
.scoreboard { display:grid; grid-template-columns:1.18fr 1fr .96fr; gap:9px; }
.scorecard { border:1px solid #2b3852; min-width:0; overflow:hidden; border-radius:17px; background:linear-gradient(160deg,#1b2840,#151e32); padding:14px 12px 12px; position:relative; }
.main-score { border-color:#408478; background:linear-gradient(140deg,#244a50,#14383e 75%); }
.score-glint { position:absolute; top:8px; right:12px; font-size:19px; color:#9ff8dc88; }
.metric-label { font-size:9px; letter-spacing:1.3px; color:#b0bfd5; font-weight:850; white-space:nowrap; }
.metric-value { font-size:clamp(22px,6.4vw,31px); font-weight:950; line-height:1.1; letter-spacing:-1px; margin-top:6px; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.main-score .metric-value { color:#c9fff1; }
.small-sub { font-size:9px; font-weight:750; color:#8190a9; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.level-section { display:grid; gap:8px; padding:0 2px; }
.level-caption { display:flex; align-items:center; justify-content:space-between; color:#a8b6cd; font-size:10px; font-weight:850; letter-spacing:1px; }
.level-name { display:flex; align-items:center; gap:8px; }
.level-dot { display:block; width:7px; height:7px; border-radius:50%; background:#84f0d1; box-shadow:0 0 12px #84f0d1a0; }
.progress-track { height:6px; overflow:hidden; border-radius:100px; background:#26334b; }
.progress-fill { width:0%; height:100%; background:linear-gradient(90deg,#74d7cb,#a6fdba); border-radius:100px; transition:width .42s ease; }
.board-wrap { display:grid; gap:9px; }
.board-topline { display:flex; align-items:center; justify-content:space-between; padding:0 2px; }
.board-label { color:#cdd6e7; font-size:10px; font-weight:900; letter-spacing:1.5px; }
.tiny-spark { color:#7fe2cb; font-size:13px; }
.board-counter { font-size:10px; font-weight:850; letter-spacing:.5px; color:#8594ad; }
.board-shell { position:relative; border:1px solid #3c4b67; border-radius:22px; padding:9px; background:linear-gradient(160deg,#243450,#18253f); box-shadow:0 17px 46px #0307138a,inset 0 2px 0 #ffffff1c,0 2px 0 #30415d; }
.board { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); aspect-ratio:1/1; gap:7px; touch-action:manipulation; }
.cell { position:relative; min-width:0; min-height:0; border:0; border-radius:10px; background:#0d192d; display:flex; justify-content:center; align-items:center; box-shadow:inset 0 2px 4px #050b175c,0 1px 0 #ffffff0b; color:var(--ink); user-select:none; -webkit-user-select:none; padding:0; }
.cell.empty::after { content:''; width:4px; height:4px; border-radius:100%; background:#35465e; }
.cell.empty:active { background:#27475b; }
.cell.occupied { overflow:hidden; box-shadow:inset 0 2px 0 #ffffff69,inset 0 -4px 0 #00000021,0 4px 9px #02061166; background:linear-gradient(150deg,var(--top),var(--bottom)); color:var(--text); }
.cell.occupied::before { content:''; position:absolute; top:-22%; left:-22%; width:75%; height:73%; border-radius:50%; background:#ffffff35; filter:blur(16px); pointer-events:none; }
.cell .number { position:relative; text-shadow:0 1px 0 #ffffff20; font-size:clamp(16px,5.9vw,29px); font-weight:1000; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.cell .number.medium { font-size:clamp(15px,5vw,25px); }
.cell .number.long { font-size:clamp(12px,3.9vw,20px); letter-spacing:-1.4px; }
.cell.born { animation:pop-in .27s cubic-bezier(.14,1.47,.45,1) both; }
.cell.upgraded { animation:upgrade .36s cubic-bezier(.2,1.35,.4,1) both; z-index:2; }
.cell.pulse-source { outline:3px solid #86efd6; outline-offset:-3px; animation:source-pulse .75s ease-in-out infinite alternate; }
.cell.pulse-target { box-shadow:inset 0 0 0 2px #72cdbb,0 0 8px #78f1ca25; }
.cell.pulse-target::after { content:'+'; position:absolute; color:#8bf0d0; font-size:29px; font-weight:400; }
.cell.clear-target { outline:2px solid #ffdb89; outline-offset:-2px; filter:brightness(1.1); }
.cell.blocked { filter:brightness(.8); }
.board-shell.shake { animation:board-shake .25s ease; }
.burst-layer { pointer-events:none; position:absolute; inset:9px; overflow:hidden; border-radius:14px; }
.burst { position:absolute; z-index:3; width:6px; height:6px; border-radius:3px; background:var(--particle); transform:translate(-50%,-50%); animation:particle .58s ease-out forwards; }
.fusion-equation { position:absolute; top:12%; left:50%; transform:translate(-50%,-8px); background:#080f20ee; border:1px solid #ffd38888; border-radius:12px; padding:8px 10px; color:#ffe5a6; font-size:clamp(12px,3.4vw,18px); font-weight:950; letter-spacing:-.3px; white-space:nowrap; z-index:5; pointer-events:none; opacity:0; box-shadow:0 7px 26px #0009; }
.fusion-equation.show { animation:fusion-float 1s ease-out forwards; }
.chain-banner { position:absolute; top:47%; left:50%; transform:translate(-50%,-50%) scale(.7); pointer-events:none; padding:10px 22px; border-radius:14px; background:#080f20de; border:1px solid #80efdc88; color:#c1ffea; box-shadow:0 10px 30px #0009; font-weight:1000; font-size:clamp(22px,7vw,36px); letter-spacing:-1px; opacity:0; white-space:nowrap; z-index:5; }
.chain-banner.show { animation:chain-banner .78s ease both; }
.pause-shade { position:absolute; inset:9px; z-index:6; border-radius:14px; display:flex; flex-direction:column; gap:9px; align-items:center; justify-content:center; background:#0a1121e6; color:#d8e2f0; letter-spacing:4px; font-size:20px; font-weight:950; backdrop-filter:blur(8px); }
.pause-illustration { display:grid; place-items:center; width:65px; height:65px; border:2px solid #9bece0; border-radius:20px; font-size:38px; color:#9bece0; letter-spacing:0; }
.hidden { display:none !important; }
.helper-row { display:flex; align-items:center; gap:7px; min-height:26px; padding:0 4px; color:#a0adc5; font-size:11px; font-weight:650; }
.helper-icon { color:#83efcf; }
.helper-row span:nth-child(2) { flex:1; }
.move-chip { border-radius:100px; color:#81efce; background:#19433f; border:1px solid #2c7566; font-size:10px; font-weight:900; padding:3px 10px; }
.energy-strip { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:5px 10px; background:linear-gradient(110deg,#3a3327,#272b3c); border:1px solid #726345; border-radius:13px; padding:9px 12px; color:#e7d3a9; font-weight:850; font-size:11px; }
.energy-strip > div { display:flex; align-items:center; gap:8px; }
.energy-icon { color:#ffe38b; font-size:20px; }
.energy-strip strong { color:#fff2ba; font-size:17px; margin-left:4px; font-variant-numeric:tabular-nums; }
.energy-example { color:#ccb98e; font-size:10px; }
.next-panel { border:1px solid #2e3d59; background:linear-gradient(130deg,#1b2943,#172238); border-radius:18px; display:flex; align-items:center; justify-content:space-between; padding:12px 14px; gap:8px; min-width:0; }
.next-heading { min-width:0; }
.panel-title { color:#e2ebf5; font-size:10px; font-weight:900; letter-spacing:1px; }
.panel-subtitle { color:#8393ae; font-size:10px; max-width:130px; margin-top:6px; line-height:1.3; }
.queue-tiles { display:flex; align-items:center; gap:8px; flex:none; }
.queue-tile { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-weight:950; color:var(--text); background:linear-gradient(145deg,var(--top),var(--bottom)); box-shadow:inset 0 2px 0 #ffffff78,inset 0 -3px 0 #00000024,0 4px 9px #0004; }
.queue-tile.current { width:55px; height:55px; font-size:24px; border-radius:12px; }
.queue-tile.future { font-size:18px; }
.queue-tile.distant { opacity:.6; transform:scale(.85); }
.swap-btn { width:38px; height:43px; border-radius:9px; border:1px solid #547b7b; background:#24484b; color:#9df9d6; font-size:19px; font-weight:800; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; padding:0; line-height:1; gap:1px; }
.swap-btn small { color:#f8d68c; font-size:10px; font-weight:900; }
.swap-btn:disabled { opacity:.35; }
.queue-arrow { color:#7085a3; font-size:28px; font-weight:300; }
.tools-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.tool-button { min-width:0; display:flex; align-items:center; justify-content:center; gap:5px; border-radius:15px; padding:12px 5px; background:linear-gradient(160deg,#202d45,#182439); border:1px solid #3a4965; box-shadow:inset 0 1px 0 #ffffff14; text-align:left; }
.tool-button:active:not(:disabled) { transform:translateY(1px); }
.tool-button:disabled { opacity:.48; cursor:default; }
.tool-button.active { border-color:#6ce9c5; background:#1b5148; box-shadow:0 0 18px #2ee5af24; }
.tool-button .tool-icon { font-size:31px; line-height:1; color:#a0a7ff; }
.clear-button .tool-icon { color:#ffda93; }
.pulse-button .tool-icon { color:#85f3d6; }
.tool-body { display:flex; flex-direction:column; gap:4px; font-weight:900; font-size:9px; letter-spacing:.9px; }
.tool-body small { font-size:9px; color:#8296b4; font-weight:650; letter-spacing:0; }
.footer { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:auto; padding-top:1px; color:#63748c; font-size:10px; letter-spacing:.6px; }
.footer button { font-size:10px; padding:7px; border:0; background:none; color:#abbcd2; font-weight:700; }
.footer-dot { color:#5c7a82; }
.toast { pointer-events:none; position:fixed; z-index:20; bottom:calc(32px + env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,15px); width:max-content; max-width:calc(100vw - 35px); padding:11px 17px; border-radius:13px; background:#d6ffe9; color:#174538; box-shadow:0 12px 30px #0008; font-size:12px; font-weight:850; text-align:center; opacity:0; transition:opacity .22s ease,transform .22s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.modal-root { position:fixed; z-index:12; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop { position:absolute; inset:0; background:#050b18db; backdrop-filter:blur(9px); }
.modal { position:relative; z-index:1; width:min(100%,380px); border:1px solid #41516e; background:linear-gradient(150deg,#243351,#151f35); border-radius:26px; padding:29px 24px 23px; box-shadow:0 25px 90px #000c,inset 0 1px 0 #ffffff20; text-align:center; animation:modal-pop .25s ease both; }
.modal-decoration { font-size:33px; color:#8df0d3; margin-bottom:11px; }
.modal-kicker { letter-spacing:3px; font-size:10px; color:#9fb4d1; font-weight:850; }
.modal h2 { font-size:clamp(24px,8vw,33px); margin:9px 0 12px; line-height:1.1; letter-spacing:-.8px; }
.modal-content { color:#bdcadf; font-size:13px; line-height:1.65; }
.modal-content p { margin:8px 0; }
.modal-content strong { color:#eafcf8; }
.modal-content .big-number { display:block; color:#a2f7da; font-size:48px; line-height:1; font-weight:1000; margin:11px auto; }
.modal-content .stat-lines { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:15px; }
.modal-content .stat-line { display:grid; gap:4px; border:1px solid #364967; background:#1a2941; border-radius:12px; padding:12px 5px; color:#9bb0cc; font-size:10px; }
.modal-content .stat-line b { color:#edf5ff; font-size:18px; }
.modal-actions { display:grid; gap:10px; margin-top:23px; }
.modal-actions button { min-height:48px; border-radius:13px; font-weight:900; border:1px solid #4a5c7b; background:#263650; font-size:13px; }
.modal-actions button.primary { border:0; background:linear-gradient(120deg,#78ebcc,#b0f2cc); color:#113b36; box-shadow:0 8px 26px #7fecce24; }
.modal-actions button:disabled { opacity:.55; }
.modal-actions .quiet { background:none; border:0; color:#a6b4c8; min-height:32px; }
.how-step { display:flex; align-items:center; text-align:left; gap:12px; margin:10px 0; }
.how-step .step-icon { flex:none; width:43px; height:43px; border:1px solid #5a638b; background:#394765; border-radius:12px; display:grid; place-items:center; font-size:19px; color:#b4fff1; }
.how-step b { display:block; font-size:13px; color:#e8f6f4; }
.how-step small { display:block; margin-top:3px; font-size:11px; line-height:1.35; }
@keyframes pop-in { from { transform:scale(.55); opacity:.35; } to { transform:scale(1); opacity:1; } }
@keyframes upgrade { 0% { transform:scale(.92); filter:brightness(1); } 45% { transform:scale(1.19); filter:brightness(1.3); } 100% { transform:scale(1); filter:brightness(1); } }
@keyframes board-shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(3px); } 50% { transform:translateX(-3px); } 75% { transform:translateX(2px); } }
@keyframes fusion-float { 0% { opacity:0; transform:translate(-50%,-8px) scale(.85); } 16%,72% { opacity:1; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,-8px) scale(1); } }
@keyframes chain-banner { 0% { opacity:0; transform:translate(-50%,-50%) scale(.65); } 20%,70% { opacity:1; transform:translate(-50%,-50%) scale(1.04); } 100% { opacity:0; transform:translate(-50%,-58%) scale(1); } }
@keyframes particle { 0% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(180deg) scale(.5); } }
@keyframes source-pulse { to { filter:brightness(1.45); } }
@keyframes modal-pop { from { opacity:0; transform:translateY(18px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:370px) { .app { gap:12px; padding-left:13px; padding-right:13px; } .scorecard { padding:11px 9px; } .board { gap:5px; } .board-shell { padding:7px; } .queue-tiles { gap:5px; } .swap-btn { width:30px; height:38px; } .tool-button .tool-icon { font-size:24px; } .tool-body { font-size:8px; letter-spacing:0; } .tool-body small { font-size:8px; } .energy-strip { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:5px 10px; background:linear-gradient(110deg,#3a3327,#272b3c); border:1px solid #726345; border-radius:13px; padding:9px 12px; color:#e7d3a9; font-weight:850; font-size:11px; }
.energy-strip > div { display:flex; align-items:center; gap:8px; }
.energy-icon { color:#ffe38b; font-size:20px; }
.energy-strip strong { color:#fff2ba; font-size:17px; margin-left:4px; font-variant-numeric:tabular-nums; }
.energy-example { color:#ccb98e; font-size:10px; }
.next-panel { padding:10px; } .queue-tile.future { width:34px; height:34px; } .queue-tile.current { width:48px; height:48px; } .brand-title { font-size:18px; } }
@media (max-height:740px) and (min-width:375px) { .app { gap:11px; } .scorecard { padding:11px; } .board-wrap { gap:6px; } .energy-strip { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:5px 10px; background:linear-gradient(110deg,#3a3327,#272b3c); border:1px solid #726345; border-radius:13px; padding:9px 12px; color:#e7d3a9; font-weight:850; font-size:11px; }
.energy-strip > div { display:flex; align-items:center; gap:8px; }
.energy-icon { color:#ffe38b; font-size:20px; }
.energy-strip strong { color:#fff2ba; font-size:17px; margin-left:4px; font-variant-numeric:tabular-nums; }
.energy-example { color:#ccb98e; font-size:10px; }
.next-panel { padding:9px 12px; } .queue-tile.current { width:48px; height:48px; } .tools-row .tool-button { padding:8px 3px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }