/* The sticker look, from Kartastrophe: every character and prop is a
   die-cut sticker (a white border and a soft shadow) on a tabletop, with
   chunky ink outlines, Luckiest Guy for titles and Fredoka for everything
   else. Link it after the room kit's /rtg/rtg.css; a game overrides the
   tokens below (and the body background) to set its own table.

   <link rel="stylesheet" href="/rtg/rtg.css">
   <link rel="stylesheet" href="/rge/client/sticker.css"> */

@font-face { font-family: "Luckiest Guy"; src: url(fonts/luckiest-guy.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Fredoka; src: url(fonts/fredoka-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Fredoka; src: url(fonts/fredoka-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Fredoka; src: url(fonts/fredoka-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* The palette (also in sticker.js as COLORS, for canvas drawing). */
  --ink: #1d1b2f;
  --paper: #fffaf0;
  --sun: #ffc93c;
  --hot: #ff5a36;
  --muted: #7b6f63;
  --line: #e6dccb;
  --sticker: 0 0 0 4px #fff, 0 7px 16px rgb(0 0 0 / .45);

  /* The room kit's screens, in the same look. */
  --rtg-bg: #2b1b10;
  --rtg-panel: var(--paper);
  --rtg-ink: var(--ink);
  --rtg-muted: var(--muted);
  --rtg-line: var(--line);
  --rtg-accent: var(--hot);
  --rtg-accent-dk: #b8341a;
  --rtg-edge: var(--ink);
  --rtg-title: var(--sun);
  --rtg-font: Fredoka, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rtg-display: "Luckiest Guy", "Arial Black", system-ui, sans-serif;
  --rtg-radius: 18px;
}

html, body { height: 100%; }
/* A wood-floor room under the table. */
body {
  background:
    radial-gradient(ellipse at 50% 35%, rgb(255 214 150 / .16), transparent 65%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .18) 0 2px, transparent 2px 160px),
    linear-gradient(180deg, #4a2f1b, #2b1b10);
  background-attachment: fixed;
}

/* ---------- the room kit's home and lobby, as stickers ---------- */
.rtg-hero h1 {
  font-size: clamp(2.6rem, 9vw, 3.8rem); letter-spacing: .02em; color: var(--sun);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink), 0 0 0 #fff;
  filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 10px rgb(0 0 0 / .45));
}
.rtg-logo { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.rtg-panel { border: 0; box-shadow: var(--sticker); }
.rtg-join { transform: rotate(-.6deg); }
.rtg-btn { font-weight: 700; }
.rtg-big-code { -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }

/* ---------- pieces a game screen can use ---------- */
/* A sticker panel. */
.rge-card { background: var(--paper); color: var(--ink); border-radius: 16px; box-shadow: var(--sticker); padding: 12px 14px 14px; }
/* A title in the display face, outlined in ink. */
.rge-title {
  font-family: var(--rtg-display); color: var(--sun); letter-spacing: .03em;
  -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink);
}
/* A keycap, for "press SPACE" hints. */
.rge-cap {
  display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .3em; margin: 0 .08em;
  box-sizing: border-box; border-radius: 6px; background: #fff; color: var(--ink);
  font: 700 .8rem/1 var(--rtg-font); box-shadow: 0 2px 0 #b9ad98, 0 0 0 1.5px var(--ink); vertical-align: 1px;
}
.rge-cap.wide { min-width: 4.2em; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
/* A play area: no text selection, no scrolling or zooming under a thumb. */
.rge-stage {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.rge-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- touch controls (touch.js) ---------- */
.rge-stick {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .55);
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.rge-stick.on { opacity: 1; }
.rge-knob {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: var(--paper); box-shadow: var(--sticker);
}
.rge-action {
  position: absolute; right: 22px; bottom: 26px; width: 86px; height: 86px; border-radius: 50%;
  display: none; place-items: center; background: var(--sun); color: var(--ink);
  font: 400 1.1rem var(--rtg-display); letter-spacing: .05em; box-shadow: var(--sticker); pointer-events: none;
}
.rge-action.on { background: var(--hot); color: #fff; transform: scale(.94); }
/* Only on screens you touch: a laptop keeps the keyboard and a clean table. */
@media (pointer: coarse) {
  .rge-touch .rge-action { display: grid; }
}

/* ---------- the racing kit's stick (racing/stick.js) ---------- */
/* The left half of the play area is a thumbstick that appears wherever your
   thumb lands (and fades when you let go), with a round BOOST button bottom
   right. Only the controls block touch scrolling and long-press menus. */
.rge-racing-zone, .rge-racing-boost {
  touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rge-racing-zone { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; }
.rge-racing-stick {
  --r: 60px;
  position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; pointer-events: none;
  background: rgb(29 27 47 / .3); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .8), 0 6px 16px rgb(0 0 0 / .3);
  opacity: 0; transition: opacity .4s;
}
.rge-racing-stick.on { opacity: 1; transition-duration: .05s; }
.rge-racing-stick i {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff 55%, var(--line)); box-shadow: 0 0 0 3px var(--ink), 0 4px 10px rgb(0 0 0 / .35);
}
.rge-racing-stick:not(.on) i { transition: transform .15s; } /* springs back to the middle */
/* Until your first touch: where to put your thumb. */
.rge-racing-tip {
  position: absolute; left: 50%; bottom: max(16px, 12%); transform: translateX(-50%); pointer-events: none;
  display: grid; place-items: center; width: 124px; height: 124px; box-sizing: border-box; padding: 14px;
  border-radius: 50%; border: 3px dashed rgb(255 255 255 / .75); background: rgb(29 27 47 / .32);
  color: #fff; font: 600 .82rem/1.2 var(--rtg-font); text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / .6);
  transition: opacity .4s;
}
.rge-racing-zone.used .rge-racing-tip { opacity: 0; }
.rge-racing-boost {
  position: absolute; right: 16px; bottom: 16px; width: 88px; height: 88px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--sun), var(--hot) 72%); color: #fff; cursor: pointer;
  font: 400 1.1rem/1 var(--rtg-display); letter-spacing: .05em; text-transform: uppercase;
  -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; box-shadow: var(--sticker);
  transition: transform .06s;
}
.rge-racing-boost.down { transform: scale(.9); }
/* Grey while the boost recharges, bright while it fires (showBoost). */
.rge-racing-boost.wait { background: radial-gradient(circle at 50% 30%, var(--line), #b9ad98 72%); }
.rge-racing-boost.firing { background: radial-gradient(circle at 50% 30%, #fff3c4, var(--sun) 72%); }