/* Tic-Tac-Toe Duel: the home screen, the tile board, the coral X and the blue O. */
:root{--x:#E0533B;--o:#2F6FDE;--tile:#EEF1F5;--tile-hi:#E3E9F1;--line:#1C2530;--bs:300px}

/* marks, anywhere */
.mark{display:block;overflow:visible}
.mark path{fill:none;stroke-width:13;stroke-linecap:round}
.mark.mx path{stroke:var(--x)}
.mark.mo path{stroke:var(--o)}
.mark.draw path{stroke-dasharray:1 1;stroke-dashoffset:1;animation:ink .2s ease-out forwards}
.mark.draw path+path{animation-delay:.11s}
@keyframes ink{to{stroke-dashoffset:0}}

/* home */
.home{align-items:center;justify-content:center;text-align:center;padding:16px}
.home-in{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(32em,100%)}
.logo{width:84px;height:84px;filter:drop-shadow(0 6px 14px rgba(28,37,48,.14))}
.logo .lx{fill:none;stroke:var(--x);stroke-width:6;stroke-linecap:round}
.logo .lo{fill:none;stroke:var(--o);stroke-width:5.5}
.home .title{font-size:clamp(2.1em,9vw,3.4em)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em}
.picks{display:flex;flex-direction:column;gap:10px;align-items:center}
#boards .choice,#levels .choice{min-width:4.4em;position:relative;font-size:1.02em}
#levels .choice[data-won]::after{content:"✓";position:absolute;top:-.55em;right:-.4em;width:1.35em;height:1.35em;line-height:1.35em;border-radius:50%;
  background:#2E9E5B;color:#fff;font-size:.75em;font-weight:800;box-shadow:0 0 0 2px var(--paper)}
.go{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.links{display:flex;gap:.2em;flex-wrap:wrap;justify-content:center}
@media (max-height:600px){.logo{display:none}}
@media (max-height:430px){
  .tagline{display:none}.home-in{gap:8px;width:100%}.home .title{font-size:2em}.foot{display:none}
  .picks{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 18px}
  .links .link{min-height:40px;padding-top:.2em;padding-bottom:.2em}
}

/* the game: a bar over the board (portrait) or a column beside it (wide) */
#game{align-items:stretch}
.side{display:grid;grid-template-columns:auto 1fr 1fr auto;grid-template-areas:"menu a b undo" "st st st st" "tag tag tag tag";gap:8px 10px;align-items:center;
  padding:max(10px,env(safe-area-inset-top)) 12px 0;width:min(100%,720px);margin:0 auto;flex:none}
.tools{display:contents}
#menu{grid-area:menu}#undo{grid-area:undo}#score-1{grid-area:a}#score-2{grid-area:b}.status{grid-area:st}.mode-tag{grid-area:tag}
.score{display:flex;align-items:center;gap:.55em;padding:.4em .7em;border-radius:14px;background:var(--paper-hi);border:2px solid transparent;
  box-shadow:0 2px 8px rgba(28,37,48,.06);transition:border-color .2s,box-shadow .2s;min-width:0}
.score b{display:block;font-size:1.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.score small{display:block;color:var(--ink-soft);font-weight:700;font-size:.85em;line-height:1.1}
.score span{min-width:0}
.score.turn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chip{display:block;width:1.5em;height:1.5em;flex:none;position:relative}
.chip.x::before,.chip.x::after{content:"";position:absolute;left:44%;top:-4%;width:.24em;height:108%;border-radius:.2em;background:var(--x);transform:rotate(45deg)}
.chip.x::after{transform:rotate(-45deg)}
.chip.o{border:.22em solid var(--o);border-radius:50%}
.status{margin:0;text-align:center;font-weight:700;color:var(--ink);min-height:1.45em;font-size:1.05em}
.mode-tag{margin:0;text-align:center;color:var(--ink-dim);font-size:.85em;font-weight:600}
.stage{flex:1;min-height:0;min-width:0;display:grid;place-items:center;padding:6px;position:relative}
@media (max-height:520px) and (max-aspect-ratio:21/20){.mode-tag{display:none}}
@media (min-aspect-ratio:21/20){
  #game{flex-direction:row;justify-content:center}
  .side{display:flex;flex-direction:column;justify-content:center;gap:10px;width:clamp(150px,24vw,250px);margin:0;padding:12px 0 12px max(12px,env(safe-area-inset-left))}
  .tools{display:flex;justify-content:space-between}
  .stage{flex:0 1 auto;width:calc(var(--bs) + 24px)}
}

/* the board: tiles on a white card */
.board{position:relative;width:var(--bs);height:var(--bs);display:grid;gap:calc(var(--bs)*.024);padding:calc(var(--bs)*.03);
  background:var(--paper-hi);border-radius:calc(var(--bs)*.06);box-shadow:0 10px 30px rgba(28,37,48,.12),0 1px 0 rgba(28,37,48,.04);touch-action:manipulation}
.board.v3{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.board.v4{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}
.board.vu{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:calc(var(--bs)*.022);padding:calc(var(--bs)*.022)}
.cell{border:0;margin:0;padding:0;background:var(--tile);border-radius:calc(var(--bs)*.04);position:relative;min-width:0;min-height:0;
  display:grid;place-items:center;touch-action:manipulation;transition:background .15s,transform .1s}
.cell .mark{width:78%;height:78%;pointer-events:none}
.cell:focus{outline:none}
.board.kbd .cell.cur{box-shadow:inset 0 0 0 3px var(--accent),0 0 0 2px var(--accent-soft)}
@media (hover:hover){.board:not(.wait) .cell.free:hover{background:var(--tile-hi)}}
.board:not(.wait) .cell.free:active{transform:scale(.95)}
.cell.last{background:#E6ECF6}
.cell.bad{animation:shake .28s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.board.over .cell .mark{opacity:.3;transition:opacity .4s .2s}
.board.over .cell.win .mark{opacity:1}
.cell.win{background:#FFF1C9;animation:pulse .9s ease-in-out .35s 2 alternate}
@keyframes pulse{to{transform:scale(1.06)}}
.strike{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.strike path{fill:none;stroke-linecap:round;opacity:.92}
.strike path.sx{stroke:#B93A25}.strike path.so{stroke:#1F4FA8}
.strike path.draw{stroke-dasharray:1 1;stroke-dashoffset:1;animation:ink .4s .12s ease-out forwards}

/* ultimate: nine small boards */
.mini{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:calc(var(--bs)*.007);padding:calc(var(--bs)*.01);
  border-radius:calc(var(--bs)*.03);background:var(--tile);position:relative;min-width:0;min-height:0;transition:background .2s,box-shadow .2s}
.vu .cell{background:var(--paper-hi);border-radius:calc(var(--bs)*.012)}
.vu .cell .mark{width:80%;height:80%}
.vu .cell .mark path{stroke-width:14}
.vu .cell.last{background:#E6ECF6}
.mini.live{background:var(--accent-soft);box-shadow:0 0 0 calc(var(--bs)*.006) var(--accent)}
.mini.won .cell,.mini.drawn .cell{opacity:.32}
.mini .big{position:absolute;inset:8%;pointer-events:none;display:grid;place-items:center}
.mini .bigmark{width:100%;height:100%}
.mini .bigmark path{stroke-width:11}
.mini.flash{animation:flash .5s}
@keyframes flash{30%{box-shadow:0 0 0 calc(var(--bs)*.012) var(--accent);background:#D4E2FA}}
.board.over .mini:not(.win) .bigmark{opacity:.35;transition:opacity .4s .2s}
.mini.win{background:#FFF1C9}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}

/* cards */
.result .final{display:flex;justify-content:center;align-items:center;gap:.5em;margin:.2em 0 .3em}
.result .final .res{width:3.2em;height:3.2em}
.result .brand{margin:-.5em 0 .3em;font-weight:600;letter-spacing:.02em}
.note.small{font-size:.8em}
.how ul{padding-left:1.1em;margin:.2em 0 .5em}
.how li{margin:.15em 0}
.card .choices{margin-bottom:.6em}
.row-links{display:flex;flex-wrap:wrap;justify-content:center}
.stat-table{width:100%;border-collapse:collapse;text-align:center;margin:.2em 0 .5em}
.stat-table th,.stat-table td{padding:.35em .2em;border-bottom:1px solid var(--hair)}
.stat-table thead th{font-size:.75em;color:var(--ink-soft);font-weight:600}
.stat-table tbody th{text-align:left;font-weight:700}
.stat-table td{font-weight:700;font-size:1.05em}
@media (max-height:520px){
  .card{padding:.8em 1.1em .8em}
  .card h2{margin-bottom:.35em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .pill{padding:.55em 1.4em}
  .result .brand,.result .final{display:none}
}
@media (max-width:460px){.side{gap:8px 6px;padding-left:8px;padding-right:8px}.score{padding:.4em .5em;gap:.4em}.chip{width:1.25em;height:1.25em}}