/* =============================================================
   GAME: Three Men's Morris
   ============================================================= */
.board-threemorris { --tm-glow: #ff52d4; width: min(100%, 400px); display: flex; flex-direction: column; gap: 8px; }
.tm-svg {
  display: block; width: 100%; height: auto; border-radius: 22px; background: #12061a;
  box-shadow: 0 0 0 2px var(--tm-glow), 0 0 28px rgba(255, 82, 212, .35);
}
.tm-bg { stroke: rgba(255, 82, 212, .18); stroke-width: 2; }
.tm-lines rect, .tm-lines line { fill: none; stroke: var(--tm-glow); stroke-width: 5; stroke-linecap: round; opacity: .85; filter: drop-shadow(0 0 5px rgba(255, 82, 212, .7)); }

.tm-pt { cursor: default; outline: none; -webkit-tap-highlight-color: transparent; }
.tm-pt.legal, .tm-pt.movable, .tm-pt.sel { cursor: pointer; }
.tm-hit { fill: transparent; stroke: none; }
.tm-node { fill: #ffc2ee; transform-box: fill-box; transform-origin: center; transition: transform .15s, fill .15s; filter: drop-shadow(0 0 4px rgba(255, 82, 212, .9)); }
.tm-ring { fill: none; stroke: transparent; stroke-width: 4; }
.tm-piece, .tm-shadow, .tm-top, .tm-shine { opacity: 0; pointer-events: none; }
.tm-piece, .tm-top { transform-box: fill-box; transform-origin: center; }
.tm-pt.p1 .tm-node, .tm-pt.p2 .tm-node { opacity: 0; }
/* pieces: glossy turned discs with a raised rim and a glint */
.tm-pt.p1 .tm-piece, .tm-pt.p2 .tm-piece, .tm-pt.p1 .tm-top, .tm-pt.p2 .tm-top { opacity: 1; }
.tm-pt.p1 .tm-shadow, .tm-pt.p2 .tm-shadow { opacity: 1; fill: rgba(0, 0, 0, .55); }
.tm-pt.p1 .tm-shine { opacity: .85; fill: #fff; }
.tm-pt.p2 .tm-shine { opacity: .3; fill: #fff; }
.tm-pt.p1 .tm-piece { fill: url(#tm-body1); stroke: #fff; stroke-width: 1.5; }
.tm-pt.p2 .tm-piece { fill: url(#tm-body2); stroke: var(--tm-glow); stroke-width: 3; }
.tm-pt.p1 .tm-top { fill: url(#tm-top1); stroke: rgba(120, 70, 120, .35); stroke-width: 2; }
.tm-pt.p2 .tm-top { fill: url(#tm-top2); stroke: rgba(255, 82, 212, .45); stroke-width: 1.6; }

.tm-pt.legal .tm-node { fill: #fff; transform: scale(1.4); }
.tm-pt.legal .tm-ring { stroke: rgba(255, 255, 255, .4); stroke-dasharray: 6 7; }
.tm-pt.legal:hover .tm-ring { stroke: #fff; }
.tm-pt.movable .tm-ring { stroke: rgba(255, 210, 63, .75); stroke-dasharray: 7 6; }
.tm-pt.movable:hover .tm-ring, .tm-pt.sel .tm-ring { stroke: var(--t-gold); stroke-dasharray: none; stroke-width: 5; filter: drop-shadow(0 0 6px var(--t-gold)); }
.tm-pt.sel .tm-piece, .tm-pt.sel .tm-top { transform: scale(1.08); }
.tm-pt.last .tm-ring { stroke: var(--accent); stroke-dasharray: none; }
.tm-pt.last .tm-piece, .tm-pt.last .tm-top { animation: tm-pop .3s cubic-bezier(.3, 1.5, .5, 1); }
.tm-pt.last-from .tm-node { fill: var(--accent); transform: scale(1.6); }
.tm-pt.won .tm-ring { stroke: var(--t-gold); stroke-width: 5; stroke-dasharray: none; animation: tm-glow .8s ease-in-out infinite alternate; }
.tm-pt:focus-visible .tm-hit { stroke: var(--focus); stroke-width: 4; }
.tm-wait .tm-pt { cursor: default; }
@keyframes tm-pop { from { transform: scale(.4); } }
@keyframes tm-glow { to { filter: drop-shadow(0 0 10px var(--t-gold)); } }

/* winning line */
.tm-strike { stroke-width: 16; stroke-linecap: round; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tm-strike .45s ease-out .1s forwards; }
.tm-strike.p1 { stroke: #fff4fc; filter: drop-shadow(0 0 8px rgba(255, 210, 63, .9)); }
.tm-strike.p2 { stroke: var(--tm-glow); filter: drop-shadow(0 0 8px var(--tm-glow)); }
@keyframes tm-strike { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .tm-strike { stroke-dashoffset: 0; } }

/* pieces in hand */
.tm-tray { display: flex; justify-content: center; gap: 8px; min-height: 20px; }
.tm-tray i, .tm-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; flex: none; }
.tm-tray i { transition: opacity .2s, transform .2s; }
.tm-tray i.used { opacity: .14; transform: scale(.75); }
.tm-tray i.p1, .tm-dot.p1 { background: radial-gradient(circle at 50% 50%, #fff 0 34%, #e2cfe2 38%, #f8eef8 46%, #cdb4cf 80%, #94789a 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.tm-tray i.p2, .tm-dot.p2 { background: radial-gradient(circle at 50% 50%, #3d2b4e 0 34%, #120a18 38%, #2d1f3a 48%, #110a18 85%); box-shadow: 0 0 0 1.5px var(--tm-glow), 0 2px 3px rgba(0, 0, 0, .5); }
.tm-tray.done { visibility: hidden; }