*{box-sizing:border-box}body{margin:0;background:#102c3b;color:#f1f6f2;font:16px system-ui,sans-serif}main{max-width:620px;margin:auto;padding:24px 16px 40px}.eyebrow{font-size:11px;letter-spacing:.2em;color:#8dd8c5}h1{font-size:clamp(29px,7vw,46px);letter-spacing:-.04em;margin:8px 0}header p{color:#bbd6df}.panel{background:#183c4c;border:1px solid #376273;padding:14px;border-radius:22px;box-shadow:0 20px 60px #0018}#status{font-weight:750;font-size:14px}#detail{font-size:13px;color:#a6edcf}#board{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px}.tile{aspect-ratio:1;min-width:0;min-height:40px;border:2px solid transparent;border-radius:12px;font-size:clamp(18px,5vw,30px);font-weight:800;color:#102c3b;padding:0;box-shadow:inset 0 -4px #0002}.t0{background:#f5a98e}.t1{background:#7fd1ea}.t2{background:#d6bef9}.t3{background:#dbe98b}.t4,.t5{background:#ffce64}.t8{background:#fff}.t-1{background:#234c5c;color:#92aab2}.marked{border:3px solid #ffcd5e}.selected{outline:3px solid white;outline-offset:-5px;transform:scale(.91)}button{cursor:pointer;touch-action:manipulation;font:inherit}button:focus-visible{outline:3px solid white;outline-offset:2px}nav{display:flex;flex-wrap:wrap;gap:8px}nav button{min-height:44px;background:#c6f3dc;border:0;border-radius:10px;padding:9px 13px;color:#153849;font-weight:700}button[hidden]{display:none}#preview,#message{font-size:13px;overflow-wrap:anywhere;min-height:18px}details{margin-top:20px;line-height:1.6}summary{font-weight:700;cursor:pointer}footer{font-size:12px;color:#aac4cb;margin-top:20px}@media(max-width:360px){main{padding:12px 8px}.panel{padding:9px}#board{gap:4px}.tile{border-radius:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:430px){main{padding:14px 8px}.panel{padding:8px}#board{gap:3px}.tile{min-height:46px;font-size:16px}}