/* Hrací plocha: zóny hrdinů, dvě scény, středová lišta a vějíř karet v ruce. */
.hero-zone { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: calc(var(--hero-w) + 18px); position: relative; z-index: 5; }
.hero-zone.enemy { padding-bottom: 12px; }
.hero-zone.player { padding-top: 4px; padding-bottom: 14px; }
.hero-slot { display: grid; place-items: center; }
.zone-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zone-side.right { justify-content: flex-end; }

.hand-backs { position: relative; width: 100%; height: calc(var(--card-w) * 0.62); max-width: 260px; }
.back-slot { position: absolute; left: 50%; top: calc(var(--card-w) * -0.32); width: calc(var(--card-w) * 0.5);
  transform: translate(calc(-50% + var(--x, 0px)), calc(var(--y, 0px) * -1)) rotate(calc(180deg - var(--r, 0deg)));
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.deck { position: relative; width: calc(var(--hero-w) * .52); aspect-ratio: 5 / 7; border-radius: 6px; display: grid; place-items: center;
  background: repeating-conic-gradient(from 45deg, #3a1460 0 25%, #2a0d48 0 50%) 0 0 / 30% 22%;
  box-shadow: 0 0 0 2px #c98a12, 2px 2px 0 0 #2a0d48, 3px 3px 0 1px #c98a12, 5px 5px 0 1px #2a0d48, 6px 6px 0 2px #8a5c0c, 0 8px 18px rgba(0, 0, 0, .55);
}
.deck span { font: 800 13px/1 var(--font-display); color: var(--paper); text-shadow: 0 2px 4px #000; font-variant-numeric: tabular-nums; }

.hype { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hype-count { font: 800 15px/1 var(--font-display); color: #ffd1e6; text-shadow: 0 0 12px rgba(255, 46, 136, .8); font-variant-numeric: tabular-nums; }
.hype-count b { font-size: 21px; color: #fff; }
.hype-gems { display: flex; flex-wrap: wrap; gap: 3px; max-width: 128px; }
.hype-gems i { width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; transition: background .3s, box-shadow .3s; }
.hype-gems .full { background: radial-gradient(circle at 35% 30%, #ffd1e8, var(--hot) 60%); box-shadow: 0 0 8px rgba(255, 46, 136, .9); }
.hype-gems .spent { background: #4a1d3a; box-shadow: inset 0 0 0 1px rgba(255, 46, 136, .5); }
.hype-gems .locked { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.hero-zone.enemy .hype { align-items: flex-end; }
.hero-zone.enemy .hype-gems { justify-content: flex-end; }

.hero-power { position: relative; width: calc(var(--hero-w) * .66); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .4), transparent 50%), linear-gradient(165deg, #2ea7c9, #12385a);
  box-shadow: 0 0 0 3px #c98a12, 0 0 0 5px #3a1d00, 0 6px 14px rgba(0, 0, 0, .55); transition: transform .2s, filter .3s, box-shadow .3s;
}
.hero-power .hp-emoji { font-size: calc(var(--hero-w) * .3); line-height: 1; display: block; }
.hero-power .hp-cost { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; display: grid; place-items: center;
  font: 900 12px/1 var(--font-display); color: #fff; background: radial-gradient(circle at 35% 30%, #ffc2e0, var(--hot) 55%, #7a0038); border-radius: 50%; box-shadow: 0 0 0 2px #2a0018; }
.hero-power.available { box-shadow: 0 0 0 3px var(--ready), 0 0 0 5px #0f3a26, 0 0 20px rgba(125, 255, 178, .7); animation: pulse 1.6s ease-in-out infinite; }
.hero-power.used { filter: grayscale(1) brightness(.55); transform: rotateY(180deg) scale(.92); }

/* Scény */
.board { container-type: size; display: flex; justify-content: center; align-items: center; gap: var(--gap); position: relative; padding: 0 4px; }
.board::before { content: ''; position: absolute; inset: 6% 0; border-radius: 22px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px rgba(255, 204, 77, .14), inset 0 0 40px rgba(0, 0, 0, .35); transition: box-shadow .3s, background .3s;
}
.board.drop-ready::before { background: linear-gradient(180deg, rgba(92, 225, 255, .12), rgba(92, 225, 255, .04)); box-shadow: inset 0 0 0 2px rgba(92, 225, 255, .7), 0 0 30px rgba(92, 225, 255, .35); }
.board:empty::after { content: attr(aria-label); font: 700 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: .18em; color: rgba(185, 167, 216, .28); }

.midline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; position: relative; z-index: 6; }
.midline::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 204, 77, .5) 20%, rgba(255, 46, 136, .6) 50%, rgba(255, 204, 77, .5) 80%, transparent); box-shadow: 0 0 12px rgba(255, 46, 136, .6); }
.mid-tools { display: flex; align-items: center; gap: 8px; position: relative; }
.round { font: 800 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-radius: 999px; background: rgba(10, 4, 20, .75); }
.end-turn { position: relative; border: 0; cursor: pointer; min-width: 128px; padding: 12px 18px; border-radius: 999px;
  font: 900 13px/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: #2a1400;
  background: linear-gradient(180deg, #fff1b0, var(--gold) 50%, var(--gold-deep)); box-shadow: 0 4px 0 #7a4a00, 0 8px 20px rgba(0, 0, 0, .5);
  transition: filter .3s, transform .15s;
}
.end-turn:active { transform: translateY(3px); }
.end-turn:disabled { cursor: default; color: #b9a7d8; background: linear-gradient(180deg, #3a2a58, #23163a); box-shadow: 0 4px 0 #120a20; }
.end-turn.nudge { background: linear-gradient(180deg, #d4ffe6, var(--ready) 50%, #1fae62); box-shadow: 0 4px 0 #0c5a30, 0 0 26px rgba(125, 255, 178, .75); animation: pulse 1.2s ease-in-out infinite; }

/* Vějíř karet v ruce */
.hand { position: relative; z-index: 20; }
.hand-slot { position: absolute; left: 50%; bottom: calc(var(--card-w) * -0.5); width: var(--card-w); cursor: grab; touch-action: none;
  transform: translate(calc(-50% + var(--x, 0px) + var(--dx, 0px)), calc(var(--y, 0px) + var(--dy, 0px))) rotate(var(--r, 0deg));
  transform-origin: 50% 130%; transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) {
  .hand-slot:hover:not(.dragging) { transform: translate(calc(-50% + var(--x, 0px)), calc(var(--card-w) * -0.62)) rotate(0deg) scale(1.32); z-index: 100 !important; }
}
body:not(.my-turn) .hand-slot:hover { transform: translate(calc(-50% + var(--x, 0px)), calc(var(--card-w) * -0.45)) rotate(0deg) scale(1.2); }
.hand-slot.dragging { transition: none; cursor: grabbing; pointer-events: none; z-index: 200 !important;
  transform: translate(calc(-50% + var(--x, 0px) + var(--dx, 0px)), calc(var(--y, 0px) + var(--dy, 0px) - 30px)) rotate(0deg) scale(1.12);
}
.hand-slot.dragging .card { filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .6)); }
.hand-slot.will-play .card-frame { box-shadow: 0 0 0 1.4cqw #fff, 0 0 16cqw rgba(92, 225, 255, 1); }
.hand-slot.pending { transform: translate(calc(-50% + var(--x, 0px)), calc(var(--card-w) * -0.62)) rotate(0deg) scale(1.15); z-index: 150 !important; }
body.busy .hand-slot { cursor: default; }

/* Na širokých obrazovkách víc vzduchu */
@media (min-width: 900px) and (min-height: 700px) {
  :root { --gap: 12px; }
  .midline { padding: 10px 0; }
}
@media (max-width: 420px) {
  .hype-gems { max-width: 72px; gap: 2px; }
  .hype-gems i { width: 8px; height: 8px; }
  .end-turn { min-width: 108px; padding: 11px 12px; font-size: 11.5px; }
  .round { display: none; }
}
@media (max-height: 640px) {
  .hero-zone { min-height: calc(var(--hero-w) + 8px); }
}