/* =============================================================
   PLAYWOO — DESIGN SYSTEM
   Dark purple base, white accent. Buttons are extruded: a molded
   body with a lip along the bottom edge, pressed by translating
   down and shrinking the lip.

   This file owns tokens + primitives ONLY. App-specific layout
   lives in style.css and consumes these tokens.

   Source of truth for the extrusion recipe: "button extrusion.html".
   Source of truth for palette + panels: "Playwoo UI Kit".
   ============================================================= */

/* ---------- Fonts ---------- */
/* ZiyadaSkar = display (titles, scores, numbers). Verified to carry
   all 22 Latvian diacritics, so it is safe for headline copy. */
@font-face {
  font-family: 'ZiyadaSkar';
  src: url('assets/ZiyadaSkar.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'TTBlack';
  src: url('assets/TTBlack.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'TTBold';
  src: url('assets/TTBold.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'TTReg';
  src: url('assets/TTReg.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: block;
}

:root {
  /* ---------- Surfaces ---------- */
  --pw-bg:          #15073A;  /* page */
  --pw-bg-deep:     #0E0327;  /* vignette edge */
  --pw-panel:       #1D0A44;  /* flat panel */
  --pw-panel-top:   #2B1263;  /* raised panel gradient, top */
  --pw-panel-bot:   #1B0A40;  /* raised panel gradient, bottom */
  --pw-well:        #170836;  /* inset / pressed / disabled */

  /* ---------- Purple (primary surface + secondary button) ---------- */
  --pw-purple:      #4E098D;  /* molded purple body */
  --pw-purple-lip:  #38055B;  /* its bottom lip */
  --pw-purple-sheen:#8D54EB;  /* its top inner highlight */
  --pw-btn-top:     #3F0F7D;  /* purple button gradient, top */
  --pw-btn-bot:     #2D095D;  /* purple button gradient, bottom */
  /* Board cells sit ON a panel, so they need to be lighter than a button on
     the page background or they disappear into it. */
  --pw-cell-top:    #7328C9;
  --pw-cell-bot:    #4E098D;
  --pw-edge:        #4B0B9C;  /* button outline */
  --pw-accent:      #6A2CFF;  /* bright accent: badges, active states */

  /* ---------- White (primary button / accent) ---------- */
  --pw-white:       #FFFFFF;
  --pw-white-top:   #F8F3FF;  /* white button gradient, top */
  --pw-white-bot:   #F0E9FF;  /* white button gradient, bottom */
  --pw-white-lip:   #A988E8;  /* its lilac bottom lip */
  --pw-ink:         #3F0F7D;  /* text ON white */

  /* ---------- Text tiers (on dark) ---------- */
  --pw-text:        #FFFFFF;
  --pw-text-2:      #C9A9FF;
  --pw-text-3:      #B48CF2;
  --pw-text-4:      #8863C4;
  --pw-text-off:    #4A3872;  /* disabled */

  /* ---------- Semantic (correct / wrong only) ---------- */
  --pw-green:       #02CC35;
  --pw-green-dark:  #019426;
  --pw-green-lip:   #006319;
  --pw-green-sheen: #54EB7A;
  --pw-red:         #D92D3A;
  --pw-red-dark:    #A31722;
  --pw-red-lip:     #6E0F17;

  /* ---------- Geometry ---------- */
  --pw-lip:         8px;   /* button extrusion depth */
  --pw-lip-sm:      5px;
  --pw-lip-lg:     11px;
  --pw-r:          18px;   /* button radius */
  --pw-r-lg:       22px;
  --pw-r-panel:    26px;

  /* ---------- Type ---------- */
  --pw-font-display: 'ZiyadaSkar', 'TTBlack', system-ui, sans-serif;
  --pw-font-black:   'TTBlack', system-ui, sans-serif;
  --pw-font-bold:    'TTBold', system-ui, sans-serif;
  --pw-font-body:    'TTReg', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* =============================================================
   BUTTONS — the extrusion
   The lip is built with inset shadows so the button stays a single
   box: a colored band along the bottom, with a hairline under it.
   Pressing translates down and shortens the lip, so the button
   visibly sinks into the page rather than just moving.
   ============================================================= */
.pw-btn,
.sc-btn {
  --lip: var(--pw-lip);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
  white-space: nowrap;
  font-family: var(--pw-font-black);
  font-size: 1.05rem;
  letter-spacing: 1px;
  border: 2px solid var(--pw-edge);
  border-radius: var(--pw-r);
  /* Extra bottom padding keeps the label optically centred above the lip. */
  padding: 13px 22px calc(13px + var(--lip) * 0.75);
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.12s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* --- Primary: white --- */
.pw-btn--white,
.sc-btn--white {
  background-image: linear-gradient(0deg, var(--pw-white-bot) 0%, var(--pw-white-top) 100%);
  color: var(--pw-ink);
  box-shadow:
    inset 0 calc(-1 * var(--lip)) 0 2px var(--pw-white-lip),
    inset 0 calc(-1 * var(--lip) - 3px) 0 0 var(--pw-white),
    0 7px 14px rgba(0, 0, 0, 0.35);
}
.pw-btn--white:active,
.sc-btn--white:active {
  --lip: 3px;
  transform: translateY(5px);
  box-shadow:
    inset 0 calc(-1 * var(--lip)) 0 2px var(--pw-white-lip),
    0 2px 5px rgba(0, 0, 0, 0.35);
}

/* --- Secondary: purple --- */
.pw-btn--purple,
.sc-btn--purple {
  background-image: linear-gradient(0deg, var(--pw-btn-bot) 0%, var(--pw-btn-top) 100%);
  color: var(--pw-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 calc(-1 * var(--lip)) 0 2px var(--pw-purple-lip),
    inset 0 3px 1px rgba(145, 38, 253, 0.5),
    0 7px 14px rgba(0, 0, 0, 0.4);
}
.pw-btn--purple:active,
.sc-btn--purple:active {
  --lip: 3px;
  transform: translateY(5px);
  box-shadow:
    inset 0 calc(-1 * var(--lip)) 0 2px var(--pw-purple-lip),
    inset 0 3px 1px rgba(145, 38, 253, 0.5),
    0 2px 5px rgba(0, 0, 0, 0.4);
}

/* --- Semantic: green / red. Reserved for correct / wrong. --- */
.pw-btn--green,
.sc-btn--green {
  background-image: linear-gradient(0deg, var(--pw-green-dark) 0%, var(--pw-green) 100%);
  border-color: var(--pw-green-lip);
  color: var(--pw-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 calc(-1 * var(--lip)) 0 2px var(--pw-green-lip),
    inset 0 3px 1px var(--pw-green-sheen),
    0 7px 14px rgba(0, 0, 0, 0.4);
}
.pw-btn--green:active,
.sc-btn--green:active {
  --lip: 3px;
  transform: translateY(5px);
  box-shadow:
    inset 0 calc(-1 * var(--lip)) 0 2px var(--pw-green-lip),
    inset 0 3px 1px var(--pw-green-sheen),
    0 2px 5px rgba(0, 0, 0, 0.4);
}

.pw-btn--red,
.sc-btn--red {
  background-image: linear-gradient(0deg, var(--pw-red-dark) 0%, var(--pw-red) 100%);
  border-color: var(--pw-red-lip);
  color: var(--pw-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 calc(-1 * var(--lip)) 0 2px var(--pw-red-lip),
    inset 0 3px 1px rgba(255, 130, 140, 0.5),
    0 7px 14px rgba(0, 0, 0, 0.4);
}
.pw-btn--red:active,
.sc-btn--red:active {
  --lip: 3px;
  transform: translateY(5px);
}

/* Legacy variants from the old gold/Supercell kit. Nothing in the new
   palette is blue or orange — fold them onto purple so any stale markup
   still renders correctly rather than falling through to an unstyled box. */
.sc-btn--blue,
.sc-btn--orange {
  background-image: linear-gradient(0deg, var(--pw-btn-bot) 0%, var(--pw-btn-top) 100%);
  color: var(--pw-text);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 calc(-1 * var(--lip)) 0 2px var(--pw-purple-lip),
    inset 0 3px 1px rgba(145, 38, 253, 0.5),
    0 7px 14px rgba(0, 0, 0, 0.4);
}
.sc-btn--blue:active,
.sc-btn--orange:active { --lip: 3px; transform: translateY(5px); }

/* --- Disabled: sinks into a well, no lip at all --- */
.pw-btn:disabled,
.sc-btn:disabled {
  --lip: 0px;
  background: var(--pw-well);
  background-image: none;
  border-color: transparent;
  color: var(--pw-text-off);
  text-shadow: none;
  cursor: not-allowed;
  transform: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- Sizes --- */
.pw-btn--sm, .sc-btn--sm {
  --lip: var(--pw-lip-sm);
  font-size: 0.85rem;
  border-radius: 12px;
  padding: 9px 18px calc(9px + var(--lip) * 0.75);
}
.pw-btn--lg, .sc-btn--lg {
  --lip: var(--pw-lip-lg);
  font-size: 1.25rem;
  border-radius: var(--pw-r-lg);
  padding: 16px 28px calc(16px + var(--lip) * 0.75);
}
.pw-btn--wide, .sc-btn--wide { width: 100%; }
.sc-btn .btn-icon { font-size: 1.3em; line-height: 1; }

/* =============================================================
   PANELS
   ============================================================= */

/* Raised container — the default. Lighter top edge reads as a bevel. */
.pw-panel,
.sc-panel {
  background: linear-gradient(180deg, var(--pw-panel-top), var(--pw-panel-bot));
  border: 1px solid rgba(163, 120, 246, 0.16);
  border-top: 1px solid rgba(196, 158, 255, 0.34);
  border-radius: var(--pw-r-panel);
  padding: 22px 24px;
  color: var(--pw-text);
  box-shadow:
    0 22px 40px -16px rgba(0, 0, 0, 0.65),
    inset 0 1.5px 0 rgba(202, 164, 255, 0.22),
    inset 0 -24px 42px rgba(10, 3, 28, 0.4);
}

/* Emphasis panel — the molded purple slab. For hero moments. */
.pw-panel--solid,
.sc-panel--solid {
  background: var(--pw-purple);
  background-image: none;
  border: none;
  box-shadow:
    inset 0 2px 4px 0 var(--pw-purple-sheen),
    inset 0 -3px 0 5px var(--pw-purple-lip),
    0 22px 40px -18px rgba(0, 0, 0, 0.7);
}

/* Inset well — tracks, chips, secondary/disabled surfaces. Pressed on purpose. */
.pw-well {
  background: var(--pw-well);
  border-radius: 14px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  color: var(--pw-text);
}

/* Section label used at the top of panels. */
.pw-label {
  font-family: var(--pw-font-black);
  font-size: 0.75rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pw-text-3);
}