/* Rolling Solo: the mobile shell.
 *
 * Everything a phone needs around the canvas: a branded loading screen that is
 * on screen from the first paint, an orientation gate, and the page hardening
 * that stops a browser from treating a game like a document.
 *
 * Nothing here knows about Phaser. shell.js owns the markup, this file owns the
 * look. Both are dependency free and self contained.
 *
 * Paint order (z-index):
 *   9990  #rs-loader     the loading screen
 *   9999  #rs-rotate     the orientation gate, above everything including the
 *                        scoreboard overlay (z 999) and the loader
 */

/* The display faces are declared in index.html too. Repeated here on purpose so
 * the loading screen never waits on the page's own <style> block to be parsed.
 * Duplicate @font-face rules with an identical src are free: the browser
 * fetches the file once. */
@font-face { font-family: 'Sprat'; src: url('../brand/Sprat-RegularBold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Aduma'; src: url('../../assets/aduma-vf.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --rs-paper:  #f6ead2;
  --rs-indigo: #0c2a47;
  --rs-coral:  #f46f6a;
  --rs-lime:   #c5cc69;
  --rs-cream:  #f1dfbb;
  --rs-display: 'Sprat', Georgia, 'Times New Roman', serif;
  --rs-he: 'Aduma', 'Assistant', system-ui, sans-serif;
  /* the page ground: cream while the loader is up, indigo behind the letterbox
     once the ride owns the screen. shell.js flips it in ready(). */
  --rs-bg: var(--rs-paper);
}
:root.rs-ready { --rs-bg: var(--rs-indigo); }

/* ── page hardening ──────────────────────────────────────────────────────
 * :root and :root > body outrank the `html, body` rule in index.html without
 * !important, so this file can be linked before or after that <style> block. */
:root,
:root > body {
  height: 100%;
  height: 100dvh;
  margin: 0;
  background: var(--rs-bg);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* the canvas host. `body #game` beats the `#game` rule in index.html on
 * specificity, so 100dvh wins over 100vh whatever the link order. */
body #game {
  width: 100vw;
  height: 100dvh;
  direction: ltr;   /* the page is RTL; Phaser centres the canvas with margin-left, which only works LTR */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
body #game canvas { display: block; touch-action: none; }

/* ── shared paper grain ──────────────────────────────────────────────────
 * feTurbulence rendered inline, no image request, tiles at 220px. */
.rs-grain {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.34;
  mix-blend-mode: multiply;
}

/* ── loading screen ──────────────────────────────────────────────────────── */
#rs-loader {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rs-paper);
  color: var(--rs-indigo);
  opacity: 1;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
  contain: layout paint;
}
#rs-loader.rs-out { opacity: 0; pointer-events: none; }

/* a printed edge: the ink never quite reaches the paper edge */
#rs-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(12, 42, 71, 0) 42%, rgba(12, 42, 71, 0.14) 100%);
}

#rs-loader .rs-plate {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3.4vh, 34px);
  padding: 0 24px;
}

/* ── the wordmark, printed three times slightly out of register ─────────── */
.rs-title {
  position: relative;
  display: block;
  font-family: var(--rs-display);
  font-weight: 700;
  font-size: clamp(38px, 10.5vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.rs-title .rs-t { display: block; }
.rs-title .rs-t-c,
.rs-title .rs-t-l {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
}
.rs-title .rs-t-c { color: var(--rs-coral); transform: translate(-3px, 2px); opacity: 0.85; }
.rs-title .rs-t-l { color: var(--rs-lime);  transform: translate(3px, -2px); opacity: 0.7; }
.rs-title .rs-t-k { position: relative; color: var(--rs-indigo); }

/* ── progress bar ────────────────────────────────────────────────────────── */
.rs-bar {
  position: relative;
  width: clamp(200px, 44vw, 420px);
  height: 10px;
  background: rgba(12, 42, 71, 0.11);
  box-shadow: inset 0 0 0 1px rgba(12, 42, 71, 0.26);
  border-radius: 2px;
  overflow: hidden;
}
.rs-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--rs-lime);
  border-radius: 2px 0 0 2px;
  transition: width 160ms linear;
}
/* the coral head of the bar: the second ink, printed a hair past the first */
.rs-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: -2px;
  width: 7px;
  height: 100%;
  background: var(--rs-coral);
}
.rs-pct {
  font-family: var(--rs-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--rs-indigo);
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

/* the loading screen is decoration: no motion for anyone who asked for none */
@media (prefers-reduced-motion: reduce) {
  #rs-loader { transition-duration: 1ms; }
  .rs-bar-fill { transition: none; }
}

/* ── orientation gate ────────────────────────────────────────────────────
 * Two independent triggers on purpose:
 *   1. the media query below covers the very first paint, before any JS has
 *      measured anything;
 *   2. shell.js puts .rs-gate / .rs-nogate on <html> on every resize and
 *      orientationchange, and that wins because it is more specific.
 */
#rs-rotate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--rs-indigo);
  color: var(--rs-paper);
  text-align: center;
  padding: 24px;
  overscroll-behavior: none;
  touch-action: none;
}
@media (orientation: portrait) and (pointer: coarse) {
  :root:not(.rs-nogate) #rs-rotate { display: flex; }
}
:root.rs-gate #rs-rotate { display: flex; }

#rs-rotate .rs-grain { opacity: 0.22; mix-blend-mode: screen; }

.rs-rot-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* the phone, drawn in CSS, turning portrait to landscape and back */
.rs-phone {
  width: 56px;
  height: 96px;
  border: 3px solid var(--rs-paper);
  border-radius: 9px;
  position: relative;
  animation: rs-turn 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.rs-phone::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 16px;
  height: 3px;
  margin-left: -8px;
  background: var(--rs-paper);
  opacity: 0.55;
  border-radius: 2px;
}
.rs-phone-bar {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 22px;
  height: 3px;
  margin-left: -11px;
  background: var(--rs-lime);
  border-radius: 2px;
}
@keyframes rs-turn {
  0%, 26%   { transform: rotate(0deg); }
  46%, 76%  { transform: rotate(-90deg); }
  96%, 100% { transform: rotate(0deg); }
}

.rs-rot-en {
  margin: 0;
  font-family: var(--rs-display);
  font-weight: 700;
  font-size: clamp(24px, 6.4vw, 40px);
  line-height: 1.05;
  color: var(--rs-paper);
}
.rs-rot-he {
  margin: 0;
  font-family: var(--rs-he);
  font-weight: 600;
  font-size: clamp(15px, 3.6vw, 21px);
  color: var(--rs-lime);
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .rs-phone { animation-duration: 6s; }
}

/* the rotate gate wears the key art (added after the critic pass) */
#rs-rotate { background: url(../brand/hero/ks_portrait.jpg?v=5) center / cover no-repeat #0c2a47 !important; }
#rs-rotate .rs-rot-inner { background: linear-gradient(rgba(12, 42, 71, 0), rgba(12, 42, 71, 0.82) 18%, rgba(12, 42, 71, 0.82) 82%, rgba(12, 42, 71, 0)); padding: 36px 28px; border-radius: 6px; }
#rs-rotate .rs-rot-he { font-size: 1.15em !important; opacity: 1 !important; margin-top: 6px; }
#rs-rotate .rs-rot-logos { display: flex; gap: 28px; align-items: center; justify-content: center; margin-top: 34px; }
#rs-rotate .rs-rot-logos img { height: 34px; width: auto; opacity: 0.95; }

/* wide phones: the bands beside the 16:9 canvas wear the print, not flat navy */
:root > body { background: #0c2a47 linear-gradient(rgba(12, 42, 71, 0.78), rgba(12, 42, 71, 0.78)) !important; }
:root.rs-ready > body { background: linear-gradient(rgba(12, 42, 71, 0.72), rgba(12, 42, 71, 0.72)), url(../brand/hero/ks_bg.jpg) center / cover no-repeat fixed #0c2a47 !important; }

/* gate: soft scrim on every side, Hebrew as loud as the English */
#rs-rotate .rs-rot-inner { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(12, 42, 71, 0.86) 45%, rgba(12, 42, 71, 0) 100%) !important; padding: 56px 48px !important; border-radius: 0 !important; }
#rs-rotate .rs-rot-en, #rs-rotate .rs-rot-he { font-size: clamp(22px, 6.2vw, 34px) !important; line-height: 1.25; }
#rs-rotate .rs-rot-he { color: #f6ead2 !important; margin-top: 4px !important; }

/* gate scrim full bleed, so the fade ends inside the screen and not at a panel edge */
#rs-rotate .rs-rot-inner { position: fixed !important; inset: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse 62% 42% at 50% 52%, rgba(12, 42, 71, 0.9) 30%, rgba(12, 42, 71, 0) 100%) !important; padding: 0 !important; }