:root{color-scheme:dark;--bg:#090d1b;--panel:#111729;--panel2:#161e34;--border:rgba(169,182,230,.13);--muted:#8b98b6;--white:#f5f6ff;--cyan:#4ce1ff;--purple:#a17bff;--lime:#c2ff6e;--red:#ff648b;--gold:#ffd57a;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,#1a2442 0,#090d1b 47%,#080b16 90%);min-height:100vh;color:var(--white);-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.background-orb{pointer-events:none;position:fixed;width:24rem;height:24rem;border-radius:50%;filter:blur(100px);opacity:.12;z-index:0}
.orb-left{background:#466bff;top:25%;left:-18rem}.orb-right{background:#9f4aff;top:60%;right:-18rem}
.app-shell{width:min(100%,670px);margin:0 auto;padding:24px 20px 28px;position:relative;z-index:1}
.site-header,.game-panel-top,.scoreboard,.board-head,.board-footer,.tray-heading,.site-footer{display:flex;align-items:center;justify-content:space-between}
.site-header{margin-bottom:38px}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand-logo{display:grid;place-items:center;background:linear-gradient(145deg,#a580ff,#56d9ff);color:#091324;border-radius:13px;width:44px;height:44px;font-size:29px;font-weight:900;box-shadow:0 0 30px #5d8cfa30}
.brand-type{display:flex;flex-direction:column;font-size:13px;letter-spacing:.16em;line-height:1.08}
.brand-type strong:first-child{color:#fff}.brand-type strong:last-child{color:#9d86f8}
.alpha-tag{font-size:10px;font-weight:800;letter-spacing:.14em;color:#a1aec9;border:1px solid var(--border);background:#11182a;border-radius:999px;padding:9px 11px;display:flex;align-items:center;gap:9px}
.signal,.dot-positive{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);display:inline-block}
.hero{text-align:center;margin-bottom:27px}.eyebrow{font-size:11px;font-weight:850;letter-spacing:.21em;color:var(--cyan);display:flex;align-items:center;justify-content:center;gap:9px}.eyebrow-line{width:24px;height:1px;background:var(--cyan)}
h1{font-size:clamp(35px,9vw,66px);line-height:1.05;margin:13px 0 10px;letter-spacing:-.065em;font-weight:950}h1 em{font-style:normal;background:linear-gradient(95deg,#7de6fc,#b88aff);background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{margin:0 auto;color:var(--muted);max-width:400px;line-height:1.5;font-size:13px}
.game-panel{border:1px solid #2b3754;background:linear-gradient(165deg,rgba(25,34,58,.96),rgba(14,19,36,.98));border-radius:23px;padding:17px;box-shadow:0 26px 80px #0008,0 0 70px #5670f20b}
.game-panel-top{gap:8px;margin-bottom:16px}.mode-switch{display:flex;padding:3px;background:#0c1223;border:1px solid #28314b;border-radius:11px;gap:3px}
.mode-button{border:0;background:transparent;color:#8393b5;font-weight:800;font-size:11px;letter-spacing:.02em;padding:9px 16px;border-radius:8px}
.mode-button.selected{background:#283656;color:#e2ecff;box-shadow:inset 0 1px #ffffff13}
.controls{display:flex;gap:7px}.icon-button{width:37px;height:37px;border:1px solid #2b3a59;border-radius:10px;color:#c2cfef;background:#18233a;font-size:24px;line-height:1}
.icon-button:hover,.mode-button:not(.selected):hover{background:#26334d}
.scoreboard{background:#0d1425;border:1px solid var(--border);border-radius:14px;padding:17px 8px;margin-bottom:15px}
.score-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.score-label{font-size:9px;letter-spacing:.14em;font-weight:800;color:#7888a9;white-space:nowrap}
.score-number{font-size:clamp(18px,5vw,28px);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.score-item:first-child .score-number{color:var(--cyan)}.score-item:last-child .score-number{color:var(--lime)}
.score-divider{width:1px;height:35px;background:#283551}
.board-wrap{position:relative;background:linear-gradient(180deg,#0b1120,#101a31);border:1px solid #2b3c5c;padding:13px;border-radius:15px;box-shadow:inset 0 0 30px #05091185}
.board-head,.board-footer{font-size:10px;letter-spacing:.105em;font-weight:800;color:#91a3c3;margin-bottom:11px}
.board-head span:first-child{display:flex;gap:7px;align-items:center}
.board-footer{margin:12px 1px 0;color:#6f82a5;font-size:9px;gap:8px}
.board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:540px;margin:auto;aspect-ratio:1/1}
.cell{border:1px solid #293858;background:linear-gradient(155deg,#192943,#172238);border-radius:8px;min-width:0;min-height:0;position:relative;display:grid;place-items:center;color:#fff;transition:background .12s ease,transform .12s ease,box-shadow .12s ease}
.cell.empty:hover,.cell.empty:focus-visible{background:#2b3b59;box-shadow:inset 0 0 0 1px #56dfff55}
.cell.filled{border-color:color-mix(in srgb,var(--spark) 55%,#182541);background:radial-gradient(circle at 45% 30%,color-mix(in srgb,var(--spark) 28%,#18233b),#142039 78%);box-shadow:inset 0 1px #ffffff12}
.spark{width:64%;height:64%;display:block;border-radius:12px;transform:rotate(45deg);border:2px solid var(--spark);background:radial-gradient(circle at 30% 28%,#fff9,var(--spark) 18%,color-mix(in srgb,var(--spark) 45%,#14213c) 80%);box-shadow:0 0 14px color-mix(in srgb,var(--spark) 70%,transparent),inset 0 0 5px #fff8}
.spark:after{content:"";position:absolute;inset:28%;border-radius:4px;border:1px solid #ffffff7c}
.cell.filled:active,.cell.empty:active{transform:scale(.92)}
.tray-region{margin-top:17px}
.tray-kicker{font-size:10px;font-weight:900;letter-spacing:.18em;color:#f4f4ff}
.tray-instruction{font-size:9px;color:#8394b6;font-weight:800;letter-spacing:.065em}
.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.tray-slot{height:76px;border-radius:13px;border:1px solid #30405d;background:linear-gradient(#19243b,#121c31);display:flex;align-items:center;justify-content:center;position:relative}
.tray-slot .spark{width:34px;height:34px}
.tray-slot.selected{border-color:#66d9f8;box-shadow:0 0 0 2px #5addff2b,0 0 22px #35d7ff17;background:#203450}
.tray-slot.used{opacity:.32;cursor:default}
.tray-slot:not(.used):hover{transform:translateY(-2px)}
.tray-slot .slot-num{position:absolute;top:7px;left:10px;font-size:10px;color:#8193b0;font-weight:800}
.hint{text-align:center;min-height:17px;margin:12px 0 0;color:#8d9db8;font-size:12px}
.pop-message{pointer-events:none;position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);color:var(--lime);font-size:clamp(18px,6vw,31px);font-weight:1000;letter-spacing:.07em;text-shadow:0 0 25px #beff7199;opacity:0;white-space:nowrap}
.pop-message.show{animation:pop .9s ease forwards}@keyframes pop{0%{opacity:0;transform:translate(-50%,-25%) scale(.7)}20%{opacity:1;transform:translate(-50%,-65%) scale(1.12)}65%{opacity:1}100%{opacity:0;transform:translate(-50%,-120%)}}
.sub-panel{margin-top:18px}.rules-card{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:15px;border:1px solid #24314c;background:#10182b}
.rules-icon{font-size:36px;color:#b68aff;line-height:1}
.rules-card h2{font-size:12px;letter-spacing:.10em;margin:1px 0 9px}.rules-card p,.analytics p{color:#899bbd;line-height:1.65;font-size:12px;margin:0}
.analytics{margin-top:11px;background:#101629;border-radius:13px;border:1px solid var(--border);padding:17px}
.analytics summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;font-weight:800;font-size:12px;color:#aebce0}
.analytics summary::-webkit-details-marker{display:none}.analytics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:18px 0}
.analytics-grid div{background:#18223a;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.analytics-grid span{color:#8f9dba;font-size:11px}.analytics-grid strong{font-size:22px;font-variant-numeric:tabular-nums}
.site-footer{color:#697994;font-size:10px;letter-spacing:.11em;font-weight:700;margin:26px 2px 5px;gap:16px}
.overlay{position:fixed;inset:0;z-index:5;background:#030713c9;backdrop-filter:blur(9px);display:grid;place-items:center;padding:18px}
.overlay[hidden]{display:none}
.modal{text-align:center;width:min(100%,370px);padding:32px 27px;background:linear-gradient(165deg,#202b4a,#101627);border:1px solid #51628d;border-radius:25px;box-shadow:0 26px 100px #000c}
.modal-symbol{font-size:48px;color:var(--purple);display:block;margin-bottom:8px}
.modal h2{font-size:32px;letter-spacing:-.04em;margin:12px 0 7px}
.result-number{font-size:60px;color:var(--cyan);font-weight:1000;letter-spacing:-.08em}
.modal-details{color:#aab9d5;margin:0 0 25px;font-size:13px}
.primary-button,.secondary-button{display:block;width:100%;border-radius:12px;padding:14px;font-weight:900;margin-top:10px}
.primary-button{background:linear-gradient(110deg,#60daf4,#ac8eff);border:0;color:#0c1326}
.secondary-button{background:#242f4b;border:1px solid #435574;color:#f2f4ff}
.modal-disclaimer{font-size:10px;color:#8a9bb7;line-height:1.5;margin:18px 0 0}
@media(min-width:650px){.app-shell{padding-top:30px}.game-panel{padding:24px}.board-wrap{padding:18px}.board{gap:6px}.cell{border-radius:10px}.tray-slot{height:83px}}
@media(max-width:400px){.app-shell{padding:17px 12px 20px}.site-header{margin-bottom:27px}.game-panel{padding:11px;border-radius:17px}.mode-button{padding:8px 11px;font-size:10px}.score-label{font-size:8px}.board-wrap{padding:8px}.board{gap:3px}.cell{border-radius:6px}.board-footer{font-size:8px}.tray-slot{height:66px}.tray-instruction{font-size:8px}.alpha-tag{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}