*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:radial-gradient(ellipse at top,#23364d,#0d1524);color:#eff6ff;font:16px/1.5 system-ui,sans-serif}main{width:min(100%,600px);margin:auto;padding:16px}header{display:flex;align-items:center;gap:12px}header img{width:54px;height:54px}h1{font-size:clamp(24px,7vw,38px);line-height:1.1;margin:18px 0;overflow-wrap:anywhere}.eyebrow{color:#a9cfde;font-size:12px;letter-spacing:.15em;text-transform:uppercase}#status,#message{padding:12px;border:1px solid #496275;border-radius:12px;background:#142334;overflow-wrap:anywhere}#message{border-color:#71d7c1;min-height:48px}#board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:14px 0}button,a,summary{min-height:48px;min-width:44px}button{border:1px solid #65889f;border-radius:10px;background:#263e57;color:#fff;font:inherit;padding:8px;cursor:pointer;touch-action:manipulation;overflow-wrap:anywhere;white-space:pre-line}button.tile{min-height:64px;padding:4px;font-size:14px;background:linear-gradient(145deg,#2f526b,#1d3247)}button:hover{background:#416783}button.selected{outline:3px solid #f5ce76;outline-offset:-3px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #f5ce76;outline-offset:2px}button:disabled{opacity:.6;cursor:default}#actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}details{margin-top:18px;border-top:1px solid #486175}summary{padding:12px 0;cursor:pointer}a{display:flex;align-items:center;color:#9cdeef;padding:8px 0;overflow-wrap:anywhere}footer{font-size:13px;color:#b5c7d5;margin-top:20px}@media(max-width:340px){main{padding:10px}button.tile{font-size:12px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s}}#board{grid-template-columns:repeat(3,minmax(0,1fr))}.tile{clip-path:polygon(20% 0,80% 0,100% 50%,80% 100%,20% 100%,0 50%);min-height:110px!important}button.tile[data-tone="0"]{background:#743a4e}button.tile[data-tone="1"]{background:#215a73}button.tile[data-tone="2"]{background:#5c5629}button.tile[data-tone="3"]{background:#4f4278}
#board{position:relative;display:block;height:395px}#board .tile{position:absolute;width:32%;height:112px;padding:55px 5px 10px;font-size:12px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:#243c58;border:0;isolation:isolate}#board .tile::before,#board .tile::after{content:"";position:absolute;left:50%;top:35%;width:42%;height:5px;background:#f7d66b;transform-origin:left center;z-index:-1;box-shadow:0 0 7px #f7d66b}#board .tile::before{transform:rotate(calc(var(--angle)*60deg + 30deg))}#board .tile::after{transform:rotate(calc(var(--angle)*60deg + 150deg))}#cell-0{left:34%;top:0}#cell-1{left:68%;top:85px}#cell-2{left:68%;top:195px}#cell-3{left:34%;top:280px}#cell-4{left:0;top:195px}#cell-5{left:0;top:85px}
#board [data-tone="0"]{--angle:0}
#board [data-tone="1"]{--angle:1}
#board [data-tone="2"]{--angle:2}
#board [data-tone="3"]{--angle:3}
#board [data-tone="4"]{--angle:4}
#board [data-tone="5"]{--angle:5}

/* Static puzzle cells remain readable; unavailable actions remain dimmed. */
#board button:disabled{opacity:1;cursor:default}