:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#eef3fc;background:#0d1424;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 48% -10%,#24375a 0,#111a2e 38%,#0d1424 80%);min-height:100vh}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #79dcff;outline-offset:3px}button:disabled{opacity:.42;cursor:not-allowed}.hidden{display:none!important}.app{max-width:1160px;margin:auto;min-height:100vh;padding:0 28px;display:flex;flex-direction:column}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff14}.brand{display:flex;align-items:center;gap:12px;letter-spacing:.14em}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border:1px solid #7ce2fc;color:#7ce2fc;transform:rotate(45deg);font-size:27px;border-radius:9px}.brand-mark::first-letter{transform:rotate(-45deg)}.brand strong{display:block;font-size:17px}.brand small{display:block;font-size:10px;color:#8294b2;letter-spacing:.2em;margin-top:3px}.top-actions{display:flex;gap:10px;align-items:center}.icon-button,.text-button{border:1px solid #34435e;background:#1a2740;color:#dbe9fb;border-radius:10px;height:38px;min-width:38px;padding:0 10px}.text-button{font-size:12px;font-weight:800;letter-spacing:.08em}main{flex:1}.hero{max-width:760px;margin:66px auto 30px;text-align:center}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.22em;font-weight:800;color:#73d6ef}.hero h1{font-size:clamp(40px,7vw,74px);line-height:1.05;letter-spacing:-.055em;margin:18px 0 16px}.hero p{font-size:18px;line-height:1.55;color:#a7b7cf;max-width:540px;margin:0 auto 28px}.hero-actions{display:flex;justify-content:center;gap:12px}.primary,.secondary{border-radius:12px;min-height:48px;padding:11px 24px;font-weight:800;border:1px solid transparent;transition:transform .15s,background .15s}.primary{background:#7ce6ee;color:#102333;box-shadow:0 8px 25px #1bb5c126}.primary:hover:not(:disabled){background:#affaff;transform:translateY(-2px)}.secondary{background:#1b2a44;color:#e3eeff;border-color:#354966}.secondary:hover:not(:disabled){background:#263957}.small{min-height:38px;padding:8px 15px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:50px auto 26px}.mode-card{min-height:134px;text-align:left;border:1px solid #32425d;background:#19263e;border-radius:16px;padding:18px;color:#edf6ff;transition:transform .15s,border .15s}.mode-card:hover{transform:translateY(-3px);border-color:#69cbdc}.mode-icon{display:grid;place-items:center;width:29px;height:29px;background:#29435c;color:#7ee3ee;border-radius:8px;font-weight:900;margin-bottom:10px}.mode-card strong,.mode-card small{display:block}.mode-card small{color:#93a5c0;line-height:1.4;margin-top:5px}.difficulty{display:flex;align-items:center;justify-content:center;gap:16px;color:#9cacc5;font-size:13px}.segmented{display:flex;background:#18243a;border:1px solid #344460;border-radius:10px;padding:3px}.segmented button{background:transparent;border:0;color:#a7b8d1;padding:9px 14px;border-radius:8px;font-size:12px;font-weight:800}.segmented button.active{background:#344f69;color:#f1ffff}footer{display:flex;align-items:center;justify-content:center;gap:10px;color:#71849f;font-size:12px;padding:23px 0}.link-button{background:none;border:0;color:#7bdce9;text-decoration:underline;text-underline-offset:3px;padding:5px}.game{padding:28px 0 30px}.game-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.game-heading h1{font-size:31px;margin:4px 0 0;letter-spacing:-.04em}.status-strip{display:flex;background:#18253d;border:1px solid #354660;border-radius:14px;margin-bottom:18px;max-width:730px}.status-strip>div{padding:11px 22px;flex:1;border-right:1px solid #354660}.status-strip>div:last-child{border:0}.status-strip small{display:block;text-transform:uppercase;font-size:10px;letter-spacing:.13em;color:#92a4bf}.status-strip strong{display:block;font-size:17px;margin-top:3px}.game-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.75fr);gap:20px;align-items:start}.board-panel,.control-panel{background:#18253c;border:1px solid #34445f;border-radius:18px;box-shadow:0 20px 55px #050b1a40}.board-panel{overflow:hidden}.board-head{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:#21324d;border-bottom:1px solid #384a66;color:#b7c8df;font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:800}.secret-code{display:flex;gap:7px}.secret-dot{width:20px;height:20px;border-radius:6px;background:#364b67;display:grid;place-items:center;color:#a8bdd5;letter-spacing:0;font-size:13px}.board{padding:8px 16px}.row{display:flex;align-items:center;gap:14px;padding:7px 8px;border-bottom:1px solid #ffffff0d;min-height:49px}.row:last-child{border:0}.row.current{background:#25405b;border-radius:10px}.row-number{width:23px;color:#6d83a0;font-size:11px;font-weight:700}.row-pegs{display:flex;gap:9px;flex:1}.peg{width:30px;height:30px;border-radius:50%;background:#2a3b55;border:2px solid #425674;box-shadow:inset 0 2px 4px #0a142b7a;position:relative}.peg.filled{border-color:#ffffff4d;box-shadow:inset -4px -5px 7px #0004,0 2px 7px #0005}.peg.filled:after,.palette-btn:after,.draft-slot.filled:after{content:attr(data-symbol);position:absolute;inset:0;display:grid;place-items:center;color:#0d1a26;font-size:13px;font-weight:900;text-shadow:0 1px 1px #fff8}.feedback{display:grid;grid-template-columns:repeat(2,9px);gap:4px;width:22px}.feedback i{width:9px;height:9px;border-radius:50%;border:1px solid #455974;background:#26374f}.feedback i.exact{background:#8df3ef;border-color:#8df3ef}.feedback i.color{background:#f5b96a;border-color:#f5b96a}.control-panel{padding:22px;position:sticky;top:14px}.control-head h2{font-size:24px;letter-spacing:-.03em;margin:7px 0}.control-head p{font-size:13px;color:#96a9c3;line-height:1.5;margin:0 0 19px}.draft{display:flex;justify-content:center;gap:10px;margin-bottom:24px}.draft-slot{height:49px;width:49px;border:2px dashed #61738c;border-radius:50%;background:#22334d;color:#a9bad0;display:grid;place-items:center;position:relative;font-size:20px}.draft-slot.active{outline:2px solid #80e5ee;outline-offset:3px}.draft-slot.filled{border:2px solid #ffffff5c;box-shadow:inset -5px -6px 10px #0004}.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:17px;background:#111e32;border-radius:12px;margin-bottom:18px}.palette-btn{height:42px;width:42px;border:2px solid #ffffff5b;border-radius:50%;position:relative;box-shadow:inset -4px -5px 8px #0005;transition:transform .1s}.palette-btn:hover{transform:scale(1.12)}.control-actions{display:flex;gap:10px}.control-actions .primary{flex:1}.control-panel>.link-button{display:block;margin:13px auto 0}.hint-text{min-height:20px;color:#b8cce4;font-size:12px;line-height:1.4;text-align:center}.feedback-key{border-top:1px solid #394a64;margin-top:16px;padding-top:15px;display:flex;flex-direction:column;gap:8px;font-size:12px;color:#a8b9cf}.feedback-key>div{display:flex;align-items:center;gap:9px}.key-dot{display:inline-block;width:11px;height:11px;border-radius:50%}.key-dot.exact{background:#8df3ef}.key-dot.color{background:#f5b96a}.modal-backdrop{position:fixed;inset:0;background:#070d1dcc;display:grid;place-items:center;padding:18px;z-index:20;backdrop-filter:blur(7px)}.modal{width:min(100%,510px);max-height:90vh;overflow:auto;background:#1a2942;border:1px solid #53708d;border-radius:20px;padding:30px;position:relative;box-shadow:0 28px 80px #0009}.modal-close{position:absolute;right:17px;top:13px;background:none;border:0;color:#afc4dc;font-size:29px}.modal h2{font-size:30px;letter-spacing:-.04em;margin:8px 0 18px}.modal p,.modal li{color:#c2d0e1;line-height:1.6;font-size:14px}.modal ul{padding-left:21px}.modal-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.modal-actions .primary,.modal-actions .secondary{min-height:43px}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat-card{border:1px solid #3c506d;background:#223450;border-radius:12px;padding:13px}.stat-card strong{display:block;font-size:24px}.stat-card small{color:#a4b7d0}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#dffcff;color:#142e3d;border-radius:9px;padding:11px 17px;opacity:0;pointer-events:none;transition:.2s;z-index:30;max-width:calc(100vw - 30px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:760px){.app{padding:0 14px}.topbar{height:68px}.brand strong{font-size:13px}.brand small{font-size:8px}.hero{margin:40px auto 18px}.hero p{font-size:15px}.mode-grid{margin-top:32px;gap:8px}.mode-card{padding:12px;min-height:121px}.mode-card strong{font-size:12px}.mode-card small{font-size:10px}.difficulty{flex-wrap:wrap;gap:8px}.game{padding-top:19px}.game-heading h1{font-size:25px}.game-layout{grid-template-columns:1fr;gap:14px}.control-panel{position:static;order:-1;padding:17px}.control-head h2{font-size:20px}.control-head p{margin-bottom:12px}.draft{margin-bottom:15px}.palette{padding:10px;margin-bottom:13px}.feedback-key{display:none}.board{padding:6px}.row{padding:5px 7px}.status-strip>div{padding:9px 11px}.status-strip strong{font-size:15px}}@media(max-width:390px){.brand-mark{width:32px;height:32px}.top-actions{gap:5px}.icon-button,.text-button{height:34px;min-width:34px;padding:0 6px}.hero-actions .primary,.hero-actions .secondary{padding:10px 14px}.mode-grid{grid-template-columns:1fr 1fr}.mode-card:first-child{grid-column:1/-1;min-height:80px}.mode-card{min-height:100px}.draft-slot{height:44px;width:44px}.palette-btn{width:39px;height:39px}}

body{min-width:0}button{min-height:44px}.feedback i.exact{border-radius:1px;transform:rotate(45deg)}.feedback i.color{border-radius:50%}button:focus-visible{outline:3px solid #f6c865;outline-offset:3px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.key-dot.exact{border-radius:2px;transform:rotate(45deg)}

.game-layout>*{min-width:0}.status-strip>div{min-width:0}.status-strip small{overflow-wrap:anywhere}.draft{flex-wrap:wrap}.control-actions{flex-wrap:wrap}.control-actions button{min-width:0}.board-head{flex-wrap:wrap;gap:10px}.row-pegs{min-width:0}@media(max-width:350px){.game-layout{grid-template-columns:minmax(0,1fr)}.row{gap:5px}.row-pegs{gap:5px}.row-pegs .peg{width:25px;height:25px;flex-shrink:0}.board-head{padding:14px}.status-strip>div{padding:9px 6px}}


@media(max-width:350px){.topbar{flex-wrap:wrap;gap:12px;height:auto;padding:14px 0}.top-actions{margin-left:auto}}