/* ---------- tokens ---------- */
:root {
  --ink: #0a0812;        /* noční obloha nad hradem */
  --ink-2: #141020;
  --parchment: #efe3c6;  /* text */
  --parchment-dim: #b7aa8c;
  --gold: #c9a227;
  --gold-2: #e8c75a;
  --correct: #1e5c30;  /* Slytherin */
  --partial: #7a4e00;  /* Mrzimor */
  --wrong:   #7d0a0a;  /* Nebelvír */
  --tile-border: rgba(201,162,39,.45);
  --display: "Cinzel", serif;
  --body: "EB Garamond", Georgia, serif;
}

/* ---------- sparkle particles ---------- */
.wand-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  user-select: none;
  line-height: 1;
  text-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
  will-change: transform, opacity;
}

html, body { min-height: 100%; }
body {
  background: radial-gradient(1400px 700px at 50% -15%, #2e2550 0%, #180f2a 45%, var(--ink) 70%);
  color: var(--parchment);
  font-family: var(--body);
  font-size: 1.2rem;
  position: relative;
  overflow-x: hidden;
}

/* ---------- animované hvězdy na pozadí ---------- */
@keyframes twinkle-a {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1;   }
}
@keyframes twinkle-b {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0.1; }
}
@keyframes twinkle-c {
  0%, 100% { opacity: 0.5; }
  30%       { opacity: 0.95; }
  70%       { opacity: 0.2; }
}
@keyframes shooting {
  0%   { transform: translateX(0)    translateY(0)    scaleX(0); opacity: 0; }
  3%   { opacity: 1; }
  100% { transform: translateX(600px) translateY(300px) scaleX(1); opacity: 0; }
}

/* vrstva 1 – drobné hvězdy, pomalu blikají */
.stars {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image:
    radial-gradient(1px   1px   at  7% 18%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1px   1px   at 20% 30%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px   1px   at 35%  8%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1px   1px   at 52% 22%, rgba(255,255,255,.7)  50%, transparent 51%),
    radial-gradient(1px   1px   at 67% 12%, rgba(255,255,255,.8)  50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78%  5%, rgba(255,255,255,.9)  50%, transparent 51%),
    radial-gradient(1px   1px   at 90% 28%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1px   1px   at 13% 55%, rgba(255,255,255,.6)  50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 28% 70%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px   1px   at 45% 48%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px   1px   at 61% 65%, rgba(255,255,255,.7)  50%, transparent 51%),
    radial-gradient(1px   1px   at 74% 82%, rgba(255,255,255,.6)  50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 55%, rgba(255,255,255,.8)  50%, transparent 51%),
    radial-gradient(1px   1px   at 95% 70%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1px   1px   at  4% 90%, rgba(255,255,255,.7)  50%, transparent 51%),
    radial-gradient(1px   1px   at 40% 93%, rgba(255,255,255,.6)  50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 57% 87%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px   1px   at 82% 96%, rgba(255,255,255,.55) 50%, transparent 51%);
  animation: twinkle-a 5s ease-in-out infinite;
}

/* vrstva 2 – střední hvězdy, rychlejší blikání */
.stars::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 10%, rgba(255,255,255,.9)  50%, transparent 51%),
    radial-gradient(1px   1px   at 25% 42%, rgba(255,255,255,.7)  50%, transparent 51%),
    radial-gradient(2px   2px   at 38% 20%, rgba(200,220,255,.8)  50%, transparent 51%),
    radial-gradient(1px   1px   at 50%  5%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 35%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1px   1px   at 76% 18%, rgba(255,255,255,.8)  50%, transparent 51%),
    radial-gradient(2px   2px   at 88% 42%, rgba(200,200,255,.7)  50%, transparent 51%),
    radial-gradient(1px   1px   at  6% 62%, rgba(255,255,255,.6)  50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 19% 80%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px   1px   at 33% 58%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px   1px   at 47% 75%, rgba(255,255,255,.7)  50%, transparent 51%),
    radial-gradient(2px   2px   at 60% 95%, rgba(255,240,200,.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 60%, rgba(255,255,255,.8)  50%, transparent 51%),
    radial-gradient(1px   1px   at 84% 78%, rgba(255,255,255,.6)  50%, transparent 51%),
    radial-gradient(1px   1px   at 97% 50%, rgba(255,255,255,.7)  50%, transparent 51%),
    radial-gradient(2px   2px   at 43% 88%, rgba(200,220,255,.6)  50%, transparent 51%);
  animation: twinkle-b 3.5s 0.8s ease-in-out infinite;
}

/* vrstva 3 – jasné hvězdy + zlatavé akcenty */
.stars::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px   2px   at  9%  4%, rgba(255,250,220,.95) 50%, transparent 51%),
    radial-gradient(1px   1px   at 22% 16%, rgba(255,255,255,.8)  50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 41% 32%, rgba(255,255,255,1)   50%, transparent 51%),
    radial-gradient(1px   1px   at 55% 58%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(2px   2px   at 70% 24%, rgba(220,235,255,.9)  50%, transparent 51%),
    radial-gradient(1px   1px   at 83% 68%, rgba(255,255,255,.7)  50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 94% 15%, rgba(255,250,210,.95) 50%, transparent 51%),
    radial-gradient(1px   1px   at 16% 85%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(2px   2px   at 30% 97%, rgba(200,215,255,.8)  50%, transparent 51%),
    radial-gradient(1px   1px   at 48% 72%, rgba(255,255,255,.7)  50%, transparent 51%),
    radial-gradient(2px   2px   at 64% 88%, rgba(255,248,220,.85) 50%, transparent 51%),
    radial-gradient(1px   1px   at 79% 44%, rgba(255,255,255,.6)  50%, transparent 51%),
    radial-gradient(2.5px 2.5px at  2% 38%, rgba(255,255,255,.9)  50%, transparent 51%),
    radial-gradient(1px   1px   at 89% 92%, rgba(255,255,255,.65) 50%, transparent 51%);
  animation: twinkle-c 7s 3s ease-in-out infinite;
}

/* střelající hvězda */
.shooting-star {
  position: fixed;
  top: 8%; left: -5%;
  width: 180px; height: 1.5px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 60%, rgba(255,250,200,1) 100%);
  border-radius: 50%;
  pointer-events: none; z-index: -1;
  transform-origin: right center;
  animation: shooting 8s 2s ease-in infinite;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.8));
}
.shooting-star:nth-child(2) {
  top: 35%; left: -5%;
  width: 120px;
  animation-delay: 13s;
  animation-duration: 6s;
}
.shooting-star:nth-child(3) {
  top: 15%; left: 40%;
  width: 200px;
  animation-delay: 21s;
  animation-duration: 7s;
}

/* ---------- plovoucí magické orby ---------- */
@keyframes float-orb {
  0%, 100% { transform: translateY(0)    translateX(0);    opacity: 0.4; }
  33%       { transform: translateY(-45px) translateX(30px);  opacity: 0.65; }
  66%       { transform: translateY(25px)  translateX(-25px); opacity: 0.3; }
}
.magical-orbs {
  position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  animation: float-orb ease-in-out infinite;
}

/* ---------- hlavička ---------- */
.eyebrow {
  font-family: var(--display);
  font-size: .85rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

@keyframes title-glow {
  0%, 100% { text-shadow: 0 0 28px rgba(232,199,90,.25), 0 2px 12px rgba(0,0,0,.6); }
  50%       { text-shadow: 0 0 55px rgba(232,199,90,.5), 0 0 100px rgba(232,199,90,.15), 0 2px 12px rgba(0,0,0,.6); }
}
.title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  letter-spacing: .06em;
  margin: .1em 0 0;
  color: var(--gold-2);
  animation: title-glow 4s ease-in-out infinite;
}

/* ornamentální oddělovač pod titulkem */
.title-ornament {
  display: block;
  text-align: center;
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: .5em;
  opacity: .65;
  margin-top: .1rem;
}
.mode-switch .btn-mode {
  font-family: var(--display);
  font-size: .9rem;
  letter-spacing: .12em;
  color: var(--parchment-dim);
  border: 1px solid var(--tile-border);
  background: transparent;
}
.mode-switch .btn-mode.active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn-ghost {
  font-family: var(--display);
  color: var(--parchment-dim);
  border: 1px solid var(--tile-border);
}
.btn-ghost:hover, .mode-switch .btn-mode:hover { color: var(--gold-2); border-color: var(--gold-2); }

/* ---------- vyhledávání ---------- */
.search-wrap { max-width: 560px; position: relative; }
.search-box {
  display: flex;
  border: 2px solid var(--gold);
  border-radius: 14px;
  background: var(--ink-2);
  box-shadow: 0 0 0 6px rgba(201,162,39,.08), 0 10px 40px rgba(0,0,0,.5);
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.search-box:focus-within {
  box-shadow: 0 0 0 6px rgba(201,162,39,.18), 0 10px 40px rgba(0,0,0,.5), 0 0 30px rgba(201,162,39,.25);
}
.search-input, .search-input:focus {
  background: transparent;
  border: 0;
  color: var(--parchment);
  font-family: var(--body);
  font-size: 1.35rem;
  padding: .8rem 1.1rem;
  box-shadow: none;
}
.search-input::placeholder { color: var(--parchment-dim); }
.search-btn {
  background: var(--gold);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  font-size: 1.3rem;
  padding: 0 1.2rem;
}
.search-btn:hover { background: var(--gold-2); }

.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--ink-2);
  border: 1px solid var(--tile-border);
  border-radius: 10px;
  max-height: 320px; overflow-y: auto;
  z-index: 20;
  margin: 0;
  display: none;
}
.suggestions li {
  display: flex; align-items: center; gap: .65rem;
  padding: .35rem .7rem;
  cursor: pointer;
}
.suggestions li:hover, .suggestions li.active { background: rgba(201,162,39,.15); }
.suggestions .sg-avatar {
  width: 40px; height: 40px;
  object-fit: cover; object-position: center top;
  border-radius: 5px;
  flex-shrink: 0;
  border: 1px solid var(--tile-border);
}
.suggestions .sg-name { font-weight: 600; }
.suggestions .sg-kind { color: var(--parchment-dim); font-size: .95rem; margin-left: auto; font-style: italic; }
.suggestions .sg-used { opacity: .4; cursor: default; }

.status-line { color: var(--parchment-dim); }
.link-muted, .btn-link.link-muted {
  color: var(--parchment-dim);
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
  padding: 0;
}
.btn-link.link-muted:hover { color: var(--gold-2); text-decoration: underline; }

/* ---------- herní tabulka ---------- */
.board-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 58vh;
  min-height: 200px;
  padding-bottom: .5rem;
  /* neviditelný scrollbar */
  scrollbar-width: none;
}
.board-wrap::-webkit-scrollbar { display: none; }

.board { min-width: 880px; margin: 0 auto; }

/* sticky záhlaví uvnitř scroll oblasti */
.board-sticky-top {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--ink);
  padding-bottom: 4px;
}

.board-row {
  display: grid;
  grid-template-columns: 100px repeat(8, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

/* known row – uhádnuté hodnoty pod záhlavím */
.board-row.board-known {
  margin-bottom: 10px;
}
.known-cell {
  min-height: 0;
  padding: .25rem .4rem;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--parchment);
  background: rgba(201,162,39,.06);
  border-color: rgba(201,162,39,.22);
  border-top: none;
  border-radius: 0 0 7px 7px;
  transition: opacity .25s;
}
.known-cell.portrait-known {
  background: transparent;
  border: none;
}
.known-cell:not(.has-value) { opacity: 0; }
.cell {
  min-height: 96px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: .4rem .35rem;
  font-size: 1.05rem;
  line-height: 1.2;
  border: 1px solid var(--tile-border);
  position: relative;
}
.cell.head {
  min-height: 0;
  border: 0;
  border-bottom: 2px solid var(--parchment);
  border-radius: 0;
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem .2rem .6rem;
  color: var(--parchment);
}

/* „portrét" postavy – celá buňka je obrázek */
.cell.portrait {
  padding: 0;
  overflow: hidden;
  background: #14111c;
}
.cell.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 7px;
}
.cell.portrait .initial {
  font-family: var(--display);
  font-size: 1.8rem;
  color: var(--gold-2);
  line-height: 1;
}

/* barvy + 3D flip */
.cell.tile { perspective: 600px; border: 0; padding: 0; background: transparent; }
.tile-inner {
  width: 100%; height: 100%; min-height: 96px;
  border-radius: 8px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,.1,.2,1);
  transform: rotateX(90deg);
  display: flex; align-items: center; justify-content: center;
  padding: .4rem .35rem;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.35);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.tile.flipped .tile-inner { transform: rotateX(0deg); }
.tile-inner.correct { background: linear-gradient(160deg, #2e8a4a, var(--correct)); }
.tile-inner.partial { background: linear-gradient(160deg, #c07c10, var(--partial)); }
.tile-inner.wrong   { background: linear-gradient(160deg, #b51e1e, var(--wrong)); }
.tile-inner.up::after, .tile-inner.down::after {
  content: "";
  position: absolute; inset: 0;
  background: center / 44% no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='rgba(0,0,0,.28)' d='M12 2 3 13h6v9h6v-9h6z'/></svg>");
  border-radius: 8px;
}
.tile-inner.down::after { transform: rotate(180deg); }
.tile-inner { position: relative; }
.tile-inner span { position: relative; z-index: 1; }

/* ---------- legenda ---------- */
.legend {
  max-width: 720px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem;
  color: var(--parchment-dim);
  font-size: 1.05rem;
}
.swatch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 3px; margin-right: .35rem;
  vertical-align: -3px; font-style: normal; font-size: .75rem; color: #fff;
}
.swatch.correct { background: var(--correct); }
.swatch.partial { background: var(--partial); }
.swatch.wrong { background: var(--wrong); }
.swatch.arrow { background: var(--wrong); }
.help-list { list-style: none; padding: 0; }
.help-list li { margin-bottom: .4rem; }

/* ---------- modály ---------- */
.hp-modal {
  background: linear-gradient(160deg, #1a1430 0%, var(--ink-2) 60%);
  color: var(--parchment);
  border: 1px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 0 80px rgba(201,162,39,.2), inset 0 1px 0 rgba(201,162,39,.1);
}
.result-name {
  font-family: var(--display);
  font-size: 2.2rem;
  color: var(--gold-2);
  margin: .2rem 0 .6rem;
}
.btn-gold {
  background: var(--gold);
  color: var(--ink);
  font-family: var(--display);
  letter-spacing: .1em;
  font-size: .95rem;
  border: 0;
}
.btn-gold:hover { background: var(--gold-2); color: var(--ink); }
.footer { color: var(--parchment-dim); }

@media (max-width: 576px) {
  .cell { font-size: .92rem; min-height: 84px; }
  .tile-inner { min-height: 84px; }
}