:root{
  --ink:#3a2b1f;
  --muted:#8a6a49;
  --gold:#f4b73f;
  --orange:#ef7c3a;
  --cream:#fff8e9;
  --plum:#1b1119;
  --line:rgba(120,80,40,.18);
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  background:#0d0a0f;
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

body{display:flex;align-items:center;justify-content:center;}

/* 手机长按游戏画面时不要弹出「复制 / 存储图片」菜单 */
button,canvas,img,.overlay,.panel{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
img{-webkit-user-drag:none;}
input,textarea,select,[contenteditable="true"]{
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  user-select:text;
}

#stage{
  position:relative;
  flex:none;
  width:min(100vw, 177.777vh);
  aspect-ratio:16/9;
  overflow:hidden;
  overflow:clip;
  background:#120d14;
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  font-size:min(1.875vw, 3.333vh);
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}

/* 竖屏锁定下的放大模式：把整块画面转 90°，用户只需把手机横过来 */
#stage.portrait-zoom{
  /* 不用 flex 居中：元素比竖屏宽，Safari 对溢出的 flex 居中处理不一致 */
  position:fixed;
  left:50%;
  top:50%;
  width:min(100vh, 177.777vw);
  width:min(100svh, 177.777vw);
  font-size:calc(min(100vh, 177.777vw) * .01875);
  font-size:calc(min(100svh, 177.777vw) * .01875);
  transform:translate(-50%, -50%) rotate(90deg);
  transform-origin:center center;
}
#btn-portrait-zoom{
  right:5.9em;
  width:max(2.3em, 38px);
  height:max(2.3em, 38px);
  font-size:max(1em, 14px);
}

#game{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  image-rendering:auto;
}

/* ---------- 角标按钮 ---------- */
.round-btn{
  position:absolute;
  top:.75em;
  z-index:20;
  width:2.3em;
  height:2.3em;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,231,178,.24);
  background:rgba(30,20,26,.55);
  color:#ffe9b5;
  font-size:1em;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:transform .15s, background .15s;
}
.round-btn:hover{transform:translateY(-1px);background:rgba(48,32,38,.75);}
.round-btn:active{transform:scale(.94);}
#btn-sound{right:3.35em;}
#btn-pause{right:.8em;}
#btn-pause[hidden]{display:none;}
.pause-btn{font-size:.72em;letter-spacing:-.08em;}

/* ---------- 覆盖层 ---------- */
.overlay{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:1em;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  background:rgba(19,12,18,.6);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, visibility .22s;
}
.overlay > .panel,
.overlay > .title-wrap{margin:auto;}
.overlay.show{opacity:1;visibility:visible;}

/* ---------- 首次开场动画 ---------- */
.intro-overlay{
  padding:0;
  align-items:center;
  overflow:hidden;
  background:#000;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.intro-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}
.intro-story{
  position:absolute;
  left:0;
  right:0;
  bottom:4.2%;
  z-index:2;
  padding:0 12%;
  text-align:center;
  pointer-events:none;
}
.intro-story p{
  display:inline-block;
  margin:0;
  padding:.55em 1.2em;
  border-radius:999px;
  font-size:.88em;
  line-height:1.65;
  color:#ffeccb;
  letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.8);
  background:linear-gradient(90deg,transparent,rgba(10,7,10,.55) 18%,rgba(10,7,10,.55) 82%,transparent);
}
.intro-skip{
  position:absolute;
  top:1em;
  right:1em;
  z-index:3;
  padding:.55em 1.1em;
  font-size:.76em;
  letter-spacing:.08em;
}
@media (max-height:520px){
  .intro-story{bottom:2.5%;}
  .intro-story p{font-size:.72em;padding:.35em .9em;}
  .intro-skip{top:.55em;right:.55em;font-size:.66em;padding:.4em .8em;}
}

/* ---------- 标题页 ---------- */
#overlay-title{
  background:
    linear-gradient(90deg,rgba(10,7,10,.92) 0%,rgba(10,7,10,.82) 34%,rgba(10,7,10,.52) 62%,rgba(10,7,10,.72) 100%),
    url("assets/victory.webp") center 38% / cover no-repeat,
    linear-gradient(140deg,#241820 0%,#160f16 48%,#0f0a10 100%);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.menu-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.menu-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.03) contrast(1.02) brightness(.94);
}
.menu-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(11,7,10,.94) 0%,rgba(11,7,10,.80) 30%,rgba(11,7,10,.36) 60%,rgba(11,7,10,.20) 80%,rgba(11,7,10,.58) 100%),
    linear-gradient(0deg,rgba(11,7,10,.86) 0%,rgba(11,7,10,.12) 34%,rgba(11,7,10,0) 55%),
    radial-gradient(48em 34em at 73% 42%, rgba(255,176,78,.16), transparent 68%);
}
#overlay-title::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background-image:
    radial-gradient(rgba(255,214,140,.12) 1.4px, transparent 1.4px),
    radial-gradient(rgba(255,214,140,.06) 1px, transparent 1px);
  background-size:3.2em 3.2em, 1.6em 1.6em;
  background-position:0 0, .8em .8em;
  mask-image:radial-gradient(55em 38em at 55% 45%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(55em 38em at 55% 45%, #000 0%, transparent 78%);
  pointer-events:none;
}
#overlay-title::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  box-shadow:inset 0 0 8em rgba(0,0,0,.55);
  pointer-events:none;
}
.dungeon-glow{
  position:absolute;
  z-index:2;
  left:52%;top:18%;
  width:46em;height:34em;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,168,72,.20), transparent 72%);
  filter:blur(6px);
  pointer-events:none;
}
.title-wrap{
  position:relative;
  z-index:3;
  width:92%;
  max-width:58em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2.4em;
}
.title-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.6em;
  min-width:0;
  flex:1;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:.4em .95em;
  border-radius:999px;
  background:rgba(255,221,150,.10);
  border:1px solid rgba(255,206,120,.32);
  color:#ffd98d;
  font-size:.78em;
  font-weight:700;
  letter-spacing:.12em;
  box-shadow:0 .25em .8em rgba(0,0,0,.25) inset;
}
.title-left h1{
  margin:.1em 0 0;
  font-size:2.9em;
  line-height:1;
  letter-spacing:.04em;
  font-weight:900;
  color:#fff4dc;
  text-shadow:0 .06em 0 #7a3f14, 0 .18em .5em rgba(0,0,0,.5), 0 0 1.2em rgba(255,180,70,.25);
}
/* 审核要求的「玩家自制」后缀：单独一行，缩小以免把主标题挤宽 */
.title-left h1 small{
  display:block;
  margin-top:.18em;
  font-size:.4em;
  line-height:1.1;
  letter-spacing:.12em;
  font-weight:800;
  color:rgba(255,226,170,.86);
  text-shadow:0 .1em .35em rgba(0,0,0,.55);
}
.title-left h1 span{
  margin-left:0;
  background:linear-gradient(180deg,#ffe9a8 8%,#ffb84b 55%,#ef7d2f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 .05em 0 rgba(80,38,8,.55));
}
.subtitle{
  font-size:.78em;
  font-weight:800;
  letter-spacing:.42em;
  color:rgba(255,226,170,.55);
}
.tagline{
  margin:.35em 0 .2em;
  font-size:.98em;
  line-height:1.75;
  color:rgba(255,241,216,.78);
  max-width:30em;
}
[hidden]{display:none !important;}
.btns{display:flex;gap:.75em;flex-wrap:wrap;align-items:center;}
.btns.center{justify-content:center;}
.btns.column{flex-direction:column;}
.btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:.72em 1.7em;
  font-family:inherit;
  font-size:1em;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.btn.primary{
  color:#40250c;
  background:linear-gradient(180deg,#ffd979,#ffb347 55%,#f08c32);
  box-shadow:0 .35em .9em rgba(240,140,50,.35), inset 0 -2px 0 rgba(160,70,10,.28), inset 0 2px 0 rgba(255,255,255,.42);
}
.btn.primary:hover{transform:translateY(-2px);filter:brightness(1.04);}
.btn.primary:active{transform:translateY(0) scale(.98);}
.btn.ghost{
  color:#ffe9bd;
  background:rgba(255,235,195,.07);
  border:1px solid rgba(255,222,160,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.btn.ghost:hover{transform:translateY(-2px);background:rgba(255,235,195,.13);}
.panel .btn.ghost{color:#7a5427;background:rgba(180,120,50,.08);border-color:rgba(160,110,50,.28);}
.panel .btn.ghost:hover{background:rgba(180,120,50,.15);}

.keys{
  display:flex;
  flex-wrap:wrap;
  gap:.45em .95em;
  margin-top:.45em;
  font-size:.78em;
  color:rgba(255,236,200,.62);
  align-items:center;
}
.keys span{display:inline-flex;align-items:center;gap:.3em;}
.key{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.75em;
  height:1.75em;
  padding:0 .42em;
  border-radius:.45em;
  font-size:.92em;
  font-weight:800;
  color:#ffe6b0;
  background:linear-gradient(180deg,rgba(255,225,165,.16),rgba(255,225,165,.05));
  border:1px solid rgba(255,220,150,.3);
  box-shadow:0 2px 0 rgba(0,0,0,.3);
}
.key.wide{padding:0 .7em;}
.record{
  margin-top:.55em;
  font-size:.8em;
  color:rgba(255,220,155,.55);
  letter-spacing:.02em;
}
/* 主菜单：角色切换 + 场外金库 */
.title-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.7em;
  margin-top:.6em;
}
.char-switch{
  display:inline-flex;
  align-items:center;
  gap:.25em;
  padding:.2em .3em .2em .65em;
  border-radius:999px;
  background:rgba(24,15,20,.52);
  border:1px solid rgba(255,220,160,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.char-switch-label{
  font-size:.64em;
  font-weight:800;
  letter-spacing:.14em;
  color:rgba(255,220,160,.48);
  margin-right:.2em;
}
.char-btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:.36em .74em;
  font-family:inherit;
  font-size:.7em;
  font-weight:800;
  color:rgba(255,235,200,.7);
  background:transparent;
  cursor:pointer;
  transition:background .15s, color .15s, transform .12s;
}
.char-btn:hover{background:rgba(255,225,165,.1);color:#ffedc8;}
.char-btn:active{transform:scale(.96);}
.char-btn.active{
  color:#3a2410;
  background:linear-gradient(180deg,#ffe09a,#f3a64a);
  box-shadow:0 2px 0 rgba(0,0,0,.28), 0 0 12px rgba(255,180,70,.25);
}
.char-btn.locked{color:rgba(255,235,200,.42);}
.wallet{
  font-size:.72em;
  font-weight:800;
  letter-spacing:.02em;
  color:rgba(255,220,155,.66);
}
.title-hero{
  position:relative;
  flex:0 0 21em;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:24em;
}
.hero-halo{
  position:absolute;
  width:24em;height:24em;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,190,90,.34), rgba(255,150,60,.10) 55%, transparent 72%);
  animation:haloPulse 4.8s ease-in-out infinite;
}
@keyframes haloPulse{
  0%,100%{transform:scale(1);opacity:.85;}
  50%{transform:scale(1.06);opacity:1;}
}
.portrait-frame{
  position:relative;
  z-index:2;
  width:18.5em;
  height:21.5em;
  padding:1.1em;
  border-radius:2.1em;
  background:
    linear-gradient(150deg, rgba(255,233,185,.15), rgba(255,210,130,.04) 45%, rgba(0,0,0,.15)),
    rgba(30,20,26,.5);
  border:1px solid rgba(255,214,140,.38);
  box-shadow:0 1.4em 3.4em rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16);
  transform:rotate(-2.5deg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.portrait-frame::after{
  content:"";
  position:absolute;
  inset:.55em;
  border-radius:1.7em;
  border:1px dashed rgba(255,215,150,.2);
  pointer-events:none;
}
.portrait-pin{
  position:absolute;
  top:-.5em;left:50%;
  width:1em;height:1em;
  margin-left:-.5em;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe6a6,#e28a2c 65%,#9c5314);
  box-shadow:0 .15em .4em rgba(0,0,0,.5);
}
.portrait-frame img{
  width:100%;
  height:auto;
  max-height:15.8em;
  object-fit:cover;
  border-radius:.9em;
  border:1px solid rgba(255,220,160,.22);
  box-shadow:0 .8em 1.8em rgba(0,0,0,.5);
  filter:drop-shadow(0 1em 1.6em rgba(0,0,0,.5));
  animation:heroFloat 3.8s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) rotate(0);}
  50%{transform:translateY(-.45em) rotate(1deg);}
}
.portrait-caption{
  position:absolute;
  bottom:.85em;
  left:0;right:0;
  text-align:center;
  font-size:.78em;
  font-weight:700;
  letter-spacing:.16em;
  color:rgba(255,226,170,.72);
}
.spark{
  position:absolute;
  color:#ffd27a;
  font-size:1.1em;
  opacity:.7;
  animation:sparkFloat 5s ease-in-out infinite;
  text-shadow:0 0 .5em rgba(255,190,80,.8);
}
.spark.s1{left:1em;top:3em;font-size:1.4em;animation-delay:-1s;}
.spark.s2{right:.5em;top:6em;animation-delay:-2.6s;}
.spark.s3{left:2.4em;bottom:2.2em;font-size:1.6em;color:#ffe6a8;animation-delay:-3.4s;}
.spark.s4{right:2em;bottom:4em;font-size:.9em;animation-delay:-.6s;}
@keyframes sparkFloat{
  0%,100%{transform:translateY(0) scale(.9);opacity:.35;}
  50%{transform:translateY(-.7em) scale(1.15);opacity:.9;}
}
.title-foot{
  position:absolute;
  z-index:3;
  left:50%;bottom:1em;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:.9em;
  font-size:.72em;
  letter-spacing:.08em;
  color:rgba(255,230,180,.42);
  white-space:nowrap;
}
.title-foot i{
  display:block;
  width:1px;height:1em;
  background:rgba(255,225,160,.25);
}
/* H5 审核版：联机入口默认隐藏，仅当页面确实挂在本机联机服务上时才由脚本放出 */
#btn-lan[hidden],
#overlay-lan[hidden]{display:none !important;}

/* ---------- 通用面板 ---------- */
.panel{
  position:relative;
  z-index:1;
  width:min(90%, 30em);
  max-height:calc(100% - 1.6em);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:2em 2.2em 1.9em;
  border-radius:1.6em;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,219,150,.4), transparent 60%),
    linear-gradient(165deg,#fffaf0,#ffefd5 60%,#ffe3bd);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1.6em 4em rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.8);
  color:var(--ink);
  text-align:center;
  animation:panelIn .26s cubic-bezier(.2,.9,.3,1.2);
}
.panel.wide{width:min(92%, 46em);}
@keyframes panelIn{
  from{transform:translateY(.8em) scale(.97);opacity:0;}
  to{transform:translateY(0) scale(1);opacity:1;}
}
.panel h2{
  margin:0 0 .25em;
  font-size:2em;
  font-weight:900;
  letter-spacing:.04em;
  color:#4a3018;
}
.panel-sub{
  margin:0 0 1.1em;
  font-size:.92em;
  color:var(--muted);
  line-height:1.6;
}
.panel .btns{margin-top:1.3em;justify-content:center;}
.panel .btn.primary{color:#40250c;}
#overlay-pause .panel{padding-bottom:1.55em;}
.pause-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5em;
}
.pause-row .btn{padding:.52em 1em;font-size:.8em;}
.pause-note{
  margin:.4em 0 0;
  font-size:.7em;
  line-height:1.45;
  text-align:center;
  color:var(--muted);
  opacity:.85;
}

/* ---------- 操作说明 ---------- */
.help-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7em;
  text-align:left;
}
.help-item{
  padding:.85em 1em;
  border-radius:1em;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(170,120,60,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.help-item b{
  display:block;
  margin-bottom:.35em;
  font-size:.95em;
  color:#593b1d;
}
.help-item span{font-size:.78em;color:#7c5a36;font-weight:700;}
.help-item p{
  margin:.35em 0 0;
  font-size:.76em;
  line-height:1.55;
  color:#8a6a49;
}
.help-item .key{font-size:.78em;}

/* ---------- 暂停 / 结算 ---------- */
.pause-stats,.result-stats{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.55em;
  margin-top:.4em;
}
.stat-chip{
  min-width:6.2em;
  padding:.55em .95em;
  border-radius:.9em;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(170,120,60,.16);
  text-align:center;
}
.stat-chip b{
  display:block;
  font-size:1.18em;
  color:#5b3b1b;
  letter-spacing:.02em;
}
.stat-chip span{
  display:block;
  margin-top:.1em;
  font-size:.7em;
  color:#96734d;
  letter-spacing:.08em;
}
.result-mark{
  width:3.4em;height:3.4em;
  margin:-.4em auto .5em;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25em;
  font-weight:900;
}
.result-mark.dead{
  color:#b94a56;
  background:radial-gradient(circle at 50% 35%,#ffe2e2,#ffc9c9 60%,#f6b1b1);
  box-shadow:0 .6em 1.4em rgba(190,70,70,.22), inset 0 2px 0 rgba(255,255,255,.75);
}
.result-mark.win{
  color:#a86a12;
  background:radial-gradient(circle at 50% 35%,#fff6c9,#ffe08a 60%,#ffcb5c);
  box-shadow:0 .6em 1.4em rgba(220,160,40,.28), inset 0 2px 0 rgba(255,255,255,.8);
  animation:starSpin 6s linear infinite;
}
@keyframes starSpin{
  from{transform:rotate(-6deg) scale(1);}
  50%{transform:rotate(6deg) scale(1.05);}
  to{transform:rotate(-6deg) scale(1);}
}
.win-hero{
  display:flex;
  justify-content:center;
  margin:0 0 .35em;
}
.win-hero img{
  height:7em;
  width:auto;
  border-radius:.5em;
  box-shadow:0 0 0 2px rgba(255,214,120,.6),0 .8em 1.4em rgba(90,50,20,.38);
  animation:heroFloat 3.6s ease-in-out infinite;
}
#overlay-win h2{font-size:1.9em;letter-spacing:.12em;margin-bottom:.2em;}
/* 通关面板：立绘和六项战绩尽量在同一屏内放下 */
.win-panel{width:min(96%, 54em);padding:1.5em 2em 1.4em;}
.win-panel .result-mark{width:2.8em;height:2.8em;margin:-.2em auto .35em;font-size:1.15em;}
.win-panel .result-stats{gap:.45em;margin-top:.25em;}
.win-panel .stat-chip{padding:.42em .7em;min-width:5.6em;}
.win-panel .btns{margin-top:1em;}
.over-panel{padding:1.05em 2em 1.15em;}
.over-hero{
  display:flex;
  justify-content:center;
  margin:-.15em 0 .2em;
}
.over-hero img{
  height:7.1em;
  width:auto;
  filter:drop-shadow(0 .65em 1em rgba(90,50,20,.22));
  animation:heroFloat 3.6s ease-in-out infinite;
}
#overlay-over h2{
  font-size:1.65em;
  letter-spacing:.1em;
  margin-bottom:.18em;
}
#overlay-over .panel-sub{font-size:.85em;margin-bottom:.55em;}
#overlay-over .result-stats{gap:.45em;margin-top:.2em;}
#overlay-over .stat-chip{padding:.42em .8em;min-width:5.8em;}
#overlay-over .btns{margin-top:.85em;}
#overlay-netresult .over-panel{width:min(96%, 46em);padding:1.15em 2em 1.25em;}
#overlay-netresult .result-mark{width:2.6em;height:2.6em;margin:-.25em auto .3em;font-size:1.1em;}
#overlay-netresult .over-hero{margin:0 0 .25em;}
#overlay-netresult .over-hero img{height:6.2em;}
#overlay-netresult h2{letter-spacing:.08em;margin-bottom:.18em;}
#overlay-netresult .result-stats{gap:.45em;margin-top:.25em;}
#overlay-netresult .stat-chip{padding:.42em .75em;min-width:5.8em;}
#overlay-netresult .btns{margin-top:.9em;}

/* ---------- 看广告复活 ---------- */
.revive-panel{width:min(92%, 30em);}
.revive-panel .result-mark{margin:.1em auto .55em;}
.revive-panel h2{font-size:1.75em;letter-spacing:.08em;}
.revive-panel .panel-sub{margin-bottom:.9em;}
.revive-clip-overlay{
  align-items:center;
  background:#08060a;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.revive-clip-box{
  width:min(92%, 44em);
  height:100%;
  display:flex;
  flex-direction:column;
  gap:.55em;
  color:#f6ead2;
}
.revive-clip-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.82em;
  font-weight:800;
  letter-spacing:.08em;
  color:#cdb995;
}
#revive-clip-count{color:#ffd67a;font-variant-numeric:tabular-nums;}
.revive-clip-frame{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:1em;
  background:#000;
  box-shadow:0 1em 3em rgba(0,0,0,.55),0 0 0 1px rgba(255,210,130,.25);
}
.revive-clip-frame img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.revive-clip-bar{height:.45em;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;}
.revive-clip-bar i{display:block;width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffb84a,#ffe7a0);transition:width .12s linear;}
.revive-clip-foot p{margin:.45em 0 0;text-align:center;font-size:.76em;color:#cdb995;letter-spacing:.05em;}
/* 外接广告等待层：原生 SDK 全屏播放时只露这一层背景 */
.ad-wait-overlay{
  align-items:center;
  background:#08060a;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#f6ead2;
}
.ad-wait-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7em;
  padding:2em 1.6em;
  text-align:center;
}
.ad-wait-spinner{
  width:2.4em;
  height:2.4em;
  border-radius:50%;
  border:3px solid rgba(255,210,130,.22);
  border-top-color:#ffd67a;
  animation:ad-wait-spin .9s linear infinite;
}
@keyframes ad-wait-spin{to{transform:rotate(360deg);}}
.ad-wait-box p{margin:0;font-size:1em;font-weight:800;letter-spacing:.08em;}
.ad-wait-box .ad-wait-hint{font-size:.76em;font-weight:600;color:#cdb995;letter-spacing:.05em;}

/* ---------- 祝福三选一 ---------- */
.buff-panel{
  width:min(94%, 50em);
  padding-bottom:2.2em;
}
#buff-sub{margin-bottom:1.4em;}
.buff-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1em;
}
.buff-card{
  position:relative;
  appearance:none;
  border:1px solid rgba(150,100,45,.2);
  border-radius:1.2em;
  padding:1.35em .95em 1.2em;
  background:linear-gradient(170deg,rgba(255,255,255,.72),rgba(255,240,215,.6));
  box-shadow:0 .7em 1.6em rgba(140,90,40,.10), inset 0 1px 0 rgba(255,255,255,.9);
  font-family:inherit;
  color:var(--ink);
  cursor:pointer;
  transition:transform .16s, box-shadow .16s, border-color .16s;
  text-align:center;
}
.buff-card:hover{
  transform:translateY(-.35em);
  border-color:rgba(230,160,60,.55);
  box-shadow:0 1.1em 2em rgba(160,100,40,.20), inset 0 1px 0 rgba(255,255,255,.9);
}
.buff-card:active{transform:translateY(-.1em) scale(.99);}
.buff-icon{
  width:3.6em;height:3.6em;
  margin:0 auto .7em;
  border-radius:1.1em;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1em;
  font-weight:900;
  color:#fff6df;
  background:var(--accent,#e8a33c);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14), inset 0 2px 0 rgba(255,255,255,.28), 0 .5em 1.1em rgba(140,80,30,.22);
}
.buff-card h3{
  margin:0 0 .4em;
  font-size:1.05em;
  font-weight:900;
  color:#523417;
}
.buff-card p{
  margin:0;
  min-height:3.2em;
  font-size:.76em;
  line-height:1.6;
  color:#8a6a49;
}
.buff-tag{
  display:inline-block;
  margin-top:.8em;
  padding:.22em .7em;
  border-radius:999px;
  font-size:.64em;
  font-weight:800;
  letter-spacing:.08em;
  color:#8a5a20;
  background:rgba(240,170,70,.18);
}

/* ---------- 奶鼠商店 ---------- */
.shop-panel{width:min(95%, 52em);padding-bottom:2em;}
.shop-gold{
  float:right;
  padding:.18em .8em;
  border-radius:999px;
  font-weight:900;
  font-size:.92em;
  color:#7a4d12;
  background:rgba(245,190,80,.3);
  border:1px solid rgba(200,145,50,.35);
}
.shop-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1em;
  margin-top:.4em;
}
.shop-card{
  position:relative;
  appearance:none;
  border:1px solid rgba(150,100,45,.22);
  border-radius:1.2em;
  padding:1em .85em 1.1em;
  background:linear-gradient(170deg,rgba(255,255,255,.78),rgba(255,240,215,.62));
  box-shadow:0 .7em 1.6em rgba(140,90,40,.10), inset 0 1px 0 rgba(255,255,255,.9);
  font-family:inherit;
  color:var(--ink);
  cursor:pointer;
  transition:transform .16s, box-shadow .16s, border-color .16s;
  text-align:center;
}
.shop-card:hover:not(:disabled){
  transform:translateY(-.3em);
  border-color:rgba(230,160,60,.55);
  box-shadow:0 1.1em 2em rgba(160,100,40,.20), inset 0 1px 0 rgba(255,255,255,.9);
}
.shop-card:disabled{cursor:default;}
.shop-card img{
  display:block;
  height:6.2em;
  width:auto;
  max-width:100%;
  margin:.4em auto .5em;
  object-fit:contain;
  filter:drop-shadow(0 .35em .5em rgba(110,70,20,.22));
}
.shop-card h3{margin:0 0 .3em;font-size:1.02em;font-weight:900;color:#523417;}
.shop-card p{
  margin:0;
  min-height:3.6em;
  font-size:.72em;
  line-height:1.6;
  color:#8a6a49;
}
.shop-tag{
  position:absolute;
  top:.7em;left:.7em;
  padding:.16em .55em;
  border-radius:999px;
  font-size:.6em;
  font-weight:800;
  letter-spacing:.04em;
  color:#7d5a2a;
  background:rgba(240,200,120,.3);
}
.shop-price{
  display:inline-block;
  margin-top:.8em;
  padding:.24em .9em;
  border-radius:999px;
  font-size:.78em;
  font-weight:900;
  color:#7a4a10;
  background:rgba(245,190,80,.28);
  border:1px solid rgba(200,145,50,.25);
}
.shop-card.poor .shop-price{color:#b04a3a;background:rgba(230,110,90,.16);border-color:rgba(200,90,70,.3);}
.shop-card.owned{opacity:.6;filter:saturate(.55);}
.shop-card.owned .shop-price{color:#5c7a55;background:rgba(120,180,110,.2);border-color:rgba(90,150,80,.28);}

/* ---------- 场外商店 / 皮肤 ---------- */
.skin-shop-panel{width:min(94%, 40em);padding-bottom:2em;}
.skin-cards{
  grid-template-columns:repeat(auto-fit, minmax(14.5em, 1fr));
  max-width:34em;
  margin:.4em auto 0;
}
.skin-card{cursor:default;}
.skin-card:hover{transform:none;}
.skin-card img{
  height:10.5em;
  filter:drop-shadow(0 .5em .7em rgba(80,40,30,.3));
}
.skin-card .shop-price{margin-bottom:.75em;}
.skin-action{margin-top:.15em;padding:.55em 1.3em;font-size:.82em;}
.skin-action:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3);}
.shop-hint{
  margin:1.1em 0 0;
  font-size:.76em;
  line-height:1.6;
  text-align:center;
  color:#9a7a58;
}

/* ---------- 开发者模式 ---------- */
.dev-panel{width:min(92%, 34em);}
.dev-panel.wide{width:min(94%, 44em);}
.dev-badge{
  position:absolute;
  top:1.25em;
  right:1.4em;
  padding:.22em .7em;
  border-radius:999px;
  font-size:.66em;
  font-weight:900;
  letter-spacing:.18em;
  color:#a34a12;
  background:rgba(240,150,60,.22);
  border:1px solid rgba(220,130,40,.35);
}
.dev-row{
  display:flex;
  align-items:center;
  gap:.6em;
  margin:.7em 0;
}
.dev-row label{
  flex:0 0 3.2em;
  text-align:right;
  font-size:.9em;
  font-weight:900;
  color:#6b4a25;
}
.dev-row .btn{
  flex:none;
  padding:.55em 1.1em;
  font-size:.84em;
}
.dev-quick{
  display:flex;
  justify-content:center;
  gap:.5em;
  margin:-.15em 0 .6em;
}
.dev-quick .btn{
  padding:.38em .9em;
  font-size:.76em;
}
.dev-input{
  flex:1;
  min-width:0;
  padding:.62em .9em;
  border-radius:.8em;
  border:1px solid rgba(170,120,50,.3);
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 2px rgba(120,80,30,.08);
  font-family:inherit;
  font-size:.95em;
  font-weight:700;
  color:#4a3018;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.dev-input:focus{
  border-color:#e0a040;
  box-shadow:0 0 0 3px rgba(240,170,70,.18);
}
.dev-select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#9a7038 50%),linear-gradient(135deg,#9a7038 50%,transparent 50%);
  background-position:calc(100% - 1.1em) 55%,calc(100% - .72em) 55%;
  background-size:.38em .38em,.38em .38em;
  background-repeat:no-repeat;
  padding-right:2em;
}
#overlay-dev-code .dev-input{
  width:100%;
  text-align:center;
  font-size:1.08em;
  letter-spacing:.2em;
}
.dev-error{
  min-height:1.3em;
  margin:.35em 0 0;
  font-size:.8em;
  font-weight:700;
  color:#c1463a;
}

/* ---------- 手机操作 ---------- */
#touch{display:none;}
body.touch #touch{display:block;}
.tpad{
  position:absolute;
  bottom:1.1em;
  z-index:8;
  display:grid;
  gap:.35em;
  opacity:.82;
}
.movepad{
  left:1.1em;
  width:10.2em;
  height:10.2em;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* 虚拟摇杆：外圈固定，内圈跟手，松手回中 */
.joy-ring{
  position:relative;
  width:9.2em;
  height:9.2em;
  border-radius:50%;
  border:1px solid rgba(255,232,180,.3);
  background:radial-gradient(circle at 50% 42%, rgba(255,214,122,.13), rgba(20,14,20,.46) 72%);
  box-shadow:inset 0 0 1.6em rgba(0,0,0,.5);
  touch-action:none;
  transition:border-color .12s, background .12s;
}
.joy-ring::before{
  content:"";
  position:absolute;
  inset:24%;
  border-radius:50%;
  border:1px dashed rgba(255,232,180,.16);
  pointer-events:none;
}
.movepad.active .joy-ring{
  border-color:rgba(255,214,122,.62);
  background:radial-gradient(circle at 50% 42%, rgba(255,214,122,.2), rgba(20,14,20,.5) 72%);
}
.joy-knob{
  position:absolute;
  left:50%;
  top:50%;
  width:4.2em;
  height:4.2em;
  margin:-2.1em 0 0 -2.1em;
  border-radius:50%;
  border:1px solid rgba(255,236,190,.55);
  background:radial-gradient(circle at 36% 30%, #fff1d0, #e0a851 58%, #8a5720);
  box-shadow:0 .2em .6em rgba(0,0,0,.45), 0 0 1.1em rgba(255,190,90,.22);
  transition:transform .1s ease-out;
  will-change:transform;
  pointer-events:none;
}
.movepad.active .joy-knob{transition:none;}
.actionpad{
  right:1.1em;
  display:grid;
  grid-template-columns:repeat(3,auto);
  gap:.45em;
  align-items:end;
  justify-items:end;
}
.actionpad .swap{grid-column:1;grid-row:1;}
.actionpad .interact{grid-column:2;grid-row:1;}
.actionpad .dash{grid-column:3;grid-row:1;}
.actionpad .attack{grid-column:2;grid-row:2;}
.actionpad .block{grid-column:3;grid-row:2;}
.actionpad .skill{grid-column:1;grid-row:2;}
.actionpad .snake{grid-column:2;grid-row:3;}
.tbtn{
  width:3.4em;height:3.4em;
  border-radius:50%;
  border:1px solid rgba(255,232,180,.32);
  background:rgba(28,19,25,.55);
  color:#ffeec6;
  font-family:inherit;
  font-size:1em;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  touch-action:none;
  transition:transform .1s, background .1s;
}
.tbtn:active,.tbtn.on{transform:scale(.93);background:rgba(255,190,90,.35);}
.tbtn.act{width:3.9em;height:3.9em;}
.tbtn.attack{background:rgba(213,122,49,.55);border-color:rgba(255,205,130,.5);}
.tbtn.block{background:rgba(73,96,140,.5);border-color:rgba(180,205,255,.4);}
.tbtn.dash{width:3em;height:3em;font-size:.85em;background:rgba(96,72,120,.5);border-color:rgba(210,180,255,.35);}
.tbtn.skill{width:3em;height:3em;font-size:.85em;background:rgba(80,104,124,.55);border-color:rgba(160,215,255,.4);}
.tbtn.snake{width:3.1em;height:3.1em;font-size:.88em;background:rgba(86,52,122,.62);border-color:rgba(196,155,255,.45);}
.tbtn.snake.katana{background:rgba(126,32,46,.7);border-color:rgba(255,116,126,.6);box-shadow:0 0 14px rgba(255,40,60,.3);}
.tbtn[hidden]{display:none;}
.tbtn.swap,.tbtn.interact{
  width:2.9em;height:2.9em;font-size:.82em;
  background:rgba(60,90,80,.5);border-color:rgba(170,235,205,.35);
}
.tbtn.swap{grid-column:1;grid-row:1;}

/* ---------- 竖屏提示 ---------- */
#rotate-hint{
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(16,10,15,.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#rotate-hint[hidden]{display:none;}
.rotate-card{
  text-align:center;
  color:#ffedc8;
}
.rotate-icon{
  font-size:3em;
  margin-bottom:.2em;
  animation:rotateWiggle 2.2s ease-in-out infinite;
}
@keyframes rotateWiggle{
  0%,100%{transform:rotate(0);}
  50%{transform:rotate(90deg);}
}
.rotate-card p{
  font-size:1.15em;
  line-height:1.7;
  font-weight:700;
  margin:0 0 1.2em;
}
.rotate-card .btn{display:block;width:11em;margin:.6em auto;}
.rotate-card .btn.ghost{color:#ffe9bd;border-color:rgba(255,222,160,.3);background:rgba(255,235,195,.07);}
.rotate-note{
  width:min(22em, 82vw);
  margin:1em auto 0;
  color:rgba(255,233,189,.66);
  font-size:.78em;
  line-height:1.6;
  font-weight:500;
}
.rotate-note[hidden]{display:none;}

/* ---------- 局域网联机 ---------- */
.lan-panel{
  width:min(92%, 46em);
  padding:1.4em 2em 1.15em;
}
.lan-panel h2{letter-spacing:.08em;margin-bottom:.15em;}
.lan-panel .panel-sub{margin-bottom:.55em;}
.lan-panel .lan-field{margin:.05em 0 .55em;}
.lan-field{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65em;
  margin:.2em 0 1em;
}
.lan-field label{
  font-size:.88em;
  font-weight:800;
  color:#7a5427;
  white-space:nowrap;
}
.lan-field .dev-input{flex:0 1 14em;text-align:center;}
.lan-or{
  display:flex;
  align-items:center;
  gap:.8em;
  margin:.65em 0 .55em;
  color:#a9875e;
  font-size:.78em;
  font-weight:700;
}
.lan-or::before,.lan-or::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(160,110,50,.2);
}
.lan-join-row{display:flex;justify-content:center;gap:.65em;}
.lan-code-input{
  width:8.5em;
  text-align:center;
  letter-spacing:.32em;
  font-size:1.16em;
  font-weight:900;
}
.lan-error{
  min-height:1.2em;
  margin:.45em 0 0;
  font-size:.82em;
  font-weight:800;
  color:#c1463a;
}
.lan-tip{
  margin:.4em 0 0;
  font-size:.75em;
  line-height:1.5;
  color:#96734d;
}
.lan-tip code{
  padding:.08em .35em;
  border-radius:.35em;
  background:rgba(140,95,40,.1);
  color:#7a5427;
  font-family:Consolas,"Courier New",monospace;
  font-size:.94em;
}
.lan-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  padding:.75em 1em;
  border-radius:1em;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(170,120,60,.16);
  text-align:left;
}
.lan-code-box,.lan-address-box{display:flex;flex-direction:column;gap:.12em;min-width:0;}
.lan-address-box{align-items:flex-end;text-align:right;}
.lan-label{
  font-size:.7em;
  font-weight:800;
  letter-spacing:.1em;
  color:#a08054;
}
.lan-code-box strong{
  font-size:1.85em;
  line-height:1.05;
  letter-spacing:.16em;
  color:#b0661a;
  font-variant-numeric:tabular-nums;
}
.lan-url{
  max-width:22em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:.2em .55em;
  border-radius:.5em;
  border:1px solid rgba(170,120,50,.24);
  background:rgba(255,255,255,.55);
  font-family:Consolas,"Courier New",monospace;
  font-size:.78em;
  font-weight:700;
  color:#7a5427;
  cursor:pointer;
}
.lan-url:hover{background:#fff8e9;}
.lan-url-row{display:flex;align-items:center;gap:.45em;max-width:100%;}
.lan-url-row .lan-url{min-width:0;}
.lan-copy-invite{
  flex:none;
  padding:.25em .6em;
  border-radius:.5em;
  border:1px solid rgba(170,120,50,.26);
  background:rgba(255,255,255,.58);
  font:inherit;
  font-size:.72em;
  font-weight:800;
  color:#7a5427;
  cursor:pointer;
}
.lan-copy-invite:hover{background:#fff8e9;}

/* 联机大厅：左边创建房间，右边自动发现局域网房间 */
.lan-connect-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:.8em;
  text-align:left;
}
.lan-host-col{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  padding:.75em .85em;
  border-radius:1em;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(170,120,60,.16);
}
.lan-create-btn{width:100%;padding:.68em 1em;font-size:.92em;}
.lan-host-col .lan-or{margin:.65em 0 .5em;font-size:.68em;}
.lan-host-col .lan-join-row{gap:.5em;}
.lan-host-col .lan-code-input{width:7.2em;font-size:1em;}
.lan-host-col .lan-join-row .btn{padding:.52em .9em;font-size:.8em;}
.lan-found-col{display:flex;flex-direction:column;min-width:0;}
.lan-found-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6em;
  margin-bottom:.35em;
  font-size:.78em;
  font-weight:800;
  color:#7a5427;
}
.lan-refresh{
  padding:.22em .6em;
  border-radius:.55em;
  border:1px solid rgba(170,120,50,.24);
  background:rgba(255,255,255,.55);
  font:inherit;
  font-size:.85em;
  font-weight:800;
  color:#7a5427;
  cursor:pointer;
}
.lan-refresh:hover{background:#fff8e9;}
.lan-room-list{
  flex:1;
  min-height:6.2em;
  max-height:7.2em;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  gap:.34em;
  padding-right:.12em;
}
.lan-room-empty{
  margin:auto 0;
  padding:.5em .3em;
  font-size:.73em;
  line-height:1.5;
  color:#96734d;
  text-align:center;
}
.lan-room{
  display:flex;
  align-items:center;
  gap:.55em;
  width:100%;
  padding:.42em .55em;
  border-radius:.7em;
  border:1px solid rgba(170,120,50,.2);
  background:rgba(255,255,255,.58);
  font:inherit;
  color:#5a3d20;
  text-align:left;
  cursor:pointer;
}
.lan-room:hover{background:#fff8e9;border-color:rgba(170,120,50,.36);}
.lan-room-code{
  flex:none;
  font-size:1.02em;
  font-weight:900;
  letter-spacing:.12em;
  color:#b0661a;
  font-variant-numeric:tabular-nums;
}
.lan-room-main{display:flex;flex-direction:column;gap:.04em;min-width:0;flex:1;}
.lan-room-main b{
  font-size:.76em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lan-room-main small{font-size:.65em;color:#96734d;}
.lan-room-go{
  flex:none;
  padding:.2em .5em;
  border-radius:.45em;
  background:rgba(176,102,26,.12);
  font-size:.66em;
  font-weight:900;
  color:#b0661a;
}
.lan-slots{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5em;
  margin:.6em 0 .55em;
}
.lan-slot{
  min-height:3.8em;
  padding:.45em .7em;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.2em;
  text-align:left;
  border-radius:1em;
  border:1px dashed rgba(170,120,60,.24);
  background:rgba(255,255,255,.22);
  color:#b09572;
  font-size:.82em;
}
.lan-slot.filled{
  border-style:solid;
  background:rgba(255,255,255,.62);
  color:#5b3b1b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.lan-slot.ready{
  border-color:rgba(90,150,80,.55);
  background:linear-gradient(180deg,rgba(240,255,236,.9),rgba(220,248,214,.72));
}
.lan-slot .slot-top{display:flex;align-items:center;gap:.45em;min-width:0;}
.lan-slot .dot{
  flex:none;
  width:.72em;height:.72em;
  border-radius:50%;
  background:rgba(170,140,105,.35);
  box-shadow:0 0 0 2px rgba(255,255,255,.55);
}
.lan-slot.filled .dot{background:var(--slot-color,#ffd67a);}
.lan-slot .slot-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:1.06em;
  font-weight:900;
}
.lan-slot .host-badge{
  flex:none;
  padding:.08em .42em;
  border-radius:.5em;
  font-size:.66em;
  font-weight:900;
  color:#7a3b0e;
  background:linear-gradient(180deg,#ffe49a,#ffc25e);
}
.lan-slot .slot-state{
  font-size:.76em;
  font-weight:700;
  color:#a38358;
}
.lan-slot.ready .slot-state{color:#4b8a44;}
.lan-slot.empty .slot-state{font-weight:600;opacity:.8;}
.lan-status{
  min-height:1.2em;
  font-size:.86em;
  font-weight:800;
  color:#8a6338;
}
.lan-btns{margin-top:.45em !important;}
.lan-btns .btn{padding:.56em 1.3em;font-size:.92em;}
.netwait-panel{max-width:28em;}
.netwait .net-spinner{
  margin:0 auto .35em;
  font-size:2.2em;
  color:#e2a13d;
  animation:netSpin 2.4s linear infinite;
}
@keyframes netSpin{
  from{transform:rotate(0) scale(1);}
  50%{transform:rotate(180deg) scale(1.12);}
  to{transform:rotate(360deg) scale(1);}
}

/* 540p 的游戏舞台：联机大厅要一屏放下，不出现滚动条 */
@media (max-height: 620px){
  .lan-panel{padding:1em 1.6em .85em;}
  .lan-panel h2{font-size:1.6em;}
  .lan-panel .panel-sub{font-size:.8em;margin-bottom:.35em;line-height:1.45;}
  .lan-field{margin:.05em 0 .4em;}
  .lan-connect-grid{gap:.55em;}
  .lan-host-col{padding:.55em .65em;}
  .lan-create-btn{padding:.55em .8em;font-size:.86em;}
  .lan-host-col .lan-or{margin:.5em 0 .4em;}
  .lan-room-list{min-height:5.4em;max-height:6em;}
  .lan-error{min-height:.9em;margin:.25em 0 0;font-size:.76em;}
  .lan-tip{font-size:.68em;line-height:1.4;margin-top:.25em;}
  #lan-back-row{margin-top:.55em !important;}
  #lan-back-row .btn{padding:.45em 1em;font-size:.8em;}
}

/* ---------- 小屏细节 ---------- */
@media (max-width: 720px){
  .title-hero{flex-basis:16em;min-height:18em;}
  .portrait-frame{width:14em;height:17em;}
  .portrait-frame img{max-height:12em;}
  .title-left h1{font-size:2.6em;}
  .tagline{font-size:.9em;}
  .keys{font-size:.7em;}
  .title-foot{display:none;}
  .lan-slots{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lan-head{flex-direction:column;align-items:flex-start;gap:.55em;}
  .lan-address-box{align-items:flex-start;text-align:left;width:100%;}
  .lan-url{max-width:100%;}
  .lan-connect-grid{grid-template-columns:1fr;gap:.55em;}
  .lan-room-list{min-height:4.4em;max-height:5.4em;}
}
/* 矮屏（笔记本 720p / 手机横屏）：收紧主菜单，保证角色切换与金库可见 */
@media (max-height: 980px){
  #overlay-title{padding:.6em 1em;}
  .title-wrap{gap:1.6em;}
  .title-left{gap:.4em;}
  .title-left h1{font-size:2.8em;}
  .tagline{font-size:.9em;line-height:1.6;margin:.15em 0 0;}
  .title-left .btns{gap:.55em;margin-top:.1em;}
  .title-left .btn{padding:.62em 1.15em;font-size:.92em;}
  .keys{display:none;}
  .title-meta{margin-top:.35em;}
  .record{margin-top:.2em;}
  .title-foot{display:none;}
  .title-hero{min-height:20em;}
}
@media (max-height: 520px){
  .title-foot{display:none;}
  .title-hero{min-height:16em;}
  .portrait-frame{width:14em;height:16em;}
  .portrait-frame img{max-height:11.4em;}
  .title-left h1{font-size:2.3em;}
  .tagline{line-height:1.5;}
  .title-meta{margin-top:.15em;}
  .record{margin-top:.1em;font-size:.72em;}
  /* 场外商店：压缩卡片，让离开按钮也能在一屏内看到 */
  .skin-shop-panel{padding:1.1em 1.6em 1.1em;}
  .skin-shop-panel h2{font-size:1.45em;}
  .skin-shop-panel .panel-sub{margin-bottom:.45em;font-size:.78em;}
  .skin-cards{margin-top:.2em;}
  .skin-card{padding:.7em .8em;}
  .skin-card img{height:6em;}
  .skin-card h3{font-size:1em;margin:.25em 0 .1em;}
  .skin-card p{font-size:.74em;line-height:1.4;margin:.15em 0 .3em;}
  .skin-card .shop-price{margin-bottom:.25em;font-size:.8em;}
  .skin-action{margin-top:0;padding:.42em 1em;font-size:.75em;}
  .skin-shop-panel .shop-hint{font-size:.7em;margin:.55em 0 .2em;}
  .skin-shop-panel .btns{margin-top:.55em;}
  /* 联机大厅：矮屏压缩，保证出发 / 离开按钮可见 */
  .lan-panel{padding:1.05em 1.5em 1em;}
  .lan-panel h2{font-size:1.45em;}
  .lan-panel .panel-sub{font-size:.76em;margin-bottom:.5em;}
  .lan-field{margin:.1em 0 .55em;}
  .lan-field .btn,.lan-join-row .btn{padding:.5em 1em;font-size:.82em;}
  .lan-field .dev-input,.lan-join-row .dev-input{padding:.48em .7em;font-size:.86em;}
  .lan-or{margin:.55em 0 .45em;font-size:.7em;}
  .lan-connect-grid{gap:.5em;}
  .lan-host-col{padding:.5em .6em;}
  .lan-create-btn{padding:.54em .8em;font-size:.82em;}
  .lan-host-col .lan-or{margin:.45em 0 .4em;}
  .lan-room-list{min-height:4.2em;max-height:4.8em;}
  .lan-found-head{font-size:.72em;margin-bottom:.25em;}
  .lan-room{padding:.32em .45em;}
  .lan-room-code{font-size:.9em;}
  .lan-room-main b{font-size:.72em;}
  .lan-room-main small{font-size:.61em;}
  .lan-room-go{font-size:.62em;}
  .lan-head{padding:.5em .8em;}
  .lan-code-box strong{font-size:1.45em;}
  .lan-slots{margin:.5em 0 .45em;gap:.4em;}
  .lan-slot{min-height:3.3em;padding:.35em .6em;font-size:.72em;}
  .lan-status{font-size:.76em;min-height:1.2em;}
  .lan-btns{margin-top:.4em !important;}
  .lan-btns .btn{padding:.5em 1.05em;font-size:.8em;}
  .lan-tip{font-size:.66em;line-height:1.5;margin-top:.35em;}
  /* 失败结算：矮屏收一下立绘，按钮才不会掉出屏幕 */
  .over-panel{padding:1em 1.6em 1.1em;}
  .over-hero img{height:5.4em;}
  #overlay-over h2{font-size:1.4em;}
  #overlay-over .panel-sub{font-size:.78em;margin-bottom:.45em;}
  .over-panel .result-stats .stat-chip{padding:.35em .7em;}
  .over-panel .btns{margin-top:.6em;}
  /* 胜利结算：矮屏同样收一下，别让按钮掉出屏幕 */
  .win-panel{padding:1em 1.6em 1.1em;}
  .win-hero img{height:6em;}
  #overlay-win h2{font-size:1.5em;}
  .win-panel .panel-sub{font-size:.78em;margin-bottom:.45em;}
  .win-panel .btns{margin-top:.6em;}
}