/* Toys R Us look: their blue, the logo's pink for buttons, yellow stars, and rounded shapes with a white rim like
   the letters in the TOYS R US logo. Fredoka (rounded display) + Poppins (what toysrus.co.za uses).
   Loaded after style.css on every page. */
@font-face { font-family: 'Fredoka'; src: url('../assets/fonts/fredoka-700.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/poppins-500.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/poppins-800.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }

:root {
  --black: #083a82;
  --ink: #14213d;
  --charcoal: #0b2f66;
  --accent: #ea1a5b;
  --accent-d: #a90f40;
  --accent-rgb: 234 26 91;
  --on-accent: #ffffff;
  --gold: #ffc72c;
  --green: #2f9e4b;
  --muted: #5f6b85;
  --display: 'Fredoka', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --navy: #0b2a5c;
  --blue-l: #2f8fe0;
}
html, body { background: #0a4da6; }
body { background: linear-gradient(180deg, #0d5cc0, #063a85) fixed; }

/* Straight, rounded shapes instead of slanted tags */
.btn.big, .lockup .l2::before, .lockup .shine, .deal::before, .chip, .chip > *, .best-line b, .test-ribbon,
.progress, .bar-row .track, .tut .dots i, .tut .order .num, .btn.big > *, .btn.big .t, .mode-row .btn, .mode-row .btn > *,
.gift-pill, .gift-pill > *, .tour-sum .streak, .tour-sum .streak > *,
.arc-title span, .name b, .play, .copy, .copy > *, .arcade-back, .arcade-back > * { transform: none; }
.lockup .l2.stamp::before { animation-name: tru-stamp; }
@keyframes tru-stamp { from { transform: scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stamp { from { transform: scale(0.2); } to { transform: none; } }
.btn.big:active, .mode-row .btn:active { transform: translateY(5px); }

/* Buttons: pink pills with a white rim */
.btn { border-radius: 999px; font-weight: 700; letter-spacing: .5px; }
.btn.big { font-size: 34px; padding: 14px 30px 12px; border: 3px solid #fff; box-shadow: 0 6px 0 var(--accent-d), 0 14px 30px rgba(4, 20, 60, .45); }
.btn.white { background: #fff; color: var(--ink); }
.btn.dark { background: var(--navy); color: #fff; border: 2px solid rgba(255,255,255,.35); }
.btn.small { font-size: 18px; }
.icon-btn { border-radius: 50%; }
.mode-row .btn { border-radius: 22px; border: 3px solid #fff; }
.rush-btn { box-shadow: 0 6px 0 var(--accent-d), 0 14px 30px rgba(4, 20, 60, .45); }
.tour-btn { background: #fff; color: var(--ink); box-shadow: 0 6px 0 #9fb8dc, 0 14px 30px rgba(4, 20, 60, .35); }
.tour-btn small { color: #0862ad; }
.mode-row .big-l { font-size: 27px; letter-spacing: .5px; }
.mode-row small { font-weight: 800; letter-spacing: .4px; }

/* Title lockup: WISH LIST / [RUSH] on a pink pill with a white rim */
.lockup .l1 { font-size: clamp(46px, 14vw, 70px); letter-spacing: 1px; color: #fff; text-shadow: 0 4px 0 #0b2a5c, 0 10px 26px rgba(0,0,0,.35); white-space: nowrap; }
.lockup .l2 { font-size: clamp(50px, 15vw, 76px); letter-spacing: 2px; padding: 4px 30px 2px; }
.lockup .l2::before { border-radius: 999px; background: linear-gradient(180deg, #ff4f86, var(--accent) 60%, #c90f4a); box-shadow: 0 0 0 4px #fff, 0 8px 0 4px #0b2a5c, 0 18px 34px rgba(0,0,0,.35); }
.title { letter-spacing: .5px; }
/* Fredoka is wider than a condensed font: keep big scores (134 070), titles and tabs on one line at 360px */
.score-big { font-size: clamp(54px, 17vw, 96px); letter-spacing: 0; white-space: nowrap; }
.topbar .title { font-size: clamp(22px, 7vw, 28px); white-space: nowrap; }
.tabs button { font-size: clamp(15px, 4.6vw, 19px); white-space: nowrap; letter-spacing: .3px; }
.btn.big { font-size: clamp(26px, 8.4vw, 34px); }
.level-card h2 { font-size: clamp(22px, 7vw, 28px); }
.hashtag { font-family: var(--display); font-weight: 400; letter-spacing: 2px; font-size: 16px; color: #fff; }
.hashtag b { color: var(--gold); font-weight: 400; }
.logo-band img { height: 64px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3)); }
.screen.menu .logo-band img { height: 60px; }

/* Campaign banner, chips, ribbons */
.deal::before { border-radius: 18px; border: 3px solid #fff; }
.deal p { font-family: var(--body); font-weight: 800; font-size: 16px; letter-spacing: 0; line-height: 1.2; text-transform: none; }
.chip { border-radius: 999px; font-family: var(--display); font-size: 15px; padding: 4px 12px; background: var(--navy); }
.chip.red { background: var(--accent); }
.best-line b { border-radius: 10px; }
.test-ribbon { border-radius: 999px; font-family: var(--body); font-weight: 800; font-size: 12px; padding: 5px 14px; }
.gift-pill { border-radius: 999px; border: 3px solid #fff; padding-left: 14px; padding-right: 14px; animation-name: tru-wiggle; }
@keyframes tru-wiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-4deg) scale(1.06); } 85% { transform: rotate(4deg) scale(1.06); } 92% { transform: rotate(-2deg); } }
.gift-pill b { border-radius: 999px; }
.tour-sum .streak { border-radius: 999px; background: var(--navy); }

/* Cards: white with rounded corners on light screens; deep navy over the game */
.card { border-radius: 18px; border-top: 0; box-shadow: 0 0 0 3px #fff, 0 14px 30px rgba(4, 20, 60, .3); }
.screen.dim { background: rgba(5, 30, 75, .66); }
.screen.dim .card { background: var(--navy); border-top: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 16px 40px rgba(0,0,0,.45); }
.screen.dim .muted, .screen.dim .card .muted { color: #b9c7e3; }
.screen.dim .stat { background: #0e3778; border-bottom: 3px solid var(--accent); border-radius: 12px; }
.screen.dim .stat span { color: #b9c7e3; }
.screen.dim .ticket { background: var(--navy); border-radius: 16px; }
.screen.dim .ticket .meta { color: #b9c7e3; }
.screen.dim .ticket.locked::after { background: #1b3f7a; }
.screen.dim .progress { background: #12396f; }
.topbar { background: #073676; border-bottom: 3px solid #fff; }

/* Light screens (profile, scores, vouchers): soft brand blue instead of concrete */
:root { --concrete: #e6f0fc; --line: #cfdcef; }
.screen.solid { background: linear-gradient(180deg, #eef5ff, #d9e8fb); }
.tabs button { border-radius: 12px; box-shadow: 0 3px 0 #b9cbe6; color: var(--ink); }
.tabs button.on { background: var(--navy); box-shadow: 0 3px 0 var(--accent); }
.stat { border-radius: 10px; }
.progress, .bar-row .track { border-radius: 999px; }

/* Store Tour map */
.screen.tour { background: linear-gradient(180deg, #0d5cc0, #063a85); }
.tour-intro { color: #d4e2f7; }
.stop { background: var(--navy); border-left: 0; border-radius: 18px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.25); }
.stop + .stop::before { border-left-color: rgba(255,255,255,.4); }
.stop.locked { opacity: .75; }
.stop.finale { box-shadow: inset 0 0 0 3px var(--gold), 0 10px 24px rgba(0,0,0,.25); }
.nodes::before { border-top-color: rgba(255,255,255,.35); }
.node.locked { background: #123f80; box-shadow: 0 5px 0 #071f47; }
.node.done { box-shadow: 0 5px 0 #9fb8dc; }
.stars i { color: rgba(255,255,255,.25); }
.moves-pill { transform: none; border-radius: 999px; padding: 4px 14px 2px; }
.booster { background: #0e3778; border-color: #2c5aa0; border-radius: 14px; }
.booster.on { background: #3d3510; }

/* Daily gift: a Toys R Us gift box (pink paper, yellow ribbon, white lid with the logo) */
.week i { background: #123f80; color: #9fb4d9; border-radius: 10px; }
.week i.past { background: var(--accent); color: #fff; }
.week i.today { background: var(--gold); color: var(--ink); }
.gift-box .base { background: linear-gradient(#ff5c8c, #c80f47); border-radius: 12px; }
.gift-box .ribbon { background: var(--gold); }
.gift-box .lid { background: #fff; border-radius: 12px; border-color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.gift-box .lid img { height: 24px; }
.gift-box .lid::before, .gift-box .lid::after { border-color: var(--gold); }
.stop-head b { display: inline-flex; flex-direction: column; line-height: 1; }
.stop-head b small { font-family: var(--body); font-weight: 700; font-size: 11px; letter-spacing: .5px; opacity: .75; margin-top: 3px; text-transform: uppercase; }

/* Home page (arcade hub) */
.arc-logo.tru-logo { height: 86px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.3)); }
.arc-title span { border-radius: 999px; letter-spacing: 3px; font-size: clamp(40px, 11vw, 72px); padding: 10px 34px 6px; border: 4px solid #fff; }
.arc-sub { color: #e3edfb; }
.arc-foot .tagline { font-family: var(--display); letter-spacing: 1px; color: var(--gold); }
.game-card { background: var(--navy); border-top: 0; border-radius: 22px; box-shadow: 0 0 0 3px #fff, 0 16px 34px rgba(4, 20, 60, .35); }
.shot { border-color: #061a3d; box-shadow: 0 0 0 2px rgba(255,255,255,.3), 0 14px 30px rgba(0, 0, 0, .45); }
.play { color: var(--ink); }
.kind { color: var(--accent); }
.name b { border-radius: 10px; }
.play { border-radius: 999px; white-space: nowrap; font-size: 20px; padding: 10px 18px 8px; }
.copy { border-radius: 999px; }
.arcade-back + .test-ribbon { align-self: center; margin-top: 40px; }
.arc-title span { animation-name: tru-arc-stamp; }
@keyframes tru-arc-stamp { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: none; } }