@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#141526;--panel:#211f36;--panel2:#29263e;--text:#fdf8f4;--muted:#afaabd;--edge:rgba(255,232,212,.15);--gold:#ffce84;--peach:#ffad9e;--mint:#9af2c7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:"DM Sans","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid #ffdf9f;outline-offset:3px}
[hidden]{display:none!important}
::selection{background:#f4c781;color:#342336}
.ambient{position:fixed;z-index:-1;pointer-events:none;filter:blur(90px);border-radius:50%}
.glow-one{top:-320px;right:-120px;width:700px;height:700px;background:rgba(210,122,170,.13)}
.glow-two{bottom:-360px;left:-280px;width:680px;height:680px;background:rgba(101,115,224,.12)}
.shell{width:min(1260px,calc(100% - 42px));margin:0 auto}
.topbar{height:86px;border-bottom:1px solid var(--edge);display:flex;align-items:center;justify-content:space-between;gap:14px}
.nav-left,.nav-right{display:flex;align-items:center;gap:19px}
.back-link{font-size:11px;letter-spacing:1.3px;font-weight:850;color:#b4afc6;white-space:nowrap}
.back-link:hover,.footer a:hover{color:var(--gold)}
.nav-divider{height:25px;border-left:1px solid var(--edge)}
.logo{background:transparent;border:0;color:#fff4df;padding:0;display:flex;align-items:center;gap:3px;font:900 23px Outfit,sans-serif;letter-spacing:-1.1px}
.logo span:last-child{color:var(--gold)}
.logo-icon{width:36px;height:36px;display:grid;place-items:center;background:linear-gradient(135deg,#ffda91,#f19e91);color:#39283b!important;border-radius:11px;margin-right:9px;font-size:25px}
.nav-tag{color:#a9a0b8;letter-spacing:1.2px;font-size:10px;font-weight:900}
.help-button{height:35px;width:35px;background:#26243b;border:1px solid var(--edge);color:#fff0d9;border-radius:50%;font-weight:850}
.help-button:hover{background:#44334a}
.eyebrow{font:850 11px Outfit,sans-serif;letter-spacing:2.3px;color:var(--gold);margin:0}
h1,h2,h3,p{margin-top:0}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;min-height:550px;padding:60px 0}
.hero h1{font:950 clamp(45px,5.4vw,71px)/1.16 Outfit,"Malgun Gothic",sans-serif;letter-spacing:-2.1px;margin:19px 0 24px;word-break:keep-all}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-description{max-width:550px;color:#c7c1d0;line-height:2;font-size:15px;word-break:keep-all}
.hero-description strong{color:#ffdcad}
.mode-list{display:grid;gap:10px;max-width:500px;margin-top:29px}
.mode-card{display:flex;align-items:center;gap:16px;text-align:left;border:1px solid rgba(240,214,213,.19);border-radius:15px;background:#29263b;color:#fcf5f2;padding:15px 18px;transition:transform .15s,border-color .15s,background .15s}
.mode-card:hover{transform:translateY(-2px);border-color:#f0bb9e;background:#383148}
.mode-card.challenge{background:linear-gradient(115deg,#65415a,#503b5b);border-color:rgba(255,220,172,.45)}
.mode-icon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:rgba(255,217,156,.17);display:grid;place-items:center;color:#ffdfad;font-size:24px}
.mode-copy{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.mode-copy strong{font-size:16px;font-weight:850}
.mode-copy small{font-size:12px;color:#d5bbcb;line-height:1.4}
.mode-arrow{font-size:25px;color:#ffdc9a}
.home-foot{display:flex;gap:15px;flex-wrap:wrap;color:#a79baf;margin:23px 0;font-size:11px;font-weight:700}
.hero-art{min-height:380px;position:relative;display:grid;place-items:center}
.halo{position:absolute;width:370px;height:370px;border:1px solid rgba(255,210,163,.18);border-radius:50%;transform:rotate(20deg) scaleX(.82)}
.halo:before{content:"";position:absolute;inset:45px;border:1px dashed rgba(195,175,235,.15);border-radius:50%}
.sample-board{width:350px;display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:12px;background:#3a3048;border:1px solid rgba(255,232,202,.25);border-radius:23px;box-shadow:0 26px 55px rgba(0,0,0,.33);transform:rotate(-9deg)}
.sample-tile{aspect-ratio:1;display:grid;place-items:center;background:#655371;border:1px solid rgba(245,227,241,.2);border-radius:12px;font:850 28px Outfit;color:#fcf5ff}
.sample-tile:nth-child(5n+3){background:#5a566f}
.sample-tile:nth-child(4n){background:#715169}
.sample-tile.selected{background:#e7ba78;color:#3d3040;border-color:#fff3d4}
.sample-badge{position:absolute;bottom:25px;right:0;display:flex;align-items:center;gap:8px;transform:rotate(6deg);background:#fff0d3;color:#472e3c;padding:12px 18px;border-radius:13px;font:850 20px Outfit;box-shadow:0 12px 25px rgba(0,0,0,.25)}
.sample-badge strong{color:#2e8263}
.teaser{display:flex;justify-content:space-around;gap:20px;margin:0 0 65px;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:21px 15px}
.teaser div{display:flex;align-items:center;gap:12px}
.teaser span{color:var(--gold);font:900 19px Outfit}
.teaser strong{font:750 10px Outfit;letter-spacing:1.3px;color:#b0a9bd}
.game-header{display:flex;align-items:center;gap:15px;padding:28px 0 19px}
.back-button{height:46px;width:46px;flex:0 0 46px;background:#29253b;border:1px solid var(--edge);border-radius:13px;color:#fff1df;font-size:23px}
.game-header>div:nth-child(2){flex:1}
.game-header h2{font-size:25px;letter-spacing:-.6px;margin:4px 0 0}
.clock{font:950 31px Outfit;letter-spacing:-1px;min-width:95px;text-align:right;color:var(--gold)}
.clock.warning{color:#ff8f91;animation:pulse .7s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:1}to{opacity:.6}}
.game-layout{display:grid;grid-template-columns:minmax(0,745px) minmax(245px,1fr);gap:20px;align-items:start;padding-bottom:70px}
.game-panel{background:linear-gradient(140deg,#282338,#1c1b30);border:1px solid var(--edge);border-radius:20px;padding:22px;box-shadow:0 18px 55px rgba(0,0,0,.18)}
.scorebar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;align-items:stretch}
.scorebar>div{display:flex;flex-direction:column;gap:6px;padding:9px 12px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.04);min-width:0}
.scorebar span{font-size:11px;color:#bcb3c3}
.scorebar strong{font:900 35px Outfit;font-variant-numeric:tabular-nums;line-height:1.08}
.target-stat strong{color:var(--gold);font-size:49px}
.selection-stat strong{color:#e8e5ff}
.selection-stat strong.too-high{color:#ff9296}
.selection-stat strong.exact{color:var(--mint)}
.scorebar small{font-size:10px;color:#ac9db8;white-space:nowrap}
.score-stat strong{color:#fff4ea}
.meter{height:6px;background:rgba(255,255,255,.09);border-radius:99px;overflow:hidden;margin:17px 0 16px}
.meter>div{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ffc27b,#b9f0c9);transition:width .2s}
.board-caption{display:flex;align-items:center;justify-content:space-between;gap:9px;font:800 10px Outfit;letter-spacing:1.4px;color:#b3a9c1;margin-bottom:12px}
.live-dot{width:7px;height:7px;background:var(--mint);box-shadow:0 0 10px var(--mint);border-radius:50%;display:inline-block;margin-right:3px}
#boardLabel{margin-left:auto}
.number-grid{--cols:10;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:5px;touch-action:none;user-select:none;-webkit-user-select:none;position:relative}
.number-tile{display:grid;place-items:center;min-width:0;aspect-ratio:1;border-radius:8px;border:1px solid rgba(253,220,226,.16);background:#55455e;color:#fff3f1;padding:0;font:850 clamp(15px,2.3vw,25px) Outfit;box-shadow:inset 0 -3px rgba(0,0,0,.09);transition:background .1s,border-color .1s}
.number-tile:nth-child(5n){background:#504c66}
.number-tile:nth-child(7n){background:#665068}
.number-tile.zero{color:#c0b6c8;background:#373346}
.number-tile.empty{color:transparent;background:rgba(10,11,20,.22);border:1px dashed rgba(214,189,211,.075);box-shadow:none}
.number-tile.chosen{background:#d3ab7b;color:#2d2431;border-color:#ffe4ad;box-shadow:inset 0 0 0 2px rgba(255,245,196,.4)}
.number-tile.chosen.zero{background:#c7ad94;color:#392c39}
.number-tile.chosen.empty{background:rgba(228,188,134,.18);border-color:rgba(255,222,157,.5)}
.number-tile.chosen.exact{background:#a7e9c5;border-color:#d1ffdb;color:#133b31}
.number-tile.chosen.over{background:#ec9b9d;border-color:#ffd0c6;color:#57272e}
.number-tile:focus-visible{outline:2px solid var(--gold);outline-offset:0;z-index:2}
.below-board{display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:46px;padding:10px 2px;color:#c2b9c7;font-size:11px;line-height:1.6}
.waves{font:800 10px Outfit;color:#9b8b9f;white-space:nowrap}
.game-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.subtle-button{min-height:43px;border-radius:10px;background:#353044;color:#f5e5ef;border:1px solid rgba(248,213,224,.14);font-size:12px;font-weight:850}
.subtle-button:hover{border-color:#f4d4a1;background:#44394d}
.side{display:flex;flex-direction:column;gap:13px}
.side-card{border:1px solid var(--edge);border-radius:17px;padding:24px;background:#262339}
.side-card.how{background:linear-gradient(145deg,#2c2840,#222038)}
.side-card h3{font-size:19px;margin:11px 0 16px;letter-spacing:-.5px}
.side-card p{color:#c4b5c3;font-size:12px;line-height:1.9;word-break:keep-all}
.side-card p strong{color:#ffe5b3}
.fine{font-size:10px!important;color:#978ca1!important}
.example{padding:15px;background:rgba(7,10,25,.23);border-radius:12px;display:flex;flex-direction:column;gap:8px;margin:0 0 17px}
.example-row{display:flex;align-items:center;gap:7px}
.example-row span{width:33px;height:33px;border-radius:7px;display:grid;place-items:center;background:#796076;border:1px solid rgba(255,224,201,.25);font:850 17px Outfit}
.example-row b{margin-left:auto;color:#b2f3cb;font:900 17px Outfit}
.seed-box{border:1px solid rgba(255,211,154,.23);border-radius:10px;padding:11px 12px;background:rgba(0,0,0,.14);display:flex;flex-direction:column;gap:5px;min-width:0}
.seed-box span{font:850 9px Outfit;letter-spacing:1.2px;color:#aa9dad}
.seed-box strong{font:850 13px Outfit;overflow-wrap:anywhere;color:#ffdba6}
.footer{border-top:1px solid var(--edge);padding:23px 0 35px;display:flex;justify-content:space-between;gap:10px;color:#898094;font:800 10px Outfit;letter-spacing:.7px}
.modal-layer{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(8,8,22,.84);backdrop-filter:blur(6px);padding:17px}
.modal-card{width:min(100%,480px);max-height:90vh;overflow:auto;padding:28px;border:1px solid rgba(255,225,179,.3);border-radius:22px;background:linear-gradient(145deg,#353047,#242238);box-shadow:0 25px 80px rgba(0,0,0,.45)}
.modal-card h2{font-size:28px;margin:12px 0 18px}
.modal-card ol{font-size:13px;line-height:1.85;color:#d7ccdc;padding-left:20px}
.modal-card li{margin:0 0 9px}
.primary-button,.secondary-button{border-radius:11px;min-height:46px;padding:10px 19px;font-weight:850;font-size:13px}
.primary-button{border:1px solid #ffd58b;background:#ffd58b;color:#3f2c36}
.primary-button:hover{background:#ffe7b7}
.secondary-button{border:1px solid rgba(255,242,230,.25);background:rgba(255,255,255,.04);color:#fff2e8}
.secondary-button:hover{border-color:#ffd9a6}
.rules-modal .primary-button{width:100%}
.end-card{text-align:center}
.end-icon{font-size:52px;color:var(--gold);margin-bottom:12px}
.result-score{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}
.result-score>div{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:19px}
.result-score span{font-size:12px;color:#bcb1c5}
.result-score strong{font:900 42px Outfit;color:#ffd498}
#endDescription{line-height:1.8;color:#cfc1d4;font-size:12px}
.end-buttons{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:20px}
@media(max-width:1060px){.hero{gap:25px}.game-layout{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1fr 1fr}.game-panel{max-width:790px;margin:0 auto;width:100%}}
@media(max-width:680px){
 .shell{width:calc(100% - 20px)}
 .topbar{height:66px}.nav-left,.nav-right{gap:9px}.logo{font-size:19px}.logo-icon{width:30px;height:30px;font-size:20px;margin-right:5px}.back-link{font-size:10px}.nav-tag{display:none}
 .hero{grid-template-columns:1fr;padding:43px 0 15px;min-height:0}
 .hero h1{font-size:42px;letter-spacing:-1.3px}
 .hero-description{font-size:13px;line-height:1.8}
 .mode-card{padding:12px}.mode-copy strong{font-size:14px}.mode-copy small{font-size:11px}
 .hero-art{min-height:225px;transform:scale(.7)}
 .sample-board{width:300px}.sample-tile{font-size:23px}
 .teaser{margin-bottom:30px;gap:8px;flex-wrap:wrap;padding:16px 5px}
 .teaser div{gap:5px}.teaser span{font-size:14px}.teaser strong{font-size:9px}
 .game-header{padding:19px 0 14px}
 .game-header h2{font-size:21px}.clock{font-size:27px;min-width:75px}
 .back-button{height:40px;width:40px;flex-basis:40px}
 .game-panel{padding:10px;border-radius:14px}
 .scorebar{gap:4px}.scorebar>div{padding:8px 7px}
 .scorebar span{font-size:10px}.scorebar strong{font-size:25px}
 .target-stat strong{font-size:39px}
 .scorebar small{font-size:9px;white-space:normal}
 .meter{margin:10px 0}
 .number-grid{gap:3px}
 .number-tile{font-size:clamp(13px,4.6vw,21px);border-radius:5px;box-shadow:none}
 .below-board{font-size:10px;padding:7px 3px}
 .subtle-button{font-size:10px;min-height:41px;padding:5px}
 .side{grid-template-columns:1fr}.side-card{padding:20px}
 .modal-card{padding:21px}
 .footer{font-size:9px}
}
@media(max-width:380px){.shell{width:calc(100% - 12px)}.game-panel{padding:7px}.number-grid{gap:2px}.number-tile{font-size:clamp(12px,4.3vw,17px);border-radius:4px}.scorebar strong{font-size:22px}.target-stat strong{font-size:33px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}