/* Layout: noční přístav — posádky nahoře na kožených štítcích, uprostřed zčernalý dubový stůl s balíčkem a přístavem, dole galerie karet. Siluety proti ohni/měsíci, mosaz, krev, kost. Záměrně jen tmavé téma. */
:root {
  --pitch: #07080a;
  --oak: #2a1d14;
  --brass: #b08a4a;
  --brass-dk: #5e4622;
  --bone: #e6dcc3;
  --parch: #cbb58a;
  --blood: #9e1b13;
  --ember: #e0702a;
  --fog: #8f9aa3;
  --display: 'Pirata One', Georgia, serif;
  --body: 'Alegreya', Georgia, 'Times New Roman', serif;
  --label: 'Alegreya SC', 'Alegreya', Georgia, serif;
  --cw: 150px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font-family: var(--body); font-size: 17px; color: var(--bone);
  background: radial-gradient(900px 500px at 50% -5%, #1b2228 0%, transparent 70%), var(--pitch);
}
body::before, body::after { content: ""; position: fixed; pointer-events: none; z-index: 0; }
body::before {
  inset: -20%;
  background: radial-gradient(40% 20% at 20% 70%, rgba(143,154,163,.10), transparent 70%), radial-gradient(35% 18% at 80% 30%, rgba(143,154,163,.08), transparent 70%);
  animation: fogdrift 40s ease-in-out infinite alternate;
}
body::after {
  inset: 0; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes fogdrift { to { transform: translateX(8%) translateY(-3%); } }
.wrap { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding-inline: 16px; padding-block: 22px 70px; display: grid; gap: 24px; }
header.top { display: flex; justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 7vw, 64px); line-height: .95; margin: 0; color: var(--bone); letter-spacing: 1px; text-shadow: 0 0 24px rgba(224,112,42,.25), 0 3px 0 #000; }
h1 em { font-style: normal; color: var(--blood); }
h2 { font-family: var(--display); font-weight: 400; font-size: 32px; margin: 0; color: var(--bone); letter-spacing: .5px; }
.lede { color: var(--fog); margin: 6px 0 0; max-width: 60ch; line-height: 1.45; font-style: italic; }
.lbl { font-family: var(--label); font-size: 14px; letter-spacing: .14em; text-transform: lowercase; color: var(--brass); margin-bottom: 8px; }

/* ---------- crews ---------- */
.players { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .players { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px 16px;
  background: linear-gradient(#1c1612, #120e0b); border: 1px solid #3a2c1e; border-radius: 6px;
  box-shadow: inset 0 0 0 3px #0c0907, inset 0 0 0 4px #3a2c1e;
  transition: border-color .4s, box-shadow .4s, filter .4s; filter: brightness(.7) saturate(.7);
}
.pl.active { filter: none; border-color: var(--brass); animation: lantern 2.4s infinite; }
@keyframes lantern {
  0%,100% { box-shadow: inset 0 0 0 3px #0c0907, inset 0 0 0 4px var(--brass-dk), 0 0 26px rgba(224,112,42,.35); }
  37% { box-shadow: inset 0 0 0 3px #0c0907, inset 0 0 0 4px var(--brass-dk), 0 0 18px rgba(224,112,42,.22); }
  41% { box-shadow: inset 0 0 0 3px #0c0907, inset 0 0 0 4px var(--brass-dk), 0 0 34px rgba(224,112,42,.45); }
  70% { box-shadow: inset 0 0 0 3px #0c0907, inset 0 0 0 4px var(--brass-dk), 0 0 22px rgba(224,112,42,.3); }
}
.av {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-size: 26px; color: var(--bone);
  background: radial-gradient(circle at 40% 35%, var(--c), #0b0a09 75%); border: 2px solid var(--brass-dk);
}
.pl.active .av { border-color: var(--brass); }
.pl .meta { min-width: 0; display: grid; gap: 1px; }
.pl .nm { font-family: var(--display); font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .3px; }
.pl .st { font-size: 15px; color: var(--fog); display: flex; gap: 12px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.pl .st b { color: var(--brass); font-weight: 700; display: inline-block; }
.pl.bump .st b { animation: bump .6s; }
@keyframes bump { 30% { color: #ffd88a; text-shadow: 0 0 10px var(--ember); transform: scale(1.35); } }
.fuse { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; background: #241a12; border-radius: 2px; opacity: 0; transition: opacity .3s; }
.pl.timed .fuse { opacity: 1; }
.fuse i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 1) * 100%); background: repeating-linear-gradient(90deg, #8a6a3a 0 4px, #5e4622 4px 7px); border-radius: 2px; }
.fuse i::after { content: ""; position: absolute; right: -5px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, #fff6c8 0, #ffb347 30%, rgba(224,112,42,.6) 55%, transparent 70%); animation: sparkle .12s infinite alternate; }
@keyframes sparkle { to { transform: scale(1.4) rotate(40deg); opacity: .7; } }
.pl.urgent .fuse i { background: repeating-linear-gradient(90deg, #a3301c 0 4px, #5a0d08 4px 7px); }

/* ---------- table ---------- */
.table {
  position: relative; border-radius: 8px; padding: 20px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(224,112,42,.12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px),
    linear-gradient(#2a1d14, #17100b);
  border: 1px solid #000; box-shadow: inset 0 0 0 2px #3a2a1c, inset 0 0 60px rgba(0,0,0,.8), 0 22px 50px rgba(0,0,0,.7);
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
}
.table.myturn::after { content: ""; position: absolute; inset: -1px; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 1px var(--brass), 0 0 40px rgba(224,112,42,.28); animation: lanternfade 2.4s infinite; }
@keyframes lanternfade { 40% { opacity: .65; } 44% { opacity: 1; } 75% { opacity: .8; } }
.table.bust { animation: shake .55s; }
@keyframes shake { 15%,55% { transform: translate(-7px, 2px); } 35%,75% { transform: translate(7px, -2px); } }
@media (max-width: 700px) { .table { grid-template-columns: 1fr; padding: 14px; } :root { --cw: 116px; } }
.deckcol { display: grid; gap: 10px; justify-items: center; }
.deck { position: relative; width: var(--cw); aspect-ratio: 5/7; }
.deck .card { position: absolute; inset: 0; }
.deck .card:nth-child(1) { transform: translate(5px, 5px); }
.deck .card:nth-child(2) { transform: translate(2.5px, 2.5px); }
.deckcount { font-family: var(--label); font-size: 15px; color: var(--fog); font-variant-numeric: tabular-nums; }
.harbor { min-height: calc(var(--cw) * 1.4 + 22px); display: flex; flex-wrap: wrap; gap: 14px; align-content: flex-start; padding: 10px; border-radius: 6px; background: linear-gradient(rgba(6,14,20,.55), rgba(3,6,9,.75)); box-shadow: inset 0 0 30px rgba(0,0,0,.8); border: 1px solid #000; }
.harbor:empty::after { content: "Přístav je prázdný. Otoč první kartu z balíčku."; font-style: italic; color: var(--fog); opacity: .75; margin: auto; text-align: center; padding: 0 10px; }
.actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.status { flex: 1 1 240px; color: var(--parch); font-style: italic; min-width: 0; }
button {
  font: 400 20px var(--display); letter-spacing: .5px; cursor: pointer; border-radius: 4px; padding: 9px 20px 10px;
  color: var(--bone); background: linear-gradient(#5a1510, #340a07); border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px #7a2a1d, 0 3px 0 #000; transition: transform .1s, box-shadow .2s, opacity .2s;
}
button:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px #b8452e, 0 3px 0 #000, 0 0 18px rgba(158,27,19,.5); }
button:active { transform: translateY(2px); }
button:disabled { opacity: .35; cursor: not-allowed; animation: none !important; box-shadow: inset 0 0 0 1px #3a1510, 0 3px 0 #000; }
button.ghost { background: linear-gradient(#2a221a, #17120d); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--brass-dk), 0 3px 0 #000; }
button.tiny { font: 600 15px var(--label); padding: 6px 12px; letter-spacing: .08em; }
button:focus-visible, .card:focus-visible, [role=button]:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
button.pulse { animation: ember 1.6s ease-in-out infinite; }
@keyframes ember { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px #e0702a, 0 3px 0 #000, 0 0 24px rgba(224,112,42,.55); } }

/* ---------- card ---------- */
.card { width: var(--cw); aspect-ratio: 5/7; perspective: 800px; flex: 0 0 auto; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.card .tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.card:hover .tilt { transition: transform .1s linear; }
.card .flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4,.1,.2,1); }
.card.flipped .flip { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 7px; overflow: hidden; }
.front {
  background: #15110d; border: 1px solid #000; display: grid; grid-template-rows: 63% 1fr; padding: 5px;
  box-shadow: inset 0 0 0 3px #15110d, inset 0 0 0 4px var(--brass-dk), 0 8px 18px rgba(0,0,0,.7);
}
.back { transform: rotateY(180deg); background: #120d0a; border: 1px solid #000; box-shadow: 0 8px 18px rgba(0,0,0,.7); }
.back svg { width: 100%; height: 100%; display: block; }
.back svg * { transform-box: fill-box; }
/* pojistka pro prohlížeče, kde backface-visibility selže: skrytou stranu schovej v půlce otočky */
.card .face.front, .card .face.back { transition: visibility 0s .35s; }
.card.flipped .face.front, .card:not(.flipped) .face.back { visibility: hidden; }
.deck .card .face.back, .card.backonly .face.back { visibility: visible; transform: none; }
.coin-spin { transform-origin: 50% 50%; animation: coinspin 7s ease-in-out infinite; }
@keyframes coinspin { 0%, 82%, 100% { transform: scaleX(1); } 88% { transform: scaleX(.08); } 94% { transform: scaleX(1); } }
.coin-sheen { animation: sheen 5s ease-in-out infinite; }
@keyframes sheen { 0%, 60% { transform: translateX(-90px) rotate(25deg); } 85%, 100% { transform: translateX(90px) rotate(25deg); } }
.art { position: relative; overflow: hidden; border-radius: 3px 3px 0 0; box-shadow: 0 0 0 1px #000; }
.art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.65) 100%); }
.art::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ability {
  position: relative; border-radius: 0 0 3px 3px; padding: calc(var(--cw) * .1) 5px 5px; display: grid; align-content: center; justify-items: center; gap: 2px; text-align: center;
  font-size: calc(var(--cw) * .072); line-height: 1.1; color: #2a1c10; font-style: italic; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #d8c398 0%, #b89c68 70%, #6e5530 100%);
}
.ribbon {
  position: absolute; left: 50%; top: calc(63% + 2px); transform: translate(-50%, -55%); z-index: 3; white-space: nowrap;
  font-family: var(--display); font-size: calc(var(--cw) * .13); color: var(--bone); letter-spacing: .4px; line-height: 1;
  padding: 3px 14px 4px; background: var(--fr, #3a0d09);
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
  text-shadow: 0 1px 0 #000; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
}
.badge {
  position: absolute; z-index: 4; top: 8px; width: calc(var(--cw) * .2); height: calc(var(--cw) * .2); display: grid; place-items: center;
  font-family: var(--display); font-size: calc(var(--cw) * .125); line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.8));
}
.badge.tl { left: 8px; } .badge.tr { right: 8px; }
.badge.coin { border-radius: 50%; color: #3a2408; background: radial-gradient(circle at 38% 32%, #f2d48a, #b8862e 50%, #5e4018 100%); box-shadow: inset 0 0 0 2px #6e4c1c, inset 0 0 0 3px #d9b56a; text-shadow: 0 1px 0 rgba(255,240,200,.5); }
.badge.vp { color: var(--bone); background: radial-gradient(circle at 40% 35%, #c2322a, #6e0f0a 80%); clip-path: polygon(50% 0, 63% 6%, 78% 4%, 86% 16%, 98% 26%, 95% 42%, 100% 56%, 90% 68%, 88% 84%, 72% 90%, 60% 100%, 46% 95%, 30% 98%, 20% 86%, 6% 78%, 7% 62%, 0 48%, 8% 34%, 10% 18%, 26% 12%, 36% 2%); }
.badge.sword { color: #fff; background: linear-gradient(135deg, #a7b0b7, #4a5258 55%, #23282c); clip-path: polygon(50% 0, 100% 16%, 92% 68%, 50% 100%, 8% 68%, 0 16%); }
.badge.skull { filter: drop-shadow(0 0 6px rgba(0,0,0,.9)); }
.badge.skull svg { width: 100%; height: 100%; }
.shine { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 7px; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,220,160,.35), transparent 45%); opacity: 0; transition: opacity .3s; mix-blend-mode: overlay; }
.card:hover .shine { opacity: 1; }
.card.takeable .face.front { box-shadow: inset 0 0 0 3px #15110d, inset 0 0 0 4px var(--brass), 0 0 22px rgba(224,112,42,.45), 0 8px 18px rgba(0,0,0,.7); }
.card.takeable:hover .tilt { translate: 0 -6px; }
.card.cant { filter: grayscale(.7) brightness(.55); }
.card.newest .face.front { animation: reveal 1.4s ease-out; }
@keyframes reveal { 0% { filter: brightness(2.2) sepia(1); } 100% { filter: none; } }
.card.sink { animation: sink 1.2s cubic-bezier(.5,0,.9,.6) forwards; }
@keyframes sink { 0% { filter: none; } 30% { transform: rotate(-6deg); filter: brightness(.7) sepia(.6); } 100% { transform: translateY(70px) rotate(12deg) scale(.85); opacity: 0; filter: brightness(.1) sepia(1) hue-rotate(160deg); } }
.card.dup .face.front { animation: dupflash .22s 5 alternate; }
@keyframes dupflash { to { box-shadow: inset 0 0 0 4px var(--blood), 0 0 30px rgba(158,27,19,.9); } }

/* ---------- svg animation parts ---------- */
:where(.art svg *) { transform-box: fill-box; }
/* animované díly postav, lodí a medailí: otáčet kolem vlastního středu (bez ohledu na to, kde je obrázek vložen) */
.bottle, .scope, .fan, .goblet, .flag, .boat, .scale-beam, .needle, .py-phead, .swing, .jug-l, .jug-r, .sunrays, .glint, .twinkle, .halo, .glow, .smoke, .spark, .lamp, .coin-spin, .coin-sheen, .sail, .wheel, .deck-roll, .fig, .bolt, .xmark, .seal, .orbit .ic { transform-box: fill-box; }
.boat { transform-origin: 50% 85%; animation: bob var(--bob, 3.6s) ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-3.5deg); } 50% { transform: translateY(3px) rotate(4deg); } }
.sail { transform-origin: 50% 0%; animation: billow 2.6s ease-in-out infinite; }
@keyframes billow { 50% { transform: scaleX(1.06) scaleY(1.02); } }
.flag { transform-origin: 0% 50%; animation: flag .7s ease-in-out infinite alternate; }
@keyframes flag { to { transform: skewY(9deg) scaleX(.86); } }
.wv { transform-box: view-box; animation: wave var(--wd, 4s) linear infinite; }
.wv.rev { animation-direction: reverse; }
@keyframes wave { to { transform: translateX(-80px); } }
.mist { transform-box: view-box; animation: mist 14s ease-in-out infinite alternate; }
@keyframes mist { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
.bolt { animation: bolt 6s infinite; opacity: 0; }
@keyframes bolt { 0%, 78%, 81%, 83%, 100% { opacity: 0; } 79%, 82% { opacity: .85; } }
.rain { transform-box: view-box; animation: rain .5s linear infinite; }
@keyframes rain { from { transform: translate(0, -20px); } to { transform: translate(-8px, 20px); } }
.lamp { animation: lamp 1.9s infinite; }
@keyframes lamp { 0%,100% { opacity: 1; } 33% { opacity: .65; } 36% { opacity: .95; } 61% { opacity: .75; } }
.glow { animation: lamp 3.1s infinite; }
.fig { transform-origin: 50% 100%; animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(1px) scaleY(.992); } }
.deck-roll { transform-origin: 50% 100%; animation: roll 3.4s ease-in-out infinite; }
@keyframes roll { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.swL { transform-box: view-box; transform-origin: 0 0; animation: swL 1.5s cubic-bezier(.6,0,.25,1) infinite; }
.swR { transform-box: view-box; transform-origin: 0 0; animation: swR 1.5s cubic-bezier(.6,0,.25,1) infinite; }
@keyframes swL { 0%,100% { transform: rotate(-30deg); } 32% { transform: rotate(3deg); } 46% { transform: rotate(-12deg); } 60% { transform: rotate(3deg); } }
@keyframes swR { 0%,100% { transform: rotate(30deg); } 32% { transform: rotate(-3deg); } 46% { transform: rotate(12deg); } 60% { transform: rotate(-3deg); } }
.spark { transform-origin: 50% 50%; animation: spark 1.5s infinite; opacity: 0; }
@keyframes spark { 0%,28%,40%,56%,68%,100% { opacity: 0; transform: scale(.2); } 33%,61% { opacity: 1; transform: scale(1.3) rotate(25deg); } }
.swing { transform-origin: 50% 0%; animation: swing 2.6s ease-in-out infinite alternate; }
@keyframes swing { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.bottle { transform-origin: 20% 90%; animation: bottle 1.8s ease-in-out infinite alternate; }
@keyframes bottle { from { transform: rotate(-8deg); } to { transform: rotate(22deg); } }
.knife { transform-box: view-box; animation: juggle 1.5s linear infinite; }
.knife > g { transform-box: fill-box; transform-origin: 50% 50%; animation: spin .5s linear infinite; }
@keyframes juggle { 0% { transform: translate(0, 0); } 25% { transform: translate(16px, -50px); } 50% { transform: translate(42px, 0); } 75% { transform: translate(21px, 8px); } 100% { transform: translate(0, 0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.jingle { transform-origin: 50% 100%; animation: jingle .8s ease-in-out infinite alternate; }
@keyframes jingle { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.scope { transform-origin: 0% 50%; animation: scope 3.2s ease-in-out infinite alternate; }
@keyframes scope { from { transform: rotate(-7deg); } to { transform: rotate(5deg); } }
.glint { transform-origin: 50% 50%; animation: glint 2.6s ease-in-out infinite; }
@keyframes glint { 0%,70%,100% { opacity: 0; transform: scale(.2); } 80% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.wheel { transform-origin: 50% 50%; animation: wheel 4s ease-in-out infinite alternate; }
@keyframes wheel { from { transform: rotate(-50deg); } to { transform: rotate(40deg); } }
.fan { transform-origin: 15% 85%; animation: fan 1s ease-in-out infinite alternate; }
@keyframes fan { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
.flame { transform-origin: 50% 100%; animation: flame .3s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scaleY(1.25) skewX(7deg); } }
.smoke { transform-origin: 50% 50%; animation: smoke 3.4s ease-out infinite; opacity: 0; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 25% { opacity: .5; } 100% { opacity: 0; transform: translate(14px, -40px) scale(1.8); } }
.halo { transform-origin: 50% 50%; animation: halo 3s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.15); opacity: .5; } }
.scale-beam { transform-origin: 50% 50%; animation: beam 3s ease-in-out infinite alternate; }
.scale-beam .pan { transform-origin: 50% 0%; animation: beam 3s ease-in-out infinite alternate-reverse; }
@keyframes beam { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.orbit { transform-box: view-box; transform-origin: 80px 70px; animation: spin 9s linear infinite; }
.orbit .ic { transform-origin: 50% 50%; animation: spin 9s linear infinite reverse; }
.goblet { transform-origin: 30% 100%; animation: goblet 3.6s ease-in-out infinite; }
@keyframes goblet { 0%,55%,100% { transform: rotate(0); } 70%,80% { transform: translate(-8px,-10px) rotate(-28deg); } }
.twinkle { transform-origin: 50% 50%; animation: glint 2.2s ease-in-out infinite; }
.dash { animation: dash 3s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -40; } }
.needle { transform-origin: 50% 50%; animation: needle 2.2s ease-in-out infinite; }
@keyframes needle { 0%,100% { transform: rotate(-20deg); } 30% { transform: rotate(25deg); } 55% { transform: rotate(-8deg); } 75% { transform: rotate(12deg); } }
.xmark { transform-origin: 50% 50%; animation: halo 1.6s ease-in-out infinite; }
.seal { transform-origin: 50% 50%; animation: seal 2.8s cubic-bezier(.6,0,.3,1.3) infinite; }
@keyframes seal { 0%, 18% { transform: translateY(-36px) scale(1.4); opacity: 0; } 32% { transform: none; opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.fall { transform-box: view-box; animation: fall 2.8s ease-in infinite; }
@keyframes fall { 0% { transform: translateY(-60px); opacity: 0; } 12% { opacity: 1; } 55%,100% { transform: translateY(0); opacity: 1; } }

/* ---------- overlays ---------- */
.banner { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; }
.banner .dim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.55), rgba(0,0,0,.92) 70%); animation: fadein .5s; }
@keyframes fadein { from { opacity: 0; } }
.plate { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; padding-inline: 16px; }
.jolly { width: min(300px, 70vw); filter: drop-shadow(0 20px 30px rgba(0,0,0,.9)); animation: flagdrop .9s cubic-bezier(.3,1.25,.5,1) both; }
.jolly .cloth { transform-box: fill-box; transform-origin: 0 50%; animation: clothwave 1.8s ease-in-out infinite alternate; }
@keyframes flagdrop { from { transform: translateY(-120vh) rotate(-6deg); } }
@keyframes clothwave { from { transform: skewY(-2deg) scaleX(1); } to { transform: skewY(3deg) scaleX(.97); } }
.plate .ttl {
  font-family: var(--display); font-size: clamp(44px, 10vw, 92px); line-height: .95; color: var(--bone); letter-spacing: 1px;
  text-shadow: 0 0 30px rgba(224,112,42,.45), 0 4px 0 #000;
}
.plate .ttl span { display: inline-block; animation: ink .7s ease-out both; }
@keyframes ink { from { opacity: 0; filter: blur(10px); transform: scale(1.4); } }
.plate .sub { font-family: var(--label); font-size: 19px; letter-spacing: .12em; color: var(--parch); animation: fadein 1s .6s both; }
.banner.small { place-items: start center; padding-top: 6vh; }
.banner.small .dim { background: linear-gradient(rgba(0,0,0,.8), transparent 45%); }
.banner.small .ttl { font-size: clamp(32px, 6vw, 52px); }
.banner.small .jolly, .banner.bad .jolly { display: none; }
.banner.bad .dim { background: radial-gradient(ellipse at 50% 45%, rgba(90,8,4,.55), rgba(0,0,0,.92) 70%); animation: fadein .15s, redflash .6s; }
@keyframes redflash { 0% { background-color: rgba(200,30,10,.6); } }
.banner.bad .ttl { color: #d9372a; text-shadow: 0 0 34px rgba(158,27,19,.8), 0 4px 0 #000; }
.banner.out .plate, .banner.out .dim { animation: fadeout .5s forwards; }
@keyframes fadeout { to { opacity: 0; } }
.fx { position: fixed; z-index: 89; pointer-events: none; left: 0; top: 0; }
.flycoin { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #f2d48a, #b8862e 50%, #5e4018 100%); box-shadow: inset 0 0 0 2px #6e4c1c, 0 0 10px rgba(224,160,60,.6), 0 2px 4px #000; }
.ember { width: 5px; height: 5px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px 2px rgba(224,112,42,.8); }

@media (prefers-reduced-motion: reduce) {
  .art svg *, .back svg *,.banner *, .pl.active, button.pulse, .table.myturn::after, body::before { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}

/* ================= online hra: úvod, lobby, stůl ================= */
[hidden] { display: none !important; }
input {
  font: 17px var(--body); color: var(--bone); background: #0e0b09; border: 1px solid #3a2c1e; border-radius: 4px;
  padding: 10px 12px; width: 100%; min-width: 0; box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
}
input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
input:not([type=checkbox]):not([type=radio]) { min-height: 44px; }
.row { display: flex; gap: 10px; align-items: center; }
.stack { display: grid; gap: 12px; }
.muted { color: var(--fog); font-style: italic; }
.panel {
  background: linear-gradient(#1c1612, #120e0b); border: 1px solid #3a2c1e; border-radius: 6px; padding: 18px;
  box-shadow: inset 0 0 0 3px #0c0907, inset 0 0 0 4px #3a2c1e, 0 18px 40px rgba(0,0,0,.6);
}
.home { max-width: 520px; margin: 0 auto; display: grid; gap: 18px; text-align: center; }
.home .panel { text-align: left; }
.home h1 { font-size: clamp(52px, 12vw, 84px); }
.home .deckhero { display: flex; justify-content: center; gap: 0; margin-top: 4px; }
.home .deckhero .card { --cw: 96px; margin: 0 -14px; }
.home .deckhero .card:nth-child(2) { z-index: 2; transform: translateY(-6px); }
.home .row button { white-space: nowrap; }
.home .deckhero .card:nth-child(1) { transform: rotate(-12deg) translateY(10px); }
.home .deckhero .card:nth-child(3) { transform: rotate(12deg) translateY(10px); }
.rules ul { margin: 6px 0 0; padding-left: 18px; color: var(--fog); line-height: 1.5; font-size: 16px; }
.rules b { color: var(--parch); }
.code { font-family: var(--display); font-size: 48px; letter-spacing: 6px; color: var(--brass); text-shadow: 0 0 18px rgba(224,112,42,.3); }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #2a2016; border-radius: 4px; background: #0e0b09; }
.plist .who { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 21px; min-width: 0; }
.plist .av { width: 34px; height: 34px; font-size: 19px; }
.tag { font: 600 12px var(--label); letter-spacing: .1em; color: var(--brass); border: 1px solid var(--brass-dk); border-radius: 3px; padding: 1px 6px; margin-left: 6px; }
.tag.off { color: #d9372a; border-color: #5a0d08; }
.account summary { cursor: pointer; list-style: none; margin: 0; }
.account summary::-webkit-details-marker { display: none; }
.account summary::before { content: "▸ "; color: var(--brass-dk); }
.account[open] summary { margin-bottom: 12px; }
.account[open] summary::before { content: "▾ "; }
.account .lbl { margin: 0; }
.captain { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--brass); }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar h1 { font-size: clamp(32px, 6vw, 48px); }
.topbar .meta { color: var(--fog); font-style: italic; font-size: 15px; }
.topbar .btns { display: flex; gap: 8px; flex-wrap: wrap; }

.pl { cursor: default; }
.pl.me .nm::after { content: " (ty)"; font-family: var(--body); font-size: 14px; color: var(--fog); }
.pl.actor:not(.active) { filter: none; border-color: var(--ember); }
.pl .star { color: var(--brass); font-size: 16px; margin-right: 4px; }
.pl .off { color: #d9372a; font: 600 12px var(--label); letter-spacing: .08em; }
.pl.actor::before { content: "na řadě"; position: absolute; top: -9px; right: 10px; font: 600 12px var(--label); letter-spacing: .1em; color: #1a0e06; background: var(--brass); padding: 0 6px; border-radius: 2px; }
.players.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.players.n2, .players.n3 { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
@media (max-width: 700px) { .players.n5, .players.n2, .players.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tablemain { display: grid; gap: 14px; min-width: 0; }
.exps { display: flex; flex-wrap: wrap; gap: 14px; min-height: 30px; }
.exps .card { --cw: 112px; }
.exps:empty::after { content: "Zatím žádná expedice."; color: var(--fog); font-style: italic; opacity: .75; }
.card.cant { cursor: not-allowed; }
.card.newest .face.front { animation: reveal 1.4s ease-out; }
.deckcol .deck { cursor: pointer; }
.deckcol .deck.live .card:last-child { animation: decklive 1.6s ease-in-out infinite; border-radius: 7px; }
@keyframes decklive { 50% { box-shadow: 0 0 26px rgba(224,112,42,.55); } }
.endnote { color: #e0702a; font-family: var(--label); letter-spacing: .08em; }

.crew { display: grid; gap: 10px; align-content: start; }
.crew .cards { display: flex; flex-wrap: wrap; gap: 10px; }
.crew .cards .card { --cw: 96px; }
.crew .cards .card .ability { font-size: calc(var(--cw) * .09); }
.crew .empty, .others .empty { color: var(--fog); font-style: italic; opacity: .75; }
.others { display: grid; gap: 10px; }
.others details { border: 1px solid #2a2016; border-radius: 6px; background: rgba(14,11,9,.7); padding: 10px 12px; }
.others summary { cursor: pointer; font-family: var(--display); font-size: 20px; color: var(--bone); }
.others summary span { font-family: var(--body); font-size: 15px; color: var(--fog); font-style: italic; margin-left: 6px; }
.others .cards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.others .cards .card { --cw: 80px; }
.others .cards .card .ability { display: none; }
.others .cards .card .front { grid-template-rows: 1fr 0; }
.others .cards .card .ribbon { top: auto; bottom: 4px; transform: translateX(-50%); font-size: calc(var(--cw) * .15); }

.bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .bottom { grid-template-columns: 1fr; } }
.logbox { max-height: 260px; overflow-y: auto; display: grid; gap: 4px; align-content: start; padding: 10px 12px; border: 1px solid #2a2016; border-radius: 6px; background: rgba(8,6,5,.8); font-size: 15px; color: var(--parch); line-height: 1.35; }
.logbox .chat { color: var(--bone); }
.logbox .chat b { color: var(--brass); font-weight: 400; font-family: var(--label); }
.logbox > div:first-child { color: var(--bone); }

.final { text-align: center; display: grid; gap: 12px; justify-items: center; }
.final table { border-collapse: collapse; font-size: 18px; min-width: min(360px, 100%); }
.final th { font: 600 14px var(--label); letter-spacing: .12em; color: var(--brass); text-align: left; padding: 4px 12px; border-bottom: 1px solid var(--brass-dk); }
.final td { padding: 6px 12px; border-bottom: 1px solid #2a2016; text-align: left; font-variant-numeric: tabular-nums; }
.final tr.win td { color: #ffd88a; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(40px); opacity: 0; z-index: 70; pointer-events: none;
  background: linear-gradient(#5a1510, #340a07); color: var(--bone); border: 1px solid #000; border-radius: 4px; padding: 10px 18px;
  box-shadow: inset 0 0 0 1px #7a2a1d, 0 10px 30px rgba(0,0,0,.7); transition: transform .3s, opacity .3s; max-width: calc(100vw - 32px); text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%); }
.flycard { position: fixed; z-index: 55; pointer-events: none; left: 0; top: 0; margin: 0; }


/* ================= ikony na kartách ================= */
.ability .icons { display: flex; align-items: center; justify-content: center; gap: calc(var(--cw) * .02); flex-wrap: wrap; min-height: calc(var(--cw) * .16); }
.ability .txt { max-width: 100%; }
.ic { width: calc(var(--cw) * .16); height: calc(var(--cw) * .16); display: inline-grid; place-items: center; flex: 0 0 auto; }
svg.ic { filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.ic.coin { border-radius: 50%; font: 400 calc(var(--cw) * .085)/1 var(--display); color: #3a2408; background: radial-gradient(circle at 38% 32%, #f8de94, #c8932f 55%, #6e4a18 100%); box-shadow: inset 0 0 0 1.5px #6e4c1c, 0 1px 2px rgba(0,0,0,.5); }
.ic.vpi { border-radius: 3px 3px 50% 50%; font: 400 calc(var(--cw) * .08)/1 var(--display); color: #fff; background: linear-gradient(#c2322a, #6e0f0a); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ability .n5 { font: 400 calc(var(--cw) * .1)/1 var(--display); color: #3a2408; }
.ability .lbl2 { font: 600 calc(var(--cw) * .065)/1 var(--label); letter-spacing: .08em; color: #5e4018; text-transform: uppercase; font-style: normal; }
.flagdot { width: calc(var(--cw) * .11); height: calc(var(--cw) * .11); border-radius: 2px; background: var(--f); box-shadow: 0 0 0 1.5px #2a1c10; display: inline-block; }
.badge.sword { font-size: calc(var(--cw) * .12); }
.badge.tl.skull { left: 8px; }
.req { position: absolute; inset: 0; z-index: 2; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: calc(var(--cw) * .03); padding: 18% 10% 10%; }
.req .ic { width: calc(var(--cw) * .3); height: calc(var(--cw) * .3); filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.t-expedition .art > svg { opacity: .55; }
/* malé karty: jen ikony */
.crew .cards .card .txt, .others .cards .card .txt, .exps .card .txt { display: none; }
.crew .cards .card .ability, .exps .card .ability { padding-top: calc(var(--cw) * .12); }
.others .cards .card .ability { display: grid; padding: 2px; }
.others .cards .card .front { grid-template-rows: 70% 1fr; }
.others .cards .card .ribbon { display: none; }
.others .cards .card .badge { top: 4px; }
.others .cards .card .badge.tl { left: 4px; } .others .cards .card .badge.tr { right: 4px; }

/* cenovka v přístavu: kolik dostaneš / zaplatíš */
.ptag { position: absolute; z-index: 8; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 400 18px/1 var(--display); padding: 4px 10px 5px; border-radius: 12px; border: 1px solid #000; box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.ptag.gain { background: linear-gradient(#3f7a2e, #24501a); color: #eaffd8; }
.ptag.cost { background: linear-gradient(#8a6a3a, #5e4018); color: #fff3d8; }
.ptag.no { background: linear-gradient(#5a1510, #340a07); color: #ffb0a0; }

/* ================= pálení karet při ztroskotání ================= */
.flycard.burn { -webkit-mask-image: linear-gradient(to bottom, #000 0 44%, transparent 56% 100%); mask-image: linear-gradient(to bottom, #000 0 44%, transparent 56% 100%);
  -webkit-mask-size: 100% 230%; mask-size: 100% 230%; -webkit-mask-position: 0 0; mask-position: 0 0; animation: burnmask var(--bd, 1s) cubic-bezier(.45,.05,.6,.95) forwards; }
@keyframes burnmask { to { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }
.flycard.burn .front { animation: char var(--bd, 1s) ease-in forwards; }
@keyframes char { 0% { filter: none; } 35% { filter: sepia(.6) brightness(.9) contrast(1.1); } 100% { filter: sepia(1) brightness(.3) contrast(1.4); } }
.burnedge { position: absolute; left: -6%; right: -6%; height: 22%; bottom: -20%; z-index: 9; pointer-events: none; border-radius: 40%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255,240,180,.95) 0, rgba(255,150,40,.9) 30%, rgba(200,50,10,.6) 55%, transparent 72%);
  filter: blur(1px); mix-blend-mode: screen; animation: edgeup var(--bd, 1s) cubic-bezier(.45,.05,.6,.95) forwards, flicker .09s infinite alternate; }
@keyframes edgeup { to { bottom: 105%; } }
@keyframes flicker { to { opacity: .75; transform: scaleX(1.04); } }
.flame-tongue { position: absolute; z-index: 10; bottom: 0; width: 18%; height: 30%; pointer-events: none; border-radius: 50% 50% 20% 20% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse at 50% 80%, #fff3b0, #ffae3a 40%, rgba(230,70,10,.7) 70%, transparent 75%); mix-blend-mode: screen; animation: tongue .5s ease-out infinite alternate; transform-origin: 50% 100%; }
@keyframes tongue { from { transform: scaleY(.6) skewX(-6deg); opacity: .7; } to { transform: scaleY(1.15) skewX(6deg); opacity: 1; } }

/* ================= hráči: symboly, šance ================= */
.pl .syms { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; font: 400 14px/1 var(--label); color: var(--parch); }
.pl .syms span { display: inline-flex; align-items: center; gap: 2px; }
.pl .syms .ic { --cw: 110px; }
.pl .odds { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.45); overflow: hidden; }
.pl .odds i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #b08a4a, #ffd88a); transition: width .8s cubic-bezier(.3,.8,.3,1); }
.pl .oddsn { position: absolute; right: 10px; top: 6px; font: 600 13px/1 var(--label); letter-spacing: .06em; color: var(--brass); font-variant-numeric: tabular-nums; }
.pl .oddsn .tr { font-size: 10px; margin-left: 2px; }
.pl .oddsn .up { color: #7fd06a; } .pl .oddsn .down { color: #e0533a; }
.pl.actor::before { right: auto; left: 10px; }
.oddsnote { color: var(--fog); font-style: italic; font-size: 14px; margin-top: -14px; }

/* stoly ostatních hráčů: vždy vidět */
.others .otable { border: 1px solid #2a2016; border-radius: 6px; background: rgba(14,11,9,.7); padding: 10px 12px; display: grid; gap: 8px; }
.others .otable .head { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 20px; }
.others .otable .head .av { width: 32px; height: 32px; font-size: 18px; }
.others .otable .head small { font: italic 15px var(--body); color: var(--fog); }
.others .cards { margin-top: 0; }

.topbar .btns button[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--brass), 0 3px 0 #000; }

/* ================= pack Moderní – den (světlý) ================= */
body.day { color: #2b1d0e; background: radial-gradient(1100px 600px at 50% -10%, #fff7e2 0%, transparent 70%), linear-gradient(#efe0bd, #d8bf8f); }
body.day::before { display: none; }
body.day::after { opacity: .05; }
body.day h1, body.day h2 { color: #3b2410; text-shadow: 0 2px 0 rgba(255,255,255,.5); }
body.day h1 em { color: #b53322; }
body.day .lede, body.day .muted, body.day .topbar .meta, body.day .hint, body.day .oddsnote { color: #6b5232; }
body.day .lbl { color: #8a5a1a; }
body.day .panel, body.day .pl { background: linear-gradient(#fbf3df, #f0e2c0); border-color: #b08a4a; box-shadow: inset 0 0 0 3px #fbf3df, inset 0 0 0 4px #d9be86, 0 10px 24px rgba(90,60,20,.25); color: #2b1d0e; }
body.day .pl { filter: saturate(.8) brightness(.96); }
body.day .pl.active { filter: none; border-color: #c9971a; }
body.day .pl .st, body.day .pl .syms { color: #6b5232; }
body.day .pl .st b { color: #a0581a; }
body.day .pl .nm { color: #2b1d0e; }
body.day .table { background: radial-gradient(60% 80% at 50% 0%, rgba(255,240,200,.35), transparent 70%), repeating-linear-gradient(90deg, rgba(60,30,10,.25) 0 2px, transparent 2px 90px), linear-gradient(#b98a58, #8e6236); box-shadow: inset 0 0 0 2px #6e4826, inset 0 0 50px rgba(60,30,10,.45), 0 16px 34px rgba(90,60,20,.35); }
body.day .harbor { background: repeating-radial-gradient(ellipse at 50% 120%, rgba(255,255,255,.07) 0 6px, transparent 6px 18px), linear-gradient(#5d9cc8, #2f6c9a); border-color: #1d4a6c; box-shadow: inset 0 0 26px rgba(10,40,70,.6); }
body.day .harbor:empty::after { color: #eaf4fb; }
body.day .status { color: #fff3d8; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
body.day .deckcount { color: #fff3d8; }
body.day .exps:empty::after { color: #fff3d8; }
body.day .front { background: #f7ecd2; box-shadow: inset 0 0 0 3px #f7ecd2, inset 0 0 0 5px var(--fr), 0 6px 14px rgba(60,30,10,.4); }
body.day .art { box-shadow: 0 0 0 1px #5e4018; }
body.day .art::before { background: radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(90,60,20,.25) 100%); }
body.day .art::after { opacity: .1; }
body.day .ability { background: linear-gradient(#fbf3df, #ecdcb4); color: #3b2410; }
body.day .ribbon { box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 3px rgba(0,0,0,.3); }
body.day .card.cant { filter: grayscale(.8) brightness(.8); }
body.day .logbox, body.day .others .otable, body.day input { background: rgba(255,250,236,.85); border-color: #c9ab72; color: #3b2410; }
body.day .logbox .chat { color: #2b1d0e; }
body.day .logbox > div:first-child { color: #000; }
body.day .others .otable .head small, body.day .crew .empty, body.day .others .empty { color: #6b5232; }
body.day .plist li { background: #fbf3df; border-color: #d9be86; }
body.day .code { color: #a0581a; text-shadow: none; }
body.day .rules ul { color: #4b3820; }
body.day .rules b { color: #8a5a1a; }
body.day .final td { border-color: #d9be86; }
body.day .final tr.win td { color: #a0581a; }
body.day .final th { color: #8a5a1a; border-color: #b08a4a; }
body.day button.ghost { background: linear-gradient(#fbf3df, #e8d4a6); color: #3b2410; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px #b08a4a, 0 3px 0 #8a6a3a; }
body.day .pl .odds { background: rgba(90,60,20,.18); }

.winvp { font-family: var(--display); font-size: 30px; color: var(--brass); }
body.day .winvp { color: #a0581a; }
button.tiny.on { box-shadow: inset 0 0 0 2px var(--brass), 0 3px 0 #000; color: #ffd88a; }
body.day button.tiny.on { color: #a0581a; }

/* ================= kapitán Portyš ================= */
.portys { position: fixed; z-index: 80; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 640px; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: end; gap: 0; pointer-events: none;
  animation: pyin .45s cubic-bezier(.3,1.3,.5,1) both; }
.portys.out { animation: pyout .3s ease-in forwards; }
@keyframes pyin { from { transform: translateY(40px); opacity: 0; } }
@keyframes pyout { to { transform: translateY(40px); opacity: 0; } }
.py-pic { pointer-events: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.portys-svg { width: 120px; height: auto; display: block; overflow: visible; }
.py-bubble { pointer-events: auto; position: relative; margin-bottom: 18px; padding: 12px 16px 12px; border-radius: 10px; color: #2b1d0e;
  background: linear-gradient(#fbf3df, #ecdcb4); border: 1px solid #8a6a3a; box-shadow: inset 0 0 0 3px #fbf3df, inset 0 0 0 4px #d9be86, 0 14px 34px rgba(0,0,0,.55); }
.py-bubble::before { content: ""; position: absolute; left: -12px; bottom: 26px; border: 12px solid transparent; border-right-color: #8a6a3a; border-left: 0; }
.py-bubble::after { content: ""; position: absolute; left: -9px; bottom: 27px; border: 11px solid transparent; border-right-color: #f2e6c8; border-left: 0; }
.py-name { font: 400 22px/1 var(--display); color: #8a2a18; margin-bottom: 4px; }
.py-text { font-size: 17px; line-height: 1.45; min-height: 3em; cursor: pointer; }
.py-text b { color: #6e2a10; }
.py-show { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; justify-content: center; max-height: calc(100dvh - 260px); overflow-y: auto; overscroll-behavior: contain; }
.py-bubble { min-width: 0; }
.py-show .card { --cw: 92px; }
.py-show .card .txt { display: none; }
.py-nav { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.py-count { margin-right: auto; font: 600 13px var(--label); letter-spacing: .1em; color: #8a6a3a; }
.py-nav .ghost { background: linear-gradient(#fbf3df, #e8d4a6); color: #3b2410; box-shadow: inset 0 0 0 1px #b08a4a, 0 3px 0 #8a6a3a; }
.py-eyes { transform-origin: 70px 66px; animation: pyblink 4.5s infinite; }
@keyframes pyblink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.py-head { transform-origin: 70px 110px; animation: pyhead 3.6s ease-in-out infinite; }
@keyframes pyhead { 50% { transform: rotate(-2.5deg); } }
.py-feather { transform-origin: 98px 42px; animation: pyfeather 2.2s ease-in-out infinite alternate; }
@keyframes pyfeather { to { transform: rotate(-9deg); } }
.py-phead { transform-origin: 2px -4px; animation: pyparrot 1.6s ease-in-out infinite; }
@keyframes pyparrot { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-18deg) translateY(1px); } 80% { transform: rotate(6deg); } }
.py-mouth { transform-origin: 70px 94px; }
.portys.talking .py-mouth, .portys.talking .py-must { animation: pytalk .16s ease-in-out infinite alternate; }
.py-must { transform-box: fill-box; transform-origin: 50% 0; }
@keyframes pytalk { to { transform: translateY(.6px) scaleY(.82); } }
.guide-focus { position: relative; z-index: 5; outline: 3px solid #ffd88a !important; outline-offset: 4px; border-radius: 8px; animation: guidepulse 1.4s ease-in-out infinite; }
@keyframes guidepulse { 50% { outline-color: #e0702a; box-shadow: 0 0 30px rgba(224,112,42,.55); } }
.home .portys-mini { width: 120px; margin: 0 auto -6px; cursor: pointer; }
.portys-full { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
@media (max-width: 560px) {
  .portys { grid-template-columns: 74px minmax(0, 1fr); left: 8px; right: 8px; bottom: 8px; }
  .portys-svg { width: 74px; }
  .py-text { font-size: 15.5px; }
  .py-show .card { --cw: 70px; }
  .py-show .card .ability { display: none; }
  .py-show .card .front { grid-template-rows: 1fr 0; }
}

/* ================= nastavení ================= */
.settings { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.65); overflow-y: auto; animation: fadein .2s; }
.settings > .panel { width: min(720px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.settings h2 { font-size: 30px; }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pack { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 12px 10px; font: 400 15px/1.3 var(--body); letter-spacing: 0; color: var(--bone);
  background: linear-gradient(#1c1612, #120e0b); box-shadow: inset 0 0 0 1px #3a2c1e, 0 3px 0 #000; }
.pack b { font: 400 21px var(--display); }
.pack span { color: var(--fog); font-style: italic; font-size: 14px; }
.pack.on { box-shadow: inset 0 0 0 2px var(--brass), 0 0 20px rgba(224,112,42,.35), 0 3px 0 #000; }
.pack .pv { display: flex; gap: 6px; padding: 8px; border-radius: 6px; background: #0b0908; pointer-events: none; }
.pack .pv.pvday { background: linear-gradient(#5d9cc8, #2f6c9a); }
.pack .pv .card { --cw: 74px; }
.pack .pv .card .txt { display: none; }
body.day .pack { background: linear-gradient(#fbf3df, #ecdcb4); color: #2b1d0e; box-shadow: inset 0 0 0 1px #b08a4a, 0 3px 0 #8a6a3a; }
body.day .pack span { color: #6b5232; }
body.day .pack.on { box-shadow: inset 0 0 0 2px #c9971a, 0 0 18px rgba(201,151,26,.45), 0 3px 0 #8a6a3a; }

/* ================= pack KLASIK: karty podle tištěného originálu ================= */
.card .kfront { display: block; padding: 0; background: #fdfaf2; border: 1px solid #b9b2a3; box-shadow: 0 6px 14px rgba(40,25,10,.45); border-radius: 7px; }
.k-ship, .k-person, .k-exp, .k-tax { position: absolute; inset: 3.5%; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px #2a1a0e; }
.kfront .k-art { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.kfront .k-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kfront .kx { width: calc(var(--cw) * .14); height: calc(var(--cw) * .14); flex: 0 0 auto; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.kcoin { display: inline-grid; place-items: center; flex: 0 0 auto; width: calc(var(--cw) * .17); height: calc(var(--cw) * .17); border-radius: 50%;
  font: 700 calc(var(--cw) * .095)/1 'Alegreya SC', serif; color: #5a3406;
  background: radial-gradient(circle at 36% 30%, #fff1a8 0, #ffd451 30%, #e09a1c 70%, #9a5a0e 100%); box-shadow: inset 0 0 0 1.5px #7a4a0a, inset 0 0 0 3px rgba(255,240,180,.6), 0 1px 2px rgba(0,0,0,.45); }
.kfront b { font: 700 1em/1 'Alegreya SC', serif; }
.k-outline { color: #fff; text-shadow: 0 0 2px #2a1a0e, 1px 1px 0 #2a1a0e, -1px -1px 0 #2a1a0e, 1px -1px 0 #2a1a0e, -1px 1px 0 #2a1a0e; }

/* loď */
.k-ship .k-art { top: 20%; }
.k-banner { position: absolute; left: 0; right: 0; top: 0; height: 34%; z-index: 2; }
.k-banner svg { width: 100%; height: 100%; display: block; }
.k-bcoin { position: absolute; top: 7%; left: 50%; transform: translateX(-50%); }
.k-bname { position: absolute; top: 50%; left: 0; right: 0; text-align: center; font: 700 calc(var(--cw) * .1)/1 'Alegreya SC', serif; letter-spacing: .04em; color: #fff;
  text-shadow: 0 0 2px #2a1a0e, 1px 1px 0 #2a1a0e, -1px -1px 0 #2a1a0e, 1px -1px 0 #2a1a0e, -1px 1px 0 #2a1a0e; }
.k-table { position: absolute; z-index: 2; right: 3%; top: 37%; display: grid; gap: 1px; font-size: calc(var(--cw) * .075); }
.k-table div { display: flex; align-items: center; justify-content: flex-end; gap: 1px; color: #1d2a3a; opacity: .65; }
.k-table div.on { opacity: 1; }
.k-table .kx { width: calc(var(--cw) * .085); height: calc(var(--cw) * .085); }
.k-big { position: absolute; z-index: 2; left: 7%; bottom: 3%; display: flex; align-items: center; gap: 2px; font-size: calc(var(--cw) * .26); color: #1d2a3a;
  text-shadow: 0 0 3px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
.k-big .kx { width: calc(var(--cw) * .22); height: calc(var(--cw) * .22); }

/* osoba */
.k-person { background: #c9c1b0; }
.k-person .k-art { bottom: 12%; }
.k-label { position: absolute; z-index: 2; left: 4%; top: 3%; width: 64%; height: 20%; display: flex; align-items: center; justify-content: center; gap: 2%;
  border-radius: 3px; border: 1px solid #2a1a0e; background: linear-gradient(#f6ead0, #e3cf9f); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 2px 3px rgba(0,0,0,.35);
  font-size: calc(var(--cw) * .1); color: #3a2410; }
.k-label.dark { background: linear-gradient(#c79a55, #9a6c2e); }
.k-label .ic { width: calc(var(--cw) * .15); height: calc(var(--cw) * .15); }
.k-label .kx { width: calc(var(--cw) * .16); height: calc(var(--cw) * .16); }
.k-label .kcoin { width: calc(var(--cw) * .14); height: calc(var(--cw) * .14); font-size: calc(var(--cw) * .07); }
.kflag { width: calc(var(--cw) * .12); height: calc(var(--cw) * .09); background: var(--f); border: 1px solid #2a1a0e; clip-path: polygon(0 0, 100% 15%, 85% 50%, 100% 85%, 0 100%); }
.kfive { font: 700 calc(var(--cw) * .09)/1 'Alegreya SC', serif; }
.kempty { width: calc(var(--cw) * .14); height: calc(var(--cw) * .09); border-radius: 50%; background: #3fb6d8; border: 1px solid #2a1a0e; }
.kperson { width: calc(var(--cw) * .08); height: calc(var(--cw) * .12); background: #6b4628; border: 1px solid #2a1a0e; border-radius: 40% 40% 10% 10%; }
.k-vp { position: absolute; z-index: 2; right: 4%; top: 3%; width: calc(var(--cw) * .2); height: calc(var(--cw) * .24); display: grid; place-items: center; padding-bottom: 12%;
  clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); background: linear-gradient(135deg, #f4f6f8, #aeb6bd 55%, #6e7780); color: #2a3440;
  font: 700 calc(var(--cw) * .13)/1 'Alegreya SC', serif; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.k-cost { position: absolute; z-index: 2; left: 0; right: 0; bottom: 13%; display: flex; align-items: center; justify-content: center; gap: 3%;
  font-size: calc(var(--cw) * .22); color: #ffd451; text-shadow: 0 0 2px #5a3406, 1px 1px 0 #5a3406, -1px -1px 0 #5a3406, 1px -1px 0 #5a3406, -1px 1px 0 #5a3406, 0 2px 4px rgba(0,0,0,.5); }
.k-wave { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 13%; display: flex; align-items: center; padding-left: 6%;
  background: radial-gradient(12px 6px at 12px 0, transparent 70%, #3fb6d8 72%) 0 0 / 24px 100% repeat-x, linear-gradient(#3fb6d8, #1f5f9e); border-top: 0;
  font: 700 calc(var(--cw) * .085)/1 'Alegreya SC', serif; letter-spacing: .05em; color: #fff; text-shadow: 1px 1px 0 #10304e, -1px -1px 0 #10304e, 1px -1px 0 #10304e, -1px 1px 0 #10304e; }

/* expedice */
.k-exp { background: #f2a13a; }
.k-exp .k-art { bottom: 36%; }
.k-reward { position: absolute; z-index: 2; left: 5%; top: 4%; display: flex; align-items: center; gap: 2px; font-size: calc(var(--cw) * .14); color: #ffd451;
  text-shadow: 1px 1px 0 #5a3406, -1px -1px 0 #5a3406, 1px -1px 0 #5a3406, -1px 1px 0 #5a3406; }
.k-map { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 37%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4%;
  background: radial-gradient(ellipse at 50% 40%, #f6e6bf, #dcc08a 75%, #b8945a); border-top: 2px solid #2a1a0e; }
.k-map .ic { width: calc(var(--cw) * .25); height: calc(var(--cw) * .25); }

/* daně */
.k-tax { display: grid; align-content: center; justify-items: center; gap: 6%;
  background: repeating-linear-gradient(0deg, #6b4628 0 14%, #5e3d22 14% 15%, #71492a 15% 29%, #3e2816 29% 30%); }
.k-scroll { width: 86%; padding: 8% 4%; display: grid; justify-items: center; gap: 6px; border-radius: 4px; border: 1px solid #2a1a0e;
  background: linear-gradient(90deg, #d9c08a, #f6ead0 12%, #f6ead0 88%, #d9c08a); box-shadow: 0 3px 5px rgba(0,0,0,.45); color: #3a2410; }
.k-scroll i { font: italic 400 calc(var(--cw) * .11)/1 'Pirata One', Georgia, serif; }
.k-row { display: flex; align-items: center; gap: 4px; font-size: calc(var(--cw) * .1); color: #3a2410; }
.k-tax > .k-row { color: #ffd451; text-shadow: 1px 1px 0 #2a1a0e, -1px -1px 0 #2a1a0e, 1px -1px 0 #2a1a0e, -1px 1px 0 #2a1a0e; }
.k-tax > .k-row.big { font-size: calc(var(--cw) * .14); color: #f3ead2; }
.k-shield { width: calc(var(--cw) * .14); height: calc(var(--cw) * .17); clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); background: linear-gradient(135deg, #f4f6f8, #aeb6bd 55%, #6e7780); }

/* malé karty v posádkách */
.crew .cards .k-card .k-table, .others .cards .k-card .k-table, .others .cards .k-card .k-wave span { display: none; }
.others .cards .k-card .k-label { height: 26%; width: 70%; }
.kcloud { animation: kcloud 26s linear infinite alternate; }
@keyframes kcloud { from { transform: translateX(-10px); } to { transform: translateX(14px); } }
.fgr { animation: breathe 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }

/* stůl v packu Klasik: nebe, molo, moře */
body.klasik.day { background: linear-gradient(#5aa9e6 0, #cfe8f7 380px, #e9dcc0 380px, #d8c39a 100%); }
body.klasik.day .table { background: repeating-linear-gradient(90deg, #a87a48 0 58px, #7a5230 58px 60px), linear-gradient(#b9874c, #8e6236); box-shadow: inset 0 0 0 2px #4e3320, inset 0 0 40px rgba(60,30,10,.45), 0 16px 34px rgba(30,40,60,.35); }
body.klasik.day .harbor { background: repeating-radial-gradient(ellipse at 50% 130%, rgba(255,255,255,.12) 0 4px, transparent 4px 16px), linear-gradient(#3fb6d8, #1f5f9e); border: 2px solid #2a1a0e; }
body.klasik h1 { color: #ffd451; -webkit-text-stroke: 1.5px #5a3406; text-shadow: 0 3px 0 #5a3406, 0 0 14px rgba(255,255,255,.5); }

/* ================= profil ================= */
.av.fig { overflow: hidden; padding: 0; }
.av.fig svg { width: 100%; height: 100%; display: block; }
.account .row { gap: 10px; }
.profile { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; width: 100%; }
.prof-head { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: center; }
.prof-head > * { min-width: 0; }
.fig-preview { aspect-ratio: 108 / 216; border-radius: 6px; background: radial-gradient(circle at 50% 30%, #2a3a44, #0b0a09 75%); border: 1px solid #3a2c1e; }
.fig-preview svg { width: 100%; height: 100%; display: block; }
.avatar-editor { display: grid; gap: 12px; }
.avatar-editor .part .lbl { margin-bottom: 4px; }
.choices { display: flex; flex-wrap: wrap; gap: 6px; }
.choices button[aria-checked="true"] { outline: 2px solid var(--brass); outline-offset: 1px; }
.choices .swatch { width: 30px; height: 30px; min-width: 0; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid #0c0907; box-shadow: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.stat { background: #0e0b09; border: 1px solid #2a2016; border-radius: 4px; padding: 10px; text-align: center; }
.stat .v { font-family: var(--display); font-size: 30px; color: var(--brass); line-height: 1.1; }
.stat .k { font: 600 12px var(--label); letter-spacing: .08em; color: var(--fog); }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.history li { display: grid; grid-template-columns: 96px 1fr; gap: 2px 12px; padding: 8px 10px; border: 1px solid #2a2016; border-radius: 4px; background: #0e0b09; }
.history .res { grid-row: span 2; font-family: var(--display); font-size: 20px; color: var(--fog); align-self: center; }
.history li.won .res { color: var(--brass); }
.history .w { color: var(--parch); font-weight: 700; }
.history .meta { font-size: 14px; color: var(--fog); font-style: italic; }
/* kapitáni */
.sorts { gap: 6px; flex-wrap: wrap; }
.sorts button[aria-checked="true"] { outline: 2px solid var(--brass); outline-offset: 1px; }
.captains { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.captains li { display: grid; grid-template-columns: 28px auto 1fr; grid-template-areas: "rank av who" "rank av nums"; gap: 2px 12px; align-items: center; padding: 8px 10px; border: 1px solid #2a2016; border-radius: 4px; background: #0e0b09; }
.captains li.me { border-color: var(--brass); }
.captains .rank { grid-area: rank; font-family: var(--display); font-size: 22px; color: var(--fog); text-align: center; }
.captains li:nth-child(-n+3) .rank { color: var(--brass); }
.captains .av { grid-area: av; }
.captains .meta { font-size: 14px; color: var(--fog); font-style: italic; }
.captains .nums { grid-area: nums; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; color: var(--fog); }
.captains .nums b { color: var(--parch); }
@media (max-width: 560px) {
  .prof-head { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .prof-head .stack { width: 100%; }
  .prof-head .row { flex-wrap: wrap; }
  .history li { grid-template-columns: 1fr; }
  .history .res { grid-row: auto; }
}

/* ================= mince +/−, bublina z chatu, karta daní ================= */
.coinchip { position: absolute; z-index: 6; left: 62px; top: -16px; display: flex; gap: 8px; pointer-events: none; font: 400 24px/1 var(--display);
  padding: 4px 10px 5px; border-radius: 14px; background: rgba(10,8,6,.88); border: 1px solid var(--brass-dk); box-shadow: 0 4px 10px rgba(0,0,0,.6);
  animation: chipup 2.6s ease-out forwards; text-shadow: 0 2px 0 #000; }
.coinchip .up { color: #8fe07a; } .coinchip .down { color: #ff8a6a; }
@keyframes chipup { 0% { opacity: 0; transform: translateY(8px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
.bubble { position: absolute; z-index: 7; left: 50px; bottom: calc(100% + 10px); max-width: min(260px, 80vw); padding: 8px 12px; border-radius: 12px; pointer-events: none;
  background: #fffaf0; color: #2b1d0e; border: 2px solid #2a1a0e; font: 16px/1.3 var(--body); box-shadow: 0 6px 14px rgba(0,0,0,.45); animation: bubblein .25s cubic-bezier(.3,1.4,.5,1); overflow-wrap: anywhere; }
.bubble::after { content: ""; position: absolute; left: 16px; bottom: -11px; border: 10px solid transparent; border-top-color: #2a1a0e; border-bottom: 0; }
.bubble.out { opacity: 0; transition: opacity .45s; }
@keyframes bubblein { from { transform: scale(.6) translateY(8px); opacity: 0; } }
.taxcard { z-index: 58; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }

/* ================= intro (ve stylu Netflixu) ================= */
body.on-intro { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; align-content: center; gap: 10px; background: #000; cursor: pointer; overflow: hidden; outline: none; }
.intro-sky { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 110%, #1b3a5c 0%, #07111d 45%, #000 75%); opacity: 0; animation: introfade 1.6s .2s ease-out forwards; }
.intro-sea { position: absolute; left: -10%; right: -10%; bottom: 0; height: 32%; opacity: 0;
  background: repeating-radial-gradient(ellipse at 50% 0, rgba(140,190,230,.16) 0 2px, transparent 2px 14px), linear-gradient(#0e2a44, #02080f);
  animation: introfade 2s .5s ease-out forwards, seadrift 9s linear infinite; }
@keyframes seadrift { to { background-position: 120px 0, 0 0; } }
.intro-glow { position: absolute; left: 50%; top: 52%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,90,.55), rgba(224,112,42,.18) 40%, transparent 70%); opacity: 0; animation: glowpulse 2.4s 1.2s ease-out forwards; }
@keyframes glowpulse { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.1); } 100% { opacity: .55; transform: scale(1); } }
.intro-coin { position: relative; z-index: 2; width: min(34vmin, 220px); aspect-ratio: 5/7; opacity: 0;
  animation: coinin 1.5s .3s cubic-bezier(.2,.9,.2,1) forwards, coinflip 1.2s 1.8s ease-in-out; filter: drop-shadow(0 20px 40px rgba(0,0,0,.8)); }
.intro-coin svg { width: 100%; height: 100%; display: block; border-radius: 8px; }
@keyframes coinin { 0% { opacity: 0; transform: translateX(-60vw) rotate(-540deg) scale(.4); } 70% { opacity: 1; transform: translateX(4vw) rotate(20deg) scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes coinflip { 50% { transform: rotateY(180deg) scale(1.08); } }
.intro-title { position: relative; z-index: 2; display: flex; gap: .04em; font: 400 clamp(64px, 16vw, 168px)/.9 var(--display); letter-spacing: .02em;
  color: #ffd451; -webkit-text-stroke: 2px #5a3406; text-shadow: 0 6px 0 #3a2004, 0 0 40px rgba(255,190,80,.45); }
.intro-title span { display: inline-block; opacity: 0; transform: translateY(40px) scale(.6); filter: blur(12px);
  animation: letterin .7s calc(2.2s + var(--i) * .11s) cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes letterin { to { opacity: 1; transform: none; filter: none; } }
.intro-title::after { content: ""; position: absolute; inset: -10% -20%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  mix-blend-mode: overlay; transform: translateX(-120%); animation: sheen2 1.1s 3.3s ease-in-out forwards; pointer-events: none; }
@keyframes sheen2 { to { transform: translateX(120%); } }
.intro-sub { position: relative; z-index: 2; font: 600 clamp(14px, 2.4vw, 20px) var(--label); letter-spacing: .5em; text-transform: uppercase; color: #cbb58a; opacity: 0; animation: introfade 1s 3.4s forwards; }
.intro-skip { position: absolute; bottom: 24px; right: 24px; z-index: 3; font: 600 13px var(--label); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45); animation: introfade 1s 1s both; }
@keyframes introfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .intro * { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ================= přihlášení ================= */
.logo { text-align: center; font-size: clamp(56px, 12vw, 96px); color: #ffd451; -webkit-text-stroke: 1.5px #5a3406; text-shadow: 0 4px 0 #3a2004, 0 0 24px rgba(255,190,80,.35); margin: 6px 0 0; }
.auth { max-width: 860px; margin: 0 auto; display: grid; gap: 16px; }
.auth-grid { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: end; }
.auth-portys { align-self: end; }
@media (max-width: 700px) { .auth-grid { grid-template-columns: 1fr; } .auth-portys { width: 150px; margin: 0 auto -10px; } }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tabs button { background: transparent; box-shadow: inset 0 -2px 0 #3a2c1e; border-radius: 0; color: var(--fog); }
.tabs button[aria-selected="true"] { color: var(--bone); box-shadow: inset 0 -3px 0 var(--brass); }
.or { text-align: center; color: var(--fog); font: italic 15px var(--body); display: flex; align-items: center; gap: 10px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: #3a2c1e; }
body.day .tabs button { color: #6b5232; box-shadow: inset 0 -2px 0 #d9be86; }
body.day .tabs button[aria-selected="true"] { color: #2b1d0e; box-shadow: inset 0 -3px 0 #c9971a; }

/* ================= hlavní menu ================= */
.menu { max-width: 900px; text-align: left; }
.menu-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.menu-av { cursor: pointer; }
.menu-av .av { width: 64px; height: 64px; font-size: 32px; }
.lvl { font: 400 18px/1 var(--display); color: #1a0e06; background: linear-gradient(#ffe08a, #e0a83a); border: 1px solid #5a3406; border-radius: 4px; padding: 3px 8px 4px; }
.lvl.big { font-size: 26px; padding: 4px 12px 6px; }
.title { font: italic 16px var(--body); color: var(--parch); }
.xpbar { position: relative; height: 10px; min-width: 200px; border-radius: 6px; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px #3a2c1e; overflow: hidden; }
.xpbar.big { height: 16px; }
.xpbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #b08a4a, #ffd88a); box-shadow: 0 0 12px rgba(255,200,90,.6); transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.xpnum { font-size: 14px; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mtile { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 16px; min-height: 110px; font: 400 15px/1.3 var(--body); letter-spacing: 0;
  background: linear-gradient(#1c1612, #120e0b); color: var(--bone); border-radius: 6px; box-shadow: inset 0 0 0 1px #3a2c1e, 0 4px 0 #000; transition: transform .15s, box-shadow .2s; }
.mtile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--brass), 0 6px 0 #000, 0 0 22px rgba(224,112,42,.3); }
.mtile b { font: 400 24px/1 var(--display); }
.mtile .mi { font-size: 26px; }
.mtile .ms { color: var(--fog); font-style: italic; }
.mtile.big { grid-column: span 1; background: linear-gradient(#5a1510, #340a07); box-shadow: inset 0 0 0 1px #7a2a1d, 0 4px 0 #000; }
.mtile.big .ms { color: #e8c8b0; }
.mtile.joinbox { cursor: default; }
.mtile.joinbox:hover { transform: none; }
.mtile.joinbox input { width: 110px; text-align: center; letter-spacing: .2em; }
body.day .mtile { background: linear-gradient(#fbf3df, #ecdcb4); color: #2b1d0e; box-shadow: inset 0 0 0 1px #b08a4a, 0 4px 0 #8a6a3a; }
body.day .mtile .ms { color: #6b5232; }
body.day .mtile.big { background: linear-gradient(#8a2418, #5a1510); color: #fff3d8; }
body.day .mtile.big .ms { color: #f3d8c0; }
body.day .title { color: #6b5232; }
body.day .xpbar { background: rgba(90,60,20,.18); box-shadow: inset 0 0 0 1px #b08a4a; }

/* ================= XP po hře, odměny, odznaky ================= */
.xp-result { display: grid; gap: 8px; width: 100%; }
.xp-gain { font: 400 44px/1 var(--display); color: #a0581a; text-align: center; animation: bump .8s; }
.xp-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 190px; overflow-y: auto; font-size: 15px; }
.xp-items li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted #d9be86; padding: 2px 0; }
.xp-items b { color: #3f7a2e; }
.rewards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.rewards li { padding: 8px 10px; border-radius: 6px; border: 1px solid #d9be86; background: #fffaf0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rewards li span { margin-left: auto; font: 600 12px var(--label); letter-spacing: .1em; text-transform: uppercase; }
.rewards .r-common span { color: #777; } .rewards .r-uncommon span { color: #3f8f3a; } .rewards .r-rare span { color: #2f6db5; }
.rewards .r-epic span { color: #7a3a9a; } .rewards .r-legendary span { color: #c9871a; } .rewards .r-mythic span { color: #c23a2a; }
.rewards .r-legendary, .rewards .r-mythic { box-shadow: 0 0 16px rgba(255,190,60,.5); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; width: 100%; }
.badge-card { display: grid; justify-items: center; gap: 3px; text-align: center; padding: 10px 8px; border-radius: 8px; border: 1px solid #3a2c1e; background: rgba(0,0,0,.25); opacity: .55; filter: grayscale(.8); font-size: 13px; }
.badge-card.on { opacity: 1; filter: none; border-color: var(--brass); box-shadow: 0 0 14px rgba(224,160,60,.25); }
.badge-card .bi { font-size: 30px; }
.badge-card b { font: 400 18px var(--display); }
.badge-card span { color: var(--fog); font-style: italic; }
.badge-card em { color: #3f7a2e; font-style: normal; font-weight: 700; }
.badge-card .tiers { display: flex; gap: 3px; }
.badge-card .tiers i { width: 9px; height: 9px; border-radius: 50%; background: #3a2c1e; }
.badge-card .tiers i.on { background: #ffd451; box-shadow: 0 0 5px #ffd451; }
.portys .badges .badge-card { background: #fffaf0; border-color: #d9be86; color: #2b1d0e; }
.portys .badges .badge-card span { color: #6b5232; }
body.day .badge-card { background: #fffaf0; border-color: #d9be86; }
body.day .badge-card span { color: #6b5232; }
.home.menu { max-width: 900px; width: 100%; }
.mtile.joinbox .row { width: 100%; flex-wrap: wrap; }
.mtile.joinbox input { flex: 1 1 90px; width: auto; min-width: 0; }
.intro-coin svg { clip-path: circle(35% at 50% 44.3%); }

/* ================= kampaň ================= */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rung { display: grid; grid-template-columns: 36px 72px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 8px;
  background: linear-gradient(#1c1612, #120e0b); box-shadow: inset 0 0 0 1px #3a2c1e, 0 4px 0 #000; }
.rung .num { font: 400 30px var(--display); color: var(--brass); text-align: center; }
.rung .portrait { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a4a5a, #0e141a); box-shadow: inset 0 0 0 2px var(--brass-dk); }
.rung .portrait svg { width: 100%; height: 100%; display: block; }
.rung .info { display: grid; gap: 3px; min-width: 0; }
.rung .meta { font: 600 13px var(--label); letter-spacing: .06em; color: var(--brass); }
.rung .act { display: flex; align-items: center; gap: 10px; }
.rung.locked { filter: grayscale(.8) brightness(.6); }
.rung.beaten { box-shadow: inset 0 0 0 1px #6a8a3a, 0 4px 0 #000; }
.rung.boss { background: linear-gradient(#3a0a10, #160406); box-shadow: inset 0 0 0 2px #c2183a, 0 4px 0 #000, 0 0 24px rgba(194,24,58,.3); }
.skulls { display: flex; gap: 3px; }
.skulls i { width: 10px; height: 10px; border-radius: 50%; background: #2a2016; }
.skulls i.on { background: radial-gradient(circle at 40% 35%, #f3ead2, #9a8a6a); }
.rung.boss .skulls i.on { background: radial-gradient(circle at 40% 35%, #ff8a9a, #c2183a); }
@media (max-width: 640px) { .rung { grid-template-columns: 28px 56px 1fr; } .rung .portrait { width: 56px; height: 56px; } .rung .act { grid-column: 1 / -1; justify-content: flex-end; } }
body.day .rung { background: linear-gradient(#fbf3df, #ecdcb4); box-shadow: inset 0 0 0 1px #b08a4a, 0 4px 0 #8a6a3a; }
body.day .rung.boss { background: linear-gradient(#5a1018, #2a0408); color: #fff3d8; }

/* souboj */
.duel { max-width: 760px; }
.duel-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.duel-side { display: grid; justify-items: center; gap: 6px; }
.duel-fig { width: min(220px, 36vw); aspect-ratio: 108/206; filter: drop-shadow(0 12px 18px rgba(0,0,0,.6)); }
.duel-fig svg { width: 100%; height: 100%; }
.duel-side.them .duel-fig { transform: scaleX(-1); }
.duel-fig.empty { display: grid; place-items: center; font: 400 80px var(--display); color: var(--fog); }
.vs { font: 400 clamp(48px, 10vw, 90px)/1 var(--display); color: #ffd451; -webkit-text-stroke: 1.5px #5a3406; text-shadow: 0 4px 0 #3a2004, 0 0 30px rgba(255,120,60,.5); align-self: center; animation: bump 1.6s infinite; }

/* medaile */
.medal { display: block; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.medal.locked { filter: grayscale(1) brightness(.55) drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.medal .msheen { animation: msheen 4s ease-in-out infinite; }
@keyframes msheen { 0%, 55% { transform: rotate(25deg) translateX(-90px); } 85%, 100% { transform: rotate(25deg) translateX(110px); } }
.medal .mglow { animation: halo 2.4s ease-in-out infinite; transform-origin: 50px 80px; }
.medal-cat h3 { font: 400 22px var(--display); margin: 14px 0 6px; color: var(--parch); }
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.mcard { display: grid; justify-items: center; gap: 3px; text-align: center; padding: 8px 6px 10px; border-radius: 8px; background: rgba(0,0,0,.25); border: 1px solid #2a2016; font-size: 12.5px; }
.mcard.on { border-color: var(--brass-dk); background: radial-gradient(circle at 50% 30%, rgba(255,210,120,.12), rgba(0,0,0,.2)); }
.mcard b { font: 400 17px/1.1 var(--display); }
.mcard span { color: var(--fog); font-style: italic; }
.mcard .tiers { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.mcard .tiers i { width: 9px; height: 9px; border-radius: 50%; background: #2a2016; box-shadow: inset 0 0 0 1px #000; }
.mcard .tiers i.on.m-bronze { background: #c27a3a; } .mcard .tiers i.on.m-silver { background: #d8e0e6; }
.mcard .tiers i.on.m-gold { background: #ffd451; box-shadow: 0 0 5px #ffd451; } .mcard .tiers i.on.m-legend { background: #ff4a6a; box-shadow: 0 0 6px #ff4a6a; }
.badge-card .bi .medal { margin: 0 auto; }
body.day .mcard { background: #fffaf0; border-color: #d9be86; }
body.day .mcard span, body.day .medal-cat h3 { color: #6b5232; }

/* ================= šatník ================= */
.fig-preview { width: 100%; max-width: 340px; aspect-ratio: 152/112; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--brass-dk), 0 10px 24px rgba(0,0,0,.5); }
.fig-preview svg { width: 100%; height: 100%; display: block; }
.av.fig { overflow: hidden; }
.av.fig svg { width: 100%; height: 100%; display: block; }
.choices .locked { position: relative; opacity: .45; filter: grayscale(1); cursor: not-allowed; }
.choices button.locked:hover { transform: none; }
.lvtag { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 3px; font: 600 10px/1.3 var(--label); letter-spacing: .04em; color: #1a0e06; background: #c9a046; filter: none; }
.swatch.locked { position: relative; }
.swatch.locked .lvtag { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); margin: 0; white-space: nowrap; }
.choices { row-gap: 18px; }
.wardrobe-sum { margin-bottom: 6px; }
@media (max-width: 560px) { .fig-preview { max-width: 100%; } }

/* ruce šaška při žonglování, papoušek v postavě */
.jug-l { animation: jugl .5s ease-in-out infinite alternate; }
.jug-r { animation: jugl .5s ease-in-out infinite alternate-reverse; }
@keyframes jugl { from { transform: translateY(2px) rotate(-3deg); } to { transform: translateY(-3px) rotate(3deg); } }
.fgr .py-phead { transform-origin: 50% 85%; }
.sunrays { animation: spin 30s linear infinite; transform-origin: 50% 50%; }

/* =====================================================================
   v2 – jednotný vzhled: Klasik (den) a Klasik – noc
   tokeny → komponenty (tlačítka, panely, modály) → obrazovky
   ===================================================================== */
body.day {
  --tx: #2b1d0e; --tx-mute: #6b5232; --acc: #a0581a; --acc-2: #8a2a18;
  --pn-bg: linear-gradient(#fbf3df, #f0e2c0); --pn-bd: #b08a4a; --pn-in: #d9be86; --pn-sh: 0 10px 24px rgba(90,60,20,.22);
  --sf: rgba(255,250,236,.85); --sf-bd: #d9be86; --track: rgba(90,60,20,.16);
}
body.night {
  --tx: #ece3cc; --tx-mute: #9aa6b2; --acc: #e6b85c; --acc-2: #ffd88a;
  --pn-bg: linear-gradient(#18202a, #0e1319); --pn-bd: #2c3946; --pn-in: rgba(176,138,74,.38); --pn-sh: 0 18px 40px rgba(0,0,0,.6);
  --sf: rgba(6,10,14,.6); --sf-bd: #26323d; --track: rgba(0,0,0,.45);
  color: var(--tx);
  background:
    radial-gradient(520px 380px at 82% -4%, rgba(210,225,255,.16), transparent 70%),
    radial-gradient(1200px 700px at 50% 120%, rgba(224,112,42,.10), transparent 70%),
    linear-gradient(#0b1420 0, #0a1018 420px, #07090c 100%);
}
:root { --gold-grad: linear-gradient(#ffe7a0, #ffd451 38%, #e09a1c 78%, #b8740f); --ease-out: cubic-bezier(.2,.9,.25,1); --r: 12px; }

/* nadpisy: zlatá s obrysem v obou variantách */
body.klasik h1, body.klasik .logo { color: #ffd451; -webkit-text-stroke: 1.5px #5a3406; text-shadow: 0 3px 0 #3a2004, 0 0 22px rgba(255,190,80,.35); }
body.klasik h2 { color: var(--tx); text-shadow: none; }
body.night h2 { color: #f3e7c8; }
body.night .lbl { color: #c9a35a; }
body.night .muted { color: var(--tx-mute); }

/* panely */
body.night .panel, body.night .pl { background: var(--pn-bg); border-color: var(--pn-bd); box-shadow: inset 0 0 0 3px #0b0f14, inset 0 0 0 4px var(--pn-in), var(--pn-sh); }
.panel { border-radius: var(--r); }
body.night input { background: #080c11; border-color: #2c3946; color: var(--tx); }

/* ---------- tlačítka ---------- */
button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s var(--ease-out), box-shadow .2s, filter .2s, background .2s; }
button.tiny { min-height: 36px; }
@media (pointer: coarse) { button.tiny { min-height: 44px; } }
button:active:not(:disabled) { transform: translateY(2px) scale(.98); }
button .ico-w, .ico-w { display: inline-grid; place-items: center; line-height: 0; flex: 0 0 auto; }
button .ico-w svg { display: block; }
button.gold {
  color: #3a1e04; background: var(--gold-grad); border: 1px solid #5a3406; font: 400 22px/1 var(--display); letter-spacing: .6px; padding: 10px 22px 12px;
  text-shadow: 0 1px 0 rgba(255,245,200,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(120,60,0,.35), 0 4px 0 #5a3406, 0 8px 18px rgba(0,0,0,.35);
}
button.gold:hover:not(:disabled) { filter: brightness(1.06) saturate(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(120,60,0,.35), 0 4px 0 #5a3406, 0 0 26px rgba(255,200,80,.55); }
button.gold:active:not(:disabled) { box-shadow: inset 0 2px 4px rgba(120,60,0,.4), 0 1px 0 #5a3406; transform: translateY(3px); }
button.gold.big { font-size: 28px; padding: 14px 28px 16px; min-height: 60px; width: 100%; }
button.wide { width: 100%; }
.icon-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; color: var(--tx, var(--bone)); background: var(--sf, rgba(0,0,0,.3)); border: 1px solid var(--pn-bd, #3a2c1e); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.icon-btn:hover { box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 0 0 2px var(--acc); }
body.day .icon-btn { background: rgba(255,250,236,.9); color: #3b2410; }
body.night button.ghost { background: linear-gradient(#1d2631, #121820); color: var(--tx); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px #3a4a5a, 0 3px 0 #000; }
body.night button.ghost:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--acc), 0 3px 0 #000, 0 0 16px rgba(230,184,92,.25); }

/* ---------- modální okna ---------- */
.modal { position: fixed; inset: 0; z-index: 76; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(4,6,10,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadein .2s; overflow-y: auto; }
.modal.out { animation: fadeout .2s forwards; }
.modal-panel { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 20px; animation: popin .32s var(--ease-out); }
@keyframes popin { from { transform: translateY(18px) scale(.97); opacity: 0; } }
.modal-x { position: absolute; top: 10px; right: 10px; z-index: 3; }
.m-title { display: flex; align-items: center; gap: 10px; font-size: 32px; margin: 0 48px 6px 0; }
.m-title .ico-w { color: var(--acc); }
.center { text-align: center; }
.sec-title { display: flex; align-items: center; gap: 8px; font-size: 26px; margin: 0 0 10px; }
.sec-title .ico-w { color: var(--acc); }

/* nastavení */
.settings-body { gap: 18px; }
.set-sec { display: grid; gap: 8px; }
.set-sec .lbl { margin: 0; }
.packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-body > *, .set-sec > * { min-width: 0; }

.pack { border-radius: 10px; min-height: 0; padding: 10px 10px 12px; }
.pack .pv { width: 100%; justify-content: center; border-radius: 8px; padding: 12px 8px; }
.pack .pv .card { --cw: 64px; }
.pv-classic { background: linear-gradient(#5aa9e6, #cfe8f7 60%, #b9874c 60%, #8e6236) !important; }
.pv-classic-night { background: radial-gradient(60px 40px at 80% 10%, rgba(220,230,255,.35), transparent 70%), linear-gradient(#0b1420, #142235 60%, #3a2a1c 60%, #20160e) !important; }
body.night .pack { background: linear-gradient(#18202a, #0e1319); color: var(--tx); box-shadow: inset 0 0 0 1px #2c3946, 0 3px 0 #000; }
body.night .pack.on { box-shadow: inset 0 0 0 2px var(--acc), 0 0 22px rgba(230,184,92,.3), 0 3px 0 #000; }
.seg { display: flex; flex-wrap: wrap; gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--pn-bd); background: var(--sf); }
.seg button { flex: 1 1 0; min-width: 0; border-radius: 0; border: 0; box-shadow: none; background: transparent; color: var(--tx); font: 600 15px var(--label); letter-spacing: .04em; padding: 8px 10px; }
.seg button + button { border-left: 1px solid var(--pn-bd); }
.seg button.on { background: var(--gold-grad); color: #3a1e04; }
.seg button:hover:not(.on) { background: rgba(255,210,120,.12); box-shadow: none; }
.switch-row { width: 100%; justify-content: space-between; text-align: left; gap: 14px; padding: 10px 14px; border-radius: 10px; background: var(--sf); color: var(--tx); border: 1px solid var(--pn-bd); box-shadow: none; font: 400 17px var(--body); letter-spacing: 0; }
.switch-row:hover { box-shadow: 0 0 0 2px var(--acc); }
.sw-txt { display: grid; gap: 2px; }
.sw-txt b { font: 400 20px var(--display); }
.sw-txt small { color: var(--tx-mute); font-style: italic; font-size: 14px; }
.switch { position: relative; flex: 0 0 auto; width: 52px; height: 30px; border-radius: 15px; background: var(--track); box-shadow: inset 0 0 0 1px var(--pn-bd); transition: background .2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #f6ead0; box-shadow: 0 2px 4px rgba(0,0,0,.4); transition: transform .25s var(--ease-out); }
.switch.on { background: linear-gradient(#e0a83a, #b8740f); }
.switch.on i { transform: translateX(22px); }

/* ---------- toast ---------- */
#toast { display: flex; align-items: center; gap: 10px; border-radius: 12px; font: 400 17px var(--body); }
#toast.k-good, #toast.k-quest { background: linear-gradient(#2c4a22, #18300f); box-shadow: inset 0 0 0 1px #6ea84e, 0 10px 30px rgba(0,0,0,.6), 0 0 24px rgba(120,200,90,.35); }
#toast.k-quest { background: var(--gold-grad); color: #3a1e04; box-shadow: inset 0 0 0 1px #5a3406, 0 10px 30px rgba(0,0,0,.5), 0 0 30px rgba(255,200,80,.6); font-weight: 700; }
#toast.k-quest.show { animation: questpop .6s var(--ease-out); }
@keyframes questpop { 0% { transform: translateX(-50%) scale(.6); } 60% { transform: translateX(-50%) scale(1.08); } }
#toast { bottom: max(24px, env(safe-area-inset-bottom)); }

/* ---------- přechody obrazovek ---------- */
#app > * { animation: screenin .38s var(--ease-out) backwards; }
@keyframes screenin { from { opacity: 0; transform: translateY(10px); } }
#app > .intro { animation: none; }

/* ---------- noc: měsíc, déšť, blesky ---------- */
.sky-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; overflow: hidden; }
body.night .sky-fx { display: block; }
.sky-fx .moon { position: absolute; right: 9%; top: 42px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fbf8ec, #d9dde6 60%, #aab3c2); box-shadow: 0 0 40px 10px rgba(210,225,255,.22), 0 0 120px 40px rgba(170,190,230,.10); opacity: .85; }
.sky-fx .rain { position: absolute; inset: -40px; opacity: 0;
  background-image: repeating-linear-gradient(103deg, transparent 0 22px, rgba(190,210,235,.18) 22px 23px, transparent 23px 47px), repeating-linear-gradient(100deg, transparent 0 37px, rgba(190,210,235,.12) 37px 38px, transparent 38px 71px);
  background-size: 140px 140px, 220px 220px; animation: rainfall .45s linear infinite, rainshow 46s ease-in-out infinite; }
@keyframes rainfall { to { background-position: -30px 140px, -45px 220px; } }
@keyframes rainshow { 0%, 38%, 100% { opacity: 0; } 46%, 82% { opacity: .9; } }
.sky-fx .flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(900px 500px at 70% 0%, rgba(200,215,255,.32), transparent 70%); animation: lightning 23s infinite; }
@keyframes lightning { 0%, 64%, 64.6%, 65.4%, 66.2%, 100% { opacity: 0; } 64.3% { opacity: 1; } 65% { opacity: .5; } 65.8% { opacity: .8; } }
body.night .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .sky-fx .rain, .sky-fx .flash { animation: none; opacity: 0; } #app > * { animation: none; } }
body.night .table { background: radial-gradient(70% 90% at 50% 0%, rgba(230,184,92,.10), transparent 70%), repeating-linear-gradient(90deg, #2a1d14 0 58px, #150e09 58px 60px), linear-gradient(#2c1f15, #18110b); box-shadow: inset 0 0 0 2px #3a2a1c, inset 0 0 60px rgba(0,0,0,.7), 0 22px 50px rgba(0,0,0,.7); }
body.night .harbor { background: radial-gradient(60% 120% at 80% 0%, rgba(200,215,255,.12), transparent 60%), repeating-radial-gradient(ellipse at 50% 130%, rgba(160,190,230,.08) 0 4px, transparent 4px 16px), linear-gradient(#11263c, #061120); border: 2px solid #050a10; }
body.night .card .kfront { box-shadow: 0 8px 20px rgba(0,0,0,.6); }

/* ---------- hlavní menu (rozcestník) ---------- */
.home.hub { max-width: 1060px; width: 100%; text-align: left; gap: 16px; }
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo.small { font-size: clamp(40px, 7vw, 58px); margin: 0; text-align: left; }
.hub-actions { display: flex; gap: 8px; }
.hub-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hub-main, .hub-side { display: grid; gap: 16px; min-width: 0; }
@media (max-width: 860px) { .hub-grid { grid-template-columns: 1fr; } }

.hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 18px 20px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(300px 160px at 0% 50%, rgba(255,210,120,.18), transparent 70%); }
.hero-av { position: relative; width: 112px; height: 112px; padding: 0; border-radius: 50%; background: none; border: 0; box-shadow: none; flex: 0 0 auto; cursor: pointer; }
div.hero-av { cursor: default; }
.hero-av:hover { box-shadow: none; filter: brightness(1.05); }
.hero-av .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(0,0,0,.25); stroke-width: 7; }
.ring-fg { fill: none; stroke: url(#ringGold); stroke: #ffc94a; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,200,80,.7)); transition: stroke-dashoffset 1.4s var(--ease-out); }
.hero-pic { position: absolute; inset: 11px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #5a3406, 0 0 0 5px #e0a83a, 0 6px 14px rgba(0,0,0,.4); background: #3a4a5a; }
.hero-pic svg { width: 100%; height: 100%; display: block; }
.lv-badge { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); min-width: 38px; height: 30px; padding: 0 8px; display: grid; place-items: center; border-radius: 15px;
  font: 400 20px/1 var(--display); color: #3a1e04; background: var(--gold-grad); border: 1.5px solid #5a3406; box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.hero-info { display: grid; gap: 6px; min-width: 0; position: relative; }
.hero-name { font: 400 clamp(28px, 4vw, 38px)/1 var(--display); color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-title { font: italic 17px var(--body); color: var(--tx-mute); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero-next { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--tx-mute); flex-wrap: wrap; }
.hero-next .ico-w { color: var(--acc); }
.hero-next b { color: var(--tx); font-weight: 700; }
.hero.guest .hero-info button { justify-self: start; }
.xpbar.hero-xp { height: 22px; min-width: 0; border-radius: 11px; }
.xpbar.hero-xp span { position: relative; z-index: 1; display: block; text-align: center; font: 700 13px/22px var(--label); letter-spacing: .05em; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.xpbar.glow { animation: barglow 1s ease-out; }
@keyframes barglow { 30% { box-shadow: inset 0 0 0 1px #ffd451, 0 0 24px rgba(255,210,80,.9); } }
.xpbar i { background: linear-gradient(90deg, #c98a2a, #ffd451 70%, #fff1a8); }

.chest-btn { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 8px 8px; min-width: 84px; border-radius: 12px; background: none; border: 0; box-shadow: none; color: var(--tx); font: 600 13px var(--label); letter-spacing: .08em; }
.chest-btn:hover { box-shadow: none; filter: brightness(1.08); }
.chest { display: block; width: 68px; height: 60px; }
.chest svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chest .ch-light, .chest .ch-coins { opacity: 0; }
.chest .ch-lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.3,1.6,.5,1); }
.chest.open .ch-lid { transform: translateY(-8px) rotate(-22deg) translateX(-6px); }
.chest.open .ch-light { opacity: 1; animation: halo 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.chest.open .ch-coins { opacity: 1; }
.chest-btn.ready .chest { animation: chestbounce 1.8s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(255,200,80,.85)); }
.chest-btn.ready::after { content: "!"; position: absolute; top: 0; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--body); color: #fff; background: #c2321e; box-shadow: 0 0 0 2px #fff3d8, 0 2px 6px rgba(0,0,0,.4); animation: bump 1.8s infinite; }
@keyframes chestbounce { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-6px) rotate(-4deg); } 80% { transform: translateY(0) rotate(3deg); } 88% { transform: translateY(-3px) rotate(-1deg); } }
.chest-btn:not(.ready) .chest { filter: saturate(.6) brightness(.9); }

.play { display: grid; gap: 14px; padding: 18px 20px 20px; position: relative; overflow: hidden; }
.play::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; pointer-events: none; opacity: .08;
  background: radial-gradient(circle, var(--acc) 0 30%, transparent 31%), conic-gradient(from 0deg, transparent 0 10deg, var(--acc) 10deg 14deg, transparent 14deg 45deg, var(--acc) 45deg 49deg, transparent 49deg 90deg); border-radius: 50%; }
.play-title { display: flex; align-items: center; gap: 10px; font-size: 40px; margin: 0; color: #ffd451 !important; -webkit-text-stroke: 1.2px #5a3406; text-shadow: 0 3px 0 #3a2004 !important; }
.play-title .ico-w { color: #ffd451; filter: drop-shadow(0 2px 0 #5a3406); }
.play-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 1; }
.pchoice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; min-height: 72px; border-radius: 12px;
  font: 400 15px/1.25 var(--body); letter-spacing: 0; color: var(--tx); background: var(--sf); border: 1px solid var(--pn-bd); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.pchoice:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0,0,0,.25), 0 0 0 2px var(--acc), 0 0 22px rgba(255,190,80,.25); }
.pc-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #3a1e04; background: var(--gold-grad); box-shadow: inset 0 0 0 1.5px #5a3406, 0 2px 4px rgba(0,0,0,.3); }
.pc-txt { display: grid; gap: 2px; min-width: 0; }
.pc-txt b { font: 400 23px/1.05 var(--display); }
.pc-txt small { color: var(--tx-mute); font-style: italic; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.pc-go { color: var(--acc); opacity: .7; }
.pchoice.primary { grid-column: 1 / -1; min-height: 92px; background: linear-gradient(#8a2418, #4a0f09); color: #fff3d8; border-color: #2a0804; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 0 0 1px #b8452e, 0 4px 0 #2a0804, 0 10px 24px rgba(120,20,10,.35); animation: ember 2.4s ease-in-out infinite; }
.pchoice.primary .pc-txt b { font-size: 32px; color: #ffe08a; text-shadow: 0 2px 0 #2a0804; }
.pchoice.primary .pc-txt small { color: #f3d0b8; font-size: 15px; }
.pchoice.primary .pc-ico { width: 60px; height: 60px; }
.pchoice.primary .pc-go { color: #ffd451; opacity: 1; }
.join-row { display: flex; gap: 10px; position: relative; z-index: 1; animation: screenin .25s var(--ease-out); }
.join-row input { flex: 1 1 auto; text-transform: uppercase; letter-spacing: .3em; text-align: center; font: 400 24px var(--display); min-height: 48px; }
@media (max-width: 520px) { .play-grid { grid-template-columns: 1fr; } .pchoice { min-height: 64px; } }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tiles .mtile { min-height: 104px; padding: 14px; border-radius: 12px; position: relative; }
.tiles .mtile .mi { color: var(--acc); line-height: 0; }
.tiles .mtile b { font-size: 21px; }
.tiles .mtile .ms { font-size: 14px; }
body.night .mtile { background: var(--pn-bg); color: var(--tx); box-shadow: inset 0 0 0 1px var(--pn-bd), 0 4px 0 #000; }
body.night .mtile .ms { color: var(--tx-mute); }

.quests { padding: 16px 18px; }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.qlist li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--sf); border: 1px solid var(--sf-bd); }
.qlist li.done { border-color: #6ea84e; background: linear-gradient(90deg, rgba(110,168,78,.18), transparent); }
.q-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--acc); background: var(--track); }
.qlist li.done .q-ico { color: #fff; background: #4f8a36; }
.q-main { display: grid; gap: 6px; min-width: 0; }
.q-text { font-size: 15.5px; line-height: 1.25; }
.qlist li.done .q-text { text-decoration: line-through; text-decoration-color: rgba(110,168,78,.8); opacity: .8; }
.qbar { position: relative; height: 14px; border-radius: 7px; background: var(--track); overflow: hidden; }
.qbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #4f8a36, #9ad86a); transition: width 1s var(--ease-out); }
.qbar span { position: relative; display: block; text-align: center; font: 700 11px/14px var(--label); color: #fff; text-shadow: 0 1px 2px #000; }
.q-xp { font: 400 18px var(--display); color: var(--acc); white-space: nowrap; }
.q-foot { font-size: 13px; margin-top: 8px; }
.rules summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
/* Portyš sedí dole – oznámení ať mu neleze pod bublinu */
body:has(.portys:not([hidden])) #toast { bottom: auto; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%) translateY(-40px); }
body:has(.portys:not([hidden])) #toast.show { transform: translateX(-50%); }

/* denní odměna */
.daily-p { width: min(560px, 100%); text-align: center; }
.daily-p .m-title { justify-content: center; margin-right: 0; }
.chest-stage { display: grid; place-items: center; padding: 6px 0 4px; }
.chest-stage .chest { width: 150px; height: 132px; }
.days { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.days li { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border-radius: 10px; background: var(--sf); border: 1px solid var(--sf-bd); font-size: 12px; color: var(--tx-mute); }
.days li .ico-w { color: var(--acc); }
.days li b { font: 700 12px var(--label); color: var(--tx); white-space: nowrap; }
.days li { position: relative; }
.days li.got { opacity: .7; }
.days li.got::after { content: ''; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #4f8a36; background: rgba(79,138,54,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%234f8a36' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat; transform: rotate(-12deg); }
.days li.got.stamp::after { animation: stampIn .45s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes stampIn { from { transform: rotate(-12deg) scale(2.4); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }
.days li.got .ico-w { color: #4f8a36; }
.days li.next { border-style: dashed; border-color: #e0a83a; }
.days li.next small::after { content: attr(data-next); display: block; font: 700 10px var(--label); color: #b8741a; text-transform: uppercase; letter-spacing: .04em; }
.days li.today { border-color: #e0a83a; box-shadow: 0 0 0 2px #e0a83a, 0 0 18px rgba(255,200,80,.5); background: linear-gradient(#fff3c8, #f2d48a); color: #5a3406; animation: bump 1.6s infinite; }
body.night .days li.today b { color: #3a1e04; }
.days li.big { background: linear-gradient(#5a1510, #340a07); color: #f3d0b8; }
.days li.big b { color: #ffd451; }
@media (max-width: 420px) { .days { grid-template-columns: repeat(4, 1fr); } .days li.big { grid-column: span 2; } }
.xporb { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #fff, #ffe08a 40%, rgba(255,190,60,.6) 60%, transparent 72%); box-shadow: 0 0 14px 4px rgba(255,210,90,.7); }

/* nový level */
.levelup { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 42%, rgba(60,30,4,.75), rgba(0,0,0,.92) 70%); animation: fadein .3s; overflow-y: auto; }
.levelup.out { animation: fadeout .3s forwards; }
.lu-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255,210,100,.22) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 55%); mask-image: radial-gradient(circle, #000 0, transparent 55%); animation: spin 40s linear infinite; }
.lu-box { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 440px; width: 100%; animation: popin .6s var(--ease-out); }
.lu-portys { width: 110px; animation: luin .8s .1s var(--ease-out) both; }
.lu-portys svg { width: 100%; height: auto; display: block; }
@keyframes luin { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
.lu-kicker { font: 600 16px var(--label); letter-spacing: .3em; text-transform: uppercase; color: #ffd88a; }
.lu-num { font: 400 clamp(110px, 30vw, 170px)/.9 var(--display); color: #ffd451; -webkit-text-stroke: 3px #5a3406; text-shadow: 0 8px 0 #3a2004, 0 0 60px rgba(255,190,80,.7); animation: luin .7s .25s cubic-bezier(.2,1.5,.4,1) both; }
.lu-title { font: 400 32px var(--display); color: #fff3d8; text-shadow: 0 2px 0 #000; }
.lu-sub { color: #e8d8b8; font-style: italic; margin: 0; }
.lu-rewards { margin: 6px 0 4px; text-align: left; }
.lu-rewards li { color: #2b1d0e; }

/* tlačítko zvuku s ikonou */
.btnSound.muted-ico .ico-w { opacity: .5; }
.mtile { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; text-align: left; }
@media (min-width: 640px) {
  .play-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .play-grid .pchoice:not(.primary) { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 14px 10px; gap: 8px; }
  .play-grid .pchoice:not(.primary) .pc-go { display: none; }
  .play-grid .pchoice:not(.primary) .pc-txt { justify-items: center; }
}
@media (max-width: 520px) { .hero { grid-template-columns: auto 1fr; gap: 14px; padding: 14px; } .hero-av { width: 96px; height: 96px; } .hero .chest-btn { grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: start; align-items: center; } .hero .chest { width: 52px; height: 46px; } }

/* ---------- obrazovky s horní lištou (lobby, profil, kapitáni) ---------- */
.scr-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; }
.scr-title { text-align: center; font-size: clamp(36px, 7vw, 52px); margin: 0; }
.linkish { background: none; border: 0; box-shadow: none; color: var(--tx-mute); font: italic 16px var(--body); letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; justify-self: center; }
.linkish:hover { box-shadow: none; color: var(--tx); }
.lbl { display: flex; align-items: center; gap: 6px; }
.lbl .ico-w { color: var(--acc); }

/* portrét hráče s levelem */
.pav { position: relative; flex: 0 0 auto; width: 56px; height: 56px; }
.pav-pic { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #4a6a8a, #1a2a3a); box-shadow: 0 0 0 2px #5a3406, 0 0 0 4px #e0a83a, 0 4px 10px rgba(0,0,0,.35); color: #fff3d8; }
.pav-pic svg { width: 100%; height: 100%; display: block; }
.pav.bot .pav-pic { box-shadow: 0 0 0 2px #2a0804, 0 0 0 4px #b8452e, 0 4px 10px rgba(0,0,0,.35); }
.pav-ini { font: 400 28px/1 var(--display); }
.lv-badge.sm { min-width: 26px; height: 20px; padding: 0 5px; font-size: 14px; bottom: -6px; border-radius: 10px; }
.lv-badge.skull { color: #fff3d8; background: linear-gradient(#b8452e, #5a1510); border-color: #2a0804; }
.pav.plate { width: 72px; height: 72px; }
.pav.sm { width: 40px; height: 40px; }
.pav.sm .lv-badge, .pav.xs .lv-badge { display: none; }
.pav.xs { width: 30px; height: 30px; }
.pav.xs .pav-pic { box-shadow: 0 0 0 1.5px #e0a83a; }
.pav.xs .pav-ini { font-size: 16px; }

/* lobby */
.home.lobby { max-width: 620px; text-align: left; gap: 14px; }
.invite { display: grid; gap: 10px; }
.invite-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.invite .code { font-size: 54px; line-height: 1; color: var(--acc); letter-spacing: 8px; text-shadow: none; }
.invite input { font-size: 14px; color: var(--tx-mute); }
.plist { gap: 8px; }
.plist .prow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--sf); border: 1px solid var(--sf-bd); cursor: pointer; transition: box-shadow .2s, transform .12s; }
.plist .prow:hover { box-shadow: 0 0 0 2px var(--acc); }
.plist .prow.empty { cursor: default; border-style: dashed; opacity: .75; }
.plist .prow.empty:hover { box-shadow: none; }
.plist .prow.empty .pav-pic { background: transparent; box-shadow: inset 0 0 0 2px var(--sf-bd); color: var(--tx-mute); }
.plist .who { flex: 1 1 auto; display: grid; gap: 3px; min-width: 0; font-family: var(--body); }
.plist .pname { font: 400 23px/1.05 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.plist .tags .tag { margin: 0; }
.plist .who.muted { font-size: 15px; }
.icon-btn.sm { width: 40px; height: 40px; min-height: 40px; }
.addbots { margin-top: 14px; display: grid; gap: 8px; }
.botchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.botchip { justify-content: flex-start; gap: 10px; padding: 6px 10px 6px 6px; min-height: 52px; border-radius: 26px; text-align: left; font: 400 15px var(--body); letter-spacing: 0; color: var(--tx); background: var(--sf); border: 1px solid var(--sf-bd); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.botchip:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--acc); }
.botchip > .ico-w { margin-left: auto; color: var(--acc); }
.bc-pic { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: #3a4a5a; box-shadow: 0 0 0 2px #b8452e; }
.bc-pic svg { width: 100%; height: 100%; display: block; }
.bc-txt { display: grid; line-height: 1.1; min-width: 0; }
.bc-txt b { font: 400 18px var(--display); }
.bc-txt small { color: var(--tx-mute); font-style: italic; font-size: 13px; }
.rules-p { gap: 16px; }
.winvp-row { display: grid; gap: 8px; }
.winvp-row .lbl { margin: 0; }
.vp-pick { display: flex; gap: 8px; align-items: stretch; }
.vp-pick .seg { flex: 1 1 auto; }
.vp-input { width: 78px; flex: 0 0 auto; text-align: center; font: 400 22px var(--display); }
.modes { display: grid; gap: 8px; }
.modes .lbl { margin: 0; }
.mode-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px 8px 12px; border-radius: 10px; background: var(--sf); border: 1px solid var(--sf-bd); }
.mode-row.on { border-color: var(--acc); }
.mode-name { display: flex; align-items: center; gap: 4px; font: 400 19px var(--display); }
.mode-row .seg { flex: 0 1 auto; }
.mode-row .seg button { padding: 6px 10px; min-height: 36px; }
.mode-val { font: 600 14px var(--label); letter-spacing: .06em; color: var(--tx-mute); }
.mode-val.on { color: var(--acc); }
.switch-btn { padding: 0; background: none; border: 0; box-shadow: none; min-height: 44px; }
.switch-btn:hover { box-shadow: none; }
.mode-num { width: 90px; }
.info-btn { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; background: none; border: 0; box-shadow: none; color: var(--acc); }
.info-btn:hover { box-shadow: none; background: rgba(255,200,80,.15); }
.pop { position: absolute; z-index: 95; padding: 10px 14px 12px; border-radius: 10px; background: #fffaf0; color: #2b1d0e; border: 1px solid #8a6a3a; box-shadow: 0 12px 30px rgba(0,0,0,.4); animation: popin .18s var(--ease-out); font-size: 15px; line-height: 1.4; }
.pop b { font: 400 19px var(--display); color: #8a2a18; }
.pop p { margin: 4px 0 0; }
.pop::before { content: ""; position: absolute; left: calc(var(--ax) - 8px); border: 8px solid transparent; }
.pop.below::before { top: -16px; border-bottom-color: #8a6a3a; }
.pop.above::before { bottom: -16px; border-top-color: #8a6a3a; }
.mode-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-chip { min-height: 30px; padding: 3px 10px; border-radius: 15px; font: 600 13px var(--label); letter-spacing: .04em; color: var(--tx); background: var(--sf); border: 1px solid var(--acc); box-shadow: none; gap: 4px; }
.mode-chip .ico-w { color: var(--acc); }
.sail-bar { position: sticky; bottom: 0; z-index: 5; display: grid; gap: 6px; padding: 14px 0 max(12px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bar-bg, rgba(216,195,154,.96)) 28%); }
body.night .sail-bar { --bar-bg: rgba(7,9,12,.96); }
button.gold.sail { font-size: 34px; min-height: 68px; letter-spacing: 1.5px; }
button.gold.glow:not(:disabled) { animation: goldglow 1.8s ease-in-out infinite; }
@keyframes goldglow { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(120,60,0,.35), 0 4px 0 #5a3406, 0 0 34px 6px rgba(255,200,80,.65); } }
.waiting { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 12px; background: var(--sf); border: 1px solid var(--sf-bd); font-style: italic; color: var(--tx-mute); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }
.loading { display: grid; place-items: center; padding: 30px; }

/* karta hráče */
.pcard { width: min(560px, 100%); padding-top: 0; overflow-x: hidden; }
.pc-head { position: relative; margin: 0 -20px 14px; }
.pc-bust { aspect-ratio: 152 / 112; max-height: 300px; width: 100%; overflow: hidden; border-radius: var(--r) var(--r) 0 0; background: #3a4a5a; }
.pc-bust svg { width: 100%; height: 100%; display: block; }
.pc-id { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 12px; background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff3d8; }
.pc-name { font: 400 clamp(30px, 7vw, 42px)/1 var(--display); color: #ffd451; -webkit-text-stroke: 1px #3a2004; text-shadow: 0 2px 0 #000; }
.pc-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-style: italic; color: #f3e3bc; margin-top: 4px; }
.pc-body { display: grid; gap: 14px; }
.pc-xp .xpbar { width: 100%; }
.pcard .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcard .stat { display: grid; justify-items: center; gap: 2px; border-radius: 10px; }
.pcard .stat .ico-w { color: var(--acc); }
body.day .stat { background: rgba(255,250,236,.85); border-color: #d9be86; }
body.day .stat .v { color: #a0581a; } body.day .stat .k { color: #6b5232; }
.h2h { display: grid; justify-items: center; gap: 2px; padding: 10px; border-radius: 12px; background: var(--sf); border: 1px solid var(--acc); }
.h2h-score { display: flex; gap: 14px; align-items: baseline; font: 400 46px/1 var(--display); color: var(--acc); }
.pc-medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.pc-medal { min-height: 0; padding: 4px; background: none; border: 0; box-shadow: none; border-radius: 10px; }
.pc-medal:hover { box-shadow: none; background: rgba(255,200,80,.15); }
.pc-since { font-size: 14px; }
.lore-story { font-size: 17px; line-height: 1.5; margin: 0 0 10px; }
.skulls { display: inline-flex; gap: 3px; }

/* hra: horní lišta, štítky hráčů */
.gtop { align-items: center; }
.gt-l { display: grid; gap: 2px; min-width: 0; }
.gtop h1 { font-size: clamp(30px, 5vw, 44px); }
.gtop .btns { gap: 8px; flex-wrap: nowrap; }
.gmodes { flex: 1 1 100%; min-width: 0; }
.gmodes:empty, .gmodes .mode-chips:empty { display: none; }
.gmodes .mode-chips { margin-top: -4px; }
.icon-btn .lbl-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pl { cursor: pointer; padding: 10px 12px 18px 10px; gap: 12px; border-radius: 12px; }
.pl .meta { flex: 1 1 auto; }
.pl .nm { display: flex; align-items: center; gap: 4px; padding-right: 44px; }
.pl .nmt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl .star { color: var(--acc); line-height: 0; }
.pl .st { gap: 12px; font-size: 17px; }
.pl .st > span { display: inline-flex; align-items: center; gap: 4px; }
.pl .st b { font-size: 19px; }
.pl .st .ico-w { color: #8a96a2; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mini-coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff1a8, #ffd451 30%, #e09a1c 70%, #9a5a0e); box-shadow: inset 0 0 0 1px #7a4a0a; }
.mini-vp { width: 14px; height: 16px; clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); background: linear-gradient(135deg, #f4f6f8, #aeb6bd 55%, #6e7780); }
.pl.active .pav-pic { box-shadow: 0 0 0 2px #5a3406, 0 0 0 4px #ffd451, 0 0 18px rgba(255,200,80,.8); }
.pl .oddsn { display: inline-flex; align-items: center; gap: 2px; }
.pl.sure-win .oddsn { color: #3f8f3a; } .pl.sure-out { opacity: .7; } .pl.sure-out .oddsn { color: #c2321e; }
.pl .fuse { left: 94px; right: 12px; bottom: 6px; height: 5px; }
.pl .fuse-s { position: absolute; right: 0; top: -17px; font: 700 12px var(--label); color: var(--acc); }
.pl.urgent .fuse-s { color: #c2321e; animation: bump .8s infinite; }
.pl .odds { left: 94px; }
.pl.timed .odds { display: none; }
.pl .bubble { left: 20px; }
.coinchip { left: 88px; }
.otable .head { width: 100%; justify-content: flex-start; background: none; border: 0; box-shadow: none; padding: 0; min-height: 44px; color: inherit; font: 400 20px var(--display); text-align: left; letter-spacing: 0; }
.otable .head:hover { box-shadow: none; }
.fin-name { background: none; border: 0; box-shadow: none; padding: 0; min-height: 36px; gap: 8px; color: inherit; font: inherit; letter-spacing: 0; justify-content: flex-start; }
.fin-name:hover { box-shadow: none; text-decoration: underline; }

/* ---------- souboj: face-off ---------- */
.home.duel { max-width: 980px; width: 100%; gap: 14px; }
.duel-kicker { display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); }
.boss-tag { margin-left: 6px; padding: 2px 8px; border-radius: 4px; background: #c2183a; color: #fff; letter-spacing: .1em; }
.duel-stage { position: relative; width: 100%; aspect-ratio: 200 / 110; max-height: 62vh; border-radius: 16px; overflow: hidden; background: linear-gradient(#1b3a5c, #0b1420); box-shadow: 0 0 0 2px #5a3406, 0 0 0 5px #e0a83a, 0 24px 50px rgba(0,0,0,.5); }
.duel-scene { position: absolute; inset: 0; }
.duel-scene > svg { width: 100%; height: 100%; display: block; }
.duel-scene.fallback { display: grid; grid-template-columns: 1fr 1fr; }
.duel-bust { position: relative; overflow: hidden; }
.duel-bust svg { width: 100%; height: 100%; display: block; }
.duel-bust.me { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); animation: slideL .8s var(--ease-out) both; }
.duel-bust.them { transform: scaleX(-1); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); animation: slideR .8s var(--ease-out) both; }
@keyframes slideL { from { transform: translateX(-30%); opacity: 0; } }
@keyframes slideR { from { transform: scaleX(-1) translateX(-30%); opacity: 0; } }
.duel-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 55%, rgba(0,0,0,.75)); }
.vs-big { position: absolute; z-index: 3; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34%; aspect-ratio: 1; pointer-events: none; }
.vs-big b { position: relative; z-index: 2; font: 400 clamp(64px, 14vw, 150px)/1 var(--display); color: #ffd451; -webkit-text-stroke: 3px #5a1a04; text-shadow: 0 6px 0 #3a1004, 0 0 40px rgba(255,120,40,.9); animation: vsin .7s .35s cubic-bezier(.2,1.6,.4,1) both, vspulse 1.6s 1.1s ease-in-out infinite; }
@keyframes vsin { from { transform: scale(3) rotate(-12deg); opacity: 0; filter: blur(8px); } }
@keyframes vspulse { 50% { transform: scale(1.06); text-shadow: 0 6px 0 #3a1004, 0 0 60px rgba(255,140,40,1); } }
.vs-fire { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(255,240,180,.9), rgba(255,150,40,.65) 30%, rgba(200,50,10,.35) 55%, transparent 70%); filter: blur(6px); animation: firepulse .35s ease-in-out infinite alternate, fadein .6s .3s both; }
@keyframes firepulse { to { transform: scale(1.08) translateY(-3%); opacity: .85; } }
.vs-sparks i { position: absolute; left: 50%; top: 55%; width: 5px; height: 5px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 8px 2px rgba(255,150,40,.9); animation: sparkup 1.4s calc(var(--i) * .12s) ease-out infinite; }
@keyframes sparkup { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), -120px) scale(.2); opacity: 0; } }
.duel-name { position: absolute; z-index: 4; bottom: 12px; display: grid; gap: 4px; max-width: 42%; }
.duel-name.me { left: 16px; justify-items: start; }
.duel-name.them { right: 16px; justify-items: end; text-align: right; }
.duel-name b { font: 400 clamp(24px, 4.5vw, 42px)/1 var(--display); color: #fff3d8; text-shadow: 0 3px 0 #000, 0 0 12px rgba(0,0,0,.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.taunt { position: relative; justify-self: center; max-width: 640px; padding: 14px 26px; border-radius: 6px; text-align: center; font: italic 20px/1.35 var(--body); color: #2b1d0e;
  background: linear-gradient(90deg, #d9c08a, #f6ead0 10%, #f6ead0 90%, #d9c08a); box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px #8a6a3a; animation: screenin .5s .5s var(--ease-out) both; }
.taunt .q { font: 400 34px/0 var(--display); color: #8a2a18; vertical-align: -10px; margin: 0 2px; }
.taunt small { display: block; margin-top: 4px; font: 600 13px var(--label); letter-spacing: .12em; color: #8a2a18; }
.taunt.sm { font-size: 17px; padding: 10px 18px; }
.duel-reward { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--tx-mute); font-style: italic; }
.duel-reward .ico-w { color: var(--acc); }
.duel .mode-chips { justify-content: center; }
button.gold.fight { font-size: clamp(32px, 6vw, 44px); min-height: 76px; max-width: 560px; justify-self: center; letter-spacing: 2px; }
@media (max-width: 560px) { .duel-stage { aspect-ratio: 4 / 3.4; } .vs-big { width: 46%; } }

/* ---------- profil a šatník ---------- */
.profile.pro { max-width: 1060px; gap: 14px; }
.pro-grid { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pro-side { position: sticky; top: 12px; z-index: 4; display: grid; gap: 12px; }
.pro-card { display: grid; gap: 12px; padding: 12px; }
.pro-card .fig-preview { max-width: none; width: 100%; aspect-ratio: 152 / 112; border-radius: 10px; }
.pro-id { display: grid; gap: 6px; min-width: 0; }
.pro-id .hero-name { font-size: 32px; }
.pro-main { display: grid; gap: 12px; min-width: 0; }
.ptabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--pn-bd); background: var(--sf); }
.ptabs button { border-radius: 0; border: 0; box-shadow: none; background: transparent; color: var(--tx); font: 400 20px var(--display); letter-spacing: .3px; min-height: 52px; }
.ptabs button + button { border-left: 1px solid var(--pn-bd); }
.ptabs button[aria-selected="true"] { background: var(--gold-grad); color: #3a1e04; }
.ptabs button:hover:not([aria-selected="true"]) { background: rgba(255,210,120,.14); box-shadow: none; }
.ptab-body { animation: screenin .25s var(--ease-out); }
.wardrobe { display: grid; gap: 8px; }
.wcat { border-radius: 12px; background: var(--pn-bg); border: 1px solid var(--pn-bd); box-shadow: var(--pn-sh); overflow: hidden; }
.wcat.open, .wcat:has(.wc-head[aria-expanded="true"]) { border-color: var(--acc); }
.wc-head { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 14px; min-height: 64px; border-radius: 0; border: 0; box-shadow: none; background: transparent; color: var(--tx); text-align: left; font: 400 15px var(--body); letter-spacing: 0; }
.wc-head:hover { box-shadow: none; background: rgba(255,210,120,.10); }
.wc-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sf); box-shadow: inset 0 0 0 1px var(--sf-bd); }
.wc-txt { display: grid; gap: 2px; min-width: 0; }
.wc-txt b { font: 400 22px/1.05 var(--display); }
.wc-sum { color: var(--tx-mute); font-style: italic; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-count { font: 600 13px var(--label); letter-spacing: .06em; color: var(--tx-mute); }
.wc-chev { width: 12px; height: 12px; border-right: 2.5px solid var(--acc); border-bottom: 2.5px solid var(--acc); transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s var(--ease-out); }
.wc-head[aria-expanded="true"] .wc-chev { transform: rotate(-135deg); }
.wc-body { display: grid; gap: 14px; padding: 4px 14px 16px; animation: screenin .25s var(--ease-out); }
.wpart .lbl { margin-bottom: 8px; }
.wp-cur { margin-left: auto; font: italic 14px var(--body); letter-spacing: 0; text-transform: none; color: var(--tx); }
.wtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.wtile { position: relative; display: grid; grid-template-rows: auto auto; gap: 4px; padding: 6px 6px 8px; min-height: 0; border-radius: 12px; background: var(--sf); border: 1px solid var(--sf-bd); box-shadow: 0 2px 0 rgba(0,0,0,.15); color: var(--tx); font: 600 12.5px/1.15 var(--body); letter-spacing: 0; text-align: center; }
.wtile:hover:not(.locked) { box-shadow: 0 0 0 2px var(--acc); transform: translateY(-1px); }
.wtile.on { box-shadow: 0 0 0 3px #e0a83a, 0 0 16px rgba(255,200,80,.55); border-color: #5a3406; }
.wt-pic { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #3a4a5a; }
.wt-pic svg { width: 100%; height: 100%; display: block; }
.wtiles:not(.colors) .wtile .wt-pic svg { pointer-events: none; }
.wt-lbl { display: block; overflow: hidden; text-overflow: ellipsis; }
.wtile.locked, .wswatch.locked { cursor: not-allowed; }
.wtile.locked .wt-pic { filter: grayscale(1) brightness(.6); }
.wtile.locked .wt-lbl { opacity: .55; }
.wlock { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; border-radius: 10px; font: 700 12px var(--label); color: #fff3d8; background: rgba(20,12,6,.82); white-space: nowrap; }
.wtiles.colors { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 10px; }
.wswatch { position: relative; width: 48px; height: 48px; min-height: 0; padding: 0; border-radius: 50%; background: var(--sw); border: 3px solid #fffaf0; box-shadow: 0 0 0 1px #8a6a3a, 0 2px 4px rgba(0,0,0,.25); justify-self: center; }
.wswatch.on { box-shadow: 0 0 0 3px #e0a83a, 0 0 14px rgba(255,200,80,.7); }
.wswatch.locked { filter: grayscale(.7) brightness(.75); }
.wswatch .wlock { top: auto; bottom: -10px; padding: 1px 5px 1px 3px; font-size: 10px; }
.save-bar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bar-bg, rgba(216,195,154,.96)) 30%); }
body.night .save-bar { --bar-bg: rgba(7,9,12,.96); }
.save-bar button.gold.big { flex: 1 1 auto; max-width: 520px; margin-left: auto; }
.save-bar button:disabled { opacity: .55; }
.dirty-note { font-style: italic; color: var(--acc); }
@media (max-width: 760px) {
  .pro-grid { grid-template-columns: 1fr; }
  .pro-side { top: 0; margin: 0 -16px; padding: 6px 16px 8px; background: var(--bar-bg, rgba(216,195,154,.97)); box-shadow: 0 8px 16px rgba(0,0,0,.15); }
  body.night .pro-side { --bar-bg: rgba(7,9,12,.97); }
  .pro-card { grid-template-columns: 132px 1fr; align-items: center; padding: 8px; }
  .pro-card .fig-preview { aspect-ratio: 1; }
  .pro-id .hero-name { font-size: 24px; }
  .pro-id .hero-next { display: none; }
  .save-bar button.gold.big { margin: 0; }
  .wtiles { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}
@media (max-width: 480px) { .ptabs button { font-size: 17px; gap: 4px; padding: 6px 4px; } .ptabs .ico-w svg { width: 18px; height: 18px; } .save-bar .dirty-note { display: none; } }

/* ---------- kampaň ---------- */
.profile.campaign { max-width: 860px; gap: 14px; }
.camp-head { display: grid; gap: 10px; }
.camp-head p { margin: 0; }
.camp-prog { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; }
.camp-prog .lbl { margin: 0; }
.camp-num { font: 400 28px/1 var(--display); color: var(--tx-mute); }
.camp-num b { color: var(--acc); font-weight: 400; font-size: 36px; }
.camp-prog .xpbar { height: 14px; min-width: 0; }
.ladder { gap: 10px; }
.rung { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "num main act" "story story story"; gap: 6px 14px; padding: 10px 14px; border-radius: 14px; background: var(--pn-bg); box-shadow: inset 0 0 0 1px var(--pn-bd), 0 4px 0 rgba(0,0,0,.25); }
body.day .rung { background: var(--pn-bg); }
.rung .num { grid-area: num; color: var(--acc); }
.rung-main { grid-area: main; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; padding: 0; min-height: 0; background: none; border: 0; box-shadow: none; color: inherit; text-align: left; font: inherit; letter-spacing: 0; }
.rung-main:hover { box-shadow: none; }
.rung .portrait { width: 84px; height: 84px; box-shadow: 0 0 0 2px #2a0804, 0 0 0 4px #b8452e, 0 4px 10px rgba(0,0,0,.3); }
.rung.beaten .portrait { box-shadow: 0 0 0 2px #2a4a14, 0 0 0 4px #6ea84e, 0 4px 10px rgba(0,0,0,.3); }
.rung .captain { color: var(--tx); font-size: 26px; display: flex; align-items: center; gap: 6px; }
.rung .motto { color: var(--tx-mute); font-style: italic; font-size: 15px; }
.rung .meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; color: var(--acc); }
.rung .meta .mi { display: inline-flex; align-items: center; gap: 4px; }
.rung .more { margin-left: 8px; display: inline-flex; align-items: center; gap: 3px; color: var(--tx-mute); text-decoration: underline; text-underline-offset: 2px; }
.rung .act { grid-area: act; }
.rung-story { grid-area: story; margin: 4px 0 2px; padding: 12px 14px; border-radius: 10px; background: var(--sf); border-left: 4px solid var(--acc); font-size: 16px; line-height: 1.5; animation: screenin .25s var(--ease-out); }
.rung.next { box-shadow: inset 0 0 0 2px #e0a83a, 0 4px 0 rgba(0,0,0,.25), 0 0 24px rgba(255,200,80,.35); }
.rung.locked { filter: grayscale(.85); opacity: .7; }
.lockbox { display: inline-flex; align-items: center; gap: 6px; color: var(--tx-mute); font: 600 13px var(--label); letter-spacing: .06em; }
.rung.boss { background: linear-gradient(#4a0d14, #1a0406); color: #fff3d8; box-shadow: inset 0 0 0 2px #c2183a, 0 4px 0 #000, 0 0 30px rgba(194,24,58,.35); }
.rung.boss .captain { color: #ffd451; } .rung.boss .motto { color: #f3c8c0; }
.rung.boss .rung-story { color: #2b1d0e; }
@media (max-width: 640px) {
  .rung { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "num main" "act act" "story story"; padding: 10px; }
  .rung-main { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .rung .portrait { width: 64px; height: 64px; }
  .rung .captain { font-size: 22px; }
  .rung .act { justify-content: flex-end; }
}

/* ---------- žebříček ---------- */
.profile.captains-scr { max-width: 760px; gap: 14px; }
.board { display: grid; gap: 12px; }
.board .sec-title { margin: 0; }
.board-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.board-tabs .seg { flex: 1 1 200px; }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.brow { width: 100%; display: grid; grid-template-columns: 34px auto 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; min-height: 58px; border-radius: 12px; background: var(--sf); border: 1px solid var(--sf-bd); box-shadow: none; color: var(--tx); text-align: left; font: 400 16px var(--body); letter-spacing: 0; }
.brow:hover { box-shadow: 0 0 0 2px var(--acc); }
.board-list li.me .brow { border-color: var(--acc); background: linear-gradient(90deg, rgba(255,210,120,.3), var(--sf)); }
.rank-n { font: 400 22px var(--display); color: var(--tx-mute); text-align: center; }
.rank-m { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 400 18px var(--display); color: #3a1e04; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3); }
.rank-m.m0 { background: var(--gold-grad); } .rank-m.m1 { background: linear-gradient(#ffffff, #c8d0d8 50%, #8494a2); } .rank-m.m2 { background: linear-gradient(#f0b080, #c27a3a 50%, #7a4418); }
.bname { display: grid; min-width: 0; font: 400 21px/1.1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bname small { font: italic 13px var(--body); color: var(--tx-mute); }
.bval { font: 400 20px var(--display); color: var(--acc); white-space: nowrap; }
.all-caps summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.captains li { cursor: pointer; background: var(--sf); border-color: var(--sf-bd); border-radius: 12px; }
.captains li:hover { box-shadow: 0 0 0 2px var(--acc); }
.captains .captain { color: var(--tx); }
.stat .ico-w { color: var(--acc); }
.stats .stat { display: grid; justify-items: center; gap: 2px; border-radius: 10px; }

/* ---------- karta zblízka ---------- */
.card { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.card-i { position: absolute; z-index: 9; bottom: -9px; right: -9px; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center;
  font: 700 italic 16px/1 Georgia, serif; color: #3a1e04; background: var(--gold-grad); border: 1.5px solid #5a3406; box-shadow: 0 2px 5px rgba(0,0,0,.45); opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; }
.card-i::before { content: ""; position: absolute; inset: -9px; }
.card:hover > .card-i, .card:focus-within > .card-i { opacity: 1; transform: none; }
@media (hover: none) { .harbor .card > .card-i, .exps .card > .card-i { opacity: 1; transform: none; } }
.crew .cards .card-i, .others .card-i, .flycard .card-i, .deck .card-i { display: none; }
.cd-p { width: min(720px, 100%); }
.cd { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
.cd-art { display: grid; place-items: center; }
.cd-card { --cw: 230px; cursor: default; animation: cdin .5s var(--ease-out); }
@keyframes cdin { from { transform: rotateY(-70deg) scale(.8); opacity: 0; } }
.cd-txt { display: grid; gap: 8px; min-width: 0; }
.cd-kicker { font: 600 13px var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); margin-right: 44px; }
.cd-name { font-size: clamp(30px, 6vw, 40px); line-height: 1; margin: 0 44px 4px 0; }
.cd-story { margin: 0 0 6px; font-size: 17px; line-height: 1.5; font-style: italic; }
.cd-does { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cd-does li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--sf); border: 1px solid var(--sf-bd); font-size: 16px; }
.cd-does .ico-w { color: var(--acc); }
@media (max-width: 600px) { .cd { grid-template-columns: 1fr; gap: 14px; } .cd-card { --cw: 180px; } .cd-kicker, .cd-name { text-align: center; margin-right: 0; } .cd-kicker { margin-top: 0; } }
.py-show .card { cursor: zoom-in; }
.modal:has(.cd-p), .modal:has(.pcard) { z-index: 88; }
.skulls i { background: var(--track); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.skulls i.on { background: radial-gradient(circle at 40% 35%, #d9503a, #7e1f12); box-shadow: none; }
.duel-name .skulls i { background: rgba(255,255,255,.25); } .duel-name .skulls i.on { background: radial-gradient(circle at 40% 35%, #ff8a6a, #c2321e); }

/* ---------- hra na mobilu: kompaktní stůl, akce u palce ---------- */
@media (max-width: 700px) {
  body.in-game .wrap { gap: 14px; padding-bottom: 170px; }
  .gtop h1 { font-size: 28px; }
  .gtop .btns { gap: 6px; }
  .gtop .icon-btn { width: 40px; height: 40px; min-height: 40px; }
  .players { gap: 8px; }
  .pl { padding: 8px 8px 14px; gap: 8px; }
  .pav.plate { width: 52px; height: 52px; }
  .pl .nm { font-size: 17px; padding-right: 34px; }
  .pl .st { gap: 8px; font-size: 15px; }
  .pl .st b { font-size: 16px; }
  .pl .oddsn { top: 5px; right: 6px; font-size: 11px; }
  .pl .odds, .pl .fuse { left: 8px; right: 8px; bottom: 4px; }
  .pl .syms { display: none; }
  .coinchip { left: 40px; font-size: 20px; }
  .table { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .deckcol { align-self: start; gap: 6px; }
  .deckcol .lbl { font-size: 11px; margin: 0; }
  .deck { width: 64px; }
  .deckcount { font-size: 11px; text-align: center; line-height: 1.2; }
  .tablemain { gap: 8px; }
  .tablemain .lbl { margin-bottom: 4px; font-size: 12px; }
  .harbor { --cw: 100px; gap: 10px; padding: 8px; min-height: 150px; }
  .harbor .card { --cw: 100px; }
  .exps .card { --cw: 84px; }
  .actions { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); gap: 8px;
    background: linear-gradient(rgba(0,0,0,0), var(--bar-bg, rgba(216,195,154,.97)) 22%); flex-wrap: wrap; }
  body.night .actions { --bar-bg: rgba(7,9,12,.97); }
  .actions button { flex: 1 1 40%; min-height: 52px; font-size: 19px; padding: 8px 10px; }
  .actions .status { order: -1; flex: 1 1 100%; font-size: 14px; text-align: center; color: var(--tx); text-shadow: none; }
  body.in-game .portys { bottom: 120px; }
  .crew .cards .card { --cw: 78px; }
  .others .cards .card { --cw: 64px; }
}
@media (max-width: 370px) { .table { grid-template-columns: 62px minmax(0, 1fr); } .deck { width: 56px; } .harbor, .harbor .card { --cw: 92px; } }

/* ---------- intro: filmový úvod ---------- */
.intro-stars { position: absolute; inset: 0 0 35% 0; opacity: 0; animation: introfade 3s .6s forwards;
  background-image: radial-gradient(1px 1px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 32% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 58% 16%, #fff, transparent), radial-gradient(1px 1px at 76% 30%, #fff, transparent), radial-gradient(1px 1px at 88% 12%, #fff, transparent), radial-gradient(1px 1px at 22% 38%, #fff, transparent), radial-gradient(1.5px 1.5px at 44% 28%, #fff, transparent), radial-gradient(1px 1px at 66% 6%, #fff, transparent); }
.intro-rays { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,210,120,.10) 0 4deg, transparent 4deg 14deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 45%); mask-image: radial-gradient(circle, #000 0, transparent 45%);
  animation: introfade 2s 1.6s forwards, spin 60s linear infinite; }
.intro-bar { position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 4; animation: barin 1.2s .1s cubic-bezier(.6,0,.2,1) both; }
.intro-bar.top { top: 0; } .intro-bar.bot { bottom: 0; }
@keyframes barin { from { height: 50vh; } }
.intro-tap { position: relative; z-index: 2; margin-top: 18px; font: 600 13px var(--label); letter-spacing: .32em; text-transform: uppercase; color: rgba(255,240,210,.7); opacity: 0; animation: introfade 1s 4s forwards, tapblink 2s 5s ease-in-out infinite; }
@keyframes tapblink { 50% { opacity: .35; } }
.intro-skipbtn { position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); right: 14px; min-height: 44px; padding: 8px 16px; border-radius: 22px; font: 600 14px var(--label); letter-spacing: .14em; text-transform: uppercase;
  color: #f3e3bc; background: rgba(0,0,0,.45); border: 1px solid rgba(255,220,150,.35); box-shadow: none; opacity: 0; animation: introfade .6s .8s forwards; }
.intro-skipbtn:hover { box-shadow: 0 0 0 1px #ffd451; background: rgba(0,0,0,.65); }
.intro-skip { display: none; }
@media (max-width: 520px) {
  .hero { padding-right: 14px; }
  .hero .chest-btn { position: absolute; top: 6px; right: 6px; grid-column: auto; display: grid; grid-template-columns: 1fr; justify-items: center; min-width: 0; padding: 4px; }
  .hero .chest-btn .chest-lbl { display: none; }
  .hero .chest-btn.ready::after { top: -2px; right: -2px; }
  .hero-info { padding-right: 52px; }
  .hero-next { font-size: 13.5px; }
}
.tabs button { border: 0; min-height: 48px; }
.auth .row { flex-wrap: wrap; }
.auth .row > input { flex: 1 1 180px; }
.auth .row > button { flex: 1 1 140px; white-space: nowrap; }
.auth-panel button[type=submit] { min-height: 52px; }
@media (max-width: 700px) { .auth-portys { width: 96px; margin: -8px auto -14px; } .auth .logo { font-size: 56px; } }
@media (max-width: 700px) {
  .gtop { flex-wrap: wrap; row-gap: 6px; }
  .gtop .gt-l { flex: 1 1 0; min-width: 0; }
  .gtop .btns { flex: 0 0 auto; }
  .gtop .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* módy hry: jeden řádek štítků, který se dá posunout prstem */
  .gmodes .mode-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
  .gmodes .mode-chips::-webkit-scrollbar { display: none; }
  .gmodes .mode-chip { flex: 0 0 auto; white-space: nowrap; min-height: 30px; font-size: 12px; padding: 2px 9px; }
  .gtop .meta { font-size: 12px; }
  .pl .nm { padding-right: 0; }
  .pl.me .nm::after { display: none; }
  .pl .oddsn { top: auto; bottom: 9px; right: 8px; }
  .pl .odds { right: 46px; }
  .pav.plate { width: 46px; height: 46px; }
  .pl .st { row-gap: 2px; }
}
@media (max-width: 700px) { .deck { --cw: 64px; } }
@media (max-width: 370px) { .deck { --cw: 56px; } }
.pc-go { width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-top: 2.5px solid currentColor; transform: rotate(45deg); margin-right: 4px; }
@media (max-width: 700px) { .sky-fx .moon { width: 40px; height: 40px; right: auto; left: 52%; top: 14px; } }
.mini-coin, .mini-vp { display: inline-block; vertical-align: -3px; }
.logbox svg { vertical-align: -2px; }
.ptag .mini-coin { width: 14px; height: 14px; margin-left: 2px; }
.harbor:empty::after, .exps:empty::after { content: attr(data-empty); }
.pl.actor::before { content: attr(data-actor); }
.pl.me .nm::after { content: ""; }
/* úkoly: na širokém displeji je panel vedle, dlaždice by byla navíc; na mobilu dlaždice odkazuje dolů */
.tiles .mtile[data-act=tour] { display: none; }
.tiles:not(:has([data-act=quests])) .mtile[data-act=tour] { display: grid; }
@media (min-width: 861px) { .tiles:has([data-act=quests]) .mtile[data-act=quests] { display: none; } .tiles:has([data-act=quests]) .mtile[data-act=tour] { display: grid; } }
.sky-fx .moon { right: 26%; }

/* konec hry */
.final { gap: 10px; }
.final .lbl { justify-content: center; }
.fin-winners { display: flex; gap: 14px; justify-content: center; }
.pav.win { width: 104px; height: 104px; animation: luin .7s var(--ease-out) both; }
.pav.win .pav-pic { box-shadow: 0 0 0 3px #5a3406, 0 0 0 6px #ffd451, 0 0 30px rgba(255,200,80,.8); }
.pav.win .lv-badge { font-size: 18px; height: 26px; }
.final h2 { font-size: clamp(30px, 6vw, 44px); color: var(--acc) !important; }
.final table { width: 100%; max-width: 560px; }
.final td .pav { margin-right: 6px; }
body.day .final td, body.day .final th { color: #2b1d0e; }
.pc-medals > p { grid-column: 1 / -1; margin: 0; }
.lu-portys .portys-svg { width: 100%; }

/* konec hry na mobilu: tabulka se vejde na šířku */
@media (max-width: 520px) {
  .final table { font-size: 15px; table-layout: fixed; }
  .final th { font-size: 10px; letter-spacing: .03em; padding: 4px 4px; white-space: normal; }
  .final td { padding: 5px 4px; }
  .final th:first-child, .final td:first-child { width: 42%; }
  .final .fin-name { max-width: 100%; min-width: 0; min-height: 44px; justify-content: flex-start; padding: 0; }
  .final .fn-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .final td .pav { margin-right: 4px; flex: 0 0 auto; }
}

/* menší kulatá tlačítka: dotyková plocha aspoň 44 px */
.icon-btn.sm, .gtop .icon-btn, .info-btn { position: relative; }
.icon-btn.sm::after, .gtop .icon-btn::after, .info-btn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }

/* nastavení na úzkém displeji */
@media (max-width: 440px) {
  .pack { padding: 8px 6px 10px; }
  .pack .pv { padding: 8px 4px; gap: 4px; }
  .pack .pv .card { --cw: 50px; }
  .pack b { font-size: 18px; }
  .pack span { font-size: 13px; }
  .seg button { padding: 6px 6px; font-size: 13px; letter-spacing: .02em; }
}
@media (max-width: 520px) { .pl .nm-pre { display: none; } }

/* načítání */
.busy-bar { position: fixed; z-index: 96; left: 0; top: 0; height: 3px; width: 100%; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(90deg, transparent, #ffd451 30%, #e0702a 50%, #ffd451 70%, transparent) 0 0 / 50% 100% no-repeat; }
.busy-bar.on { opacity: 1; animation: busy 1s linear infinite; }
@keyframes busy { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* Portyšova bublina je vždy pergamen – i v noci tmavý text a světlá tlačítka */
.portys .muted, body.night .portys .muted { color: #6b5232; }
body.night .py-nav .ghost, body.day .py-nav .ghost { background: linear-gradient(#fbf3df, #e8d4a6); color: #3b2410; box-shadow: inset 0 0 0 1px #b08a4a, 0 3px 0 #8a6a3a; }

/* přístav na širokém displeji: posádka vlevo, pravidla a módy vpravo */
@media (min-width: 1000px) {
  .home.lobby { max-width: 1060px; width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 18px; }
  .home.lobby > .scr-top, .home.lobby > .sail-bar { grid-column: 1 / -1; }
  .home.lobby > .invite { grid-column: 1; }
  .home.lobby > .rules-p { grid-column: 2; grid-row: 2 / span 2; }
  .home.lobby > .sail-bar { justify-self: center; width: min(620px, 100%); }
}
.hero.guest .hero-info button { white-space: nowrap; }