:root {
  /* ciemniejsza wersja kolorystyki szejktivi.pl */
  --bg: #12061f;
  --panel: rgba(26, 10, 50, .85);
  --panel-solid: #1c0b36;
  --line: rgba(145, 70, 255, .28);
  --gold: #fec800;
  --gold-rgb: 254, 200, 0;
  --twitch: #9146ff;
  --text: #ffffff;
  --muted: #b9a7d6;
  --topbar-h: 48px;
  --stream: #c8493e;
  --offstream: #3f80c4;
  --rzeczy: #4f9a4a;
  --hand-h: clamp(135px, 18vh, 240px);   /* ręka rośnie razem z oknem */
  --opp-hand-h: calc(var(--hand-h) / 2); /* ręka przeciwnika – o połowę mniejsza */
  --right-w: clamp(270px, 22vw, 400px);
  --row-h: calc((100vh - var(--topbar-h) - var(--hand-h) - var(--opp-hand-h) - 52px) / 6);
  --card-h: calc(var(--row-h) - 10px);
  --card-w: calc(var(--card-h) * 0.72);
}

* { box-sizing: border-box; }

/* Paski przewijania w kolorach strony: cienkie, fioletowe, złote po najechaniu. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(10, 3, 22, .35); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: rgba(145, 70, 255, .55); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: rgba(145, 70, 255, .6) rgba(10, 3, 22, .35); }
}

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(122, 0, 184, .22), transparent 70%),
    linear-gradient(to right, #1b0a36, #26063c);
  background-color: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
}

.hidden { display: none !important; }

/* ---------- Górny pasek (jak na szejktivi.pl) ---------- */
#topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 16px;
  background: rgba(0, 0, 0, .35);
  border-bottom: 1px solid var(--line);
}
#topbar .logo { font-size: 22px; font-weight: 800; color: var(--gold); letter-spacing: .3px; }
#topbar .topbar-title {
  padding: 5px 14px; border-radius: 20px;
  background: var(--gold); color: #2a0a40; font-weight: 700; font-size: 14px;
}

#app {
  display: grid;
  grid-template-columns: 220px 1fr var(--right-w);
  grid-template-rows: var(--opp-hand-h) 1fr var(--hand-h);
  grid-template-areas: "opphand opphand right" "left board right" "hand hand right";
  gap: 8px;
  padding: 8px;
  height: calc(100vh - var(--topbar-h));
}

#left { grid-area: left; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 0; }
#board { grid-area: board; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#right { grid-area: right; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
#bottom { grid-area: hand; display: flex; gap: 8px; min-width: 0; }

.panel, .player-info {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.panel-title { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 8px 0 6px; }

/* ---------- Gracze ---------- */
.player-info { transition: box-shadow .2s; }
.player-info.active { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(var(--gold-rgb), .35); }
.pi-top { display: flex; justify-content: space-between; align-items: center; }
.pi-name { font-weight: 700; font-size: 18px; }
.pi-score { font-size: 44px; font-weight: 800; color: var(--gold); line-height: 1.1; }
.pi-meta { color: var(--muted); font-size: 13px; }
.gems { display: flex; gap: 6px; margin: 4px 0; }
.gem { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #b3201a); box-shadow: 0 0 6px #d33; }
.gem.lost { background: #3a2a52; box-shadow: none; }
.pi-donate { color: var(--gold); font-weight: 600; }
.peek { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.badge-pass { background: #5a1a7a; border: 1px solid var(--twitch); padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }

#round { font-size: 20px; font-weight: 700; color: var(--gold); text-align: center; }
#weather-cards { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; }
.muted { color: var(--muted); font-size: 13px; }

/* ---------- Plansza ---------- */
.side { display: flex; flex-direction: column; gap: 3px; }
#divider { height: 4px; margin: 2px 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.zone-Stream { --zc: var(--stream); }
.zone-Offstream { --zc: var(--offstream); }
.zone-RZeczy { --zc: var(--rzeczy); }
.zone-none { --zc: #9a8a70; }

.row {
  position: relative;
  height: var(--row-h);
  display: grid;
  grid-template-columns: 48px calc(var(--card-w) * .8 + 8px) 1fr;
  align-items: center;
  background: rgba(10, 3, 22, .5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--zc);
  border-radius: 10px;
  transition: box-shadow .15s, background .15s;
}
.row.weather::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(140, 170, 255, .16) 0 10px, transparent 10px 20px);
}
.row.target { cursor: pointer; background: rgba(var(--gold-rgb), .08); box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(var(--gold-rgb), .45); }
.row-score {
  width: 34px; height: 34px; margin: 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--zc);
  font-weight: 800;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .4);
}
.horn-slot {
  height: calc(var(--card-h) * .8);
  width: calc(var(--card-w) * .8);
  border: 1px dashed var(--line);
  border-radius: 5px;
  display: grid; place-items: center;
  color: var(--line);
  font-size: 10px;
  font-weight: 700;
}
.horn-slot .card { --card-h: calc((var(--row-h) - 10px) * .8); --card-w: calc((var(--row-h) - 10px) * .8 * .72); }
.row-label { position: absolute; right: 10px; top: 3px; font-size: 11px; letter-spacing: 2px; color: var(--zc); font-weight: 700; opacity: .8; pointer-events: none; }
.row-cards { display: flex; gap: 4px; justify-content: center; align-items: center; height: 100%; padding: 0 8px; min-width: 0; }
.row-cards .card.slot-closed { display: none; } /* karta jeszcze na środku – miejsce w rzędzie otworzy się, gdy zejdzie na stół */

/* ---------- Karta ---------- */
/* Ramka w kolorze kategorii: karta ma tło-gradient, a obrazek leży w środku z wcięciem. */
.card {
  --frame: linear-gradient(145deg, #d9d4cc, #8a857d 35%, #4b4741 60%, #b9b3aa);
  --plate: #b9b3aa;
  position: relative;
  flex: none;
  width: var(--card-w);
  height: var(--card-h);
  padding: .2em;
  border-radius: .5em;
  background: var(--frame);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .65);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  font-size: calc(var(--card-h) * .11);
  user-select: none;
  transition: transform .12s, box-shadow .12s;
}
/* Ramka = strefy (ustawiana w app.js), jakość karty = tło kółka z atakiem. */
/* Elita ma się mocno wyróżniać: złota obwódka i pulsująca złota poświata (błysk – tylko przy wyborze nagrody). */
.card.cat-Elita {
  box-shadow: 0 0 0 .12em #ffe27a, 0 0 .9em .15em rgba(var(--gold-rgb), .75), 0 0 2em rgba(var(--gold-rgb), .35), 0 2px 6px rgba(0, 0, 0, .65);
  animation: elite-glow 2.4s ease-in-out infinite;
}
.card.cat-Elita::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; border: .14em solid #ffd84a;
  box-shadow: inset 0 0 .7em rgba(var(--gold-rgb), .75);
}
/* Przelatujący błysk tylko na kartach do wyboru po wygranej (okno końca gry i okno nagrody w menu). */
.card.cat-Elita[data-action="reward-pick"]::after, .reward-picker .card.cat-Elita::after {
  content: ''; position: absolute; inset: -50%; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 43%, rgba(255, 243, 180, .6) 50%, transparent 57%);
  mix-blend-mode: screen;
  animation: elite-shine 3.6s ease-in-out infinite;
}
@keyframes elite-glow {
  50% { box-shadow: 0 0 0 .12em #fff1a8, 0 0 1.4em .3em rgba(var(--gold-rgb), .95), 0 0 3em rgba(var(--gold-rgb), .5), 0 2px 6px rgba(0, 0, 0, .65); }
}
@keyframes elite-shine { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
/* Zaznaczenie w ręce i karta pokazywana na środku mają własną poświatę. */
#hand .card.selected.cat-Elita, .card.presented.cat-Elita { animation: none; }
/* W menu (Karty, Talie, podgląd) kart jest naraz kilkadziesiąt – pulsowanie i płynąca tęcza przerysowują je
   w każdej klatce i obciążają procesor. Tam poświata i tęcza są nieruchome; ruch zostaje w grze i przy wyborze nagrody. */
#screen-menu .card.cat-Elita, #screen-menu .card.any-zone, .card-detail .card { animation: none; }
@media (prefers-reduced-motion: reduce) { .card.cat-Elita { animation: none; } .card.cat-Elita::after { display: none; } }
/* pasuje do każdej strefy – tęczowa, powoli płynąca ramka */
.card.any-zone {
  --frame: linear-gradient(135deg, #ff4d4d, #ffa64d, #fff04d, #5cff7a, #4dc8ff, #8f6bff, #ff4dd2, #ff4d4d);
  --plate: #f0e6ff;
  background-size: 300% 300%;
  animation: rainbow 6s linear infinite;
}
@keyframes rainbow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@media (prefers-reduced-motion: reduce) { .card.any-zone { animation: none; } }

.card .art {
  position: absolute; inset: .2em;
  border-radius: .35em;
  display: grid; place-items: center;
  padding-bottom: 1.6em;
  font-size: 2.4em;
  background-color: #1a0a30;
  background-size: cover; background-position: center top;
}
/* przyciemnienie dołu obrazka pod napisami */
.card .art::after {
  content: ""; position: absolute; inset: 55% 0 0; border-radius: inherit;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
}

/* atak – lewy górny róg */
.card .power {
  position: absolute; top: .3em; left: .3em; z-index: 2;
  width: 1.9em; height: 1.9em;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffffff, #c9c9c9 55%, #8c8c8c);
  color: #1b130d;
  font-weight: 900; font-size: 1.05em;
  border: .12em solid rgba(0, 0, 0, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
/* jakość karty */
.card.cat-Elita .power        { background: radial-gradient(circle at 35% 30%, #fff6c8, #e6b84a 55%, #9a6e10); }
.card.cat-EnemyAbility .power { background: radial-gradient(circle at 35% 30%, #ff9a8a, #c8352a 55%, #6a120c); color: #fff; text-shadow: 0 1px 2px #000; }
.card.cat-Boost .power        { background: radial-gradient(circle at 35% 30%, #b4f5a8, #3f9a3a 55%, #164d12); color: #fff; text-shadow: 0 1px 2px #000; }
.card.cat-Ability .power      { background: radial-gradient(circle at 35% 30%, #d4c6ff, #6a4fd0 55%, #2a1a70); color: #fff; text-shadow: 0 1px 2px #000; }
/* siła zmieniona na stole */
.card .power.buff   { border-color: #2fff5a; box-shadow: 0 0 .35em #2fff5a, 0 1px 3px rgba(0, 0, 0, .7); }
.card .power.debuff { border-color: #ff3a2a; box-shadow: 0 0 .35em #ff3a2a, 0 1px 3px rgba(0, 0, 0, .7); }

/* gold – prawy górny róg */
.card .gold {
  position: absolute; top: .3em; right: .3em; z-index: 2;
  min-width: 1.9em; height: 1.9em; padding: 0 .25em;
  border-radius: 1em;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff1a8, #e2a92a 60%, #a8740e);
  color: #3a2502;
  font-weight: 900; font-size: .85em;
  border: .1em solid #7a5208;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

/* dół: strefy po lewej, rodzaj umiejętności po prawej */
.card .foot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-end; gap: .2em;
  margin: 0 .15em .2em;
}
.card .kind {
  margin-left: auto;
  font-size: .6em; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  padding: .1em .45em;
  border-radius: .35em;
  background: rgba(20, 6, 38, .88);
  color: #fff;
  border: .12em solid var(--plate);
  white-space: nowrap;
}
.card .name {
  position: relative; z-index: 1;
  padding: .15em .2em;
  border-radius: 0 0 .35em .35em;
  background: rgba(16, 5, 30, .9);
  border-top: .12em solid var(--plate);
  text-align: center;
  font-size: .78em; font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card.target { cursor: pointer; animation: pulse 1s infinite alternate; }
@keyframes pulse { from { box-shadow: 0 0 0 2px var(--gold); } to { box-shadow: 0 0 0 3px var(--gold), 0 0 14px var(--gold); } }

.mini .card { --card-h: 54px; --card-w: 39px; }

/* ---------- Ręka ---------- */
#hand {
  flex: 1;
  display: flex; gap: 6px; align-items: center; justify-content: center;
  padding: 8px;
  background: rgba(10, 3, 22, .55);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  min-width: 0;
}
#hand .card { --card-h: calc(var(--hand-h) - 28px); --card-w: calc(var(--card-h) * .72); cursor: pointer; }
#hand .card:hover { transform: translateY(-6px); z-index: 5; }
/* wybrana karta: podniesiona i podświetlona w ręce */
#hand .card.selected { z-index: 6; transform: translateY(-16px) scale(1.06); box-shadow: 0 0 0 3px var(--gold), 0 0 20px var(--gold); }

/* karta pokazywana na środku podczas zagrania */
.card.presented { box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(var(--gold-rgb), .8), 0 12px 30px rgba(0, 0, 0, .8); }

/* rewers karty */
.card-back {
  position: relative; flex: none;
  width: 34px; height: 48px;
  border-radius: 5px;
  border: 2px solid var(--gold);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--gold-rgb), .3) 0 30%, transparent 32%),
    repeating-linear-gradient(45deg, #3d1475 0 5px, #240a48 5px 10px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
.card-back::after {
  content: "SM"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: var(--gold); text-shadow: 0 1px 2px #000;
}
/* ręka przeciwnika na górze ekranu */
#opp-hand {
  grid-area: opphand;
  display: flex; gap: 6px; align-items: center; justify-content: center;
  padding: 6px 8px;
  background: rgba(10, 3, 22, .55);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  min-width: 0;
}
#opp-hand .card-back {
  --h: calc(var(--opp-hand-h) - 14px);
  height: var(--h); width: calc(var(--h) * .72);
  border-radius: 7px;
}
#opp-hand .card-back::after { font-size: calc(var(--h) * .22); }
#opp-hand .card { --card-h: calc(var(--opp-hand-h) - 14px); --card-w: calc(var(--card-h) * .72); }
#opp-hand.revealed { box-shadow: inset 0 0 0 1px var(--gold); }
.deck { display: flex; align-items: center; gap: 10px; }
.card-back.stack { box-shadow: 2px 2px 0 #240a48, 3px 3px 0 var(--gold), 5px 5px 0 #240a48, 6px 6px 0 var(--gold), 0 6px 10px rgba(0, 0, 0, .6); }
.card-back.stack::after { content: none; }
.card-back.empty { opacity: .25; box-shadow: none; }
.deck-count {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 15px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000;
}
#hand.disabled .card { cursor: default; filter: saturate(.7); }
#actions { width: 190px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
#hint { color: var(--muted); font-size: 13px; min-height: 36px; }
#turn-clock { font-size: 13px; font-weight: 700; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; text-align: center; }
#turn-clock.mine { color: var(--gold); border-color: rgba(var(--gold-rgb), .6); }
#turn-clock.urgent { color: #fff; background: #b3263a; border-color: #ff5a6e; animation: clock-pulse 1s ease-in-out infinite; }
@keyframes clock-pulse { 50% { transform: scale(1.06); } }
/* Okno (wymiana kart, wybór) zasłania pasek akcji – zegar wtedy wisi nad oknem. */
body:has(#overlay:not(.hidden)) #turn-clock:not(.hidden) { position: fixed; top: 74px; left: 0; right: 0; margin: auto; width: max-content; z-index: 95; background: var(--panel-solid); }

button {
  background: var(--twitch);
  color: #fff;
  border: none;
  border-radius: 26px;
  padding: 9px 20px;
  font: 600 15px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(145, 70, 255, .35);
  transition: filter .15s, transform .15s;
}
button:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
#btn-buy { font-size: 13px; padding: 7px 12px; }
#btn-pass.concede { background: #c8352a; color: #fff; box-shadow: 0 4px 12px rgba(200, 53, 42, .4); }
#btn-pass { background: var(--gold); color: #2a0a40; box-shadow: 0 4px 12px rgba(var(--gold-rgb), .3); }
button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Prawy panel ---------- */
.piles { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.piles button { padding: 4px 10px; font-size: 13px; }
#preview { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#preview .card { --card-w: calc(var(--right-w) * .62); --card-h: calc(var(--card-w) / .72); flex: none; }
#preview h3 { margin: 2px 0 0; font-size: 20px; color: var(--gold); text-align: center; }
.ptags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ptag { padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .1); }
.ptag.cat-Elita { background: linear-gradient(#ffe27a, #c99512); color: #2a1a00; }
.ptag.cat-Standard { background: linear-gradient(#f2f2f2, #a5a5a5); color: #1a1a1a; }
.ptag.cat-EnemyAbility { background: #c8352a; }
.ptag.cat-Boost { background: #3f9a3a; }
.ptag.cat-Ability { background: #6a4fd0; }
.ptag.zone { background: var(--zc); }
.ptag.zone.any { background: linear-gradient(90deg, #ff4d4d, #ffa64d, #e6d22a, #3fbf5a, #4dc8ff, #8f6bff); }
.pstats { display: flex; gap: 8px; justify-content: center; }
.pstat { padding: 3px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: 15px; font-weight: 800; }
.pstat.gold { color: var(--gold); }
.psection { align-self: stretch; border-radius: 12px; padding: 8px 10px; }
.psection-title { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 4px; }
.psection.rules { background: rgba(145, 70, 255, .16); border: 1px solid rgba(145, 70, 255, .45); }
.psection.rules .psection-title { color: #c9a8ff; }
.prule + .prule { margin-top: 6px; }
.prule-head { font-weight: 800; font-size: 14px; color: #fff; }
.prule-desc { font-size: 13.5px; line-height: 1.4; color: #eee6ff; }
.pnote { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.psection.flavor { background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .08); }
.psection.flavor .psection-title { color: var(--muted); }
.pflavor { font-style: italic; font-size: 13.5px; line-height: 1.4; color: #d8cbe9; }
.preview-empty { color: var(--muted); font-size: 13px; margin: auto; text-align: center; }
#log { height: 190px; overflow-y: auto; font-size: 12.5px; line-height: 1.45; }
#log .who-0 { color: #9fd18b; }
#log .who-1 { color: #f08f84; }
#log .sys { color: var(--gold); font-weight: 600; }

/* ---------- Okna ---------- */
#overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(8, 2, 18, .8); }
.modal { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); padding: 20px 28px; max-width: 92vw; max-height: 92vh; overflow-y: auto; text-align: center; }
.modal h2 { margin: 0 0 6px; color: var(--gold); }
.modal .cards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 16px 0 8px; }
.modal .card { --card-h: 150px; --card-w: 108px; }
.modal .card[data-action] { cursor: pointer; }
.modal .card[data-action]:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(var(--gold-rgb), .5); }
.modal-desc { color: var(--muted); min-height: 20px; font-size: 14px; }

/* Wybór nagrody: podgląd ma zawsze ten sam rozmiar (okno nie skacze), karta po lewej, opis po prawej */
.preview-box.reward-preview {
  position: static; display: grid; grid-template-columns: 150px 1fr; grid-auto-rows: min-content;
  column-gap: 16px; row-gap: 0; align-items: start; justify-items: start;
  width: min(560px, 84vw); height: 320px; overflow-y: auto; margin: 8px auto 0; text-align: left;
}
.preview-box.reward-preview > .card { --card-w: 150px; --card-h: 208px; grid-column: 1; grid-row: 1 / span 20; }
.preview-box.reward-preview > :not(.card) { grid-column: 2; width: 100%; }
.preview-box.reward-preview > :not(.card) ~ :not(.card) { margin-top: 8px; }
.preview-box.reward-preview .ptags, .preview-box.reward-preview .pstats { justify-content: flex-start; }
.preview-box.reward-preview h3 { text-align: left; margin: 0; }
.reward-cards .card.active { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(var(--gold-rgb), .5); }
.modal .buttons { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.modal table { margin: 12px auto; border-collapse: collapse; }
.modal td, .modal th { padding: 4px 14px; border-bottom: 1px solid var(--line); }

#banner {
  position: fixed; left: 50%; top: 40%; z-index: 95;
  transform: translate(-50%, -50%);
  padding: 22px 48px;
  background: rgba(28, 11, 54, .96);
  border: 2px solid var(--gold);
  border-radius: 18px;
  text-align: center;
  pointer-events: none;
}
.banner-title { font-size: 28px; font-weight: 800; color: var(--gold); }
.banner-score { font-size: 22px; margin-top: 6px; }

#toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: rgba(28, 11, 54, .96); border: 1px solid var(--line); border-radius: 20px; padding: 8px 16px; font-size: 14px; transition: opacity .5s; }
.toast.opp { border-color: #c4544a; }
.toast.error { border-color: #e0443a; background: rgba(70, 12, 30, .96); }
.toast.fade { opacity: 0; }