:root{font-family:ui-sans-serif,system-ui,sans-serif;color:#263c36;background:#f2efe5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top left,#fffdf4,transparent 65%),#efeee3}main{max-width:1080px;margin:auto;padding:38px 28px}header{text-align:center}h1{font:normal clamp(44px,7vw,70px)/1.1 Georgia,serif;letter-spacing:-3px;margin:12px}h1 span{display:block;font:normal 18px/2 ui-sans-serif,system-ui;letter-spacing:4px;text-transform:uppercase}header p{color:#64756c;margin:8px 0 28px}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:800;color:#577166}.toolbar{display:flex;align-items:end;justify-content:center;gap:12px;flex-wrap:wrap;padding:16px;border:1px solid #d6dacb;border-radius:15px;background:#ffffff80;margin-bottom:24px}label{display:grid;gap:5px;font-size:11px;font-weight:700;letter-spacing:.5px}select,button{font:inherit}select,button{min-height:44px;border:1px solid #b5c4b7;border-radius:9px;background:#fffcf4;color:#263c36;padding:10px 14px}button{cursor:pointer;transition:background .12s,transform .12s}button:hover{background:#e0e8d8}button:active{transform:translateY(1px)}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #935421;outline-offset:3px}button:disabled{cursor:default;opacity:.5}.table{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:25px}.board-wrap{padding:20px;background:#e2e6d8;border:1px solid #bdc9b4;border-radius:24px;box-shadow:0 10px 32px #3146330d}.board-head{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:700;margin:0 4px 16px}#moves{color:#627263;font-weight:400}#board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.cell{aspect-ratio:1;padding:8px;min-width:0;min-height:0;background:#eef0e4;border:1px solid #c0cbb6;border-radius:13px;position:relative;box-shadow:inset 0 -3px 0 #d5dbc9}.cell:nth-child(4n+2){margin-right:4px}.cell:nth-child(n+5):nth-child(-n+8){margin-bottom:4px}.cell.available{background:#fffdf1;border-color:#91aa8c}.cell.unavailable{background:#d4dacb}.cell.winning{background:#f5d78c;border:2px solid #96601f}.cell.suggested{outline:3px dashed #8c5423;outline-offset:-5px}.cell svg{width:82%;height:82%;filter:drop-shadow(0 5px 3px #152e3424)}.cell .mark{position:absolute;right:7px;bottom:4px;font-size:10px;font-weight:800;color:#51675b}.shape{width:44px;height:44px;vertical-align:middle}.amber{color:#b56c28}.jade{color:#326e63}svg{overflow:visible}#status{font-size:14px;line-height:1.5;min-height:45px;margin:14px 4px 0;color:#3b5748}aside{padding:12px 0}h2{font:normal 24px Georgia,serif;margin:8px 0 18px}#rack{display:grid;grid-template-columns:1fr 1fr;gap:9px}.pick{display:grid;justify-items:center;gap:4px;min-height:96px;background:#fffaf0}.pick.selected{border:2px solid #985c25;background:#f9e6bf;padding:9px 13px}.pick span{font-size:12px}.pick small{font-size:10px;font-weight:700}.actions{display:flex;gap:8px;margin-top:18px}.actions button{flex:1;font-size:12px;padding:10px}#hint-text{font-size:12px;line-height:1.6;min-height:40px;color:#5a6c60}.rival{border-top:1px solid #c9d1bf;margin-top:18px;padding-top:8px}.rival h3{font-size:11px;text-transform:uppercase;letter-spacing:1px}#rival{display:flex;gap:10px;justify-content:space-between}#rival span{text-align:center;font-size:12px}.small{font-size:11px;color:#637265;line-height:1.7}details{margin-top:28px;border-top:1px solid #bdc9b4;border-bottom:1px solid #bdc9b4}summary{cursor:pointer;padding:19px 3px;font-size:14px;font-weight:700}.guide{max-width:760px;font-size:14px;line-height:1.8;padding:0 3px 15px}a{color:#3d675b}footer{text-align:center;font-size:10px;letter-spacing:1px;color:#6a7b6b;margin-top:28px}@media(max-width:720px){main{padding:24px 14px}.table{grid-template-columns:1fr;gap:18px}.board-wrap{padding:14px;border-radius:18px}.cell{border-radius:10px}aside{padding:0 4px}#rack{grid-template-columns:repeat(4,1fr)}.pick{padding:8px 3px;min-height:88px}.pick.selected{padding:7px 2px}.rival{margin-top:8px}.small{margin-bottom:0}.toolbar{padding:10px;gap:8px}label{flex:1;min-width:150px}select{width:100%;max-width:100%}#new{flex:1}.actions{margin-top:12px}h2{margin-bottom:12px}h1 span{letter-spacing:2.5px;font-size:15px}}
