/* ===== v5: sekce Hra ze skutečné herní grafiky (bez screenshotů) + žebříček jako seznam ===== */
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gbox { position: relative; padding: 26px 28px 28px; background: var(--panel); border: 1px solid rgba(0,0,0,.75); border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 14px 36px rgba(0,0,0,.45); overflow: hidden; }
.gbox::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 0%, rgba(142,107,255,.16), transparent 70%); }
.gbox.character::before { background: radial-gradient(70% 60% at 50% 0%, rgba(232,197,106,.16), transparent 70%); }
.gbox.backpack::before { background: radial-gradient(70% 60% at 50% 0%, rgba(184,134,79,.18), transparent 70%); }
.gbox.gb-minigames::before { background: radial-gradient(70% 60% at 50% 0%, rgba(111,214,232,.14), transparent 70%); }
.gbox-head { position: relative; margin-bottom: 22px; }
.gbox-head h3 { color: #fff; font-size: 24px; margin: 0 0 6px; }
.gbox-head p { color: var(--muted); font-size: 15px; margin: 0; max-width: 520px; }
.gbox.gb-skills, .gbox.gb-minigames { grid-column: span 2; }

/* dovednosti: šestiúhelník s postupem = list snímků ui_hexring (33 × 160×184 při x4), předmět uprostřed */
.hexgrid { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.hexskill { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.hexskill .hex { position: relative; width: 80px; height: 92px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
/* stopa (plný šestiúhelník, tmavě zlatá) + postup (zlatá) = list snímků ui_hexring jako maska s barvou pozadí, přesně jako Ui.hexProgress */
.hexskill .hex .track, .hexskill .hex .ring { position: absolute; inset: 0; -webkit-mask-image: url('/img/game/ui_hexring_x4.png'); mask-image: url('/img/game/ui_hexring_x4.png'); -webkit-mask-size: 2640px 92px; mask-size: 2640px 92px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hexskill .hex .track { background: rgba(122,90,30,.85); -webkit-mask-position: -2560px 0; mask-position: -2560px 0; }
.hexskill .hex .ring { background: #ffd86a; -webkit-mask-position: calc(var(--f, 0) * -80px) 0; mask-position: calc(var(--f, 0) * -80px) 0; }
.hexskill .hex::before { content: ''; position: absolute; inset: 7px 6px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(14,12,18,.85); }
.hexskill .hex img { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); transition: transform .3s; }
.hexskill:hover .hex img { transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); }
.hexskill b { font-size: 13px; font-weight: 600; color: var(--text); }
.hexskill span { font-family: var(--title); font-size: 13px; color: var(--gold-2); letter-spacing: .04em; }
@media (max-width: 900px) { .game-grid { grid-template-columns: 1fr; } .gbox.gb-skills, .gbox.gb-minigames { grid-column: auto; } .hexgrid { grid-template-columns: repeat(4, 1fr); } }

/* postava: hex LV (ui_hex_lv) + velké číslo, Murdie Coin + číslo – jako v inventáři */
.charrow { position: relative; display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.charrow .stat { display: flex; align-items: center; gap: 14px; }
.hexlv { width: 48px; height: 54px; background: url('/img/game/ui_hex_lv_x4.png') center / 100% 100% no-repeat; display: grid; place-items: center; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.hexlv i { font-style: normal; font-family: var(--title); font-size: 13px; color: var(--purple-2); }
.charrow .coin { width: 44px; height: 44px; image-rendering: pixelated; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); animation: coinbob 3s ease-in-out infinite; }
@keyframes coinbob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-6deg); } }
.charrow .num { font-family: var(--title); font-size: 44px; line-height: 1; color: #fff; }
.charrow .num.gold { color: var(--gold-2); }

/* batoh: předmět 6× + mřížka 6 × 5 slotů ve vzhledu slotů ze hry (tmavý okraj, šedá vnitřní linka, průsvitný střed) */
.packrow { position: relative; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.packrow .pack { width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)); animation: packbob 4s ease-in-out infinite; }
@keyframes packbob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.slots { display: grid; grid-template-columns: repeat(6, 30px); gap: 3px; }
.slots i { display: block; width: 30px; height: 30px; background: rgba(0,0,0,.35); border: 1px solid #07070a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); border-radius: 2px; position: relative; }
.slots i img { position: absolute; inset: 5px; width: 20px; height: 20px; image-rendering: pixelated; }

/* minihry: karty jako v Esc → Minigames (eventová oranžová, herní s tlačítkem JOIN / LOCKED) */
.mcards { position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 12px; }
.ecard, .gcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; min-height: 150px; background: #121418; border: 1px solid rgba(0,0,0,.8); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); overflow: hidden; }
.ecard { border-color: rgba(240,122,30,.9); background: linear-gradient(180deg, rgba(240,122,30,.45), rgba(74,24,114,.12) 60%, #161014); box-shadow: 0 0 40px rgba(240,122,30,.22), inset 0 1px 0 rgba(255,255,255,.08); }
.ecard .prop { position: absolute; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.ecard .p1 { right: 10px; bottom: 6px; width: 64px; animation: packbob 5s ease-in-out infinite; }
.ecard .p2 { right: 70px; bottom: 4px; width: 44px; opacity: .9; }
.ecard .p3 { right: 24px; top: 10px; width: 40px; animation: coinbob 4s ease-in-out infinite; }
.ecard .tag { display: inline-block; align-self: flex-start; padding: 2px 8px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #3a1a08; background: #ffe2a0; border-radius: 2px; }
.ecard .title, .gcard .title { font-family: var(--title); font-size: 20px; color: #fff; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.ecard .small, .gcard .small { color: var(--muted); font-size: 12px; }
.gcard { align-items: center; text-align: center; }
.gcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 70px; background: linear-gradient(180deg, rgba(90,138,214,.5), transparent); }
.gcard.locked::before { background: linear-gradient(180deg, rgba(63,166,160,.18), transparent); }
.gcard .icon { position: relative; width: 36px; height: 36px; image-rendering: pixelated; margin: 6px 0 2px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.gcard.locked .icon, .gcard.locked .title, .gcard.locked .small { opacity: .72; }
.gbtn { margin-top: auto; width: 100%; padding: 7px 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: center; border-radius: 2px; color: var(--gold); background: rgba(20,19,24,.6); border: 1px solid rgba(255,224,138,.3); }
.gbtn.primary { color: #3a2400; background: #f2c14e; border-color: #8a5a1a; box-shadow: inset 0 1px 0 #ffe9a0, inset 0 -3px 0 #8a5a1a; font-family: var(--title); font-size: 14px; letter-spacing: .04em; }
@media (max-width: 760px) { .mcards { grid-template-columns: 1fr; } .charrow { gap: 24px; } }

/* žebříček: jeden seznam, řazení podle levelu / coinů */
.lb { background: var(--panel); border: 1px solid rgba(0,0,0,.75); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 14px 36px rgba(0,0,0,.45); overflow: hidden; }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.lb .seg { border-radius: var(--r); }
.lb .seg button { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; }
.lb .seg button.on { background: rgba(232,197,106,.16); color: var(--gold-2); }
.lb-row { display: grid; grid-template-columns: 52px 44px 1fr auto auto; align-items: center; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--line); transition: background .15s; }
.lb-row:first-child { border-top: 0; }
.lb-row:hover { background: rgba(255,255,255,.03); }
.lb-row .n { font-family: var(--title); font-size: 18px; color: var(--faint); }
.lb-row.r1 .n { color: var(--gold-2); } .lb-row.r2 .n { color: #cfd3e0; } .lb-row.r3 .n { color: #d29a62; }
.lb-row.r1 { background: linear-gradient(90deg, rgba(232,197,106,.1), transparent 60%); }
.lb-row .face { width: 40px; height: 40px; border-radius: 4px; image-rendering: pixelated; }
.lb-row .who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lb-row .who a { color: var(--text); font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .who a:hover { color: var(--gold-2); }
.lb-row .who .seen { font-size: 12px; color: var(--faint); }
.lb-row .lvl { display: flex; align-items: center; gap: 8px; min-width: 86px; }
.lb-row .lvl .hexlv { width: 30px; height: 34px; } .lb-row .lvl .hexlv i { font-size: 9px; }
.lb-row .lvl > b { font-family: var(--title); font-size: 24px; color: #fff; }
.lb-row .coins { display: flex; align-items: center; gap: 8px; min-width: 110px; justify-content: flex-end; }
.lb-row .coins img { width: 20px; height: 20px; image-rendering: pixelated; }
.lb-row .coins b { font-family: var(--title); font-size: 18px; color: var(--gold-2); }
@media (max-width: 640px) { .lb-row .mini-skills { display: none; } .lb-row .lvl { min-width: 0; } }

/* ===== v5b: bez boxů – herní prvky volně na pozadí, pod každou scénou měkké světlo ===== */
.scene { position: relative; padding: 36px 0 10px; text-align: center; }
.scene::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(900px, 100%); height: 70%; transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(142,107,255,.16), transparent 70%); filter: blur(10px); }
.scene-level::before { background: radial-gradient(50% 50% at 50% 50%, rgba(142,107,255,.22), transparent 70%); }
.scene-coin::before { background: radial-gradient(50% 50% at 50% 50%, rgba(232,197,106,.2), transparent 70%); }
.scene-pack::before { background: radial-gradient(50% 50% at 50% 50%, rgba(184,134,79,.2), transparent 70%); }
.scene-mini::before { background: radial-gradient(50% 50% at 50% 50%, rgba(111,214,232,.12), transparent 70%); }
.scene > * { position: relative; z-index: 1; }
.scene-cap { margin: 22px auto 0; max-width: 560px; display: flex; flex-direction: column; gap: 4px; }
.scene-cap b { font-family: var(--title); font-size: 22px; color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.scene-cap span { color: var(--muted); font-size: 15px; }
.scene-row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 20px; margin-top: 30px; align-items: start; }
.scene-row .scene { padding-top: 26px; }
.scene .art { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 130px; }
.hexlv.big { width: 72px; height: 81px; } .hexlv.big i { font-size: 18px; }
.scene .art .num { font-family: var(--title); font-size: 40px; line-height: 1; color: #fff; }
.scene .art .num.gold { color: var(--gold-2); }
.scene .art .coin { width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)); animation: coinbob 3s ease-in-out infinite; }
.scene .art .pack { width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 12px 24px rgba(0,0,0,.6)); animation: packbob 4s ease-in-out infinite; }
.scene-skills .hexgrid { max-width: 1040px; margin: 0 auto; gap: 14px; }
.scene-skills .hexskill .hex { width: 100px; height: 115px; }
.scene-skills .hexskill .hex .track, .scene-skills .hexskill .hex .ring { -webkit-mask-size: 3300px 115px; mask-size: 3300px 115px; }
.scene-skills .hexskill .hex .track { -webkit-mask-position: -3200px 0; mask-position: -3200px 0; }
.scene-skills .hexskill .hex .ring { -webkit-mask-position: calc(var(--f, 0) * -100px) 0; mask-position: calc(var(--f, 0) * -100px) 0; }
.scene-skills .hexskill .hex img { width: 48px; height: 48px; }
.scene-skills .hexskill b { font-size: 14px; }
.scene-skills .hexskill:nth-child(odd) { animation: hexbob 5s ease-in-out infinite; }
.scene-skills .hexskill:nth-child(even) { animation: hexbob 5s ease-in-out -2.5s infinite; }
@keyframes hexbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.scene-mini .mcards { max-width: 1040px; margin: 0 auto; }
@media (max-width: 900px) {
  .scene-row { grid-template-columns: 1fr; }
  .scene-skills .hexskill .hex { width: 80px; height: 92px; }
  .scene-skills .hexskill .hex .track, .scene-skills .hexskill .hex .ring { -webkit-mask-size: 2640px 92px; mask-size: 2640px 92px; }
  .scene-skills .hexskill .hex .track { -webkit-mask-position: -2560px 0; mask-position: -2560px 0; }
  .scene-skills .hexskill .hex .ring { -webkit-mask-position: calc(var(--f, 0) * -80px) 0; mask-position: calc(var(--f, 0) * -80px) 0; }
  .scene .art .num { font-size: 34px; }
}

/* ===== v5c: stav miniher místo tlačítek, denní úkoly, level-up pruh, teleport, mapa v rámu ===== */
.gcard .state { margin-top: auto; width: 100%; padding: 6px 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--faint); border-top: 1px solid var(--line); }
.gcard .state.open { color: #bfefff; }
.gcard.locked .state { color: var(--gold); }

/* denní úkoly: karty jako v Esc → Quests (ikona, název, lišta postupu, odměna) */
.qcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; margin: 0 auto; }
.qcard { position: relative; text-align: left; padding: 14px 16px 12px; background: #121418; border: 1px solid rgba(0,0,0,.8); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.4); overflow: hidden; }
.qcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 56px; background: linear-gradient(180deg, rgba(142,107,255,.35), transparent); }
.qcard.done::before { background: linear-gradient(180deg, rgba(63,166,74,.4), transparent); }
.qtop { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.qtop img { width: 28px; height: 28px; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.qtop b { font-family: var(--title); font-size: 15px; color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.qbar { height: 6px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.qbar i { display: block; height: 100%; background: linear-gradient(90deg, #8e6bff, #b79bff); box-shadow: 0 0 10px #8e6bff; }
.qcard.done .qbar i { background: linear-gradient(90deg, #3fa64a, #7bd684); box-shadow: 0 0 10px #3fa64a; }
.qmeta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: var(--muted); }
.qmeta .rew { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-2); font-weight: 600; }
.qmeta .rew img { width: 14px; height: 14px; image-rendering: pixelated; }

/* level-up pruh přes šířku jako banner ve hře */
.lvup { position: relative; display: flex; align-items: center; justify-content: center; gap: 30px; padding: 22px 0; background: linear-gradient(90deg, transparent, rgba(10,8,14,.92) 18%, rgba(10,8,14,.92) 82%, transparent); }
.lvup .orn { flex: none; width: 160px; height: 2px; background: linear-gradient(90deg, transparent, #b79bff); position: relative; }
.lvup .orn.r { background: linear-gradient(90deg, #b79bff, transparent); }
.lvup .orn::after { content: ''; position: absolute; top: -5px; width: 12px; height: 12px; background: #ffd86a; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 10px rgba(255,216,106,.7); }
.lvup .orn.l::after { right: -6px; } .lvup .orn.r::after { left: -6px; }
.lvup-body { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lvup-skill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #b79bff; }
.lvup-skill img { width: 18px; height: 18px; image-rendering: pixelated; }
.lvup-num { font-family: var(--title); font-size: 64px; line-height: 1; color: #fff; text-shadow: 0 0 30px rgba(183,155,255,.6); }
.lvup-label { font-family: var(--title); font-size: 16px; letter-spacing: .2em; color: var(--gold-2); }
.lvup-rew { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.lvup-rew img { width: 14px; height: 14px; image-rendering: pixelated; }
.lvup-rew em { font-style: normal; color: #7bd684; }

/* teleport: tři karty jako kolo na Alt (zpět / domů / spawn), prostřední zvednutá */
.tpcards { display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
.tpcard { width: 150px; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #121418; border: 1px solid rgba(0,0,0,.8); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.4); position: relative; overflow: hidden; }
.tpcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 60px; background: linear-gradient(180deg, var(--tc, rgba(142,107,255,.4)), transparent); }
.tpcard.back { --tc: rgba(176,108,255,.45); } .tpcard.home { --tc: rgba(232,197,106,.5); } .tpcard.spawn { --tc: rgba(123,214,132,.45); }
.tpcard.home { width: 170px; padding-top: 26px; transform: translateY(-10px); border-color: rgba(232,197,106,.6); box-shadow: 0 0 30px rgba(232,197,106,.25), inset 0 1px 0 rgba(255,255,255,.1); }
.tpcard img { position: relative; width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); margin-bottom: 6px; }
.tpcard b { font-family: var(--title); font-size: 16px; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.tpcard span { font-size: 12px; color: var(--muted); }

/* mapa: menší rám s lištou režimů a kompasem jako v Esc → Map */
.mapframe { position: relative; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(0,0,0,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.6); }
.mapframe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mapui { position: absolute; left: 16px; top: 14px; display: flex; gap: 6px; }
.mtab { padding: 5px 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; background: rgba(10,10,14,.75); color: var(--muted); border: 1px solid rgba(255,255,255,.1); border-radius: 2px; }
.mtab.on { color: var(--gold-2); border-color: rgba(255,216,106,.6); }
.mapcompass { position: absolute; right: 16px; top: 14px; width: 30px; height: 30px; display: grid; place-items: center; font-family: var(--title); font-size: 12px; color: var(--gold-2); background: rgba(10,10,14,.75); border: 1px solid rgba(255,216,106,.4); border-radius: 50%; }
.scene-map .btn { margin-top: 16px; }
@media (max-width: 760px) { .qcards { grid-template-columns: 1fr; } .lvup .orn { width: 40px; } .tpcard { width: 110px; } .tpcard.home { width: 120px; } }
.tpcard img.bed { width: 64px; height: 32px; transform: rotate(-90deg) scale(.9); margin: 10px 0 14px; }

/* ===== v5d: kompozice – souhvězdí, střídavé řady, vějíře ===== */
.constellation { position: relative; width: 560px; height: 560px; margin: 40px auto 0; }
.constellation .links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.constellation .links line { stroke: rgba(255,216,106,.28); stroke-width: 1.5; stroke-dasharray: 4 6; }
.constellation .links circle { fill: rgba(255,216,106,.9); }
.constellation::before { content: ''; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(142,107,255,.28), rgba(142,107,255,.08) 45%, transparent 70%); filter: blur(6px); }
.constellation .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.core-hex { position: relative; width: 150px; height: 169px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; filter: drop-shadow(0 16px 40px rgba(142,107,255,.5)); animation: hexbob 6s ease-in-out infinite; }
.core-hex i { font-style: normal; font-family: var(--title); font-size: 14px; letter-spacing: .2em; color: var(--purple-2); margin-top: 6px; }
.core-hex b { font-family: var(--title); font-size: 56px; line-height: 1; color: #fff; text-shadow: 0 0 24px rgba(183,155,255,.8); }
.constellation .orbit { position: absolute; inset: 0; display: block; max-width: none; }
.constellation .hexskill { position: absolute; left: 50%; top: 50%; width: 110px; margin: -72px 0 0 -55px; transform: translate(var(--x), var(--y)); animation: none; }
.constellation .hexskill .hex { width: 80px; height: 92px; margin: 0 auto; }
.constellation .hexskill .hex .track, .constellation .hexskill .hex .ring { -webkit-mask-size: 2640px 92px; mask-size: 2640px 92px; }
.constellation .hexskill .hex .track { -webkit-mask-position: -2560px 0; mask-position: -2560px 0; }
.constellation .hexskill .hex .ring { -webkit-mask-position: calc(var(--f, 0) * -80px) 0; mask-position: calc(var(--f, 0) * -80px) 0; }
.constellation .hexskill .hex img { width: 40px; height: 40px; }
.constellation .hexskill b { font-size: 12px; }
.constellation .hexskill span { font-size: 11px; }
.scene-cap.center { text-align: center; margin-top: 10px; }

.feats { display: flex; flex-direction: column; gap: 10px; margin-top: 60px; }
.feat { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; padding: 40px 0; }
.feat:nth-child(even) .feat-art { order: 2; }
.feat-text { max-width: 420px; }
.feat:nth-child(odd) .feat-text { justify-self: start; }
.feat:nth-child(even) .feat-text { justify-self: end; text-align: right; }
.feat:nth-child(even) .feat-text .kicker { justify-content: flex-end; }
.feat-text h3 { font-size: 32px; color: #fff; margin: 4px 0 10px; }
.feat-text p { color: var(--muted); font-size: 16px; margin: 0; }
.feat-art { position: relative; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.feat-art::before { content: ''; position: absolute; left: 50%; top: 50%; width: 110%; height: 120%; transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--glow, rgba(142,107,255,.22)), transparent 70%); filter: blur(10px); }
.feat-art > * { position: relative; }
.art-coin { --glow: rgba(232,197,106,.3); }
.art-coin .coin { width: 150px; height: 150px; image-rendering: pixelated; filter: drop-shadow(0 20px 40px rgba(232,197,106,.45)); animation: coinspin 6s ease-in-out infinite; }
@keyframes coinspin { 0%, 100% { transform: rotateY(-18deg) translateY(0); } 50% { transform: rotateY(18deg) translateY(-10px); } }
.art-pack { --glow: rgba(184,134,79,.3); gap: 28px; }
.art-pack .pack { width: 130px; height: 130px; image-rendering: pixelated; filter: drop-shadow(0 16px 30px rgba(0,0,0,.65)); animation: packbob 4s ease-in-out infinite; }
.art-pack .slots { grid-template-columns: repeat(6, 32px); gap: 4px; transform: perspective(900px) rotateY(-14deg); transform-origin: left center; }
.art-pack .slots i { width: 32px; height: 32px; }
.art-fan { --glow: rgba(142,107,255,.22); }
.fan { display: flex; align-items: center; justify-content: center; }
.fan > * { width: 230px; flex: none; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.fan > :nth-child(1) { transform: rotate(-7deg) translate(26px, 14px); z-index: 1; }
.fan > :nth-child(2) { transform: translateY(-8px); z-index: 3; box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); }
.fan > :nth-child(3) { transform: rotate(7deg) translate(-26px, 14px); z-index: 2; }
.feat:hover .fan > :nth-child(1) { transform: rotate(-10deg) translate(16px, 10px); }
.feat:hover .fan > :nth-child(3) { transform: rotate(10deg) translate(-16px, 10px); }
.fan.mini { --glow: rgba(240,122,30,.18); }
.fan.mini > * { width: 210px; min-height: 160px; }
.fan.mini .ecard { width: 240px; }
.art-tp { --glow: rgba(232,197,106,.2); }
@media (max-width: 900px) {
  .constellation { width: 100%; height: auto; }
  .constellation .links, .constellation::before { display: none; }
  .constellation .core { position: static; transform: none; display: flex; justify-content: center; margin-bottom: 14px; }
  .constellation .orbit { position: static; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .constellation .hexskill { position: static; margin: 0; transform: none; width: auto; }
  .feat { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; }
  .feat:nth-child(even) .feat-art { order: 0; }
  .feat:nth-child(even) .feat-text { justify-self: start; text-align: left; }
  .feat:nth-child(even) .feat-text .kicker { justify-content: flex-start; }
  .fan > * { width: 180px; } .fan.mini > * { width: 160px; } .fan.mini .ecard { width: 190px; }
}

/* žebříček na telefonu: jméno vždy vidět, level a coiny úsporně */
@media (max-width: 560px) {
  .lb-head { flex-wrap: wrap; gap: 10px; justify-content: center; }
  .lb .lb-row { grid-template-columns: 26px 34px minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 12px; }
  .lb .lb-row .lvl > b { font-size: 18px; }
  .lb .lb-row .coins b { font-size: 14px; }
  .lb-row .n { font-size: 15px; }
  .lb-row .face { width: 34px; height: 34px; }
  .lb-row .who a { font-size: 15px; }
  .lb-row .lvl { min-width: 0; gap: 5px; }
  .lb-row .lvl .lvhex { width: 32px; height: 36px; } .lb-row .lvl .lvhex b { font-size: 14px; }
  .lb-row .lvl > b { font-size: 18px; }
  .lb-row .coins { min-width: 0; gap: 5px; font-size: 14px; }
  .lb-row .coins img { width: 16px; height: 16px; }
}
/* filtry obchodů na telefonu na střed */
@media (max-width: 760px) {
  .filters { justify-content: center; }
  .filters .search { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .lb .lb-row { grid-template-columns: 24px 34px minmax(0, 1fr) auto; row-gap: 2px; }
  .lb .lb-row .n { grid-row: 1 / span 2; }
  .lb .lb-row .face { grid-row: 1 / span 2; width: 34px !important; height: 34px !important; }
  .lb .lb-row .who { grid-row: 1 / span 2; }
  .lb .lb-row .lvl { grid-column: 4; grid-row: 1; justify-content: flex-end; }
  .lb .lb-row .coins { grid-column: 4; grid-row: 2; justify-content: flex-end; }
}