/* PlayCalm Tic-tac-toe: one big, calm board (the shared look is in assets/css/duel.css). */
.xo-wrap { position: relative; width: min(100%, 440px); margin: 0 auto; direction: ltr; }
.xo-board { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; aspect-ratio: 1; user-select: none; -webkit-user-select: none; }
.xo-row { display: contents; }
.xo-cell {
  border: 3px solid var(--bd-line); border-radius: 18px; background: var(--raised); padding: 14%; cursor: pointer; min-width: 0;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.xo-cell[aria-disabled="true"] { cursor: default; }
@media (hover: hover) and (pointer: fine) { .xo-cell:not([aria-disabled]):hover { background: var(--accent-soft); } }
.xo-cell:focus-visible { outline: 4px solid var(--star); outline-offset: 2px; }
.xo-cell.last .mk { animation: xo-in .22s ease-out; }
.xo-cell.win { background: var(--daily-bg); border-color: var(--star); }
.xo-board.busy .xo-cell { cursor: progress; }
.xo-strike { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; animation: xo-fade .5s ease-out; }
@keyframes xo-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes xo-fade { from { opacity: 0; } to { opacity: .55; } }
/* reduced motion (site switch or device setting, decided in duel.js): no pop, no fade */
.bd-still .xo-cell.last .mk, .bd-still .xo-strike { animation: none; } .bd-still .xo-cell { transition: none; }

/* Full screen for play: the square board fills the width (upright) or the height (sideways) */
:root[data-focus="on"] .xo-wrap { width: 100%; }
:root[data-focus="on"] .bd-stage { --bd-w: min(100cqw, var(--pc-fy) - 200px); }
@media (orientation: landscape) { :root[data-focus="on"] .bd-stage { --bd-w: min(var(--pc-fy), 60cqw); } }
/* color-blind support: the winning squares are framed with a dashed line too (the strike line is drawn as well) */
html.pc-cb .xo-cell.win { border-style: dashed; border-color: var(--text); }