/* RUCKUS RUN: tokens, page shell, layer order, loading and error screens, icons and input glyphs.
   Identity "carved toy": chunky, rounded, outlined shapes. No glass panels, no backdrop-filter. */

:root {
  /* Palette (build spec 14.1) */
  --rr-ink: #1B1230;                       /* panels at 82% alpha, wipes */
  --rr-ink-panel: rgba(27, 18, 48, .82);
  --rr-cream: #FFF4DC;                     /* text */
  --rr-sun: #FFC531;                       /* primary */
  --rr-orange: #FF7A1A;
  --rr-scarf: #E8323C;                     /* danger */
  --rr-leaf: #3DDC84;
  --rr-teal: #19C3C9;
  --rr-keystone: #7FE3FF;
  --rr-idol: #2EE6C5;
  --rr-bronze: #C9824A;                    /* sundials */
  --rr-silver: #C9D3E0;
  --rr-gold: #FFCF3F;
  --rr-outline: #3A1D0B;

  /* Type */
  --rr-display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Segoe UI", Roboto, system-ui, sans-serif;
  --rr-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Safe areas (zero unless the viewport meta has viewport-fit=cover) */
  --rr-safe-t: env(safe-area-inset-top, 0px);
  --rr-safe-r: env(safe-area-inset-right, 0px);
  --rr-safe-b: env(safe-area-inset-bottom, 0px);
  --rr-safe-l: env(safe-area-inset-left, 0px);

  /* Interface scale: min(w / 1280, h / 720) clamped, written on #app by main.js on every resize */
  --rr-scale: 1;
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--rr-ink);
  color: var(--rr-cream);
  font: 600 15px/1.4 var(--rr-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* The game fills the window below the Pixelrain bar, whatever height the bar has. */
#app {
  position: fixed;
  top: var(--pixelrain-bar, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  contain: strict;
  background: var(--rr-ink);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#view {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

/* Layers, all inside #app: hud 10, touch 20, ui 30, debug 40, loading 100, fatal 200. */
#hud, #touch, #ui, #debug { position: absolute; inset: 0; pointer-events: none; }
#hud { z-index: 10; }
#touch { z-index: 20; }
#ui { z-index: 30; }
#debug { z-index: 40; }
#loading { z-index: 100; }
#fatal { z-index: 200; }

/* ── Loading ───────────────────────────────────────────────────────────────────────────────── */

#loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px max(16px, var(--rr-safe-r)) max(16px, var(--rr-safe-b)) max(16px, var(--rr-safe-l));
  background:
    radial-gradient(46% 42% at 50% 46%, rgba(255, 197, 49, .13), transparent 72%),
    radial-gradient(120% 70% at 50% 118%, rgba(255, 197, 49, .22), rgba(255, 122, 26, .08) 45%, transparent 70%),
    var(--rr-ink);
  transition: opacity .4s ease;
}
#loading.ui-done { opacity: 0; pointer-events: none; }

.ui-loading { width: min(440px, 100%); text-align: center; }

.ui-loading-hop { height: 84px; margin-bottom: 6px; animation: ui-hop .9s cubic-bezier(.3, 0, .7, 1) infinite alternate; }
.ui-loading-ball { display: block; margin: 0 auto; animation: ui-spin 1.8s linear infinite; }
@keyframes ui-hop { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@keyframes ui-spin { to { transform: rotate(360deg); } }

.ui-loading-title {
  margin: 0 0 22px;
  font: 900 clamp(38px, 9.5vmin, 68px)/1 var(--rr-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rr-sun);
  -webkit-text-stroke: 5px var(--rr-outline);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--rr-outline);
}
.ui-loading-title span { display: inline-block; }
.ui-loading-title span + span { color: var(--rr-orange); font-size: 1.12em; transform: skewX(-6deg); }

.ui-loading-track {
  height: 26px;
  padding: 4px;
  border: 3px solid var(--rr-outline);
  border-radius: 14px;
  background: rgba(255, 244, 220, .14);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .28);
  overflow: hidden;
}
#loading-bar {
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(var(--rr-sun), var(--rr-orange));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease-out;
}
#loading-text { min-height: 1.4em; margin: 14px 0 0; color: var(--rr-cream); opacity: .86; }

/* ── Error panel ───────────────────────────────────────────────────────────────────────────── */

#fatal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px max(16px, var(--rr-safe-r)) max(16px, var(--rr-safe-b)) max(16px, var(--rr-safe-l));
  background: rgba(27, 18, 48, .94);
}
.ui-fatal {
  width: min(460px, 100%);
  padding: 26px 24px 24px;
  border: 3px solid var(--rr-outline);
  border-radius: 22px;
  background: #2B1F4A;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
  text-align: center;
}
.ui-fatal h2 {
  margin: 0 0 12px;
  font: 900 30px/1.05 var(--rr-display);
  text-transform: uppercase;
  color: var(--rr-scarf);
  -webkit-text-stroke: 4px var(--rr-outline);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--rr-outline);
}
.ui-fatal p { margin: 0 0 22px; }
.ui-fatal-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ui-fatal-btn {
  min-width: 132px;
  height: 52px;
  padding: 0 22px;
  border: 3px solid var(--rr-outline);
  border-radius: 18px;
  background: var(--rr-sun);
  color: var(--rr-outline);
  box-shadow: 0 5px 0 var(--rr-outline);
  font: 900 17px/1 var(--rr-display);
  text-transform: uppercase;
  cursor: pointer;
}
.ui-fatal-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--rr-outline); }
.ui-fatal-btn:focus-visible { outline: 3px solid var(--rr-cream); outline-offset: 3px; }
.ui-fatal-quiet { background: var(--rr-cream); }

.ui-noscript { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; }

/* "DEV": shown whenever a dev flag makes saves read-only. */
.ui-devchip {
  position: absolute;
  left: max(8px, var(--rr-safe-l));
  bottom: max(8px, var(--rr-safe-b));
  padding: 4px 8px 3px;
  border: 2px solid var(--rr-outline);
  border-radius: 8px;
  background: var(--rr-scarf);
  color: var(--rr-cream);
  font: 900 11px/1 var(--rr-display);
  letter-spacing: .08em;
}

/* ── Pictograms (js/ui/icons.js) ───────────────────────────────────────────────────────────── */

.ui-icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  overflow: visible;
  fill: currentColor;
  stroke: var(--rr-outline);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}
.ui-icon .ui-i-cut { fill: var(--rr-outline); stroke: none; }
.ui-icon .ui-i-groove { fill: none; stroke: var(--rr-outline); }
.ui-icon .ui-i-hi { fill: #fff; fill-opacity: .6; stroke: none; }
.ui-icon .ui-i-under { fill: none; stroke: var(--rr-outline); }
.ui-icon .ui-i-line { fill: none; stroke: currentColor; }

/* ── Input glyphs (glyph() in js/ui/icons.js) ──────────────────────────────────────────────── */

.ui-glyph { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; color: var(--rr-cream); }
.ui-key, .ui-padbtn {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 2.5px solid var(--rr-outline);
  box-shadow: 0 3px 0 var(--rr-outline);
  color: var(--rr-outline);
  font: 800 15px/1 var(--rr-body);
  text-transform: none;
  white-space: nowrap;
}
.ui-key { border-radius: 9px; background: var(--rr-cream); }
.ui-key-wide { min-width: 70px; }
.ui-key .ui-icon { stroke: none; }
.ui-keys { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; padding-bottom: 3px; }
.ui-keys-row { display: flex; gap: 3px; }
.ui-keys .ui-key { min-width: 24px; height: 24px; padding: 0 4px; border-radius: 7px; border-width: 2px; box-shadow: 0 2px 0 var(--rr-outline); font-size: 12px; }
.ui-padbtn { width: 32px; padding: 0; border-radius: 50%; font-weight: 900; }
.ui-padbtn-wide { width: auto; padding: 0 10px; border-radius: 16px; font-size: 12px; }
.ui-padbtn-leaf { background: var(--rr-leaf); }
.ui-padbtn-teal { background: var(--rr-teal); }
.ui-padbtn-sun { background: var(--rr-sun); }
.ui-padbtn-scarf { background: var(--rr-scarf); color: var(--rr-cream); }
.ui-padbtn-ink { background: var(--rr-ink); color: var(--rr-cream); }
.ui-disc {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 3px solid var(--rr-cream);
  border-radius: 50%;
  background: rgba(27, 18, 48, .38);
  color: var(--rr-cream);
}
.ui-then { display: inline-grid; place-items: center; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .ui-loading-hop, .ui-loading-ball { animation: none; }
  #loading, #loading-bar { transition: none; }
}

/* `?freeze`: a still is still. No transition or animation is caught half-way by a screenshot, so the
   same address gives the same picture on every run (main.js sets the class). */
.ui-still, .ui-still *, .ui-still *::before, .ui-still *::after { transition: none !important; animation: none !important; }