/* Yulgang Reign front-end screens (login, server, character select, dialogs, loading, gates).
   Design: docs/frontend-ui-design.md. Classic Yulgang flavour, calm composition:
   - the gold swirl frame (jade-frame.png, cut from the game's shop_box.png) marks only the ONE primary panel of a screen
     (login window, server window, an open dialog); everything else is a plain soft panel with a thin gold rim;
   - flat fills, one accent (gold), one primary action per screen (ember lacquer), no glow, no stacked effects;
   - 8 px spacing grid, Tahoma / Leelawadee UI, 13-15 px text, 44 px touch targets.
   Only looks and layout change; every element, id, listener and value stays the client's. */
:root {
  --ygf-frame: url(/ui-kit/jade-frame.png) 42 48 44 48 / 42px 48px 44px 48px / 2px 8px 8px 8px stretch;
  --ygf-panel: #0b1a12f0;      /* soft dark jade panel */
  --ygf-panel-solid: #0b1a12;
  --ygf-raise: #13281c;        /* hover / selected fill */
  --ygf-field: #050d08;        /* inputs, rows, tracks */
  --ygf-rim: #e2bd6a52;        /* thin gold rim, ~32 % */
  --ygf-rim-soft: #e2bd6a2e;   /* dividers */
  --ygf-gold: #e2bd6a;         /* the accent */
  --ygf-title: #f3dca0;        /* headings, primary label */
  --ygf-ink: #e6e8da;          /* body text */
  --ygf-dim: #aab8a0;          /* secondary text */
  --ygf-off: #8a927f;          /* disabled, placeholders */
  --ygf-danger: #ff8466;
  --ygf-primary: #8a3812;      /* ember lacquer (original login / connect buttons) */
  --ygf-primary-hot: #9e4517;
  --ygf-primary-down: #6a2a0c;
  --ygf-disabled: #1d1f18;
  --ygf-shadow: #00000080;
  --ygf-veil: #00000059;
  --ygf-vignette: #0000006b;
  --ygf-clear: transparent;
  /* pass 5: depth. Textures cut by frontend_art.py from the client's own art */
  /* plates (owner: no stretched or tiled bitmap, no recolour filters). Both tiers are 44 px: a 1 px transparent border
     around a 42 px padding box, the native height of ui/server_btn_connect.png.
     primary   = the art's two native 48 px end caps (lacquer, carved medallion, scroll ornament; frontend_art.py), the
                 centre drawn in CSS from the art's own column profile (rows 0-41 of column 47), plus a soft vignette
     secondary = the same frame rows in jade, wearing the art's gold edge and scroll (gold pixels only) at native size */
  --ygf-lacquer-v: linear-gradient(to bottom, #00000b 0 1px, #f3c805 1px 2px, #df9b0c 2px 3px, #481e06 3px, #83410f 6px, #c78341 9px,
    #d29c5d 12px, #cd853f 15px, #b8631b 17px, #9c4d0e 19px, #7c3707 21px, #5e2604 23px, #491a01 25px, #3c1101 27px, #2d0c01 30px,
    #250801 34px, #1d0404 39px, #f3c702 39px 40px, #df9b0c 40px 41px, #00000b 41px);
  --ygf-jade-v: linear-gradient(to bottom, #00000b 0 1px, #f3c805 1px 2px, #df9b0c 2px 3px, #0b2615 3px, #174a2c 8px, #23633d 12px,
    #1d5333 16px, #133d23 21px, #0c2a17 27px, #071d0f 34px, #05150b 39px, #f3c702 39px 40px, #df9b0c 40px 41px, #00000b 41px);
  --ygf-vignette-soft: radial-gradient(ellipse 46% 80% at 50% 38%, #ffe2b026, #ffe2b000 70%);
  --ygf-plate1: url(/ui-kit/ygf-cap-primary-l.png) left center / 48px 42px no-repeat padding-box,
    url(/ui-kit/ygf-cap-primary-r.png) right center / 48px 42px no-repeat padding-box,
    var(--ygf-vignette-soft) padding-box, var(--ygf-lacquer-v) padding-box;
  --ygf-plate2: url(/ui-kit/ygf-cap-l.png) left center / 22px 42px no-repeat padding-box,
    url(/ui-kit/ygf-cap-r.png) right center / 22px 42px no-repeat padding-box,
    var(--ygf-vignette-soft) padding-box, var(--ygf-jade-v) padding-box;
  --ygf-plate2-edge: #00000000;
  --ygf-plate2-shadow: 0 0 0 0 #00000000;
  --ygf-tint-hover: inset 0 0 0 99px #ffe9b414;
  --ygf-tint-press: inset 0 0 0 99px #0000004d;
  --ygf-label-hot: #ffe7a3;
  --ygf-engrave: 0 1px 0 #1a0700, 0 -1px 0 #fff4d22e, 0 0 6px #000000b3;
  --ygf-drop: 0 3px 6px #000000a6, 0 1px 0 #000;
  --ygf-drop-hover: 0 6px 12px #000000b3, 0 1px 0 #000;
  --ygf-drop-pressed: 0 1px 2px #000000b3;
  --ygf-well: linear-gradient(#020604, #0a140e);
  --ygf-well-edge: #000000b3;
  --ygf-well-shadow: inset 0 2px 6px #000, inset 0 0 0 1px #e2bd6a26, 0 1px 0 #ffffff14;
  --ygf-well-focus: inset 0 2px 6px #000, inset 0 0 0 1px #e2bd6a, 0 0 8px #e2bd6a59;
  --ygf-placeholder: #8a927f;
  --ygf-socket: linear-gradient(#08120c, #11211a);
  --ygf-socket-edge: #e2bd6a3d;
  --ygf-socket-shadow: inset 0 2px 5px #000000d9, inset 0 -1px 0 #ffffff0f, 0 1px 0 #ffffff12;
  --ygf-socket-lit: linear-gradient(#7a5418, #4a320c 55%, #2c1d06);
  --ygf-socket-lit-shadow: inset 0 0 0 1px #ffe39a59, inset 0 0 14px #e2bd6a59, inset 0 -3px 6px #00000080, 0 0 0 1px #000, 0 2px 6px #000000a6;
  --ygf-lacquer: url(/ui-kit/ygf-corner-tl.png) left top / 30px 30px no-repeat, url(/ui-kit/ygf-corner-tr.png) right top / 30px 30px no-repeat,
    url(/ui-kit/ygf-corner-bl.png) left bottom / 30px 30px no-repeat, url(/ui-kit/ygf-corner-br.png) right bottom / 30px 30px no-repeat,
    linear-gradient(#140905d9, #0b0503eb), url(/ui-kit/panel.png) center / cover;
  --ygf-lacquer-edge: #b5832f;
  --ygf-lacquer-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #4a210c, inset 0 0 0 4px #b5832f59, inset 0 0 22px #000000cc, 0 10px 26px #000000b3;
  --ygf-window-body: radial-gradient(120% 90% at 50% 30%, #0f3d22 0%, #06200f 60%, #020b05 100%);
  --ygf-window-inner: inset 0 0 0 1px #000000b3, inset 0 0 26px #000000b3;
  --ygf-plaque: linear-gradient(#2b1b12, #110a07);
  --ygf-plaque-shadow: inset 0 1px 0 #ffe9a84d, inset 0 -2px 4px #000000b3, 0 2px 5px #000000a6;
  /* server load (client classes .pop > i.load-green | load-yellow | load-red, width = population %) */
  --ygf-track: linear-gradient(#020604, #0b140e);
  --ygf-track-shadow: inset 0 2px 3px #000000e6, 0 1px 0 #ffffff1a;
  --ygf-load-low: linear-gradient(#86b870, #4f8040);
  --ygf-load-mid: linear-gradient(#e2b357, #a97a24);
  --ygf-load-high: linear-gradient(#d9705a, #963a27);
  --ygf-load-low-text: #a9dc94;
  --ygf-load-mid-text: #f0c36a;
  --ygf-load-high-text: #f39a85;
  --ygf-fill-shine: inset 0 1px 0 #ffffff47, inset 0 -1px 0 #00000059;
  --ygf-font: Tahoma, "Leelawadee UI", "Noto Sans Thai", sans-serif;
}

/* ---------- 0. structure: undo the stage scale for front-end surfaces only (never the HUD) ---------- */
html.ygf-front body :is(#loginScreen,#serverScreen,#selectScreen,#createScreen,#gameCreatorApp) {
  width: 100vw !important; height: 100dvh !important; inset: 0 !important;
  transform: scale(calc(1 / var(--ui-scale, 1))) !important; transform-origin: 0 0 !important;
}
html.ygf-front body #createScreen #gameCreatorApp { transform: none !important; }
html.ygf-front body.create-character #createScreen { transform: none !important; }
html body :is(#loading,#characterSelectLoading,#gsReconnectPopup,#characterSelectReturnDialog,.escape-return-ui,#portraitOrientationGate) {
  width: 100vw !important; height: 100dvh !important; inset: 0 !important;
  transform: scale(calc(1 / var(--ui-scale, 1))) !important; transform-origin: 0 0 !important;
}
html body.create-character :is(#loading,#characterSelectLoading,#gsReconnectPopup,#characterSelectReturnDialog,.escape-return-ui,#portraitOrientationGate) { transform: none !important; }

/* ---------- 1. surfaces ---------- */
/* primary panel: the game's swirl frame */
html body :is(#loginBox,#registerBox,#serverBox,#loginMessagePopup,#characterDeleteConfirm,#characterDeleteCode,
  .character-select-loading-panel,.gs-reconnect-panel,.character-select-return-box) {
  box-sizing: border-box !important; border: solid var(--ygf-clear) !important; border-width: 6px 8px 8px !important;
  border-image: var(--ygf-frame) !important; border-radius: 0 !important;
  background: var(--ygf-window-body) padding-box !important; box-shadow: var(--ygf-window-inner), 0 12px 32px var(--ygf-shadow) !important;
  color: var(--ygf-ink) !important; font-family: var(--ygf-font) !important;
  backdrop-filter: none !important; image-rendering: auto !important; clip-path: none !important; filter: none !important;
}
/* secondary panel: soft fill, thin rim, no ornaments */
html body :is(#savedAccounts,#selInfo,#selBar) {
  box-sizing: border-box !important; border: 1px solid var(--ygf-lacquer-edge) !important; border-image: none !important;
  border-radius: 2px !important; background: var(--ygf-lacquer) !important; box-shadow: var(--ygf-lacquer-shadow) !important;
  color: var(--ygf-ink) !important; font-family: var(--ygf-font) !important;
  backdrop-filter: none !important; image-rendering: auto !important; clip-path: none !important; filter: none !important;
}
html body :is(#loginBox,#savedAccounts,#registerBox,#serverBox,#selBar,#selInfo,#loginMessagePopup,#characterDeleteConfirm,
  #characterDeleteCode,.character-select-loading-panel,.gs-reconnect-panel,.character-select-return-box) * {
  box-sizing: border-box; font-family: var(--ygf-font) !important; letter-spacing: 0 !important; font-size: 13px !important;
}
html body :is(#loginBox,#serverBox,#registerBox,#savedAccounts,#selInfo,#selBar)::before,
html body :is(#loginBox,#serverBox,#registerBox,#savedAccounts,#selInfo,#selBar)::after { content: none !important; }

/* window title: sits in the frame's black capsule */
html body :is(.ygf-login-title,.ygf-dialog-title,#serverTitle,.rg-head h2,.system-menu-title,#characterSelectLoadingStage,#gsReconnectStage) {
  color: var(--ygf-title) !important; text-align: center !important; font: bold 15px/30px var(--ygf-font) !important;
  text-shadow: 0 1px 0 var(--ygf-field) !important; background: none !important; border: 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body :is(#loginBox,#serverBox,#loginMessagePopup,#characterDeleteConfirm,#characterDeleteCode) > :is(.ygf-login-title,.ygf-dialog-title,#serverTitle),
html body :is(#characterSelectLoadingStage,#gsReconnectStage) {
  position: absolute !important; inset: 0 48px auto !important; width: auto !important; height: 30px !important;
  margin: 0 !important; padding: 0 !important;
}
/* close button: the game's own ⊗, 44 px hit area */
html body :is(#loginClose,#srvClose,#loginMessageClose,#characterDeleteConfirmClose,#characterDeleteCodeClose,#registerBox .rg-close) {
  position: absolute !important; inset: -7px -2px auto auto !important; width: 44px !important; height: 44px !important;
  min-width: 44px !important; min-height: 44px !important; border: 0 !important; padding: 0 !important; display: block !important;
  background: url(/ui-kit/close.png) center / 20px 20px no-repeat !important; cursor: pointer; opacity: .85;
  color: var(--ygf-clear) !important; text-indent: -9999px; overflow: hidden; z-index: 3;
}
html body :is(#loginClose,#srvClose,#loginMessageClose,#characterDeleteConfirmClose,#characterDeleteCodeClose,#registerBox .rg-close):hover { opacity: 1; }

/* ---------- 2. controls: three tiers, all cut from the game's own art, all with depth ----------
   primary   = the lacquer plate of ui/server_btn_connect.png (gold frame, carved medallions, scroll caps), 9-slice
   secondary = the same plate in deep jade (frontend_art.py recolours the lacquer, the gold stays)
   socket    = an inset carved well for toggles, tabs and list rows; it lights up gold when selected
   Every tier: top highlight / bottom shade from the art or the bevel, a drop shadow, hover lifts and brightens,
   pressed sinks 1 px and darkens, disabled is dull, focus-visible draws a gold ring. 120 ms transitions. */
html body :is(#loginBox input,#registerBox input) {
  border: 1px solid var(--ygf-well-edge) !important; border-image: none !important; border-radius: 3px !important;
  background: var(--ygf-well) !important; color: var(--ygf-ink) !important; height: 40px !important;
  box-shadow: var(--ygf-well-shadow) !important; padding: 0 12px !important; font: 14px/38px var(--ygf-font) !important;
  outline: 0 !important; transition: box-shadow .12s, border-color .12s;
}
html body :is(#loginBox input,#registerBox input):focus { border-color: var(--ygf-gold) !important; box-shadow: var(--ygf-well-focus) !important; }
html body :is(#loginBox input,#registerBox input)::placeholder { color: var(--ygf-placeholder) !important; }
/* the plate tiers */
html body :where([data-ygf-text],#registerBox .rg-actions button,.login-message-actions button,.character-delete-confirm-actions button,
  .character-delete-code-actions button,.character-select-return-actions button) {
  display: flex !important; align-items: center; justify-content: center; text-align: center; box-sizing: border-box;
  border: 1px solid var(--ygf-plate2-edge) !important; border-radius: 0 !important;
  border-image: none !important; background: var(--ygf-plate2) !important;
  color: var(--ygf-title) !important; min-height: 44px !important; height: 44px; padding: 0 24px !important;
  font: bold 14px/20px var(--ygf-font) !important; text-shadow: var(--ygf-engrave) !important;
  box-shadow: var(--ygf-plate2-shadow), var(--ygf-drop) !important; cursor: pointer; animation: none !important; filter: none;
  transition: filter .12s, transform .12s, box-shadow .12s;
}
/* a control the client hides (attribute or inline display) stays hidden: the skin never reveals it */
html body :is([data-ygf-text],#registerBox button,.login-message-actions button,.character-delete-confirm-actions button,
  .character-delete-code-actions button,.character-select-return-actions button):is([hidden],[style*="display: none"],[style*="display:none"]):not(#ygf-none) { display: none !important; }
html body [data-ygf-text]::after { content: attr(data-ygf-text) !important; position: relative !important; opacity: 1 !important;
  display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: bold 14px/20px var(--ygf-font) !important; color: inherit !important; }
html body :is(#loginBox,#serverBox,#selBar,.character-delete-code-actions,.character-delete-confirm-actions,.login-message-actions) [data-ygf-text] {
  font-size: 0 !important; line-height: 0 !important; /* the bitmap art is replaced by the tier background above */
}
html body :where([data-ygf-text],#registerBox .rg-actions button,.login-message-actions button,.character-delete-confirm-actions button,
  .character-delete-code-actions button,.character-select-return-actions button):hover {
  transform: translateY(-1px); box-shadow: var(--ygf-tint-hover), var(--ygf-drop-hover) !important;
}
/* the one primary action of each screen: the lacquer plate */
html body :is(#loginOk,#srvConnect,#selEnter,#registerBox .rg-actions button:first-child,#loginMessageConfirm) {
  border: 1px solid var(--ygf-plate2-edge) !important; border-image: none !important; background: var(--ygf-plate1) !important;
  box-shadow: var(--ygf-drop) !important; color: var(--ygf-label-hot) !important; min-height: 44px !important; height: 44px;
}
html body :is(#loginOk,#srvConnect,#selEnter,#registerBox .rg-actions button:first-child,#loginMessageConfirm)::after { font-size: 15px !important; }
html body :where([data-ygf-text],#registerBox .rg-actions button,.login-message-actions button,.character-delete-confirm-actions button,
  .character-delete-code-actions button,.character-select-return-actions button):active {
  transform: translateY(1px) !important; box-shadow: var(--ygf-tint-press), var(--ygf-drop-pressed) !important;
}
/* destructive actions: the jade plate with red-gold text, never the lacquer */
html body :is(#selDelete,#characterDeleteConfirmOk,#characterDeleteSubmit) { color: var(--ygf-danger) !important; }
/* :not(#ygf-none) lifts the disabled state above the primary rule (whose :is() carries an id + two classes) */
html body :is([data-ygf-text],#registerBox button):is(:disabled,.disabled,[aria-disabled=true]):not(#ygf-none) {
  opacity: .55 !important; color: var(--ygf-off) !important;
  cursor: default; transform: none !important; filter: none !important;
}
html body :is(#loginScreen,#serverScreen,#selectScreen,#registerBox,#langSwitch,.character-delete-dialog,#loginMessagePopup) :focus-visible {
  outline: 2px solid var(--ygf-label-hot) !important; outline-offset: 2px;
}
/* sockets: list rows, toggles, tabs */
html body :is(#savedAccounts .sa-row,#serverBox .srvGroupRow,#serverBox .srvRow,#langSwitch .lang-option) {
  border: 1px solid var(--ygf-socket-edge) !important; border-radius: 3px !important; background: var(--ygf-socket) !important;
  box-shadow: var(--ygf-socket-shadow) !important; transition: box-shadow .12s, border-color .12s, filter .12s;
}
html body :is(#savedAccounts .sa-row,#serverBox .srvGroupRow,#serverBox .srvRow,#langSwitch .lang-option):hover {
  border-color: var(--ygf-gold) !important;
}
html body :is(#serverBox .srvGroupRow.sel,#serverBox .srvRow.sel,#langSwitch .lang-option.on) {
  border-color: var(--ygf-gold) !important; background: var(--ygf-socket-lit) !important; box-shadow: var(--ygf-socket-lit-shadow) !important;
  color: var(--ygf-label-hot) !important;
}
html body :is(#savedAccounts .sa-row,#serverBox .srvGroupRow,#serverBox .srvRow):active { box-shadow: var(--ygf-tint-press), var(--ygf-socket-shadow) !important; }

/* ---------- 3. scene: one gentle vignette, nothing animated ---------- */
html body :is(#loginScreen,#serverScreen,#selectScreen)::before,
html body :is(#loginScreen,#serverScreen,#selectScreen)::after { content: none !important; }
html body .ygf-scene-effects { position: absolute; inset: 0; z-index: 0; pointer-events: none !important;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, var(--ygf-clear) 55%, var(--ygf-vignette) 100%); }
html body :is(#loginTitle,#loginBox,#savedAccounts,#loginHint,#serverBox,#selInfo,#selBar) { z-index: 2 !important; }

/* ---------- 4. login ---------- */
html body #loginTitle {
  visibility: visible !important; display: block !important; opacity: 1 !important; filter: none !important;
  position: absolute !important; top: max(12px, calc(50% - 380px)) !important; left: 50% !important;
  width: min(340px, 42vw) !important; height: auto !important; max-height: 30vh !important; object-fit: contain;
  transform: translateX(-50%) !important;
}
html body #loginBox {
  position: absolute !important; left: 50% !important; top: calc(50% + 36px) !important; transform: translate(-50%, -50%) !important;
  width: 340px !important; height: auto !important; padding: 48px 24px 24px !important;
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 12px !important;
}
html body #loginBox :is(input,.btn,.ygf-label) { position: static !important; width: auto !important; margin: 0 !important; inset: auto !important; }
html body #loginBox .ygf-label { grid-column: 1 / -1; color: var(--ygf-dim); font-size: 13px !important; line-height: 18px; }
html body #loginBox label[for=loginId] { grid-row: 1; }
html body #loginBox #loginId { grid-area: 2 / 1 / 3 / -1 !important; }
html body #loginBox label[for=loginPw] { grid-row: 3; margin-top: 4px !important; }
html body #loginBox #loginPw { grid-area: 4 / 1 / 5 / -1 !important; }
html body #loginBox #loginOk { grid-area: 5 / 1 / 6 / -1 !important; margin-top: 12px !important; }
html body #loginBox #loginEdit { grid-area: 6 / 1 / 7 / 2 !important; }
html body #loginBox #loginCancel { grid-area: 6 / 2 / 7 / 3 !important; }
html body #loginBox #loginEdit::before { content: none !important; }
html body #loginHint {
  display: block !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) !important;
  top: calc(50% + 36px + 208px) !important; bottom: auto !important; width: 340px !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; color: var(--ygf-dim) !important; text-align: center;
  font: 12px/18px var(--ygf-font) !important; text-shadow: 0 1px 2px var(--ygf-field) !important;
}
/* saved IDs: a quiet list beside the login window */
html body #savedAccounts:not([hidden]) {
  position: absolute !important; left: auto !important; right: calc(50% + 194px) !important;
  top: calc(50% + 36px) !important; transform: translateY(-50%) !important; width: 232px !important;
  max-height: 300px !important; padding: 12px !important; display: flex !important; flex-direction: column; gap: 8px;
}
html body #savedAccounts .sa-title { display: block !important; color: var(--ygf-label-hot) !important; font: bold 13px/26px var(--ygf-font) !important;
  margin: 0 18px !important; padding: 0 12px !important; height: 28px !important; text-align: center !important; text-shadow: var(--ygf-engrave) !important;
  background: var(--ygf-plaque) !important; border: 1px solid var(--ygf-gold) !important; border-radius: 14px !important; box-shadow: var(--ygf-plaque-shadow) !important; }
html body #savedAccounts .sa-title::after { content: none !important; }
html body #savedAccounts .sa-list { display: flex !important; flex-direction: column; gap: 4px; overflow: hidden auto; min-height: 0; scrollbar-width: none !important; }
html body #savedAccounts .sa-list::-webkit-scrollbar { display: none; }
html body #savedAccounts .sa-row {
  display: flex !important; align-items: center; gap: 8px; min-height: 48px !important; height: auto !important; flex: none;
  color: var(--ygf-ink) !important; padding: 0 0 0 8px !important;
}
html body #savedAccounts .sa-row:focus-visible { border-color: var(--ygf-gold) !important; }
html body #savedAccounts .sa-face { display: grid !important; place-items: center; flex: 0 0 28px !important; width: 28px !important; height: 28px !important;
  border: 1px solid var(--ygf-rim) !important; border-radius: 50% !important; background: var(--ygf-field) !important; color: var(--ygf-gold) !important; }
html body #savedAccounts .sa-who { display: flex !important; flex-direction: column; min-width: 0; gap: 2px; }
html body #savedAccounts .sa-who b { color: var(--ygf-ink) !important; font-weight: bold !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #savedAccounts .sa-who span { color: var(--ygf-dim) !important; font-size: 12px !important; }
html body #savedAccounts .sa-drop { display: grid !important; place-items: center; margin-left: auto; flex: 0 0 44px !important; width: 44px !important; height: 44px !important;
  color: var(--ygf-off) !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
html body #savedAccounts .sa-drop:hover { color: var(--ygf-danger) !important; }
html body #savedAccounts .sa-note { display: none !important; }
/* language, clear cache, version: small and quiet */
html body #langSwitch { transform: scale(calc(1 / var(--ui-scale, 1))) !important; font-family: var(--ygf-font) !important; }
html body #langSwitch .lang-current { min-height: 40px !important; height: 40px !important; min-width: 84px; border: 0 solid transparent !important;
  border: 1px solid var(--ygf-plate2-edge) !important; border-image: none !important; border-radius: 0 !important; background: var(--ygf-plate2) !important;
  color: var(--ygf-label-hot) !important; font: bold 13px var(--ygf-font) !important; text-shadow: var(--ygf-engrave) !important;
  box-shadow: var(--ygf-plate2-shadow), var(--ygf-drop) !important; padding: 0 22px !important; height: 44px !important; min-height: 44px !important; transition: filter .12s, transform .12s; }
html body #langSwitch .lang-current:hover { transform: translateY(-1px); box-shadow: var(--ygf-tint-hover), var(--ygf-drop) !important; }
html body #langSwitch .lang-current:active { transform: translateY(1px); box-shadow: var(--ygf-tint-press) !important; }
html body #langSwitch .lang-menu { top: 46px !important; background: var(--ygf-lacquer) !important; border: 1px solid var(--ygf-lacquer-edge) !important;
  border-radius: 2px !important; padding: 10px !important; box-shadow: var(--ygf-lacquer-shadow) !important; gap: 4px !important; }
html body #langSwitch .lang-option { min-height: 44px !important; height: 44px !important; color: var(--ygf-ink) !important; font: 13px var(--ygf-font) !important; }
html body #loginClearCache, html.ygf-front body .web-version-badge {
  position: fixed !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; min-height: 32px;
  border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; border-radius: 0 !important;
  color: var(--ygf-dim) !important; padding: 6px 8px !important; font: 12px/20px var(--ygf-font) !important;
  text-shadow: 0 1px 2px var(--ygf-field) !important; transform: scale(calc(1 / var(--ui-scale, 1))) !important;
}
html body #loginClearCache { left: max(12px, env(safe-area-inset-left)) !important; transform-origin: left bottom !important; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--ygf-rim); text-underline-offset: 3px; }
html body #loginClearCache:hover { color: var(--ygf-title) !important; }
html body #loginScreen #loginClearCache { position: absolute !important; transform: none !important; }
html.ygf-front body .web-version-badge { right: max(12px, env(safe-area-inset-right)) !important; transform-origin: right bottom !important; }

/* ---------- 5. register (Google gate, validation and submit stay the client's) ---------- */
html body #registerBox {
  position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) scale(calc(1 / var(--ui-scale, 1))) !important;
  width: min(440px, calc(100vw - 32px)) !important; height: auto !important; max-height: calc(100dvh - 24px) !important;
  padding: 0 24px 20px !important; overflow-y: auto !important; overflow-x: hidden !important;
}
html body #registerBox:not([hidden]) { display: flex !important; flex-direction: column; }
html body #registerBox .rg-head { position: static !important; height: 30px !important; margin: 0 0 16px; padding: 0 !important; border: 0 !important; background: none !important; flex: none; }
html body #registerBox .rg-close { top: -7px !important; }
html body #registerBox :is(.rg-row,.rg-body,.rg-google-gate,.rg-actions) { position: static !important; height: auto !important; width: auto !important; }
html body #registerBox .rg-row { display: grid !important; grid-template-columns: 1fr !important; gap: 4px !important; margin-bottom: 12px; border: 0 !important; padding: 0 !important; }
html body #registerBox .rg-body:not([hidden]) { display: block !important; flex: 1 1 auto; min-height: 0; overflow-y: auto !important; }
html body #registerBox .rg-tag { color: var(--ygf-dim) !important; text-align: left !important; }
html body #registerBox .rg-hint { color: var(--ygf-danger) !important; grid-column: 1 !important; }
html body #registerBox input { width: 100% !important; }
html body #registerBox .rg-actions { display: flex !important; gap: 12px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--ygf-rim-soft) !important; flex: none; }
html body #registerBox .rg-actions button { flex: 1; width: auto !important; }
html body #registerBox .rg-google-gate { padding: 16px 0; color: var(--ygf-ink) !important; text-align: center; }
html body #registerBox :is(output,.rg-status) { color: var(--ygf-dim) !important; line-height: 20px !important; text-align: center; }
html body:has(#registerBox:not([hidden]),#loginMessagePopup:not([hidden])) :is(#loginBox,#savedAccounts,#loginHint) { visibility: hidden !important; }

/* ---------- 6. server select (rows leave their bitmap coordinates, including inline top) ---------- */
html body #serverBox {
  position: relative !important; inset: auto !important; transform: none !important;
  width: min(560px, calc(100vw - 32px)) !important; height: auto !important; min-height: 0 !important; max-height: 80dvh !important;
  padding: 48px 24px 24px !important; display: grid !important; grid-template-columns: 168px 1fr !important;
  grid-template-rows: minmax(0, auto) auto !important; align-content: start; gap: 16px 16px !important;
}
html body #serverBox :is(#serverGroups,#serverList) { position: static !important; width: auto !important; height: auto !important;
  max-height: calc(80dvh - 160px); min-height: 0; overflow: hidden auto !important; scrollbar-width: none !important; display: flex !important; flex-direction: column; gap: 4px; padding: 0 !important; }
html body #serverBox :is(#serverGroups,#serverList)::-webkit-scrollbar { display: none; }  /* no scrollbars anywhere (owner) */
html body #serverBox .srv-actions { display: contents !important; }
html body #serverBox .srv-note { display: none !important; }
html body #serverBox :is(.srvGroupRow,.srvRow) {
  position: static !important; inset: auto !important; width: 100% !important; height: auto !important; min-height: 44px !important;
  margin: 0 !important; color: var(--ygf-ink) !important; padding: 0 12px !important; font-size: 14px !important; cursor: pointer;
  display: flex !important; align-items: center;
}
html body #serverBox .srvRow { gap: 12px; }
html body #serverBox .srvRow :is(.nm,.pop,.state) { position: static !important; width: auto !important; font-size: 14px !important; }
html body #serverBox .srvRow .nm { flex: 1 1 auto; text-align: left !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #serverBox .srvRow .state { color: var(--ygf-danger) !important; font-size: 12px !important; }
html body #serverBox .srvRow.closed { color: var(--ygf-off) !important; cursor: default; }
/* selected server / group: a lit gold socket with a marker, so the choice reads at a glance */
html body #serverBox :is(.srvRow,.srvGroupRow).sel::before { content: "\25C6"; color: var(--ygf-label-hot); margin-right: 8px; font-size: 12px; flex: none; }
html body #serverBox :is(.srvRow,.srvGroupRow).sel { font-weight: bold !important; text-shadow: var(--ygf-engrave) !important; }
/* load: a recessed track, a calm fill by load, and a word, so it never relies on colour alone */
html body #serverBox .srvRow .pop { position: relative !important; inset: auto !important; flex: 0 0 64px !important; width: 64px !important; height: 12px !important;
  margin-right: 58px !important; border: 1px solid var(--ygf-well-edge) !important; border-radius: 6px !important;
  background: var(--ygf-track) !important; box-shadow: var(--ygf-track-shadow) !important; overflow: visible !important; }
html body #serverBox .srvRow .pop > i { position: absolute !important; left: 0; top: 0; bottom: 0; min-width: 6px; max-width: 100%; height: auto !important;
  border-radius: 5px; box-shadow: var(--ygf-fill-shine); background: var(--ygf-load-low) !important; }
html body #serverBox .srvRow .pop > i.load-yellow { background: var(--ygf-load-mid) !important; }
html body #serverBox .srvRow .pop > i.load-red { background: var(--ygf-load-high) !important; }
html body #serverBox .srvRow .pop::after { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  font: bold 13px/18px var(--ygf-font); text-shadow: 0 1px 0 var(--ygf-field); }
html body #serverBox .srvRow .pop:has(> .load-green)::after { content: "ปกติ"; color: var(--ygf-load-low-text); }
html body #serverBox .srvRow .pop:has(> .load-yellow)::after { content: "หนาแน่น"; color: var(--ygf-load-mid-text); }
html body #serverBox .srvRow .pop:has(> .load-red)::after { content: "เต็ม"; color: var(--ygf-load-high-text); }
html:not([lang|=th]) body #serverBox .srvRow .pop:has(> .load-green)::after { content: "Normal"; }
html:not([lang|=th]) body #serverBox .srvRow .pop:has(> .load-yellow)::after { content: "Busy"; }
html:not([lang|=th]) body #serverBox .srvRow .pop:has(> .load-red)::after { content: "Full"; }
html body #serverBox :is(#srvConnect,#srvRecent) { position: static !important; inset: auto !important; width: auto !important; height: 48px !important; }
html body #srvRecent { grid-column: 1; grid-row: 2; }
html body #srvConnect { grid-column: 2; grid-row: 2; }

/* ---------- 7. character select ---------- */
/* nameplate: name first, the rest in one quiet line */
html body #selInfo {
  position: absolute !important; top: max(16px, env(safe-area-inset-top)) !important; left: 50% !important; transform: translateX(-50%) !important;
  width: min(440px, calc(100vw - 32px)) !important; height: auto !important; min-height: 0 !important;
  padding: 12px 16px !important; display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px 12px;
 
}
html body #selInfo[hidden] { display: none !important; }
html body #selInfo span { position: static !important; inset: auto !important; width: auto !important; height: auto !important;
  text-align: center !important; color: var(--ygf-ink) !important; line-height: 18px !important; display: block !important; }
html body #selInfo #selName { grid-column: 1 / -1; font-size: 20px !important; line-height: 28px !important; font-weight: bold !important;
  color: var(--ygf-title) !important; padding-bottom: 8px; border-bottom: 1px solid var(--ygf-rim-soft); }
html body #selInfo [data-ygf-label]::before { content: attr(data-ygf-label); display: block; color: var(--ygf-dim); font-size: 12px; line-height: 18px; }
/* command bar */
html body #selBar {
  position: absolute !important; left: 50% !important; top: auto !important; bottom: max(16px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important; width: min(880px, calc(100vw - 32px)) !important; height: auto !important;
  padding: 10px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
html body #selBar .hot { position: relative !important; inset: auto !important; width: auto !important; height: 44px !important; min-height: 44px !important;
  display: grid !important; grid-template-columns: 50px max-content; align-items: center; justify-content: center; column-gap: 2px; padding: 0 12px !important; }
/* icon = the game's own select-button emblem at its native pixels (the tiny baked caption below it is left out) */
html body #selBar .hot::before { content: ''; position: static; display: block; width: 50px; height: 36px;
  background: -14px 0 / 80px 49px no-repeat; }
html body #selEnter::before { background-image: url(/ui/select_btn_gotogame.png) !important; }
html body #selSwitch::before { background-image: url(/ui/select_btn_gotologin.png) !important; }
html body #selCreate::before { background-image: url(/ui/select_btn_create.png) !important; }
html body #selDelete::before { background-image: url(/ui/select_btn_delete.png) !important; }
html body #selBar .hot::after { font-size: 14px !important; font-weight: bold !important; line-height: 20px !important; text-align: left; }
/* narrow bars: two rows of two, icon and label stay side by side */
/* one row of four at every width (owner); narrow screens tighten the padding and let the label take two lines */
@media (max-width: 920px) {
  html body #selBar { width: calc(100vw - 24px) !important; padding: 6px !important; gap: 6px !important; }
  html body #selBar .hot { grid-template-columns: 40px minmax(0, max-content) !important; padding: 0 8px !important; column-gap: 2px; }
  html body #selBar .hot::before { width: 40px !important; height: 36px; background-position: -19px 0 !important; }
  html body #selBar .hot::after { font-size: 12px !important; line-height: 14px !important; white-space: normal !important; }
}
/* the native delete dialog owns input: hide the competing panels behind it */
html body:has(#characterDeleteConfirm:not([hidden]),#characterDeleteCode:not([hidden])) :is(#selInfo,#selBar) { visibility: hidden !important; }

/* ---------- 8. dialogs ---------- */
html body :is(#loginMessagePopup,#characterDeleteConfirm,#characterDeleteCode) {
  position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) scale(calc(1 / var(--ui-scale, 1))) !important;
  width: min(400px, calc(100vw - 32px)) !important; height: auto !important; min-height: 0 !important;
  padding: 48px 24px 24px !important; max-height: calc(100dvh - 24px); overflow-y: auto; overflow-x: hidden;
}
html body :is(#loginMessageText,#characterDeleteConfirmMessage) { position: static !important; inset: auto !important; width: auto !important; height: auto !important;
  min-height: 44px !important; margin: 0 0 20px !important; color: var(--ygf-ink) !important; text-align: center; font-size: 14px !important; line-height: 22px !important; }
html body :is(.login-message-actions,.character-delete-confirm-actions,.character-delete-code-actions) {
  position: static !important; inset: auto !important; width: auto !important; height: auto !important; background: none !important;
  display: flex !important; justify-content: center; gap: 12px;
}
html body :is(.login-message-actions,.character-delete-confirm-actions,.character-delete-code-actions) button {
  position: static !important; inset: auto !important; width: auto !important; height: auto !important; min-width: 120px; flex: 1;
}
html body #characterDeleteCodeTitle { display: none !important; }
html body .character-delete-digits { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important;
  display: grid !important; grid-template-columns: repeat(5, 1fr) !important; grid-template-rows: repeat(2, 44px) !important; gap: 8px !important; margin: 0 0 20px !important; }
html body .character-delete-digit { position: static !important; width: auto !important; height: auto !important; border: 1px solid var(--ygf-rim) !important;
  background: var(--ygf-field) !important; color: var(--ygf-title) !important; display: grid !important; place-items: center; font-size: 18px !important; }
html body #characterDeleteAp { inset: 48px 24px auto !important; width: calc(100% - 48px) !important; height: 96px !important; }
html body :is(.character-select-loading-panel,.gs-reconnect-panel,.character-select-return-box) {
  width: min(400px, calc(100vw - 32px)) !important; height: auto !important; min-height: 0; padding: 48px 24px 24px !important; position: relative !important;
}
html body :is(.character-select-loading-panel,.gs-reconnect-panel) > img, html body .character-select-loading-actions { display: none !important; }
html body :is(.character-select-loading-panel,.gs-reconnect-panel) > div:not(#characterSelectLoadingStage):not(#gsReconnectStage) {
  position: static !important; inset: auto !important; width: auto !important; height: auto !important; color: var(--ygf-dim) !important;
  line-height: 22px !important; background: none !important; text-align: center !important; }
html body #characterSelectReturnDialog .character-select-return-box { padding-top: 48px !important; }
html body #characterSelectReturnDialog :is(.character-select-return-message,.character-select-return-countdown,.character-select-return-hint,.character-select-return-actions) {
  position: static !important; width: auto !important; height: auto !important; margin: 8px 0 !important; font: 14px/22px var(--ygf-font) !important;
  color: var(--ygf-ink) !important; text-align: center; }
html body #characterSelectReturnDialog .character-select-return-countdown { display: block; font-size: 28px !important; line-height: 36px !important; color: var(--ygf-title) !important; }
html body #characterSelectReturnDialog .system-menu-title { position: absolute !important; inset: 0 48px auto !important; height: 30px !important; margin: 0 !important; }
html body .escape-return-ui .escape-return-box {
  border: solid var(--ygf-clear) !important; border-width: 6px 8px 8px !important; border-image: var(--ygf-frame) !important;
  background: var(--ygf-panel-solid) padding-box !important; border-radius: 0 !important; padding: 48px 24px 24px !important;
  color: var(--ygf-ink); font: 14px/22px var(--ygf-font); position: relative; box-shadow: 0 8px 24px var(--ygf-shadow) !important;
}
html body .escape-return-box h2 { position: absolute; inset: 0 48px auto; height: 30px; margin: 0 !important; color: var(--ygf-title); font: bold 15px/30px var(--ygf-font); text-align: center; }
html body .escape-return-box button { min-height: 44px; min-width: 120px; background: var(--ygf-field); border: 1px solid var(--ygf-rim); border-radius: 0; color: var(--ygf-title); font: bold 14px/20px var(--ygf-font); }

/* ---------- 9. loading (loading_art.py owns the artwork) ---------- */
html body #loading { position: fixed !important; }
html body #loadGage { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; bottom: max(56px, 10%) !important;
  width: min(60%, 600px) !important; height: 10px !important; box-sizing: border-box !important; padding: 1px !important;
  border: 1px solid var(--ygf-rim) !important; border-radius: 0 !important; background: var(--ygf-field) !important; box-shadow: none !important; overflow: hidden !important; }
html body #loadGage::before, html body #loadGage::after { content: none !important; }
html body #loadFill { height: 100% !important; background: url(/ui/loading_gage.png) left / auto 100% repeat-x !important; }
html body #loadPct { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; bottom: calc(max(56px, 10%) + 14px) !important;
  width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
  color: var(--ygf-title) !important; font: bold 14px/20px var(--ygf-font) !important; text-shadow: 0 1px 3px var(--ygf-field) !important; }
html body #loadTip { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; top: auto !important;
  bottom: max(16px, calc(10% - 40px)) !important; width: min(640px, 88vw) !important; max-height: 40px; overflow: hidden; margin: 0 !important;
  padding: 0 !important; background: none !important; border: 0 !important; box-sizing: border-box; text-align: center;
  color: var(--ygf-ink) !important; font: 13px/20px var(--ygf-font) !important; text-shadow: 0 1px 3px var(--ygf-field), 0 0 2px var(--ygf-field) !important; }
html.ygf-loading-visible body #connectionStatus { visibility: hidden !important; }
html body #connectionStatus { background: var(--ygf-panel) !important; color: var(--ygf-title) !important; border: 1px solid var(--ygf-rim) !important;
  border-radius: 0 !important; font: 13px/20px var(--ygf-font) !important; box-shadow: none !important; }

/* ---------- 10. rotate gate ---------- */
html body #portraitOrientationGate { background: var(--ygf-panel-solid) !important; color: var(--ygf-ink) !important; font-family: var(--ygf-font) !important; }
html body #portraitOrientationGate .portrait-orientation-content { padding: 24px; }
html body #portraitOrientationGate .portrait-orientation-title { color: var(--ygf-title) !important; font: bold 18px/26px var(--ygf-font) !important; }
html body #portraitOrientationGate .portrait-orientation-message { color: var(--ygf-dim) !important; font: 14px/22px var(--ygf-font) !important; }
html body #portraitOrientationGate .portrait-orientation-phone { border-color: var(--ygf-gold) !important; filter: none !important; box-shadow: none !important; }
html body #portraitOrientationGate .portrait-orientation-phone::before { background: var(--ygf-gold) !important; }

/* ---------- 11. pre-registration pages (payment and code state stay client-owned) ---------- */
html body #preRegisterWindow :is(.pr-game-panel,.pr-game-detail,.pr-game-payment) {
  border: 1px solid var(--ygf-rim) !important; border-image: none !important; background: var(--ygf-panel-solid) !important; border-radius: 0 !important;
  padding: 24px !important; color: var(--ygf-ink) !important; font-family: var(--ygf-font) !important; box-shadow: 0 8px 24px var(--ygf-shadow) !important;
}
html body #preRegisterWindow * { font-family: var(--ygf-font) !important; letter-spacing: 0 !important; border-radius: 0 !important; }
html body #preRegisterWindow :is(h2,h3) { color: var(--ygf-title) !important; font-size: 16px !important; }
html body #preRegisterWindow :is(.pr-game-box,.pr-game-history,.pr-game-reward) { background: var(--ygf-field) !important; border: 1px solid var(--ygf-rim-soft) !important; }
html body #preRegisterWindow :is(.pr-game-subtitle,.pr-game-description,.pr-game-notice,.pr-game-history-status) { color: var(--ygf-dim) !important; }
html body #preRegisterWindow button { min-height: 44px !important; min-width: 44px !important; border: 1px solid var(--ygf-rim) !important; background: var(--ygf-field) !important; color: var(--ygf-title) !important; box-shadow: none !important; }
html body #preRegisterWindow .pr-game-buy { border-color: var(--ygf-gold) !important; background: var(--ygf-primary) !important; }
html body #preRegisterWindow button:disabled { color: var(--ygf-off) !important; opacity: 1 !important; background: var(--ygf-disabled) !important; }
html body #preRegisterWindow :focus-visible { outline: 2px solid var(--ygf-gold) !important; outline-offset: 2px; }

/* ---------- 12. touch: larger text and targets ---------- */
html.ygf-touch body :is(#loginBox input,#registerBox input) { min-height: 44px !important; height: 44px !important; font-size: 16px !important; }
html.ygf-touch body :is(#loginBox .ygf-label,#savedAccounts .sa-who span,#selInfo [data-ygf-label],.web-version-badge,#loginClearCache,#loginHint) { font-size: 13px !important; }
html.ygf-touch body #selInfo [data-ygf-label]::before { font-size: 13px; }
html.ygf-touch body #loginClearCache { min-height: 44px !important; display: flex !important; align-items: center; }
/* the version is a label, not a control: it stays small so it never reaches the login window */
html.ygf-front body .web-version-badge { min-height: 0 !important; padding: 4px 8px !important; line-height: 16px !important; }
html.ygf-touch body #langSwitch .lang-current { min-height: 44px !important; height: 44px !important; }

/* ---------- 13. short screens ---------- */
@media (max-height: 700px) {
  html body #loginTitle { top: 8px !important; max-height: 24vh !important; width: min(300px, 40vw) !important; }
  html body #loginBox { top: calc(50% + 48px) !important; }
  html body #savedAccounts:not([hidden]) { top: calc(50% + 48px) !important; }
  html body #loginHint { display: none !important; }
}
/* phones in landscape: logo + saved IDs on the left, login window on the right */
@media (max-height: 480px) and (orientation: landscape) {
  html body #loginTitle { left: max(16px, env(safe-area-inset-left)) !important; transform: none !important; top: max(12px, env(safe-area-inset-top)) !important;
    width: min(240px, 34vw) !important; max-height: 30vh !important; }
  /* below the language button, above the version label */
  html body #loginBox { left: auto !important; right: max(16px, env(safe-area-inset-right)) !important;
    top: max(56px, calc(50% - 150px)) !important; transform: none !important;
    width: min(340px, 50vw) !important; padding: 40px 20px 16px !important; gap: 6px 12px !important; }
  /* short screens: the fields carry their name as placeholder (the client's own, or the helper's), labels go */
  html body #loginBox .ygf-label { display: none !important; }
  html body #loginBox #loginId { grid-row: 1 / 2 !important; }
  html body #loginBox #loginPw { grid-row: 2 / 3 !important; }
  html body #loginBox #loginOk { grid-row: 3 / 4 !important; }
  html body #loginBox :is(#loginEdit,#loginCancel) { grid-row: 4 / 5 !important; }
  html body #loginBox label[for=loginPw] { margin-top: 0 !important; }
  html body #loginBox #loginOk { margin-top: 6px !important; }
  html body #savedAccounts:not([hidden]) { left: max(16px, env(safe-area-inset-left)) !important; right: auto !important; top: auto !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 48px) !important; transform: none !important;
    width: min(240px, 34vw) !important; max-height: calc(100dvh - 30vh - 88px) !important; padding: 8px !important; }
  html body #savedAccounts .sa-title { padding-bottom: 4px !important; }
  html.ygf-keyboard body :is(#loginTitle,#savedAccounts) { visibility: hidden !important; }
  html.ygf-keyboard body #loginScreen { height: var(--ygf-visual-height, 100dvh) !important; overflow-y: auto !important; }
  html.ygf-keyboard body #loginBox { top: 8px !important; transform: none !important; }
  html body #serverBox { padding: 40px 16px 16px !important; gap: 8px 12px !important; grid-template-columns: 148px 1fr !important; }
  html body #selInfo { top: max(8px, env(safe-area-inset-top)) !important; padding: 8px 12px !important; gap: 4px 12px; width: min(400px, calc(100vw - 200px)) !important; }
  html body #selInfo #selName { font-size: 18px !important; line-height: 24px !important; padding-bottom: 4px; }
  html body #selBar { bottom: max(8px, env(safe-area-inset-bottom)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is([data-ygf-text],#registerBox button) { transition: none !important; }
  html body #portraitOrientationGate .portrait-orientation-phone { animation: none !important; }
  html body #startupSplash .startup-splash-image { animation-timing-function: steps(1, end) !important; }
}

/* ---------- login pair: saved IDs beside the login window, centred together (owner) ---------- */
html body #loginScreen:has(#savedAccounts:not([hidden])) #loginBox { left: calc(50% - 42px) !important; transform: translate(0, -50%) !important; }
html body #loginScreen:has(#savedAccounts:not([hidden])) #loginHint { left: calc(50% - 42px) !important; transform: none !important; }
html body #loginScreen:has(#savedAccounts:not([hidden])) #savedAccounts:not([hidden]) { left: calc(50% - 298px) !important; right: auto !important; }
@media (max-height: 480px) and (orientation: landscape) {
  /* logo above the saved IDs on the left, login window on the right, the pair centred with a 16 px gap */
  html body #loginScreen:has(#savedAccounts:not([hidden])) #loginBox { left: calc(50% - 32px) !important; right: auto !important;
    width: min(320px, calc(50vw + 16px)) !important; transform: none !important; }
  html body #loginScreen:has(#savedAccounts:not([hidden])) #savedAccounts:not([hidden]) { left: max(12px, calc(50% - 280px)) !important;
    width: min(232px, calc(50vw - 56px)) !important; top: auto !important; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 48px) !important; transform: none !important; }
  html body #loginScreen:has(#savedAccounts:not([hidden])) #loginTitle { left: max(12px, calc(50% - 280px)) !important; width: min(232px, calc(50vw - 56px)) !important; transform: none !important; }
}