:root {
  color-scheme: dark;
  --bg: #070916;
  --panel: rgba(14, 18, 39, .86);
  --panel-strong: rgba(17, 22, 48, .96);
  --stroke: rgba(255, 255, 255, .09);
  --stroke-hot: rgba(255, 74, 111, .5);
  --text: #f7f8ff;
  --muted: #9ca6c6;
  --red: #ff3f68;
  --red-2: #d91f52;
  --purple: #8b62ff;
  --blue: #46a8ff;
  --green: #3fe0a0;
  --amber: #ffca5c;
  --danger: #ff667a;
  --shadow: 0 18px 60px rgba(0, 0, 0, .34);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}
button, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.space-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; background: radial-gradient(circle at 45% -10%, #18215c 0, transparent 30%), linear-gradient(180deg, #070916 0%, #090b1a 60%, #060712 100%); }
.nebula { position: absolute; filter: blur(60px); opacity: .28; border-radius: 50%; }
.nebula-a, .nebula.a { width: 430px; height: 430px; right: -180px; top: 80px; background: #b32cff; }
.nebula-b, .nebula.b { width: 320px; height: 320px; left: -150px; top: 520px; background: #1377ff; opacity: .2; }
.stars { position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.2px), radial-gradient(circle, #fff 0 1px, transparent 1.2px); background-size: 58px 58px, 91px 91px; background-position: 0 0, 17px 31px; }

.app-shell { width: min(760px, 100%); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px calc(36px + env(safe-area-inset-bottom)); }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px 18px; }
.brand-wrap { display: flex; align-items: center; gap: 12px; }
.brand-icon { width: 42px; height: 42px; filter: drop-shadow(0 0 18px rgba(255, 63, 104, .45)); }
.brand-wrap h1 { margin: 0; font-size: clamp(24px, 7vw, 34px); line-height: .95; letter-spacing: -.04em; }
.brand-wrap h1 span { color: var(--red); }
.brand-wrap p { margin: 6px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.icon-button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--stroke); background: rgba(255,255,255,.045); color: white; font-size: 24px; cursor: pointer; }

.hero-panel { position: relative; overflow: hidden; padding: 26px; border: 1px solid var(--stroke); border-radius: 28px; background: linear-gradient(135deg, rgba(22, 29, 67, .94), rgba(51, 14, 61, .82)); box-shadow: var(--shadow); }
.hero-panel::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; right: -105px; top: -120px; border: 30px solid rgba(255,255,255,.035); box-shadow: 0 0 80px rgba(255, 44, 103, .18); }
.eyebrow { color: #b5bedb; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero-panel h2 { margin: 7px 0 10px; font-size: clamp(34px, 10vw, 54px); line-height: .96; letter-spacing: -.055em; max-width: 560px; }
.hero-panel h2 span { display: block; color: var(--red); }
.hero-copy { margin: 0; max-width: 600px; color: #c0c7df; line-height: 1.55; font-size: 14px; }

.builder-grid { display: grid; grid-template-columns: 1fr 160px; gap: 12px; margin-top: 14px; }
.control-card { padding: 16px; border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--panel); backdrop-filter: blur(18px); }
.control-card-wide { grid-column: 1 / -1; }
.control-card label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; color: #e8ebf7; }
.control-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.control-heading label { margin: 0 0 3px; }
.control-heading small { display: block; color: var(--muted); font-size: 11px; }
.select-shell { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 15px; border: 1px solid rgba(255,255,255,.1); background: rgba(5, 8, 23, .75); min-height: 50px; }
.select-shell:focus-within { border-color: var(--stroke-hot); box-shadow: 0 0 0 3px rgba(255, 63, 104, .08); }
.field-icon { color: var(--red); font-size: 17px; }
select { width: 100%; min-width: 0; appearance: none; border: 0; outline: none; background: transparent; color: white; cursor: pointer; font-weight: 700; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, #aeb7d4 50%), linear-gradient(135deg, #aeb7d4 50%, transparent 50%); background-position: calc(100% - 12px) 21px, calc(100% - 7px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select option { color: #111; }
.add-row { display: flex; gap: 10px; align-items: stretch; }
.grow { flex: 1; }
.add-button { width: 58px; min-width: 58px; border: 0; border-radius: 16px; background: linear-gradient(145deg, var(--red), var(--red-2)); color: white; font-size: 32px; line-height: 1; cursor: pointer; box-shadow: 0 10px 26px rgba(255, 38, 95, .25); }
.add-button.purple { background: linear-gradient(145deg, #9a71ff, #6243d7); box-shadow: 0 10px 26px rgba(139,98,255,.22); }
.add-button:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.pill { padding: 6px 9px; border-radius: 999px; background: rgba(255,63,104,.1); color: #ff8ba7; font-size: 10px; font-weight: 900; white-space: nowrap; }
.pill-purple { background: rgba(139,98,255,.12); color: #b9a4ff; }

.squad-panel, .cards-view { margin-top: 14px; padding: 20px; border: 1px solid var(--stroke); border-radius: 28px; background: linear-gradient(180deg, rgba(16,20,45,.94), rgba(10,13,29,.94)); box-shadow: var(--shadow); }
.squad-topline, .cards-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.squad-panel h3, .cards-view h3, .cards-header h3 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.03em; }
.threat-meter { min-width: 102px; padding: 10px 12px; text-align: center; border-radius: 17px; background: linear-gradient(145deg, rgba(255,63,104,.17), rgba(115,32,114,.22)); border: 1px solid rgba(255,91,126,.26); }
.threat-meter span { font-weight: 900; font-size: 22px; }
.threat-meter .slash { color: #7983a7; padding: 0 3px; }
.threat-meter small { display: block; margin-top: 2px; color: #a9b1cc; font-size: 9px; letter-spacing: .16em; font-weight: 800; }
.threat-meter.over { border-color: rgba(255,102,122,.75); box-shadow: 0 0 24px rgba(255, 42, 70, .14); }
.threat-meter.exact { border-color: rgba(63,224,160,.6); box-shadow: 0 0 24px rgba(63,224,160,.11); }

.validation-stack { display: grid; gap: 8px; margin: 16px 0 0; }
.validation { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 14px; font-size: 12px; line-height: 1.35; }
.validation.ok { color: #caffea; background: rgba(63,224,160,.09); border: 1px solid rgba(63,224,160,.18); }
.validation.warn { color: #ffe8ae; background: rgba(255,202,92,.09); border: 1px solid rgba(255,202,92,.2); }
.validation.bad { color: #ffd3da; background: rgba(255,102,122,.09); border: 1px solid rgba(255,102,122,.23); }
.validation strong { color: inherit; }

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 12px 20px; color: var(--muted); }
.empty-state strong { color: #eef0fa; margin: 10px 0 4px; }
.empty-state span { font-size: 12px; }
.empty-orbit { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); color: var(--red); box-shadow: inset 0 0 24px rgba(255,63,104,.09); }
.squad-list { display: grid; gap: 9px; margin-top: 16px; }
.squad-member { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 11px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: rgba(255,255,255,.035); }
.member-avatar { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: 14px; letter-spacing: -.03em; background: linear-gradient(145deg, rgba(68,129,255,.5), rgba(239,63,130,.4)); border: 1px solid rgba(255,255,255,.14); }
.member-name { font-weight: 850; font-size: 14px; }
.member-meta { margin-top: 3px; font-size: 10px; color: var(--muted); }
.threat-badge { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 12px; background: rgba(255,63,104,.12); color: #ff91aa; font-weight: 900; }
.remove-button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); color: #c8cfe3; font-size: 19px; cursor: pointer; }
.remove-button:hover { color: white; border-color: rgba(255,102,122,.3); }

.squad-actions { display: grid; grid-template-columns: 110px 1fr; gap: 10px; margin-top: 16px; }
.primary-button, .secondary-button { min-height: 52px; border: 0; border-radius: 16px; font-weight: 900; letter-spacing: .03em; cursor: pointer; }
.primary-button { color: white; background: linear-gradient(145deg, var(--red), #b8175f); box-shadow: 0 10px 28px rgba(255, 36, 93, .23); }
.primary-button:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.secondary-button { color: #dbe0f0; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); }
.secondary-button.compact { min-height: 40px; padding: 0 14px; }

.hidden { display: none !important; }
.team-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 12px; scrollbar-width: none; }
.team-tabs::-webkit-scrollbar { display: none; }
.team-tab { min-width: max-content; padding: 10px 12px; border-radius: 13px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: #bec6dc; cursor: pointer; font-size: 12px; font-weight: 800; }
.team-tab.active { background: rgba(255,63,104,.12); color: white; border-color: rgba(255,63,104,.38); }
.character-card { overflow: hidden; min-height: 520px; border-radius: 24px; border: 1px solid rgba(255,255,255,.12); background: var(--panel-strong); position: relative; }
.card-art { min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; position: relative; overflow: hidden; background: radial-gradient(circle at 70% 15%, rgba(255,244,152,.5), transparent 18%), radial-gradient(circle at 40% 30%, rgba(80,99,255,.45), transparent 28%), linear-gradient(135deg, #111b4f, #511642 78%); }
.card-art::before { content: ""; position: absolute; width: 260px; height: 260px; border: 32px solid rgba(255,255,255,.05); border-radius: 50%; right: -75px; top: -70px; transform: rotate(18deg); }
.card-art::after { content: "✦"; position: absolute; right: 32px; top: 42px; color: rgba(255,255,255,.85); font-size: 110px; text-shadow: 0 0 45px rgba(255,255,255,.35); }
.card-art h4 { position: relative; z-index: 1; font-size: 34px; margin: 0; letter-spacing: -.04em; }
.card-art p { position: relative; z-index: 1; color: #d0d7ef; margin: 6px 0 0; }
.card-body { padding: 18px; }
.card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
.stat span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.stat strong { display: block; margin-top: 4px; font-size: 18px; }
.card-placeholder { margin-top: 12px; padding: 14px; border-radius: 16px; background: rgba(139,98,255,.09); border: 1px solid rgba(139,98,255,.16); color: #d9d0ff; font-size: 12px; line-height: 1.5; }
.card-note { margin: 12px 2px 0; color: #7f89aa; font-size: 10px; line-height: 1.5; }
.legal-note { margin: 18px 8px 0; text-align: center; color: #66708e; font-size: 9px; line-height: 1.45; }

.about-dialog { width: min(440px, calc(100% - 28px)); border: 1px solid rgba(255,255,255,.11); border-radius: 24px; color: white; background: #10142b; box-shadow: 0 30px 100px rgba(0,0,0,.6); padding: 25px; }
.about-dialog::backdrop { background: rgba(3,5,13,.78); backdrop-filter: blur(8px); }
.about-dialog h3 { font-size: 26px; margin: 6px 0 12px; }
.about-dialog p { color: #bec6dd; line-height: 1.55; }
.dialog-small { font-size: 11px; color: #7f89a8 !important; }
.dialog-close { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: white; font-size: 22px; cursor: pointer; }

@media (max-width: 540px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .hero-panel { padding: 22px; }
  .builder-grid { grid-template-columns: 1fr 126px; }
  .control-card { padding: 13px; }
  .squad-panel, .cards-view { padding: 16px; }
  .squad-member { grid-template-columns: 44px 1fr auto auto; gap: 8px; }
  .member-avatar { width: 44px; height: 44px; }
}

@media (max-width: 380px) {
  .builder-grid { grid-template-columns: 1fr; }
  .control-card { grid-column: 1 / -1; }
  .brand-wrap p { display: none; }
  .squad-actions { grid-template-columns: 88px 1fr; }
}

/* Captain Roster v2 — mode, steps, tactics & digital cards */
.mode-strip { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px; }
.mode-card { min-width:0; }
.mode-card.muted { opacity:.55; }
.mode-explain { grid-column:1/-1; padding:10px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); color:#9ea8c7; font-size:11px; line-height:1.5; }
.mode-explain strong { color:#f1f3fb; }
.mode-orbit { position:absolute; right:30px; top:23px; width:70px; height:70px; border:1px solid rgba(255,255,255,.1); border-radius:50%; display:grid; place-items:center; color:#ff6688; font-size:30px; box-shadow:0 0 40px rgba(255,63,104,.15), inset 0 0 30px rgba(139,98,255,.08); }

.step-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; position:sticky; top:8px; z-index:15; padding:6px; border-radius:18px; background:rgba(8,11,28,.78); border:1px solid rgba(255,255,255,.07); backdrop-filter:blur(16px); box-shadow:0 12px 35px rgba(0,0,0,.18); }
.step-tab { min-height:42px; border:0; border-radius:13px; background:transparent; color:#7f89a8; font-weight:850; cursor:pointer; }
.step-tab.active { color:white; background:linear-gradient(145deg,rgba(255,63,104,.22),rgba(139,98,255,.15)); box-shadow:inset 0 0 0 1px rgba(255,93,127,.2); }
.step-tab span { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:5px; border-radius:999px; background:rgba(255,255,255,.08); font-size:10px; }
.step-panel { animation:panelIn .22s ease-out; }
@keyframes panelIn { from{opacity:.25;transform:translateY(5px)} to{opacity:1;transform:none} }

.data-status { margin-top:12px; color:#7782a3; font-size:10px; display:flex; align-items:center; gap:7px; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.dot.live { background:#3fe0a0; box-shadow:0 0 12px rgba(63,224,160,.75); }
.dot.cache { background:#ffc85c; box-shadow:0 0 12px rgba(255,200,92,.55); }
.dot.fallback { background:#ff667a; }
.subcopy { margin:7px 0 0; color:#8f99b8; font-size:12px; line-height:1.45; }

.tactic-controls { display:grid; grid-template-columns:1fr 190px; gap:10px; margin:14px 0; }
.tactic-controls input { width:100%; border:0; outline:0; background:transparent; color:white; font:inherit; font-size:13px; }
.tactic-controls input::placeholder { color:#687391; }
.tactic-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 15px; border:1px solid rgba(255,255,255,.08); border-radius:17px; background:rgba(255,255,255,.035); }
.tactic-summary strong { display:block; font-size:14px; }
.tactic-summary span { display:block; margin-top:3px; color:#8893b2; font-size:10px; }
.restricted-count { color:#ffcb67; font-size:11px; font-weight:900; }
.selected-tactics { display:flex; gap:7px; overflow-x:auto; padding:10px 0 2px; scrollbar-width:none; }
.selected-tactics::-webkit-scrollbar { display:none; }
.selected-tactic { flex:none; min-height:34px; max-width:230px; padding:0 11px; border-radius:999px; border:1px solid rgba(255,63,104,.24); background:rgba(255,63,104,.09); color:#f8eaf0; font-size:10px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.selected-tactic span { color:#ff7e9b; margin-left:5px; }
.tactic-list { display:grid; gap:8px; margin-top:12px; max-height:620px; overflow:auto; padding-right:2px; }
.tactic-row { display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:11px; padding:13px 14px; border:1px solid rgba(255,255,255,.07); border-radius:17px; background:rgba(255,255,255,.035); }
.tactic-row.disabled { opacity:.42; }
.tactic-row h4 { margin:0 0 7px; font-size:13px; }
.tactic-row p { margin:6px 0 0; color:#707b9d; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.tactic-row-copy{min-width:0}.tactic-list-thumb{width:54px;height:74px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:radial-gradient(circle at 45% 28%,rgba(182,73,255,.24),transparent 48%),#090715;border:1px solid rgba(255,255,255,.07);box-shadow:0 6px 18px rgba(0,0,0,.22)}.tactic-list-thumb>b{font-size:21px;color:#d7b6ff;opacity:.72}.tactic-list-thumb img,.tactic-list-thumb canvas{width:100%;height:100%;display:block;object-fit:cover}
.tactic-badges { display:flex; flex-wrap:wrap; gap:5px; }
.tactic-badges span { max-width:250px; padding:4px 7px; border-radius:999px; background:rgba(139,98,255,.1); color:#bcb0f9; font-size:8px; font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tactic-badges span.hot { background:rgba(255,63,104,.1); color:#ff9ab0; }
.mini-add { width:42px; height:42px; border-radius:13px; border:1px solid rgba(255,63,104,.25); background:rgba(255,63,104,.11); color:#ff8ca5; font-size:22px; font-weight:900; cursor:pointer; }
.mini-add.selected { background:rgba(63,224,160,.1); border-color:rgba(63,224,160,.25); color:#7cf0bd; }
.mini-add:disabled { cursor:not-allowed; }

.viewer-kind { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:5px; margin:14px 0 0; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); }
.viewer-kind-btn { min-height:39px; border:0; border-radius:12px; background:transparent; color:#7f8aa9; font-weight:850; cursor:pointer; }
.viewer-kind-btn.active { color:#fff; background:linear-gradient(145deg,rgba(255,63,104,.18),rgba(139,98,255,.13)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.card-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.card-actions .secondary-button { display:flex; align-items:center; justify-content:center; }
.card-hero { min-height:190px; position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:24px; background:radial-gradient(circle at 85% 25%,rgba(255,196,80,.28),transparent 22%), radial-gradient(circle at 65% 45%,rgba(120,81,255,.3),transparent 34%), linear-gradient(135deg,#111a4c,#47133d 85%); }
.card-hero::after { content:'✦'; position:absolute; right:24px; top:18px; font-size:92px; color:rgba(255,255,255,.07); }
.card-hero > * { position:relative; z-index:2; }
.card-hero h2 { margin:7px 0 4px; font-size:clamp(28px,8vw,42px); line-height:.98; letter-spacing:-.045em; }
.card-hero p { margin:0; color:#aab4d2; font-size:11px; }
.big-threat { display:grid; place-items:center; flex:none; width:60px; height:60px; border-radius:18px; background:linear-gradient(145deg,#ff416b,#9c1656); border:1px solid rgba(255,255,255,.15); font-size:27px; font-weight:950; box-shadow:0 12px 30px rgba(255,40,95,.23); }
.face-badge { width:max-content; margin:14px 16px 0; padding:6px 10px; border-radius:999px; background:rgba(63,224,160,.09); border:1px solid rgba(63,224,160,.16); color:#91f4c8; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding:12px 16px 4px; }
.stats-grid > div { min-width:0; padding:10px 8px; border-radius:13px; border:1px solid rgba(255,255,255,.065); background:rgba(255,255,255,.035); }
.stats-grid span { display:block; color:#7782a3; font-size:8px; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stats-grid strong { display:block; margin-top:4px; font-size:17px; }
.profile-grid { display:grid; gap:9px; padding:12px 16px 18px; }
.profile-block { padding:13px; border-radius:16px; border:1px solid rgba(139,98,255,.13); background:rgba(139,98,255,.055); }
.profile-block h4 { margin:0 0 9px; color:#f2efff; font-size:13px; }
.profile-line { display:grid; grid-template-columns:minmax(80px,140px) 1fr; gap:10px; padding:7px 0; border-top:1px solid rgba(255,255,255,.05); font-size:10px; line-height:1.45; }
.profile-line:first-of-type { border-top:0; }
.profile-line b { color:#aeb7d3; }
.profile-line span { color:#d8ddef; }
.tactic-rule-card { margin:16px; padding:17px; border-radius:17px; border:1px solid rgba(255,63,104,.13); background:linear-gradient(145deg,rgba(255,63,104,.07),rgba(139,98,255,.06)); color:#e3e6f2; font-size:12px; line-height:1.65; white-space:normal; }
.placeholder-copy { color:#8792b1; padding:16px; font-size:11px; }

@media (max-width:540px) {
  .mode-orbit { display:none; }
  .tactic-controls { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .profile-line { grid-template-columns:1fr; gap:4px; }
  .step-tab { font-size:11px; }
}
@media (max-width:380px) {
  .mode-strip { grid-template-columns:1fr; }
  .mode-explain { grid-column:1; }
  .step-tabs { gap:4px; }
  .step-tab { font-size:10px; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* === Captain Roster visual pass — cosmic / comic / less austere === */
:root {
  --panel: rgba(12, 16, 39, .78);
  --panel-strong: rgba(12, 16, 38, .95);
  --stroke: rgba(152, 190, 255, .16);
  --stroke-hot: rgba(255, 73, 115, .65);
  --shadow: 0 22px 70px rgba(0, 0, 0, .42), 0 0 0 1px rgba(110, 160, 255, .035);
}
body { background:#050713; }
.space-bg {
  background:
    radial-gradient(ellipse at 78% 10%, rgba(77, 57, 185, .62) 0, rgba(77,57,185,.13) 23%, transparent 45%),
    radial-gradient(ellipse at 16% 30%, rgba(0, 119, 255, .30) 0, transparent 35%),
    radial-gradient(ellipse at 65% 72%, rgba(219, 28, 114, .19) 0, transparent 34%),
    linear-gradient(180deg, #070a1a 0%, #050817 55%, #050611 100%);
}
.space-bg::before {
  content:""; position:absolute; width:520px; height:520px; right:-260px; top:72px; border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(89,178,255,.9), rgba(21,67,143,.65) 18%, rgba(10,19,58,.9) 48%, rgba(2,5,18,.2) 68%),
    conic-gradient(from 20deg, rgba(255,255,255,.16), transparent 16%, rgba(142,95,255,.18) 42%, transparent 68%, rgba(255,66,122,.12));
  box-shadow: -30px 20px 120px rgba(44,114,255,.22), 0 0 120px rgba(211,54,255,.10);
  opacity:.76;
}
.space-bg::after {
  content:""; position:absolute; width:700px; height:210px; left:-180px; top:350px; transform:rotate(-13deg);
  background:linear-gradient(90deg, transparent, rgba(58,112,255,.10), rgba(238,62,157,.11), transparent);
  filter:blur(26px); border-radius:50%;
}
.stars { opacity:.54; background-size:44px 44px, 83px 83px; }
.nebula { filter:blur(78px); opacity:.34; }
.app-shell { padding-left:15px; padding-right:15px; }

.app-header { padding-top:11px; padding-bottom:16px; }
.brand-icon { width:48px; height:48px; filter:drop-shadow(0 0 22px rgba(255, 56, 103, .62)); }
.brand-wrap h1 { text-shadow:0 3px 22px rgba(0,0,0,.45); }
.brand-wrap h1 span {
  background:linear-gradient(180deg,#ff657f 0%,#ff315d 58%,#d91f52 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.icon-button { background:linear-gradient(145deg,rgba(55,68,126,.48),rgba(20,23,55,.75)); border-color:rgba(140,172,255,.19); box-shadow:0 10px 30px rgba(0,0,0,.23); }

.hero-panel {
  min-height:205px; display:flex; align-items:flex-end; padding:27px 24px 24px;
  border-color:rgba(109,161,255,.31);
  background:
    linear-gradient(90deg, rgba(5,11,29,.98) 0%, rgba(8,16,39,.92) 48%, rgba(29,15,62,.62) 100%),
    radial-gradient(circle at 78% 35%, rgba(53,123,255,.4), transparent 35%);
  box-shadow:0 26px 80px rgba(0,0,0,.44), inset 0 0 80px rgba(68,104,255,.06), 0 0 45px rgba(46,122,255,.08);
}
.hero-panel::before {
  content:""; position:absolute; right:-58px; bottom:-95px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle at 37% 33%, #65c7ff 0 3%, #2252a5 16%, #101c58 38%, #090b28 62%, transparent 63%);
  box-shadow:-30px -25px 70px rgba(66,157,255,.18), 0 0 90px rgba(189,58,255,.12); opacity:.95;
}
.hero-panel::after {
  content:""; position:absolute; inset:auto -30px 22px 42%; height:72px;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.03), rgba(255,65,117,.11), transparent); transform:skewX(-22deg);
  border:0; border-radius:0; box-shadow:none;
}
.hero-panel > div:first-child { position:relative; z-index:2; max-width:74%; }
.hero-panel h2 { text-shadow:0 6px 28px rgba(0,0,0,.38); }
.hero-panel h2 span { background:linear-gradient(90deg,#ff466d,#ff6b86); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-panel p { color:#c7d2ee; }
.mode-orbit { z-index:3; width:76px; height:76px; right:23px; top:21px; border-color:rgba(255,92,127,.32); background:radial-gradient(circle,rgba(255,63,104,.18),rgba(123,74,255,.06) 56%,transparent 58%); box-shadow:0 0 42px rgba(255,63,104,.26), inset 0 0 26px rgba(110,76,255,.14); }

.control-card {
  border-color:rgba(107,159,255,.18);
  background:linear-gradient(150deg, rgba(19,27,62,.88), rgba(9,13,31,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 13px 38px rgba(0,0,0,.17);
}
.control-card-wide.add-card:nth-of-type(3) { background:linear-gradient(150deg,rgba(24,35,80,.91),rgba(9,14,34,.87)); }
.control-card-wide.add-card:nth-of-type(4) { background:linear-gradient(150deg,rgba(45,22,78,.86),rgba(12,12,35,.88)); border-color:rgba(166,102,255,.24); }
.select-shell {
  background:linear-gradient(180deg,rgba(4,9,28,.92),rgba(8,13,34,.78));
  border-color:rgba(117,159,255,.20); box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.select-shell:focus-within { border-color:rgba(255,76,116,.62); box-shadow:0 0 0 3px rgba(255,63,104,.10), 0 0 22px rgba(255,63,104,.08); }
.field-icon { text-shadow:0 0 16px rgba(255,63,104,.55); }
.add-button { background:linear-gradient(145deg,#ff5477,#d61955); box-shadow:0 12px 32px rgba(255,35,91,.34), inset 0 1px 0 rgba(255,255,255,.20); }
.add-button.purple { background:linear-gradient(145deg,#a776ff,#653bea); box-shadow:0 12px 30px rgba(118,76,255,.32); }

.mode-explain { background:linear-gradient(90deg,rgba(54,73,136,.13),rgba(162,64,158,.08)); border-color:rgba(115,156,255,.16); }
.step-tabs { background:rgba(5,10,26,.82); border-color:rgba(93,140,255,.15); box-shadow:0 14px 40px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.02); }
.step-tab.active { background:linear-gradient(145deg,rgba(255,55,103,.31),rgba(123,72,255,.23)); box-shadow:inset 0 0 0 1px rgba(255,105,140,.26), 0 6px 22px rgba(210,42,98,.11); }

.squad-panel, .cards-view {
  border-color:rgba(86,139,255,.19);
  background:linear-gradient(180deg,rgba(12,19,46,.95),rgba(7,10,26,.97));
  box-shadow:0 24px 72px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.025);
}
.squad-member {
  position:relative; overflow:hidden; border-color:rgba(93,144,255,.15);
  background:linear-gradient(100deg,rgba(28,39,86,.58),rgba(15,17,44,.74) 56%,rgba(55,18,59,.34));
}
.squad-member::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(#51b5ff,#a45fff,#ff4b71); box-shadow:0 0 18px rgba(82,161,255,.45); }
.member-avatar { background:linear-gradient(145deg,#214c9b,#6e35a5 55%,#bd2d69); box-shadow:0 0 24px rgba(66,126,255,.18); }
.threat-badge { background:linear-gradient(145deg,rgba(255,63,104,.22),rgba(147,32,115,.22)); border:1px solid rgba(255,94,132,.22); box-shadow:0 0 22px rgba(255,63,104,.08); }
.threat-meter { background:linear-gradient(145deg,rgba(255,61,104,.25),rgba(90,37,142,.28)); border-color:rgba(255,103,138,.33); box-shadow:0 8px 26px rgba(163,27,90,.13); }
.threat-meter.exact { background:linear-gradient(145deg,rgba(34,190,134,.18),rgba(28,103,129,.20)); }
.primary-button { background:linear-gradient(135deg,#ff4e72 0%,#f22f5e 47%,#9d1e76 100%); box-shadow:0 13px 35px rgba(255,37,91,.30), inset 0 1px 0 rgba(255,255,255,.18); }
.primary-button:hover { filter:brightness(1.06); }
.secondary-button { background:linear-gradient(180deg,rgba(49,62,111,.34),rgba(18,22,50,.40)); border-color:rgba(111,150,255,.15); }

.tactic-summary { background:linear-gradient(110deg,rgba(41,57,116,.34),rgba(89,31,95,.24)); border-color:rgba(110,151,255,.16); }
.tactic-row { position:relative; overflow:hidden; background:linear-gradient(110deg,rgba(27,39,85,.58),rgba(13,17,40,.74)); border-color:rgba(94,143,255,.13); }
.tactic-row::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(#815cff,#ff4b72); opacity:.75; }
.tactic-row:hover { border-color:rgba(255,83,122,.28); transform:translateY(-1px); transition:.15s ease; }
.mini-add { background:linear-gradient(145deg,rgba(255,63,104,.19),rgba(130,39,121,.18)); box-shadow:0 6px 20px rgba(255,63,104,.08); }
.mini-add.selected { background:linear-gradient(145deg,rgba(52,211,153,.20),rgba(19,122,113,.18)); }

.character-card { border-color:rgba(96,151,255,.25); background:linear-gradient(180deg,#0b1230,#090b1d); box-shadow:0 25px 80px rgba(0,0,0,.45), 0 0 40px rgba(55,110,255,.06); }
.card-hero {
  min-height:230px;
  background:
    radial-gradient(circle at 84% 23%,rgba(255,198,76,.52),transparent 18%),
    radial-gradient(circle at 70% 38%,rgba(91,84,255,.42),transparent 31%),
    radial-gradient(circle at 22% 80%,rgba(27,145,255,.22),transparent 30%),
    linear-gradient(135deg,#0e1949 0%,#24165f 53%,#5d173d 100%);
}
.card-hero::before { content:""; position:absolute; width:200px; height:200px; right:-35px; top:35px; border-radius:50%; border:1px solid rgba(255,203,102,.22); box-shadow:0 0 46px rgba(255,173,66,.22), inset 0 0 50px rgba(255,127,63,.09); }
.card-hero::after { color:rgba(255,255,255,.10); text-shadow:0 0 30px rgba(255,210,94,.28); }
.big-threat { background:linear-gradient(145deg,#ff5475,#bb185b 60%,#7c1d77); box-shadow:0 15px 36px rgba(255,39,92,.34); }
.stats-grid > div { background:linear-gradient(145deg,rgba(28,44,91,.62),rgba(17,20,46,.72)); border-color:rgba(92,143,255,.14); }
.profile-block { background:linear-gradient(145deg,rgba(75,47,144,.16),rgba(16,27,62,.36)); border-color:rgba(146,91,255,.18); }
.profile-block:nth-child(2n) { background:linear-gradient(145deg,rgba(24,84,143,.17),rgba(16,27,62,.36)); border-color:rgba(73,162,255,.17); }
.viewer-kind { background:linear-gradient(180deg,rgba(22,32,73,.55),rgba(9,12,31,.65)); border-color:rgba(94,142,255,.12); }
.viewer-kind-btn.active { background:linear-gradient(145deg,rgba(255,63,104,.27),rgba(105,69,255,.22)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 7px 24px rgba(255,63,104,.08); }

@media (max-width:540px) {
  .hero-panel { min-height:190px; }
  .hero-panel > div:first-child { max-width:80%; }
  .hero-panel::before { width:230px; height:230px; right:-90px; bottom:-70px; }
}

/* === V5.1: dropdown stacking fix === */
.control-card { position:relative; }
.control-card.dropdown-open { z-index:260; }
.select-shell.dropdown-open { z-index:270; }
.cosmic-select.open { z-index:280; }
.builder-grid, .mode-strip { position:relative; overflow:visible; }

/* === V5: custom cosmic dropdowns + card-first viewer === */
.select-shell { position:relative; overflow:visible; }
.cosmic-native-select { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; overflow:hidden !important; }
.cosmic-select { position:relative; min-width:0; flex:1; }
.cosmic-select-trigger { width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 4px 0 0; border:0; background:transparent; color:var(--text); font:inherit; font-weight:800; text-align:left; cursor:pointer; }
.cosmic-select-trigger:disabled { opacity:.45; cursor:not-allowed; }
.cosmic-select-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cosmic-select-chevron { flex:none; color:#9facce; font-size:20px; line-height:1; transition:transform .16s ease; }
.cosmic-select.open .cosmic-select-chevron { transform:rotate(180deg); }
.cosmic-select-panel { display:none; position:absolute; z-index:70; left:-38px; right:0; top:calc(100% + 8px); padding:9px; border-radius:18px; border:1px solid rgba(122,159,255,.28); background:linear-gradient(180deg,rgba(8,13,34,.985),rgba(12,9,31,.99)); box-shadow:0 24px 70px rgba(0,0,0,.64),0 0 42px rgba(87,69,255,.13),inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter:blur(24px); }
.cosmic-select.open .cosmic-select-panel { display:block; animation:cosmicMenuIn .12s ease-out; }
@keyframes cosmicMenuIn { from{opacity:0;transform:translateY(-5px) scale(.99)} to{opacity:1;transform:none} }
.cosmic-select-search { padding:2px 2px 8px; }
.cosmic-select-search.hidden { display:none; }
.cosmic-select-search input { width:100%; min-height:42px; border-radius:12px; border:1px solid rgba(119,154,255,.18); background:rgba(4,8,25,.82); color:#fff; padding:0 12px; outline:none; font:inherit; font-size:13px; }
.cosmic-select-search input:focus { border-color:rgba(255,77,118,.56); box-shadow:0 0 0 3px rgba(255,63,104,.08); }
.cosmic-select-list { max-height:min(370px,55vh); overflow:auto; display:grid; gap:5px; padding:1px; scrollbar-width:thin; scrollbar-color:#4f5480 transparent; }
.cosmic-option { width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid transparent; border-radius:12px; padding:8px 10px; background:rgba(255,255,255,.025); color:#eef2ff; text-align:left; cursor:pointer; }
.cosmic-option:hover,.cosmic-option.selected { background:linear-gradient(100deg,rgba(56,83,159,.33),rgba(124,48,133,.24)); border-color:rgba(112,153,255,.2); }
.cosmic-option.selected { box-shadow:inset 3px 0 0 var(--red); }
.cosmic-option.disabled { opacity:.36; cursor:not-allowed; }
.cosmic-option-copy { min-width:0; display:block; }
.cosmic-option-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.cosmic-option-copy small { display:block; margin-top:3px; color:#8895b9; font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cosmic-option-threat { flex:none; min-width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(145deg,rgba(255,72,111,.23),rgba(120,54,159,.27)); color:#fff; font-weight:950; border:1px solid rgba(255,95,132,.19); }
.cosmic-option-check { color:#68e6b5; font-weight:950; }

.card-data-status { margin:10px 2px 0; min-height:26px; display:flex; align-items:center; gap:2px; color:#8793b4; font-size:10px; }
.card-stage { position:relative; margin-top:10px; }
.card-nav { position:absolute; z-index:12; top:50%; transform:translateY(-50%); width:42px; height:58px; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:rgba(6,10,28,.78); color:#fff; font-size:36px; line-height:1; backdrop-filter:blur(12px); cursor:pointer; box-shadow:0 8px 30px rgba(0,0,0,.32); }
.card-nav:disabled { opacity:0; pointer-events:none; }
.card-nav-prev { left:-8px; }
.card-nav-next { right:-8px; }
.card-actions { grid-template-columns:repeat(3,1fr); }

.mcp-digital-card { overflow:hidden; border-radius:inherit; background:linear-gradient(180deg,#09112c,#070a1a); }
.card-identity { min-width:0; max-width:72%; }
.card-art-mark { position:absolute !important; right:62px; top:28px; width:170px; height:170px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 38% 35%,rgba(255,225,121,.55),rgba(255,95,91,.22) 18%,rgba(106,76,255,.17) 42%,rgba(21,32,83,.12) 62%,transparent 64%); border:1px solid rgba(255,205,105,.19); box-shadow:0 0 58px rgba(255,154,66,.16),inset 0 0 55px rgba(120,81,255,.12); transform:rotate(-9deg); }
.card-art-mark::before,.card-art-mark::after { content:""; position:absolute; inset:16px; border:1px solid rgba(255,255,255,.12); border-radius:46% 54% 48% 52%; transform:rotate(28deg); }
.card-art-mark::after { inset:35px; transform:rotate(73deg); border-color:rgba(104,190,255,.17); }
.card-art-mark span { position:relative; z-index:2; font-size:46px; font-weight:950; letter-spacing:-.08em; color:rgba(255,255,255,.88); text-shadow:0 0 24px rgba(255,255,255,.25); }
.tactic-mark span { font-size:66px; color:#ff6d91; }
.big-threat { flex-direction:column; gap:0; }
.big-threat small { display:block; font-size:6px; letter-spacing:.11em; opacity:.7; }
.source-chip { display:inline-flex; margin-top:10px; padding:5px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.09); background:rgba(4,7,20,.38); color:#a9b7dc; font-size:8px; font-weight:850; letter-spacing:.08em; }
.face-and-stats { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; padding:10px 14px 0; }
.face-and-stats .face-badge { margin:0; }
.face-and-stats .stats-grid { padding:0; grid-template-columns:repeat(6,minmax(0,1fr)); }
.card-rules-columns { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 14px 16px; }
.card-rules-col { min-width:0; display:grid; align-content:start; gap:8px; }
.rules-heading { padding:0 2px 2px; color:#93a7d8; font-size:9px; font-weight:950; letter-spacing:.15em; }
.profile-block { padding:11px 12px; }
.profile-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:9px; }
.profile-title-row h4 { margin:2px 0 0; font-size:12px; }
.profile-type { color:#798ab8; font-size:7px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.profile-meta { display:flex; gap:4px; flex:none; }
.profile-meta span { min-width:35px; padding:5px 6px; border-radius:9px; text-align:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.055); }
.profile-meta small { display:block; color:#7481a4; font-size:6px; text-transform:uppercase; }
.profile-meta b { display:block; margin-top:1px; color:#fff; font-size:12px; }
.profile-rule { display:grid; gap:3px; padding-top:7px; margin-top:7px; border-top:1px solid rgba(255,255,255,.055); }
.profile-rule b { color:#aeb7d3; font-size:8px; }
.profile-rule span { color:#d9e0f1; font-size:9px; line-height:1.42; }
.profile-attack { border-color:rgba(255,75,111,.18); background:linear-gradient(145deg,rgba(119,25,59,.18),rgba(23,28,63,.36)); }
.profile-leadership { border-color:rgba(255,202,92,.18); background:linear-gradient(145deg,rgba(121,79,17,.18),rgba(26,28,58,.36)); }
.empty-rule { padding:12px; border-radius:13px; border:1px dashed rgba(255,255,255,.09); color:#727f9f; font-size:9px; }
.card-loading-panel { margin:14px; padding:18px; display:grid; gap:5px; border-radius:17px; border:1px solid rgba(83,143,255,.17); background:linear-gradient(145deg,rgba(34,67,134,.16),rgba(82,34,107,.12)); }
.card-loading-panel strong { font-size:12px; }
.card-loading-panel span { color:#8793b4; font-size:10px; line-height:1.5; }
.tactic-digital-card .tactic-rule-card { font-size:13px; min-height:220px; }

.card-stage:fullscreen { width:100vw; height:100vh; background:#040611; padding:0; display:grid; place-items:center; }
.card-stage:fullscreen .character-card { width:100%; height:100%; max-width:none; border:0; border-radius:0; margin:0; overflow:auto; }
.card-stage:fullscreen .card-nav { position:fixed; }
.card-fullscreen .card-actions,.card-fullscreen .team-tabs,.card-fullscreen .viewer-kind,.card-fullscreen .card-data-status { opacity:0; pointer-events:none; }

@media (max-width:700px) {
  .cosmic-select-panel { left:-38px; right:0; }
  .card-actions { grid-template-columns:1fr; }
  .face-and-stats { grid-template-columns:1fr; }
  .face-and-stats .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .card-rules-columns { grid-template-columns:1fr; }
  .card-art-mark { opacity:.55; right:-30px; }
  .card-identity { max-width:85%; }
}

/* Auto card-first layout when the device is rotated during a game. */
@media (orientation:landscape) and (max-height:720px) {
  body.cards-mode { overflow:hidden; }
  body.cards-mode .app-shell { width:100%; max-width:none; margin:0; padding:0; }
  body.cards-mode .app-header,
  body.cards-mode .hero-panel,
  body.cards-mode .mode-strip,
  body.cards-mode .step-tabs,
  body.cards-mode #squadStep,
  body.cards-mode #tacticsStep,
  body.cards-mode #cardsStep > .cards-header,
  body.cards-mode #cardsStep > .viewer-kind,
  body.cards-mode #cardsStep > .card-data-status,
  body.cards-mode #cardsStep > .team-tabs,
  body.cards-mode #cardsStep > .card-note,
  body.cards-mode .legal-note { display:none !important; }
  body.cards-mode #cardsStep { display:block !important; padding:0; margin:0; }
  body.cards-mode .card-stage { margin:0; width:100vw; height:100vh; }
  body.cards-mode .character-card { height:100%; border-radius:0; border:0; overflow:auto; }
  body.cards-mode .card-actions { position:fixed; z-index:30; left:50%; transform:translateX(-50%); bottom:8px; width:auto; display:flex; gap:6px; margin:0; padding:5px; border-radius:14px; background:rgba(4,7,20,.68); backdrop-filter:blur(14px); opacity:.22; transition:opacity .16s ease; }
  body.cards-mode .card-actions:hover,body.cards-mode .card-actions:focus-within { opacity:1; }
  body.cards-mode .card-actions .secondary-button { min-height:38px; padding:0 11px; font-size:9px; white-space:nowrap; }
  body.cards-mode .card-hero { min-height:35vh; padding:18px 20px; }
  body.cards-mode .card-hero h2 { font-size:clamp(24px,5vw,44px); }
  body.cards-mode .card-rules-columns { grid-template-columns:1fr 1fr; gap:7px; padding:8px 10px 50px; }
  body.cards-mode .profile-block { padding:8px 9px; }
  body.cards-mode .profile-rule { padding-top:5px; margin-top:5px; }
  body.cards-mode .profile-rule span { font-size:8px; }
  body.cards-mode .face-and-stats { padding:7px 10px 0; }
  body.cards-mode .face-and-stats .stats-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  body.cards-mode .stats-grid > div { padding:6px; }
  body.cards-mode .card-nav { position:fixed; top:50%; }
  body.cards-mode .card-nav-prev { left:7px; }
  body.cards-mode .card-nav-next { right:7px; }
}
.card-hud { display:none; position:absolute; z-index:25; right:10px; top:10px; gap:6px; }
.card-hud button { width:42px; height:42px; border-radius:13px; border:1px solid rgba(255,255,255,.12); background:rgba(4,7,20,.72); color:#fff; font-size:20px; backdrop-filter:blur(14px); box-shadow:0 8px 24px rgba(0,0,0,.28); cursor:pointer; }
.card-stage:fullscreen .card-hud { display:flex; position:fixed; }
@media (orientation:landscape) and (max-height:720px) { body.cards-mode .card-hud { display:flex; position:fixed; } }

/* V6 — official AMG card viewer */
.character-card.official-card-active {
  min-height: 0;
  overflow: visible;
  border-color: rgba(94,151,255,.22);
  background: radial-gradient(circle at 50% 10%, rgba(48,92,184,.18), transparent 52%), linear-gradient(180deg,#070b19,#03050d);
}
.official-card-shell {
  position: relative;
  width: 100%;
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 82% 18%, rgba(126,75,255,.16), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(255,51,91,.12), transparent 36%),
    #040714;
}
.official-card-shell::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.20) .7px, transparent .7px);
  background-size: 22px 22px;
  opacity:.16;
}
.official-card-image,
.official-card-canvas {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 26px 80px rgba(0,0,0,.55), 0 0 36px rgba(72,127,255,.10);
}
.official-card-loading {
  position: relative;
  z-index: 2;
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: #eef3ff;
  text-align: center;
}
.official-card-loading strong { font-size: 15px; }
.official-card-loading small { color:#8794b8; font-size:11px; }
.official-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: #ff446d;
  border-right-color: #7c64ff;
  animation: official-spin .8s linear infinite;
}
@keyframes official-spin { to { transform: rotate(360deg); } }
.official-card-source {
  position:absolute;
  z-index:4;
  right:22px;
  bottom:20px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border-radius:10px;
  background:rgba(4,7,20,.76);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.official-card-source span { color:#ff5577; font-size:8px; font-weight:950; letter-spacing:.09em; }
.official-card-source small { color:#aab5d4; font-size:8px; }
.official-card-error {
  margin: 10px 14px 15px;
  padding: 12px 13px;
  border-radius: 13px;
  border:1px solid rgba(255,169,72,.18);
  background:rgba(116,67,12,.12);
  display:grid;
  gap:3px;
}
.official-card-error strong { color:#ffc47c; font-size:10px; }
.official-card-error span { color:#9aa5c3; font-size:9px; line-height:1.45; }

.card-stage:fullscreen .official-card-shell {
  width:100vw;
  height:100vh;
  min-height:0;
  padding:8px 56px;
  border-radius:0;
}
.card-stage:fullscreen .official-card-image,
.card-stage:fullscreen .official-card-canvas {
  width:auto;
  height:auto;
  max-width:calc(100vw - 112px);
  max-height:calc(100vh - 16px);
  border-radius:12px;
}
.card-stage:fullscreen .official-card-source { right:64px; bottom:16px; }

@media (orientation:landscape) and (max-height:720px) {
  body.cards-mode .character-card.official-card-active { overflow:hidden; background:#02040b; }
  body.cards-mode .official-card-shell {
    width:100vw;
    height:100vh;
    min-height:0;
    padding:6px 54px;
    border-radius:0;
  }
  body.cards-mode .official-card-image,
  body.cards-mode .official-card-canvas {
    width:auto;
    height:auto;
    max-width:calc(100vw - 108px);
    max-height:calc(100vh - 12px);
    border-radius:10px;
    box-shadow:0 18px 70px rgba(0,0,0,.55);
  }
  body.cards-mode .official-card-source { right:61px; bottom:11px; opacity:.55; }
}

@media (max-width:700px) and (orientation:portrait) {
  .official-card-shell { min-height:300px; padding:8px; }
  .official-card-image,.official-card-canvas { border-radius:12px; }
  .official-card-source { right:13px; bottom:13px; }
  .official-card-source small { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .official-spinner { animation:none; }
}

/* V7 — official tactic cards + boosted cosmic viewer */
.card-stage {
  isolation:isolate;
  border-radius:28px;
  padding:10px;
  background:
    radial-gradient(circle at 14% 18%,rgba(63,116,255,.13),transparent 28%),
    radial-gradient(circle at 84% 22%,rgba(148,63,255,.11),transparent 30%),
    linear-gradient(160deg,rgba(8,14,35,.72),rgba(4,6,18,.92));
  border:1px solid rgba(103,151,255,.12);
  overflow:hidden;
}
.card-stage::before,
.card-stage::after {
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  filter:blur(18px);
  opacity:.72;
}
.card-stage::before { width:260px;height:260px;left:-110px;top:-90px;background:radial-gradient(circle,rgba(64,127,255,.24),transparent 66%); }
.card-stage::after { width:300px;height:300px;right:-140px;bottom:-130px;background:radial-gradient(circle,rgba(208,52,135,.19),transparent 66%); }
.card-stage.tactic-view {
  background:
    radial-gradient(circle at 18% 15%,rgba(138,83,255,.18),transparent 30%),
    radial-gradient(circle at 88% 76%,rgba(255,56,106,.16),transparent 34%),
    linear-gradient(150deg,rgba(20,10,45,.9),rgba(5,8,23,.96));
  border-color:rgba(177,89,255,.18);
}
.card-stage.tactic-view::before { background:radial-gradient(circle,rgba(142,81,255,.31),transparent 67%); }
.card-stage.tactic-view::after { background:radial-gradient(circle,rgba(255,57,111,.25),transparent 67%); }
.card-stage .character-card,
.card-stage .card-nav,
.card-stage .card-hud { z-index:2; }
.character-card.official-card-active {
  box-shadow:0 24px 90px rgba(0,0,0,.52),0 0 46px rgba(68,125,255,.10);
}
.character-card.official-tactic-active {
  border-color:rgba(186,92,255,.28);
  box-shadow:0 26px 90px rgba(0,0,0,.54),0 0 58px rgba(166,66,255,.13),0 0 34px rgba(255,68,109,.07);
}
.official-tactic-shell {
  min-height:560px;
  background:
    radial-gradient(circle at 50% 10%,rgba(171,83,255,.18),transparent 34%),
    radial-gradient(circle at 50% 90%,rgba(255,63,106,.10),transparent 38%),
    #050612;
}
.official-tactic-shell::after {
  content:"";
  position:absolute;
  inset:12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.035);
  pointer-events:none;
}
.official-tactic-canvas {
  width:auto;
  max-width:min(100%,560px);
  max-height:760px;
  object-fit:contain;
  border-radius:20px;
  box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 46px rgba(157,72,255,.13);
}
.team-tab.active {
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 8px 28px rgba(70,111,255,.10);
}
.card-stage.tactic-view .team-tab.active { box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 8px 28px rgba(179,61,255,.12); }

.card-stage:fullscreen,
body.cards-mode .card-stage {
  background:
    radial-gradient(circle at 20% 15%,rgba(43,104,255,.18),transparent 30%),
    radial-gradient(circle at 78% 15%,rgba(119,54,255,.15),transparent 30%),
    radial-gradient(circle at 74% 84%,rgba(255,46,101,.13),transparent 34%),
    #02040b;
}
.card-stage.tactic-view:fullscreen,
body.cards-mode .card-stage.tactic-view {
  background:
    radial-gradient(circle at 18% 18%,rgba(142,74,255,.23),transparent 31%),
    radial-gradient(circle at 83% 79%,rgba(255,47,103,.18),transparent 35%),
    #03030d;
}
.card-stage:fullscreen .official-tactic-canvas {
  width:auto;
  height:auto;
  max-height:calc(100vh - 18px);
  max-width:calc(100vw - 116px);
  border-radius:14px;
}

@media (orientation:landscape) and (max-height:720px) {
  body.cards-mode .official-tactic-shell { padding:6px 56px; }
  body.cards-mode .official-tactic-canvas {
    width:auto;
    height:auto;
    max-height:calc(100vh - 12px);
    max-width:calc(100vw - 116px);
    border-radius:12px;
    box-shadow:0 20px 72px rgba(0,0,0,.60),0 0 42px rgba(151,73,255,.12);
  }
}

@media (max-width:700px) and (orientation:portrait) {
  .card-stage { padding:7px; border-radius:22px; }
  .official-tactic-shell { min-height:430px; }
  .official-tactic-canvas { max-width:100%; max-height:72vh; border-radius:14px; }
}

@media (prefers-reduced-motion:no-preference) {
  .character-card.official-card-active .official-card-image,
  .character-card.official-card-active .official-card-canvas { animation:card-arrive .22s ease-out; }
  @keyframes card-arrive { from { opacity:.2; transform:scale(.985); } to { opacity:1; transform:scale(1); } }
}

/* V8 — Infinity Gems */
.gem-panel{margin-top:14px;padding:15px;border-radius:18px;border:1px solid rgba(122,95,255,.18);background:linear-gradient(145deg,rgba(44,30,91,.30),rgba(10,16,39,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.gem-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.gem-panel-head h4{margin:3px 0 3px;font-size:16px}.gem-panel-head p{margin:0;color:#8f99b8;font-size:10px;line-height:1.45}.gem-cost-key{flex:none;padding:6px 8px;border-radius:999px;background:rgba(255,202,92,.09);border:1px solid rgba(255,202,92,.16);color:#ffd982;font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.gem-list{display:grid;gap:9px}.gem-bearer{padding:12px;border-radius:15px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03)}.gem-bearer-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.gem-bearer-name{font-size:12px;font-weight:900}.gem-bearer-meta{color:#7f8aa9;font-size:9px}.gem-chips{display:flex;flex-wrap:wrap;gap:6px}.gem-chip{min-height:35px;padding:0 10px;border-radius:11px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#aeb7d1;font-size:9px;font-weight:850;cursor:pointer}.gem-chip:hover{border-color:rgba(139,98,255,.35)}.gem-chip.selected{color:#fff;border-color:rgba(139,98,255,.62);background:linear-gradient(145deg,rgba(139,98,255,.30),rgba(255,63,104,.16));box-shadow:0 0 18px rgba(139,98,255,.12)}.gem-chip.bonded.selected{border-color:rgba(255,202,92,.55);background:linear-gradient(145deg,rgba(255,202,92,.22),rgba(255,92,122,.12));color:#ffe7a6}.gem-chip:disabled{opacity:.32;cursor:not-allowed}.gem-chip small{margin-left:4px;color:#ffda83}.member-gems{margin-top:3px;color:#b69cff;font-size:9px;font-weight:800}.threat-badge.gemmed{box-shadow:0 0 0 1px rgba(139,98,255,.25),0 0 18px rgba(139,98,255,.12)}
@media(max-width:540px){.gem-panel-head{display:block}.gem-cost-key{display:inline-block;margin-top:8px}.gem-chip{min-height:38px}}

/* V9 — Mode Partie, partage QR, roster adverse et vue rapide */
.party-tools{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 9px}.party-tool{min-height:64px;padding:11px 13px;border-radius:16px;border:1px solid rgba(112,139,255,.13);background:linear-gradient(145deg,rgba(18,29,67,.72),rgba(9,12,31,.88));color:#fff;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;text-align:left;column-gap:9px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}.party-tool>span{grid-row:1/3;align-self:center;font-size:21px;color:#ad9cff}.party-tool strong{font-size:10px;letter-spacing:.02em}.party-tool small{font-size:8px;color:#7f8aa9}.party-tool:active{transform:translateY(1px)}
.side-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);margin:7px 0 0}.side-btn{min-height:42px;border:0;border-radius:12px;background:transparent;color:#7883a3;font-size:9px;font-weight:950;letter-spacing:.08em;cursor:pointer}.side-btn.active{color:#fff;background:linear-gradient(145deg,rgba(62,117,255,.22),rgba(139,72,255,.20));box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 7px 24px rgba(66,102,255,.08)}.side-btn span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:5px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.08);font-size:8px;color:#b9c3df}
.opponent-info{margin:8px 0 0;padding:9px 11px;border-radius:13px;border:1px solid rgba(181,90,255,.14);background:rgba(107,47,179,.08);display:flex;justify-content:space-between;align-items:center;gap:10px}.opponent-info>div{display:grid;gap:2px}.opponent-info strong{font-size:10px;color:#e9e4ff}.opponent-info span{font-size:8px;color:#8f99b8}.opponent-info button{border:0;background:transparent;color:#ff7893;font-size:8px;font-weight:900;cursor:pointer}
.gallery-heading{display:flex;justify-content:space-between;align-items:end;gap:10px;margin:13px 1px 7px}.gallery-heading>div{display:grid;gap:2px}.gallery-heading span{font-size:8px;font-weight:950;letter-spacing:.12em;color:#9aa6c5}.gallery-heading small{font-size:8px;color:#626f91}.counter-toggle{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#aab4d0;border-radius:10px;min-height:31px;padding:0 9px;font-size:8px;font-weight:850;cursor:pointer}
.card-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-bottom:10px}.gallery-card{min-width:0;padding:0;overflow:hidden;border-radius:15px;border:1px solid rgba(255,255,255,.075);background:linear-gradient(180deg,rgba(20,28,61,.76),rgba(8,11,28,.94));color:#fff;text-align:left;cursor:pointer;position:relative;box-shadow:0 9px 28px rgba(0,0,0,.16)}.gallery-card.active{border-color:rgba(111,137,255,.48);box-shadow:0 0 0 1px rgba(90,111,255,.14),0 12px 34px rgba(37,62,174,.16)}.gallery-thumb{height:74px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 20%,rgba(116,89,255,.26),transparent 55%),#080d24;position:relative}.gallery-thumb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -24px 28px rgba(5,8,20,.48);pointer-events:none}.gallery-thumb>b{font-size:19px;color:#d9ddff;opacity:.72}.gallery-thumb img,.gallery-thumb canvas{width:100%;height:100%;display:block;object-fit:cover;object-position:18% 52%}.gallery-copy{display:grid;gap:2px;padding:8px 9px 9px;min-height:48px}.gallery-copy strong{font-size:9px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gallery-copy small{font-size:7px;color:#7683a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tactic-thumb{background:radial-gradient(circle at 45% 30%,rgba(202,65,255,.27),transparent 45%),radial-gradient(circle at 65% 80%,rgba(255,55,104,.18),transparent 45%),#100821}.tactic-thumb>b{font-size:26px;color:#ddbbff}.tactic-thumb img,.tactic-thumb canvas{object-fit:contain!important;object-position:center!important;background:#080611}.tactic-thumb-card.active{border-color:rgba(193,83,255,.45);box-shadow:0 0 0 1px rgba(190,82,255,.13),0 12px 34px rgba(127,42,176,.14)}
.counter-panel{margin:0 0 12px;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(145deg,rgba(12,18,43,.94),rgba(8,10,25,.96))}.counter-panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.counter-panel-head>div{display:grid;gap:1px}.counter-panel-head strong{font-size:10px}.counter-panel-head span{font-size:8px;color:#727e9e}.counter-panel-head button{border:0;background:transparent;color:#8fa0cf;font-size:8px;font-weight:850;cursor:pointer}.counter-list{display:grid;gap:6px}.counter-row{display:grid;grid-template-columns:minmax(90px,1fr) auto auto;gap:7px;align-items:center;padding:7px 8px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04)}.counter-name{font-size:9px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.counter-group{display:grid;grid-template-columns:auto 26px 28px 26px;align-items:center;gap:3px}.counter-group small{font-size:7px;color:#ff8aa0;font-weight:900}.counter-group.power small{color:#f7d572}.counter-group button{width:26px;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#d8def1;font-size:15px;line-height:1;cursor:pointer}.counter-group b{min-width:28px;text-align:center;font-size:11px}.counter-empty{color:#7f8aa9;font-size:9px;text-align:center;padding:10px}
.viewer-empty-party{min-height:330px;display:grid;place-items:center;align-content:center;text-align:center;gap:9px;padding:28px}.viewer-empty-party>span{font-size:35px;color:#9d83ff}.viewer-empty-party strong{font-size:15px}.viewer-empty-party p{max-width:320px;margin:0;color:#7f8aa9;font-size:9px;line-height:1.5}.viewer-empty-party button{margin-top:5px;min-height:38px;padding:0 16px;border:0;border-radius:12px;background:linear-gradient(145deg,#7256ef,#c04fff);color:#fff;font-size:9px;font-weight:900;cursor:pointer}

.share-dialog,.scan-dialog{width:min(92vw,440px);max-height:92vh;overflow:auto;border:1px solid rgba(130,111,255,.22);border-radius:24px;padding:21px;background:linear-gradient(160deg,#10162f,#080a18 72%);color:#fff;box-shadow:0 30px 100px rgba(0,0,0,.65)}.share-dialog::backdrop,.scan-dialog::backdrop{background:rgba(1,2,8,.78);backdrop-filter:blur(8px)}.share-dialog h3,.scan-dialog h3{margin:5px 0 4px;font-size:20px}.share-dialog .dialog-small,.scan-dialog .dialog-small{color:#8994b3;font-size:9px;line-height:1.5}.qr-code{width:280px;max-width:100%;min-height:280px;margin:16px auto 12px;padding:10px;display:grid;place-items:center;border-radius:20px;background:#fff;box-shadow:0 18px 55px rgba(0,0,0,.35)}.qr-code img,.qr-code canvas{display:block;max-width:100%;height:auto}.qr-loading,.qr-fallback{color:#3c4560;text-align:center;font-size:10px;line-height:1.5}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.share-status,.scan-status{min-height:18px;margin-top:7px;color:#9aa6c8;font-size:9px;text-align:center}
.scanner-frame{position:relative;width:100%;aspect-ratio:1.15;margin:15px 0 8px;overflow:hidden;border-radius:18px;background:#02040b;border:1px solid rgba(255,255,255,.08)}.scanner-frame video{width:100%;height:100%;object-fit:cover;background:#02040b}.scanner-target{position:absolute;width:62%;aspect-ratio:1;left:19%;top:50%;transform:translateY(-50%);border:2px solid rgba(171,139,255,.86);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.20),0 0 30px rgba(141,100,255,.20);pointer-events:none}.scanner-target::before,.scanner-target::after{content:"";position:absolute;width:28px;height:28px;border-color:#ff5f83}.scanner-target::before{left:-3px;top:-3px;border-left:4px solid #ff5f83;border-top:4px solid #ff5f83;border-radius:10px 0 0}.scanner-target::after{right:-3px;bottom:-3px;border-right:4px solid #ff5f83;border-bottom:4px solid #ff5f83;border-radius:0 0 10px}.scan-start{width:100%;margin-top:4px}.paste-import{margin-top:15px;padding-top:13px;border-top:1px solid rgba(255,255,255,.06)}.paste-import>span{display:block;margin-bottom:6px;color:#717e9f;font-size:8px;text-align:center}.paste-row{display:grid;grid-template-columns:1fr auto;gap:6px}.paste-row input{min-width:0;height:40px;padding:0 10px;border-radius:11px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#eaf0ff;font-size:9px;outline:none}.paste-row button{border:0;border-radius:11px;padding:0 12px;background:#6f58dc;color:#fff;font-size:8px;font-weight:900;cursor:pointer}

/* Portrait : la carte tactique doit rester visible sans un énorme scroll. */
@media(max-width:700px) and (orientation:portrait){.official-tactic-shell{min-height:0;padding:7px}.official-tactic-canvas{max-height:64vh;width:auto;max-width:100%}.card-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-thumb{height:66px}.gallery-copy{padding:7px;min-height:44px}.gallery-copy strong{font-size:8px}.party-tools{gap:7px}.party-tool{padding:9px;min-height:58px}.counter-row{grid-template-columns:1fr auto;grid-template-areas:"name name" "hp power"}.counter-name{grid-area:name}.counter-group:first-of-type{grid-area:hp}.counter-group.power{grid-area:power}}

/* En paysage, le viewer redevient une vraie table lumineuse : uniquement la carte et les contrôles. */
@media(orientation:landscape) and (max-height:720px){body.cards-mode #cardsStep>.party-tools,body.cards-mode #cardsStep>.side-switch,body.cards-mode #cardsStep>.opponent-info,body.cards-mode #cardsStep>.gallery-heading,body.cards-mode #cardsStep>.card-gallery,body.cards-mode #cardsStep>.counter-panel{display:none!important}}

/* === V1.0 — public hardening / recap / update UX === */
html { scroll-padding-bottom: 38vh; }
.update-banner {
  position: sticky; top: 8px; z-index: 120; margin: 0 0 12px; padding: 10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid rgba(115,157,255,.24); border-radius:15px;
  background:linear-gradient(135deg,rgba(24,39,88,.97),rgba(55,24,87,.97));
  box-shadow:0 16px 48px rgba(0,0,0,.34); backdrop-filter:blur(16px);
}
.update-banner > div { display:grid; gap:2px; min-width:0; }
.update-banner strong { font-size:10px; }
.update-banner span { color:#9ca8c9; font-size:8px; line-height:1.35; }
.update-banner button { flex:none; min-height:36px; padding:0 13px; border:0; border-radius:11px; color:#fff; background:linear-gradient(135deg,#ff4e72,#8f42e8); font-size:9px; font-weight:900; cursor:pointer; }
.update-banner button:disabled { opacity:.55; cursor:wait; }

.hero-actions { position:relative; z-index:4; display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.hero-actions button { min-height:38px; padding:0 12px; border-radius:11px; border:1px solid rgba(255,255,255,.09); color:#fff; background:linear-gradient(135deg,#ff4d71,#b62679); font-size:8px; font-weight:900; cursor:pointer; }
.hero-actions button.secondary { background:rgba(255,255,255,.055); color:#d5dcf0; }
.hero-actions button:disabled { opacity:.36; cursor:not-allowed; }

.battle-recap { margin:13px 0 10px; padding:13px; border-radius:18px; border:1px solid rgba(111,151,255,.15); background:linear-gradient(150deg,rgba(18,29,67,.76),rgba(10,12,30,.94)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.recap-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.recap-head h4 { margin:3px 0 3px; font-size:16px; }
.recap-head p { margin:0; color:#7f8cab; font-size:8px; }
.recap-status { max-width:48%; padding:6px 8px; border-radius:10px; font-size:8px; font-weight:850; line-height:1.35; text-align:right; }
.recap-status.ok { color:#9ee6c4; background:rgba(42,190,132,.08); border:1px solid rgba(42,190,132,.14); }
.recap-status.bad { color:#ff9aae; background:rgba(255,70,104,.08); border:1px solid rgba(255,70,104,.14); }
.recap-characters { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.recap-characters > span { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.045); color:#dbe2f4; font-size:8px; }
.recap-characters b { color:#fff; }
.recap-characters small { color:#b49cff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recap-tactics { display:grid; gap:4px; margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,.055); }
.recap-tactics strong { color:#94a2c6; font-size:7px; text-transform:uppercase; letter-spacing:.1em; }
.recap-tactics span { color:#7985a4; font-size:8px; line-height:1.45; }
.recap-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:10px; }
.recap-actions button { min-height:34px; padding:0 10px; border-radius:10px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.035); color:#cfd6e9; font-size:8px; font-weight:850; cursor:pointer; }
.recap-actions button:last-child { color:#fff; background:linear-gradient(135deg,rgba(111,83,239,.68),rgba(190,66,212,.55)); }
.recap-empty { color:#7d89a8; font-size:9px; text-align:center; padding:8px; }

.version-badge { display:inline-block; margin-left:5px; padding:2px 6px; border-radius:999px; border:1px solid rgba(255,255,255,.07); color:#74809e; white-space:nowrap; }
.app-version { margin-top:16px !important; color:#7f8baa !important; font-size:9px; }
.app-version strong { color:#cdd5eb; }

.app-toast { position:fixed; z-index:999; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(92vw,520px); padding:11px 14px; border-radius:13px; border:1px solid rgba(128,155,255,.18); background:rgba(9,13,31,.95); color:#eaf0ff; font-size:9px; line-height:1.4; text-align:center; box-shadow:0 18px 60px rgba(0,0,0,.45); backdrop-filter:blur(15px); }
.app-toast[data-kind="error"] { border-color:rgba(255,80,112,.25); color:#ffb4c2; }

/* Card viewer hardening: safe-area aware and stable in fullscreen. */
.card-stage:fullscreen { padding-top:env(safe-area-inset-top); padding-right:env(safe-area-inset-right); padding-bottom:env(safe-area-inset-bottom); padding-left:env(safe-area-inset-left); }
.card-stage:fullscreen .official-card-shell { height:100dvh; }
.card-stage:fullscreen .character-card { overscroll-behavior:contain; }
.card-hud { padding-top:env(safe-area-inset-top); padding-right:env(safe-area-inset-right); }
.character-card, .official-card-shell { overscroll-behavior:contain; }

@media (max-width:700px) {
  .hero-panel > div:first-child { max-width:100%; }
  .hero-actions { padding-right:0; }
  .hero-actions button { flex:1 1 30%; min-width:96px; }
  .recap-head { display:grid; }
  .recap-status { max-width:none; text-align:left; }
  .recap-actions { display:grid; grid-template-columns:1fr 1fr; }
  .update-banner { top:4px; }
}
@media (max-width:390px) {
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; }
  .hero-actions button:first-child { grid-column:1/-1; }
  .share-actions { grid-template-columns:1fr; }
  .paste-row { grid-template-columns:1fr; }
  .paste-row button { min-height:38px; }
}
@media (orientation:landscape) and (max-height:720px) {
  body.cards-mode #updateBanner,
  body.cards-mode #cardsStep > .battle-recap { display:none !important; }
  body.cards-mode .card-stage { height:100dvh; }
  body.cards-mode .official-card-shell { height:100dvh; }
  body.cards-mode .official-card-image,
  body.cards-mode .official-card-canvas { max-height:calc(100dvh - 12px); }
  body.cards-mode .card-actions { bottom:max(8px,env(safe-area-inset-bottom)); }
}

/* Fallback fullscreen for browsers that do not expose the Fullscreen API on an element. */
.card-stage.manual-fullscreen { position:fixed !important; inset:0 !important; z-index:1000 !important; width:100vw !important; height:100dvh !important; margin:0 !important; padding:0 !important; border-radius:0 !important; background:#040611; display:grid; place-items:center; }
.card-stage.manual-fullscreen .character-card { width:100%; height:100%; max-width:none; border:0; border-radius:0; margin:0; overflow:auto; }
.card-stage.manual-fullscreen .official-card-shell { width:100vw; height:100dvh; min-height:0; padding:8px 56px; border-radius:0; }
.card-stage.manual-fullscreen .official-card-image,
.card-stage.manual-fullscreen .official-card-canvas { width:auto; height:auto; max-width:calc(100vw - 112px); max-height:calc(100dvh - 16px); border-radius:12px; }
.card-stage.manual-fullscreen .card-hud { display:flex; position:fixed; }
.card-stage.manual-fullscreen .card-nav { position:fixed; }
@media (max-width:700px) and (orientation:portrait) {
  .card-stage.manual-fullscreen .official-card-shell { padding:6px; }
  .card-stage.manual-fullscreen .official-card-image,
  .card-stage.manual-fullscreen .official-card-canvas { max-width:calc(100vw - 12px); max-height:calc(100dvh - 12px); }
}

/* V1.0.3 — tactic visuals + fullscreen fit */
.character-card.official-tactic-active .official-card-image,.character-card.official-tactic-active .official-tactic-canvas{width:auto;max-width:100%;max-height:72vh;object-fit:contain}
.card-stage:fullscreen .character-card.official-tactic-active .official-card-image,.card-stage:fullscreen .character-card.official-tactic-active .official-tactic-canvas,.card-stage.manual-fullscreen .character-card.official-tactic-active .official-card-image,.card-stage.manual-fullscreen .character-card.official-tactic-active .official-tactic-canvas{width:auto;height:auto;max-width:calc(100vw - 112px);max-height:calc(100dvh - 16px);object-fit:contain}
@media(max-width:700px) and (orientation:portrait){.tactic-row{grid-template-columns:48px minmax(0,1fr) auto;gap:9px}.tactic-list-thumb{width:48px;height:66px}.card-stage:fullscreen .character-card.official-tactic-active .official-card-image,.card-stage:fullscreen .character-card.official-tactic-active .official-tactic-canvas,.card-stage.manual-fullscreen .character-card.official-tactic-active .official-card-image,.card-stage.manual-fullscreen .character-card.official-tactic-active .official-tactic-canvas{max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}}

.tactic-mini-card{width:100%;height:100%;padding:6px 4px;display:grid;grid-template-rows:auto 1fr auto;align-items:center;text-align:center;background:linear-gradient(160deg,rgba(117,65,199,.68),rgba(18,13,40,.96) 55%,rgba(156,39,91,.45));color:#fff}.tactic-mini-card small{font-size:4.5px;line-height:1;letter-spacing:.06em;color:#d8c7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tactic-mini-card b{font-size:6px;line-height:1.15;align-self:center;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-transform:uppercase}.tactic-mini-card i{font-style:normal;font-size:10px;color:#efbdff;opacity:.8}
.gallery-thumb .tactic-mini-card{padding:5px 7px}.gallery-thumb .tactic-mini-card b{font-size:7px;-webkit-line-clamp:3}.gallery-thumb .tactic-mini-card small{font-size:5px}
\n\n/* V1.0.7 — mobile fullscreen hardening for official character cards */
.fullscreen-asset-refresh{transform:translateZ(0) scale(1.0001);backface-visibility:hidden}
@media (max-width:900px), (pointer:coarse){
  .card-stage.manual-fullscreen,
  .card-stage:fullscreen{display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;background:#02040b!important}
  .card-stage.manual-fullscreen .character-card.official-card-active,
  .card-stage:fullscreen .character-card.official-card-active{display:flex!important;align-items:center!important;justify-content:center!important;width:100vw!important;height:100svh!important;min-height:0!important;overflow:hidden!important;background:#02040b!important}
  .card-stage.manual-fullscreen .character-card.official-card-active .official-card-shell,
  .card-stage:fullscreen .character-card.official-card-active .official-card-shell{display:flex!important;align-items:center!important;justify-content:center!important;width:100vw!important;height:100svh!important;min-height:0!important;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;overflow:hidden!important}
  .card-stage.manual-fullscreen .character-card.official-card-active .official-card-image,
  .card-stage.manual-fullscreen .character-card.official-card-active .official-card-canvas,
  .card-stage:fullscreen .character-card.official-card-active .official-card-image,
  .card-stage:fullscreen .character-card.official-card-active .official-card-canvas{display:block!important;visibility:visible!important;opacity:1!important;width:min(96vw,calc(94svh * 1.43))!important;height:auto!important;max-width:none!important;max-height:94svh!important;object-fit:contain!important;flex:none!important;transform:translateZ(0);}
  .card-stage.manual-fullscreen .character-card.official-card-active .official-card-source,
  .card-stage:fullscreen .character-card.official-card-active .official-card-source{right:max(12px,env(safe-area-inset-right))!important;bottom:max(10px,env(safe-area-inset-bottom))!important}
}


/* Saved roster library / quick squad */
.hero-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
.roster-library-dialog,.roster-editor-dialog,.quick-squad-dialog{width:min(760px,calc(100vw - 24px));max-height:min(88vh,900px);overflow:auto}.roster-library-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.saved-roster-list{display:grid;gap:10px;margin-top:12px}.saved-roster-card{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(255,255,255,.035)}.saved-roster-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.saved-roster-card h4{margin:0 0 4px;font-size:15px}.saved-roster-card p{margin:0;color:#8792b1;font-size:10px}.saved-roster-card-actions{display:grid;grid-template-columns:1fr auto auto;gap:7px;margin-top:11px}.saved-roster-card-actions button{min-height:38px}.roster-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.roster-editor-grid label,.quick-squad-top label{display:grid;gap:6px;color:#9ea8c7;font-size:10px;font-weight:800}.roster-editor-grid input,.roster-editor-grid select,.roster-search,.quick-squad-top select{width:100%;min-height:42px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:#11152b;color:#fff;padding:0 12px}.roster-editor-section{margin:15px 0}.roster-editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.roster-editor-head span{color:#9ea8c7;font-size:10px}.pool-selected{display:flex;gap:6px;overflow-x:auto;padding:8px 0}.pool-chip{flex:none;border:1px solid rgba(255,63,104,.22);background:rgba(255,63,104,.08);color:#f7eaf0;border-radius:999px;padding:7px 9px;font-size:9px;cursor:pointer}.pool-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:240px;overflow:auto}.pool-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.03);color:#dce2f5;font-size:10px;text-align:left}.pool-row small{display:block;color:#7782a3;margin-top:2px}.pool-row button{width:30px;height:30px;border:0;border-radius:9px;background:rgba(139,98,255,.15);color:#d8ceff;font-size:17px}.quick-squad-top{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;margin:12px 0}.quick-threat{min-width:96px;padding:12px;border-radius:13px;background:rgba(255,63,104,.09);border:1px solid rgba(255,63,104,.18);font-weight:900;text-align:center}.quick-pool{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.quick-choice{padding:10px 11px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#cbd3e8;text-align:left;font-size:10px}.quick-choice.selected{border-color:rgba(63,224,160,.38);background:rgba(63,224,160,.10);color:#effff8}.quick-choice strong{display:block;font-size:11px}.quick-choice small{display:block;margin-top:3px;color:#7e89a8}.quick-choice.selected small{color:#9feacb}.empty-roster-library{padding:24px 12px;text-align:center;color:#7f8aa8;font-size:11px;border:1px dashed rgba(255,255,255,.09);border-radius:15px}
@media(max-width:560px){.roster-library-actions,.roster-editor-grid,.pool-list,.quick-pool{grid-template-columns:1fr}.saved-roster-card-actions{grid-template-columns:1fr 1fr}.saved-roster-card-actions .use-roster{grid-column:1/-1}.hero-actions{grid-template-columns:1fr 1fr}.roster-editor-dialog,.quick-squad-dialog{max-height:92dvh}}

/* V1.0.10 — contact + legal footer */
.legal-note p{margin:10px auto 8px;max-width:760px}
.footer-actions{display:flex;justify-content:center;margin-bottom:8px}
.contact-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);color:#d7ddf2;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.01em}
.contact-button:hover,.contact-button:focus-visible{background:rgba(139,98,255,.14);border-color:rgba(139,98,255,.32);outline:none}


/* Contact développeur */
.contact-panel{
  display:flex;
  justify-content:center;
  margin:24px 0 14px;
}
.contact-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.01em;
  color:#fff;
  background:rgba(80,105,255,.22);
  border:1px solid rgba(147,166,255,.45);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.contact-button:active{
  transform:translateY(1px);
}
@media (max-width:640px){
  .contact-button{
    width:100%;
  }
}

/* V1.0.12 — TABLE DE JEU : interface dédiée à la partie, tactile et responsive. */
.table-home-btn,.table-launch-btn{border:1px solid rgba(255,171,87,.58)!important;background:linear-gradient(125deg,rgba(242,89,104,.25),rgba(128,72,248,.3))!important;color:#fff!important;box-shadow:0 7px 22px rgba(179,67,105,.15);font-weight:950!important}
.cards-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.table-launch-btn{min-height:40px;border-radius:12px;padding:0 15px;font-size:10px;letter-spacing:.08em;cursor:pointer}
body.table-mode{overflow:hidden!important;overscroll-behavior:none}
body.table-mode #cardsStep{display:flex!important;position:fixed!important;inset:0!important;z-index:850!important;flex-direction:column!important;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#030610!important}
body.table-mode #cardsStep>:not(#tableMode):not(#cardStage){display:none!important}
body.table-mode .table-mode-panel{display:flex!important;flex:none;flex-direction:column;gap:0;z-index:3;min-width:0;width:100%;background:linear-gradient(160deg,#0f1633,#090d21 58%,#0c0921);border-bottom:1px solid rgba(156,164,255,.19);box-shadow:0 8px 25px rgba(0,0,0,.35)}
.table-mode-panel.hidden{display:none}
.table-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(9px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 7px max(12px,env(safe-area-inset-left))}
.table-brand{display:flex;align-items:center;gap:10px;min-width:0}.table-emblem{width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:12px;background:linear-gradient(140deg,#fc486e,#7e5cff);color:#fff;font-size:24px;box-shadow:0 4px 16px rgba(252,72,110,.26)}
.table-brand strong{display:block;color:#fff;font-size:12px;font-weight:950;letter-spacing:.11em;white-space:nowrap}.table-brand small{display:block;margin-top:2px;font-size:10px;color:#adb9dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50vw}
.table-exit{display:flex;align-items:center;justify-content:center;gap:6px;min-height:37px;padding:0 12px;border:1px solid rgba(200,211,255,.2);border-radius:11px;background:rgba(255,255,255,.07);color:#fff;font-size:12px;font-weight:850;cursor:pointer}
.table-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 12px 9px}.table-segment{display:flex;min-width:0;padding:3px;gap:2px;border:1px solid rgba(154,171,255,.12);border-radius:12px;background:rgba(0,0,0,.28)}.table-segment button{flex:1;min-width:0;min-height:32px;padding:4px 5px;border:0;border-radius:9px;background:transparent;color:#8997bf;font-size:9px;font-weight:900;cursor:pointer;letter-spacing:.025em}.table-segment button.active{background:linear-gradient(115deg,#3b4c9c,#553787);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.table-portraits{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#39416a transparent;padding:3px 12px 8px;scroll-snap-type:x proximity;min-height:78px}.table-portrait{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 66px;width:66px;min-width:0;padding:5px 4px 4px;border:1px solid rgba(144,158,245,.17);border-radius:12px;background:rgba(255,255,255,.04);color:#d7dff8;cursor:pointer;scroll-snap-align:center}.table-portrait.active{background:linear-gradient(155deg,rgba(255,81,112,.29),rgba(104,70,244,.27));border-color:rgba(255,111,142,.74);box-shadow:0 0 0 1px rgba(245,71,126,.12),0 3px 12px rgba(238,68,127,.16)}.table-portrait-art{display:grid;place-items:center;width:49px;height:42px;border-radius:8px;overflow:hidden;background:linear-gradient(145deg,#353668,#141d3b)}.table-portrait-art img,.table-portrait-art canvas{width:100%;height:100%;object-fit:cover;object-position:20% 50%}.table-portrait-art b{font-size:17px;letter-spacing:-.04em}.table-portrait-name{width:100%;font-size:8px;font-weight:800;line-height:1.12;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-no-items{padding:19px 10px;color:#bac6e3;font-size:11px}
.table-quickbar{display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 12px 6px;color:#d1dcf3}.table-position{font-size:10px;font-weight:900;white-space:nowrap;color:#a7b5db}.table-memo-preview{flex:1;min-width:0;padding-left:8px;color:#f2c9ff;font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-quick-actions{display:flex;gap:6px;margin-left:auto}.table-quick-actions button{min-height:30px;white-space:nowrap;padding:4px 10px;border:1px solid rgba(144,171,255,.24);border-radius:9px;background:#151e41;color:#e4eaff;font-size:10px;font-weight:850;cursor:pointer}.table-quick-actions button.has-note{border-color:rgba(210,146,255,.5);color:#f2ccff}.table-quick-actions .hidden{display:none!important}
body.table-mode #cardStage{position:relative!important;display:flex!important;flex:1 1 auto!important;min-height:0!important;width:100%!important;height:auto!important;margin:0!important;padding:5px 36px 7px!important;border:0!important;border-radius:0!important;overflow:hidden!important;align-items:center!important;justify-content:center!important}
body.table-mode #characterCard{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:auto!important;background:transparent!important}
body.table-mode #characterCard.official-card-active{overflow:hidden!important}
body.table-mode #characterCard .official-card-shell{display:flex!important;position:relative!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;min-height:0!important;padding:3px!important;margin:0!important;overflow:hidden!important;border-radius:0!important}
body.table-mode #characterCard .official-card-image,body.table-mode #characterCard .official-card-canvas{display:block!important;flex:none!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;margin:auto!important;border-radius:9px!important}
body.table-mode #cardStage .card-nav{top:50%!important;position:absolute!important;transform:translateY(-50%);width:32px;height:52px;background:rgba(6,12,31,.88);border-radius:11px}.table-mode #cardStage .card-nav-prev{left:2px!important}.table-mode #cardStage .card-nav-next{right:2px!important}
body.table-mode #cardStage .card-hud{display:none!important}
body.table-mode #characterCard .official-card-source{bottom:8px;right:8px;opacity:.48;pointer-events:none}
body.table-mode #characterCard .official-card-loading{min-height:0!important}
.table-memo-dialog{width:min(94vw,520px)}.table-memo-label{display:block;margin:13px 0 7px;font-size:11px;font-weight:900;color:#b9c3e5}.table-memo-dialog textarea{display:block;width:100%;min-height:110px;padding:12px;border-radius:13px;border:1px solid rgba(153,166,250,.25);background:#0d1530;color:#fff;font:inherit;font-size:14px;line-height:1.5;resize:vertical}
@media(max-width:530px){.table-brand strong{font-size:11px}.table-topbar{padding-bottom:6px}.table-controls{gap:6px;padding:3px 8px 6px}.table-segment button{font-size:8px;padding:4px 2px}.table-portraits{padding:2px 8px 5px;gap:5px;min-height:73px}.table-portrait{flex-basis:58px;width:58px;padding:4px 3px}.table-portrait-art{width:44px;height:38px}.table-quickbar{padding:3px 9px 4px}.table-quick-actions button{padding:4px 8px}}
@media(orientation:landscape) and (max-height:720px){body.table-mode #cardsStep{display:flex!important}body.table-mode #cardStage{height:auto!important;width:100%!important;padding:2px 40px!important}body.table-mode #characterCard .official-card-shell{width:100%!important;height:100%!important;padding:2px!important}body.table-mode #characterCard .official-card-image,body.table-mode #characterCard .official-card-canvas{max-width:100%!important;max-height:100%!important;height:auto!important;width:auto!important}body.table-mode .table-portrait{flex-direction:row;flex-basis:115px;width:115px;gap:5px}body.table-mode .table-portrait-art{width:34px;height:32px;flex:none}body.table-mode .table-portrait-name{flex:1}body.table-mode .table-portraits{min-height:47px;padding-bottom:4px}body.table-mode .table-brand .table-emblem{width:30px;height:30px;font-size:18px}body.table-mode .table-topbar{padding-top:max(4px,env(safe-area-inset-top));padding-bottom:3px}body.table-mode .table-controls{padding-bottom:4px}body.table-mode .table-segment button{min-height:27px}body.table-mode .table-quickbar{min-height:30px;padding-top:1px;padding-bottom:2px}}

/* Affichage immédiat en attendant les fichiers officiels. */
body.table-mode .table-loading-fallback{width:100%;height:100%;min-height:0;overflow:auto;border-radius:12px;background:#080b1c;overscroll-behavior:contain}
body.table-mode .table-loading-fallback .mcp-digital-card{min-height:100%;border-radius:12px}
body.table-mode .table-loading-indicator{position:absolute;z-index:8;left:50%;bottom:10px;transform:translateX(-50%);width:max-content;max-width:90%;padding:7px 12px;border:1px solid rgba(135,157,255,.25);border-radius:999px;background:rgba(6,10,25,.93);color:#cbd5f7;font-size:10px;font-weight:800;box-shadow:0 5px 20px rgba(0,0,0,.4);pointer-events:none}
@media(orientation:landscape) and (max-height:720px){body.table-mode .table-loading-fallback .card-hero{min-height:0;padding:9px 14px}body.table-mode .table-loading-fallback .card-rules-columns{padding-bottom:28px}body.table-mode .table-loading-indicator{bottom:2px;font-size:8px;padding:4px 9px}}