/* Full-viewport library module. All selectors are scoped; existing battle UI is untouched. */
.cl-root {
  --gold: #ffbb43; --cream: #fff0d3; --ink: #191613;
  --u: min(.0598086vw, .10627dvh);
  position: fixed; inset: 0; z-index: 10000; width: 100%; height: 100dvh;
  overflow: hidden; isolation: isolate; color: var(--cream);
  font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-size: max(12px, calc(var(--u) * 20)); line-height: 1.35;
  background: linear-gradient(#0e12149c, #0b0e12a8), url('./assets/runtime-v72/scene.webp') center / cover no-repeat;
  user-select: none; -webkit-user-select: none; overscroll-behavior: contain;
}
.cl-root *, .cl-root *::before, .cl-root *::after { box-sizing: border-box; }
.cl-root button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cl-root button:focus-visible { outline: 3px solid #fff3bc; outline-offset: 4px; }
.cl-root img { display: block; -webkit-user-drag: none; pointer-events: none; }
.cl-root button:disabled { cursor: not-allowed; }
.cl-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; background: currentColor; mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; }
.cl-star { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.cl-lock { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cl-plate { border: max(3px, calc(var(--u) * 7)) solid #4c3b2a; border-image: url('./assets/runtime-v72/frame.webp') 12% fill / max(4px, calc(var(--u) * 9)) / 0 stretch; background: #262725; box-shadow: 0 4px 8px #0007; }
.cl-brand { position: absolute; left: max(2.4%, env(safe-area-inset-left)); top: max(1.6%, env(safe-area-inset-top)); width: 16.5%; }
.cl-brand img { width: 100%; height: calc(var(--u) * 62); object-fit: contain; object-position: left center; }
.cl-brand h1 { margin: 0; font-size: max(18px, calc(var(--u) * 29)); letter-spacing: .08em; font-weight: 900; text-shadow: 2px 2px #1b120e; }
.cl-tools { position: absolute; top: max(1.6%, env(safe-area-inset-top)); right: max(1.3%, env(safe-area-inset-right)); display: flex; gap: calc(var(--u) * 10); z-index: 6; }
.cl-tool { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); width: max(36px, calc(var(--u) * 48)); height: max(36px, calc(var(--u) * 48)); display: grid; place-items: center; padding: 0; background: linear-gradient(145deg, #33342bd9, #161c1bd9); border: 1px solid #b99b6566; border-radius: 8px; box-shadow: inset 0 1px #e7cc9830, 0 3px 8px #0003; font-size: max(18px, calc(var(--u) * 27)); }
.cl-tool:last-child { width: max(40px, calc(var(--u) * 48)); height: max(40px, calc(var(--u) * 48)); font-size: max(21px, calc(var(--u) * 25)); }
.cl-tool:active { transform: scale(.94); }
.cl-tool:hover { color: var(--gold); background: #161717; }
.cl-nav { position: absolute; left: 2.1%; top: 13.1%; width: 10.8%; height: 61.2%; display: grid; grid-template-rows: repeat(5, 1fr) .78fr .78fr; gap: calc(var(--u) * 10); }
.cl-category { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); min-height: 0; padding: calc(var(--u) * 6); transition: transform .18s, color .18s, box-shadow .18s; }
.cl-category.cl-plate { border: 1px solid #8a76594d; border-image: none; border-radius: 7px; background: linear-gradient(110deg, #292622eb, #151919e8); box-shadow: 0 3px 8px #0004; }
.cl-category:hover { transform: translateX(3px); color: var(--gold); }
.cl-category[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 2px #f7b443, 0 0 18px #f6a22a65; }
.cl-category img { width: calc(var(--u) * 43); height: calc(var(--u) * 49); object-fit: contain; }
.cl-category-lock { display: flex; align-items: center; font-size: max(16px, calc(var(--u) * 32)); color: #92968f; }
.cl-category[aria-disabled="true"] { color: #9a9e97; opacity: .64; cursor: not-allowed; }
.cl-category[aria-disabled="true"]:hover { transform: none; color: #9a9e97; }
.cl-category-letter { font-size: max(23px, calc(var(--u) * 43)); font-weight: 900; line-height: 1; text-shadow: 2px 2px #100f0e; }
.cl-category-copy { display: flex; flex-direction: column; align-items: start; gap: 2px; }
.cl-category-name { font-size: max(10px, calc(var(--u) * 15)); font-weight: 700; opacity: .82; letter-spacing: .08em; }
.cl-family .cl-category-letter { font-size: max(13px, calc(var(--u) * 23)); letter-spacing: .1em; }
.cl-family img { width: calc(var(--u) * 35); height: calc(var(--u) * 35); }
.cl-card { position: relative; display: grid; place-items: center; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.cl-card-face { display: block; position: relative; height: 100%; width: auto; aspect-ratio: 2 / 3; max-width: 100%; margin: 0 auto; border-radius: max(6px, calc(var(--u) * 15)); filter: drop-shadow(0 7px 7px #100d0b66); transition: filter .2s, box-shadow .2s; }
.cl-art-window { position: absolute; left: 4.5%; right: 4.5%; top: 3.3%; bottom: 22%; overflow: hidden; border-radius: 4%; }
.cl-art-window .cl-art { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.cl-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.cl-official-art { width: 100%; height: 100%; object-fit: contain; }
.cl-face-badge { position: absolute; left: 8%; top: 6%; width: 18%; height: 12%; object-fit: contain; }
.cl-face-title { position: absolute; left: 10%; right: 10%; top: 78.2%; height: 7%; display: flex; align-items: center; justify-content: center; color: #fff0ce; font-size: max(10px, calc(var(--u) * 24)); font-weight: 900; text-shadow: 1px 2px 2px #080604; white-space: nowrap; }
.cl-face-stars { position: absolute; left: 12%; right: 12%; top: 87.1%; height: 6%; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3); color: #ffd170; font-size: max(9px, calc(var(--u) * 24)); filter: drop-shadow(0 1px #000); }
.cl-preview { position: absolute; left: 20.5%; top: 3.8%; width: min(18.6%, calc(var(--u) * 310)); height: 43.4%; }
.cl-info { position: absolute; left: 41.4%; top: 10.8%; width: 43%; color: #f2ddbf; text-shadow: 1px 2px 3px #080909db; }
.cl-info-line { display: flex; align-items: center; gap: calc(var(--u) * 23); min-height: calc(var(--u) * 73); }
.cl-info-label { font-size: max(20px, calc(var(--u) * 39)); font-weight: 900; letter-spacing: .1em; }
.cl-info-letter { color: #f6a328; font-size: max(32px, calc(var(--u) * 69)); font-weight: 900; line-height: 1; -webkit-text-stroke: max(1px, calc(var(--u) * 2)) #171411; }
.cl-info-name { font-size: max(12px, calc(var(--u) * 23)); font-weight: 800; letter-spacing: .16em; }
.cl-info-stars { display: inline-flex; gap: calc(var(--u) * 8); font-size: max(21px, calc(var(--u) * 37)); color: #ffc547; filter: drop-shadow(1px 2px #16130e); }
.cl-info-hint { margin: calc(var(--u) * 22) 0 0; padding-top: calc(var(--u) * 20); border-top: 1px solid #d2ac7890; font-weight: 700; font-size: max(13px, calc(var(--u) * 25)); letter-spacing: .07em; }
.cl-info-sub { margin-top: calc(var(--u) * 8); font-size: max(10px, calc(var(--u) * 14)); opacity: .72; }
.cl-filter { position: absolute; left: 39.5%; top: 42.1%; width: 40.5%; height: 5.5%; display: flex; align-items: stretch; padding: 0; }
.cl-filter.cl-plate { border: 1px solid #8a76596b; border-image: none; border-radius: 6px; overflow: hidden; background: #202422e8; box-shadow: 0 3px 8px #0003; }
.cl-filter-title { display: grid; place-items: center; width: 12%; flex-shrink: 0; font-weight: 900; font-size: max(12px, calc(var(--u) * 23)); }
.cl-ranks { flex: 1; display: flex; min-width: 0; }
.cl-rank { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); position: relative; padding: 0 calc(var(--u) * 4); background: #2427269c; border: 0; border-left: 1px solid #7160487a; color: var(--cream); font-weight: 900; font-size: max(10px, calc(var(--u) * 21)); }
.cl-rank[aria-pressed="true"] { color: var(--gold); background: #4f3925a8; }
.cl-rank[aria-pressed="true"]::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 3px; background: var(--gold); }
.cl-rank[aria-disabled="true"] { color: #a0a59f; cursor: not-allowed; }
.cl-rank[aria-disabled="true"]:hover { color: #a0a59f; }
/* A missing rank keeps every star, with an equally sized lock on its left. */
.cl-rank .cl-star, .cl-rank-lock { flex: 0 1 1em; min-width: 0; width: 1em; height: 1em; }
.cl-rank-lock { display: flex; align-items: center; justify-content: center; font-size: inherit; color: inherit; }
.cl-rank-lock .cl-lock { width: 100%; height: 100%; }
.cl-rank-locked-stars { display: contents; }
.cl-rank:hover { color: var(--gold); }
.cl-gallery-wrap { position: absolute; left: 18.6%; top: 48%; width: 76%; height: 27.2%; }
.cl-gallery { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; cursor: grab; perspective: 1400px; }
.cl-gallery:active { cursor: grabbing; }
/* All card sizes and positions come from the same hand geometry; no centering gutters. */
.cl-gallery-card { position: absolute; left: 0; top: 0; width: var(--arc-width, 0px); height: var(--arc-height, 0px); min-width: 0; touch-action: none; transform-origin: center bottom; transform-style: preserve-3d; transition: filter .16s; filter: brightness(.82) saturate(.87); }
.cl-gallery .cl-gallery-card { transform: translate3d(var(--arc-x,0px),var(--arc-y,0px),0) rotate(var(--arc-tilt,0deg)) rotateY(var(--arc-yaw,0deg)) scale(var(--arc-scale,1)); opacity: calc(var(--arc-opacity,1) * var(--source-opacity,1)); cursor: grab; }
.cl-gallery-card .cl-card-face { width: 100%; height: 100%; transition: transform .12s, filter .16s, box-shadow .16s; }
.cl-gallery-card.cl-pressed .cl-card-face { transform: scale(.975); filter: brightness(1.08) drop-shadow(0 5px 6px #100d0b66); }
.cl-gallery-card.cl-lift-ready .cl-card-face { transform: translateY(-4px) scale(1.025); filter: brightness(1.08) drop-shadow(0 8px 7px #100d0b80); }
.cl-gallery-card[aria-pressed="true"] { filter: brightness(1); }
.cl-gallery-card[aria-pressed="true"] .cl-card-face { box-shadow: 0 0 0 1px #ffd17a99; filter: drop-shadow(0 4px 8px #eeb35d55); }
.cl-gallery-card .cl-face-title, .cl-drag-ghost .cl-face-title { font-size: max(6px, calc(var(--u) * 13)); }
.cl-gallery-card .cl-face-stars, .cl-drag-ghost .cl-face-stars { font-size: max(6px, calc(var(--u) * 12)); gap: calc(var(--u) * 2); }
.cl-gallery-card:hover { filter: brightness(1); }
.cl-in-deck { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: max(16px, calc(var(--u) * 25)); height: max(16px, calc(var(--u) * 25)); background: #201e19d9; color: #ffd273; border-radius: 50%; font-size: max(10px, calc(var(--u) * 15)); }
.cl-pressed { transform: translateY(2px) scale(.97); filter: brightness(1.17); }
.cl-drag-source { --source-opacity: .36; opacity: .36; }
.cl-arrow { position: absolute; top: 56.2%; width: 3.5%; height: 8%; border: 0; padding: 0; background: transparent; color: #fff1d4; filter: drop-shadow(3px 3px #151310); font-size: max(26px, calc(var(--u) * 53)); z-index: 4; }
.cl-arrow-left { left: 15.5%; } .cl-arrow-right { right: 1.2%; }
.cl-arrow:hover { color: var(--gold); transform: scale(1.12); }
.cl-arrow:disabled { opacity: .22; }
.cl-tray { position: absolute; left: 17%; bottom: 2.4%; width: 71%; height: 21.4%; padding: calc(var(--u) * 13) calc(var(--u) * 24); transition: filter .2s, box-shadow .2s; }
.cl-tray.cl-plate { border: 1px solid #a08b6966; border-image: none; border-radius: 12px; background: linear-gradient(120deg, #202321f2, #151918e8); box-shadow: 0 8px 22px #0006; }
.cl-tray-title { margin: 0; font-size: max(16px, calc(var(--u) * 27)); font-weight: 900; letter-spacing: .08em; }
.cl-counter { margin-left: calc(var(--u) * 22); font-size: .88em; color: #ffe6bd; font-variant-numeric: tabular-nums; }
.cl-slots { position: absolute; left: 5.5%; top: 29%; bottom: 11%; width: 67%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: calc(var(--u) * 18); }
.cl-slot { position: relative; height: 100%; min-height: 0; border: 2px dashed #6d716b; background: #171a198c; border-radius: 4px; display: grid; place-items: center; min-width: 0; color: #aaa99e; font-size: max(24px, calc(var(--u) * 48)); transition: border-color .15s, background .15s, transform .15s; }
.cl-slot[role="button"] { cursor: pointer; touch-action: manipulation; }
.cl-slot[role="button"]:focus-visible { outline: 2px solid #ffd36b; outline-offset: 4px; }
.cl-deck-hint { position: absolute; right: 24%; top: 9%; font-size: max(9px, calc(var(--u) * 12)); color: #cbbfa8; }
.cl-slot.filled { border: 0; background: transparent; border-radius: 8px; overflow: visible; }
.cl-slot .cl-card-face { position: absolute; top: 0; left: 50%; width: auto; height: 100%; max-width: 100%; transform: translateX(-50%); filter: drop-shadow(0 3px 4px #0d0b0a66); }
.cl-slot .cl-face-title { font-size: max(5px, calc(var(--u) * 9)); }
.cl-slot .cl-face-stars { font-size: max(5px, calc(var(--u) * 9)); gap: 1px; }
.cl-confirm { position: absolute; right: 2%; top: 38%; width: 20%; height: 40%; display: grid; place-items: center; padding: 0 8px; border: 1px solid #e8c8978c; border-radius: 7px; background: linear-gradient(165deg, #d2a365, #ac793e); color: #251c12 !important; box-shadow: inset 0 1px #ffe3b970, 0 3px 7px #090c0b55; font-size: max(15px, calc(var(--u) * 23)) !important; font-weight: 700 !important; letter-spacing: .07em; transition: transform .16s, filter .16s, background .2s; }
.cl-confirm:hover { filter: brightness(1.07); }
.cl-confirm:active { transform: translateY(1px) scale(.98); box-shadow: inset 0 1px 3px #432b183d; }
.cl-confirm[aria-disabled="true"] { color: #c6bca9 !important; background: linear-gradient(150deg, #34362ee8, #252923ed); border: 1px solid #b59b705e; box-shadow: inset 0 1px #decb9c15; }
.cl-tray-note { position: absolute; right: 2%; top: 9%; font-size: max(9px, calc(var(--u) * 12)); opacity: .62; }
.cl-drop-ready { box-shadow: 0 0 0 1px #e6b450, 0 0 20px #f1bc473b; }
.cl-slot.cl-drop-hot { border: 2px solid #ffd36b; background: #a06c336b; transform: translateY(-4px); box-shadow: 0 0 12px #ffcc6970; }
.cl-preview { touch-action: none; cursor: grab; }
.cl-drag-ghost { position: fixed; z-index: 10020; pointer-events: none; transform-origin: center; will-change: transform; animation: none; }
.cl-drag-ghost * { pointer-events: none; }
.cl-drag-ghost .cl-card-face { filter: drop-shadow(8px 16px 12px #08070788); }
.cl-toast { position: absolute; left: 57%; top: 29%; transform: translate(-50%, -4px); width: max-content; max-width: min(340px, 65%); padding: 9px 13px; background: #232924f5; border: 1px solid #929a884d; border-radius: 9px; box-shadow: 0 4px 14px #080d0a33; color: #e1e2d8; opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; z-index: 10; text-align: center; font-size: clamp(12px, calc(var(--u) * 16), 16px); line-height: 1.35; font-weight: 500; letter-spacing: .01em; }
.cl-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.cl-toast.cl-lock-hint { display: flex; align-items: center; gap: 8px; max-width: min(232px, calc(100% - 24px)); text-align: left; transform: translateY(3px); }
.cl-toast.cl-lock-hint.visible { transform: translateY(0); }
.cl-lock-hint .cl-lock { flex: 0 0 16px; width: 16px; height: 16px; color: #a1a89c; }
.cl-footnote { position: absolute; bottom: .4%; left: 2%; font-size: max(8px, calc(var(--u) * 10)); color: #dac3a3; text-shadow: 1px 1px #101010; opacity: .7; }
.cl-demo-switch { position: absolute; left: 2.1%; top: 80%; width: 11%; padding: 9px 4px; border: 1px solid #ae906459; border-radius: 6px; color: #d5bd94; background: #171b1ac9; font-size: max(10px, calc(var(--u) * 14)); text-align: center; text-decoration: none; }
.cl-demo-switch:hover { color: #ffe0a1; border-color: #d5ad68; }
.cl-native [data-fullscreen] { display: none; }
.cl-orientation { display: none; }
@keyframes cl-card-enter { from { opacity: 0; transform: translateY(20px) rotateY(-12deg); } to { opacity: 1; transform: none; } }
@keyframes cl-impact { 0% { transform: translateY(-8px) scale(1.04); } 55% { transform: translateY(3px) scale(.96); } 80% { transform: translateY(-2px); } 100% { transform: none; } }
.cl-slot.cl-impact { animation: cl-impact .28s both; }
/* Phone landscape: a compact header, five-card arc and a taller drop tray. */
@media (max-height: 550px) and (orientation: landscape) {
  .cl-root { --cl-visible-cards: 5; }
  .cl-brand { top: max(12px, env(safe-area-inset-top)); left: max(2.1%, env(safe-area-inset-left)); width: 12%; }
  .cl-brand img { display: none; }
  .cl-brand h1 { font-size: 15px; line-height: 24px; letter-spacing: .04em; }
  .cl-nav { left: max(2.1%, env(safe-area-inset-left)); top: 12%; height: 74%; gap: 3px; }
  .cl-category { padding: 3px; gap: 3px; }
  .cl-category-copy { flex-direction: row; align-items: center; gap: 5px; }
  .cl-category-letter { font-size: 21px; }
  .cl-category-name { font-size: 10px; letter-spacing: 0; }
  .cl-root[lang="en"] .cl-category-name { font-size: 9px; }
  .cl-root[lang="en"] .cl-category-copy { gap: 4px; }
  .cl-family .cl-category-letter { font-size: 12px; letter-spacing: 0; }
  .cl-category img { display: none; }
  .cl-category-lock { font-size: 14px; }
  .cl-category[aria-pressed="true"] { box-shadow: 0 0 0 1px #f7b443; }
  .cl-preview { left: 18%; top: 3%; width: 12%; height: 24%; }
  .cl-info { left: 32%; top: 3%; width: 49%; }
  .cl-info-line { min-height: 28px; gap: 9px; }
  .cl-info-label { font-size: 13px; letter-spacing: 0; }
  .cl-info-letter { font-size: 25px; -webkit-text-stroke: 0; }
  .cl-info-name { font-size: 13px; letter-spacing: .08em; }
  .cl-info-line:nth-child(2), .cl-info-hint { display: none; }
  .cl-info-sub { display: block; margin-top: 3px; font-size: 10px; letter-spacing: 0; }
  .cl-filter { left: 32%; right: max(2.5%, env(safe-area-inset-right)); top: 16%; width: auto; height: max(40px, 10.6%); }
  .cl-filter-title { width: 44px; font-size: 12px; }
  .cl-rank { font-size: 12px; gap: 1px; }
  .cl-gallery-wrap { left: 18%; right: max(2.5%, env(safe-area-inset-right)); width: auto; top: 29%; bottom: calc(24% + max(12px, env(safe-area-inset-bottom)) + 6px); height: auto; }
  .cl-arrow { top: 45%; width: 32px; height: 44px; font-size: 27px; }
  .cl-arrow-left { left: 14.5%; }
  .cl-arrow-right { right: max(0px, calc(env(safe-area-inset-right) - 28px)); }
  .cl-tools { gap: 4px; }
  .cl-tool { width: 34px; height: 34px; font-size: 18px; }
  .cl-tool:last-child { width: 40px; height: 40px; font-size: 22px; }
  .cl-tray { left: 18%; right: max(2.5%, env(safe-area-inset-right)); width: auto; height: 24%; bottom: max(12px, env(safe-area-inset-bottom)); padding: 0; }
  .cl-tray.cl-plate { border: 0; border-radius: 0; background: linear-gradient(0deg, #111714ba, #11171440 70%, transparent); box-shadow: none; }
  .cl-tray.cl-drop-ready { background: linear-gradient(0deg, #332718cf, #33271850 70%, transparent); }
  .cl-tray-title { position: absolute; left: 2.5%; top: 15%; width: 14%; font-size: 12px; letter-spacing: 0; }
  .cl-deck-hint { left: 2.5%; right: auto; top: auto; bottom: 12%; font-size: 9px; }
  .cl-counter { display: block; margin: 7px 0 0; font-size: 18px; }
  .cl-tray-note, .cl-footnote { display: none; }
  .cl-slots { left: 18%; width: 59%; top: 9%; bottom: 9%; gap: 6px; justify-items: center; }
  .cl-slot { width: auto; max-width: 100%; aspect-ratio: 2 / 3; border: 1px dashed #c5baa358; background: #11171455; border-radius: 5px; font-size: 19px; color: #b1aa98; }
  .cl-slot.filled { border: 0; background: transparent; }
  .cl-confirm { width: 19%; height: 44px; min-height: 44px; top: calc(50% - 22px); right: 2%; font-size: 15px !important; letter-spacing: .03em; transform: none; box-shadow: inset 0 1px #ffe3b955, 0 2px 5px #0003; }
  .cl-confirm[aria-disabled="true"] { color: #c6bca9 !important; background: linear-gradient(150deg, #34362ee8, #252923ed); border: 1px solid #b59b705e; box-shadow: inset 0 1px #decb9c15; }
  .cl-demo-switch { left: max(2.1%, env(safe-area-inset-left)); top: auto; bottom: max(12px, env(safe-area-inset-bottom)); padding: 6px 2px; font-size: 9px; }
  .cl-toast { top: 31%; padding: 7px 14px; font-size: 12px; }
}
@media (orientation: portrait) {
  .cl-root { --u: .12vw; }
  .cl-nav { left: 3%; top: 14%; width: 17%; height: 47%; }
  .cl-brand { width: 35%; top: 3%; }
  .cl-preview { left: 26%; top: 14%; width: 31%; height: 30%; }
  .cl-info { left: 62%; top: 17%; width: 33%; }
  .cl-info-line { flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
  .cl-info-name, .cl-info-sub { display: none; }
  .cl-info-hint { font-size: 12px; letter-spacing: 0; }
  .cl-filter { left: 25%; top: 47%; width: 70%; height: 5%; }
  .cl-gallery-wrap { left: 25%; top: 54%; width: 70%; height: 19%; }
  .cl-arrow { top: 61%; width: 7%; }
  .cl-arrow-left { left: 18%; } .cl-arrow-right { right: 0; }
  .cl-tray { left: 3%; width: 94%; bottom: 4%; height: 20%; }
  .cl-tray-title { font-size: 17px; }
  .cl-slots { left: 4%; top: 27%; width: 91%; bottom: 30%; gap: 8px; }
  .cl-confirm { right: 4%; top: auto; bottom: 4%; width: 40%; height: 24%; font-size: 17px !important; }
  .cl-tray-note { right: 5%; top: 8%; }
  .cl-orientation { display: block; position: absolute; bottom: 1%; right: 4%; font-size: 11px; color: #efd2a8; }
  .cl-category img { display: none; }
  .cl-footnote { bottom: 1%; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-root *, .cl-root *::before, .cl-root *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Keep a readable card surface during cold decoding or an asset error. */
.cl-card-face,.battle-face{background:#302b26}.cl-card-face[data-image-state="error"]::after,.battle-face[data-image-state="error"]::after{content:"Image unavailable";position:absolute;inset:35% 8%;display:grid;place-items:center;background:#211d18de;color:#dcc7a0;font-size:11px;text-align:center}html[lang^="zh"] [data-image-state="error"]::after{content:"图片加载失败"}
.cl-assets-pending .cl-gallery-card,.cl-assets-pending .cl-preview{background:#3b342b;border-radius:8px}.cl-assets-pending .cl-gallery-card .cl-card-face,.cl-assets-pending .cl-preview .cl-card-face{opacity:0}.cl-gallery-card .cl-card-face,.cl-preview .cl-card-face{transition:opacity .18s ease,filter .2s,box-shadow .2s}

/* Keep the primary action beside the loadout, away from the top utility controls. */
.cl-add-card{position:absolute;left:2.5%;bottom:12%;width:13.5%;min-height:44px;padding:0 5px;border:1px solid #d3ad7090;border-radius:7px;background:#463926e8;color:#f6ddb4;font-size:12px!important;font-weight:700;cursor:pointer;touch-action:manipulation}.cl-add-card:focus-visible{outline:2px solid #edc98c;outline-offset:3px}.cl-tool[hidden]{display:none!important}.cl-slots{left:18%;width:59%;top:12%;bottom:12%}.cl-tray-title{position:absolute;left:2.5%;top:9%;width:14%;font-size:14px;letter-spacing:0}.cl-counter{display:block;margin:4px 0 0;font-size:18px}.cl-deck-hint{right:23%;top:0;font-size:10px}
@media(max-height:550px) and (orientation:landscape){.cl-info{width:auto;right:calc(max(1.3%,env(safe-area-inset-right)) + 232px)}.cl-info-name{letter-spacing:0;font-size:12px}.cl-info-sub{font-size:10px;line-height:1.2}.cl-add-card{bottom:5%;font-size:11px!important}.cl-tray{height:max(24%,96px)}.cl-tray-title{top:7%;font-size:11px;line-height:14px}.cl-counter{font-size:16px;line-height:16px;margin:2px 0 0}.cl-slots{top:9%;bottom:9%}.cl-deck-hint{display:none}.cl-gallery-wrap{bottom:calc(max(24%,96px) + max(12px,env(safe-area-inset-bottom)) + 6px)}.cl-tool{min-height:44px;min-width:44px}.cl-confirm{font-size:12px!important;white-space:normal}}
@media(orientation:portrait){.cl-add-card{left:4%;bottom:5%;width:40%}.cl-tray-title{width:42%}.cl-slots{left:5%;width:90%;top:28%;bottom:34%}.cl-deck-hint{display:none}}
/* The outer App shell must not double-tap zoom before a scene stylesheet loads. */
html,body{touch-action:manipulation}
@media(pointer:coarse){input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select{font-size:16px}}