/* Games wave 3 (scripts/games-wave3.mjs): tangram, dots and boxes, spot the difference. Tokens from style.css. */

/* ---------- Tangram (public/games/tangram.js) ---------- */
.gm[data-game="tangram"] .gm-board { max-width: 980px; margin: 0 auto; }
.tg-svg { display: block; width: 100%; height: auto; max-height: 78vh; touch-action: none; user-select: none; -webkit-user-select: none; background: #fffdf7; border: 2px dashed #b9b4a6; border-radius: 12px; }
.tg-slot { fill: #3b3b5c; stroke: #3b3b5c; stroke-width: .02; stroke-linejoin: round; }
.tg-lines .tg-slot { stroke: #fff; stroke-width: .045; }
.tg-hint { fill: none; stroke: var(--sun); stroke-width: .09; stroke-dasharray: .18 .1; stroke-linejoin: round; }
.tg-piece { cursor: grab; outline: none; }
.tg-piece .tg-hit { fill: none; stroke: transparent; stroke-width: .5; stroke-linejoin: round; pointer-events: all; }
.tg-piece .tg-shape { stroke: #1d1d3b; stroke-width: .035; stroke-linejoin: round; filter: drop-shadow(0 .04px .05px rgba(29, 29, 59, .35)); }
.tg-piece.in .tg-shape { filter: none; stroke: #fff; stroke-width: .03; }
.tg-piece.sel .tg-shape { stroke: #1d1d3b; stroke-width: .08; }
.tg-piece:focus-visible .tg-shape { stroke: var(--focus); stroke-width: .1; }
.tg-piece.dragging { cursor: grabbing; }
.tg-won .tg-piece .tg-shape { stroke: #fff; stroke-width: .03; }
.tg-print { margin: var(--s3) 0 0; font-weight: 700; }
.gm-big .tg-svg { max-height: none; }

/* ---------- Dots and boxes (public/games/dots.js) ---------- */
.db { max-width: 620px; margin: 0 auto; }
.db-score { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; margin: 0 0 var(--s2); font-weight: 800; font-size: var(--t-lg); }
.db-p { padding: 2px 12px; border-radius: 999px; border: 2px solid transparent; }
.db-p.p0 { background: #dbe7fb; color: #133f8c; }
.db-p.p1 { background: #fde2d8; color: #8f2c10; }
.db-p.turn { border-color: var(--ink); }
.db-whose { color: var(--muted); font-size: var(--t-md); }
.db-pad { border-radius: 12px; outline: none; }
.db-pad:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.db-svg { display: block; width: 100%; height: auto; max-height: 80vh; touch-action: manipulation; user-select: none; -webkit-user-select: none; background: #fffdf7; border-radius: 12px; }
.db-dot { fill: #1d1d3b; }
.db-line { stroke: #c9c4b6; stroke-width: .5; stroke-dasharray: .9 .9; stroke-linecap: round; }
.db-line.on { stroke-dasharray: none; stroke-width: 1.1; }
.db-line.on.p0 { stroke: #1f62d6; }
.db-line.on.p1 { stroke: #d2461d; }
.db-line.last { stroke-width: 1.6; }
.db-line.hint { stroke: var(--sun); stroke-width: 1.6; stroke-dasharray: none; }
.db-hit { stroke: transparent; stroke-width: 5.5; stroke-linecap: round; cursor: pointer; pointer-events: stroke; }
.db-box rect { fill: transparent; }
.db-box.p0 rect { fill: #dbe7fb; }
.db-box.p1 rect { fill: #fde2d8; }
.db-box text { font: 800 5.6px var(--font); fill: #1d1d3b; pointer-events: none; }
.db-cur { fill: none; stroke: transparent; stroke-width: .6; pointer-events: none; }
.db-pad:focus-visible .db-cur { stroke: var(--focus); }
.db-pad:focus-visible .db-cur.pen { stroke: var(--coral); stroke-width: 1; }
.db-end { margin: var(--s3) 0 0; padding: 12px 16px; border-radius: var(--radius); background: var(--blue-soft); text-align: center; }
.db-end p { margin: 6px 0; }
.gm-big .db-score { font-size: 1.5rem; }

/* ---------- Spot the difference (public/games/spot.js) ---------- */
.sd { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 700px) { .sd { grid-template-columns: minmax(0, 1fr); } }
.sd-large .sd { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin: 0 auto; }
.sd-pic { margin: 0; }
.sd-pic figcaption { text-align: center; font-weight: 700; color: var(--muted); margin-top: 4px; }
.sd-svg { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 10px; cursor: crosshair; touch-action: manipulation; user-select: none; -webkit-user-select: none; background: #fff; }
.sd-key { border-radius: 10px; outline: none; }
.sd-key:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.sd-ring { fill: none; stroke: #d32f2f; stroke-width: 4; }
.sd-large .sd-ring { stroke-width: 6; }
.sd-hint { fill: none; stroke: #1d1d3b; stroke-width: 3; stroke-dasharray: 8 6; }
.sd-miss path { stroke: #6b6b88; stroke-width: 3; stroke-linecap: round; fill: none; }
.sd-miss { animation: sd-fade .7s ease forwards; }
@keyframes sd-fade { to { opacity: 0; } }
.sd-cur { fill: none; stroke: transparent; stroke-width: 3; pointer-events: none; }
.sd-key:focus-visible .sd-cur { stroke: var(--focus); }
@media (prefers-reduced-motion: reduce) { .sd-miss { animation: none; } }