/* The hidden attribute always wins over panel display rules. */
[hidden] { display: none !important; }
/* Free Realms window skin, built from the client's own UI art:
   - frame: inventory window (ui/inventory/img10914970474104458708.png) — navy panel, orange-red rim, fairy
     silhouettes, gold vine corners, light rays — used as a 9-slice border image on every panel;
   - inner panels: inventory sub-panel blue; tabs: common_shared_assets parchment tab / blue selected tab;
   - close button: common_shared_assets parchment X; emblem: questjournal gold winged crest.
   Loaded after hud.css. */
:root {
  --fr-rim: #e0582a;
  --fr-panel-edge: rgba(176, 208, 255, .55);
  --fr-text: #eef5ff; --fr-dim: #b9cdeb; --fr-gold: #ffd75e; --fr-gold-2: #f5a623; --fr-gold-3: #a85a08;
  --fr-font: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
}
/* ---- window frame ---- */
.fr-window, .dialog, .fish-book {
  border: 46px solid transparent !important;
  border-image: url(ui/inventory/img10914970474104458708.png) 92 fill / 46px stretch !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .6));
  color: var(--fr-text) !important;
  font: 14px/1.35 var(--fr-font);
  padding: 0 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
}
.fr-window > *, .dialog > *, .fish-book > * { position: relative; }
.dialog > :first-child, .fish-book > :first-child { margin-top: -22px; }
.dialog > :last-child, .fish-book > :last-child { margin-bottom: -18px; }
/* titles: big white letters with a dark outline, gold winged crest above */
.dialog > strong:first-child, .fish-book > strong:first-child, .fr-title {
  display: block; text-align: center; margin: -24px -10px 12px; padding: 4px 10px 8px;
  font: bold 22px var(--fr-font) !important; color: #fff !important; letter-spacing: .4px;
  text-shadow: 0 2px 0 #0b1a38, 2px 0 0 #0b1a38, -2px 0 0 #0b1a38, 0 -2px 0 #0b1a38, 0 0 10px rgba(80, 160, 255, .6) !important;
  background: none !important; box-shadow: none !important;
  border-bottom: 2px solid rgba(176, 208, 255, .25);
}
.fr-title::before, .dialog > strong:first-child::before, .fish-book > strong:first-child::before {
  content: ""; position: absolute; left: 50%; top: -46px; width: 90px; height: 45px; transform: translateX(-50%);
  background: url(ui/questjournal/img4400450279827786814.png) center/contain no-repeat; pointer-events: none;
}
.dialog p, .fish-book p, .dialog small, .fish-book small { color: var(--fr-dim) !important; }
.dialog small, .fish-book small { display: block; text-align: center; margin-top: 8px; }
.dialog b, .fish-book b { color: #fff; }
.coins-inline { position: absolute; right: 4px; top: -18px; color: var(--fr-gold) !important; font-weight: bold; }
/* rows / list entries sit in the lighter blue inner panels */
.dialog .opt, .fish-book .opt, .jr-item, .jr-entry {
  border-radius: 12px !important; margin: 5px 0; padding: 7px 12px;
  background: linear-gradient(180deg, rgba(130, 175, 235, .38), rgba(80, 125, 200, .28)) !important;
  border: 1px solid var(--fr-panel-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(0, 0, 0, .25) !important;
  color: var(--fr-text) !important;
}
.dialog .opt:hover, .fish-book .opt:hover { background: linear-gradient(180deg, rgba(160, 200, 255, .5), rgba(100, 150, 225, .38)) !important; }
.jr-item small, .jr-entry small { color: var(--fr-dim) !important; }
.jr-unknown { opacity: .55; }
.jr-discovery { border-left: 4px solid var(--fr-gold) !important; }
.jr-milestone { border-left: 4px solid #8ef07a !important; }
.jr-rumour { border-left: 4px solid #c9a6ff !important; }
.journal .hearts { color: #ff7aa2 !important; }
/* tabs: original parchment tab, blue when selected */
.shop-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.shop-tabs button {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; min-width: 96px; height: 30px; padding: 0 12px !important;
  background: url(ui/common_shared_assets/img17845494113035316970.png) center/100% 100% no-repeat !important;
  color: #5a3a14 !important; font: bold 13px var(--fr-font) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .6) !important; cursor: pointer;
}
.shop-tabs button:hover { background-image: url(ui/common_shared_assets/img3434149920456697397.png) !important; }
.shop-tabs button.on { background-image: url(ui/common_shared_assets/img8060554737772534045.png) !important; color: #fff !important; text-shadow: 0 1px 0 #0b1a38 !important; }
/* buttons: glossy orange-gold with outlined white text */
.fr-btn, .dialog button:not(.fr-close):not([data-t]):not(.pg-prev):not(.pg-next), .fish-book button:not(.fr-close):not([data-t]):not(.pg-prev):not(.pg-next), .cr-buttons button {
  border: 2px solid var(--fr-gold-3) !important; border-radius: 18px !important;
  background: linear-gradient(180deg, #fff1a8 0%, var(--fr-gold) 30%, var(--fr-gold-2) 72%, #e07b12 100%) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #7a3f05, 0 3px 8px rgba(0, 0, 0, .4) !important;
  color: #fff !important; font: bold 14px var(--fr-font) !important;
  text-shadow: 0 1px 0 #7a3f05, 1px 0 0 #7a3f05, -1px 0 0 #7a3f05, 0 -1px 0 #7a3f05 !important;
  padding: .45em 1.2em; cursor: pointer;
}
.fr-btn:hover, .dialog button:not(.fr-close):not([data-t]):hover { filter: brightness(1.1); transform: translateY(-1px); }
/* scrollbars in the original blue */
.dialog ::-webkit-scrollbar, .fish-book ::-webkit-scrollbar, .jr-body::-webkit-scrollbar { width: 12px; }
.dialog ::-webkit-scrollbar-track, .fish-book ::-webkit-scrollbar-track, .jr-body::-webkit-scrollbar-track { background: rgba(10, 25, 55, .5); border-radius: 6px; }
.dialog ::-webkit-scrollbar-thumb, .fish-book ::-webkit-scrollbar-thumb, .jr-body::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #7fb4f0, #3d74c2); border-radius: 6px; border: 2px solid rgba(10, 25, 55, .5); }
/* close button sits in the frame's corner slot */
.fr-close { position: absolute !important; top: -40px; right: -38px; width: 32px; height: 32px; border: 0; cursor: pointer; z-index: 3;
  background: url(ui/common_shared_assets/img3183507215546452106.png) center/contain no-repeat; }
.fr-close:hover { background-image: url(ui/common_shared_assets/img8899176108732244923.png); }

/* ---- Journal: a wider book with the tab strip across the top ---- */
.journal { width: min(780px, 94vw) !important; }
.journal .jr-body { max-height: 56vh; overflow: auto; padding-right: 4px; }
.journal .jr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }

/* ---- Atlas pause menu ---- */
.pause-menu { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: radial-gradient(circle, rgba(20, 40, 80, .45), rgba(5, 10, 25, .78)); }
.pm-frame { position: relative; width: min(1180px, 96vw); text-align: center; }
.pm-body { display: flex; gap: 14px; align-items: stretch; }
.pm-mapwrap { flex: 1 1 auto; border-radius: 14px; overflow: hidden; border: 3px solid #0b1a38; box-shadow: 0 0 0 2px var(--fr-rim), inset 0 0 18px rgba(0, 0, 0, .5); background: #1a4c7a; }
.pm-map { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: contain; }
.pm-side { flex: 0 0 210px; display: flex; flex-direction: column; gap: 12px; }
.pm-legend { padding: 12px; border-radius: 12px; color: #fff; text-align: left; font-size: 13px;
  background: linear-gradient(180deg, rgba(130, 175, 235, .38), rgba(80, 125, 200, .28)); border: 1px solid var(--fr-panel-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); text-shadow: 0 1px 0 #0a2a55; }
.pm-legend b { display: block; font: bold 18px var(--fr-font); margin-bottom: 4px; }
.pm-legend span { display: block; margin-bottom: 4px; }
.pm-pct { color: #b8ff9a; font-weight: bold; }
.pm-key { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pm-key img { width: 26px; height: 26px; }
.k-you { width: 0; height: 0; border-left: 16px solid #ffcf3a; border-top: 9px solid transparent; border-bottom: 9px solid transparent; filter: drop-shadow(0 0 2px #5a2a00); margin: 0 6px 0 4px; }
.k-cloud { width: 26px; height: 18px; border-radius: 10px; background: radial-gradient(circle at 35% 35%, #fff, #cdd8f3); box-shadow: 0 2px 2px rgba(80, 80, 140, .4); }
.pm-buttons { display: flex; flex-direction: column; gap: 8px; }
.pm-hint { display: block; margin-top: 8px; color: var(--fr-dim); }
@media (max-width: 760px) { .pm-body { flex-direction: column; } .pm-side { flex-basis: auto; } .pm-buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; } }

/* ---- scrolling: only the list scrolls; the frame (title, crest, close button) never clips ---- */
.journal, .pm-frame, .dialog:not(.fish-book) { overflow: visible !important; max-height: none !important; }
/* (scrolling replaced by ui-pager.js pages) */
.fish-book:not(.journal) > strong:first-child::before { display: none; } /* crest would be clipped by the scroll box */
.fish-book:not(.journal) > strong:first-child { margin-top: -10px; }
.journal > strong:first-child, .dialog:not(.fish-book) > strong:first-child { margin-top: -10px; }
.journal .jr-body { overflow-x: hidden; }

/* ---- no scrolling anywhere: lists page with the original blue arrows (ui-pager.js) ---- */
.journal .jr-body, .fish-book, .dialog { overflow: visible !important; max-height: none !important; }
.fish-book:not(.journal) > strong:first-child::before { display: block; }
.ui-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 2px; grid-column: 1 / -1; }
.ui-pager span { color: #fff; font: bold 13px var(--fr-font); text-shadow: 0 1px 0 #0b1a38; min-width: 90px; }
.ui-pager button { width: 34px !important; height: 34px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important;
  background-color: transparent !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; cursor: pointer; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.ui-pager .pg-prev { transform: scaleX(-1); }
.ui-pager button:hover { filter: brightness(1.2) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
@media (max-width: 760px) { .pm-map { max-height: 48vh; } }

/* every large panel opens centred above the HUD */
.fish-book { top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; z-index: 60 !important; width: min(680px, 94vw); }
.dialog em, .fish-book em { color: var(--fr-dim) !important; font-style: normal; }

/* controller highlight (gamepad.js) */
.pad-focus { outline: 3px solid #ffd75e !important; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 215, 94, .35), 0 0 16px rgba(255, 200, 60, .7) !important; position: relative; z-index: 1; }

/* ---- combat (combat.js) & dungeon objectives (dungeon.js) ---- */
.combat-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.combat-num { position: absolute; transform: translate(-50%, -50%); font: 900 20px/1 'Trebuchet MS', sans-serif; color: #fff6c8; text-shadow: 0 0 3px #000, 0 2px 0 #7a3b00, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; white-space: nowrap; }
.combat-num.hurt { color: #ff5a48; font-size: 22px; }
.combat-num.heal { color: #7dff8a; }
.combat-num.crit { color: #ffcf2a; font-size: 26px; }
.combat-num.ability { color: #bfe4ff; font-size: 15px; font-style: italic; }
.combat-flash { position: fixed; inset: 0; pointer-events: none; z-index: 29; box-shadow: inset 0 0 120px rgba(220, 20, 10, .55); opacity: 0; }
.combat-flash.on { animation: combatflash .45s ease-out; }
@keyframes combatflash { from { opacity: 1; } to { opacity: 0; } }
.enemy-bar { position: absolute; width: 64px; height: 7px; transform: translate(-50%, -100%); border-radius: 4px; background: rgba(20, 8, 8, .75); box-shadow: 0 0 0 1px rgba(255, 220, 160, .55); overflow: hidden; }
.enemy-bar i { display: block; height: 100%; background: linear-gradient(#ff7a5a, #c1261b); transition: width .15s; }
.enemy-bar.boss { width: 120px; height: 10px; box-shadow: 0 0 0 2px #e8b13a; }
.quest-tracker { position: fixed; top: 150px; left: 14px; z-index: 25; min-width: 230px; max-width: 300px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(rgba(16, 32, 68, .88), rgba(10, 22, 48, .88)); box-shadow: 0 0 0 2px #e8a33a, 0 4px 14px rgba(0, 0, 0, .45); color: #eaf2ff; font: 13px/1.45 'Trebuchet MS', sans-serif; pointer-events: none; }
.quest-tracker strong { display: block; color: #ffd75e; font-size: 15px; text-shadow: 0 1px 0 #5a2c00; margin-bottom: 3px; }
.quest-tracker .ok { color: #9dff9d; text-decoration: line-through; opacity: .85; }
.quest-tracker small { display: block; margin-top: 4px; color: #b8c9e8; }
/* the Trove/Speedy tracker sits under the minimap so it never covers the cellar's */
.quest-tracker.trove { left: auto; right: 14px; top: 330px; }

/* Key badges on dock buttons (keys.js) and the Controls panel (F1). */
.hud-dock [data-key] { position: relative; }
.key-badge { position: absolute; right: -3px; bottom: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 4px; background: linear-gradient(#34477a, #1b2648); border: 1px solid #a9c0ea; color: #fff; font: 700 10px/15px "Trebuchet MS", sans-serif; font-style: normal; text-align: center; pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,.6); z-index: 2; }
.controls-panel { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: hidden; padding: 12px 16px 12px; border-radius: 16px; background: linear-gradient(#2f4a7d, #1d2f57); border: 3px solid #c9dcf5; box-shadow: 0 6px 24px rgba(0,0,0,.6); color: #fff; font-family: "Trebuchet MS", system-ui, sans-serif; }
.controls-panel[hidden] { display: none; }
.cp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 20px; }
.cp-x { background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; }
.cp-cols { column-width: 210px; column-gap: 20px; }
.cp-cols section { break-inside: avoid; }
.cp-cols h4 { margin: 6px 0 4px; color: #ffd86b; font-size: 14px; border-bottom: 1px solid rgba(201,220,245,.35); }
.cp-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; padding: 1px 0; }
.cp-key, .cp-row kbd { min-width: 44px; padding: 1px 7px; border-radius: 6px; background: linear-gradient(#4a63a0, #2a3c6c); border: 1px solid #a9c0ea; color: #fff; font: 700 12px "Trebuchet MS", sans-serif; text-align: center; cursor: pointer; }
.cp-row kbd { cursor: default; background: rgba(255,255,255,.08); }
.cp-key:hover { border-color: #ffd86b; }
.cp-key.wait { background: #ffd86b; color: #3a2a00; }
.cp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 10px; }
.cp-foot small { opacity: .8; }
@media (max-width: 520px) { .cp-cols { column-width: 150px; } .cp-row { font-size: 11px; } }

/* The original Esc Options menu (menu.js, art from options.gfx). */
.og-menu { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; align-content: center; background: rgba(8,14,30,.45); font-family: "Trebuchet MS", system-ui, sans-serif; }
.og-menu[hidden] { display: none; }
.om-logo { width: 240px; margin-bottom: -18px; position: relative; z-index: 2; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.om-panel { position: relative; width: 300px; padding: 46px 30px 52px; background: var(--top) top center / 100% 72px no-repeat, var(--bot) bottom center / 100% 72px no-repeat, var(--mid) center / 100% 100% no-repeat; background-origin: border-box; border-radius: 26px; box-shadow: 0 8px 26px rgba(0,0,0,.55); }
.om-title { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 20px; color: #fff; text-shadow: 0 2px 0 #1a3a6a, 0 0 6px #0d2448; }
.om-x { position: absolute; top: 12px; right: 14px; width: 26px; height: 26px; border: 0; background: var(--x0) center / contain no-repeat; cursor: pointer; }
.om-x:hover { background-image: var(--x1); }
.om-body { display: grid; gap: 8px; padding-top: 8px; }
.om-btn { height: 40px; border: 18px solid transparent; border-image: var(--btn0) 24 fill / 18px stretch; padding: 0; background: none; color: #4b2a07; font: 800 16px "Trebuchet MS", sans-serif; text-shadow: 0 1px 0 rgba(255,255,255,.6); line-height: 4px; cursor: pointer; }
.om-btn:hover, .om-btn.pad-focus { border-image-source: var(--btn1); }
.om-btn:active { border-image-source: var(--btn2); }
.om-btn.red { border-image-source: var(--red0); color: #fff; text-shadow: 0 1px 2px #5a1200; }
.om-btn.red:hover, .om-btn.red.pad-focus { border-image-source: var(--red1); }
.om-btn.red:active { border-image-source: var(--red2); }
.om-back { position: absolute; right: 22px; bottom: 14px; width: 30px; height: 30px; border: 0; background: var(--b0) center / contain no-repeat; cursor: pointer; }
.om-back:hover { background-image: var(--b1); } .om-back:active { background-image: var(--b2); }
.om-slider { display: grid; grid-template-columns: 1fr 96px 30px; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: 13px; text-shadow: 0 1px 2px #0d2448; }
.om-slider input { width: 96px; accent-color: #f2b92b; }
.om-slider b { text-align: right; font-size: 12px; }
.og-menu h5 { margin: 6px 0 0; color: #ffd86b; font-size: 13px; text-shadow: 0 1px 2px #0d2448; }
.om-radio { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: 13px; text-shadow: 0 1px 2px #0d2448; }
.om-radio span { flex: 1; }
.om-radio button { padding: 2px 12px; border-radius: 10px; border: 2px solid #c9dcf5; background: rgba(10,30,70,.5); color: #fff; font: 700 12px "Trebuchet MS", sans-serif; cursor: pointer; }
.om-radio button.on { background: #f2b92b; color: #4b2a07; border-color: #fff2b0; }
.om-help { margin: 4px 0; color: #fff; font-size: 13px; line-height: 1.45; text-shadow: 0 1px 2px #0d2448; }
.om-help b { color: #ffd86b; }
.om-verify { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 1px 2px #0d2448; }
.om-verify img { width: 96px; flex: none; }
.om-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 360px) { .om-panel { width: calc(100vw - 32px); padding-left: 18px; padding-right: 18px; } }
.key-badge[hidden] { display: none; }

/* ---- kart race HUD (racing.js; adapted layout, the original racelap/raceorder .gfx art is not exported yet) ---- */
.race-hud { position: fixed; inset: 0; pointer-events: none; z-index: 40; font-family: inherit; color: #fff; text-shadow: 0 2px 3px #000a; }
.race-hud[hidden] { display: none; }
.race-hud .rh-box { position: absolute; top: 120px; left: 16px; background: linear-gradient(#2c4a8acc, #182a55cc); border: 2px solid #f0b54a; border-radius: 12px; padding: 8px 14px; min-width: 150px; }
.race-hud .rh-lap { font-size: 15px; letter-spacing: 1px; } .race-hud .rh-lap b { font-size: 26px; color: #ffd76a; }
.race-hud .rh-pos { font-size: 16px; } .race-hud .rh-pos b { font-size: 34px; color: #ffd76a; } .race-hud .rh-pos small { font-size: 14px; margin-right: 4px; }
.race-hud .rh-time { font-size: 18px; font-variant-numeric: tabular-nums; } .race-hud .rh-best { font-size: 12px; opacity: .85; }
.race-hud .rh-speed { position: absolute; right: 24px; bottom: 110px; font-size: 36px; font-weight: 700; color: #ffd76a; } .race-hud .rh-speed small { font-size: 14px; color: #fff; }
.race-hud .rh-big { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); font-size: 96px; font-weight: 800; color: #ffd76a; -webkit-text-stroke: 3px #7a3b00; }
.race-hud .rh-order { position: absolute; top: 330px; right: 16px; margin: 0; padding: 6px 10px 6px 30px; background: #182a55b0; border-radius: 10px; font-size: 13px; }
.race-hud .rh-order li.me { color: #ffd76a; font-weight: 700; }
.race-hud .rh-results { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); background: linear-gradient(#2c4a8a, #182a55); border: 3px solid #f0b54a; border-radius: 16px; padding: 16px 26px; text-align: center; min-width: 300px; }
.race-hud .rh-results h2 { margin: 0 0 8px; color: #ffd76a; } .race-hud .rh-results table { width: 100%; border-collapse: collapse; font-size: 14px; }
.race-hud .rh-results td { padding: 2px 6px; text-align: left; } .race-hud .rh-results tr.me { color: #ffd76a; font-weight: 700; }
@media (max-width: 600px) { .race-hud .rh-order { display: none; } .race-hud .rh-big { font-size: 64px; } }
.race-hud .rh-items { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: 360px; }
.race-hud .rh-slot { width: 64px; height: 64px; border-radius: 50%; background: #182a55c0; border: 2px solid #8fa6d8; display: grid; place-items: center; font-size: 11px; font-weight: 700; text-align: center; }
.race-hud .rh-slot.use { border: 3px solid #ffd76a; width: 76px; height: 76px; font-size: 13px; }
.race-hud .rh-meter { flex-basis: 100%; height: 8px; border-radius: 4px; background: #182a55c0; border: 1px solid #8fa6d8; overflow: hidden; }
.race-hud .rh-meter span { display: block; height: 100%; background: linear-gradient(90deg, #ffb13b, #ffe27a); }
.race-hud .rh-items small { flex-basis: 100%; text-align: center; font-size: 12px; }
.race-hud .rh-boostbar { position: relative; flex-basis: 100%; height: 32px; } .race-hud .rh-boostbar > img { position: absolute; left: 50%; transform: translateX(-50%); width: 128px; height: 32px; }
.race-hud .rh-boostbar .fill { position: absolute; left: calc(50% - 64px); top: 0; height: 32px; overflow: hidden; } .race-hud .rh-boostbar .fill img { width: 128px; height: 32px; }
.race-hud .rh-map { position: absolute; left: 16px; bottom: 120px; background: #182a5590; border-radius: 12px; padding: 4px; }
.race-hud .rh-map .road { fill: none; stroke: #c9d8f5; stroke-width: 7; stroke-linejoin: round; } .race-hud .rh-map .line { fill: none; stroke: #5d6f9a; stroke-width: 1; }
.race-hud .rh-map .flag { fill: #fff; stroke: #000; stroke-width: 2; stroke-dasharray: 2 2; } .race-hud .rh-map circle { fill: #e2463b; stroke: #fff; stroke-width: 1; } .race-hud .rh-map circle.me { fill: #ffd76a; stroke: #000; }
.race-hud .rh-wrong { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: 128px; height: 128px; animation: rhpulse .8s infinite alternate; }
@keyframes rhpulse { from { opacity: .6; } to { opacity: 1; } }
@media (max-width: 600px) { .race-hud .rh-map { display: none; } }

.race-hud .rh-challenge { color: #ffb0a0; } .race-hud .rh-challenge.ok { color: #9ff09a; font-weight: 700; }
.race-board .opt small { opacity: .8; font-size: 12px; }

/* warping from the map (worldmap.js): the list of found warpstones */
.pm-warps { padding: 10px; border-radius: 12px; background: linear-gradient(#2c4a8acc, #182a55cc); color: #fff; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pm-warps b { font: bold 16px var(--fr-font); } .pm-warps small { opacity: .85; font-size: 12px; }
.pm-warp { padding: 5px 10px; border-radius: 10px; border: 2px solid #b06a12; background: linear-gradient(#ffd767, #f3a02a); color: #4a2400; font-weight: 700; cursor: pointer; text-align: left; }
.pm-warp:hover { filter: brightness(1.1); }
/* items + boost bar on the right above the speed (the chat log owns the bottom-left) */
.race-hud .rh-items { left: auto; right: 16px; bottom: 170px; transform: none; max-width: 260px; justify-content: flex-end; }
.race-hud .rh-speed { bottom: 120px; }
@media (max-width: 800px) { .race-hud .rh-items { bottom: 150px; } .race-hud .rh-slot { width: 48px; height: 48px; } .race-hud .rh-slot.use { width: 58px; height: 58px; } .race-hud .rh-map { bottom: 230px; transform: scale(.8); transform-origin: left bottom; } }
.race-hud .rh-map { bottom: auto; top: 300px; }
@media (max-width: 800px) { .race-hud .rh-map { bottom: auto; top: 290px; transform: scale(.75); transform-origin: left top; } }

/* during a race the other trackers step aside for the race HUD */
body.racing .hud-quest, body.racing .quest-log-tracker, body.racing .quest-tracker { display: none !important; }

/* Demo Derby HUD (derby.js) */
.derby-hud .dh-health { height: 12px; margin: 6px 0 2px; border-radius: 6px; background: #3a1010; border: 1px solid #f0b54a; overflow: hidden; }
.derby-hud .dh-health span { display: block; height: 100%; background: linear-gradient(90deg, #e2463b, #ffd76a, #6ee36e); }
.derby-hud .dh-ann { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); font-size: 22px; font-weight: 800; color: #ffd76a; white-space: nowrap; }
.derby-hud .dh-crown { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.derby-hud .rh-order li b { color: #ffd76a; margin-left: 4px; }

/* original Flash minigames (flashgames.js) */
.flash-overlay { position: fixed; inset: 4vh 4vw; z-index: 60; display: flex; flex-direction: column; background: linear-gradient(#2c4a8a, #182a55); border: 3px solid #f0b54a; border-radius: 16px; padding: 8px; }
.flash-overlay[hidden] { display: none; }
.flash-overlay .fo-bar { display: flex; justify-content: space-between; align-items: center; color: #ffd76a; padding: 0 6px 6px; font-size: 18px; }
.flash-overlay .fo-close { background: #f3a02a; border: 2px solid #b06a12; border-radius: 10px; font-weight: 800; cursor: pointer; padding: 2px 10px; }
.flash-overlay .fo-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.flash-overlay .fo-stage > * { width: 100%; height: 100%; }
.flash-overlay .fo-wait { color: #fff; }
.dialog.flash-overlay { left: 4vw !important; right: 4vw !important; top: 4vh !important; bottom: 4vh !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; transform: none !important; margin: 0 !important; }
.flash-overlay .fo-bar { flex: none; position: relative; z-index: 1; }
.flash-overlay .fo-stage { position: relative; overflow: hidden; border-radius: 10px; }
.flash-overlay .fo-stage > * { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

.jobs-panel .jobs-all .job-prof small { display: block; opacity: .85; }

/* "restored from cut data" label on shop rows (original content that never shipped) */
.restored-tag{display:inline-block;margin-left:6px;padding:0 5px;border-radius:6px;font-size:10px;background:#7a4fb3;color:#fff;vertical-align:middle}