/* pentaline: styles for this game only (loaded after /css/core.css). */
[data-game="pentaline"] .c1 { --base: #262D3A; --hi: #6B768C; --lo: #0D1118; --edge: #05070A; }
[data-game="pentaline"] .c2 { --base: #F3F0E6; --hi: #FFFFFF; --lo: #CFC8B4; --edge: #9E957C; }
.pn-board .pc.last::after { content: ''; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #E5484D; }
.bg-tray[data-game="pentaline"] { position: relative; }
.pn-lines { position: absolute; inset: clamp(10px, 2.6vw, 18px); width: calc(100% - 2 * clamp(10px, 2.6vw, 18px)); height: calc(100% - 2 * clamp(10px, 2.6vw, 18px)); pointer-events: none; z-index: 1; }
.pn-lines path { fill: none; stroke: rgba(88, 52, 14, .62); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.pn-lines circle { fill: rgba(88, 52, 14, .85); }
.pn-board { position: relative; z-index: 2; background: none !important; padding: 0; }
.bg-tray[data-game="pentaline"] { --tint: 232, 190, 120; --edge-rgb: 156, 106, 42; }
.pn-board .pc { width: 88%; box-shadow: 0 2px 0 var(--edge), 0 4px 6px rgba(0, 0, 0, .3); }
.my-turn .pn-board .bg-cell.can:hover { background-image: radial-gradient(circle, rgba(20, 20, 20, .32) 0 36%, transparent 38%); }
.pn-board .pc.win { animation: win-glow .8s ease-in-out infinite alternate; }