:root{color-scheme:dark;--ink:#f7f2e8;--muted:#a9afbd;--panel:#111728;--line:#283044;--bg:#090d1a;--coral:#ff6b58;--gold:#f7bc42;--mint:#45d6a3;--violet:#9b75f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#1c2845 0,transparent 42%),var(--bg);color:var(--ink)}button{font:inherit}.shell{width:min(1080px,calc(100% - 36px));margin:auto;padding:68px 0 44px}.hero{display:flex;align-items:center;justify-content:center;gap:24px;text-align:left;margin-bottom:42px}.brand{flex:0 0 72px;height:72px;border:1px solid #39435a;border-radius:24px;display:grid;place-items:center;transform:rotate(-8deg);background:#131a2c;box-shadow:0 16px 40px #0008}.brand span{font:700 34px Georgia,serif;color:var(--mint);transform:rotate(8deg)}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--mint);font-size:.72rem;font-weight:800;margin:0 0 8px}h1,h2{font-family:Georgia,"Times New Roman",serif;margin:0;font-weight:500;line-height:1}h1{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.05em}h1 em{color:var(--gold);font-weight:500}.subtitle{margin:13px 0 0;color:var(--muted);font-size:1rem}.game{max-width:760px;margin:auto}.scorebar{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;margin-bottom:20px}.score{display:flex;flex-direction:column;text-align:center;gap:4px}.score span{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.score strong{font-size:1.7rem}.status{text-align:center;font-weight:700;color:var(--ink)}.board{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;aspect-ratio:1.6/1}.tile{border:0;min-height:130px;cursor:pointer;position:relative;overflow:hidden;transition:transform .12s,filter .15s,box-shadow .15s;box-shadow:inset 0 0 0 1px #ffffff26}.tile:disabled{cursor:default}.tile span{position:absolute;font-size:.72rem;font-weight:900;color:#10131c;background:#ffffffa8;width:28px;height:28px;display:grid;place-items:center;border-radius:50%}.tile:nth-child(1){border-radius:36px 12px 12px 12px}.tile:nth-child(1) span{top:18px;left:18px}.tile:nth-child(2){border-radius:12px 36px 12px 12px}.tile:nth-child(2) span{top:18px;right:18px}.tile:nth-child(3){border-radius:12px 12px 12px 36px}.tile:nth-child(3) span{bottom:18px;left:18px}.tile:nth-child(4){border-radius:12px 12px 36px 12px}.tile:nth-child(4) span{bottom:18px;right:18px}.tile--coral{background:linear-gradient(145deg,#ff7b66,#db3f48)}.tile--gold{background:linear-gradient(145deg,#ffd364,#e99a2f)}.tile--mint{background:linear-gradient(145deg,#54e4b3,#24a981)}.tile--violet{background:linear-gradient(145deg,#ad8bff,#7653db)}.tile:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px)}.tile:focus-visible,.start:focus-visible{outline:3px solid white;outline-offset:4px}.tile.active{filter:brightness(1.55) saturate(.7);transform:scale(.975);box-shadow:0 0 34px currentColor,inset 0 0 0 4px #fff}.tile.wrong{animation:shake .28s}.board-center{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:112px;height:112px;border:9px solid var(--bg);border-radius:50%;background:var(--panel);display:grid;place-content:center;text-align:center;box-shadow:0 8px 25px #0008}.board-center span{font-size:1.65rem;font-weight:800}.board-center small{text-transform:uppercase;color:var(--muted);letter-spacing:.16em;font-size:.58rem}.start{width:100%;margin-top:18px;border:1px solid #3f4a63;border-radius:15px;background:var(--ink);color:#10131c;padding:16px 20px;font-weight:850;display:flex;justify-content:center;gap:10px;cursor:pointer;transition:transform .15s,background .15s}.start:hover{transform:translateY(-2px);background:white}.how{margin:70px auto 0;max-width:900px;border-top:1px solid var(--line);padding-top:34px;display:grid;grid-template-columns:1fr 1.3fr;gap:34px}.how h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.05}.how ol{list-style:none;padding:0;margin:0;display:grid;gap:9px;counter-reset:item}.how li{counter-increment:item;display:grid;grid-template-columns:34px 90px 1fr;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;color:var(--muted)}.how li:before{content:"0" counter(item);color:var(--gold);font-size:.72rem;font-weight:800}.how b{color:var(--ink)}.keyboard{grid-column:1/-1;text-align:center;color:var(--muted);font-size:.78rem;margin:10px 0 0}.keyboard span{margin-left:10px}kbd{font:700 .72rem ui-monospace,monospace;border:1px solid #4a5367;border-bottom-width:3px;background:#171e30;color:var(--ink);border-radius:5px;padding:3px 7px}footer{text-align:center;color:#737b8d;font:italic 1rem Georgia,serif;padding:8px 20px 35px}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@media(max-width:650px){.shell{padding-top:32px}.hero{align-items:flex-start;justify-content:flex-start}.brand{flex-basis:56px;height:56px;border-radius:18px}.brand span{font-size:27px}.subtitle{line-height:1.45}.scorebar{grid-template-columns:1fr 1fr}.status{grid-column:1/-1;grid-row:2;margin-top:12px;order:3}.board{aspect-ratio:1/1}.tile{min-height:105px}.board-center{width:88px;height:88px;border-width:7px}.how{grid-template-columns:1fr;margin-top:50px}.how li{grid-template-columns:30px 76px 1fr;font-size:.86rem}.keyboard{grid-column:auto;line-height:2.3}.keyboard span{display:block;margin:2px 0 0}}