@import url("https://fonts.googleapis.com/css2?family=Doto:ROND,wght@0..100,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gasoek+One&family=Honk&family=Roboto:wght@400;500;700;900&display=swap");

:root {
  --ink: #11100d;
  --cream: #fff8e7;
  --orange: #f45113;
  --amber: #ffad00;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; }
body { background: #080807; color: var(--cream); font-family: "Roboto", Arial, "Helvetica Neue", sans-serif; }
button { font: inherit; }

.prototype-shell { width: 100vw; height: 100svh; display: grid; place-items: center; overflow: hidden; background: #080807; }
.game-frame { --scale: 1; position: relative; width: min(100vw, 177.7778svh); height: min(100svh, 56.25vw); overflow: hidden; isolation: isolate; container-type: size; background: #333; box-shadow: 0 0 70px #000; }
.game-frame.size-compact { --scale: .88; }
.court { position: absolute; inset: 0; z-index: 0; background: #333 center / cover no-repeat; }
.court::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 35%, rgba(0,0,0,.22) 100%); pointer-events: none; }

.game-layer, .card-layer, .popover-layer { position: absolute; inset: 0; pointer-events: none; }
.game-layer { z-index: 2; }
.card-layer { z-index: 4; }
.popover-layer { z-index: 6; opacity: 0; }

.led-board { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .55cqh; color: #fff; background: #070707; border: .2cqw solid #292929; box-shadow: .4cqw .7cqw 1.2cqw rgba(0,0,0,.34), inset 0 0 1.2cqw #000; }
.led-label { color: #eee; font: 800 calc(2.15cqw * var(--scale)) / 1 "Doto", monospace; letter-spacing: .04em; }
.led-label.long { font-size: calc(1.7cqw * var(--scale)); }
.led-value { font: 800 calc(5.8cqw * var(--scale)) / 1 "Doto", monospace; letter-spacing: -.08em; text-shadow: 0 0 .45cqw currentColor; }
.team-identity { min-width: calc(10.4cqw * var(--scale)); display: flex; align-items: center; justify-content: center; gap: .62cqw; padding: .5cqh .5cqw; border: .1cqw solid var(--cream); background: var(--cream); font: 900 calc(.98cqw * var(--scale)) / 1 Arial, sans-serif; letter-spacing: .035em; }
.team-identity b { font: inherit; }
.team-identity i { font: 700 calc(1.45cqw * var(--scale)) / 1 Georgia, serif; letter-spacing: .1em; }
.team-identity.red { color: #d72a20; }
.team-identity.black { color: #111; }
.cpu-score, .player-score { width: calc(13.7cqw * var(--scale)); height: calc(22.2cqh * var(--scale)); padding: 1.2cqh .95cqw; }
.cpu-score { left: 3.8%; top: 24%; }
.player-score { right: 3.8%; top: 24%; }
.shot-clock { width: calc(9cqw * var(--scale)); height: calc(12cqh * var(--scale)); right: 5.3%; top: 49.5%; color: var(--amber); }
.shot-clock .led-value { font-size: calc(4.4cqw * var(--scale)); }

.possession-indicator { position: absolute; left: 50%; top: 45%; width: 10.5cqw; height: 7.5cqh; translate: -50% -50%; display: flex; align-items: center; justify-content: center; gap: .65cqw; color: #ededed; background: #070707; border: .2cqw solid #292929; box-shadow: .3cqw .5cqw .8cqw rgba(0,0,0,.3), inset 0 0 .8cqw #000; font: 800 1.55cqw / 1 "Doto", monospace; }
.possession-indicator strong { font: inherit; color: #fff; text-shadow: 0 0 .35cqw currentColor; }
.possession-indicator b { font: inherit; color: #4a3606; }
.possession-indicator b.active { color: var(--amber); text-shadow: 0 0 .45cqw currentColor; }

.game-controls { position: absolute; right: 2.6%; bottom: 2.8%; display: flex; gap: .45cqw; pointer-events: auto; }
.game-controls button { min-width: 5.4cqw; padding: .7cqh .65cqw; border: .13cqw solid rgba(255,255,255,.56); border-radius: .25cqw; color: rgba(255,255,255,.82); background: rgba(10,10,9,.86); font: 800 .68cqw / 1 Arial, sans-serif; letter-spacing: .08em; cursor: pointer; }
.game-controls button:hover { color: #111; border-color: var(--cream); background: var(--cream); }
.game-controls button:disabled { opacity: .38; cursor: not-allowed; }

.play-slot { color: #ffffffd6; border: .34cqw dashed #fffff6e8; place-items: center; width: 15.5cqw; height: 42cqh; display: grid; position: absolute; top: 24%; }
.play-slot > span { padding: .4cqh .55cqw; background: rgba(30,20,10,.55); font: 800 .82cqw / 1 Arial, sans-serif; letter-spacing: .12em; }
.cpu-slot { left: 26%; }
.player-slot { right: 26%; }
.slot-cards { position: absolute; inset: 0; }
.slot-cards > .played-card, .slot-cards > .played-card-stage { position: absolute; left: .45cqw; top: 1.4cqh; width: 14.6cqw; pointer-events: none; }
.slot-cards > :nth-child(1) { z-index: 1; }
.slot-cards > :nth-child(2) { z-index: 2; }
.slot-cards.card-count-2 > .played-card, .slot-cards.card-count-2 > .played-card-stage { left: -1.35cqw; }
.slot-cards.card-count-2 > :nth-child(1) { transform: rotate(-2deg); }
.slot-cards.card-count-2 > :nth-child(2) { transform: translate(3.6cqw, 1.1cqh) rotate(2deg); }
.played-card-stage { aspect-ratio: 5 / 7; perspective: 70cqw; }
.played-card-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.played-card-face { position: absolute; inset: 0; overflow: hidden; border-radius: .6cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.played-card-back { background: #c9501b; border: .3cqw solid #eee8da; box-shadow: .45cqw .8cqw 1.2cqw rgba(0,0,0,.36); }
.played-card-back img { display: block; width: 100%; height: 100%; object-fit: cover; }
.played-card-front { background: #fff; transform: rotateY(90deg); }
.played-card-front .played-card, .slot-cards > .played-card { width: 100%; height: 100%; background: #fff !important; opacity: 1; box-shadow: .45cqw .8cqw 1.2cqw rgba(0,0,0,.36); }
.played-card-stage.revealing .played-card-back { animation: flip-back-away 240ms ease-in both; }
.played-card-stage.revealing .played-card-front { animation: flip-front-in 240ms ease-out 240ms both; }
.played-card-stage.revealed-static .played-card-back { transform: rotateY(-90deg); visibility: hidden; }
.played-card-stage.revealed-static .played-card-front { transform: rotateY(0); }
@keyframes flip-back-away { from { transform: rotateY(0); } to { transform: rotateY(-90deg); visibility: hidden; } }
@keyframes flip-front-in { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }

.slot-total { position: absolute; z-index: 8; left: 50%; bottom: -7.2cqh; translate: -50% 0; min-width: 8.6cqw; min-height: 5.6cqh; padding: .55cqh .65cqw; display: grid; grid-template-columns: auto auto; align-items: center; gap: .1cqh .55cqw; color: #fff; background: #070707; border: .16cqw solid #292929; box-shadow: .28cqw .38cqw .6cqw rgba(0,0,0,.35); }
.slot-total span { font: 800 .55cqw / 1 Arial, sans-serif; letter-spacing: .09em; }
.slot-total strong { grid-row: 1 / span 2; grid-column: 2; font: 900 2.15cqw / .9 "Doto", monospace; text-shadow: 0 0 .28cqw currentColor; }
.slot-total b { color: var(--amber); font: 850 .55cqw / 1 Arial, sans-serif; }

.cpu-hand, .player-hand { position: absolute; left: 50%; display: flex; justify-content: center; align-items: flex-start; translate: -50% 0; }
.cpu-hand { top: -3.8cqh; }
.player-hand { bottom: -6cqh; pointer-events: auto; }
.card { position: relative; flex: 0 0 auto; width: calc(16cqw * var(--scale)); aspect-ratio: 5 / 7; border-radius: .6cqw; overflow: hidden; border: .3cqw solid #eee8da; box-shadow: .45cqw .8cqw 1.2cqw rgba(0,0,0,.36); }
.cpu-hand .card { width: calc(10.2cqw * var(--scale)); }
.cpu-hand .card + .card { margin-left: -1.1cqw; }
.cpu-hand .card:nth-child(1) { top: -2cqh; transform: rotate(3deg); }
.cpu-hand .card:nth-child(2) { top: -1cqh; transform: rotate(1.5deg); }
.cpu-hand .card:nth-child(3) { top: 0; }
.cpu-hand .card:nth-child(4) { top: -1cqh; transform: rotate(-1.5deg); }
.cpu-hand .card:nth-child(5) { top: -2cqh; transform: rotate(-3deg); }
.player-hand .card { appearance: none; padding: 0; cursor: pointer; transition: top 160ms ease, transform 160ms ease, filter 160ms ease; }
.player-hand .card + .card { margin-left: -3cqw; }
.player-hand .card:nth-child(1) { top: 3.5cqh; transform: rotate(-3deg); }
.player-hand .card:nth-child(2) { top: 1.25cqh; transform: rotate(-1.5deg); }
.player-hand .card:nth-child(3) { top: 0; }
.player-hand .card:nth-child(4) { top: 1.25cqh; transform: rotate(1.5deg); }
.player-hand .card:nth-child(5) { top: 3.5cqh; transform: rotate(3deg); }
.player-hand .card:hover { top: -3.5cqh; z-index: 10; filter: drop-shadow(0 1.4cqw 1cqw rgba(0,0,0,.35)); }
.card-back { padding: 0; background: #c9501b; }
.card-back img { display: block; width: 100%; height: 100%; object-fit: cover; }
.face-card { background: #fff; color: #17110c; }
.face-card.red { color: #d72a20; }
.corner { position: absolute; display: flex; flex-direction: column; align-items: center; font: 700 1.8cqw / 1 Georgia, serif; }
.corner b { font-size: 2.55cqw; }
.corner.top { left: .8cqw; top: .75cqw; }
.corner.bottom { right: .8cqw; bottom: .75cqw; rotate: 180deg; }
.face-card .suit { position: absolute; inset: 0; display: grid; place-items: center; font: 400 7cqw / 1 Georgia, serif; }

.popover-layer.active {
  opacity: 1;
  display: grid;
  place-items: center;
  /* Permanent safe area: result copy can never reach the frame edges. */
  padding: 8cqh 8cqw;
}
.callout {
  position: relative;
  max-width: 100%;
  color: var(--cream);
  rotate: -5deg;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.callout > strong {
  display: block;
  max-width: 78cqw;
  margin-inline: auto;
  font: 950 clamp(40px, 7.2cqw, 112px) / .84 Impact, sans-serif;
  letter-spacing: -.04em;
  text-shadow: .7cqw .7cqw 0 #111;
  -webkit-text-stroke: .22cqw #111;
}
.long-callout > strong { font-size: clamp(32px, 5.4cqw, 82px); line-height: .9; }
.opponent-dialogue {
  display: block;
  width: fit-content;
  max-width: min(64cqw, 860px);
  margin: 2.1cqh auto 0;
  padding: 1.15cqh 1.35cqw;
  color: #111;
  background: var(--cream);
  border: .14cqw solid #111;
  box-shadow: .34cqw .42cqw 0 #111;
  rotate: 2deg;
  font: 900 clamp(18px, 1.65cqw, 30px) / 1.08 "Roboto", Arial, sans-serif;
  letter-spacing: 0;
  text-shadow: none;
  -webkit-text-stroke: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.result-callout { animation: result-hit 420ms cubic-bezier(.18,.9,.25,1.35) both; }
.check-ball-layer { background: rgba(0,0,0,.12); animation: check-ball-layer 2s ease-in-out both; }
.check-ball-callout { color: var(--amber); animation: check-ball-hit 2s cubic-bezier(.18,.9,.25,1.15) both; }
.check-ball-callout > strong { font-size: clamp(44px, 8.5cqw, 132px); }
.banter-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 19cqh 9cqw 0;
  pointer-events: none;
}
.banter-toast {
  max-width: min(58cqw, 760px);
  padding: .9cqh 1.15cqw;
  color: #111;
  background: rgba(255,248,231,.96);
  border: .12cqw solid #111;
  box-shadow: .25cqw .3cqw 0 rgba(0,0,0,.9);
  font: 900 clamp(16px, 1.35cqw, 25px) / 1.1 "Roboto", Arial, sans-serif;
  text-align: center;
  text-wrap: balance;
}
@keyframes result-hit { 0% { opacity: 0; transform: scale(.72); } 65% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes check-ball-layer { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes check-ball-hit { 0% { opacity: 0; transform: scale(.74); } 16% { opacity: 1; transform: scale(1.05); } 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.02); } }

.quit-overlay, .pregame-overlay, .countdown-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0,0,0,.72); pointer-events: auto; }
.quit-panel, .pregame-panel { min-width: 28cqw; padding: 3cqh 2cqw; display: grid; place-items: center; gap: 1.2cqh; text-align: center; background: #080808; border: .2cqw solid #fff; box-shadow: 1cqw 1cqw 0 rgba(0,0,0,.4); }
.quit-panel h1, .pregame-panel h1 { margin: 0 0 1cqh; color: #fff; font: 900 3cqw / 1 Arial, sans-serif; }
.pregame-dialogue {
  max-width: 24cqw;
  margin: -.2cqh 0 1.2cqh;
  color: var(--cream);
  font: 700 clamp(15px, 1.05cqw, 20px) / 1.2 "Roboto", Arial, sans-serif;
  text-wrap: balance;
}
.pregame-panel > span { color: var(--amber); font: 800 .8cqw / 1 Arial, sans-serif; letter-spacing: .2em; }
.quit-panel button, .pregame-panel button { min-width: 18cqw; padding: 1.1cqh 1cqw; border: .12cqw solid #fff; color: #fff; background: transparent; font: 800 .82cqw / 1 Arial, sans-serif; letter-spacing: .08em; cursor: pointer; }
.quit-panel button:hover, .pregame-panel button:hover { color: #111; background: var(--cream); }
.pregame-panel .start-button { padding: 1.5cqh 1cqw; color: #111; background: var(--amber); border-color: var(--amber); font-size: 1.25cqw; }
.countdown-overlay { color: var(--amber); background: rgba(0,0,0,.52); font: 950 18cqw / .8 "Doto", monospace; text-shadow: 0 0 1.2cqw currentColor, .7cqw .8cqw 0 #111; }
.pre-game .game-layer, .pre-game .card-layer { opacity: 0; }

/* --------------------------------------------------------------------------
   TITLE SCREEN
   The title art is intentionally isolated from gameplay so bg.jpg and the
   logo can be swapped without touching the game UI.
   -------------------------------------------------------------------------- */
.title-frame {
  position: relative;
  isolation: isolate;
  background: #080807 url("./assets/bg.jpg") center center / cover no-repeat;
}
.title-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.03) 48%, rgba(0,0,0,.18) 100%),
    radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.16) 100%);
}

.title-logo {
  position: absolute;
  z-index: 2;
  top: -1.6cqh;
  left: 50%;
  width: 45cqw;
  height: auto;
  translate: -50% 0;
  pointer-events: none;
  user-select: none;
}

.title-control-bar {
  position: absolute;
  z-index: 3;
  top: 40.8cqh;
  left: 8.5cqw;
  width: 83cqw;
  height: 13.2cqh;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 1.2cqw;
  padding: 0 1.6cqw;
  background: rgba(0,0,0,.78);
}
.title-setting {
  display: flex;
  align-items: center;
  gap: 1.15cqw;
  min-width: 0;
}
.team-setting, .target-setting, .clock-setting { justify-content: center; }
.title-setting-label {
  color: #fff;
  font-family: "Roboto", Arial, sans-serif;
  font-size: clamp(15px, 1.18cqw, 20px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.title-control-bar button { cursor: pointer; }
.team-choice, .clock-choice, .target-choice {
  appearance: none;
  padding: .28cqh .08cqw;
  border: 0;
  color: #767676;
  background: transparent;
  font-family: "Doto", monospace;
  font-size: clamp(29px, 2.7cqw, 43px);
  font-weight: 800;
  line-height: .9;
  font-variation-settings: "ROND" 100;
  text-shadow: 0 0 .15cqw rgba(255,255,255,.12);
}
.team-choice:hover, .clock-choice:hover, .target-choice:hover { color: #fff; }
.team-choice.selected.red { color: #f00000; text-shadow: 0 0 .24cqw rgba(240,0,0,.55); }
.team-choice.selected.black { color: #ededed; text-shadow: 0 0 .2cqw rgba(255,255,255,.26); }
.clock-choice.selected { color: #ffd800; text-shadow: 0 0 .28cqw rgba(255,216,0,.56); }
.target-choice.selected { color: #ffd800; text-shadow: 0 0 .28cqw rgba(255,216,0,.56); }
.title-rules-button {
  position: absolute;
  z-index: 5;
  top: 3.2cqh;
  right: 2.6cqw;
  min-width: 9.2cqw;
  min-height: 5.8cqh;
  padding: .55cqh 1.05cqw;
  border: .1cqw solid rgba(255,255,255,.45);
  border-radius: .38cqw;
  color: #fff;
  background: rgba(0,0,0,.68);
  box-shadow: 0 .25cqh .45cqw rgba(0,0,0,.24);
  font-family: "Honk", system-ui;
  font-size: clamp(23px, 1.7cqw, 31px);
  font-weight: 400;
  line-height: .9;
  cursor: pointer;
}
.title-rules-button:hover { background: rgba(0,0,0,.94); border-color: rgba(255,255,255,.8); }

.opponent-prompt {
  position: absolute;
  z-index: 3;
  top: 59.7cqh;
  left: 50%;
  translate: -50% 0;
  min-width: 28cqw;
  padding: 1.25cqh 1.05cqw 1.1cqh;
  border-radius: .75cqw;
  color: #fff;
  background: rgba(0,0,0,.82);
  font-family: "Honk", system-ui;
  font-size: clamp(23px, 1.9cqw, 33px);
  font-weight: 400;
  line-height: .9;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 .32cqh .6cqw rgba(0,0,0,.32);
}

.opponent-select {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 6.8cqh;
  height: 19.2cqh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.7cqw;
  padding: 0 1.8cqw;
}
.opponent-option {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5cqw;
  padding: 1.1cqh 1.55cqw;
  overflow: visible;
  border: 0;
  border-radius: 1.35cqw;
  color: #fff;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease, transform 140ms ease;
}
.opponent-card {
  display: block;
  flex: 0 0 auto;
  width: 6.15cqw;
  max-height: 16.6cqh;
  aspect-ratio: 5 / 7;
  object-fit: contain;
  border: .12cqw solid #252525;
  border-radius: .22cqw;
  box-shadow: .22cqw .38cqw .45cqw rgba(0,0,0,.38);
  filter: grayscale(1) contrast(.94) brightness(.86);
  transition: filter 140ms ease, transform 140ms ease, opacity 140ms ease;
  opacity: .94;
}
.opponent-option.rook .opponent-card { transform: rotate(-11deg); }
.opponent-option.pro .opponent-card { transform: rotate(-12deg); }
.opponent-option.vet .opponent-card { transform: rotate(-12deg); }
.opponent-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.opponent-name {
  color: #fff;
  font-family: "Gasoek One", system-ui;
  font-size: clamp(37px, 3.9cqw, 61px);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.025em;
  white-space: nowrap;
  text-shadow: .2cqw .22cqw .22cqw rgba(0,0,0,.42);
}
.opponent-difficulty {
  margin-top: .25cqh;
  color: #fff;
  font-family: "Honk", system-ui;
  font-size: clamp(24px, 2.05cqw, 35px);
  font-weight: 400;
  line-height: .85;
  white-space: nowrap;
}

/* Rook is the initial visual selection. Hover/focus moves the white highlight
   and makes only the active opponent card full color. */
.opponent-option.rook { background: rgba(255,255,255,.56); }
.opponent-option.rook .opponent-card { filter: none; opacity: 1; }
.opponent-select:has(.opponent-option:hover) .opponent-option.rook,
.opponent-select:has(.opponent-option:focus-visible) .opponent-option.rook { background: transparent; }
.opponent-select:has(.opponent-option:hover) .opponent-option.rook .opponent-card,
.opponent-select:has(.opponent-option:focus-visible) .opponent-option.rook .opponent-card { filter: grayscale(1) contrast(.94) brightness(.86); opacity: .94; }
.opponent-option:hover, .opponent-option:focus-visible {
  background: rgba(255,255,255,.58);
  outline: none;
}
.opponent-option:hover .opponent-card, .opponent-option:focus-visible .opponent-card {
  filter: none !important;
  opacity: 1 !important;
  transform: rotate(-9deg) scale(1.025);
}
.title-rules-button:focus-visible, .team-choice:focus-visible, .target-choice:focus-visible, .clock-choice:focus-visible, .opponent-option:focus-visible {
  outline: max(3px, .18cqw) solid #fff;
  outline-offset: max(2px, .12cqw);
}

.rules-overlay { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 5cqh 4cqw; color: #171717; background: rgba(0,0,0,.82); pointer-events: auto; font-family: Arial, sans-serif; }
.rules-panel { width: min(58cqw, 900px); max-height: 88cqh; overflow: auto; padding: 2.8cqh 2.2cqw 2.5cqh; background: #f7f3e8; border: .28cqw solid #111; box-shadow: 1cqw 1.2cqw 0 rgba(0,0,0,.5); }
.rules-panel header { position: sticky; top: -2.8cqh; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; margin: -2.8cqh -2.2cqw 2.3cqh; padding: 2.3cqh 2.2cqw 1.8cqh; color: #fff; background: #111; }
.rules-panel header span { display: block; margin-bottom: .45cqh; color: var(--amber); font: 800 clamp(12px,.7cqw,15px) / 1 Arial, sans-serif; letter-spacing: .18em; }
.rules-panel header h1 { margin: 0; font: 950 clamp(38px,3.2cqw,62px) / .8 Impact, sans-serif; }
.rules-panel header button { padding: .8cqh .8cqw; color: #fff; background: transparent; border: .1cqw solid #777; font: 800 clamp(12px,.68cqw,15px) / 1 Arial, sans-serif; cursor: pointer; }
.rules-copy { display: grid; grid-template-columns: 1fr; gap: 2.2cqh; }
.rules-copy section { border-top: .16cqw solid #171717; padding-top: 1.1cqh; }
.rules-copy h2 { margin: 0 0 .7cqh; font: 900 clamp(16px,1.05cqw,22px) / 1.1 Arial, sans-serif; }
.rules-copy p { margin: 0; color: #34322d; font: 400 clamp(14px,.82cqw,18px) / 1.45 Arial, sans-serif; }
.rules-copy p + p { margin-top: .8cqh; }
.rules-done { display: block; width: 100%; margin-top: 2.5cqh; padding: 1.3cqh 1cqw; color: #fff; background: #111; border: 0; font: 850 clamp(14px,.82cqw,18px) / 1 Arial, sans-serif; cursor: pointer; }

.led-label, .led-value, .possession-indicator, .slot-total strong, .countdown-overlay { font-variation-settings: "ROND" 100; }


@media (prefers-reduced-motion: reduce) {
  .played-card-stage.revealing .played-card-back,
  .played-card-stage.revealing .played-card-front { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .result-callout,
  .check-ball-layer,
  .check-ball-callout { animation: none !important; opacity: 1; }
}

@media (max-aspect-ratio: 4/3) {
  .game-frame { width: 100vw; height: 56.25vw; }
}