/* Realistic 3D market (Assets/market3dhd/page.php) — on top of ../market3d/style.css (HUD, sheets, map). */
body.hd { background: #9cc4e8; }
#btnTime.on, #btnQuality.low { background: #1f4e79; color: #fff; }
#btnQuality { min-width: 44px; }

#loader {
    position: fixed;
    left: 50%;
    top: 55%;
    width: min(260px, 70vw);
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity .4s;
}
#loader.done { opacity: 0; }
.loader-bar { height: 6px; border-radius: 3px; background: #ffffff80; overflow: hidden; box-shadow: 0 1px 4px #0002; }
#loaderFill { display: block; height: 100%; width: 0; background: #1f4e79; transition: width .2s; }

/* Arrows are 3D in this version; the fade is a soft dip to dark instead of white. */
body.hd #fade { background: #0d1b2a; }

/* First-visit quality chooser (Market.chooseQuality); SD is the default. */
#qualityPick {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(340px, calc(100% - 32px));
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 8px 32px #0004;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    z-index: 5;
}
#qualityPick[hidden] { display: none; }
#qualityPick h2 { margin: 0 0 4px; font-size: 17px; color: #1a1a2e; }
#qualityPick button { display: flex; flex-direction: column; gap: 2px; border: 2px solid #d5dee8; background: #f7f9fb; border-radius: 10px; padding: 11px; cursor: pointer; font: inherit; color: #1a1a2e; }
#qualityPick button:hover, #qualityPick button:focus-visible { border-color: #1f4e79; outline: none; }
#qualityPick button[data-q="low"] { border-color: #1f4e79; background: #eef3f8; }
#qualityPick small { color: #555; font-size: 12px; }
#qualityPick p { margin: 2px 0 0; font-size: 12px; color: #666; }
#loader[hidden] { display: none; }