/* The arena is a viewport split in two. Every visible match card uses one size. */
:root {
  --match-card-height: clamp(150px, 32dvh, 320px);
  --match-card-width: min(calc(var(--match-card-height) * .78), calc((100vw - var(--hud-left) - var(--hud-right) - 48px) / 5));
  --match-art-height: calc(var(--match-card-height) * .43);
  --hand-card-width: var(--match-card-width);
}
body, body:has(#tutorial-panel:not([hidden])) { height: 100dvh; min-height: 0; overflow: hidden; }
.battle-shell, body:has(#tutorial-panel:not([hidden])) .battle-shell { height: 100dvh; min-height: 0; max-width: none; }
.game-area { position: relative; display: grid; grid-template-rows: 50% 50%; height: 100%; min-height: 0; padding: 0; gap: 0; overflow: hidden; }
.board { min-height: 0; height: 100%; align-items: center; justify-content: center; gap: 8px; padding-inline: var(--hud-left) var(--hud-right); }
#enemy-board { grid-row: 1; padding-top: calc(var(--match-card-height) * .5 + 12px); padding-bottom: 12px; }
#player-board { grid-row: 2; padding-top: 10px; padding-bottom: calc(var(--match-card-height) * .5 + 22px); border-top: 1px solid #c7a76b70; }
.board .card, .hand.active-hand .card, body:has(#tutorial-panel:not([hidden])) .board .card {
  width: var(--match-card-width); min-width: var(--match-card-width); max-width: var(--match-card-width);
  height: var(--match-card-height); min-height: var(--match-card-height); max-height: var(--match-card-height);
  flex: 0 0 var(--match-card-width);
}
.board .card-img, .hand.active-hand .card-img { height: var(--match-art-height); flex-basis: var(--match-art-height); margin: 4px 4px 0; }
.board .card-name, .hand.active-hand .card-name { height: 32px; min-height: 32px; padding: 3px 4px; font-size: 12px; line-height: 1.15; overflow: auto; scrollbar-width: none; box-sizing: border-box; }
.board .card-desc-container, .hand.active-hand .card-desc-container { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9a7e51 #18101f; pointer-events: auto; touch-action: pan-y; }
.board .card-desc-text, .hand.active-hand .card-desc-text { font-size: 12px; line-height: 1.25; padding: 4px 5px; }
.board .card-stats, .hand.active-hand .card-stats { height: 31px; padding: 2px 4px; }
.board .card-cost, .board .stat, .hand.active-hand .card-cost, .hand.active-hand .stat { width: 23px; height: 25px; font-size: 16px; }
.board .card-state, .hand.active-hand .card-state { top: calc(var(--match-art-height) - 10px); left: 5px; right: 5px; font-size: 9px; padding: 2px; }
.hand, #enemy-hand { position: absolute; left: 0; right: 0; width: 100%; height: var(--match-card-height); min-height: 0; padding: 0 var(--hud-right) 0 var(--hud-left); align-items: stretch; overflow: visible; }
#player-hand { bottom: calc(var(--match-card-height) * -.5); padding-bottom: 0; }
#enemy-hand.hidden-hand { top: calc(var(--match-card-height) * -.5); bottom: auto; height: var(--match-card-height); min-height: var(--match-card-height); padding-block: 0; }
.hand.hidden-hand .card { width: var(--match-card-width); min-width: var(--match-card-width); max-width: var(--match-card-width); height: var(--match-card-height); min-height: var(--match-card-height); max-height: var(--match-card-height); flex: 0 0 var(--match-card-width); margin-left: calc(var(--match-card-width) * -.6); }
.hand.active-hand .card:hover, .hand.active-hand .card:focus-visible, .hand.active-hand .card.selected-for-play { transform: translateY(calc(var(--match-card-height) * -.5 - 12px)) rotate(0deg) !important; z-index: 51; }
#enemy-hand.active-hand { top: calc(var(--match-card-height) * -.5); bottom: auto; }
#enemy-hand.active-hand .card:hover, #enemy-hand.active-hand .card:focus-visible, #enemy-hand.active-hand .card.selected-for-play { transform: translateY(calc(var(--match-card-height) * .5 + 12px)) rotate(0deg) !important; }
body[data-mode="pvp"][data-turn="enemy"] #enemy-board { padding-top: calc(var(--match-card-height) + 22px); padding-bottom: 10px; }
#tutorial-panel { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 130; max-height: 94px; overflow-y: auto; }
body:has(#tutorial-panel:not([hidden])) #enemy-hand.hidden-hand { display: none; }
#selection-panel { top: 50%; bottom: auto; transform: translateY(-50%); }
.card.dragging-modern { z-index: 9999; }
.poison-ready { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.poison-ready .game-icon { width: 12px; height: 12px; }
@media (max-width: 1100px) and (min-width: 701px) {
  :root { --match-card-width: min(calc(var(--match-card-height) * .78), calc((100vw - var(--hud-left) - var(--hud-right) - 48px) / 5)); }
  .board .card-desc-text, .hand.active-hand .card-desc-text { font-size: 11px; }
  .board .card-img, .hand.active-hand .card-img { flex-basis: var(--match-art-height); }
}
@media (max-width: 700px), (max-width: 980px) and (orientation: portrait) {
  :root { --match-card-height: 150px; --match-card-width: 112px; --match-art-height: 66px; }
  .board { overflow-x: auto; overflow-y: hidden; justify-content: safe center; padding-inline: 12px; }
  #enemy-board { padding-top: 230px; padding-bottom: 0; align-items: flex-start; }
  #player-board { padding-top: 16px; padding-bottom: 0; align-items: flex-start; }
  #enemy-hand.hidden-hand { top: 180px; height: 40px; min-height: 40px; overflow: hidden; align-items: flex-start; }
  .hand.active-hand, #enemy-hand.active-hand { height: var(--match-card-height); min-height: 0; padding: 0 12px; gap: 8px; overflow-x: auto; overflow-y: hidden; }
  #player-hand { bottom: 100px; clip-path: inset(0 0 50% 0); }
  .floating-ui.bottom { padding: 8px; gap: 4px; }
  .floating-ui.bottom .deck-display img { width: 20px; height: 24px; }
  .floating-ui.bottom .deck-display .deck-count { font-size: 14px; }
  .floating-ui.bottom .arena-slot { width: 28px; height: 34px; }
  .floating-ui.bottom .hero-portrait { width: 16px; height: 16px; }
  .floating-ui.bottom .hero-name { font-size: 12px; }
  .floating-ui.bottom .hero-resource { font-size: 11px; }
  .floating-ui.bottom .stat-row:not(.hero-target-row) { min-height: 20px; }
  .floating-ui.bottom .stat-row:not(.hero-target-row) .stat-val-out { height: 18px; }
  .floating-ui.bottom .hero-stats-container { padding: 4px; }
  .floating-ui.bottom .hero-power-btn { min-height: 44px; }
  .hand.active-hand .card:hover, .hand.active-hand .card:focus-visible, .hand.active-hand .card.selected-for-play { transform: none !important; }
  .board .card-name, .hand.active-hand .card-name { height: 28px; min-height: 28px; font-size: 11px; }
  .board .card-desc-text, .hand.active-hand .card-desc-text { font-size: 11px; }
  .board .card-stats, .hand.active-hand .card-stats { height: 27px; }
  .board .card-cost, .board .stat, .hand.active-hand .card-cost, .hand.active-hand .stat { width: 20px; height: 22px; font-size: 15px; }
  #selection-panel { position: fixed; top: auto; bottom: 160px; left: 10px; right: 10px; transform: none; }
  #tutorial-panel { top: 220px; max-height: 90px; }
  body:has(#tutorial-panel:not([hidden])) { --match-card-height: 110px; --match-card-width: 90px; --match-art-height: 44px; }
  body:has(#tutorial-panel:not([hidden])) #enemy-board { padding-top: 310px; }
}
@media (max-height: 680px) and (min-width: 701px) {
  :root { --match-card-height: 142px; --match-art-height: 62px; }
  #enemy-board { padding-top: 36px; }
  #enemy-hand.hidden-hand { top: calc(30px - var(--match-card-height)); height: var(--match-card-height); min-height: var(--match-card-height); }
  #player-board { align-items: flex-start; padding-top: 6px; padding-bottom: 0; }
  #player-hand { bottom: calc(var(--match-card-height) * -.7); }
  .hand.active-hand .card:hover, .hand.active-hand .card:focus-visible, .hand.active-hand .card.selected-for-play { transform: translateY(calc(var(--match-card-height) * -.7 - 8px)) rotate(0deg) !important; }
  .board .card-name, .hand.active-hand .card-name { height: 28px; min-height: 28px; font-size: 11px; }
  .board .card-desc-text, .hand.active-hand .card-desc-text { font-size: 11px; }
}
@media (max-height: 700px) and (max-width: 700px) {
  :root { --match-card-height: 110px; --match-card-width: 90px; --match-art-height: 44px; }
  #enemy-board { padding-top: 150px; }
  #enemy-hand.hidden-hand { top: 110px; }
  #player-hand { bottom: 20px; }
  .floating-ui .deck-display img { width: 18px; height: 24px; }
  .floating-ui .arena-slot { height: 32px; width: 28px; }
  .floating-ui .hero-resource { display: none; }
  .floating-ui .hero-name { font-size: 12px; }
  .floating-ui .hero-portrait { width: 18px; height: 18px; }
  .floating-ui .hero-stats-container { padding: 4px; }
  .floating-ui .stat-row:not(.hero-target-row) { min-height: 20px; }
  .side-menu-buttons { top: 100px; }
  #tutorial-panel { top: 82px; max-height: 60px; }
  body:has(#tutorial-panel:not([hidden])) #enemy-board { padding-top: 150px; }
}
.game-fx { position: fixed; width: 64px; height: 64px; margin: -32px; z-index: 1500; pointer-events: none; color: var(--fx-color); border: 2px solid currentColor; border-radius: 50%; box-shadow: 0 0 20px currentColor,inset 0 0 12px currentColor; display: grid; place-items: center; animation: fxBloom var(--fx-duration) ease-out forwards; }
.game-fx .game-icon { width: 30px; height: 30px; color: inherit; }
.game-fx i { position: absolute; left: 28px; top: 28px; width: 6px; height: 6px; border: 1px solid currentColor; background: currentColor; transform: rotate(45deg); animation: fxShard var(--fx-duration) ease-out forwards; }
.game-fx i:nth-of-type(1) { --dx: -48px; --dy: -35px; }
.game-fx i:nth-of-type(2) { --dx: 48px; --dy: -35px; }
.game-fx i:nth-of-type(3) { --dx: -38px; --dy: 40px; }
.game-fx i:nth-of-type(4) { --dx: 38px; --dy: 40px; }
.fx-cast, .fx-power, .fx-arena { border-radius: 8px; animation-name: fxRune; }
.fx-heal, .fx-buff, .fx-draw, .fx-resurrect { animation-name: fxRise; }
.fx-shield_break { border-style: dashed; }
.fx-death, .fx-exile, .fx-discard { animation-name: fxCollapse; }
.fx-poison { border-style: dotted; }
.fx-attack, .fx-damage { border-radius: 3px; }
.fx-turn { width: 90px; height: 90px; margin: -45px; border-style: double; }
.fx-victory, .fx-defeat { z-index: 2500; width: 100px; height: 100px; margin: -50px; }
.fx-light { width: 40px; height: 40px; margin: -20px; box-shadow: none; animation-name: fxBloom; }
@keyframes fxBloom { from { opacity: 1; transform: scale(.5); } to { opacity: 0; transform: scale(1.8); } }
@keyframes fxRune { from { opacity: 1; transform: scale(.5) rotate(-35deg); } to { opacity: 0; transform: scale(1.5) rotate(35deg); } }
@keyframes fxRise { from { opacity: 1; transform: translateY(12px); } to { opacity: 0; transform: translateY(-48px); } }
@keyframes fxCollapse { from { opacity: 1; transform: scale(1.5); } to { opacity: 0; transform: scale(.2) rotate(50deg); } }
@keyframes fxShard { to { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(160deg); } }
@media (prefers-reduced-motion: reduce) { .game-fx { display: none; } }