/* =====================================================================
   Cartridge 風格大廳 (body.cart-mode)
   - 取代原本 #main-header + .container 的遊戲格大廳
   - 所有 class 以 cl- 開頭，避免與 index.html 既有樣式衝突
   ===================================================================== */
#cart-lobby {
  --cl-accent: #6aa8ff;
  --cl-glass: rgba(255, 255, 255, .07);
  --cl-glass-b: rgba(255, 255, 255, .14);
  --cl-text: #f2f4f8;
  --cl-muted: rgba(242, 244, 248, .58);
  --cl-bg: #07090d;
  position: fixed; inset: 0; z-index: 5;
  display: none; flex-direction: column;
  background: var(--cl-bg); color: var(--cl-text);
  font-family: "Segoe UI", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
body.cart-mode #cart-lobby { display: flex; }
body.cart-mode.theater-open #cart-lobby,
body.cart-mode.dos-snapshot-open #cart-lobby { display: none; }
body.cart-mode #main-header,
body.cart-mode > .container { display: none !important; }

#cart-lobby canvas.cl-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
#cart-lobby .cl-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, color-mix(in srgb, var(--cl-accent) 20%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,.55));
}
#cart-lobby .cl-app { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- top bar ---------- */
.cl-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; gap: 12px; font-size: 14px; }
.cl-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; min-width: 0; cursor: pointer; }
.cl-logo { width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, var(--cl-accent), #fff); flex-shrink: 0; }
.cl-crumb { color: var(--cl-muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.cl-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cl-clock { font-weight: 600; white-space: nowrap; }

/* 原本的 .header-pills 搬進來後的外觀 */
#cart-lobby .header-pills { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin: 0; }
#cart-lobby .header-pills > label.hud-btn:first-child { display: none; } /* 平台配色開關：新介面用不到 */
#cart-lobby .header-pills .hud-btn {
  background: var(--cl-glass); border: 1px solid var(--cl-glass-b); color: var(--cl-text);
  border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#cart-lobby .header-pills .hud-btn:hover { border-color: var(--cl-accent); }
#cart-lobby .header-pills .pill { background: var(--cl-glass); border: 1px solid var(--cl-glass-b); border-radius: 999px; }

.cl-chip {
  align-self: center; padding: 6px 14px; border-radius: 999px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--cl-glass); border: 1px solid var(--cl-glass-b); backdrop-filter: blur(10px); color: var(--cl-muted);
  cursor: pointer; transition: color .2s, border-color .2s; font-family: inherit;
}
.cl-chip:hover { color: var(--cl-text); border-color: var(--cl-accent); }
.cl-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 16px; }

/* ---------- carousel ---------- */
.cl-stage { flex: 1; position: relative; perspective: 1400px; display: flex; align-items: center; justify-content: center; min-height: 0; touch-action: pan-y; }
.cl-track { position: relative; width: 0; height: 0; transform-style: preserve-3d; }
.cl-track.cl-enter .cl-item { animation: cl-pop .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cl-pop { from { opacity: 0; translate: 0 40px; } }
.cl-item { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s, filter .45s; cursor: pointer; }
.cl-media { position: absolute; transform: translate(-50%, -50%); filter: drop-shadow(0 26px 28px rgba(0,0,0,.6)); }
.cl-item.cl-active .cl-media { animation: cl-float 4s ease-in-out infinite; }
@keyframes cl-float { 50% { translate: 0 -8px; } }
.cl-badge {
  position: absolute; right: -6px; top: -6px; z-index: 3; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--cl-accent); color: #0b0e14; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.cl-playing {
  position: absolute; left: 50%; top: -14px; transform: translate(-50%, -100%); z-index: 3; white-space: nowrap;
  background: rgba(16,185,129,.92); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(16,185,129,.45);
}
.cl-playing::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 5px; vertical-align: 1px; animation: cl-pulse 1.2s infinite; }
@keyframes cl-pulse { 50% { opacity: .3; } }
.cl-broken { position: absolute; left: 6px; bottom: 6px; z-index: 3; background: rgba(220,38,38,.92); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
.cl-cap { position: absolute; left: 50%; top: calc(100% + 16px); transform: translateX(-50%); white-space: nowrap;
  font-size: 13px; font-weight: 600; opacity: .75; letter-spacing: .3px; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.cl-item.cl-active .cl-cap { opacity: 0; }

/* 封面 */
.cl-art { position: absolute; overflow: hidden; background: #222; }
.cl-art img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cl-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 8px; font-weight: 800; font-size: 13px; line-height: 1.15; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cl-gloss::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.28), rgba(255,255,255,0) 35%, rgba(255,255,255,0) 70%, rgba(255,255,255,.08)); }

/* 平台標籤（主機列表用）：官方 Logo + 平台色帶 */
.cl-plabel { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 10px 8px 8px; background: linear-gradient(180deg, #fbfbfc, #e6e8ec); color: #2b2f36; position: relative; }
.cl-plabel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--cl-stripe, #888); }
.cl-plabel img { max-width: 82%; max-height: 46%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.cl-plabel b { font-size: 11px; font-weight: 800; letter-spacing: .5px; line-height: 1.2; }
.cl-plabel small { font-size: 10px; font-weight: 700; opacity: .6; }
.cl-plabel.cl-round { justify-content: flex-end; gap: 3px; padding: 14% 18% 12%; }
.cl-plabel.cl-round::before { display: none; }
.cl-plabel.cl-round img { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); max-width: 58%; max-height: 16%; }
.cl-track.cl-platforms .cl-spin { animation: none !important; }

/* ===== 各平台實體媒體 ===== */
.cl-cart { position: relative; }
.cl-cart > svg { position: absolute; inset: 0; overflow: visible; }
.cl-cart > .cl-art { position: absolute; box-shadow: 0 0 0 1px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08); }
.m-gba { width: 196px; height: 126px; position: relative; border-radius: 9px 9px 5px 5px;
  background: linear-gradient(180deg, #5b5b63, #3d3d44 60%, #34343a); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.35); }
.m-gba::before { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; height: 9px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 6px); }
.m-gba .cl-art { left: 12px; right: 12px; top: 20px; bottom: 12px; border-radius: 4px; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }

.m-sfc { width: 206px; height: 150px; position: relative; background: linear-gradient(180deg, #d4d4d6, #b4b4b8 70%, #a5a5aa);
  border-radius: 30px 30px 6px 6px; clip-path: polygon(0 0, 100% 0, 100% 78%, 95% 78%, 95% 100%, 5% 100%, 5% 78%, 0 78%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(0,0,0,.15); }
.m-sfc .cl-well { position: absolute; left: 18px; right: 18px; top: 14px; height: 92px; border-radius: 6px; background: #9a9aa0; box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
.m-sfc .cl-art { left: 22px; right: 22px; top: 18px; height: 84px; border-radius: 4px; }
.m-sfc .cl-ridges { position: absolute; left: 30px; right: 30px; bottom: 12px; height: 18px; background: repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 2px, transparent 2px 5px); }

.m-n64 { width: 210px; height: 146px; position: relative; background: linear-gradient(180deg, #46464c, #2c2c31 65%, #222226);
  clip-path: polygon(9% 0, 91% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); border-radius: 4px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.4); }
.m-n64 .cl-art { left: 24px; right: 24px; top: 12px; height: 86px; border-radius: 18px 18px 4px 4px; box-shadow: 0 0 0 3px rgba(0,0,0,.4); }
.m-n64 .cl-ridges { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 30px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 3px, transparent 3px 9px); }

.m-fc { width: 172px; height: 116px; position: relative; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--shell, #d7c9a6), color-mix(in srgb, var(--shell, #d7c9a6) 80%, #000)); box-shadow: inset 0 2px 0 rgba(255,255,255,.4); }
.m-fc .cl-art { left: 14px; right: 14px; top: 12px; bottom: 26px; border-radius: 3px; }
.m-fc .cl-ridges { position: absolute; left: 20px; right: 20px; bottom: 7px; height: 12px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 2px, transparent 2px 6px); }

.m-nds { width: 150px; height: 164px; position: relative; border-radius: 8px 8px 6px 6px;
  background: linear-gradient(180deg, #4a4d55, #2f3238); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.35);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 92%); }
.m-nds .cl-art { left: 10px; right: 10px; top: 10px; height: 112px; border-radius: 4px; }
.m-nds .cl-ridges { position: absolute; left: 18px; right: 18px; bottom: 10px; height: 18px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 3px, transparent 3px 8px); }

.m-disc { width: 206px; height: 206px; position: relative; border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, transparent 0 7.4%, #000 7.8%); mask-image: radial-gradient(circle, transparent 0 7.4%, #000 7.8%); }
.m-disc .cl-spin { position: absolute; inset: 0; border-radius: 50%; }
.cl-item.cl-active .m-disc .cl-spin { animation: cl-spin 7s linear infinite; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
.m-disc .cl-art { inset: 0; border-radius: 50%; }
.m-disc .cl-hub { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(235,240,245,.92) 0 46%, rgba(170,180,190,.55) 47% 62%, rgba(220,228,236,.75) 63% 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.m-disc .cl-rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--rim, rgba(200,205,210,.8)), inset 0 0 0 4px rgba(0,0,0,.25); }
.m-disc .cl-shine { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: conic-gradient(from 20deg, transparent, rgba(255,255,255,.28) 6%, transparent 14%, transparent 50%, rgba(255,255,255,.18) 56%, transparent 64%); }
.m-disc .cl-band { position: absolute; left: 0; right: 0; display: flex; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #fff; }
.m-disc.ps1 { --rim: #121212; }
.m-disc.ps2 { --rim: #0c2a6b; }
.m-disc.ps2 .cl-band { bottom: 0; height: 22%; align-items: flex-start; padding-top: 6px; background: #0b0b0d; }
.m-disc.ps3 { --rim: #d9dde2; }
.m-disc.ps3 .cl-band { top: 0; height: 19%; align-items: flex-end; padding-bottom: 5px; background: linear-gradient(#1565c0, #0d47a1); }
.m-disc.saturn { --rim: #c9b37a; }
.m-disc.saturn .cl-band { top: 0; height: 17%; align-items: flex-end; padding-bottom: 4px; background: #111; color: #9fc6ff; }

.m-umd { width: 176px; height: 194px; position: relative; border-radius: 60px 60px 12px 12px;
  background: linear-gradient(160deg, rgba(90,95,105,.95), rgba(40,42,48,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.m-umd .cl-window { position: absolute; left: 50%; top: 16px; width: 142px; height: 142px; transform: translateX(-50%); border-radius: 50%;
  overflow: hidden; box-shadow: 0 0 0 3px rgba(0,0,0,.4), inset 0 0 12px rgba(0,0,0,.5); }
.m-umd .cl-window .m-disc { width: 100%; height: 100%; }
.m-umd .cl-tag { position: absolute; bottom: 12px; width: 100%; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 4px; color: #b9bec8; }

.m-floppy { width: 180px; height: 186px; position: relative; border-radius: 4px; background: linear-gradient(180deg, #2f3540, #1d2128);
  clip-path: polygon(0 0, 92% 0, 100% 6%, 100% 100%, 0 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.m-floppy .cl-shutter { position: absolute; left: 34px; width: 104px; top: 0; height: 66px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #8d939c, #e1e5ea 30%, #a8aeb6 60%, #d7dbe0); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.m-floppy .cl-shutter::after { content: ""; position: absolute; left: 62px; top: 12px; width: 22px; height: 40px; background: #1d2128; border-radius: 2px; }
.m-floppy .cl-art { left: 14px; right: 14px; top: 78px; bottom: 10px; border-radius: 2px; box-shadow: 0 0 0 3px #f1efe6; }

.m-cps { width: 224px; height: 150px; position: relative; border-radius: 6px; background: linear-gradient(180deg, #2f7d4a, #1f5b34);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), inset 0 -4px 0 rgba(0,0,0,.3); }
.m-cps::before { content: ""; position: absolute; inset: 8px; border-radius: 3px; background: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 7px); }
.m-cps .cl-art { left: 52px; right: 52px; top: 16px; bottom: 26px; border-radius: 3px; box-shadow: 0 0 0 3px #f4f0e2; }
.m-cps .cl-screw { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #ddd 0 30%, #888 31%); }
.m-cps .cl-pins { position: absolute; left: 40px; right: 40px; bottom: -6px; height: 10px; background: repeating-linear-gradient(90deg, #d4af37 0 4px, transparent 4px 7px); }

.m-mvs { width: 160px; height: 204px; position: relative; border-radius: 6px; background: linear-gradient(180deg, #2b2b2e, #121214);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -4px 0 rgba(0,0,0,.5); }
.m-mvs .cl-art { left: 12px; right: 12px; top: 12px; height: 128px; border-radius: 2px; }
.m-mvs .cl-ridges { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 46px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 3px, transparent 3px 8px); }

/* ---------- info ---------- */
.cl-info { text-align: center; padding: 0 16px 10px; min-height: 96px; }
.cl-info h1 { font-size: clamp(22px, 3.2vw, 36px); font-weight: 700; letter-spacing: .3px; transition: opacity .2s, transform .2s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 900px; margin: 0 auto; color: var(--cl-text); }
.cl-meta { color: var(--cl-muted); font-size: 13px; margin-top: 4px; }
.cl-meta b { color: var(--cl-text); font-weight: 600; }
.cl-meta .cl-warn { color: #f87171; font-weight: 700; }
.cl-meta .cl-live { color: #34d399; font-weight: 700; }
.cl-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; max-width: 600px; margin-left: auto; margin-right: auto; }
.cl-dots span { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.25); transition: all .3s; }
.cl-dots span.on { width: 20px; background: var(--cl-accent); }
.cl-swap { opacity: 0; transform: translateY(6px); }

/* 存檔面板 */
.cl-savepanel { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 270px; z-index: 4;
  padding: 12px; border-radius: 14px; background: rgba(14,17,24,.66); border: 1px solid var(--cl-glass-b); backdrop-filter: blur(16px);
  transition: opacity .3s, transform .3s; }
.cl-savepanel.cl-hide { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(20px); }
.cl-savepanel h3 { font-size: 12px; letter-spacing: 1.2px; color: var(--cl-muted); margin: 0 0 8px; display: flex; justify-content: space-between; font-weight: 700; }
.cl-shot { width: 100%; aspect-ratio: 4/3; border-radius: 8px; background: #000 center/contain no-repeat; margin-bottom: 8px; }
.cl-savepanel ul { list-style: none; margin: 0; padding: 0; max-height: 170px; overflow: auto; }
.cl-savepanel li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.cl-savepanel li:hover, .cl-savepanel li.on { background: rgba(255,255,255,.08); }
.cl-savepanel li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-savepanel li span:last-child { color: var(--cl-muted); white-space: nowrap; }
.cl-none { font-size: 13px; color: var(--cl-muted); padding: 10px 4px; }

/* ---------- menu ---------- */
.cl-menu { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 0 16px 10px; }
.cl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; font-size: 13px; color: var(--cl-text);
  background: var(--cl-glass); border: 1px solid var(--cl-glass-b); backdrop-filter: blur(14px); cursor: pointer; font-family: inherit;
  transition: background .2s, border-color .2s, transform .2s; text-decoration: none; }
.cl-btn:hover { background: rgba(255,255,255,.14); border-color: var(--cl-accent); transform: translateY(-2px); }
.cl-btn.cl-primary { background: color-mix(in srgb, var(--cl-accent) 75%, #000); border-color: var(--cl-accent); color: #fff; font-weight: 700; }
.cl-btn[hidden] { display: none; }
.cl-hints { display: flex; gap: 18px; padding: 6px 22px 14px; font-size: 12px; color: var(--cl-muted); flex-wrap: wrap; }
.cl-hints span { display: inline-flex; align-items: center; gap: 6px; }
.cl-hints > span { cursor: pointer; padding: 4px 8px; margin: -4px -8px; border-radius: 8px; transition: color .2s, background .2s; }
.cl-hints > span:hover { color: var(--cl-text); background: var(--cl-glass); }
.cl-key { min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }

/* ---------- overlays (最近遊玩 / 搜尋) ---------- */
.cl-overlay { position: absolute; inset: 0; z-index: 8; background: rgba(5,7,10,.78); backdrop-filter: blur(18px);
  opacity: 0; pointer-events: none; transition: opacity .3s; display: flex; flex-direction: column; }
.cl-overlay.cl-show { opacity: 1; pointer-events: auto; }
.cl-overlay header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px 10px; }
.cl-overlay h2 { font-size: 22px; margin: 0; color: var(--cl-text); }
.cl-search { flex: 1; max-width: 520px; padding: 10px 14px; border-radius: 12px; font-size: 16px; font-family: inherit;
  background: var(--cl-glass); border: 1px solid var(--cl-glass-b); color: var(--cl-text); outline: none; }
.cl-search:focus { border-color: var(--cl-accent); }
.cl-grid { flex: 1; overflow: auto; padding: 10px 24px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-auto-rows: max-content; gap: 16px; align-content: start; min-height: 0; }
.cl-card { border-radius: 12px; overflow: hidden; background: var(--cl-glass); border: 1px solid var(--cl-glass-b); cursor: pointer; transition: transform .2s, border-color .2s; position: relative; }
.cl-card:hover, .cl-card.on { transform: translateY(-3px); border-color: var(--cl-accent); }
.cl-card .cl-img { aspect-ratio: 4/3; background: #000 center/cover no-repeat; position: relative; }
.cl-card .cl-img.cl-cover { aspect-ratio: 3/4; }
.cl-card .cl-plat { position: absolute; left: 8px; top: 8px; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.65); letter-spacing: .5px; color: #fff; }
.cl-card .cl-x { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .2s; }
.cl-card:hover .cl-x { opacity: 1; }
.cl-card .cl-body { padding: 10px 12px; }
.cl-card .cl-t { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cl-text); }
.cl-card .cl-s { font-size: 12px; color: var(--cl-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-empty { color: var(--cl-muted); padding: 20px 0; }

.cl-classic-btn { position: fixed; right: 14px; bottom: 14px; z-index: 6; padding: 8px 12px; border-radius: 10px; font-size: 12px; cursor: pointer;
  background: rgba(15,23,42,.85); border: 1px solid rgba(56,189,248,.6); color: #38bdf8; font-family: inherit; display: none; }
body:not(.cart-mode):not(.theater-open) .cl-classic-btn { display: block; }

@media (max-width: 900px) { .cl-savepanel { display: none; } }
@media (max-width: 640px) {
  .cl-top { padding: 10px 12px; flex-wrap: wrap; }
  .cl-crumb, .cl-clock { display: none; }
  #cart-lobby .header-pills .hud-label { display: none; }
  .cl-hints { display: none; }
  .cl-btn { padding: 9px 12px; }
  .cl-btn .cl-t2 { display: none; }
  .cl-grid { padding: 10px 12px 20px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .cl-overlay header { padding: 14px 12px 8px; }
}

/* =====================================================================
   新介面主題：登入畫面、彈窗、遊戲中工具列（新舊介面都套用）
   原本元素多為 inline style，必要處以 !important 覆蓋
   ===================================================================== */
body {
  --cl-accent: #6aa8ff;
  --cl-glass: rgba(255, 255, 255, .07);
  --cl-glass-b: rgba(255, 255, 255, .14);
  --cl-panel: rgba(16, 19, 27, .82);
  --cl-text: #f2f4f8;
  --cl-muted: rgba(242, 244, 248, .58);
  --accent: #6aa8ff;
  --accent-grad: linear-gradient(135deg, #6aa8ff, #a5c8ff);
}

/* ---------- 登入 ---------- */
body #auth-overlay {
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(106,168,255,.22), transparent 70%),
    radial-gradient(circle at 15% 85%, rgba(124,108,240,.16), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(255,112,67,.10), transparent 40%),
    #07090d !important;
  backdrop-filter: none;
  font-family: "Segoe UI", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
}
body .auth-card {
  background: var(--cl-panel); border: 1px solid var(--cl-glass-b); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  max-width: 400px;
}
body .auth-brand {
  background: none; -webkit-text-fill-color: var(--cl-text); color: var(--cl-text);
  font-size: 20px; letter-spacing: .5px; display: flex; align-items: center; justify-content: center; gap: 10px;
}
body .auth-brand::before { content: ""; width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, var(--cl-accent), #fff); }
body .auth-subtitle { color: var(--cl-muted); }
body .auth-tabs { border: 0; background: var(--cl-glass); border-radius: 12px; padding: 4px; gap: 4px; }
body .auth-tab-btn { border: 0; border-radius: 9px; color: var(--cl-muted); }
body .auth-tab-btn.active { background: rgba(255,255,255,.12); color: var(--cl-text); }
body .auth-input-group label { color: var(--cl-muted); }
body .pin-slot { background: transparent !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 12px !important; box-shadow: none !important; color: #fff !important; }
body .pin-slot.active { border-color: rgba(255,255,255,.75) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.12) !important; }
body .pin-slot.filled { background: transparent !important; border-color: rgba(255,255,255,.45) !important; }
body .num-key { background: var(--cl-glass) !important; border: 1px solid var(--cl-glass-b) !important; color: var(--cl-text) !important;
  border-radius: 14px !important; box-shadow: none !important; font-weight: 600; }
body .num-key:active { background: rgba(106,168,255,.3) !important; border-color: var(--cl-accent) !important; }
body .num-key.key-func { color: var(--cl-muted) !important; font-size: 13px; }
body .auth-btn { background: #fff !important; color: #07090d !important; border-radius: 14px; font-weight: 800; }
body .auth-btn:hover { box-shadow: 0 8px 24px rgba(255,255,255,.18); }
body .auth-input { background: var(--cl-glass); border: 1px solid var(--cl-glass-b); border-radius: 12px; }
body .auth-input:focus { border-color: var(--cl-accent); box-shadow: 0 0 0 3px rgba(106,168,255,.2); }
body #auth-overlay .cache-clear-btn { background: var(--cl-glass); border: 1px solid var(--cl-glass-b); border-radius: 999px; }
body .pwd-warning { border-radius: 12px; }

/* ---------- 所有彈窗（遊戲設定、存檔管理、上傳、許願、管理…） ---------- */
body [id$="-modal"] {
  background: rgba(5, 7, 10, .72) !important;
  backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
}
body .slot-modal-card {
  background: var(--cl-panel) !important; border: 1px solid var(--cl-glass-b) !important; border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.6) !important; color: var(--cl-text);
}
body .slot-modal-header { border-bottom-color: rgba(255,255,255,.08); }
body .slot-modal-title { color: var(--cl-text); font-size: 17px; letter-spacing: .3px; }
body .slot-modal-title .server-status-dot { display: none; }
body .slot-modal-card label,
body .slot-modal-card [style*="color:#94a3b8"],
body .slot-modal-card [style*="color: #94a3b8"] { color: var(--cl-muted) !important; }
body .close-btn:not(.hud-btn) {
  width: 34px; height: 34px; border-radius: 50% !important; background: var(--cl-glass) !important;
  border: 1px solid var(--cl-glass-b) !important; color: var(--cl-text) !important;
}
body .close-btn:not(.hud-btn):hover { border-color: var(--cl-accent) !important; }
body .slot-modal-card input[type="text"],
body .slot-modal-card input[type="url"],
body .slot-modal-card input[type="number"],
body .slot-modal-card input[type="search"],
body .slot-modal-card input[type="password"],
body .slot-modal-card textarea,
body .slot-modal-card select,
body .slot-name-input {
  background: var(--cl-glass) !important; border: 1px solid var(--cl-glass-b) !important; color: var(--cl-text) !important;
  border-radius: 10px !important; outline: none;
}
body .slot-modal-card select option { background: #151a22; }
body .slot-modal-card input:focus,
body .slot-modal-card textarea:focus,
body .slot-modal-card select:focus { border-color: var(--cl-accent) !important; box-shadow: 0 0 0 3px rgba(106,168,255,.2) !important; }
body .slot-modal-card .mini-btn,
body .slot-tab-btn,
body .player-opt-btn {
  background: var(--cl-glass) !important; border: 1px solid var(--cl-glass-b) !important; color: var(--cl-text) !important;
  border-radius: 10px !important; box-shadow: none !important; font-weight: 600 !important;
}
body .slot-modal-card .mini-btn:hover,
body .slot-tab-btn:hover,
body .player-opt-btn:hover { border-color: var(--cl-accent) !important; background: rgba(255,255,255,.12) !important; }
body .slot-tab-btn.active,
body .player-opt-btn.active,
body .player-opt-btn.selected {
  background: rgba(106,168,255,.22) !important; border-color: var(--cl-accent) !important; color: #fff !important;
}
body .btn-save-slot { background: #fff !important; color: #07090d !important; border: 0 !important; border-radius: 12px !important; font-weight: 800 !important; box-shadow: none !important; }
body .btn-save-slot:hover { box-shadow: 0 8px 24px rgba(255,255,255,.18) !important; }
body #edit-cover-preview { border-radius: 10px !important; border-color: var(--cl-glass-b) !important; background: var(--cl-glass) !important; }
body #remove-game-button { border-radius: 12px !important; }
body .slot-modal-card [style*="background:rgba(30,41,59"] { background: var(--cl-glass) !important; border-radius: 12px !important; }

/* ---------- 遊戲中上方工具列 ---------- */
body .theater-topbar {
  background: rgba(10, 12, 18, .82) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.45) !important;
}
body .theater-topbar, body .theater-topbar .hud-btn, body .theater-topbar .theater-title {
  font-family: "Noto Sans TC", "Segoe UI", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif !important;
}
body .theater-title { color: var(--cl-text) !important; font-weight: 700 !important; letter-spacing: .3px; }
/* 所有按鈕統一外觀；border-color 不加 !important，保留翻譯/攻略等狀態色 */
body .theater-topbar .hud-btn {
  background: var(--cl-glass) !important; color: var(--cl-text) !important; box-shadow: none !important;
  border: 1px solid var(--cl-glass-b); border-radius: 999px !important;
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: .2px;
}
body .theater-topbar .hud-btn:hover { background: rgba(255,255,255,.13) !important; border-color: rgba(255,255,255,.4); transform: none; filter: none; }
body .theater-topbar .hud-btn.active { background: rgba(106,168,255,.18) !important; border-color: var(--cl-accent); }
body .theater-topbar select.hud-btn { background-color: rgba(20, 24, 32, .9) !important; }
body .theater-topbar select.hud-btn option { background: #151a22; }
/* 主要動作：存檔離開＝白色、不存離開＝紅色 */
body .theater-topbar .close-btn { background: #fff !important; color: #07090d !important; border-color: #fff !important; }
body .theater-topbar .close-btn:hover { background: #e9edf3 !important; }
body .theater-topbar .force-close-btn { background: rgba(239,68,68,.9) !important; border-color: rgba(239,68,68,.9) !important; color: #fff !important; }
body .theater-topbar .force-close-btn:hover { background: #dc2626 !important; }
/* 線條圖示：用遮罩畫，按鈕被程式重寫 innerHTML 也不受影響 */
body .theater-topbar .hud-btn .hud-icon { font-size: 0 !important; width: 16px; height: 16px; }
body .theater-topbar .hud-btn .hud-icon::before {
  content: ""; width: 16px; height: 16px; display: block; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
/* 「文」是翻譯按鈕的字形圖示，保留文字 */
body .theater-topbar #btn-screen-translation .hud-icon { font-size: 15px !important; font-weight: 800; width: auto; height: auto; }
body .theater-topbar #btn-screen-translation .hud-icon::before { display: none; }
body .theater-topbar #btn-crt-toggle { width: 38px; min-width: 38px; padding: 0 !important; }
body .theater-topbar .hud-sep { background: rgba(255,255,255,.12) !important; }
body .theater-topbar #btn-walkthrough .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>"); }
body .theater-topbar #btn-game-guide .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/><path d='M19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8z'/></svg>"); }
body .theater-topbar #btn-netplay-menu .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/></svg>"); }
body .theater-topbar #toggle-chat-btn .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a8 8 0 0 1-11.6 7.1L4 21l1.9-5.4A8 8 0 1 1 21 12z'/></svg>"); }
body .theater-topbar #btn-reload-game .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-2.6-6.4L21 8'/><path d='M21 3v5h-5'/></svg>"); }
body .theater-topbar #quick-save-btn-el .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h3l2-3h6l2 3h3v13H4z'/><circle cx='12' cy='13' r='3.5'/></svg>"); }
body .theater-topbar #save-manager-btn-el .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 18a5 5 0 1 1 1-9.9A6 6 0 0 1 19 10a4 4 0 0 1 0 8'/><path d='M12 11v9M9 17l3 3 3-3'/></svg>"); }
body .theater-topbar #btn-emulator-menu .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/><circle cx='15' cy='6' r='2'/><circle cx='9' cy='12' r='2'/><circle cx='17' cy='18' r='2'/></svg>"); }
body .theater-topbar .close-btn .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3h11l3 3v15H5z'/><path d='M8 3v5h7V3M8 21v-7h8v7'/></svg>"); }
body .theater-topbar .force-close-btn .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>"); }
body .theater-topbar #btn-ps2-standalone .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/></svg>"); }
body .theater-topbar #btn-crt-toggle .hud-icon { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='6' width='19' height='14' rx='3'/><path d='M8 2.5l4 3.5 4-3.5'/><rect x='5.5' y='9' width='10' height='8' rx='2'/><path d='M18.5 10.5v.01M18.5 14v.01'/></svg>"); }

/* ---------- 提示訊息 ---------- */
body .notify-toast {
  background: rgba(16, 19, 27, .92) !important; border: 1px solid var(--cl-glass-b) !important; color: var(--cl-text) !important;
  border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
}

/* ---------- 頂部按鈕：平時只顯示圖示，滑鼠移過去才展開文字 ---------- */
#cart-lobby .header-pills .hdr-btn { gap: 0; transition: border-color .2s, padding .2s; }
#cart-lobby .header-pills .hdr-btn .hud-label {
  display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; vertical-align: middle;
  transition: max-width .22s ease, opacity .18s ease, margin-left .22s ease;
}
#cart-lobby .header-pills .hdr-btn:hover .hud-label,
#cart-lobby .header-pills .hdr-btn:focus-visible .hud-label { max-width: 5em; opacity: 1; margin-left: 6px; }

/* ---------- 聊天／玩家側邊面板：改成大廳的玻璃深色風格 ---------- */
body.cart-mode #floating-chat-panel {
  background: var(--cl-panel); color: var(--cl-text);
  border: 1px solid var(--cl-glass-b); border-radius: 20px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  font-family: "Segoe UI", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
  overflow: hidden;
}
body.cart-mode.side-docked #floating-chat-panel {
  background: rgba(10, 12, 17, .9); border: 0; border-left: 1px solid var(--cl-glass-b); border-radius: 0;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 0 40px rgba(0,0,0,.5);
}
body.cart-mode #floating-chat-panel .panel-header {
  background: transparent; border-bottom: 1px solid rgba(255,255,255,.08); padding: 12px 14px;
}
body.cart-mode #floating-chat-panel .side-tab {
  color: var(--cl-muted); border-radius: 999px; padding: 6px 11px; transition: color .2s, border-color .2s, background .2s;
}
body.cart-mode #floating-chat-panel .side-tab:hover { color: var(--cl-text); }
body.cart-mode #floating-chat-panel .side-tab.active {
  background: var(--cl-glass); border-color: var(--cl-accent); color: var(--cl-text);
}
body.cart-mode #floating-chat-panel #players-online-text { color: var(--cl-text); background: var(--cl-glass-b); }
body.cart-mode #floating-chat-panel .side-header-btns { gap: 6px; }
body.cart-mode #floating-chat-panel .side-header-btns .mini-btn {
  width: 30px; height: 30px; padding: 0; border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cl-glass) !important; border: 1px solid var(--cl-glass-b) !important; color: var(--cl-text) !important;
}
/* 上面的 display 會蓋掉 index.html 的隱藏規則，這裡補回：固定在右側時不需要「縮小」 */
body.cart-mode.side-docked #floating-chat-panel .side-header-btns .side-min-btn { display: none; }
body.cart-mode #floating-chat-panel .side-header-btns .mini-btn:hover { border-color: var(--cl-accent) !important; }
/* 「同時顯示」開著時按鈕要看得出是開的（不然兩個分頁都亮著，看起來像壞掉） */
body.cart-mode #floating-chat-panel .side-header-btns .side-split-btn.active {
  background: rgba(106,168,255,.22) !important; border-color: var(--cl-accent) !important; color: #fff !important;
}
body.cart-mode #floating-chat-panel .side-header-btns .mini-btn[onclick^="closeSidePanel"]:hover {
  border-color: #ef4444 !important; color: #fca5a5 !important;
}
body.cart-mode #floating-chat-panel .chat-system-bar {
  background: transparent; border-bottom: 1px solid rgba(255,255,255,.06); padding: 4px 12px; gap: 2px;
}
body.cart-mode #floating-chat-panel .chat-sys-item {
  color: var(--cl-muted); background: var(--cl-glass); border-left: 0; border-radius: 999px; padding: 1px 10px; font-size: 10.5px; line-height: 1.3;
}
body.cart-mode #floating-chat-panel .chat-messages { padding: 12px 14px; gap: 8px; }
body.cart-mode #floating-chat-panel .chat-msg { font-size: 13px; color: var(--cl-text); }
body.cart-mode #floating-chat-panel .chat-msg .u { color: var(--cl-accent); }
body.cart-mode #floating-chat-panel .chat-msg .t { color: var(--cl-text); }
body.cart-mode #floating-chat-panel .chat-msg.sys { color: var(--cl-muted); background: var(--cl-glass); border-radius: 999px; padding: 4px 12px; }
body.cart-mode #floating-chat-panel .chat-input-wrap {
  background: transparent; border-top: 1px solid rgba(255,255,255,.08); padding: 12px; gap: 8px;
}
body.cart-mode #floating-chat-panel .chat-input {
  background: var(--cl-glass); border: 1px solid var(--cl-glass-b); color: var(--cl-text);
  border-radius: 999px; padding: 9px 14px; font-size: 13px; transition: border-color .2s, box-shadow .2s;
}
body.cart-mode #floating-chat-panel .chat-input::placeholder { color: var(--cl-muted); }
body.cart-mode #floating-chat-panel .chat-input:focus { border-color: var(--cl-accent); box-shadow: 0 0 0 3px rgba(106,168,255,.2); }
body.cart-mode #floating-chat-panel .chat-send-btn {
  background: var(--cl-accent); color: #07090d; border-radius: 999px; padding: 9px 16px; font-size: 13px; transition: filter .2s;
}
body.cart-mode #floating-chat-panel .chat-send-btn:hover { filter: brightness(1.12); }
body.cart-mode #floating-chat-panel *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
body.cart-mode #floating-chat-panel * { scrollbar-color: rgba(255,255,255,.18) transparent; }

/* ---------- 遊戲列表上方的主機（console-stage.js 繪製，目前 SFC、PS1） ---------- */
.cl-console-bar { position: absolute; left: 50%; top: 0; z-index: 0; pointer-events: none; display: none;
  transform: translateX(-50%) scale(.7); transform-origin: top center; opacity: .95;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.cl-console-bar { width: 360px; }
.cl-console-bar .cs-console { width: 360px; }
.cl-stage.cl-has-console { padding-top: 160px; }
.cl-stage.cl-has-console .cl-console-bar { display: block; }
@media (min-width: 901px) { .cl-stage.cl-has-console .cl-console-bar { left: calc(50% - 150px); } }
@media (max-width: 640px) { .cl-stage.cl-has-console { padding-top: 0; } .cl-stage.cl-has-console .cl-console-bar { display: none; } }

/* 主機列表上的主機照片（SFC、PS1） */
.cl-consolecard { display: block; line-height: 0; }
.cl-consolecard .cs-console { display: block; }

/* 視窗沒有焦點時（cartridge.js 加上 .cl-idle）：暫停所有無限循環動畫，不在背景耗資源 */
/* 只停無限循環的（卡匣浮動、光碟旋轉、遊玩中閃爍），進場淡入不能停，否則卡片會卡在透明狀態 */
#cart-lobby.cl-idle .cl-item.cl-active .cl-media, #cart-lobby.cl-idle .cl-spin, #cart-lobby.cl-idle .cl-playing::before { animation-play-state: paused; }

/* 手把／方向鍵選中的卡片要一眼看得出來 */
.cl-card.on { transform: translateY(-4px) scale(1.03); border-color: var(--cl-accent);
  box-shadow: 0 0 0 2px var(--cl-accent), 0 0 24px color-mix(in srgb, var(--cl-accent) 45%, transparent), 0 12px 30px rgba(0,0,0,.5); z-index: 1; }

/* 卡帶接觸不良（10% 機率）：整人用，提示對著螢幕吹氣，時間到灰塵自己消失 */
.cl-dust-ov { position: fixed; inset: 0; z-index: 200001; display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,10,.86); backdrop-filter: blur(14px); animation: cl-dust-in .25s ease; }
.cl-dust-ov.cl-out { opacity: 0; transition: opacity .2s; }
@keyframes cl-dust-in { from { opacity: 0; } }
.cl-dust-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; max-width: 94vw; color: var(--cl-text, #eaf0ff); text-align: center; }
.cl-dust-title { font-size: 22px; font-weight: 800; color: #ffb74d; letter-spacing: 1px; }
/* 卡帶上半部（標籤面）向後仰；底部開口正對螢幕，像實體卡帶：凹進去的開口、裡面一片電路板，邊緣露出金色接點 */
.cl-dust-stage { padding: 60px 80px 20px; }
.cl-dust-cart { position: relative; display: inline-block; transform-origin: 50% 100%; transform: scale(1.6); animation: cl-dust-wob 2.4s ease-in-out infinite; --shell1: #6b6f78; --shell2: #4a4d54; --tilt: 22deg; }
@keyframes cl-dust-wob { 50% { transform: scale(1.6) translateY(-3px); } }
.cl-dust-top { transform-origin: 50% 100%; transform: perspective(520px) rotateX(var(--tilt)); }
.cl-slot { position: relative; height: var(--slot-h, 40px); margin-top: -1px; padding: 7px 12px 9px; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, var(--shell2), var(--shell1)); box-shadow: 0 10px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18); }
.cl-slot-in { position: relative; height: 100%; border-radius: 3px;
  background: linear-gradient(180deg, #050608, #14161a 70%, #0b0c0e);
  box-shadow: inset 0 8px 12px rgba(0,0,0,.9), inset 0 0 0 2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.22); }
.cl-slot-in::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.07)); } /* 站得高才看得到的開口下緣內壁 */
.cl-pcb { position: absolute; left: 3%; right: 3%; top: 24%; height: 8px; border-radius: 1px;
  background: linear-gradient(180deg, #d8ddc0, #a9ba84 45%, #5f7343); box-shadow: 0 3px 5px rgba(0,0,0,.7); }
.cl-pcb::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: repeating-linear-gradient(90deg, #d6b24b 0 2px, #7a5d1c 2px 3px, #e9cf74 3px 4px, #2a2310 4px 5px); border-radius: 1px 1px 0 0; }
.cl-speck { position: absolute; z-index: 4; border-radius: 50%; pointer-events: none; opacity: .92;
  background: radial-gradient(circle at 35% 35%, #9a8f80, #5c5348 70%, #3c352d); filter: blur(.4px);
  transition: transform 1s cubic-bezier(.2,.7,.3,1), opacity 1s; transition-delay: var(--dd, 0s); }
.cl-speck.gone { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(240deg); opacity: 0; }
.cl-dust-msg { font-size: 19px; font-weight: 700; min-height: 1.4em; margin-top: 56px; }
.cl-dust-msg.ok { color: #7bdc8a; }
@media (max-width: 640px) { .cl-dust-stage { padding: 40px 24px 10px; } .cl-dust-cart { transform: scale(1.05); animation: none; } .cl-dust-msg { margin-top: 40px; } }