@import url('css/widgets.css');
@import url('css/screens.css');
@import url('css/hud.css');
@import url('css/options.css');
@import url('css/chatvoice.css');
@import url('css/economy.css');
@import url('mobile/theme.css');
@import url('mobile/screens.css');
@import url('mobile/store.css');
@import url('mobile/skin.css');
@import url('social/social.css');
@import url('social/trade.css');
@import url('mobile/capsule2.css');
@import url('mobile/skin2.css');
@import url('mobile/home.css');
@import url('css/currency.css');
@import url('css/pcfidelity.css');
@import url('css/hudedit.css');

/* MicroVolts web UI kit - base stylesheet.  Design space = 1024x768 ("stage"), scaled to the viewport by ui.js.
   Sections: 1 root/stage  2 original-layout controls (layout.js)  3 shared widgets  4 screens  5 HUD  6 touch  */

:root {
  --mv-font: 'MVArial', Arial, 'Noto Sans Thai', 'Leelawadee UI', 'Tahoma', 'Segoe UI', sans-serif;
  --mv-ink: #2c3a55;            /* dark blue text on the paper UI */
  --mv-ink-soft: #5d6b88;
  --mv-paper: #eef0fa;
  --mv-blue: #3b84d9;
  --mv-red: #d94141;
  --mv-gold: #ffd84a;
  --mv-bg: #0b0b16;
  --mv-safe-t: env(safe-area-inset-top, 0px);
  --mv-safe-r: env(safe-area-inset-right, 0px);
  --mv-safe-b: env(safe-area-inset-bottom, 0px);
  --mv-safe-l: env(safe-area-inset-left, 0px);
}

/* ------------------------------------------------------------------------------------------------ 1 root / stage */
.mv-root {
  position: fixed; inset: 0; overflow: hidden; background: var(--mv-bg);
  font-family: var(--mv-font); font-size: 12px; color: var(--mv-ink);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: none; overscroll-behavior: none;
}
.mv-root *, .mv-root *::before, .mv-root *::after { box-sizing: border-box; }
.mv-stage { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; transform-origin: 0 0; overflow: hidden; }
.mv-backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #1b2140 0%, #0b0b16 70%); }
.mv-screen { position: absolute; inset: 0; }
.mv-screen[hidden] { display: none; }
.mv-full { position: absolute; inset: 0; pointer-events: none; }        /* full-viewport layer (HUD, touch) - not scaled with the stage; must not swallow clicks meant for the stage below, widgets inside opt in with pointer-events:auto */
.mv-full:not(.mv-hud) > .mv-screen { pointer-events: auto; }   /* full-viewport screens (login, charselect ...) are interactive */
.mv-hud .mv-screen { pointer-events: none; }                    /* the in-game HUD passes clicks/taps through to the canvas; its widgets opt in */
.mv-root input, .mv-root select, .mv-root textarea { user-select: text; -webkit-user-select: text; touch-action: auto; font-family: inherit; }
.mv-root button { font-family: inherit; }

/* ------------------------------------------------------------------------------------------------ 2 original layout controls */
.dlg { position: absolute; pointer-events: none; }
.c { position: absolute; }
.spr { position: absolute; left: 0; top: 0; background-repeat: no-repeat; pointer-events: none; image-rendering: auto; }
.c > .t, .c > .tt { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; pointer-events: none; z-index: 5; font-family: var(--mv-font); }
.c-static > .t { white-space: normal; line-height: 1.15; }
.c-picture, .c-static { pointer-events: none; }
.btn, .chk, .combo { cursor: pointer; pointer-events: auto; }
.btn .l-o, .btn .l-p, .btn .l-s, .btn .l-d { display: none; }
.btn:hover:has(.l-o) .l-n, .btn:active:has(.l-p) .l-n, .btn.sel:has(.l-s) .l-n { visibility: hidden; }
.btn.sel:not(:has(.l-s)):has(.l-p) .l-n, .btn.sel:not(:has(.l-s)):has(.l-p) .l-o { display: none; } .btn.sel:not(:has(.l-s)) .l-p { display: block; }
.btn:hover .l-o { display: block; }
.btn:active .l-o { display: none; } .btn:active .l-p { display: block; } .btn:active:not(:has(.l-p)) .l-o { display: block; }
.btn.sel .l-o, .btn.sel .l-p { display: none; } .btn.sel .l-s { display: block; }
.btn.disabled, .btn[disabled] { cursor: default; filter: grayscale(.85) brightness(.9); pointer-events: none; }
.btn.disabled .l-d { display: block; } .btn.disabled:has(.l-d) .l-n { visibility: hidden; } .btn.disabled:has(.l-d) { filter: none; }
.btn:focus-visible, .chk:focus-visible { outline: 2px solid #ffd84a; outline-offset: 1px; }
.chk .l-on { display: none; } .chk.checked .l-on { display: block; } .chk.checked .l-off { display: none; }
.chk > .t { left: 22px; }
.edit input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 4px; font-size: 12px; pointer-events: auto; }
.edit { pointer-events: auto; }
.combo > .t { pointer-events: none; }
.prog .l-bar { background-repeat: no-repeat; }
.c.list, .c.slot { overflow: hidden; }
.disabled { opacity: .55; }
.dlg-body { z-index: 0; }

/* shared helpers */
.hide { display: none !important; }
.abs { position: absolute; }
.t-c { text-align: center; } .t-r { text-align: right; }
.nowrap { white-space: nowrap; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-button > .t, .c-checkbox > .t, .c-radiobutton > .t { overflow: visible; }

/* ------------------------------------------------------------------------------------------------ 7 phones / safe areas / backdrop (package A) */
.mv-root { -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: var(--mv-vvh, 100%); }
.mv-root img, .mv-root canvas, .mv-root .spr { -webkit-user-drag: none; user-drag: none; }
/* themed backdrop: the pillars next to the 4:3 stage (and the whole screen behind full-viewport screens) show a blurred, dimmed copy of the game's desk scene instead of plain black */
.mv-backdrop { background: linear-gradient(#1a2552, #090c1c 70%); overflow: hidden; }
.mv-backdrop::before { content: ''; position: absolute; left: -40px; right: -40px; top: -20px; height: min(100% + 40px, 56vw); background: url('/assets/ui/atlas/server_01.webp') 50% 0 / 100% auto no-repeat; filter: blur(14px) brightness(.62) saturate(1.2); }
.mv-backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 35%, #02030a99 100%); }
.mv-viewbtn { position: absolute; z-index: 700; pointer-events: auto; right: var(--mv-safe-r); top: 46%; width: 30px; height: 60px; border-radius: 15px 0 0 15px; border: 2px solid #ffffff55; border-right: 0; background: #0b1230cc; padding: 0; cursor: pointer; box-shadow: 0 2px 8px #0009; }
.mv-pinfill { position: absolute; z-index: 40; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#0d1530, #070b1a); pointer-events: none; }
.mv-viewbtn[hidden] { display: none; }
.mv-viewbtn i { position: absolute; inset: 15px 4px 15px 6px; background: #cfe3ff; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='10' cy='10' r='6.5' fill='none' stroke='black' stroke-width='2.2'/><path d='M15 15l6 6M7 10h6M10 7v6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='10' cy='10' r='6.5' fill='none' stroke='black' stroke-width='2.2'/><path d='M15 15l6 6M7 10h6M10 7v6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/></svg>") center / contain no-repeat; }
.mv-viewbtn:active { filter: brightness(1.4); }
.mv-scrollhint { position: absolute; z-index: 690; width: 4px; border-radius: 2px; background: #dfe9ffcc; box-shadow: 0 0 0 1px #0006; opacity: 0; transition: opacity .35s; pointer-events: none; }
.mv-scrollhint i { display: none; }