/* boxclaim: styles for this game only (loaded after /css/core.css). */
[data-game="boxclaim"] .c2 { --base: #F08A24; --hi: #FFC98F; --lo: #A9560A; --edge: #7A3D05; }
.bg-tray[data-game="boxclaim"] { --tint: 255, 255, 255; --edge-rgb: 150, 165, 200; background: var(--glass); }
.bx-board { --dot: 14px; display: grid; grid-template-columns: repeat(var(--b), var(--dot) minmax(0, 1fr)) var(--dot); grid-template-rows: repeat(var(--b), var(--dot) minmax(0, 1fr)) var(--dot); aspect-ratio: 1; }
.bx-dot { width: var(--dot); height: var(--dot); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6B768C, #14213A 70%); box-shadow: 0 2px 0 #05070A; z-index: 3; }
.bx-line { position: relative; border: 0; padding: 0; margin: 0; background: transparent; z-index: 2; }
.bx-line.h { margin: -12px 0; }
.bx-line.v { margin: 0 -12px; }
.bx-line::before { content: ''; position: absolute; border-radius: 6px; background: var(--line); transition: background .12s, transform .12s; }
.bx-line.h::before { left: 3px; right: 3px; top: 50%; height: 8px; margin-top: -4px; }
.bx-line.v::before { top: 3px; bottom: 3px; left: 50%; width: 8px; margin-left: -4px; }
.my-turn .bx-line.can { cursor: pointer; }
.my-turn .bx-line.can:hover::before { background: #F5C542; }
.bx-line.on::before { background: linear-gradient(180deg, var(--hi), var(--base)); box-shadow: 0 2px 0 var(--edge); }
.bx-line.last::before { animation: line-in .35s ease-out; }
.bx-line.hint::before { background: #F5C542; }
.bx-box { display: flex; align-items: center; justify-content: center; margin: 5px; border-radius: 8px; }
.bx-box.own { background: radial-gradient(circle at 34% 28%, var(--hi), var(--base) 60%, var(--lo)); box-shadow: 0 4px 0 var(--edge), 0 8px 14px rgba(0, 0, 0, .18); }
.bx-box svg { width: 42%; height: 42%; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2)); }
.bx-box.pop { animation: pc-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }