/* ================= 大厅（开始界面） =================
   整幅背景图（assets/art/lobby.webp）铺满，人物留在上半屏；底部一条「令台」
   放模式卡、选项和开始按钮。按钮皮肤仍归 controls.css，这里只管排布和装饰。
   动画只动 transform / opacity，触屏上去掉光束，减弱动态时全部停下。 */
#startScreen{background:#0b0806;overflow-x:hidden;overflow-y:auto;--photo-x:46%}

/* ---------- 背景 ---------- */
.lobby-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lobby-photo{position:absolute;inset:-3%;
  background:url('../assets/art/lobby.webp?v=746b321f') var(--photo-x) 42%/cover no-repeat;
  animation:lobbyDrift 46s ease-in-out infinite alternate;will-change:transform}
@keyframes lobbyDrift{from{transform:scale(1)}to{transform:scale(1.06) translate(-1.2%,-.8%)}}
/* 一道斜着扫过的暖光，像店里的灯照在绸缎上 */
.lobby-shaft{position:absolute;top:-20%;bottom:-20%;left:0;width:46%;
  background:linear-gradient(100deg,transparent 0 30%,#ffd88c14 44%,#fff0c826 50%,#ffd88c14 56%,transparent 70%);
  transform:translateX(-110%) skewX(-8deg);animation:lobbyShaft 13s ease-in-out infinite;will-change:transform}
@keyframes lobbyShaft{0%,12%{transform:translateX(-110%) skewX(-8deg)}62%,100%{transform:translateX(330%) skewX(-8deg)}}
/* 金粉从下往上飘 */
.lobby-motes{position:absolute;inset:0}
.lobby-motes i{position:absolute;left:var(--x);bottom:var(--y);width:var(--size);height:var(--size);border-radius:50%;
  background:radial-gradient(circle,#fffbe8 0,#ffd77a 45%,#ffd77a00 72%);
  opacity:0;animation:lobbyMote var(--life) linear var(--delay) infinite;will-change:transform,opacity}
@keyframes lobbyMote{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  14%{opacity:.95}
  70%{opacity:.6}
  100%{transform:translate(var(--drift),-42vh) scale(1.1);opacity:0}}
/* 压暗：底部给令台、左上给标题，四周一圈暗角，人物脸部保持原样 */
.lobby-veil{position:absolute;inset:0;background:
  radial-gradient(ellipse 52% 46% at 0 0,#0b0806c4,transparent 72%),
  linear-gradient(180deg,transparent 42%,#0b080680 64%,#0b0806e6 86%,#0b0806 100%),
  radial-gradient(ellipse at 50% 38%,transparent 56%,#0b080699 100%)}

/* ---------- 版面 ---------- */
.lobby{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;
  justify-content:space-between;align-items:center;gap:18px;
  padding:calc(22px + var(--safe-top,0px)) calc(30px + var(--safe-right,0px))
          calc(24px + var(--home-gap,0px)) calc(30px + var(--safe-left,0px))}
.lobby-brand{align-self:flex-start;display:flex;flex-direction:column;align-items:center}
#startScreen .game-title{font-size:clamp(52px,5.6vw,84px);letter-spacing:.16em;text-indent:.16em;line-height:1.08;
  color:#f3d27a;font-weight:900;
  text-shadow:0 2px 0 #fff1c0,0 5px 0 #6b4512,0 10px 22px #000,0 0 38px #ffc65a73}
#startScreen .subtitle{display:flex;align-items:center;gap:12px;margin:6px 0 0;
  color:#f0dfb6;font-size:15px;letter-spacing:.32em;text-indent:.32em;text-shadow:0 2px 4px #000,0 0 10px #000}
#startScreen .subtitle i{width:38px;height:1px;background:linear-gradient(90deg,transparent,#e8c86a)}
#startScreen .subtitle i:last-child{background:linear-gradient(90deg,#e8c86a,transparent)}

/* 令台：深漆底、金线、四角包金 */
.lobby-dock{position:relative;width:min(1180px,100%);display:grid;
  grid-template-columns:auto minmax(0,1fr) 214px;grid-template-areas:"modes opts go";
  gap:22px;padding:18px 20px;
  background:linear-gradient(180deg,#1d150dc2,#0e0a07eb);
  border:1px solid #e8c86a4d;border-radius:3px;
  box-shadow:0 26px 70px #000d,inset 0 1px 0 #ffe9b02e,inset 0 0 46px #0009;
  backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15);
  animation:lobbyRise .7s cubic-bezier(.2,.9,.3,1) .1s backwards}
.lobby-dock::before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:2px;
  background:linear-gradient(90deg,transparent,#ffe08f 30%,#fff4cf 50%,#ffe08f 70%,transparent);
  box-shadow:0 0 14px #ffd36d99}
.lobby-dock::after{content:"";position:absolute;inset:6px;pointer-events:none;border:1px solid #e8c86a1f;
  --c:#e8c86a;background:
    linear-gradient(var(--c),var(--c)) left top/20px 2px,linear-gradient(var(--c),var(--c)) left top/2px 20px,
    linear-gradient(var(--c),var(--c)) right top/20px 2px,linear-gradient(var(--c),var(--c)) right top/2px 20px,
    linear-gradient(var(--c),var(--c)) left bottom/20px 2px,linear-gradient(var(--c),var(--c)) left bottom/2px 20px,
    linear-gradient(var(--c),var(--c)) right bottom/20px 2px,linear-gradient(var(--c),var(--c)) right bottom/2px 20px;
  background-repeat:no-repeat}
@keyframes lobbyRise{from{opacity:0;transform:translateY(26px)}}

/* ---------- 模式卡 ---------- */
.mode-cards{grid-area:modes;position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,146px);gap:12px}
.mode-card{position:relative;isolation:isolate;overflow:hidden;cursor:pointer;outline:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:0;padding:16px 8px 14px;border-radius:4px;border:1px solid #e8c86a40;
  box-shadow:inset 0 0 0 1px #0007,0 8px 22px #0009;
  filter:saturate(.45) brightness(.68);
  transition:transform .22s,filter .22s,border-color .22s,box-shadow .22s}
.mode-junzheng{background:
  radial-gradient(ellipse 90% 60% at 50% 26%,#b4522c99,transparent 72%),
  repeating-linear-gradient(135deg,#ffffff05 0 1px,transparent 1px 6px),
  linear-gradient(180deg,#43200f,#170a06)}
.mode-doudizhu{background:
  radial-gradient(ellipse 90% 60% at 50% 26%,#2f9c86a3,transparent 72%),
  repeating-linear-gradient(135deg,#ffffff05 0 1px,transparent 1px 6px),
  linear-gradient(180deg,#123d35,#06150f)}
.mode-chujun{background:
  radial-gradient(ellipse 90% 60% at 50% 26%,#3b5fd08f,transparent 72%),
  radial-gradient(ellipse 70% 50% at 50% 100%,#a3262666,transparent 70%),
  repeating-linear-gradient(135deg,#ffffff05 0 1px,transparent 1px 6px),
  linear-gradient(180deg,#1b1638,#0a0712)}
/* 内框 */
.mode-card::after{content:"";position:absolute;inset:5px;z-index:-1;border:1px solid #e8c86a2e;border-radius:2px;transition:border-color .22s}
.mode-card.on{filter:none;border-color:#f3d58a;transform:translateY(-4px);
  box-shadow:0 0 0 1px #f3d58a,0 0 30px #ffcf6a59,0 14px 30px #000b}
.mode-card.on::after{border-color:#f3d58a8c}
/* 选中后一道流光 */
.mode-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(115deg,transparent 32%,#fff2c83d 50%,transparent 68%);transform:translateX(-120%)}
.mode-card.on::before{opacity:1;animation:modeSheen 3.8s ease-in-out .4s infinite}
@keyframes modeSheen{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
@media(hover:hover){.mode-card:not(.on):hover{filter:saturate(.8) brightness(.9);transform:translateY(-2px)}}
.mode-card:focus-visible{outline:2px solid #fff1c8;outline-offset:3px}

.mode-emblems{display:flex;align-items:center;justify-content:center;height:72px}
.mode-emblems i{position:relative;width:46px;height:46px;margin:0 -8px;flex:none;
  background:url('../assets/ui/identity-emblems-v2.webp?v=b91fcd3f') no-repeat var(--ex,0%) 50%/500% 140%;
  filter:drop-shadow(0 3px 4px #000)}
.mode-emblems i[data-e="zhu"]{--ex:0%}.mode-emblems i[data-e="fan"]{--ex:25%}
.mode-emblems i[data-e="nei"]{--ex:50%}.mode-emblems i[data-e="zhong"]{--ex:75%}
.mode-emblems i[data-e="nong"]{background-image:url('../assets/ui/identity-nong.webp?v=0e69db4a');background-size:contain;background-position:center}
.mode-emblems i[data-e="chu"]{background-image:url('../assets/ui/identity-chu.webp?v=820f72b8');background-size:contain;background-position:center}
.mode-emblems i[data-e="ye"]{background-image:url('../assets/ui/identity-ye.webp?v=6a174746');background-size:contain;background-position:center}
.mode-emblems i[data-e="ci"]{background-image:url('../assets/ui/identity-ci.webp?v=c753e274');background-size:contain;background-position:center}
/* 斗地主：地主居中放大，两个农民在两侧 */
.mode-doudizhu .mode-emblems i[data-e="zhu"]{width:66px;height:66px;z-index:1;margin:0 -9px}
.mode-card.on .mode-emblems i{animation:emblemBob 2.8s ease-in-out infinite alternate}
.mode-card.on .mode-emblems i:nth-child(2){animation-delay:-.7s}
.mode-card.on .mode-emblems i:nth-child(3){animation-delay:-1.4s}
.mode-card.on .mode-emblems i:nth-child(4){animation-delay:-2.1s}
@keyframes emblemBob{from{transform:translateY(2px)}to{transform:translateY(-4px)}}
.mode-name{font-family:"STKaiti","KaiTi","Kaiti SC",serif;font-size:34px;line-height:1.15;font-weight:700;
  letter-spacing:.08em;text-indent:.08em;white-space:nowrap;color:#ffe6a6;
  text-shadow:0 2px 0 #4a2f0c,0 4px 10px #000,0 0 18px #ffc95a59}
.mode-tag{font-size:13px;letter-spacing:.06em;color:#e2cfa5;text-shadow:0 1px 3px #000;white-space:nowrap}

/* ---------- 选项 ---------- */
.lobby-opts{grid-area:opts;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
#startScreen .opt-row{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px;min-height:42px}
#startScreen .opt-row>label{width:auto;color:#dcc28a;font-size:17px;letter-spacing:.24em;text-shadow:0 1px 3px #000}
#startScreen .seg{min-width:0;gap:8px}
#startScreen .seg button{min-width:0}
.mode-rule{margin:0;font-size:14px;line-height:1.45;color:#e6d6b0;text-shadow:0 1px 3px #000}
.mode-rule b{color:#ffd77a;font-weight:600}
/* 储君模式的身份有六项，按钮窄：字号收一点、不折行（放在小屏规则之前，让它们照常覆盖字号） */
#startScreen .seg-id:where(#optChuIdentity) button{font-size:16px;padding-left:2px;padding-right:2px;letter-spacing:0;white-space:nowrap}

/* ---------- 开始 ---------- */
.lobby-go{grid-area:go;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:12px}
/* 开始按钮后面一团呼吸的金光（按钮本身切了角，box-shadow 会被裁掉，所以放在后面一层） */
.lobby-go::before{content:"";position:absolute;left:-14px;right:-14px;top:50%;height:120px;margin-top:-86px;z-index:-1;
  background:radial-gradient(ellipse at center,#ffb84e55,transparent 70%);animation:startGlow 2.6s ease-in-out infinite alternate}
@keyframes startGlow{from{opacity:.35;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
#startScreen #btnStart{width:100%;margin:0;min-height:86px;padding:9px 8px;font-size:28px;letter-spacing:.2em;text-indent:.2em;white-space:nowrap}
#startScreen #btnRules{width:100%;min-height:42px;font-size:18px}

/* ---------- 中等宽度：模式卡横排在上，选项和开始按钮在下 ----------
   三张模式卡并排在一行太占地方：1200 以下就把模式卡挪到上面一整行 */
@media(max-width:1199px){
  .lobby-dock{grid-template-columns:minmax(0,1fr) 186px;grid-template-areas:"modes modes" "opts go";gap:16px 18px}
  .mode-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mode-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:0;
    justify-items:start;align-items:center;padding:10px 18px}
  .mode-card .mode-emblems{grid-row:1/3;height:58px}
  .mode-card .mode-name{align-self:end;font-size:30px}
  .mode-card .mode-tag{align-self:start}
  .mode-card.on{transform:translateY(-2px)}
  #startScreen #btnStart{font-size:24px;letter-spacing:.12em;text-indent:.12em}
}
/* 三张卡一行时每张不到 260 宽：徽章和名字横排放不下，改回上下排 */
@media(max-width:879px){
  .mode-card{display:flex;padding:10px 6px}
  .mode-card :is(.mode-name,.mode-tag){align-self:center}
  .mode-card .mode-emblems{height:50px}
  .mode-emblems i{width:38px;height:38px;margin:0 -6px}
  .mode-doudizhu .mode-emblems i[data-e="zhu"]{width:50px;height:50px}
  .mode-card .mode-name{font-size:26px}
}
/* ---------- 手机竖屏：一列排下来，可以滚动 ---------- */
@media(max-width:599px){
  .lobby{padding:calc(18px + var(--safe-top,0px)) calc(12px + var(--safe-right,0px))
                 calc(16px + var(--home-gap,0px)) calc(12px + var(--safe-left,0px));gap:14px}
  .lobby-brand{align-self:center}
  #startScreen .game-title{font-size:52px}
  #startScreen .subtitle{font-size:12px;letter-spacing:.18em;text-indent:.18em}
  .lobby-dock{grid-template-columns:minmax(0,1fr);grid-template-areas:"modes" "opts" "go";padding:14px 12px;gap:14px}
  .mode-card{display:flex;padding:10px 4px}
  .mode-card :is(.mode-name,.mode-tag){align-self:center}
  .mode-card .mode-emblems{height:46px}
  .mode-emblems i{width:32px;height:32px;margin:0 -5px}
  .mode-doudizhu .mode-emblems i[data-e="zhu"]{width:44px;height:44px}
  .mode-card .mode-name{font-size:26px}
  .mode-tag{font-size:11px;letter-spacing:0}
  /* 三张卡分一行，每张一百来宽，副标题折成两行 */
  .mode-cards{gap:8px}
  .mode-tag{white-space:normal;text-align:center;line-height:1.3}
  #startScreen .opt-row{grid-template-columns:40px minmax(0,1fr);gap:8px}
  #startScreen .opt-row>label{font-size:15px;letter-spacing:.06em}
  .mode-rule{font-size:13px}
  #startScreen #btnStart{min-height:58px;font-size:24px}
  .lobby-go::before{height:90px;margin-top:-72px}
  #startScreen{--photo-x:30%}
}
/* ---------- 矮屏横放（手机横屏）：三栏压紧，模式卡上下叠 ---------- */
@media(max-height:600px) and (min-width:600px){
  .lobby{padding:calc(8px + var(--safe-top,0px)) calc(14px + var(--safe-right,0px))
                 calc(8px + var(--home-gap,0px)) calc(14px + var(--safe-left,0px));gap:6px}
  .lobby-brand{flex-direction:row;align-items:baseline;gap:12px}
  #startScreen .game-title{font-size:34px;text-shadow:0 2px 0 #fff1c0,0 3px 0 #6b4512,0 6px 14px #000}
  #startScreen .subtitle{font-size:11px;letter-spacing:.14em;text-indent:0;margin:0}
  #startScreen .subtitle i{width:18px}
  .lobby-dock{grid-template-columns:128px minmax(0,1fr) 136px;grid-template-areas:"modes opts go";gap:12px;padding:10px 12px}
  .lobby-dock::after{inset:4px}
  .mode-cards{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);gap:6px}
  .mode-card{display:flex;padding:4px 4px;gap:1px}
  /* 三张卡上下叠，矮屏放不下副标题，只留徽章和名字 */
  .mode-card .mode-tag{display:none}
  .mode-card :is(.mode-name,.mode-tag){align-self:center}
  .mode-card.on{transform:none}
  .mode-card .mode-emblems{height:34px}
  .mode-emblems i{width:26px;height:26px;margin:0 -4px}
  .mode-doudizhu .mode-emblems i[data-e="zhu"]{width:36px;height:36px}
  .mode-card .mode-name{font-size:22px}
  .mode-tag{font-size:10px;letter-spacing:0}
  .lobby-opts{gap:5px}
  #startScreen .opt-row{grid-template-columns:38px minmax(0,1fr);gap:6px;min-height:34px}
  #startScreen .opt-row>label{font-size:14px;letter-spacing:.04em}
  #startScreen .seg{gap:5px}
  #startScreen .seg button,#startScreen .seg-id button{min-height:34px;padding:4px 2px;font-size:15px;letter-spacing:0;text-indent:0}
  .mode-rule{font-size:11.5px;line-height:1.35}
  #startScreen #btnStart{min-height:62px;font-size:20px;letter-spacing:.06em;text-indent:.06em;padding:6px 8px}
  #startScreen #btnRules{min-height:34px;font-size:15px;padding:4px 8px}
  .lobby-go{gap:8px}
  .lobby-go::before{height:84px;margin-top:-64px}
}
/* 竖屏的屏幕上，背景往左挪，让左边那位人物进画面 */
@media(max-aspect-ratio:1/1){#startScreen{--photo-x:30%}}

/* 触屏：去掉扫光（大面积半透明层每帧合成），金粉少一半 */
@media(hover:none){
  .lobby-shaft{display:none}
  .lobby-motes i:nth-child(2n){display:none}
  .lobby-dock{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(180deg,#1d150de0,#0e0a07f5)}
}
@media(prefers-reduced-motion:reduce){
  .lobby-photo,.lobby-shaft,.lobby-dock,.mode-card.on::before,.mode-card.on .mode-emblems i,.lobby-go::before{animation:none!important}
  .lobby-shaft,.lobby-motes{display:none}
}

/* ================= 选将界面 =================
   桌面和平板横屏：整页不滚动。标题、卡包筛选在上，武将列表占满中间自己滚动，
   底栏一行放技能说明和「确定」，按钮始终在屏幕里。小屏仍是整页滚动、按钮吸底（responsive.css）。 */
.pick-foot{display:contents}
@media(min-width:901px) and (min-height:601px){
  #pickScreen{justify-content:flex-start;gap:12px;overflow:hidden;
    padding:calc(16px + var(--safe-top,0px)) 24px calc(14px + var(--home-gap,0px))}
  #pickScreen .pick-head h2{font-size:24px}
  #pickScreen .pick-hint{margin-top:4px}
  .pick-head,.pick-filters{flex:none}
  #pickList{flex:1 1 auto;min-height:0;max-height:none!important;width:100%;max-width:1180px;
    overflow-y:auto;align-content:flex-start;padding:16px 6px 30px}
  .pick-foot{position:relative;z-index:1;display:flex;flex:none;align-items:center;gap:18px;width:min(1180px,100%);
    padding:12px 16px;border:1px solid #e8c86a33;border-radius:4px;
    background:linear-gradient(180deg,#141b22e0,#0c1117f2);box-shadow:0 -10px 30px #0008,inset 0 1px 0 #ffe9b01f}
  .pick-foot #pickDetail.pick-skill-panel{flex:1;width:auto;min-width:0;max-width:none;margin:0;
    min-height:0;max-height:92px;padding:8px 14px;border:0;background:transparent;line-height:1.7!important}
  .pick-foot #btnPickConfirm{flex:none;min-width:200px;margin:0}
}