/* ═══════════════════════════════════════════════════════════════════
   SAUCE WARS — Fricken Games v2 design system (BRAND EDITION)
   Straight from the OJ Thompson brand book (v03, Mar 2025):
     #D45C41 red · #E0DED1 sand · #FED0AB peach (+tints) · cream paper
     Encode Sans Expanded (Black, uppercase titles) + Condensed accents
     Doodle food-icon pattern · bubbly radii · red rule + sand band motif
     Chicken submark sticker = the win stamp.
   NOTE: variable NAMES are kept from the v1 dark theme so game styles
   keep working — but the values are now the LIGHT brand world
   (--ink* = paper/sand surfaces, --txt = warm brown ink).
   CSP: script-src 'self' — NO inline JS anywhere. Inline styles OK.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --red:#D45C41; --red-hot:#C94F35; --red-dark:#B8422E; --red-deep:#8B2F1E;
  --peach:#FED0AB; --peach-soft:#FFE5CC; --sand:#E0DED1; --sand-soft:#ECEAE0;
  --cream:#FAF7F1; --gold:#E8A020;
  /* surfaces (names kept from v1: ink = deepest surface → now paper) */
  --ink:var(--cream); --ink-2:#FFFFFF; --ink-3:var(--sand-soft);
  --line:rgba(212,92,65,0.18); --line-2:rgba(212,92,65,0.38);
  --txt:#4A2B1E; --txt-dim:rgba(74,43,30,0.55);
  --honey:#E8A020; --buffalo:#D45C41; --bbq:#8B4A2B; --ranch:#2EA893;
  --good:#2E9E5B; --bad:#C0392B;
  --expand:'Encode Sans Expanded',system-ui,sans-serif;
  --condensed:'Encode Sans Condensed',system-ui,sans-serif;
  --glow-red:0 6px 22px rgba(212,92,65,0.35);
  --r-md:16px; --r-lg:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  /* the doodle pattern (brand iconography pg13) — red strokes, tile ~150px */
  --doodle:url("../brand/pattern-red.png");   /* the REAL brand icons (Dark/red set) */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--cream);
  color:var(--txt); font-family:var(--condensed); font-size:16px; line-height:1.45;
  min-height:100vh; overscroll-behavior:none; -webkit-font-smoothing:antialiased;
  padding-top:var(--safe-t);
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--peach);color:var(--red-deep)}

/* brand footer motif: thin red rule above a sand band */
body::after{content:'';position:fixed;left:0;right:0;bottom:0;height:calc(12px + var(--safe-b));
  background:var(--sand);border-top:3px solid var(--red);pointer-events:none;z-index:5}

/* ── Topbar — red band, peach wordmark (brand pg14) ─────────────── */
.g2-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:calc(10px + var(--safe-t)) 16px 10px;
  background:var(--red);box-shadow:0 2px 14px rgba(139,47,30,0.25)}
.g2-back{display:flex;align-items:center;gap:6px;font-family:var(--expand);font-weight:800;font-size:11px;
  text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,233,214,0.85);min-height:44px;padding:0 6px}
.g2-back:active{color:#fff}
.g2-logo{font-family:var(--expand);font-weight:900;font-size:15px;letter-spacing:2.5px;text-transform:uppercase;color:var(--peach)}
.g2-chip-id{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,233,214,0.85);min-height:44px;cursor:pointer}
.g2-chip-id .dot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 8px currentColor}

/* ── Cards / panels — paper on cream, soft warm shadow ──────────── */
.g2-panel{background:var(--ink-2);
  border:1.5px solid var(--sand);border-radius:var(--r-lg);padding:18px;
  box-shadow:0 6px 26px rgba(139,47,30,0.08)}
.g2-title{font-family:var(--expand);font-weight:900;font-size:clamp(22px,6vw,34px);text-transform:uppercase;
  letter-spacing:1px;line-height:1.08;color:var(--red)}
.g2-title .hot{color:var(--red-deep);position:relative}
.g2-sub{color:var(--txt-dim);font-size:13.5px;letter-spacing:0.3px}
.g2-kicker{font-family:var(--condensed);font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:3px;color:var(--red)}

/* ── Buttons — bubbly pills like the logotype ───────────────────── */
.g2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 26px;
  border-radius:99px;font-family:var(--expand);font-weight:800;font-size:13px;text-transform:uppercase;
  letter-spacing:1.2px;transition:transform .14s var(--spring),box-shadow .2s,filter .2s;position:relative;overflow:hidden}
.g2-btn:active{transform:scale(0.93)}
.g2-btn.primary{background:var(--red);color:var(--peach);box-shadow:var(--glow-red)}
.g2-btn.primary:hover{background:var(--red-hot)}
.g2-btn.primary::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,229,204,0.45),transparent);
  transform:skewX(-22deg);animation:g2shine 3.4s ease-in-out infinite}
@keyframes g2shine{0%,60%{left:-70%}92%,100%{left:140%}}
.g2-btn.ghost{border:2px solid var(--red);color:var(--red);background:var(--ink-2)}
.g2-btn.ghost:hover{background:var(--peach-soft)}
.g2-btn:disabled{opacity:0.4;pointer-events:none}
.g2-btn.small{min-height:42px;padding:8px 18px;font-size:11px}

/* ── Game tiles — Fricken takeaway boxes (brand pg15) ───────────── */
.g2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px}
.g2-tile{position:relative;border-radius:18px;padding:50px 16px 16px;min-height:178px;overflow:hidden;
  background:var(--peach-soft);border:none;
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;cursor:pointer;
  box-shadow:0 6px 20px rgba(139,47,30,0.12);
  transition:transform .25s var(--spring),box-shadow .25s}
.g2-tile::before{content:'';position:absolute;inset:0;background-color:var(--peach);
  background-image:var(--doodle);background-size:430px;opacity:0.5}
/* each tile crops a different region of the (large, random) pattern so
   siblings never show the same icons in the same spots */
.g2-tile:nth-child(6n+1)::before{background-position:8% 14%}
.g2-tile:nth-child(6n+2)::before{background-position:62% 41%}
.g2-tile:nth-child(6n+3)::before{background-position:31% 78%}
.g2-tile:nth-child(6n+4)::before{background-position:75% 30%}
.g2-tile:nth-child(6n+5)::before{background-position:24% 36%}
.g2-tile:nth-child(6n+6)::before{background-position:55% 86%}
.g2-tile::after{content:'';position:absolute;top:0;left:0;right:0;height:38px;background:var(--red);
  border-radius:18px 18px 50% 50%/18px 18px 16px 16px}
.g2-tile:hover{transform:translateY(-4px) rotate(-0.5deg) scale(1.02);box-shadow:0 16px 36px rgba(139,47,30,0.2)}
.g2-tile:active{transform:scale(0.97)}
.g2-tile .emoji{font-size:42px;line-height:1;position:relative;z-index:2;
  filter:drop-shadow(0 4px 10px rgba(139,47,30,0.3));transition:transform .3s var(--spring)}
.g2-tile:hover .emoji{transform:scale(1.18) rotate(-6deg)}
.g2-tile h3{font-family:var(--expand);font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:0.5px;
  color:var(--red-deep);position:relative;z-index:2}
.g2-tile p{font-size:12px;color:rgba(74,43,30,0.7);line-height:1.3;position:relative;z-index:2}
.g2-tile .new-badge{position:absolute;top:46px;left:-30px;z-index:3;transform:rotate(-38deg);
  font-family:var(--expand);font-size:9px;font-weight:900;letter-spacing:2px;color:#fff;
  background:linear-gradient(135deg,#E8A020,#D45C41);padding:3px 34px;
  box-shadow:0 3px 8px rgba(139,47,30,0.3)}
.g2-tile .live-badge{position:absolute;top:9px;right:12px;z-index:3;font-family:var(--expand);font-size:9px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:99px;
  background:var(--peach);color:var(--red-deep)}

/* ── Store / sauce identity ─────────────────────────────────────── */
.g2-store-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g2-store{border-radius:var(--r-md);border:2px solid var(--sand);padding:14px;text-align:left;
  background:var(--ink-2);transition:all .18s var(--spring);position:relative;overflow:hidden}
.g2-store .sauce{font-family:var(--expand);font-weight:900;font-size:14px;text-transform:uppercase;letter-spacing:0.5px}
.g2-store .loc{font-size:11.5px;color:var(--txt-dim)}
.g2-store.sel{transform:scale(1.03);border-color:currentColor;box-shadow:0 6px 18px rgba(139,47,30,0.18)}
.g2-store .blob{position:absolute;right:-14px;bottom:-18px;width:64px;height:64px;border-radius:50%;
  background:currentColor;opacity:0.22;filter:blur(2px)}

.g2-vs-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.g2-fighter{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:110px}
.g2-fighter .ava{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--expand);font-weight:900;font-size:22px;box-shadow:0 4px 14px rgba(139,47,30,0.25);
  background:currentColor}
.g2-fighter .ava span{color:var(--cream)}
.g2-fighter .nm{font-family:var(--expand);font-weight:800;font-size:13px;letter-spacing:0.5px;color:var(--txt)}
.g2-fighter .st{font-size:11px;color:var(--txt-dim);text-transform:uppercase;letter-spacing:1px}
.g2-vs-burst{font-family:var(--expand);font-weight:900;font-size:30px;letter-spacing:2px;color:var(--red);
  animation:vsPulse 1.2s var(--spring) infinite}
@keyframes vsPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* ── League board ───────────────────────────────────────────────── */
.g2-league-row{display:flex;align-items:center;gap:12px;padding:11px 6px;border-bottom:1.5px solid var(--sand-soft)}
.g2-league-row:last-child{border-bottom:none}
.g2-league-row .rank{font-family:var(--expand);font-weight:900;font-size:18px;width:26px;text-align:center;color:var(--txt-dim)}
.g2-league-row.first .rank{color:var(--gold)}
.g2-league-row .swatch{width:14px;height:14px;border-radius:5px;background:currentColor;box-shadow:0 2px 8px rgba(139,47,30,0.25)}
.g2-league-row .who{flex:1;min-width:0}
.g2-league-row .who .sauce{font-family:var(--expand);font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:0.8px}
.g2-league-row .who .loc{font-size:11px;color:var(--txt-dim)}
.g2-league-row .pts{font-family:var(--expand);font-weight:900;font-size:20px;font-variant-numeric:tabular-nums}
.g2-league-row .meta{font-size:10.5px;color:var(--txt-dim);text-align:right}
.g2-bar{height:6px;border-radius:3px;background:var(--sand-soft);overflow:hidden;margin-top:5px}
.g2-bar i{display:block;height:100%;border-radius:3px;background:currentColor;transition:width .8s var(--ease)}

/* ── HUD (in-game) — menu-board style ───────────────────────────── */
.g2-hud{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;
  border-radius:var(--r-md);background:var(--red);color:var(--peach);
  box-shadow:0 6px 18px rgba(139,47,30,0.25)}
.g2-hud .score{font-family:var(--expand);font-weight:900;font-size:26px;font-variant-numeric:tabular-nums;line-height:1;color:#fff}
.g2-hud .lbl{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--peach)}
.g2-timer{font-family:var(--expand);font-weight:900;font-size:24px;font-variant-numeric:tabular-nums;color:#fff}
.g2-timer.low{color:#FFE08A;animation:vsPulse .6s infinite}
.g2-opp-bar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--peach)}
.g2-opp-bar .opp-score{font-family:var(--expand);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;color:#fff}

/* ── Overlays: countdown / result ───────────────────────────────── */
.g2-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(250,247,241,0.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px}
.g2-overlay.show{display:flex}
.g2-count{font-family:var(--expand);font-weight:900;font-size:120px;color:var(--red);
  text-shadow:0 8px 0 var(--peach);animation:countPop .9s var(--spring)}
@keyframes countPop{0%{transform:scale(2.4);opacity:0}45%{transform:scale(1);opacity:1}100%{transform:scale(0.92)}}
.g2-result{max-width:380px;width:100%;text-align:center;animation:resultIn .5s var(--spring)}
@keyframes resultIn{from{transform:translateY(30px) scale(0.92);opacity:0}to{transform:none;opacity:1}}
.g2-result .headline{font-family:var(--expand);font-weight:900;font-size:clamp(34px,9vw,52px);text-transform:uppercase;
  letter-spacing:1px;line-height:1;color:var(--red)}
.g2-result .headline.win{color:var(--red);text-shadow:0 6px 0 var(--peach)}
.g2-result .headline.lose{color:var(--txt-dim);text-shadow:none}
/* chicken sticker stamp (brand pg16) — JS adds .g2-sticker to win overlays */
.g2-sticker{width:92px;height:92px;border-radius:50%;background:var(--red);margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(139,47,30,0.3);
  animation:stampIn .55s var(--spring)}
.g2-sticker img{width:54%;}
@keyframes stampIn{0%{transform:scale(2.2) rotate(-18deg);opacity:0}60%{transform:scale(0.95) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(-4deg)}}

/* searching / queue spinner */
.g2-search{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px;text-align:center}
.g2-fry{width:64px;height:64px;position:relative}
.g2-fry::before{content:'🍟';font-size:52px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  animation:fryBob 1s var(--spring) infinite}
@keyframes fryBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
.g2-dots::after{content:'…';animation:g2dots 1.2s steps(4) infinite}
@keyframes g2dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* toast */
.g2-toast{position:fixed;left:50%;bottom:calc(34px + var(--safe-b));transform:translateX(-50%) translateY(80px);
  background:var(--red);color:var(--peach);padding:12px 22px;border-radius:99px;
  font-size:13.5px;font-weight:600;z-index:300;opacity:0;transition:all .35s var(--spring);max-width:88vw;text-align:center;
  box-shadow:0 8px 22px rgba(139,47,30,0.3)}
.g2-toast.show{transform:translateX(-50%);opacity:1}

/* modal sheet */
.g2-sheet{position:fixed;inset:0;z-index:250;display:none;align-items:flex-end;justify-content:center;
  background:rgba(74,43,30,0.4)}
.g2-sheet.show{display:flex}
.g2-sheet .inner{width:100%;max-width:430px;background:var(--cream);border-top:4px solid var(--red);
  border-radius:26px 26px 0 0;padding:22px 20px calc(30px + var(--safe-b));
  animation:sheetUp .35s var(--spring)}
@keyframes sheetUp{from{transform:translateY(60%)}to{transform:none}}
.g2-input{width:100%;background:var(--ink-2);border:2px solid var(--sand);border-radius:var(--r-md);color:var(--txt);
  padding:14px 16px;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.g2-input:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(212,92,65,0.15)}

/* page shell */
.g2-page{max-width:480px;margin:0 auto;padding:6px 16px calc(46px + var(--safe-b));position:relative;z-index:2}
.g2-page.wide{max-width:760px}
.g2-section{margin-top:22px}

/* match feed */
.g2-feed-item{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--txt-dim);
  padding:7px 2px;border-bottom:1.5px dashed var(--sand)}
.g2-feed-item:last-child{border-bottom:none}
.g2-feed-item .g{font-family:var(--expand);font-size:9px;font-weight:800;text-transform:uppercase;
  letter-spacing:1px;color:var(--red);background:var(--peach-soft);padding:2px 8px;border-radius:99px;white-space:nowrap}
.g2-feed-item .w{color:var(--red);font-weight:700}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}
@media(min-width:700px){
  .g2-grid{grid-template-columns:repeat(3,1fr)}
}