/* Romano Ice Cream look: black, champagne gold and cream from the Romano badge; Rufina + Montserrat like
   romanoicecream.co.za. Elegant rather than loud: straight edges (no slanted tags), rounded gold buttons.
   Loaded after style.css on every page. */
@font-face { font-family: 'Rufina'; src: url('../assets/fonts/rufina-700.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../assets/fonts/montserrat.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

:root {
  --black: #110d0b;
  --ink: #17110e;
  --charcoal: #241b16;
  --accent: #c8ab6e;
  --accent-d: #8c7444;
  --accent-rgb: 200 171 110;
  --on-accent: #1a1310;
  --gold: #e6cc8f;
  --cream: #f6eedf;
  --display: 'Rufina', Georgia, 'Times New Roman', serif;
  --body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html, body { background: var(--black); }

/* Straight, classy shapes instead of Pizza Boyz's 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,
.arc-title span, .name b, .play, .copy, .copy > *, .arcade-back, .arcade-back > * { transform: none; }
.lockup .l2.stamp::before { animation-name: romano-stamp; }
@keyframes romano-stamp { from { transform: scaleX(0); } to { transform: none; } }
@keyframes stamp { from { transform: scaleX(0); } to { transform: none; } }
.btn.big:active { transform: translateY(5px); }

/* Gold, rounded buttons */
.btn { border-radius: 999px; font-weight: 700; letter-spacing: .5px; background: linear-gradient(180deg, #e7cf98, #c8ab6e 55%, #b09159); }
.btn.big { font-size: 30px; padding: 16px 30px 14px; }
.btn.white { background: #fff; }
.btn.dark { background: var(--charcoal); color: var(--cream); }
.btn.small { font-size: 18px; }
.icon-btn { border-radius: 50%; }

/* Title lockup: SCOOP / [STACK] on a gold plaque */
.lockup .l1 { font-size: clamp(32px, 10vw, 58px); letter-spacing: 2px; color: var(--cream); white-space: nowrap; }
.lockup .l2 { font-size: clamp(44px, 13.5vw, 66px); letter-spacing: 2px; padding: 6px 26px 4px; }
.lockup .l2::before { border-radius: 16px; background: linear-gradient(180deg, #ead39f, #c8ab6e 60%, #a98b54); box-shadow: 0 0 0 3px var(--black), 0 0 0 5px var(--accent), 0 14px 34px rgba(0,0,0,.6); }
.title.lg { font-size: clamp(40px, 12vw, 56px); }
.title.md { font-size: 28px; }
.hashtag { font-family: var(--display); letter-spacing: 3px; text-transform: none; font-weight: 400; font-size: 18px; color: var(--cream); }
.hashtag b { color: var(--gold); }

/* Campaign banner and chips */
.deal::before { border-radius: 14px; }
.deal p { font-size: 18px; letter-spacing: .3px; line-height: 1.15; }
.chip { border-radius: 999px; font-family: var(--body); font-weight: 800; font-size: 14px; padding: 5px 12px; }
.best-line b { border-radius: 8px; font-family: var(--display); }
.test-ribbon { border-radius: 999px; font-family: var(--body); font-weight: 800; font-size: 12px; padding: 5px 14px; }
.card { border-top-color: var(--accent); border-radius: 14px; }
.screen.dim .card { border-top-color: var(--accent); }
.topbar { background: var(--black); border-bottom: 1px solid rgba(200, 171, 110, .35); }
.logo-band img { height: 64px; }
.screen.menu .logo-band img { height: 58px; }

/* Home page (arcade hub) */
.arc-logo.romano-badge { height: 96px; }
.arc-title span { border-radius: 14px; letter-spacing: 4px; font-size: clamp(44px, 12vw, 80px); padding: 12px 28px 8px; }
.arc-foot .tagline { font-family: var(--display); letter-spacing: 1px; }
.game-card { border-top-color: var(--accent); border-radius: 16px; }
.kind { color: var(--accent); }
.name { font-size: clamp(28px, 8vw, 38px); }
.name b { border-radius: 8px; }
.play { border-radius: 999px; white-space: nowrap; font-size: 20px; padding: 10px 18px 8px; }
.copy { border-radius: 999px; }

/* Test Mode ribbon sits under the "ALL GAMES" back link (Montserrat is wider than a condensed font) */
.arcade-back + .test-ribbon { align-self: center; margin-top: 40px; }
/* the ARCADE plaque stays straight after its intro (Pizza Boyz's ends on a slant) */
.arc-title span { animation-name: romano-arc-stamp; }
@keyframes romano-arc-stamp { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .arc-title span { font-size: 72px; } }