:root {
  color-scheme: light;
  --studio: #102739;
  --studio-deep: #071722;
  --studio-soft: #1b3b50;
  --sheet: #edf2f4;
  --sheet-bright: #ffffff;
  --ink: #101b24;
  --muted: #49616f;
  --line: #b9c8d0;
  --corner-blue: #2458c5;
  --corner-blue-dark: #173b88;
  --corner-red: #d9433f;
  --corner-red-dark: #8e2b2a;
  --signal: #f3be35;
  --signal-dark: #7b5900;
  --success: #147a59;
  --success-dark: #0b4d38;
  --danger: #bd342f;
  --focus: #ffd45d;
  --shadow-ink: #061018;
  --z-skip: 50;
  --z-dropdown: 60;
  --z-dialog: 80;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  touch-action: manipulation;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--studio);
}

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: var(--studio);
  color: var(--sheet);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

button,
input,
select,
summary {
  font: inherit;
}

button,
summary,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
summary {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 50%;
  z-index: var(--z-skip);
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--sheet-bright);
  color: var(--ink);
  font-weight: 800;
  transform: translate(-50%, -160%);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.site-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  width: 100%;
  min-width: 0;
  min-height: 100svh;
}

.topbar {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1180px, 100%);
  min-width: 0;
  max-width: 100%;
  min-height: 58px;
  margin: 0 auto;
  padding: 10px 20px;
}

.back-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #5b7687;
  border-radius: 8px;
  color: var(--sheet);
  font-weight: 750;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.back-link:hover {
  border-color: var(--sheet);
  background: var(--studio-soft);
}

.signal-mark {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
}

.signal-mark span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--sheet);
  color: var(--ink);
  font-size: 17px;
}

.signal-mark span:nth-child(2) {
  background: var(--signal);
}

.settings {
  position: relative;
  justify-self: end;
}

.settings summary {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #5b7687;
  border-radius: 8px;
  color: var(--sheet);
  font-weight: 750;
  list-style: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.settings summary::-webkit-details-marker {
  display: none;
}

.settings summary:hover,
.settings[open] summary {
  border-color: var(--sheet);
  background: var(--studio-soft);
}

.settings-panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: var(--z-dropdown);
  width: min(280px, calc(100vw - 28px));
  padding: 16px;
  border-radius: 10px;
  background: var(--sheet-bright);
  color: var(--ink);
  box-shadow: 0 7px 0 var(--shadow-ink);
}

.settings-panel label {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.settings-panel select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: var(--sheet-bright);
  color: var(--ink);
  font-size: 16px;
}

.settings-version {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.83rem;
}

.game-heading {
  width: min(980px, calc(100% - 32px));
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px 0 14px;
  text-align: center;
}

.title-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.game-heading h1 {
  margin: 0;
  color: var(--sheet-bright);
  font-size: 2rem;
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.game-heading p {
  max-width: 62ch;
  margin: 7px auto 0;
  color: #c7d5dc;
  font-size: 0.96rem;
  text-wrap: pretty;
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--corner-red);
  color: #fff;
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.live-chip i,
.capture-header i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: livePulse 1.3s ease-in-out infinite;
}

main {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 0 20px 46px;
  place-items: start center;
}

.screen {
  width: min(1080px, 100%);
  min-width: 0;
  max-width: 100%;
  border-radius: 14px;
  background: var(--sheet);
  color: var(--ink);
  box-shadow: 0 7px 0 var(--shadow-ink);
}

.mode-screen {
  display: grid;
  grid-template-areas:
    "intro strip"
    "actions actions"
    "privacy privacy"
    "alert alert";
  grid-template-columns: minmax(240px, 0.85fr) minmax(330px, 1.15fr);
  gap: 20px 28px;
  padding: 24px 28px 20px;
}

.mode-intro {
  grid-area: intro;
  align-self: center;
}

.sequence {
  margin: 0 0 8px;
  color: var(--corner-blue-dark);
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.mode-intro h2,
.setup-lead h2,
.match-screen h2 {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 880;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

.mode-intro > p:last-child {
  max-width: 45ch;
  margin: 10px 0 0;
  color: var(--muted);
  text-wrap: pretty;
}

.throw-strip {
  grid-area: strip;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 136px;
  gap: 8px;
}

.throw-frame {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--sheet-bright);
}

.throw-frame span {
  display: block;
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  filter: grayscale(0.08);
  transform: rotate(-7deg);
}

.throw-frame:nth-child(2) span {
  transform: rotate(4deg);
}

.throw-frame:nth-child(3) span {
  transform: rotate(8deg);
}

.throw-frame b {
  position: absolute;
  right: 7px;
  bottom: 5px;
  color: var(--muted);
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: 0.7rem;
}

.throw-frame-rock {
  border-bottom: 8px solid var(--corner-blue);
}

.throw-frame-scissors {
  border-bottom: 8px solid var(--signal);
}

.throw-frame-paper {
  border-bottom: 8px solid var(--corner-red);
}

.mode-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mode-button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 78px;
  gap: 14px;
  padding: 13px 16px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--sheet-bright);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 5px 0 var(--ink);
  transition:
    transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 150ms ease;
}

.mode-button:hover {
  background: #e1e9ed;
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--ink);
}

.mode-button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink);
}

.mode-button.camera-mode .mode-icon {
  background: var(--corner-blue);
  color: #fff;
}

.mode-button.button-mode .mode-icon {
  background: var(--signal);
  color: var(--ink);
  font-size: 0.67rem;
}

.mode-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: 1.35rem;
  font-weight: 900;
}

.mode-button strong {
  display: block;
  margin-bottom: 2px;
  font-size: 1.02rem;
}

.mode-button small {
  display: block;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.35;
}

.mode-arrow {
  font-size: 1.4rem;
  font-weight: 900;
}

.privacy-note {
  grid-area: privacy;
  margin: 0;
  color: var(--muted);
  font-size: 0.77rem;
  text-align: center;
}

.camera-alert {
  grid-area: alert;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fbdedb;
  color: #702320;
  font-weight: 750;
  text-align: center;
}

.setup-screen {
  max-width: 820px;
  padding: 30px;
  text-align: center;
}

.setup-lead {
  margin-bottom: 22px;
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--corner-blue);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 850;
}

.setup-rule {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.round-picks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.round-button {
  min-height: 96px;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--sheet-bright);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  transition:
    transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 150ms ease;
}

.round-button:hover {
  background: #dfe8ec;
}

.round-button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink);
}

.round-button strong {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: 2rem;
  line-height: 1;
}

.round-button span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.custom-round-form {
  display: grid;
  grid-template-columns: 1fr 96px auto;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 16px;
  border-radius: 10px;
  background: #dfe8ec;
  text-align: left;
}

.custom-round-form label {
  font-weight: 850;
}

.custom-round-form p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.custom-round-form input {
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: var(--sheet-bright);
  color: var(--ink);
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: 1.1rem;
  font-weight: 850;
  text-align: center;
}

.custom-round-form button,
.primary-action {
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--signal);
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 4px 0 var(--ink);
  transition:
    transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 140ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 140ms ease;
}

.custom-round-form button:hover,
.primary-action:hover {
  background: #ffd15d;
}

.custom-round-form button:active,
.primary-action:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}

.text-button {
  min-height: 42px;
  padding: 7px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--corner-blue-dark);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-button:hover {
  background: #dfe8ec;
}

.setup-screen > .text-button {
  margin-top: 18px;
}

.play-screen {
  padding: 14px;
}

.scoreboard {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(170px, 1.6fr) minmax(96px, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
}

.score-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  gap: 13px;
  padding: 8px 16px;
}

.score-player {
  background: var(--corner-blue);
}

.score-computer {
  background: var(--corner-red);
}

.score-corner span {
  font-size: 0.8rem;
  font-weight: 800;
}

.score-corner strong {
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.round-status {
  display: grid;
  min-height: 62px;
  place-content: center;
  padding: 7px 12px;
  text-align: center;
}

.round-status span {
  font-size: 0.98rem;
  font-weight: 900;
}

.round-status small {
  margin-top: 2px;
  color: #bcd0da;
  font-size: 0.7rem;
}

.play-layout {
  display: grid;
  min-height: 0;
  gap: 12px;
  margin-top: 12px;
}

body[data-game-mode="camera"] .play-layout {
  grid-template-columns: minmax(260px, 0.78fr) minmax(390px, 1.22fr);
}

body[data-game-mode="camera"] .capture-bay {
  grid-column: 1;
}

body[data-game-mode="camera"] .faceoff {
  grid-column: 2;
}

body[data-game-mode="buttons"] .play-layout {
  grid-template-columns: 1fr;
}

.capture-bay {
  overflow: hidden;
  border: 1px solid #385566;
  border-radius: 10px;
  background: var(--studio-deep);
  color: #fff;
}

.capture-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 8px 11px;
  background: var(--studio-soft);
  font-size: 0.72rem;
  font-weight: 850;
}

.capture-header > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.capture-header i {
  color: #3ac890;
}

#gesture-indicator {
  display: grid;
  min-width: 32px;
  height: 28px;
  padding: 0 5px;
  place-items: center;
  border-radius: 6px;
  background: #314d5d;
  font-size: 1rem;
}

#gesture-indicator[data-state="detected"] {
  background: var(--success);
}

#gesture-indicator[data-state="unclear"] {
  background: var(--signal);
  color: var(--ink);
}

.camera-viewport {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #03080c;
}

.camera-viewport video,
.camera-viewport canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.camera-viewport canvas {
  pointer-events: none;
}

.camera-reticle {
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(255, 255, 255, 0.58);
  pointer-events: none;
}

.camera-reticle::before,
.camera-reticle::after {
  position: absolute;
  width: 28px;
  height: 2px;
  background: rgba(255, 255, 255, 0.58);
  content: "";
}

.camera-reticle::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.camera-reticle::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}

.camera-caption {
  margin: 0;
  padding: 8px 11px;
  color: #c5d4dc;
  font-size: 0.72rem;
}

.faceoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.68fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 208px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--sheet-bright);
}

.hand-corner {
  display: grid;
  min-width: 0;
  place-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
}

.hand-corner span {
  font-size: 0.78rem;
  font-weight: 850;
}

.hand-corner strong {
  display: grid;
  min-width: 94px;
  min-height: 110px;
  place-items: center;
  border-radius: 10px;
  background: var(--sheet);
  font-size: clamp(3.8rem, 7.5vw, 6.1rem);
  line-height: 1;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 180ms ease;
}

.player-hand-corner strong {
  border-bottom: 8px solid var(--corner-blue);
}

.computer-hand-corner strong {
  border-bottom: 8px solid var(--corner-red);
}

.hand-corner strong[data-revealed="true"] {
  animation: handSnap 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.verdict-track {
  display: grid;
  min-width: 0;
  place-content: center;
  background: var(--ink);
  color: #fff;
  text-align: center;
}

.verdict-track b {
  color: #9fb3be;
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

#round-result {
  max-width: 13ch;
  margin: 12px auto 0;
  padding: 7px 8px;
  border-radius: 6px;
  background: #314553;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.25;
  text-wrap: balance;
}

#round-result[data-result="win"] {
  background: var(--success);
  animation: verdictSnap 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

#round-result[data-result="lose"] {
  background: var(--danger);
  animation: verdictSnap 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

#round-result[data-result="draw"] {
  background: var(--signal);
  color: var(--ink);
  animation: verdictSnap 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.choice-controls {
  min-width: 0;
  padding: 13px;
  border-radius: 10px;
  background: #dfe8ec;
}

.choice-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.choice-heading h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
}

.choice-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  width: 100%;
  gap: 10px;
}

.choice-button {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-width: 0;
  min-height: 70px;
  gap: 10px;
  padding: 9px 12px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--sheet-bright);
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  transition:
    transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 140ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 140ms ease;
}

.choice-button:hover {
  background: #f7fafb;
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--ink);
}

.choice-button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink);
}

.choice-button > span {
  font-size: 2.1rem;
  line-height: 1;
}

.choice-button strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: left;
}

.choice-button kbd {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 5px;
  background: var(--ink);
  color: #fff;
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: 0.7rem;
}

.choice-rock {
  border-bottom-color: var(--corner-blue);
}

.choice-scissors {
  border-bottom-color: var(--signal-dark);
}

.choice-paper {
  border-bottom-color: var(--corner-red);
}

.match-screen {
  max-width: 700px;
  padding: 30px;
  text-align: center;
}

.match-emblem {
  display: grid;
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 50%;
  background: var(--signal);
  font-size: 3.2rem;
}

.match-screen .sequence {
  margin-bottom: 7px;
}

.match-screen[data-result="win"] .match-emblem {
  background: #bce9d6;
}

.match-screen[data-result="lose"] .match-emblem {
  background: #f2c6c3;
}

.final-score {
  margin-top: 17px;
  color: var(--corner-blue-dark);
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.replay-hint {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.match-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.secondary-action {
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--sheet-bright);
  color: var(--ink);
  font-weight: 850;
}

.secondary-action:hover {
  background: #dfe8ec;
}

.version-stamp {
  position: fixed;
  bottom: 8px;
  left: 12px;
  z-index: 5;
  margin: 0;
  color: #a9bec9;
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: 0.65rem;
  pointer-events: none;
}

.round-dialog {
  width: min(430px, calc(100vw - 28px));
  padding: 26px;
  border: 0;
  border-radius: 12px;
  background: var(--sheet);
  color: var(--ink);
  box-shadow: 0 8px 0 var(--shadow-ink);
  text-align: center;
}

.round-dialog::backdrop {
  background: rgba(3, 12, 18, 0.78);
}

.dialog-signal {
  display: grid;
  width: 92px;
  height: 92px;
  margin: 0 auto 15px;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--sheet-bright);
  font-size: 3.6rem;
  transition:
    background-color 180ms ease,
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dialog-signal[data-ready="true"] {
  background: #bce9d6;
  transform: scale(1.05);
}

.round-dialog h2 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.15;
  text-wrap: balance;
}

.round-dialog > p {
  margin: 8px auto 0;
  color: var(--muted);
  text-wrap: pretty;
}

.dialog-countdown {
  margin: 14px auto 0;
  color: var(--corner-blue-dark);
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1;
  animation: countSnap 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.round-dialog[data-countdown-type="label"] .dialog-countdown {
  font-family: inherit;
  font-size: 1.35rem;
  line-height: 1.25;
}

.dialog-status {
  min-height: 1.4em;
  font-size: 0.86rem;
  font-weight: 700;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.round-dialog[data-phase="countdown"] .dialog-signal,
.round-dialog[data-phase="countdown"] .dialog-status,
.round-dialog[data-phase="countdown"] .dialog-actions {
  display: none;
}

.round-dialog[data-phase="retry"] .dialog-signal {
  background: #f2c6c3;
}

.ask-ai-fab {
  right: 16px !important;
  bottom: 76px !important;
}

@keyframes livePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.76);
  }
}

@keyframes handSnap {
  0% {
    transform: translateY(12px) rotate(-4deg) scale(0.84);
  }
  100% {
    transform: translateY(0) rotate(0) scale(1);
  }
}

@keyframes verdictSnap {
  0% {
    clip-path: inset(0 50% 0 50%);
    transform: scale(0.88);
  }
  100% {
    clip-path: inset(0);
    transform: scale(1);
  }
}

@keyframes countSnap {
  0% {
    opacity: 0.2;
    transform: scale(1.18);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 760px) {
  .topbar {
    padding-inline: 12px;
  }

  .signal-mark {
    gap: 2px;
  }

  .signal-mark span {
    width: 27px;
    height: 27px;
    font-size: 14px;
  }

  .back-link,
  .settings summary {
    min-height: 44px;
    padding: 7px 10px;
  }

  .back-link {
    font-size: 0.84rem;
  }

  .settings summary span:last-child {
    display: none;
  }

  .game-heading {
    width: calc(100% - 24px);
    padding-bottom: 11px;
  }

  .game-heading h1 {
    font-size: 1.55rem;
  }

  .game-heading p {
    font-size: 0.84rem;
  }

  main {
    padding: 0 10px 56px;
  }

  .mode-screen {
    grid-template-areas:
      "intro"
      "strip"
      "actions"
      "privacy"
      "alert";
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 20px 16px 17px;
  }

  .mode-intro {
    text-align: center;
  }

  .mode-intro > p:last-child {
    margin-inline: auto;
  }

  .throw-strip {
    min-height: 112px;
  }

  .mode-actions {
    grid-template-columns: 1fr;
  }

  .mode-button {
    min-height: 72px;
  }

  .setup-screen {
    padding: 22px 15px;
  }

  .round-picks {
    gap: 7px;
  }

  .round-button {
    min-height: 82px;
    padding-inline: 5px;
  }

  .round-button strong {
    font-size: 1.65rem;
  }

  .custom-round-form {
    grid-template-columns: 1fr 82px;
    gap: 10px;
  }

  .custom-round-form button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .play-screen {
    padding: 8px;
  }

  .scoreboard {
    grid-template-columns: minmax(80px, 1fr) minmax(120px, 1.25fr) minmax(80px, 1fr);
  }

  .score-corner {
    min-height: 54px;
    gap: 8px;
    padding: 6px 8px;
  }

  .score-corner strong {
    font-size: 1.6rem;
  }

  .round-status {
    min-height: 54px;
    padding-inline: 5px;
  }

  .round-status span {
    font-size: 0.8rem;
  }

  body[data-game-mode="camera"] .play-layout,
  body[data-game-mode="buttons"] .play-layout {
    grid-template-columns: 1fr;
  }

  body[data-game-mode="camera"] .capture-bay,
  body[data-game-mode="camera"] .faceoff {
    grid-column: 1;
  }

  .capture-bay {
    width: min(100%, 390px);
    margin-inline: auto;
  }

  .faceoff {
    grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr);
    min-height: 160px;
  }

  .hand-corner {
    padding: 9px;
  }

  .hand-corner strong {
    min-width: 64px;
    min-height: 84px;
    font-size: clamp(3rem, 17vw, 4.6rem);
  }

  #round-result {
    max-width: 10ch;
    padding-inline: 4px;
    font-size: 0.72rem;
  }

  .choice-heading {
    display: block;
    text-align: center;
  }

  .choice-heading p {
    margin-top: 3px;
  }

  .choice-row {
    gap: 7px;
  }

  .choice-button {
    grid-template-columns: 1fr;
    min-height: 88px;
    gap: 2px;
    padding: 7px 4px;
    text-align: center;
  }

  .choice-button > span {
    font-size: 2rem;
  }

  .choice-button strong {
    font-size: 0.77rem;
    text-align: center;
  }

  .choice-button kbd {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
  }

  .match-screen {
    padding: 24px 16px;
  }

  .match-actions {
    flex-direction: column;
  }

  .match-actions button {
    width: 100%;
  }
}

@media (max-height: 500px) and (min-width: 560px) and (orientation: landscape) {
  .site-shell {
    grid-template-rows: 44px 42px 1fr;
  }

  .topbar {
    min-height: 44px;
    padding: 3px 12px;
  }

  .back-link,
  .settings summary {
    min-height: 44px;
    padding-block: 4px;
  }

  .signal-mark span {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .game-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: calc(100% - 24px);
    padding: 2px 0 5px;
  }

  .game-heading h1 {
    font-size: 1.23rem;
  }

  .game-heading p {
    margin: 0;
    font-size: 0.74rem;
  }

  .live-chip {
    padding: 3px 6px;
  }

  main {
    padding: 0 10px 14px;
  }

  .screen {
    border-radius: 10px;
  }

  .mode-screen {
    grid-template-areas:
      "intro strip"
      "actions actions"
      "privacy privacy"
      "alert alert";
    grid-template-columns: minmax(190px, 0.7fr) minmax(320px, 1.3fr);
    gap: 8px 14px;
    padding: 10px 14px 9px;
  }

  .mode-intro {
    text-align: left;
  }

  .mode-intro h2 {
    font-size: 1.18rem;
  }

  .mode-intro > p:last-child {
    margin-top: 5px;
    font-size: 0.73rem;
  }

  .sequence {
    margin-bottom: 4px;
    font-size: 0.62rem;
  }

  .throw-strip {
    min-height: 82px;
  }

  .throw-frame span {
    font-size: 2.6rem;
  }

  .mode-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mode-button {
    min-height: 59px;
    gap: 9px;
    padding: 7px 11px;
    box-shadow: 0 3px 0 var(--ink);
  }

  .mode-icon {
    width: 38px;
    height: 38px;
  }

  .mode-button strong {
    font-size: 0.88rem;
  }

  .mode-button small {
    font-size: 0.68rem;
  }

  .privacy-note {
    font-size: 0.66rem;
  }

  .camera-alert {
    padding: 5px 8px;
    font-size: 0.7rem;
  }

  .setup-screen {
    max-width: 900px;
    padding: 12px 18px 10px;
  }

  .setup-lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 9px;
  }

  .setup-lead h2 {
    font-size: 1.18rem;
  }

  .mode-badge {
    margin: 0;
  }

  .setup-rule {
    margin: 0;
    font-size: 0.7rem;
  }

  .round-button {
    min-height: 63px;
    padding: 5px;
    box-shadow: 0 3px 0 var(--ink);
  }

  .round-button strong {
    font-size: 1.45rem;
  }

  .round-button span {
    margin-top: 2px;
    font-size: 0.68rem;
  }

  .custom-round-form {
    grid-template-columns: 1fr 80px auto;
    margin-top: 11px;
    padding: 8px 10px;
  }

  .custom-round-form p {
    display: none;
  }

  .custom-round-form input,
  .custom-round-form button {
    min-height: 44px;
  }

  .custom-round-form button {
    grid-column: auto;
    width: auto;
  }

  .setup-screen > .text-button {
    min-height: 44px;
    margin-top: 5px;
    padding-block: 2px;
  }

  .play-screen {
    padding: 7px;
  }

  .scoreboard {
    grid-template-columns: minmax(85px, 1fr) minmax(150px, 1.4fr) minmax(85px, 1fr);
  }

  .score-corner,
  .round-status {
    min-height: 42px;
  }

  .score-corner strong {
    font-size: 1.35rem;
  }

  .play-layout {
    gap: 7px;
    margin-top: 7px;
  }

  body[data-game-mode="camera"] .play-layout {
    grid-template-columns: minmax(235px, 0.72fr) minmax(330px, 1.28fr);
  }

  .capture-header {
    min-height: 31px;
    padding-block: 4px;
  }

  .camera-viewport {
    height: 151px;
    aspect-ratio: auto;
  }

  .camera-caption {
    display: none;
  }

  .faceoff {
    grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
    min-height: 183px;
  }

  .hand-corner {
    padding: 7px;
  }

  .hand-corner strong {
    min-width: 68px;
    min-height: 112px;
    font-size: 4.2rem;
  }

  .choice-controls {
    display: grid;
    grid-template-columns: minmax(155px, 0.5fr) minmax(390px, 1.5fr);
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
  }

  .choice-heading {
    display: block;
    margin: 0;
    text-align: left;
  }

  .choice-heading p {
    margin-top: 2px;
  }

  .choice-button {
    grid-template-columns: auto 1fr auto;
    min-height: 66px;
    gap: 8px;
    padding: 6px 9px;
  }

  .choice-button strong {
    text-align: left;
  }

  .choice-button kbd {
    position: static;
    width: 22px;
    height: 22px;
  }

  .match-screen {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "emblem sequence score"
      "emblem result score"
      "actions actions actions";
    align-items: center;
    max-width: 860px;
    gap: 2px 18px;
    padding: 16px 22px;
    text-align: left;
  }

  .match-emblem {
    grid-area: emblem;
    width: 72px;
    height: 72px;
    margin: 0;
    font-size: 2.6rem;
  }

  .match-screen .sequence {
    grid-area: sequence;
  }

  .match-screen h2 {
    grid-area: result;
    font-size: 1.35rem;
  }

  .final-score {
    grid-area: score;
    margin: 0;
    font-size: 3rem;
  }

  .replay-hint {
    display: none;
  }

  .match-actions {
    grid-area: actions;
    flex-direction: row;
    margin-top: 12px;
  }

  .match-actions button {
    width: auto;
    min-height: 44px;
  }

  .round-dialog {
    width: min(620px, calc(100vw - 30px));
    padding: 14px 18px;
  }

  .dialog-signal {
    float: left;
    width: 76px;
    height: 76px;
    margin: 0 18px 0 0;
    font-size: 3rem;
  }

  .round-dialog h2 {
    margin-top: 4px;
  }

  .dialog-countdown {
    margin-top: 4px;
    font-size: 4.2rem;
  }

  .dialog-actions {
    margin-top: 10px;
  }
}

@media (max-height: 500px) and (min-width: 560px) {
  .ask-ai-fab {
    top: 2px !important;
    right: 96px !important;
    bottom: auto !important;
  }
}

@media (max-height: 500px) and (min-width: 560px) and (max-width: 620px) {
  .mode-screen {
    grid-template-columns: minmax(150px, 0.65fr) minmax(0, 1.35fr);
  }

  body[data-game-mode="camera"] .play-layout {
    grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.35fr);
  }

  .choice-controls {
    grid-template-columns: minmax(125px, 0.45fr) minmax(0, 1.55fr);
  }

  .choice-button {
    gap: 4px;
    padding-inline: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}