.board-section{container-type:inline-size}.board{--grid-cols:22;--grid-rows:5;--board-padding-x:32px;--tile-gap:clamp(2px, 0.3cqi, 5px);--tile-size:clamp(14px, calc((100cqi - 2 * var(--board-padding-x) - 100px) / var(--grid-cols)), 64px);position:relative;background:var(--board-bg);border-radius:16px;padding:24px var(--board-padding-x)32px;width:100%;max-width:100%;box-shadow:0 2px 16px rgba(0,0,0,8%),0 0 0 1px var(--board-border);overflow:visible;display:flex;justify-content:center;transition:background-color .3s ease}.tile-grid{display:grid;grid-template-columns:repeat(var(--grid-cols,22),var(--tile-size));grid-template-rows:repeat(var(--grid-rows,5),var(--tile-size));gap:var(--tile-gap);justify-content:center}.accent-bar{position:absolute;top:20px;display:flex;flex-direction:column;gap:3px;z-index:5}.accent-bar-left{left:24px}.accent-bar-right{right:24px}.accent-segment{width:14px;height:14px;border-radius:2px;transition:background-color .5s ease}.keyboard-hint{position:absolute;bottom:12px;left:16px;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--text-primary) 8%,transparent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:color-mix(in srgb,var(--text-primary) 35%,transparent);cursor:pointer;transition:background .2s}.keyboard-hint:hover{background:color-mix(in srgb,var(--text-primary) 15%,transparent)}.shortcuts-overlay{display:none;position:absolute;bottom:48px;left:16px;background:color-mix(in srgb,var(--bg-primary) 92%,transparent);border:1px solid var(--border-color);border-radius:8px;padding:12px 16px;font-size:12px;color:var(--text-secondary);z-index:10;min-width:180px}.shortcuts-overlay.visible{display:block}.shortcuts-overlay div{display:flex;justify-content:space-between;padding:4px 0}.shortcuts-overlay kbd{background:color-mix(in srgb,var(--text-primary) 10%,transparent);padding:1px 6px;border-radius:3px;font-family:inherit;font-size:11px;margin-left:16px}.board::after{content:'';position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--text-primary) 15%,transparent)}.tile{width:var(--tile-size);height:var(--tile-size);perspective:400px;background:var(--tile-bg);border-radius:3px;transition:background-color .3s ease}.tile-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d}.tile-front,.tile-back{position:absolute;inset:1px;backface-visibility:hidden;background:var(--tile-face);border-radius:2px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 3px var(--tile-seam),inset 0 -1px 1px var(--tile-highlight);overflow:hidden;transition:background-color .3s ease}.tile-front span,.tile-back span{font-size:calc(var(--tile-size) * .72);font-weight:700;color:var(--tile-text);text-transform:uppercase;letter-spacing:.5px;line-height:1;font-family:var(--font-display)}.tile-back{transform:rotateX(180deg)}.tile-front::after,.tile-back::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--tile-seam);pointer-events:none}.tile-front::before,.tile-back::before{content:'';position:absolute;inset:0;background:linear-gradient( 180deg,transparent 0%,var(--tile-highlight) 45%,var(--tile-highlight) 50%,var(--tile-highlight) 55%,transparent 100% );opacity:0;pointer-events:none;transition:opacity .15s}.tile-inner.flipping{animation:tileFlip var(--flip-duration,300ms)ease-in-out forwards}.tile-inner.flipping .tile-front::before,.tile-inner.flipping .tile-back::before{opacity:1}@keyframes tileFlip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(-180deg)}}.tile-inner.flipping,.tile.scrambling .tile-inner{will-change:transform}