/* Gorilla City UI kit (0.4.98): one look for every venue, shop, job and setup panel.
   Built from game-UI research (8 Ball Pool / Golf Clash tier cards, Yakuza minigame menus, Brawl Stars' single
   bold CTA, Apple's game touch-target guidance, Xbox accessibility text/contrast guidelines):
   - one obvious primary action, big touch targets (52 px buttons, 44 px minimum), a visible pressed state;
   - pixel font for titles only, a clean readable face (Rajdhani) for everything you read or tap;
   - gold = interactive, teal = surface, muted decoration; selection shown with colour AND a mark;
   - phones get a bottom sheet with the safe area respected; desktop gets a centred panel;
   - motion is short (120-260 ms) and switched off with reduced motion. */
:root{--ui-bg:#0b1618;--ui-surface:#122427;--ui-surface2:#18302f;--ui-line:rgba(242,193,78,.42);--ui-line-strong:rgba(255,221,133,.85);--ui-gold:#f2c14e;--ui-gold2:#ffdd85;--ui-ink:#f4ecd6;--ui-dim:#a9b9b0;--ui-good:#7fe0a0;--ui-bad:#ff7a6b;--ui-title:Silkscreen,'Press Start 2P',ui-monospace,monospace;--ui-body:Rajdhani,'Segoe UI',system-ui,-apple-system,sans-serif;--ui-r:14px}

/* ---------- panel ---------- */
#venueDialog:not(.casino-dialog),#cruiseDialog,#equipmentDialog,#saveDialog,#newboDialog,#fishingDialog,.vehicle-services-dialog,#contactDialog,#controls{font-family:var(--ui-body);color:var(--ui-ink);background:radial-gradient(120% 60% at 50% -10%,rgba(242,193,78,.10),transparent 60%),linear-gradient(180deg,var(--ui-surface2),var(--ui-bg));border:1.5px solid var(--ui-line);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.07);padding:20px 22px 22px}
#venueDialog:not(.casino-dialog)[open],#cruiseDialog[open],#equipmentDialog[open],#saveDialog[open],#newboDialog[open],#fishingDialog[open],.vehicle-services-dialog[open],#contactDialog[open],#controls[open]{animation:uiIn .24s cubic-bezier(.2,.9,.3,1.1)}
#venueDialog::backdrop,#cruiseDialog::backdrop,#equipmentDialog::backdrop,#saveDialog::backdrop,#newboDialog::backdrop,#fishingDialog::backdrop,.vehicle-services-dialog::backdrop,#contactDialog::backdrop,#controls::backdrop{background:rgba(4,10,12,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@keyframes uiIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes uiSheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}

/* ---------- type ---------- */
#venueDialog:not(.casino-dialog) h2,#cruiseDialog h2,#equipmentDialog h2,#saveDialog h2,#newboDialog h2,#fishingDialog h2,.vehicle-services-dialog h2,#contactDialog h2,#controls h2{font-family:var(--ui-title);font-weight:700;font-size:clamp(18px,4.6vw,24px);line-height:1.15;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-gold2);text-shadow:0 2px 0 #000,0 0 18px rgba(242,193,78,.25);margin:2px 0 10px}
#venueDialog:not(.casino-dialog) h3,#contactDialog h3,#equipmentDialog h3{font-family:var(--ui-body);font-weight:700;font-size:18px;letter-spacing:.04em;color:var(--ui-gold);margin:14px 0 6px}
#venueDialog:not(.casino-dialog) p,#cruiseDialog p,#equipmentDialog p,#contactDialog p,#newboDialog p{font-family:var(--ui-body);font-size:16px;line-height:1.4;color:var(--ui-dim);margin:6px 0}
#venueDialog .ui-status{color:var(--ui-ink);font-weight:600;font-size:17px}
#venueDialog .ui-wallet{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;font-weight:700;color:var(--ui-good);background:rgba(127,224,160,.08);border:1px solid rgba(127,224,160,.3);border-radius:999px;padding:5px 12px;font-size:15px;font-variant-numeric:tabular-nums}
#venueDialog .venue-objectives{font-size:14px;color:var(--ui-gold);background:rgba(242,193,78,.07);border-left:3px solid var(--ui-gold);border-radius:6px;padding:8px 10px}
.ui-kicker{display:block;font-family:var(--ui-title);font-size:10px;letter-spacing:.24em;color:var(--ui-dim);text-transform:uppercase;margin-bottom:2px}

/* ---------- buttons: secondary by default, gold primary, ghost back ---------- */
:where(#venueDialog:not(.casino-dialog),#cruiseDialog,#equipmentDialog,#newboDialog,#fishingDialog,.vehicle-services-dialog,#contactDialog,#controls) button:where(:not(.casino-button):not(.chip):not([class*="card"]):not(.mobile-menu-close)){-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 16px;font:700 16px/1.15 var(--ui-body);letter-spacing:.05em;text-align:left;color:var(--ui-ink);background:linear-gradient(180deg,#1e3a3c,#142a2c);border:1.5px solid var(--ui-line);border-radius:12px;box-shadow:0 3px 0 #061012,0 6px 14px rgba(0,0,0,.25);cursor:pointer;transition:transform .08s,box-shadow .08s,border-color .12s,background .12s}
:where(#venueDialog,#cruiseDialog,#equipmentDialog,#newboDialog,#fishingDialog,.vehicle-services-dialog,#contactDialog,#controls) button:where(:hover:not(:disabled)){border-color:var(--ui-line-strong);background:linear-gradient(180deg,#25484a,#183133)}
:where(#venueDialog,#cruiseDialog,#equipmentDialog,#newboDialog,#fishingDialog,.vehicle-services-dialog,#contactDialog,#controls) button:where(:active:not(:disabled)){transform:translateY(3px);box-shadow:0 0 0 #061012,0 2px 6px rgba(0,0,0,.25)}
:where(#venueDialog,#cruiseDialog,#equipmentDialog,#saveDialog,#newboDialog,#fishingDialog,.vehicle-services-dialog,#contactDialog,#controls) button:focus-visible{outline:2px solid var(--ui-gold2);outline-offset:3px}
:where(#venueDialog,#cruiseDialog,#equipmentDialog,#newboDialog,#fishingDialog,.vehicle-services-dialog,#contactDialog,#controls) button:where(:disabled){opacity:.5;cursor:not-allowed;filter:saturate(.4)}
#venueDialog button.ui-primary,#cruiseDialog button.ui-primary,#contactDialog button.ui-primary{color:#1a1206;background:linear-gradient(180deg,#ffe7a3,#f2c14e);border-color:transparent;box-shadow:0 4px 0 #8a6414,0 8px 18px rgba(0,0,0,.35);justify-content:center;text-align:center}
#venueDialog button.ui-primary:hover:not(:disabled){filter:brightness(1.06);background:linear-gradient(180deg,#fff0bf,#f6c95a)}
#venueDialog button.ui-back,#cruiseDialog button.ui-back,#contactDialog button.ui-back,#equipmentDialog button.ui-back{min-height:48px;justify-content:center;text-align:center;color:var(--ui-gold2);background:transparent;border:1.5px solid rgba(255,255,255,.14);box-shadow:none}
#venueDialog button.ui-back::before,#cruiseDialog button.ui-back::before,#contactDialog button.ui-back::before{content:'‹';font-size:22px;line-height:0;margin-right:2px;opacity:.85}
#venueDialog button img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated;flex:none;border-radius:8px;background:rgba(0,0,0,.25);padding:2px}
.ui-label{flex:1;min-width:0}
.ui-price{flex:none;margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ui-gold2);background:rgba(242,193,78,.12);border:1px solid rgba(242,193,78,.35);border-radius:999px;padding:3px 10px;font-size:15px}
button.ui-sell .ui-price{color:var(--ui-good);background:rgba(127,224,160,.1);border-color:rgba(127,224,160,.35)}
button.ui-buy::after,button.ui-sell::after{content:none}
.ui-tag{flex:none;font:700 11px var(--ui-body);letter-spacing:.12em;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--ui-dim)}
button.ui-buy .ui-tag{background:rgba(242,193,78,.16);color:var(--ui-gold2)}button.ui-sell .ui-tag{background:rgba(127,224,160,.14);color:var(--ui-good)}

/* action lists become a tidy grid: one column on phones, two on wide screens */
#venueDialog .equipment-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:12px}
#venueDialog .equipment-actions button{flex:none;width:100%}
#venueDialog .ui-actionbar{position:sticky;bottom:calc(-22px - env(safe-area-inset-bottom,0px));margin:14px -22px -22px;padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;background:linear-gradient(180deg,rgba(11,22,24,0),rgba(11,22,24,.92) 30%);z-index:2}
#venueDialog .ui-actionbar>button{flex:1}

/* ---------- phones: a bottom sheet, thumbs first ---------- */
@media (max-width:700px){
 #venueDialog#venueDialog:not(.casino-dialog),#cruiseDialog,#equipmentDialog,#newboDialog,#fishingDialog,.vehicle-services-dialog,#contactDialog,#controls{width:100vw;max-width:100vw;margin:auto 0 0;max-height:88dvh;border-radius:22px 22px 0 0;border-bottom:0;padding:22px 16px calc(18px + env(safe-area-inset-bottom,0px))}
 #venueDialog:not(.casino-dialog)[open],#cruiseDialog[open],#equipmentDialog[open],#newboDialog[open],#fishingDialog[open],.vehicle-services-dialog[open],#contactDialog[open],#controls[open]{animation:uiSheet .26s cubic-bezier(.2,.9,.3,1)}
 #venueDialog:not(.casino-dialog)::before,#cruiseDialog::before,#contactDialog::before,#equipmentDialog::before{content:'';position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(255,255,255,.22)}
 #venueDialog .equipment-actions{grid-template-columns:1fr}
 #venueDialog .ui-actionbar{margin:14px -16px calc(-18px - env(safe-area-inset-bottom,0px));padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){#venueDialog[open],#cruiseDialog[open],#equipmentDialog[open],#newboDialog[open],#fishingDialog[open],.vehicle-services-dialog[open],#contactDialog[open],#controls[open]{animation:none!important}:where(#venueDialog,#cruiseDialog,#contactDialog) button{transition:none}}

/* ---------- 3D minigame lobbies (pool, bowling, darts, pickleball, casino): readable type, real secondary/ghost
   buttons, segmented settings, a sticky PLAY bar and a bottom sheet on phones ---------- */
.mg-stage .pool-panel{font-family:var(--ui-body)}
.mg-stage .pool-panel h2,.mg-stage .pool-kicker,.mg-stage .pool-section,.mg-stage .pool-panel .pool-mid b{font-family:var(--ui-title)}
.mg-stage .pool-kicker{font-size:11px;letter-spacing:.24em}
.mg-stage .pool-section{font-size:11px;letter-spacing:.2em;margin:16px 0 8px;display:flex;align-items:center;gap:10px}
.mg-stage .pool-section::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line,rgba(242,193,78,.4)),transparent)}
.mg-stage .pool-panel button:not(.pool-rival):not(.pool-trick):not(.bowl-ballpick){font:700 15px/1.15 var(--ui-body);letter-spacing:.08em;min-height:48px;padding:11px 18px}
.mg-stage .pool-panel button.primary:not(.pool-rival):not(.pool-trick):not(.bowl-ballpick){font-size:18px;min-height:56px;padding:13px 26px;letter-spacing:.1em}
.mg-stage .pool-panel button.secondary:not(.pool-rival):not(.pool-trick):not(.bowl-ballpick):not(.on){color:var(--gold2,#ffdd85);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1.5px solid var(--line,rgba(242,193,78,.55));box-shadow:0 3px 0 rgba(0,0,0,.55)}
.mg-stage .pool-panel button.ghost:not(.pool-rival):not(.pool-trick):not(.bowl-ballpick){color:var(--gold2,#ffdd85);background:transparent;border:1.5px solid rgba(255,255,255,.16);box-shadow:none}
.mg-stage .pool-panel button.ghost.ui-back:not(.pool-rival):not(.pool-trick):not(.bowl-ballpick)::before{content:'‹';font-size:20px;line-height:0;margin-right:6px}
.mg-stage .pool-panel .pool-rival b{font-family:var(--ui-body);font-size:18px;font-weight:700;letter-spacing:.04em}
.mg-stage .pool-panel .pool-rival small,.mg-stage .pool-say,.mg-stage .pool-fine,.mg-stage .pool-panel p{font-family:var(--ui-body);font-size:14px;line-height:1.35;letter-spacing:.01em}
.mg-stage .pool-panel .pool-rival .pool-rec{font-variant-numeric:tabular-nums;opacity:.85;font-weight:600}
.mg-stage .pool-panel .pool-rival{min-height:104px;border-radius:16px}
.mg-stage .pool-panel .pool-rival:active:not(:disabled){transform:translateY(2px) scale(.99)}
.mg-stage .pool-cash{position:static;display:inline-flex;margin:0 0 6px;padding:4px 12px;border-radius:999px;font:700 14px var(--ui-body);letter-spacing:.04em;color:#9fe3a8;background:rgba(127,224,160,.08);border:1px solid rgba(127,224,160,.3);font-variant-numeric:tabular-nums}
/* segmented settings: label above, equal chips, selected = fill + check */
.mg-stage .pool-opt{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px}
.mg-stage .pool-opt>span{width:auto;font:700 12px var(--ui-body);letter-spacing:.16em;color:var(--ui-dim)}
.mg-stage .pool-opt .ui-seg{display:flex;flex-wrap:wrap;gap:6px}
.mg-stage .pool-panel .pool-opt button:not(.pool-rival):not(.pool-trick){flex:1 1 auto;min-height:44px;min-width:64px;justify-content:center;font:700 14px var(--ui-body);letter-spacing:.06em;border-radius:10px}
.mg-stage .pool-panel .pool-opt button.on:not(.pool-rival):not(.pool-trick)::before{content:'✓ ';font-weight:900}
.ui-segment{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12)}
.mg-stage .pool-panel .ui-segment button:not(.pool-rival):not(.pool-trick){flex:1;min-height:42px;padding:8px 6px;font-size:13px;box-shadow:none;border:0;background:transparent;color:var(--ui-ink)}
.mg-stage .pool-panel .ui-segment button.on:not(.pool-rival):not(.pool-trick){color:#1a1206;background:linear-gradient(180deg,#ffe7a3,#f2c14e)}
.mg-stage .ui-segment-label{display:block;margin:14px 0 6px;font:700 12px var(--ui-body);letter-spacing:.16em;color:var(--ui-dim)}
.mg-stage .pool-row.ui-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mg-stage .pool-row.ui-cta{position:sticky;bottom:-22px;margin:18px -24px -22px;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(8,9,12,0),rgba(8,9,12,.95) 35%);display:flex;gap:10px;z-index:2}
.mg-stage .pool-row.ui-cta>button.primary{flex:1 1 60%}
.mg-stage .pool-row.ui-cta>button.ghost{flex:0 1 auto}
.mg-stage .pool-corner .pool-mini{font:700 13px var(--ui-body);letter-spacing:.1em;min-height:44px;padding:8px 14px;color:var(--gold2,#ffdd85);border-radius:10px}
@media (max-width:700px){
 .mg-stage .pool-menu{place-items:end center;padding:0}
 .mg-stage .pool-panel{width:100%;max-height:86dvh;border-radius:22px 22px 0 0;border-bottom:0;padding:22px 16px 18px;animation:uiSheet .28s cubic-bezier(.2,.9,.3,1)}
 .mg-stage .pool-panel::before{content:'';display:block;width:44px;height:5px;margin:-12px auto 10px;border-radius:3px;background:rgba(255,255,255,.22)}
 .mg-stage .pool-rivals{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}
 .mg-stage .pool-rivals::-webkit-scrollbar{display:none}
 .mg-stage .pool-rivals>.pool-rival{flex:0 0 78%;scroll-snap-align:start}
 .mg-stage .pool-opt{grid-template-columns:1fr}
 .mg-stage .pool-row.ui-cta{margin:16px -16px -18px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
 .mg-stage .pool-panel h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.mg-stage .pool-panel{animation:none!important}}
.ui-sep{display:none}
#venueDialog>button.ui-back:not(.venue-game-close),#contactDialog>button.ui-back{position:sticky;bottom:0;width:100%;margin-top:14px;background:linear-gradient(180deg,#14282b,#0e1c1e);z-index:2}
#venueDialog>button.ui-primary{width:100%;margin-top:12px}
/* results: banner drops in, wins glow gold, money counts up */
.mg-stage .pool-panel.results h2{animation:uiDrop .42s cubic-bezier(.2,1.5,.4,1) both}
.mg-stage .pool-panel.results.win h2{color:#ffe27a;text-shadow:0 3px 0 #000,0 0 26px rgba(255,210,80,.55)}
.mg-stage .pool-panel.results.loss h2{color:#ffb2a8}
.mg-stage .pool-panel.results.win{box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,221,133,.4),0 0 60px rgba(242,193,78,.25)}
.ui-count{font-variant-numeric:tabular-nums;font-weight:700;color:#9fe3a8}
@keyframes uiDrop{from{opacity:0;transform:translateY(-22px) scale(1.25)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mg-stage .pool-panel.results h2{animation:none}}
#venueDialog .ui-wallet .ui-bag-label{color:var(--ui-dim);font-weight:600}
#venueDialog .ui-wallet .ui-bag{color:var(--ui-ink);font-weight:600}
@media (max-width:700px){.mg-stage .pool-rivals{scroll-padding-left:16px}}
#venueDialog button.venue-game-close.ui-back{position:absolute;top:14px;right:14px;width:auto;min-height:44px;padding:8px 14px;margin:0}
#venueDialog.venue-game-dialog h2{padding-right:96px}
.mg-stage .pool-row.ui-tiles>button.ghost{grid-column:1/-1;justify-self:start}
/* panels that append their buttons straight into the dialog: stack them full-width, BACK/EXIT always last */
#venueDialog[open]:not(.casino-dialog):has(> button.ui-back:not(.venue-game-close)){display:flex;flex-direction:column;gap:10px}
#venueDialog[open]:not(.casino-dialog):has(> button.ui-back:not(.venue-game-close))>*{margin-top:0;margin-bottom:0}
#venueDialog:not(.casino-dialog)>button:not(.venue-game-close){width:100%}
#venueDialog>button.ui-back:not(.venue-game-close){order:99;margin-top:6px}
/* the 3D minigame stage always fills the screen (a generic dialog max-width was leaving a black strip on phones) */
dialog.mg-stage.mg-stage{max-width:none!important;width:100vw!important;max-height:none!important}