.hboard { width:min(420px, 100%); height:auto; background:linear-gradient(160deg, #1e293b, #0f172a); border:2px solid var(--line); border-radius:18px; padding:4px; box-sizing:border-box; }
.htray { width:min(420px, 100%); height:auto; background:color-mix(in srgb, var(--panel) 80%, transparent); border:2px dashed var(--line); border-radius:16px; padding:4px; box-sizing:border-box; }
.slot { cursor:pointer; outline:none; }
.slot .hexbg { fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.14); stroke-width:1.5; }
.slot:hover .hexbg, .slot:focus-visible .hexbg { stroke:var(--accent); stroke-width:3; fill:rgba(255,255,255,.1); }
.slot.sel .hexbg { stroke:#f59e0b; stroke-width:4; }
.tile { stroke:rgba(0,0,0,.35); stroke-width:1.5; }
.slot.pop .tile { animation:hxPop .35s ease forwards; } @keyframes hxPop { to { opacity:0; transform:scale(.6); } }
.bar button { min-height:44px; }