:root{
  color-scheme:dark;
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  color:#f6efd8;
  background:#19372c;
  --gold:#f1d28a;
  --mint:#a8e0be;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
  --game-width:min(100vw,480px);
  --game-height:100dvh
}
*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent
}
html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  overscroll-behavior:none
}
body{display:grid;place-items:center;background:#10271f}
button,input,textarea{
  font:inherit
}
button{
  cursor:pointer;
  color:inherit;
  border:0
}
button:disabled{
  cursor:default;
  opacity:.45
}
button:focus-visible,textarea:focus-visible,input:focus-visible{
  outline:2px solid #e6c578;
  outline-offset:3px
}
button{
  touch-action:manipulation
}
svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
[hidden]{
  display:none!important
}
.game-shell{
  position:relative;
  width:var(--game-width);
  height:100vh;
  height:var(--game-height);
  margin:0 auto;
  box-shadow:0 0 70px #06150b80;
  overflow:hidden;
  isolation:isolate
}
#battle{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  user-select:none
}
.hud{
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:calc(var(--safe-top) + 12px) max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));
  background:linear-gradient(#142e25e6,#142e256b,transparent)
}
.resources{
  display:flex;
  align-items:center;
  height:44px;
  gap:2px;
  max-width:calc(100% - 50px);
  border:1px solid #e3d6a436;
  border-radius:15px;
  background:linear-gradient(135deg,#19372cf0,#10271fec);
  box-shadow:0 3px 14px #10241e55
}
.resource{
  position:relative;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 10px;
  min-width:0;
  height:100%;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.resource+.resource{
  border-left:1px solid #a9c19d26
}
.resource b{
  font-size:15px;
  font-weight:650
}
.resource i{
  width:27px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center
}
.resource svg{
  width:23px;
  height:23px;
  color:#c0ddaa
}
.sprite-icon{
  display:block;
  background-image:url('/assets/world-atlas.png');
  background-repeat:no-repeat;
  flex-shrink:0
}
.unit-symbol{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:var(--gold);
  font-style:normal;
  font-size:24px
}
.resource-gain{
  position:absolute;
  right:9px;
  top:35px;
  color:#f9df8e;
  font-size:13px;
  font-weight:700;
  pointer-events:none;
  opacity:0;
  text-shadow:0 2px 3px #092418
}
.resource.gain .resource-gain{
  animation:resource-gain 1.3s ease-out
}
.resource.gain b{
  color:#ffeaae
}
.icon-button{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:#17392dd9;
  border:1px solid #e4d5a42e;
  color:#d6dfbd;
  flex-shrink:0;
  backdrop-filter:blur(12px)
}
.icon-button:active{
  background:#2c5540
}
.home{width:30px;height:28px;border-radius:8px;background:#1a3829d9}
.home svg{width:16px;height:16px}
.pause-notice{
  position:absolute;
  z-index:2;
  top:calc(var(--safe-top) + 82px);
  left:50%;
  transform:translateX(-50%);
  border:1px solid #f4d68c60;
  border-radius:30px;
  padding:10px 17px;
  background:#19392cea;
  color:#f1d391;
  font-size:12px;
  white-space:nowrap;
  box-shadow:0 4px 20px #13281d55
}
.command-dock{
  position:absolute;
  z-index:3;
  bottom:0;
  left:0;
  right:0;
  padding:34px max(12px,env(safe-area-inset-right)) calc(var(--safe-bottom) + 10px) max(12px,env(safe-area-inset-left));
  background:linear-gradient(transparent,#152f27db 25%,#102a23fa 75%);
  max-width:100%;
  pointer-events:none
}
.command-dock>*{
  pointer-events:auto
}
.target-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:540px;
  margin:0 auto 8px;
  padding:0 3px;
  color:#d3dec0;
  font-size:11px;
  letter-spacing:1px
}
.target-heading span:last-child{
  color:#f1d99b;
  letter-spacing:0;
  max-width:70%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.targets{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  touch-action:pan-x;
  scroll-snap-type:x proximity;
  padding:3px 2px 5px;
  max-width:540px;
  margin:auto;
  -webkit-overflow-scrolling:touch
}
.targets::-webkit-scrollbar{
  display:none
}
.target{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:68px;
  height:86px;
  flex:0 0 68px;
  padding:5px 5px 6px;
  border-radius:15px;
  background:linear-gradient(150deg,#294b3cdb,#16372beb);
  border:1px solid #95bfa23a;
  scroll-snap-align:start;
  box-shadow:0 3px 6px #0a231b20;
  transition:border-color .15s,background .15s,transform .15s
}
.target.selected{
  border-color:#efcb7c;
  background:linear-gradient(145deg,#57704b,#304d35);
  box-shadow:0 0 0 1px #ecc5722b,inset 0 1px #ffe5a541
}
.target:active{
  transform:translateY(2px)
}
.target .avatar{
  display:grid;
  place-items:center;
  width:44px;
  height:44px
}
.target img{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  object-position:50% 38%;
  border:1px solid #e5d8a657
}
.target-label{
  font-size:11px;
  line-height:16px;
  white-space:nowrap
}
.target-count{
  position:absolute;
  right:5px;
  top:5px;
  border-radius:7px;
  padding:1px 4px;
  background:#102e25de;
  font-size:10px;
  min-width:16px;
  color:#e8edcd
}
.target-count[hidden]{
  display:none
}
.target-health{
  width:38px;
  height:3px;
  overflow:hidden;
  border-radius:2px;
  background:#0d271e
}
.target-health i{
  display:block;
  height:100%;
  background:#9fdbac;
  border-radius:2px;
  transition:width .2s
}
.target.selected .target-health i{
  background:#e5d391
}
.voice-row{
  display:flex;
  gap:10px;
  align-items:center;
  max-width:430px;
  margin:10px auto 0
}
.type-order{
  width:48px;
  height:54px;
  border-radius:18px;
  color:#c3dbc1;
  background:#214638c9
}
.voice-button{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  height:56px;
  flex:1;
  border:1px solid #ffeab4a3;
  border-radius:20px;
  background:linear-gradient(135deg,#f3d893,#d9b668);
  color:#293e2b;
  font-size:17px;
  font-weight:750;
  letter-spacing:2px;
  box-shadow:0 3px 0 #98783c,0 7px 18px #071b1955,inset 0 1px #fff3cfa3;
  transition:transform .12s,box-shadow .12s
}
.voice-button svg{
  width:24px;
  height:24px;
  stroke-width:1.9
}
.voice-button:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 #98783c
}
.voice-button.listening{
  background:linear-gradient(135deg,#bce9c7,#77bfa5);
  border-color:#dafde2;
  box-shadow:0 3px 0 #397f63,0 0 25px #9adeb22b;
  font-size:15px;
  letter-spacing:1px
}
.voice-button.busy{
  letter-spacing:1px;
  font-size:15px
}
.voice-hint{
  margin:10px 0 0;
  text-align:center;
  color:#adc3ad;
  font-size:10px;
  line-height:14px;
  letter-spacing:.5px;
  min-height:14px
}
.voice-wave{
  display:none;
  align-items:center;
  gap:3px;
  height:20px
}
.listening .voice-wave{
  display:flex
}
.voice-wave b{
  width:3px;
  height:8px;
  border-radius:3px;
  background:#386951;
  animation:voice-wave .7s infinite alternate
}
.voice-wave b:nth-child(2){
  animation-delay:.2s
}
.voice-wave b:nth-child(3){
  animation-delay:.4s
}
.voice-wave b:nth-child(4){
  animation-delay:.1s
}
#toast{
  position:absolute;
  z-index:8;
  top:calc(var(--safe-top) + 134px);
  left:50%;
  transform:translate(-50%,-5px);
  width:max-content;
  max-width:calc(100% - 48px);
  background:#17372fed;
  border:1px solid #bfd5a94d;
  border-radius:14px;
  padding:11px 15px;
  font-size:12px;
  line-height:1.6;
  text-align:center;
  box-shadow:0 5px 25px #11261d44;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s
}
#toast.show{
  opacity:1;
  transform:translate(-50%,0)
}
#toast.error{
  border-color:#dbac8c80;
  color:#ffe1c1
}
.sheet{
  position:fixed;
  inset:auto 0 max(0px,calc((100dvh - var(--game-height))/2));
  width:var(--game-width);
  max-width:100%;
  max-height:min(85dvh,calc(var(--game-height) - 16px));
  margin:0 auto;
  padding:22px 20px calc(22px + var(--safe-bottom));
  border:1px solid #bcc89e38;
  border-bottom:0;
  border-radius:25px 25px 0 0;
  background:linear-gradient(150deg,#244d3b,#15372c);
  color:#f6efd8;
  box-shadow:0 -12px 70px #081c1bb3;
  overflow-y:auto;
  overscroll-behavior:contain
}
.sheet::backdrop{
  background:#071c1773;
  backdrop-filter:blur(3px)
}
.sheet-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:15px
}
.sheet-heading h2{
  font-size:18px;
  margin:0;
  font-weight:600
}
.sheet-heading .icon-button{
  background:transparent;
  font-size:25px;
  width:36px;
  height:36px;
  border:0
}
.sheet textarea{
  display:block;
  resize:none;
  width:100%;
  padding:14px;
  line-height:1.7;
  color:#f1efd5;
  background:#0e2c23;
  border:1px solid #a6c99f4f;
  border-radius:14px;
  font-size:16px
}
.sheet textarea::placeholder{
  color:#8ea98d
}
.sheet-note{
  font-size:11px;
  line-height:1.6;
  color:#a9c1a4;
  margin:10px 0 15px
}
.primary,.secondary{
  display:block;
  width:100%;
  min-height:50px;
  padding:12px 16px;
  border-radius:15px;
  font-weight:650;
  background:linear-gradient(135deg,#edd495,#d8b870);
  color:#29422e
}
.secondary{
  background:#31533f;
  color:#eddbad;
  border:1px solid #c2cf9b2e;
  margin-top:15px
}
.setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:58px;
  border-bottom:1px solid #a8c99f24;
  font-size:14px
}
.setting-row button{
  min-width:72px;
  min-height:40px;
  padding:7px 12px;
  border-radius:10px;
  background:#34563f;
  color:#e9d89c
}
.setting-row input{
  accent-color:#dac482;
  width:22px;
  height:22px
}
.result{
  position:absolute;
  inset:0;
  z-index:7;
  background:#0c271bc9;
  backdrop-filter:blur(7px);
  display:grid;
  place-items:center;
  padding:30px
}
.result>div{
  text-align:center;
  max-width:360px
}
.result span{
  font-size:11px;
  letter-spacing:5px;
  color:#ecd08b
}
.result h1{
  font-size:28px;
  line-height:1.4;
  margin:14px 0
}
.result p{
  font-size:13px;
  line-height:1.8;
  color:#c8d8b7;
  margin-bottom:26px
}
@keyframes resource-gain{
  0%{
    opacity:0;
    transform:translateY(8px)
  }
  15%{
    opacity:1
  }
  70%{
    opacity:1
  }
  100%{
    opacity:0;
    transform:translateY(-15px)
  }
}
@keyframes voice-wave{
  to{
    height:20px
  }
}
@keyframes reply-in{
  from{
    opacity:0;
    margin-bottom:-6px
  }
  to{
    opacity:1;
    margin-bottom:0
  }
}
@media(max-width:359px){
  .hud{
    gap:5px;
    padding-left:8px;
    padding-right:8px
  }
  .resource{
    padding:0 7px;
    gap:2px
  }
  .resource b{
    font-size:13px
  }
  .resources{
    max-width:calc(100% - 47px)
  }
  .target{
    width:64px;
    flex-basis:64px
  }
  .command-dock{
    padding-left:9px;
    padding-right:9px
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important
  }
  .resource.gain .resource-gain{
    opacity:1
  }
}
.voice-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-setting{gap:8px}
.voice-setting label{flex:1;white-space:nowrap}
.voice-setting select{min-width:0;max-width:165px;border:1px solid #486052;border-radius:10px;background:#193c32;color:#f7edce;padding:10px 7px;font:inherit;font-size:13px}
.voice-setting button{min-width:52px}
.people{justify-content:safe center;align-items:center;gap:10px;max-width:520px;padding:5px 2px 8px}
.target.person{width:66px;height:66px;flex-basis:66px;padding:0;display:block;border-radius:12px;overflow:hidden;background:#1d3d30;transition:border-color .15s,background .15s}
.person .avatar,.person img{width:100%;height:100%;border-radius:10px;object-fit:cover;display:block}
.person .target-label{position:absolute;bottom:0;left:0;right:0;padding:12px 3px 4px;background:linear-gradient(transparent,#0f291de8);font-size:11px;color:#fff1cf;text-align:center;line-height:16px}
.target.person.selected{box-shadow:0 0 0 1px #ecc57266;border-color:#efcb7c}
.target.person.expanded{width:228px;flex-basis:228px;height:88px;display:grid;grid-template-columns:62px 1fr;grid-template-rows:20px 1fr;gap:0 10px;padding:9px;text-align:left;background:linear-gradient(125deg,#43573be8,#203e31f5)}
.person.expanded .avatar{width:62px;height:62px;grid-row:1/3;align-self:center}
.person.expanded .target-label{position:static;padding:0;background:none;text-align:left;font-size:13px;line-height:20px}
.person-details{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:9px;line-height:13px;color:#c3d4b5;letter-spacing:0}
.person-vitals{font-size:10px;font-variant-numeric:tabular-nums}
.person-traits{display:flex;gap:5px}
.person-traits span{padding:0 5px;background:#d3c48615;border:1px solid #ddcb8740;border-radius:4px;color:#ecdbab;font-size:10px}
.person-attributes{white-space:nowrap;font-size:9px;color:#b7c5a8}
.unread-dot{position:absolute;right:4px;top:4px;width:7px;height:7px;border:1px solid #775827;border-radius:50%;background:#ffe29e;box-shadow:0 0 7px #d7a74c}
.message-notice{position:absolute;top:calc(var(--safe-top) + 80px);left:max(12px,env(safe-area-inset-left));z-index:3;display:flex;align-items:center;gap:8px;max-width:calc(100% - 144px);min-height:38px;padding:6px 11px;color:#f3dba1;font-size:12px;border:1px solid #cbb16e66;border-radius:11px;background:#18392de8;box-shadow:0 3px 12px #0f231b40;backdrop-filter:blur(10px)}
.message-notice svg{width:17px;height:17px}.notice-arrow{margin-left:4px;font-size:20px;line-height:18px}
.command-dock{padding-top:24px}.voice-row{margin-top:3px}.voice-hint:empty{display:none}
.pause-notice{top:calc(var(--safe-top) + 196px)}
/* The desktop preview uses the same portrait stage; touch devices fill their portrait viewport. */
@media(pointer:fine){:root{--game-height:min(100dvh,854px);--game-width:min(100vw,480px,calc(var(--game-height)*9/16))}}
.portrait-notice{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#10271ff5;text-align:center}
.portrait-notice>div{max-width:320px}
.portrait-notice svg{width:64px;height:64px;color:var(--gold);stroke-width:1.4}
.portrait-notice h1{font-size:20px;font-weight:600;margin:18px 0 8px}
.portrait-notice p{font-size:13px;color:#b9ceb0;line-height:1.7;margin:0 0 20px}
.portrait-notice .primary{min-height:46px}

.map-panel{position:absolute;top:calc(var(--safe-top) + 80px);right:max(12px,env(safe-area-inset-right));width:108px;z-index:3;padding:4px;border:1px solid #c5bd8755;border-radius:11px;background:#123127e8;box-shadow:0 4px 14px #0c221d55;backdrop-filter:blur(8px)}
.map-view{position:relative;overflow:hidden;border-radius:6px;border:1px solid #acc49a33}
#minimap{display:block;width:100%;aspect-ratio:3/2;touch-action:none;cursor:crosshair}
.camera-scene{position:absolute;top:3px;left:4px;right:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9px;font-weight:600;line-height:14px;color:#f2e6bc;text-shadow:0 1px 3px #031d14;background:linear-gradient(90deg,#123023c9,transparent);pointer-events:none}
.map-controls{display:flex;gap:3px;margin-top:4px;align-items:center}
.camera-auto{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;min-width:0;height:28px;padding:0 2px;border-radius:7px;background:#345342;color:#f0dc9d;font-size:9px;white-space:nowrap}
.camera-auto i{width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:#f2d48c;box-shadow:0 0 5px #f2d48c77}
.camera-auto[aria-pressed="false"],.camera-auto.manual{background:#213e32;color:#b7c7ad}
.camera-auto[aria-pressed="false"] i,.camera-auto.manual i{background:#94b09a;box-shadow:none}

#inbox-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.dialogue-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.scene-bubble{position:absolute;left:12px;top:200px;width:min(310px,calc(100% - 24px));padding:12px 13px;border:1px solid #ebd39c88;border-radius:16px;background:linear-gradient(145deg,#fff1dcee,#e3dbbff2);color:#283d30;box-shadow:0 5px 20px #081e1e55;pointer-events:auto;--tail-x:50%;font-size:13px}
.scene-bubble::after{content:'';position:absolute;bottom:-8px;left:var(--tail-x);width:14px;height:14px;background:#e3dbbf;border-right:1px solid #ebd39c88;border-bottom:1px solid #ebd39c88;transform:translateX(-50%) rotate(45deg);pointer-events:none}
.scene-bubble.tail-above::after{top:-8px;bottom:auto;background:#fff1dc;transform:translateX(-50%) rotate(225deg)}
.scene-bubble.offscreen::after{opacity:.55}
.scene-bubble>img{display:none}
.reply-heading{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-right:20px;margin-bottom:5px}
.reply-heading strong{font-size:12px;color:#6b522b}
.scene-bubble button{padding:4px 7px;background:transparent;color:#6a653e;border-radius:7px;font-size:11px;min-height:30px}
#dismiss-reply{position:absolute;top:7px;right:5px;font-size:19px;min-width:28px;color:#7a765d}
.scene-bubble p{margin:0;font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.scene-bubble .player-line{font-size:10px;color:#71795e;margin-bottom:6px;border-bottom:1px solid #66784622;padding-bottom:6px;max-height:42px;overflow-y:auto}
#reply-text{white-space:pre-wrap;max-height:min(160px,calc(var(--bubble-space,300px) - 100px));overflow-y:auto;min-height:22px;scrollbar-width:thin}
#reply-text.speaking::after{content:'';display:inline-block;width:2px;height:13px;background:#857448;vertical-align:-2px;margin-left:3px;animation:cursor-pulse .9s infinite}
.scene-bubble.failed{border-color:#ba674f}
#proposal-summary{font-size:11px;color:#74633f;margin-top:7px}
.proposal-actions{display:flex;gap:7px;margin-top:8px}
.scene-bubble #accept-proposal{background:#567453;color:#fff4d9;min-height:35px;flex:1}
.scene-bubble #decline-proposal{border:1px solid #87947688;min-height:35px;flex:1}
.answer-message{margin-top:4px}
.inline-order{margin:6px 0 0;padding:9px;border:1px solid #dac68e55;border-radius:13px;background:#19392f}
.inline-order label{display:block;margin-bottom:6px;font-size:11px;color:#eddaa4}
.inline-input-row{display:flex;align-items:center;gap:5px}
.inline-input-row textarea{resize:none;flex:1;min-width:0;padding:8px 10px;line-height:1.45;background:#102f24;border:1px solid #71875d66;border-radius:9px;color:#eee7cb;font-size:16px}
.inline-input-row button{min-height:44px;padding:6px 8px;border-radius:9px;background:#d5ba7f;color:#29402f;font-size:12px}
.inline-input-row #close-order{background:transparent;color:#d7d9bb;font-size:19px}
.mission-notice{position:absolute;z-index:3;top:calc(var(--safe-top) + 128px);left:max(12px,env(safe-area-inset-left));max-width:calc(100% - 144px);padding:7px 9px;background:#16352cce;border:1px solid #b3c79944;border-radius:10px;text-align:left}
.mission-notice>span{display:block;font-size:11px;color:#eadaae;margin-bottom:2px}
.mission-notice small{display:block;font-size:9px;color:#bfceb0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mission-scroll{position:absolute;top:calc(var(--safe-top) + 192px);left:12px;right:12px;z-index:5;padding:15px;border:1px solid #dec79980;border-radius:15px;background:#17382fed;color:#eee4c6;box-shadow:0 5px 20px #09231e66;max-height:40%;overflow-y:auto;backdrop-filter:blur(8px)}
#close-mission{position:absolute;right:5px;top:6px;background:transparent;color:#c9d1b3;width:30px;height:30px;font-size:20px}
#mission-detail-title{display:block;margin-right:20px;font-size:13px;line-height:1.6}
#mission-detail-text{font-size:11px;line-height:1.6;color:#bdceb0;margin:9px 0}
#mission-choices{display:flex;gap:8px}
.mission-choice{padding:9px;flex:1;min-width:0;border:1px solid #d6c28b66;background:#405a3d;border-radius:9px;text-align:left}
.mission-choice strong{display:block;font-size:12px;color:#f1db9d}.mission-choice span{display:block;font-size:10px;line-height:1.6;color:#d1dabd;margin-top:5px}
.room-settings{margin-top:17px;padding-top:8px;border-top:1px solid #bac99a44}
.room-settings h3{font-size:14px;margin:5px 0 7px;color:#e9d496}
.room-settings p{font-size:12px;line-height:1.6;color:#b9cdb0;margin:0 0 8px;overflow-wrap:anywhere}
#room-entry .secondary{margin-top:0;min-height:44px}
#join-room-form{display:flex;gap:7px;margin-top:8px}
#room-code{min-width:0;flex:1;border:1px solid #809d6c77;background:#153729;padding:10px;border-radius:10px;color:#eee5c8;font-size:16px}
#join-room{padding:8px 14px;border-radius:10px;background:#34563f;color:#ecd9a0}
@keyframes cursor-pulse{50%{opacity:.2}}
@media(max-width:359px){.scene-bubble{width:calc(100% - 24px);padding:10px 12px}.mission-notice{left:9px;max-width:calc(100% - 132px)}.map-panel{right:9px}.scene-bubble p{font-size:12px}.scene-bubble button{min-height:28px}}

.reply-body{max-height:calc(var(--bubble-space,300px) - 26px);overflow-y:auto;scrollbar-width:thin}
.room-notice{position:absolute;left:22px;right:22px;top:calc(var(--safe-top) + 205px);z-index:5;text-align:center;border:1px solid #d6c29166;background:#17382fe8;padding:18px;border-radius:17px;backdrop-filter:blur(8px)}
.room-notice strong{font-size:18px;color:#efd395;letter-spacing:2px}.room-notice p{font-size:12px;line-height:1.7;color:#c5d8b9;margin:10px 0 15px}.room-notice .primary{min-height:44px}

.typing .map-panel,.typing .mission-notice,.typing .message-notice{visibility:hidden;pointer-events:none}
.typing .voice-row{display:none}
.typing .command-dock{padding-top:14px}
@media(max-height:550px){.typing .targets{display:none}.typing .command-dock{padding-top:8px}.typing .inline-order{margin-top:0}}

.tempo-hint{margin:7px 0 0;text-align:center;color:#c9d8af;font-size:10px;line-height:14px;white-space:nowrap}.tempo-hint.exhausted{color:#efc193}.result .secondary{margin:0 0 10px;background:#36523dd9;color:#e4d9b5;min-height:42px;font-size:12px}

.audio-settings { padding: 4px 0 9px; border-top: 1px solid #42605266; border-bottom: 1px solid #42605266; margin: 6px 0; }
.audio-volume { gap: 10px; }
.audio-volume span { min-width: 64px; }
.setting-row.audio-volume input { width: min(38vw, 160px); flex: 1; height: 24px; accent-color: #ecd18d; }
.audio-volume output { width: 38px; text-align: right; color: #d1c99e; font-size: 12px; font-variant-numeric: tabular-nums; }
.audio-status { margin: 4px 0 2px; color: #99b8a6; font-size: 11px; text-align: right; }

/* The lobby owns the portrait stage; no battle HUD remains interactive beneath it. */
.game-shell[data-screen="lobby"] > :not(.lobby):not(#toast){display:none!important}
.game-shell[data-screen="battle"] > .lobby{display:none}
.lobby{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(var(--safe-top) + clamp(44px,10vh,100px)) 30px calc(var(--safe-bottom) + clamp(35px,9vh,90px));background:radial-gradient(ellipse at 50% 35%,#3b5943,#18372c 68%,#102b23);overflow:hidden}
.lobby::after{content:'';position:absolute;inset:12px;border:1px solid #d7c49130;border-radius:22px;pointer-events:none}
.lobby-art{position:absolute;inset:20% -15% 19%;pointer-events:none;opacity:.38;mask-image:linear-gradient(transparent,#000 15%,#000 65%,transparent)}
.lobby-art img{position:absolute;top:4%;height:100%;width:80%;object-fit:cover;border-radius:50%;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 70%,transparent)}
.lobby-hero{left:-9%;object-position:52% 35%}.lobby-adviser{right:-10%;object-position:50% 35%;transform:scale(.88) translateY(8%)}
.lobby-title{z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.lobby-crest{display:grid;place-items:center;width:47px;height:47px;border:1px solid #ead29b88;border-radius:13px;transform:rotate(45deg);color:#f3ddb0;font-family:serif;font-size:24px;box-shadow:0 0 28px #ead29b15;background:#22433188}
.lobby-title h1{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:clamp(25px,7vw,34px);letter-spacing:4px;margin:8px -4px 0 0;font-weight:650;color:#f5e2b5;text-shadow:0 3px 18px #0f2c21}
.lobby-actions{z-index:1;width:100%;max-width:300px;text-align:center}
.match-status{min-height:58px;margin-bottom:18px;color:#dddfbf;font-size:13px;line-height:20px}
.match-status p{margin:0}.match-status p:empty{min-height:20px}
.match-status span{display:block;color:#a9c4ab;font-size:12px;margin-top:6px;font-variant-numeric:tabular-nums}
.lobby-match{min-height:58px;border:1px solid #f6e5b088;box-shadow:0 3px 0 #997a41,0 8px 28px #081f2255;letter-spacing:4px;font-size:18px;border-radius:17px}
.lobby-match:active{transform:translateY(2px);box-shadow:0 1px 0 #997a41}
.lobby-debug{display:block;width:100%;min-height:44px;margin-top:18px;background:transparent;color:#bdcbb0;font-size:12px;border-radius:12px;border:1px solid #c6c59a30}
.lobby-debug:active{background:#b8c69610}
@media(max-height:620px){.lobby{padding-top:calc(var(--safe-top) + 35px);padding-bottom:calc(var(--safe-bottom) + 30px)}.lobby-title{gap:9px}.lobby-title h1{font-size:27px}.match-status{margin-bottom:12px}.lobby-debug{margin-top:14px}}

.lobby-crest>span{transform:rotate(-45deg)}