/* Browser account/settings extensions use the join-menu palette; original parity is not claimed. */
body.capsule-ui {
  --menu-paper:#e9e0cf; --menu-muted:#afa99a; --menu-accent:#fad394;
  --menu-panel:rgba(29,29,25,.97); --menu-field:#151612; --menu-line:#666254;
  --menu-font:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
}
.capsule-ui .acc-user{color:var(--menu-paper);font-weight:400;min-width:0;max-width:240px}
.capsule-ui .acc-user>span:first-child{overflow:hidden;text-overflow:ellipsis}
.capsule-ui .acc-stats{color:var(--menu-muted)}
.capsule-ui .acc-actions{flex-shrink:0}
.capsule-ui .acc-btn,.capsule-ui .acc-submit-btn,.capsule-ui #settings-panel button,.capsule-ui .mpui button.choice{font-family:var(--menu-font);color:var(--menu-paper);background:#34342c;border:1px solid var(--menu-line);border-radius:0;cursor:pointer;letter-spacing:.3px;box-shadow:none}
.capsule-ui .acc-btn.primary,.capsule-ui .acc-submit-btn{background:#494333;border-color:#8c7b59;color:var(--menu-accent)}
.capsule-ui .acc-btn:hover,.capsule-ui .acc-submit-btn:hover,.capsule-ui #settings-panel button:hover,.capsule-ui .mpui button.choice:hover{background:#4d4737;color:var(--menu-accent);border-color:var(--menu-accent)}
.capsule-ui button:focus-visible,.capsule-ui input:focus-visible{outline:2px solid var(--menu-accent);outline-offset:2px}
.capsule-ui button:disabled{opacity:.5;cursor:default}
.capsule-ui .acc-modal,.capsule-ui #settings-panel{background:var(--menu-panel);color:var(--menu-paper);border:1px solid var(--menu-line);border-top:3px solid #8c8067;border-radius:0;box-shadow:0 12px 44px #0008;box-sizing:border-box;font:14px/1.5 var(--menu-font);padding:24px;max-height:calc(100dvh - 32px);overflow:auto}
.capsule-ui .acc-modal{width:min(420px,100%)}
.capsule-ui .acc-modal-header,.capsule-ui #settings-panel h2{padding-bottom:12px;border-bottom:1px solid var(--menu-line);margin:0 0 18px}
.capsule-ui .acc-modal-header h3,.capsule-ui #settings-panel h2{color:var(--menu-paper);text-transform:uppercase;letter-spacing:1px;font-size:22px;font-weight:400}
.capsule-ui .acc-tabs{border-color:var(--menu-line)}
.capsule-ui .acc-tab{color:var(--menu-muted);font:13px var(--menu-font);text-transform:uppercase;letter-spacing:.7px}
.capsule-ui .acc-tab.active{color:var(--menu-accent);border-bottom-color:var(--menu-accent);font-weight:400}
.capsule-ui .acc-form-group label{color:var(--menu-muted);letter-spacing:.7px}
.capsule-ui .acc-form-group input,.capsule-ui #settings-panel input[type=number]{font:14px var(--menu-font);background:var(--menu-field);color:var(--menu-paper);border:1px solid var(--menu-line);border-radius:0;min-height:34px;box-sizing:border-box}
.capsule-ui .acc-form-group input:focus{border-color:var(--menu-accent)}
.capsule-ui .acc-form-error,.capsule-ui #set-error{color:#f1a38b}
.capsule-ui .acc-submit-btn{padding:11px;text-transform:uppercase;letter-spacing:.7px}
.capsule-ui .lb-modal{width:min(660px,100%)}
.capsule-ui .lb-table th{color:var(--menu-muted)}
.capsule-ui .lb-table td,.capsule-ui .lb-table th{border-color:#66625466}
.capsule-ui #settings-panel{min-width:0;width:min(520px,calc(100vw - 32px))}
.capsule-ui #settings-panel .set-row{display:flex;align-items:center;justify-content:space-between;margin:10px 0;gap:16px;padding:8px 0;border-bottom:1px solid #66625455}
.capsule-ui #settings-panel .set-controls{display:flex;align-items:center;gap:8px}
.capsule-ui #settings-panel .set-inline{display:inline-flex;align-items:center;gap:4px;margin:0}
.capsule-ui #settings-panel input[type=range]{accent-color:var(--menu-accent);max-width:130px;min-width:0}
.capsule-ui #settings-panel input[type=number]{padding:5px 8px;width:72px}
.capsule-ui #settings-panel input[type=checkbox]{accent-color:var(--menu-accent)}
.capsule-ui #settings-panel .set-note{color:var(--menu-muted);line-height:1.5;font-size:12px}
.capsule-ui #settings-panel .set-actions{margin-top:16px}
.capsule-ui #settings-panel button{padding:8px 13px;min-height:34px;margin:0}
.capsule-ui .mpui:not(.join) .panel{font-family:var(--menu-font);background:var(--menu-panel);color:var(--menu-paper);border-color:var(--menu-line);border-radius:0}
.capsule-ui .mpui h2{color:var(--menu-paper)}
.capsule-ui .mpui .dim,.capsule-ui .mpui th{color:var(--menu-muted)}
@media(max-width:600px){
  .capsule-ui .acc-modal,.capsule-ui #settings-panel{padding:18px}
  .capsule-ui #settings-panel .set-row{flex-direction:column;align-items:flex-start;gap:6px}
  .capsule-ui #settings-panel .set-controls{width:100%;justify-content:flex-end}
  .capsule-ui #settings-panel input[type=range]{flex:1;max-width:none}
  .capsule-ui .lb-table td,.capsule-ui .lb-table th{padding:6px 3px;font-size:11px}
}
/* Single configured server; map rendering continues behind this entry screen. */
.capsule-ui #server-browser{display:block;font-family:var(--menu-font);color:var(--menu-paper)}
.capsule-ui .server-browser-panel{width:100%;padding:28px 32px;border-top:2px solid #8c8067;border-bottom:1px solid var(--menu-line);background:#1d1d19e8;box-sizing:border-box}
.capsule-ui .server-browser-kicker{text-transform:uppercase;letter-spacing:3px;color:var(--menu-muted);font-size:12px}
.capsule-ui #server-browser-title{font-size:38px;line-height:1.2;font-weight:400;text-transform:uppercase;letter-spacing:2px;margin:8px 0 24px}
.capsule-ui .server-browser-intro{color:var(--menu-paper);font-size:16px;margin:0 0 20px}
.capsule-ui .server-columns,.capsule-ui .server-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;text-align:left;align-items:center;padding:12px 16px}
.capsule-ui .server-columns{color:var(--menu-muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.capsule-ui .server-row{width:100%;margin:0;border:1px solid var(--menu-line);border-radius:0;background:#34342c;color:var(--menu-paper);font:15px var(--menu-font);cursor:pointer;min-height:56px}
.capsule-ui .server-row:hover:enabled{border-color:var(--menu-accent);background:#4d4737;color:var(--menu-accent)}
.capsule-ui .server-name{font-size:18px}
.capsule-ui [data-server-status]{color:var(--menu-accent);margin:18px 0 0}
.capsule-ui [data-server-error]{color:#f1a38b;white-space:pre-line;overflow-wrap:anywhere}
.capsule-ui .server-browser-help{color:var(--menu-muted);font-size:12px;margin-top:24px}
@media(max-width:600px){
 .capsule-ui .server-browser-panel{padding:20px 14px}
 .capsule-ui #server-browser-title{font-size:28px}
 .capsule-ui .server-columns,.capsule-ui .server-row{grid-template-columns:1.3fr 1fr 1fr;gap:8px;padding:12px 8px;font-size:11px}
 .capsule-ui .server-name{font-size:14px}
}
.capsule-ui #hudtoggle{display:none} /* the debug panel is reached from Tools (or H / ?debug=1) */
.capsule-ui #hud{z-index:9;border:1px solid var(--menu-line);border-radius:0;background:var(--menu-panel)}

.capsule-ui #settings-panel .set-row[hidden]{display:none}

/* Full-screen menu overlay: the main menu and sub-screens host page markup inside the overlay panel. */
.capsule-ui .mpui.mainmenu{background:linear-gradient(90deg,#14140ee6,#14140e55);align-items:center;justify-content:center;pointer-events:auto}
.capsule-ui .mpui.mainmenu .panel{background:none;border:0;box-shadow:none;padding:24px 32px;width:min(850px,100%);max-width:none;max-height:100dvh;box-sizing:border-box}
.capsule-ui .mpui.submenu{background:rgba(17,18,15,.78);backdrop-filter:blur(3px)}
.capsule-ui .mpui.submenu .panel{width:min(560px,calc(100vw - 32px));padding:24px;box-sizing:border-box}
.capsule-ui .mpui .menu-sub,.capsule-ui .mpui #settings-panel,.capsule-ui .mpui .acc-modal,.capsule-ui .mpui .lb-modal{background:none;border:0;box-shadow:none;padding:0;width:auto;min-width:0;max-height:none;overflow:visible;color:var(--menu-paper);font:14px/1.5 var(--menu-font)}
.capsule-ui .mpui .menu-sub h2{padding-bottom:12px;border-bottom:1px solid var(--menu-line);margin:0 0 18px;color:var(--menu-paper);text-transform:uppercase;letter-spacing:1px;font-size:22px;font-weight:400}
.capsule-ui .mpui .menu-sub button,.capsule-ui .mpui .acc-nav button{font-family:var(--menu-font);color:var(--menu-paper);background:#34342c;border:1px solid var(--menu-line);border-radius:0;cursor:pointer;padding:8px 13px;min-height:34px;margin:0}
.capsule-ui .mpui .menu-sub button:hover,.capsule-ui .mpui .acc-nav button:hover{background:#4d4737;color:var(--menu-accent);border-color:var(--menu-accent)}
.capsule-ui .mpui .menu-sub button:disabled{opacity:.5;cursor:default}
.capsule-ui .mpui .menu-sub .set-row{gap:16px;padding:8px 0;border-bottom:1px solid #66625455}
.capsule-ui .mpui .menu-sub input[type=range],.capsule-ui .mpui .menu-sub input[type=checkbox]{accent-color:var(--menu-accent)}
.capsule-ui .mpui .menu-sub .set-actions{margin-top:16px}
.capsule-ui .mpui .acc-nav{display:flex;justify-content:flex-end;margin-top:16px}
.capsule-ui .mpui #auth-user{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.capsule-ui .mpui #auth-user[hidden],.capsule-ui .mpui #auth-guest[hidden]{display:none}
.capsule-ui .mpui .menu-nav{max-width:420px}
.capsule-ui .mpui .menu-nav button.choice{background:#34342c;font-size:15px;padding:10px 14px}

/* Authored welcome splash, shown once per page load before server selection. */
.capsule-ui .welcome-splash{padding:clamp(24px,5vw,56px);border-top:2px solid #8c8067;border-bottom:1px solid var(--menu-line);background:linear-gradient(135deg,#29291fed,#171813ed);box-shadow:0 18px 60px #0005}
.capsule-ui .welcome-splash[hidden],.capsule-ui [data-server-panel][hidden]{display:none}
.capsule-ui .mpui .panel:has(.welcome-open) .menu-nav{display:none}
.capsule-ui #welcome-title{margin:20px 0 0;font-family:var(--menu-font);font-size:clamp(30px,6vw,64px);font-weight:700;line-height:1.05;letter-spacing:-1.5px;text-transform:uppercase}
.capsule-ui #welcome-title>span{display:block}
.capsule-ui #welcome-title b{color:var(--menu-accent);font-weight:inherit}
.capsule-ui #welcome-title .welcome-remake{margin-top:10px;color:var(--menu-accent);font-size:.34em;font-weight:400;letter-spacing:6px}
.capsule-ui .welcome-browser{margin:20px 0 32px;color:var(--menu-muted);font-size:18px}
.capsule-ui .welcome-mode{display:flex;flex-wrap:wrap;gap:10px}
.capsule-ui .welcome-mode span{padding:7px 12px;border:1px solid var(--menu-line);color:var(--menu-paper);font-size:12px;text-transform:uppercase;letter-spacing:2px}
.capsule-ui .welcome-message{margin:24px 0 30px;color:var(--menu-paper);font-size:16px;line-height:1.7}
.capsule-ui .welcome-continue{display:flex;align-items:center;justify-content:space-between;gap:40px;min-height:48px;min-width:210px;padding:12px 18px;margin:0;border:1px solid #8c7b59;border-radius:0;background:#494333;color:var(--menu-accent);font:15px var(--menu-font);text-transform:uppercase;letter-spacing:1px;cursor:pointer}
.capsule-ui .welcome-continue:hover{border-color:var(--menu-accent);background:#5b513b}
@media(max-width:600px){.capsule-ui .mpui.mainmenu .panel{padding:16px;min-width:0}.capsule-ui .welcome-continue{width:100%;min-width:0}}

.capsule-ui .welcome-credit{margin:28px 0 0;color:var(--menu-muted);font-size:12px}
.capsule-ui .welcome-credit a{color:var(--menu-accent);text-underline-offset:3px}
.capsule-ui .welcome-credit a:focus-visible{outline:2px solid var(--menu-accent);outline-offset:4px}

/* Tablet / touch virtual controller styles */
#touch-controls-root {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  z-index: 50;
}

.touch-stick-base {
  display: none;
  position: absolute;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 67, 51, 0.4) 0%, rgba(30, 28, 22, 0.6) 100%);
  border: 2px solid rgba(233, 214, 179, 0.35);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.touch-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #e9d6b3 0%, #a89470 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.touch-btn-group {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 56px);
  gap: 14px;
  align-items: center;
  justify-items: center;
  pointer-events: auto;
}

.touch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(35, 33, 26, 0.65);
  border: 2px solid rgba(200, 180, 140, 0.45);
  color: #e9d6b3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  touch-action: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s ease, background 0.08s ease, border-color 0.08s ease;
}

.touch-btn-label {
  font-size: 9px;
  font-family: var(--menu-font, system-ui, sans-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

.touch-btn-active,
.touch-btn:active {
  background: rgba(140, 123, 89, 0.85);
  border-color: #ffd885;
  color: #fff;
  transform: scale(0.92);
}

.touch-btn-toggled {
  background: rgba(160, 130, 70, 0.75);
  border-color: #ffd885;
  box-shadow: 0 0 10px rgba(255, 216, 133, 0.5);
}

.touch-btn-fire {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 76px;
  height: 76px;
  background: rgba(85, 35, 30, 0.65);
  border-color: rgba(220, 100, 90, 0.6);
  color: #ffdddd;
}

.touch-btn-fire.touch-btn-active,
.touch-btn-fire:active {
  background: rgba(180, 50, 40, 0.85);
  border-color: #ff8888;
  color: #ffffff;
}

.touch-btn-menu-top {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(30, 28, 22, 0.7);
  border: 1px solid rgba(200, 180, 140, 0.4);
  color: #e9d6b3;
  pointer-events: auto;
}

.touch-btn-menu-top .touch-btn-label {
  display: none;
}