/* Game One brand tokens, lifted from blocks.game-one.io.
   Sharp edges, hard drop shadows (no blur), Saira typography, signature cyan. */

:root {
  --background:           #ffffff;
  --foreground:           #19191a;
  --card:                 #ffffff;
  --card-foreground:      #19191a;
  --popover:              #ffffff;
  --popover-foreground:   #19191a;

  --primary:              #0099dc;
  --primary-foreground:   #fafafa;
  --secondary:            #f5f5f5;
  --secondary-foreground: #0099dc;
  --muted:                #f5f5f5;
  --muted-foreground:     #737373;
  --accent:               #f5f5f5;
  --accent-foreground:    #0099dc;
  --destructive:          #e30007;
  --destructive-foreground:#ffffff;
  --success:              #61c442;
  --success-foreground:   #ffffff;
  --border:               #e5e5e5;
  --input:                #343434;
  --ring:                 #0099dc;

  --chart-1: #80d5f1;
  --chart-2: #26b7e7;
  --chart-3: #00a3e0;
  --chart-4: #0090d8;
  --chart-5: #005a92;

  /* Layout */
  --radius: 0rem;
  --slant-clip-path: polygon(20px 0%, 100% 0, calc(100% - 20px) 100%, 0% 100%);

  /* Hard "stamp" shadows — 3px straight down, no blur. */
  --shadow-2xs: 0px 3px 0px .5px #0000000d;
  --shadow-xs:  0px 3px 0px .5px #0000000d;
  --shadow-sm:  0px 3px 0px .5px #0000001a, 0px 1px 2px -.5px #0000001a;
  --shadow:     0px 3px 0px .5px #0000001a, 0px 1px 2px -.5px #0000001a;
  --shadow-md:  0px 3px 0px .5px #0000001a, 0px 2px 4px -.5px #0000001a;
  --shadow-lg:  0px 3px 0px .5px #0000001a, 0px 4px 6px -.5px #0000001a;
  --shadow-xl:  0px 3px 0px .5px #0000001a, 0px 8px 10px -.5px #0000001a;
  --shadow-2xl: 0px 3px 0px .5px #00000040;

  --font-sans: "Saira", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --duration-fast: .15s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

html, body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* The HTML `hidden` attribute MUST win over component display rules. */
[hidden] { display: none !important; }

/* Reusable component primitives */

.g1-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
  font-size: .875rem;
  line-height: 1;
  border: 0;
  cursor: pointer;
  background: var(--primary);
  color: var(--primary-foreground);
  clip-path: var(--slant-clip-path);
  transition: transform var(--duration-fast) var(--ease),
              filter var(--duration-fast) var(--ease);
}
.g1-btn:hover  { filter: brightness(1.07); transform: translateY(-1px); }
.g1-btn:active { transform: translateY(1px); filter: brightness(.95); }
.g1-btn:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 4px;
}
.g1-btn[disabled] { opacity: .5; cursor: not-allowed; }
.g1-btn--ghost {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}
.g1-btn--ghost:hover { background: var(--secondary); filter: none; }
.g1-btn--destructive { background: var(--destructive); }
.g1-btn--success     { background: var(--success); }

/* Inputs */
.g1-input,
.g1-select,
.g1-textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
  padding: .75rem .875rem;
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}
.g1-input:hover, .g1-select:hover, .g1-textarea:hover {
  border-color: color-mix(in oklab, var(--input) 60%, var(--border));
}
.g1-input:focus, .g1-select:focus, .g1-textarea:focus {
  outline: 0;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent);
}
.g1-textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.g1-input[aria-invalid="true"],
.g1-select[aria-invalid="true"],
.g1-textarea[aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 22%, transparent);
}

/* Cards / surfaces — sharp, hard-shadowed */
.g1-card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}
.g1-card--elevated  { box-shadow: var(--shadow-lg); }
.g1-card--floating  { box-shadow: var(--shadow-xl); }

/* Slant tag — Game One signature */
.g1-tag {
  display: inline-flex;
  align-items: center;
  padding: .375rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
  background: var(--primary);
  color: var(--primary-foreground);
  clip-path: var(--slant-clip-path);
}
.g1-tag--ghost {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

/* Brand stripe — geometric divider */
.g1-stripe {
  height: 6px;
  background: repeating-linear-gradient(
    -78deg,
    var(--primary) 0 14px,
    transparent 14px 28px
  );
}

/* Sectioned layout */
.g1-shell {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Field row */
.g1-field { display: grid; gap: .5rem; }
.g1-field label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.g1-field .g1-helper {
  font-size: .8125rem;
  color: var(--muted-foreground);
}
.g1-field .g1-error {
  font-size: .8125rem;
  color: var(--destructive);
  font-weight: 500;
}

/* Recording indicator */
@keyframes g1-pulse {
  0%, 100% { box-shadow: 0 0 0 0   color-mix(in oklab, var(--destructive) 60%, transparent); }
  50%      { box-shadow: 0 0 0 14px color-mix(in oklab, var(--destructive) 0%,  transparent); }
}
.g1-rec-dot {
  width: .75rem;
  height: .75rem;
  border-radius: 999px;
  background: var(--destructive);
  animation: g1-pulse 1.4s var(--ease) infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}