/* Five in a Row — a wooden 15×15 board with stones on the line crossings. */
.levels { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; }
.levels .tnz-btn { min-height: 40px; font-size: 14px; padding: 0 14px; }
.levels .tnz-btn.on { border-color: var(--primary); color: var(--primary); }
.ta { font-size: 13px; opacity: .9; }

.gm-score { display: flex; gap: 10px; width: min(100%, 440px); margin-bottom: 6px; }
.gm-side { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--card); border: 2px solid transparent; border-radius: 12px; padding: 6px 10px; transition: border-color .2s, box-shadow .2s; }
.gm-side.turn { border-color: var(--gold); box-shadow: 0 0 12px #ffc53344; }
.gm-side .who { flex: 1; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-side .stone { position: static; width: 20px; height: 20px; flex: none; transform: none; }
.gm-turn { font-weight: 700; min-height: 24px; margin: 4px 0 8px; text-align: center; }

.gm-wrap { width: min(100%, 440px); }
.gm-board {
  --n: 15; position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px;
  background: radial-gradient(120% 120% at 30% 20%, #f0c27a, #d79b4d 60%, #b97a33);
  box-shadow: 0 10px 28px #0009, inset 0 0 0 3px #8a5a22;
  display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr);
  touch-action: manipulation;
}
.gm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gm-lines line { stroke: #5b3a12; stroke-width: .045; opacity: .75; }
.gm-pt { position: relative; cursor: pointer; z-index: 1; }
.gm-pt.star::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #5b3a12; }
.stone { position: absolute; inset: 6%; border-radius: 50%; }
.stone.b { background: radial-gradient(circle at 35% 30%, #6b6b78, #111 65%); box-shadow: 1px 2px 3px #0009; }
.stone.w { background: radial-gradient(circle at 35% 30%, #fff, #d9d6df 65%); box-shadow: 1px 2px 3px #0007; }
.stone.drop { animation: gm-drop .26s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes gm-drop { 0% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.stone.ghost { opacity: .5; animation: gm-ghost 1s ease-in-out infinite; }
@keyframes gm-ghost { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.05); } }
.gm-pt.last .stone::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; margin: -15% 0 0 -15%; border-radius: 50%; background: var(--primary); }
.gm-pt.win .stone { box-shadow: 0 0 0 2px #ffc533, 0 0 12px 3px #ffc533cc; animation: gm-win .5s ease 3; }
@keyframes gm-win { 50% { transform: scale(1.2); } }
.gm-pt.hint::after { content: ''; position: absolute; inset: -10%; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 14px 4px #ffc533aa; animation: gm-hint 1s ease-in-out 3; }
@keyframes gm-hint { 50% { transform: scale(1.3); } }
.gm-board.busy .gm-pt { cursor: wait; }
.gm-tools { display: flex; gap: 10px; justify-content: center; margin-top: 12px; min-height: 40px; flex-wrap: wrap; }
.gm-place { min-height: 40px; padding: 0 18px; font-size: 15px; }