@font-face{font-family:'Druk Wide';src:url(/assets/fonts/DrukWide-Bold-Web.woff2) format('woff2');font-weight:700;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#C5A059;--goldL:#F4E4BD;--goldD:#8A6C34;--cyan:#00E5FF;--grn:#7EE6A0;--ink:#EDE7DA;--glass:rgba(10,10,15,.76)}
body{background:#050507;color:var(--ink);font:14.5px/1.55 Inter,-apple-system,'Segoe UI',sans-serif;
 min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* --- 1 parallax pozadi + 3 pomaly dech --- */
.room{position:fixed;inset:-3%;background:url(/assets/img/room.jpg) center/cover no-repeat;z-index:0;
 will-change:transform;animation:breathe 26s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.room::after{content:"";position:absolute;inset:0;
 background:radial-gradient(130% 96% at 50% 36%,transparent 12%,rgba(5,5,7,.6) 56%,rgba(5,5,7,.96) 100%)}
.wrap{position:relative;z-index:2;max-width:1580px;margin:0 auto;padding:26px clamp(13px,2.8vw,38px) 70px}
h1,h3,.k{font-family:'Druk Wide',Impact,sans-serif;text-transform:uppercase;font-style:normal}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:46px;filter:drop-shadow(0 0 14px rgba(197,160,89,.6))}
.brand .s{font-family:'Druk Wide',sans-serif;font-size:10px;letter-spacing:.32em;color:var(--gold)}
.brand h1{font-size:clamp(16px,2vw,25px);color:#fff;margin-top:4px;line-height:1}
.pill{display:flex;gap:8px;flex-wrap:wrap}
.pill a{display:inline-flex;align-items:center;gap:6px;padding:10px 17px;border-radius:24px;text-decoration:none;
 border:1px solid rgba(197,160,89,.42);background:var(--glass);color:var(--goldL);font-size:12.5px;
 font-family:'Druk Wide',sans-serif;letter-spacing:.1em;backdrop-filter:blur(8px);transition:.25s}
.pill a:hover{background:var(--gold);color:#0A0A0F;transform:translateY(-2px)}
.pill a.hot{background:var(--gold);color:#0A0A0F;font-weight:700}
.pill a.hot:hover{background:var(--goldL)}
.grid{display:grid;grid-template-columns:282px 1fr 292px;gap:clamp(13px,1.7vw,24px);margin-top:22px;align-items:start}
@media(max-width:1240px){.grid{grid-template-columns:1fr}}
.box{border:1px solid rgba(197,160,89,.3);background:var(--glass);backdrop-filter:blur(10px);
 border-radius:4px;padding:15px 17px;margin-bottom:13px}
.box.ghost{border-style:dashed;opacity:.92}
.box h3{font-size:10.5px;letter-spacing:.2em;color:var(--gold);padding-bottom:9px;margin-bottom:10px;
 border-bottom:1px solid rgba(197,160,89,.25);display:flex;justify-content:space-between;align-items:center;gap:8px}
.wip{font-size:9px;letter-spacing:.14em;color:#c9a06a}
.r{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px}
.r span{color:#918c80}.r b{color:var(--goldL);font-weight:600}
.cta{font-size:12.4px;color:#a5a096;line-height:1.5;margin-top:10px;padding-top:10px;
 border-top:1px solid rgba(197,160,89,.16)}
.cta a{color:var(--goldL)}
.live{font-size:9.5px;letter-spacing:.14em;color:var(--grn);display:inline-flex;align-items:center;gap:5px}
.live i,.lv i{width:6px;height:6px;border-radius:50%;background:var(--grn);box-shadow:0 0 8px var(--grn);
 display:inline-block;animation:p 2s infinite}
@keyframes p{0%,100%{opacity:1}50%{opacity:.35}}
/* --- 2 naklaneni karty --- */
.tilt{transition:transform .2s ease-out;transform-style:preserve-3d}
/* --- 11 odhaleni pri scrollu --- */
.rev{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);
 transition-delay:var(--d,0ms)}
.rev.in{opacity:1;transform:none}
/* brany */
.gates{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:clamp(12px,1.5vw,20px)}
.gate{display:block;text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.gate:hover{transform:translateY(-8px)}
.arch{position:relative;aspect-ratio:360/460;border-radius:128px 128px 7px 7px;padding:8px;
 background:linear-gradient(180deg,#3a2d14,#1c1509 58%,#241b0c);
 box-shadow:0 16px 42px rgba(0,0,0,.7),0 0 32px rgba(197,160,89,.13),inset 0 0 22px rgba(0,0,0,.85);transition:.35s}
.gate:hover .arch{box-shadow:0 24px 58px rgba(0,0,0,.8),0 0 66px rgba(197,160,89,.5),inset 0 0 22px rgba(0,0,0,.85)}
.arch::before{content:"";position:absolute;inset:5px;border-radius:124px 124px 5px 5px;
 border:2px solid var(--gold);opacity:.85;z-index:3;pointer-events:none}
.view{position:absolute;inset:8px;border-radius:121px 121px 4px 4px;overflow:hidden;box-shadow:inset 0 0 46px rgba(0,0,0,.85)}
.view img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gate:hover .view img{transform:scale(1.07)}
/* --- 6 odlesk po skle --- */
.shim{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(115deg,transparent 32%,rgba(255,243,200,.16) 46%,transparent 60%);
 background-size:250% 100%;background-position:120% 0;transition:background-position 1.1s}
.gate:hover .shim{background-position:-40% 0}
/* --- 8 kuzel svetla --- */
.beam{position:absolute;left:50%;transform:translateX(-50%);top:60%;width:76%;height:140px;
 background:linear-gradient(180deg,rgba(255,243,200,.22),transparent 78%);
 clip-path:polygon(34% 0,66% 0,100% 100%,0 100%);filter:blur(7px);opacity:0;transition:opacity .4s;pointer-events:none}
.gate:hover .beam{opacity:1}
.ent{position:absolute;left:50%;bottom:13%;transform:translateX(-50%) translateY(8px);padding:8px 18px;
 border:1px solid var(--gold);border-radius:22px;background:rgba(10,10,15,.82);font-family:'Druk Wide',sans-serif;
 font-size:9.5px;letter-spacing:.2em;color:var(--goldL);opacity:0;transition:.35s;z-index:4;white-space:nowrap}
.gate:hover .ent{opacity:1;transform:translateX(-50%)}
.lb{text-align:center;margin-top:12px}
.lb .n{font-family:'Druk Wide',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.05em;
 background:linear-gradient(180deg,var(--goldL),var(--gold) 48%,var(--goldD));-webkit-background-clip:text;
 background-clip:text;-webkit-text-fill-color:transparent}
.lb .sb{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8d8878;margin-top:3px}
.lv{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:4px 11px;border-radius:18px;
 border:1px solid rgba(0,229,255,.3);background:rgba(0,229,255,.06);font-size:10.5px;color:#bfe9f3}
.soon .arch{filter:grayscale(.6) brightness(.68)}
.soon .lb .n{background:linear-gradient(180deg,#9a958a,#6a665e);-webkit-background-clip:text;background-clip:text}
.tag{position:absolute;top:11px;left:50%;transform:translateX(-50%);z-index:5;padding:4px 11px;border-radius:18px;
 background:rgba(10,10,15,.88);border:1px solid rgba(197,160,89,.5);font-family:'Druk Wide',sans-serif;
 font-size:9px;letter-spacing:.16em;color:var(--gold);white-space:nowrap}
/* chat */
.chat{height:212px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding-right:4px}
.chat::-webkit-scrollbar{width:5px}.chat::-webkit-scrollbar-thumb{background:rgba(197,160,89,.3);border-radius:5px}
.chat.blur{filter:blur(3.4px);opacity:.55;pointer-events:none;user-select:none}
.cm{font-size:12.7px;line-height:1.45}
.cm b{color:var(--goldL);font-weight:600}.cm span{color:#b8b3a8}
.cm i{color:#6f6a60;font-style:normal;font-size:10px;margin-left:5px}
.cin{display:flex;gap:7px;margin-top:10px}
.cin input{flex:1;min-width:0;background:rgba(0,0,0,.45);border:1px solid rgba(197,160,89,.3);border-radius:4px;
 padding:9px 11px;color:var(--ink);font:13px Inter,sans-serif;outline:none}
.cin input:focus{border-color:var(--gold)}
.cin button{background:var(--gold);color:#0A0A0F;border:0;border-radius:4px;padding:9px 15px;cursor:pointer;
 font:700 11px 'Druk Wide',sans-serif}
/* seznamy */
.who{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid rgba(197,160,89,.1);font-size:12.8px}
.who:last-child{border:0}
.av{width:25px;height:25px;border-radius:50%;background:linear-gradient(140deg,#C5A059,#6b5326);flex:none;
 display:flex;align-items:center;justify-content:center;font:700 10px Inter,sans-serif;color:#0A0A0F}
.who .st{margin-left:auto;font-size:10px;letter-spacing:.06em;padding:2px 8px;border-radius:12px}
.st.game{background:rgba(126,230,160,.13);color:var(--grn);border:1px solid rgba(126,230,160,.3)}
.st.here{background:rgba(0,229,255,.09);color:#8fdcea;border:1px solid rgba(0,229,255,.26)}
/* --- 17 kostra misto prazdna --- */
.skel div{height:26px;border-radius:4px;margin-bottom:8px;
 background:linear-gradient(90deg,rgba(197,160,89,.07) 25%,rgba(197,160,89,.17) 37%,rgba(197,160,89,.07) 63%);
 background-size:400% 100%;animation:sk 1.5s ease infinite}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
/* pas */
.band{margin-top:24px;padding:18px 22px;border:1px solid rgba(197,160,89,.42);border-radius:5px;text-align:center;
 background:linear-gradient(100deg,rgba(197,160,89,.14),rgba(10,10,15,.7) 55%,rgba(197,160,89,.1))}
.band .t2{font-family:'Druk Wide',Impact,sans-serif;font-size:clamp(13px,2vw,23px);text-transform:uppercase;
 background:linear-gradient(180deg,var(--goldL),var(--gold) 52%,var(--goldD));-webkit-background-clip:text;
 background-clip:text;-webkit-text-fill-color:transparent;line-height:1.18}
.band .s2{margin-top:6px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#8d8878}
/* --- 14 vlnka z kliknuti --- */
.rip{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,243,200,.5);
 animation:rip .6s ease-out;pointer-events:none}
@keyframes rip{to{transform:scale(3.4);opacity:0}}
.mag{position:relative;overflow:hidden;transition:transform .18s ease-out}
/* --- 7 zlaty prach u kurzoru --- */
.dust{position:fixed;width:4px;height:4px;border-radius:50%;background:rgba(244,228,189,.85);
 pointer-events:none;z-index:9;animation:du .9s ease-out forwards}
@keyframes du{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.pet{position:fixed;top:-22px;color:#FF9FB5;pointer-events:none;z-index:1;opacity:.4;animation:f linear infinite}
@keyframes f{to{transform:translateY(112vh) rotate(320deg);opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rev{opacity:1;transform:none}}