/* C / De bomtafel. Paper artwork is raster; words, names and controls are
   live accessible text. This stylesheet never owns a clock or a life. */
.bomtafel {
  --table-bomb: url("assets/nachtzine/bomtafel/bomb-body-v1.png");
  --table-paper: url("assets/nachtzine/bomtafel/word-paper-v1.png");
  --table-mint: url("assets/nachtzine/bomtafel/mint-ticket-v1.png");
  --table-score: url("assets/nachtzine/bomtafel/score-paper-v1.png");
  --table-spark-a: url("assets/nachtzine/bomtafel/spark-a-v1.png");
  --table-spark-b: url("assets/nachtzine/bomtafel/spark-b-v1.png");
  /* One soft light above-left. Close contact + a lighter cast shadow follows
     each cutout's alpha, never a rectangular box or the printed lettering. */
  --table-shadow-flat: drop-shadow(1px 2px 1px #21152936) drop-shadow(2px 4px 3px #21152920);
  --table-shadow-raised: drop-shadow(1px 2px 1px #21152948) drop-shadow(3px 7px 5px #21152930);
  --table-shadow-object: drop-shadow(2px 3px 2px #21152950) drop-shadow(5px 10px 7px #21152930);
}
@supports (background-image: image-set(url("assets/nachtzine/bomtafel/bomb-body-v1.webp") type("image/webp"))) {
  .bomtafel {
    --table-bomb: image-set(url("assets/nachtzine/bomtafel/bomb-body-v1.webp") type("image/webp"), url("assets/nachtzine/bomtafel/bomb-body-v1.png") type("image/png"));
    --table-paper: image-set(url("assets/nachtzine/bomtafel/word-paper-v1.webp") type("image/webp"), url("assets/nachtzine/bomtafel/word-paper-v1.png") type("image/png"));
    --table-mint: image-set(url("assets/nachtzine/bomtafel/mint-ticket-v1.webp") type("image/webp"), url("assets/nachtzine/bomtafel/mint-ticket-v1.png") type("image/png"));
    --table-score: image-set(url("assets/nachtzine/bomtafel/score-paper-v1.webp") type("image/webp"), url("assets/nachtzine/bomtafel/score-paper-v1.png") type("image/png"));
    --table-spark-a: image-set(url("assets/nachtzine/bomtafel/spark-a-v1.webp") type("image/webp"), url("assets/nachtzine/bomtafel/spark-a-v1.png") type("image/png"));
    --table-spark-b: image-set(url("assets/nachtzine/bomtafel/spark-b-v1.webp") type("image/webp"), url("assets/nachtzine/bomtafel/spark-b-v1.png") type("image/png"));
  }
}
.bomtafel .royale-word-text { position: relative; }

/* Uncut original artwork, not a CSS silhouette with a texture on top. */
.bomtafel .bomb-case { inset: 0; background: var(--table-bomb) center / contain no-repeat; clip-path: none; filter: var(--table-shadow-object); }
.bomtafel .bomb-case::before, .bomtafel .bomb-neck, .bomtafel .bomb-glint { display: none; }
.bomtafel .bomb-wick { translate: 35% -22%; filter: var(--table-shadow-flat); }
.bomtafel .bomb-spark {
  margin-left: 35%; margin-top: -22%; width: 17%; height: 17%;
  background: var(--table-spark-a) center / contain no-repeat; clip-path: none; filter: var(--table-shadow-raised);
}
.bomtafel .bomb-spark::before { display: none; }
.bomtafel[data-phase="running"] .bomb-spark { animation: table-spark-poses 1s steps(1, end) infinite; }
.bomtafel .bomb-burst { background: var(--table-spark-b) center / contain no-repeat; clip-path: none; }
.bomtafel .bomb-burst::before, .bomtafel .bomb-burst::after { display: none; }
@keyframes table-spark-poses {
  0%, 100% { background-image: var(--table-spark-a); rotate: -8deg; }
  50% { background-image: var(--table-spark-b); rotate: 6deg; }
}
.bomtafel .royale-words > .paper-surface {
  inset: -28% -5%; width: auto; background: var(--table-paper) center / 100% 100% no-repeat;
  clip-path: none; filter: var(--table-shadow-raised);
}
.bomtafel .zine-button { filter: none; }
.bomtafel .zine-button::before {
  inset: -14% -3%; background: var(--table-mint) center / 100% 100% no-repeat;
  clip-path: none; background-blend-mode: normal; filter: var(--table-shadow-flat);
}
.bomtafel .zine-button:not(:disabled):active { filter: none; }
.bomtafel .zine-button:not(:disabled):active::before { filter: drop-shadow(0 1px 1px #21152945); }
.bomtafel .game-toggle > .royale-title-copy { font: inherit; }
.bomtafel .game-toggle:disabled > .royale-title-copy { visibility: visible; }
.bomtafel .stop-action::before { background-image: var(--table-paper); inset: -38% -8%; }
/* Mint belongs to the receiving player during play. The transport is still
   a broad paper button, but no longer a second equally loud green card. */
.bomtafel[data-phase="running"] .main-action::before { background-image: var(--table-paper); inset: -38% -6%; }

/* In the retained compact layout the new neck/fuse needs its own clearance.
   Scale the illustration inside its existing slot, never its layout track. */
@media (max-width: 900px), (max-height: 560px) {
  .bomtafel .royale-bomb { scale: .8; transform-origin: 0 100%; }
}

@media (min-width: 901px) and (min-height: 561px) {
  .bomtafel {
    display: block; padding: 0; height: calc(100svh - 64px); min-height: 580px;
    max-height: 1040px; container-type: inline-size;
    --table-title-size: clamp(25px, 3.15cqw, 57px);
  }
  .bomtafel .zine-poster, .bomtafel .royale-game, .bomtafel .royale-session { display: contents !important; }
  .bomtafel .poster-paper, .bomtafel .poster-back { display: none; }
  .bomtafel .royale-heading { position: absolute; z-index: 8; top: 5%; left: 3%; width: 25%; padding: 0; }
  .bomtafel .royale-heading .ink-label {
    width: 100%; color: var(--ink); padding: 16px 24px 18px;
    white-space: normal; font-size: var(--table-title-size); line-height: .98;
  }
  .bomtafel .royale-heading .ink-label::before {
    inset: -23% -5%; background: var(--table-paper) center / 100% 100% no-repeat;
    clip-path: none; transform: none; filter: var(--table-shadow-flat);
  }
  .bomtafel .game-toggle { position: relative; width: 100%; text-align: center; white-space: normal; line-height: inherit; min-height: 44px; justify-content: center; gap: 0; }
  .bomtafel .royale-title-copy { display: block; }
  .bomtafel .royale-title-line { display: block; white-space: nowrap; }
  .bomtafel .royale-title-line + .royale-title-line { font-size: 1.65em; }
  .bomtafel .game-toggle > .game-chevron { position: absolute; right: -14px; top: 50%; translate: 0 -50%; font-size: .48em; }
  .bomtafel .game-toggle {
    padding-block: .09em; margin-block: -.09em; letter-spacing: -.025em;
    background: linear-gradient(#19151bae, #19151bae), var(--xerox) 27px 13px / 300px;
    background-clip: text; -webkit-background-clip: text; color: transparent;
  }
  .bomtafel .zine-logo {
    z-index: 5; left: 3.5%; right: auto; width: 11%; transform: rotate(-4deg);
    /* Keep the real logo clear of the two-line title on low desktop windows. */
    top: max(24%, calc(5% + var(--table-title-size) * 2.6 + 52px));
  }
  .bomtafel .zine-logo img { background: var(--dark) var(--xerox) 0 0 / 450px; }
  .bomtafel .zine-character { z-index: 0; left: 25%; top: 18%; width: 15%; transform: rotate(-12deg); --show-rest-angle: -12deg; }
  .bomtafel .character-sprite { filter: var(--table-shadow-raised); }
  .bomtafel .character-backing { display: none; }

  .bomtafel .royale-board { position: absolute; inset: 0; display: block; width: auto; padding: 0; isolation: auto; }
  .bomtafel .royale-turn { display: contents; }
  /* The only visual player names are the fixed-seat cards. */
  .bomtafel .royale-player { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; margin: -1px; }
  .bomtafel .royale-words {
    position: absolute; z-index: 4; left: 19%; right: 19%; top: 42%; height: 29%;
    padding: 14px 0; gap: 6px; grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .bomtafel .royale-word-slot { justify-content: center; padding-inline: 6%; }
  .bomtafel .royale-word-text { position: relative; letter-spacing: -.025em; }
  .bomtafel .royale-bomb {
    position: absolute; z-index: 1; top: 20%; left: 50%; width: min(51%, 65svh);
    max-width: 780px; aspect-ratio: 1; translate: -50% 0; align-self: auto;
  }
  .bomtafel .royale-bomb .bomb-burst { inset: -2%; }
  .bomtafel .royale-scores { display: contents; }
  .bomtafel .royale-score {
    --score-name-ceiling: 48;
    --table-active-tint: #96d9af;
    --table-score-inset: -5% -6%; --table-score-flip: 1 1;
    position: absolute; z-index: 5; top: 76%; left: 4%; width: 21%; height: 17%;
    align-items: center; justify-content: center; gap: 8px; padding: 10px 22px;
    color: var(--ink); isolation: isolate; filter: var(--table-shadow-flat);
  }
  .bomtafel .royale-score::before {
    visibility: visible; inset: var(--table-score-inset); background: var(--table-score) center / 100% 100% no-repeat;
    scale: var(--table-score-flip);
    clip-path: none; transform: none; filter: none;
  }
  .bomtafel .royale-score:nth-child(even) { --table-score-flip: -1 1; }
  .bomtafel .royale-score:nth-child(3n) { --table-score-flip: 1 -1; }
  .bomtafel .royale-score::after {
    /* One sheet in both states. Only its pigment changes: this tint shares
       the original paper's exact alpha edge, insets and per-seat flip.
       The shadow belongs to the complete opaque card, not these mirrored
       layers or individual letters, so lighting never flips with the grain. */
    content: ""; position: absolute; z-index: -1; inset: var(--table-score-inset);
    background: var(--table-active-tint); mask: var(--table-score) center / 100% 100% no-repeat;
    scale: var(--table-score-flip); mix-blend-mode: multiply;
    opacity: 0; pointer-events: none;
  }
  .bomtafel .royale-score[data-active="true"]::after { opacity: 1; }
  .bomtafel .royale-score-name { height: 48px; text-align: center; color: var(--ink); }
  .bomtafel .royale-score-name {
    background: linear-gradient(#19151be0, #19151be0), var(--xerox) 19px 33px / 340px;
    background-clip: text; -webkit-background-clip: text; color: transparent;
  }
  .bomtafel .royale-score:nth-child(even) .royale-score-name { background-position: 0 0, 141px 87px; }
  .bomtafel .royale-score[data-active="true"] .royale-score-name { color: var(--ink); }
  .bomtafel .royale-score[data-eliminated="true"] { opacity: .5; }
  .bomtafel .paper-heart { width: 31px; height: 32px; background: var(--dark) var(--xerox) center / 260px; }
  .bomtafel .paper-heart[data-empty="true"] { --empty-heart: .12; }
  .bomtafel .royale-hearts { gap: 6px; }
  .bomtafel .royale-score:nth-child(2) { left: 39%; top: 5%; width: 22%; height: 18%; }
  .bomtafel .royale-score:nth-child(3) { left: 75%; }
  .bomtafel[data-player-count="2"] .royale-score:nth-child(2) { left: 75%; top: 76%; width: 21%; height: 17%; }
  /* The extra fourth seat sits outside the upper-right fuse arc. */
  .bomtafel[data-player-count="4"] .royale-score:nth-child(4) { top: 5%; left: 81%; width: 17%; height: 18%; padding-inline: 22px; }
  .bomtafel[data-player-count="4"] .royale-bomb { width: min(40%, 65svh); }

  /* Larger groups keep four seats per row. No seat disappears or recentres
     after elimination, and the central reading plane stays exactly fixed. */
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) { --large-table: 1; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score {
    --score-name-ceiling: 34; width: 19%; height: 13%; top: 78%; padding: 6px 22px; gap: 5px;
  }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score-name { height: 34px; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score:nth-child(1) { left: 6%; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score:nth-child(2) { left: 29%; top: 78%; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score:nth-child(3) { left: 52%; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score:nth-child(4) { left: 75%; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score:nth-child(5) { left: 32%; top: 7%; width: 15%; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score:nth-child(6) { left: 49%; top: 7%; width: 15%; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score:nth-child(7) { left: 66%; top: 7%; width: 15%; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score:nth-child(8) { left: 83%; top: 7%; width: 15%; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .paper-heart { width: 24px; height: 25px; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-bomb { top: 30%; width: min(42%, 55svh); }
  /* Keep the open fuse below the extra upper seats. Compress the drawing
     about its attachment point, not the bomb/words or the spark itself. */
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .bomb-wick { transform: scaleY(.6); transform-origin: 50% 34%; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .bomb-spark { top: calc(var(--spark-y) * .6 + 13.6%); }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .zine-character { left: 28%; top: 25%; width: 13%; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .stop-action::before { inset: -20% -8%; }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .zine-controls { top: 92%; height: 7%; }

  .bomtafel .zine-controls, .bomtafel:not([data-phase="setup"], [data-phase="loading"]) .zine-controls {
    position: absolute; z-index: 7; display: flex; flex-direction: column; align-items: center;
    top: 80%; left: 31%; width: 38%; height: 18%; padding: 0; gap: 16px;
  }
  .bomtafel .main-action, .bomtafel:not([data-phase="setup"], [data-phase="loading"]) .main-action {
    width: 100%; flex: 1 1 auto; min-height: 44px; font-size: clamp(25px, 3cqw, 48px); line-height: .9;
  }
  .bomtafel[data-phase="running"] .main-action { width: 84%; font-size: clamp(25px, 2.6cqw, 42px); }
  .bomtafel .stop-action, .bomtafel:not([data-phase="setup"], [data-phase="loading"]) .stop-action {
    width: auto; min-width: 95px; min-height: 44px; flex: 0 0 44px; font-size: clamp(23px, 2cqw, 30px); padding-inline: 22px;
  }
  .bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .zine-controls {
    top: 92%; height: 7%; flex-direction: row; width: 48%; left: 26%; gap: 24px;
  }

  .bomtafel .royale-result, .bomtafel[data-phase="matchEnd"] .royale-result {
    position: absolute; z-index: 6; left: 25%; top: 39%; width: 50%; height: 34%;
    display: flex; align-items: center; text-align: center; justify-content: center; padding: 12px 32px; gap: 9px;
    color: var(--ink); isolation: isolate;
  }
  .bomtafel .royale-result::after { content: ""; position: absolute; z-index: -1; inset: -23% -10%; background: var(--table-paper) center / 100% 100% no-repeat; filter: var(--table-shadow-raised); }
  .bomtafel .royale-result-label { font-size: clamp(25px, 2.4cqw, 40px); }
  .bomtafel #royaleResultName { width: 100%; line-height: .95; }
  .bomtafel .royale-result-hearts .paper-heart { width: 40px; height: 41px; }
  .bomtafel[data-phase="matchEnd"] .royale-result > * { max-width: 100%; }
  .bomtafel[data-phase="matchEnd"] #royaleResultName::before { display: none; }
  .bomtafel[data-phase="matchEnd"] .royale-result { padding-top: 48px; gap: 12px; }
  .bomtafel[data-phase="matchEnd"] .royale-result-label { font-size: clamp(25px, 2.2cqw, 34px); }
  .bomtafel[data-phase="matchEnd"] .royale-result::before {
    left: 50%; right: auto; top: -26%; translate: -50% 0;
    width: clamp(110px, 12cqw, 176px); height: auto; aspect-ratio: 115 / 72;
  }
  .bomtafel[data-phase="matchEnd"] .zine-controls { top: 85%; height: 10%; justify-content: flex-start; }
  .bomtafel[data-phase="matchEnd"] .main-action {
    width: min(100%, 300px); flex: 0 1 52px; min-height: 44px;
    font-size: clamp(24px, 2cqw, 32px);
  }
  .bomtafel[data-phase="matchEnd"] .main-action::before { background-image: var(--table-paper); inset: -28% -6%; }
  .bomtafel[data-phase="matchEnd"]:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .zine-controls {
    top: 92%; height: 7%; justify-content: center;
  }
  .bomtafel[data-phase="matchEnd"]:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .main-action { flex-basis: 300px; }
  .bomtafel[data-phase="matchEnd"] .zine-character { z-index: 3; }

  /* Setup also belongs to this table; the live board is inert underneath. */
  .bomtafel .royale-setup { position: absolute; top: 9%; bottom: 22%; left: 33%; right: 6%; display: grid; }
  .bomtafel .royale-setup-scroll { padding: 36px 40px; }
  .bomtafel[data-phase="setup"] .zine-character, .bomtafel[data-phase="loading"] .zine-character { left: 4%; top: 38%; width: 26%; }
  .bomtafel[data-phase="setup"] .zine-controls, .bomtafel[data-phase="loading"] .zine-controls { left: 42%; width: 40%; top: 83%; height: 11%; }
  .bomtafel[data-phase="setup"] .main-action { flex-basis: auto; }
  .bomtafel .royale-setup-hint { font-size: 19px; }
}

/* Native root completion anchors: no timer, no visual movement of the root.
   Alternate names allow rapid successive turns without forced reflow. */
.bomtafel[data-turn-event="start"][data-turn-take="a"] { animation: royale-turn-start-a 650ms; }
.bomtafel[data-turn-event="start"][data-turn-take="b"] { animation: royale-turn-start-b 650ms; }
.bomtafel[data-turn-event="handoff"][data-turn-take="a"] { animation: royale-turn-handoff-a 650ms; }
.bomtafel[data-turn-event="handoff"][data-turn-take="b"] { animation: royale-turn-handoff-b 650ms; }
.bomtafel[data-turn-event="clear"][data-turn-take="a"] { animation: royale-turn-clear-a 650ms; }
.bomtafel[data-turn-event="clear"][data-turn-take="b"] { animation: royale-turn-clear-b 650ms; }
@keyframes royale-turn-start-a { from { --table-cue: 0; } to { --table-cue: 1; } }
@keyframes royale-turn-start-b { from { --table-cue: 0; } to { --table-cue: 1; } }
@keyframes royale-turn-handoff-a { from { --table-cue: 0; } to { --table-cue: 1; } }
@keyframes royale-turn-handoff-b { from { --table-cue: 0; } to { --table-cue: 1; } }
@keyframes royale-turn-clear-a { from { --table-cue: 0; } to { --table-cue: 1; } }
@keyframes royale-turn-clear-b { from { --table-cue: 0; } to { --table-cue: 1; } }

/* Each printed paper object moves as one piece, including its text. The
   word plane only moves on start; the active name slip may nudge at rest.
   Receiver 0–240ms, host 240–600ms, unchanged 650ms completion anchor. */
.bomtafel .royale-score { --table-card-rest-angle: -2deg; transform: rotate(var(--table-card-rest-angle)); }
.bomtafel .royale-score:nth-child(even) { --table-card-rest-angle: 1deg; }
/* Most of a turn is a held pose. The small paper nudge only runs once the
   finite start/receive/clear reaction has finished; any new event or phase
   removes it immediately. This CSS loop never drives game time or input. */
@media (min-width: 901px) and (min-height: 561px) {
  .bomtafel[data-phase="running"][data-turn-event="none"] .royale-score[data-active="true"] {
    animation: table-attention 3.6s steps(1, end) infinite;
  }
}
.bomtafel[data-turn-event="start"] .royale-score { animation: table-deal 550ms steps(1, end) both; }
.bomtafel[data-turn-event="start"] .royale-words { animation: table-print 450ms steps(1, end) both; }
.bomtafel[data-turn-event="handoff"][data-turn-take="a"] .royale-score[data-active="true"] { animation: table-receive-a 240ms steps(1, end) both; }
.bomtafel[data-turn-event="handoff"][data-turn-take="b"] .royale-score[data-active="true"] { animation: table-receive-b 240ms steps(1, end) both; }
.bomtafel[data-turn-event="handoff"][data-turn-take="a"] .zine-character { animation: table-peek-a 360ms steps(1, end) 240ms both; }
.bomtafel[data-turn-event="handoff"][data-turn-take="b"] .zine-character { animation: table-peek-b 360ms steps(1, end) 240ms both; }
.bomtafel[data-turn-event="clear"] .royale-word-slot[data-cleared="true"] .royale-word-text::after { animation: table-cross 350ms steps(2, end) both; }
.bomtafel:not([data-turn-event="none"])[data-turn-take="a"] .main-action { animation: table-press-a 160ms steps(1, end) both; }
.bomtafel:not([data-turn-event="none"])[data-turn-take="b"] .main-action { animation: table-press-b 160ms steps(1, end) both; }
.bomtafel .royale-word-slot[data-cleared="true"] .royale-word-text { text-decoration: none; opacity: .48; }
.bomtafel .royale-word-slot[data-cleared="true"] .royale-word-text::after {
  content: ""; position: absolute; left: -2%; right: -2%; height: 6px; top: 52%;
  background: var(--dark) var(--xerox) 0 0 / 400px; transform: rotate(-2deg); transform-origin: left;
}
.bomtafel[data-phase="exploding"] .royale-score:has([data-losing="true"]) { animation: table-struck var(--show-loss) steps(1, end) both; }
@keyframes table-deal { 0% { transform: translateY(-6px) rotate(calc(var(--table-card-rest-angle) - 1.5deg)); } 45% { transform: translateY(2px) rotate(calc(var(--table-card-rest-angle) + 1deg)); } 100% { transform: rotate(var(--table-card-rest-angle)); } }
@keyframes table-print { 0% { transform: translateY(-4px) rotate(-.45deg); } 50% { transform: translateY(1px) rotate(.2deg); } 100% { transform: none; } }
@keyframes table-receive-a { 0% { transform: translateY(3px) rotate(calc(var(--table-card-rest-angle) - 1deg)); } 33% { transform: translateY(-2px) rotate(calc(var(--table-card-rest-angle) + 1deg)); } 66%, 100% { transform: rotate(var(--table-card-rest-angle)); } }
@keyframes table-receive-b { 0% { transform: translateY(3px) rotate(calc(var(--table-card-rest-angle) - 1deg)); } 33% { transform: translateY(-2px) rotate(calc(var(--table-card-rest-angle) + 1deg)); } 66%, 100% { transform: rotate(var(--table-card-rest-angle)); } }
@keyframes table-peek-a { 0%, 12% { transform: rotate(var(--show-rest-angle)); } 25% { transform: translateY(-7px) rotate(calc(var(--show-rest-angle) + 6deg)); } 62% { transform: translateY(-3px) rotate(calc(var(--show-rest-angle) + 2deg)); } 100% { transform: rotate(var(--show-rest-angle)); } }
@keyframes table-peek-b { 0%, 12% { transform: rotate(var(--show-rest-angle)); } 25% { transform: translateY(-7px) rotate(calc(var(--show-rest-angle) + 6deg)); } 62% { transform: translateY(-3px) rotate(calc(var(--show-rest-angle) + 2deg)); } 100% { transform: rotate(var(--show-rest-angle)); } }
@keyframes table-cross { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes table-press-a { 0% { transform: translateY(2px) rotate(.4deg); } 66%, 100% { transform: none; } }
@keyframes table-press-b { 0% { transform: translateY(2px) rotate(.4deg); } 66%, 100% { transform: none; } }
@keyframes table-struck { 0% { transform: rotate(var(--table-card-rest-angle)); } 8% { transform: translateY(4px) rotate(calc(var(--table-card-rest-angle) + 2deg)); } 20%, 100% { transform: rotate(var(--table-card-rest-angle)); } }
@keyframes table-attention {
  0%, 78%, 94%, 100% { transform: rotate(var(--table-card-rest-angle)); }
  82% { transform: translateY(-2px) rotate(calc(var(--table-card-rest-angle) + .45deg)); }
  88% { transform: translateY(-1px) rotate(calc(var(--table-card-rest-angle) - .3deg)); }
}
@media (hover: hover) and (pointer: fine) {
  .bomtafel .zine-button:not(:disabled):is(:hover, :focus-visible) { transform: rotate(-.65deg); }
  .bomtafel .zine-button:not(:disabled):active { transform: rotate(.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bomtafel { animation-duration: 1ms !important; }
  .bomtafel *, .bomtafel *::before, .bomtafel *::after { animation: none !important; }
  .bomtafel .zine-button { transform: none !important; translate: none !important; }
  .bomtafel[data-phase="running"] .royale-score[data-active="true"] .royale-score-name {
    text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px;
  }
}
@media (forced-colors: active) {
  .bomtafel { --table-shadow-flat: none; --table-shadow-raised: none; --table-shadow-object: none; }
  .bomtafel .royale-score, .bomtafel .royale-result, .bomtafel .royale-heading .ink-label { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
  .bomtafel .royale-score::before, .bomtafel .royale-result::after, .bomtafel .royale-heading .ink-label::before { background: Canvas; }
  .bomtafel .royale-score-name, .bomtafel .royale-score[data-active="true"] .royale-score-name { color: CanvasText; }
  .bomtafel .game-toggle { color: CanvasText; background: none; }
  .bomtafel .royale-score[data-active="true"] { outline: 3px solid Highlight; }
  .bomtafel .royale-score::after { display: none; }
  .bomtafel .royale-words > .paper-surface, .bomtafel .zine-button::before { background: Canvas; }
  /* The bitmap's transparent overscan is not part of the white fallback.
     Keep it inside the reading plane, so it cannot hide the bomb/host. */
  .bomtafel .royale-words > .paper-surface { inset: 0; width: auto; }
}