:root {
  --night: #0d0a1c; --deep: #16102c; --deep-2: #211843; --mauve: #91537c;
  --pink: #ff4fd8; --cyan: #00ffcc; --lila: #b46cff; --gelb: #ffe14f;
  --text: #f7ecf5; --muted: #b9a8c4; --line: rgba(185, 168, 196, .22);
  --radius: 18px;
  --display: 'Titan One', 'Rubik', system-ui, sans-serif;
  --body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --slot-w: min(168px, calc((100vw - 56px) / 3), 18vh);
  --slot-h: calc(var(--slot-w) * 1.413);
  --hand-w: min(108px, 22vw, 12.5vh);
  --log-w: 0px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #2a1650 0%, transparent 60%), radial-gradient(900px 500px at 50% 110%, #1d0f38 0%, transparent 60%), var(--night);
  color: var(--text); font: 15px/1.45 var(--body); min-height: 100vh; min-height: 100dvh;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

/* Kopf */
.top { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: rgba(13, 10, 28, .75); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); }
.brand { font-family: var(--display); font-size: 20px; letter-spacing: .5px; color: var(--text); text-decoration: none; text-shadow: 0 0 12px rgba(255, 79, 216, .45); }
.subtitle { font-family: var(--display); color: var(--cyan); font-size: 13px; opacity: .9; white-space: nowrap; }
.top-actions { margin-left: auto; display: flex; gap: 6px; }
.btn { border: 0; border-radius: 999px; padding: 9px 16px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; transition: transform .12s, filter .12s, opacity .12s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.ghost { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--text); padding: 7px 13px; min-height: 36px; font-size: 14px; }
.btn.ghost:hover { border-color: var(--cyan); }
.btn.pink { background: var(--pink); color: #1a0718; box-shadow: 0 0 16px rgba(255, 79, 216, .35); }
.btn.cyan { background: var(--cyan); color: #032019; box-shadow: 0 0 14px rgba(0, 255, 204, .25); }

/* Tisch */
.table { max-width: 760px; margin: 0 auto; padding: 8px 16px 0; display: flex; flex-direction: column; gap: 6px; min-height: calc(100vh - 53px); min-height: calc(100dvh - 53px); }
.side { display: flex; flex-direction: column; gap: 6px; }
.scorebar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); min-height: 28px; flex-wrap: nowrap; }
.scorebar .who { font-family: var(--display); color: var(--text); font-size: 15px; }
.scorebar .ko { font-family: var(--mono); color: var(--text); }
.scorebar .ko b { font-size: 18px; color: var(--gelb); }
.meter { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; min-width: 40px; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lila), var(--pink)); transition: width .4s; }
.meter.me i { background: linear-gradient(90deg, #00b894, var(--cyan)); }
.stat b { color: var(--text); font-family: var(--mono); }
.energy { display: inline-flex; gap: 3px; align-items: center; }
.energy i { width: 11px; height: 15px; border-radius: 3px; background: rgba(255, 255, 255, .1); border: 1px solid var(--line); }
.energy i.on { background: var(--gelb); border-color: var(--gelb); box-shadow: 0 0 6px rgba(255, 225, 79, .6); }
.energy i.used { background: rgba(255, 225, 79, .18); border-color: rgba(255, 225, 79, .35); }
.energy .num { font-family: var(--mono); color: var(--gelb); margin-left: 4px; font-size: 13px; }

.arena { display: grid; grid-template-columns: repeat(3, var(--slot-w)); justify-content: center; gap: 12px; min-height: var(--slot-h); }
.slot { width: var(--slot-w); height: var(--slot-h); border-radius: 12px; border: 1px dashed var(--line); background: rgba(255, 255, 255, .02); display: grid; place-items: center; color: rgba(185, 168, 196, .4); font-size: 12px; }

.unit { position: relative; width: var(--slot-w); height: var(--slot-h); padding: 0; border: 0; border-radius: 12px; background: var(--deep); cursor: default; display: block; transition: transform .18s, box-shadow .18s, opacity .3s, filter .3s; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.unit .hit-area { position: absolute; inset: 0; padding: 0; border: 0; background: none; border-radius: inherit; cursor: inherit; display: block; width: 100%; height: 100%; }
.unit .hp, .unit .chips, .unit .badges, .unit .pv { pointer-events: none; }
.unit img, .hc-main img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; pointer-events: none; -webkit-user-drag: none; }
.unit .hp { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 18px; border-radius: 9px; background: rgba(13, 10, 28, .85); border: 1px solid rgba(255, 255, 255, .15); overflow: hidden; }
.unit .hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #00b894, var(--cyan)); transition: width .35s; }
.unit .hp i.low { background: linear-gradient(90deg, #ff3d6e, #ff8a3d); }
.unit .hp span { position: relative; display: block; text-align: center; font: 700 11px/16px var(--mono); color: #fff; text-shadow: 0 1px 2px #000; }
.unit .chips { position: absolute; top: 5px; left: 5px; right: 5px; display: flex; justify-content: space-between; gap: 3px; }
.chip { font: 700 10px/1 var(--mono); padding: 3px 5px; border-radius: 6px; background: rgba(13, 10, 28, .82); color: var(--text); border: 1px solid rgba(255, 255, 255, .14); white-space: nowrap; }
.chip.ready { color: #032019; background: var(--cyan); border-color: var(--cyan); }
.chip.shield { color: #1a0f00; background: var(--gelb); border-color: var(--gelb); }
.unit .badges { position: absolute; left: 5px; right: 5px; bottom: 28px; display: flex; justify-content: center; gap: 3px; }
.unit.mine.can-act, .unit:not(.mine) { cursor: pointer; }
.unit.mine.can-act { box-shadow: 0 0 0 2px var(--cyan), 0 0 14px rgba(0, 255, 204, .35); }
.unit.mine.spent { filter: saturate(.55) brightness(.8); }
.unit.selected { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--cyan), 0 0 22px rgba(0, 255, 204, .6) !important; }
.unit.target { cursor: pointer; box-shadow: 0 0 0 2px var(--pink), 0 0 14px rgba(255, 79, 216, .4); }
.unit.target:hover, .unit.target:focus-visible { transform: translateY(3px) scale(1.02); }
.unit.acting { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--gelb), 0 0 20px rgba(255, 225, 79, .55); }
.unit.hit { animation: shake .35s; }
.unit.dead { opacity: 0; transform: scale(.85) rotate(-4deg); filter: grayscale(1); transition: opacity .5s, transform .5s; }
.unit.fresh { animation: drop .35s ease-out; }
.pv { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); background: rgba(13, 10, 28, .9); border: 1px solid var(--pink); border-radius: 10px; padding: 4px 7px; font: 700 12px/1.25 var(--mono); text-align: center; white-space: nowrap; pointer-events: none; box-shadow: 0 0 12px rgba(255, 79, 216, .35); }
.pv .d { font-size: 16px; color: var(--pink); }
.pv .k { color: var(--gelb); }
.pv .c { color: #ff8a3d; }
.pv .e { color: var(--cyan); }
.float { position: absolute; left: 50%; top: 35%; transform: translateX(-50%); font: 700 22px/1 var(--display); color: var(--pink); text-shadow: 0 2px 6px #000; pointer-events: none; animation: rise 1s ease-out forwards; z-index: 5; white-space: nowrap; }
.float.heal { color: var(--cyan); }
.float.ko { color: var(--gelb); font-size: 26px; }
.float.block { color: var(--gelb); font-size: 16px; }
.float.counter { color: #ff8a3d; top: 55%; }
.info-btn { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(13, 10, 28, .78); color: var(--text); font: 700 13px/1 var(--body); cursor: pointer; display: grid; place-items: center; padding: 0; z-index: 3; }
.unit .info-btn { top: auto; bottom: 28px; right: 5px; width: 24px; height: 24px; }

/* Mitte */
.mid { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--radius); background: rgba(33, 24, 67, .55); border: 1px solid var(--line); min-height: 58px; flex-wrap: wrap; }
.turninfo { font-family: var(--display); font-size: 14px; color: var(--cyan); white-space: nowrap; }
.hint { flex: 1 1 180px; margin: 0; font-size: 13px; color: var(--muted); min-width: 0; }
.hint b { color: var(--text); }
.mid-actions { display: flex; gap: 8px; margin-left: auto; }

/* Hand */
.hand-wrap { margin-top: auto; position: sticky; bottom: 0; padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(13, 10, 28, .92) 25%); z-index: 10; }
.hand { display: flex; gap: 8px; overflow-x: auto; padding: 10px 6px 4px 8px; justify-content: safe center; scrollbar-width: thin; }
.hc { position: relative; flex: 0 1 var(--hand-w); min-width: 66px; }
.hc-main { position: relative; display: block; width: 100%; aspect-ratio: 300 / 424; padding: 0; border: 0; border-radius: 9px; background: var(--deep); cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.hc-main:hover { transform: translateY(-4px); }
.hc.too-expensive .hc-main { filter: grayscale(.85) brightness(.6); }
.hc.blocked .hc-main { filter: brightness(.75); }
.hc.selected .hc-main { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--pink), 0 0 20px rgba(255, 79, 216, .5); }
.cost { position: absolute; left: -4px; top: -6px; min-width: 28px; height: 28px; border-radius: 14px; padding: 0 6px; background: var(--gelb); color: #1a0f00; font: 700 14px/28px var(--mono); text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); z-index: 2; }
.cost s { font-size: 10px; opacity: .6; margin-right: 2px; }
.cost.rebate { background: var(--cyan); color: #032019; }
.hc .info-btn { top: -6px; right: -4px; }
.hand-empty { color: var(--muted); font-size: 13px; padding: 30px 0; }

/* Log */
.log { position: fixed; top: 57px; right: 0; bottom: 0; width: min(320px, 86vw); background: rgba(22, 16, 44, .97); border-left: 1px solid var(--line); padding: 12px 14px; overflow-y: auto; transform: translateX(100%); transition: transform .25s; z-index: 15; }
.log.open { transform: none; }
.log h2 { font: 16px var(--display); margin: 0 0 8px; color: var(--cyan); }
.log ol { list-style: none; margin: 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.log li { padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .03); color: var(--muted); }
.log li.turn { background: none; color: var(--cyan); font-family: var(--display); margin-top: 8px; padding-left: 0; }
.log li.op { border-left: 3px solid var(--pink); }
.log li.me { border-left: 3px solid var(--cyan); }
.log li b { color: var(--text); font-weight: 500; }
@media (min-width: 1180px) {
  :root { --log-w: 300px; }
  .log { transform: none; width: var(--log-w); }
  #btn-log { display: none; }
  .table { margin-right: calc(var(--log-w) + max(0px, (100vw - var(--log-w) - 760px) / 2)); margin-left: max(16px, (100vw - var(--log-w) - 760px) / 2); }
}

/* Overlays */
.overlay { position: fixed; inset: 0; background: rgba(6, 4, 14, .78); display: grid; place-items: center; z-index: 50; padding: 16px; backdrop-filter: blur(4px); }
.ov-box { background: linear-gradient(180deg, var(--deep-2), var(--deep)); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; max-width: 560px; width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.ov-box h2 { font: 26px var(--display); margin: 0 0 12px; }
.rules ol { padding-left: 20px; margin: 0 0 12px; display: grid; gap: 8px; font-size: 14px; }
.rules b { color: var(--cyan); font-weight: 500; }
.rules .close { margin-top: 12px; width: 100%; }
.opt { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.card-view { max-width: 820px; display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 18px; align-items: start; }
.card-view img { width: 100%; border-radius: 14px; display: block; }
.card-view .close { grid-column: 1 / -1; }
.ov-box .close { position: sticky; bottom: 0; box-shadow: 0 -8px 16px rgba(22, 16, 44, .9); }
.ov-box .btn.ghost.close { background: var(--deep-2); }
.cv-info h3 { font: 24px var(--display); margin: 0 0 4px; }
.cv-info .tag { display: inline-block; font: 700 11px/1 var(--mono); padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, .08); margin: 0 4px 4px 0; }
.cv-info dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0; font-size: 14px; }
.cv-info dt { color: var(--muted); }
.cv-info dd { margin: 0; font-family: var(--mono); }
@media (max-width: 620px) {
  .card-view { grid-template-columns: 1fr; }
  .card-view img { max-width: 300px; margin: 0 auto; }
}
.end { text-align: center; display: grid; gap: 12px; max-width: 420px; }
.end h2 { font-size: 40px; margin: 0; }
.end.win h2 { color: var(--cyan); text-shadow: 0 0 20px rgba(0, 255, 204, .5); }
.end.lose h2 { color: var(--pink); }
.noscript { text-align: center; padding: 40px; }

@media (max-width: 520px) {
  .subtitle { display: none; }
  .top { padding: 6px 12px; gap: 8px; }
  .brand { font-size: 17px; }
  .btn.ghost { padding: 6px 10px; font-size: 13px; min-height: 34px; }
  .table { padding: 6px 12px 0; gap: 4px; }
  .arena { gap: 8px; }
  .mid { padding: 6px 10px; gap: 6px; min-height: 0; }
  :root { --hand-w: min(108px, 25vw, 13.5vh); }
  .hand { gap: 6px; }
  .hc { min-width: 58px; }
  .turninfo { font-size: 13px; }
  .hint { font-size: 12px; flex-basis: 100%; order: 3; }
  .mid-actions .btn { min-height: 38px; padding: 8px 13px; font-size: 14px; }
  .scorebar { gap: 7px; font-size: 12px; }
  .energy i { width: 9px; height: 13px; }
  .chip { font-size: 9px; padding: 2px 4px; }
  .pv { font-size: 11px; padding: 3px 5px; }
  .pv .d { font-size: 14px; }
}

@keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -5px; } 40% { translate: 5px; } 60% { translate: -3px; } 80% { translate: 3px; } }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1); } }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.95); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }