/* Shared identity: COLORUSH remains one word at all viewport sizes. */
dialog.welcome-dialog{container-type:inline-size}
.welcome-dialog .welcome-logo{display:flex;justify-content:center;white-space:nowrap;font-size:clamp(30px,12.3vw,62px);font-size:clamp(30px,15cqi,62px);line-height:1.1;letter-spacing:-.07em;animation:logo-float 4s ease-in-out infinite;transform-origin:center}
.welcome-dialog .welcome-logo span{display:inline-block}
.welcome-dialog .welcome-logo span:last-child{color:var(--accent);animation:logo-rush 4s ease-in-out infinite}
.welcome-orbit i{animation:color-bounce 2.8s ease-in-out infinite;will-change:transform}
.welcome-orbit i:nth-child(2){animation-delay:-.7s}.welcome-orbit i:nth-child(3){animation-delay:-1.4s}.welcome-orbit i:nth-child(4){animation-delay:-2.1s}
@keyframes logo-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes logo-rush{0%,65%,100%{transform:translateX(0)}75%{transform:translateX(4px) skewX(-5deg)}85%{transform:translateX(-2px)}}
@keyframes color-bounce{0%,100%{transform:translateY(0) scale(.9)}50%{transform:translateY(-12px) scale(1.12)}}
/* Appearance changes surfaces only. The four gameplay colors and pressed effects stay intact. */
:root[data-appearance=light]{color-scheme:light;--bg:#eef1f6;--surface:#fff;--line:#adb8c7;--ink:#152134;--muted:#48596d;--accent:#315f13}
[data-appearance=light] body{background:var(--bg);color:var(--ink)}
[data-appearance=light] dialog,[data-appearance=light] dialog.welcome-dialog{background:var(--surface);color:var(--ink);border-color:var(--line)}
[data-appearance=light] .welcome-logo,[data-appearance=light] .about-logo{color:var(--ink)}
[data-appearance=light] .primary{color:#fff;background:var(--accent)}
[data-appearance=light] .secondary,[data-appearance=light] .icon-button,[data-appearance=light] .mode-picker,[data-appearance=light] .practice-option,[data-appearance=light] .audio-settings,[data-appearance=light] .results-grid>div,[data-appearance=light] .result-extra,[data-appearance=light] .mission-item,[data-appearance=light] .save-score input{background:var(--bg);color:var(--ink);border-color:var(--line)}
[data-appearance=light] .welcome-tagline,[data-appearance=light] .welcome-dialog .eyebrow,[data-appearance=light] .welcome-dialog .fineprint,[data-appearance=light] .legal-links a,[data-appearance=light] .welcome-instructions,[data-appearance=light] .welcome-instructions summary{color:var(--muted)}
[data-appearance=light] .board-wrap{background:#dbe2eb}
.settings-group{border:1px solid var(--line);border-radius:14px;margin:16px 0;padding:12px;text-align:left}
.settings-group legend{padding:0 8px;font-weight:700}.settings-group label{display:flex;gap:10px;align-items:center;padding:10px 0;min-height:44px;font-size:15px}
.settings-group input{accent-color:var(--accent);width:20px;height:20px}
[data-contrast=true]{--muted:var(--ink)}[data-contrast=true] button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
[data-reduced-motion=true] *,[data-reduced-motion=true] *::before,[data-reduced-motion=true] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
#orientation-dialog{text-align:center;max-width:420px}#orientation-dialog::backdrop{background:#101319f5}.rotate-phone{font-size:64px;color:var(--accent)}
.board-wrap,.board-wrap *{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:none}
@media(prefers-reduced-motion:reduce){.welcome-logo,.welcome-logo span,.welcome-orbit i{animation:none!important}}
[data-appearance=light] .shell{background:var(--bg)}
[data-appearance=light] .modal-copy,[data-appearance=light] .rule,[data-appearance=light] .outcome,[data-appearance=light] .about-intro,[data-appearance=light] .about-creator span,[data-appearance=light] .about-details dt,[data-appearance=light] .ranking-row p{color:var(--muted)}
[data-appearance=light] .level b,[data-appearance=light] .remaining-wrap small,[data-appearance=light] .footer b{color:var(--ink)}
[data-appearance=light] .about-creator,[data-appearance=light] .save-score,[data-appearance=light] .stat-box,[data-appearance=light] .ranking-modes button{background:var(--bg);color:var(--ink);border-color:var(--line)}
[data-appearance=light] .flash-pill{color:#f4f6fa}[data-appearance=light] .flash-pill small{color:#c6cfdd}
[data-appearance=light] .impact-toast{color:#f4f6fa}
[data-appearance=light] .mission-toast-heading{color:#d9ff6b}
[data-appearance=light] button:focus-visible{outline-color:var(--ink)}
[data-contrast=true] .modal-copy,[data-contrast=true] .rule,[data-contrast=true] .mode-help,[data-contrast=true] .fineprint,[data-contrast=true] .welcome-tagline{color:var(--ink)}
.dot .finger-icon{width:46%;height:46%}
dialog{touch-action:pan-y pinch-zoom}#restart{margin-bottom:16px}
.power-notice{white-space:normal;overflow-wrap:anywhere;height:auto;min-height:16px}

/* Flow layout reserves a separate 48px column for the pause gear. */
.pause-heading{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:12px;align-items:start;margin-bottom:14px}
.pause-heading .modal-title{margin-bottom:0;overflow-wrap:anywhere}
.pause-heading .icon-button,.tutorial-heading .icon-button{width:48px;height:48px;min-width:48px;color:var(--ink)}
.pause-heading .icon-button svg{width:23px;height:23px}
/* Bombs and multitouch inherit the SAME .dot background: var(--dot).
   Contact feedback belongs to the symbol, never a background color/filter. */
.dot.linked:not(.hit){opacity:1;filter:none}
.dot.linked.held .finger-icon{transform:translate(-50%,-50%) scale(.88);filter:drop-shadow(0 0 2px #fff)}
.tutorial-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.tutorial-heading .eyebrow{margin:0;letter-spacing:1px}.tutorial-close{font-size:28px}
.tutorial-pair{display:flex;justify-content:center;gap:32px;margin:24px 0 16px;pointer-events:none;user-select:none}
.tutorial-contact{position:relative;width:min(94px,30vw);padding-bottom:62px}
.tutorial-contact>.dot{position:relative;width:100%;height:auto;aspect-ratio:1}
.demo-finger{position:absolute;left:27%;top:22%;width:64%;height:auto;opacity:0;animation:demo-touch 4.5s infinite}
.demo-finger .finger-icon{width:100%;height:auto;filter:drop-shadow(0 2px 3px #0006)}
.tutorial-contact:nth-child(2) .demo-finger{animation-name:demo-touch-second}
.demo-step{position:absolute;bottom:0;left:-8px;right:-8px;text-align:center;font-size:13px;font-weight:700;color:var(--ink)}
.tutorial-caption{font-size:14px;line-height:1.5;color:var(--muted);text-align:center;margin:0 0 20px}
.tutorial-storage:empty{display:none}
@keyframes demo-touch{0%,8%{opacity:0;transform:translateY(18px)}18%,72%{opacity:1;transform:translateY(0)}84%,100%{opacity:0;transform:translateY(18px)}}
@keyframes demo-touch-second{0%,32%{opacity:0;transform:translateY(18px)}42%,72%{opacity:1;transform:translateY(0)}84%,100%{opacity:0;transform:translateY(18px)}}
[data-reduced-motion=true] .demo-finger{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.demo-finger{opacity:1;transform:none}}
.dot.linked.wrong{animation-name:wrong-contact}
@keyframes wrong-contact{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* Game Lab is isolated from player settings; native dialog keeps focus contained. */
#game-lab{width:min(680px,calc(100vw - 24px));max-height:90dvh;padding:20px;overflow:auto;box-sizing:border-box}
.lab-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.lab-heading h2{margin:0}
#game-lab details{border-top:1px solid var(--muted);padding:12px 0}#game-lab summary{cursor:pointer;font-weight:750;min-height:32px}
.lab-field{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,35%);gap:8px;padding:10px 0;align-items:center}.lab-field small{grid-column:1/-1;color:var(--muted);overflow-wrap:anywhere}
.lab-field input,.lab-presets input,.lab-presets select{box-sizing:border-box;min-width:0;width:100%;min-height:44px;border:1px solid var(--muted);border-radius:8px;padding:8px;color:var(--ink);background:var(--surface,#1b222d);font:inherit}
.lab-field input[type=checkbox]{width:24px;justify-self:end}.lab-presets{display:grid;gap:10px;margin:12px 0}.lab-import{display:grid;gap:8px}#game-lab [role=status]{min-height:20px;overflow-wrap:anywhere}
.record-banner{margin:0 0 10px;padding:10px 14px;border:1px solid var(--accent);border-radius:12px;font-size:15px;font-weight:800;color:var(--ink);background:var(--surface)}
.record-banner[hidden]{display:none}.record-banner.record-hot{background:var(--accent);color:#101319;font-size:17px}
#pro-message{min-height:20px;font-size:13px;font-weight:700;color:var(--ink);margin:6px 0;overflow-wrap:anywhere}
#restart.replay-primary{width:100%;min-height:68px;font-size:clamp(20px,6vw,28px);font-weight:900;letter-spacing:.025em;margin:12px 0 8px;box-shadow:0 6px 0 #0003}
.replay-context{margin:0 0 18px;line-height:1.45;color:var(--muted);font-size:14px}.record-celebration{border:2px solid var(--accent);border-radius:14px;padding:12px;color:var(--ink);font-weight:850;text-align:center;animation:record-glow 700ms ease-out 2}
@keyframes record-glow{50%{box-shadow:0 0 calc(20px * var(--celebration,1)) var(--accent)}}
@media(max-width:360px){#game-lab{padding:14px}.lab-field{grid-template-columns:minmax(0,1fr) 85px}}

@media(max-height:600px){.record-banner{padding:5px 9px;margin:0;font-size:12px}.record-banner.record-hot{font-size:13px}#pro-message{font-size:11px;margin:0;min-height:14px}}
/* Hidden Lab entry targets accept rapid taps without double-tap zoom. */
.brand,.welcome-logo,.pause-heading h2{touch-action:manipulation}

/* Stable welcome viewport: content scrolls without resizing the outer card. */
dialog.welcome-dialog{height:min(680px,calc(100dvh - 36px));min-height:0;scrollbar-width:none;-ms-overflow-style:none;overflow-y:auto;overflow-x:hidden}
dialog.welcome-dialog::-webkit-scrollbar{display:none;width:0;height:0}
.welcome-dialog .mode-help{height:3em;min-height:3em;overflow:auto;scrollbar-width:none;margin:10px 0;line-height:1.5;text-align:left;touch-action:pan-y}
.welcome-dialog .mode-help::-webkit-scrollbar{display:none}

/* Notices use the existing footer line; no overlay intersects the playing board. */
.power-notice{position:relative;height:16px;min-height:16px;max-height:16px;white-space:nowrap;overflow:visible}
.feedback-lane{position:absolute;inset:0;pointer-events:none;isolation:isolate}
.feedback-lane *{pointer-events:none}
.feedback-lane .record-banner,.feedback-lane #pro-message,.feedback-lane .mission-toast,.feedback-lane #impact-toast{
 position:absolute;inset:0;margin:0;padding:0 2px;width:100%;max-width:none;height:16px;min-height:0;
 border:0;border-radius:0;background:var(--bg);box-shadow:none;transform:none;
 color:var(--accent);font-size:13px;line-height:16px;font-weight:800;text-align:center;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.feedback-lane .record-banner{z-index:0}
.feedback-lane #pro-message{z-index:2;display:flex;justify-content:center;align-items:center;gap:8px}
.feedback-lane #pro-message[hidden],.feedback-lane .record-banner[hidden]{display:none}
.feedback-lane #pro-message strong{font:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 10px #a54eff55}
.feedback-lane #pro-message small{font:inherit;flex-shrink:0;color:var(--ink)}
.feedback-lane #pro-message small:empty{display:none}
.feedback-lane #pro-message[data-kind=multi]{color:var(--ink)}
.feedback-lane #pro-message[data-kind=multi] small{color:var(--accent)}
.feedback-lane #pro-message[data-kind=record]{color:var(--accent)}
.feedback-lane .mission-toast{z-index:3}
.feedback-lane #impact-toast{z-index:4;color:var(--ink)}
.feedback-lane #impact-toast strong,.feedback-lane #impact-toast span{display:inline;font:inherit}
.feedback-lane #impact-toast span{margin-left:6px}
#pro-message.celebrate,.feedback-lane .mission-toast:not(.hidden){animation:notice-in .18s ease-out both}
#score{display:inline-block}
#score.score-pop{animation:score-pop .32s ease-out}
@keyframes notice-in{from{opacity:0;filter:brightness(1.6)}to{opacity:1;filter:none}}
@keyframes score-pop{50%{transform:scale(1.16);color:var(--accent);text-shadow:0 0 12px #d9ff6b66}}
#bonuses{display:flex;gap:3px;max-width:55%;overflow:hidden;align-items:center}
.bonus-chip{display:inline-flex;align-items:center;white-space:nowrap;padding:0 5px;border-radius:8px;background:linear-gradient(135deg,#433168,#234f65);border:1px solid #b498ec;color:#fff!important;font-size:10px;line-height:1.2;box-shadow:inset 0 1px 0 #ffffff35}
.welcome-dialog .welcome-tagline{font-size:16px;margin:12px 0 20px}
.welcome-dialog .welcome-instructions{margin:14px 0}
.result-extra b{font-size:clamp(28px,8vw,42px)}
.result-times>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.result-times>summary::before{content:'+';margin-right:10px;color:var(--accent)}
.result-times[open]>summary::before{content:'−'}
@media(prefers-reduced-motion:reduce){#score.score-pop,#pro-message.celebrate,.feedback-lane .mission-toast{animation:none}}
[data-reduced-motion=true] #score.score-pop,[data-reduced-motion=true] #pro-message.celebrate,[data-reduced-motion=true] .mission-toast{animation:none}