/* =========================================================================
   Activities: the hub's game cards and the four play activities (.act-*).
   Fracture Drift (.dft-*), Mischief Mirror (.mir-*), Crew Crossings (.crx-*) and
   Portrait Puzzles (.prt-*) share one shell (.act-play) and live in this one file.
   Colours are tokens; only art that belongs to the picture (a board's route colours,
   a canvas) is literal, and nothing relies on colour alone: routes carry numbers,
   states carry words. Hover rules sit in (hover: hover); 44px coarse-pointer floors
   close each block. Layout uses the site's 480 / 768 / 1024 lines.
   ========================================================================= */

/* ---- Hub: the staff-preview notice, the card grid, the resume strip ---- */
.act-painting { margin: 0 0 16px; }
.act-games { margin: 0 0 24px; }
.act-preview { display: inline-block; margin: 0 0 12px; white-space: normal; }
.act-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
    .act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.act-card {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px;
    border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface);
}
.act-card__art {
    width: 96px; height: 96px; border-radius: var(--radius-md); display: grid; place-items: center; overflow: hidden;
    /* A spotlight in the text colour, so a dark companion on a dark theme (or a pale one on a light theme) still reads. */
    background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--text-primary) 28%, var(--bg-subtle)) 0%, var(--bg-subtle) 80%);
    border: 1px solid var(--border-color);
}
.act-card__art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--text-primary) 60%, transparent)); }
.act-card__title { margin: 2px 0 4px; font-size: 1.1rem; }
.act-card__hook { margin: 0 0 10px; color: var(--text-secondary); font-size: 0.9rem; }
.act-card__foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.act-card__count, .act-card__need { color: var(--text-secondary); font-size: 0.85rem; margin: 0; }
@media (max-width: 480px) {
    .act-card { grid-template-columns: minmax(0, 1fr); }
    .act-card__art { width: 72px; height: 72px; }
}
.act-resume { margin: 0 0 18px; }
.act-resume__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.act-resume__item { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.act-resume__game { font-weight: 600; }
.act-resume__fact { color: var(--text-secondary); flex: 1 1 12ch; min-width: 0; overflow-wrap: anywhere; }

/* ---- The play shell ---- */
.act-play { container: act-play / inline-size; }
/* The engines hide controls with the hidden attribute; .btn and the tool rows set display, which beats the
   browser's own [hidden] rule, so a hidden "Put back" or Look arrow still showed. */
.act-play [hidden] { display: none !important; }
.act-play__head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; justify-content: space-between; }
.act-play__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.act-chip-save {
    display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--bg-subtle);
    border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.8rem; white-space: nowrap;
    /* One width for every state ("Saved", "Saving...", "Saving paused"): a chip that changes width re-wraps the
       header buttons and shifts the board under a player's thumb mid-game. */
    min-width: 9.5em; text-align: center; box-sizing: border-box;
}
.act-status {
    min-height: 1.5em; margin: 10px 0 0; color: var(--text-primary); font-size: 0.95rem; overflow-wrap: anywhere;
}
.act-notice {
    margin: 12px 0; padding: 10px 14px; border: 1px solid var(--color-warning); border-radius: var(--radius-md);
    background: var(--bg-subtle); color: var(--text-primary);
}
.act-notice .btn { margin: 6px 8px 0 0; }
.act-stage { margin: 12px 0; min-width: 0; }
.act-help { margin: 8px 0; color: var(--text-secondary); font-size: 0.9rem; max-width: 70ch; }
.act-help ul, .act-help ol { margin: 6px 0 6px 1.2em; padding: 0; }
.act-more { margin: 18px 0 0; border-top: 1px solid var(--border-color); padding-top: 10px; }
.act-more summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.act-code-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.act-code-row .input { flex: 1 1 14ch; min-width: 0; }
.act-recent { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.act-recent li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.act-recent__fact { flex: 1 1 14ch; min-width: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.act-recent__code { font-family: var(--font-mono); font-size: 0.8rem; overflow-wrap: anywhere; }

/* ---- Start panel: companion chips and choices ---- */
.act-start { display: grid; gap: 14px; max-width: 760px; }
.act-start fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.act-start legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.act-options { display: flex; flex-wrap: wrap; gap: 8px; }
.act-option {
    display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; min-height: 40px;
    border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface);
    cursor: pointer;
}
.act-option:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.act-option:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }
.act-reason { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.85rem; }
.act-chips { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.act-pet {
    position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: center;
    padding: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface);
    cursor: pointer; min-width: 0;
}
.act-pet:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.act-pet:has(input:disabled) { opacity: 0.65; cursor: default; }
.act-pet:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.act-pet input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.act-pet img { width: 72px; height: 72px; object-fit: contain; background: var(--bg-subtle); border-radius: var(--radius-sm); }
.act-pet__thumb { width: 72px; height: 72px; background: var(--bg-subtle); border-radius: var(--radius-sm); }
.act-pet__name { font-weight: 600; overflow-wrap: anywhere; }
.act-pet__species { color: var(--text-secondary); font-size: 0.8rem; display: block; }
.act-pet__chosen { display: none; font-size: 0.75rem; }
.act-pet:has(input:checked) .act-pet__chosen { display: inline-block; }
.act-pet__reason { grid-column: 1 / -1; font-size: 0.8rem; color: var(--text-secondary); position: relative; z-index: 1; }
/* Phones: two companions a row, picture above the name, so a big crew doesn't push Start a screen away. */
@container act-play (max-width: 479px) {
    .act-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .act-pet { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 4px; }
    .act-pet img, .act-pet__thumb { width: 56px; height: 56px; }
}
.act-pager { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.act-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.act-lantern-note { color: var(--text-secondary); font-size: 0.85rem; }

/* ---- Completion panel ---- */
.act-done { margin: 14px 0; padding: 14px; border: 1px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--bg-surface); }
.act-done h2 { margin: 0 0 6px; font-size: 1.1rem; }
.act-done__facts { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-secondary); }
.act-done__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.act-done__next { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

@media (pointer: coarse) {
    .act-option, .act-pet, .act-more summary { min-height: 44px; }
    .act-play .btn, .act-play button { min-height: 44px; }
}

/* ---- Crew Crossings (.crx-*) ---- */
.crx { --crx-c0: #37e0c0; --crx-c1: #f2b34b; --crx-c2: #c08bff; display: grid; gap: 12px; min-width: 0; }
.crx-title { margin: 0; color: var(--text-secondary); font-size: 0.9rem; overflow-wrap: anywhere; }
.crx-main { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@container act-play (min-width: 700px) {
    .crx-main { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
}
.crx-board-wrap { position: relative; width: 100%; max-width: 480px; min-width: 0; }
.crx-board { display: grid; gap: 2px; width: 100%; padding: 2px; border-radius: var(--radius-md); background: var(--bg-subtle); border: 1px solid var(--border-color); box-sizing: border-box; }
.crx-row { display: grid; grid-template-columns: repeat(var(--crx-cols), minmax(0, 1fr)); gap: 2px; }
.crx-cell {
    position: relative; aspect-ratio: 1; min-width: 0; min-height: 0; padding: 0; border-radius: 6px;
    border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); cursor: pointer;
}
.crx-cell[data-wall="true"] {
    cursor: default; border-color: transparent;
    background: repeating-linear-gradient(45deg, var(--bg-hover) 0 5px, var(--bg-subtle) 5px 10px);
}
.crx-cell:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; z-index: 2; }
.crx-cell[data-next="true"]::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; border-radius: 50%;
    transform: translate(-50%, -50%); border: 2px solid var(--color-primary);
}
.crx-cell[data-conflict="true"] { outline: 3px dashed var(--color-error); outline-offset: -3px; }
.crx-cell[data-conflict="true"]::after {
    content: '!'; position: absolute; right: 4px; top: 0; font-weight: 700; color: var(--color-error);
}
.crx-flag {
    position: absolute; right: 3px; bottom: 3px; min-width: 1.35em; height: 1.35em; padding: 0 3px; border-radius: 4px;
    display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: #140b1e; line-height: 1;
}
.crx-flag[data-route="0"] { background: var(--crx-c0); }
.crx-flag[data-route="1"] { background: var(--crx-c1); }
.crx-flag[data-route="2"] { background: var(--crx-c2); }
.crx-paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; padding: 2px; box-sizing: border-box; }
.crx-tokens { position: absolute; inset: 2px; pointer-events: none; }
.crx-token {
    position: absolute; width: calc(100% / var(--crx-cols) * 0.78); aspect-ratio: 1; transform: translate(-50%, -50%);
    transition: left 0.25s var(--ease), top 0.25s var(--ease);
}
body.reduced-motion .crx-token { transition: none; }
@media (prefers-reduced-motion: reduce) { .crx-token { transition: none; } }
.crx-token img { width: 100%; height: 100%; object-fit: contain; }
.crx-token[data-fallback="circle"] img { border-radius: 50%; background: var(--bg-surface); }
.crx-token__lantern {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font-weight: 700;
    background: var(--bg-surface); border: 2px solid var(--text-secondary); color: var(--text-primary);
}
.crx-token__num {
    position: absolute; left: -4px; top: -4px; min-width: 1.2em; height: 1.2em; border-radius: 50%; font-size: 0.7rem;
    font-weight: 700; display: grid; place-items: center; color: #140b1e;
}
.crx-token[data-route="0"] .crx-token__num { background: var(--crx-c0); }
.crx-token[data-route="1"] .crx-token__num { background: var(--crx-c1); }
.crx-token[data-route="2"] .crx-token__num { background: var(--crx-c2); }
.crx-token[data-selected="true"] { filter: drop-shadow(0 0 3px var(--color-primary)); }
.crx-side { display: grid; gap: 10px; min-width: 0; }
.crx-routes, .crx-buttons, .crx-replay, .crx-hints, .crx-options, .crx-trim { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crx-route {
    display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 4px 12px; cursor: pointer;
    border: 2px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary);
}
.crx-route img { width: 32px; height: 32px; object-fit: contain; }
.crx-route[aria-pressed="true"] { border-color: var(--color-primary); }
.crx-route[aria-pressed="true"] .crx-route__name::after { content: ' (selected)'; color: var(--text-secondary); font-size: 0.8em; }
.crx-route__num { font-weight: 700; }
.crx-scrub { flex: 1 1 140px; min-width: 0; }
.crx-scrub__text { font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; }
.crx-timeline { margin: 0; padding-left: 1.4em; font-size: 0.82rem; color: var(--text-secondary); font-family: var(--font-mono); }
.crx-timeline li { overflow-wrap: anywhere; }
.crx-conflict { margin: 0; padding: 8px 10px; border: 2px dashed var(--color-error); border-radius: var(--radius-md); background: var(--bg-subtle); }
.crx-conflict[hidden], .crx-hint-note[hidden] { display: none; }
.crx-hint-note { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
.crx[data-readonly="true"] .crx-cell { pointer-events: none; }
.crx[data-readonly="true"] .crx-buttons, .crx[data-readonly="true"] .crx-hints, .crx[data-readonly="true"] .crx-trim { display: none; }
@media (width < 768px) {
    body:has(.act-play[data-engine]) .campfire-dock { display: none; }
}
@media (pointer: coarse) {
    .crx-route, .crx-scrub { min-height: 44px; }
}

/* ---- Portrait Puzzles (.prt-*) ---- */
.prt { display: grid; gap: 10px; min-width: 0; }
.prt-title { margin: 0; color: var(--text-secondary); font-size: 0.9rem; overflow-wrap: anywhere; }
.prt-message { padding: 10px 14px; border: 1px solid var(--color-warning); border-radius: var(--radius-md); background: var(--bg-subtle); }
.prt-message[hidden], .prt-reference[hidden] { display: none; }
.prt-surface { display: grid; gap: 10px; min-width: 0; }
.prt-reference { max-width: 360px; }
.prt-reference img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.prt-table { width: 100%; min-width: 0; }
.prt-canvas { display: block; width: 100%; max-width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-subtle); touch-action: pan-y; }
.prt-canvas:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.prt-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prt-zoom { min-width: 3.2em; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }
.prt-tray { display: grid; gap: 8px; min-width: 0; }
.prt-tray__info { margin: 0; font-weight: 600; }
.prt-tray__cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.prt-card {
    position: relative; display: grid; place-items: center; min-width: 64px; min-height: 64px; padding: 4px; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary);
}
.prt-card canvas { width: 64px; height: 64px; }
.prt-card__label {
    position: absolute; left: 4px; top: 4px; min-width: 1.5em; padding: 0 4px; border-radius: var(--radius-sm); font-size: 0.75rem;
    font-weight: 700; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-color);
}
.prt-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.prt-pager { display: flex; gap: 8px; align-items: center; }
.prt-pager[hidden] { display: none; }
.prt-stats { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
@container act-play (min-width: 960px) {
    .prt[data-style="classic"] .prt-surface {
        grid-template-columns: minmax(0, 1fr) 300px; align-items: start;
    }
    .prt[data-style="classic"] .prt-surface > .prt-table { grid-column: 1; grid-row: 1 / span 4; }
    .prt[data-style="classic"] .prt-surface > .prt-tray { grid-column: 2; grid-row: 1 / span 4; }
}
/* tile swaps */
.prt-viewport { width: 100%; max-width: 640px; max-height: 80dvh; overflow: auto; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-subtle); }
.prt-board { display: grid; grid-template-columns: repeat(var(--prt-n), minmax(0, 1fr)); gap: 2px; padding: 2px; box-sizing: border-box; min-width: 100%; }
.prt-tile {
    position: relative; aspect-ratio: 1; min-width: 0; padding: 0; overflow: hidden; cursor: pointer;
    border: 2px solid var(--bg-subtle); border-radius: 4px; background: var(--bg-surface);
}
.prt-tile__img { position: absolute; inset: 0; background-repeat: no-repeat; transform-origin: center; }
.prt-tile[data-selected="true"] { border-color: var(--color-primary); outline: 3px solid var(--color-primary); outline-offset: -3px; z-index: 1; }
.prt-tile:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; z-index: 1; }
.prt-tile__mark {
    display: none; position: absolute; right: 2px; bottom: 2px; padding: 0 4px; border-radius: 4px; font-size: 0.75rem;
    background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-color);
}
.prt-tile[data-right="true"] .prt-tile__mark { display: block; }
.prt[data-readonly="true"] .prt-card, .prt[data-readonly="true"] .prt-tile { pointer-events: none; }
@media (pointer: coarse) {
    .prt-tile { min-width: 44px; min-height: 44px; }
}

/* ---- Mischief Mirror (.mir-*) ---- */
.mir { display: grid; gap: 10px; min-width: 0; }
.mir-title { margin: 0; color: var(--text-secondary); font-size: 0.9rem; overflow-wrap: anywhere; }
.mir-pair { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.mir-pair:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
@container act-play (min-width: 700px) {
    .mir-pair[data-view="pair"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mir-pane { min-width: 0; }
.mir-pane[hidden] { display: none; }
.mir-label { margin: 0 0 4px; font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); }
.mir-canvas { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-subtle); touch-action: pan-y; cursor: crosshair; }
.mir-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mir-kinds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--bg-surface); }
.mir-kinds[hidden], .mir-list[hidden], .mir-close[hidden] { display: none; }
.mir-found { margin: 0; color: var(--text-secondary); font-size: 0.9rem; overflow-wrap: anywhere; }
.mir-list__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mir-close { padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); }
.mir-close__title { margin: 0 0 8px; font-size: 1rem; }
.mir-close__pair { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.mir-close__pair figure { margin: 0; }
.mir-close__pair figcaption { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 2px; }
.mir-close__canvas { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.mir[data-readonly="true"] .mir-canvas { pointer-events: none; }
.mir[data-readonly="true"] .mir-kinds { display: none; }

/* staff QA page */
.mir-qa { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.mir-qa__card { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); min-width: 0; }
.mir-qa__table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.mir-qa__table th, .mir-qa__table td { padding: 2px 4px; text-align: left; border-bottom: 1px solid var(--border-color); overflow-wrap: anywhere; }

/* ---- Fracture Drift (.dft-*) ---- */
.dft { display: grid; gap: 8px; min-width: 0; }
.dft-title, .dft-hud, .dft-meter { margin: 0; overflow-wrap: anywhere; }
.dft-title { color: var(--text-secondary); font-size: 0.9rem; }
.dft-meter { color: var(--text-secondary); font-size: 0.85rem; }
.dft-frame { position: relative; width: 100%; max-width: 720px; }
.dft-canvas { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-subtle); touch-action: pan-y; }
.dft-canvas:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.dft-panel {
    position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 8px; padding: 16px;
    border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-surface) 88%, transparent); overflow: auto;
}
.dft-panel[hidden] { display: none; }
.dft-panel h3 { margin: 0; }
.dft-panel p { margin: 0; max-width: 46ch; }
.dft-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; max-width: 720px; }
.dft-pad {
    position: relative; width: 132px; height: 132px; border-radius: 50%; touch-action: none; flex: 0 0 auto;
    border: 2px solid var(--border-color); background: var(--bg-surface);
}
.dft-pad__knob {
    position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
    background: var(--color-primary); opacity: 0.85; pointer-events: none;
}
.dft-brake { width: 88px; height: 88px; border-radius: 50%; touch-action: none; }
.dft-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dft[data-readonly="true"] .dft-controls, .dft[data-readonly="true"] .dft-buttons { display: none; }
@media (hover: hover) and (pointer: fine) {
    .dft:not([data-touch="true"]) .dft-controls { display: none; }
}
@media (pointer: coarse) {
    .dft-touch-toggle { display: none; }
}

/* Last in the file so these floors win over each game's own block: the zoom and pan glyph buttons
   are 44px wide as well as tall, and a label around a checkbox is the 44px target. */
/* A quick second tap on the same tile or button is a second tap, never a double-tap zoom. */
.act-play button, .act-play label, .act-play summary { touch-action: manipulation; }
@media (pointer: coarse) {
    .act-play .btn, .act-play button { min-width: 44px; }
    .act-play label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
}