/* World interface: open play space, a compact field menu, and readable conversation. */
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
button:disabled { cursor: not-allowed; }
kbd { font-size: .75rem; line-height: 1.4; }
.btn, .chip, .x, .act, .item, .mic, .seg button, .tabs button { font-size: .875rem; }
.btn, button.chip, button.x, .act, .item, .mic, .seg button, .tabs button { min-height: 40px; }
.chip, .hud-place, .prompt, .talk, .panel { box-shadow: 0 8px 28px rgba(0,0,0,.16); }
.chip { border-radius: 10px; }
.hud-top { top: max(18px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); align-items: flex-start; }
.hud-place { border: 0; border-radius: 10px; padding: 12px 16px; gap: 12px; font-size: .875rem; }
#hudZone { color: #fff; font-weight: 700; }
#hudClock { font-variant-numeric: tabular-nums; color: var(--mute); }
.hud-right { flex-wrap: wrap; justify-content: flex-end; }
#chipMenu, #chipPhone { min-width: 42px; justify-content: center; }
.voice-ind { top: auto; left: 20px; bottom: max(22px, env(safe-area-inset-bottom)); transform: none; min-height: 40px; border-radius: 10px; font-size: .875rem; background: var(--glass); }
.voice-ind.muted { background: var(--glass); }
.voice-ind i { width: 6px; height: 6px; }
.minimap { right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); width: 156px; height: 156px; border: 3px solid rgba(173,197,226,.25); }
.prompt { bottom: 24%; max-width: min(520px, 90vw); border: 0; gap: 12px; line-height: 1.5; }
.prompt kbd { color: var(--bg); background: var(--acc); border: 0; padding: 5px 9px; font-size: .875rem; }
.talk { bottom: max(24px, env(safe-area-inset-bottom)); width: min(620px, calc(100vw - 400px)); padding: 18px 20px 16px; border: 1px solid var(--line); border-top: 2px solid var(--acc); border-radius: 16px; }
.talk-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.talk-name { flex-wrap: wrap; gap: 5px 12px; padding-top: 3px; font-size: 1rem; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ink); }
.talk-state { font-size: .75rem; font-weight: 500; letter-spacing: 0; }
#talkEnd { min-height: 32px; padding: 5px 9px; background: transparent; border-color: transparent; color: var(--mute); }
#talkEnd:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.talk-sub { line-height: 1.6; min-height: 0; margin: 10px 0 16px; max-height: 24vh; overflow-y: auto; overflow-wrap: anywhere; }
.talk-sub:empty { display: none; }
.talk-row { margin-top: 12px; gap: 10px; align-items: stretch; }
.talk-form { display: flex; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.18); }
.talk-form:focus-within { border-color: var(--acc); }
.talk-form input { background: transparent; border: 0; min-width: 0; padding: 10px 12px; font-size: 1rem; }
.talk-send { align-self: stretch; border: 0; background: transparent; color: var(--acc); font-size: .875rem; font-weight: 700; padding: 0 12px; min-height: 42px; }
.mic { padding: 10px; font-size: .875rem; border: 1px solid var(--line); }
.in-conversation .chatlog { opacity: 0; }
.in-conversation .voice-ind { bottom: auto; top: 76px; }
.chatlog { bottom: 78px; transition: opacity .15s; }
.chatbox { bottom: 74px; }
.notices { position: fixed; z-index: 60; pointer-events: none; top: 78px; right: 20px; max-width: min(340px, 86vw); }
.notice { font-size: .875rem; line-height: 1.5; border-radius: 10px; }
.panels { padding: 24px; background: rgba(3,8,14,.5); backdrop-filter: blur(5px); }
.panel { width: min(620px, 100%); max-height: calc(100dvh - 48px); padding: 24px; border-radius: 18px; background: #101925; box-shadow: 0 24px 100px rgba(0,0,0,.45); overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #405168 transparent; }
.panel.wide { width: min(1020px, 100%); }
.panel-head { margin-bottom: 22px; gap: 16px; }
.panel-head h2 { font-size: 1.4rem; line-height: 1.3; letter-spacing: -.03em; }
.panel .x { border-radius: 9px; background: rgba(255,255,255,.04); }
.panels[data-panel="menu"] { justify-content: flex-start; background: linear-gradient(90deg, rgba(3,8,14,.85), rgba(3,8,14,.18) 65%); backdrop-filter: blur(2px); }
#panelMenu { width: min(440px, 100%); padding: 26px; max-height: calc(100dvh - 48px); border-radius: 18px; }
.menu-brand { display: flex; gap: 10px; align-items: baseline; }
.menu-brand > span { font-size: 1.3rem; font-weight: 800; letter-spacing: .06em; }
.menu-brand h2 { color: var(--acc); font-size: 1.3rem; font-weight: 500; }
.menu-resume { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 50px; margin-bottom: 22px; font-size: 1rem; }
.menu-resume kbd { color: #162432; border-color: rgba(0,0,0,.15); background: rgba(255,255,255,.25); }
.menu-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.menu-section { margin: 20px 12px 7px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--mute); text-transform: uppercase; }
.mbtn { border: 0; border-radius: 9px; padding: 12px; background: transparent; }
.mbtn:hover, .mbtn:focus-visible { background: rgba(120,201,255,.09); }
.mbtn b { font-size: 1rem; font-weight: 600; }
.mbtn span { font-size: .875rem; line-height: 1.45; margin-top: 4px; }
.mbtn.leave { grid-column: auto; margin-top: 14px; border-top: 1px solid var(--line); border-radius: 0; text-align: left; font-size: .875rem; font-weight: 500; }
.menu-foot { font-size: .75rem; line-height: 1.7; padding: 16px 12px 0; }
.me-card { padding: 14px 0; margin: 0; border-width: 1px 0; border-radius: 0; background: transparent; box-shadow: none; grid-template-columns: 40px minmax(0, 1fr) auto; }
.me-card .av { width: 40px; height: 40px; background: #1e3349; font-size: 1rem; border-radius: 12px; }
.me-card .who b { font-size: .9375rem; overflow-wrap: anywhere; }
.me-card .who span, .me-card .sparks small { font-size: .75rem; }
.me-card .standing { display: none; } /* Detailed reputation remains in People > Your standing. */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.settings-tabs button { background: transparent; border: 1px solid transparent; color: var(--mute); min-height: 42px; padding: 10px 14px; border-radius: 9px; font-size: .875rem; font-weight: 600; }
.settings-tabs button[aria-pressed="true"] { color: var(--acc); border-color: rgba(120,201,255,.3); background: rgba(120,201,255,.09); }
.settings { gap: 0; }
.setting { grid-template-columns: minmax(0, 1fr) minmax(180px, auto); padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; gap: 16px 28px; }
.setting label { font-size: 1rem; line-height: 1.4; }
.setting small { font-size: .875rem; line-height: 1.5; max-width: 42ch; margin-top: 6px; }
.setting select { max-width: 300px; min-height: 42px; font-size: .875rem; }
.setting input[type="range"] { min-width: 0; width: 100%; height: 32px; touch-action: auto; }
.setting input[type="checkbox"] { width: 20px; height: 20px; justify-self: end; }
.seg { flex-wrap: wrap; justify-self: end; background: rgba(0,0,0,.18); }
.seg button { font-size: .875rem; text-transform: capitalize; padding: 9px 12px; }
.key { font-size: .875rem; gap: 12px; }
.key button { font-size: .875rem; min-height: 36px; }
.row { padding: 14px 0; border-width: 0 0 1px; border-radius: 0; background: transparent; }
.row .who b, .map-side .row .who b { font-size: .9375rem; }
.row .who span, .row.contact .who small, .map-side .row .who span { font-size: .8125rem; line-height: 1.5; }
.map-hint, .map-legend, .shop-foot, .game-foot { font-size: .875rem; line-height: 1.5; }
.map-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
.map-side h3, .opt-group h3 { font-size: .8125rem; }
.char-grid { grid-template-columns: minmax(220px, .8fr) minmax(0, 1fr); gap: 30px; }
.char-opts { padding: 4px; gap: 22px; }
.swatches { gap: 10px; }
button.sw { width: 34px; height: 34px; border-width: 3px; }
.items { gap: 8px; }
.panel-open .hud, .panel-open .touch { visibility: hidden; }
.panel.phone { max-width: 100%; box-shadow: none; padding: 0; }
.phone-shell { width: min(340px, 100%); max-height: calc(100dvh - 48px); }
.phone-body { padding-bottom: 30px; font-size: .875rem; }
.phone-apps button { font-size: .75rem; }
.phone-home { min-height: 18px; bottom: 3px; border: 6px solid #0b0c12; box-sizing: content-box; }
@media (max-width: 1100px) {
  .talk { width: min(600px, calc(100vw - 240px)); left: 24px; transform: none; }
  .in-conversation .voice-ind { left: auto; right: 20px; }
}
@media (max-width: 760px) {
  .panels { padding: 12px; }
  .panel, #panelMenu { max-height: calc(100dvh - 24px); padding: 20px; }
  .hud-top { left: 12px; right: 12px; top: max(12px, env(safe-area-inset-top)); gap: 6px; }
  .hud-place { padding: 10px; gap: 8px; flex-wrap: wrap; font-size: .8125rem; }
  #hudWeather, .hud-place .dot { display: none; }
  .hud-right { gap: 5px; }
  .hud-right .chip { padding: 8px; }
  .talk { left: 12px; width: calc(100vw - 24px); bottom: max(16px, env(safe-area-inset-bottom)); padding: 14px; transform: none; }
  .in-conversation .minimap { display: none; }
  .talk-row { flex-wrap: wrap; }
  .talk-form { min-width: 160px; }
  .talk-sub { max-height: 20dvh; }
  .in-conversation .voice-ind { right: 12px; top: 80px; font-size: .75rem; }
  .setting { grid-template-columns: 1fr; gap: 12px; }
  .setting select { max-width: 100%; width: 100%; }
  .seg, .setting input[type="checkbox"] { justify-self: start; }
  .map-grid, .char-grid { grid-template-columns: 1fr; }
  .map-side { max-height: none; }
  #charPreview { max-height: 40dvh; object-fit: contain; }
  .char-opts { max-height: none; overflow: visible; }
  .settings-tabs { gap: 4px; }
  .settings-tabs button { padding: 9px 11px; }
}
body.dx-mobile .talk { bottom: max(194px, calc(env(safe-area-inset-bottom) + 184px)); }
body.dx-mobile .voice-ind { top: 84px; bottom: auto; left: 12px; }
body.dx-mobile .talk-row .mic { flex: 0 0 auto; }
@media (max-height: 560px) and (orientation: landscape) {
  body.dx-mobile .talk { left: 170px; bottom: 12px; width: calc(100vw - 350px); padding: 12px; }
  body.dx-mobile .talk-sub { max-height: 18dvh; margin: 5px 0; }
  body.dx-mobile .talk-row { margin-top: 6px; }
  body.dx-mobile .talk-form { min-width: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* A single camera provides magnification; this overlay has no render target. */
#weaponScope { position:fixed; inset:0; z-index:8; pointer-events:none; display:grid; place-items:center; overflow:hidden; }
#weaponScope[hidden] { display:none; }
.scope-lens { position:relative; width:86vmin; height:86vmin; border-radius:50%; border:3px solid #121619; box-shadow:0 0 0 100vmax #080a0c, inset 0 0 45px 8px #0008; overflow:hidden; }
.scope-h,.scope-v { position:absolute; background:#101419; }
.scope-h { top:50%; left:0; width:100%; height:1px; }
.scope-v { left:50%; top:0; height:100%; width:1px; }
.scope-dot { position:absolute; width:4px; height:4px; border-radius:50%; background:#df674b; left:50%; top:50%; transform:translate(-50%,-50%); box-shadow:0 0 3px #000; }
.scope-lens span { position:absolute; bottom:10%; left:0; right:0; text-align:center; font:600 10px Inter,sans-serif; letter-spacing:3px; color:#dde4df; text-shadow:0 1px 3px #000; }
.weapon-scoped #prompt, .weapon-scoped #aimDot { visibility:hidden; }
#bigmap { width:100%; height:min(62vh,650px); display:block; border-radius:18px; border:1px solid #395260; touch-action:none; cursor:grab; }
#bigmap:active { cursor:grabbing; }
#bigmap:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }

/* Counter service: a menu, then a clear receipt for each stage. */
.service-intro,.service-receipts{grid-column:1/-1;width:100%}.service-intro{font-size:22px;margin:4px 0 16px;color:#f4ede1}.service-intro span{display:block;font-size:13px;color:var(--mute);margin-top:7px}.service-item,.service-receipt{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #ffffff16;border-radius:12px;background:#ffffff05}.service-item{grid-column:1/-1}.service-item>div,.service-receipt>div{flex:1}.service-item b,.service-receipt b{display:block;font-weight:600}.service-item span:not(.service-icon),.service-receipt span{display:block;color:var(--mute);font-size:12px;margin-top:5px}.service-icon{font-size:23px;width:40px;text-align:center;color:#d9b994}.service-receipts:empty{display:none}.service-receipt{margin:8px 0;border-left:3px solid #ba9d76}.service-item button,.service-receipt button{min-height:40px;padding:0 18px;width:auto}.service-item button:disabled{opacity:.45}

/* The private home studio shares the World panel and focus system. */
#panelHome{width:min(1240px,96vw);max-width:none}#homeStudio{display:flex;flex-direction:column;min-height:420px;height:min(75vh,800px)}.home-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px 18px}.home-toolbar input{font-size:20px;font-weight:600;background:transparent;border:0;border-bottom:1px solid #ffffff20;color:var(--text);padding:7px 0;width:100%;max-width:340px}.home-toolbar span{display:block;font-size:9px;letter-spacing:1.8px;color:#c5b399;margin-top:7px}.home-actions{display:flex;gap:8px}.home-actions button,.home-placement button,.home-view button{border:1px solid #ffffff25;border-radius:8px;background:#283730;color:#f1eee6;padding:10px 13px}.home-actions .primary{background:#cfb990;color:#162920}.home-layout{display:grid;grid-template-columns:250px minmax(0,1fr);flex:1;min-height:0}.home-catalog{overflow:auto;padding:0 18px 20px 24px}.home-catalog nav{display:grid;grid-template-columns:1fr 1fr;gap:5px}.home-catalog nav button{padding:10px 5px;border:1px solid #ffffff1a;background:#ffffff06;border-radius:8px;color:var(--text);font-size:11px}.home-catalog [aria-pressed=true]{border-color:#c8b18a;background:#c8b18a21}.home-catalog h3{font-size:10px;text-transform:uppercase;letter-spacing:1.8px;color:#adbaa9;margin:20px 0 11px}.home-catalog input,.home-catalog select{background:#ffffff08;color:var(--text);border:1px solid #ffffff20;border-radius:6px;padding:8px;box-sizing:border-box;width:100%;min-width:0}.home-product{display:flex;align-items:center;gap:12px;width:100%;background:#ffffff04;border:1px solid #ffffff12;border-radius:9px;padding:12px 9px;margin-top:6px;color:var(--text);text-align:left}.home-product i{width:30px;height:30px;border-radius:8px;flex:none;box-shadow:inset 0 -5px 0 #0002}.home-product span{font-size:12px}.home-product small{display:block;font-size:10px;color:var(--mute);margin-top:5px}.home-placement{display:grid;grid-template-columns:1fr 1fr;gap:8px}.home-placement h3,.home-placement>button,#homeRoomSize{grid-column:1/-1}#homeRoomSize{display:flex;gap:8px}.home-placement label{font-size:10px;color:var(--mute);min-width:0}.home-stage{position:relative;overflow:hidden;border-radius:14px 0 0 0;background:#e8e4db;min-height:320px}#homeCanvas{display:block;width:100%;height:100%;touch-action:none}.home-view{position:absolute;top:15px;right:15px;display:flex;gap:5px;z-index:2}.home-view button{box-shadow:0 3px 12px #0002;font-size:11px}.home-stage #homeHint{position:absolute;bottom:12px;left:16px;right:16px;margin:0;background:#26362fed;color:#f0eee6;padding:11px 14px;border-radius:9px;font-size:12px;z-index:2;pointer-events:none}#homeStudio footer{display:flex;justify-content:space-between;gap:16px;padding:13px 24px;font-size:11px;color:var(--mute)}#homeStudio button:disabled{opacity:.4}.home-loading{padding:40px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){.home-layout{grid-template-columns:170px minmax(0,1fr)}.home-catalog{padding:0 10px 15px}.home-toolbar{padding:0 12px 12px;flex-wrap:wrap}.home-toolbar input{font-size:16px}.home-actions button{font-size:11px;padding:8px}.home-view{top:8px;right:8px;gap:3px}.home-view button{padding:7px}.home-product{gap:6px;padding:8px 5px}.home-product i{width:20px;height:24px}#homeStudio footer{padding:10px 12px}#homeCount{display:none}}