@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#102332;--panel:#1a3649;--muted:#a6ccd6;--lime:#cbffab;--gold:#ffdb97;--text:#ecfcff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:290px;background:var(--bg);color:var(--text);font:15px/1.5 "DM Sans","Malgun Gothic",sans-serif;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.ambient{position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(95px);opacity:.8}.ambient-a{width:450px;height:400px;left:-230px;top:50px;background:#235d5b}.ambient-b{width:500px;height:400px;right:-270px;top:210px;background:#294a82}
.shell{max-width:1170px;margin:auto;padding:0 24px}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(193,231,238,.13)}.left-nav,.nav-right{display:flex;align-items:center;gap:17px}.back-link{font-size:12px;font-weight:800;letter-spacing:1px;color:#b5d9df}.back-link:hover{color:var(--lime)}.nav-divider{height:22px;width:1px;background:#44637a}.logo{display:flex;align-items:center;gap:2px;background:none;border:none;color:#d7ffdd;font:900 27px Outfit,sans-serif;letter-spacing:-1px}.logo span:last-child{color:#84e9c2}.logo-sign{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border-radius:9px;background:#c6fda9;color:#244f42;font-size:25px}.nav-tag{font-size:11px;letter-spacing:1px;font-weight:900;color:#91c9d0}.help-button{width:34px;height:34px;border-radius:50%;border:1px solid #487081;color:#d0f8e5;background:#214456;font-weight:900}.help-button:hover{background:#3a6666}
.screen{padding:40px 0 55px;min-height:calc(100vh - 167px)}.hero{min-height:505px;display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:28px}.eyebrow{margin:0 0 14px;font:800 11px/1.5 Outfit,sans-serif;letter-spacing:2px;color:#b8efc1;text-transform:uppercase}.eyebrow-line{display:inline-block;width:22px;height:2px;margin:0 8px 3px 0;background:#bdffad}.hero h1{font:900 clamp(42px,5.6vw,69px)/1.15 Outfit,"Malgun Gothic",sans-serif;letter-spacing:-2px;margin:8px 0 21px}.hero h1 em{font-style:normal;color:#c4ffb0}.hero-desc{font-size:16px;line-height:1.9;max-width:525px;margin:0 0 26px;color:#a6cbd5}.hero-desc strong{color:#eaffee}.mode-list{display:grid;gap:11px;max-width:490px}.mode-card{width:100%;min-height:77px;display:flex;align-items:center;gap:16px;text-align:left;padding:13px 18px;border:1px solid rgba(187,230,222,.2);border-radius:16px;background:#19384c;color:#ebfff6;transition:background .13s,transform .13s,border-color .13s}.mode-card:hover{border-color:#9dffba;background:#285164;transform:translateY(-2px)}.mode-card.featured{background:linear-gradient(120deg,#2c5c59,#274a61);border-color:rgba(183,244,183,.43)}.mode-symbol{font:900 30px Outfit;color:#c6ffa9;width:38px;text-align:center}.mode-copy{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.mode-copy strong{font-size:16px}.mode-copy small{font-size:12px;color:#b7d0d8}.mode-arrow{font-size:26px;color:#c4ffac}.hero-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:19px;color:#95bac3;font-size:11px}.hero-art{height:400px;position:relative;display:grid;place-items:center}.art-ring{position:absolute;border:1px solid rgba(140,220,188,.1);border-radius:50%}.ring-1{width:355px;height:355px}.ring-2{width:440px;height:440px}.sample-grid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:min(380px,90%);padding:13px;transform:rotate(-8deg);background:#244b5e;border:1px solid #436a72;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.3)}.sample-grid span{aspect-ratio:1;display:grid;place-items:center;background:#426b76;color:#f3fff9;border:1px solid #5c8790;border-radius:10px;font:900 24px Outfit}.sample-grid .sample-on{background:#c0ffb3;color:#25574a;border-color:#f0ffdf;box-shadow:0 0 18px #b9ffae44}.art-equation{position:absolute;right:-12px;bottom:18px;background:#d9ffb8;border:3px solid #efffd8;color:#1d533c;padding:12px 18px;border-radius:14px;box-shadow:0 17px 33px #0004;font:900 23px Outfit;transform:rotate(6deg)}.art-equation strong{display:block;color:#45836c;font:800 11px Outfit;letter-spacing:1px;text-align:center}
.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #426278;border-bottom:1px solid #426278;padding:22px 0;margin:25px 0}.stats-strip>div{display:flex;align-items:center;justify-content:center;gap:11px;border-right:1px solid #426278}.stats-strip>div:last-child{border:0}.stats-strip span{color:#acfcbe;font:900 17px Outfit}.stats-strip strong{font-size:12px;letter-spacing:1px;color:#cee7eb}.best-preview{display:flex;gap:24px;align-items:center;flex-wrap:wrap;background:#1a3949;border:1px solid rgba(180,235,213,.18);padding:22px 28px;border-radius:15px;margin:27px 0}.best-preview>div{display:flex;flex-direction:column;gap:5px;min-width:170px}.best-preview span{color:#92b9c7;font-size:12px}.best-preview strong{color:#d2ffb6;font:900 22px Outfit}.best-preview .best-note{margin-left:auto;font-size:12px}
.game-header{display:flex;align-items:center;gap:15px;margin:2px 0 23px}.back-button{border:1px solid #416779;border-radius:12px;background:#254555;color:#fff;width:42px;height:42px;font-size:24px}.game-header h2{font:900 28px Outfit;margin:0;letter-spacing:-.6px}.game-header .eyebrow{margin:0 0 3px}.clock{margin-left:auto;padding:10px 20px;border-radius:15px;background:#284554;border:1px solid #567b79;font:900 37px Outfit;color:#d3ffbe;font-variant-numeric:tabular-nums;min-width:123px;text-align:center}.clock.warning{color:#ffb4a8;border-color:#d98280;animation:timerpulse .75s ease-in-out infinite alternate}@keyframes timerpulse{to{background:#653d4e}}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;align-items:start}.play-panel{border:1px solid #496b76;padding:20px;border-radius:23px;background:linear-gradient(160deg,#235064,#172e45);box-shadow:0 20px 36px #0615223d}.scorebar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}.scorebar>div{display:flex;flex-direction:column;gap:3px;background:#14364a88;border:1px solid #6682944d;border-radius:12px;padding:12px}.scorebar span{color:#a4c7d1;font-size:12px}.scorebar strong{font:900 clamp(21px,3.1vw,34px) Outfit;color:#e9fff3;font-variant-numeric:tabular-nums}.scorebar strong.combo{color:#f7da9f}.scorebar small{font-size:10px;color:#90b4c2;line-height:1.45}.timer-meter{height:6px;border-radius:9px;background:#345266;overflow:hidden;margin:12px 0 18px}.timer-meter>div{width:100%;height:100%;background:linear-gradient(90deg,#f3e49f,#9cf3ba);transition:width .16s linear}.board-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:9px;color:#acd0d5;font:800 11px Outfit;letter-spacing:1px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#b2fd9e;margin-right:7px}.factor-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;user-select:none;-webkit-user-select:none;touch-action:manipulation}.factor-tile{aspect-ratio:1;min-width:0;padding:0;border-radius:10px;background:linear-gradient(145deg,#426b7b,#315467);border:1px solid #729ca977;box-shadow:inset 0 1px #ffffff12;color:#edfff9;font:900 clamp(17px,2.7vw,29px)/1 Outfit,sans-serif;font-variant-numeric:tabular-nums;transition:transform .09s,background .14s,border-color .14s}.factor-tile:hover{background:#517e86;border-color:#d0ffbd}.factor-tile:active{transform:scale(.91)}.factor-tile.chosen{background:#ceffb3;color:#205443;border:2px solid #fff6ce;box-shadow:0 0 0 2px #d8ffab55}.factor-tile.refilled{animation:tilepop .22s ease-out}@keyframes tilepop{from{transform:scale(.78);background:#bdffbb}to{transform:scale(1)}}.feedback-row{display:flex;gap:12px;align-items:center;justify-content:space-between;min-height:58px;margin:6px 0 8px;color:#d2edf1;font-size:12px;line-height:1.5}.seed-label{color:#86a9b6;font:800 10px Outfit;letter-spacing:.4px;white-space:nowrap}.controls{display:flex;gap:8px;flex-wrap:wrap}.subtle-button{border:1px solid #60828c;background:#2b5160;color:#d9f8ef;padding:10px 13px;border-radius:10px;font-size:12px;font-weight:800}.subtle-button:hover{background:#406976}
.info-card{border:1px solid #4b6c76a8;border-radius:17px;background:#244353;padding:21px;margin-bottom:14px;color:#b8d5dc;font-size:13px;line-height:1.8}.info-card.pale{background:#213d50}.info-card h3{font:900 20px/1.35 Outfit;margin:0 0 12px;color:#f1fff8}.info-card p{margin:0 0 13px}.info-card p:last-child{margin:0}.info-card strong{color:#e0ffbd}.info-card .card-eyebrow{color:#a1e6b8;letter-spacing:1.3px;font:850 11px Outfit}.rule-examples{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}.rule-examples span{background:#315b55;padding:7px 9px;border-radius:8px;color:#dfffc5;font:800 12px Outfit}.rule-examples .bad{background:#60454f;color:#ffd1c4}.rule-examples b{margin-left:4px}.tip-sub{color:#8db7c1!important;font-size:11px!important}
.result-screen{display:grid;place-items:center}.result-card{max-width:590px;width:100%;text-align:center;border:1px solid #588278;background:linear-gradient(165deg,#28515b,#192e46);border-radius:25px;padding:35px 24px;box-shadow:0 22px 60px #0003}.result-icon{margin:0 auto 14px;width:63px;height:63px;display:grid;place-items:center;background:#c6ffa5;color:#245642;border-radius:20px;font-size:37px}.result-card h2{margin:0 0 7px;font:900 39px Outfit}.result-card>p:not(.eyebrow){margin:0 0 9px;color:#aad2d3}.result-score{display:block;color:#ccffb5;font:900 clamp(65px,12vw,91px)/1.1 Outfit;margin:20px 0 0}.result-unit{font:800 11px Outfit;letter-spacing:3px;color:#9dc7c7}.result-substats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:25px 0}.result-substats>div{padding:13px 8px;border:1px solid #53717c;border-radius:12px;background:#193a4c;display:flex;flex-direction:column;gap:8px}.result-substats span{font-size:11px;color:#a9cbd2}.result-substats strong{font:900 22px Outfit;color:#edfff2}.result-feedback{margin:20px 0!important;font-size:14px!important}.result-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}.primary-button,.secondary-button{border-radius:12px;padding:13px 19px;font-weight:900;font-size:13px;min-height:48px}.primary-button{background:#caffaf;color:#24513e;border:1px solid #dffff1}.secondary-button{background:#31566a;color:#dcf7ef;border:1px solid #6f9697}.primary-button:hover{background:#e5ffd6}.secondary-button:hover{background:#406b7d}
.modal-layer{position:fixed;inset:0;background:#07131cbb;z-index:10;display:grid;place-items:center;padding:16px}.modal-card{background:#264358;border:1px solid #739195;box-shadow:0 25px 70px #0008;border-radius:22px;width:100%;max-width:530px;padding:25px;max-height:85vh;overflow:auto}.modal-card h2{font:900 27px Outfit;margin:0 0 13px}.modal-card ol{margin:0 0 23px;padding-left:23px;line-height:1.8;color:#dbedf0;font-size:13px}.modal-card li{margin-bottom:6px}.modal-card strong{color:#cbffb6}.footer{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;border-top:1px solid #315369;padding:22px 0 30px;font-size:11px;color:#85afbb}.footer a:hover{color:#c8ffb2}
@media(max-width:1000px){.game-layout{grid-template-columns:1fr}.game-aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.info-card{margin:0}.hero-art{height:330px}.sample-grid{width:min(320px,90%)}.art-equation{right:-3px}}
@media(max-width:680px){.shell{padding:0 14px}.topbar{height:68px}.nav-divider,.nav-tag{display:none}.logo{font-size:23px}.screen{padding:24px 0 35px}.hero{grid-template-columns:1fr;gap:2px;min-height:0}.hero h1{font-size:clamp(39px,9vw,55px);margin:5px 0 14px}.hero-desc{font-size:14px;line-height:1.8;margin-bottom:22px}.hero-art{height:275px}.art-ring.ring-1{width:250px;height:250px}.art-ring.ring-2{width:295px;height:295px}.sample-grid{width:250px;gap:5px;padding:9px}.sample-grid span{font-size:17px;border-radius:6px}.art-equation{font-size:17px;padding:7px 12px;bottom:10px;right:9%}.stats-strip{margin:12px 0;padding:16px 0}.stats-strip>div{flex-direction:column;gap:4px}.stats-strip strong{font-size:9px;text-align:center}.best-preview{padding:15px;gap:13px}.best-preview>div{min-width:110px}.best-preview strong{font-size:19px}.best-preview .best-note{margin-left:0}.game-header h2{font-size:23px}.game-header .clock{padding:8px 13px;min-width:104px;font-size:30px}.game-layout{gap:14px}.play-panel{padding:11px;border-radius:17px}.scorebar{gap:5px}.scorebar>div{padding:9px 6px}.scorebar span{font-size:10px}.scorebar strong{font-size:clamp(20px,6vw,30px)}.scorebar small{font-size:9px}.factor-board{gap:4px}.factor-tile{font-size:clamp(16px,5vw,23px);border-radius:7px}.board-label{font-size:9px}.feedback-row{font-size:11px}.game-aside{grid-template-columns:1fr}.info-card{padding:16px}.result-substats span{font-size:10px}.result-substats strong{font-size:18px}.result-card{padding:27px 13px}}
@media(max-width:355px){.factor-board{gap:3px}.factor-tile{font-size:16px}.scorebar small{display:none}.controls{gap:5px}.subtle-button{font-size:10px;padding:8px}.nav-right{gap:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}