/* Pairs surface; the shared school stylesheet owns colors, typography and controls. */

.pairs-wrap { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; padding: 0 12px 12px; }
.pairs-grid { display: grid; justify-content: center; }
.pcard { position: relative; aspect-ratio: 1; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; perspective: 900px; border-radius: 12px; }
.pcard:focus-visible { outline: 3px solid var(--blue-tint); outline-offset: 2px; }
.pcard-inner { position: absolute; inset: 0; transition: transform 320ms ease; transform-style: preserve-3d; }
.pcard.up .pcard-inner { transform: rotateY(180deg); }
.pcard-back, .pcard-face { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.pcard-back { background: var(--pr-back, none) center / cover, var(--blue-deep); border: 1px solid var(--blue-mid); }
.pcard-face { transform: rotateY(180deg); background: var(--art-paper); display: flex; align-items: center; justify-content: center; border: 1px solid var(--blue-tint); }
.pcard-face img { width: 88%; height: 88%; object-fit: contain; user-select: none; pointer-events: none; }
.pcard-number { font-family: var(--font-data); font-weight: 600; color: var(--blue-deep); font-size: clamp(18px, 4vw, 44px); }
.pcard.matched .pcard-face { border: 3px solid var(--blue-light); }
.pcard.by0 .pcard-face { border: 4px solid var(--blue-light); }
.pcard.by1 .pcard-face { border: 4px dashed var(--blue-deep); }
.strip .who::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--blue-light); vertical-align: 1px; }
.strip .who.two::before { background: transparent; border: 2px dashed var(--blue-tint); width: 8px; height: 8px; }
.strip .who.active { color: var(--white); font-weight: 600; }


.pcard:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.dama-board-controls { position:absolute; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); }
[data-game-ui] .dama-board-controls .btn { min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.dama-board-controls .btn:focus-visible { outline:3px solid var(--focus); outline-offset:-4px; }
.dama-move-controls, .domino-hand-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding:12px 16px; }
.dama-move-controls .btn { flex:1 1 260px; }
.dama-move-picker { padding:8px 16px 16px; }
.dama-move-picker summary { width:fit-content; margin-inline:auto; cursor:pointer; min-height:48px; padding:12px; font-weight:600; }
.dama-move-picker summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.domino-hand-controls .btn { flex:0 1 120px; }
.domino-ends { text-align:center; padding:8px 16px 0; margin:0; }
[data-game-ui] #pr-status, [data-game-ui] #dm-status, [data-game-ui] #do-status { white-space:normal; }
[data-game-ui] .pairs-wrap { padding-bottom:20px; }
.dama-board-controls:has(~ .overlay:not(.hidden)) { pointer-events:none; }
@media(max-width:680px) { [data-game-ui] #pr-status, [data-game-ui] #dm-status, [data-game-ui] #do-status { flex-basis:100%; } }
@media(prefers-reduced-motion:reduce) { .pcard-inner { transition:none; } }