@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@500;600;700&display=swap');

:root {
  --ink: #0d0c13;
  --panel: #15131e;
  --panel-2: #1d1a29;
  --line: rgba(255,255,255,.12);
  --white: #f7f5ef;
  --muted: #9f9bab;
  --pink: #ff315e;
  --cyan: #12d9f4;
  --acid: #b7f20c;
  --yellow: #ffd31a;
  --purple: #8a4cff;
  --orange: #ff7144;
  --display: "Barlow Condensed", Impact, sans-serif;
  --body: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 1180px;
  min-height: 100vh;
  color: var(--white);
  background:
    radial-gradient(circle at 18% 78%, rgba(18,217,244,.11), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(255,49,94,.12), transparent 26%),
    #09080e;
  font-family: var(--body);
  overflow-x: auto;
}

button { font: inherit; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  flex: 0 0 78px;
  height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 28px;
  background: rgba(13,12,19,.94);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 36%;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow), var(--pink), transparent);
}

.brand-block { display: flex; align-items: baseline; gap: 14px; }
.brand-block h1 { margin: 0; font: 900 34px/1 var(--display); letter-spacing: .06em; transform: skew(-5deg); }
.brand-kicker, .eyebrow { font: 800 11px/1 var(--display); letter-spacing: .16em; color: var(--muted); }
.round-block { display: flex; align-items: center; gap: 12px; font-family: var(--display); }
.round-block span { color: var(--acid); font-weight: 800; letter-spacing: .12em; }
.round-block strong { font-size: 22px; }
.top-actions { justify-self: end; display: flex; gap: 8px; }

.button {
  border: 0;
  color: var(--white);
  font: 800 14px var(--display);
  letter-spacing: .08em;
  cursor: pointer;
  padding: 11px 18px;
  clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition: transform .15s ease, filter .15s ease;
}
.button:hover { transform: translateY(-2px); filter: brightness(1.1); }
.button.ghost { background: #24202f; border: 1px solid var(--line); }
.button.deck-button { color:#0b0a0e; background:linear-gradient(105deg,var(--acid),var(--yellow)); }
.button.profile-button { color:var(--cyan); background:rgba(18,217,244,.09); border:1px solid rgba(18,217,244,.32); }
.button.primary { background: linear-gradient(105deg, var(--pink), #ff4c39); min-width: 200px; box-shadow: 0 8px 30px rgba(255,49,94,.25); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.game-layout {
  flex: 0 0 calc(100vh - 258px);
  display: grid;
  grid-template-columns: 210px minmax(650px, 1fr) 250px;
  grid-template-rows: 76px minmax(340px, 1fr) 76px;
  gap: 8px 12px;
  padding: 10px 22px 6px;
  height: calc(100vh - 258px);
  min-height: 500px;
}

.pilot-panel {
  background: linear-gradient(135deg, rgba(29,26,41,.96), rgba(18,16,25,.96));
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 66px 1fr 62px;
  align-items: center;
  gap: 12px;
  padding: 9px;
  position: relative;
  overflow: hidden;
}
.pilot-panel::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--purple); }
.enemy-panel { grid-column: 1 / 3; grid-row: 1; }
.player-panel { grid-column: 1 / 3; grid-row: 3; }
.player-panel::before { background: var(--acid); }
.pilot-art { width: 48px; height: 58px; background-size: 210%; background-position: 50% 31%; border: 1px solid rgba(255,255,255,.22); clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }
.pilot-nyx { background-image: url("assets/nyx-07.png"); }
.pilot-mara { background-image: url("assets/mara-k.png"); background-position: 50% 37%; }
.pilot-panel h2 { margin: 1px 0; font: 900 22px var(--display); letter-spacing: .04em; }
.pilot-panel p { margin: 0; font-size: 11px; color: var(--muted); }
.oracle-text { color: #c071ff; }
.rebel-text { color: var(--acid); }
.core-meter { text-align: center; border-left: 1px solid var(--line); }
.core-meter span { display:block; font: 800 9px var(--display); letter-spacing:.15em; color:var(--muted); }
.core-meter strong { font: 900 38px var(--display); color: var(--pink); }
.player-core strong { color: var(--acid); }
.resource-row { grid-column: 2 / 4; display:flex; gap:16px; align-items:center; font: 700 9px var(--display); letter-spacing:.08em; color:var(--muted); }
.resource-row b { color: var(--white); font-size: 13px; }
.power-button { margin-left:auto; border:1px solid rgba(183,242,12,.35); color:var(--acid); background:rgba(183,242,12,.08); padding:5px 9px; font:800 10px var(--display); cursor:pointer; }
.power-button:disabled { opacity:.35; cursor:not-allowed; }

.arena-wrap { grid-column: 2; grid-row: 2; min-width: 0; display:flex; flex-direction:column; }
.arena-header { height: 34px; display:flex; justify-content:space-between; align-items:center; padding:0 10px; font:800 11px var(--display); letter-spacing:.12em; color:var(--muted); }
.arena-header span:last-child { color:var(--cyan); }
.arena { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }

.sector {
  position: relative;
  min-width: 0;
  display:grid;
  grid-template-rows: 1fr 1.18fr 34px 1.18fr 1fr;
  gap:5px;
  padding: 10px 9px;
  background: linear-gradient(180deg, rgba(138,76,255,.13), rgba(10,9,14,.85) 45%, rgba(183,242,12,.08));
  border: 1px solid rgba(255,255,255,.13);
  overflow:hidden;
}
.sector:nth-child(2) { background:linear-gradient(180deg, rgba(18,217,244,.12),rgba(10,9,14,.85) 45%,rgba(255,49,94,.08)); }
.sector:nth-child(3) { background:linear-gradient(180deg, rgba(255,49,94,.11),rgba(10,9,14,.85) 45%,rgba(255,211,26,.08)); }
.sector::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg,transparent 0 28px,rgba(255,255,255,.018) 28px 29px); pointer-events:none; }
.sector-name { grid-row:3; display:flex; align-items:center; justify-content:center; z-index:1; font:900 12px var(--display); letter-spacing:.12em; color:#d3cfdb; border-block:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.36); }
.sector-name b { color:var(--yellow); margin-right:5px; }

.slot {
  min-height: 58px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px dashed rgba(255,255,255,.13);
  background:rgba(255,255,255,.025);
  cursor:pointer;
  z-index:2;
  transition:border-color .15s, background .15s, transform .15s;
}
.slot:hover { border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.05); }
.slot.valid { border-color:var(--acid); box-shadow:inset 0 0 18px rgba(183,242,12,.08); }
.slot-label { font:700 9px var(--display); letter-spacing:.14em; color:rgba(255,255,255,.23); }
.enemy-slot { border-color:rgba(138,76,255,.18); }
.planned-slot { border-style:solid; border-color:var(--yellow); }

.unit-token {
  position:absolute;
  inset:3px;
  padding:5px 7px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(125deg,#201c2d,#111017);
  border-left:3px solid var(--faction-color,var(--cyan));
  overflow:hidden;
}
.unit-token::after { content:""; position:absolute; width:60px; height:60px; right:-20px; top:-28px; border:1px solid var(--faction-color,var(--cyan)); transform:rotate(45deg); opacity:.22; }
.unit-name { font:800 12px var(--display); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:8px; }
.unit-stats { display:flex; gap:7px; font:900 16px var(--display); }
.unit-stats .atk { color:var(--cyan); }
.unit-stats .hp { color:var(--pink); }
.unit-state { font:800 8px var(--display); color:var(--yellow); letter-spacing:.1em; }
.unit-token.disabled { filter:grayscale(.7); opacity:.65; }
.plan-card { position:absolute; inset:3px; display:flex; align-items:center; justify-content:center; flex-direction:column; background:repeating-linear-gradient(135deg,#292432 0 8px,#1c1923 8px 16px); border:1px solid var(--yellow); color:var(--yellow); font:900 10px var(--display); letter-spacing:.1em; text-align:center; padding:4px; }

.turn-controls { height:54px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.instruction { font-size:11px; color:var(--muted); padding-left:10px; }

.side-console { grid-column:3; grid-row:1 / 4; min-height:0; display:grid; grid-template-rows:210px 1fr; gap:12px; }
.selection-panel, .log-panel { background:rgba(21,19,30,.92); border:1px solid var(--line); padding:14px; overflow:hidden; }
.selection-panel { position:relative; }
.selection-panel::after { content:""; position:absolute; right:-30px; top:-30px; width:100px; height:100px; border:16px solid rgba(255,49,94,.07); transform:rotate(45deg); }
.selection-panel h3 { margin:8px 0 4px; font:900 25px var(--display); position:relative; z-index:1; }
.selection-panel p { margin:0; font-size:11px; line-height:1.45; color:var(--muted); position:relative; z-index:1; }
.selection-stats { display:flex; gap:8px; margin-top:12px; }
.selection-stats span { padding:5px 8px; background:#252130; font:800 11px var(--display); }
.selection-type { display:inline-block; margin-top:9px; color:var(--acid); font:800 10px var(--display); letter-spacing:.1em; }
.log-panel { min-height:0; display:flex; flex-direction:column; }
.log-title { display:flex; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--line); }
.live-dot { font:800 9px var(--display); color:var(--pink); }
.live-dot::before { content:""; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--pink); box-shadow:0 0 8px var(--pink); }
.game-log { flex:1; overflow:auto; padding-top:8px; scrollbar-width:thin; }
.log-entry { font-size:10px; line-height:1.4; color:#bbb6c6; padding:7px 0 7px 13px; border-bottom:1px solid rgba(255,255,255,.055); position:relative; }
.log-entry::before { content:"//"; position:absolute; left:0; color:var(--purple); font:800 9px var(--display); }
.log-entry.hot { color:var(--white); }
.log-entry.hot::before { color:var(--pink); }

.hand-zone { flex:0 0 180px; height:180px; border-top:1px solid var(--line); background:rgba(10,9,14,.96); display:grid; grid-template-columns:110px 1fr; padding:10px 22px 12px; gap:12px; }
.hand-label { display:flex; flex-direction:column; justify-content:center; font:900 14px var(--display); letter-spacing:.1em; }
.hand-label span { color:var(--acid); }
.hand-label strong { color:var(--muted); font-size:10px; margin-top:5px; }
.hand { display:flex; gap:9px; align-items:stretch; overflow-x:auto; overflow-y:hidden; padding:2px 3px 5px; scrollbar-width:thin; }
.hand-card { flex:0 0 112px; position:relative; padding:8px; background:linear-gradient(145deg,#282332,#121017); border:1px solid rgba(255,255,255,.18); cursor:pointer; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); transition:transform .15s, border-color .15s; overflow:hidden; }
.hand-card:hover { transform:translateY(-5px); border-color:var(--card-color); }
.hand-card.selected { transform:translateY(-7px); border-color:var(--yellow); box-shadow:0 9px 22px rgba(0,0,0,.45); }
.hand-card.unaffordable { opacity:.42; }
.hand-card::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--card-color); }
.hand-cost { position:absolute; right:6px; top:7px; width:25px; height:25px; display:grid; place-items:center; background:var(--card-color); color:#0b0a0e; font:900 17px var(--display); clip-path:polygon(25% 0,100% 0,100% 75%,75% 100%,0 100%,0 25%); }
.hand-card h4 { margin:18px 27px 3px 0; font:900 14px/1 var(--display); letter-spacing:.03em; }
.hand-card .card-kind { color:var(--card-color); font:800 8px var(--display); letter-spacing:.11em; }
.hand-card p { font-size:8px; line-height:1.3; color:#aaa4b2; margin:8px 0 0; }
.hand-card .mini-stats { position:absolute; left:8px; bottom:7px; display:flex; gap:5px; font:900 13px var(--display); }
.mini-stats span:first-child { color:var(--cyan); }
.mini-stats span:last-child { color:var(--pink); }

dialog { color:var(--white); background:#15131e; border:1px solid rgba(255,255,255,.2); box-shadow:0 30px 100px #000; }
dialog::backdrop { background:rgba(5,4,8,.82); backdrop-filter:blur(4px); }
.rules-dialog { width:min(720px,80vw); padding:25px; }
.rules-head { display:flex; justify-content:space-between; align-items:flex-start; }
.rules-head h2, .end-dialog h2 { margin:5px 0 18px; font:900 38px var(--display); }
.close-button { color:var(--white); background:none; border:0; font-size:30px; cursor:pointer; }
.rules-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.rules-grid article { background:#201d2a; padding:15px; border-left:3px solid var(--pink); }
.rules-grid b { color:var(--yellow); font:900 22px var(--display); }
.rules-grid h3 { display:inline; margin-left:8px; font:900 20px var(--display); }
.rules-grid p, .rules-note { font-size:12px; line-height:1.55; color:var(--muted); }
.rules-note { margin:18px 0 0; }
.end-dialog { width:420px; text-align:center; padding:32px; }
.end-dialog h2 { color:var(--acid); font-size:56px; }
.end-reward { color:var(--yellow); font:900 18px var(--display); letter-spacing:.08em; }

.progress-dialog { width:min(900px,88vw); padding:0; overflow:hidden; }
.progress-head { min-height:105px; display:flex; align-items:flex-start; justify-content:space-between; padding:22px 26px; border-bottom:1px solid var(--line); background:linear-gradient(110deg,rgba(18,217,244,.12),transparent 48%,rgba(167,103,255,.12)); }
.progress-head h2 { margin:5px 0 0; font:900 38px/1 var(--display); letter-spacing:.06em; }
.progress-head p { margin:5px 0 0; color:var(--acid); font:800 10px var(--display); letter-spacing:.12em; }
.progress-body { display:grid; grid-template-columns:280px 1fr; min-height:475px; }
.profile-stats { padding:22px; display:flex; flex-direction:column; gap:12px; background:rgba(8,7,12,.55); border-right:1px solid var(--line); }
.level-hex { min-height:105px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(183,242,12,.17),rgba(18,217,244,.05)); border:1px solid rgba(183,242,12,.35); clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); }
.level-hex span,.currency-card span,.collection-stat span,.xp-block span { color:var(--muted); font:800 9px var(--display); letter-spacing:.14em; }
.level-hex strong { color:var(--acid); font:900 54px/1 var(--display); }
.xp-block { padding:12px; background:#201c2a; }
.xp-block > div:first-child { display:flex; justify-content:space-between; align-items:center; }
.xp-block b { font:800 10px var(--display); }
.xp-track { height:6px; margin-top:9px; background:#0c0b11; overflow:hidden; }
.xp-track i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--cyan),var(--acid)); transition:width .35s ease; }
.currency-card { display:flex; align-items:center; justify-content:space-between; padding:13px; border:1px solid rgba(255,211,26,.25); background:rgba(255,211,26,.06); }
.currency-card strong { color:var(--yellow); font:900 24px var(--display); }
.fragment-card { border-color:rgba(167,103,255,.3); background:rgba(167,103,255,.07); }
.fragment-card strong { color:#c886ff; }
.collection-stat { margin-top:auto; padding:13px; background:#191620; }
.collection-stat strong { display:block; margin:4px 0; color:var(--cyan); font:900 25px var(--display); }
.collection-stat small { color:var(--muted); font-size:8px; line-height:1.35; }
.booster-zone { padding:22px; display:flex; flex-direction:column; min-width:0; }
.booster-title { display:flex; justify-content:space-between; align-items:flex-end; }
.booster-title h3 { margin:4px 0 0; font:900 27px var(--display); }
.booster-title > small { color:var(--muted); font:800 9px var(--display); }
.booster-results { flex:1; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; gap:12px; padding:20px 0; }
.sealed-booster { grid-column:1 / 4; justify-self:center; width:220px; height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-3deg); background:linear-gradient(145deg,#322349,#12101a 62%,#18353b); border:1px solid var(--cyan); box-shadow:0 20px 45px rgba(0,0,0,.45),inset 0 0 35px rgba(18,217,244,.12); clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px); }
.sealed-booster::before { content:""; width:100px; height:100px; margin-bottom:18px; border:3px solid var(--acid); transform:rotate(45deg); box-shadow:0 0 25px rgba(183,242,12,.2); }
.sealed-booster b { font:900 29px var(--display); letter-spacing:.08em; }
.sealed-booster span { color:var(--pink); font:900 12px var(--display); letter-spacing:.14em; }
.sealed-booster small { margin-top:10px; color:var(--muted); font-size:9px; }
.booster-card { height:285px; position:relative; overflow:hidden; padding:185px 10px 10px; background:linear-gradient(145deg,#272132,#111017); border:1px solid var(--rarity); animation:card-arrival .42s ease both; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.booster-card:nth-child(2) { animation-delay:.1s; }
.booster-card:nth-child(3) { animation-delay:.2s; }
.booster-card > div { position:absolute; inset:0 0 auto; height:190px; background-repeat:no-repeat; }
.booster-card > div::after { content:""; position:absolute; inset:auto 0 0; height:60px; background:linear-gradient(transparent,#17131e); }
.booster-card span { color:var(--rarity); font:800 8px var(--display); letter-spacing:.12em; }
.booster-card strong { display:block; margin:4px 0; font:900 15px var(--display); }
.booster-card small { color:var(--acid); font:800 8px var(--display); }
.booster-button { align-self:center; min-width:250px; }
@keyframes card-arrival { from { opacity:0; transform:translateY(22px) rotate(3deg); } to { opacity:1; transform:none; } }

.deck-dialog { width:min(1120px,92vw); height:min(760px,90vh); padding:0; overflow:hidden; }
.deck-head { height:96px; display:flex; justify-content:space-between; align-items:flex-start; padding:20px 24px; border-bottom:1px solid var(--line); background:linear-gradient(110deg,rgba(183,242,12,.08),transparent 44%,rgba(255,49,94,.1)); }
.deck-head h2 { margin:4px 0 1px; font:900 32px/1 var(--display); letter-spacing:.04em; }
.deck-head p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.deck-builder { height:calc(100% - 96px); display:grid; grid-template-columns:1fr 330px; min-height:0; }
.collection-pane { padding:18px; min-width:0; overflow:hidden; display:flex; flex-direction:column; }
.deck-section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font:900 14px var(--display); letter-spacing:.12em; }
.deck-section-title small { color:var(--muted); font-size:9px; }
.collection-grid { overflow:auto; display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:10px; padding:2px 4px 12px 2px; }
.collection-card { min-height:190px; position:relative; overflow:hidden; padding:108px 9px 10px; text-align:left; color:var(--white); background:linear-gradient(145deg,#292432,#121017); border:1px solid var(--rarity); cursor:pointer; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }
.collection-card::after { content:""; position:absolute; inset:0; border-top:4px solid var(--card-color); pointer-events:none; }
.collection-card:hover { transform:translateY(-2px); filter:brightness(1.12); }
.collection-card:disabled { opacity:.46; cursor:not-allowed; transform:none; filter:none; }
.collection-art { position:absolute; inset:0 0 auto; height:110px; background-repeat:no-repeat; }
.collection-art::after { content:""; position:absolute; inset:auto 0 0; height:42px; background:linear-gradient(transparent,#17141e); }
.collection-cost { position:absolute; z-index:2; top:7px; left:7px; width:28px; height:28px; display:grid; place-items:center; color:#09080e; background:var(--card-color); font:900 18px var(--display); }
.collection-rarity { position:relative; display:block; color:var(--rarity); font:800 8px var(--display); letter-spacing:.12em; }
.collection-card strong { position:relative; display:block; margin:3px 0; font:900 15px var(--display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.collection-card small { position:relative; color:var(--muted); font:700 8px var(--display); letter-spacing:.08em; }
.collection-card i { position:absolute; right:8px; bottom:8px; color:var(--white); font:900 14px var(--display); font-style:normal; }
.deck-pane { min-height:0; display:flex; flex-direction:column; padding:18px; background:rgba(8,7,12,.65); border-left:1px solid var(--line); }
.deck-counter { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--line); font:900 13px var(--display); letter-spacing:.1em; }
.deck-counter strong { color:var(--pink); font-size:25px; }
.deck-counter strong.valid { color:var(--acid); }
.deck-list { flex:1; overflow:auto; padding:10px 2px; }
.deck-row { width:100%; display:grid; grid-template-columns:27px 1fr auto 30px 20px; gap:8px; align-items:center; margin-bottom:5px; padding:7px; color:var(--white); background:#201c2a; border:1px solid transparent; cursor:pointer; text-align:left; }
.deck-row:hover { border-color:var(--pink); }
.deck-row > span { width:24px; height:24px; display:grid; place-items:center; color:#09080e; background:var(--cyan); font:900 14px var(--display); }
.deck-row b { font:800 12px var(--display); }
.deck-row small { color:var(--muted); font:700 8px var(--display); }
.deck-row strong { color:var(--yellow); font:900 13px var(--display); }
.deck-row i { color:var(--pink); font:900 20px var(--display); font-style:normal; }
.deck-status { min-height:32px; margin:5px 0 10px; color:var(--muted); font-size:10px; line-height:1.4; }
.deck-actions { display:flex; justify-content:space-between; gap:8px; }
.deck-actions .button { flex:1; padding-inline:10px; }

@media (max-height: 820px) {
  .topbar { flex-basis:58px; height:58px; }
  .game-layout { flex-basis:calc(100vh - 222px); height:calc(100vh - 222px); min-height:486px; grid-template-rows:70px minmax(330px,1fr) 70px; padding-top:8px; }
  .hand-zone { flex-basis:164px; height:164px; }
  .pilot-panel { grid-template-columns:52px 1fr 56px; padding:6px 8px; }
  .core-meter strong { font-size:32px; }
  .side-console { grid-template-rows:190px 1fr; }
  .slot { min-height:38px; }
  .sector { padding:6px; gap:3px; }
  .sector-name { min-height:28px; }
  .turn-controls { height:48px; }
  .arena-header { height:28px; }
  .deck-dialog { height:92vh; }
  .collection-card { min-height:168px; padding-top:94px; }
  .collection-art { height:96px; }
}

/* v0.3 — three-location power board */
.sector {
  grid-template-rows: 1fr 74px 1fr;
  gap: 5px;
  padding: 7px;
}
.sector.player-leading { border-color:rgba(183,242,12,.48); }
.sector.enemy-leading { border-color:rgba(255,49,94,.42); }
.location-side { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; min-height:0; z-index:2; }
.card-slot { min-width:0; min-height:0; position:relative; border:1px dashed rgba(255,255,255,.13); background:rgba(255,255,255,.025); cursor:pointer; overflow:hidden; transition:.15s ease; }
.card-slot:hover { border-color:rgba(255,255,255,.36); }
.card-slot.valid { border-color:var(--acid); box-shadow:inset 0 0 18px rgba(183,242,12,.12); }
.enemy-location .card-slot { border-color:rgba(167,103,255,.22); }
.empty-mark { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.12); font:500 22px var(--display); }
.location-panel { position:relative; z-index:3; display:grid; grid-template-columns:46px 1fr 46px; align-items:center; width:100%; color:var(--white); border:1px solid rgba(255,255,255,.14); background:linear-gradient(100deg,#16121f,#242032,#16121f); cursor:pointer; padding:6px; font-family:var(--display); }
.location-panel.revealed { box-shadow:inset 0 0 24px rgba(18,217,244,.055); }
.location-panel.encrypted { background:repeating-linear-gradient(135deg,#17141d 0 10px,#211c29 10px 20px); }
.location-copy { display:flex; flex-direction:column; text-align:center; min-width:0; }
.location-copy b { font:900 14px var(--display); letter-spacing:.08em; color:var(--yellow); }
.location-copy small { font:600 8px/1.25 var(--body); color:var(--muted); margin-top:3px; }
.location-score { display:grid; place-items:center; width:36px; height:36px; font:900 24px var(--display); background:#0c0b10; transform:rotate(-3deg); }
.enemy-score { color:var(--pink); }
.player-score { color:var(--acid); justify-self:end; }
.board-card { position:absolute; inset:2px; background:#111017; border:1px solid rgba(255,255,255,.2); overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.4); }
.board-card::after { content:""; position:absolute; inset:0; border-top:3px solid var(--card-color); pointer-events:none; }
.board-card.disabled { filter:grayscale(1); opacity:.48; }
.board-art { position:absolute; inset:0 0 22px; background-repeat:no-repeat; }
.board-card-name { position:absolute; left:0; right:0; bottom:0; height:24px; display:flex; align-items:center; padding:0 4px; color:#fff; background:linear-gradient(90deg,#0c0b10 70%,transparent); font:800 8px/1 var(--display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board-cost,.board-power { position:absolute; z-index:3; display:grid; place-items:center; width:20px; height:20px; border-radius:2px; color:#0b0a0e; font:900 13px var(--display); }
.board-cost { left:3px; top:4px; background:var(--cyan); }
.board-power { right:3px; bottom:3px; background:var(--acid); }
.facedown-card { position:absolute; inset:2px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg,#2c233b 0 7px,#17131f 7px 14px); border:1px solid var(--yellow); color:var(--yellow); }
.facedown-card span { font:900 16px var(--display); }
.facedown-card i { font:800 7px var(--display); letter-spacing:.15em; }

.hand-card { flex-basis:122px; padding:0; }
.hand-art { position:absolute; inset:0 0 auto; height:72px; background-repeat:no-repeat; }
.hand-art::after { content:""; position:absolute; inset:auto 0 0; height:32px; background:linear-gradient(transparent,#15121c); }
.hand-info { position:absolute; inset:66px 0 0; padding:5px 7px; background:linear-gradient(transparent,#15121c 12px); }
.hand-cost { left:5px; right:auto; top:5px; z-index:2; }
.hand-power { position:absolute; z-index:2; right:5px; top:49px; min-width:25px; height:25px; display:grid; place-items:center; padding:0 4px; background:var(--acid); color:#0b0a0e; font:900 16px var(--display); }
.hand-card h4 { margin:0 0 2px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hand-card p { font-size:7px; line-height:1.25; margin:4px 0 0; }
.selection-art { height:70px; margin:-14px -14px 10px; background-repeat:no-repeat; border-bottom:3px solid var(--pink); }

@media (max-height: 820px) {
  .sector { padding:5px; gap:4px; grid-template-rows:1fr 68px 1fr; }
}

/* v0.7 — larger artwork-first cards and drag-and-drop board */
body { min-width:1280px; }
.game-layout {
  flex:0 0 auto;
  height:auto;
  min-height:790px;
  grid-template-columns:210px minmax(720px,1fr) 260px;
  grid-template-rows:86px 610px 86px;
}
.arena { min-height:522px; }
.sector { grid-template-rows:1fr 84px 1fr; padding:8px; gap:6px; overflow:visible; }
.location-side { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:6px; }
.card-slot { min-height:96px; overflow:visible; }
.board-card { inset:3px; transition:transform .16s ease,box-shadow .16s ease; transform-origin:center; }
.card-slot:hover { z-index:30; }
.board-card:hover { z-index:15; transform:scale(1.48); box-shadow:0 18px 42px rgba(0,0,0,.82); }
.board-art { inset:0 0 27px; }
.board-card-name { height:29px; padding:0 6px; font-size:10px; }
.board-cost,.board-power { width:24px; height:24px; font-size:15px; }
.facedown-card span { font-size:22px; }
.location-copy b { font-size:16px; }
.location-copy small { font-size:9px; }
.card-slot.drop-target,.location-panel.drop-target { border-color:var(--acid); background:rgba(183,242,12,.12); box-shadow:0 0 0 2px rgba(183,242,12,.25),inset 0 0 25px rgba(183,242,12,.12); }
.drag-active .card-slot.valid,.drag-active .location-panel { transition:transform .12s ease,box-shadow .12s ease; }
.drag-active .card-slot.valid:hover,.drag-active .location-panel:hover { transform:translateY(-2px); }

.hand-zone { flex:0 0 250px; height:250px; grid-template-columns:120px 1fr; padding-block:12px 15px; }
.hand { gap:13px; }
.hand-card { flex-basis:170px; min-height:220px; }
.hand-card.can-drag { cursor:grab; user-select:none; -webkit-user-drag:none; }
.hand-card.can-drag:active { cursor:grabbing; }
.hand-card.dragging { opacity:.28; transform:translateY(-3px) rotate(2deg); }
.drag-ghost { position:fixed!important; z-index:1000; width:170px!important; height:220px!important; margin:-110px 0 0 -85px; pointer-events:none; opacity:.9; transform:rotate(4deg) scale(.82)!important; box-shadow:0 24px 45px rgba(0,0,0,.75); }
.hand-art { height:124px; }
.hand-info { inset:112px 0 0; padding:9px 10px; }
.hand-cost { width:32px; height:32px; font-size:21px; top:7px; left:7px; }
.hand-power { min-width:32px; height:32px; top:94px; right:7px; font-size:20px; }
.hand-card h4 { margin-bottom:4px; font-size:17px; }
.hand-card .card-kind { font-size:9px; }
.hand-card p { margin-top:7px; font-size:9px; line-height:1.35; }
.selection-art { height:110px; }
.selection-panel h3 { font-size:28px; }

@media (min-width:1550px) {
  .game-layout { grid-template-columns:230px minmax(900px,1fr) 285px; }
  .hand-card { flex-basis:184px; }
}

/* v0.8 — cards are the primary visual language */
.topbar { height:64px; flex-basis:64px; }
.game-layout {
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:52px 590px 52px;
  gap:7px;
  height:auto;
  min-height:715px;
  padding:8px 22px 4px;
}
.enemy-panel,.player-panel { grid-column:1; position:relative; width:auto; height:auto; }
.enemy-panel { grid-row:1; }
.player-panel { grid-row:3; }
.pilot-panel {
  grid-template-columns:42px 170px 58px 1fr;
  grid-template-rows:1fr;
  gap:8px;
  padding:4px 9px;
}
.pilot-art { width:36px; height:42px; }
.pilot-panel h2 { font-size:18px; }
.pilot-panel p { display:none; }
.core-meter { grid-column:3; }
.core-meter strong { font-size:29px; }
.resource-row { grid-column:4; justify-self:end; font-size:9px; }
.side-console { display:none; }
.arena-wrap { grid-column:1; grid-row:2; height:590px; }
.arena-header { height:27px; }
.arena { min-height:514px; gap:12px; overflow:visible; }
.sector {
  grid-template-rows:212px 78px 212px;
  gap:6px;
  padding:6px 5px;
  overflow:visible;
  background-color:#0d0b12;
}
.location-side {
  display:flex;
  grid-template:unset;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:3px 0;
  overflow:visible;
}
.card-slot {
  flex:0 0 148px;
  width:148px;
  height:204px;
  min-height:204px;
  margin-left:-65px;
  overflow:visible;
  border-style:solid;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(0,0,0,.13));
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.card-slot:first-child { margin-left:0; }
.card-slot:nth-child(1) { transform:translateY(2px) rotate(-2.4deg); }
.card-slot:nth-child(2) { transform:translateY(-2px) rotate(-.8deg); }
.card-slot:nth-child(3) { transform:translateY(-2px) rotate(.8deg); }
.card-slot:nth-child(4) { transform:translateY(2px) rotate(2.4deg); }
.card-slot:hover { z-index:40; transform:translateY(-7px) rotate(0); }
.empty-mark { font-size:32px; }
.board-card { inset:0; border:2px solid rgba(255,255,255,.23); box-shadow:0 10px 25px rgba(0,0,0,.58); }
.board-card::after { border-top-width:5px; }
.board-card:hover { transform:scale(1.18); box-shadow:0 25px 55px rgba(0,0,0,.88),0 0 0 2px var(--card-color); }
.board-art { inset:0 0 43px; }
.board-card-name { height:44px; padding:0 9px; font-size:15px; letter-spacing:.03em; }
.board-cost,.board-power { width:34px; height:34px; font-size:21px; }
.board-cost { left:7px; top:8px; }
.board-power { right:7px; bottom:7px; }
.board-card-ability {
  position:absolute;
  z-index:4;
  left:7px;
  right:7px;
  bottom:44px;
  padding:8px;
  color:#f8f5ef;
  background:rgba(9,8,14,.94);
  border-left:3px solid var(--card-color);
  font:600 10px/1.35 var(--body);
  opacity:0;
  transform:translateY(7px);
  transition:.16s ease;
  pointer-events:none;
}
.board-card:hover .board-card-ability { opacity:1; transform:none; }
.facedown-card { inset:0; border:2px solid var(--yellow); }
.facedown-card span { font-size:34px; }
.facedown-card i { font-size:10px; }
.location-panel { min-height:78px; grid-template-columns:58px 1fr 58px; }
.location-score { width:46px; height:46px; font-size:31px; }
.location-copy b { font-size:18px; }
.location-copy small { max-width:230px; margin-inline:auto; font-size:10px; }
.turn-controls { height:49px; }

.hand-zone {
  position:sticky;
  bottom:0;
  z-index:45;
  flex:0 0 285px;
  height:285px;
  grid-template-columns:125px 1fr;
  padding:11px 22px 14px;
  border-top:2px solid rgba(183,242,12,.25);
  box-shadow:0 -18px 45px rgba(0,0,0,.68);
}
.hand { gap:15px; overflow-y:visible; }
.hand-card { flex:0 0 198px; min-height:258px; }
.hand-art { height:162px; }
.hand-info { inset:148px 0 0; padding:10px 12px; }
.hand-cost { width:38px; height:38px; font-size:25px; }
.hand-power { min-width:38px; height:38px; top:128px; font-size:24px; }
.hand-card h4 { font-size:19px; }
.hand-card .card-kind { font-size:10px; }
.hand-card p { font-size:10px; line-height:1.4; }
.hand-card:hover { transform:translateY(-12px) scale(1.035); z-index:8; }
.drag-ghost { width:198px!important; height:258px!important; margin:-129px 0 0 -99px; transform:rotate(4deg) scale(.88)!important; }

@media (min-width:1550px) {
  .card-slot { flex-basis:168px; width:168px; height:232px; min-height:232px; margin-left:-70px; }
  .sector { grid-template-rows:238px 78px 238px; }
  .arena-wrap { height:642px; }
  .arena { min-height:566px; }
  .game-layout { grid-template-columns:1fr; grid-template-rows:52px 642px 52px; min-height:767px; }
}

/* v0.9 — full collectible-card composition in hand */
.hand-zone {
  position:relative;
  bottom:auto;
  flex-basis:365px;
  height:365px;
  grid-template-columns:130px 1fr;
  padding-top:15px;
  background:
    linear-gradient(90deg,rgba(18,217,244,.035),transparent 28%,rgba(255,49,94,.035)),
    rgba(8,7,12,.98);
}
.hand { gap:20px; align-items:flex-start; padding-top:5px; }
.hand-card {
  flex:0 0 218px;
  width:218px;
  min-height:327px;
  height:327px;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:#0c0b10;
  border:2px solid rgba(255,255,255,.82);
  clip-path:polygon(12px 0,calc(100% - 8px) 0,100% 10px,100% calc(100% - 14px),calc(100% - 12px) 100%,10px 100%,0 calc(100% - 11px),0 13px);
  box-shadow:0 14px 30px rgba(0,0,0,.66);
}
.hand-card::before {
  content:"";
  position:absolute;
  z-index:4;
  inset:0;
  width:auto;
  height:auto;
  pointer-events:none;
  background:
    linear-gradient(133deg,var(--rarity) 0 10px,transparent 11px) top left/70px 72px no-repeat,
    linear-gradient(225deg,var(--card-color) 0 13px,transparent 14px) top right/68px 75px no-repeat,
    linear-gradient(45deg,var(--cyan) 0 14px,transparent 15px) bottom left/70px 74px no-repeat,
    linear-gradient(315deg,var(--pink) 0 16px,transparent 17px) bottom right/74px 80px no-repeat,
    repeating-linear-gradient(108deg,transparent 0 19px,rgba(255,255,255,.055) 20px 21px);
  border:5px solid transparent;
  border-image:linear-gradient(135deg,var(--rarity),#fff 32%,var(--card-color) 67%,#fff) 1;
}
.hand-card::after {
  content:"";
  position:absolute;
  z-index:3;
  top:-18px;
  right:-17px;
  width:66px;
  height:82px;
  transform:rotate(8deg);
  background:
    repeating-linear-gradient(125deg,rgba(0,0,0,.26) 0 4px,transparent 4px 11px),
    var(--card-color);
  border:2px solid rgba(255,255,255,.7);
}
.hand-art {
  position:absolute;
  z-index:1;
  inset:47px 5px 76px;
  height:auto;
  background-repeat:no-repeat;
  background-color:#15121c;
  filter:saturate(1.18) contrast(1.06);
}
.hand-art::after {
  content:"";
  position:absolute;
  inset:0;
  height:auto;
  background:
    linear-gradient(180deg,rgba(0,0,0,.32),transparent 18%,transparent 72%,rgba(0,0,0,.82)),
    repeating-linear-gradient(105deg,transparent 0 38px,rgba(255,255,255,.035) 39px 40px);
}
.hand-title {
  position:absolute;
  z-index:6;
  top:8px;
  left:54px;
  right:23px;
  min-height:43px;
  padding:5px 8px 4px 11px;
  transform:rotate(-1deg);
  background:#09080c;
  border-bottom:2px solid var(--card-color);
  clip-path:polygon(5px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.hand-title h4 {
  margin:0;
  color:#fff;
  font:900 22px/.9 var(--display);
  letter-spacing:.025em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:uppercase;
}
.hand-title.long-title h4 { font-size:14px; letter-spacing:.01em; }
.hand-title.very-long-title h4 { font-size:11.5px; letter-spacing:0; }
.hand-title span { display:block; margin-top:4px; color:var(--card-color); font:900 8px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; }
.hand-cost {
  z-index:8;
  left:3px;
  top:2px;
  width:58px;
  height:66px;
  color:#08070b;
  background:var(--yellow);
  font:900 43px/1 var(--display);
  transform:rotate(-3deg);
  clip-path:polygon(8px 0,100% 4px,calc(100% - 5px) 100%,0 calc(100% - 8px));
  box-shadow:4px 4px 0 rgba(0,0,0,.75);
}
.hand-emblem {
  position:absolute;
  z-index:7;
  right:5px;
  top:5px;
  width:45px;
  height:57px;
  display:grid;
  place-items:center;
  color:#08070b;
  background:var(--card-color);
  font:900 25px var(--display);
  transform:rotate(5deg);
  clip-path:polygon(5px 0,100% 4px,calc(100% - 3px) 100%,0 calc(100% - 7px));
}
.hand-info {
  position:absolute;
  z-index:6;
  inset:auto 8px 6px 8px;
  height:92px;
  padding:10px 12px 28px;
  background:rgba(7,7,10,.95);
  border-top:3px solid rgba(255,255,255,.82);
  transform:rotate(-.5deg);
  clip-path:polygon(8px 0,100% 5px,calc(100% - 4px) 100%,0 calc(100% - 5px));
}
.hand-info p { margin:0; color:#eeeaf1; font:700 9px/1.3 var(--body); }
.hand-info p b { color:var(--card-color); font:900 12px var(--display); letter-spacing:.04em; }
.hand-info .card-kind { position:absolute; left:61px; right:61px; bottom:7px; color:var(--rarity); font:800 6px var(--display); letter-spacing:.04em; text-align:center; white-space:nowrap; }
.hand-attack,.hand-defense {
  position:absolute;
  z-index:9;
  top:auto;
  bottom:2px;
  width:59px;
  min-width:59px;
  height:74px;
  color:#08070b;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  clip-path:polygon(6px 0,100% 6px,100% calc(100% - 8px),calc(100% - 9px) 100%,0 calc(100% - 3px));
}
.hand-attack { left:3px; background:var(--cyan); transform:rotate(-2deg); }
.hand-defense { right:3px; background:var(--pink); transform:rotate(2deg); }
.hand-attack span,.hand-defense span { font:900 40px/.82 var(--display); }
.hand-attack small,.hand-defense small { margin-top:5px; font:900 8px/1 var(--display); letter-spacing:.08em; }
.hand-card.selected { border-color:var(--yellow); box-shadow:0 0 0 3px var(--yellow),0 22px 48px rgba(0,0,0,.82); }
.hand-card:hover { transform:translateY(-14px) scale(1.055) rotate(-.5deg); }
.hand-card.unaffordable { opacity:1; filter:none; }
.hand-card.unaffordable .hand-cost { color:#08070b; background:var(--yellow); box-shadow:inset 0 0 0 3px var(--pink),4px 4px 0 rgba(0,0,0,.75); }
.hand-card.unaffordable::before { border-image:linear-gradient(135deg,var(--rarity),#fff 32%,var(--pink) 67%,#fff) 1; }
.drag-ghost { width:218px!important; height:327px!important; margin:-164px 0 0 -109px; transform:rotate(4deg) scale(.78)!important; }

.board-cost,.board-attack,.board-defense { position:absolute; z-index:5; display:grid; place-items:center; width:34px; height:34px; color:#08070b; font:900 21px var(--display); }
.board-attack { left:7px; bottom:7px; background:var(--cyan); }
.board-defense { right:7px; bottom:7px; background:var(--pink); }
.board-card-name { padding-left:44px; padding-right:44px; justify-content:center; }
.location-score b { font:900 28px/1 var(--display); }
.location-score small { color:#ddd7e4; font:800 7px/1 var(--display); }

/* v1.1 — écran d'accueil + plateau intégral sans chevauchement */
html,
body {
  width:100%;
  height:100%;
  overflow:hidden;
}

body { min-width:1120px; }

.hidden { display:none !important; }

.home-screen {
  position:fixed;
  z-index:200;
  inset:0;
  min-width:1120px;
  min-height:620px;
  overflow:hidden;
  color:var(--white);
  background:
    linear-gradient(90deg,rgba(7,6,12,.98) 0 42%,rgba(7,6,12,.72) 62%,rgba(7,6,12,.94)),
    radial-gradient(circle at 77% 48%,rgba(18,217,244,.22),transparent 31%),
    radial-gradient(circle at 58% 78%,rgba(255,49,94,.2),transparent 29%),
    #09080e;
}

.home-screen::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0 47%,rgba(183,242,12,.09) 47.2% 47.5%,transparent 47.7%),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.018) 80px),
    repeating-linear-gradient(0deg,transparent 0 79px,rgba(255,255,255,.018) 80px);
}

.home-glow { position:absolute; border-radius:50%; filter:blur(80px); opacity:.24; pointer-events:none; }
.home-glow-a { width:380px; height:380px; right:5%; top:12%; background:var(--cyan); }
.home-glow-b { width:320px; height:320px; right:29%; bottom:-18%; background:var(--pink); }

.home-nav {
  position:relative;
  z-index:3;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(28px,5vw,78px);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.home-brand { display:flex; align-items:baseline; gap:16px; }
.home-brand span { color:var(--muted); font:800 11px var(--display); letter-spacing:.17em; }
.home-brand strong { font:900 31px/1 var(--display); letter-spacing:.08em; transform:skew(-5deg); }
.home-status { color:#d9d4df; font:800 10px var(--display); letter-spacing:.14em; }
.home-status i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 12px var(--acid); }

.home-content {
  position:relative;
  z-index:2;
  height:calc(100% - 76px);
  display:grid;
  grid-template-columns:minmax(530px,46%) 1fr;
  align-items:center;
  padding:0 clamp(28px,5vw,78px);
}

.home-copy { position:relative; z-index:5; max-width:670px; padding-bottom:10px; }
.home-eyebrow { display:inline-block; margin-bottom:15px; color:var(--acid); font:900 13px var(--display); letter-spacing:.21em; }
.home-copy h1 { margin:0; font:900 clamp(58px,6.2vw,102px)/.78 var(--display); letter-spacing:-.025em; transform:skew(-3deg); }
.home-copy h1 em { color:var(--pink); font-style:normal; text-shadow:5px 5px 0 rgba(18,217,244,.24); }
.home-copy > p { max-width:570px; margin:27px 0 24px; color:#c9c4d0; font-size:15px; line-height:1.65; }
.home-actions { display:flex; gap:10px; }
.home-actions .button { min-height:48px; padding-inline:25px; }
.home-play { color:#08070b; background:linear-gradient(105deg,var(--acid),var(--yellow)); box-shadow:0 13px 36px rgba(183,242,12,.16); }
.home-links { display:flex; gap:23px; margin-top:17px; }
.home-links button { padding:0; color:var(--muted); background:none; border:0; border-bottom:1px solid rgba(255,255,255,.22); font:800 10px var(--display); letter-spacing:.12em; cursor:pointer; }
.home-links button:hover { color:var(--cyan); }
.home-features { display:flex; gap:34px; margin-top:38px; }
.home-features span { display:flex; align-items:baseline; gap:7px; color:#aaa5b4; font:800 10px var(--display); letter-spacing:.11em; }
.home-features b { color:var(--cyan); font:900 29px/1 var(--display); }

.home-cards { position:relative; align-self:stretch; min-width:0; }
.home-card {
  position:absolute;
  top:50%;
  height:min(72vh,690px);
  max-height:calc(100vh - 108px);
  width:auto;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.68));
  transform-origin:center;
}
.home-card-nyx { left:8%; z-index:1; transform:translateY(-48%) rotate(-8deg) scale(.91); opacity:.8; }
.home-card-mara { left:34%; z-index:2; transform:translateY(-50%) rotate(5deg); }

.app-shell {
  width:100%;
  height:100vh;
  min-height:0;
  overflow:hidden;
}

.topbar {
  flex:0 0 52px;
  height:52px;
  padding:0 16px;
}
.brand-block h1 { font-size:27px; }
.brand-kicker { font-size:9px; }
.round-block { gap:9px; }
.round-block span { font-size:11px; }
.round-block strong { font-size:19px; }
.top-actions { gap:5px; }
.top-actions .button { padding:7px 11px; font-size:11px; }

.game-layout {
  flex:0 0 calc(100vh - 278px);
  width:100%;
  height:calc(100vh - 278px);
  min-height:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:36px minmax(0,1fr) 36px;
  gap:4px;
  padding:5px 12px 4px;
  overflow:hidden;
}

.enemy-panel,
.player-panel { grid-column:1; min-height:0; }
.enemy-panel { grid-row:1; }
.player-panel { grid-row:3; }
.pilot-panel {
  grid-template-columns:30px 155px 46px 1fr;
  grid-template-rows:1fr;
  gap:7px;
  height:36px;
  padding:2px 7px;
}
.pilot-art { width:26px; height:30px; }
.pilot-panel h2 { font-size:14px; }
.pilot-panel .eyebrow { font-size:7px; }
.pilot-panel p { display:none; }
.core-meter { grid-column:3; }
.core-meter span { font-size:6px; }
.core-meter strong { font-size:22px; }
.resource-row { grid-column:4; gap:13px; justify-self:end; font-size:7px; }
.resource-row b { font-size:10px; }
.power-button { padding:3px 7px; font-size:8px; }

.arena-wrap {
  grid-column:1;
  grid-row:2;
  height:auto;
  min-height:0;
  overflow:hidden;
}
.arena-header { flex:0 0 22px; height:22px; padding-inline:6px; font-size:8px; }
.arena {
  min-height:0;
  overflow:hidden;
  gap:7px;
}
.turn-controls { flex:0 0 32px; height:32px; gap:9px; }
.turn-controls .button { min-width:170px; padding:6px 13px; font-size:10px; }
.instruction { padding-left:5px; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sector {
  grid-template-rows:minmax(0,1fr) 46px minmax(0,1fr);
  gap:3px;
  min-height:0;
  padding:3px;
  overflow:hidden;
}
.location-side {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:1fr;
  gap:3px;
  align-items:center;
  justify-items:center;
  min-height:0;
  padding:0;
  overflow:hidden;
}
.card-slot,
.card-slot:first-child,
.card-slot:nth-child(1),
.card-slot:nth-child(2),
.card-slot:nth-child(3),
.card-slot:nth-child(4) {
  width:100%;
  max-width:98px;
  height:auto;
  min-height:0;
  aspect-ratio:3/4;
  margin-left:0;
  overflow:hidden;
  transform:none;
}
.card-slot:hover { z-index:4; transform:translateY(-2px); }
.empty-mark { font-size:20px; }
.board-card { inset:1px; border-width:1px; box-shadow:0 5px 12px rgba(0,0,0,.55); }
.board-card::after { border-top-width:3px; }
.board-card:hover { transform:none; box-shadow:0 7px 16px rgba(0,0,0,.7),0 0 0 1px var(--card-color); }
.board-art { inset:0 0 27px; }
.board-card-name { height:28px; padding:0 27px; font-size:9px; letter-spacing:.02em; }
.board-cost,
.board-attack,
.board-defense { width:23px; height:23px; font-size:14px; }
.board-cost { left:3px; top:3px; }
.board-attack { left:3px; bottom:3px; }
.board-defense { right:3px; bottom:3px; }
.board-card-ability { display:none; }
.facedown-card { inset:1px; border-width:1px; }
.facedown-card span { font-size:20px; }
.facedown-card i { font-size:6px; }
.location-panel { min-height:0; height:46px; grid-template-columns:38px 1fr 38px; padding:3px; }
.location-score { width:34px; height:34px; transform:rotate(-2deg); }
.location-score b { font-size:20px; }
.location-score small { font-size:5px; }
.location-copy b { font-size:12px; }
.location-copy small { max-width:210px; margin-top:1px; font-size:6.5px; line-height:1.15; }

.hand-zone {
  position:relative;
  bottom:auto;
  z-index:45;
  flex:0 0 226px;
  width:100%;
  height:226px;
  grid-template-columns:82px minmax(0,1fr);
  gap:8px;
  padding:6px 12px 7px;
  overflow:hidden;
}
.hand-label { font-size:11px; }
.hand-label strong { font-size:8px; }
.hand {
  height:100%;
  gap:10px;
  align-items:flex-start;
  padding:1px 3px 3px;
  overflow-x:auto;
  overflow-y:hidden;
}
.hand-card {
  flex:0 0 140px;
  width:140px;
  min-height:210px;
  height:210px;
  clip-path:polygon(8px 0,calc(100% - 6px) 0,100% 7px,100% calc(100% - 9px),calc(100% - 8px) 100%,7px 100%,0 calc(100% - 8px),0 9px);
  box-shadow:0 8px 17px rgba(0,0,0,.65);
}
.hand-card::before {
  background:
    linear-gradient(133deg,var(--rarity) 0 7px,transparent 8px) top left/47px 48px no-repeat,
    linear-gradient(225deg,var(--card-color) 0 9px,transparent 10px) top right/45px 50px no-repeat,
    linear-gradient(45deg,var(--cyan) 0 10px,transparent 11px) bottom left/47px 50px no-repeat,
    linear-gradient(315deg,var(--pink) 0 11px,transparent 12px) bottom right/49px 52px no-repeat,
    repeating-linear-gradient(108deg,transparent 0 15px,rgba(255,255,255,.055) 16px 17px);
  border-width:3px;
}
.hand-card::after { top:-12px; right:-11px; width:44px; height:54px; }
.hand-art { inset:31px 3px 51px; }
.hand-title { top:5px; left:35px; right:15px; min-height:29px; padding:3px 5px 3px 7px; }
.hand-title h4 { font-size:14px; }
.hand-title.long-title h4 { font-size:9px; }
.hand-title.very-long-title h4 { font-size:7px; }
.hand-title span { margin-top:3px; font-size:5.5px; }
.hand-cost { left:2px; top:1px; width:38px; height:43px; font-size:28px; box-shadow:3px 3px 0 rgba(0,0,0,.75); }
.hand-emblem { right:3px; top:3px; width:30px; height:38px; font-size:16px; }
.hand-info { inset:auto 5px 4px 5px; height:60px; padding:6px 8px 18px; border-top-width:2px; }
.hand-info p { font-size:6.2px; line-height:1.25; }
.hand-info p b { font-size:8px; }
.hand-info .card-kind { left:40px; right:40px; bottom:4px; font-size:4px; }
.hand-attack,
.hand-defense { bottom:1px; width:39px; min-width:39px; height:49px; }
.hand-attack { left:2px; }
.hand-defense { right:2px; }
.hand-attack span,
.hand-defense span { font-size:26px; }
.hand-attack small,
.hand-defense small { margin-top:3px; font-size:5px; }
.hand-card:hover { transform:translateY(-4px) scale(1.015); }
.drag-ghost { width:140px!important; height:210px!important; margin:-105px 0 0 -70px; transform:rotate(4deg) scale(.84)!important; }

dialog {
  max-height:92vh;
  overflow:auto;
}

@media (max-height:720px) {
  .home-nav { height:60px; }
  .home-content { height:calc(100% - 60px); }
  .home-copy h1 { font-size:58px; }
  .home-copy > p { margin:18px 0; font-size:13px; }
  .home-features { margin-top:22px; }
  .home-card { height:70vh; }

  .topbar { flex-basis:48px; height:48px; }
  .game-layout { flex-basis:calc(100vh - 252px); height:calc(100vh - 252px); }
  .hand-zone { flex-basis:204px; height:204px; }
  .hand-card { flex-basis:128px; width:128px; min-height:192px; height:192px; }
  .hand-title { left:32px; }
  .hand-cost { width:35px; height:39px; font-size:25px; }
  .hand-art { inset:29px 3px 47px; }
  .hand-info { height:55px; }
  .hand-attack,.hand-defense { width:36px; min-width:36px; height:45px; }
  .hand-attack span,.hand-defense span { font-size:24px; }
}

/* v1.2 — table de jeu plein écran */
.app-shell { position:relative; }

.battle-hud {
  position:absolute;
  z-index:60;
  inset:0 0 auto;
  width:100%;
  height:58px;
  padding:8px 12px;
  background:transparent;
  border:0;
  pointer-events:none;
}
.battle-hud::after { display:none; }
.battle-hud .brand-block { visibility:hidden; }
.battle-hud .round-block {
  justify-self:center;
  align-self:start;
  min-height:37px;
  padding:6px 16px;
  color:var(--white);
  background:rgba(9,8,14,.88);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  pointer-events:auto;
}
.battle-hud .round-block span { font-size:10px; }
.battle-hud .round-block strong { font-size:17px; }
.battle-hud .top-actions { pointer-events:auto; }
.settings-button {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:var(--white);
  background:rgba(9,8,14,.9);
  border:1px solid rgba(255,255,255,.22);
  font-size:20px;
  cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.settings-button:hover { color:var(--acid); border-color:var(--acid); }

.game-layout {
  flex:1 1 auto;
  width:100%;
  height:auto;
  min-height:0;
  grid-template-columns:1fr;
  grid-template-rows:minmax(0,1fr);
  padding:7px 9px 0;
  overflow:hidden;
}
.pilot-panel,
.side-console { display:none; }
.arena-wrap {
  position:relative;
  grid-column:1;
  grid-row:1;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
}
.arena {
  width:100%;
  height:100%;
  min-height:0;
  gap:8px;
  overflow:hidden;
}
.arena-header {
  position:absolute;
  z-index:55;
  top:9px;
  left:9px;
  width:auto;
  height:auto;
  padding:7px 11px;
  color:var(--cyan);
  background:rgba(9,8,14,.88);
  border:1px solid rgba(18,217,244,.3);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.arena-header span:first-child { display:none; }
.arena-header span:last-child { font-size:10px; }
.turn-controls {
  position:absolute;
  z-index:55;
  left:50%;
  bottom:10px;
  width:auto;
  height:auto;
  transform:translateX(-50%);
}
.turn-controls .instruction { display:none; }
.turn-controls .button {
  min-width:210px;
  min-height:42px;
  padding:9px 19px;
  font-size:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.58),0 8px 24px rgba(255,49,94,.2);
}

.sector {
  grid-template-rows:minmax(0,1fr) 58px minmax(0,1fr);
  gap:5px;
  padding:6px;
  border-color:rgba(255,255,255,.18);
  overflow:hidden;
}
.sector.drop-target {
  border-color:var(--acid);
  box-shadow:inset 0 0 45px rgba(183,242,12,.12),0 0 0 2px rgba(183,242,12,.28);
}
.location-side {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  padding:0;
  overflow:hidden;
}
.card-slot,
.card-slot:first-child,
.card-slot:nth-child(1),
.card-slot:nth-child(2),
.card-slot:nth-child(3),
.card-slot:nth-child(4) {
  width:100%;
  max-width:none;
  height:auto;
  aspect-ratio:2/3;
  margin:0;
  transform:none;
}
.card-slot.drop-target { transform:translateY(-4px); }
.location-panel { height:58px; grid-template-columns:45px 1fr 45px; padding:5px; }
.location-score { width:40px; height:40px; }
.location-score b { font-size:24px; }
.location-copy b { font-size:15px; }
.location-copy small { font-size:8px; }
.board-art { inset:0 0 33px; }
.board-card-name { height:34px; padding:0 29px; font-size:11px; }
.board-cost,
.board-attack,
.board-defense { width:26px; height:26px; font-size:16px; }
.facedown-card span { font-size:25px; }

.hand-zone {
  flex:0 0 270px;
  height:270px;
  grid-template-columns:72px minmax(0,1fr);
  gap:8px;
  padding:7px 10px 8px;
  background:linear-gradient(180deg,rgba(7,6,11,.93),#08070c);
}
.hand {
  gap:12px;
  padding:1px 4px 3px;
}
.hand-card {
  flex:0 0 168px;
  width:168px;
  min-height:252px;
  height:252px;
}
.hand-card.can-drag {
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-drag:element;
}
.hand-card.can-drag:active { cursor:grabbing; }
.hand-card.can-drag * {
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.hand-art { inset:38px 4px 61px; }
.hand-title { top:6px; left:43px; right:18px; min-height:35px; padding:4px 6px 3px 8px; }
.hand-title h4 { font-size:17px; }
.hand-title.long-title h4 { font-size:11px; }
.hand-title.very-long-title h4 { font-size:8.5px; }
.hand-title span { font-size:6px; }
.hand-cost { width:46px; height:52px; font-size:34px; }
.hand-emblem { width:36px; height:46px; font-size:19px; }
.hand-info { inset:auto 6px 5px; height:72px; padding:8px 9px 22px; }
.hand-info p { font-size:7.4px; }
.hand-info p b { font-size:9.5px; }
.hand-attack,
.hand-defense { width:47px; min-width:47px; height:59px; }
.hand-attack span,
.hand-defense span { font-size:31px; }
.hand-attack small,
.hand-defense small { font-size:6px; }
.drag-ghost { width:168px!important; height:252px!important; margin:-126px 0 0 -84px; }

.settings-dialog {
  width:min(390px,88vw);
  padding:0;
  overflow:hidden;
  border-color:rgba(18,217,244,.35);
}
.settings-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:20px 22px 15px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(110deg,rgba(18,217,244,.1),transparent 62%);
}
.settings-head h2 { margin:4px 0 0; font:900 32px var(--display); }
.settings-actions { display:grid; gap:8px; padding:18px 22px 22px; }
.settings-actions .button { width:100%; min-height:42px; }
.settings-actions .power-button { margin:0; color:#09080e; background:linear-gradient(105deg,var(--acid),var(--cyan)); border:0; }
.settings-actions .danger-button { color:var(--white); background:rgba(255,49,94,.16); border:1px solid rgba(255,49,94,.4); }

@media (max-height:720px) {
  .hand-zone { flex-basis:230px; height:230px; }
  .hand-card { flex-basis:144px; width:144px; min-height:216px; height:216px; }
  .hand-art { inset:33px 3px 53px; }
  .hand-title { left:37px; }
  .hand-cost { width:40px; height:45px; font-size:29px; }
  .hand-emblem { width:31px; height:40px; }
  .hand-info { height:62px; }
  .hand-attack,.hand-defense { width:40px; min-width:40px; height:51px; }
  .hand-attack span,.hand-defense span { font-size:27px; }
  .drag-ghost { width:144px!important; height:216px!important; margin:-108px 0 0 -72px; }
}

/* v1.3 — accueil minimal et cartes animées */
.home-nav {
  height:64px;
  padding-inline:clamp(28px,4.5vw,70px);
}
.home-content {
  height:calc(100% - 64px);
  grid-template-columns:minmax(470px,42%) 1fr;
  padding-inline:clamp(28px,4.5vw,70px);
}
.home-copy {
  max-width:570px;
  padding:0 0 4vh;
}
.home-eyebrow { margin-bottom:13px; }
.home-copy h1 {
  font-size:clamp(64px,7vw,112px);
  line-height:.76;
}
.home-copy > p {
  margin:24px 0 22px;
  color:#d1ccd7;
  font:700 16px/1.5 var(--body);
}
.home-actions { align-items:center; }
.home-actions .button { min-height:50px; }
.home-links { margin-top:18px; }
.home-links button { font-size:11px; }

.home-cards::before {
  content:"";
  position:absolute;
  z-index:0;
  left:13%;
  top:50%;
  width:min(43vw,620px);
  aspect-ratio:1;
  transform:translateY(-50%) rotate(12deg);
  border:1px solid rgba(18,217,244,.18);
  box-shadow:inset 0 0 90px rgba(18,217,244,.04);
  clip-path:polygon(16% 0,100% 0,100% 84%,84% 100%,0 100%,0 16%);
}
.home-card {
  will-change:transform,filter;
  animation:home-card-reveal .72s cubic-bezier(.16,.82,.24,1) both;
}
.home-card-nyx {
  left:10%;
  opacity:.78;
  animation:
    home-card-reveal .72s .05s cubic-bezier(.16,.82,.24,1) both,
    home-nyx-float 6.2s .8s ease-in-out infinite;
}
.home-card-mara {
  left:36%;
  animation:
    home-card-reveal .72s .18s cubic-bezier(.16,.82,.24,1) both,
    home-mara-float 5.4s 1s ease-in-out infinite;
}
.home-cards:hover .home-card { animation-play-state:paused; }

@keyframes home-card-reveal {
  from { opacity:0; filter:blur(10px) drop-shadow(0 30px 34px rgba(0,0,0,.68)); }
  to { opacity:1; filter:blur(0) drop-shadow(0 30px 34px rgba(0,0,0,.68)); }
}
@keyframes home-nyx-float {
  0%,100% { transform:translateY(-48%) rotate(-8deg) scale(.91); }
  50% { transform:translateY(-51%) rotate(-10deg) scale(.925); }
}
@keyframes home-mara-float {
  0%,100% { transform:translateY(-50%) rotate(5deg); }
  50% { transform:translateY(-53%) rotate(3deg); }
}

@media (prefers-reduced-motion:reduce) {
  .home-card,
  .home-card-nyx,
  .home-card-mara { animation:none; }
}

@media (max-height:720px) {
  .home-nav { height:54px; }
  .home-content { height:calc(100% - 54px); }
  .home-copy { padding-bottom:2vh; }
  .home-copy h1 { font-size:60px; }
  .home-copy > p { margin:16px 0; }
}

/* v1.4 — plateau graphite inspiré du concept validé */
.app-shell::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:-28px;
  pointer-events:none;
  opacity:.25;
  filter:blur(22px) saturate(.82) contrast(1.08);
  background:
    linear-gradient(rgba(6,11,19,.42),rgba(6,8,14,.64)),
    url("assets/board-concept-balanced.png") center/cover no-repeat;
}
.game-layout,
.hand-zone,
.battle-hud { position:relative; z-index:2; }
.battle-hud { position:absolute; }

.arena-wrap {
  padding:5px;
  border:1px solid rgba(152,205,224,.22);
  background:linear-gradient(145deg,rgba(43,55,66,.82),rgba(15,22,31,.9) 45%,rgba(36,42,51,.78));
  box-shadow:
    0 20px 55px rgba(0,0,0,.6),
    inset 0 0 0 3px rgba(0,0,0,.3),
    inset 0 0 70px rgba(18,217,244,.035);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
}
.arena-wrap::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(183,242,12,.1),transparent 28%,rgba(18,217,244,.1) 45% 58%,transparent 72%,rgba(255,49,94,.11)),
    repeating-linear-gradient(90deg,transparent 0 78px,rgba(255,255,255,.022) 79px 80px),
    repeating-linear-gradient(0deg,transparent 0 78px,rgba(255,255,255,.018) 79px 80px);
}
.arena {
  position:relative;
  z-index:2;
  padding:92px 3px 4px;
  perspective:1400px;
}

.opponent-rack {
  position:absolute;
  z-index:58;
  top:5px;
  left:50%;
  height:82px;
  display:flex;
  align-items:center;
  gap:12px;
  transform:translateX(-50%);
  pointer-events:none;
}
.opponent-hand-meta {
  width:49px;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:var(--muted);
  font:900 7px/1.05 var(--display);
  letter-spacing:.1em;
  text-align:center;
}
.opponent-hand-meta b {
  margin-top:5px;
  color:var(--yellow);
  font:900 24px/1 var(--display);
}
.opponent-cards {
  min-width:250px;
  height:82px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:2px 8px 0;
}
.opponent-card-back,
.card-back-mini {
  position:relative;
  flex:0 0 52px;
  width:52px;
  height:73px;
  display:grid;
  place-items:center;
  margin-left:-8px;
  overflow:hidden;
  color:#09080d;
  background:
    radial-gradient(circle at 50% 47%,var(--yellow) 0 5px,transparent 6px),
    repeating-linear-gradient(128deg,transparent 0 8px,rgba(255,49,94,.25) 9px 12px,transparent 13px 21px),
    linear-gradient(145deg,#26222e,#0d0c12 56%,#312535);
  border:2px solid var(--yellow);
  box-shadow:0 8px 16px rgba(0,0,0,.64),inset 0 0 0 2px rgba(255,255,255,.07);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transform:translateY(var(--rack-lift,0)) rotate(var(--rack-rotation,0deg));
}
.opponent-card-back:first-child { margin-left:0; }
.opponent-card-back::before,
.card-back-mini::before {
  content:"";
  position:absolute;
  width:34px;
  height:34px;
  border:2px solid var(--pink);
  transform:rotate(45deg);
  box-shadow:0 0 16px rgba(255,49,94,.25);
}
.opponent-card-back i,
.card-back-mini i {
  position:relative;
  z-index:2;
  color:var(--white);
  font:900 12px var(--display);
  font-style:normal;
  letter-spacing:.08em;
}
.opponent-deck {
  position:relative;
  width:58px;
  height:80px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.opponent-deck::before,
.opponent-deck::after {
  content:"";
  position:absolute;
  top:3px;
  left:6px;
  width:52px;
  height:73px;
  background:#17131d;
  border:1px solid rgba(255,211,26,.55);
  transform:translate(4px,-2px);
}
.opponent-deck::after { transform:translate(2px,-1px); }
.opponent-deck .card-back-mini { position:relative; z-index:3; flex:none; margin:0; }
.opponent-deck small {
  position:absolute;
  z-index:4;
  left:65px;
  top:19px;
  color:var(--muted);
  font:900 7px var(--display);
  letter-spacing:.12em;
}
.opponent-deck b {
  position:absolute;
  z-index:4;
  left:66px;
  top:30px;
  color:var(--white);
  font:900 19px var(--display);
}

.arena-header { top:11px; left:11px; }

.sector {
  --zone-color:var(--cyan);
  position:relative;
  isolation:isolate;
  border:2px solid color-mix(in srgb,var(--zone-color) 58%,transparent);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--zone-color) 16%,rgba(23,30,38,.94)),rgba(13,18,26,.94) 47%,color-mix(in srgb,var(--zone-color) 10%,rgba(32,37,45,.92)));
  box-shadow:
    inset 0 0 36px color-mix(in srgb,var(--zone-color) 12%,transparent),
    0 0 22px color-mix(in srgb,var(--zone-color) 12%,transparent),
    0 16px 30px rgba(0,0,0,.34);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}
.sector:nth-child(1) { --zone-color:var(--yellow); }
.sector:nth-child(2) { --zone-color:var(--cyan); }
.sector:nth-child(3) { --zone-color:var(--pink); }
.sector::before {
  z-index:0;
  opacity:.78;
  background:
    radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--zone-color) 17%,transparent),transparent 42%),
    repeating-linear-gradient(135deg,transparent 0 27px,rgba(255,255,255,.028) 28px 29px);
}
.sector::after {
  content:"";
  position:absolute;
  z-index:1;
  left:8%;
  right:8%;
  top:49%;
  height:2px;
  pointer-events:none;
  background:var(--zone-color);
  box-shadow:0 0 18px var(--zone-color),0 22px 32px color-mix(in srgb,var(--zone-color) 32%,transparent);
  opacity:.55;
}
.location-side { position:relative; z-index:3; }
.card-slot {
  border:1px solid color-mix(in srgb,var(--zone-color) 38%,rgba(255,255,255,.12));
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--zone-color) 7%,rgba(255,255,255,.025)),rgba(0,0,0,.2)),
    repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.018) 11px 12px);
  box-shadow:inset 0 0 16px rgba(0,0,0,.26),0 4px 10px rgba(0,0,0,.28);
}
.card-slot::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:6px;
  pointer-events:none;
  border:1px solid color-mix(in srgb,var(--zone-color) 18%,transparent);
}
.card-slot.valid { animation:slot-signal 1.8s ease-in-out infinite; }
@keyframes slot-signal {
  0%,100% { box-shadow:inset 0 0 16px rgba(0,0,0,.26),0 0 0 rgba(183,242,12,0); }
  50% { box-shadow:inset 0 0 21px rgba(183,242,12,.11),0 0 13px rgba(183,242,12,.22); }
}
.board-card,
.facedown-card,
.empty-mark { z-index:2; }
.location-panel {
  z-index:5;
  color:#101017;
  border-color:color-mix(in srgb,var(--zone-color) 72%,#fff);
  background:
    linear-gradient(100deg,color-mix(in srgb,var(--zone-color) 48%,#171923),color-mix(in srgb,var(--zone-color) 76%,#f0ecdf) 48% 52%,color-mix(in srgb,var(--zone-color) 48%,#171923));
  box-shadow:0 0 22px color-mix(in srgb,var(--zone-color) 22%,transparent),inset 0 0 0 2px rgba(0,0,0,.2);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
}
.location-copy b { color:#0b0a0e; text-shadow:0 1px rgba(255,255,255,.28); }
.location-copy small { color:rgba(8,8,13,.72); font-weight:800; }
.location-score {
  color:var(--white);
  background:#11121a;
  border:1px solid color-mix(in srgb,var(--zone-color) 55%,transparent);
  box-shadow:0 0 13px color-mix(in srgb,var(--zone-color) 28%,transparent);
}
.enemy-score { color:var(--pink); }
.player-score { color:var(--acid); }

.hand-zone {
  border-top:2px solid rgba(18,217,244,.22);
  background:linear-gradient(180deg,rgba(23,30,38,.94),rgba(8,10,15,.985));
  box-shadow:0 -18px 42px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05);
}

@media (max-height:720px) {
  .arena { padding-top:80px; }
  .opponent-rack { top:2px; transform:translateX(-50%) scale(.86); transform-origin:top center; }
}

@media (prefers-reduced-motion:reduce) {
  .card-slot.valid { animation:none; }
}

/* v1.5 — vraie table jouable issue du visuel validé */
.app-shell {
  position:relative;
  display:block;
  height:100vh;
  background:#09111a;
}
.app-shell::before {
  inset:0;
  opacity:1;
  filter:none;
  transform:none;
  background:url("assets/battle-table-balanced.png") center/100% 100% no-repeat;
}
.app-shell::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,9,15,.12),transparent 18% 72%,rgba(3,7,12,.38)),
    radial-gradient(ellipse at center,transparent 35%,rgba(4,7,12,.24) 100%);
}
.battle-hud { z-index:90; }

.game-layout {
  position:absolute;
  z-index:3;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  padding:0;
}
.arena-wrap {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  clip-path:none;
  overflow:hidden;
}
.arena-wrap::before { display:none; }
.arena {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:126px 28px 258px;
  gap:18px;
  overflow:visible;
}

.opponent-rack {
  top:17px;
  height:96px;
  gap:14px;
}
.opponent-hand-meta {
  width:58px;
  font-size:8px;
}
.opponent-hand-meta b { font-size:27px; }
.opponent-cards {
  min-width:290px;
  height:96px;
  padding-top:3px;
}
.opponent-card-back,
.card-back-mini {
  flex-basis:62px;
  width:62px;
  height:88px;
  margin-left:-9px;
  border-width:3px;
  box-shadow:0 11px 22px rgba(0,0,0,.72),inset 0 0 0 2px rgba(255,255,255,.08);
}
.opponent-card-back::before,
.card-back-mini::before { width:40px; height:40px; }
.opponent-card-back i,
.card-back-mini i { font-size:14px; }
.opponent-deck { width:70px; height:94px; }
.opponent-deck::before,
.opponent-deck::after {
  left:5px;
  width:62px;
  height:88px;
}
.opponent-deck small { left:75px; top:25px; font-size:8px; }
.opponent-deck b { left:75px; top:38px; font-size:21px; }

.arena-header {
  top:auto;
  left:22px;
  bottom:18px;
  padding:9px 14px;
  border-width:2px;
}
.arena-header span:last-child { font-size:11px; }

.sector {
  position:relative;
  grid-template-rows:minmax(0,1fr) 60px minmax(0,1fr);
  gap:8px;
  min-width:0;
  padding:4px 8px;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
  clip-path:none;
}
.sector::before,
.sector::after { display:none; }
.sector.drop-target {
  border:0;
  background:color-mix(in srgb,var(--zone-color) 7%,transparent);
  box-shadow:inset 0 0 52px color-mix(in srgb,var(--zone-color) 15%,transparent);
}
.location-side {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);
  align-items:center;
  justify-items:center;
  gap:7px;
  min-height:0;
  padding:7px;
  overflow:visible;
  border:1px solid color-mix(in srgb,var(--zone-color) 45%,rgba(255,255,255,.12));
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--zone-color) 8%,rgba(5,10,15,.28)),rgba(4,8,13,.18)),
    repeating-linear-gradient(115deg,transparent 0 30px,rgba(255,255,255,.024) 31px 32px);
  box-shadow:inset 0 0 26px rgba(0,0,0,.3),0 0 15px color-mix(in srgb,var(--zone-color) 10%,transparent);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.card-slot,
.card-slot:first-child,
.card-slot:nth-child(1),
.card-slot:nth-child(2),
.card-slot:nth-child(3),
.card-slot:nth-child(4) {
  width:auto;
  max-width:100%;
  height:100%;
  max-height:100%;
  aspect-ratio:2/3;
  margin:0;
  transform:none;
  border:1px solid color-mix(in srgb,var(--zone-color) 52%,rgba(255,255,255,.15));
  background:rgba(5,9,14,.34);
  box-shadow:inset 0 0 18px rgba(0,0,0,.3);
}
.card-slot::after { inset:5px; }
.card-slot:hover { transform:translateY(-2px); }
.board-card { box-shadow:0 8px 18px rgba(0,0,0,.7); }
.board-card:hover { transform:scale(1.05); }

.location-panel {
  height:60px;
  color:var(--white);
  border:2px solid color-mix(in srgb,var(--zone-color) 65%,rgba(255,255,255,.18));
  background:linear-gradient(90deg,rgba(7,11,17,.94),color-mix(in srgb,var(--zone-color) 22%,rgba(19,25,34,.92)) 48% 52%,rgba(7,11,17,.94));
  box-shadow:0 0 22px color-mix(in srgb,var(--zone-color) 24%,transparent),inset 0 0 0 2px rgba(255,255,255,.03);
}
.location-copy b {
  color:var(--zone-color);
  font-size:17px;
  text-shadow:0 0 12px color-mix(in srgb,var(--zone-color) 45%,transparent);
}
.location-copy small { color:#c2c8d1; font-size:8.5px; }
.location-score { width:43px; height:43px; }
.location-score b { font-size:26px; }

.hand-zone {
  position:absolute;
  z-index:70;
  inset:auto 0 0;
  width:100%;
  height:310px;
  padding:0;
  display:block;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
  pointer-events:none;
}
.hand-label {
  position:absolute;
  left:24px;
  bottom:24px;
  z-index:72;
  display:flex;
  padding:8px 11px;
  background:rgba(5,10,16,.84);
  border-left:3px solid var(--acid);
  pointer-events:none;
}
.hand-label span { font-size:12px; }
.hand-label strong { font-size:9px; }
.hand {
  position:absolute;
  left:50%;
  bottom:51px;
  width:min(1180px,calc(100vw - 230px));
  height:285px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  padding:0;
  overflow:visible;
  transform:translateX(-50%);
  pointer-events:none;
}
.hand-card {
  flex:0 0 190px;
  width:190px;
  min-height:285px;
  height:285px;
  margin-left:-28px;
  z-index:calc(80 + var(--hand-index));
  transform:translateY(var(--hand-lift)) rotate(var(--hand-rotation));
  transform-origin:50% 110%;
  box-shadow:0 18px 36px rgba(0,0,0,.74);
  pointer-events:auto;
}
.hand-card:first-child { margin-left:0; }
.hand-card:hover {
  z-index:120;
  transform:translateY(calc(var(--hand-lift) - 20px)) rotate(0deg) scale(1.055);
  box-shadow:0 28px 50px rgba(0,0,0,.86),0 0 0 2px var(--card-color);
}
.hand-card.selected {
  z-index:121;
  transform:translateY(calc(var(--hand-lift) - 15px)) rotate(0deg) scale(1.035);
}
.hand-art { inset:43px 4px 69px; }
.hand-title { top:7px; left:49px; right:20px; min-height:39px; padding:5px 7px 4px 9px; }
.hand-title h4 { font-size:19px; }
.hand-title.long-title h4 { font-size:12px; }
.hand-title.very-long-title h4 { font-size:9.5px; }
.hand-title span { font-size:7px; }
.hand-cost { width:52px; height:59px; font-size:38px; }
.hand-emblem { width:41px; height:51px; font-size:21px; }
.hand-info { inset:auto 7px 5px; height:81px; padding:9px 10px 24px; }
.hand-info p { font-size:8.2px; }
.hand-info p b { font-size:10.5px; }
.hand-info .card-kind { left:48px; right:48px; font-size:4.8px; }
.hand-attack,
.hand-defense { width:53px; min-width:53px; height:67px; }
.hand-attack span,
.hand-defense span { font-size:36px; }
.hand-attack small,
.hand-defense small { font-size:6.5px; }
.drag-ghost {
  width:190px!important;
  height:285px!important;
  margin:-143px 0 0 -95px!important;
}

.turn-controls {
  left:50%;
  bottom:10px;
  z-index:95;
}
.turn-controls .button {
  min-width:250px;
  min-height:40px;
  padding:8px 22px;
}

@media (max-height:760px) {
  .arena { padding:108px 22px 218px; gap:13px; }
  .opponent-rack { top:9px; transform:translateX(-50%) scale(.86); transform-origin:top center; }
  .hand-zone { height:264px; }
  .hand { bottom:45px; height:238px; }
  .hand-card { flex-basis:158px; width:158px; min-height:237px; height:237px; margin-left:-23px; }
  .hand-art { inset:36px 4px 58px; }
  .hand-title { left:41px; }
  .hand-cost { width:44px; height:49px; font-size:32px; }
  .hand-emblem { width:34px; height:43px; }
  .hand-info { height:68px; }
  .hand-attack,.hand-defense { width:44px; min-width:44px; height:56px; }
  .hand-attack span,.hand-defense span { font-size:30px; }
  .drag-ghost { width:158px!important; height:237px!important; margin:-119px 0 0 -79px!important; }
}

/* v1.6 — terrains enrichis, emplacements plus discrets */
.app-shell::before {
  background-image:url("assets/battle-table-detailed.png");
}

.location-side {
  border-color:color-mix(in srgb,var(--zone-color) 24%,rgba(255,255,255,.07));
  background:linear-gradient(145deg,color-mix(in srgb,var(--zone-color) 4%,rgba(5,10,15,.13)),rgba(4,8,13,.06));
  box-shadow:inset 0 0 22px rgba(0,0,0,.18),0 0 12px color-mix(in srgb,var(--zone-color) 6%,transparent);
}

.card-slot,
.card-slot:first-child,
.card-slot:nth-child(1),
.card-slot:nth-child(2),
.card-slot:nth-child(3),
.card-slot:nth-child(4) {
  border-color:color-mix(in srgb,var(--zone-color) 27%,rgba(255,255,255,.08));
  background:rgba(4,8,13,.11);
  box-shadow:inset 0 0 14px rgba(0,0,0,.15);
}

.card-slot::after {
  opacity:.3;
  border-color:color-mix(in srgb,var(--zone-color) 34%,transparent);
}

.empty-mark {
  color:rgba(255,255,255,.17);
  text-shadow:0 0 12px color-mix(in srgb,var(--zone-color) 35%,transparent);
}

.card-slot.valid {
  border-color:color-mix(in srgb,var(--acid) 78%,white);
  background:rgba(186,255,0,.09);
  box-shadow:inset 0 0 25px rgba(186,255,0,.12),0 0 18px rgba(186,255,0,.28);
}

/* v1.7 — jauges de Surcharge */
.overload-meter {
  --overload-color:#39e9ff;
  position:absolute;
  z-index:96;
  display:grid;
  grid-template-columns:34px max-content 1fr 42px;
  align-items:center;
  gap:9px;
  height:58px;
  padding:7px 10px 7px 8px;
  color:#eafcff;
  border:1px solid color-mix(in srgb,var(--overload-color) 55%,rgba(255,255,255,.16));
  background:linear-gradient(105deg,rgba(5,10,16,.96),rgba(11,26,34,.9));
  box-shadow:0 10px 26px rgba(0,0,0,.55),inset 0 0 20px color-mix(in srgb,var(--overload-color) 8%,transparent),0 0 14px color-mix(in srgb,var(--overload-color) 18%,transparent);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  pointer-events:none;
}
.overload-meter::before {
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid color-mix(in srgb,var(--overload-color) 22%,transparent);
  clip-path:inherit;
}
.overload-meter-player { right:22px; bottom:18px; width:244px; }
.overload-meter-enemy {
  --overload-color:#ff315f;
  top:20px;
  left:22px;
  width:208px;
  height:48px;
  grid-template-columns:28px max-content 1fr 34px;
  gap:7px;
  opacity:.9;
}
.overload-bolt {
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:32px;
  height:38px;
  color:#071016;
  font:900 29px/1 var(--display);
  background:var(--overload-color);
  box-shadow:0 0 16px color-mix(in srgb,var(--overload-color) 55%,transparent);
  clip-path:polygon(34% 0,100% 0,68% 42%,94% 42%,24% 100%,40% 56%,10% 56%);
}
.overload-meter-enemy .overload-bolt { width:27px; height:31px; font-size:23px; }
.overload-name {
  position:relative;
  z-index:2;
  color:var(--overload-color);
  font:900 10px/.9 var(--display);
  letter-spacing:.08em;
  text-shadow:0 0 10px color-mix(in srgb,var(--overload-color) 48%,transparent);
}
.overload-name small { color:#a8b4be; font-size:6px; letter-spacing:.16em; }
.overload-cells {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  min-width:72px;
}
.overload-cells i {
  display:block;
  height:23px;
  border:1px solid color-mix(in srgb,var(--overload-color) 35%,rgba(255,255,255,.14));
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 8px rgba(0,0,0,.45);
  transform:skewX(-9deg);
}
.overload-meter-enemy .overload-cells i { height:18px; }
.overload-meter strong {
  position:relative;
  z-index:2;
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  color:var(--overload-color);
  font:900 28px/1 var(--display);
  text-shadow:0 0 13px color-mix(in srgb,var(--overload-color) 58%,transparent);
}
.overload-meter strong small { color:#7d8993; font-size:9px; }
.overload-meter-enemy strong { font-size:22px; }
.overload-meter[data-level="1"] .overload-cells i:nth-child(-n+1),
.overload-meter[data-level="2"] .overload-cells i:nth-child(-n+2),
.overload-meter[data-level="3"] .overload-cells i:nth-child(-n+3),
.overload-meter[data-level="4"] .overload-cells i:nth-child(-n+4) {
  background:var(--overload-color);
  border-color:#eaffff;
  box-shadow:0 0 12px color-mix(in srgb,var(--overload-color) 75%,transparent),inset 0 0 6px rgba(255,255,255,.55);
}
.overload-meter[data-level="3"] { --overload-color:#ffad23; }
.overload-meter[data-level="4"] {
  --overload-color:#ff304d;
  animation:overload-critical .75s steps(2,end) infinite;
}
.overload-meter[data-level="4"]::after {
  content:"CRASH IMMINENT";
  position:absolute;
  right:9px;
  bottom:2px;
  color:#fff;
  font:800 6px var(--display);
  letter-spacing:.16em;
}
@keyframes overload-critical {
  50% { filter:brightness(1.35); box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 26px rgba(255,48,77,.7); }
}

@media (max-width:900px) {
  .overload-meter-player { right:12px; bottom:12px; width:202px; }
  .overload-meter-enemy { left:12px; top:12px; width:174px; }
  .overload-name { display:none; }
  .overload-meter { grid-template-columns:34px 1fr 38px; }
  .overload-meter-enemy { grid-template-columns:27px 1fr 32px; }
}

/* v1.8 — Bande passante graphique */
.arena-header.bandwidth-meter {
  --bandwidth-color:#ffd928;
  top:auto;
  left:22px;
  bottom:18px;
  z-index:96;
  display:grid;
  grid-template-columns:36px max-content 1fr 48px;
  align-items:center;
  gap:9px;
  width:286px;
  height:58px;
  padding:7px 10px 7px 8px;
  color:#fff9d6;
  border:1px solid rgba(255,217,40,.6);
  background:linear-gradient(105deg,rgba(7,10,15,.97),rgba(38,30,8,.91));
  box-shadow:0 10px 26px rgba(0,0,0,.55),inset 0 0 20px rgba(255,217,40,.08),0 0 15px rgba(255,217,40,.18);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  pointer-events:none;
}
.arena-header.bandwidth-meter::before {
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(255,217,40,.2);
  clip-path:inherit;
}
.bandwidth-meter .bandwidth-icon {
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:34px;
  height:39px;
  color:#111006;
  font:900 23px/1 var(--display);
  background:var(--bandwidth-color);
  box-shadow:0 0 16px rgba(255,217,40,.55);
  clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);
}
.bandwidth-meter .bandwidth-name {
  position:relative;
  z-index:2;
  display:block;
  color:var(--bandwidth-color);
  font:900 10px/.9 var(--display);
  letter-spacing:.08em;
  text-shadow:0 0 10px rgba(255,217,40,.45);
}
.bandwidth-meter .bandwidth-name small {
  color:#b5a95d;
  font-size:7px;
  letter-spacing:.13em;
}
.bandwidth-cells {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:3px;
  min-width:96px;
  overflow:hidden;
}
.bandwidth-cells i {
  display:block;
  height:23px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 8px rgba(0,0,0,.55);
  transform:skewX(-9deg);
  transition:background .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.bandwidth-cells i[data-state="available"] {
  border-color:#fff8b5;
  background:var(--bandwidth-color);
  box-shadow:0 0 12px rgba(255,217,40,.7),inset 0 0 6px rgba(255,255,255,.7);
  animation:bandwidth-breathe 1.9s ease-in-out infinite;
}
.bandwidth-cells i:nth-child(2) { animation-delay:.11s; }
.bandwidth-cells i:nth-child(3) { animation-delay:.22s; }
.bandwidth-cells i:nth-child(4) { animation-delay:.33s; }
.bandwidth-cells i:nth-child(5) { animation-delay:.44s; }
.bandwidth-cells i:nth-child(6) { animation-delay:.55s; }
.bandwidth-cells i[data-state="spent"] {
  border-color:rgba(255,49,95,.62);
  background:repeating-linear-gradient(135deg,rgba(255,49,95,.42) 0 3px,rgba(255,49,95,.08) 3px 6px);
  box-shadow:inset 0 0 8px rgba(255,49,95,.28);
}
.bandwidth-cells i[data-state="locked"] { opacity:.34; }
.bandwidth-meter strong {
  position:relative;
  z-index:2;
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  color:var(--bandwidth-color);
  font:900 28px/1 var(--display);
  text-shadow:0 0 13px rgba(255,217,40,.58);
}
.bandwidth-meter strong small { color:#8d854d; font-size:12px; padding:0 2px; }
.bandwidth-meter strong b:last-child { color:#fff6b0; font-size:17px; }
.hand-label { bottom:83px; }

.bandwidth-cells::after,
.overload-cells::after {
  content:"";
  position:absolute;
  z-index:4;
  top:-45%;
  bottom:-45%;
  left:-24px;
  width:15px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  filter:blur(1px);
  transform:skewX(-12deg);
  animation:meter-scan 3.2s ease-in-out infinite;
}
.overload-cells { overflow:hidden; }
.overload-cells::after { animation-duration:4.1s; opacity:.48; }
.overload-meter[data-level="1"] .overload-cells i:nth-child(-n+1),
.overload-meter[data-level="2"] .overload-cells i:nth-child(-n+2),
.overload-meter[data-level="3"] .overload-cells i:nth-child(-n+3),
.overload-meter[data-level="4"] .overload-cells i:nth-child(-n+4) {
  animation:overload-cell-breathe 1.55s ease-in-out infinite;
}
.overload-cells i:nth-child(2) { animation-delay:.1s!important; }
.overload-cells i:nth-child(3) { animation-delay:.2s!important; }
.overload-cells i:nth-child(4) { animation-delay:.3s!important; }
.overload-meter.meter-pulse .overload-cells { animation:overload-rise .46s ease-out; }
.overload-meter.meter-pulse .overload-bolt { animation:overload-bolt-hit .46s ease-out; }
.bandwidth-meter.bandwidth-spend .bandwidth-cells { animation:bandwidth-hit .34s ease-out; }
.bandwidth-meter.bandwidth-spend strong { animation:number-hit .34s ease-out; }
.bandwidth-meter.bandwidth-refill .bandwidth-cells { animation:bandwidth-refill .56s ease-out; }
.bandwidth-meter.bandwidth-refill .bandwidth-icon { animation:bandwidth-icon-charge .56s ease-out; }

@keyframes meter-scan {
  0%,24% { transform:translateX(0) skewX(-12deg); opacity:0; }
  32% { opacity:.8; }
  58% { transform:translateX(150px) skewX(-12deg); opacity:0; }
  100% { transform:translateX(150px) skewX(-12deg); opacity:0; }
}
@keyframes bandwidth-breathe {
  0%,100% { filter:brightness(.9); box-shadow:0 0 8px rgba(255,217,40,.5),inset 0 0 6px rgba(255,255,255,.55); }
  50% { filter:brightness(1.18); box-shadow:0 0 15px rgba(255,217,40,.82),inset 0 0 8px rgba(255,255,255,.82); }
}
@keyframes overload-cell-breathe {
  0%,100% { filter:brightness(.88); }
  50% { filter:brightness(1.25); }
}
@keyframes overload-rise {
  0% { transform:scaleX(.92); filter:brightness(2); }
  55% { transform:scaleX(1.035); }
  100% { transform:scaleX(1); filter:brightness(1); }
}
@keyframes overload-bolt-hit {
  0%,100% { transform:scale(1); }
  38% { transform:scale(1.22) rotate(-5deg); filter:brightness(1.7); }
}
@keyframes bandwidth-hit {
  0% { transform:translateX(0); filter:brightness(1.7); }
  35% { transform:translateX(-3px); }
  68% { transform:translateX(2px); }
  100% { transform:translateX(0); filter:brightness(1); }
}
@keyframes number-hit {
  0%,100% { transform:scale(1); }
  45% { transform:scale(1.22); color:#ff315f; }
}
@keyframes bandwidth-refill {
  0% { transform:scaleX(.7); filter:brightness(2); opacity:.4; }
  62% { transform:scaleX(1.04); opacity:1; }
  100% { transform:scaleX(1); filter:brightness(1); }
}
@keyframes bandwidth-icon-charge {
  0% { transform:scale(.7) rotate(-8deg); filter:brightness(2.2); }
  58% { transform:scale(1.18) rotate(4deg); }
  100% { transform:scale(1) rotate(0); filter:brightness(1); }
}

@media (max-width:900px) {
  .arena-header.bandwidth-meter {
    left:12px;
    bottom:12px;
    width:230px;
    grid-template-columns:34px 1fr 44px;
  }
  .bandwidth-meter .bandwidth-name { display:none; }
  .hand-label { bottom:76px; }
}

@media (prefers-reduced-motion:reduce) {
  .hand-card { transition:none; }
  .overload-meter[data-level="4"] { animation:none; }
  .bandwidth-cells i,
  .bandwidth-cells::after,
  .overload-cells i,
  .overload-cells::after,
  .overload-meter.meter-pulse .overload-cells,
  .overload-meter.meter-pulse .overload-bolt,
  .bandwidth-meter.bandwidth-spend .bandwidth-cells,
  .bandwidth-meter.bandwidth-spend strong,
  .bandwidth-meter.bandwidth-refill .bandwidth-cells,
  .bandwidth-meter.bandwidth-refill .bandwidth-icon { animation:none!important; }
}

/* v2.0 — cartes de plateau lisibles et prioritaires */
.location-side { gap:3px; padding:4px; }
.board-card {
  inset:0;
  isolation:isolate;
  overflow:hidden;
  border:2px solid color-mix(in srgb,var(--card-color) 66%,white);
  background:#070b11;
  box-shadow:0 8px 20px rgba(0,0,0,.78),0 0 10px color-mix(in srgb,var(--card-color) 20%,transparent);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,filter .2s ease;
  outline:none;
}
.board-card::before {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,12,.6) 0,transparent 27%,transparent 58%,rgba(3,6,10,.88) 100%);
}
.board-card::after {
  z-index:7;
  border-top:4px solid var(--card-color);
  box-shadow:0 0 12px var(--card-color);
}
.board-art {
  z-index:1;
  inset:2px;
  filter:saturate(1.2) contrast(1.08) brightness(1.08);
}
.board-card-name {
  z-index:6;
  top:3px;
  right:3px;
  bottom:auto;
  left:28px;
  height:25px;
  justify-content:flex-start;
  padding:0 5px;
  color:#fff;
  background:linear-gradient(90deg,rgba(4,7,12,.98),rgba(4,7,12,.78));
  border-left:2px solid var(--card-color);
  font-size:9px;
  letter-spacing:.025em;
  text-shadow:0 1px 3px #000;
}
.board-cost,
.board-attack,
.board-defense {
  z-index:8;
  width:28px;
  height:31px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:0;
  font-size:18px;
  line-height:1;
  box-shadow:0 3px 9px rgba(0,0,0,.68);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.board-cost { top:1px; left:1px; background:#ffd928; }
.board-attack { bottom:1px; left:1px; background:#27dfff; }
.board-defense { right:1px; bottom:1px; background:#ff315f; }
.board-card-ability {
  z-index:6;
  display:block;
  right:4px;
  bottom:32px;
  left:4px;
  max-height:45%;
  padding:5px 5px 4px;
  overflow:hidden;
  color:#fff;
  background:rgba(4,7,12,.92);
  border-left:2px solid var(--card-color);
  font:700 6.5px/1.25 var(--body);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease;
}
.board-card:hover .board-card-ability,
.board-card:focus-visible .board-card-ability { opacity:1; transform:none; }
.board-card:focus-visible { box-shadow:0 16px 38px rgba(0,0,0,.92),0 0 0 2px #fff,0 0 22px var(--card-color); }
.card-slot:has(.board-card:hover),
.card-slot:has(.board-card:focus-visible),
.sector:has(.board-card:hover),
.sector:has(.board-card:focus-visible) { z-index:130; }
.game-layout:has(.board-card:hover),
.game-layout:has(.board-card:focus-visible) { z-index:125; }
.player-location .board-card:hover,
.player-location .board-card:focus-visible {
  z-index:150;
  transform:translateY(-23%) scale(1.62);
  transform-origin:bottom center;
  box-shadow:0 24px 54px rgba(0,0,0,.94),0 0 0 2px var(--card-color),0 0 26px color-mix(in srgb,var(--card-color) 48%,transparent);
}
.enemy-location .board-card:hover,
.enemy-location .board-card:focus-visible {
  z-index:150;
  transform:translateY(23%) scale(1.62);
  transform-origin:top center;
  box-shadow:0 24px 54px rgba(0,0,0,.94),0 0 0 2px var(--card-color),0 0 26px color-mix(in srgb,var(--card-color) 48%,transparent);
}
.facedown-card {
  border:2px solid #ffd928;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,49,95,.3),transparent 34%),
    repeating-linear-gradient(135deg,#2d1735 0 8px,#11131c 8px 16px);
  box-shadow:0 8px 20px rgba(0,0,0,.72),0 0 12px rgba(255,217,40,.22);
}
.facedown-card span { font-size:25px; text-shadow:0 0 11px rgba(255,217,40,.65); }
.facedown-card i { font-size:8px; }

@media (max-width:900px) {
  .player-location .board-card:hover,
  .player-location .board-card:focus-visible { transform:translateY(-20%) scale(1.48); }
  .enemy-location .board-card:hover,
  .enemy-location .board-card:focus-visible { transform:translateY(20%) scale(1.48); }
}

@media (prefers-reduced-motion:reduce) {
  .board-card { transition:none; }
}

/* v2.1 — agrandissement complet hors des emplacements */
.card-slot:has(.board-card) {
  overflow:visible;
  clip-path:none;
  contain:none;
}
.location-side:has(.board-card:hover),
.location-side:has(.board-card:focus-visible) {
  z-index:140;
  overflow:visible;
  clip-path:none;
}
.board-card:hover,
.board-card:focus-visible {
  overflow:hidden;
  will-change:transform;
}

/* v2.2 — statistiques hors de l'artwork */
.board-card::before {
  background:
    linear-gradient(180deg,rgba(3,6,10,.98) 0 25px,transparent 25px calc(100% - 24px),rgba(3,6,10,.98) calc(100% - 24px) 100%);
}
.board-art {
  inset:26px 2px 25px;
  filter:saturate(1.24) contrast(1.08) brightness(1.1);
}
.board-card-name {
  top:2px;
  right:2px;
  left:24px;
  height:23px;
  padding:0 4px;
  border-left:1px solid var(--card-color);
  font-size:7.5px;
  letter-spacing:0;
}
.board-cost,
.board-attack,
.board-defense {
  width:24px;
  height:24px;
  border-width:1px;
  font-size:15px;
  box-shadow:none;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}
.board-cost { top:1px; left:1px; }
.board-attack { bottom:1px; left:1px; }
.board-defense { right:1px; bottom:1px; }
.board-card-ability,
.board-card:hover .board-card-ability,
.board-card:focus-visible .board-card-ability {
  display:none;
}
.board-card:hover .board-art,
.board-card:focus-visible .board-art { filter:saturate(1.3) contrast(1.1) brightness(1.14); }

/* v2.3 — main lisible sans statistiques superposées */
.hand-card,
.hand-card:first-child {
  margin-left:8px;
}
.hand-card:first-child { margin-left:0; }
.hand[data-count="5"] .hand-card { margin-left:-9px; }
.hand[data-count="5"] .hand-card:first-child { margin-left:0; }
.hand:has(.hand-card:nth-child(6)) .hand-card { margin-left:-27px; }
.hand:has(.hand-card:nth-child(6)) .hand-card:first-child { margin-left:0; }
.hand:has(.hand-card:nth-child(9)) .hand-card { margin-left:-55px; }
.hand:has(.hand-card:nth-child(9)) .hand-card:first-child { margin-left:0; }
.hand-card:hover {
  z-index:220;
  transform:translateY(calc(var(--hand-lift) - 24px)) rotate(0deg) scale(1.075);
}
.hand-card.selected { z-index:221; }
.hand-cost {
  width:47px;
  height:54px;
  font-size:34px;
}
.hand-title { left:45px; }
.hand-attack,
.hand-defense {
  width:43px;
  min-width:43px;
  height:54px;
}
.hand-attack span,
.hand-defense span { font-size:29px; }
.hand-attack small,
.hand-defense small { margin-top:3px; font-size:6px; }
.hand-info { padding:8px 45px 22px; }
.hand-info p {
  display:-webkit-box;
  overflow:hidden;
  font-size:7.5px;
  line-height:1.22;
  text-align:center;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
}
.hand-info p b { font-size:9px; }
.hand-info .card-kind { left:43px; right:43px; }

@media (max-height:760px) {
  .hand-card,
  .hand-card:first-child { margin-left:6px; }
  .hand-card:first-child { margin-left:0; }
  .hand[data-count="5"] .hand-card { margin-left:-7px; }
  .hand:has(.hand-card:nth-child(6)) .hand-card { margin-left:-22px; }
  .hand:has(.hand-card:nth-child(9)) .hand-card { margin-left:-44px; }
  .hand-cost { width:40px; height:46px; font-size:29px; }
  .hand-title { left:39px; }
  .hand-attack,
  .hand-defense { width:37px; min-width:37px; height:47px; }
  .hand-attack span,
  .hand-defense span { font-size:25px; }
  .hand-info { padding-right:39px; padding-left:39px; }
  .hand-info p { font-size:6.5px; }
}

/* v2.4 — vie et profondeur des cartes en main */
.hand-card {
  transition:transform .26s cubic-bezier(.2,.82,.2,1),box-shadow .26s ease,filter .26s ease;
  backface-visibility:hidden;
}
.hand-card:not(.hand-card-enter):not(:hover):not(.selected):not(.dragging) {
  animation:hand-card-idle 3.6s ease-in-out var(--idle-delay) infinite;
}
.hand-card-enter {
  animation:hand-card-deal .55s cubic-bezier(.16,.88,.3,1.18) var(--deal-delay) both;
}
.hand-art {
  transition:transform .42s cubic-bezier(.2,.8,.2,1),filter .3s ease;
  transform-origin:50% 45%;
}
.hand-shine {
  position:absolute;
  z-index:12;
  top:-25%;
  bottom:-25%;
  left:-38%;
  width:28%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),rgba(255,255,255,.12),transparent);
  filter:blur(2px);
  transform:translateX(-170%) rotate(11deg);
}
.hand-card:hover {
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 34px 62px rgba(0,0,0,.9),0 0 0 2px var(--card-color),0 0 28px color-mix(in srgb,var(--card-color) 42%,transparent);
}
.hand-card:hover .hand-art {
  transform:scale(1.045) translateY(-2px);
  filter:saturate(1.3) contrast(1.1) brightness(1.08);
}
.hand-card:hover .hand-shine { animation:hand-card-shine .78s ease-out both; }
.hand-card:hover .hand-cost { transform:translate(-2px,-2px) rotate(-3deg) scale(1.06); }
.hand-card:hover .hand-emblem { transform:translate(1px,-2px) rotate(5deg) scale(1.05); }
.hand-card:hover .hand-attack { transform:translate(-2px,-1px) rotate(-2deg) scale(1.045); }
.hand-card:hover .hand-defense { transform:translate(2px,-1px) rotate(2deg) scale(1.045); }
.hand-cost,
.hand-emblem,
.hand-attack,
.hand-defense { transition:transform .26s cubic-bezier(.2,.82,.2,1),filter .26s ease; }
.hand-card.dragging {
  animation:none;
  opacity:.24;
  transform:translateY(8px) rotate(2deg) scale(.96);
  filter:grayscale(.35);
}

@keyframes hand-card-deal {
  0% { opacity:0; transform:translateY(155px) rotate(calc(var(--hand-rotation) + 12deg)) scale(.72); filter:brightness(1.65); }
  62% { opacity:1; transform:translateY(calc(var(--hand-lift) - 10px)) rotate(calc(var(--hand-rotation) - 1deg)) scale(1.025); }
  100% { opacity:1; transform:translateY(var(--hand-lift)) rotate(var(--hand-rotation)) scale(1); filter:brightness(1); }
}
@keyframes hand-card-idle {
  0%,100% { transform:translateY(var(--hand-lift)) rotate(var(--hand-rotation)); }
  50% { transform:translateY(calc(var(--hand-lift) - 3px)) rotate(var(--hand-rotation)); }
}
@keyframes hand-card-shine {
  0% { opacity:0; transform:translateX(-170%) rotate(11deg); }
  24% { opacity:.72; }
  100% { opacity:0; transform:translateX(610%) rotate(11deg); }
}

@media (prefers-reduced-motion:reduce) {
  .hand-card,
  .hand-card-enter,
  .hand-card:not(.hand-card-enter):not(:hover):not(.selected):not(.dragging),
  .hand-card:hover .hand-shine { animation:none!important; transition:none!important; }
  .hand-art,
  .hand-cost,
  .hand-emblem,
  .hand-attack,
  .hand-defense { transition:none!important; }
}