/* mill: styles for this game only (loaded after /css/core.css). */
[data-game="mill"] .c1 { --base: #E2B33B; --hi: #FFEAA8; --lo: #9C7110; --edge: #6E4F08; }
[data-game="mill"] .c2 { --base: #B9C1CD; --hi: #FFFFFF; --lo: #77818F; --edge: #4E5764; }
.ml-pt.sel .pc { box-shadow: 0 3px 0 var(--edge), 0 0 0 4px #F5C542, 0 10px 18px rgba(0, 0, 0, .35); transform: translateY(-3px); }
.ml-pt.hint { animation: hint-glow 1s ease-in-out infinite alternate; }
.ml-board { position: relative; aspect-ratio: 1; border-radius: 14px; background: linear-gradient(160deg, #F0D29B, #E2B977); box-shadow: inset 0 0 0 3px rgba(100, 56, 22, .25); }
.ml-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ml-lines path { fill: none; stroke: #6E3E17; stroke-width: .09; stroke-linecap: round; }
.ml-pt { position: absolute; left: calc((var(--x) + .5) / 7 * 100%); top: calc((var(--y) + .5) / 7 * 100%); width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; }
.ml-pt::before { content: ''; position: absolute; width: 32%; aspect-ratio: 1; border-radius: 50%; background: #6E3E17; }
.ml-pt .pc { width: 92%; }
.my-turn .ml-pt.can { cursor: pointer; }
.my-turn .ml-pt.can:not(:has(.pc))::before { background: #F5C542; box-shadow: 0 0 0 5px rgba(245, 197, 66, .35); }
.ml-pt.tgt::before { width: 46%; background: #F5C542; box-shadow: 0 0 0 6px rgba(245, 197, 66, .35); }
.my-turn .ml-pt.can .pc { box-shadow: 0 3px 0 var(--edge), 0 0 0 3px rgba(245, 197, 66, .7), 0 6px 10px rgba(0, 0, 0, .3); }
.my-turn .ml-pt.rm .pc { box-shadow: 0 3px 0 var(--edge), 0 0 0 4px #E5484D, 0 6px 10px rgba(0, 0, 0, .3); animation: rm-wobble .9s ease-in-out infinite; }
.ml-pt.trail::before { background: #B4540A; }
.ml-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; min-height: 18px; margin: 4px 0 10px; }
.ml-tray:last-child { margin: 10px 0 0; }