.page{--hk-paper: #F4EFE4;--hk-ink: #231C16;--hk-tiger: #B7361F;--hk-tiger-ring: #8E2717;--hk-goat: #FFFBF4;--hk-goat-ring: #231C16;--hk-last: rgba(183, 54, 31, .45);--piece-light-fill: var(--hk-goat);--piece-light-ring: var(--hk-goat-ring);--piece-dark-fill: var(--hk-tiger);--piece-dark-ring: var(--hk-tiger-ring)}.board-wrap{display:flex;justify-content:center}.hk{position:relative;width:100%;max-width:clamp(300px,calc(100vh - 230px),480px);aspect-ratio:1;background:var(--hk-paper);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);color:var(--hk-ink);user-select:none;-webkit-user-select:none}.hk-lines{position:absolute;top:10%;right:10%;bottom:10%;left:10%;width:80%;height:80%;overflow:visible}.hk-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(5,1fr)}.hk-point{position:relative;aspect-ratio:1;min-width:44px;min-height:44px;border:0;padding:0;background:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;touch-action:manipulation}.hk-point:before{content:"";width:14%;height:14%;border-radius:50%;background:var(--hk-ink);position:absolute}.hk-point.last:before{background:var(--color-accent);width:20%;height:20%}.hk-point.taken:before{background:transparent;border:2px solid var(--hk-tiger);width:26%;height:26%}.hk-point.selected{outline:3px solid var(--color-accent);outline-offset:-3px}.hk-point:focus-visible{outline:3px solid var(--color-focus);outline-offset:-1px;z-index:2}.hk--locked .hk-point{cursor:default}.hk-piece{width:62%;height:62%;border-radius:50%;box-sizing:border-box;position:relative;z-index:1;box-shadow:0 2px 3px #231c1659}.hk-piece--light{background:var(--hk-goat);border:3px solid var(--hk-goat-ring)}.hk-piece--dark{background:var(--hk-tiger);border:3px solid var(--hk-tiger-ring)}.hk-piece:after{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:clamp(1.05rem,3.2vmin,2.4rem);line-height:1;pointer-events:none}.hk-piece--light:after{content:"🐐"}.hk-piece--dark:after{content:"🐯"}.hk-point.movable .hk-piece{box-shadow:0 0 0 2px var(--hk-paper),0 0 0 5px var(--color-accent),0 2px 3px #231c1659}.hk-point.last .hk-piece{box-shadow:0 0 0 2px var(--hk-paper),0 0 0 5px var(--hk-last),0 2px 3px #231c1659}.hk-point.movable.last .hk-piece{box-shadow:0 0 0 2px var(--hk-paper),0 0 0 5px var(--color-accent),0 2px 3px #231c1659}.hk-piece.pop{animation:rh-pop .22s var(--ease) both}.hk-piece.gone{pointer-events:none;animation:hk-gone .7s var(--ease) forwards}@keyframes hk-gone{0%,50%,to{box-shadow:0 0 0 0 transparent}25%,75%{box-shadow:0 0 0 4px var(--hk-tiger)}85%{opacity:1;transform:none}to{opacity:0;transform:scale(.5)}}.legal-dot{width:24%;height:24%;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft);position:absolute;z-index:1}@media (max-width: 420px){.hk{border-radius:var(--radius-md)}.hk-piece{width:66%;height:66%}.hk-point.movable .hk-piece{box-shadow:0 0 0 2px var(--hk-paper),0 0 0 4px var(--color-accent),0 2px 3px #231c1659}}