:root{--bg:#0d1028;--glow:#2c2864;--accent:#c4b5fd}.hexa-wrap{display:grid;place-items:center;gap:8px;width:100%;height:100%}.hexa-board{position:relative;width:min(65vh,88vw,500px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(124,107,210,.13),rgba(255,255,255,.015) 68%);filter:drop-shadow(0 20px 30px rgba(0,0,0,.3))}.hex-cell{position:absolute;left:var(--left);top:var(--top);width:12%;aspect-ratio:1.1547;transform:translate(-50%,-50%);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);border:0;background:rgba(255,255,255,.075);cursor:pointer;transition:.14s ease}.hex-cell::after{content:"";position:absolute;inset:3px;clip-path:inherit;background:rgba(12,15,42,.76)}.hex-cell.filled{background:#ddd6fe;filter:drop-shadow(0 0 5px #8b5cf6)}.hex-cell.filled::after{background:linear-gradient(145deg,#8b5cf6,#22d3ee)}.hex-cell.preview{background:#fde68a}.hex-cell.preview::after{background:#fbbf24}.hex-cell.invalid{background:#fb7185}.hex-cell.clearing{animation:hex-clear .22s ease}.hexa-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:min(88vw,500px);min-height:66px}.hexa-piece{position:relative;min-height:62px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);cursor:grab}.hexa-piece.selected{border-color:#fde68a;background:rgba(253,230,138,.1);transform:translateY(-3px)}.hexa-piece.used{visibility:hidden}.mini-hex{position:absolute;width:18px;aspect-ratio:1.1547;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:linear-gradient(145deg,#8b5cf6,#22d3ee);transform:translate(-50%,-50%)}.help{margin:0;color:#9da7c2;font-size:8px;text-align:center}@keyframes hex-clear{50%{transform:translate(-50%,-50%) scale(.25);filter:brightness(2)}}@media(max-height:470px){.hexa-wrap{grid-template-columns:auto 150px}.hexa-board{width:min(74vh,68vw)}.hexa-tray{grid-template-columns:1fr;width:145px}.hexa-piece{min-height:43px}.help{display:none}}