:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --color-ink-950: #09131B;
  --color-ink-900: #0E1A24;
  --color-felt-900: #0D2C25;
  --color-felt-800: #12382F;
  --color-text-primary: #F4F7F4;
  --color-text-secondary: #B7C7C1;
  --color-paper: #F7F3EA;
  --color-paper-border: #C7C3B8;
  --color-focus-inner: #09131B;
  --color-focus-outer: #F7F3EA;
  --color-gold: #F2C46D;
  --color-danger: #F08383;
  --color-suit-heart: #B8323F;
  --color-suit-diamond: #8B5A12;
  --color-suit-club: #087F62;
  --color-suit-spade: #1E4C86;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: clamp(.6875rem, 1.8vw, .75rem);
  --text-sm: clamp(.75rem, 2vw, .875rem);
  --text-md: clamp(.875rem, 2.5vw, 1rem);
  --text-lg: clamp(1rem, 3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 4.5vw, 1.75rem);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --elevation-1: 0 1px 2px rgba(0, 0, 0, .24);
  --elevation-2: 0 4px 12px rgba(0, 0, 0, .28);
  --elevation-3: 0 10px 24px rgba(0, 0, 0, .34);
  --tap-min: 44px;
  --tap-preferred: 48px;
  --focus-inner: #09131B;
  --focus-outer: #F7F3EA;
  --outer-inset-portrait: 8px;
  --outer-inset-landscape: 6px;
  --card-aspect-ratio: 5 / 7;
  --card-grid-gap: 4px;
  --row-gap: 6px;
  --portrait-layout-width: 304px;
  --portrait-layout-height: 507px;
  --portrait-hud-height: 52px;
  --portrait-board-height: 160px;
  --portrait-last-trick-height: 48px;
  --portrait-hand-height: 229px;
  --landscape-layout-width: 468px;
  --landscape-layout-height: 287px;
  --landscape-hud-height: 44px;
  --landscape-board-height: 92px;
  --landscape-last-trick-height: 44px;
  --landscape-hand-height: 89px;
  --card-width: 44px;
  --card-height: 62px;
  --card-grid-gap-landscape: 2px;
  --pace-instant-hold: 0ms;
  --pace-fast-hold: 300ms;
  --pace-fast-travel: 120ms;
  --pace-normal-hold: 1200ms;
  --pace-normal-travel: 300ms;
  --z-shell: 0;
  --z-seats-table: 10;
  --z-cards-hud: 20;
  --z-table-status: 40;
  --z-sticky-chrome: 100;
  --z-drawer-backdrop: 200;
  --z-drawer-dialog: 210;
  --z-blocking-recovery: 300;
  --z-dev-test: 900;
  --kj-speed: 1;
  --kj-battery-saver: 0;
}

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

html,
body,
#app {
  min-width: 320px;
  min-height: 100%;
}

html {
  background: var(--color-ink-950);
  font-family: var(--font-ui);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--color-felt-900);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
}

button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

#app {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  isolation: isolate;
}

#screen-root,
#overlay-root,
#test-results {
  position: relative;
}

#screen-root {
  z-index: 0;
  min-height: 100%;
}

#overlay-root {
  z-index: 200;
}

#test-results {
  z-index: 900;
}

button,
a,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}

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

button,
[role="button"] {
  min-block-size: var(--tap-min);
}

a {
  color: var(--color-gold);
}

button {
  cursor: pointer;
}

button:disabled,
select:disabled,
input:disabled {
  cursor: default;
}

:focus-visible {
  outline: 2px solid var(--color-focus-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-focus-outer);
}

body.kj-orientation-portrait {
  --kj-shell-inset: var(--outer-inset-portrait);
}

body.kj-orientation-landscape {
  --kj-shell-inset: var(--outer-inset-landscape);
}

body.kj-reduced-motion *,
body.kj-reduced-motion *::before,
body.kj-reduced-motion *::after,
body.kj-battery-saver .kj-animating,
body.kj-battery-saver .kj-animating::before,
body.kj-battery-saver .kj-animating::after {
  animation-duration: 0ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0ms !important;
}

body.kj-document-hidden .kj-animating {
  animation-play-state: paused !important;
}

.kj-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kj-speed: 0;
  }
}

/* release-sim */

/* release-sim-2 */

/* ==== Wave C1 (2026-08-08): design tokens. Gold is reserved for active/selected/won. ==== */
:root {
  --radius-control: 10px;
  --radius-panel: 16px;
  --border-subtle: rgba(183, 199, 193, 0.28);
  --border-gold: rgba(242, 196, 109, 0.65);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
}