html { background: #0e0718; touch-action: manipulation; }   /* zabraňuje přiblížení dvojitým ťuknutím; pinch zoom zůstává funkční */
/* Rozvržení: jeden sloupec (max 480px). Styl: kreslená kreslenka ze 30. let (gumové ruce, tlusté obrysy) ve fialové gotice. Samet, kost, zlato, zrno filmu. */
:root {
  --ink: #120a1a;
  --night: #1c1030;
  --v1: #2a1748;
  --v2: #3d2468;
  --v3: #5a3a92;
  --v4: #7a58bd;
  --plum: #6b2a6f;
  --bone: #efe3c8;
  --bone-d: #c9b998;
  --gold: #d8a73a;
  --gold-d: #9a6e1c;
  --mag: #c43a8a;
  --ghost: #5fe0a0;
  --hero: #9b7bff;
  --display: 'Grenze Gotisch', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --body: 'Alegreya Sans', 'Trebuchet MS', system-ui, -apple-system, sans-serif;
  --cell: clamp(40px, min(17vw, 7dvh), 72px);
  --shadow: 0 4px 0 #07030c;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding-block: 12px 32px; padding-inline: 16px; position: relative; min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  color: var(--bone); font: 500 17px/1.35 var(--body);
  -webkit-tap-highlight-color: transparent;
}
/* Pozadí je samostatná pevná vrstva (background-attachment: fixed iOS Safari ignoruje, takže se fialová záře posouvala s obsahem) */
html { overscroll-behavior-y: none; }
html::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--night);
  background-image:
    radial-gradient(90% 55% at 50% 0%, rgba(155,123,255,.28), transparent 70%),
    radial-gradient(130% 70% at 50% 120%, rgba(0,0,0,.75), transparent 70%),
    linear-gradient(var(--night), #0e0718);
}
/* zrno starého filmu a vinětace */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 49; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.55));
}
#app { max-width: 480px; margin: 0 auto; position: relative; z-index: 1; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.linkbtn { background: none; border: 0; padding: 6px 2px; color: var(--bone-d); text-decoration: underline; text-underline-offset: 3px; font-size: .95rem; }
.linkbtn:hover { color: var(--gold); }

/* ---- společné prvky: sametové panely, gotické rámy portrétů ---- */
.panel, .plate, .rules, .enemy, .result {
  background: linear-gradient(var(--v2), var(--v1));
  color: var(--bone);
  border: 3px solid var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow), inset 0 0 0 2px var(--gold-d), inset 0 0 0 5px var(--ink), inset 0 0 0 6px rgba(216,167,58,.45);
}
.portrait {
  display: block; flex: none; overflow: hidden; background: #000;
  border-radius: 50% 50% 2px 2px / 38% 38% 2px 2px;
  border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--ring, var(--gold)), 0 0 0 6px var(--ink);
}
.portrait svg { display: block; width: 100%; height: 100%; }

/* ---- dvorana ---- */
.mast { text-align: center; padding: 14px 0 18px; }
.mast h1 {
  margin: 0; font: 700 clamp(2.5rem, 12.5vw, 3.7rem)/1 var(--display); color: var(--bone); letter-spacing: .05em;
  text-shadow: 0 0 28px rgba(155,123,255,.55), 0 2px 0 #000; text-wrap: balance;
}
.mast h1::after { content: ""; display: block; height: 12px; margin: 14px auto 0; width: 70%; background:
  linear-gradient(90deg, transparent, var(--gold-d) 20%, var(--gold-d) 45%, transparent 45% 55%, var(--gold-d) 55% 80%, transparent) center 6px / 100% 1px no-repeat,
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 2.5 H10.5 L6 10Z' fill='%23d8a73a'/></svg>") center / 12px 12px no-repeat; }
.mast p { margin: 10px 0 0; color: var(--bone-d); font-style: italic; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; }
.panel { padding: 16px; }
.hero-card { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.hero-portrait { width: 88px; height: 100px; margin: 6px; --ring: var(--hero); }
.h-info { display: grid; gap: 3px; min-width: 0; }
.h-name { font: 800 2rem/1 var(--display); }
.h-lvl { color: var(--gold); font-weight: 800; }
.xp { height: 14px; margin-top: 4px; border-radius: 1px; background: var(--ink); border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--gold-d); overflow: hidden; }
.xp i { display: block; height: 100%; background: linear-gradient(#d95aa2, #8c2060); }
.h-xp, .h-stat { font-size: .9rem; color: var(--bone-d); }
.perks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.perks li { display: grid; grid-template-columns: 9.6em minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 2px; background: rgba(0,0,0,.35); border: 2px solid var(--ink); color: #8d7ab0; font-size: .95rem; }
.perks li b { min-width: 0; }
.perks li.on { background: rgba(95,224,160,.1); color: var(--bone); border-color: rgba(95,224,160,.45); }
.perks li.on b { color: var(--ghost); }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 8px; }
.modes button { padding: 10px 6px; border: 3px solid var(--ink); border-radius: 2px; background: var(--v1); font: 700 1.1rem var(--display); color: var(--bone-d); box-shadow: var(--shadow); }
.modes button[aria-pressed="true"] { background: linear-gradient(var(--bone), var(--bone-d)); color: var(--ink); transform: translateY(2px); box-shadow: 0 2px 0 #07030c, 0 0 14px rgba(155,123,255,.5); }
.mode-note { margin: 0 4px 4px; font-size: .95rem; color: var(--bone-d); }
.enemies { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.enemy { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left; padding: 12px; transition: transform .1s; }
.enemy:hover:not(:disabled) { transform: translateY(-2px); }
.enemy:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #07030c, inset 0 0 0 2px var(--gold-d), inset 0 0 0 5px var(--ink); }
.enemy:disabled { filter: grayscale(.9) brightness(.55); }
.enemy .portrait { --ring: var(--acc); width: 58px; height: 68px; margin: 6px; }
.e-body { display: grid; gap: 2px; min-width: 0; }
.e-name { font: 800 1.45rem/1.1 var(--display); }
.e-title { font-size: .9rem; color: var(--bone-d); font-style: italic; }
.e-twist { font-size: .92rem; }
.e-side { display: grid; gap: 8px; justify-items: end; align-self: start; }
.skulls { display: flex; gap: 3px; }
.skulls i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid var(--v4); }
.skulls i.on { background: var(--mag); border-color: #f08cc4; }
.chip { font-size: .8rem; font-weight: 800; padding: 2px 9px; border-radius: 2px; border: 2px solid var(--ink); background: var(--v3); color: var(--bone); white-space: nowrap; }
.chip.done { background: var(--ghost); color: var(--ink); }
.rules { margin-top: 20px; }
.rules summary { padding: 12px 16px; cursor: pointer; font: 800 1.15rem var(--display); }
.rules ol { margin: 0; padding: 0 18px 16px 38px; display: grid; gap: 6px; font-weight: 500; }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* ---- souboj ---- */
.battle { --acc: #8fb04a; }
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 8px; }
.topbar > :first-child { justify-self: start; }
.topbar > :last-child { justify-self: end; }
.topbar .modechip { justify-self: center; text-align: center; white-space: nowrap; }
.modechip { font: 800 .95rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.plate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 12px; }
.plate .portrait { width: 44px; height: 52px; margin: 4px; box-shadow: 0 0 0 2px var(--ring, var(--gold)), 0 0 0 4px var(--ink); }
.plate-e .portrait { --ring: var(--acc); }
.plate-h .portrait { --ring: var(--hero); }
.p-name { min-width: 0; }
.p-name strong { display: block; font: 800 1.3rem/1.1 var(--display); }
.p-name span { font-size: .85rem; color: var(--bone-d); }
.p-score .n {
  display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 10px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2a1748, #0f0818); border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px #0f0818, 0 0 0 4px var(--gold-d), 0 4px 0 3px #07030c; color: var(--gold);
  font: 700 1.7rem/1 var(--display); font-variant-numeric: tabular-nums; transition: transform .15s;
}
.plate.lead .n { transform: scale(1.1); box-shadow: 0 0 0 3px #0f0818, 0 0 0 4px var(--gold-d), 0 0 20px 6px rgba(216,167,58,.55); }
.stage {
  margin: 10px 0; padding: 14px 8px; border-radius: 3px; display: grid; gap: 8px; justify-items: center;
  border: 3px solid var(--ink); box-shadow: var(--shadow), inset 0 0 0 3px rgba(216,167,58,.28), inset 0 0 70px rgba(0,0,0,.65);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-200 -200 400 400' fill='none' stroke='%239b7bff' stroke-opacity='.3' stroke-width='1.6'><circle r='192'/><circle r='170' stroke-dasharray='2 7'/><circle r='186' stroke-width='9' stroke-dasharray='1.4 21.6' stroke-opacity='.22'/><circle r='128'/><circle r='64' stroke-opacity='.2'/><path d='M140 0L-99 99L0 -140L99 99L-140 0L99 -99L0 140L-99 -99Z' stroke='%23d8a73a' stroke-opacity='.26'/><path d='M-34 0a34 34 0 1 0 0.1 0' stroke='%23d8a73a' stroke-opacity='.2'/></svg>") center / min(100%, 440px) no-repeat,
    radial-gradient(85% 55% at 50% 50%, rgba(155,123,255,.22), transparent 75%),
    linear-gradient(#1d1032, #120a22);
}
.grid { display: grid; grid-template-columns: repeat(3, var(--cell)); gap: 8px; padding: 9px 10px; border-radius: 3px; background: #0f0818; border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--gc), 0 4px 0 3px var(--ink); margin-bottom: 3px; }
.grid-e { --gc: var(--acc); }
.grid-h { --gc: var(--hero); }
.col { display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; border-radius: 10px; min-width: 0; }
.cells { display: flex; flex-direction: column; gap: 5px; }
.cell { position: relative; width: var(--cell); height: var(--cell); border-radius: 3px; background: #1d1030; box-shadow: inset 0 0 0 2px #33204f; transition: background .12s, box-shadow .12s; }
.sum { height: 22px; display: flex; align-items: baseline; justify-content: center; gap: 3px; font: 800 1.15rem var(--display); font-variant-numeric: tabular-nums; color: var(--bone-d); }
.sum.hot { color: var(--gold); }
.sum .mult { font-size: .8rem; color: var(--mag); }
.stage[data-await="1"] .pcol:not(.full) { cursor: pointer; }
.stage[data-await="1"] .pcol:not(.full) .cell { box-shadow: inset 0 0 0 2px rgba(155,123,255,.6); }
.stage[data-prev="0"] .pcol[data-c="0"] .cell,
.stage[data-prev="1"] .pcol[data-c="1"] .cell,
.stage[data-prev="2"] .pcol[data-c="2"] .cell { background: #3a2266; box-shadow: inset 0 0 0 3px var(--gold); }
.stage[data-prev="0"] .pcol[data-c="0"] .ghost,
.stage[data-prev="1"] .pcol[data-c="1"] .ghost,
.stage[data-prev="2"] .pcol[data-c="2"] .ghost { opacity: .6; }

/* ---- kostky ---- */
.dw, .ghost { position: absolute; inset: 3px; }
.ghost { opacity: 0; transition: opacity .12s; pointer-events: none; }
.die { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.5)); overflow: visible; }
.side-e .die .pip { filter: drop-shadow(0 0 2px var(--acc)); }
.side-h { --d-body: var(--hero-die, var(--bone)); --d-pip: var(--hero-pip, var(--ink)); --d-rim: var(--hero-rim, #0a0510); --d-pat: var(--hero-pat, none); }
.side-e { --d-body: #1b1229; --d-pip: var(--acc); --d-rim: var(--acc); }
.die .body { fill: var(--d-body); }
.die .pat { fill: var(--d-pat, none); pointer-events: none; }
.die .shade { fill: #000; opacity: .22; }
.die .shine { fill: #fff; opacity: .08; }
.die .pip { fill: var(--d-pip); }
.die .hl { opacity: 0; }
.die .rim { fill: none; stroke: var(--d-rim, var(--ink)); stroke-width: 2.6; }
.die .tint { fill: var(--tintc, none); opacity: 0; }
.combo-2 { --combo: #f0c050; --tintc: #ffe08a; }
.combo-3 { --combo: #f060b8; --tintc: #ff9ad8; }
.combo-2 .tint, .combo-3 .tint { opacity: .4; }
.side-e.combo-2 .tint, .side-e.combo-3 .tint { opacity: .12; }
.combo-2 .die, .combo-3 .die { filter: drop-shadow(0 0 7px var(--combo)) drop-shadow(0 1.5px 1px rgba(0,0,0,.5)); }
@keyframes drop { 0% { transform: translateY(-40px) rotate(-22deg) scale(1.2); opacity: 0; } 55% { transform: translateY(4px) rotate(5deg) scale(.95); opacity: 1; } 75% { transform: translateY(-3px) scale(1.03); } 100% { transform: none; } }
@keyframes shatter { 0% { transform: none; opacity: 1; filter: none; } 30% { transform: scale(1.2) rotate(8deg); filter: brightness(1.8); } 100% { transform: scale(.2) rotate(60deg); opacity: 0; } }
@keyframes tumble { to { transform: rotate(360deg); } }
@keyframes warn { from { box-shadow: 0 0 0 0 rgba(95,224,160,0); } to { box-shadow: 0 0 14px 3px rgba(95,224,160,.9); } }
.dw.new { animation: drop .4s cubic-bezier(.2,.8,.3,1); }
.dw.doomed-now { animation: shatter .55s ease-in forwards; }

/* ---- hodová zóna ---- */
.tray::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; z-index: 0;
  background: linear-gradient(90deg, var(--gold-d), transparent 34%, transparent 66%, var(--gold-d)); opacity: .7; }
.tray > * { position: relative; z-index: 1; }
.tray { position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: calc(var(--cell) + 6px); }
.turn { display: inline-block; font: 800 1.15rem/1 var(--display); padding: 7px 14px; border-radius: 2px; border: 3px solid var(--ink); box-shadow: 0 3px 0 #07030c; color: var(--bone); letter-spacing: .04em; }
.turn.me { background: var(--v4); }
.turn.foe { background: var(--acc); color: var(--ink); }
.t-die { position: relative; width: var(--cell); height: var(--cell); }
.t-die.rolling { animation: tumble .45s linear infinite; }
.t-die .rune { position: absolute; inset: 6px; border-radius: 4px; border: 3px dashed rgba(239,227,200,.35); }
.t-right { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: .88rem; }
.perk { padding: 7px 12px; border-radius: 2px; border: 3px solid var(--ink); background: linear-gradient(var(--bone), var(--bone-d)); color: var(--ink); font: 800 1rem var(--display); box-shadow: 0 3px 0 #07030c; }
.perk b { color: var(--plum); }
.perk:disabled { filter: grayscale(.8) brightness(.6); box-shadow: none; transform: translateY(2px); }
.next { display: flex; align-items: center; gap: 6px; color: var(--bone-d); }
.next .mini { display: block; width: 28px; height: 28px; }
.eventline { min-height: 2.8em; margin: 4px 4px 10px; text-align: center; color: var(--bone); font-size: 1.02rem; text-wrap: balance; }
.eventline em { color: var(--ghost); font-style: italic; }

/* ---- výsledek ---- */
.overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8,4,14,.85); overflow-y: auto; }
.result { width: min(100%, 380px); padding: 24px 18px; text-align: center; display: grid; gap: 12px; }
.result h2 { margin: 0; font: 800 3.2rem/1 var(--display); letter-spacing: .04em; text-shadow: 0 0 22px rgba(216,167,58,.45), 0 2px 0 #000; color: var(--gold); }
.result.lose h2 { color: var(--mag); }
.result.draw h2 { color: var(--bone); }
.r-line { margin: 0; color: var(--bone-d); font-style: italic; }
.r-scores { display: flex; justify-content: center; gap: 22px; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.r-scores b { font: 800 1.8rem/1 var(--display); margin-left: 4px; }
.r-xp { font: 800 1.3rem var(--display); display: grid; gap: 6px; }
.lvlup { color: var(--ghost); }
.unlock { color: var(--gold); font-size: 1.05rem; }
.r-perks { list-style: none; margin: 0; padding: 0; font: 500 .95rem var(--body); color: var(--bone-d); display: grid; gap: 4px; }
.r-perks b { color: var(--ghost); }
.btns { display: grid; gap: 10px; margin-top: 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .25em; text-align: center; line-height: 1.15; padding: 11px 14px; border-radius: 2px; border: 3px solid var(--ink); background: var(--v3); color: var(--bone); font: 800 1.15rem var(--display); box-shadow: var(--shadow); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #07030c; }
.btn.primary { background: linear-gradient(var(--bone), var(--bone-d)); color: var(--ink); }


/* ---- hrdina: třída a přizpůsobení ---- */
.h-class { font-size: .92rem; color: var(--hero); font-weight: 700; letter-spacing: .02em; }
.btn.small { padding: 6px 12px; font-size: 1rem; justify-self: start; margin-top: 6px; }
.mast.tight { padding-bottom: 10px; }
.editor { display: grid; gap: 10px; }
.ed-top { display: flex; gap: 18px; align-items: center; position: sticky; top: 0; z-index: 5; background: var(--v2); padding: 8px 0 12px; border-bottom: 1px solid rgba(216,167,58,.4); }
.hero-portrait.big { width: 80px; height: 92px; }
.field { display: grid; gap: 4px; flex: 1; min-width: 0; font-size: .9rem; color: var(--bone-d); }
.field input { width: 100%; padding: 9px 10px; border-radius: 2px; border: 2px solid var(--ink); background: #0f0818; color: var(--bone); font: 700 1.2rem var(--display); letter-spacing: .02em; box-shadow: inset 0 0 0 1px var(--gold-d); }
.field input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ed-h { margin: 8px 0 0; font: 700 1.1rem var(--display); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
.ed-note { margin: 0; font-size: .9rem; color: var(--bone-d); }
.classes { display: grid; gap: 8px; }
.cls { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 2px; border: 2px solid var(--ink); background: rgba(0,0,0,.3); color: var(--bone); }
.cls[aria-pressed="true"] { border-color: var(--gold); background: rgba(216,167,58,.12); box-shadow: 0 0 14px rgba(216,167,58,.25); }
.cico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold-d); color: var(--gold); background: #0f0818; }
.cico svg { width: 26px; height: 26px; }
.c-body { display: grid; gap: 1px; min-width: 0; }
.c-body b { font: 800 1.2rem/1.1 var(--display); }
.c-body i { font-size: .85rem; color: var(--hero); font-style: italic; }
.c-body span { font-size: .92rem; color: var(--bone-d); }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.sw, .charm, .dsw { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 3px solid var(--ink); background: #0f0818; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--gold-d); }
.sw { background: var(--sw); }
.charm svg { width: 32px; height: 30px; }
.dsw { border-radius: 4px; }
.dsw .side-h { display: block; width: 30px; height: 30px; }
.sw[aria-pressed="true"], .charm[aria-pressed="true"], .dsw[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--gold), 0 0 12px rgba(216,167,58,.6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* náhled: kostky soupeře, které by zanikly */
.stage[data-die="1"][data-prev="0"] .edie[data-c="0"][data-v="1"],
.stage[data-die="1"][data-prev="1"] .edie[data-c="1"][data-v="1"],
.stage[data-die="1"][data-prev="2"] .edie[data-c="2"][data-v="1"],
.stage[data-die="2"][data-prev="0"] .edie[data-c="0"][data-v="2"],
.stage[data-die="2"][data-prev="1"] .edie[data-c="1"][data-v="2"],
.stage[data-die="2"][data-prev="2"] .edie[data-c="2"][data-v="2"],
.stage[data-die="3"][data-prev="0"] .edie[data-c="0"][data-v="3"],
.stage[data-die="3"][data-prev="1"] .edie[data-c="1"][data-v="3"],
.stage[data-die="3"][data-prev="2"] .edie[data-c="2"][data-v="3"],
.stage[data-die="4"][data-prev="0"] .edie[data-c="0"][data-v="4"],
.stage[data-die="4"][data-prev="1"] .edie[data-c="1"][data-v="4"],
.stage[data-die="4"][data-prev="2"] .edie[data-c="2"][data-v="4"],
.stage[data-die="5"][data-prev="0"] .edie[data-c="0"][data-v="5"],
.stage[data-die="5"][data-prev="1"] .edie[data-c="1"][data-v="5"],
.stage[data-die="5"][data-prev="2"] .edie[data-c="2"][data-v="5"],
.stage[data-die="6"][data-prev="0"] .edie[data-c="0"][data-v="6"],
.stage[data-die="6"][data-prev="1"] .edie[data-c="1"][data-v="6"],
.stage[data-die="6"][data-prev="2"] .edie[data-c="2"][data-v="6"] { animation: warn .7s ease-in-out infinite alternate; outline: 2px solid var(--ghost); outline-offset: -1px; border-radius: 5px; }

/* ---- online: přihlášení, fronta, žebříček, účet ---- */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tabs button { padding: 9px 6px; border: 3px solid var(--ink); border-radius: 2px; background: var(--v1); font: 700 1.1rem var(--display); color: var(--bone-d); }
.tabs button[aria-pressed="true"] { background: linear-gradient(var(--bone), var(--bone-d)); color: var(--ink); }
.form { display: grid; gap: 12px; }
.form .field input { font: 600 1.05rem var(--body); letter-spacing: 0; }
.err { margin: 0; padding: 8px 10px; border: 2px solid #8c2060; border-radius: 2px; background: rgba(196,58,138,.14); color: #ffc2e2; font-size: .95rem; }
.note { margin: 0; font-size: .88rem; color: var(--bone-d); }
.or { text-align: center; color: var(--bone-d); font-size: .9rem; margin: 2px 0; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .55; }
.btn.danger { background: #5c1b3d; color: var(--bone); }
.online-box { display: grid; gap: 10px; }
.big-btn { padding: 16px 14px; font-size: 1.5rem; }
.stat-row { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .95rem; color: var(--bone-d); }
.stat-row b { color: var(--gold); font-family: var(--display); font-size: 1.15rem; }
.lb { width: 100%; border-collapse: collapse; font-size: .95rem; }
.lb th { text-align: left; font: 700 .8rem var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-d); padding: 4px 6px; }
.lb td { padding: 7px 6px; border-top: 1px solid rgba(216,167,58,.25); }
.lb td.r { text-align: right; font-variant-numeric: tabular-nums; }
.lb .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; border: 1px solid var(--ink); background: var(--c); }
.lb tr.me td { background: rgba(155,123,255,.16); }
.queue-card { text-align: center; display: grid; gap: 14px; padding: 26px 16px; }
.spinner { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; border: 3px solid rgba(216,167,58,.25); border-top-color: var(--gold); animation: tumble 1s linear infinite; }
.clock { font: 700 1.1rem var(--display); color: var(--bone); font-variant-numeric: tabular-nums; }
.clock.low { color: var(--mag); }
.banner { margin: 0 0 8px; padding: 8px 10px; border: 2px solid var(--gold-d); border-radius: 2px; background: rgba(216,167,58,.12); font-size: .92rem; text-align: center; }
.net, .toast { position: fixed; left: 50%; transform: translateX(-50%); z-index: 70; max-width: min(92vw, 440px); padding: 8px 14px; border-radius: 2px; border: 2px solid var(--ink); font-size: .95rem; text-align: center; }
.net { top: 8px; background: #5c1b3d; color: var(--bone); }
.toast { bottom: 18px; background: var(--bone); color: var(--ink); box-shadow: var(--shadow); }
.net[hidden], .toast[hidden] { display: none; }
.acct-row { display: grid; gap: 4px; }
.acct-row b { font: 700 1.05rem var(--display); color: var(--gold); letter-spacing: .04em; }
a.linkbtn { display: inline-block; }
details.danger summary { cursor: pointer; color: #ffb3d6; }

/* ---------- Mince, obchod, tvorba postavy ---------- */
.coin { width: 1em; height: 1em; margin-left: .22em; vertical-align: -.13em; fill: #e3b341; stroke: #6b4a10; stroke-width: 1.4; flex: none; }
.coin .in { fill: none; stroke: #8a6118; stroke-width: 1.2; }
.coin path { fill: none; stroke: #6b4a10; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.h-coins { font: 800 1.05rem var(--display); color: var(--gold); display: flex; align-items: center; gap: 2px; }
.h-coins span { font: 500 .85rem var(--body); color: var(--bone-d); margin-left: 4px; }
.h-coins.big { font-size: 1.5rem; }
.h-name.sm { font-size: 1.5rem; }
.shop-head { display: grid; gap: 4px; min-width: 0; }
.r-coins { color: var(--gold); white-space: nowrap; }

.row.items { gap: 8px 10px; }
.item { display: grid; justify-items: center; gap: 3px; padding: 4px 2px; min-width: 52px; background: none; border: 0; border-radius: 6px; }
.thumb { width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--ink); background: #0f0818; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--gold-d); }
.thumb svg { width: 40px; height: 38px; }
.thumb .die { width: 100%; height: 100%; filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)); }
.thumb.t-sw { background: var(--sw); }
.thumb.t-die { border-radius: 4px; }
.thumb.t-die { padding: 0; }
.thumb.t-die .side-h { display: block; width: 32px; height: 32px; }
.item[aria-pressed="true"] .thumb { box-shadow: 0 0 0 3px var(--gold), 0 0 12px rgba(216,167,58,.6); }
.item.sel .thumb { box-shadow: 0 0 0 3px #7ee0b4, 0 0 12px rgba(126,224,180,.55); }
.item.locked .thumb { opacity: .72; filter: saturate(.75); }
.price { font-size: .76rem; font-weight: 800; color: var(--gold); min-height: 1.1em; display: inline-flex; align-items: center; }
.price.got { color: var(--bone-d); font-weight: 600; }
.rename { display: flex; gap: 10px; align-items: end; }
.rename .btn.small { margin-top: 0; white-space: nowrap; }
.buybar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 14px -4px 0; padding: 10px 14px;
  background: var(--v2); border: 3px solid var(--gold); border-radius: 2px; box-shadow: 0 -6px 20px rgba(0,0,0,.5); }
.buybar b { font-family: var(--display); }
.buybar .btn.small { margin: 0; }
.need { display: block; color: #ff9db3; font-weight: 700; }

/* ---------- Souboj: vždy se vejde na jednu obrazovku (PC i telefon) ----------
   .stage je "size container": velikost kostky se počítá z místa, které mu zbylo (cqh/cqw),
   takže spodní panel hráče nikdy neujede pod okraj okna. */
body.in-battle { padding-block: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-bottom)); padding-inline: 12px; }
body.in-battle #app { max-width: 540px; }
.battle { display: flex; flex-direction: column; height: calc(100vh - 16px); height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 0; }
.battle > * { flex: none; }
.battle > .stage { flex: 1 1 auto; }
.stage {
  min-height: 0; container-type: size; margin: 8px 0; padding: 8px; gap: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  --cell: clamp(30px, min(calc((100cqh - 190px) / 7), calc((100cqw - 66px) / 3)), 112px);
}
.eventline { min-height: 3em; margin: 0 4px 8px; padding-top: 2px; display: flex; align-items: center; justify-content: center; line-height: 1.25; }
@media (min-height: 1250px) { body.in-battle #app { max-width: 620px; } .stage { --cell: clamp(30px, min(calc((100cqh - 190px) / 7), calc((100cqw - 66px) / 3)), 140px); } }
/* telefon / nízké okno: úspornější rámečky */
@media (max-width: 600px), (max-height: 900px) {
  body.in-battle { padding-inline: 10px; }
  .topbar { margin-bottom: 4px; }
  .topbar .linkbtn { padding: 2px; font-size: .9rem; }
  .modechip { font-size: .85rem; }
  .banner { margin: 2px 0; padding: 4px 8px; font-size: .85rem; }
  .plate { gap: 10px; padding: 3px 8px; }
  .plate .portrait { width: 34px; height: 40px; margin: 3px; }
  .p-name strong { font-size: 1.05rem; }
  .p-name span { font-size: .74rem; }
  .p-score .n { min-width: 38px; height: 38px; padding: 0 6px; font-size: 1.3rem; box-shadow: 0 0 0 2px #0f0818, 0 0 0 3px var(--gold-d), 0 3px 0 2px #07030c; }
  .stage { margin: 5px 0; padding: 5px 6px; gap: 6px; --cell: clamp(30px, min(calc((100cqh - 150px) / 7), calc((100cqw - 52px) / 3)), 112px); }
  .grid { gap: 5px; padding: 5px 7px; margin-bottom: 0; border-width: 2px; box-shadow: 0 0 0 2px var(--gc), 0 3px 0 2px var(--ink); }
  .col, .cells { gap: 3px; }
  .sum { height: 18px; font-size: 1rem; }
  .sum .mult { font-size: .7rem; }
  .tray { gap: 6px; min-height: var(--cell); }
  .turn { font-size: .95rem; padding: 5px 9px; border-width: 2px; }
  .perk { padding: 5px 9px; font-size: .9rem; border-width: 2px; }
  .t-right { gap: 4px; font-size: .8rem; }
  .eventline { font-size: .92rem; margin: 2px 2px 8px; }
  .clock { font-size: .9rem; }
}
@media (max-width: 600px) and (max-height: 680px), (max-height: 600px) {
  .p-name span { display: none; }
  .plate .portrait { width: 30px; height: 36px; }
  .eventline { font-size: .84rem; margin-bottom: 6px; }
}
body:has(.buybar) .toast { bottom: 96px; }

/* e-mail: ověření, výzva, honeypot */
.ok-note { margin: 0; padding: 8px 10px; border: 2px solid #3d8a68; border-radius: 3px; background: rgba(95,224,160,.12); color: #bff2d8; font-size: .95rem; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.mail-banner { margin: 0 0 12px; padding: 8px 12px; border: 2px solid var(--gold-d); border-radius: 3px; background: rgba(216,167,58,.1); font-size: .92rem; }
.mail-banner .linkbtn { display: inline; padding: 0 2px; font-size: inherit; }

/* captcha při registraci */
.captcha .cap-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.cap-img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line, #3a2a55); background: #150f1f; display: block; }
.cap-new { padding: 6px 10px; font-size: 1.2rem; line-height: 1; }
.captcha input { text-transform: uppercase; letter-spacing: .25em; font-family: ui-monospace, monospace; }

/* ---------- Spodní lišta, přátelé, pozvánky, obchod ---------- */
:root { --nav-h: 66px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.has-nav { padding-bottom: calc(var(--nav-h) + 30px + env(safe-area-inset-bottom)); }
.navbar { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 40; width: min(100%, 520px);
  display: grid; grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr; align-items: end; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(#27163f, #120a1f); border: 3px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 18px rgba(0,0,0,.6), inset 0 2px 0 var(--gold-d), inset 0 0 0 1px rgba(216,167,58,.25); }
.navbar[hidden] { display: none; }
.nv { position: relative; display: grid; justify-items: center; gap: 2px; padding: 5px 2px 2px; background: none; border: 0; color: var(--bone-d); min-width: 0; }
.nv:hover { color: var(--bone); }
.nv-ico { position: relative; display: grid; place-items: center; width: 28px; height: 28px; }
.nv-ico svg { display: block; width: 100%; height: 100%; margin: auto; }
.nv-lbl { text-align: center; width: 100%; font: 800 .68rem/1 var(--body); letter-spacing: .05em; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nv[aria-current="page"] { color: var(--gold); }
@media (max-width: 430px) { .nv-lbl { font-size: .6rem; letter-spacing: .015em; } .navbar { padding-inline: 3px; gap: 0; } }
.nv[aria-current="page"]:not(.main)::before { content: ""; position: absolute; top: -9px; left: 22%; right: 22%; height: 4px; border-radius: 0 0 4px 4px; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.nv.main { margin-top: -26px; color: var(--gold); }
.nv.main .nv-ico { width: 62px; height: 62px; padding: 0; border-radius: 50%; color: var(--ink); background: radial-gradient(circle at 35% 30%, var(--bone), var(--bone-d));
  border: 4px solid var(--ink); box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(155,123,255,.5); transition: transform .12s, box-shadow .2s; }
.nv.main:active .nv-ico { transform: translateY(3px); }
.nv.main[aria-current="page"] .nv-ico { box-shadow: 0 0 0 3px var(--gold), 0 0 0 7px rgba(216,167,58,.3), 0 0 26px rgba(155,123,255,.85); }
.badge { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--mag); color: #fff; font: 800 .7rem/14px var(--body); text-align: center; border: 2px solid var(--ink); }
.badge.inl { position: static; display: inline-block; margin-left: 4px; vertical-align: 1px; }
.toast { bottom: 18px; }
body.has-nav .toast { bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }
body.has-nav:has(.buybar) .toast { bottom: calc(var(--nav-h) + 96px + env(safe-area-inset-bottom)); }
body.has-nav .buybar { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

.strip { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 14px 8px 8px; }
.hero-portrait.sm { width: 52px; height: 60px; margin: 4px; }
.s-info { display: grid; gap: 2px; min-width: 0; }
.strip .h-lvl { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .xp { height: 10px; border-width: 2px; margin-top: 2px; }
.class-desc { margin: 10px 2px 0; }
.hero-card + .class-desc + .ed-h { margin-top: 14px; }

/* přátelé */
.friend-add { display: grid; gap: 4px; margin-top: 12px; padding: 12px; }
.fa-row { display: flex; gap: 8px; align-items: center; }
.fa-row input { flex: 1; min-width: 0; }
.fa-row .btn.small { margin: 0; white-space: nowrap; }
.friend-add .err, .friend-add .ok-note { margin: 4px 0 0; }
.friend-add .err:empty, .friend-add .ok-note:empty { display: none; }
.ed-h small { font: 600 .8rem var(--body); color: var(--bone-d); letter-spacing: 0; }
.frs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.fr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px 6px 6px; background: rgba(0,0,0,.3); border: 2px solid var(--ink); border-radius: 3px; }
.fr.offline .fr-av { filter: grayscale(.6); opacity: .75; }
.fr-av { width: 44px; height: 52px; margin: 3px; --ring: var(--gold-d); }
.fr-body { display: grid; min-width: 0; gap: 1px; }
.fr-name { font: 800 1.12rem var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-body .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.pres { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--bone-d); }
.pres i { width: 9px; height: 9px; border-radius: 50%; background: #6b5a85; border: 1px solid var(--ink); }
.fr.online .pres i { background: var(--ghost); box-shadow: 0 0 8px var(--ghost); }
.fr.queue .pres i, .fr.match .pres i { background: var(--gold); }
.fr.online .pres { color: #bff2d8; }
.fr-act { display: grid; justify-items: end; gap: 2px; }
.fr-act .btn.small { margin: 0; }
.fr-act .linkbtn { font-size: .8rem; padding: 2px; }
.empty { margin: 10px 2px; }
.lb .dot.on { box-shadow: 0 0 0 2px var(--ghost); }
.lb .btn.small { margin: 0; padding: 3px 9px; font-size: .9rem; }
.lb td.r .note { font-size: .8rem; }

/* pozvánka do hry */
.inv-back { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; padding: 16px; background: rgba(8,4,14,.8); }
.inv-pop { width: min(92vw, 380px); display: grid; gap: 10px; justify-items: center; text-align: center; padding: 20px 18px 18px; color: var(--bone);
  background: linear-gradient(var(--v2), var(--v1)); border: 3px solid var(--ink); border-radius: 3px;
  box-shadow: var(--shadow), 0 0 40px rgba(155,123,255,.4), inset 0 0 0 2px var(--gold-d), inset 0 0 0 5px var(--ink), inset 0 0 0 6px rgba(216,167,58,.45); animation: popin .24s cubic-bezier(.3,1.5,.5,1); }
.inv-av { width: 84px; height: 98px; --ring: var(--gold); margin: 4px; }
.inv-pop h2 { margin: 0; font: 800 1.7rem var(--display); }
.inv-pop p { margin: 0; }
.inv-bar { width: 100%; height: 8px; border-radius: 4px; background: var(--ink); overflow: hidden; }
.inv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f0cf7a, var(--gold)); transform-origin: left center; animation: invbar linear forwards; }
.inv-pop .btns { width: 100%; grid-template-columns: 1fr 1fr; }
.inv-pop .btn small { font: 700 .8rem var(--body); opacity: .75; }
.inv-wait { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 66; display: flex; gap: 12px; align-items: center; width: max-content; max-width: 92vw; padding: 7px 14px; background: var(--bone); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; box-shadow: var(--shadow); font-size: .95rem; }
.inv-wait span { white-space: nowrap; }
.nv.main .nv-lbl { margin-top: 5px; }
.inv-wait .note { color: #4a3a60; }
.inv-wait .linkbtn { color: #5c1b3d; padding: 2px; }
@keyframes popin { from { transform: scale(.85) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes invbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* obchod: scéna s obchodníkem */
.shop-scene { position: relative; margin: 4px 0 14px; border: 3px solid var(--ink); border-radius: 3px; overflow: hidden; background: #0a0510; box-shadow: var(--shadow), 0 0 0 2px var(--gold-d), 0 0 26px rgba(155,123,255,.25); }
.shop-svg { display: block; width: 100%; height: auto; }
.shop-svg text.sign-t { font: 800 15px 'Grenze Gotisch', Georgia, serif; letter-spacing: .12em; fill: #d8a73a; }
.shop-bubble { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: min(88%, 400px); margin: 0; padding: 7px 12px; text-align: center; background: var(--bone); color: var(--ink); font: 700 .95rem/1.2 var(--body);
  border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 rgba(0,0,0,.55); }
.shop-bubble::before { content: ""; position: absolute; left: 50%; top: -9px; margin-left: -7px; border: 7px solid transparent; border-top: 0; border-bottom: 9px solid var(--ink); }
.shop-bubble::after { content: ""; position: absolute; left: 50%; top: -6px; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--bone); }
.shop-bubble.pop { animation: bubble .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes bubble { from { transform: translateX(-50%) scale(.85); opacity: .2; } to { transform: translateX(-50%); opacity: 1; } }
.shop-svg .flame, .shop-svg .lantern, .shop-svg .sign, .shop-svg .chime, .shop-svg .k-body, .shop-svg .k-head, .shop-svg .k-eyes, .shop-svg .pupils, .shop-svg .k-brow, .shop-svg .jaw,
.shop-svg .die-toss, .shop-svg .tail, .shop-svg .cat-eyes, .shop-svg .sparkle, .shop-svg .glow, .shop-svg .lamp, .shop-svg .lamp-glow, .shop-svg .mote { transform-box: fill-box; }
.shop-svg .flame { transform-origin: 50% 100%; animation: flick 1.1s ease-in-out infinite; }
.shop-svg .glow { transform-origin: 50% 50%; animation: glowp 2.4s ease-in-out infinite; }
.shop-svg .lantern { transform-origin: 50% 0; animation: sway 5.5s ease-in-out infinite alternate; }
.shop-svg .lamp { animation: lampf 2.7s ease-in-out infinite; }
.shop-svg .lamp-glow { animation: glowp 3.1s ease-in-out infinite; }
.shop-svg .sign { transform-origin: 50% 0; animation: sway 4.6s ease-in-out infinite alternate-reverse; --sw: 1.8deg; }
.shop-svg .chime { transform-origin: 50% 0; animation: sway 3.4s ease-in-out infinite alternate; --sw: 4deg; }
.shop-svg .k-body { transform-origin: 50% 100%; animation: breathe 3.8s ease-in-out infinite alternate; transition: transform .3s; }
.shop-svg .k-head { transform-origin: 50% 95%; animation: nod 7s ease-in-out infinite; transition: transform .3s; }
.shop-svg .k-eyes { transform-origin: 50% 50%; animation: blink 5.5s infinite; }
.shop-svg .pupils { transform-origin: 50% 50%; animation: eyeglow 2.2s ease-in-out infinite alternate; transition: transform .25s; }
.shop-svg .k-brow { transition: transform .25s; }
.shop-svg .die-toss { transform-origin: 50% 100%; animation: toss 5.6s ease-in-out infinite; }
.shop-svg .tail { transform-origin: 0% 100%; animation: swish 2.8s ease-in-out infinite alternate; }
.shop-svg .cat-eyes { transform-origin: 50% 50%; animation: blink 6.5s 1.2s infinite; }
.shop-svg .sparkle { transform-origin: 50% 50%; animation: twinkle 2.6s ease-in-out infinite; }
.shop-svg .mote { fill: #ffd987; opacity: 0; animation: rise 7s linear infinite; }
.shop-svg .liquid { animation: lampf 4s ease-in-out infinite; }
/* nálady: eager = chce prodat, sad = nemáš na to, happy = prodáno, talk = mluví */
.shop-scene.eager .k-body { transform: translateY(-3px) scale(1.02); animation: none; }
.shop-scene.eager .pupils { transform: scale(1.25); }
.shop-scene.eager .k-brow { transform: translateY(-3px); }
.shop-scene.sad .k-head { transform: rotate(-7deg) translateY(3px); animation: none; }
.shop-scene.sad .pupils { transform: scale(.7); }
.shop-scene.sad .k-brow { transform: translateY(2px) rotate(-6deg); }
.shop-scene.sad .k-eyes { animation: none; transform: scaleY(.75); }
.shop-scene.happy .k-body { animation: hop .45s ease-out 5; }
.shop-scene.happy .pupils { transform: scale(1.35); }
.shop-scene.happy .sparkle { animation: twinkle .6s ease-in-out infinite; transform: scale(2); }
.shop-scene.happy .jaw { transform: translateY(2.4px); }
.shop-scene.talk .jaw { animation: talk .24s steps(2, jump-none) 6; }
@keyframes flick { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.9, 1.1) skewX(3deg); } 50% { transform: scale(1.06, .93) skewX(-3deg); } 75% { transform: scale(.95, 1.06) skewX(1deg); } }
@keyframes glowp { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes lampf { 0%, 100% { opacity: .85; } 40% { opacity: 1; } 70% { opacity: .78; } }
@keyframes sway { from { transform: rotate(calc(var(--sw, 3.5deg) * -1)); } to { transform: rotate(var(--sw, 3.5deg)); } }
@keyframes breathe { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
@keyframes nod { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.4deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes eyeglow { from { opacity: .82; } to { opacity: 1; } }
@keyframes toss { 0%, 68%, 100% { transform: translateY(0) rotate(0); } 76% { transform: translateY(-17px) rotate(-26deg); } 88% { transform: translateY(2px) rotate(7deg); } 94% { transform: translateY(-1px) rotate(0); } }
@keyframes swish { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@keyframes rise { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .85; } 100% { opacity: 0; transform: translate(14px, -150px); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes talk { from { transform: translateY(0); } to { transform: translateY(2.6px); } }
@media (prefers-reduced-motion: reduce) {
  .shop-svg *, .shop-bubble, .inv-pop { animation: none !important; transition: none !important; }
  .shop-svg .mote { display: none; }
}

.nv.main .nv-ico svg { width: 34px; height: 34px; flex: none; }

/* zarovnání: tlačítka u políček stejně vysoká jako políčko, vše na střed */
.rename { align-items: flex-end; }
.rename .btn.small, .fa-row .btn.small { min-height: 44px; }
.rename .btn.small { align-self: flex-end; }
.item { display: grid; justify-items: center; align-content: start; text-align: center; }
.price { justify-content: center; text-align: center; }
@media (max-width: 480px) { .shop-bubble { width: min(92%, 400px); font-size: .86rem; padding: 6px 10px; bottom: 6px; } }
.row.items { justify-content: center; }
@media (max-width: 380px) { .nv-lbl { font-size: .54rem; letter-spacing: 0; } .nv.main { margin-top: -22px; } }
@media (max-width: 340px) { .nv-lbl { font-size: .48rem; } }

/* postranní prvky v kresbě tarotového lektu */
.shop-bubble { background: rgba(10,5,16,.9); color: var(--bone); border: 1px solid var(--gold); border-radius: 2px; font: italic 600 .95rem/1.25 var(--body); letter-spacing: .01em; box-shadow: 0 0 0 1px #07030c, 0 4px 14px rgba(0,0,0,.6), inset 0 0 0 3px rgba(10,5,16,.9), inset 0 0 0 4px rgba(216,167,58,.35); }
.shop-bubble::before { border-bottom-color: var(--gold); }
.shop-bubble::after { border-bottom-color: rgba(10,5,16,.95); }
.shop-svg .pupils { transform-box: fill-box; }
/* popisky ve spodní liště: mezera za posledním písmenem (letter-spacing) by popisek posouvala doleva */
.nv-lbl { text-indent: .05em; }
@media (max-width: 430px) { .nv-lbl { text-indent: .015em; } }
@media (max-width: 380px) { .nv-lbl { text-indent: 0; } }
.nv.main .nv-lbl { margin-top: 10px; }

/* ---------- Hlubší hra: nabídka dvou kostek, mana, spelly ---------- */
.stage { --cell: clamp(30px, min(calc((100cqh - 190px) / 7), calc((100cqw - 66px) / 3)), 112px); --od: calc(var(--cell) * .82); }
@media (min-height: 1250px) { .stage { --cell: clamp(30px, min(calc((100cqh - 190px) / 7), calc((100cqw - 66px) / 3)), 140px); } }
@media (max-width: 600px), (max-height: 900px) { .stage { --cell: clamp(30px, min(calc((100cqh - 150px) / 7), calc((100cqw - 52px) / 3)), 112px); } }
.tray { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: calc(var(--od) + 16px); }
.offer { display: flex; gap: 8px; align-items: flex-start; justify-content: center; }
.odw { position: relative; display: grid; justify-items: center; gap: 1px; }
.od { position: relative; display: block; width: var(--od); height: var(--od); padding: 0; border: 0; background: none; border-radius: 6px; --ring: transparent; }
.od .od-die { display: block; width: 100%; height: 100%; }
.od.empty { display: grid; place-items: center; }
.od.empty .rune { position: absolute; inset: 6px; border-radius: 4px; border: 3px dashed rgba(239,227,200,.28); }
button.od { cursor: pointer; transition: transform .12s; outline-offset: 3px; }
button.od::after { content: ""; position: absolute; inset: -4px; border-radius: 9px; border: 3px solid transparent; transition: border-color .12s, box-shadow .12s; pointer-events: none; }
button.od.sel { transform: translateY(-3px); }
button.od.sel::after { border-color: var(--gold); box-shadow: 0 0 14px 2px rgba(216,167,58,.55); }
button.od:not(.sel) { opacity: .82; }
button.od:not(.sel):hover { opacity: 1; }
.odn { font: 800 .62rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-d); white-space: nowrap; }
/* barevný kroužek podle typu kostky, ať se poznají i bez čtení */
.od.t-even { --ring: #6ab8ff; } .od.t-odd { --ring: #c6a0ff; } .od.t-gambler { --ring: #ff7a8a; } .od.t-heavy { --ring: #ffb347; }
.od.t-mirror { --ring: #9fe8ff; } .od.t-anchor { --ring: #8fd18f; } .od.t-sniper { --ring: #ff4d6d; }
.od[class*="t-"]:not(.t-std) .od-die { filter: drop-shadow(0 0 0 2px var(--ring)); }
.od[class*="t-"]:not(.t-std)::before { content: ""; position: absolute; inset: -2px; border-radius: 8px; box-shadow: 0 0 0 2px var(--ring); opacity: .9; pointer-events: none; }
.od.t-std::before { display: none; }
.offer.rolling .od-die { animation: tumble .45s linear infinite; }
.nud { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.nud button { pointer-events: auto; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); background: var(--gold); color: var(--ink); font: 900 1.1rem/1 var(--display); box-shadow: 0 2px 0 #07030c; padding: 0; transform: translateY(8px); }
.nud button:disabled { opacity: .35; }
.dw.anchored::after, .ghost.anchored::after { content: ""; position: absolute; inset: -1px; border-radius: 7px; box-shadow: 0 0 0 2px #8fd18f, inset 0 0 6px rgba(143,209,143,.45); pointer-events: none; }
.t-left { min-width: 0; }
.turn { font-size: .95rem; padding: 5px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-right { align-items: flex-end; min-width: 0; }
.wardchip { font: 800 .62rem/1 var(--body); letter-spacing: .05em; text-transform: uppercase; padding: 3px 6px; border-radius: 2px; border: 2px solid var(--ink); white-space: nowrap; }
.wardchip.mine { background: #3d8a68; color: #e6fff3; } .wardchip.foe { background: #8a3d68; color: #ffe6f3; }
.plate.act .portrait { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 2px var(--ring, var(--gold)), 0 0 0 4px var(--ink), 0 0 14px 4px var(--ring, var(--gold)); } }
.p-name .p-mp { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; margin-top: 2px; min-height: 14px; }
.mana { display: inline-flex; gap: 3px; flex: none; }
.mana i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #6fb7ff; background: transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.mana i.on { background: radial-gradient(circle at 35% 30%, #d6f0ff, #3f9bff 70%); box-shadow: 0 0 6px 1px rgba(95,170,255,.7); }
.sp-chip { font: 800 .6rem/1 var(--body) !important; letter-spacing: .05em; text-transform: uppercase; padding: 2px 5px; border-radius: 2px; background: rgba(155,123,255,.25); border: 1px solid var(--v4); color: var(--bone) !important; white-space: nowrap; }
.sp-chip.used { opacity: .4; text-decoration: line-through; }
.spellbar { display: flex; justify-content: center; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
.sp { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 12px; border-radius: 2px; border: 3px solid var(--ink); background: var(--v1); color: var(--bone-d); font: 800 1rem var(--display); box-shadow: 0 3px 0 #07030c; min-height: 40px; }
.sp .sp-c, .scard .sp-c { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d6f0ff, #3f9bff 75%); color: #06223d; font: 900 .85rem/1 var(--display); }
.sp.ready { background: linear-gradient(var(--bone), var(--bone-d)); color: var(--ink); }
.sp.armed { outline: 3px solid var(--gold); outline-offset: 2px; }
.sp.used { opacity: .4; text-decoration: line-through; }
.sp[aria-disabled="true"]:not(.used) { opacity: .6; }
/* odstřelovač: zvýraznění ohrožených kostek ve všech sloupcích */
.stage[data-snipe="1"][data-die="1"] .edie[data-v="1"], .stage[data-snipe="1"][data-die="2"] .edie[data-v="2"], .stage[data-snipe="1"][data-die="3"] .edie[data-v="3"],
.stage[data-snipe="1"][data-die="4"] .edie[data-v="4"], .stage[data-snipe="1"][data-die="5"] .edie[data-v="5"], .stage[data-snipe="1"][data-die="6"] .edie[data-v="6"] { animation: warn .7s ease-in-out infinite alternate; outline: 2px solid var(--ghost); outline-offset: -1px; border-radius: 5px; }
.stage[data-snipe="1"] .edie.anchored { animation: none; outline: 0; }
.r-dust { color: #8fd0ff; } .drop { margin-top: 6px; font-size: .95rem; } .drop.new b { color: var(--gold); } .drop.dupe { color: var(--bone-d); }
.r-cap { margin-top: 6px; font-size: .82rem; color: var(--bone-d); }
.r-crypt { margin-top: 8px; display: grid; gap: 4px; justify-items: center; }
.hearts { display: inline-flex; gap: 4px; }
.heart { width: 22px; height: 20px; fill: transparent; stroke: #7b3a56; stroke-width: 2; } .heart.on { fill: #e0425f; stroke: #ffb3c1; filter: drop-shadow(0 0 4px rgba(224,66,95,.6)); }

/* ---------- Hub: čtyři režimy, denní limit ---------- */
.modes.four { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.modes.four button {
  padding: 10px 1px; font-size: clamp(.56rem, calc((100vw - 56px) / 27), 1rem); min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: clip; letter-spacing: -.01em;
}
.mode-note.daily { margin-top: -4px; font-size: .8rem; opacity: .85; }
.online-box .btn.wide { margin-top: 8px; }
.note.small { font-size: .8rem; margin: 6px 0; }

/* ---------- Hero: podzáložky, sada, sbírka ---------- */
.subtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 12px; }
.subtabs button { padding: 8px 4px; border: 3px solid var(--ink); border-radius: 2px; background: var(--v1); color: var(--bone-d); font: 800 1.02rem var(--display); box-shadow: var(--shadow); }
.subtabs button[aria-selected="true"] { background: linear-gradient(var(--bone), var(--bone-d)); color: var(--ink); transform: translateY(2px); box-shadow: 0 2px 0 #07030c; }
.deck-box { margin-bottom: 12px; }
.budget { display: grid; gap: 6px; font-size: .98rem; } .budget b { color: var(--gold); font: 800 1.2rem var(--display); } .budget b.over { color: #ff7b93; } .budget small { color: var(--bone-d); }
.meter { height: 10px; border-radius: 6px; border: 2px solid var(--ink); background: #120a1f; overflow: hidden; } .meter i { display: block; height: 100%; background: linear-gradient(90deg, #7a58bd, var(--gold)); }
.dslots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.dslot { display: grid; justify-items: center; gap: 3px; padding: 8px 2px 6px; border-radius: 3px; border: 3px solid var(--ink); background: #1d1030; color: var(--bone); min-width: 0; }
.dslot.sel { border-color: var(--gold); background: #3a2266; box-shadow: 0 0 12px rgba(216,167,58,.45); }
.dthumb { width: 40px; height: 40px; flex: none; }
.dn { font: 800 .72rem/1.1 var(--body); text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; } .dc { font-size: .66rem; color: var(--bone-d); }
.dcards, .scards { display: grid; gap: 6px; }
.dcard { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "t n" "t c" "t d"; column-gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 3px; border: 3px solid var(--ink); background: #1d1030; }
.dcard .dthumb { grid-area: t; } .dcard .dn { grid-area: n; text-align: left; font-size: .95rem; } .dcard .dc { grid-area: c; font-size: .78rem; } .dcard .dd2 { grid-area: d; font-size: .8rem; color: var(--bone-d); }
.scard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 3px; border: 3px solid var(--ink); background: #1d1030; }
.scard.on { border-color: var(--ghost); background: rgba(95,224,160,.1); } .scard .sn { font: 800 1rem var(--display); } .scard .dd2 { grid-column: 1 / -1; font-size: .8rem; color: var(--bone-d); }
.dustline { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .dustline b { color: #8fd0ff; font: 800 1.3rem var(--display); } .dustline small { color: var(--bone-d); font-size: .78rem; }
.clist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ccard { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 3px; border: 3px solid var(--ink); background: #1d1030; }
.ccard.miss { opacity: .92; } .ccard.miss .dthumb { filter: grayscale(.7) brightness(.8); }
.ccard .cb { display: grid; gap: 1px; min-width: 0; font-size: .82rem; color: var(--bone-d); } .ccard .cb b { color: var(--bone); font: 800 1rem var(--display); }
.rar { font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .r-common { color: var(--bone-d); } .r-uncommon { color: #6ab8ff; } .r-rare { color: var(--mag); }
.ccard .btn.small { margin: 0; white-space: nowrap; }
.spellico { display: grid; place-items: center; font-size: 1.5rem; color: #9fd0ff; border: 2px solid #3f6aa0; background: #10203a; border-radius: 6px; }
.dthumb.od { cursor: default; }

/* ---------- Crypta ---------- */
.crypt-box { margin-bottom: 12px; display: grid; gap: 8px; }
.charges { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--bone-d); }
.pips { display: inline-flex; gap: 5px; } .pips i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--gold-d); } .pips i.on { background: radial-gradient(circle at 35% 30%, #fff1c2, var(--gold)); box-shadow: 0 0 8px rgba(216,167,58,.6); }
.rulelist { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--bone-d); display: grid; gap: 2px; }
.crypt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.floor { font: 800 1.1rem var(--display); color: var(--gold); }
.modchip { font: 800 .72rem var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; background: rgba(196,58,138,.25); border: 1px solid var(--mag); }
.found { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip { font-size: .78rem; font-weight: 800; padding: 3px 8px; border-radius: 2px; border: 2px solid var(--ink); background: var(--v3); } .fchip.spell { background: #1d4a7a; } .fchip em { color: var(--ghost); font-style: normal; margin-left: 3px; }
.gatefig { margin: -6px -6px 4px; } .cgate { display: block; width: 100%; height: auto; border-radius: 2px; }
.cgate .fl { transform-box: fill-box; transform-origin: 50% 100%; animation: flick .8s ease-in-out infinite alternate; } .cgate .torch:nth-of-type(2) .fl { animation-delay: .3s; }
.cmapbox { margin: 0 0 12px; border: 3px solid var(--ink); border-radius: 3px; box-shadow: var(--shadow); background: #0c0716; }
.cmapwrap { position: relative; line-height: 0; }
.cmapsvg { display: block; width: 100%; height: auto; }
.cmapsvg .rd { stroke: #d9ccb0; stroke-opacity: .3; stroke-width: 1.3; stroke-dasharray: 2 4; }
.cmapsvg .rd.done { stroke: var(--gold); stroke-opacity: .95; stroke-width: 2.4; stroke-dasharray: none; filter: drop-shadow(0 0 2px rgba(216,167,58,.7)); }
.cmapsvg .rd.avail { stroke: #ffd86a; stroke-opacity: .95; stroke-width: 2; stroke-dasharray: 5 4; animation: roadflow 1s linear infinite; }
@keyframes roadflow { to { stroke-dashoffset: -9; } }
.cmapsvg .nl { font: 800 6.6px/1 var(--body, sans-serif); letter-spacing: .09em; text-transform: uppercase; fill: #bfb09a; paint-order: stroke; stroke: #0a0510; stroke-width: 2.4px; stroke-linejoin: round; }
.cmapsvg .nl.here { fill: #ffe9a8; } .cmapsvg .nl.visited { fill: #5fe0a0; } .cmapsvg .nl.missed, .cmapsvg .nl.far { opacity: .45; }
.cmapsvg .nd.here .ring { transform-box: fill-box; transform-origin: center; animation: nodering 1.5s ease-in-out infinite; }
@keyframes nodering { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: .45; } }
.cmapsvg .pawn { animation: pawnbob 1.4s ease-in-out infinite; }
@keyframes pawnbob { 50% { transform: translateY(-3px); } }
.cnb { position: absolute; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: default; -webkit-tap-highlight-color: transparent; }
.cnb.here { cursor: pointer; } .cnb:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .cmapsvg .rd.avail, .cmapsvg .nd.here .ring, .cmapsvg .pawn, .cgate .fl { animation: none !important; } }
.clog { margin: 0 0 8px; padding: 0; list-style: none; text-align: center; font-size: .88rem; color: var(--bone-d); }
.abandon { display: block; margin: 8px auto 0; }
.pendbox .btn { margin-top: 4px; }
.kcards { display: grid; gap: 6px; }
.kcard { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 3px; border: 3px solid var(--ink); background: #1d1030; }
.kcard:hover, .kcard:focus-visible { border-color: var(--gold); } .kcard .cb { display: grid; gap: 1px; font-size: .82rem; color: var(--bone-d); } .kcard b { color: var(--bone); font: 800 1rem var(--display); } .kcard .new { color: var(--ghost); font-style: normal; font-weight: 800; }
.kcard em { font-style: normal; font-size: .75rem; }
.ed-h.tight { margin-top: 0; }

.r-rw { font: 800 1.2rem var(--display); line-height: 1.5; }
.r-rw .r-coins, .r-rw .r-dust { white-space: nowrap; }
@media (max-width: 520px) {
  .ccard { grid-template-columns: 44px minmax(0, 1fr); }
  .ccard > :last-child:not(.cb):not(.dthumb) { grid-column: 1 / -1; }
  .ccard .btn.small { width: 100%; }
}
@media (max-height: 620px) { .stage { --cell: clamp(22px, min(calc((100cqh - 150px) / 7), calc((100cqw - 52px) / 3)), 112px); } }

/* ---- v2: manové krystaly, popisky kostek, bez ořezávání ---- */
.mana { display: inline-flex; gap: 4px; flex: none; align-items: center; padding: 2px 3px; filter: drop-shadow(0 0 3px rgba(95,170,255,.5)); }
.mana i { position: relative; display: block; width: 13px; height: 17px; border: 0; border-radius: 0; box-shadow: none; background: #6a5aa8; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mana i::after { content: ""; position: absolute; inset: 2.5px 2px; background: #140a24; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mana i.on { background: #d4eeff; box-shadow: none; }
.mana i.on::after { background: linear-gradient(115deg, #e6f6ff 0 30%, #62b0ff 31% 63%, #2a62d0 64%); }
.p-name .p-mp { overflow: visible; padding: 1px 0; gap: 8px; }
.p-mp .sp-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sp .sp-c, .scard .sp-c { width: 22px; height: 26px; border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(115deg, #e6f6ff 0 30%, #62b0ff 31% 63%, #2a62d0 64%); color: #04183a; font: 900 .8rem/1 var(--display); padding-top: 1px; }
.mana-cost { filter: none; }
.offer { gap: 16px; padding: 4px 6px 2px; }
.odw { gap: 7px; }
.odw.t-even { --ring: #6ab8ff; } .odw.t-odd { --ring: #c6a0ff; } .odw.t-gambler { --ring: #ff7a8a; } .odw.t-heavy { --ring: #ffb347; }
.odw.t-mirror { --ring: #7fdcff; } .odw.t-anchor { --ring: #8fd18f; } .odw.t-sniper { --ring: #ff4d6d; } .odw.t-std { --ring: #b9a98c; }
.odn { display: inline-block; font: 800 .6rem/1 var(--body); letter-spacing: .08em; padding: 3px 6px 2px; border-radius: 2px; border: 1px solid var(--ring, #b9a98c); background: rgba(10,4,20,.72); color: var(--ring, var(--bone-d)); max-width: calc(var(--od) + 10px); overflow: hidden; text-overflow: ellipsis; }
.od.t-even { --d-pip: #1f5fa8; } .od.t-odd { --d-pip: #6a3fc4; } .od.t-gambler { --d-pip: #c0243c; } .od.t-heavy { --d-pip: #b85c00; }
.od.t-mirror { --d-pip: #137b9c; } .od.t-anchor { --d-pip: #2a7a38; } .od.t-sniper { --d-pip: #b8112e; }
.od[class*="t-"]:not(.t-std)::before { inset: -3px; border-radius: 9px; box-shadow: 0 0 0 2px var(--ring), 0 0 8px 0 var(--ring); }
.nud button { transform: translateY(10px); }
.stage { overflow: visible; }
.odn { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; letter-spacing: .05em; font-size: .58rem; padding: 3px 5px 2px; }
.offer { gap: 20px; }
@media (max-width: 600px) and (max-height: 680px), (max-height: 600px) {
  .p-name span.p-mp { display: flex; margin-top: 1px; }
  .p-name span.p-mp .mana i { width: 11px; height: 14px; }
}
@media (max-width: 360px) {
  .turn { font-size: .72rem; padding: 4px 6px; }
  .offer { gap: 12px; }
  .odn { font-size: .52rem; padding: 2px 4px 1px; }
  .tray { gap: 4px; }
}

/* ---- v3: speciální kostky poznáš podle barvy; název jen u vybrané / při najetí ---- */
.od.t-even { --d-body: #bfe0ff; --d-pip: #124f93; --d-rim: #3d8fe0; }
.od.t-odd { --d-body: #dccaff; --d-pip: #4f2bb0; --d-rim: #8a5be0; }
.od.t-gambler { --d-body: #ffc2cb; --d-pip: #a3122e; --d-rim: #e0425b; }
.od.t-heavy { --d-body: #ffd08a; --d-pip: #8f4300; --d-rim: #e08a1c; }
.od.t-mirror { --d-body: #d9f7ff; --d-pip: #0b6d8c; --d-rim: #55c6e8; }
.od.t-anchor { --d-body: #bfe3b4; --d-pip: #1d5f2a; --d-rim: #4cae5c; }
.od.t-sniper { --d-body: #ff8c9c; --d-pip: #6e0017; --d-rim: #e0243f; }
.offer { gap: 14px; }
.odw { gap: 0; }
.odn { position: absolute; left: 50%; top: calc(var(--od) + 7px); transform: translateX(-50%); z-index: 3; opacity: 0; pointer-events: none; transition: opacity .12s; }
.odw:hover .odn, .odw:focus-within .odn { opacity: 1; }
.odw:has(.od.sel):not(.t-std) .odn { opacity: 1; }

/* ---- v4: kouzla jako ikony v liště hráče, žádný extra řádek ---- */
.spks { display: inline-flex; gap: 5px; flex: none; align-items: center; }
.spk { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 4px; border: 2px solid var(--ink); background: #2a1948; color: #8d7fb8; box-shadow: 0 2px 0 #07030c; cursor: pointer; }
.spk .spi { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.spk .spk-c { position: absolute; right: -6px; bottom: -7px; width: 15px; height: 18px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(115deg, #e6f6ff 0 30%, #62b0ff 31% 63%, #2a62d0 64%); color: #04183a; font: 900 .6rem/1 var(--display); padding-top: 1px; }
.spk.ready { background: linear-gradient(var(--bone), var(--bone-d)); color: var(--ink); }
.spk.armed { outline: 3px solid var(--gold); outline-offset: 2px; transform: translateY(-2px); }
.spk.used { opacity: .35; } .spk.used::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 2px solid currentColor; transform: rotate(-35deg); }
.spk[aria-disabled="true"]:not(.used):not(.ready) { opacity: .6; }
.spk.mini { width: 20px; height: 20px; border-width: 1px; border-radius: 3px; box-shadow: none; background: rgba(155,123,255,.22); color: var(--bone); cursor: default; }
.spk.mini .spi { width: 14px; height: 14px; stroke-width: 2; }
.spk.mini.used { opacity: .35; }
.plate-h .spks { margin: 0 12px 0 6px; }
.plate-h .p-name { flex: 1 1 auto; min-width: 0; }
.p-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 360px) { .spk { width: 32px; height: 32px; } .spk .spi { width: 19px; height: 19px; } .plate-h .spks { margin: 0 10px 0 4px; gap: 4px; } }
.plate-h { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.plate-h .spks { margin: 0; }
@media (max-width: 600px) { .plate-h { gap: 8px; } }
.plate-h .spks { margin-right: 8px; gap: 8px; }
.plate-h .spk .spk-c { right: -7px; }
@media (max-width: 360px) { .plate-h .spks { margin-right: 6px; gap: 7px; } }

/* ---- v5: kostky ve stejné výšce, název vybrané kostky vycentrovaný pod dvojicí ---- */
.offer { position: relative; }
button.od.sel { transform: none; }
button.od:not(.sel) { opacity: .9; }
.odnames { position: absolute; left: 50%; top: calc(var(--od) + 14px); transform: translateX(-50%); display: grid; justify-items: center; pointer-events: none; z-index: 3; }
.odnames .odn { grid-area: 1 / 1; position: static; transform: none; opacity: 0; --ring: #b9a98c; }
.odnames .odn.t-even { --ring: #6ab8ff; } .odnames .odn.t-odd { --ring: #c6a0ff; } .odnames .odn.t-gambler { --ring: #ff7a8a; } .odnames .odn.t-heavy { --ring: #ffb347; }
.odnames .odn.t-mirror { --ring: #7fdcff; } .odnames .odn.t-anchor { --ring: #8fd18f; } .odnames .odn.t-sniper { --ring: #ff4d6d; }
.odnames .odn.on:not(.std) { opacity: 1; }
.offer:has(.odw:hover) .odnames .odn { opacity: 0; }
.offer:has(.odw[data-k="0"]:hover) .odnames .odn[data-k="0"], .offer:has(.odw[data-k="1"]:hover) .odnames .odn[data-k="1"] { opacity: 1; }
.offer.nudging .odnames { display: none; }
.odnames { top: calc(var(--od) + 9px); }
.odnames .odn { font-size: .54rem; padding: 2px 5px 1px; line-height: 1.1; }
@media (max-width: 360px) { .odnames .odn { font-size: .5rem; } }

/* ---- záchranný kód, nastavení hesla v Account ---- */
.rec-code { margin: 12px 0 6px; padding: 14px 8px; text-align: center; font: 800 clamp(.95rem, 5vw, 1.5rem) var(--display); letter-spacing: .06em; white-space: nowrap; color: var(--gold); background: var(--ink); border: 3px solid var(--gold-d); border-radius: 3px; user-select: all; -webkit-user-select: all; }
details.acct-sec summary { cursor: pointer; color: var(--bone); }
.item.lvlock .thumb { opacity: .5; filter: grayscale(.85) brightness(.85); }
.price.lv { color: var(--bone-d); font-weight: 700; }
/* ---- kapsa (spell Stash) ---- */
/* ---- oznámení od správce ---- */
.announce { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: grid; gap: 2px; padding-top: env(safe-area-inset-top); pointer-events: none; }
.announce[hidden] { display: none; }
.ann { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; background: var(--gold); color: var(--ink); border-bottom: 3px solid var(--ink); font: 700 .9rem/1.25 var(--body); box-shadow: 0 3px 0 rgba(7,3,12,.55); }
.ann-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ann-t b { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }
.ann-x { flex: none; width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 50%; background: var(--bone); color: var(--ink); font: 900 1.2rem/1 var(--display); padding: 0; }

/* ---------- Zapojení: Today, úkoly, série, Denní souboj, pohár, úspěchy ---------- */
.ttl { font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .03em; color: var(--gold); border: 1px solid var(--gold-d); border-radius: 2px; padding: 0 5px; margin-left: 4px; white-space: nowrap; }
.h-ttl { font: 800 .85rem var(--body); color: var(--gold); letter-spacing: .04em; margin: -2px 0 2px; }
.tabs.three { grid-template-columns: repeat(3, 1fr); }
.tabs.three button { font-size: 1rem; }
.subtabs { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.subtabs button { font-size: .95rem; padding: 8px 2px; }
.tight { margin-top: 4px; }
.today { margin-top: 12px; padding: 10px 14px 14px; }
.today > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; padding: 4px 0; }
.today > summary::-webkit-details-marker { display: none; }
.today > summary::after { content: "▾"; color: var(--bone-d); margin-left: 4px; transition: transform .15s; }
.today:not([open]) > summary::after { transform: rotate(-90deg); }
.td-t { font: 700 1.3rem var(--display); color: var(--bone); flex: 1; }
.streak { display: inline-flex; align-items: center; gap: 4px; font: 800 .9rem var(--body); color: var(--bone-d); }
.streak .flame { width: 20px; height: 20px; fill: #5a4a78; stroke: var(--ink); stroke-width: 1.2; }
.streak.hot { color: #ffb347; }
.streak.hot .flame { fill: #ff8a2a; filter: drop-shadow(0 0 5px rgba(255,138,42,.7)); }
.quests, .goals ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.q { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "t n rw" "b b b"; gap: 3px 8px; align-items: center; font-size: .95rem; }
.q-t { grid-area: t; }
.q-n { grid-area: n; font-weight: 800; color: var(--bone-d); font-size: .85rem; }
.q-bar { grid-area: b; display: block; height: 8px; border-radius: 4px; background: var(--ink); border: 2px solid var(--ink); overflow: hidden; }
.q-bar i { display: block; height: 100%; background: linear-gradient(var(--v4), var(--v3)); }
.q-rw { grid-area: rw; font: 800 .8rem var(--body); color: var(--gold); white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; justify-self: end; }
.goals .q-rw, .ach-r .q-rw { grid-area: auto; }
.q-rw .coin { width: 14px; height: 14px; }
.q.done .q-t { text-decoration: line-through; color: var(--bone-d); }
.q.done .q-bar i { background: var(--ghost); }
.q.done .q-n { color: var(--ghost); }
.q-bonus { margin: 8px 0 0; font-size: .85rem; color: var(--bone-d); }
.q-bonus.done { color: var(--ghost); }
.dd { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px; border: 3px solid var(--ink); border-radius: 3px; background: var(--v1); }
.dd .portrait { width: 44px; height: 52px; flex: none; margin: 0; --ring: var(--gold); }
.dd-b { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: .95rem; }
.dd-b b { font: 700 1.1rem var(--display); }
.dd-rule { font-size: .82rem; color: var(--bone-d); }
.dd-st { font-size: .85rem; color: var(--gold); }
.dd-st b { font-family: var(--display); font-size: 1rem; }
.cupline { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; width: 100%; margin-top: 10px; padding: 8px 12px; text-align: left; color: var(--bone); border: 3px solid var(--gold-d); border-radius: 3px; background: linear-gradient(#3a2554, #281844); }
.cupline b { font: 700 1.05rem var(--display); color: var(--gold); }
.cupline span:not(.go) { font-size: .82rem; color: var(--bone-d); grid-column: 1; }
.cupline .go { grid-column: 2; grid-row: 1 / span 2; font-size: 1.6rem; color: var(--gold); }
.goals { margin-top: 14px; padding-top: 10px; border-top: 2px dashed rgba(201,185,152,.25); }
.goals h3 { margin: 0; font: 700 1.05rem var(--display); }
.goals h3 small { font: 700 .8rem var(--body); color: var(--bone-d); }
.goals li { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.goals li .q-rw { margin-left: auto; }
.goals .tick { flex: none; width: 18px; height: 18px; border: 2px solid var(--bone-d); border-radius: 3px; text-align: center; font: 800 .8rem/14px var(--body); color: var(--ink); }
.goals li.done { color: var(--bone-d); }
.goals li.done .tick { background: var(--ghost); border-color: var(--ghost); }
.pushask { display: grid; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 2px solid var(--v4); border-radius: 3px; background: rgba(122,88,189,.18); font-size: .9rem; }
.pushask .btns { grid-template-columns: auto auto; justify-content: start; align-items: center; margin: 0; }
.achs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ach { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 3px; background: var(--v1); }
.ach.got { background: rgba(95,224,160,.1); border-color: #2f6b52; }
.ach-i { width: 24px; height: 24px; border: 2px solid var(--bone-d); border-radius: 50%; text-align: center; font: 800 .85rem/20px var(--body); color: var(--ink); }
.ach.got .ach-i { background: var(--ghost); border-color: var(--ghost); }
.ach-b { display: grid; gap: 2px; min-width: 0; }
.ach-b b { font: 700 1.02rem var(--display); }
.ach-b small { font-size: .82rem; color: var(--bone-d); }
.ach-b .q-bar { margin-top: 3px; }
.ach-r { display: grid; justify-items: end; gap: 2px; }
.wk { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.wk li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 3px; background: var(--v1); font-size: .95rem; }
.wk li.me { background: rgba(216,167,58,.16); outline: 2px solid var(--gold-d); }
.wk .n { font: 700 1rem var(--display); color: var(--bone-d); text-align: center; }
.wk .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk b { font: 700 1.1rem var(--display); color: var(--gold); }
.invite { margin-bottom: 0; }
.invrow { display: flex; gap: 6px; margin-top: 8px; }
.invrow input { flex: 1; min-width: 0; padding: 7px 8px; border: 2px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--bone); font: .85rem var(--body); }
.r-news { list-style: none; margin: 10px 0 0; padding: 8px 10px; display: grid; gap: 4px; text-align: left; border: 2px solid var(--gold-d); border-radius: 3px; background: rgba(216,167,58,.12); font-size: .88rem; color: var(--bone); }
.fr-body .ttl { align-self: flex-start; margin: 2px 0 0; }

.ach-rw { color: var(--gold) !important; }
.ach-b .q-bar { grid-area: auto; }

/* ---------- Challenges + dlaždice herních režimů ---------- */
.navbar { grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr 1fr; }
.badge.pulse { animation: badgepulse 1.6s ease-in-out infinite; }
@keyframes badgepulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(196,58,138,.7); } 50% { box-shadow: 0 0 0 6px rgba(196,58,138,0); } }
@media (max-width: 430px) { .nv-lbl { font-size: .54rem; letter-spacing: 0; } .nv-ico { width: 26px; height: 26px; } }
.streakbox { margin-top: 10px; text-align: center; }
.streak.big { font-size: 1.25rem; justify-content: center; }
.streak.big .flame { width: 30px; height: 30px; }
.trophyline { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; color: var(--bone); margin-top: 8px; }
.trophyline small { display: block; color: var(--bone-d); }
.trophyline .go { font-size: 1.6rem; color: var(--gold); }
.goals { margin-top: 0; padding-top: 0; border-top: 0; }
.modetiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 10px; }
.mtile { position: relative; display: grid; justify-items: center; gap: 1px; padding: 10px 6px 10px; border: 3px solid var(--ink); border-radius: 3px; background: var(--v1); color: var(--bone-d); box-shadow: var(--shadow); transition: transform .1s; }
.mtile:active { transform: translateY(2px); box-shadow: 0 2px 0 #07030c; }
.mtile .mi { width: 52px; height: 52px; }
.mt-n { font: 700 1.15rem var(--display); color: var(--bone); }
.mt-s { font: 700 .72rem var(--body); letter-spacing: .06em; text-transform: uppercase; }
.mtile:hover .mi, .mtile:focus-visible .mi { color: var(--gold); }
.mtile:active { background: linear-gradient(var(--bone), var(--bone-d)); color: #4a2f86; }
.mtile:active .mt-n { color: var(--ink); } .mtile:active .mt-s { color: #5a4a78; }
.modehead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 0 8px; }
.modehead h1 { margin: 0; font: 700 1.5rem var(--display); color: var(--bone); letter-spacing: .04em; text-align: center; }
.backbtn { justify-self: start; background: var(--v1); color: var(--bone); border: 3px solid var(--ink); border-radius: 3px; padding: 6px 12px 6px 8px; font: 700 .95rem var(--body); box-shadow: var(--shadow); }
.backbtn span { font-size: 1.3rem; line-height: 0; position: relative; top: 1px; }
.backbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 #07030c; }
.mtile.wide { grid-column: 1 / -1; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; justify-items: start; align-items: center; padding: 8px 14px; }
.mtile.wide .mi { grid-row: 1 / span 2; }
.mt-new { position: absolute; top: 8px; right: 10px; padding: 1px 7px; border-radius: 9px; background: var(--mag); color: #fff; font: 800 .7rem var(--body); border: 2px solid var(--ink); animation: badgepulse 1.6s ease-in-out infinite; }
.mi .f { fill: currentColor; stroke: none; }
.mi g, .mi .ring, .mi .flame2, .mi .rays, .mi .spark { transform-box: view-box; }
.sw1 { transform-origin: 24px 38px; animation: clash1 2.6s ease-in-out infinite; }
.sw2 { transform-origin: 24px 38px; animation: clash2 2.6s ease-in-out infinite; }
@keyframes clash1 { 0%, 55%, 100% { transform: rotate(-10deg); } 35% { transform: rotate(8deg); } }
@keyframes clash2 { 0%, 55%, 100% { transform: rotate(10deg); } 35% { transform: rotate(-8deg); } }
.mdc1 { transform-origin: 14px 24px; animation: dice1 1.8s ease-in-out infinite; }
.mdc2 { transform-origin: 34px 24px; animation: dice2 1.8s ease-in-out infinite; }
@keyframes dice1 { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-4px) rotate(6deg); } }
@keyframes dice2 { 0%, 100% { transform: translateY(-4px) rotate(8deg); } 50% { transform: translateY(0) rotate(-6deg); } }
.ring { transform-origin: 24px 24px; opacity: 0; animation: ping 2.4s ease-out infinite; }
.ring.r2 { animation-delay: 1.2s; }
@keyframes ping { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.flame2 { fill: currentColor; stroke: none; transform-origin: 24px 35px; animation: flick .9s ease-in-out infinite alternate; }
@keyframes flick { from { transform: scale(1, 1); opacity: .9; } to { transform: scale(.85, 1.15); opacity: 1; } }
.rays { transform-origin: 24px 24px; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spark { transform-origin: 38px 9px; animation: twinkle 2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .4; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mi *, .badge.pulse, .mt-new { animation: none !important; } .ring { opacity: 0; } }
@media (max-width: 430px) { .nv-lbl { font-size: .5rem; letter-spacing: -.02em; overflow: visible; text-overflow: clip; } .nv { padding-inline: 0; } .navbar { padding-inline: 1px; } }

/* Pět položek na liště, Play uprostřed; Account je kolo v rohu */
.navbar { grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr; }
@media (max-width: 430px) { .nv-lbl { font-size: .6rem; letter-spacing: .015em; overflow: hidden; text-overflow: ellipsis; } .nv { padding-inline: 2px; } .navbar { padding-inline: 3px; } }
.acctbtn { position: absolute; top: 10px; right: 12px; z-index: 30; width: 40px; height: 40px; padding: 7px; border: 3px solid var(--ink); border-radius: 50%; background: var(--v1); color: var(--bone-d); box-shadow: var(--shadow); }
.acctbtn svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.acctbtn[hidden] { display: none; }
.acctbtn.on, .acctbtn[aria-expanded="true"] { color: var(--gold); border-color: var(--gold-d); }
body.in-battle .acctbtn { display: none; }
@media (max-width: 430px) { .nv-lbl { font-size: .55rem; letter-spacing: 0; } }

.acctmenu { position: absolute; top: 56px; right: 12px; z-index: 60; min-width: 190px; display: grid; padding: 6px; border: 3px solid var(--ink); border-radius: 4px; background: linear-gradient(#2f1b4d, #1c1030); box-shadow: 0 6px 0 #07030c, 0 0 0 2px var(--gold-d); }
.acctmenu[hidden] { display: none; }
.acctmenu button, .acctmenu a { display: block; width: 100%; padding: 11px 12px; text-align: left; background: none; border: 0; border-radius: 3px; color: var(--bone); font: 700 1rem var(--body); text-decoration: none; }
.acctmenu button:hover, .acctmenu a:hover, .acctmenu button:focus-visible, .acctmenu a:focus-visible { background: var(--v3); outline: none; }
.acctmenu .danger { color: #ff9ab8; border-top: 1px solid rgba(201,185,152,.2); margin-top: 4px; border-radius: 0 0 3px 3px; }
body.in-battle .acctmenu { display: none; }

/* Tutoriál */
.coach { margin: 6px 0; padding: 8px 12px; border: 3px solid var(--gold-d, #8a6a1f); border-radius: 3px; background: rgba(216,167,58,.12); color: var(--bone); min-height: 3.6em; display: grid; align-content: center; gap: 2px; }
.coach p { margin: 0; font-size: .95rem; line-height: 1.3; } .coach small { color: var(--gold); font-weight: 700; }
.coach:has(.coachgo) { grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
.coach:has(.coachgo) small { grid-column: 1 / -1; }
.coachgo { margin: 0; min-height: 40px; white-space: nowrap; animation: tutpulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .coachgo { animation: none; } }
.coach.bad { border-color: var(--mag); background: rgba(196,58,138,.18); }
.tuthint { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; animation: tutpulse 1.2s ease-in-out infinite; }
@keyframes tutpulse { 50% { box-shadow: 0 0 0 7px rgba(216,167,58,.32); } }
@media (prefers-reduced-motion: reduce) { .tuthint { animation: none; } }

/* ---- šťáva v zápase: otřes, efekty kouzel, bubliny kombinací, hudba ---- */
.tbr { display: inline-flex; align-items: center; gap: 6px; }
.musicbtn { font-size: 1.05rem; line-height: 1; }
.musicbtn.off { text-decoration: line-through; opacity: .55; }
.battle.shake { animation: shake var(--shd, .45s) cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translate3d(calc(var(--sh, 4px) * -.3), 0, 0) rotate(calc(var(--shr, 0deg) * -.4)); }
  20%, 80% { transform: translate3d(calc(var(--sh, 4px) * .6), calc(var(--sh, 4px) * .2), 0) rotate(calc(var(--shr, 0deg) * .6)); }
  30%, 50%, 70% { transform: translate3d(calc(var(--sh, 4px) * -1), calc(var(--sh, 4px) * -.2), 0) rotate(calc(var(--shr, 0deg) * -1)); }
  40%, 60% { transform: translate3d(var(--sh, 4px), calc(var(--sh, 4px) * .2), 0) rotate(var(--shr, 0deg)); }
}
.stage { position: relative; }
.col { position: relative; }
.popx { position: absolute; left: 50%; top: 35%; z-index: 6; pointer-events: none; font: 800 1.5rem var(--display); color: var(--gold); text-shadow: 0 0 10px rgba(216,167,58,.9), 0 2px 0 #000; animation: popx .85s ease-out forwards; }
@keyframes popx { 0% { transform: translate(-50%, 10px) scale(.4); opacity: 0; } 25% { transform: translate(-50%, -8px) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -46px) scale(1); opacity: 0; } }
.spfx { position: absolute; left: 0; right: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.spfx-banner { top: 50%; transform: translateY(-50%); display: grid; place-items: center; }
.spfx-banner span { font: 800 1.8rem var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--bone); padding: 2px 16px; background: rgba(15,8,24,.72); border-block: 2px solid var(--gold); text-shadow: 0 0 14px var(--hero, #9b7bff); animation: banner 1.1s ease-out forwards; }
.spfx-banner.foe span { color: #ffb0a0; text-shadow: 0 0 14px #e0583a; }
@keyframes banner { 0% { transform: scaleX(.2); opacity: 0; } 18% { transform: scaleX(1.08); opacity: 1; } 30% { transform: none; } 78% { opacity: 1; } 100% { opacity: 0; letter-spacing: .25em; } }
.spfx-reroll { top: 50%; height: 0; overflow: visible; }
.spfx-reroll::before { content: ""; position: absolute; left: 50%; top: 0; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(155,123,255,.8), transparent 40%, rgba(216,167,58,.8), transparent 80%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 56%, #000 70%, transparent 74%); mask: radial-gradient(circle, transparent 52%, #000 56%, #000 70%, transparent 74%);
  animation: ringspin .8s ease-out forwards; }
@keyframes ringspin { from { transform: rotate(0) scale(.3); opacity: 1; } to { transform: rotate(420deg) scale(1.5); opacity: 0; } }
.spfx-cull { top: 0; bottom: 0; }
.spfx-cull::before { content: ""; position: absolute; left: -20%; width: 140%; top: 50%; height: 5px; background: linear-gradient(90deg, transparent, #fff 30%, #ff5a4a 60%, transparent); box-shadow: 0 0 18px 5px rgba(255,90,74,.9); transform: rotate(-24deg) translateX(-120%); animation: slash .45s .08s ease-out forwards; }
.spfx-cull::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,90,74,.5), transparent 70%); animation: flashout .7s ease-out forwards; }
.spfx-cull.mine::before, .spfx-cull.mine::after { top: 24%; }
.spfx-cull.foe::before { top: 76%; }
.spfx-cull.mine::after { inset: 0 0 50% 0; }
.spfx-cull.foe::after { inset: 50% 0 0 0; }
@keyframes slash { 0% { transform: rotate(-24deg) translateX(-120%); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(-24deg) translateX(120%); opacity: 0; } }
@keyframes flashout { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.spfx-ward { height: 50%; }
.spfx-ward.mine { bottom: 0; } .spfx-ward.foe { top: 0; }
.spfx-ward::before { content: ""; position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%;
  background: radial-gradient(circle, rgba(127,208,255,.05) 50%, rgba(127,208,255,.55) 68%, rgba(255,255,255,.8) 71%, transparent 74%); animation: shell .9s ease-out forwards; }
@keyframes shell { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
.spfx-nudge { top: 50%; height: 0; overflow: visible; }
.spfx-nudge::before, .spfx-nudge::after { position: absolute; left: 50%; top: 0; font: 800 1.6rem var(--display); color: var(--gold); text-shadow: 0 0 10px rgba(216,167,58,.9); }
.spfx-nudge::before { content: "▲"; margin-left: -22px; animation: upx .8s ease-out forwards; }
.spfx-nudge::after { content: "▼"; margin-left: 10px; animation: downx .8s ease-out forwards; }
@keyframes upx { from { transform: translateY(8px); opacity: 1; } to { transform: translateY(-50px); opacity: 0; } }
@keyframes downx { from { transform: translateY(-8px); opacity: 1; } to { transform: translateY(50px); opacity: 0; } }
.spfx-stash { top: 50%; height: 0; overflow: visible; }
.spfx-stash::before { content: ""; position: absolute; top: 0; width: 120px; height: 120px; margin-top: -60px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(155,123,255,.9), transparent 25%, rgba(155,123,255,.7) 50%, transparent 75%, rgba(155,123,255,.9)); -webkit-mask: radial-gradient(circle, transparent 20%, #000 24%, #000 60%, transparent 66%); mask: radial-gradient(circle, transparent 20%, #000 24%, #000 60%, transparent 66%); }
.spfx-stash.mine::before { left: 12%; animation: vortexL .9s ease-in forwards; }
.spfx-stash.foe::before { right: 12%; animation: vortexR .9s ease-in forwards; }
@keyframes vortexL { from { transform: translateX(110px) rotate(0) scale(1.3); opacity: 0; } 25% { opacity: 1; } to { transform: translateX(-20px) rotate(540deg) scale(.1); opacity: 0; } }
@keyframes vortexR { from { transform: translateX(-110px) rotate(0) scale(1.3); opacity: 0; } 25% { opacity: 1; } to { transform: translateX(20px) rotate(-540deg) scale(.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .battle.shake, .spfx, .popx { animation: none; display: none; } }

/* Nudge: tlačítka − a + jsou vždy stejné kruhy (flex je dřív zúžil na půlku) */
.nud { inset: 0 -5px; }
.nud button { flex: none; box-sizing: border-box; width: 26px; height: 26px; min-width: 26px; aspect-ratio: 1; display: grid; place-items: center; line-height: 1; }
.offer.nudging { gap: 28px; }

/* Obchod: obchodník je pevně nahoře na stránce (neposouvá se s obrazovkou); s obsahem se posouvá jen kartička hrdiny (.ed-top), která zůstává přilepená */

/* ---------- Výbava: sloty, batoh, obchodník ---------- */
.gem { width: 1em; height: 1em; margin-left: .22em; vertical-align: -.13em; flex: none; fill: #6fd6ff; stroke: #1b5a78; stroke-width: 1.3; stroke-linejoin: round; }
.gem .in { fill: none; stroke: #1b5a78; stroke-width: 1; }
.gear-art { display: block; width: 100%; height: 100%; }
.gear-box { margin-top: 10px; }
.gslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.ggrid.wares { grid-template-columns: repeat(3, 1fr); }
.gcard { --rc: #a8a29a; position: relative; display: block; aspect-ratio: 1; padding: 0; border: 3px solid var(--rc); border-radius: 3px; background: radial-gradient(circle at 50% 40%, #2a1748, #150b25); color: var(--bone); box-shadow: 0 3px 0 #07030c; min-width: 0; font: inherit; overflow: hidden; }
button.gcard { cursor: pointer; }
.gcard.sel { outline: 3px solid var(--gold); outline-offset: 1px; transform: translateY(1px); }
.gcard.worn:not(.gslot) { opacity: .55; }
.gcard.sold { opacity: .35; filter: grayscale(1); }
.gcard.gslot:not(.on) { border-style: dashed; border-color: var(--v3); background: #150b25; box-shadow: none; }
.gghost { display: block; width: 100%; height: 100%; opacity: .5; }
.gl { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 2px; font: 700 .68rem var(--body); text-align: center; background: rgba(10, 5, 16, .78); color: var(--bone-d); letter-spacing: .03em; }
.glv { position: absolute; top: 2px; right: 3px; font: 800 .78rem var(--display); color: var(--rc); text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.gprice { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 2px; font: 700 .78rem var(--body); text-align: center; background: rgba(10, 5, 16, .85); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.gtotals { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; font-size: .95rem; }
.gtotals li b { color: var(--gold); }
.gtotals em { font-style: normal; font-size: .75rem; color: var(--ghost); margin-left: 4px; }
.gtotals .dim { color: var(--bone-d); font-size: .88rem; }
.gdetail { --rc: #a8a29a; margin-top: 10px; border-color: var(--rc); }
.gd-top { display: flex; gap: 12px; align-items: center; }
.gd-art { flex: none; width: 84px; height: 84px; border: 3px solid var(--rc); border-radius: 3px; background: radial-gradient(circle at 50% 40%, #2a1748, #150b25); overflow: hidden; }
.gd-name { font: 800 1.2rem var(--display); color: var(--rc); line-height: 1.1; }
.gd-sub { font-size: .85rem; color: var(--bone-d); margin-top: 3px; }
.gd-r { color: var(--rc); font-weight: 700; }
.gd-lines { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.gd-lines li::marker { color: var(--rc); }
.gnote { margin: 8px 0 0; font-size: .85rem; color: var(--bone-d); }
.gd-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.gd-btns .btn.small { margin: 0; min-height: 40px; }
.need { color: #ff8aa8; font-size: .8rem; }
.grefresh { display: grid; gap: 4px; margin-top: 12px; }
.grefresh small { color: var(--bone-d); font-size: .78rem; }
.grefresh .btn.small { margin: 0; justify-self: start; min-height: 40px; }
.gpick { margin-top: 10px; text-align: center; }
.shoptabs { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.gdrop { display: flex; align-items: center; gap: 8px; border: 2px solid var(--rc); padding: 4px 8px; background: rgba(10, 5, 16, .5); border-radius: 3px; }
.gdrop-art { flex: none; width: 44px; height: 44px; }
.shoptabs button { font-size: 1rem; padding: 8px 4px; }

.deckwarn { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 8px 0; padding: 10px 12px; border-color: var(--mag); background: rgba(196,58,138,.16); font-size: .92rem; }
.deckwarn > div { flex: 1 1 200px; } .deckwarn b { color: #ff9ac8; }
.deckwarn .btn.small { margin: 0; min-height: 40px; }
.over-note { color: #ff9ac8; font-weight: 700; }
.deckbar { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.deckbar .btn.small { margin: 0; min-height: 40px; }
.deckbar small { color: var(--bone-d); font-size: .78rem; }
.deckbar .btn.small { white-space: nowrap; }

/* Kapsa (Stash): kostka v kapse je pod jménem hráče v jeho plakátu, ne vedle nabídky */

/* kapsa (Stash) pod štítkem tahu / hodinami */
.t-left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.t-right { gap: 6px; }
.pocket { display: grid; justify-items: center; gap: 3px; }
.od.pk { --od: calc(var(--cell, 44px) * .62); width: var(--od); height: var(--od); flex: none; }
.od.pk .pk-die { display: block; width: 100%; height: 100%; }
.od.pk .pk-die svg { display: block; width: 100%; height: 100%; }
button.od.pk.sel { transform: none; outline: 2px solid var(--gold); outline-offset: 2px; }
.pkn { display: inline-block; font: 800 .54rem/1.1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 2px 5px 1px; border-radius: 2px; border: 1px solid var(--ring, #b9a98c); background: rgba(10,4,20,.72); color: var(--ring, var(--bone-d)); white-space: nowrap; --ring: #b9a98c; }
.pkn.t-even { --ring: #6ab8ff; } .pkn.t-odd { --ring: #c6a0ff; } .pkn.t-gambler { --ring: #ff7a8a; } .pkn.t-heavy { --ring: #ffb347; }
.pkn.t-mirror { --ring: #7fdcff; } .pkn.t-anchor { --ring: #8fd18f; } .pkn.t-sniper { --ring: #ff4d6d; }

/* plusko/mínus u Nudge: kreslené tyčkami, aby seděly přesně na střed v každém prohlížeči */
.nud button { font-size: 0; color: transparent; position: relative; display: block; }
.nud button::before, .nud button::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); border-radius: 1px; transform: translate(-50%, -50%); }
.nud button::before { width: 12px; height: 3px; }
.nud button[data-nudge$=":1"]::after { width: 3px; height: 12px; }

/* čárkované prázdné sloty kostek: SVG místo border:dashed (Safari/macOS kreslí rohy špatně) */
.od.empty .rune, .t-die .rune { border: 0; border-radius: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='2' y='2' width='96' height='96' rx='12' fill='none' stroke='%23efe3c8' stroke-opacity='.3' stroke-width='5' stroke-linecap='round' stroke-dasharray='9 9'/></svg>") center / 100% 100% no-repeat; }
.t-left { display: grid; justify-items: center; justify-self: start; width: max-content; max-width: 100%; }
.od.empty .rune { inset: 4.7%; }
.od.empty { margin: 0; }

/* kapsa (Stash) v rozích hrací plochy: moje vlevo dole, soupeřova vlevo nahoře */
.stage { position: relative; }
.stage > .pocket { position: absolute; left: 2px; z-index: 4; }
.stage > .pocket.mine { bottom: 2px; }
.stage > .pocket.foe { top: 2px; }
.pkc { font: 800 .56rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 0 #07030c; }
/* kapsa v rohu hrací plochy; svislou polohu dopočítá alignPockets() podle okraje mřížky */
.stage > .pocket { left: 6px; }
/* o kousek větší mezera mezi kostkou (s obrysem) a štítkem pod ní */
.pocket { gap: 7px; }
.odnames { top: calc(var(--od) + 13px); }
/* plusko a mínus vždy symetricky pod kostkou (i když je kostka užší než dvě tlačítka) */
.nud { inset: 0 auto; left: 50%; width: max(calc(100% + 10px), 56px); transform: translateX(-50%); }

/* ---- Booster Die, Joker Die, Shatter, Swap ---- */
.od.t-boost, .odw.t-boost, .odnames .odn.t-boost, .pkn.t-boost { --ring: #a8e84a; }
.od.t-joker, .odw.t-joker, .odnames .odn.t-joker, .pkn.t-joker { --ring: #ff6fd8; }
.od.t-boost { --d-body: #e2ffb0; --d-pip: #3d7a00; --d-rim: #7fcc1f; }
.od.t-joker { --d-body: #fff0b0; --d-pip: #d4249c; --d-rim: #e08aff; }
.die .pip.jface { filter: drop-shadow(0 0 1.5px rgba(255,255,255,.6)); }
/* žolík na desce: hvězda ukazuje, že hodnotu přebírá; štítek J značí první (ještě nepoužitý) život */
.dw.joker .die .rim { stroke: #ff6fd8; stroke-width: 3.4; }
.dw.joker .die .body { fill: #fff0b0; }
.dw.joker .die .pip { fill: #d4249c; }
.dw .jk { position: absolute; right: -3px; top: -4px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 8px; background: #ff6fd8; color: #2a0a22; border: 2px solid var(--ink); font: 900 .62rem/11px var(--display); text-align: center; font-style: normal; pointer-events: none; box-shadow: 0 0 6px rgba(255,111,216,.8); }
.dw.joker { animation: jokerglow 2.2s ease-in-out infinite; }
@keyframes jokerglow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255,111,216,.4)); } 50% { filter: drop-shadow(0 0 7px rgba(255,111,216,.95)); } }
.dw.pulse-now { animation: pulsepop .7s ease-out; }
@keyframes pulsepop { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(1.22); filter: brightness(1.9) drop-shadow(0 0 10px #fff); } 100% { transform: scale(1); filter: none; } }
/* výběr cíle (Shatter / Swap) */
.stage[data-tmode="1"] .tcol .cell.tgt { cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,214,102,.85); background: #2d1a48; }
.stage[data-tmode="1"] .tcol .cell.tgt:hover, .stage[data-tmode="1"] .tcol .cell.tgt:focus-visible { background: #4a2a70; outline: 0; }
.dw.picked { outline: 3px solid var(--gold); outline-offset: 1px; border-radius: 8px; box-shadow: 0 0 14px 2px rgba(216,167,58,.7); }
.stage[data-tmode="1"] .grid-h { box-shadow: 0 0 0 3px var(--gold), 0 4px 0 3px var(--ink); }
.spfx-shatter { top: 0; bottom: 0; }
.spfx-shatter::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,214,102,.5), transparent 65%); animation: flashout .7s ease-out forwards; }
.spfx-shatter.mine::after { inset: 50% 0 0 0; } .spfx-shatter.foe::after { inset: 0 0 50% 0; }
.spfx-swap { top: 0; bottom: 0; }
.spfx-swap::after { content: "⇄"; position: absolute; left: 50%; top: 50%; margin: -.6em 0 0 -.5em; font: 800 3rem var(--display); color: var(--gold); text-shadow: 0 0 14px rgba(216,167,58,.9); animation: swapspin .8s ease-out forwards; }
@keyframes swapspin { 0% { opacity: 0; transform: scale(.4) rotate(-90deg); } 40% { opacity: 1; transform: scale(1.2) rotate(0); } 100% { opacity: 0; transform: scale(1) rotate(0); } }
.stage[data-tmode="1"] .tcol .cell.tgt { box-shadow: inset 0 0 0 2px rgba(255,214,102,.5); }
.stage[data-tmode="1"] .tcol .cell.tgt:has(.picked) { background: #6a3fa0; box-shadow: inset 0 0 0 3px #fff3c4, 0 0 12px rgba(255,243,196,.7); }
.dw.picked { outline-color: #fff3c4; transform: scale(1.06); }

/* Týdenní boss */
.dd.boss { border-color: var(--acc, var(--gold)); box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 0 14px color-mix(in srgb, var(--acc, #c06ae0) 35%, transparent); }
.dd.boss .portrait { --ring: var(--acc, var(--gold)); }
.bossab { display: inline; white-space: nowrap; margin-right: 4px; padding: 0 6px; font-family: var(--display); letter-spacing: .02em; color: #1a1030; background: var(--gold); border-radius: 2px; }
.r-boss { margin-top: 8px; display: grid; gap: 4px; }
.r-boss .r-line { margin: 0; }

/* Emoty v zápase */
.plate { position: relative; }
.emobtn { position: absolute; right: 6px; bottom: 6px; z-index: 31; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; font-size: 1.35rem; line-height: 1; color: var(--bone); background: #281844; border: 2px solid var(--gold-d); border-radius: 50%; text-decoration: none; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.emobtn:hover, .emobtn:focus-visible { border-color: var(--gold); }
.emobtn.on { color: var(--gold); border-color: var(--gold); }
.battle { position: relative; }
.emopanel { position: absolute; right: 6px; bottom: 54px; z-index: 30; width: min(320px, calc(100% - 16px)); padding: 8px; border: 3px solid var(--gold-d); border-radius: 3px; background: linear-gradient(#3a2554, #231540); box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.emogrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.emo-i { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; color: var(--bone); background: var(--v1); border: 2px solid var(--ink); border-radius: 3px; cursor: pointer; font: inherit; }
.emo-i:hover, .emo-i:focus-visible { border-color: var(--gold); }
.emo-i .ei { font-size: 1.7rem; line-height: 1; }
.emo-i .et { font-size: .68rem; letter-spacing: .02em; text-align: center; }
.emo-mute { display: block; margin: 8px auto 0; font-size: .8rem; }
.emo-b { position: absolute; z-index: 25; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; color: var(--bone); background: #281844; border: 2px solid var(--gold); border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.55); animation: emopop .28s cubic-bezier(.2,1.6,.4,1) both; pointer-events: none; }
.emo-b .ei { font-size: 1.6rem; line-height: 1; }
.emo-b .et { font: 700 .85rem var(--display); letter-spacing: .03em; }
.emo-b.foe { top: calc(100% - 6px); }
.emo-b.mine { bottom: calc(100% - 6px); }
@keyframes emopop { from { transform: scale(.4) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .emo-b { animation: none; } }

/* Dungeon */
.dg-step { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 2px; font-size: .95rem; }
.dg-step b { font: 700 1.15rem var(--display); color: var(--gold); }
.dg-step .btn { min-width: 38px; margin: 0; }
.dgfoe { width: 100%; margin: 10px 0; }
.dgfoe.guard { border-color: var(--gold); box-shadow: 0 0 14px rgba(216,167,58,.35); }
.dgp { transform-origin: 24px 24px; animation: dgpulse 1.8s ease-in-out infinite; }
@keyframes dgpulse { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }

/* ---------- Pets (mazlíčci) ---------- */
.portrait.petp { --ring: var(--acc, var(--gold)); width: 64px; height: 64px; border-radius: 6px; background: #0c0714; position: relative; }
.portrait.petp.big { width: 104px; height: 104px; }
.portrait.petp.battle { width: min(34vw, 150px); height: min(34vw, 150px); box-shadow: 0 0 0 3px var(--acc, var(--gold)), 0 0 0 6px var(--ink), 0 0 26px color-mix(in srgb, var(--acc, #fff) 45%, transparent); }
.pettabs { grid-template-columns: repeat(3, 1fr); }
.mtile.dim { opacity: .62; }
.mt-lock { position: absolute; top: 8px; right: 10px; padding: 1px 7px; border-radius: 9px; background: var(--ink); color: var(--bone-d); font: 800 .7rem var(--body); border: 2px solid var(--v3); }
.mi .pzig { stroke-dasharray: 3 3; animation: pzig 3s linear infinite; }
@keyframes pzig { to { stroke-dashoffset: -12; } }
.elchip { display: inline-block; padding: 0 7px; border-radius: 9px; border: 2px solid var(--c, var(--gold-d)); color: var(--c, var(--bone)); background: rgba(0,0,0,.45); font: 800 .72rem/1.35 var(--body); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.tdots { display: inline-flex; gap: 3px; vertical-align: middle; margin: 0 4px; } .tdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); border: 2px solid var(--v4); } .tdots i.on { background: var(--gold); border-color: var(--gold-d); }
.pbar { display: block; height: 12px; border-radius: 1px; background: var(--ink); border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--gold-d); overflow: hidden; margin-top: 4px; }
.pbar i { display: block; height: 100%; background: linear-gradient(#7a58bd, #5a3a92); transition: width .5s ease; }
.pbar.xp i { background: linear-gradient(#e6c058, var(--gold-d)); }
.pbar.hp i { background: linear-gradient(#7fe0a0, #3fa86a); }
.pp-hp.mid .pbar.hp i { background: linear-gradient(#ffd75a, #c9951c); } .pp-hp.low .pbar.hp i { background: linear-gradient(#ff7a8a, #c43a4a); }
.petlock, .petintro { display: grid; gap: 10px; justify-items: center; text-align: center; margin-top: 10px; }
.petintro { justify-items: stretch; text-align: left; margin-bottom: 4px; }
.elwheel { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 3px; } .elwheel .arr { color: var(--bone-d); font-weight: 800; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin: 10px 0; }
.pgrid.pick { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); max-height: 46vh; overflow-y: auto; padding: 6px; }
.pcard { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; border: 3px solid var(--ink); border-radius: 3px; background: var(--v1); color: var(--bone); box-shadow: var(--shadow); }
.pcard .portrait.petp { width: 62px; height: 62px; }
.pcard.sel { border-color: var(--acc, var(--gold)); background: rgba(216,167,58,.12); }
.pcard.act .pc-l { color: var(--gold); }
.pc-n { font: 700 .98rem var(--display); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-l { font: 700 .75rem var(--body); color: var(--bone-d); letter-spacing: .04em; }
.pdet { margin-top: 6px; display: grid; gap: 8px; }
.pd-top { display: flex; gap: 14px; align-items: center; } .pd-info { min-width: 0; flex: 1; }
.pd-name { font: 800 1.5rem/1.1 var(--display); color: var(--bone); } .actchip { font: 800 .7rem var(--body); padding: 1px 7px; border-radius: 9px; background: var(--gold); color: var(--ink); vertical-align: middle; }
.pstats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pstats li { display: grid; justify-items: center; padding: 5px 2px; background: rgba(0,0,0,.3); border: 2px solid var(--ink); border-radius: 2px; font-size: .72rem; color: var(--bone-d); text-transform: uppercase; letter-spacing: .04em; }
.pstats b { font: 800 1.2rem var(--display); color: var(--bone); } .pstats em { font-style: normal; font-size: .72rem; color: var(--ghost); font-weight: 800; }
.pspells { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pspells li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 6px 10px; background: rgba(0,0,0,.3); border: 2px solid var(--ink); border-radius: 2px; } .pspells li.lock { opacity: .55; }
.pspells b { font: 700 1.05rem var(--display); } .pspells .cost { font: 800 .8rem var(--body); color: #8fd0ff; align-self: center; } .pspells small { grid-column: 1 / -1; color: var(--bone-d); font-size: .82rem; }
.pslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pslot { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; text-align: center; background: rgba(0,0,0,.3); border: 2px dashed var(--v4); border-radius: 3px; color: var(--bone-d); min-height: 92px; }
.pslot.on { border-style: solid; border-color: var(--gold-d); color: var(--bone); } .pslot .ps-n { font: 700 .85rem var(--display); line-height: 1.1; } .pslot small { font-size: .7rem; color: var(--bone-d); line-height: 1.15; }
.pgi { width: 30px; height: 30px; } .pgi.dim { opacity: .5; }
.pbag { display: grid; gap: 6px; } .pbagi { display: flex; gap: 10px; align-items: center; text-align: left; padding: 6px 10px; background: rgba(0,0,0,.3); border: 2px solid var(--ink); border-radius: 2px; color: var(--bone); }
.pbagi small { display: block; color: var(--bone-d); font-size: .75rem; } .pbagi:disabled { opacity: .5; } .pbagi.static .btn { margin-left: auto; }
.pact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .petren { display: flex; gap: 6px; } .petren input { width: 8.5em; padding: 6px 8px; border-radius: 2px; border: 2px solid var(--ink); background: #0f0818; color: var(--bone); font: 700 1rem var(--display); }
.incub { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 10px; } .incub.empty { display: block; text-align: center; }
.incub.ready { box-shadow: var(--shadow), 0 0 22px rgba(216,167,58,.55), inset 0 0 0 2px var(--gold-d), inset 0 0 0 5px var(--ink); }
.inc-info { display: grid; gap: 6px; } .inc-row { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .88rem; color: var(--bone-d); } .inc-row .pbar { margin: 0; } .inc-row b { color: var(--bone); font-variant-numeric: tabular-nums; }
.big-btn.wide, .btn.wide { width: 100%; }
.eggs { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.eggli { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 10px 6px 6px; background: rgba(0,0,0,.3); border: 2px solid var(--ink); border-radius: 3px; }
.eggli .portrait.petp { width: 56px; height: 56px; } .eg-b { display: grid; gap: 2px; } .eg-b small { color: var(--bone-d); font-size: .8rem; }
.parena { display: grid; gap: 10px; } .pa-top { display: flex; gap: 14px; align-items: center; }
.pitems { display: flex; flex-wrap: wrap; gap: 6px; } .pitem { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; background: rgba(0,0,0,.35); border: 2px solid var(--ink); border-radius: 9px; font-size: .85rem; } .pitem .pgi { width: 18px; height: 18px; }
.pet-shop { display: grid; gap: 8px; } .h-coins.big { font: 800 1.5rem var(--display); color: var(--gold); } .h-coins.big span { font: 700 .85rem var(--body); color: var(--bone-d); }
.pshopgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pshopi { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 8px 6px; background: rgba(0,0,0,.3); border: 2px solid var(--ink); border-radius: 3px; } .pshopi small { color: var(--bone-d); font-size: .75rem; line-height: 1.2; } .pshopi .req { color: #8fd0ff; } .pshopi b { font: 700 .98rem var(--display); }
.pshopi .btn.small { margin-top: 4px; } .psi-ico .pgi { width: 34px; height: 34px; }
.pitems-shop { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pitems-shop li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 10px; background: rgba(0,0,0,.3); border: 2px solid var(--ink); border-radius: 3px; } .pi-b small { display: block; color: var(--bone-d); font-size: .78rem; } .pi-own { font-size: .8rem; color: var(--bone-d); }
.poffer { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 12px; background: rgba(0,0,0,.3); border: 2px solid var(--acc, var(--gold-d)); border-radius: 3px; } .poffer small { display: block; color: var(--bone-d); }
.inv-pop.wide { width: min(94vw, 440px); }
.petnote { font-size: .95rem; }

/* souboj mazlíčků */
.pbattle { gap: 6px; }
.pfield { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 6px; padding: 8px; border: 3px solid var(--ink); border-radius: 3px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--acc) 22%, #1c1030) 0%, #0f0818 75%); box-shadow: inset 0 0 0 3px rgba(216,167,58,.28), inset 0 0 70px rgba(0,0,0,.65); }
.pside { display: flex; align-items: center; gap: 10px; } .pside.foe { flex-direction: row; justify-content: space-between; } .pside.me { flex-direction: row; justify-content: space-between; }
.pplate { flex: 1 1 auto; min-width: 0; max-width: 58%; padding: 8px 10px; background: rgba(8,4,14,.78); border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--acc); border-radius: 3px; display: grid; gap: 3px; }
.pp-n { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pp-n b { font: 800 1.1rem var(--display); } .pp-n span:not(.elchip) { font-size: .8rem; color: var(--bone-d); font-weight: 800; }
.pp-hp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .pp-hp .pbar { margin: 0; } .pp-hp b { font: 800 .85rem var(--body); font-variant-numeric: tabular-nums; }
.pp-en { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 18px; }
.pips { display: inline-flex; gap: 3px; } .pips i { width: 10px; height: 10px; transform: rotate(45deg); background: var(--ink); border: 2px solid #4a6aa8; } .pips i.on { background: #6ab8ff; border-color: #bfe0ff; box-shadow: 0 0 6px #6ab8ff; }
.pp-st { display: inline-flex; gap: 3px; flex-wrap: wrap; } .pst { font: 800 .66rem var(--body); padding: 0 5px; border-radius: 2px; background: #5c1b3d; color: #ffd0e4; text-transform: uppercase; letter-spacing: .04em; } .pst.up { background: #1d5c3a; color: #c9ffe0; } .pst.down { background: #5c3a1b; color: #ffe0c0; } .pst.burn { background: #8a3010; } .pst.curse { background: #3a1b5c; }
.psprite { position: relative; flex: none; } .psprite.foe { transform: scaleX(1); }
.psprite.atk.me { animation: patkMe .5s ease-out; } .psprite.atk.foe { animation: patkFoe .5s ease-out; }
@keyframes patkMe { 40% { transform: translate(34px, -22px) scale(1.08); } } @keyframes patkFoe { 40% { transform: translate(-34px, 22px) scale(1.08); } }
.psprite.hit { animation: phit .45s; } @keyframes phit { 0%, 100% { transform: none; filter: none; } 20% { transform: translateX(-8px); filter: brightness(2.2) saturate(.3); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); filter: brightness(1.6); } }
.psprite.cast .portrait { animation: pcast .6s ease-out; } @keyframes pcast { 0% { box-shadow: 0 0 0 3px var(--acc), 0 0 0 6px var(--ink), 0 0 0 0 var(--acc); } 60% { box-shadow: 0 0 0 3px var(--acc), 0 0 0 6px var(--ink), 0 0 40px 14px var(--acc); } 100% { box-shadow: 0 0 0 3px var(--acc), 0 0 0 6px var(--ink), 0 0 26px 0 transparent; } }
.psprite.guard .portrait { animation: pguard .6s ease-out; } @keyframes pguard { 30% { filter: drop-shadow(0 0 14px #6ab8ff) brightness(1.4); transform: scale(.94); } }
.psprite.heal .portrait { animation: pheal .7s ease-out; } @keyframes pheal { 40% { filter: drop-shadow(0 0 16px #7fe0a0) brightness(1.5); } }
.psprite.ko .portrait { animation: pko 1s forwards; } @keyframes pko { to { transform: translateY(18px) rotate(8deg); opacity: .25; filter: grayscale(1); } }
.ppop { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font: 800 1.6rem var(--display); color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px #000; pointer-events: none; animation: ppop 1s ease-out forwards; z-index: 3; white-space: nowrap; }
.ppop.crit { color: #ffd75a; font-size: 2rem; } .ppop.super { color: #ff9a5a; } .ppop.weak { color: #9ab; } .ppop.heal { color: #7fe0a0; } .ppop.miss { color: var(--bone-d); font-size: 1.2rem; }
@keyframes ppop { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 20% { transform: translate(-50%, -6px) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -34px); opacity: 0; } }
.plog { position: relative; min-height: 3.3em; padding: 8px 12px; text-align: center; display: grid; align-content: center; background: rgba(8,4,14,.8); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--gold-d); border-radius: 3px; }
.plog p { margin: 0; font-size: 1.02rem; text-wrap: balance; }
.pclock { position: absolute; right: 8px; top: 4px; font: 800 .85rem var(--body); color: var(--bone-d); font-variant-numeric: tabular-nums; } .pclock.low { color: var(--mag); }
.pcmd { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pcmd.wait, .pcmd.sub { grid-template-columns: 1fr; } .pcmd.wait { text-align: center; padding: 14px 0; }
.pcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcb { display: grid; gap: 1px; justify-items: center; text-align: center; padding: 10px 6px; border: 3px solid var(--ink); border-radius: 2px; background: var(--v3); color: var(--bone); box-shadow: var(--shadow); min-height: 62px; position: relative; }
.pcb b { font: 800 1.2rem var(--display); } .pcb small { font-size: .74rem; color: var(--bone-d); line-height: 1.2; } .pcb:disabled { opacity: .45; } .pcb:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #07030c; }
.pcb.atk { background: #7a2a3a; } .pcb.def { background: #2a4f7a; } .pcb.sp { background: #5a3a92; } .pcb.it { background: #2a6a4a; }
.pcb.spell { border-color: var(--c); } .pcb .cost { position: absolute; top: 4px; right: 6px; font: 800 .72rem var(--body); color: #8fd0ff; } .pcb.item .pgi { width: 22px; height: 22px; }
.eff { font-style: normal; font-size: .8rem; margin-left: 4px; } .eff.up { color: var(--ghost); } .eff.down { color: var(--mag); }
@media (max-width: 600px), (max-height: 760px) { .portrait.petp.battle { width: min(26vw, 110px); height: min(26vw, 110px); } .pcb { min-height: 52px; padding: 6px 4px; } .pcb b { font-size: 1.05rem; } .pdet .portrait.petp.big, .incub .portrait.petp.big { width: 84px; height: 84px; } .pstats b { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .psprite, .psprite .portrait, .ppop { animation: none !important; } .ppop { opacity: 1; } .mi .pzig { animation: none; } }
.pgrid.pick { width: 100%; }
.eg-b small { white-space: normal; }
.fr-act { gap: 4px; }
.nw { white-space: nowrap; }
.plog { padding-inline: 38px; }
/* vystavený mazlíček v online zápase: menší rámeček hned vpravo od portrétu hráče (postava vlevo, pet vedle ní) */
.plate { position: relative; }
.plate.haspet { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.plate-h.haspet { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
.pshow { position: relative; width: 34px; height: 34px; margin: 0 2px; border-radius: 4px; overflow: hidden; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--acc, var(--gold)), 0 2px 6px rgba(0,0,0,.6); background: #0c0714; }
.pshow svg { display: block; width: 100%; height: 100%; }
.pshow b { position: absolute; right: 0; bottom: 0; padding: 0 3px; font: 800 .56rem/1.3 var(--body); background: var(--ink); color: var(--gold); border-top-left-radius: 3px; }
@media (max-width: 600px), (max-height: 900px) { .pshow { width: 28px; height: 28px; } .plate.haspet { gap: 8px; } }
/* užší svislé mezery na liště hráče: jméno, popisek a mana */
.plate .p-name strong { line-height: 1.05; }
.plate .p-name > span:not(.p-mp) { display: block; line-height: 1.15; }
.plate .p-name .p-mp { margin-top: 1px; padding: 0; min-height: 0; gap: 6px; }
/* větší rámeček postavy */
.plate .portrait { width: 54px; height: 64px; }
@media (max-width: 600px), (max-height: 900px) { .plate .portrait { width: 46px; height: 54px; margin: 4px 3px; } .plate { padding-block: 6px; } }
@media (max-height: 700px) { .plate .portrait { width: 36px; height: 44px; } }

/* nákupní lišta: Buy úplně vpravo; kostky s kroužkem mají pod sebou větší mezeru k textu */
.buybar .bb-act { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; }
.dslot.ringed .dthumb { margin: 3px 0 8px; }

/* instalace jako aplikace */
.inst-steps { text-align: left; margin: 4px 0 0; padding-left: 1.3em; display: grid; gap: 8px; }
.inst-banner { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: center; }

/* Bone Sanctuary */
.sc-top { display: grid; gap: 8px; }
.sc-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sc-title h2 { margin: 0; font: 800 1.5rem var(--display); color: var(--bone); overflow-wrap: anywhere; }
.sc-name { display: flex; gap: 6px; align-items: center; }
.sc-name input { flex: 1; min-width: 0; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 2px; background: #0e0718; color: var(--bone); font: 700 1rem var(--body); }
.sc-name .btn.small { margin-top: 0; }
.sc-hallbox { border: 3px solid var(--ink); border-radius: 3px; overflow: hidden; background: #07030c; box-shadow: var(--shadow), inset 0 0 0 1px var(--gold-d); }
.sc-hallbox svg { display: block; width: 100%; height: auto; }
.sc-sub { text-align: center; }
.sc-mats { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; }
.mat { display: inline-flex; align-items: center; gap: 5px; font-size: .92rem; color: var(--bone-d); white-space: nowrap; }
.mat b { color: var(--bone); font-weight: 800; }
.mat i { width: 10px; height: 10px; background: var(--c); border: 2px solid var(--ink); transform: rotate(45deg); box-shadow: 0 0 6px var(--c); }
.mat.lack b { color: #ff8a8a; }
.sc-how { font-size: .9rem; color: var(--bone-d); }
.sc-how summary { cursor: pointer; padding: 4px 0; }
.sc-how ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.sc-how li { display: grid; gap: 1px; }
.sc-build { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.sc-b { padding: 10px 12px; border: 3px solid var(--ink); border-radius: 3px; background: var(--v1); display: grid; gap: 4px; box-shadow: var(--shadow); }
.sc-b.on { border-color: var(--ink); background: linear-gradient(var(--v2), var(--v1)); }
.sc-bh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sc-bh b { font: 800 1.2rem var(--display); }
.sc-pips { color: var(--gold); letter-spacing: .15em; font-size: .85rem; }
.sc-b small { color: var(--bone-d); font-size: .88rem; }
.sc-bs { font-size: .92rem; color: var(--bone); }
.sc-bc { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sc-bc .btn.small { margin-top: 0; }
.sc-cost { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sc-nx { font-size: .84rem; }
.sc-flames { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 6px 0 10px; }
.sc-fl { display: grid; justify-items: center; gap: 3px; padding: 8px 2px 6px; border: 3px solid var(--ink); border-radius: 3px; background: var(--v1); color: var(--bone-d); }
.sc-fl i { width: 18px; height: 24px; background: var(--c); clip-path: path('M9 0 C15 8 18 14 9 24 C0 14 3 8 9 0Z'); box-shadow: 0 0 10px var(--c); }
.sc-fl small { font-size: .7rem; line-height: 1; }
.sc-fl.sel { border-color: var(--c); background: rgba(216,167,58,.12); color: var(--bone); }
.sc-fl:disabled { opacity: .45; }
.sc-cards { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.sc-card { display: block; }
.sc-hit { display: grid; justify-items: center; align-content: start; gap: 3px; width: 100%; height: 100%; padding: 8px 4px 8px; border: 3px solid var(--ink); border-radius: 3px; background: var(--v1); color: var(--bone); text-align: center; box-shadow: var(--shadow); }
button.sc-hit:active { transform: translateY(3px); box-shadow: 0 1px 0 #07030c; }
.sc-card.on .sc-hit { border-color: var(--gold); background: rgba(216,167,58,.12); }
.sc-card.lock .sc-hit { opacity: .6; background: #150d22; }
.sc-hit b { font: 800 .95rem var(--display); line-height: 1.1; }
.sc-hit small { font-size: .74rem; line-height: 1.15; color: var(--bone-d); }
.sc-g { display: block; width: 56px; height: 56px; }
.sc-g svg { width: 100%; height: 100%; display: block; }
.sc-g.uniq { filter: drop-shadow(0 0 6px var(--c)); }
.sc-card.on .sc-g { filter: drop-shadow(0 0 5px var(--c)); }
.sc-d { display: grid; place-items: center; min-height: 56px; }
.sc-d .dthumb { margin: 4px 0 8px; }
.sc-q { font: 800 1.8rem var(--display); color: #4a3d68; }
.sc-card.rare.got .sc-hit { border-color: var(--gold-d); }
.sc-cards.mini { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.sc-cards.mini .sc-g { width: 44px; height: 44px; }
.sc-cards.mini .portrait.petp { width: 52px; height: 52px; }
.sc-back { z-index: 70; align-items: start; overflow-y: auto; }
.sc-visit { width: min(94vw, 440px); max-height: none; margin: 10px 0 24px; justify-items: stretch; text-align: left; }
.sc-visit > .note, .sc-visit > .ed-h { text-align: center; }
.sc-owner { display: flex; gap: 10px; align-items: center; }
.sc-owner .fr-av { flex: none; }
.sc-owner > span:last-child { display: grid; gap: 1px; }
.sc-owner b { font: 800 1.35rem var(--display); overflow-wrap: anywhere; }
.sancnote { font-size: .95rem; }

/* ---------- Fishing ---------- */
.shoptabs { grid-template-columns: repeat(4, 1fr); }
.shoptabs button { font-size: .9rem; padding: 8px 2px; }
.mi-fishing .fline { animation: fline 3.2s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 27px 8px; }
.mi-fishing .fbob { animation: fbob 2.4s ease-in-out infinite; transform-box: fill-box; }
@keyframes fline { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes fbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.fish-box .stat-row { margin-bottom: 8px; }
.fh-how { margin: 8px 0; padding-left: 20px; font-size: .92rem; color: var(--bone-d); display: grid; gap: 4px; }
.fh-how b { color: var(--bone); }
.fh-rod { margin: 6px 0 10px; font-size: .88rem; color: var(--bone-d); }
.fh-rod b { color: var(--gold); }
.fplay { display: grid; gap: 8px; }
.fhud { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; color: var(--bone-d); padding: 0 2px; }
.fhud b { color: var(--bone); }
.fwrap { position: relative; width: 100%; max-width: 420px; margin: 0 auto; border: 3px solid var(--ink); border-radius: 3px; box-shadow: var(--shadow), 0 0 0 2px var(--gold-d); overflow: hidden; background: #08191f; }
#fishCv { display: block; width: 100%; aspect-ratio: 3 / 4; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.fbtns { display: flex; gap: 8px; justify-content: center; }
.fbtns .btn { margin: 0; }
.fcatch { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 2, 10, .72); padding: 12px; }
.fcatch[hidden] { display: none; }
.fc-in { width: min(100%, 320px); text-align: center; padding: 14px 14px 12px; background: var(--v1); border: 3px solid var(--rc, var(--gold)); border-radius: 3px; box-shadow: var(--shadow); animation: bubble .35s cubic-bezier(.3,1.6,.5,1); }
.fc-t { font: 700 1.1rem var(--display); color: var(--gold); letter-spacing: .04em; }
.fc-art { width: 170px; margin: 6px auto 2px; }
.fc-art.dim { opacity: .45; filter: grayscale(.7); }
.fc-n { font: 700 1.4rem var(--display); color: var(--bone); }
.fc-s { color: var(--bone-d); font-size: .9rem; }
.fc-r { color: var(--rc); font-weight: 800; }
.fc-d { margin: 6px 0; font-size: .86rem; font-style: italic; color: var(--bone-d); }
.fc-p { margin-bottom: 10px; font-weight: 700; color: var(--bone); }
.fc-p small { color: var(--ghost); font-weight: 600; }
.fc-b { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.fc-b .btn, .fc-in > .btn { margin: 0; }
.fc-in.lost p { font-size: .9rem; color: var(--bone-d); margin: 6px 0 10px; }
.fsh { display: block; width: 100%; height: auto; overflow: visible; }
.fsh.unk { filter: grayscale(1) brightness(.22); }
.fs-want { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font-size: .92rem; color: var(--bone-d); }
.fs-want b { color: var(--bone); } .fs-want em { color: var(--ghost); font-style: normal; font-weight: 700; }
.fs-want .fs-art { flex: none; width: 70px; }
.fs-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.fs-row, .fs-tr { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 2px solid var(--ink); border-left: 4px solid var(--rc, var(--v3)); border-radius: 3px; background: rgba(10, 5, 16, .5); }
.fs-row.want { background: rgba(95, 224, 160, .1); border-color: var(--ghost); }
.fs-tr.own { opacity: .75; } .fs-tr.lock { opacity: .55; }
.fs-row .fs-art { flex: none; width: 56px; }
.fs-n { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.fs-n b { color: var(--bone); font-size: .95rem; } .fs-n b em { color: var(--ghost); font-style: normal; font-size: .75rem; margin-left: 4px; }
.fs-n small { color: var(--bone-d); font-size: .78rem; }
.fs-p { flex: none; font-weight: 700; color: var(--bone); }
.fs-b { flex: none; display: flex; gap: 4px; }
.fs-b .btn, .fs-tr > .btn { margin: 0; min-height: 36px; }
.fish-box .wide + .wide { margin-top: 8px; }
.fs-logs { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fs-lg { display: grid; justify-items: center; gap: 1px; padding: 6px 4px; text-align: center; border: 2px solid var(--ink); border-radius: 3px; background: rgba(10, 5, 16, .5); }
.fs-lg.got { border-color: var(--rc); }
.fs-lg b { font-size: .8rem; color: var(--bone); } .fs-lg small { font-size: .72rem; color: var(--bone-d); }
.fs-lg .fsh { width: 78%; }
@media (prefers-reduced-motion: reduce) { .mi-fishing .fline, .mi-fishing .fbob { animation: none; } }
.mi-sanctuary .flame2 { transform-origin: 24px 28px; }

/* ---------- Buy me a dice ---------- */
.support { display: grid; justify-items: center; gap: 8px; margin: 18px 0 8px; text-align: center; }
.support .note { margin: 0; }
.bmc { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; background: #bd5fff; color: #fff; border: 3px solid #000; border-radius: 6px; font: 700 1.05rem 'Inter', var(--body); text-decoration: none; box-shadow: var(--shadow); transition: transform .1s; }
.bmc svg { width: 24px; height: 24px; flex: none; }
.bmc svg circle { fill: #000; }
.bmc:hover, .bmc:focus-visible { background: #c97bff; }
.bmc:active { transform: translateY(2px); box-shadow: 0 2px 0 #07030c; }
.support-row { display: flex; justify-content: flex-end; margin: -2px 2px 6px; }
.bmc.corner { gap: 6px; padding: 5px 10px 5px 7px; font-size: .78rem; border-width: 2px; border-radius: 5px; box-shadow: 0 2px 0 #07030c; }
.bmc.corner svg { width: 18px; height: 18px; }

/* tři uložené sady */
.dsets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 6px; }
.dset { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 4px; border: 1px solid var(--line, #3a3340); background: rgba(0,0,0,.25); color: inherit; border-radius: 10px; font: inherit; cursor: pointer; }
.dset b { font-size: .95rem; }
.dset small { color: var(--bone-d); font-size: .72rem; }
.dset.on { border-color: var(--gold, #e0b050); background: rgba(224,176,80,.14); box-shadow: 0 0 0 1px var(--gold, #e0b050) inset; }
.dset-note { margin: 0 0 8px; }

.board-box { margin-top: 6px; }
.board-box .wk { margin: 4px 0; }

/* rarita výbavy: barva všude (rámeček, jméno, odznak, záře), vyšší rarity víc svítí */
.gcard { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 26%, #2a1748), #150b25); }
.gcard.on, .gcard:not(.gslot) { box-shadow: 0 3px 0 #07030c, 0 0 0 1px color-mix(in srgb, var(--rc) 40%, transparent) inset; }
.gcard.r-rare { box-shadow: 0 3px 0 #07030c, 0 0 8px color-mix(in srgb, var(--rc) 55%, transparent); }
.gcard.r-epic { box-shadow: 0 3px 0 #07030c, 0 0 11px color-mix(in srgb, var(--rc) 70%, transparent); }
.gcard.r-legendary { box-shadow: 0 3px 0 #07030c, 0 0 14px color-mix(in srgb, var(--rc) 85%, transparent); animation: rarGlow 2.6s ease-in-out infinite; }
@keyframes rarGlow { 50% { box-shadow: 0 3px 0 #07030c, 0 0 22px var(--rc); } }
@media (prefers-reduced-motion: reduce) { .gcard.r-legendary { animation: none; } }
.gpip { position: absolute; left: 3px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--rc); border: 1px solid #000; box-shadow: 0 0 5px var(--rc); }
.gdetail { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, transparent), transparent 55%); }
.chip-rar { display: inline-block; padding: 0 7px; border-radius: 9px; background: color-mix(in srgb, var(--rc) 24%, #150b25); border: 1px solid var(--rc); color: var(--rc); font-weight: 800; font-size: .8em; line-height: 1.5; }
.rn { color: var(--rc); }
.rar-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 10px; padding: 0; font-size: .78rem; color: var(--bone-d); }
.rar-legend li { display: inline-flex; align-items: center; gap: 5px; color: var(--rc); font-weight: 700; }
.rar-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 5px var(--rc); border: 1px solid #000; }
.rar-legend small { color: var(--bone-d); font-weight: 400; }
.gtag { display: inline-block; font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 0 5px; margin-right: 6px; border-radius: 3px; color: #120a1c; background: var(--gc, #aaa); vertical-align: 1px; }

/* ===== Hlavní hub: mapa vesnice s denním cyklem (public/village.js) ===== */
.village { --sky1: #6ec3ff; --sky2: #cfeeff; --lights: 0; --stars: 0; --cloud: #fff; --vb: 1; --vs: 1; --vw: 0; --grain: none; position: relative; width: 100%; aspect-ratio: 360 / 800; contain: layout paint; margin: 14px 0 10px; border: 3px solid var(--ink); border-radius: 4px; box-shadow: var(--shadow); overflow: hidden; background: var(--sky1); isolation: isolate; }
.vl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.vl-sky { position: absolute; inset: 0 0 auto 0; height: 26%; background: linear-gradient(var(--sky1), var(--sky2)); transition: background 1s; }
.vl-sun, .vl-moon { position: absolute; width: 11%; aspect-ratio: 1; margin: -5.5% 0 0 -5.5%; border-radius: 50%; opacity: 0; transition: opacity .6s; }
.vl-sun { background: radial-gradient(circle, #fff 0 25%, var(--sunc, #fff3b0) 26% 100%); border: 3px solid #0a0510; box-shadow: 0 0 22px 8px color-mix(in srgb, var(--sunc, #fff3b0) 60%, transparent); }
.vl-moon { width: 9%; margin: -4.5% 0 0 -4.5%; filter: drop-shadow(0 0 8px rgba(190, 210, 255, .8)); }
.vl-moon svg { width: 100%; height: 100%; display: block; }
.vl-cloud { position: absolute; left: -30%; width: 26%; height: 5.5%; border-radius: 40px; background: var(--cloud); border: 3px solid #0a0510; opacity: .92; animation: vcloud 70s linear infinite; will-change: transform; }
.vl-cloud::before, .vl-cloud::after { content: ""; position: absolute; bottom: 55%; border: 3px solid #0a0510; border-bottom: 0; border-radius: 40px 40px 0 0; background: var(--cloud); }
.vl-cloud::before { left: 14%; width: 38%; height: 95%; } .vl-cloud::after { left: 46%; width: 30%; height: 70%; }
.vl-cloud.c1 { top: 8%; } .vl-cloud.c2 { top: 17%; width: 20%; animation-duration: 95s; animation-delay: -40s; } .vl-cloud.c3 { top: 4%; width: 16%; animation-duration: 120s; animation-delay: -85s; }
@keyframes vcloud { to { transform: translateX(520%); } }
.vl-grain { position: absolute; inset: 0; pointer-events: none; z-index: 9; background-image: var(--grain); background-size: 160px 160px; opacity: .5; }
.vl-back, .vl-lamps, .vb-lights { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vl-back { filter: brightness(var(--vb)) saturate(var(--vs)) sepia(var(--vw)); }
.vl-lamps { z-index: 1; overflow: visible; }
.vb-lights { overflow: visible; }
.vl-stars { position: absolute; left: 0; top: 0; width: 100%; height: 26%; opacity: var(--stars); pointer-events: none; }
.village.wide { width: min(1120px, calc(100vw - 24px)); left: 50%; transform: translateX(-50%); }
.village.wide .vl-sun { width: 6%; margin: -3% 0 0 -3%; } .village.wide .vl-moon { width: 5%; margin: -2.5% 0 0 -2.5%; }
.village.wide .vl-cloud { width: 15%; height: 9%; } .village.wide .vl-cloud.c2 { width: 11%; } .village.wide .vl-cloud.c3 { width: 9%; }
.village.paused *, .village.paused *::before, .village.paused *::after { animation-play-state: paused !important; }
.vst { animation: vtwinkle 3.2s steps(2, jump-none) infinite; } @keyframes vtwinkle { 50% { opacity: .35; } }
.vw, .vg { opacity: var(--lights); }
.vf { opacity: calc(.65 + .35 * var(--lights)); transform-box: fill-box; transform-origin: 50% 100%; animation: vflick .6s steps(3, jump-none) infinite alternate; } @keyframes vflick { to { transform: scale(.88, 1.1); } }
.vsw, .vhop, .vrip, .vjump, .vbob, .vpup, .eyes { transform-box: fill-box; }
.vsw { transform-origin: 50% 0; animation: vsway 3s steps(8, jump-none) infinite alternate; } @keyframes vsway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.vhop { transform-origin: 50% 100%; animation: vhop 1.8s steps(6, jump-none) infinite; } @keyframes vhop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.vrip { transform-origin: 50% 50%; animation: vrip 3s steps(8, jump-none) infinite; } .vrip.r2 { animation-delay: -1.5s; } @keyframes vrip { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.3); opacity: 0; } }
.vjump { transform-origin: 50% 100%; animation: vjump 4.5s steps(10, jump-none) infinite; } @keyframes vjump { 0%, 70%, 100% { transform: translateY(6px); opacity: 0; } 80% { transform: translateY(-8px); opacity: 1; } 90% { transform: translateY(2px); opacity: 1; } }
.vbob { animation: vbob 2.4s steps(4, jump-none) infinite; } @keyframes vbob { 50% { transform: translateY(2px); } }
.vpup { animation: vpup 5s ease-in-out infinite; } @keyframes vpup { 0%, 40%, 100% { transform: translateX(0); } 55%, 85% { transform: translateX(1.5px); } }

.vb { will-change: auto; position: absolute; z-index: 2; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s; }
.vb-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: brightness(var(--vb)) saturate(var(--vs)) sepia(var(--vw)); pointer-events: none; }
.vb:hover .vb-art, .vb:focus-visible .vb-art { filter: brightness(calc(var(--vb) * 1.15)) saturate(var(--vs)) sepia(var(--vw)) drop-shadow(0 0 5px var(--gold)); }
.vb:hover, .vb:focus-visible { transform: translateY(-2px); outline: none; z-index: 4; }
.vb:active { transform: translateY(1px); }
.vb.dim .vb-art { opacity: .6; }
.vb::after { content: ""; position: absolute; inset: -6px; }   /* větší dotyková plocha */
.vpin { position: absolute; left: 50%; top: -34px; width: 34px; height: 41px; margin-left: -17px; color: var(--bone); z-index: 3; filter: drop-shadow(0 2px 0 rgba(10, 5, 16, .8)); pointer-events: none; }
.vpin svg { width: 100%; height: 100%; overflow: visible; }
.vpin-bg { fill: var(--v2); stroke: var(--gold); stroke-width: 2.6; }
.vpin .f { fill: currentColor; }
.vbadge { position: absolute; left: 66%; top: -10px; padding: 1px 6px; border-radius: 9px; background: var(--mag); color: #fff; font: 800 .66rem var(--body); font-style: normal; border: 2px solid var(--ink); animation: badgepulse 1.6s ease-in-out infinite; white-space: nowrap; }
.vlabel { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); padding: 1px 7px; border: 2px solid var(--ink); border-radius: 3px; background: rgba(18, 10, 26, .88); color: var(--gold); font: 700 .78rem var(--display); letter-spacing: .02em; white-space: nowrap; pointer-events: none; z-index: 3; }
.vlabel small { color: var(--bone-d); font: 800 .62rem var(--body); }
.vb.shop .vlabel { color: var(--bone); }
.vl-time { position: absolute; right: 6px; top: 6px; z-index: 6; padding: 1px 8px; border: 2px solid var(--ink); border-radius: 9px; background: rgba(18, 10, 26, .7); color: var(--bone); font: 700 .7rem var(--body); letter-spacing: .04em; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .village *, .village *::before, .village *::after { animation: none !important; transition: none !important; } }

/* ===== v4: výroba kostek a spellů (prach + mince + drahokamy), vzácnost epic, nové kostky ===== */
.r-epic { color: #ff9a3c; text-shadow: 0 0 6px rgba(255, 154, 60, .45); }
.cact { display: grid; justify-items: end; gap: 4px; }
.cmat { display: flex; flex-wrap: wrap; gap: 2px 8px; justify-content: flex-end; font: 700 .68rem/1.2 var(--body); color: var(--bone-d); }
.cmat .short { color: #ff7a8a; }
.sc-card.epic.got .sc-hit { border-color: #ff9a3c; box-shadow: 0 0 10px rgba(255, 154, 60, .35); }

/* v4: barvy nových kostek */
.od.t-low { --ring: #b8c4d0; --d-body: #e4eaf0; --d-pip: #3a4a5a; --d-rim: #8a9aaa; } .odw.t-low, .odnames .odn.t-low, .pkn.t-low { --ring: #b8c4d0; }
.od.t-stone { --ring: #9a9aa6; --d-body: #cfcfd4; --d-pip: #2f2f38; --d-rim: #7a7a86; } .odw.t-stone, .odnames .odn.t-stone, .pkn.t-stone { --ring: #9a9aa6; }
.od.t-steady { --ring: #7fd6c2; --d-body: #c9f3e8; --d-pip: #0f6b58; --d-rim: #3cb89c; } .odw.t-steady, .odnames .odn.t-steady, .pkn.t-steady { --ring: #7fd6c2; }
.od.t-trio { --ring: #ffd36a; --d-body: #fff0b8; --d-pip: #8a5a00; --d-rim: #e0b020; } .odw.t-trio, .odnames .odn.t-trio, .pkn.t-trio { --ring: #ffd36a; }
.od.t-wisp { --ring: #ff8ad8; --d-body: #ffd0f0; --d-pip: #a0207a; --d-rim: #ee5cc0; } .odw.t-wisp, .odnames .odn.t-wisp, .pkn.t-wisp { --ring: #ff8ad8; }
.od.t-brute { --ring: #e8703c; --d-body: #ffc4a8; --d-pip: #8f2a00; --d-rim: #e0522a; } .odw.t-brute, .odnames .odn.t-brute, .pkn.t-brute { --ring: #e8703c; }
.od.t-iron { --ring: #aab4c8; --d-body: #c8d0e0; --d-pip: #28344e; --d-rim: #6a7aa0; } .odw.t-iron, .odnames .odn.t-iron, .pkn.t-iron { --ring: #aab4c8; }
.od.t-cleaver { --ring: #b6f03c; --d-body: #e4ffb0; --d-pip: #3a6600; --d-rim: #8ad020; } .odw.t-cleaver, .odnames .odn.t-cleaver, .pkn.t-cleaver { --ring: #b6f03c; }
.od.t-fury { --ring: #ff5a3c; --d-body: #ff9c88; --d-pip: #6a0a00; --d-rim: #e02a10; } .odw.t-fury, .odnames .odn.t-fury, .pkn.t-fury { --ring: #ff5a3c; }
.od.t-bastion { --ring: #c8d86a; --d-body: #eef3b0; --d-pip: #4a5a10; --d-rim: #a8b82a; } .odw.t-bastion, .odnames .odn.t-bastion, .pkn.t-bastion { --ring: #c8d86a; }
.od.t-reaper { --ring: #c060ff; --d-body: #6a24b8; --d-pip: #f4e0ff; --d-rim: #d070ff; } .odw.t-reaper, .odnames .odn.t-reaper, .pkn.t-reaper { --ring: #c060ff; }
.od.t-crown { --ring: #ffd23c; --d-body: #ffe27a; --d-pip: #7a4a00; --d-rim: #ffb000; } .odw.t-crown, .odnames .odn.t-crown, .pkn.t-crown { --ring: #ffd23c; }
.od.t-reaper .od-die, .od.t-crown .od-die { filter: drop-shadow(0 0 5px var(--ring)); }

/* Sanctuary: kostky na stojanu menší, ať se vejdou do karet a do síně */
.sc-cards.dice { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.sc-cards.dice .sc-d { min-height: 36px; }
.sc-cards.dice .sc-d .od, .sc-cards.dice .sc-d .dthumb { --od: 34px; width: 34px; height: 34px; margin: 2px 0 4px; }
.sc-cards.dice .sc-hit { padding: 6px 4px; }
.sc-cards.dice .sc-hit b { font-size: .8rem; } .sc-cards.dice .sc-hit small { font-size: .62rem; }