/* pbPT system menu (system-ui.js). Everything is drawn with the game's own art,
   decoded into system-assets/: ExitMenu planks and chains for the menu, the
   Help box (box1-9), title bar, leather buttons and scroll bar for the windows,
   and the MessageBox CutBox for the confirmation. */
#pb-system { --pbs-gold:#ffd623; --pbs-head:#f0c419; --pbs-text:#e9e4d2; --pbs-dim:#9f9a86; --pbs-bronze:#a88a52; color:var(--pbs-text); font:12px/1.45 Tahoma,Verdana,sans-serif; }
#pb-system * { box-sizing:border-box; }
#pb-system [hidden] { display:none!important; }
#pb-system,#pb-system * { cursor:url('login-assets/game-cursor.png') 0 0,auto; }
.pbs-window { position:fixed; z-index:130; isolation:isolate; text-shadow:0 1px 1px #000; }
#pb-system button { margin:0; font:inherit; color:var(--pbs-gold); }
#pb-system :focus-visible { outline:1px dotted var(--pbs-gold); outline-offset:2px; }

/* Menu: rises from the System button of the game's bottom bar (system-ui.js
   places it from the button position the game sends), like the legacy menu.
   Planks and chains are ExitMenu.tga / Option.bmp with the baked text removed;
   sizes are game pixels times --pbs-s, the HUD scale. */
#pbs-menu { right:max(16px,env(safe-area-inset-right)); bottom:96px; width:calc(134px * var(--pbs-s,1)); display:flex; flex-direction:column; filter:drop-shadow(0 3px 4px #000a); transform-origin:100% 100%; animation:pbs-rise .14s ease-out; }
#pbs-menu.pbs-anchored { right:auto; bottom:auto; }
#pbs-menu h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#pbs-menu button { height:calc(21px * var(--pbs-s,1)); padding:0; border-style:solid; border-width:0 calc(12px * var(--pbs-s,1)) 0 calc(11px * var(--pbs-s,1)); border-image:url('system-assets/plank.png') 0 12 0 11 fill stretch; background:none; color:var(--pbs-gold); font:bold calc(13px * var(--pbs-s,1))/1 Georgia,'Times New Roman',serif; letter-spacing:.06em; text-shadow:1px 1px 0 #2b1600,-1px 0 0 #4a2a00,0 -1px 0 #4a2a00; white-space:nowrap; }
#pbs-menu button:hover,#pbs-menu button:focus-visible { border-image-source:url('system-assets/plank-hover.png'); color:#1c0f04; text-shadow:0 1px 0 #f6dc8a; outline:none; }
.pbs-chain { display:block; height:calc(10px * var(--pbs-s,1)); border-style:solid; border-width:0 calc(10px * var(--pbs-s,1)); border-image:url('system-assets/chain.png') 0 10 fill round; }
@keyframes pbs-rise { from { opacity:0; transform:translateY(10px) scaleY(.94); } to { opacity:1; transform:none; } }

/* Settings and Help: the Help box frame (box1-9). Its bottom 32px are the
   leather strip that holds the buttons, like the game's own windows. */
.pbs-large { left:50%; top:50%; transform:translate(-50%,-50%); width:min(440px,calc(100vw - 24px)); height:min(500px,calc(100dvh - 24px)); display:flex; flex-direction:column; padding:30px 18px 50px; }
#pbs-help { width:min(420px,calc(100vw - 24px)); }
/* The box is translucent in the game; a dark layer under it keeps text readable
   over bright scenes. */
.pbs-large::after { content:''; position:absolute; inset:6px 6px 10px; z-index:-2; background:#040a07b3; }
.pbs-large::before { content:''; position:absolute; inset:0; z-index:-1; border-style:solid; border-width:32px 64px 64px; border-image:url('system-assets/native/frame.png') 32 64 64 fill stretch; opacity:.97; }
.pbs-large header h2 { position:absolute; left:50%; top:-12px; transform:translateX(-50%); width:190px; max-width:calc(100% - 60px); height:28px; margin:0; border-style:solid; border-width:0 34px; border-image:url('system-assets/native/title.png') 0 34 fill stretch; display:grid; place-items:center; color:var(--pbs-gold); font:bold 13px/1 Georgia,serif; letter-spacing:.08em; text-shadow:1px 1px 0 #1b0e00,-1px 0 0 #000; white-space:nowrap; }
.pbs-x { position:absolute; right:8px; top:6px; width:22px; height:20px; padding:0; border-style:solid; border-width:0 6px; border-image:url('system-assets/native/plate.png') 0 6 fill stretch; background:none; font:bold 13px/1 Georgia,serif!important; }

/* Leather buttons (box-test-title2.bmp) for tabs, actions and dialogs. */
#pb-system .pbs-plate,.pbs-tabs button,.pbs-x { background:none; }
#pb-system .pbs-plate,.pbs-tabs button { min-width:74px; height:23px; padding:0 8px; border-style:solid; border-width:0 6px; border-image:url('system-assets/native/plate.png') 0 6 fill stretch; color:var(--pbs-gold); font:bold 12px/1 Georgia,serif; text-shadow:1px 1px 0 #1b0e00; white-space:nowrap; }
#pb-system .pbs-plate:hover,.pbs-tabs button:hover,.pbs-x:hover { filter:brightness(1.25); }
#pb-system .pbs-plate.pbs-primary { filter:brightness(1.15); }
#pb-system .pbs-plate:disabled { filter:grayscale(.8) brightness(.7); }
.pbs-tabs { display:flex; gap:6px; margin:6px 0 10px; }
.pbs-tabs button[aria-selected=false] { filter:brightness(.62) saturate(.7); color:#d9c38a; }
.pbs-tabs button[aria-selected=true] { filter:brightness(1.18); }

/* Body: scrolls with the game's scroll bar (scl_bar / scl_icon). */
.pbs-body { flex:1; min-height:0; overflow:auto; padding-right:10px; }
.pbs-body::-webkit-scrollbar { width:16px; }
.pbs-body::-webkit-scrollbar-track { background:url('system-assets/native/scroll-bar.png') center/8px 100% no-repeat; }
.pbs-body::-webkit-scrollbar-thumb { min-height:16px; background:url('system-assets/native/scroll-thumb.png') center/16px 16px no-repeat; }
#pb-system fieldset { margin:0 0 6px; padding:0; border:0; }
#pb-system legend { display:block; width:100%; margin:6px 0 4px; padding:0 0 3px; background:url('system-assets/native/line.png') left bottom/100% 2px repeat-x; color:var(--pbs-head); font-weight:bold; }
.pbs-tip { margin:0 0 4px; color:var(--pbs-dim); font-size:11px; }
.pbs-row + .pbs-tip { margin-left:20px; }

/* Checkbox: bronze square with a gold check. */
.pbs-row { display:flex; align-items:center; gap:8px; min-height:22px; }
.pbs-row input { position:absolute; opacity:0; pointer-events:none; }
.pbs-switch { flex:none; width:12px; height:12px; border:1px solid var(--pbs-bronze); background:#0b120d; box-shadow:inset 0 0 0 1px #000; display:grid; place-items:center; color:var(--pbs-gold); font:bold 11px/1 Tahoma,sans-serif; }
.pbs-row input:checked + .pbs-switch::after { content:'✓'; }
.pbs-row input:focus-visible + .pbs-switch { outline:1px dotted var(--pbs-gold); outline-offset:2px; }

/* Slider: horizontal scl_bar with the scl_icon diamond as the handle. */
.pbs-range,.pbs-select { display:grid; grid-template-columns:120px 1fr 38px; align-items:center; gap:8px; min-height:24px; }
.pbs-select { grid-template-columns:auto 1fr; }
.pbs-range input { width:100%; height:16px; margin:0; background:none; -webkit-appearance:none; appearance:none; }
.pbs-range input::-webkit-slider-runnable-track { height:8px; background:url('system-assets/native/scroll-bar-h.png') center/100% 8px no-repeat; }
.pbs-range input::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; margin-top:-4px; border:0; background:url('system-assets/native/scroll-thumb.png') center/16px no-repeat; }
.pbs-range input::-moz-range-track { height:8px; background:url('system-assets/native/scroll-bar-h.png') center/100% 8px no-repeat; }
.pbs-range input::-moz-range-thumb { width:16px; height:16px; border:0; border-radius:0; background:url('system-assets/native/scroll-thumb.png') center/16px no-repeat; }
.pbs-range output { color:#c9c2a8; text-align:right; }
.pbs-select select,.pbs-search input { width:100%; height:20px; padding:0 6px; border:1px solid var(--pbs-bronze); border-radius:0; background:#0b120d; color:var(--pbs-text); font:11px Tahoma,sans-serif; }
.pbs-select select { max-width:170px; }
.pbs-search { margin:4px 0 6px; }
#pbs-fullscreen { margin:2px 0 4px; }

/* Footer on the leather strip. */
.pbs-large footer { position:absolute; left:18px; right:18px; bottom:12px; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
#pbs-status { flex:1; color:#b9e39a; font-size:11px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#pbs-reset { margin-right:auto; }

/* Six tabs in Settings */
#pbs-settings { width:min(520px,calc(100vw - 24px)); }
#pbs-settings .pbs-tabs button { flex:1; min-width:0; padding:0 4px; }

/* Account forms and status lines */
.pbs-field { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:8px; min-height:26px; margin:0 0 4px; }
.pbs-field input { width:100%; height:20px; padding:0 6px; border:1px solid var(--pbs-bronze); border-radius:0; background:#0b120d; color:var(--pbs-text); font:12px Tahoma,sans-serif; }
#pb-system form .pbs-plate,#pbs-unstuck,#pbs-loot-all { margin:4px 0; }
.pbs-message { min-height:16px; margin:2px 0 4px; color:#f0a88a; font-size:11px; }
.pbs-message.pbs-ok { color:#b9e39a; }

/* Low life: the screen edge pulses red (system-ui.js lowLife). */
.pb-low-life #pb-system::before { content:''; position:fixed; inset:0; z-index:125; pointer-events:none; box-shadow:inset 0 0 140px 50px rgba(215,0,0,.72); animation:pbs-pulse 1.1s ease-in-out infinite; }
@keyframes pbs-pulse { 50% { box-shadow:inset 0 0 100px 30px rgba(215,0,0,.42); } }

/* Keys page */
.pbs-keyrow { display:grid; grid-template-columns:1fr 104px; align-items:center; gap:8px; min-height:27px; }
#pb-system .pbs-keybtn { min-width:104px; font-family:Tahoma,sans-serif; }
#pb-system .pbs-capturing { animation:pbs-blink .9s steps(2) infinite; color:#fff; }
@keyframes pbs-blink { 50% { filter:brightness(1.6); } }

/* Help list */
#pbs-help-body dl { margin:0; }
.pbs-help-row { display:grid; grid-template-columns:120px 1fr; gap:8px; padding:2px 0; }
.pbs-help-row dt { color:var(--pbs-gold); font-weight:bold; }
.pbs-help-row dd { margin:0; }

/* Help > Wiki (system-wiki.js): list on the left, entry on the right. */
#pbs-help.pbs-wiki-open { width:min(800px,calc(100vw - 24px)); height:min(560px,calc(100dvh - 24px)); }
.pbs-wiki-tabs button { flex:1; min-width:0; padding:0 3px; font-size:11px!important; }
.pbs-wiki { flex:1; min-height:0; display:grid; grid-template-columns:250px 1fr; gap:12px; }
.pbs-wiki.pbs-wiki-wide { grid-template-columns:1fr; }
.pbs-wiki.pbs-wiki-wide .pbs-wiki-side { display:none; }
.pbs-wiki-side { min-height:0; display:flex; flex-direction:column; gap:6px; }
.pbs-wiki-chips { display:flex; flex-wrap:wrap; gap:4px; }
#pb-system .pbs-chip { min-width:0; height:21px; padding:0 6px; font-size:11px; }
#pb-system .pbs-chip[aria-pressed=false] { filter:brightness(.62) saturate(.7); color:#d9c38a; }
.pbs-wiki-list { flex:1; min-height:0; overflow:auto; border:1px solid #3d3322; background:#0000003a; }
.pbs-wiki-row { display:block; width:100%; padding:4px 8px; border:0; border-bottom:1px solid #ffffff0d; background:none; text-align:left; font:12px/1.35 Tahoma,sans-serif!important; color:var(--pbs-text)!important; }
.pbs-wiki-row b { display:block; color:var(--pbs-gold); font-weight:bold; }
.pbs-wiki-row span { color:var(--pbs-dim); font-size:11px; }
.pbs-wiki-row:hover,.pbs-wiki-row[aria-selected=true] { background:#5d452033; box-shadow:inset 2px 0 0 var(--pbs-gold); }
.pbs-wiki-detail { min-height:0; overflow:auto; padding:2px 8px 6px 2px; }
.pbs-wiki-detail h3 { margin:0; color:var(--pbs-gold); font:bold 15px Georgia,serif; text-shadow:1px 1px 0 #1b0e00; }
.pbs-wiki-detail h4 { margin:10px 0 4px; padding-bottom:3px; background:url('system-assets/native/line.png') left bottom/100% 2px repeat-x; color:var(--pbs-head); font-size:12px; }
.pbs-wiki-sub { margin:2px 0 8px; color:var(--pbs-dim); font-size:11px; }
.pbs-wiki-table { border-collapse:collapse; min-width:60%; }
.pbs-wiki-table th { width:170px; padding:1px 14px 1px 0; color:#c9c2a8; font-weight:normal; text-align:left; }
.pbs-wiki-table td { padding:1px 0; color:#fff; }
.pbs-wiki-links { display:flex; flex-wrap:wrap; gap:4px 6px; margin:0; }
.pbs-wiki-link { padding:1px 6px; border:1px solid #6e5530; background:#21190d; color:var(--pbs-gold)!important; font:11px Tahoma,sans-serif!important; }
.pbs-wiki-link:hover { border-color:#e4bd78; }
.pbs-wiki-map { display:block; max-width:100%; max-height:220px; margin:4px 0; border:1px solid #6e5530; }
.pbs-wiki-text { white-space:pre-line; }
.pbs-wiki-grid { width:100%; border-collapse:collapse; font-size:12px; }
.pbs-wiki-grid th,.pbs-wiki-grid td { padding:3px 6px; text-align:center; border-bottom:1px solid #ffffff0d; }
.pbs-wiki-grid tr:first-child th { color:var(--pbs-head); background:#0000004d; }
.pbs-wiki-grid tr th:first-child { color:var(--pbs-gold); }
.pbs-wiki-sheltoms td { padding-top:0; color:var(--pbs-dim); font-size:11px; text-align:left; }

/* Quit confirmation: the MessageBox CutBox (left, center, right). */
#pbs-quit { left:50%; top:50%; transform:translate(-50%,-50%); width:min(340px,calc(100vw - 24px)); padding:20px 26px 18px; text-align:center; }
#pbs-quit::before { content:''; position:absolute; inset:0; z-index:-1; border-style:solid; border-width:16px 32px; border-image:url('system-assets/native/dialog.png') 16 32 fill stretch; }
#pbs-quit h2 { margin:0; color:var(--pbs-gold); font:bold 12px/1.4 Tahoma,sans-serif; }
#pbs-quit p { margin:0 0 10px; color:#fff; }
#pbs-quit footer { display:flex; gap:10px; justify-content:center; }

/* The HTML menu replaces the in-world language box: its setting is in Game. Only
   once the client polls the menu, so a client without it keeps the box. */
.pb-system-ready #pb-game-language { display:none!important; }

/* Touch (mobile.js .pt-touch): larger targets; the Touch help section only here. */
html:not(.pt-touch) .pbs-touch-only { display:none!important; }
.pt-touch #pb-system .pbs-plate,.pt-touch .pbs-tabs button,.pt-touch .pbs-x { height:34px; min-width:88px; font-size:14px; }
.pt-touch .pbs-x { width:34px; min-width:34px; right:6px; top:4px; }
.pt-touch .pbs-row { min-height:34px; gap:10px; font-size:13px; }
.pt-touch .pbs-switch { width:18px; height:18px; font-size:15px; }
.pt-touch .pbs-select select,.pt-touch .pbs-search input,.pt-touch .pbs-field input { height:30px; font-size:14px; }
.pt-touch .pbs-field { grid-template-columns:1fr; gap:2px; }
.pt-touch .pbs-range input { height:30px; }
.pt-touch .pbs-range input::-webkit-slider-thumb { width:24px; height:24px; margin-top:-8px; background-size:24px; }
.pt-touch .pbs-large { padding-bottom:58px; }
.pt-touch .pbs-large footer { bottom:8px; }

@media (max-height:500px) {
  #pbs-menu:not(.pbs-anchored) { bottom:auto; top:50%; transform:translateY(-50%); }
  .pbs-tip { display:none; }
}
@media (max-width:600px) {
  .pbs-wiki { grid-template-columns:1fr; grid-template-rows:40% 1fr; }
}
@media (max-width:520px) {
  .pbs-range { grid-template-columns:1fr 38px; }
  .pbs-range span { grid-column:1 / -1; }
  .pbs-help-row { grid-template-columns:1fr; gap:0; }
}