/* Face commune, proportionnelle : aucun zoom interne de l'illustration. */
.hand-card,.board-card { container-type:inline-size; border:0; background:#eee; clip-path:polygon(4% 0,96% 0,100% 3%,100% 96%,96% 100%,3% 100%,0 97%,0 4%); }
.hand-card::before,.hand-card::after,.board-card::before,.board-card::after { display:none; }
.tcg-face { position:absolute; inset:0; overflow:hidden; isolation:isolate; background:#141513; color:#f9f7ee; font-family:var(--display); pointer-events:none; }
.tcg-art { position:absolute; inset:16% 1.5% 22%; background-repeat:no-repeat; background-color:#161c24; }
.tcg-frame { position:absolute; z-index:3; inset:0; border:1.1cqw solid #ecece2; clip-path:polygon(4% 0,96% 0,100% 3%,100% 96%,96% 100%,3% 100%,0 97%,0 4%); }
.tcg-frame::before { content:""; position:absolute; inset:0; border:1.3cqw solid transparent; border-image:repeating-linear-gradient(125deg,#ffd52a 0 8%,#111 8% 10%,#e7e9db 10% 15%,#1673ef 15% 25%,var(--card-color) 25% 33%) 1; }
.tcg-frame::after { content:""; position:absolute; inset:0; background:url('assets/card-wear.svg') center/100% 100%; opacity:.5; }
.tcg-heading { position:absolute; z-index:4; top:2.8%; left:25%; right:17%; height:14.5%; padding:1% 2%; background:#10110f; transform:rotate(-2deg); display:flex; flex-direction:column; justify-content:center; }
.tcg-heading h4 { margin:0; font:900 8.5cqw/.95 var(--display); text-transform:uppercase; white-space:normal; overflow:visible; text-overflow:clip; letter-spacing:0; }
.tcg-heading-long h4 { font-size:6.4cqw; }
.tcg-heading span { margin-top:1.5cqw; font:900 3cqw/1 var(--display); color:var(--card-color); text-transform:uppercase; letter-spacing:.05em; }
.tcg-block { position:absolute; z-index:6; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#080b09; font:900 25cqw/.8 var(--display); background-image:url('assets/card-wear.svg'); background-size:175% 135%; }
.tcg-block small { font:900 2.8cqw/1 var(--display); margin-top:1.4cqw; letter-spacing:.04em; }
.tcg-cost { top:1%; left:1%; width:24%; height:20%; padding-bottom:2%; background-color:#ffd629; clip-path:polygon(9% 0,100% 0,88% 88%,0 100%,0 10%); transform:rotate(-3deg); }
.tcg-cost small { font-size:2.6cqw; }
.tcg-emblem { top:1%; right:0; width:22%; height:23%; background-color:var(--card-color); font-size:17cqw; clip-path:polygon(15% 0,93% 0,100% 10%,100% 100%,0 70%); transform:rotate(4deg); }
.tcg-footer { position:absolute; z-index:2; inset:75% 1% 1%; background:#10110f url('assets/card-wear.svg') center/100% 200%; border-top:1cqw solid #dddccb; transform:skewY(-3deg); }
.tcg-ability { position:absolute; z-index:5; top:77.5%; bottom:7%; left:25%; right:25%; margin:0; display:flex; flex-direction:column; justify-content:center; font:700 3.8cqw/1.14 var(--display); text-align:center; }
.tcg-ability b { color:var(--card-color); font-size:4.3cqw; }
.tcg-attack,.tcg-defense { bottom:1%; width:25%; height:19%; padding-top:3%; }
.tcg-attack { left:1%; background-color:#19d9ef; clip-path:polygon(0 0,60% 8%,100% 100%,10% 100%,0 88%); align-items:flex-start; padding-left:4%; }
.tcg-defense { right:1%; background-color:#ff315f; clip-path:polygon(40% 8%,100% 0,100% 88%,90% 100%,0 100%); align-items:flex-end; padding-right:4%; }
.tcg-edition { position:absolute; z-index:5; bottom:2.7%; left:25%; right:25%; text-align:center; color:var(--card-color); font:900 2.1cqw/1 var(--display); }
.tcg-sticker { position:absolute; z-index:4; left:1%; top:59%; padding:1.5cqw .8cqw; background:var(--card-color); color:#111; border:1px solid #111; transform:rotate(-7deg); font:900 3cqw/.9 var(--display); }
.hand-card.unaffordable .tcg-cost { box-shadow:inset 0 0 0 1cqw #ff315f; }
.hand-card.selected { outline:2px solid var(--yellow); outline-offset:2px; }
.board-card .tcg-ability { font-size:3.7cqw; }
.board-card.disabled .tcg-face { filter:grayscale(.85) brightness(.7); }
.hand-card:hover .tcg-art,.board-card:hover .tcg-art { transform:none; }

#cardPreview { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:24px; border:0; background:transparent; color:#fff; overflow:auto; }
#cardPreview[open] { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
#cardPreview::backdrop { background:rgba(2,5,12,.86); backdrop-filter:blur(9px); }
.card-preview-face { position:relative; flex:none; width:min(440px,80vw,calc((100dvh - 148px) * .666667)); aspect-ratio:2/3; container-type:inline-size; overflow:hidden; clip-path:polygon(4% 0,96% 0,100% 3%,100% 96%,96% 100%,3% 100%,0 97%,0 4%); animation:card-preview-in .22s ease-out; }
#closeCardPreview { position:fixed; top:16px; right:20px; width:44px; height:44px; border:1px solid #ffffff60; background:#111923; color:white; font:30px/1 sans-serif; cursor:pointer; }
#previewSelect { flex:none; min-height:42px; background:var(--acid); color:#111; }
#previewSelect[hidden] { display:none; }
#previewWithdraw { flex:none; min-height:42px; background:var(--pink); color:white; }
#previewWithdraw[hidden] { display:none; }
#previewSelect:disabled { background:#28343e; color:#aab5bd; cursor:default; }
#cardPreview > p { margin:0; font:12px/1.4 var(--body); color:#bdc8d3; text-align:center; }
#cardPreview button:focus-visible { outline:2px solid white; outline-offset:3px; }
@keyframes card-preview-in { from { opacity:0; transform:translateY(18px) scale(.94); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .card-preview-face { animation:none; } }

/* Feedback de pose purement visuel : ne capture jamais les clics ou les drops. */
/* Contain each complete atlas tile: never stretch or crop the artwork. */
.tcg-art { inset:18% 1.5% 31%; overflow:hidden; container-type:size; }
.tcg-art-image { position:absolute; display:block; left:50%; top:50%; width:min(100cqw,calc(100cqh * var(--art-ratio))); height:min(100cqh,calc(100cqw / var(--art-ratio))); transform:translate(-50%,-50%); background-repeat:no-repeat; image-rendering:auto; }
.collection-art,.selection-art { container-type:size; overflow:hidden; background:#161c24; }
.selection-art { position:relative; }
.collection-art::after { display:none; }
.tcg-heading { top:1%; height:16%; left:23%; right:16%; transform:none; padding:1% 2%; box-sizing:border-box; }
.tcg-heading h4 { font-size:7cqw; line-height:1.04; overflow-wrap:anywhere; }
.tcg-heading-long h4 { font-size:5.7cqw; }
.tcg-heading span { font-size:2.8cqw; margin-top:1cqw; }
.tcg-block { box-sizing:border-box; overflow:hidden; padding:1.5% 2%; gap:.5cqw; font-size:18cqw; line-height:1; }
.tcg-value { display:block; flex:none; font:900 var(--value-size,18cqw)/1 var(--display); letter-spacing:-.03em; font-variant-numeric:tabular-nums; text-align:center; max-width:100%; }
.tcg-block small { display:block; flex:none; margin:0; font-size:2.8cqw; line-height:1.1; white-space:nowrap; letter-spacing:0; }
.tcg-cost { left:1%; top:1%; width:21%; height:16%; transform:none; clip-path:polygon(10% 0,100% 0,100% 90%,90% 100%,0 100%,0 10%); }
.tcg-emblem { right:1%; top:1%; width:15%; height:16%; transform:none; font-size:11cqw; clip-path:polygon(0 0,90% 0,100% 10%,100% 100%,0 90%); }
.tcg-footer { inset:69% 1% 0; transform:none; border-top-width:.5cqw; }
.tcg-ability,.board-card .tcg-ability { top:70%; bottom:17%; left:4%; right:4%; display:block; align-content:center; font-size:3.6cqw; line-height:1.16; text-align:center; }
.tcg-ability b { font-size:3.8cqw; }
.tcg-attack,.tcg-defense { bottom:1%; width:24%; height:15%; padding:1% 2%; align-items:center; justify-content:center; }
.tcg-attack { left:1%; clip-path:polygon(0 0,90% 0,100% 12%,100% 100%,10% 100%,0 88%); }
.tcg-defense { right:1%; clip-path:polygon(10% 0,100% 0,100% 88%,90% 100%,0 100%,0 12%); }
.tcg-attack .tcg-value,.tcg-defense .tcg-value { font-size:min(var(--value-size),15cqw); }
.tcg-sticker { display:none; }
.tcg-edition { bottom:5%; left:27%; right:27%; line-height:1.2; }

.placement-impact { position:absolute; z-index:20; inset:0; pointer-events:none; border:2px solid var(--impact-color); border-radius:3px; box-shadow:inset 0 0 22px color-mix(in srgb,var(--impact-color) 40%,transparent),0 0 18px color-mix(in srgb,var(--impact-color) 65%,transparent); }
.placement-impact::before,.placement-impact::after { content:""; position:absolute; inset:6%; border-top:2px solid var(--impact-color); border-bottom:2px solid var(--impact-color); clip-path:polygon(0 0,18% 0,18% 100%,0 100%,82% 100%,82% 0,100% 0,100% 100%); }
.placement-impact::after { transform:rotate(90deg); }

.card-slot.planned { outline:1px dashed var(--acid); outline-offset:2px; }
.plan-label { position:absolute; z-index:8; bottom:-12px; left:0; right:0; text-align:center; color:var(--acid); background:#0c141a; font:800 8px/12px var(--display); letter-spacing:.1em; pointer-events:none; }
.pending-effects { position:absolute; z-index:25; top:calc(50% + 12px); left:65px; right:65px; display:flex; gap:4px; overflow-x:auto; pointer-events:auto; }
.pending-effects button { flex:1 0 90px; min-width:0; max-width:160px; padding:3px 6px; border:1px solid var(--effect-color); background:#101c24; color:var(--effect-color); cursor:pointer; text-align:left; }
.pending-effects span,.pending-effects small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:800 9px/1.1 var(--display); }
.pending-effects small { color:#e5eef1; font-size:8px; }
.pending-effects button:focus-visible { outline:2px solid white; outline-offset:-2px; }
.sector:has(.pending-effects) .location-copy { transform:translateY(-10px); }
.card-slot.planned .board-card,.pending-effects button { cursor:grab; touch-action:none; user-select:none; }
.hand-card.unaffordable { cursor:grab; touch-action:none; }
.board-card.drag-ghost { inset:auto; min-height:0; }
.drag-ghost,.drag-ghost * { pointer-events:none!important; }
body.withdrawing-card::after { content:"RAMENEZ ICI POUR RETIRER · POINTS RESTITUÉS"; position:fixed; z-index:500; bottom:0; left:0; right:0; height:28vh; padding:15px; box-sizing:border-box; text-align:center; font:800 14px var(--display); color:var(--acid); border:2px dashed var(--acid); background:linear-gradient(transparent,#b7f20c22); pointer-events:none; }
body.return-ready::after { background:linear-gradient(#b7f20c12,#b7f20c44); border-style:solid; }

/* Focus de jeu : seules les cartes en main bougent, les cibles restent stables. */
.battle-hud .round-block {
  position:absolute;
  top:16px;
  left:22px;
  border-left:3px solid var(--acid);
  pointer-events:none;
}
.battle-hud .top-actions {
  position:absolute;
  top:16px;
  right:22px;
  left:auto;
  margin:0;
  transform:none;
  pointer-events:auto;
}
@media(max-width:1000px) {
  .battle-hud .top-actions { top:12px; right:12px; }
  .battle-hud .round-block {
    top:12px;
    left:12px;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    padding:7px 10px;
  }
}
.turn-controls {
  left:auto;
  right:22px;
  bottom:24px;
  transform:none;
}
.turn-controls #resolveButton {
  min-width:160px;
  min-height:58px;
  font-size:17px;
  border:1px solid #ff9cad;
  transition:filter .18s ease,box-shadow .18s ease;
}
.turn-controls #resolveButton:hover:not(:disabled) {
  filter:brightness(1.18);
  box-shadow:0 0 28px #ff315e66;
}
.turn-controls #resolveButton:disabled { cursor:wait; opacity:.65; }
@media(max-width:1000px) {
  .turn-controls { right:12px; bottom:16px; }
  .turn-controls #resolveButton { min-width:125px; min-height:48px; font-size:13px; padding:8px 12px; }
}
.arena {
  filter:brightness(.78) saturate(.88);
  transition:filter .28s ease;
}
.hand {
  transform:translateX(-50%) scale(1.06);
  transform-origin:50% 100%;
  filter:drop-shadow(0 -8px 25px #050911aa);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s ease,opacity .3s ease;
}
body:is(.drag-active,:has(.hand-card.selected)) .arena {
  filter:brightness(1.08) saturate(1.1);
}
body:is(.drag-active,:has(.hand-card.selected)) .hand {
  transform:translateX(-50%) translateY(30px) scale(.56);
  filter:brightness(.65) saturate(.7);
  opacity:.75;
}
body.drag-active .hand-card {
  pointer-events:none;
  animation:none!important;
}
body.drag-active .hand-card:hover {
  transform:translateY(var(--hand-lift)) rotate(var(--hand-rotation));
}
/* La carte transportée reste nette et au-dessus des deux plans. */
body.drag-active .drag-ghost {
  filter:brightness(1.12) drop-shadow(0 0 14px #12d9f455);
  opacity:1;
}
@media(prefers-reduced-motion:reduce) {
  .arena,.hand { transition:none; }
}