:root {
  --bg: #14100b;
  --panel: #241b12;
  --panel2: #2f2418;
  --ink: #f6ecd6;
  --muted: #c4b293;
  --gold: #e8b84a;
  --gold2: #f7d27a;
  --gold-dark: #8a6420;
  --danger: #e2584f;
  --ok: #73d68f;
  --blue: #6fb6ff;
  --tile: 56px;
  --radius: 14px;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(ellipse at top, #3a2a18 0%, transparent 60%),
    linear-gradient(180deg, #1c150d 0%, #0e0b07 100%);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}
[hidden] { display: none !important; }

.screen { display: none; min-height: 100dvh; }
.screen.active { display: flex; flex-direction: column; }

/* ---------- Ovládací prvky ---------- */
label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.6rem 0 0.25rem;
  letter-spacing: 0.02em;
}
input, select, textarea {
  font: inherit;
  font-size: 16px; /* bez zoomu na iOS */
  width: 100%;
  border-radius: 10px;
  border: 1px solid #5a4528;
  background: #120d08;
  color: var(--ink);
  padding: 0.7rem 0.8rem;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,184,74,.2); }
button { font: inherit; cursor: pointer; color: inherit; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid #000;
  border-radius: 12px;
  padding: .65rem 1rem;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(180deg, #4a3a25, #2f2416);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 0 #000, 0 3px 8px rgba(0,0,0,.4);
  transition: transform .06s, filter .15s;
  user-select: none;
}
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 #000; }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; }
.btn.big { width: 100%; padding: .85rem 1rem; margin-top: .6rem; font-size: 1.02rem; }
.btn.huge { width: 100%; padding: 1.05rem; font-size: 1.35rem; margin-top: .6rem; letter-spacing: .04em; }
.btn.small { padding: .35rem .7rem; font-size: .85rem; }
.btn.gold {
  background: linear-gradient(180deg, var(--gold2), #c8901f 60%, #a5741a);
  color: #2a1a05;
  border-color: #5c3f0b;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.btn.red {
  background: linear-gradient(180deg, #e66a5c, #b3322a 60%, #8f241e);
  color: #fff;
  border-color: #4d0f0b;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.btn.ghost { background: linear-gradient(180deg, #3a2e1f, #241b11); }

.panel, .card {
  position: relative;
  background: linear-gradient(180deg, rgba(48,36,22,.97), rgba(30,22,13,.97));
  border: 2px solid var(--gold-dark);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: inset 0 0 0 1px rgba(247,210,122,.25), 0 10px 30px rgba(0,0,0,.5);
}
.err { color: var(--danger); font-size: .9rem; min-height: 1.2em; margin-top: .4rem; }
.warn {
  background: rgba(226,88,79,.15);
  border: 1px solid rgba(226,88,79,.5);
  color: #ffd6d2;
  border-radius: 10px;
  padding: .55rem .7rem;
  font-size: .9rem;
}
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.center-text { text-align: center; }
.note { font-size: .78rem; color: var(--muted); margin: .5rem 0 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.title {
  font-family: var(--serif);
  color: var(--gold2);
  margin: 0 0 .4rem;
  font-size: 1.45rem;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(232,184,74,.25);
}
.title.danger { color: #ff8b80; }
.sub-title {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.05rem;
  margin: 1rem 0 .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sub-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-dark), transparent); }

/* ---------- Přihlášení ---------- */
.auth {
  background:
    linear-gradient(180deg, rgba(14,10,6,.55), rgba(14,10,6,.92) 70%),
    url(../../assets/mockups/mockup_6x6.jpg) center / cover no-repeat;
}
.auth-inner {
  width: min(440px, 100%);
  margin: 0 auto;
  padding: max(1.2rem, env(safe-area-inset-top)) 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.logo { text-align: center; margin: 1.2rem 0 .4rem; }
.logo-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 16vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #fff3c4, var(--gold) 55%, #a8701b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 #2a1a05) drop-shadow(0 6px 12px rgba(0,0,0,.6));
}
.logo-sub { color: var(--gold2); font-family: var(--serif); letter-spacing: .25em; text-transform: uppercase; font-size: .78rem; margin-top: .4rem; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.tab {
  border: 2px solid var(--gold-dark);
  border-radius: 12px;
  background: rgba(20,14,8,.85);
  color: var(--muted);
  padding: .65rem;
  font-weight: 700;
}
.tab.active { color: #2a1a05; background: linear-gradient(180deg, var(--gold2), #c8901f); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.seg button {
  border: 1px solid #5a4528;
  background: #120d08;
  border-radius: 10px;
  padding: .55rem;
  color: var(--muted);
}
.seg button.active { border-color: var(--gold); color: var(--gold2); background: #2a1f12; }
.chars { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-top: .55rem; }
.char-opt {
  border: 2px solid #4a3920;
  border-radius: 12px;
  padding: .3rem .2rem .35rem;
  background: radial-gradient(circle at 50% 35%, #3b4a2b, #161009 75%);
  text-align: center;
}
.char-opt.selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,184,74,.3), 0 0 14px rgba(232,184,74,.35); }
.char-opt img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.char-opt span { font-size: .72rem; display: block; margin-top: .15rem; font-weight: 700; color: var(--gold2); }
.foot { text-align: center; font-size: .85rem; }
.foot a { color: var(--muted); }

/* ---------- HUD ---------- */
.game { height: 100dvh; overflow: hidden; }
.hud {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: calc(.45rem + env(safe-area-inset-top)) .6rem .45rem;
  background: linear-gradient(180deg, #2f2416, #1a130b);
  border-bottom: 2px solid var(--gold-dark);
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  z-index: 10;
}
.hud-portrait {
  position: relative;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: radial-gradient(circle at 50% 40%, #46603a, #18110a 75%);
  padding: 0;
  overflow: visible;
  box-shadow: 0 0 0 2px #000, 0 0 10px rgba(232,184,74,.3);
}
.hud-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; border-radius: 50%; }
.hud-portrait .lvl {
  position: absolute;
  right: -6px;
  bottom: -4px;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--gold2), #b47e1b);
  color: #2a1a05;
  font-weight: 900;
  font-size: .8rem;
  line-height: 22px;
  border: 1px solid #000;
}
.pick-dot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-weight: 900;
  line-height: 22px;
  font-size: .85rem;
  border: 1px solid #000;
  animation: pulse 1.2s infinite;
}
.hud-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.hud-name { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-name span { color: var(--muted); font-size: .78rem; }
.hud-lives { font-size: .82rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.hud-lives .hearts { letter-spacing: -1px; }
.hud-lives .regen { color: var(--muted); font-size: .74rem; }
.hud-lives.zero { color: #ff9a92; font-weight: 700; }
.xpbar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: #0b0805;
  border: 1px solid #5a4528;
  overflow: hidden;
}
.xpbar.big { height: 20px; border-radius: 10px; margin-top: .35rem; }
.xpfill { height: 100%; width: 0; background: linear-gradient(180deg, #8fe3ff, #2f8fd6); box-shadow: 0 0 8px rgba(111,182,255,.6); transition: width .5s; }
.xpbar span { position: absolute; inset: 0; text-align: center; font-size: .66rem; line-height: 12px; font-weight: 700; text-shadow: 0 1px 1px #000; }
.xpbar.big span { font-size: .78rem; line-height: 18px; }
.hud-actions { display: flex; gap: .3rem; flex: none; }
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #000;
  background: linear-gradient(180deg, #4a3a25, #2a2014);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 0 #000;
  font-size: 1.15rem;
  padding: 0;
}
.icon-btn:active { transform: translateY(1px); }
@media (max-width: 380px) {
  .hud-actions { gap: .2rem; }
  .icon-btn { width: 36px; height: 36px; font-size: 1rem; }
}

/* ---------- Mapa ---------- */
.map-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  overflow: hidden;
  user-select: none;
  min-height: 0;
}
.map-stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid var(--gold-dark);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(247,210,122,.35), 0 14px 34px rgba(0,0,0,.6);
  background: #2c6fb0;
}
.map-stage {
  width: calc(var(--tile) * 7 + 6px);
  height: calc(var(--tile) * var(--rows, 7) + 6px);
  cursor: pointer;
  touch-action: manipulation;
}
.map-stage.loading .world { opacity: 0; }
.world {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  transition: opacity .3s;
}
.layer { position: absolute; left: 0; top: 0; }
.tile {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--tile) + 1px);
  height: calc(var(--tile) + 1px);
  overflow: hidden;
  contain: strict;
}
.tile .ground { position: absolute; inset: 0; background-size: cover; }
.tile .ground.r1 { transform: rotate(90deg); }
.tile .ground.r2 { transform: rotate(180deg); }
.tile .ground.r3 { transform: rotate(270deg); }
.tile .ground.water { animation: water 6s linear infinite; background-size: 200% 200%; background-repeat: repeat; }
.tile .edge { position: absolute; inset: 0; pointer-events: none; }
.tile.t-rock .ground { filter: brightness(.92) saturate(.9); }
.map-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35) 100%);
  z-index: 2;
}
.coords {
  position: absolute;
  right: 6px;
  bottom: 5px;
  z-index: 3;
  font-size: .68rem;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.45);
  padding: 1px 6px;
  border-radius: 8px;
  pointer-events: none;
}

/* Objekty ve světě: pozice přes transform, hloubka podle řádku */
.ent, .deco, .tap-ring, .dust {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tile);
  height: var(--tile);
  pointer-events: none;
}
.ent { will-change: transform; }
.ent.other { transition: transform .45s linear; }
.ent.appear { animation: fadeIn .35s ease-out; }
.ent.appear .body { animation: appear .35s ease-out; }
.ent.vanish { animation: vanish .35s ease-in forwards; }
.ent .shadow {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 5%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%);
}
.ent .body {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 9%;
  height: 88%;
  transform-origin: 50% 100%;
}
.ent .body img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
  display: block;
}
.ent.me .body { left: 2%; right: 2%; height: 96%; }
.ent.me .body img { filter: drop-shadow(0 0 3px rgba(255,230,150,.75)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.ent.face-left .body img { transform: scaleX(-1); }
.ent.walking .body { animation: walkBob .4s ease-in-out infinite; }
.ent.walking .shadow { animation: walkShadow .4s ease-in-out infinite; }
.ent.face-up .body img { filter: brightness(.88) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
/* Vrhané stíny: slunce vlevo nahoře, stín padá doprava dolů (transformace musí odpovídat CAST_TF v game.js). */
.ent .cast {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 9%;
  height: 88%;
  transform-origin: 50% var(--foot, 97%);
  transform: skewX(32deg) scaleY(-0.36);
  opacity: .34;
  pointer-events: none;
}
.ent .cast img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }
.ent.me .cast { left: 2%; right: 2%; height: 96%; }
.ent .cast.has-sheet { left: -8%; right: -8%; bottom: 6%; height: 104%; --foot: 96%; }
.ent .cast .sheet { filter: none !important; }
.ent.mob .cast { opacity: .28; }
.ent.ghost .cast { animation: vanish .8s ease-in forwards; }
.deco-cast {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: 50% var(--foot, 100%);
  opacity: .34;
  pointer-events: none;
}
.deco-cast.deco-tree { --foot: 86%; }
.deco-cast.deco-bush { --foot: 90%; }
.deco-cast.deco-tree { width: calc(var(--tile) * 1.18); height: calc(var(--tile) * 1.35); margin-left: calc(var(--tile) * -0.09); margin-top: calc(var(--tile) * -0.37); }
.deco-cast.deco-bush { width: calc(var(--tile) * .86); height: calc(var(--tile) * .7); margin-left: calc(var(--tile) * .07); margin-top: calc(var(--tile) * .28); }
.ent .body.has-sheet { left: -8%; right: -8%; bottom: 6%; height: 104%; }
.ent .sheet {
  height: 100%;
  aspect-ratio: 200 / 240;
  margin: 0 auto;
  background: var(--s-down) center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
.ent.me .sheet { filter: drop-shadow(0 0 3px rgba(255,230,150,.75)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.ent.dir-up .sheet { background-image: var(--s-up); }
.ent.dir-left .sheet, .ent.dir-right .sheet { background-image: var(--s-left); }
.ent.dir-right .sheet { transform: scaleX(-1); }
.ent.walking .body.has-sheet { animation: sheetBob .25s ease-in-out infinite; }
@keyframes sheetBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
.ent .sprite-mob { animation: bob 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
.ent .label {
  position: absolute;
  left: -15%;
  right: -15%;
  top: -6%;
  font-size: .56rem;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  font-weight: 700;
}
.ent .label b {
  background: var(--gold);
  color: #2a1a05;
  border-radius: 6px;
  padding: 0 3px;
  margin-right: 2px;
  text-shadow: none;
}
.ent .swords { position: absolute; right: 0; top: 20%; font-size: .9rem; animation: pulse 1s infinite; }
.ent .mob-xp {
  position: absolute;
  left: 50%;
  top: -2%;
  transform: translateX(-50%);
  font-size: .55rem;
  font-weight: 900;
  color: #d8f3ff;
  background: rgba(10,40,70,.75);
  border-radius: 6px;
  padding: 0 4px;
  white-space: nowrap;
}
.deco {
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.4));
}
.deco.deco-tree { width: calc(var(--tile) * 1.18); height: calc(var(--tile) * 1.35); margin-left: calc(var(--tile) * -0.09); margin-top: calc(var(--tile) * -0.37); }
.deco.deco-bush { width: calc(var(--tile) * .86); height: calc(var(--tile) * .7); margin-left: calc(var(--tile) * .07); margin-top: calc(var(--tile) * .28); }
.tap-ring { z-index: 9999; }
.tap-ring::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 3px solid rgba(255,240,180,.95);
  box-shadow: 0 0 10px rgba(255,220,120,.9);
  animation: tap .5s ease-out forwards;
}
.tap-ring.blocked::after { border-color: rgba(255,90,80,.95); box-shadow: 0 0 10px rgba(255,80,60,.9); }
.dust::after {
  content: "";
  position: absolute;
  left: 38%;
  bottom: 6%;
  width: 24%;
  height: 12%;
  border-radius: 50%;
  background: rgba(235,225,200,.7);
  animation: dust .55s ease-out forwards;
}
.hint {
  text-align: center;
  color: var(--muted);
  font-size: .82rem;
  margin: 0;
  padding: .2rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  min-height: 2.2em;
}

/* ---------- Okna ---------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--vvtop, 0px);
  bottom: auto;
  height: var(--vvh, 100%);
  background: rgba(8,5,2,.72);
  backdrop-filter: blur(2px);
  z-index: 30;
  align-items: flex-end;
  justify-content: center;
  padding: .6rem .6rem calc(.6rem + env(safe-area-inset-bottom));
}
.modal.open { display: flex; animation: fadeIn .15s ease-out; }
.modal.center { align-items: center; }
.modal .box {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(var(--vvh, 100dvh) - 1.2rem);
  overflow: auto;
  background: linear-gradient(180deg, #33271a, #1d150c);
  border: 2px solid var(--gold-dark);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: inset 0 0 0 1px rgba(247,210,122,.3), 0 -6px 30px rgba(0,0,0,.6);
  animation: rise .2s ease-out;
}
.modal.full .box { width: min(560px, 100%); }
.close-x {
  position: absolute;
  right: .55rem;
  top: .55rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #000;
  background: #3a2c1c;
  color: var(--gold2);
  font-size: 1rem;
  z-index: 2;
}

/* PvE */
.combat-top { display: flex; align-items: center; justify-content: center; gap: 1rem; position: relative; }
.mob-stage {
  width: 130px;
  height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 85%, rgba(0,0,0,.45), transparent 55%);
}
.combat-mob { max-width: 120px; max-height: 115px; object-fit: contain; animation: bob 1.6s ease-in-out infinite; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.ring { position: relative; width: 64px; height: 64px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-bg { stroke: #0b0805; }
.ring-fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .3s; }
.ring.urgent .ring-fg { stroke: var(--danger); }
.ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.3rem; }
.ring.urgent span { color: var(--danger); animation: pulse .6s infinite; }
.scroll-card {
  margin: .6rem 0;
  background: linear-gradient(180deg, #f6e7c4, #e6cf9c);
  color: #3a2508;
  border-radius: 10px;
  padding: .85rem 1rem;
  border: 2px solid #9a7234;
  box-shadow: inset 0 0 18px rgba(120,80,20,.35);
  text-align: center;
}
.scroll-card p { margin: 0; font-size: 1.35rem; font-weight: 700; font-family: var(--serif); }
.scroll-card p:empty { display: none; }
.q-image { max-width: 100%; max-height: 38dvh; border-radius: 6px; display: block; margin: .4rem auto 0; }
#combatAnswer { font-size: 1.3rem; text-align: center; font-weight: 700; }
.answer-row { display: flex; gap: .5rem; align-items: stretch; }
.answer-row input { flex: 1; min-width: 0; }
.pow-btn {
  flex: none;
  min-width: 58px;
  min-height: 52px;
  padding: 0 .6rem;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  color: var(--gold2);
  border-color: var(--gold-dark);
}
.pow-btn.pressed { transform: translateY(2px); filter: brightness(1.3); }
.answer-hint { margin: .35rem 0 0; font-size: .74rem; color: var(--muted); text-align: center; }
.answer-hint b { color: var(--ink); font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.kb-open .mob-stage { width: 72px; height: 58px; }
.kb-open .combat-mob { max-width: 64px; max-height: 54px; }
.kb-open .ring { width: 48px; height: 48px; }
.kb-open .ring span { font-size: 1.05rem; }
.kb-open .scroll-card { margin: .35rem 0; padding: .55rem .7rem; }
.kb-open .q-image { max-height: 24dvh; }
.reward { text-align: center; color: var(--blue); margin: .5rem 0 0; font-size: .85rem; }
.yt-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; margin: .4rem 0; background: #000; }
.yt-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Profil */
.profile { display: flex; gap: .8rem; align-items: center; }
.portrait-frame {
  flex: none;
  width: 76px;
  height: 92px;
  border-radius: 12px;
  border: 2px solid var(--gold);
  background: radial-gradient(circle at 50% 40%, #46603a, #18110a 80%);
  box-shadow: 0 0 0 2px #000, 0 0 12px rgba(232,184,74,.25);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.portrait-frame img { width: 92%; height: 94%; object-fit: contain; object-position: center bottom; }
.portrait-frame.big { width: 104px; height: 128px; }

/* PvP */
.battle {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(120,40,20,.35), transparent 60%),
    linear-gradient(180deg, #33271a, #1d150c) !important;
}
.fighters { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .3rem; }
.fighter { position: relative; text-align: center; }
.f-sprite {
  height: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 92%, rgba(0,0,0,.5), transparent 45%);
}
.f-sprite img { max-height: 125px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); transition: filter .2s; }
#fOp .f-sprite img { transform: scaleX(-1); }
.fighter.active .f-sprite img { filter: drop-shadow(0 0 10px rgba(255,220,120,.9)) drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.fighter.hit .f-sprite { animation: shake .4s; }
.fighter.lunge .f-sprite { animation: lunge .35s; }
#fOp.lunge .f-sprite { animation: lungeL .35s; }
.fighter.dead .f-sprite img { filter: grayscale(1) brightness(.6); transform: rotate(80deg) translateY(20%); transition: transform .6s; }
.f-name { font-weight: 700; font-size: .9rem; margin: .3rem 0 .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-name small { color: var(--muted); font-weight: 400; display: block; font-size: .72rem; }
.hpbar { position: relative; height: 18px; border-radius: 9px; background: #0b0805; border: 1px solid #5a4528; overflow: hidden; }
.hpfill { height: 100%; width: 100%; background: linear-gradient(180deg, #ff8a7a, #c4291d); transition: width .45s ease-out; }
.hpbar span { position: absolute; inset: 0; font-size: .74rem; line-height: 16px; font-weight: 900; text-shadow: 0 1px 1px #000; }
.vs {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold2);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(232,184,74,.6);
  align-self: center;
  padding: 0 .2rem;
}
.floaters { position: absolute; left: 0; right: 0; top: 20px; height: 0; pointer-events: none; }
.floater {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.8rem;
  font-weight: 900;
  color: #ff6b5e;
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.8);
  animation: floatUp 1.1s ease-out forwards;
  white-space: nowrap;
}
.floater.heal { color: var(--ok); font-size: 1.2rem; top: 34px; }
.floater.crit { color: #ffe066; font-size: 2.3rem; }
.turn-info { text-align: center; margin: .7rem 0 .3rem; font-weight: 700; font-size: 1.05rem; min-height: 1.4em; }
.turn-info.mine { color: var(--gold2); }
.turn-timer { height: 8px; border-radius: 4px; background: #0b0805; overflow: hidden; border: 1px solid #5a4528; }
.turn-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--danger), var(--gold)); transition: width 1s linear; }
.battle-result { text-align: center; margin-top: .6rem; }
.battle-result .big-word { font-family: var(--serif); font-size: 2.6rem; font-weight: 900; text-shadow: 0 3px 0 #000; }
.battle-result .win { color: #8dff9f; }
.battle-result .lose { color: #ff7a6e; }
.battle-result .facts { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .5rem; font-size: .9rem; }
.battle-result .facts div { background: rgba(0,0,0,.3); border-radius: 8px; padding: .4rem; }
.race-status { text-align: center; margin: .35rem 0 .15rem; min-height: 1.2em; }
.race-actions {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: .35rem 0;
}
.race-actions .race-btn {
  padding: .55rem .75rem; font-size: .92rem; flex: 1 1 auto; min-width: 7.5rem;
}
.race-panel {
  background: rgba(0,0,0,.18); border-radius: 10px; padding: .7rem .85rem; margin-bottom: .8rem; line-height: 1.45;
}
.ans-ok { color: #7dffb0; }
.battle-log {
  list-style: none;
  margin: .7rem 0 0;
  padding: .3rem .5rem;
  max-height: 26dvh;
  overflow: auto;
  background: rgba(0,0,0,.3);
  border-radius: 10px;
  font-size: .82rem;
}
.battle-log li { padding: .25rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.battle-log li.me { color: #ffe9b0; }
.battle-log li.op { color: #ffc4bd; }
.battle-log:empty { display: none; }

/* Hrdina */
.hero .hero-head { display: flex; gap: .9rem; align-items: center; padding-right: 2rem; }
.hero-id { flex: 1; min-width: 0; }
.lvl-line { margin-top: .2rem; }
.lvl-line strong { color: var(--gold2); font-size: 1.2rem; }
.hero-vitals { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .8rem; }
.vital {
  display: flex;
  gap: .5rem;
  align-items: center;
  background: rgba(0,0,0,.28);
  border: 1px solid #4a3920;
  border-radius: 10px;
  padding: .5rem .6rem;
}
.v-icon { font-size: 1.4rem; }
.v-label { font-size: .72rem; color: var(--muted); }
.v-val { font-weight: 900; font-size: 1.05rem; }
.v-val small { display: block; font-weight: 400; font-size: .7rem; color: var(--muted); }
.stat-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: .9rem; }
.stat-table th { text-align: left; color: var(--muted); font-weight: 400; font-size: .75rem; padding: 0 .5rem; }
.stat-table td { background: rgba(0,0,0,.28); padding: .45rem .5rem; }
.stat-table td:first-child { border-radius: 8px 0 0 8px; }
.stat-table td:last-child { border-radius: 0 8px 8px 0; }
.stat-table .tot { font-weight: 900; font-size: 1.05rem; }
.stat-table .base { color: var(--muted); font-size: .72rem; margin-left: .25rem; }
.stat-table .bonus { color: var(--ok); }
.skill-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.skill {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 2px solid var(--gold-dark);
  background: radial-gradient(circle at 50% 35%, #5a4426, #1a120a 80%);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(247,210,122,.25);
  padding: 0;
}
.skill.empty { background: rgba(0,0,0,.3); border-style: dashed; border-color: #4a3920; font-size: 1rem; color: #4a3920; }
.skill.sel { border-color: var(--gold2); box-shadow: 0 0 12px rgba(247,210,122,.5); }
.skill .tier { position: absolute; bottom: 2px; left: 0; right: 0; font-size: .55rem; letter-spacing: 1px; color: var(--gold2); text-shadow: 0 1px 1px #000; }
.skill-detail { margin-top: .6rem; background: rgba(0,0,0,.3); border-radius: 10px; padding: .6rem .7rem; font-size: .88rem; min-height: 3em; color: var(--muted); }
.skill-detail strong { color: var(--gold2); }
.pick-section { margin-top: .4rem; }
.pick-section .sub-title { color: #ffd36e; }
.pick-options { display: grid; gap: .5rem; }
.pick-opt {
  display: flex;
  gap: .7rem;
  align-items: center;
  text-align: left;
  border: 2px solid var(--gold);
  border-radius: 12px;
  background: linear-gradient(180deg, #4a3820, #2a1f12);
  padding: .65rem .7rem;
  box-shadow: 0 0 14px rgba(232,184,74,.25);
  animation: glow 2s infinite;
}
.pick-opt .pi { font-size: 2rem; flex: none; width: 48px; text-align: center; }
.pick-opt .pn { font-weight: 900; color: var(--gold2); }
.pick-opt .pt { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pick-opt .pe { font-size: .88rem; }
.pick-opt .pc { font-size: .75rem; color: var(--muted); }

/* Výběr útoku a obrany */
.stat-pick-help { margin: 0 0 .5rem; }
.stat-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.stat-group { background: rgba(0,0,0,.25); border: 1px solid #4a3920; border-radius: 12px; padding: .5rem; }
.sg-title { font-weight: 900; color: var(--gold2); font-size: .92rem; margin-bottom: .4rem; text-align: center; }
.sg-opts { display: grid; gap: .35rem; }
.stat-opt {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ico name" "ico val";
  column-gap: .45rem;
  align-items: center;
  text-align: left;
  min-height: 48px;
  padding: .4rem .5rem;
  border-radius: 10px;
  border: 2px solid #4a3920;
  background: linear-gradient(180deg, #3a2c1b, #241a10);
}
.stat-opt .so-ico { grid-area: ico; font-size: 1.3rem; }
.stat-opt .so-name { grid-area: name; font-size: .8rem; font-weight: 700; }
.stat-opt .so-val { grid-area: val; font-size: .78rem; color: var(--muted); }
.stat-opt .so-val b { color: var(--ok); }
.stat-opt.sel { border-color: var(--gold2); background: linear-gradient(180deg, #5a4324, #2f2213); box-shadow: 0 0 12px rgba(247,210,122,.45); }
.stat-opt.sel .so-name::before { content: "✔ "; color: var(--gold2); }
.stat-opt:disabled { opacity: .6; }
@media (max-width: 360px) { .stat-pick { grid-template-columns: 1fr; } }

/* Účet */
.btn.danger-outline { background: rgba(226,88,79,.08); border: 2px solid rgba(226,88,79,.6); color: #ffb3ab; box-shadow: none; }

/* Žebříček */
.rank-box { width: min(520px, 100%); }
.rank-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: .9rem; }
.rank-table th { text-align: left; color: var(--muted); font-weight: 400; font-size: .72rem; padding: 0 .45rem; }
.rank-table td { background: rgba(0,0,0,.28); padding: .35rem .45rem; vertical-align: middle; }
.rank-table td:first-child { border-radius: 8px 0 0 8px; }
.rank-table td:last-child { border-radius: 0 8px 8px 0; }
.rank-table .num { text-align: right; font-weight: 900; white-space: nowrap; }
.rank-table .rk { width: 2.4rem; text-align: center; font-weight: 900; font-size: 1.05rem; }
.rank-table .who { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.rank-table .who img { width: 34px; height: 40px; object-fit: contain; flex: none; }
.rank-table .who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rank-table .who b { word-break: break-word; }
.rank-table .who em { color: var(--gold2); font-style: normal; font-size: .78rem; }
.rank-table .who small { display: block; color: var(--muted); font-size: .72rem; }
.rank-table tr.me td { background: rgba(232,184,74,.2); box-shadow: inset 0 1px 0 rgba(247,210,122,.5), inset 0 -1px 0 rgba(247,210,122,.5); }
.rank-table tr.me td:first-child { box-shadow: inset 1px 1px 0 rgba(247,210,122,.5), inset 0 -1px 0 rgba(247,210,122,.5); }
.rank-me { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed #5a4528; }

/* Minimapa */
.minimap-box { text-align: center; }
#minimap {
  width: min(84vw, 360px);
  height: min(84vw, 360px);
  image-rendering: pixelated;
  border-radius: 10px;
  border: 2px solid var(--gold-dark);
  background: #2c6fb0;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  top: calc(76px + env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(92vw, 420px);
  z-index: 50;
  background: linear-gradient(180deg, #3d2f1d, #241a0f);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: .7rem .8rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  animation: drop .25s ease-out;
}
.toast span { flex: 1; }

/* Banner výhra/prohra */
.battle-banner {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0,0,0,.35), rgba(0,0,0,.65));
  animation: fadeIn .15s ease-out;
}
.battle-banner-text {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 15vw, 5.5rem);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  padding: .6rem 1rem;
  text-shadow: 0 0 14px rgba(0,0,0,.8), 0 5px 0 rgba(0,0,0,.6);
  animation: bannerPop .4s cubic-bezier(.2, 1.4, .3, 1);
}
.battle-banner.win .battle-banner-text { color: #8dff9f; }
.battle-banner.lose .battle-banner-text { color: #ff6b5e; }
.battle-banner.level .battle-banner-text { color: var(--gold2); }
.battle-banner-sub {
  display: block;
  margin-top: .5rem;
  font-family: "Trebuchet MS", sans-serif;
  font-size: clamp(1rem, 4.4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  color: #fff3e0;
}

/* ---------- Animace ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes drop { from { transform: translate(-50%, -20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes bannerPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-5%) scale(1.02, .98); } }
@keyframes walkBob {
  0%, 100% { transform: translateY(0) rotate(-4deg) scale(1.03, .97); }
  25% { transform: translateY(-9%) rotate(0deg) scale(.98, 1.03); }
  50% { transform: translateY(0) rotate(4deg) scale(1.03, .97); }
  75% { transform: translateY(-9%) rotate(0deg) scale(.98, 1.03); }
}
@keyframes walkShadow { 0%, 50%, 100% { transform: scaleX(1); opacity: 1; } 25%, 75% { transform: scaleX(.8); opacity: .7; } }
@keyframes dust { from { transform: scale(.5); opacity: .8; } to { transform: scale(2.2) translateY(-20%); opacity: 0; } }
@keyframes appear { from { opacity: 0; transform: scale(.6); } }
@keyframes vanish { to { opacity: 0; } }
@keyframes water { from { background-position: 0 0; } to { background-position: 100% 100%; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes tap { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes lunge { 50% { transform: translateX(30%); } }
@keyframes lungeL { 50% { transform: translateX(-30%); } }
@keyframes floatUp { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.15); opacity: 1; } to { transform: translate(-50%, -60px) scale(1); opacity: 0; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 10px rgba(232,184,74,.2); } 50% { box-shadow: 0 0 18px rgba(232,184,74,.5); } }

@media (min-width: 760px) {
  .hud { padding-left: 1rem; padding-right: 1rem; }
  .modal { align-items: center; }
  .modal .box { border-radius: 18px; }
}

/* Poražená příšera */
.combat-mob.hit { animation: mobHit .5s ease-out; }
.ent.defeated { pointer-events: none; }
.ent.defeated .sprite-mob { animation: none; }
.ent.ghost .body { animation: mobGhost 2.6s ease-in forwards; }
.ent.ghost .shadow { animation: vanish .8s ease-in forwards; }
.ent.ghost .mob-xp { animation: vanish .6s ease-in forwards; }
@keyframes mobHit {
  0% { transform: none; filter: none; }
  15% { transform: translateX(-10px) rotate(-6deg); filter: brightness(2.6); }
  35% { transform: translateX(9px) rotate(5deg); filter: brightness(1.8); }
  55% { transform: translateX(-6px) rotate(-3deg); filter: brightness(2.2); }
  80% { transform: translateX(3px); filter: none; }
  100% { transform: none; filter: none; }
}
@keyframes mobGhost {
  0% { transform: translate(0, 0) scale(1); filter: brightness(1) saturate(1); opacity: 1; }
  15% { transform: translate(0, -4%) scale(1.03); filter: brightness(1.6) saturate(.4) drop-shadow(0 0 6px rgba(255,255,255,.9)); opacity: .85; }
  40% { transform: translate(-5%, -45%) scale(1.02); filter: brightness(1.9) saturate(0) drop-shadow(0 0 8px rgba(220,240,255,.9)); opacity: .6; }
  65% { transform: translate(5%, -95%) scale(.97); filter: brightness(2) saturate(0) drop-shadow(0 0 8px rgba(220,240,255,.8)); opacity: .35; }
  100% { transform: translate(-3%, -160%) scale(.9); filter: brightness(2.2) saturate(0) blur(1px); opacity: 0; }
}