/* FIRST RODEO v1.4: pixel-art UI. All text and frames are canvases drawn by js/pixelui.js at the
   game's art resolution; --P is one art pixel in CSS px (an integer number of device pixels). */
:root { --P:2px; --ink:#2B2B3A; --cream:#F2EAD3; --gold:#FFD23F; --red:#D7263D; --wood:#8C5A2B; --deep:#6B3E1F; --grass:#3E8E3E; --pink:#F29CB2; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; height:100vh; height:100dvh; background:#1b2a1b; overflow:hidden; overscroll-behavior:none; touch-action:none;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
body { font-family: monospace; font-size:10px; color:var(--cream);
  background: repeating-linear-gradient(0deg,#233a23 0 16px,#284428 16px 32px); }
/* v1.8 safe areas: main.js sizes #stage to the viewport minus env(safe-area-inset-*) (read from #saProbe) and it is
   centred inside the safe rectangle; viewport-fit=cover lets the grass background run under the notch */
#saProbe { position:fixed; left:0; top:0; width:0; height:0; visibility:hidden; pointer-events:none;
  padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
main#game-main { display:block; }
#stage { position:fixed; touch-action:none; left:calc(50% + (env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) / 2); top:calc(50% + (env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 2); transform:translate(-50%,-50%); overflow:hidden; box-shadow:0 0 0 4px #1a1a24, 0 10px 0 4px rgba(0,0,0,.4); }
#game { display:block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action:none; }
.hidden { display:none !important; }
button { font:inherit; cursor:pointer; background:none; border:0; padding:0; color:inherit; }

/* ---- pixel text + skins (generated by pixelui.js) ---- */
.screen, #toasts, #hudBtns, #btnCharge, #rotate, button { line-height:0; }
canvas.pw { display:inline-block; vertical-align:top; image-rendering:pixelated; image-rendering:crisp-edges; }
.sr, .vh { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skinned { isolation:isolate; }
canvas.pxbg { position:absolute; left:0; top:0; z-index:-1; pointer-events:none; image-rendering:pixelated; image-rendering:crisp-edges; }
.pxpress > canvas.pxbg.dn { visibility:hidden; }
.pxpress:active:not(:disabled) > canvas.pxbg.dn { visibility:visible; }
.pxpress:active:not(:disabled) > canvas.pxbg.up { visibility:hidden; }
.pxpress:active:not(:disabled) > :not(.pxbg) { transform:translateY(calc(var(--P) * 2)); }
.tab.pxpress:active > :not(.pxbg), .hudbtn.pxpress:active > :not(.pxbg), .fbtn.pxpress:active > :not(.pxbg) { transform:translateY(var(--P)); }
:focus { outline:none; }
:focus-visible { outline: var(--P) dashed var(--gold); outline-offset: var(--P); }
#pxFrame { position:absolute; left:0; top:0; z-index:6; pointer-events:none; display:none; image-rendering:pixelated; image-rendering:crisp-edges; }
#pxFrame.on { display:block; }

/* ---- layout ---- */
.screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--P) * 4);
  padding:calc(var(--P) * 8) calc(var(--P) * 10); text-align:center; z-index:5; touch-action:manipulation; }
.panel { background: rgba(35,30,40,.84); justify-content:flex-start; padding:calc(var(--P) * 11) calc(var(--P) * 10) calc(var(--P) * 9); overflow-y:auto; touch-action:pan-y; scrollbar-width:none; }
.panel::-webkit-scrollbar { display:none; }
.panel > * { flex-shrink:0; }
/* v1.9: while idle (title sub-screens, game over) the site shows MORE GAMES + FAQ in the top-left: start panel content below that zone */
html[data-gigi-state=idle] .panel { padding-top:max(calc(var(--P) * 11), var(--gigiTop, 0px)); }
h2 { margin:calc(var(--P) * 2) 0; --ts:2; --tsh:var(--deep); --tsh2:var(--ink); color:var(--gold); }

.btn { --skin:btn-gold; position:relative; display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; color:var(--ink);
  min-width:60%; min-height:max(44px, calc(var(--P) * 22)); padding:calc(var(--P) * 4) calc(var(--P) * 8) calc(var(--P) * 6); margin:var(--P) 0; }
.btn.big { --skin:btn-red; --ts:2; --tsh:#8E1826; color:#fff; min-height:max(52px, calc(var(--P) * 30)); animation: bob 1.2s steps(1) infinite; }
.btn.small { --skin:btn-cream; min-width:40%; }
.row2 .btn.small { min-width:0; }
/* v1.9 FULLSCREEN: a square wooden-sign icon button in the menu, next to SETTINGS (the site now owns the top-left
   MORE GAMES + FAQ pair, and a top-right sign collided with it on ~360-380px wide phones) */
#btnFull { --skin:sign; position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:max(44px, calc(var(--P) * 22)); min-height:max(44px, calc(var(--P) * 22)); margin:var(--P) 0; padding-bottom:var(--P); touch-action:manipulation; }
#btnFull.pxpress:active > :not(.pxbg) { transform:translateY(var(--P)); }
.row2.has-full { gap:calc(var(--P) * 4); }
.btn.danger { --skin:btn-danger; }
.btn:disabled { color:#4E4C58; --tsh:none; cursor:default; }
#btnHowOk { --ts:1; padding-left:calc(var(--P) * 10); padding-right:calc(var(--P) * 10); }
/* v1.6: on the game-over screen the attention bob is on SHARE, not RIDE AGAIN (sizes/colours unchanged) */
#btnAgain { animation:none; }
#btnShare { animation: bob 1.2s steps(1) infinite; }
@keyframes bob { 50% { transform: translateY(calc(var(--P) * -1)); } }
.menu { display:flex; flex-direction:column; align-items:center; width:100%; }
.row2 { display:flex; gap:calc(var(--P) * 4); width:100%; justify-content:center; }
.row2 .btn { min-width:0; flex:1; max-width:46%; }

/* title */
#scrTitle { justify-content:flex-start; padding-top:max(calc(var(--P) * 14), var(--gigiTop, 0px)); /* v1.9: keeps the site's top-left MORE GAMES + FAQ zone clear */ gap:calc(var(--P) * 3); }
#logo { width:calc(var(--P) * 150); height:auto; image-rendering:pixelated; image-rendering:crisp-edges; filter: drop-shadow(0 calc(var(--P) * 3) 0 rgba(0,0,0,.35)); animation: logobob 2.4s steps(1) infinite; }
@keyframes logobob { 50% { transform: translateY(calc(var(--P) * -1)); } }
.tagline { margin:0; color:var(--cream); --tsh:var(--ink); }
.titleStats { white-space:nowrap; display:flex; gap:calc(var(--P) * 10); color:var(--gold); --tsh:var(--ink); margin-bottom:calc(var(--P) * 2); }
.titleStats:empty, .titleStats span:empty { display:none; }
.follow { display:flex; align-items:center; justify-content:center; gap:calc(var(--P) * 3); margin-top:calc(var(--P) * 2); color:var(--cream); --tf:tiny; --tsh:var(--ink); }
.followLbl { margin-right:calc(var(--P) * 1); }
.fbtn { --skin:sign; position:relative; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:max(44px, calc(var(--P) * 17)); height:max(44px, calc(var(--P) * 16)); padding-bottom:var(--P); text-decoration:none; touch-action:manipulation; }
canvas.fico { display:block; image-rendering:pixelated; image-rendering:crisp-edges; pointer-events:none; }
.credit { position:absolute; bottom:calc(var(--P) * 4); --tf:tiny; color:var(--cream); opacity:.75; }

/* how to */
.how { text-align:left; margin:0; padding:0; list-style:none; width:100%; }
.how li { position:relative; padding-left:calc(var(--P) * 10); margin:0 0 calc(var(--P) * 5); }
.how .num { position:absolute; left:0; top:0; color:var(--gold); --tsh:var(--ink); }
.gold { color:var(--gold); } .red { color:#ff6b7c; } .pink { color:var(--pink); }

/* pick */
#scrPick { background: rgba(20,18,28,.6); gap:calc(var(--P) * 3); }
.pickTitle { animation: drop .3s steps(3) backwards; }
@keyframes drop { 0% { transform:translateY(calc(var(--P) * -30)); } 100% { transform:none; } }
.pickSub { margin:0; color:var(--cream); --tsh:var(--ink); }
#cards { display:flex; flex-direction:column; gap:calc(var(--P) * 3); width:100%; }
.card { --skin:card; position:relative; display:flex; align-items:center; gap:calc(var(--P) * 4); text-align:left; color:var(--ink); min-height:44px;
  padding:calc(var(--P) * 6) calc(var(--P) * 7) calc(var(--P) * 8); animation: deal .32s steps(4) backwards; }
.card:nth-child(2) { animation-delay:.08s } .card:nth-child(3) { animation-delay:.16s }
@keyframes deal { 0% { transform: translateY(calc(var(--P) * 120)); } 100% { transform:none; } }
.card > canvas:not(.pxbg) { image-rendering:pixelated; flex:none; background:#E8D6A0; box-shadow: 0 0 0 var(--P) var(--ink); }
.card.r-L > canvas:not(.pxbg) { background:#FFF1B8; }
.card .ct { flex:1; min-width:0; }
.card .nm { display:block; }
.card .ds { display:block; color:#3A3445; margin-top:calc(var(--P) * 2); }
.card .meta { display:block; margin-top:calc(var(--P) * 3); --tf:tiny; color:#7A6650; }
.card .key { position:absolute; right:calc(var(--P) * 6); top:calc(var(--P) * 4); --tf:tiny; color:#A89878; }
.rar { display:inline-block; --tf:tiny; color:#fff; margin-left:calc(var(--P) * 3); padding:calc(var(--P) * 1) calc(var(--P) * 2) 0; background:#777; box-shadow:0 0 0 var(--P) var(--ink); vertical-align:top; }
.rar.C { background:#8C7A5A; } .rar.U { background:#3B6FC4; } .rar.R { background:#8E5BD6; } .rar.L { background:#C9A020; }

/* HUD */
.hudbtn { --skin:hud; position:relative; width:max(44px, calc(var(--P) * 20)); height:max(44px, calc(var(--P) * 20)); color:var(--cream); display:inline-flex; align-items:center; justify-content:center; padding-bottom:var(--P); }
#hudBtns { position:absolute; right:calc(var(--P) * 3); bottom:calc(var(--P) * 3); display:flex; gap:calc(var(--P) * 3); z-index:4; }
#btnCharge { --skin:btn-red; --tsh:#8E1826; position:absolute; left:50%; bottom:6%; transform:translateX(-50%); z-index:4; color:#fff; min-height:max(44px, calc(var(--P) * 22));
  padding:calc(var(--P) * 4) calc(var(--P) * 9) calc(var(--P) * 6); display:inline-flex; align-items:center; animation: blink .6s steps(1) infinite; }
@keyframes blink { 50% { filter: brightness(1.25); } }

/* toasts */
#toasts { position:absolute; top:calc(var(--P) * 26); left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:calc(var(--P) * 3); z-index:20; pointer-events:none; }
#toasts.low { top:auto; bottom:calc(var(--P) * 6); }
.toast { --skin:toast; position:relative; color:var(--gold); padding:calc(var(--P) * 6) calc(var(--P) * 9) calc(var(--P) * 8); max-width:94%; text-align:center; animation: toast 3.2s steps(1) forwards; }
.toast small { display:block; color:var(--cream); margin-top:calc(var(--P) * 2); }
@keyframes toast { 0% { transform:translateY(calc(var(--P) * -10)); opacity:0 } 4% { transform:translateY(calc(var(--P) * -4)); opacity:1 } 8%,86% { transform:none; opacity:1 } 93% { transform:translateY(calc(var(--P) * -4)); opacity:.6 } 100% { transform:translateY(calc(var(--P) * -10)); opacity:0 } }

/* game over */
.bigscore { --ts:3; --tsh:var(--red); --tsh2:var(--ink); color:#fff; }
.subscore { color:var(--cream); }
.newbest { --ts:2; --tsh:var(--red); color:var(--gold); animation: bestblink .5s steps(1) infinite; }
@keyframes bestblink { 50% { transform: translateY(calc(var(--P) * -2)); color:#fff; } }
.stats { --skin:stats; position:relative; display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--P) * 3) calc(var(--P) * 8); width:100%; text-align:left;
  padding:calc(var(--P) * 7) calc(var(--P) * 8); --tf:tiny; }
.stats span { display:flex; justify-content:space-between; align-items:flex-end; color:var(--cream); }
.stats span b { color:var(--gold); --tf:normal; }
.build { display:flex; flex-wrap:wrap; gap:calc(var(--P) * 2); justify-content:center; }
.build span { --skin:chip; position:relative; --tf:tiny; color:var(--cream); padding:calc(var(--P) * 3) calc(var(--P) * 4) calc(var(--P) * 2); }
.build span.L { --skin:chip-L; color:var(--gold); }
.earned { color:var(--gold); --tsh:var(--ink); }
.initials { display:flex; flex-direction:column; gap:calc(var(--P) * 3); align-items:center; color:var(--cream); width:100%; }
.initials label { width:100%; }
.slotwrap { --skin:slots; position:relative; display:block; width:calc(var(--P) * 78); height:max(48px, calc(var(--P) * 30)); }
#scrInit { justify-content:center; gap:calc(var(--P) * 3); background: rgba(24,20,30,.9); }
.initstep { display:flex; flex-direction:column; align-items:center; gap:calc(var(--P) * 4); width:100%; }
.madeit { animation: bestblink .5s steps(1) infinite; }
.initscore { --ts:3; --tsh:var(--red); --tsh2:var(--ink); color:#fff; }
.initrank { --tsh:var(--ink); color:var(--gold); }
.picker { display:flex; flex-direction:column; align-items:center; gap:calc(var(--P) * 2); }
.picker .arrows { display:flex; gap:calc(var(--P) * 2); width:calc(var(--P) * 78); }
.picker .arrow { flex:1; min-width:0; margin:0; padding:calc(var(--P) * 2) 0 calc(var(--P) * 4); min-height:44px; color:var(--ink); }
#initials .btn.big { min-width:60%; }
.slotwrap input { position:absolute; inset:0; width:100%; height:100%; opacity:0.011; font-size:16px; text-transform:uppercase; border:0; background:transparent; color:transparent; caret-color:transparent; padding:0; cursor:text; }
.inithint { display:block; width:100%; --tf:tiny; color:var(--cream); opacity:.8; }
.initials .btn.small { min-width:0; margin:0; }
#btnInitSkip { color:#6A5E50; }

/* shop / badges / board */
.tabs { display:flex; width:100%; gap:calc(var(--P) * 2); }
.tab { --skin:tab; position:relative; flex:1; color:var(--cream); min-height:max(44px, calc(var(--P) * 20)); padding:calc(var(--P) * 3) calc(var(--P) * 1) calc(var(--P) * 4); display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content:center; gap:var(--P); --tf:tiny; }
.tab.on { --skin:tab-on; color:var(--ink); }
.tab small { display:block; width:100%; }
.list { width:100%; display:flex; flex-direction:column; gap:calc(var(--P) * 3); }
.item { --skin:plank; position:relative; display:flex; align-items:center; gap:calc(var(--P) * 4); padding:calc(var(--P) * 5) calc(var(--P) * 7) calc(var(--P) * 6); text-align:left; color:var(--cream); }
.item .ct { flex:1; min-width:0; }
.item .ct small { display:block; color:#E6D8B8; margin-top:calc(var(--P) * 2); }
.item.locked { --skin:plank-dim; color:#B0A6B0; }
.item.locked .ct small { color:#9A909A; }
.item.got { --skin:plank-got; }
.item > canvas:not(.pxbg) { image-rendering:pixelated; flex:none; }
.item .btn { min-width:0; padding:calc(var(--P) * 3) calc(var(--P) * 4) calc(var(--P) * 5); margin:0; min-height:44px; }
.dollars { --ts:2; --tsh:var(--ink); color:var(--gold); }
table.board { width:100%; border-collapse:collapse; }
table.board td { padding:calc(var(--P) * 3) calc(var(--P) * 2) calc(var(--P) * 2); border-bottom:var(--P) solid rgba(242,234,211,.14); text-align:left; }
table.board tr.me td { color:var(--gold); }
/* v1.9 columns: # | NAME | DATE (America/Chicago, tiny muted, left) | SCORE (right) */
table.board th { --tf:tiny; color:#C8BCA0; font-weight:normal; text-align:left; padding:0 calc(var(--P) * 2) calc(var(--P) * 2); border-bottom:var(--P) solid rgba(242,234,211,.28); }
table.board td, table.board th { white-space:nowrap; }
table.board .brank { width:1%; }
table.board td.bwhen { --tf:tiny; color:#B7AC92; padding-top:calc(var(--P) * 4); }
table.board .bwhen { width:calc(var(--P) * 50); }
table.board .bscore { text-align:right; }
table.board tr.me td.bwhen { color:#E8C86A; }
.boardnote { --tf:tiny; color:var(--cream); opacity:.85; text-align:center; margin:calc(var(--P) * 2) 0; min-height:calc(var(--P) * 7); }
#scrBoard [data-back] { position:sticky; bottom:0; }

/* settings */
.settings { display:flex; flex-direction:column; gap:calc(var(--P) * 3); width:100%; text-align:left; }
.settings label { --skin:plank; position:relative; display:flex; align-items:center; gap:calc(var(--P) * 4); justify-content:space-between; min-height:max(44px, calc(var(--P) * 22)); padding:calc(var(--P) * 4) calc(var(--P) * 7) calc(var(--P) * 5); color:var(--cream); cursor:pointer; }
.settings input[type=checkbox] { -webkit-appearance:none; appearance:none; margin:0; order:2; flex:none; width:calc(var(--P) * 11); height:calc(var(--P) * 11); background:#F2EAD3; border:var(--P) solid var(--ink); box-shadow: inset calc(var(--P) * -1) calc(var(--P) * -1) 0 #C8B070; cursor:pointer; }
.settings input[type=checkbox]:checked { background: var(--chk) center / calc(var(--P) * 9) no-repeat, #FFD23F; box-shadow: inset calc(var(--P) * -1) calc(var(--P) * -1) 0 #C9A020; image-rendering:pixelated; }
.settings input[type=range] { -webkit-appearance:none; appearance:none; width:50%; height:calc(var(--P) * 4); margin:0 calc(var(--P) * 3); background:var(--ink); box-shadow:0 0 0 var(--P) #1E1510; cursor:pointer; }
.settings input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:calc(var(--P) * 7); height:calc(var(--P) * 13); background:var(--gold); border:0; border-radius:0; box-shadow:0 0 0 var(--P) var(--ink), inset calc(var(--P) * -1) calc(var(--P) * -2) 0 #C9A020; }
.settings input[type=range]::-moz-range-thumb { width:calc(var(--P) * 7); height:calc(var(--P) * 13); background:var(--gold); border:0; border-radius:0; box-shadow:0 0 0 var(--P) var(--ink); }
.selbtn { min-width:0 !important; margin:0 !important; }

#rotate { position:fixed; inset:0; background:var(--ink); color:var(--gold); display:flex; align-items:center; justify-content:center; z-index:50; text-align:center; padding:20px; --ts:2; --tsh:#000; }


/* ---------------- v1.10: Daily Ride, challenge line, Boss Practice posters, pick hint ---------------- */
.btn.daily { --skin:btn-gold; }
#rowDaily.solo .btn.daily { max-width:none; flex:none; min-width:60%; }
.challenge { margin:0; color:var(--gold); --ts:1; text-align:center; }
.pickHint { margin:var(--P) 0 0; color:var(--cream, #F2EAD3); opacity:.85; --ts:1; text-align:center; }
.card.partner { outline:none; }
.dailybox { display:flex; flex-direction:column; align-items:center; gap:var(--P); margin:var(--P) 0; }
.dailybox canvas { width:auto; height:calc(var(--P) * 10); image-rendering:pixelated; image-rendering:crisp-edges; }
#dailyLine, #dailyHead { margin:0; }
#dailyHead { color:var(--gold); }
.wanted { display:flex; flex-direction:column; align-items:center; gap:var(--P); width:100%; }
.btn.poster { --skin:plank; flex-direction:column; color:#F2EAD3; min-height:max(44px, calc(var(--P) * 26)); gap:calc(var(--P) * 1); width:80%; }
.btn.poster.beaten { --skin:plank-got; }
.btn.poster.locked, .btn.poster:disabled { --skin:plank-dim; color:#9A90A0; }
.btn.poster .wt { color:var(--gold); }