/* ============================================================
   Virtualni tarot - stilovi (samostalan modul)
   Koristi CSS varijable teme iz css/style.css (--lavender, --sage,
   --bg-*, --card-bg, --border, --text...) ali ne ovisi ni o čemu
   drugom - sigurno ga je mijenjati bez diranja ostatka stranice.
   Sve klase su prefiksane `vtar-` (izbjegava koliziju s `tr-`/`nt-`).
   ============================================================ */

:root {
  --vtar-card-w: clamp(58px, 8vw, 120px); /* špilovi u traci / otpad */
  --vtar-ratio: 0.583;                    /* širina/visina tarot karte */
}

.vtar-root { max-width: 1440px; margin: 0 auto; padding-bottom: 2rem; }
.vtar-root .section-subtitle { margin-bottom: 1.6rem; }

/* ---- Stage (fullscreen target) ---- */
.vtar-stage { position: relative; }

/* ---- Toolbar ---- */
.vtar-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.7rem; margin-bottom: 0.6rem;
  background: linear-gradient(180deg, var(--panel-grad-1), var(--panel-grad-2));
  border: 1px solid var(--border); border-radius: 14px;
}

/* ---- Spread izbornik: gumb + panel koji se PROŠIRI u toku (ne padajući) ---- */
.vtar-spread-toggle {
  display: flex; align-items: center; gap: 0.6rem; flex: 1 1 320px; min-width: 0;
  padding: 0.4rem 0.7rem; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer; text-align: left;
  transition: border-color .2s ease;
}
.vtar-spread-toggle:hover, .vtar-spread-toggle[aria-expanded="true"] { border-color: var(--lavender); }
.vtar-spread-toggle-icon { flex-shrink: 0; display: flex; }
.vtar-spread-toggle-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; flex: 1; }
.vtar-toolbar-name { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--lavender); }
.vtar-toolbar-desc { font-family: 'Atkinson Hyperlegible', sans-serif; font-style: italic; font-size: 0.86rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtar-spread-toggle-caret { color: var(--text-muted); font-size: 0.75rem; transition: transform .2s ease; flex-shrink: 0; }
.vtar-spread-toggle[aria-expanded="true"] .vtar-spread-toggle-caret { transform: rotate(180deg); }

/* Panel je u NORMALNOM toku (ne absolute) - proširi se i gurne stol prema dolje,
   pa nema preklapanja/prozirnosti; svaki chip ima ikonu + naziv + opis (bez zasebnog
   hover-tooltipa koji je prije bio odsječen/iza stola). */
.vtar-spread-panel {
  display: none; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.5rem; margin-bottom: 0.8rem; padding: 0.9rem;
  background: var(--card-bg); border: 1px solid var(--lavender); border-radius: 14px;
}
.vtar-spread-panel.vtar-open { display: grid; }

.vtar-spread-chip {
  display: flex; align-items: center; gap: 0.6rem; text-align: left;
  padding: 0.5rem 0.7rem; background: var(--form-bg); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.vtar-spread-chip:hover { border-color: var(--lavender); transform: translateY(-1px); }
.vtar-spread-chip.active { border-color: var(--lavender); background: rgba(168,144,208,0.14); }
.vtar-spread-chip-icon { flex-shrink: 0; display: flex; width: 42px; height: 42px; }
.vtar-spread-chip-icon svg { width: 42px; height: 42px; }
.vtar-spread-chip-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.vtar-spread-chip-text strong { font-family: 'Quicksand', sans-serif; font-size: 0.86rem; font-weight: 600; color: var(--silver-bright); }
.vtar-spread-chip-text small { font-family: 'Atkinson Hyperlegible', sans-serif; font-style: italic; font-size: 0.82rem; color: var(--text-muted); line-height: 1.25; }

.vtar-toolbar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.1rem; }

.vtar-switch { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; user-select: none; }
.vtar-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.vtar-switch-track { width: 38px; height: 21px; background: var(--border); border-radius: 999px; position: relative; transition: background .2s ease; flex-shrink: 0; }
.vtar-switch-thumb { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; background: var(--silver-bright); border-radius: 50%; transition: transform .2s ease; }
.vtar-switch input:checked + .vtar-switch-track { background: var(--lavender); }
.vtar-switch input:checked + .vtar-switch-track .vtar-switch-thumb { transform: translateX(17px); }
.vtar-switch input:disabled + .vtar-switch-track { opacity: 0.4; cursor: not-allowed; }
.vtar-switch-label { font-family: 'Quicksand', sans-serif; font-size: 0.82rem; color: var(--text); }
.vtar-switch-sm .vtar-switch-track { width: 30px; height: 17px; }
.vtar-switch-sm .vtar-switch-thumb { width: 13px; height: 13px; }
.vtar-switch-sm input:checked + .vtar-switch-track .vtar-switch-thumb { transform: translateX(13px); }

.vtar-btn {
  font-family: 'Quicksand', sans-serif; font-size: 0.82rem; font-weight: 600;
  padding: 0.5rem 1.05rem; border-radius: 999px; border: 1px solid var(--lavender);
  background: transparent; color: var(--lavender); cursor: pointer;
  transition: background .2s ease, color .2s ease; white-space: nowrap;
}
.vtar-btn:hover { background: var(--lavender); color: #1a1430; }
:root[data-theme="light"] .vtar-btn:hover { color: #fff; }

/* ---- Deck switches (uključi/isključi špil) ---- */
.vtar-deck-switches {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem;
  padding: 0.55rem 0.9rem; margin-bottom: 0.8rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
}
.vtar-deck-switches-label { font-family: 'Quicksand', sans-serif; font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.03em; text-transform: uppercase; }
.vtar-deck-switch-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; }
.vtar-deck-switch-soon { cursor: default; opacity: 0.62; }
.vtar-deck-switch-thumb {
  width: 22px; height: 22px; border-radius: 5px; background-size: cover; background-position: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35); flex-shrink: 0;
}
.vtar-deck-switch-name { font-family: 'Quicksand', sans-serif; font-size: 0.84rem; color: var(--text); white-space: nowrap; }
.vtar-deck-switch-name em { font-style: normal; font-size: 0.68rem; color: var(--text-muted); margin-left: 0.25rem; }

/* ---- Glavni layout: lijeva traka | stol | desna traka ---- */
.vtar-layout {
  display: grid; grid-template-columns: minmax(128px, 158px) 1fr minmax(96px, 128px);
  gap: 1rem; align-items: stretch;
}
.vtar-rail { display: flex; flex-direction: column; gap: 0.9rem; }
.vtar-rail-empty { font-family: 'Atkinson Hyperlegible', sans-serif; font-style: italic; font-size: 0.88rem; color: var(--text-muted); text-align: center; padding: 1rem 0.4rem; }

/* ---- Špil blok ---- */
.vtar-deck-block {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.75rem 0.6rem; display: flex; flex-direction: column; align-items: center;
  gap: 0.55rem; transition: border-color .2s ease;
}
.vtar-deck-head { display: flex; align-items: center; gap: 0.4rem; align-self: flex-start; }
.vtar-deck-name { font-family: 'Playfair Display', serif; font-size: 0.85rem; color: var(--silver-bright); }

.vtar-deck-stack-wrap { position: relative; width: 100%; display: flex; justify-content: center; padding: 0.35rem 0 0.2rem; }
.vtar-deck-stack { position: relative; width: var(--vtar-card-w); aspect-ratio: var(--vtar-ratio); cursor: pointer; }

.vtar-deck-card {
  position: absolute; inset: 0; border-radius: 9%;
  background-size: cover; background-position: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08);
  transition: transform .2s ease;
}
.vtar-deck-card-3 { transform: translate(4px, 4px) rotate(3deg); }
.vtar-deck-card-2 { transform: translate(2px, 2px) rotate(1.5deg); }
.vtar-deck-card-1 { transform: translate(0,0) rotate(0deg); }
.vtar-deck-stack:hover .vtar-deck-card-1 { transform: translateY(-5px); box-shadow: 0 10px 22px rgba(0,0,0,0.5); }
.vtar-deck-stack.vtar-pulse .vtar-deck-card-1 { animation: vtarDeckPulse .5s ease; }
@keyframes vtarDeckPulse { 0% { transform: scale(1); } 35% { transform: scale(1.09) rotate(-3deg); } 100% { transform: scale(1) rotate(0deg); } }

/* Stražnje strane karata (vidljive!) - SVG dizajni po špilu */
.vtar-back-rws .vtar-deck-card, .vtar-back-rws .vtar-card-back, .vtar-back-rws.vtar-discard-card, .vtar-back-rws.vtar-deck-switch-thumb,
.vtar-back-rws.vtar-drawbar-swatch { background-image: url('assets/decks/rws/back.svg'); background-size: cover; background-position: center; }
.vtar-back-marseille .vtar-deck-card, .vtar-back-marseille .vtar-card-back, .vtar-back-marseille.vtar-discard-card, .vtar-back-marseille.vtar-deck-switch-thumb,
.vtar-back-marseille.vtar-drawbar-swatch { background-image: url('assets/decks/marseille/back.svg'); background-size: cover; background-position: center; }
.vtar-back-lenormand .vtar-deck-card, .vtar-back-lenormand .vtar-card-back, .vtar-back-lenormand.vtar-discard-card, .vtar-back-lenormand.vtar-deck-switch-thumb,
.vtar-back-lenormand.vtar-drawbar-swatch { background-image: url('assets/decks/lenormand/back.svg'); background-size: cover; background-position: center; }
.vtar-back-oracle .vtar-deck-card, .vtar-back-oracle .vtar-card-back, .vtar-back-oracle.vtar-discard-card, .vtar-back-oracle.vtar-deck-switch-thumb,
.vtar-back-oracle.vtar-drawbar-swatch { background-image: url('assets/decks/oracle/back.svg'); background-size: cover; background-position: center; }

.vtar-deck-count {
  position: absolute; bottom: -8px; right: -8px; background: var(--lavender); color: #1a1430;
  font-family: 'Quicksand', sans-serif; font-size: 0.66rem; font-weight: 700;
  min-width: 21px; height: 21px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; padding: 0 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
:root[data-theme="light"] .vtar-deck-count { color: #fff; }
.vtar-deck-stack.vtar-deck-empty { opacity: 0.4; }

.vtar-deck-actions { display: flex; flex-direction: column; gap: 0.32rem; width: 100%; }
.vtar-mini-btn {
  font-family: 'Quicksand', sans-serif; font-size: 0.68rem; padding: 0.34rem 0.4rem;
  border-radius: 8px; border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.vtar-mini-btn:hover { border-color: var(--sage); color: var(--silver-bright); background: rgba(168,144,208,0.08); }
.vtar-mini-btn-accent { border-color: var(--lavender); color: var(--lavender); }
.vtar-mini-btn-accent:hover { background: var(--lavender); color: #1a1430; }
:root[data-theme="light"] .vtar-mini-btn-accent:hover { color: #fff; }

/* ---- Stol ---- */
.vtar-table {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(168,144,208,0.14) 0%, transparent 62%),
    radial-gradient(ellipse at 50% 60%, var(--bg-light) 0%, var(--bg-deep) 100%);
  border: 1px solid var(--border); border-radius: 20px;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(168,144,208,0.06), var(--shadow-glow);
  min-height: clamp(440px, 64vh, 780px);
}
:root[data-theme="light"] .vtar-table {
  background:
    radial-gradient(ellipse at 50% 34%, rgba(255,255,255,0.6) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 60%, #efe7f8 0%, #ddd0ee 100%);
  box-shadow: inset 0 0 60px rgba(106,78,160,0.14), var(--shadow-glow);
}
/* suptilna tekstura (vlastiti border-radius, ne oslanja se na overflow:hidden
   roditelja - stol namjerno NEMA overflow:hidden da bi hover-zoom karte
   mogao "izaći" preko ruba stola bez rezanja) */
.vtar-table::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 20px;
  background-image: radial-gradient(circle, var(--lavender) 0.6px, transparent 0.6px);
  background-size: 30px 30px; opacity: 0.07; overflow: hidden;
}
.vtar-table::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 20px;
  box-shadow: inset 0 0 120px rgba(0,0,0,0.35);
}
:root[data-theme="light"] .vtar-table::before { opacity: 0.13; }
:root[data-theme="light"] .vtar-table::after { box-shadow: inset 0 0 90px rgba(106,78,160,0.1); }

/* Slobodno slaganje: stol dobiva svoj scroll umjesto da raste u beskonačnost */
.vtar-table.vtar-table-scroll { max-height: clamp(440px, 64vh, 780px); overflow-y: auto; overflow-x: hidden; }

.vtar-slots { position: relative; width: 100%; height: 100%; min-height: clamp(440px, 64vh, 780px); --vtar-cw: 90px; --vtar-cellw: 160px; }

/* ---- Slot (pozicija) - flex kolona: kartica pa oznaka ispod ----
   pointer-events:none na slotu (a auto na kartici/oznaci) - inače bi portretni
   okvir slota koji križa (Keltski križ, karta 2 rotirana 90°) prekrivao kartu 1
   ispod i presretao dodire iako je vizualno okrenut u stranu (karta 1 se nije
   mogla otvoriti na mobitelu). */
.vtar-slot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }

.vtar-cardbox {
  position: relative; width: var(--vtar-cw); aspect-ratio: var(--vtar-ratio);
  border: 1.5px dashed var(--border); border-radius: 9%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color .2s ease; pointer-events: auto;
}
.vtar-caption { pointer-events: auto; }
.vtar-cardbox.vtar-filled { border-color: transparent; }
.vtar-slot-num { font-family: 'Playfair Display', serif; font-size: clamp(0.85rem, 1.5vw, 1.25rem); color: var(--text-muted); opacity: 0.7; }
.vtar-cardbox.vtar-filled .vtar-slot-num { display: none; }

/* Oznaka pozicije ISPOD karte - SAMO naziv, jedan red s elipsom; puni opis
   pozicije je u legendi ispod stola (i u title atributu oznake). Fiksna visina
   jednog reda ne može prerasti rezervirani prostor i preklopiti karte ispod. */
.vtar-caption {
  display: flex; justify-content: center;
  max-width: min(calc(var(--vtar-cellw) - 6px), calc(var(--vtar-cw) * 2.1));
  text-align: center; line-height: 1.15;
}
.vtar-cap-label {
  font-family: 'Quicksand', sans-serif; font-size: clamp(0.6rem, 0.9vw, 0.74rem);
  font-weight: 600; color: var(--silver-bright); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Oznake pokraj karte - uvijek izvan slike, ne prekrivaju ilustraciju.
   Kontra-rotiraju se preko --vtar-box-rot (Keltski križ, karta koja križa). */
.vtar-badge {
  position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%;
  font-family: 'Quicksand', sans-serif; font-size: 0.68rem; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transform: rotate(calc(-1 * var(--vtar-box-rot, 0deg)));
}
.vtar-badge-order {
  top: -9px; left: -9px; background: var(--bg-deep); color: var(--lavender);
  border: 1px solid var(--lavender);
}
:root[data-theme="light"] .vtar-badge-order { background: var(--bg-light); }
.vtar-badge-rev {
  bottom: -9px; left: -9px; background: #7a1f2b; color: #ffdede; border: 1px solid #ff6b6b;
  font-size: 0.82rem;
}

/* ---- Karta (izvučena) ---- */
.vtar-card { position: absolute; inset: 0; perspective: 1000px; cursor: pointer; transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.vtar-cardbox:hover .vtar-card { transform: translateY(-3px); }
.vtar-card.vtar-card-dragging { opacity: 0; }

/* ---- Drag-to-discard: karta se povlači, "duh" prati prst/miš ---- */
/* dok se karta vuče, onemogući označavanje teksta po cijeloj stranici (plavi highlight) */
body.vtar-noselect, body.vtar-noselect * {
  -webkit-user-select: none !important; -moz-user-select: none !important;
  user-select: none !important; -webkit-touch-callout: none !important;
}
.vtar-drag-ghost {
  position: fixed; z-index: 4000; pointer-events: none; border-radius: 9%;
  box-shadow: 0 20px 55px rgba(0,0,0,0.65); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18); will-change: left, top;
}
.vtar-drag-ghost-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
.vtar-drag-ghost.vtar-reversed .vtar-drag-ghost-img { transform: rotate(180deg); }
/* zona iskorištenih karata se istakne dok se karta povlači */
.vtar-stage.vtar-dragging .vtar-discard-zone,
.vtar-stage.vtar-dragging .vtar-drawbar-used { animation: vtarDropPulse 1.1s ease infinite; }
.vtar-drop-hover { outline: 2px solid var(--lavender); outline-offset: 3px; border-radius: 12px; }
.vtar-discard-zone.vtar-drop-hover { transform: scale(1.06); }
.vtar-drawbar-used.vtar-drop-hover { background: var(--lavender); color: #1a1430; }
@keyframes vtarDropPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.vtar-card-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,.2,.2,1); }
.vtar-card-flip.vtar-revealed { transform: rotateY(180deg); }

.vtar-card-face {
  position: absolute; inset: 0; border-radius: 9%; backface-visibility: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5); overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
}
.vtar-card-back { transform: rotateY(0deg); background-size: cover; background-position: center; }
.vtar-card-front { transform: rotateY(180deg); background: #efe7d8; }
.vtar-card-front-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.vtar-card.vtar-reversed .vtar-card-front-img { transform: rotate(180deg); }

/* Lenormand karta: gornja 1/3 = "prozor" (broj + opis uspravno + igraća karta),
   donje 2/3 = CIJELA slika predmeta (contain - ništa se ne reže). Srebrni okvir ::after. */
.vtar-back-lenormand .vtar-card-front { background: #17122b; }
.vtar-back-lenormand .vtar-card-front-img {
  inset: 34% 5px 5px 5px; border-radius: 0 0 4px 4px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.vtar-back-lenormand .vtar-card-front::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(228,224,244,0.9), inset 0 0 0 3.5px rgba(168,144,208,0.4);
}
.vtar-back-lenormand .vtar-card-front, #vtar-focus-card.vtar-len-focus { container-type: inline-size; }
#vtar-focus-card.vtar-len-focus { position: relative; background-color: #17122b; }
#vtar-focus-card.vtar-len-focus .vtar-len-img {
  position: absolute; inset: 34% 0 0 0; border-radius: 0 0 6px 6px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* gornji "prozor" */
.vtar-len-top {
  position: absolute; top: 0; left: 0; right: 0; height: 34%; z-index: 3;
  display: flex; align-items: stretch; gap: 2.5cqw;
  padding: 3cqw; box-sizing: border-box; overflow: hidden;
  background: #efe7d3; color: #241c33; border-bottom: 1px solid rgba(40,30,60,0.35);
}
.vtar-len-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vtar-len-num {
  flex: 0 0 auto; align-self: flex-start; margin-bottom: 1.5cqw;
  width: clamp(12px, 13cqw, 28px); height: clamp(12px, 13cqw, 28px);
  border-radius: 50%; background: #fff; color: #0f0a1a; border: 1px solid rgba(0,0,0,0.25);
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: clamp(7px, 7.5cqw, 16px); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.vtar-len-desc {
  flex: 1 1 auto; margin: 0; overflow: hidden;
  font-family: 'Atkinson Hyperlegible', sans-serif; color: #2c2340;
  font-size: clamp(5px, 4.3cqw, 10.5px); line-height: 1.16;
}
.vtar-len-pc {
  flex: 0 0 auto; align-self: center; height: 100%; width: auto; max-width: 42%;
  object-fit: contain; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Lenormand rasporedi u izborniku - sage zelena da se razlikuju od tarot (lavanda) */
.vtar-spread-chip.vtar-spread-len { border-color: rgba(157,184,154,0.55); }
.vtar-spread-chip.vtar-spread-len .vtar-spread-chip-icon svg rect { fill: var(--sage, #9db89a); }
.vtar-spread-chip.vtar-spread-len.active {
  border-color: var(--sage, #9db89a);
  box-shadow: 0 0 0 1px var(--sage, #9db89a), 0 4px 14px rgba(157,184,154,0.25);
}

.vtar-card-discard-btn {
  position: absolute; top: -9px; right: -9px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--bg-deep); border: 1px solid var(--lavender); color: var(--silver-bright);
  font-size: 0.62rem; line-height: 1; cursor: pointer; opacity: 0; z-index: 6;
  transition: opacity .15s ease, background .15s ease;
  transform: rotate(calc(-1 * var(--vtar-box-rot, 0deg)));
}
.vtar-cardbox:hover .vtar-card-discard-btn, .vtar-cardbox:focus-within .vtar-card-discard-btn { opacity: 0.92; }
.vtar-card-discard-btn:hover { background: var(--lavender); color: #1a1430; }

/* ---- Fokus: klik na kartu ju centrira i poveća (modal preko cijelog prostora;
   position:fixed pa pouzdano radi i kad stol scrolla, u fullscreenu i na mobitelu).
   Značenje se prikazuje DESNO od karte na desktopu, ISPOD na mobitelu; ako karta
   (npr. Marseille dok admin ne popuni) nema teksta, panel se jednostavno ne prikaže. ---- */
.vtar-focus {
  position: fixed; inset: 0; z-index: 3000; display: flex;
  align-items: center; justify-content: center; padding: 1.4rem;
  background: rgba(6, 8, 15, 0.9); cursor: zoom-out;
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
  overflow-y: auto;
}
:root[data-theme="light"] .vtar-focus { background: rgba(20, 14, 40, 0.8); }
.vtar-focus.vtar-focus-visible { opacity: 1; pointer-events: auto; }
.vtar-focus-inner {
  display: flex; align-items: center; gap: 2.2rem; max-width: min(1000px, 92vw); cursor: default;
  margin: auto; /* centrira kad stane, a dopušta scroll s vrha kad je sadržaj viši od zaslona */
}
.vtar-focus-visual { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; flex-shrink: 0; }
.vtar-focus-card {
  height: min(72vh, 560px); aspect-ratio: var(--vtar-ratio); border-radius: 3%;
  background-size: cover; background-position: center;
  box-shadow: 0 18px 60px rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.14);
  transform: scale(0.85); transition: transform .28s cubic-bezier(.2,.8,.3,1.05);
}
.vtar-focus.vtar-focus-visible .vtar-focus-card { transform: scale(1); }
.vtar-focus-card.vtar-focus-reversed { transform: scale(0.85) rotate(180deg); }
.vtar-focus.vtar-focus-visible .vtar-focus-card.vtar-focus-reversed { transform: scale(1) rotate(180deg); }
/* Značenje pozicije (polja) u spreadu - iznad karte u fokusu */
.vtar-focus-position {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  text-align: center; max-width: min(440px, 88vw);
}
.vtar-focus-pos-label {
  font-family: 'Quicksand', sans-serif; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 0.78rem; color: var(--lavender);
}
.vtar-focus-pos-meaning {
  font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 0.98rem; line-height: 1.4;
  color: var(--silver-bright); text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.vtar-focus-name {
  font-family: 'Playfair Display', serif; font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  color: var(--silver-bright); text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.vtar-focus-meaning {
  display: flex; flex-direction: column; gap: 0.7rem;
  max-width: 400px; max-height: 78vh; overflow-y: auto; cursor: default;
  font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 1.02rem; line-height: 1.5; color: var(--silver-bright);
}
/* Uvijek su prikazana OBA značenja; ono koje odgovara orijentaciji izvučene
   karte je uokvireno (vtar-focus-m-active), drugo je prigušeno. */
.vtar-focus-m {
  padding: 0.65rem 0.85rem; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; opacity: 0.62;
}
.vtar-focus-m p { margin: 0; }
.vtar-focus-m-active {
  border: 2px solid var(--lavender); background: rgba(168,144,208,0.12);
  box-shadow: 0 0 22px rgba(168,144,208,0.28); opacity: 1;
}
.vtar-focus-meaning-label {
  display: block; font-family: 'Quicksand', sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); margin-bottom: 0.35rem;
}
/* DA / NE / MOŽDA odgovor karte */
.vtar-focus-yesno { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.2rem; }
.vtar-focus-yesno-label {
  font-family: 'Quicksand', sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage);
}
.vtar-yn-chip {
  font-family: 'Quicksand', sans-serif; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.07em; padding: 0.18rem 0.85rem; border-radius: 999px; border: 1px solid;
}
.vtar-yn-da    { color: #a8e0b0; border-color: #7fc98d; background: rgba(127,201,141,0.14); }
.vtar-yn-ne    { color: #ffb3b3; border-color: #ff8484; background: rgba(255,132,132,0.13); }
.vtar-yn-mozda { color: var(--lavender); border-color: var(--lavender); background: rgba(168,144,208,0.14); }
.vtar-focus.vtar-focus-no-meaning .vtar-focus-meaning { display: none; }

/* Svijetla tema: pozadina fokusa je tamna u OBJE teme, pa tema-varijable
   (--silver-bright/--sage/--text = TAMNE u light temi) daju tamni tekst na
   tamnoj podlozi = nečitljivo. Ovdje forsiramo svijetli, čitljiv tekst
   neovisno o temi. */
:root[data-theme="light"] .vtar-focus-name { color: #f2ecff; }
:root[data-theme="light"] .vtar-focus-meaning { color: #ece6f8; }
:root[data-theme="light"] .vtar-focus-meaning-label,
:root[data-theme="light"] .vtar-focus-yesno-label,
:root[data-theme="light"] .vtar-focus-pos-label { color: #c9b6ea; }
:root[data-theme="light"] .vtar-focus-pos-meaning { color: #ece6f8; }
:root[data-theme="light"] .vtar-focus-m { border-color: rgba(255,255,255,0.20); }
:root[data-theme="light"] .vtar-focus-m-active {
  border-color: #b79ee0; background: rgba(183,158,224,0.20);
}
:root[data-theme="light"] .vtar-yn-mozda { color: #cbb2ee; border-color: #b79ee0; background: rgba(183,158,224,0.20); }

@media (max-width: 760px) {
  .vtar-focus-inner { flex-direction: column; gap: 1.2rem; max-width: 94vw; }
  .vtar-focus-card { height: min(48vh, 420px); }
  .vtar-focus-meaning { max-width: 94vw; max-height: none; text-align: center; }
}

/* ---- Slobodno slaganje (flow) ---- */
.vtar-slots.vtar-free {
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center;
  gap: 1.4rem 1.1rem; padding: 1.4rem; height: auto; min-height: 0;
}
.vtar-slot-flow { position: static; transform: none; }
.vtar-slot-flow .vtar-cardbox { width: clamp(74px, 9vw, 118px); }
.vtar-slot-flow .vtar-slot-num { font-size: 0.9rem; }
.vtar-slot-ghost .vtar-cardbox { border-style: dashed; opacity: 0.5; }
.vtar-slot-ghost .vtar-slot-num { opacity: 0.5; }

/* ---- Legenda značenja ---- */
.vtar-legend {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.5rem 1.2rem;
  margin-top: 1.2rem; padding: 1.1rem 1.3rem; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 14px;
}
.vtar-legend-item { display: flex; align-items: baseline; gap: 0.55rem; }
.vtar-legend-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(168,144,208,0.18);
  border: 1px solid var(--border); color: var(--lavender); font-family: 'Quicksand', sans-serif;
  font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.vtar-legend-text { font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 0.95rem; color: var(--text); line-height: 1.35; }
.vtar-legend-text strong { font-family: 'Quicksand', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--silver-bright); }

/* ---- Otpad ---- */
.vtar-discard-zone { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; }
.vtar-discard-stack { position: relative; width: calc(var(--vtar-card-w) * 0.82); aspect-ratio: var(--vtar-ratio); }
.vtar-discard-card {
  position: absolute; inset: 0; border-radius: 9%; background-size: cover; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
  transform: translate(calc(var(--i, 0) * 2px), calc(var(--i, 0) * -2px)) rotate(calc(var(--i, 0) * 4deg - 4deg));
}
.vtar-discard-empty .vtar-discard-stack { border: 1.5px dashed var(--border); border-radius: 9%; opacity: 0.5; }
.vtar-discard-empty .vtar-discard-card { display: none; }
.vtar-discard-label { font-family: 'Quicksand', sans-serif; font-size: 0.72rem; color: var(--text-muted); text-align: center; }

.vtar-hint { text-align: center; margin-top: 1rem; font-family: 'Atkinson Hyperlegible', sans-serif; font-style: italic; color: var(--text-muted); font-size: 0.95rem; }
.vtar-hint-flash { animation: vtarHintFlash 1.4s ease; }
@keyframes vtarHintFlash { 0% { color: var(--lavender); } 100% { color: var(--text-muted); } }

/* ---- Mobilna alatna traka za izvlačenje (fiksna na dnu) ---- */
.vtar-mobile-drawbar { display: none; }

/* ============================================================
   FULLSCREEN - flex kolona koja se uvijek uklopi u zaslon,
   neovisno o omjeru/veličini monitora; legenda ima vlastiti scroll
   pa se stol nikad ne izgura izvan vidljivog prostora.
   ============================================================ */
.vtar-stage.vtar-fs {
  background: radial-gradient(ellipse at 50% 20%, var(--body-grad-1) 0%, transparent 55%), var(--bg-deep);
  display: flex; flex-direction: column; height: 100%; width: 100%; overflow-y: auto;
  padding: clamp(0.6rem, 1.6vh, 1.2rem) clamp(0.7rem, 1.8vw, 1.4rem);
  gap: 0.55rem; box-sizing: border-box;
}
.vtar-fs .vtar-toolbar, .vtar-fs .vtar-deck-switches, .vtar-fs .vtar-hint,
.vtar-fs .vtar-spread-panel.vtar-open { flex: 0 0 auto; margin-bottom: 0; }
.vtar-fs .vtar-spread-panel.vtar-open { max-height: 40vh; overflow-y: auto; }
/* Layout ne smije prerasti dodijeljeni prostor (overflow:hidden) - inače bi
   se, npr. s dva uključena špila na nižim monitorima, lijeva traka i stol
   prelili PREKO legende. Trake umjesto toga dobivaju vlastiti scroll, a
   špilovi u fullscreenu kompaktniju širinu vezanu uz visinu zaslona. */
.vtar-stage.vtar-fs { --vtar-card-w: clamp(48px, 9vh, 104px); }
.vtar-fs .vtar-layout { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.vtar-fs .vtar-rail { overflow-y: auto; min-height: 0; }
.vtar-fs .vtar-table, .vtar-fs .vtar-slots { min-height: 0; height: 100%; }
.vtar-fs .vtar-table.vtar-table-scroll { max-height: 100%; }
.vtar-fs .vtar-legend { flex: 0 1 auto; max-height: 20vh; overflow-y: auto; margin-top: 0; }
.vtar-fs .vtar-mobile-drawbar { position: static; }

/* ---- Karta dana na početnoj - jedna klikabilna cjelina, vodi na tarot stol ---- */
.vtar-cotd {
  display: flex; align-items: center; gap: 2rem; max-width: 760px; margin: 0 auto;
  padding: 1.8rem 2.1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px;
  text-decoration: none; cursor: pointer; transition: transform .25s ease, border-color .25s ease;
}
.vtar-cotd:hover { transform: translateY(-3px); border-color: var(--lavender); box-shadow: var(--shadow-glow); }
.vtar-cotd-visual { flex-shrink: 0; }
.vtar-cotd-img { width: clamp(120px, 20vw, 190px); aspect-ratio: 0.583; border-radius: 5%; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.vtar-cotd-text { display: flex; flex-direction: column; gap: 0.3rem; text-align: left; }
.vtar-cotd-eyebrow { font-family: 'Quicksand', sans-serif; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); }
.vtar-cotd-name { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--lavender); margin: 0; }
.vtar-cotd-desc { font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 1.05rem; line-height: 1.5; color: var(--text); margin: 0; }
.vtar-cotd-cta {
  margin-top: 0.5rem; font-family: 'Quicksand', sans-serif; font-size: 0.86rem; font-weight: 600;
  color: var(--lavender);
}
@media (max-width: 620px) {
  .vtar-cotd { flex-direction: column; text-align: center; padding: 1.6rem 1.3rem; gap: 1.2rem; }
  .vtar-cotd-text { text-align: center; }
}

/* ============================================================
   Tablet / mobitel
   ============================================================ */
@media (max-width: 900px) {
  .vtar-layout { grid-template-columns: 1fr; }
  .vtar-rail { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .vtar-rail-left { order: 1; }
  .vtar-table { order: 2; }
  .vtar-rail-right { order: 3; }
  .vtar-deck-block { flex: 1 1 170px; max-width: 240px; }
  .vtar-btn-fs { display: none; } /* fullscreen samo na desktopu */
}

/* ============================================================
   MOBITEL (≤760px) - redizajn: bočne trake su skrivene, sve akcije
   (izvlačenje, miješanje, iskorištene karte, novi spread) preuzima fiksna
   traka na dnu; fiksni spreadovi su kompaktna mreža 3 karte u redu.
   ============================================================ */
@media (max-width: 760px) {
  /* PAZI (2 zamke flex-kolone): 1) flex-basis postaje VISINA (zato toggle
     mora na flex:0 0 auto, inače je visok 320px); 2) flex-wrap:wrap u koloni
     širi LINIJU na intrinzičnu širinu najšireg elementa (nowrap opis spreada!)
     pa gumb izlazi iz okvira - zato nowrap + max-width kao osigurač. */
  .vtar-toolbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .vtar-spread-toggle { flex: 0 0 auto; width: 100%; max-width: 100%; }
  .vtar-toolbar-controls { justify-content: space-between; gap: 0.6rem 0.8rem; }
  .vtar-spread-panel { grid-template-columns: 1fr; }

  /* bočne trake zamjenjuje drawbar na dnu */
  .vtar-rail-left, .vtar-rail-right { display: none; }

  .vtar-table { min-height: auto; border-radius: 16px; overflow: visible; }
  /* Fiksni spreadovi zadržavaju PRAVU geometriju (isti apsolutni layout kao
     desktop) - visinu stola postavlja JS (computeLayout, inline height na
     .vtar-slots), pa je CSS ovdje ne smije ograničavati ni razmicati paddingom. */
  .vtar-slots { min-height: 0; padding: 0; }
  .vtar-slots.vtar-free { padding: 1rem 0.6rem 1.2rem; }
  /* ✕ gumb se NE prikazuje na mobitelu - odlaganje ide isključivo povlačenjem
     (pritisni, drži, vuci u iskorištene karte); ✕ je zbunjivao i smetao. */
  .vtar-table.vtar-mobile .vtar-card-discard-btn,
  .vtar-slots.vtar-free .vtar-card-discard-btn { display: none; }
  /* manje oznake na manjim kartama */
  .vtar-table.vtar-mobile .vtar-badge { width: 18px; height: 18px; font-size: 0.6rem; }
  .vtar-table.vtar-mobile .vtar-badge-rev { font-size: 0.72rem; }
  .vtar-table.vtar-mobile .vtar-badge-order { top: -7px; left: -7px; }
  .vtar-table.vtar-mobile .vtar-badge-rev { bottom: -7px; left: -7px; }
  .vtar-table.vtar-mobile .vtar-caption { max-width: calc(var(--vtar-cellw) - 2px); }
  .vtar-table.vtar-mobile .vtar-cap-label { font-size: 0.58rem; }

  .vtar-legend { grid-template-columns: 1fr; margin-bottom: 6.5rem; }
  .vtar-root { padding-bottom: 7.5rem; }

  /* ---- fiksna traka na dnu ---- */
  .vtar-mobile-drawbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
    gap: 0.45rem; align-items: stretch;
    padding: 0.55rem 0.6rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    background: var(--nav-bg); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border); overflow-x: auto;
  }
  /* touch-action: manipulation - spriječi da dvostruki tap na gumbe zumira stranicu */
  .vtar-mobile-drawbar button { touch-action: manipulation; }
  /* Gumbi se šire (flex-grow) da popune cijelu širinu trake na svakom mobitelu;
     sadržaj je centriran pa ikona karte sjedi u sredini gumba, dalje od
     zaobljenog lijevog ruba (prije se činila odrezana). min-height = lakši tap. */
  .vtar-drawbar-group { display: flex; flex: 1.4 1 auto; min-width: 0; }
  .vtar-drawbar-btn {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    min-height: 58px; padding: 0.4rem 0.6rem; border-radius: 999px 0 0 999px;
    background: var(--card-bg); border: 1px solid var(--border); color: var(--text);
    font-family: 'Quicksand', sans-serif; font-size: 0.8rem; cursor: pointer;
  }
  .vtar-drawbar-all {
    flex: 0 0 auto; min-height: 58px; padding: 0.4rem 0.55rem; border-radius: 0;
    background: var(--card-bg); border: 1px solid var(--border); border-left: none;
    color: var(--lavender); font-size: 0.95rem; cursor: pointer;
  }
  .vtar-drawbar-shuffle {
    flex: 0 0 auto; min-height: 58px; padding: 0.4rem 0.6rem; border-radius: 0 999px 999px 0;
    background: var(--card-bg); border: 1px solid var(--border); border-left: none;
    color: var(--text-muted); font-size: 0.95rem; cursor: pointer;
  }
  .vtar-drawbar-used { flex: 1 1 auto; }
  .vtar-drawbar-new { flex: 0.7 1 auto; }
  .vtar-drawbar-used, .vtar-drawbar-new {
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    min-width: 0; min-height: 58px; padding: 0.4rem 0.6rem; border-radius: 999px;
    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
    font-family: 'Quicksand', sans-serif; font-size: 0.8rem; cursor: pointer;
  }
  .vtar-drawbar-icon { font-size: 0.95rem; line-height: 1; }
  .vtar-drawbar-new { border-color: var(--lavender); color: var(--lavender); font-size: 0.95rem; }
  .vtar-drawbar-swatch {
    width: 28px; height: 40px; border-radius: 5px; flex-shrink: 0;
    background-size: cover; background-position: center;
    border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  }
  .vtar-drawbar-count { color: var(--text-muted); }

  /* ---- Veliki drop-target (samo mobitel, samo dok se povlači) ---- */
  .vtar-mobile-dropzone {
    display: flex; position: fixed; left: 0; right: 0;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)); /* iznad donje trake */
    z-index: 260; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
    height: 30vh; margin: 0 0.6rem; padding: 1rem;
    background: linear-gradient(180deg, rgba(168,144,208,0.16), rgba(168,144,208,0.28));
    border: 2px dashed var(--lavender); border-radius: 18px;
    color: var(--lavender); text-align: center;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, background .15s ease;
  }
  /* pointer-events:auto tek kad je vidljiv - da ga elementFromPoint prepozna
     kao metu ispuštanja (ghost je pointer-events:none pa se vidi kroz njega). */
  .vtar-mobile-dropzone.vtar-dz-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .vtar-mobile-dropzone.vtar-drop-hover {
    background: linear-gradient(180deg, rgba(168,144,208,0.34), rgba(168,144,208,0.5));
    outline: none; transform: translateY(0) scale(1.015);
  }
  .vtar-mobile-dropzone-icon { font-size: 2.2rem; line-height: 1; }
  .vtar-mobile-dropzone-text { font-family: 'Quicksand', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em; }
}
/* dropzone postoji samo na mobitelu - na širem ekranu je uvijek skriven */
@media (min-width: 761px) { .vtar-mobile-dropzone { display: none; } }