/* Quadflip: the tile board and the piece tray. Everything else is in shared/core.css.
   Tiles are two-sided: blank stock on one face, teal ink on the other. */
:root { --brand: var(--teal); --brand-text: var(--teal-text); --on-brand: var(--on-teal); }
.trio { grid-template-columns: repeat(2, 1fr); } /* two dailies: Easy and Hard */

/* The board is hit-tested by pointer position, left to right: it never mirrors */
.board { direction: ltr; }
.board {
  --n: 4; --gap: clamp(4px, calc(1.4 * var(--vw)), 8px);
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: var(--gap);
  width: min(440px, calc(100 * var(--vw) - 32px), calc(100 * var(--dvh) - 360px)); aspect-ratio: 1; padding: var(--gap);
  border-radius: 16px; background: var(--slot); box-shadow: inset 0 0 0 1px var(--hair);
  touch-action: none; user-select: none; -webkit-user-select: none; perspective: 900px;
}
.board:focus-visible { outline-offset: 4px; }
.board.mini { width: 104px; --gap: 4px; border-radius: 10px; margin: 0 auto 8px; }
#help-board { width: 92px; }

/* preserve-3d on the cell so the board's perspective reaches the tile; without it the flip renders as a flat squash */
.cell { position: relative; transform-style: preserve-3d; animation: enter .3s var(--d, 0ms) both var(--ease); }
.t { --th: 5px; position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s var(--fd, 0ms) var(--ease); }
.mini .t { --th: 2px; }
.t.on { transform: rotateY(180deg); }
.t::before, .t::after { content: ''; position: absolute; inset: 0; border-radius: 22%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* blank face: paper stock */
.t::before { transform: translateZ(calc(var(--th) / 2)); background: var(--grain), var(--stock); box-shadow: inset 0 0 0 1px var(--hair), var(--lift); }
/* inked face, printed a hair out of register */
.t::after { transform: rotateY(180deg) translateZ(calc(var(--th) / 2)); background: var(--speck), var(--brand); box-shadow: -2px 3px 0 var(--reg); }
/* the tile's thickness: two edge strips, seen side-on mid-flip. ponytail: straight edges only, rounded corners leave a sliver gap edge-on */
.t b, .t b::before, .t b::after { position: absolute; transform-style: preserve-3d; }
.t b { inset: 0; }
.t b::before, .t b::after { content: ''; top: 20%; bottom: 20%; width: var(--th); background: color-mix(in srgb, var(--brand) 55%, var(--ink)); }
.t b::before { left: 0; transform: translateX(-50%) rotateY(90deg); }
.t b::after { right: 0; transform: translateX(50%) rotateY(90deg); }
.mini .t::after { box-shadow: -1px 1.5px 0 var(--reg); }

/* where the selected piece would land */
.cell.ghost::after {
  content: ''; position: absolute; inset: -2px; border-radius: 24%; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 2.5px var(--ink); background: color-mix(in srgb, var(--sun) 32%, transparent);
}
/* used pieces: each one's outline in its own colour, over a stock halo so it reads on both faces */
.board { position: relative; }
.marks { position: absolute; inset: calc(var(--gap) / 2); width: calc(100% - var(--gap)); height: calc(100% - var(--gap)); pointer-events: none; z-index: 2; overflow: visible; }
.marks path { fill: none; stroke: var(--c); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.marks .halo { stroke: var(--stock); stroke-width: 6px; }
.t.pop { animation: tpop .24s var(--fd, 0ms) var(--ease) backwards; }
@keyframes tpop { from { scale: .88; } }
.board.shake { animation: shake .4s; }

/* solved: a wave runs across the blank board */
.board.solved .cell { animation: wave .6s var(--d, 0ms) both var(--ease); }
.board.solved .t::before { background: var(--grain), color-mix(in srgb, var(--sun) 35%, var(--stock)); transition: background .3s; }

/* ---------- tray ---------- */
.tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; max-width: 440px; }
.piece {
  width: 56px; height: 56px; padding: 7px; border: 0; border-radius: 12px; display: grid; place-items: center;
  background: var(--grain), var(--stock); box-shadow: inset 0 0 0 1px var(--hair), var(--lift);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), opacity .2s;
}
.piece svg { width: 100%; height: 100%; stroke: none; fill: var(--brand); }
.piece[aria-pressed="true"] { background: var(--speck), var(--sun); box-shadow: 2px 3px 0 var(--reg); transform: translate(-1px, -2px); }
.piece[aria-pressed="true"] svg { fill: var(--navy); }
/* used: an empty dotted slot with the piece's outline */
.piece.used { background: radial-gradient(circle, var(--dot) .9px, transparent 1.25px) 0 0 / 5px 5px; box-shadow: inset 0 0 0 1px var(--hair); }
.piece.used svg { fill: none; stroke: var(--c, var(--muted)); stroke-width: .09; stroke-dasharray: .16 .1; }
.piece.hinted svg { stroke: var(--sun-text); stroke-dasharray: none; }
.piece:disabled { cursor: default; }
@media (hover: hover) { .piece:not(:disabled):not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--ink), var(--lift); } }

/* keep board, tray, tip and tools together in the middle */
#game .board-wrap { flex: 0 0 auto; margin-top: auto; }
#game .tools { margin: 6px 0 auto; padding-bottom: 8px; }
#game .tip { margin: 10px 0 0; }

#logo { margin-bottom: 6px; transform: rotate(-4deg); }

@media (orientation: landscape) and (max-height: 540px) {
  .board:not(.mini) { width: min(calc(100 * var(--dvh) - 90px), calc(100 * var(--vw) - 380px)); }
  .tray { grid-column: 2; grid-row: 2; align-self: end; max-width: 300px; }
}

@media (pointer: coarse) and (min-width: 700px) and (min-height: 700px) {
  .board:not(.mini) { width: min(620px, calc(100 * var(--vw) - 64px), calc(100 * var(--dvh) - 480px)); border-radius: 22px; }
  .tray { gap: 12px; max-width: 620px; margin-top: 20px; }
  .piece { width: 72px; height: 72px; padding: 9px; border-radius: 14px; }
}
@media (pointer: coarse) and (orientation: landscape) and (min-height: 700px) {
  .board:not(.mini) { width: min(calc(100 * var(--dvh) - 120px), calc(100 * var(--vw) - 480px)); }
  #game .tray { grid-column: 2; grid-row: 2; align-self: end; max-width: 400px; margin-bottom: 18px; }
}

/* help text per input: touch aims by press-and-drag, mouse/keyboard by hover/click */
.touch { display: none; }
@media (hover: none) { .touch { display: list-item; } .no-touch { display: none; } }
/* the tutorial's stamp spot: a dashed outline, ringed (pulsing) while the coach points at it */
.tut-spot { display: none; z-index: 3; outline: none !important; animation: none !important; }
.tut-spot.coach-at { display: block; }
.tut-spot path { stroke: var(--ink); stroke-width: 4px; stroke-dasharray: 6 5; animation: tut-spot 1.2s ease-in-out infinite; }
@keyframes tut-spot { 50% { stroke-opacity: .35; } }
[data-calm] .tut-spot path { animation: none; }