*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Experience package 1: shared presentation tokens; existing game-state colors stay intact. */
  --ua-font-ui:'Microsoft JhengHei','PingFang TC','Segoe UI',sans-serif;
  --ua-ink:#171716;
  --ua-paper:#f5f0e8;
  --ua-muted:#655f55;
  --ua-line:#c6c0b4;
  --ua-accent:#d9381b;
  --ua-space-xs:4px;
  --ua-space-sm:8px;
  --ua-space-md:16px;
  --ua-space-lg:24px;
  --ua-space-xl:32px;
  --ua-border:3px solid var(--ua-ink);
  --ua-shadow:8px 8px 0 var(--ua-ink);
  /* B-ORIG カラーシステム */
  --red:#ff3300;--red-d:#cc2200;--red-l:#ff5533;
  --gold:#000000;--gold-l:#ff3300;
  --bg:#f5f0e8;--bg2:#ede8dc;--bg3:#e0dbd0;
  --s1:#e8e3da;--s2:#ddd8ce;--s3:#d0cbc0;
  --border:rgba(0,0,0,0.10);--border2:rgba(0,0,0,0.28);
  --text:#000000;--muted:#888888;--muted2:#555555;
  --green:#1a6b2a;--green-l:#2e8b3a;
  --blue:#1a4a8b;--blue-l:#2a6ab5;
  --b-cream:#f5f0e8;--b-black:#000;--b-red:#ff3300;
  --b-dark:#1a1a1a;--b-mid:#ede8dc;
  --b-border:3px solid #000;
  --b-font:'Arial Black','Impact',sans-serif;
}
body{background:var(--b-cream);color:var(--b-black);font-family:'Arial Black','Arial',sans-serif;height:100vh;overflow:hidden;}

/* Scoped primitives: migrate one surface at a time, without changing every legacy button. */
.ua-button{
  min-height:44px;padding:10px var(--ua-space-md);border:1px solid var(--ua-ink);
  border-radius:0;background:var(--ua-paper);color:var(--ua-ink);
  font:700 15px/1.4 var(--ua-font-ui);cursor:pointer;
  transition:background .12s,color .12s;overflow-wrap:anywhere;
}
.ua-button:not(:disabled):hover{background:var(--ua-ink);color:var(--ua-paper);}
.ua-button:focus-visible{outline:3px solid var(--ua-accent);outline-offset:3px;}
.ua-button-primary{background:var(--ua-accent);border-color:var(--ua-accent);color:#fff;}
.ua-button-quiet{border-color:var(--ua-line);}
.ua-button:disabled{background:#e1dbcf;border-color:var(--ua-line);color:var(--ua-muted);cursor:default;}
.ua-result-overlay{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:var(--ua-space-lg);background:rgba(24,23,20,.68);overflow:auto;
  font-family:var(--ua-font-ui);
}
.ua-result-panel{
  width:min(630px,100%);min-width:0;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  overflow:auto;background:var(--ua-paper);color:var(--ua-ink);
  border:var(--ua-border);box-shadow:var(--ua-shadow);animation:ua-result-enter .18s ease-out;
}
.ua-result-header{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:14px 24px;
  background:var(--ua-ink);color:var(--ua-paper);font-size:13px;letter-spacing:2px;font-weight:700;
}
.ua-result-body{padding:var(--ua-space-xl);border-left:8px solid var(--ua-accent);}
.ua-result-wordmark{font-size:clamp(28px,7vw,70px);font-weight:900;line-height:1.1;letter-spacing:-1px;color:var(--ua-accent);overflow-wrap:anywhere;}
.ua-result-panel[data-result="no-contest"] .ua-result-wordmark{color:var(--ua-muted);}
.ua-result-body h2{font-size:30px;line-height:1.4;margin:8px 0 22px;}
.ua-result-details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;border-top:1px solid var(--ua-line);padding-top:18px;font-size:15px;line-height:1.7;}
.ua-result-details:empty{display:none;}
.ua-result-details dt{font-weight:700;}
.ua-result-details dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap;}
.ua-result-actions{display:flex;flex-wrap:wrap;gap:10px;padding:0 32px 18px 40px;}
.ua-result-actions .ua-button{flex:1 1 130px;}
.ua-result-status{min-height:40px;padding:0 32px 20px 40px;font-size:14px;line-height:1.6;color:var(--ua-muted);overflow-wrap:anywhere;}
.ua-result-status-pending{color:var(--ua-accent);font-weight:700;}
.ua-hand-feedback{
  position:fixed;left:50%;transform:translateX(-50%);z-index:10010;
  width:max-content;max-width:calc(100vw - 24px);pointer-events:none;
  padding:9px 14px;background:var(--ua-paper);color:var(--ua-ink);border-left:3px solid var(--ua-accent);
  box-shadow:0 2px 10px #0002;font:14px/1.5 var(--ua-font-ui);overflow-wrap:anywhere;
  opacity:1;transition:opacity .18s;
}
.ua-hand-feedback[hidden]{display:none;}
.ua-hand-feedback.is-fading{opacity:0;}
.ua-play-choice{white-space:pre-line;line-height:1.6;overflow-wrap:anywhere;}
.ua-play-choice:disabled{opacity:.6;cursor:not-allowed;}
#raid-or-direct-modal .modal-btns{flex-direction:column;gap:12px;}
#raid-or-direct-modal #raidOrDirect-raid{width:100%;min-height:56px;padding:12px 18px;font-size:16px;}
#raid-or-direct-modal #raidOrDirect-direct{
  width:100%;min-height:44px;margin:0;padding:8px 14px;
  background:var(--ua-paper);color:var(--ua-ink);border:var(--ua-border);box-shadow:none;
}
#raid-or-direct-modal #raidOrDirect-cancel{
  width:100%;min-height:44px;margin:0;padding:8px 20px;
  background:transparent;color:var(--ua-muted);border:0;border-top:1px solid var(--ua-line);box-shadow:none;
}
#ua-cancel-hint{position:fixed;right:12px;bottom:88px;z-index:202;padding:5px 9px;background:var(--ua-paper);color:var(--ua-muted);border:1px solid var(--ua-line);font:12px/1.4 var(--ua-font-ui);pointer-events:none;}
#ua-cancel-hint[hidden]{display:none;}
@keyframes ua-result-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){
  .ua-result-overlay{padding:16px;}
  .ua-result-panel{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);box-shadow:5px 5px 0 var(--ua-ink);}
  .ua-result-header{padding:12px 16px;font-size:12px;}
  .ua-result-body{padding:24px 18px;border-left-width:5px;}
  .ua-result-body h2{font-size:25px;margin-bottom:16px;}
  .ua-result-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 18px 16px 23px;gap:8px;}
  .ua-result-actions .ua-button-primary{grid-column:1 / -1;}
  .ua-result-actions .ua-button{padding:10px 8px;font-size:14px;}
  .ua-result-status{padding:0 18px 18px 23px;}
  .ua-hand-feedback{padding:8px;gap:8px;font-size:13px;}
}
@media(prefers-reduced-motion:reduce){
  .ua-result-panel{animation:none;}
  .ua-button{transition:none;}
  .ua-hand-feedback{transition:none;}
}

/* ── SCREENS ── */
.screen{display:none;width:100%;height:100vh;}
.screen.active{display:flex;}

/* ══════════════════════════════════
   LOGIN SCREEN — B-ORIG
══════════════════════════════════ */
#screen-login{
  align-items:stretch;justify-content:center;
  background:var(--b-cream);
  position:relative;overflow:hidden;
}
#screen-login::before{
  content:'';position:absolute;top:-120px;right:-120px;
  width:600px;height:600px;pointer-events:none;
  background:repeating-linear-gradient(-45deg,transparent 0,transparent 20px,rgba(0,0,0,0.035) 20px,rgba(0,0,0,0.035) 21px);
}
.login-box{
  display:flex;width:100%;max-width:900px;
  background:var(--b-cream);position:relative;z-index:1;
  margin:auto;
}
/* 左側品牌區 */
.login-box::before{display:none;}
.login-logo{
  font-size:13px;font-weight:900;letter-spacing:5px;color:var(--b-muted,#888);
  text-align:left;margin-bottom:4px;text-transform:uppercase;
  font-family:var(--b-font);
}
.login-sub{
  font-size:40px;font-weight:900;letter-spacing:-1px;line-height:1;
  color:var(--b-black);margin-bottom:6px;font-family:'Impact',sans-serif;
  display:block;
}
.login-sub em{color:var(--b-red);font-style:normal;}
.login-brand-section{
  width:340px;padding:48px 40px;border-right:var(--b-border);
  display:flex;flex-direction:column;justify-content:center;flex-shrink:0;
}
.login-brand-ver{font-size:11px;letter-spacing:4px;color:#aaa;text-transform:uppercase;margin-bottom:40px;}
.login-brand-deco{font-size:52px;font-weight:900;color:rgba(0,0,0,0.06);font-family:'Impact','Arial Black',sans-serif;line-height:1;white-space:nowrap;}
/* 登入畫面底部製作人標註 */
.login-credit{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:11px;letter-spacing:2px;color:rgba(0,0,0,0.35);font-family:Arial,sans-serif;pointer-events:none;white-space:nowrap;}
.login-form-section{flex:1;padding:48px 56px;display:flex;flex-direction:column;justify-content:center;}
.login-form-title{font-size:24px;font-weight:900;letter-spacing:3px;color:var(--b-black);margin-bottom:32px;font-family:var(--b-font);}
.form-group{margin-bottom:0;}
.form-label{
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;margin-top:18px;display:block;font-family:Arial,sans-serif;font-weight:400;
}
.form-input{
  width:100%;padding:13px 14px;
  border:var(--b-border);background:var(--b-cream);
  color:var(--b-black);font-size:16px;outline:none;
  font-family:'Courier New',monospace;
  transition:background .1s;
}
.form-input:focus{background:#fff;}
.btn-primary{
  width:100%;padding:14px;background:var(--b-black);border:var(--b-border);
  color:var(--b-cream);font-size:16px;font-weight:900;cursor:pointer;
  font-family:var(--b-font);letter-spacing:3px;text-transform:uppercase;
  margin-top:28px;transition:background .15s,border-color .15s;
}
.btn-primary:hover{background:var(--b-red);border-color:var(--b-red);}
.login-toggle{text-align:center;margin-top:16px;font-size:13px;color:var(--muted);font-family:Arial,sans-serif;}
.login-toggle a{color:var(--b-red);cursor:pointer;font-weight:900;text-decoration:none;}
.form-error{color:var(--b-red);font-size:13px;margin-top:8px;display:none;font-family:Arial,sans-serif;}
.form-error.show{display:block;}

/* ══════════════════════════════════
   LOBBY SCREEN — B-ORIG
══════════════════════════════════ */
#screen-lobby{flex-direction:column;background:var(--b-cream);}
.lobby-header{
  display:flex;align-items:stretch;justify-content:flex-start;
  background:var(--b-black);border-bottom:var(--b-border);flex-shrink:0;height:52px;
}
.lobby-logo{
  font-size:17px;font-weight:900;letter-spacing:2px;color:var(--b-cream);
  padding:0 24px;display:flex;align-items:center;
  border-right:2px solid #333;font-family:var(--b-font);
}
.lobby-logo::after{content:'▲';color:var(--b-red);margin:0 4px;}
.lobby-ver{
  display:flex;align-items:center;padding:0 16px;
  background:var(--b-black);color:#fff;
  font-size:13px;font-weight:800;letter-spacing:1px;
  border-right:2px solid #333;font-family:var(--b-font);
}
.user-info{display:flex;align-items:center;gap:10px;font-size:13px;margin-left:auto;padding:0 20px;border-left:2px solid #333;}
.user-badge{
  padding:4px 14px;background:transparent;
  border:2px solid rgba(255,255,255,0.3);
  color:var(--b-cream);font-size:13px;font-weight:900;font-family:var(--b-font);
}
.btn-logout{
  padding:5px 14px;border:2px solid #555;
  background:none;color:#777;font-size:12px;cursor:pointer;
}
.btn-logout:hover{color:var(--b-cream);border-color:var(--b-cream);}

.lobby-body{
  display:grid;grid-template-columns:4fr 6fr;grid-template-rows:minmax(0,1fr);
  flex:1;min-height:0;overflow:hidden;
  gap:0;align-items:stretch;
}
.lobby-left{
  padding:32px 28px;display:flex;flex-direction:column;gap:28px;
  border-right:var(--b-border);background:var(--b-cream);
  min-height:0;overflow-y:auto;
}
.lobby-right{
  padding:32px 40px;display:flex;flex-direction:column;gap:28px;
  background:var(--b-mid);
  min-height:0;overflow:hidden;
}

.section-title{
  font-size:18px;font-weight:900;color:var(--b-black);margin-bottom:14px;
  letter-spacing:2px;text-transform:uppercase;font-family:var(--b-font);
  border-bottom:3px solid var(--b-black);padding-bottom:8px;
}

/* 圖鑑 Modal — B-ORIG */
#library-modal{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:8000;display:none;flex-direction:column;}
#library-modal.open{display:flex;}
.lib-box{background:var(--b-cream);width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative;}

/* 圖鑑：進入時的系列選擇大畫面 */
.lib-gate{position:absolute;inset:0;z-index:20;background:var(--b-cream);display:flex;flex-direction:column;overflow:hidden;}
.lib-gate-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:var(--b-border);background:var(--b-black);flex-shrink:0;}
.lib-gate-head > div{font-size:18px;font-weight:900;color:var(--b-cream);font-family:var(--b-font);letter-spacing:3px;}
.lib-gate-head > button{background:none;border:none;color:var(--b-cream);font-size:24px;cursor:pointer;line-height:1;}
.lib-gate-body{flex:1;overflow-y:auto;padding:36px 28px;}
.lib-gate-title{font-size:26px;font-weight:900;color:var(--b-black);font-family:var(--b-font);letter-spacing:3px;text-align:center;margin-bottom:6px;}
.lib-gate-sub{font-size:15px;color:var(--muted);text-align:center;margin-bottom:32px;font-family:Arial,sans-serif;}
.lib-gate-search{display:flex;gap:8px;max-width:960px;margin:0 auto 24px;}
.lib-gate-search input{flex:1;min-width:0;box-sizing:border-box;padding:10px 12px;background:#fff;border:3px solid var(--b-black);color:var(--b-black);font-size:16px;font-family:Arial,sans-serif;}
.lib-gate-search button{flex-shrink:0;padding:0 18px;background:var(--b-black);border:3px solid var(--b-black);color:var(--b-cream);font-size:15px;font-weight:900;font-family:var(--b-font);cursor:pointer;}
.lib-gate-search button:hover{background:var(--b-red);border-color:var(--b-red);}
.lib-gate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;max-width:960px;margin:0 auto;}
.lib-gate-card{box-sizing:border-box;min-height:96px;padding:18px 16px;border:3px solid var(--b-black);background:var(--b-cream);color:var(--b-black);font-size:22px;font-weight:900;font-family:var(--b-font);letter-spacing:2px;cursor:pointer;transition:background .15s,color .15s;line-height:1.2;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;overflow:hidden;}
.lib-gate-card:hover{background:var(--b-black);color:var(--b-cream);}
.lib-gate-card.all{grid-column:1/-1;background:var(--b-red);color:#fff;border-color:var(--b-red);font-size:24px;letter-spacing:4px;}
.lib-gate-card.all:hover{background:var(--b-black);border-color:var(--b-black);}

/* 圖鑑：頂部系列列的拉桿式下拉 */
.lib-series-select{padding:6px 12px;border:2px solid #bbb;background:var(--b-cream);color:var(--b-black);font-size:13px;font-weight:700;font-family:Arial,sans-serif;cursor:pointer;min-width:200px;}
.lib-series-select.on{border-color:var(--b-black);font-weight:900;}
.lib-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:var(--b-border);flex-shrink:0;background:var(--b-black);}
.lib-header > div{font-size:16px;font-weight:900;color:var(--b-cream);font-family:var(--b-font);letter-spacing:2px;}
.lib-header > button{color:var(--b-cream) !important;font-size:22px;}
.lib-series-bar{padding:10px 16px 8px;border-bottom:2px solid #ddd;background:var(--b-mid);flex-shrink:0;}
.lib-series-scroll{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin;}
.lib-series-chip{
  padding:5px 16px;border:2px solid #bbb;
  background:none;color:var(--muted);font-size:13px;cursor:pointer;
  white-space:nowrap;transition:all .12s;flex-shrink:0;font-weight:700;
  font-family:Arial,sans-serif;
}
.lib-series-chip:hover{border-color:#888;color:var(--b-black);}
.lib-series-chip.on{border-color:var(--b-black);color:var(--b-black);background:var(--b-cream);font-weight:900;}
.lib-filters{padding:10px 16px;border-bottom:2px solid #ddd;background:var(--b-mid);display:flex;flex-wrap:wrap;gap:10px;flex-shrink:0;}
.lib-filter-group{display:flex;flex-direction:column;gap:4px;}
.lib-filter-label{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;font-family:Arial,sans-serif;}
.lib-filter-row{display:flex;gap:4px;flex-wrap:wrap;}
.lib-chip{
  padding:4px 11px;border:2px solid #bbb;
  background:none;color:var(--muted);font-size:12px;cursor:pointer;transition:all .12s;font-family:Arial,sans-serif;font-weight:700;
}
.lib-chip:hover{color:var(--b-black);border-color:#888;}
.lib-chip.on{border-color:var(--b-red);color:var(--b-red);background:rgba(255,51,0,0.06);}
#lib-card-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:calc((100vw - 98px) / 8 / 0.73);gap:10px;padding:14px;align-content:start;background:var(--b-cream);}
@media(max-width:1100px){#lib-card-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:calc((100vw - 78px) / 6 / 0.73);}}
@media(max-width:700px){#lib-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:calc((100vw - 58px) / 4 / 0.73);}}

/* 卡片詳情彈窗 — B-ORIG */
#lib-card-detail{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:9000;display:none;align-items:center;justify-content:center;padding:16px;}
.lcd-box{background:var(--b-cream);border:var(--b-border);display:flex;width:100%;max-width:780px;max-height:90vh;overflow:hidden;position:relative;}
.lcd-img-col{width:260px;flex-shrink:0;align-self:flex-start;}
.lcd-img-col img{width:100%;height:auto;display:block;}
.lcd-info-col{flex:1;padding:20px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;background:var(--b-cream);}
.lcd-name{font-size:20px;font-weight:900;color:var(--b-black);line-height:1.3;font-family:var(--b-font);}
.lcd-id{font-size:11px;color:var(--muted);margin-top:2px;font-family:'Courier New',monospace;}
.lcd-badges{display:flex;gap:6px;flex-wrap:wrap;}
.lcd-badge{background:var(--b-black);padding:3px 10px;font-size:12px;color:var(--b-cream);font-weight:700;}
.lcd-section-label{font-size:10px;color:var(--muted);margin-bottom:3px;letter-spacing:2px;text-transform:uppercase;font-family:Arial,sans-serif;}
.lcd-text{font-size:14px;color:#333;line-height:1.8;white-space:pre-wrap;font-family:Arial,sans-serif;}
.lcd-text b{color:var(--b-red);font-weight:900;}
.lcd-div{height:2px;background:var(--b-black);margin:4px 0;}
.lcd-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--b-black);font-size:24px;cursor:pointer;z-index:1;line-height:1;font-weight:900;}
@media(max-width:600px){.lcd-box{flex-direction:column;max-height:92vh;}.lcd-img-col{width:100%;height:180px;}.lcd-img-col img{height:180px;object-fit:contain;background:var(--b-cream);}}
.card-sm{background:var(--b-mid);border:2px solid var(--b-black);padding:18px 20px;}

/* Stats — B-ORIG */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:var(--b-border);}
.stat-box{background:var(--b-cream);padding:14px 8px;text-align:center;border-right:2px solid #000;border-bottom:2px solid #000;}
.stat-box:nth-child(even){border-right:none;}
.stat-box:nth-last-child(-n+2){border-bottom:none;}
.stat-val{font-size:36px;font-weight:900;color:var(--b-black);font-family:'Impact',sans-serif;line-height:1;}
.stat-lbl{font-size:16px;color:var(--muted);margin-top:6px;letter-spacing:1px;text-transform:uppercase;font-family:Arial,sans-serif;font-weight:400;}

/* Room tiles — B-ORIG */
.btn-room{
  display:block;width:100%;padding:14px 20px;font-size:14px;font-weight:900;
  cursor:pointer;transition:background .15s,border-color .15s;border:var(--b-border);
  font-family:var(--b-font);letter-spacing:2px;text-transform:uppercase;
  background:var(--b-black);color:var(--b-cream);text-align:center;box-sizing:border-box;
}
.btn-room:hover{background:var(--b-red);border-color:var(--b-red);}
.btn-room-outline{background:var(--b-cream);color:var(--b-black);}
.btn-room-outline:hover{background:var(--b-black);color:var(--b-cream);}

/* Tile grid */
.tile-grid{display:flex;flex-direction:column;gap:12px;}
.tile-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:var(--b-border);cursor:pointer;font-family:var(--b-font);
  font-weight:900;letter-spacing:1px;text-transform:uppercase;
  transition:background .15s,color .15s;gap:10px;text-align:center;
}
.tile-big{
  background:var(--b-black);color:var(--b-cream);
  padding:48px 20px;font-size:36px;letter-spacing:4px;width:100%;
}
.tile-big .tile-icon{font-size:40px;line-height:1;}
.tile-big:hover{background:var(--b-red);}
.tile-sm{
  aspect-ratio:2/1;background:var(--b-cream);color:var(--b-black);
  font-size:22px;letter-spacing:.5px;padding:12px 10px;gap:6px;
}
.tile-sm .tile-icon{font-size:30px;line-height:1;}
.tile-sm:hover{background:var(--b-black);color:var(--b-cream);}
.btn-join-box{display:flex;gap:0;margin-top:4px;}
.room-input{
  flex:1;padding:12px 14px;background:var(--b-cream);border:var(--b-border);border-right:none;
  color:var(--b-black);font-size:15px;outline:none;font-family:'Courier New',monospace;
}
.room-input:focus{background:#fff;}
.btn-join{
  padding:12px 18px;background:var(--b-black);border:var(--b-border);
  color:var(--b-cream);font-size:14px;font-weight:900;cursor:pointer;font-family:var(--b-font);
}
.btn-join:hover{background:var(--b-red);border-color:var(--b-red);}

.room-code-display{
  text-align:center;padding:14px;background:var(--b-mid);border:var(--b-border);margin-top:8px;
}
.room-code{font-size:32px;font-weight:900;color:var(--b-black);letter-spacing:6px;font-family:'Impact',sans-serif;}
.room-code-label{font-size:10px;color:var(--muted);margin-top:4px;letter-spacing:2px;text-transform:uppercase;font-family:Arial,sans-serif;}

/* Match history — B-ORIG */
.match-row{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid #ddd;font-size:14px;
}
.match-row:last-child{border-bottom:none;}
.match-result{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:13px;flex-shrink:0;font-family:var(--b-font);border:var(--b-border);
}
.result-w{background:var(--b-black);color:var(--b-cream);}
.result-l{background:var(--b-red);color:#fff;border-color:var(--b-red);}
.match-opp{flex:1;color:var(--b-black);font-size:14px;font-family:Arial,sans-serif;}
.match-date{color:var(--muted);font-size:12px;font-family:'Courier New',monospace;}

/* Card list — B-ORIG */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;}
.card-item{
  border:2px solid var(--b-black);cursor:pointer;
  overflow:hidden;transition:transform .1s,box-shadow .1s;aspect-ratio:0.73;
  position:relative;
}
.card-item:hover{transform:scale(1.04);box-shadow:4px 4px 0 var(--b-black);z-index:5;}
.card-item img{width:100%;height:100%;object-fit:cover;display:block;}
.card-item .card-fallback{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:4px;
  font-size:9px;text-align:center;color:var(--muted);gap:3px;background:var(--b-mid);
}
.card-item .card-bp-badge{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(0,0,0,0.85);font-size:9px;font-weight:900;
  text-align:center;padding:3px 0;color:var(--b-cream);font-family:'Courier New',monospace;
}
/* 🔴 牌組編輯器選卡格：原本用 JS onmouseover/onmouseout 直接改 wrapper.style.transform。
   每次篩選／加卡都會整包 innerHTML='' 砍掉重建，若滑鼠停在原位置不動，
   重建後的新節點有機率直接吃到瀏覽器對「游標下方內容變動」的 hit-test 事件，
   使 transform:scale 卡在放大狀態不會歸位 → 疊到鄰卡上（使用者回報「篩選後卡片重疊」）。
   改用純 CSS :hover（比照 .card-item:hover 既有作法）：狀態完全交給瀏覽器即時判斷，
   節點被砍掉重建也不會殘留，不會沾黏。 */
.editor-card-item{transition:transform .1s;transform-origin:center;}
.editor-card-item:hover{transform:scale(1.05);z-index:5;}

.color-bar{height:4px;width:100%;}
.cb-red{background:#e53e3e;}
.cb-blue{background:#3182ce;}
.cb-yellow{background:#d69e2e;}
.cb-green{background:#38a169;}
.cb-purple{background:#805ad5;}
.cb-all{background:linear-gradient(90deg,#e53e3e,#d69e2e,#38a169,#3182ce,#805ad5);}

.filter-bar{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.filter-chip{
  padding:4px 12px;border:2px solid #bbb;
  background:none;color:var(--muted);font-size:12px;cursor:pointer;transition:all .12s;font-weight:700;font-family:Arial,sans-serif;
}
.filter-chip:hover{color:var(--b-black);border-color:#888;}
.filter-chip.on{border-color:var(--b-red);color:var(--b-red);background:rgba(255,51,0,0.06);}
.cost-chip{
  padding:3px 9px;border:2px solid #bbb;
  background:none;color:var(--muted);font-size:12px;cursor:pointer;transition:all .12s;font-weight:700;font-family:Arial,sans-serif;
}
.cost-chip:hover{color:var(--b-black);border-color:#888;}
.cost-chip.on{border-color:var(--b-red);color:var(--b-red);background:rgba(255,51,0,0.06);}

/* ══════════════════════════════════
   GAME SCREEN — B-ORIG
══════════════════════════════════ */
#screen-game{width:100vw;height:100vh;overflow:hidden;background:var(--b-cream);}
#screen-game.active{display:flex;align-items:center;justify-content:center;}
/* 遊戲舞台：固定 1600×900 設計尺寸，依視窗整體等比縮放，確保所有解析度表現一致 */
#game-stage{
  width:1920px;height:1080px;flex-shrink:0;
  display:flex;flex-direction:column;background:var(--b-cream);
  transform:scale(var(--game-scale,1));transform-origin:center center;
  position:relative;
}
.game-header{
  display:flex;align-items:stretch;justify-content:space-between;
  background:var(--b-black);border-bottom:var(--b-border);flex-shrink:0;height:48px;position:relative;
}
.phase-bar{display:flex;position:absolute;left:50%;transform:translateX(-50%);z-index:5;height:100%;}
.phase-btn{
  padding:0 18px;border:none;border-right:1px solid #333;
  background:transparent;color:#555;font-size:18px;font-weight:900;cursor:pointer;
  transition:all .15s;font-family:var(--b-font);letter-spacing:1px;
  display:flex;align-items:center;justify-content:center;
}
.phase-btn.active{background:var(--b-red);color:#fff;border-right-color:var(--b-red);}
.turn-badge{
  font-size:17px;padding:0 18px;display:flex;align-items:center;
  background:var(--b-black);
  color:var(--b-cream);font-weight:900;font-family:var(--b-font);letter-spacing:2px;
  position:relative;z-index:10;border-left:2px solid #333;
}

.game-outer-wrap{
  display:grid;
  grid-template-columns:190px 1fr 190px;
  grid-template-rows:1fr;
  flex:1;overflow:hidden;min-height:0;
}
.game-side{
  display:flex;flex-direction:column;
  gap:8px;padding:14px 12px;background:var(--b-cream);
  overflow-y:auto;
}
.game-side:not(.right){
  grid-column:1;border-right:var(--b-border);
}
.game-side.right{
  grid-column:3;border-left:var(--b-border);
}
.field-wrap{
  grid-column:2;
  display:flex;flex-direction:column;
  overflow:hidden;position:relative;
}
.zone-lbl{
  font-size:14px;font-weight:900;color:var(--muted);text-transform:uppercase;
  letter-spacing:3px;text-align:center;margin-bottom:4px;font-family:Arial,sans-serif;
}
.mini-stack{
  width:120px;height:80px;display:flex;align-items:center;
  justify-content:center;font-size:36px;font-weight:900;cursor:pointer;
  margin:0 auto;border:var(--b-border);font-family:'Impact',sans-serif;
}
.deck-mini{background:var(--b-black);border-color:var(--b-black);color:var(--b-cream);}
.out-mini{background:var(--b-cream);border-color:var(--b-black);color:var(--b-black);}
.removed-mini{background:var(--b-mid);border-color:var(--b-black);color:var(--b-black);}
/* 右側面板：對手/我方資訊框平均分佈、尺寸一致 */
#right-panel{justify-content:flex-start;gap:6px;}
#right-panel .zone-lbl{margin:0 0 1px;}
#right-panel .mini-stack{width:100%;height:72px;}
#right-panel .rp-divider{height:3px;background:#000;margin:8px 0 4px;}
.life-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:110px;margin:0 auto;}
.life-c{width:46px;height:64px;background:var(--b-red);border:var(--b-border);}
.life-c.gone{background:var(--b-cream);border:3px dashed #bbb;opacity:.6;}
.life-c.trigger{background:var(--b-red);border:var(--b-border);box-shadow:0 0 8px rgba(255,51,0,.6);}
.ap-row{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;}
.ap-c.mini{width:40px;height:54px;}
.ap-c{width:64px;height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;font-weight:900;border:var(--b-border);overflow:hidden;position:relative;font-family:Arial,sans-serif;}
.ap-c.active{background:var(--b-black);border-color:var(--b-black);color:var(--b-cream);}
.ap-c.used{background:var(--b-cream);border:3px dashed #bbb;color:#ccc;}

.field-main{flex:1;width:100%;max-width:100%;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden;min-height:0;position:relative;}
/* 上半（對手）= 米白，下半（我方）= 黑 */
.half-field.hf-opp{background:var(--b-mid);padding:8px 14px;display:flex;flex-direction:column;gap:0;}
.half-field.hf-me{background:var(--b-dark);padding:8px 14px;display:flex;flex-direction:column;gap:0;}
.zone-row{display:flex;flex-direction:row;align-items:stretch;flex:1;min-height:0;gap:0;}
.zone-tag{
  font-size:15px;padding:4px 0;width:64px;text-align:center;flex-shrink:0;
  font-weight:900;letter-spacing:1px;margin-right:8px;align-self:center;height:fit-content;
  border:var(--b-border);font-family:var(--b-font);
}
.zone-spacer{width:64px;flex-shrink:0;margin-left:8px;}
/* 對手半場（米白底）的 zone tag */
.half-field.hf-opp .tag-front{background:var(--b-black);color:var(--b-cream);}
.half-field.hf-opp .tag-energy{background:var(--b-cream);color:var(--b-black);border-color:var(--b-black);}
.half-field.hf-opp .tag-field{background:var(--b-black);color:var(--b-cream);}
/* 我方半場（黑底）的 zone tag */
.half-field.hf-me .tag-front{background:var(--b-cream);color:var(--b-black);}
.half-field.hf-me .tag-energy{background:var(--b-dark);color:var(--b-cream);border-color:var(--b-cream);}
.half-field.hf-me .tag-field{background:var(--b-cream);color:var(--b-black);}
.tag-front{}
.tag-energy{}
.tag-field{}
.cannot-move-overlay{position:absolute;top:2px;right:2px;font-size:18px;line-height:1;z-index:20;pointer-events:none;filter:drop-shadow(0 0 3px rgba(0,0,0,.8));}
.cant-guard-overlay{position:absolute;top:2px;left:2px;font-size:18px;line-height:1;z-index:20;pointer-events:none;filter:drop-shadow(0 0 3px rgba(0,0,0,.8));}
.card-status-btn{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:20px;padding:0 6px;border-radius:3px 3px 0 0;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.25);border-bottom:none;color:rgba(255,255,255,.85);font-size:13px;cursor:pointer;z-index:26;display:flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap;}
.card-status-btn:hover{background:rgba(255,255,255,.22);}
.under-card-badge{position:absolute;top:2px;right:2px;background:rgba(80,50,20,.88);border:1px solid rgba(200,160,80,.7);color:#f0c860;font-size:13px;padding:2px 5px;border-radius:3px;cursor:pointer;z-index:27;line-height:1.4;white-space:nowrap;}
.under-card-badge:hover{background:rgba(120,80,30,.95);}
#card-status-popup{position:fixed;z-index:9500;background:var(--b-black);border:var(--b-border);padding:18px 18px 16px;min-width:180px;max-width:270px;box-shadow:5px 5px 0 rgba(0,0,0,0.4);display:none;}
.csp-name{font-size:20px;font-weight:900;color:var(--b-cream);margin-bottom:12px;padding-right:32px;font-family:var(--b-font);line-height:1.15;word-break:break-all;}
.csp-bp-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:6px;}
.csp-bp{font-size:24px;font-weight:900;color:var(--b-cream);font-family:'Impact',sans-serif;line-height:1;}
.csp-bp-mod{font-size:24px;color:#aaa;font-family:Arial,sans-serif;width:100%;}
.csp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.csp-tag{background:#222;padding:5px 12px;font-size:16px;color:#ccc;border:1px solid #444;font-family:Arial,sans-serif;}
.csp-close{position:absolute;top:6px;right:12px;background:none;border:none;color:#888;cursor:pointer;font-size:28px;line-height:1;padding:0;font-weight:900;}
.slots{display:flex;gap:8px;flex:1;align-items:center;justify-content:center;min-height:0;overflow:hidden;}
.slot{
  height:100%;aspect-ratio:0.73;max-width:190px;border:3px dashed rgba(0,0,0,.15);
  position:relative;flex-shrink:0;cursor:pointer;transition:border-color .15s;
}
/* 對手半場slot */
.half-field.hf-opp .slot.front-slot{border-color:rgba(0,0,0,.25);}
.half-field.hf-opp .slot.energy-slot{border-color:rgba(0,0,0,.18);}
.half-field.hf-opp .slot:hover{border-color:rgba(0,0,0,.5);}
/* 我方半場slot */
.half-field.hf-me .slot{border-color:rgba(255,255,255,.12);}
.half-field.hf-me .slot.front-slot{border-color:rgba(255,255,255,.25);}
.half-field.hf-me .slot.energy-slot{border-color:rgba(255,255,255,.18);}
.half-field.hf-me .slot:hover{border-color:rgba(255,255,255,.5);}

.field-card{
  position:absolute;inset:1px;cursor:pointer;
  /* 🆕補間動畫：transform 併入 transition，讓休息⇄直立的 rotate(90deg) 平滑轉動而非瞬間跳。
     🔴 安全性已逐條查證，非推測：.field-card 的 8 種狀態動畫（attackGlow／pulseGlow／effSelCandidate／
        effSelChosen／effSpotlight／effSourceActive／chumeru-source／discardGlow）**全部只動 box-shadow**，
        本檔三處 CSS 註解明載理由「刻意不加 transform，避免覆蓋休息卡的 rotate(90deg) 致轉正」——
        亦即 transform 在本檔本來就是休息卡的專屬通道。故此處補一條 transform transition 不會與任何
        既有 animation 互相蓋掉（transition 與 animation 是兩套獨立機制，本專案踩過三次的
        「animation 屬性不合併、後者全贏」在這裡天然不成立）。
     🔴 唯一會動 transform 的是 deployEnter（新登場飛入），故下方 .deploy-enter 期間停用 transition。
     🔴 .flip-ghost 有自己完整的 transition 宣告（left/top/width/height），會整條覆蓋本基底，不受影響。 */
  transition:box-shadow .12s,outline .12s,transform .3s cubic-bezier(.34,1.15,.64,1);
  overflow:hidden;
  border:2px solid rgba(0,0,0,0.3);
  backface-visibility:hidden;
}
/* 登場飛入期間不要讓 transition 介入 transform（animation 結束回落基底值時可能多出一段無意義過渡） */
.field-card.deploy-enter{transition:none;}
/* 🆕BP 徽章數值變化強調：.fc-badge 基底無任何 animation（已查證），且徽章與卡片是不同元素，
   兩者的 transform 互不干擾，故這裡可安全使用 animation。 */
.fc-badge.fcb-bp.bp-bump,.fc-badge.fcb-cost.bp-bump{animation:bpBump .45s cubic-bezier(.3,1.4,.5,1);}
@keyframes bpBump{0%{transform:scale(1);}32%{transform:scale(1.42);}100%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){
  .field-card{transition:box-shadow .12s,outline .12s;}
  .fc-badge.fcb-bp.bp-bump,.fc-badge.fcb-cost.bp-bump{animation:none;}
}
/* B純銳化：hover 不再縮放影像（縮放會走平滑插值→糊），改用外框＋光暈回饋 */
.field-card:hover{z-index:50;outline:3px solid var(--b-red);outline-offset:-2px;box-shadow:0 0 14px rgba(255,51,0,.5);}
/* 休息卡的旋轉是規則必需；scale(.77) 是為了讓橫置卡塞進直式格子，無法移除，故仍保留 */
.field-card.rested{transform:rotate(90deg) scale(.77);transform-origin:center;}
/* 但移除 hover 時的二次放大（.82），避免在你正要看的那張卡上再糊一層 */
.field-card.rested:hover{transform:rotate(90deg) scale(.77);z-index:50;outline:3px solid var(--b-red);outline-offset:-2px;}
.field-card.selected{box-shadow:0 0 0 4px #000,0 0 0 6px #f0c040;z-index:30;}
.field-card.attacking{box-shadow:0 0 0 3px var(--b-red),0 0 16px 4px rgba(255,51,0,0.6);z-index:35;animation:attackGlow 0.8s infinite alternate;}
.field-card.chumeru-source{box-shadow:0 0 0 3px var(--b-red),0 0 18px 5px rgba(255,51,0,0.78);z-index:36;animation:attackGlow 0.8s infinite alternate;}
@keyframes extraDrawPulse{from{box-shadow:0 0 6px rgba(255,51,0,0.5);background:var(--b-red);}to{box-shadow:0 0 16px rgba(255,51,0,0.9);background:#cc2200;}}
@keyframes phaseIn{from{opacity:0;transform:translate(-50%,-60%);}to{opacity:1;transform:translate(-50%,-50%);}}
@keyframes attackGlow{from{box-shadow:0 0 0 3px #e8534a,0 0 10px 2px rgba(232,83,74,0.5);}to{box-shadow:0 0 0 3px #e8534a,0 0 20px 8px rgba(232,83,74,0.9);}}
.field-card.can-activate{animation:pulseGlow 1.6s infinite;z-index:10;}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 5px 1px rgba(255,200,50,.4);}50%{box-shadow:0 0 12px 4px rgba(255,200,50,.8);}}
@keyframes discardGlow{0%,100%{box-shadow:0 0 0 2px #f0c040,0 0 8px rgba(240,192,64,.6);}50%{box-shadow:0 0 0 3px #f0c040,0 0 18px rgba(240,192,64,.95);}}
.hcard.discard-glow{animation:discardGlow 1s ease-in-out infinite;z-index:10;}
.hcard.discard-selected{opacity:.45;box-shadow:0 0 0 3px #e8534a!important;animation:none!important;}
@keyframes effectGlow{0%,100%{box-shadow:0 0 0 2px #f97316,0 0 8px rgba(249,115,22,.6);}50%{box-shadow:0 0 0 3px #f97316,0 0 18px rgba(249,115,22,.95);}}
/* 戰鬥場效果選擇高亮（加強顯示）：可選＝青色粗框脈動；已選＝紅光粗框（不加 transform，避免覆蓋休息卡的 rotate(90deg) 致轉正） */
@keyframes effSelCandidate{0%,100%{box-shadow:0 0 0 4px #18e0ff,0 0 14px 4px rgba(24,224,255,.65);}50%{box-shadow:0 0 0 5px #18e0ff,0 0 26px 10px rgba(24,224,255,.95);}}
@keyframes effSelChosen{0%,100%{box-shadow:0 0 0 5px #ff2d2d,0 0 18px 6px rgba(255,45,45,.8);}50%{box-shadow:0 0 0 6px #ff5a5a,0 0 30px 12px rgba(255,45,45,1);}}
.field-card.eff-sel-candidate{animation:effSelCandidate 1.05s ease-in-out infinite;z-index:11;outline:2px solid rgba(255,255,255,.55);outline-offset:1px;}
.field-card.eff-sel-chosen{animation:effSelChosen .85s ease-in-out infinite;z-index:12;outline:2px solid #fff;outline-offset:1px;}
/* 效果來源卡位置標示（純展示，不可點選）：例如能源線已滿需選卡送走時，標出「即將移入的是場上哪一張」。
   刻意不用 transform（會覆蓋休息卡的 rotate(90deg) 致轉正，比照 eff-sel-* 的既有教訓）。 */
@keyframes effSpotlight{0%,100%{box-shadow:0 0 0 4px #a855f7,0 0 16px 5px rgba(168,85,247,.65);}50%{box-shadow:0 0 0 5px #c084fc,0 0 30px 10px rgba(168,85,247,.95);}}
.field-card.eff-spotlight{animation:effSpotlight 1s ease-in-out infinite;z-index:13;outline:2px solid rgba(255,255,255,.6);outline-offset:1px;}
/* 對手視角：標示「目前是哪張卡的效果正在執行」（純展示，不可點選；對手原本只聽到音效卻看不出是哪張卡）。
   同樣不用 transform，避免覆蓋休息卡的 rotate(90deg)。 */
@keyframes effSourceActive{0%,100%{box-shadow:0 0 0 4px #22c55e,0 0 16px 5px rgba(34,197,94,.65);}50%{box-shadow:0 0 0 5px #4ade80,0 0 30px 10px rgba(34,197,94,.95);}}
.field-card.eff-source-active{animation:effSourceActive 1.1s ease-in-out infinite;z-index:14;outline:2px solid rgba(255,255,255,.6);outline-offset:1px;}
/* 🆕#6 效果剛開始生效的單次漣漪：獨立用 ::before（不碰 .field-card 本身的 box-shadow 動畫），
   跟上面持續中的 effSourceActive 脈動同時並存不衝突。 */
.field-card.eff-source-pop::before{
  content:'';position:absolute;inset:-6px;z-index:45;pointer-events:none;
  border:3px solid #4ade80;border-radius:8px;
  animation:effSourcePopRing .5s ease-out;
}
@keyframes effSourcePopRing{0%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.35);}}
@media (prefers-reduced-motion:reduce){.field-card.eff-source-pop::before{animation:none;display:none;}}
.field-card img{width:100%;height:100%;object-fit:cover;display:block;backface-visibility:hidden;}
.field-card .fc-fallback{
  width:100%;height:100%;display:flex;flex-direction:column;
  font-size:10px;text-align:center;color:var(--muted2);
}
.fc-art{flex:1;display:flex;align-items:center;justify-content:center;font-size:22px;}
.fc-bp{background:rgba(0,0,0,.8);font-size:13px;font-weight:bold;text-align:center;padding:2px;color:#f0e060;}
.fc-tags{background:rgba(0,0,0,.65);font-size:12px;padding:2px 3px;color:#ffd060;}
/* 場上卡四角徽章：左上費用、左下當前BP、右下生產能源；沿用伏牌徽章的褐金配色 */
.fc-badge{position:absolute;display:flex;align-items:center;gap:4px;background:rgba(15,18,22,.45);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:15px;font-weight:bold;line-height:1;padding:3px 7px;border-radius:999px;white-space:nowrap;z-index:24;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.7);}
.fc-badge.fcb-cost{top:5px;left:5px;}
.fc-badge.fcb-bp{bottom:5px;left:5px;font-family:'Courier New',monospace;}
.fc-badge.fcb-prod{bottom:0;right:0;padding:5px 9px 6px;border-radius:8px 0 0 0;border-right:none;border-bottom:none;background:rgba(12,14,18,.96);backdrop-filter:none;-webkit-backdrop-filter:none;}
.fc-badge.fcb-bp.up{background:rgba(99,169,42,.38);border-color:rgba(150,224,90,.65);color:#d9ffc0;}
.fc-badge.fcb-prod.up{background:rgba(99,169,42,.92);border-color:rgba(150,224,90,.8);color:#eaffd8;}
.fc-badge.fcb-bp.down{background:rgba(169,42,42,.38);border-color:rgba(240,138,130,.7);color:#ffd6d2;}
.fc-badge.fcb-cost.disc{background:rgba(99,169,42,.38);border-color:rgba(150,224,90,.65);color:#d9ffc0;}
/* 🔴 回報單 #323：場上角色能源需求被效果增減（如突襲〈雨葛蘭〉光環+2）→ 左上費用徽章直接變色顯示當前值 */
.fc-badge.fcb-cost.down{background:rgba(99,169,42,.38);border-color:rgba(150,224,90,.65);color:#d9ffc0;}
.fc-badge.fcb-cost.up{background:rgba(214,120,42,.42);border-color:rgba(240,176,120,.75);color:#ffe6cf;}
/* 手牌徽章縮小：重疊帶窄，避免擁擠 */
#my-hand-cards .fc-badge{font-size:12px;padding:2px 5px;gap:3px;}
#my-hand-cards .fc-badge.fcb-cost{top:3px;left:3px;}
#my-hand-cards .fc-badge.fcb-bp{bottom:3px;left:3px;}
#my-hand-cards .fcb-dot{width:9px;height:9px;}
.fc-badge.tint-red{border-color:rgba(224,90,74,.6);}
.fc-badge.tint-blue{border-color:rgba(61,138,222,.6);}
.fc-badge.tint-yellow{border-color:rgba(232,200,74,.6);}
.fc-badge.tint-green{border-color:rgba(99,169,42,.6);}
.fc-badge.tint-purple{border-color:rgba(154,111,224,.6);}
.fcb-dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none;}
.fcb-dot.red{background:#e05a4a;}.fcb-dot.blue{background:#3d8ade;}.fcb-dot.yellow{background:#e8c84a;}.fcb-dot.green{background:#63a92a;}.fcb-dot.purple{background:#9a6fe0;}
.activate-dot{
  position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;
  background:#ffd050;box-shadow:0 0 8px #ffd050;z-index:40;pointer-events:none;
  animation:dotPulse 1.2s infinite;
}
@keyframes dotPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.35);}}

/* 攻擊次數/攻擊後活動 狀態徽章：頂部置中（避開左上費用、右上活動點、左下BP、右下產能）*/
.state-badges{position:absolute;top:2px;left:50%;transform:translateX(-50%);z-index:42;pointer-events:none;display:flex;flex-direction:row;gap:2px;}
.state-badge{min-width:14px;height:15px;padding:0 4px;border-radius:8px;font-size:9px;font-weight:bold;line-height:15px;text-align:center;color:#fff;background:rgba(232,83,74,0.92);box-shadow:0 0 4px rgba(232,83,74,0.7);border:1px solid rgba(255,255,255,0.35);white-space:nowrap;}
.state-badge.used{color:rgba(255,255,255,0.5);background:rgba(60,60,68,0.9);box-shadow:none;border-color:rgba(255,255,255,0.12);}
/* 卡片休息(橫置90°)時，徽章反向旋轉保持直立可讀 */
.field-card.rested .state-badges{transform:translateX(-50%) rotate(-90deg);}

/* ══════════════════════════════════
   戰鬥演出升級（docs/BATTLE_PRESENTATION_PLAN.md #3/#4/#7/#8/#9/#10/#11/#12）
   純疊加：一律新增 class/selector，不覆寫既有版位與既有動畫規則
══════════════════════════════════ */

/* #3 徽章材質升級：既有 .fc-badge 已是霧玻璃質感，補一道頂緣高光增加立體感（不改尺寸/位置） */
.fc-badge{background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);}

/* #11 登場動畫：新卡剛被指派到格位那一次渲染會拿到這個 class（見 computeSlottedCards 的
   _justDeployedPos），純粹是新建立的 DOM node 自然播放，不需要任何 diff/補間技巧。 */
@keyframes deployEnter{
  0%{filter:brightness(2.4);transform:translateY(24px) scale(.72);opacity:0;}
  55%{filter:brightness(1.5);transform:translateY(-4px) scale(1.05);opacity:1;}
  100%{filter:brightness(1);transform:translateY(0) scale(1);}
}
.field-card.deploy-enter{animation:deployEnter .38s cubic-bezier(.2,.8,.3,1);}
@media (prefers-reduced-motion:reduce){.field-card.deploy-enter{animation:none;}}

/* #12 退場動畫：卡片離場時原本的格位瞬間清空，改在原位置疊一個「幽靈」浮層播完退場演出再消失
   （見 renderSlots 的 spawnRetireRipple），不影響固定格位（#0）本身的資料邏輯。 */
#retire-ghost-layer{position:fixed;inset:0;z-index:9999;pointer-events:none;}
@keyframes retireGhost{
  0%{opacity:1;transform:translate(0,0) rotate(0) scale(1);filter:brightness(1) saturate(1);}
  25%{transform:translate(-3px,0) rotate(-5deg) scale(1);}
  55%{transform:translate(3px,2px) rotate(4deg) scale(1);filter:brightness(2.1) saturate(0);}
  100%{opacity:0;transform:translate(1px,14px) rotate(7deg) scale(.8);filter:brightness(1) saturate(0);}
}
.retire-ghost{position:fixed;animation:retireGhost .42s ease-in forwards;}
@media (prefers-reduced-motion:reduce){.retire-ghost{animation:none;opacity:0;}}

/* 🆕離場去向演出（detectLeaveDestinations）：與 #12 共用 #retire-ghost-layer。
   外層容器只負責定位（與休息卡的旋轉），動畫全在子元素上——避免「animation 不合併、後者全贏」與
   .field-card 基底 transform transition 互相干擾（本專案踩過多次的同一類坑）。 */
/* 放置移除區：碎片由左而右依序化為粉末飄散 */
.leave-dust{position:fixed;margin:0;transform-origin:center;pointer-events:none;}
.leave-dust-bit{
  position:absolute;background-repeat:no-repeat;will-change:transform,opacity;
  animation:leaveDustBit .72s cubic-bezier(.45,0,.8,.5) both;
}
@keyframes leaveDustBit{
  0%{transform:translate(0,0) rotate(0) scale(1);opacity:1;filter:none;}
  18%{transform:translate(0,0) rotate(0) scale(.94);opacity:1;filter:brightness(1.7) saturate(.2);}
  100%{transform:translate(var(--tx),var(--ty)) rotate(var(--r)) scale(.18);opacity:0;filter:brightness(1.3) saturate(0);}
}
.leave-dust-flash{position:absolute;inset:0;background:#fff;mix-blend-mode:screen;opacity:0;animation:leaveDustFlash .32s ease-out both;}
@keyframes leaveDustFlash{0%{opacity:.75;}100%{opacity:0;}}
/* 回到手牌：浮起 → 飛向手牌區縮小淡出（外層位移、內層卡片從休息角度轉正） */
.leave-hand-ghost{
  position:fixed;margin:0;pointer-events:none;
  animation:leaveHandFly .6s cubic-bezier(.5,0,.3,1) forwards;
}
@keyframes leaveHandFly{
  0%{transform:translate(0,0) scale(1);opacity:1;filter:none;}
  22%{transform:translate(0,-10px) scale(1.07);opacity:1;filter:brightness(1.35) drop-shadow(0 0 10px rgba(255,255,255,.9));}
  100%{transform:translate(var(--dx),var(--dy)) scale(.38);opacity:.15;filter:brightness(1.2) drop-shadow(0 0 6px rgba(255,255,255,.7));}
}
.field-card.leave-hand-card{transition:none;cursor:default;animation:leaveHandTurn .3s ease-out forwards;}
@keyframes leaveHandTurn{from{transform:var(--rot0);}to{transform:none;}}
@media (prefers-reduced-motion:reduce){.leave-dust,.leave-hand-ghost{display:none;}}

/* 🆕效果指向連線（playEffectLinks）：來源卡→目標卡的光束。漫畫硬邊語言：黑色粗描邊＋色帶＋白芯，
   終點衝擊環，關鍵字標籤用實色底＋黑框＋硬陰影。色：BP加值＝金、BP減值＝紅、純賦予關鍵字＝青、
   目標離場＝紫、轉休息＝灰藍、其他指向＝白。 */
#effect-link-layer{position:fixed;inset:0;z-index:9990;pointer-events:none;}
.elink-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;}
.elink-up{--elink-c:#ffc21a;}
.elink-down{--elink-c:#ff4d3d;}
.elink-kw{--elink-c:#3fd0ff;}
.elink-leave{--elink-c:#b86bff;}
.elink-rest{--elink-c:#9fb3c8;}
.elink-plain{--elink-c:#f4f4f4;}
.elink-outline,.elink-beam,.elink-core{
  fill:none;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;
  animation:elinkDraw .3s cubic-bezier(.3,.7,.4,1) forwards,elinkFade .4s ease-in .9s forwards;
}
.elink-outline{stroke:#111;stroke-width:10px;}
.elink-beam{stroke:var(--elink-c);stroke-width:6px;}
.elink-core{stroke:#fff;stroke-width:2px;opacity:.9;}
@keyframes elinkDraw{to{stroke-dashoffset:0;}}
@keyframes elinkFade{to{opacity:0;}}
.elink-src{fill:var(--elink-c);stroke:#111;stroke-width:3px;transform-box:fill-box;transform-origin:center;
  animation:elinkSrc .5s ease-out forwards;}
@keyframes elinkSrc{0%{transform:scale(1.6);opacity:1;}100%{transform:scale(.6);opacity:0;}}
.elink-ring{fill:none;stroke:var(--elink-c);stroke-width:5px;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:elinkRing .5s ease-out .27s forwards;}
@keyframes elinkRing{0%{opacity:1;transform:scale(.35);}100%{opacity:0;transform:scale(1.3);}}
.elink-label{
  position:fixed;transform:translate(-50%,-100%);white-space:nowrap;opacity:0;
  font:900 15px/1.2 var(--b-font,system-ui,sans-serif);color:#111;background:var(--elink-c);
  border:2px solid #111;box-shadow:3px 3px 0 #111;padding:2px 7px;
  animation:elinkLabel 1.1s ease-out .26s forwards;
}
@keyframes elinkLabel{
  0%{opacity:0;transform:translate(-50%,-60%) scale(.6);}
  16%{opacity:1;transform:translate(-50%,-100%) scale(1.15);}
  28%{transform:translate(-50%,-100%) scale(1);}
  80%{opacity:1;transform:translate(-50%,-100%);}
  100%{opacity:0;transform:translate(-50%,-135%);}
}
@media (prefers-reduced-motion:reduce){#effect-link-layer{display:none;}}

/* #15 移動位移滑動：卡片換容器（如能源線→前線）時，真身先隱形，改用一個 position:fixed 的複製品
   從舊位置「滑」到新位置（transition 而非 keyframes——起訖點是每次動態算出來的，只有 transition
   能單純交給瀏覽器補間），抵達後真身才現形、複製品移除。與 #12 共用同一個 #retire-ghost-layer 浮層。 */
.field-card.flip-hidden{opacity:0;}
.flip-ghost{
  position:fixed;z-index:9999;pointer-events:none;margin:0;
  transition:left .34s cubic-bezier(.3,.7,.3,1),top .34s cubic-bezier(.3,.7,.3,1),
             width .34s cubic-bezier(.3,.7,.3,1),height .34s cubic-bezier(.3,.7,.3,1);
}
/* 🆕突襲飛行動畫（animRaidCard）尚未落地前，真正的目標卡先蓋住，等分身真的飛到蓋上那一刻才現形
   （與上面 flip-hidden 同一手法，同樣用 opacity 而非 display，避免影響版面尺寸/格位計算）。 */
.field-card.raid-pending-cover{opacity:0;}
@media (prefers-reduced-motion:reduce){
  .field-card.flip-hidden{opacity:1;}
  .flip-ghost{display:none;}
  .field-card.raid-pending-cover{opacity:1;}
}

/* 牌組「整理排序」（2026-08-18，使用者提案：仿 iOS 桌面整理 App 的手感；使用者實測三輪回饋調整：
   ①拖曳中途其餘卡片不即時重排，改成「懸停預覽、放開才真的換位一次」；②搖晃提示不舒服，改成靜態
   的拖曳握把圖示；③放開後排到紅框下一個→本尊改為留在原本格子不離開排版流（見 buildDeckReorderCard
   /attachDeckDragHandlers 的浮動分身寫法），紅框位置與實際落點永遠一致；紅框本身也加大加粗）。 */
.deck-reorder-card{touch-action:none;position:relative;transition:transform .12s ease,box-shadow .12s ease;}
.deck-reorder-card::before{
  content:'⠿';position:absolute;top:2px;right:4px;font-size:14px;color:var(--muted2);
  pointer-events:none;
}
.deck-reorder-card.deck-reorder-hover-target{
  outline:5px solid var(--b-red);outline-offset:3px;
  box-shadow:0 0 0 3px rgba(232,83,74,.25),0 8px 20px rgba(232,83,74,.45);
  transform:scale(1.05);z-index:2;
}
.deck-reorder-card.deck-reorder-dragging{opacity:.35;}
.deck-reorder-ghost{pointer-events:none;}
.deck-reorder-ghost::before{content:none;}
@media (prefers-reduced-motion:reduce){
  .deck-reorder-card.deck-reorder-hover-target{transform:none;}
}

/* 關鍵時刻大場面（2026-08-17，使用者提案）：突襲登場／生命區翻到 Special／Color／Final。
   全螢幕瞬間強調——畫面暗下＋卡片獨立置中放大，依類型換色與標籤文字。刻意獨立於共用 .overlay/.modal
   之外（那組是透明背景，這裡要真的暗下整個畫面，不能動到共用規則影響其餘 29+ 處彈窗）。 */
#big-moment-overlay{
  position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;
}
#big-moment-overlay.show{animation:bmBackdropIn .18s ease-out forwards;}
#big-moment-overlay.hide{animation:bmBackdropOut .28s ease-in forwards;}
@keyframes bmBackdropIn{from{opacity:0;}to{opacity:1;}}
@keyframes bmBackdropOut{from{opacity:1;}to{opacity:0;}}
.bm-backdrop{position:absolute;inset:0;background:rgba(8,6,4,.82);}
.bm-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  transform:scale(.55);opacity:0;
}
#big-moment-overlay.show .bm-card{animation:bmCardIn .38s cubic-bezier(.2,.9,.25,1.15) forwards;}
#big-moment-overlay.hide .bm-card{animation:bmCardOut .24s ease-in forwards;}
@keyframes bmCardIn{0%{transform:scale(.55);opacity:0;}70%{transform:scale(1.08);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes bmCardOut{from{transform:scale(1);opacity:1;}to{transform:scale(.88);opacity:0;}}
.bm-label{
  font-size:22px;font-weight:900;letter-spacing:4px;font-family:var(--b-font);color:#fff;
  padding:4px 22px;border-radius:999px;text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.bm-img{width:220px;border-radius:10px;box-shadow:0 0 0 4px rgba(255,255,255,.85),0 0 50px 12px var(--bm-glow,rgba(255,255,255,.5));}
.bm-name{font-size:16px;font-weight:900;color:#fff;font-family:var(--b-font);text-shadow:0 2px 4px rgba(0,0,0,.7);}
/* 類型配色：突襲＝橘紅，special＝紫，color＝藍，final＝金紅 */
.bm-card.bm-raid{--bm-glow:rgba(224,90,32,.65);} .bm-card.bm-raid .bm-label{background:rgba(224,90,32,.9);}
.bm-card.bm-special{--bm-glow:rgba(154,111,224,.7);} .bm-card.bm-special .bm-label{background:rgba(124,74,214,.92);}
.bm-card.bm-color{--bm-glow:rgba(61,138,222,.7);} .bm-card.bm-color .bm-label{background:rgba(45,110,196,.92);}
.bm-card.bm-final{--bm-glow:rgba(255,180,60,.75);} .bm-card.bm-final .bm-label{background:linear-gradient(90deg,#c0392b,#e08a1e);}
@media (prefers-reduced-motion:reduce){
  #big-moment-overlay.show,#big-moment-overlay.hide,#big-moment-overlay .bm-card{animation:none;}
  #big-moment-overlay.show{opacity:1;} #big-moment-overlay.show .bm-card{opacity:1;transform:scale(1);}
}

/* #4 回合／階段轉換橫幅：取代既有的 showPhaseAnnounce()（原本是置中小方框，淡入淡出）。
   使用者實測後表示這一版滑入橫幅比舊版好看，要求兩者統一換成這一版——不再另外疊加一份，
   直接改寫 showPhaseAnnounce 本體，呼叫端（回合／五個階段共用同一函式）完全不用動。 */
#phaseAnnounce{
  position:fixed;left:0;right:0;top:38%;text-align:center;z-index:9000;
  transform:translateY(-50%);pointer-events:none;
  font-size:24px;font-weight:900;letter-spacing:6px;font-family:var(--b-font);
  color:#fff;padding:12px 0;text-shadow:0 2px 0 rgba(0,0,0,.4);
}
#phaseAnnounce.big{font-size:30px;}
#phaseAnnounce.mine{background:linear-gradient(90deg,transparent,rgba(46,139,87,.88),rgba(46,139,87,.88),transparent);}
#phaseAnnounce.opp{background:linear-gradient(90deg,transparent,rgba(192,57,43,.88),rgba(192,57,43,.88),transparent);}
#phaseAnnounce.sweep-in{animation:announceSweepIn .45s cubic-bezier(.2,.8,.3,1) forwards;}
#phaseAnnounce.sweep-out{animation:announceSweepOut .35s ease-in forwards;}
@keyframes announceSweepIn{0%{transform:translate(120%,-50%);opacity:0;}100%{transform:translate(0,-50%);opacity:1;}}
@keyframes announceSweepOut{0%{transform:translate(0,-50%);opacity:1;}100%{transform:translate(-120%,-50%);opacity:0;}}
@media (prefers-reduced-motion:reduce){
  #phaseAnnounce.sweep-in,#phaseAnnounce.sweep-out{animation:none;}
}

/* #7 生命卡失去時的過場：原本 innerHTML 整包重建是瞬間切換，補一段消散動畫 */
@keyframes lifeLostFlash{
  0%{opacity:1;transform:scale(1);filter:brightness(1);}
  30%{opacity:1;transform:scale(1.08);filter:brightness(2.4);}
  100%{opacity:.6;transform:scale(1);filter:brightness(1);}
}
.life-c.life-lost-flash{animation:lifeLostFlash .5s ease-in forwards;}

/* #8 按鈕材質：B-ORIG 是硬邊漫畫風，用「按下內縮＋陰影後退」取代玻璃/漸層，才符合既有語彙 */
.mbtn,.choice-btn,.abtn{transition:transform .08s,box-shadow .08s;box-shadow:3px 3px 0 rgba(0,0,0,.35);}
.mbtn:active,.choice-btn:active,.abtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.35);}

/* #9 Modal 進場動畫：.overlay 本身透明只是定位容器，實際可見的是 .modal，動它就夠。
   僅新增 animation，display:none↔flex 的既有顯示邏輯完全不動；CSS animation 在
   display:none→flex 的瞬間會自動重播，不需要改任何一處既有的 show/hide 呼叫點 */
.modal{animation:modalPopIn .22s cubic-bezier(.2,.8,.3,1);}
@keyframes modalPopIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.modal{animation:none;}}

/* #10 背景場景層次感：戰鬥半場原為純色平塗，補極輕微光暈緩動，不搶戲、不影響卡格版位 */
.half-field.hf-opp{background-image:radial-gradient(circle at 15% 20%,rgba(0,0,0,.05),transparent 55%);background-size:180% 180%;animation:fieldBgDrift 22s ease-in-out infinite;}
.half-field.hf-me{background-image:radial-gradient(circle at 85% 80%,rgba(255,51,0,.08),transparent 55%);background-size:180% 180%;animation:fieldBgDrift 22s ease-in-out infinite reverse;}
@keyframes fieldBgDrift{0%{background-position:0% 0%;}50%{background-position:40% 30%;}100%{background-position:0% 0%;}}
@media (prefers-reduced-motion:reduce){.half-field.hf-opp,.half-field.hf-me{animation:none;}}

.divider{
  height:36px;background:var(--b-red);margin:0;
  position:relative;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-top:var(--b-border);border-bottom:var(--b-border);
}
.divider::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:80px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,0.1) 0,rgba(0,0,0,0.1) 4px,transparent 4px,transparent 8px);
}
.divider::after{
  content:'— VS —';font-size:18px;font-weight:900;color:#fff;
  letter-spacing:8px;font-family:var(--b-font);z-index:1;
  position:static;background:none;padding:0;border:none;transform:none;
}
.half-field{flex:1;display:flex;flex-direction:column;gap:6px;min-height:0;}
.half-field .zone-row{flex:1;}

.hand-wrap{display:flex;flex-direction:column;align-items:center;padding:8px 0 10px;flex-shrink:0;overflow:visible;gap:0;background:var(--b-dark);border-top:var(--b-border);min-height:150px;}
.hand-lbl{display:none;}
.hand-cards{display:flex;padding-bottom:4px;justify-content:center;min-height:132px;align-items:flex-end;}
.hcard{
  width:100px;height:132px;cursor:pointer;margin-right:-24px;
  transition:transform .12s;overflow:hidden;border:2px solid #555;
  position:relative;flex-shrink:0;background:#222;
}
.hcard:last-child{margin-right:0;}
.hcard:hover{transform:translateY(-22px);z-index:40;border-color:var(--b-cream);}
/* 小手牌：滑過時不只上浮、再放大方便閱讀。中心放大→向下長進下緣已淨空的空間，盡量少蓋能源線。
   兩個可調旋鈕：scale（放大倍率）、translateY（上浮量，越大越不蓋下緣但越蓋能源線）。 */
#my-hand-cards .hcard:hover{transform:translateY(-26px) scale(1.4);transform-origin:center center;z-index:60;border-color:var(--b-cream);}
.hcard.sel-h{transform:translateY(-26px);border-color:var(--b-red)!important;z-index:50;box-shadow:0 0 0 2px var(--b-red);}
.hcard img{width:100%;height:100%;object-fit:cover;display:block;}
.hcard .hc-fallback{width:100%;height:100%;display:flex;flex-direction:column;background:#1a1a1a;}
.hc-art{flex:1;display:flex;align-items:center;justify-content:center;font-size:22px;}
.hc-bp{font-size:14px;font-weight:900;text-align:center;background:rgba(0,0,0,.9);color:var(--b-cream);padding:3px;font-family:'Courier New',monospace;}
.hc-ap{font-size:13px;text-align:center;background:rgba(0,0,0,.7);padding:2px;color:#888;font-family:'Courier New',monospace;}

/* ── 手牌展開盤 — B-ORIG ─────────────────────────────────── */
.hand-tray-backdrop{
  position:fixed;inset:0;z-index:200;
  background:transparent;
  pointer-events:none;
}
.hand-tray-backdrop.tray-open{pointer-events:all;}
.hand-tray{
  position:fixed;bottom:0;left:0;right:0;z-index:201;
  background:rgba(10,10,10,0.96);border-top:var(--b-border);
  box-shadow:0 -6px 24px rgba(0,0,0,0.4);
  padding:12px 20px 18px;
  transform:translateY(100%);
  transition:transform .22s cubic-bezier(.22,.68,0,1.2);
}
.hand-tray.tray-open{transform:translateY(0);}
.tray-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.tray-title{font-size:16px;font-weight:900;color:var(--b-cream);letter-spacing:3px;text-transform:uppercase;font-family:var(--b-font);}
.tray-hint{font-size:15px;color:#555;display:flex;align-items:center;gap:6px;font-family:Arial,sans-serif;}
.tray-hint kbd{background:rgba(255,255,255,.06);border:2px solid #333;padding:2px 6px;font-size:14px;color:#555;font-family:'Courier New',monospace;}
.tray-cards{
  display:flex;gap:12px;justify-content:center;
  overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;scrollbar-color:#333 transparent;
}
.tray-cards::-webkit-scrollbar{height:4px;}
.tray-cards::-webkit-scrollbar-thumb{background:#333;border-radius:2px;}
.tcard{
  width:112px;flex-shrink:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.tcard-img{
  width:112px;height:156px;overflow:hidden;
  border:2px solid #555;
  position:relative;
  transition:transform .12s,box-shadow .12s;
}
.tcard:hover .tcard-img{transform:translateY(-10px);box-shadow:0 14px 28px rgba(0,0,0,.6);border-color:var(--b-cream);}
.tcard-img img{width:100%;height:100%;object-fit:cover;display:block;}
.tcard-img .tc-fallback{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#1a1a1a;}
.tcard-img .tc-fallback .tc-art{font-size:38px;}
.tcard-img .tc-fallback .tc-bp{font-size:16px;color:var(--b-cream);font-weight:900;font-family:'Courier New',monospace;}
.tc-cost{
  position:absolute;top:5px;left:5px;
  background:rgba(0,0,0,.9);border:2px solid rgba(255,255,255,.4);
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:bold;color:#fff;pointer-events:none;
}
.tcard-name{font-size:14px;color:#a0aab8;text-align:center;width:112px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.tcard.t-playable .tcard-img{border-color:rgba(90,210,110,.4);box-shadow:0 0 10px rgba(70,190,90,.18);}
.tcard.t-playable .tcard-name{color:#80cc88;}
.tcard.t-unplayable{opacity:.42;}
.tcard.t-sel .tcard-img{border-color:#f0c040!important;box-shadow:0 0 14px rgba(240,192,64,.5)!important;}
.tcard.t-raid .tcard-img{border-color:#f0c040;box-shadow:0 0 8px rgba(240,192,64,.55);}

.opp-hcard{width:68px;height:90px;background:var(--b-black);border:2px solid #555;margin-right:-16px;flex-shrink:0;}
.opp-hcard:last-child{margin-right:0;}

/* 右側欄底部的階段操作群：margin-top:auto 把它推到欄位最下緣（原圓圈處） */
.rp-actions{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:10px;}
.rp-actions .abtn{width:100%;padding:13px 8px;font-size:17px;letter-spacing:1px;text-align:center;}
.abtn{
  padding:11px 28px;border:var(--b-border);background:var(--b-black);
  color:var(--b-cream);font-size:18px;font-weight:900;cursor:pointer;
  transition:all .15s;white-space:nowrap;font-family:var(--b-font);letter-spacing:2px;
}
.abtn:hover{background:var(--b-red);border-color:var(--b-red);}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;margin-left:8px;background:var(--b-cream);color:var(--b-black);border:2px solid var(--b-black);font-size:15px;font-weight:900;line-height:1;font-family:var(--b-font);letter-spacing:0;vertical-align:middle;}
.abtn.pri{background:var(--b-red);border-color:var(--b-red);color:#fff;}
.abtn.pri:hover{background:#cc2200;border-color:#cc2200;}
.abtn.dim{opacity:.3;pointer-events:none;}

/* Tooltip — B-ORIG */
.card-tooltip{
  position:fixed;background:var(--b-black);border:var(--b-border);
  padding:12px 14px;width:240px;z-index:1000;pointer-events:none;
  box-shadow:4px 4px 0 rgba(0,0,0,0.3);
}
.tt-name{font-size:14px;font-weight:900;color:var(--b-cream);margin-bottom:6px;font-family:var(--b-font);}
.tt-meta{display:flex;gap:10px;margin-bottom:8px;}
.tt-stat{display:flex;flex-direction:column;align-items:center;gap:1px;}
.tt-sv{font-size:18px;font-weight:900;color:var(--b-cream);font-family:'Impact',sans-serif;}
.tt-sl{font-size:9px;color:#888;letter-spacing:1px;text-transform:uppercase;font-family:Arial,sans-serif;}
.tt-div{height:2px;background:#333;margin:6px 0;}
.tt-eff{font-size:12px;color:#ccc;line-height:1.7;font-family:Arial,sans-serif;}
.tt-eff b{color:var(--b-red);font-weight:900;}

/* Modals — B-ORIG */
.overlay{position:fixed;inset:0;background:transparent;display:flex;align-items:center;justify-content:center;z-index:500;pointer-events:none;}
.modal{background:var(--b-cream);border:var(--b-border);padding:20px 22px;min-width:280px;max-width:380px;pointer-events:all;box-shadow:6px 6px 0 rgba(0,0,0,0.3);}
.modal-title{font-size:16px;font-weight:900;color:var(--b-black);margin-bottom:4px;font-family:var(--b-font);letter-spacing:1px;}
.modal-sub{font-size:12px;color:var(--muted);margin-bottom:12px;font-family:Arial,sans-serif;}
.modal-eff{font-size:13px;color:#333;background:var(--b-mid);padding:10px 12px;margin-bottom:14px;line-height:1.75;border-left:4px solid var(--b-red);font-family:Arial,sans-serif;}
.modal-eff b{color:var(--b-red);font-weight:900;}
.modal-choices{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.choice-btn{padding:10px 14px;border:2px solid #bbb;background:var(--b-cream);color:var(--b-black);font-size:13px;cursor:pointer;text-align:left;transition:all .15s;font-family:Arial,sans-serif;}
.choice-btn:hover{border-color:var(--b-black);background:var(--b-mid);}
.choice-btn.sel{border-color:var(--b-red);background:rgba(255,51,0,0.06);font-weight:700;}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;}
.mbtn{padding:8px 20px;font-size:13px;cursor:pointer;border:var(--b-border);font-weight:900;font-family:var(--b-font);letter-spacing:1px;}
.mbtn-yes{background:var(--b-black);color:var(--b-cream);}
.mbtn-yes:hover{background:var(--b-red);border-color:var(--b-red);}
.mbtn-no{background:var(--b-cream);color:var(--b-black);}

/* Waiting room — B-ORIG */
.waiting-box{text-align:center;padding:20px;}
.waiting-title{font-size:18px;font-weight:900;color:var(--b-black);margin-bottom:8px;font-family:var(--b-font);letter-spacing:2px;}
.waiting-code{font-size:40px;font-weight:900;color:var(--b-black);letter-spacing:8px;margin:14px 0;font-family:'Impact',sans-serif;}
.waiting-hint{font-size:13px;color:var(--muted);margin-bottom:16px;font-family:Arial,sans-serif;}
.player-list{display:flex;gap:12px;justify-content:center;margin-top:12px;}
.player-slot{
  width:130px;padding:14px;border:var(--b-border);
  background:var(--b-cream);text-align:center;
}
.player-slot.ready{border-color:var(--b-red);background:rgba(255,51,0,0.05);}
.ps-name{font-size:14px;font-weight:900;color:var(--b-black);margin-top:6px;font-family:var(--b-font);}
.ps-status{font-size:11px;margin-top:4px;font-family:Arial,sans-serif;}
.ps-waiting{color:var(--muted);}
.ps-ready{color:var(--b-red);font-weight:700;}
.spinner{
  width:24px;height:24px;border:3px solid #ddd;
  border-top-color:var(--b-red);border-radius:50%;
  animation:spin 1s linear infinite;margin:0 auto;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Toast — B-ORIG */
.toast{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  background:var(--b-black);border:var(--b-border);
  padding:12px 24px;font-size:14px;z-index:2000;font-weight:900;
  box-shadow:4px 4px 0 rgba(0,0,0,0.3);opacity:0;font-family:var(--b-font);
  transition:opacity .3s;pointer-events:none;color:var(--b-cream);letter-spacing:1px;
}
.toast.show{opacity:1;}
.toast.success{border-color:var(--b-red);color:var(--b-cream);}
.toast.error{background:var(--b-red);border-color:var(--b-red);color:#fff;}

/* ══ 動態效果動畫 ══ */
.fly-card{position:fixed;z-index:9999;pointer-events:none;border-radius:8px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.8);background:#1a1a2a;}
.fly-card img{width:100%;height:100%;object-fit:cover;display:block;}
.bp-float{position:fixed;z-index:9990;font-size:19px;font-weight:bold;pointer-events:none;text-shadow:0 2px 6px rgba(0,0,0,.9);white-space:nowrap;transform:translateX(-50%);animation:bpFloatUp 1.4s ease-out forwards;}
.bp-float.positive{color:#4ade80;}
.bp-float.negative{color:#f87171;}
@keyframes bpFloatUp{0%{opacity:0;transform:translateX(-50%) translateY(0) scale(.7)}15%{opacity:1;transform:translateX(-50%) translateY(-6px) scale(1.15)}70%{opacity:1;transform:translateX(-50%) translateY(-32px) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-52px) scale(.9)}}
/* 快速訊息浮層：淡入→往上飄→淡出（左右以 translateX(-50%) 對齊 left:19%）*/
@keyframes quickMsgFloatUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.82)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1;transform:translate(-50%,-98%) scale(1)}100%{opacity:0;transform:translate(-50%,-140%) scale(.94)}}
#quick-msg-float.qmf-play{animation:quickMsgFloatUp 2.6s ease-out forwards;}
.raid-announce{position:fixed;inset:0;z-index:9998;pointer-events:none;display:flex;align-items:center;justify-content:center;animation:raidBannerAnim 1.2s ease-out forwards;}
.raid-announce-text{font-size:clamp(36px,8vw,70px);font-weight:900;letter-spacing:6px;color:#ff4444;text-shadow:0 0 30px rgba(255,0,0,.8),0 0 60px rgba(255,100,0,.4),0 4px 12px rgba(0,0,0,1);transform:skewX(-6deg);}
@keyframes raidBannerAnim{0%{opacity:0}12%{opacity:1}72%{opacity:1}100%{opacity:0}}
.hcard.draw-appearing{animation:drawCardAppear 320ms ease-out;}
@keyframes drawCardAppear{from{opacity:0;transform:scale(0.88)}to{opacity:1;transform:scale(1)}}

/* ══ 平板觸控優化 ══ */
/* 全域消除「雙擊放大」與點擊 300ms 延遲：manipulation 允許捲動、但禁掉 double-tap zoom。
   捏合縮放（pinch）iOS 不吃 touch-action，另由 JS 攔截 gesture/多指 touchmove。 */
html,body{touch-action:manipulation;}
/* 🔴 鎖死 iOS 長按的原生選單（分享／儲存到照片／拷貝…）：
   使用者實機回報長按卡片會跳出該選單，干擾自訂長按檢視，且疑似與偶發死當有關。
   -webkit-touch-callout 全檔原本未設定（計數 0）→ 於此補齊。
   同時禁止圖片拖曳與文字選取，避免長按觸發選字/拖曳。 */
.field-card,.hcard,.opp-hcard,.card-item,.tcard,.hp-card,.slot,
.field-card img,.hcard img,.opp-hcard img,.card-item img,.tcard img,.hp-card img,
#card-preview-content img,#mulligan-cards-row img,#tt img{
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}

.field-card,.hcard,.opp-hcard,.card-item,.slot,.mini-stack,.life-c,.ap-c,.abtn,.phase-btn,.mbtn,.choice-btn,.btn-room,.btn-primary,.btn-join,.lib-chip,.lib-series-chip{
  touch-action:manipulation;
}
.field-card,.hcard,.card-item{-webkit-user-select:none;user-select:none;}

/* ══ 觀戰模式（god-view 唯讀旁觀）══ */
/* 隱藏所有操作 UI（不是反灰），確保觀戰者無法操作 */
body.spectating .rp-actions,
body.spectating #extraDrawBtn,
body.spectating #game-chat-toggle,
body.spectating #game-chat-panel,
body.spectating #solo-switch-btn { display:none !important; }
/* 觀戰頂部橫幅 */
#spectator-banner{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;align-items:center;justify-content:center;gap:16px;
  background:rgba(20,16,12,0.92);color:var(--b-cream,#efe7d4);padding:7px 16px;font-weight:900;letter-spacing:1px;
  font-family:var(--b-font);border-bottom:3px solid #f0c040;box-shadow:0 3px 0 rgba(0,0,0,0.3);}
#spectator-banner .sb-eye{font-size:16px;color:#f0c040;}
#spectator-banner .sb-count{font-size:13px;color:#9fd0ff;}
#spectator-banner button{font-size:13px;font-weight:900;padding:4px 14px;border:2px solid #f0c040;background:#f0c040;color:#1a1612;
  border-radius:6px;cursor:pointer;font-family:var(--b-font);}
/* 觀戰橫幅內的視角切換鈕與雙方名稱 */
#spectator-banner .sb-vs{font-size:13px;color:var(--b-cream,#efe7d4);}
#spectator-banner .sb-vs b{color:#9fd0ff;padding:1px 4px;border-radius:4px;}
/* 該回合（行動方）玩家名字底色標示 */
#spectator-banner .sb-vs b.sb-turn{background:#3aa55a;color:#fff;box-shadow:0 0 8px rgba(58,165,90,0.6);}
#spectator-banner .sb-switch{font-size:12px;font-weight:900;padding:3px 12px;border:2px solid #9fd0ff;background:transparent;
  color:#9fd0ff;border-radius:6px;cursor:pointer;font-family:var(--b-font);}
/* 觀戰聊天面板（獨立於對戰聊天）*/
#spectator-chat-panel{position:fixed;right:14px;bottom:14px;width:300px;max-height:46vh;z-index:9000;display:flex;flex-direction:column;
  background:var(--b-cream,#efe7d4);border:var(--b-border,3px solid #2a2622);box-shadow:6px 6px 0 rgba(0,0,0,0.3);}
#spectator-chat-panel .scp-head{display:flex;align-items:center;gap:6px;background:#1a1612;color:var(--b-cream,#efe7d4);padding:7px 12px;flex-shrink:0;cursor:pointer;}
#spectator-chat-panel .scp-head span.scp-title{font-size:14px;font-weight:900;font-family:var(--b-font);letter-spacing:1px;flex:1;}
#spectator-chat-panel .scp-toggle{font-size:14px;font-weight:900;line-height:1;padding:2px 6px;background:transparent;border:none;color:var(--b-cream,#efe7d4);cursor:pointer;flex:none;}
#spectator-chat-messages{flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:4px;min-height:90px;background:#fff;}
#spectator-chat-panel .scp-input{display:flex;gap:6px;padding:8px;border-top:2px solid #2a2622;flex-shrink:0;}
#spectator-chat-panel input{flex:1;font-size:13px;padding:5px 8px;border:2px solid #2a2622;border-radius:5px;}
#spectator-chat-panel button{font-size:13px;font-weight:900;padding:5px 12px;border:none;background:#2a2622;color:var(--b-cream,#efe7d4);border-radius:5px;cursor:pointer;}
/* 收起：只留標題列（避免訊息多時擋住畫面）*/
#spectator-chat-panel.collapsed{max-height:none;}
#spectator-chat-panel.collapsed #spectator-chat-messages,
#spectator-chat-panel.collapsed .scp-input{display:none;}

/* ══════════════════════════════════════════════════════════════
   🔴 修 iOS Safari「畫面上方被切掉」：100vh → 100dvh
   iOS Safari 的 CSS `100vh` 是「網址列收起時的螢幕高」（large viewport），
   不扣掉實際佔著空間的網址列／分頁列 → 容器比真正看得到的區域高，
   盤面在這個過高的盒子裡置中，上緣就被推出可視範圍＝使用者回報的畫面被切。
   `100dvh`（dynamic viewport）由瀏覽器原生跟著網址列收合即時變動，永遠等於
   實際可視高，且**不需要 JS 維護**（先前用 JS 變數同步的做法會過期，反而在
   桌面把盤面切掉 206px —— 純 CSS 沒有這種失同步問題）。
   不支援 dvh 的舊瀏覽器落回 100vh＝維持原行為，不造成回歸。
   放在樣式表末端以覆蓋前面所有 height:100vh 宣告（含 #screen-game 的 id 選擇器）。
══════════════════════════════════════════════════════════════ */
@supports (height:100dvh){
  body, .screen, #screen-game{ height:100dvh; }
}

/* 區域檢視清單（場外／移除區…）：桌面維持大縮圖格狀，文字欄僅手機顯示 */
.cv-info{display:none;}

/* 🔴 手機直式專用鈕的「基礎隱藏」必須放在 media query 之外：
   若只寫在 @media 內，桌面／橫式不套用該規則 → button 會回到預設
   display:inline-block 而顯示出來（實測外洩，已修）。 */
#mp-cancel-btn,#mp-preview-close,#mp-modal-collapse{display:none;}

/* ══════════════════════════════════════════════════════════════
   📱 手機 RWD（僅附加覆蓋，不動桌面版原規則）
   斷點刻意收窄為「真手機」：寬≤600px（手機直向）或 高≤520px（手機橫向）。
   ⚠ 不可放寬到 768/820 —— 會把 iPad 直向（768×1024）一起吃進來，
     導致平板被迫使用手機版面。
   對戰盤面：手機直向走「直式原生排版」（見下方直式盤面區塊），非強制橫向。
══════════════════════════════════════════════════════════════ */

@media (max-width:600px), (max-height:520px){

  /* ---- 登入畫面：品牌區與表單區改上下堆疊 ---- */
  #screen-login{overflow-y:auto;flex-direction:column;align-items:stretch;justify-content:center;}
  .login-box{flex-direction:column;width:100%;max-width:100%;margin:auto;padding:0 18px;}
  .login-brand-section{
    width:100%;border-right:none;border-bottom:var(--b-border);
    padding:26px 20px 18px;align-items:flex-start;flex-shrink:1;
  }
  .login-sub{font-size:34px;}
  .login-brand-ver{margin-bottom:14px;}
  .login-brand-deco{display:none;}
  .login-form-section{padding:24px 20px 30px;}
  .login-form-title{margin-bottom:22px;}
  .login-credit{position:static;transform:none;text-align:center;display:block;margin:14px 0 20px;}

  /* ---- 共用頁首：允許換行、縮小按鈕 ---- */
  .lobby-header{height:auto;min-height:52px;flex-wrap:wrap;align-items:center;}
  .lobby-logo{padding:0 14px;font-size:15px;height:44px;}
  /* 版本號顯示於頁首（使用者要求填入原本空白的黑框） */
  .lobby-ver{display:flex;padding:0 10px;font-size:11px;letter-spacing:0;white-space:nowrap;}
  /* 按鈕列改靠左（原 margin-left:auto 會把整行推到右邊，右側留一大塊空白） */
  .user-info{flex-wrap:wrap;gap:6px;padding:6px 12px;margin-left:0;}
  .user-badge{padding:3px 10px;font-size:12px;}
  .btn-logout{padding:4px 10px;font-size:11px;}

  /* ---- 大廳：左右兩欄改上下堆疊、整頁可捲動 ---- */
  #screen-lobby{overflow-x:hidden;}
  /* 🔴 改 block 堆疊，不可留 grid：
     grid 在容器有固定高度時會把 auto 列「拉伸平分」（實測 380px/377px），
     但 .lobby-left 內容需 647px → 溢出的「在線玩家 / 最近對戰」被第二列
     (.lobby-right 有自己的背景色) 直接蓋住而看不見。
     ⚠ 此坑會騙過 getBoundingClientRect：元素座標正常、也非 display:none，
        只是被後面的列疊在上面 → 判定可見性不能只看 rect。 */
  .lobby-body{
    display:block !important; grid-template-columns:none !important;
    overflow-y:auto; min-width:0;
  }
  .lobby-left{
    border-right:none;border-bottom:var(--b-border);
    overflow:visible;padding:20px 16px;gap:20px;min-width:0;
  }
  .lobby-right{overflow:visible;padding:20px 16px;gap:20px;min-width:0;}
  #lobby-online-list{height:180px !important;}
  /* 🔴 手機版 .lobby-body 改 block 堆疊後，.lobby-right 不再受固定高度容器
     約束，flex:1 對聊天室視窗失效，只剩 min-height 當下限 → 訊息越聊越多
     視窗就無限往下撐高，把整頁越拉越長。改成固定 height + overflow-y:auto，
     讓聊天室自己內部捲動，不再撐大版面。 */
  #lobby-chat-messages{height:260px !important;min-height:260px !important;max-height:260px !important;flex:none !important;overflow-y:auto !important;}
  .tile-big{padding:30px 16px;font-size:26px;letter-spacing:3px;}
  .tile-big .tile-icon{font-size:32px;}
  /* 🔴 .tile-row 是 grid repeat(2,1fr)，子項預設 min-width:auto 不能縮到內容寬以下
     → 手機上兩塊各撐成 198px（>343px 可用寬），第二塊「卡牌圖鑑」右緣衝到 424 被裁掉。
     min-width:0 讓 1fr 真正生效；同時縮字級避免文字過擠。 */
  .tile-row > *{min-width:0;}
  .tile-sm{font-size:16px;letter-spacing:0;padding:10px 6px;}
  .tile-sm .tile-icon{font-size:24px;}
  .stat-val{font-size:44px !important;}
  #stat-total{font-size:52px !important;}
  /* 🔴 戰績框內容被切（使用者實機回報）：長系列名（如「無職轉生～到了異世界
     就拿出真本事～」）會換到 3 行把格子撐高，擠掉下方的「（只取 8 人以上賽事）」
     與「最愛用系列」標籤。縮小系列名字級並確保各層不裁切。 */
  .lobby-left .stat-box{overflow:visible !important;padding:10px 6px !important;}
  #stat-fav-series{font-size:15px !important;line-height:1.35 !important;word-break:break-all;}
  #stat-fav-series-games{font-size:12px !important;}

  /* ---- 牌組管理：格線改 2 欄、整頁可捲動 ---- */
  #screen-deck{flex-direction:column;overflow-y:auto;}
  #screen-deck > div:nth-child(2){height:auto !important;max-width:100% !important;padding:16px 14px !important;}
  #deck-list{grid-template-columns:repeat(2,1fr) !important;}
  /* 🔴「＋新增牌組 / ⬇匯入牌組」在窄螢幕被 flex 擠壓 → 文字逐字換行成直排。
     讓標題列可換行、按鈕不斷字。 */
  #screen-deck > div:nth-child(2) > div:first-child{flex-wrap:wrap !important;gap:8px !important;}
  #screen-deck .btn-room{
    white-space:nowrap !important; padding:8px 14px !important;
    font-size:13px !important; width:auto !important; flex:0 0 auto !important;
  }

  /* ---- 牌組編輯：左（選卡）右（牌組資訊）改上下堆疊、整頁可捲動 ---- */
  /* 🔴 高度勿寫死 100vh：Android/iOS 的 100vh＝網址列收起時的高，比實際可視區高，
     而 body 是 100dvh＋overflow:hidden → 超出的底部被裁、捲不到＝「儲存牌組」鈕按不到
     （玩家回報 2026-09-14）。沿用 .screen 的 100vh→100dvh 回退寫法。 */
  #screen-deck-editor{flex-direction:column;height:100vh;height:100dvh;overflow-y:auto;}
  #screen-deck-editor > div:nth-child(2){height:auto !important;overflow:visible !important;display:block !important;}
  #screen-deck-editor > div:nth-child(2) > div{flex-direction:column !important;height:auto !important;overflow:visible !important;}
  /* 左：選卡區 */
  #screen-deck-editor > div:nth-child(2) > div > div:first-child{border-right:none !important;overflow:visible !important;}
  #editor-card-grid{grid-template-columns:repeat(3,1fr) !important;overflow:visible !important;}
  /* 觸控裝置沒有真正的 hover，點過會「沾黏」放大不歸位（比照 .hcard 的既有教訓），停用 */
  .editor-card-item:hover{transform:none !important;z-index:auto !important;}
  /* 右：牌組資訊區 */
  #screen-deck-editor > div:nth-child(2) > div > div:last-child{
    width:100% !important;border-top:var(--b-border);
  }
  #deck-card-list{overflow:visible !important;max-height:none !important;}

  /* ---- 圖鑑／卡片詳情彈窗微調 ---- */
  .lib-gate-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .lib-gate-title{font-size:22px;}
  #ap-card-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr)) !important;}

  /* ---- 🔴 對話框（29 處共用 .modal）：手機上必須可捲動 ----
     原本 .modal 無 max-height 也無 overflow → 選項多時（如 8 個 choice-btn 高 609px）
     在 375px 高的手機橫向會上下都被裁掉，且無法捲動＝「確定」鈕永遠按不到 → 對局卡死。
     修法：限高＋可捲動；並把動作鈕列 sticky 在底部，確保任何時候都按得到。 */
  /* 尺寸原則（使用者指定）：彈窗整體縮小到符合手機比例，但**文字級數不縮**——
     縮的是「外框贅肉」（內距、間距、圖片），讓框變小而文字仍清晰易讀。
     高度上限 90vh→72vh：原本吃掉 90% 畫面高，牌桌幾乎全被蓋住。 */
  .modal{
    max-height:72vh; overflow-y:auto;
    padding:10px 12px;
    min-width:0; width:min(340px,88vw); max-width:88vw;
    font-size:13px;
  }
  .modal-title{font-size:14px;margin-bottom:2px;letter-spacing:0;}
  .modal-sub{font-size:11px;margin-bottom:6px;}
  .modal-eff{padding:6px 8px;margin-bottom:8px;line-height:1.55;font-size:12.5px;border-left-width:3px;}
  .modal-choices{gap:4px;margin-bottom:8px;}
  .choice-btn{padding:7px 10px;font-size:12.5px;}
  .mbtn{padding:6px 14px;font-size:12px;}
  .modal-btns{
    position:sticky; bottom:-12px; z-index:2;
    background:var(--b-cream); padding:8px 0 4px; margin-top:4px;
  }

  /* ---- 🔴 調度（開局手牌）：卡片被 flex-shrink 壓扁只露一角 ----
     #mulligan-cards-row 是 flex column 的子項、預設 flex-shrink:1，
     手機橫向可用高不足時被從 230px 壓成 110px，而卡片仍是 230px → 只看得到 48%。
     修法：禁止壓縮，並依可用高度等比縮放卡片（保持 169:230 比例），
     寬度不足時由既有的 overflow-x:auto 橫向捲動。 */
  #mulliganModal{
    gap:8px !important; padding:8px 10px !important; overflow-y:auto !important;
  }
  #mulligan-cards-row{
    flex-shrink:0 !important;
    max-width:calc(100vw - 20px) !important;
    gap:6px !important;
  }
  /* 註：曾試作「盤面卡片徽章反向放大」原型（v3.1.5），經使用者實機評估
     判定放太大、且非其訴求 → 已完整還原。盤面卡面與徽章維持原設計。
     使用者的「縮小 UI／文字優先」訴求是針對**彈出式視窗**，見下方各節。 */

  /* 🔴 場外／移除區點選卡片後的詳情：卡圖固定 200x276，在窄框內只剩約 120px
     給文字 → 卡名與效果文被擠成一字一行（使用者回報「擠成一條直線」）。
     縮小卡圖讓文字有足夠寬度。場外與移除區共用此彈窗，一次修好兩處。 */
  #cardDetailModal .modal{max-width:94vw !important;}
  #cardDetailModal img{width:104px !important;height:143px !important;}
  #cardDetailModal .modal > div:first-child{gap:10px !important;}

  /* ---- 🔴 區域檢視（場外／移除區）：大圖格狀 → 文字為主清單 ----
     原本每張 130x178 大縮圖且無任何文字，手機上塞滿整頁又難辨識。
     改為「小縮圖＋卡名＋BP/需求」的清單，以文字辨識為主、圖僅作輔助。 */
  .cv-list{
    flex-direction:column; flex-wrap:nowrap !important;
    gap:4px !important; max-height:46vh !important; margin:8px 0 !important;
  }
  .cv-item{
    display:flex !important; align-items:center; gap:8px;
    width:100%; padding:3px 6px; background:var(--b-cream);
  }
  /* 圖縮到僅供辨識（不可再小到看不見），文字維持清晰級數 */
  .cv-thumb{ width:34px !important; height:47px !important; }
  .cv-info{ display:block; flex:1; min-width:0; text-align:left; }
  .cv-name{
    font-size:13px; font-weight:900; color:var(--b-black); line-height:1.3;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .cv-meta{ font-size:11px; color:var(--muted2); font-family:Arial,sans-serif; margin-top:1px; }

  /* ---- 🔴 效果選擇提示橫幅：改為頂端細長條，不再蓋住對手前線 ----
     原本 top:40px 置中的方塊，訊息長就換行變高，正好蓋住對手前線＝
     玩家要點選的目標區，導致「看得到提示但點不到卡」。
     改貼齊頂端、單行省略，只佔頁首那一帶；點訊息可展開全文。 */
  #effectSelectBanner{
    top:0 !important; left:0 !important; right:0 !important;
    transform:none !important; max-width:100vw !important;
    padding:5px 8px !important; gap:6px !important;
    font-size:11px !important;
    border-width:0 0 2px 0 !important;
    text-align:left !important;
  }
  #effectSelectMsg{
    flex:1; min-width:0; cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #effectSelectBanner.esb-expanded #effectSelectMsg{
    white-space:normal; overflow:visible; text-overflow:clip;
  }
  #effectSelectCount{ flex-shrink:0; min-width:28px !important; }
  #effectSelectBanner button{
    flex-shrink:0; padding:4px 10px !important; font-size:11px !important;
  }

  /* ---- 手牌選擇框（showHandPickModal）：手機上縮小，避免整個蓋住牌桌 ----
     使用者回報「選擇框太大 → 看不到檯面／場外／移除區」。縮圖與格子改小，
     內距壓縮，讓框體只佔部分畫面；另於標題列提供場外/移除區快捷鈕與收合鈕。 */
  #hand-pick-box{
    padding:10px 12px !important;
    min-width:0 !important;
    max-width:90vw !important;
    max-height:72dvh !important;
    font-size:13px !important;
  }
  #hand-pick-box .hp-header{
    margin:-10px -12px 6px !important; padding:8px 12px 5px !important;
    font-size:14px !important;
  }
  #hand-pick-box .hp-slot{ width:48px !important; height:66px !important; }
  #hand-pick-box .hp-card{ width:42px !important; height:58px !important; }
  #hand-pick-box > div[style*="min-height:130px"]{ min-height:74px !important; padding:5px !important; gap:6px !important; }

  #mulligan-cards-row > div{
    width:auto !important;
    /* 三重上限：①不超過原設計 ②垂直塞得下 ③7 張能一次橫向全看到
       （第③項避免玩家沒發現右邊還有卡就做了調度決定；1.36 = 230/169 卡片比例） */
    height:min(230px, calc(100vh - 170px), calc((100vw - 66px) / 7 * 1.36)) !important;
    height:min(230px, calc(100dvh - 170px), calc((100vw - 66px) / 7 * 1.36)) !important;
    aspect-ratio:169 / 230;
  }
}

/* ══════════════════════════════════════════════════════════════
   📱📐 直式盤面【原型】（手機直向）
   使用者實測橫式「眼睛痠痛」→ 改做直式。
   🔴 關鍵不是「轉方向」而是「放棄固定畫布縮放、改原生排版」：
      橫式 min(812/1920, 375/1080) 與直式 min(375/1080, 812/1920) 同為 0.347，
      單純轉向毫無助益；唯有取消 transform:scale，文字才會回到真實尺寸
      （原本 13px 字被乘 0.347＝4.5px），卡片也能依實際寬度放大（66→80px）。
   作法：純 CSS 重排既有 DOM（不動 JS）→ 橫式與桌面完全不受影響，隨時可撤。
   版面：頁首 / 對手資訊條 / 對手能源·前線 / VS / 我方前線·能源 / 我方資訊條
        / 手牌 / 動作鈕
══════════════════════════════════════════════════════════════ */
@media (max-width:600px) and (orientation:portrait){
  #screen-game #game-stage{display:flex !important;}

  /* 🔴 解除固定畫布縮放：改為填滿視窗的原生排版 */
  /* 🔴 display 必須限定在 .active：直接寫 #screen-game{display:block !important}
     會蓋掉 .screen{display:none}，導致**未進對戰時遊戲畫面仍渲染在大廳下方**
     （實測 active:false 卻 display:block、位置 t812-1624，占 375x812），
     使用者因而在大廳底部看到戰鬥畫面的階段列，且大廳被撐長難以捲動。 */
  #screen-game{overflow:hidden;}
  #screen-game.active{display:block !important;}
  #game-stage{
    width:100% !important; height:100% !important;
    transform:none !important;                 /* 關鍵：不再整體縮放 */
    flex-direction:column !important;
  }

  /* 頁首：階段列與按鈕壓縮以塞進 375px */
  .game-header{height:34px !important;flex-shrink:0;}
  .phase-bar{position:static !important;transform:none !important;flex:1;justify-content:center;}
  .phase-btn{font-size:11px !important;padding:0 6px !important;letter-spacing:0 !important;}
  .turn-badge{font-size:11px !important;padding:0 6px !important;letter-spacing:0 !important;}
  .game-header > div:last-child button{font-size:9px !important;padding:0 5px !important;}
  .game-header > div:first-child{padding:0 6px !important;font-size:12px !important;}

  /* 三欄 grid → 垂直堆疊：生命條 / 場地 / 資訊條＋動作鈕 */
  .game-outer-wrap{
    display:flex !important; flex-direction:column !important;
    grid-template-columns:none !important; flex:1; min-height:0;
  }
  /* 🔴 鎖住橡皮筋/過捲：使用者回報「雙擊或縮放手勢會讓畫面跑掉」。
     捏合縮放本已由既有全域攔截處理、雙擊縮放由 touch-action:manipulation 停用，
     殘留的位移多半來自 overscroll（下拉回彈）→ 一併鎖死。 */
  html,body{overscroll-behavior:none !important;}
  #screen-game,#game-stage{overscroll-behavior:none !important;}

  /* 🔴 舊的左右欄整個隱藏：內容已由 JS 搬進上／下資訊條（見 mobile portrait layout）。
     桌面版把雙方資訊混在同兩欄，直接沿用會分不清誰是誰。 */
  #left-panel,#right-panel{display:none !important;}

  /* 資訊條：對手全部在上、我方全部在下，橫向緊湊單行 */
  /* nowrap＋橫向捲動：資訊條必須維持單行，否則換行會吃掉場地高度 */
  .mp-bar{
    display:flex !important; align-items:center; flex-wrap:nowrap;
    gap:5px; padding:2px 5px; flex-shrink:0;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
    background:var(--b-mid); border-bottom:2px solid #000;
  }
  .mp-bar::-webkit-scrollbar{display:none;}
  #mp-my-bar{background:var(--b-dark);border-top:2px solid #000;border-bottom:none;}
  #mp-act-bar{background:var(--b-cream);border-top:2px solid #000;gap:5px;}
  #mp-my-bar .mp-chip-lb{color:#bbb;}
  .mp-chip{display:flex;align-items:center;gap:3px;flex-shrink:0;}
  /* 從場地搬進來的資訊框原本是絕對定位（inline style），需歸零否則會破版 */
  .mp-bar > div{
    position:static !important;
    top:auto !important; bottom:auto !important; left:auto !important; right:auto !important;
    transform:none !important; margin:0 !important; flex-shrink:0;
    display:flex !important; align-items:center; gap:4px;
  }
  .mp-bar > div > div{margin:0 !important;}
  .mp-chip-lb{
    font-size:9px;font-weight:900;color:var(--muted2);
    letter-spacing:0;white-space:nowrap;font-family:Arial,sans-serif;
  }
  /* 🔴 緊湊尺寸一律綁在 .mp-bar（而非 .mp-chip）：
     從場地整組搬進來的框不在 chip 內，若只綁 chip 會吃不到規則 →
     AP 格會維持設計尺寸 64x86（原生排版下就是實際像素）把資訊條撐到 ~100px。 */
  .mp-bar .mini-stack{
    width:auto !important; min-width:26px !important; height:19px !important;
    font-size:12px !important; margin:0 !important; padding:0 4px !important;
  }
  .mp-bar .ap-c{
    width:11px !important; height:15px !important; font-size:0 !important;
    padding:0 !important; border-width:1px !important;
  }
  .mp-bar .ap-c.mini{width:9px !important;height:13px !important;}
  .mp-bar .ap-row{gap:2px !important;flex-wrap:nowrap !important;}
  /* 搬進來的框內原有標籤字級偏大，統一壓成小標 */
  .mp-bar > div div{font-size:9px !important;line-height:1.2 !important;}
  .mp-bar > div .mini-stack,.mp-bar > div .ap-c{font-size:12px !important;}
  /* 生命：直排格 → 橫排小方塊 */
  .life-grid{display:flex !important;width:auto !important;gap:1px !important;margin:0 !important;}
  /* 生命格：內含絕對定位的序號 span（9px），格子過小會讓數字溢出紅塊之外
     （使用者回報「數字跟紅色底色沒對齊」）→ 放大格子並縮小序號使其容得下 */
  .life-c{width:14px !important;height:19px !important;border-width:1px !important;position:relative;}
  .life-c span{font-size:8px !important;bottom:0 !important;right:1px !important;line-height:1 !important;}

  /* 🔴 盤面卡片徽章：直式為原生排版，徽章維持設計尺寸(15px/padding 3px 7px)
     但卡片只有 83px 寬 → BP(左下)與產能(右下)互相重疊（使用者回報「徽章重疊」）。
     縮小並讓兩者在 83px 內並排不相撞。 */
  .field-card .fc-badge{
    font-size:9px !important; padding:1px 3px !important; gap:2px !important;
    border-radius:4px !important; border-width:1px !important;
  }
  .field-card .fc-badge.fcb-cost{top:2px !important;left:2px !important;}
  .field-card .fc-badge.fcb-bp{bottom:2px !important;left:2px !important;}
  .field-card .fc-badge.fcb-prod{
    bottom:2px !important; right:2px !important;
    border-radius:4px !important; padding:1px 3px !important;
  }

  /* 🔴 阻擋／防禦選擇：改貼齊底部的精簡面板，讓上方牌桌保持可見
     （使用者回報「出現阻擋UI時無法拉動、看不到場面」）*/
  #defendModal{align-items:flex-end !important;}
  #defendModal .modal{
    width:100% !important; max-width:100% !important;
    max-height:52vh !important; border-radius:0 !important;
    margin:0 !important;
  }

  /* 結算已使用上方 .ua-result-* 的 responsive 樣式，不再覆寫所有按鈕。 */

  /* 手機無鍵盤 → ESC 的替代取消鈕（見 JS：直接派送 Escape 事件複用既有邏輯） */
  #mp-cancel-btn{
    position:fixed; top:38px; right:6px; z-index:9998;
    padding:6px 10px; font-size:11px; font-weight:900;
    background:var(--b-red); color:#fff; border:2px solid #fff;
    border-radius:6px; cursor:pointer; display:none;
    font-family:var(--b-font); box-shadow:0 2px 8px rgba(0,0,0,.5);
  }
  body.mp-cancelable #mp-cancel-btn{display:block;}

  /* 所有大型彈窗的通用收合鈕（左上，避開右上的取消鈕） */
  #mp-modal-collapse{
    position:fixed; top:6px; left:6px; z-index:10000;
    padding:6px 12px; font-size:12px; font-weight:900; line-height:1.3;
    background:var(--b-black); color:var(--b-cream);
    border:2px solid var(--b-cream); border-radius:6px; cursor:pointer;
    font-family:var(--b-font); box-shadow:0 2px 8px rgba(0,0,0,.5);
  }
  body.mp-has-modal #mp-modal-collapse{display:block;}

  /* 動作列：主要按鈕維持可按，其餘壓成小鈕，全部單行
     🔴 nowrap＋width:auto 必要：否則按鈕被擠成 30px 寬 → 文字直排，
        「快速訊息」會撐到 81px 高把整條列拉高。 */
  #mp-act-bar .rp-actions{margin:0 !important;flex-direction:row !important;gap:4px !important;}
  #mp-act-bar .abtn{padding:7px 9px !important;font-size:11px !important;white-space:nowrap !important;}
  #mp-act-bar #extraDrawBtn,
  #mp-act-bar #game-chat-toggle,
  #mp-act-bar #quick-msg-toggle{
    padding:5px 7px !important; font-size:9px !important;
    white-space:nowrap !important; width:auto !important; height:auto !important;
    flex-shrink:0 !important;
  }
  /* 對手背面手牌：直式下不顯示（數量已在對手資訊條） */
  #opp-hand-cards{display:none !important;}

  /* 🔴 卡片預覽欄：桌面側欄寬 440px，直式會橫壓在畫面正中央（使用者回報「擋在中間」）
     → 改成「點卡片才浮出」的底部抽屜；預設隱藏，避免長駐蓋住我方資訊條與動作鈕。
        點抽屜本身即可收起（見 mobile portrait layout 的 wrap 邏輯）。 */
  /* 🔴 pointer-events:none 是關鍵：抽屜彈出時會蓋住我方能源線（t467-579），
     導致「點得到手牌卻放不到場上」。改為不攔截點擊 → 觸控穿透到底下的
     格子，仍可正常出牌；另於點擊格子時自動收起（見 JS）。 */
  /* 🔴 卡片資訊抽屜：使用者回報「內容被切除、沒辦法移動、size 不符使用」
     → 改為可捲動閱讀的底部面板（pointer-events:auto + overflow-y:auto），
        並由 JS 注入明顯的 ✕ 關閉鈕；關閉後即可正常點格子出牌。
        （先前為了不擋出牌而設 pointer-events:none，代價是無法捲動→內容被截斷） */
  /* 🔴 卡片資訊抽屜改置「對手半場」（使用者要求）：
     原本停在底部會蓋住我方前線/能源線 → 每次看完都得先關閉才能出牌。
     改停在上方對手區後，看資訊的同時我方檯面仍完全可操作。
     位置固定 → ✕ 鈕可純 CSS 定位，得以移除原本的 MutationObserver ＋
     getBoundingClientRect 追蹤（那是反覆開關時最可疑的當機來源）。 */
  #card-preview-content{
    display:none !important;
    position:fixed !important; left:0 !important; right:0 !important;
    top:81px !important; bottom:auto !important; width:auto !important;
    max-height:38vh !important; overflow-y:auto !important;
    z-index:150 !important;
    border-top:3px solid #000 !important; border-bottom:3px solid #000 !important;
    padding-top:28px !important;      /* 讓出 ✕ 鈕的位置 */
    -webkit-overflow-scrolling:touch;
  }
  body.mp-preview-open #card-preview-content{display:block !important;}
  #mp-preview-close{
    position:fixed; top:85px; right:8px; z-index:151; display:none;
    padding:3px 12px; font-size:13px; font-weight:900; line-height:1.4;
    background:var(--b-black); color:var(--b-cream);
    border:2px solid var(--b-cream); border-radius:6px; cursor:pointer;
    font-family:var(--b-font);
  }
  body.mp-preview-open #mp-preview-close{display:block;}

  /* 🔴「i」卡片狀態浮窗：桌面依點擊座標定位，直式下會算到畫面外（使用者回報看不到）
     → 強制夾在視窗內、貼底、可捲動 */
  #card-status-popup{
    left:8px !important; right:8px !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    top:auto !important; bottom:8px !important;
    max-height:46vh !important; overflow-y:auto !important;
  }

  /* 🔴 調度手牌：原本單行 7 張擠成 60px 高（使用者回報「卡片太小」）
     → 改兩行呈現、卡片放大約一倍 */
  #mulligan-cards-row{
    flex-wrap:wrap !important; justify-content:center !important;
    max-width:100% !important; gap:6px !important; overflow-x:visible !important;
  }
  #mulligan-cards-row > div{
    width:calc((100vw - 46px) / 4) !important;
    height:auto !important; max-height:none !important;
    aspect-ratio:169 / 230;
  }

  /* 依使用者要求移除的元素（手機直式） */
  #hand-tray-btn{display:none !important;}          /* 手牌已夠大，不需「大手牌」 */
  .zone-tag{display:none !important;}                /* 前線／能源線標示 */
  .game-header > div:first-child{display:none !important;}  /* 左上「UA▲」 */
  /* 聊天／快速訊息／額外抽牌：原為整條寬按鈕，會把資訊條撐成兩行、吃掉場地高度
     → 壓成行內小鈕，讓上下資訊條各自維持單行 */
  #game-chat-toggle,#quick-msg-toggle{
    width:auto !important;margin:0 !important;padding:2px 6px !important;font-size:9px !important;
    letter-spacing:0 !important;
  }
  #extraDrawBtn{
    width:auto !important;margin:0 !important;padding:2px 6px !important;
    font-size:9px !important;white-space:nowrap;flex-shrink:0;
  }
  /* 右欄的牌庫/場外/移除：大方塊 → 行內小數字 */
  #right-panel{border-bottom:none !important;border-top:2px solid #000 !important;}
  #right-panel .mini-stack{
    width:auto !important; min-width:30px !important; height:22px !important;
    font-size:13px !important; margin:0 !important; padding:0 5px !important;
  }
  #right-panel .rp-divider{display:none !important;}
  .rp-actions{
    margin:0 0 0 auto !important; flex-direction:row !important; gap:5px !important;
    padding:0 !important; flex-shrink:0;
  }
  .rp-actions .abtn{
    width:auto !important; padding:6px 10px !important; font-size:12px !important;
    letter-spacing:0 !important;
  }
  .abtn .kbd{display:none !important;}

  /* 場地：四條線垂直排列，卡片改由「寬度」決定尺寸（原本由高度決定） */
  .field-wrap{flex:1;min-height:0;}
  .field-main{gap:0 !important;}
  .half-field.hf-opp,.half-field.hf-me{padding:3px 5px !important;gap:3px !important;}
  .zone-row{gap:0 !important;}
  .zone-tag{
    width:auto !important; font-size:8px !important; padding:2px 3px !important;
    margin:0 3px 0 0 !important; letter-spacing:0 !important; writing-mode:vertical-rl;
    text-orientation:upright; line-height:1; align-self:stretch; display:flex;
    align-items:center; justify-content:center; flex-shrink:0;
  }
  .zone-spacer{display:none !important;}
  .slots{gap:4px !important;justify-content:flex-start !important;align-items:stretch !important;}
  /* 卡格改由「寬度」決定（四等分），但不得高於所在列 → max-height 兜底避免被裁 */
  .slot{
    height:auto !important; max-width:none !important; flex:1 1 0 !important;
    aspect-ratio:0.73; align-self:center; max-height:100% !important;
  }

  /* 🔴 手牌：原本 #my-hand-cards 寬 556px 塞在 375px 的容器裡且 overflow:visible
     → 卡片溢出畫面外、既看不到也點不到（使用者回報「手牌無法正常顯示與點選」）。
     改為容器橫向可捲動，卡片維持易讀尺寸、以滑動瀏覽。 */
  .hand-wrap{
    min-height:0 !important; height:auto !important; padding:4px 0 !important;
    flex-shrink:0; border-top:2px solid #000 !important;
    overflow-x:auto !important; align-items:flex-start !important;
  }
  #my-hand-cards{
    flex-wrap:nowrap !important; flex-shrink:0 !important;
    justify-content:flex-start !important; padding:0 8px !important;
  }
  .hand-wrap .hcard{flex-shrink:0 !important;}
  /* 🔴 停用手牌的 :hover 放大（觸控裝置沒有真正的 hover，點過會「沾黏」）。
     沾黏後放大 → 內容超出 → 捲軸出現 → 版面位移 → 失去 hover → 縮小
     → 又取得 hover…形成無限迴圈，表現為「卡片不斷放大縮小抖動」
     （使用者實機回報）。同時也解決放大後卡頂被裁的問題。
     要看完整卡片改用「長按」開啟資訊面板。 */
  /* 🔴 觸控裝置沒有真正的 hover，點過會「沾黏」。開局時手牌一張張抽入
     （實測開局爆發期 #my-hand-cards 有 9 次 DOM 變動，之後歸零 —— 與使用者
     「進遊戲的一開始會抖動」完全吻合），每次重繪都會重新套用沾黏的 hover
     樣式並觸發 transition，表現為卡片抖動。
     → 把 hover 完全中性化（連邊框/層級都不變），並停用位移過渡。 */
  #my-hand-cards .hcard:hover,
  .hcard:hover,
  .hcard.sel-h{
    transform:none !important;
  }
  .hand-wrap .hcard,
  .hand-wrap .hcard:hover{
    transition:none !important;
    border-color:#555 !important;
    z-index:auto !important;
  }
  /* 已選取的手牌仍需可辨識 → 保留紅框，但不做任何位移 */
  .hand-wrap .hcard.sel-h{
    border-color:var(--b-red) !important;
    box-shadow:0 0 0 2px var(--b-red) !important;
  }
}

/* ---- 對戰盤面：手機橫向的觸控目標放大 ----
   盤面是固定 1920×1080 設計畫布，由 fitGameStage() 整體 scale 塞進視窗。
   手機橫向（如 812×375）scale≈0.347，故畫布內元件實際大小 = 設計尺寸 × 0.347。
   ⇒ 要讓手指好按，必須把「設計尺寸」放大約 2.9 倍（目標 ≈35px 實際）。
   ⚠ 只放大「畫布內且真的可點」的元件：
      · .phase-btn/.life-c/.ap-c 是純顯示（無 onclick），不動
      · .modal/.mbtn/.choice-btn 在 #game-stage 之外，不受縮放，不動
      · 頁首「投降/離開」刻意不放大 —— 誤觸代價高於難按 */
@media (max-height:520px) and (orientation:landscape){
  /* 側欄加寬，讓按鈕有更大橫向熱區（中央場地仍有 1460px 設計寬，充裕） */
  .game-outer-wrap{grid-template-columns:230px 1fr 230px;}

  /* 主要動作：下一階段／結束回合（最常按） 46px→約113px 設計 ≈ 39px 實際
     flex-shrink:0 —— 真實對局右欄元素變多時，寧可讓側欄捲動也不讓主按鈕被壓小 */
  .rp-actions .abtn{padding:30px 8px;font-size:32px;letter-spacing:1px;flex-shrink:0;}
  /* 觸控裝置用不到鍵盤快捷提示，隱藏以節省空間 */
  .abtn .kbd{display:none;}

  /* 場外／移除區檢視 72px→100px 設計 ≈ 35px 實際（下限 80px，避免被壓到難按） */
  #right-panel .mini-stack{height:100px;min-height:80px;font-size:50px;}

  /* 對戰聊天／快速訊息／歷程（inline style 需 !important 覆蓋） */
  #game-chat-toggle,#quick-msg-toggle,#game-log-toggle{padding:26px 4px !important;font-size:30px !important;}
  /* 手牌盤展開鈕、事件計數框 */
  #hand-tray-btn{padding:20px 26px !important;font-size:28px !important;}
  #my-event-counter-box{padding:14px 20px !important;}
}

/* 回放控制列：手機上控制項多會換行成很高一塊（實測 199px＝1/4 畫面），
   壓縮 padding／字級並隱藏次要資訊（對戰雙方與日期），把空間留給盤面。 */
@media (max-width:600px), (max-height:520px){
  #replay-chrome > div:last-child{padding:6px 8px !important;gap:6px !important;font-size:12px !important;}
  #replay-chrome #replay-title{display:none !important;}
  #replay-chrome button{padding:4px 8px !important;font-size:11px !important;}
  #replay-chrome select{padding:3px 5px !important;font-size:11px !important;max-width:130px !important;}
  #replay-chrome #replay-pos{font-size:11px !important;}
}

/* 對局計時：手機頁首空間有限（實測完整版會撐出橫向捲動）→ 只留剩餘時間，
   雙方用時明細隱藏（想看用時可從對戰歷程推知，且那是次要資訊）。 */
@media (max-width:600px), (max-height:520px){
  #game-timer-box{padding:0 6px !important;gap:4px !important;}
  #game-timer-used{display:none !important;}
  #game-timer-clock{font-size:14px !important;}
}

/* 對戰歷程面板：小螢幕改為近全螢幕浮層（桌面的 left:200px/bottom:190px 會超出視窗）。
   直向與橫向手機都套用；平板以上維持桌面定位。 */
@media (max-width:600px), (max-height:520px){
  #game-log-panel{
    left:8px !important; right:8px !important; width:auto !important;
    top:56px !important; bottom:8px !important; max-height:none !important;
  }
  #game-log-list{font-size:14px !important;}
}