/* ═══════════════════════════════════════════════════════════════════════════
   Krčma u Draka – KYBER EDICE · hlavní stylopis (cyber.css)
   Neonový cyber-fantasy vzhled inspirovaný MMO hrami (Metin2: okna, sloty, tooltipy, hotbar)
   a Shakes & Fidget (tlusté tlačítka, karty výprav, odznaky). Bez externích závislostí.
   ═══════════════════════════════════════════════════════════════════════════ */

@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}

:root{
 /* kanály barev (R,G,B): z nich se skládají všechny neonové záře; motivy (cyber-themes.css) je přepisují */
 --c1:25,241,255;--c2:255,43,214;--c3:255,200,58;--c4:61,255,160;--c5:143,91,255;
 --ink:5,8,20;--ink2:3,5,14;--pA:21,30,64;--pB:7,11,25;--pBoss:48,18,70;
 --cyan:rgb(var(--c1));--magenta:rgb(var(--c2));--gold:rgb(var(--c3));--violet:rgb(var(--c5));--c2l:#ff9bef;--c1l:#bfe9ff;
 --cyan2:#00b8d4;--blue:#3d7bff;--gold2:#ff9f1a;--green:#3dffa0;--red:#ff4d6d;--orange:#ff8a3d;
 --bg0:#03040a;--bg1:#070b18;--bg2:#0b1022;--bg-a:#05060f;--bg-b:#070b18;--bg-c:#04050c;
 --panel:rgba(var(--pB),.86);--panel-solid:#0b1124;--panel-hi:#141d3d;
 --f1:#0a1124;--f2:#070b19;
 --b1:#1d2a54;--b2:#17224a;--b3:#243263;
 --line:#1f2c57;--line-hi:#2f4690;--line-neon:rgba(var(--c1),.5);
 --text:#e9f2ff;--muted:#8da2cf;--dim:#5d7099;
 --r0:#9fb2d8;--r1:#3dffa0;--r2:#3da5ff;--r3:#c35bff;--r4:#ffc83a;
 --r0g:rgba(159,178,216,.35);--r1g:rgba(61,255,160,.45);--r2g:rgba(61,165,255,.5);--r3g:rgba(195,91,255,.55);--r4g:rgba(255,200,58,.6);
 --font-ui:"Bahnschrift","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
 --font-hd:"Bahnschrift SemiBold Condensed","Bahnschrift SemiBold","Bahnschrift","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
 --font-mono:"Cascadia Mono","Consolas","Courier New",monospace;
 --slot:58px;
 --radius:6px 18px 6px 18px;--radius-md:6px 14px 6px 14px;--radius-sm:4px 10px 4px 10px;--bw:1px;
 color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scrollbar-color:#2f4690 var(--f2);scrollbar-width:thin}
body{margin:0;min-height:100vh;color:var(--text);font:14px/1.45 var(--font-ui);
 background:
  radial-gradient(1100px 620px at 8% -8%,rgba(var(--c5),.24),transparent 62%),
  radial-gradient(900px 600px at 98% 6%,rgba(var(--c1),.15),transparent 62%),
  radial-gradient(1000px 700px at 50% 118%,rgba(var(--c2),.14),transparent 62%),
  linear-gradient(180deg,var(--bg-a),var(--bg-b) 55%,var(--bg-c));
 background-attachment:fixed}

/* Text se nedá označit ani přetahovat (hra se ovládá klikáním); pole pro psaní zůstávají použitelná */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:default}
img,svg{-webkit-user-drag:none;user-drag:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;cursor:text}
button,select,summary,[data-ref],[data-go],[data-hb]{cursor:pointer}
::selection{background:transparent}
input::selection,textarea::selection{background:rgba(var(--c1),.35);color:#fff}

/* efekty na pozadí */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;
 background-image:linear-gradient(rgba(var(--c1),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--c1),.05) 1px,transparent 1px);
 background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse at 50% 28%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 28%,#000 25%,transparent 78%)}
.fx::after{content:"";position:fixed;inset:0;pointer-events:none;
 background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 1px,transparent 1px,transparent 3px);opacity:.28;mix-blend-mode:multiply;z-index:1000}
html.noScan .fx::after{display:none}
html.noMotion *,html.noMotion *::before,html.noMotion *::after{animation:none!important;transition:none!important}

.wrap{position:relative;z-index:1;max-width:1520px;margin:0 auto;padding:14px clamp(10px,2vw,28px) 118px}
h1,h2,h3,h4{font-family:var(--font-hd);margin:0;font-weight:700}
p{margin:0 0 8px}
b{font-weight:700}
small{color:var(--muted)}
code{font-family:var(--font-mono);color:var(--cyan)}
.hint{color:var(--muted);font-size:12.5px;line-height:1.5}
.empty{color:var(--muted);padding:14px;text-align:center;border:1px dashed var(--line);border-radius:8px}
[hidden]{display:none!important}

/* ═════════ ovladače ═════════ */
button{font:600 13px var(--font-ui);letter-spacing:.03em;color:var(--cyan);background:rgba(var(--c1),.07);
 border:1px solid rgba(var(--c1),.5);border-radius:var(--radius-sm);padding:8px 14px;
 transition:background .15s,box-shadow .15s,transform .08s,filter .15s,color .15s}
button:hover:not(:disabled){background:rgba(var(--c1),.17);box-shadow:0 0 16px rgba(var(--c1),.38);color:#fff}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
button:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.55)}
button.gold,.questStart,[data-spin-wheel],[data-claim-herbs],[data-buy]:not(:disabled).gold{
 color:#2b1600;background:linear-gradient(180deg,#ffe58a 0%,var(--gold) 55%,#ff9f1a 100%);border:1px solid #fff1b8;
 box-shadow:0 3px 0 #8a5300,0 0 18px rgba(var(--c3),.32),inset 0 1px 0 rgba(255,255,255,.7);text-shadow:0 1px 0 rgba(255,255,255,.4)}
button.gold:hover:not(:disabled),.questStart:hover:not(:disabled),[data-spin-wheel]:hover:not(:disabled){background:linear-gradient(180deg,#fff0a6,#ffd65a 55%,#ffac2e);color:#2b1600;box-shadow:0 3px 0 #8a5300,0 0 26px rgba(var(--c3),.55),inset 0 1px 0 rgba(255,255,255,.8)}
button.gold:active:not(:disabled),.questStart:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #8a5300,0 0 12px rgba(var(--c3),.4),inset 0 1px 0 rgba(255,255,255,.7)}
button.primary{color:#021018;background:linear-gradient(180deg,#7bf6ff,#19b9d8);border-color:#b8fbff;box-shadow:0 3px 0 #08586a,0 0 18px rgba(var(--c1),.3)}
button.primary:hover:not(:disabled){color:#021018;background:linear-gradient(180deg,#a2faff,#2ccbe8)}
button.ghost{background:transparent;border-color:var(--line-hi);color:var(--muted)}
button.ghost:hover:not(:disabled){color:var(--text);border-color:var(--cyan);background:rgba(var(--c1),.08)}
button.danger{color:#fff;background:linear-gradient(180deg,#ff7a9a,#d71f58);border-color:#ffb3c6;box-shadow:0 3px 0 #6e0c2d}
button.danger:hover:not(:disabled){background:linear-gradient(180deg,#ff94ad,#e8306a);color:#fff}
button.iconBtn{padding:7px 11px;font-size:16px;line-height:1}
button.sideBtn{width:100%;margin-top:8px}

input,select,textarea{font:500 13px var(--font-ui);color:var(--text);background:#060a18;border:1px solid var(--line-hi);border-radius:4px 8px 4px 8px;padding:8px 10px;min-width:0}
input:hover,select:hover{border-color:var(--cyan2)}
input:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(var(--c1),.18)}
select{cursor:pointer;color-scheme:dark}
option{background:var(--f2);color:var(--text)}
input[type=checkbox]{accent-color:var(--cyan);width:16px;height:16px;padding:0}
label{color:var(--muted)}
label.switch{display:flex;align-items:center;gap:10px;padding:6px 0;color:var(--text);cursor:pointer}

/* ═════════ HUD (horní lišta) ═════════ */
.hud{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 18px;margin-bottom:10px;
 background:linear-gradient(105deg,rgba(var(--pA),.92),rgba(var(--pB),.9) 55%,rgba(var(--pBoss),.85));
 border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 36px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.hud::before{content:"";position:absolute;left:-1px;top:-1px;width:26px;height:26px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);border-top-left-radius:6px;pointer-events:none}
.hud::after{content:"";position:absolute;right:-1px;bottom:-1px;width:26px;height:26px;border-bottom:2px solid var(--magenta);border-right:2px solid var(--magenta);border-bottom-right-radius:22px;pointer-events:none}
.hudBrand{display:flex;align-items:center;gap:12px}
.logoMark{font-size:34px;filter:drop-shadow(0 0 10px rgba(var(--c2),.7))}
.hudVer{display:block;font:600 10px var(--font-mono);letter-spacing:.22em;color:var(--cyan);opacity:.8}
.hud h1{font-size:clamp(22px,2.6vw,30px);line-height:1.05;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 0 18px rgba(var(--c1),.55)}
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none;opacity:0}
.glitch::before{color:var(--cyan);clip-path:inset(0 0 55% 0);animation:glitchA 6s infinite steps(1)}
.glitch::after{color:var(--magenta);clip-path:inset(55% 0 0 0);animation:glitchB 6s infinite steps(1)}
@keyframes glitchA{0%,90%,100%{opacity:0;transform:none}91%{opacity:.9;transform:translate(-3px,1px)}93%{opacity:.9;transform:translate(2px,-1px)}95%{opacity:0}}
@keyframes glitchB{0%,92%,100%{opacity:0;transform:none}93%{opacity:.9;transform:translate(3px,-1px)}95%{opacity:.9;transform:translate(-2px,1px)}97%{opacity:0}}
.topStats{flex:1 1 420px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;justify-content:center;min-width:0}
.hudHero{display:flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;background:rgba(var(--ink),.65);border:1px solid var(--line);border-radius:999px;min-width:190px}
.hudName{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hudName b{font-size:13px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.hudName small{font-size:10.5px;line-height:1;color:var(--cyan);letter-spacing:.08em;text-transform:uppercase}
@keyframes spinAng{to{--ang:360deg}}
.bar{position:relative;height:7px;border-radius:999px;background:var(--f1);border:1px solid var(--b1);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan2),var(--violet));box-shadow:0 0 10px rgba(var(--c1),.5);transition:width .35s}
.bar.xp>i{background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta))}
.res{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;background:rgba(var(--ink),.7);border:1px solid var(--line);border-radius:999px;font-size:13px;white-space:nowrap;box-shadow:inset 0 0 12px rgba(0,0,0,.45)}
.res b{color:#fff;font-variant-numeric:tabular-nums}
.res .pixelItemIcon{width:20px;height:20px}
.res.gold b{color:var(--gold);text-shadow:0 0 10px rgba(var(--c3),.5)}
.res.dm{border-color:rgba(var(--c2),.45)}.res.dm b{color:#ff8be9;text-shadow:0 0 10px rgba(var(--c2),.55)}
button.res{color:var(--text)}
button.res.rank{border-color:rgba(var(--c3),.5)}
button.res.rank b{color:var(--gold)}
.boostBadges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.boost{padding:5px 11px;border-radius:999px;font:700 12px var(--font-ui);color:#06240f;background:linear-gradient(180deg,#8affc0,#2fd47e);border:1px solid #c9ffe2;box-shadow:0 0 14px rgba(var(--c4),.45);animation:pulse 2.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 22px rgba(var(--c4),.8)}}
.hudBtns{display:flex;gap:8px;align-items:center}
.aiBtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);letter-spacing:.12em;border-color:rgba(var(--c2),.6);color:var(--c2l);background:rgba(var(--c2),.08)}
.aiBtn:hover:not(:disabled){background:rgba(var(--c2),.18)!important;box-shadow:0 0 18px rgba(var(--c2),.5)!important;color:#fff}
.aiDot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.8s infinite}
.onlySmall{display:none}

/* ═════════ navigace ═════════ */
.gameNav{position:sticky;top:0;z-index:60;display:flex;gap:4px;overflow-x:auto;padding:6px;margin-bottom:14px;
 background:rgba(var(--ink2),.9);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--radius-md);scrollbar-width:thin;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.gameNav button{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 12px;white-space:nowrap;
 color:var(--muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);box-shadow:none}
.gameNav button:hover:not(:disabled){color:#fff;background:rgba(var(--c1),.08);border-color:rgba(var(--c1),.3);box-shadow:none}
.gameNav button.selected{color:#fff;background:linear-gradient(180deg,rgba(var(--c1),.2),rgba(var(--c1),.04));border-color:var(--cyan);box-shadow:0 0 18px rgba(var(--c1),.32),inset 0 -2px 0 var(--cyan)}
.navFantasyIcon{width:26px;height:26px;border-radius:6px;object-fit:cover;filter:saturate(1.1) drop-shadow(0 0 4px rgba(var(--c1),.35));flex:none}
.gameNav .navPremium.selected,.gameNav .navPremium:hover{border-color:var(--magenta);box-shadow:0 0 18px rgba(var(--c2),.4),inset 0 -2px 0 var(--magenta)}

/* ═════════ rozvržení ═════════ */
.layout{display:grid;grid-template-columns:236px minmax(0,1fr) 252px;gap:16px;align-items:start}
.side{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 170px);overflow:auto;scrollbar-width:thin}
main{min-width:0}
footer{margin-top:26px;text-align:center;color:var(--dim);font:11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}

.panel{position:relative;margin-bottom:16px;padding:16px;
 background:linear-gradient(180deg,rgba(var(--pA),.74),rgba(var(--pB),.9));border:1px solid var(--line);border-radius:var(--radius);
 box-shadow:0 10px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(6px)}
.panel::before,.panel::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none}
.panel::before{left:-1px;top:-1px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);border-top-left-radius:6px}
.panel::after{right:-1px;bottom:-1px;border-bottom:2px solid var(--magenta);border-right:2px solid var(--magenta);border-bottom-right-radius:18px}
.panel>h2{margin:-16px -16px 16px;padding:11px 18px;display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);
 background:linear-gradient(90deg,rgba(var(--c1),.16),rgba(var(--c1),0) 72%);border-bottom:1px solid var(--line);border-radius:6px 18px 0 0;text-shadow:0 0 14px rgba(var(--c1),.65)}
.panel>h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-neon),transparent)}
.panel h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#bfe9ff;margin:16px 0 8px}
.panel h3:first-child{margin-top:0}
.panel h3 small{letter-spacing:.04em;text-transform:none;font-weight:500}
.panel h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
.side .panel{margin-bottom:0}

/* postava (levý panel) */
.charCard{text-align:center;padding:16px 14px}
.charAvatar{display:flex;justify-content:center;margin:2px 0 10px}
.charName{display:block;font:700 18px var(--font-hd);letter-spacing:.06em;color:#fff;text-shadow:0 0 14px rgba(var(--c1),.5)}
.charTitle{font:600 11px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);margin:2px 0 12px}
.charStats{display:flex;flex-direction:column;gap:6px;text-align:left;margin-bottom:12px}
.charStats>div{display:flex;justify-content:space-between;gap:10px;padding:6px 10px;background:rgba(var(--ink),.6);border:1px solid var(--b2);border-radius:var(--radius-sm);font-size:12.5px}
.charStats b{color:#fff;font-variant-numeric:tabular-nums}
.charStats .powerRow{border-color:rgba(var(--c3),.4);color:var(--gold)}
.charStats .powerRow b{color:var(--gold)}
.heroQuickOpen{width:100%}

/* pravý panel: zdroje */
.uppSide h3{margin-bottom:10px;color:var(--c1l)}
.uppWallet{display:flex;flex-direction:column;gap:6px}
.uppWalletItem{display:flex;align-items:center;gap:10px;padding:6px 10px;background:rgba(var(--ink),.6);border:1px solid var(--b2);border-radius:var(--radius-sm);font-size:12.5px}
.uppWalletItem>span:nth-child(2){flex:1;line-height:1.2}
.uppWalletItem b{color:#fff;font-variant-numeric:tabular-nums}
.uppIcon{display:grid;place-items:center;width:32px;height:32px;flex:none;font-size:20px}
.uppIcon .pixelItemIcon,.pixelItemIcon{width:30px;height:30px;object-fit:contain;image-rendering:auto;vertical-align:middle;filter:drop-shadow(0 0 5px rgba(var(--c1),.35))}
.rareRunesHeading{margin:14px 0 4px!important}
.premiumItem{border-color:rgba(var(--c2),.45)}
.sideExtras h3{margin-top:14px}

/* ═════════ pomocné součásti ═════════ */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:rgba(var(--ink),.7);border:1px solid var(--b3);font-size:12px;color:var(--text);white-space:nowrap}
.chip.ok{border-color:rgba(var(--c4),.55);color:var(--green)}
.chip.off{border-color:rgba(255,77,109,.5);color:#ff9bb0}
.pageTabs,.adventureTabs,.merchantTabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:5px;background:rgba(var(--ink2),.6);border:1px solid var(--line);border-radius:var(--radius-md)}
.pageTabs button,.adventureTabs button,.merchantTabs button,.tabs button{flex:1 1 120px;min-height:38px;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);box-shadow:none}
.pageTabs button:hover:not(:disabled),.adventureTabs button:hover:not(:disabled),.merchantTabs button:hover:not(:disabled),.tabs button:hover:not(:disabled){color:#fff;background:rgba(var(--c1),.08);box-shadow:none}
.pageTabs button.selected,.adventureTabs button.selected,.merchantTabs button.selected,.tabs button.selected{color:#fff;background:linear-gradient(180deg,rgba(var(--c1),.22),rgba(var(--c1),.05));border-color:var(--cyan);box-shadow:0 0 14px rgba(var(--c1),.28),inset 0 -2px 0 var(--cyan)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.meter{height:12px;border-radius:999px;background:var(--f1);border:1px solid var(--b1);overflow:hidden}
.meter>div{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--magenta));box-shadow:0 0 14px rgba(var(--c1),.5);transition:width .4s}
details{border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(var(--ink),.5);padding:0 12px}
details>summary{cursor:pointer;padding:9px 0;color:var(--cyan);font-weight:600;font-size:13px;list-style:none;display:flex;align-items:center;gap:8px}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"▸";color:var(--magenta);transition:transform .15s}
details[open]>summary::before{transform:rotate(90deg)}
details[open]>summary{border-bottom:1px solid var(--line);margin-bottom:8px}
.helpBox ul{margin:0 0 12px;padding-left:18px;line-height:1.6}

/* ═════════ sloty předmětů (MMO) ═════════ */
.rar-0{--rc:var(--r0);--rg:var(--r0g)}.rar-1{--rc:var(--r1);--rg:var(--r1g)}.rar-2{--rc:var(--r2);--rg:var(--r2g)}.rar-3{--rc:var(--r3);--rg:var(--r3g)}.rar-4{--rc:var(--r4);--rg:var(--r4g)}
.slot{--rc:var(--r0);--rg:var(--r0g);position:relative;flex:none;display:grid;place-items:center;width:var(--slot);height:var(--slot);padding:0;
 background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.1),rgba(0,0,0,.6) 78%),var(--f2);border:2px solid var(--rc);border-radius:9px;
 box-shadow:0 0 12px var(--rg),inset 0 0 14px rgba(0,0,0,.75);color:var(--text);transition:transform .12s,box-shadow .15s}
button.slot:hover:not(:disabled){transform:translateY(-2px) scale(1.04);box-shadow:0 0 22px var(--rg),inset 0 0 14px rgba(0,0,0,.6);background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.16),rgba(0,0,0,.55) 78%),#0a1024}
.slot.sel{outline:2px solid var(--cyan);outline-offset:2px;box-shadow:0 0 24px rgba(var(--c1),.65),inset 0 0 14px rgba(0,0,0,.6)}
.slot.big{--slot:84px}.slot.sm{--slot:44px}
.slot.empty{border:2px dashed var(--b3);box-shadow:inset 0 0 14px rgba(0,0,0,.6);background:rgba(var(--pB),.7)}
.slotGhost{font-size:22px;opacity:.28;filter:grayscale(1)}
.slot .slotArt{display:grid;place-items:center;width:100%;height:100%}
.slot .pixelItemIcon{width:calc(var(--slot) - 14px);height:calc(var(--slot) - 14px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.slotEmoji{font-size:calc(var(--slot) * .52)}
.slot i{position:absolute;font:700 10.5px/1 var(--font-ui);font-style:normal;padding:2px 4px;border-radius:4px;background:rgba(var(--ink2),.88)}
.slotUp{right:2px;bottom:2px;color:var(--gold);border:1px solid rgba(var(--c3),.5)}
.slotTier{left:2px;top:2px;color:#fff}
.slotTier.t0{color:#cfd9ee}.slotTier.t1{color:#c9a7ff}.slotTier.t2{color:#ff9b6b}.slotTier.t3{color:#7ff2e6}.slotTier.t4{color:#19f1ff;text-shadow:0 0 6px #ff2bd6}.slotTier.t5{color:#ffe08a;text-shadow:0 0 8px #8f5bff}
.slotPrice{left:50%;bottom:-9px;transform:translateX(-50%);color:var(--gold);border:1px solid rgba(var(--c3),.5);white-space:nowrap}
.slot.legend::before{content:"";position:absolute;inset:-3px;border-radius:11px;padding:2px;pointer-events:none;
 background:conic-gradient(from var(--ang),var(--gold),var(--magenta),var(--cyan),var(--gold));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinAng 3.5s linear infinite}
.slotGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--slot),1fr));gap:10px;justify-items:center;padding:12px;background:rgba(var(--ink2),.55);border:1px solid var(--b2);border-radius:var(--radius-md)}
.slotRow{display:flex;flex-wrap:wrap;gap:10px}
.delta{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:#101830}
.delta.up{color:var(--green);background:rgba(var(--c4),.12)}.delta.down{color:#ff8aa0;background:rgba(255,77,109,.14)}.delta.same{color:var(--muted)}
.gearCompare{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0}
.bonusChip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;background:rgba(var(--c4),.1);color:#9bffd0;border:1px solid rgba(var(--c4),.3)}
.bonusChip.tier2{background:rgba(61,165,255,.12);color:#9fd0ff;border-color:rgba(61,165,255,.4)}
.bonusChip.tier3{background:rgba(var(--c3),.12);color:#ffe08a;border-color:rgba(var(--c3),.55);box-shadow:0 0 10px rgba(var(--c3),.25)}
.tipNone{color:var(--dim);font-size:12px}

/* tooltip (Metin2) */
.tooltip{position:fixed;z-index:3000;max-width:330px;min-width:200px;padding:11px 13px;pointer-events:none;
 background:linear-gradient(180deg,rgba(14,20,44,.97),rgba(var(--ink),.98));border:1px solid var(--line-neon);border-radius:var(--radius-sm);
 box-shadow:0 14px 44px rgba(0,0,0,.75),0 0 22px rgba(var(--c1),.18);font-size:12.5px;line-height:1.45}
.tipPlain{color:var(--text)}
.tipItem{border-left:3px solid var(--rc);padding-left:10px}
.tipTitle{font:700 15px var(--font-hd);letter-spacing:.04em;color:var(--rc);text-shadow:0 0 10px var(--rg)}
.tipTitle b{color:var(--gold)}
.tipSub{color:var(--muted);font-size:11.5px;margin:1px 0 6px}
.tipTag{display:inline-block;margin-bottom:5px;padding:1px 8px;border-radius:999px;background:rgba(var(--c1),.14);color:var(--cyan);font-size:11px}
.tipStats{display:grid;gap:2px}
.tipStats b{color:var(--green)}
.tipSet{margin-top:5px;color:#9bd9ff;font-size:12px}
.tipBonuses{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tipCmp{margin-top:6px;padding-top:6px;border-top:1px solid var(--b2)}
.tipFoot{margin-top:6px;padding-top:6px;border-top:1px solid var(--b2);color:var(--muted);font-size:11.5px}

/* toasty */
.toasts{position:fixed;right:16px;bottom:92px;z-index:2500;display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{padding:10px 14px;border-radius:var(--radius-sm);background:rgba(var(--pB),.96);border:1px solid var(--line-neon);color:var(--text);font-size:13px;box-shadow:0 8px 28px rgba(0,0,0,.7),0 0 18px rgba(var(--c1),.2);animation:toastIn .25s ease;transition:opacity .3s,transform .3s}
.toast.good{border-color:rgba(var(--c4),.7);box-shadow:0 8px 28px rgba(0,0,0,.7),0 0 18px rgba(var(--c4),.3)}
.toast.bad{border-color:rgba(255,77,109,.75);box-shadow:0 8px 28px rgba(0,0,0,.7),0 0 18px rgba(255,77,109,.3)}
.toast.level{border-color:rgba(var(--c3),.8);color:#fff2c4;box-shadow:0 8px 28px rgba(0,0,0,.7),0 0 22px rgba(var(--c3),.4)}
.toast.out{opacity:0;transform:translateY(8px)}
@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* hotbar (Metin2) */
.hotbar{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:2000;display:flex;gap:6px;padding:7px;
 background:linear-gradient(180deg,rgba(14,20,46,.96),rgba(var(--ink2),.97));border:1px solid var(--line-neon);border-radius:var(--radius-md);box-shadow:0 10px 36px rgba(0,0,0,.75),0 0 24px rgba(var(--c1),.16)}
.hbSlot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:62px;height:56px;padding:2px;color:var(--text);
 background:radial-gradient(circle at 50% 25%,rgba(255,255,255,.1),rgba(0,0,0,.5) 80%),var(--f2);border:1px solid var(--b3);border-radius:6px 10px 6px 10px;box-shadow:inset 0 0 12px rgba(0,0,0,.7)}
.hbSlot:hover:not(:disabled){border-color:var(--cyan);box-shadow:0 0 16px rgba(var(--c1),.4),inset 0 0 12px rgba(0,0,0,.5)}
.hbIcon{font-size:21px;line-height:1}
.hbLabel{font:600 9.5px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hbKey{position:absolute;left:4px;top:2px;font:700 9px var(--font-mono);color:var(--dim)}
.hbBadge{position:absolute;right:-4px;top:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;font:800 11px/19px var(--font-ui);font-style:normal;text-align:center;color:#2b1600;background:linear-gradient(#ffe27a,#ffa81f);border:1px solid #fff1b8;box-shadow:0 0 12px rgba(var(--c3),.7);animation:pulse 1.8s infinite}
.hbSlot.hasBadge{border-color:rgba(var(--c3),.6)}

/* ═════════ dialogy ═════════ */
dialog{color:var(--text);background:linear-gradient(180deg,rgba(var(--pA),.98),rgba(var(--pB),.99));border:1px solid var(--line-neon);border-radius:var(--radius);padding:18px;box-shadow:0 24px 80px rgba(0,0,0,.85),0 0 40px rgba(var(--c1),.18);max-width:min(720px,94vw);max-height:92vh;overflow:auto}
dialog::backdrop{background:rgba(1,2,8,.8);backdrop-filter:blur(5px)}
.dialogHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dialogHead h2{font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 14px rgba(var(--c1),.6)}
dialog h3{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#bfe9ff;margin:14px 0 6px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
#settingsFields{display:grid;gap:8px}
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 10px;background:rgba(var(--ink),.6);border:1px solid var(--b2);border-radius:var(--radius-sm)}
.field input{width:110px}

/* ═════════ responzivita ═════════ */
@media(max-width:1240px){
 .layout{grid-template-columns:220px minmax(0,1fr)}
 .sideRight{display:none}
 .onlySmall{display:inline-flex}
}
@media(max-width:900px){
 .layout{grid-template-columns:1fr}
 .sideLeft{display:none}
 .hud{padding:9px 12px;gap:10px}
 .topStats{flex-basis:100%;order:3;justify-content:flex-start}
 .hudBtns{margin-left:auto}
 .hudVer{display:none}
 .res{padding:5px 10px;font-size:12px}
 .gameNav button{padding:6px 9px}
 .hbSlot{width:46px;height:50px}.hbLabel{display:none}.hbIcon{font-size:20px}
 .hotbar{gap:4px;padding:5px;bottom:6px}
 .toasts{right:8px;left:8px;bottom:80px;max-width:none}
 .wrap{padding-bottom:96px}
 .panel{padding:13px}.panel>h2{margin:-13px -13px 14px;padding:10px 14px;font-size:14px}
}
@media(max-width:560px){
 .gameNav button{flex-direction:column;gap:2px;padding:5px 8px;font-size:11px}
 .navFantasyIcon{width:28px;height:28px}
 .hudHero{min-width:0;flex:1 1 100%}
 .hbSlot{width:40px;height:46px}
 .hbKey{display:none}
}

/* ───────── mobil: úspornější horní lišta ───────── */
@media(max-width:600px){
 .hud{padding:8px 10px;gap:6px 8px;flex-wrap:wrap}
 .hudBrand{flex:1 1 auto;min-width:0;gap:8px}
 .logoMark{font-size:26px}
 .hud h1{font-size:17px;letter-spacing:.04em;white-space:nowrap}
 .hudBtns{margin-left:auto;gap:6px}
 .hudBtns button{padding:6px 9px;font-size:12px}
 .aiBtn{letter-spacing:.06em}
 .topStats{gap:5px}
 .hudHero{flex:1 1 100%;padding:3px 10px 3px 3px;gap:8px}
 .res{padding:4px 9px;font-size:11.5px;gap:5px}
 .res .pixelItemIcon{width:16px;height:16px}
 .gameNav{margin-bottom:10px}
}

/* digitální déšť na pozadí */
.fxRain{position:absolute;inset:0;width:100%;height:100%;opacity:.2}
html.noMotion .fxRain{display:none}

/* V98: zkusenosti primo v levem panelu postavy */
.quickXp{margin:-2px 0 12px}
.quickXpTrack{height:24px;position:relative;border:1px solid rgba(var(--c1),.45);border-radius:7px;background:rgba(var(--ink),.8);overflow:hidden}
.quickXpFill{height:100%;width:0;background:linear-gradient(90deg,#1879b8,#27bde5);transition:width .35s ease}
.quickXpText{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font:700 11px var(--font-mono);text-shadow:0 1px 3px #000,0 0 5px #000;white-space:nowrap;pointer-events:none}

.resourceSideDetails>summary{cursor:pointer;list-style:none;padding:12px 9px;font-weight:800;color:var(--c1l);border-radius:9px;background:linear-gradient(180deg,rgba(var(--c1),.14),rgba(var(--ink),.72));border:1px solid rgba(var(--c1),.45)}
.resourceSideDetails>summary::-webkit-details-marker{display:none}
.resourceSideDetails>summary::before{content:'▸ ';color:rgb(var(--c1))}
.resourceSideDetails[open]>summary::before{content:'▾ '}
.resourceSideDetails .resourceSideHint{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:3px}
.resourceSideDetails[open] #uppWallet{margin-top:12px}

.resourcesPanelTitle{margin:0 0 10px;font-size:14px;color:var(--c1l)}
.uppSide .resourceSideDetails{margin-bottom:9px}
.uppSide .sideExtras{margin-top:13px}
.uppSide .sideExtras>h3{margin-bottom:9px}

/* V164: compact boost controls in header */
.topBoostControls{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.topBoostButton{font-size:11px;padding:5px 7px;white-space:nowrap;border:1px solid #2b8ba0;border-radius:7px;background:#101d2c;color:#9ee8f2;cursor:pointer}.topBoostButton:hover{border-color:#e7bc5b}
/* v0.86: přípravky jako zelené štítky boostů */
.boost.potionBoost{cursor:pointer;font:700 12px var(--font-ui)}
.boost.potionBoost:hover{filter:brightness(1.08)}
/* v0.89: zelené štítky boostů jsou klikací a na jeden řádek */
.boostBadges .boost{white-space:nowrap;cursor:pointer;font:700 12px var(--font-ui)}
.boostBadges button.boost{border-style:solid}
.boostBadges .boost:hover{filter:brightness(1.08)}