/* «روّاد» — the look of every game, in one place.
   Colours are tokens: change them here and every game follows.
   Day = النادي الذهني (clear, warm cream). Night = the story's road (navy, lantern gold).
   Games use only these tokens + their own --gc (game colour). */

@font-face { font-family: 'Tajawal'; src: url('../fonts/Tajawal-Medium.ttf') format('truetype'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url('../fonts/Tajawal-Bold.ttf') format('truetype'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url('../fonts/Tajawal-ExtraBold.ttf') format('truetype'); font-weight: 800 900; font-display: swap; }
@font-face { font-family: 'Baloo'; src: url('../fonts/Baloo-Arabic.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }

:root, [data-theme="day"] {
  --bg: #f4eee1;
  --bg-2: #e9e0cb;
  --bg-glow: #fff8e6;
  --card: #fffdf7;
  --card-2: #f7f1e4;
  --cell: #fffdf7;
  --cell-edge: #e4d9c1;
  --ink: #23301f;
  --ink-2: #4b5644;
  --muted: #7b8272;
  --line: rgba(35, 48, 31, .1);
  --accent: #1f7a52;
  --accent-d: #155c3d;
  --accent-l: #e1f0e6;
  --on-accent: #ffffff;
  --gold: #f2b53a;
  --gold-d: #b97e0d;
  --gold-l: #fff1cf;
  --good: #23935a;
  --good-l: #dcf3e5;
  --bad: #cf513c;
  --bad-l: #fbe3de;
  --warn: #e3862a;
  --shadow: 0 1px 0 rgba(60, 45, 10, .04), 0 8px 24px rgba(60, 45, 10, .09);
  --shadow-up: 0 2px 0 rgba(60, 45, 10, .05), 0 14px 34px rgba(60, 45, 10, .16);
  --press: 0 3px 0 var(--bg-2);
  --scrim: rgba(30, 24, 10, .45);
  --lantern: #ffcf73;
  color-scheme: light;
}

[data-theme="night"] {
  --bg: #0d1632;
  --bg-2: #08102a;
  --bg-glow: #1c2c5c;
  --card: #182652;
  --card-2: #1f3064;
  --cell: #1d2d5f;
  --cell-edge: #2c3f7a;
  --ink: #f1f3ff;
  --ink-2: #c9d0f0;
  --muted: #95a0c9;
  --line: rgba(255, 255, 255, .09);
  --accent: #f2b53a;
  --accent-d: #c98a12;
  --accent-l: #2b3870;
  --on-accent: #1b1606;
  --gold: #ffcf73;
  --gold-d: #e3a53a;
  --gold-l: #3a3a55;
  --good: #4cc98a;
  --good-l: #173f3b;
  --bad: #ff7a64;
  --bad-l: #4a2433;
  --warn: #ffab5c;
  --shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-up: 0 2px 0 rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .45);
  --press: 0 3px 0 #0a1230;
  --scrim: rgba(3, 6, 20, .6);
  --lantern: #ffcf73;
  color-scheme: dark;
}

:root {
  --r: 20px;
  --r-s: 14px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --fast: 140ms;
  --mid: 240ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.5;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%;
  transition: background var(--mid), color var(--mid);
}
input, textarea, select { -webkit-user-select: text; user-select: text; font: inherit; color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
h1, h2, h3, .rw-display { font-family: 'Baloo', 'Tajawal', sans-serif; font-weight: 800; line-height: 1.25; margin: .2em 0 .35em; }
.rw-num { font-family: 'Baloo', 'Tajawal', sans-serif; font-variant-numeric: tabular-nums; }
.rw-muted { color: var(--muted); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { :root { --fast: 1ms; --mid: 1ms; } }
.reduce-motion * { animation-duration: 1ms !important; transition-duration: 1ms !important; }

/* ---------- buttons ---------- */
.rw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 22px; border-radius: 16px; font-weight: 800; font-size: 1.05rem;
  background: var(--card); color: var(--ink); box-shadow: var(--press), var(--shadow);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast), background var(--mid);
}
.rw-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--bg-2), var(--shadow); }
.rw-btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--accent-d), var(--shadow); }
.rw-btn.primary:active { box-shadow: 0 1px 0 var(--accent-d); }
.rw-btn.gold { background: var(--gold); color: #2a1f05; box-shadow: 0 4px 0 var(--gold-d), var(--shadow); }
.rw-btn.ghost { background: transparent; box-shadow: none; color: var(--ink-2); }
.rw-btn.big { width: 100%; font-size: 1.15rem; min-height: 58px; }
.rw-btn[disabled] { opacity: .45; pointer-events: none; }
.rw-icon-btn {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--card); box-shadow: var(--shadow); font-size: 1.15rem; color: var(--ink-2);
}
.rw-icon-btn:active { transform: scale(.94); }
.rw-icon-btn svg { width: 22px; height: 22px; }

/* ---------- cards, chips ---------- */
.rw-card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; }
.rw-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  background: var(--card-2); color: var(--ink-2); font-size: .85rem; font-weight: 700;
}
.rw-chip.gold { background: var(--gold-l); color: var(--gold-d); }
.rw-chip.accent { background: var(--accent-l); color: var(--accent); }

/* ---------- the game screen ---------- */
.rw-game {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  background: radial-gradient(120% 70% at 50% 0%, var(--bg-glow), var(--bg) 60%);
  padding-top: var(--safe-t); padding-bottom: var(--safe-b); overflow: hidden;
}
.rw-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; }
.rw-top .rw-title { flex: 1; min-width: 0; text-align: center; }
.rw-top .rw-title b { display: block; font-family: 'Baloo', 'Tajawal', sans-serif; font-size: 1.12rem; line-height: 1.2; }
.rw-top .rw-title small { color: var(--muted); font-weight: 700; font-size: .8rem; }

.rw-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px 8px; min-height: 64px; }
.rw-points { min-width: 86px; text-align: start; }
.rw-points b { display: block; font-family: 'Baloo', 'Tajawal', sans-serif; font-size: 1.85rem; line-height: 1; transition: transform var(--fast); }
.rw-points small { color: var(--muted); font-weight: 700; font-size: .78rem; }
.rw-points b.bump { transform: scale(1.14); }
.rw-side { min-width: 86px; text-align: end; font-weight: 800; color: var(--ink-2); }
.rw-side small { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; }

/* the lantern grows with the streak (×1…×4) */
.rw-lantern { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.rw-lantern .halo {
  position: absolute; inset: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%;
  background: radial-gradient(circle, var(--lantern) 0%, rgba(255, 207, 115, .55) 35%, rgba(255, 207, 115, 0) 70%);
  transform: scale(var(--glow, 1)); transition: transform 420ms var(--spring), opacity var(--mid); opacity: .9;
}
.rw-lantern svg { position: relative; width: 40px; height: 40px; }
.rw-lantern .mult {
  position: absolute; bottom: -4px; inset-inline-end: -8px; background: var(--gold); color: #2a1f05;
  font-family: 'Baloo', 'Tajawal', sans-serif; font-weight: 800; font-size: .85rem; border-radius: 999px; padding: 0 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transform: scale(0); transition: transform 260ms var(--spring);
}
.rw-lantern.on .mult { transform: scale(1); }

.rw-timer { height: 8px; margin: 0 16px 6px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.rw-timer i { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 99px; transform-origin: right center; transition: background var(--mid); }
[dir="ltr"] .rw-timer i { transform-origin: left center; }
.rw-timer.late i { background: var(--bad); animation: rw-pulse .5s ease-in-out infinite alternate; }
@keyframes rw-pulse { from { opacity: 1; } to { opacity: .45; } }

.rw-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 14px 14px; min-height: 0; }
.rw-tools { display: flex; gap: 10px; justify-content: center; padding: 0 14px 14px; }
.rw-tools:empty { display: none; }

/* floating "+30" */
.rw-float {
  position: fixed; z-index: 30; pointer-events: none; font-family: 'Baloo', 'Tajawal', sans-serif; font-weight: 800;
  font-size: 1.35rem; color: var(--good); text-shadow: 0 2px 0 var(--card); animation: rw-float 900ms var(--ease) forwards;
}
.rw-float.bad { color: var(--bad); }
.rw-float.gold { color: var(--gold-d); }
@keyframes rw-float { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -8px) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -64px) scale(1); opacity: 0; } }

/* level change banner */
.rw-banner {
  position: absolute; top: 6px; left: 50%; z-index: 20; transform: translate(-50%, -30px); opacity: 0;
  background: var(--card); box-shadow: var(--shadow-up); border-radius: 999px; padding: 6px 16px; font-weight: 800; white-space: nowrap;
  transition: transform 320ms var(--spring), opacity 200ms;
}
.rw-banner.show { transform: translate(-50%, 0); opacity: 1; }
.rw-banner.up { color: var(--good); }
.rw-banner.down { color: var(--muted); }

/* overlays: start card, countdown, result */
.rw-over {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 18px;
  background: var(--scrim); animation: rw-fade 200ms ease both;
}
.rw-over.clear { background: transparent; }
@keyframes rw-fade { from { opacity: 0; } }
.rw-sheet {
  width: min(420px, 100%); max-height: 100%; overflow: auto; background: var(--card); border-radius: 26px; padding: 22px 20px 18px;
  box-shadow: var(--shadow-up); text-align: center; animation: rw-rise 320ms var(--spring) both;
}
@keyframes rw-rise { from { transform: translateY(40px) scale(.96); opacity: 0; } }
.rw-sheet h2 { margin-top: 4px; }
.rw-sheet .rw-howto { color: var(--ink-2); font-weight: 700; font-size: 1.05rem; margin: 6px 0 14px; }
.rw-sheet .rw-meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.rw-sheet .rw-btns { display: grid; gap: 10px; margin-top: 16px; }
.rw-game-icon { width: 92px; height: 92px; margin: 0 auto 4px; border-radius: 26px; display: grid; place-items: center; font-size: 3rem; background: color-mix(in srgb, var(--gc, var(--accent)) 16%, var(--card)); }
.rw-game-icon svg { width: 62px; height: 62px; }

.rw-count { font-family: 'Baloo', 'Tajawal', sans-serif; font-weight: 800; font-size: 7rem; color: var(--ink); text-shadow: 0 6px 0 var(--bg-2); animation: rw-count 700ms var(--spring) both; }
@keyframes rw-count { 0% { transform: scale(.3); opacity: 0; } 30% { transform: scale(1.1); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

.rw-result .rw-big-num { font-family: 'Baloo', 'Tajawal', sans-serif; font-size: 3rem; font-weight: 800; line-height: 1.1; }
.rw-stars { display: flex; justify-content: center; gap: 6px; margin: 6px 0 4px; }
.rw-stars svg { width: 64px; height: 64px; transition: transform 300ms var(--spring); }
.rw-stars .s2 { transform: translateY(-10px); }
.rw-stars .lit { animation: rw-star 520ms var(--spring) both; }
@keyframes rw-star { 0% { transform: scale(.2) rotate(-40deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1); } }
.rw-stars .s2.lit { animation-name: rw-star2; }
@keyframes rw-star2 { 0% { transform: translateY(-10px) scale(.2) rotate(-40deg); } 70% { transform: translateY(-10px) scale(1.3) rotate(8deg); } 100% { transform: translateY(-10px) scale(1); } }
.rw-lines { display: grid; gap: 6px; margin: 10px 0 2px; }
.rw-line { font-weight: 700; color: var(--ink-2); }
.rw-line.good { color: var(--good); }
.rw-line.gold { color: var(--gold-d); }
.rw-drops { display: inline-flex; align-items: center; gap: 6px; font-family: 'Baloo', 'Tajawal', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--gold-d); }
.rw-drops svg { width: 30px; height: 30px; }
.rw-medal-row { display: flex; align-items: center; gap: 12px; text-align: start; background: var(--gold-l); border-radius: 16px; padding: 10px 12px; margin-top: 8px; animation: rw-rise 400ms var(--spring) both; }
.rw-medal-row svg { width: 52px; height: 52px; flex: none; }
.rw-medal-row b { display: block; }
.rw-medal-row small { color: var(--ink-2); }
.rw-medal-row.many > div { width: 100%; }
.rw-medal-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin-top: 6px; text-align: center; }
.rw-medal-mini span { display: grid; justify-items: center; gap: 2px; }
.rw-medal-mini small { font-size: .72rem; font-weight: 800; line-height: 1.2; }
.rw-stats-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.rw-stats-mini div { background: var(--card-2); border-radius: 14px; padding: 8px 4px; }
.rw-stats-mini b { display: block; font-family: 'Baloo', 'Tajawal', sans-serif; font-size: 1.2rem; }
.rw-stats-mini small { color: var(--muted); font-weight: 700; font-size: .75rem; }

/* sparks */
.rw-spark { position: fixed; z-index: 60; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; background: var(--gold); animation: rw-spark 900ms var(--ease) forwards; }
@keyframes rw-spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.rw-fly-drop { position: fixed; z-index: 70; width: 26px; height: 26px; pointer-events: none; transition: transform 700ms cubic-bezier(.5, -.3, .6, 1), opacity 700ms; }

/* ---------- shared board pieces ---------- */
.rw-grid { display: grid; gap: var(--gap, 8px); width: min(100%, var(--grid-max, 420px)); margin: 0 auto; }
.rw-cell {
  aspect-ratio: 1; border-radius: var(--cell-r, 14px); background: var(--cell); box-shadow: 0 3px 0 var(--cell-edge);
  display: grid; place-items: center; position: relative; transition: transform var(--fast) var(--ease), background var(--mid), box-shadow var(--mid);
}
.rw-cell:active { transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 var(--cell-edge); }
.rw-cell.good { background: var(--good-l); box-shadow: 0 3px 0 color-mix(in srgb, var(--good) 45%, transparent); }
.rw-cell.bad { background: var(--bad-l); animation: rw-shake 360ms ease; }
.rw-cell.lit { background: color-mix(in srgb, var(--gc, var(--accent)) 30%, var(--cell)); }
@keyframes rw-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.rw-shake { animation: rw-shake 360ms ease; }
.rw-pop { animation: rw-popin 300ms var(--spring) both; }
@keyframes rw-popin { from { transform: scale(.4); opacity: 0; } }

.rw-options { display: grid; gap: 10px; width: min(100%, 440px); margin: 0 auto; }
.rw-options.two { grid-template-columns: 1fr 1fr; }
.rw-opt {
  min-height: 62px; border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 var(--cell-edge), var(--shadow);
  font-weight: 800; font-size: 1.3rem; padding: 10px 12px; transition: transform var(--fast) var(--ease), background var(--mid);
}
.rw-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cell-edge); }
.rw-opt.good { background: var(--good-l); color: var(--good); }
.rw-opt.bad { background: var(--bad-l); color: var(--bad); animation: rw-shake 360ms ease; }
.rw-opt.dim { opacity: .45; }

.rw-prompt { text-align: center; font-weight: 800; font-size: 1.25rem; margin: 0 0 14px; color: var(--ink); }
.rw-prompt small { display: block; color: var(--muted); font-size: .9rem; font-weight: 700; }
.rw-toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 90;
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 14px; font-weight: 700; box-shadow: var(--shadow-up);
  animation: rw-rise 260ms var(--spring) both; max-width: 90vw; text-align: center;
}
.rw-col { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }