/* Spaten — shared look for every page.
   Felt green with loud, happy accents; the game's own fat lettering; buttons
   that squash when pressed. */

:root {
  --felt: #127a3a;
  --felt-deep: #0a4d23;
  --felt-light: #1f9a4e;
  --ink: #102a14;
  --cream: #fff8ea;
  --white: #ffffff;

  --yellow: #ffc93c;
  --yellow-deep: #d99a06;
  --orange: #ff8a1f;
  --red: #e8332c;
  --red-deep: #a81d18;
  --sky: #4fc3f7;
  --sky-deep: #1b8fc4;
  --purple: #7b5cff;
  --purple-deep: #5236d1;
  --pink: #ff5fa2;
  --pink-deep: #d1336f;
  --grey: #e9e4d8;
  --grey-deep: #b6ad99;

  --display: "Lilita One", "Londrina Solid", "Trebuchet MS", sans-serif;
  --body: "Nunito", system-ui, -apple-system, sans-serif;

  color-scheme: dark;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--body);
  color: var(--cream);
  background: var(--felt-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

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

/* ---------- the table: felt and drifting suits ---------- */

.felt {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12), transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(0, 0, 0, 0.3), transparent 55%),
    radial-gradient(circle at 50% 45%, #0e5f2d 0%, #0a4521 45%, #052712 100%);
}

.felt::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 7px);
}

/*
  Paper: the felt turned white, for the pages that sell the game rather than
  play it (home, the web build's page, the invite). The tutorial keeps the
  green, because there the felt is the table the cards are dealt on.

  Text on the page goes dark; anything that is its own green card — a panel,
  a modal, the loading screen — keeps its light text.
*/
body.paper {
  color: var(--ink);
  background: var(--white);
}

.paper .felt {
  background:
    radial-gradient(circle at 50% 40%, #ffffff 0%, #ffffff 55%, #f6f6f3 100%);
}

/* Plain white: no weave. */
.paper .felt::after {
  content: none;
}

.paper .panel {
  color: var(--cream);
}

.felt .suit {
  position: absolute;
  bottom: -80px;
  font-size: var(--size, 48px);
  color: var(--c, var(--ink));
  opacity: 0.16;
  animation: drift var(--t, 18s) linear var(--d, 0s) infinite;
}

@keyframes drift {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(calc(-100vh - 160px)) rotate(var(--spin, 240deg)); }
}

/* ---------- lettering ---------- */

/*
  Game-UI lettering: a chunky rounded face, outlined in a darker shade of
  whatever it sits on, with a short extrusion underneath. --edge sets the
  outline colour; the default is the table's ink.
*/
.loud {
  --edge: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-shadow:
    3px 3px 0 var(--edge), -3px 3px 0 var(--edge), 3px -3px 0 var(--edge), -3px -3px 0 var(--edge),
    0 4px 0 var(--edge), 0 -3px 0 var(--edge), 4px 0 0 var(--edge), -4px 0 0 var(--edge),
    0 7px 0 var(--edge), 0 10px 14px rgba(0, 0, 0, 0.35);
}

/*
  3D title lettering, like a game's logo: a gradient fill, a thick outline and
  a deep extrusion. Each piece of text is a .t3d with its own text in
  data-text — the outline is drawn by ::before *behind* the gradient, which a
  text-shadow cannot do once the fill is a clipped background.

    <span class="t3d" data-text="Chale" style="--g1: #fff36b; --g2: #ff9d1c">Chale</span>
*/
.t3d {
  --g1: #fff36b;
  --g2: #ffa41b;
  --edge: #6b2d00;
  --deep: #3d1800;
  position: relative;
  display: inline-block;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  /* The element only holds the space; both layers below draw the letters. */
  color: transparent;
}

/*
  Two layers, in paint order: ::before is the outline and extrusion, ::after
  the gradient fill with a white shine across the top. A gradient clipped to
  the element itself would sit *under* the outline, which is the mistake this
  avoids.
*/
.t3d::before,
.t3d::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.t3d::before {
  color: var(--edge);
  -webkit-text-stroke: 0.17em var(--edge);
  text-shadow:
    0 0.06em 0 var(--deep), 0 0.1em 0 var(--deep), 0 0.13em 0 var(--deep),
    0 0.2em 0.16em rgba(0, 0, 0, 0.35);
}

.t3d::after {
  color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0 16%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, var(--g1) 20%, var(--g2) 85%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* "ɔ" and "ɛ" drawn as a mirrored c and 3: the display face has neither. */
.open-o,
.t3d.open-o {
  display: inline-block;
  transform: scaleX(-1);
}

/* ---------- candy buttons ---------- */

/*
  Glossy, bouncy, game-UI buttons: a two-tone gradient face, a shine band
  across the top, a darker lip underneath, a thick white ring and a soft
  shadow. Colours come from four variables, so each variant is four lines.
*/
.gbtn {
  --hi: #ffe46b;          /* top of the face */
  --face: #ffc21f;        /* bottom of the face */
  --lip: #d98a00;         /* the darker underside */
  --ink-on: #8a4a00;      /* the outline round the white text */
  --text: #ffffff;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 60px;
  padding: 10px 26px 11px;
  border: 0;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--hi) 0%, var(--face) 55%, var(--face) 100%);
  color: var(--text);
  box-shadow: inset 0 -3px 0 var(--lip);
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow:
    2px 2px 0 var(--ink-on), -2px 2px 0 var(--ink-on), 2px -2px 0 var(--ink-on), -2px -2px 0 var(--ink-on),
    0 3px 0 var(--ink-on);
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.18s cubic-bezier(0.3, 1.7, 0.5, 1), box-shadow 0.12s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* No shine: the buttons are flat on top. */
.gbtn::before {
  content: none;
  position: absolute;
  left: 9%;
  right: 9%;
  top: 5px;
  height: 36%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08));
  pointer-events: none;
}

.gbtn > * {
  position: relative;
}

.gbtn small {
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: 0 1px 0 var(--ink-on);
  opacity: 0.95;
}

.gbtn:hover {
  transform: rotate(var(--tilt, 0deg)) translateY(-3px) scale(1.04);
  filter: brightness(1.05) saturate(1.05);
}

.gbtn:active {
  transform: rotate(var(--tilt, 0deg)) translateY(2px) scale(0.97);
  box-shadow: inset 0 -1px 0 var(--lip);
}

.gbtn.green  { --hi: #8ef26a; --face: #4fcf2f; --lip: #2e9418; --ink-on: #1d6a0c; }
.gbtn.sky    { --hi: #6fd9ff; --face: #21a7f0; --lip: #0f72b8; --ink-on: #0b4f86; }
.gbtn.purple { --hi: #b49cff; --face: #7b5cff; --lip: #5234d4; --ink-on: #36209a; }
.gbtn.pink   { --hi: #ff9cc7; --face: #ff4f97; --lip: #cf2269; --ink-on: #8f1047; }
.gbtn.red    { --hi: #ff8a7a; --face: #ef3b2c; --lip: #b41f15; --ink-on: #7d120b; }
.gbtn.orange { --hi: #ffc061; --face: #ff8a1f; --lip: #d05e00; --ink-on: #8a3d00; }
.gbtn.dark   { --hi: #3d6b48; --face: #1f4a2a; --lip: #0f2b16; --ink-on: #07170b; }

/* White buttons (the stores): dark lettering, no outline. */
.gbtn.cream {
  --hi: #ffffff;
  --face: #f1ece2;
  --lip: #c9bfa9;
  --text: var(--ink);
  text-shadow: none;
}

.gbtn.cream small {
  text-shadow: none;
}

.gbtn .icon {
  font-size: 1.5rem;
  line-height: 1;
}

.gbtn.row {
  flex-direction: row;
  gap: 10px;
}

.gbtn[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* ---------- modals ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(3, 18, 7, 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal[hidden] {
  display: none;
}

.panel {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100dvh - 28px);
  overflow: auto;
  background: var(--felt);
  border: 4px solid var(--ink);
  border-radius: 28px;
  box-shadow: inset 0 0 0 4px var(--felt-light), 0 10px 0 var(--ink), 0 30px 60px rgba(0, 0, 0, 0.5);
  padding: 30px 22px 22px;
  animation: panel-in 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.panel.wide {
  width: min(100%, 640px);
  padding: 18px;
}

@keyframes panel-in {
  from { transform: scale(0.7) rotate(-4deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.panel h2 {
  margin: 0 0 4px;
  font-size: 2.3rem;
  text-align: center;
  color: var(--yellow);
}

.panel .sub {
  margin: 10px 0 18px;
  text-align: center;
  opacity: 0.9;
}

.close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(180deg, #ff8a7a, #ef3b2c 60%);
  box-shadow: inset 0 -4px 0 #b41f15;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.close:hover {
  transform: rotate(90deg);
}

/* ---------- forms ---------- */

.form {
  display: grid;
  gap: 13px;
}

.field {
  display: grid;
  gap: 5px;
}

/* Hidden means hidden: the grid above would otherwise win over [hidden]. */
.field[hidden],
.chips[hidden] {
  display: none;
}

.field label {
  font-weight: 800;
  font-size: 0.92rem;
}

.field .hint {
  font-weight: 600;
  opacity: 0.75;
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming into the field */
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 11px 13px;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--yellow);
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

.chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}

.chips label {
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--felt-deep);
  font-weight: 800;
  font-size: 0.9rem;
  transition: transform 0.15s ease;
}

.chips input:checked + label {
  background: linear-gradient(180deg, #ffe46b, #ffc21f 60%);
  box-shadow: inset 0 -3px 0 #d98a00, 0 0 0 3px #fff;
  border-color: transparent;
  color: #6b3a00;
  transform: rotate(-3deg) scale(1.05);
}

.chips input:focus-visible + label {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.status {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  border: 2px solid var(--ink);
}

.status[hidden] {
  display: none;
}

.status.ok {
  background: #d8f5df;
  color: var(--felt-deep);
}

.status.bad {
  background: #fde0de;
  color: #8f1f1a;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 60;
  transform: translateX(-50%);
  background: var(--ink);
  border: 3px solid var(--yellow);
  color: var(--white);
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  animation: toast-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
  white-space: nowrap;
}

.toast[hidden] {
  display: none;
}

@keyframes toast-in {
  from { transform: translate(-50%, 30px) scale(0.8); opacity: 0; }
}

/* ---------- confetti ---------- */

.confetti {
  position: fixed;
  z-index: 70;
  width: 12px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
}

/* ---------- page wipe between home and the game ---------- */

.wipe {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background: var(--yellow);
  clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
  transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.3, 1);
}

.wipe.on {
  clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .felt .suit {
    display: none;
  }
}