/* Client-style presentation layered over styles.css */
.client-loading { background: #0b1a3a; padding: 0; }
.client-loading .loading-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.client-loading .loading-logo { position: absolute; top: 4vh; left: 50%; transform: translateX(-50%); width: min(420px, 60vw); filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.client-loading .loading-bottom { position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); width: min(560px, 80vw); text-align: center; color: #fff; font: 600 15px/1.4 system-ui, sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,.8); }
.loading-bar { margin-top: 10px; height: 14px; border-radius: 7px; background: rgba(10,25,60,.75); border: 2px solid #f5a623; overflow: hidden; }
.loading-bar span { display: block; height: 100%; width: 0; background: linear-gradient(#ffd36b, #f08a14); transition: width .3s; }
.client-loading .sigil, .client-loading strong { display: none; }

.client-topbar { display: flex; align-items: center; gap: 12px; padding: 6px 10px; left: 12px; right: auto; top: 12px; }
.client-topbar .hud-logo { height: 30px; }
.client-topbar select { font: 600 13px system-ui, sans-serif; padding: 4px 6px; border-radius: 6px; border: 2px solid #f5a623; background: #13305e; color: #fff; }
.status-mini { color: #cfe3ff; font: 12px system-ui, sans-serif; opacity: .75; }
.guide { display: none; }

.area-banner { position: fixed; top: 16vh; left: 50%; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 1.2s; }
.area-banner.show { opacity: 1; }
.area-banner span { font: 700 clamp(26px, 4vw, 44px) Georgia, serif; color: #ffe08a; text-shadow: 0 3px 0 #8a3b00, 0 0 18px rgba(0,0,0,.7); letter-spacing: .02em; }

.controls-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; color: #fff; font: 13px system-ui, sans-serif; text-shadow: 0 1px 3px #000; transition: opacity 1.5s; }
.controls-hint.fade { opacity: 0; }
.controls-hint kbd { background: rgba(19,48,94,.85); border: 1px solid #f5a623; border-radius: 4px; padding: 1px 6px; font: 600 12px system-ui, sans-serif; }
.enter { background: linear-gradient(#ffd36b, #f08a14); color: #4a2000; border: 2px solid #fff3c4; font-weight: 800; }

.plates span { position: fixed; transform: translate(-50%,-100%); pointer-events: none; font: 700 13px system-ui, sans-serif; color: #fff8c8; text-shadow: 0 0 3px #000, 0 1px 2px #000; white-space: nowrap; }

.talk-prompt { position: fixed; left: 50%; bottom: 26%; transform: translateX(-50%); padding: 6px 14px; border-radius: 16px; background: rgba(19,48,94,.85); border: 2px solid #f5a623; color: #fff; font: 600 14px system-ui, sans-serif; pointer-events: none; }
.dialog { position: fixed; left: 50%; bottom: 6%; transform: translateX(-50%); width: min(620px, 90vw); padding: 14px 18px 10px; border-radius: 14px; background: linear-gradient(#fdf6dc, #f3e2b0); border: 3px solid #c8781a; box-shadow: 0 6px 18px rgba(0,0,0,.45); color: #3b2306; font: 15px/1.45 system-ui, sans-serif; }
.dialog strong { display: block; color: #a4470a; font: 700 17px Georgia, serif; margin-bottom: 4px; }
.dialog p { margin: 0 0 6px; }
.dialog small { display: block; text-align: right; color: #7a5520; font-weight: 600; }

.bag { position: fixed; right: 12px; top: 12px; min-width: 170px; max-width: 240px; padding: 8px 12px; border-radius: 12px; background: rgba(19,48,94,.85); border: 2px solid #f5a623; color: #fff; font: 13px system-ui, sans-serif; }
.bag strong { display: block; color: #ffd36b; font: 700 15px Georgia, serif; margin-bottom: 4px; }
.bag div { display: flex; justify-content: space-between; gap: 12px; }
.bag em { opacity: .8; font-size: 12px; }
.toast { position: fixed; left: 50%; top: 32%; transform: translateX(-50%); font: 800 22px Georgia, serif; color: #ffe08a; text-shadow: 0 2px 0 #7a3300, 0 0 10px #000; opacity: 0; pointer-events: none; }
.toast.show { animation: toast 1.6s ease-out; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -24px); } }
.harvest-bar { position: fixed; left: 50%; bottom: 30%; transform: translateX(-50%); width: 260px; text-align: center; color: #fff; font: 600 13px system-ui, sans-serif; text-shadow: 0 1px 2px #000; }
.harvest-bar i { display: block; height: 10px; width: 0; margin-top: 4px; border-radius: 5px; background: linear-gradient(#b9f06b, #3c9a16); box-shadow: 0 0 0 2px rgba(10,25,60,.8); }

@media (max-width: 900px) { .bag { top: auto; bottom: 56px; right: 8px; } }

.bag .coins { float: right; color: #fff; font: 700 13px system-ui, sans-serif; }
.dialog .opt { padding: 3px 8px; margin: 2px 0; border-radius: 6px; background: rgba(200,120,26,.15); font-weight: 600; }

.dialog .opt.dim { opacity: .5; }
.dialog .coins-inline { float: right; font: 700 14px system-ui, sans-serif; color: #7a5520; }
.mount-menu { bottom: auto; top: 12%; }

/* square loading posters (ui/loading/*): shown whole on the posters' own blue, without the logo over their headline */
.client-loading.alt-art { background: #1d3474; }
.client-loading.alt-art .loading-art { object-fit: contain; }
.client-loading.alt-art .loading-logo { display: none; }

/* quest engine (quests.js): nameplate marks, tracker, dialog */
.plates span.qm-offer::before, .plates span.qm-step::before { content: '!'; display: block; margin: 0 auto 2px; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; text-align: center; font: 900 17px system-ui, sans-serif; color: #5a3000; background: radial-gradient(#ffe98a, #f0a91c); border: 2px solid #7a4a00; }
.plates span.qm-step::before { content: '?'; background: radial-gradient(#e8f0ff, #9fb8e8); color: #1c2f5a; border-color: #1c2f5a; }
.quest-dialog .qd-title { font-weight: 800; color: #ffd76a; font-size: 15px; margin-bottom: 4px; }

/* Journal Quests tab: pick the quest the HUD tracks */
.jr-entry .qtrack { float: right; margin: -2px 0 0 8px; padding: 1px 8px; border: 0; border-radius: 8px; background: #ffd24a; color: #4a2508; font: 700 11px "Trebuchet MS", sans-serif; cursor: pointer; }
.jr-entry em.qtrack.on { background: #5fd3ff; color: #08304a; font-style: normal; }

/* Kart garage (garage.js): slots, part tiles (paged by ui-pager.js, never scrolled), stat bars */
.garage-panel { width: min(860px, 94vw); bottom: 4%; }
.garage-panel .gx-tabs, .garage-panel .gx-cats { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.garage-panel .gx-tabs button, .garage-panel .gx-cats button, .garage-panel .gx-btn { font: 600 13px system-ui, sans-serif; padding: 3px 10px; border-radius: 8px; border: 2px solid #c8781a; background: #fbe9b8; color: #5a3209; cursor: pointer; }
.garage-panel button.on { background: #c8781a; color: #fff; }
.garage-panel .gx-slots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.garage-panel .gx-slot { display: flex; flex-direction: column; align-items: center; padding: 3px 2px; border-radius: 8px; border: 2px solid transparent; background: rgba(200,120,26,.15); cursor: pointer; font: 600 12px system-ui, sans-serif; color: #5a3209; min-width: 0; }
.garage-panel .gx-slot.on { border-color: #c8781a; }
.garage-panel .gx-slot small { font-size: 10px; text-align: center; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.garage-panel .gx-row { display: flex; gap: 10px; margin-top: 6px; }
.garage-panel .gx-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-content: start; min-height: 190px; }
.garage-panel .gx-tile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3px; border-radius: 8px; background: rgba(200,120,26,.12); border: 2px solid transparent; cursor: pointer; font: 600 11px/1.15 system-ui, sans-serif; }
.garage-panel .gx-tile.eq { border-color: #3e8f2a; }
.garage-panel .gx-tile.no { opacity: .55; }
.garage-panel .gx-tile small { font-size: 10px; margin: 2px 0 0; text-align: center; }
.garage-panel .gx-ic { display: inline-block; border-radius: 6px; flex: none; }
.garage-panel .gx-side { width: 230px; flex: none; }
.garage-panel .gx-bar { display: flex; align-items: center; gap: 6px; font: 600 12px system-ui, sans-serif; margin: 2px 0; }
.garage-panel .gx-bar span { width: 82px; }
.garage-panel .gx-bar b { flex: 1; height: 9px; border-radius: 5px; background: rgba(90,50,9,.2); overflow: hidden; }
.garage-panel .gx-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e9a42c, #c8781a); }
.garage-panel .gx-desc { font-size: 12px; min-height: 2.6em; }
.garage-panel .gx-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }