/* Nibiru 2026 - all UI styles (was: two inline <style> blocks in index.html) */

html,body{margin:0;height:100%;overflow:hidden;background:#cfe6f2;font-family:system-ui,sans-serif}
#cv{width:100%;height:100%;display:block;touch-action:none}
#panel{position:fixed;top:10px;left:10px;background:rgba(10,24,40,.85);color:#ECE6D7;padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.5}
#tag{position:fixed;bottom:12px;left:12px;display:none;background:rgba(10,24,40,.9);color:#fff;padding:6px 12px;border-radius:8px;font-size:14px;font-weight:600}


#card{display:none;position:fixed;z-index:9;background:rgba(12,16,28,.92);color:#f2f0ea;font-family:system-ui;backdrop-filter:blur(6px);box-shadow:0 8px 32px rgba(0,0,0,.4)}
#card b{font-size:17px;display:block;margin-bottom:6px}
#card .cardHead{display:flex;align-items:center;gap:12px;padding-right:26px}
#card .cardLogo{flex:0 0 48px;width:48px;height:48px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
#card .cardLogo img{width:100%;height:100%;object-fit:contain;display:block}
#card .cardLogo span{font-size:19px;font-weight:700;color:#8e8a82;line-height:1}
#card .cardTitle{flex:1;min-width:0}
#card p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:#d8d5cc}
#card .chip{display:inline-block;background:#ec4aa4;color:#fff;font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.4px}
#cardX{position:absolute;top:10px;right:12px;cursor:pointer;font-size:15px;color:#9a9790}
/* v258: si pe desktop cardul are plafon de inaltime si deruleaza. Inainte avea max-height doar pe
   telefon si in peisaj scund, iar un card cu descriere lunga + butoane iesea pur si simplu prin
   marginea de jos a ecranului, fara sa poti ajunge la butoane. */
@media (min-width:700px){ #card{width:330px;padding:16px 18px;border-radius:14px;
  max-height:calc(100vh - 24px);overflow-y:auto} }
@media (max-width:699px){ #card{left:0;right:0;bottom:0;padding:18px 20px 28px;border-radius:18px 18px 0 0} }
#search{position:fixed;top:10px;right:10px;z-index:11;width:262px;font-family:system-ui}
#searchIn{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid rgba(255,255,255,.16);border-radius:10px;
  background:rgba(12,16,28,.92);color:#f2f0ea;font-size:13.5px;font-family:inherit;outline:none;
  backdrop-filter:blur(6px);box-shadow:0 6px 22px rgba(0,0,0,.32)}
#searchIn:focus{border-color:rgba(236,74,164,.65)}
#searchIn::placeholder{color:#8e8a82}
#searchIn::-webkit-search-cancel-button{filter:invert(.7)}
#searchRes{display:none;margin-top:6px;max-height:min(58vh,430px);overflow-y:auto;border-radius:10px;
  background:rgba(12,16,28,.95);backdrop-filter:blur(6px);box-shadow:0 8px 32px rgba(0,0,0,.4)}
#searchRes .row{padding:8px 12px;cursor:pointer;color:#f2f0ea;font-size:13px;line-height:1.35;
  border-bottom:1px solid rgba(255,255,255,.06)}
#searchRes .row:last-child{border-bottom:none}
#searchRes .row.on,#searchRes .row:hover{background:rgba(236,74,164,.22)}
#searchRes .row small{display:block;margin-top:2px;color:#9a9790;font-size:11px;text-transform:uppercase;letter-spacing:.4px}
#searchRes .none{padding:10px 12px;color:#9a9790;font-size:12.5px}
@media (max-width:699px){ #search{left:10px;right:10px;width:auto} }
#routeBar{position:fixed;top:10px;left:10px;z-index:12;width:286px;box-sizing:border-box;font-family:system-ui}
#routeBtn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid rgba(255,255,255,.14);
  border-radius:12px;background:rgba(12,16,28,.9);color:#f2f0ea;font-size:13px;font-weight:600;font-family:inherit;
  cursor:pointer;backdrop-filter:blur(10px);box-shadow:0 8px 26px rgba(0,0,0,.38);transition:.16s}
#routeBtn span{font-size:14px;line-height:1}
#routeBtn:hover{border-color:rgba(196,93,255,.6);transform:translateY(-1px)}
#routeBtn.on{background:linear-gradient(135deg,#7d2fd0,#c45dff);border-color:transparent;box-shadow:0 8px 26px rgba(154,61,240,.45)}
#routePanel{display:none;margin-top:8px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(12,16,28,.94);backdrop-filter:blur(12px);box-shadow:0 18px 48px rgba(0,0,0,.5)}
#routePanel .rHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
#routePanel .rHead b{color:#f2f0ea;font-size:13.5px;letter-spacing:.2px}
#routeClose{border:none;background:transparent;color:#9a9790;font-size:14px;cursor:pointer;padding:2px 4px;line-height:1}
#routeClose:hover{color:#f2f0ea}
#routePanel .rField{position:relative;display:flex;align-items:center;gap:9px;padding:0 11px;
  border:1px solid rgba(255,255,255,.13);border-radius:11px;background:rgba(255,255,255,.05);transition:.16s}
#routePanel .rField:focus-within{border-color:rgba(196,93,255,.75);background:rgba(196,93,255,.09)}
#routePanel .rDot{flex:0 0 9px;width:9px;height:9px;border-radius:50%}
#routePanel .rDot.a{background:#5fe3a1;box-shadow:0 0 0 3px rgba(95,227,161,.16)}
#routePanel .rDot.b{background:#c45dff;box-shadow:0 0 0 3px rgba(196,93,255,.18)}
#routePanel input{flex:1;min-width:0;padding:10px 0;border:none;background:transparent;color:#f2f0ea;
  font-size:13px;font-family:inherit;outline:none}
#routePanel input::placeholder{color:#8a877f}
#rSwap{display:block;margin:5px auto;padding:2px 9px;border:1px solid rgba(255,255,255,.12);border-radius:8px;
  background:rgba(255,255,255,.05);color:#b8b4ab;font-size:12px;cursor:pointer;line-height:1.5}
#rSwap:hover{color:#f2f0ea;border-color:rgba(196,93,255,.5)}
#routePanel .rSug{display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:3;
  max-height:210px;overflow-y:auto;border-radius:11px;background:rgba(18,22,36,.98);
  box-shadow:0 12px 34px rgba(0,0,0,.55)}
#routePanel .rs{padding:8px 12px;color:#f2f0ea;font-size:12.5px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05)}
#routePanel .rs:last-child{border-bottom:none}
#routePanel .rs.on,#routePanel .rs:hover{background:rgba(196,93,255,.22)}
#routePanel .rs small{display:block;margin-top:2px;color:#9a9790;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
#routePanel .rBtns{display:flex;gap:8px;margin-top:11px}
#routePanel .rBtns button{flex:1;padding:9px 8px;border-radius:10px;font-size:12.5px;font-family:inherit;
  font-weight:600;cursor:pointer;transition:.16s;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#f2f0ea}
#routePanel .rBtns button:hover{border-color:rgba(196,93,255,.55)}
#rPick.on{background:rgba(196,93,255,.9);border-color:transparent}
#rGo{border-color:transparent!important;background:rgba(255,255,255,.10)!important;color:#8a877f!important;cursor:default!important}
#rGo.ready{background:linear-gradient(135deg,#7d2fd0,#c45dff)!important;color:#fff!important;cursor:pointer!important;
  box-shadow:0 6px 18px rgba(154,61,240,.4)}
/* v198: feedback mai clar la click pe butoanele de ruta - se coloreaza cand sunt active, se decoloreaza cand se anuleaza */
#routeBtn:active,#rPick:active,#rSwap:active,#routeClose:active{transform:translateY(1px) scale(.97)}
#rGo.on{background:linear-gradient(135deg,#9a3cf0,#d387ff)!important;color:#fff!important;cursor:pointer!important;
  box-shadow:0 0 0 2px rgba(211,135,255,.55),0 8px 24px rgba(154,61,240,.6)!important}
#rGo.pulse{animation:rGoPulse .45s ease}
@keyframes rGoPulse{0%{transform:scale(1)}35%{transform:scale(1.06)}100%{transform:scale(1)}}
#rPick.on{background:rgba(196,93,255,.92);border-color:transparent;
  box-shadow:0 0 0 2px rgba(211,135,255,.45),0 6px 16px rgba(154,61,240,.42)}
#routeInfo{margin-top:10px;color:#d8d5cc;font-size:12px;line-height:1.4;min-height:0}
#routeInfo:empty{display:none}
#routeInfo b{color:#f2f0ea;font-size:14px}
#routeInfo.hint{color:#c45dff}
#routeInfo.warn{color:#ffb37a}
#routeInfo.ok{color:#d8d5cc}
@media (max-width:699px){ #routeBar{left:10px;right:10px;width:auto} #routePanel{max-height:70vh;overflow-y:auto} }
#tip{display:none;position:fixed;z-index:10;pointer-events:none;background:rgba(12,16,28,.92);color:#fff;
  font-family:system-ui;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:8px;white-space:nowrap}
/* v212: bara de filtre pe categorii (dreapta) */
#catBar{position:fixed;top:102px;right:10px;z-index:9;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:system-ui}
.catBtn{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:none;border-radius:13px;cursor:pointer;
  background:rgba(12,16,28,.6);backdrop-filter:blur(8px);box-shadow:0 3px 12px rgba(0,0,0,.28);transition:transform .12s,background .16s,box-shadow .16s}
.catBtn .catIco{width:26px;height:26px;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.5;transition:opacity .16s,filter .16s;filter:grayscale(.55)}
.catBtn .catLbl{position:absolute;right:50px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;
  background:rgba(12,16,28,.94);color:#f2f0ea;font-size:12px;font-weight:600;padding:4px 10px;border-radius:9px;opacity:0;pointer-events:none;
  transition:opacity .14s,transform .14s;box-shadow:0 4px 16px rgba(0,0,0,.34)}
.catBtn:hover{background:rgba(22,28,46,.82);transform:translateY(-1px)}
.catBtn:hover .catIco{opacity:1;filter:none}
.catBtn:hover .catLbl{opacity:1;transform:translateY(-50%) translateX(0)}
.catBtn.on{background:var(--cc);box-shadow:0 0 0 2px rgba(255,255,255,.32),0 4px 18px rgba(0,0,0,.4)}
.catBtn.on .catIco{opacity:1;filter:none}
@media (max-width:820px) and (min-width:700px){ #catBar{top:96px} .catBtn{width:38px;height:38px} .catBtn .catIco{width:23px;height:23px} }
@media (max-width:699px){ #catBar{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;top:auto;bottom:66px;right:8px;left:8px;gap:5px} .catBtn{width:38px;height:38px} .catBtn .catLbl{display:none} }
#viewMode{position:fixed;top:56px;right:10px;z-index:9;display:flex;align-items:flex-start;gap:6px;font-family:system-ui}
#vmSeg{display:flex;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;
  background:rgba(12,16,28,.9);backdrop-filter:blur(10px);box-shadow:0 8px 26px rgba(0,0,0,.38)}
#vmSeg button{padding:8px 12px;border:none;background:transparent;color:#b8b4ab;font-size:12.5px;font-weight:600;
  font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.16s;white-space:nowrap}
#vmSeg button span{font-size:14px;line-height:1}
#vmSeg button:hover{color:#f2f0ea}
#vmSeg button.on{background:linear-gradient(135deg,#7d2fd0,#c45dff);color:#fff}
#vmHelp{width:34px;height:34px;flex:0 0 auto;border:1px solid rgba(255,255,255,.14);border-radius:10px;
  background:rgba(12,16,28,.9);backdrop-filter:blur(10px);color:#f2f0ea;font-size:15px;font-weight:700;
  cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.38);transition:.16s;line-height:1}
#vmHelp:hover{border-color:rgba(196,93,255,.6)}
#vmHelp.on{background:linear-gradient(135deg,#7d2fd0,#c45dff);border-color:transparent}
#vmHelpBox{display:none;position:absolute;top:44px;right:0;width:290px;box-sizing:border-box;padding:14px 16px;
  border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(12,16,28,.96);backdrop-filter:blur(12px);
  box-shadow:0 18px 48px rgba(0,0,0,.5);color:#d8d5cc;font-size:12.5px;line-height:1.5}
#vmHelpBox b{color:#f2f0ea}
#vmHelpBox p{margin:8px 0 0}
#vmHelpBox ul{margin:7px 0 0;padding-left:18px}
#vmHelpBox li{margin:4px 0}
body.vmLocalOn #cv{cursor:crosshair}
body.vmLockOn #cv{cursor:none}
#totPanel{position:fixed;left:10px;bottom:10px;z-index:20;width:290px;box-sizing:border-box;background:rgba(12,16,28,.95);
  color:#e8e5dd;font-family:system-ui;font-size:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 34px rgba(0,0,0,.5);backdrop-filter:blur(8px)}
#totPanel b{font-size:13px;color:#fff}
#totPanel .th{margin:6px 0 8px;color:#b8b4ab;line-height:1.4}
#totPanel textarea{width:100%;box-sizing:border-box;background:rgba(0,0,0,.35);color:#eafcff;border:1px solid rgba(255,255,255,.12);
  border-radius:8px;font-family:ui-monospace,Consolas,monospace;font-size:11px;padding:6px;resize:vertical}
#totPanel .tb{display:flex;gap:8px;margin-top:8px}
#totPanel .tb button{flex:1;padding:7px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:#f2f0ea;font-size:12px;font-family:inherit;cursor:pointer;transition:.16s}
#totPanel .tb button:hover{border-color:rgba(196,93,255,.6)}
#vmHint{display:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:11;
  background:rgba(12,16,28,.9);color:#e8e5dd;font-family:system-ui;font-size:12.5px;padding:8px 15px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);box-shadow:0 8px 26px rgba(0,0,0,.42);white-space:nowrap;pointer-events:none}
#vmHint b{color:#fff}
#vmCross{display:none;position:fixed;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;z-index:8;pointer-events:none}
#vmCross::before,#vmCross::after{content:"";position:absolute;background:rgba(255,255,255,.72);box-shadow:0 0 2px rgba(0,0,0,.7)}
#vmCross::before{left:8px;top:0;width:2px;height:18px}
#vmCross::after{top:8px;left:0;height:2px;width:18px}
body.vmLockOn #vmCross{display:block}
#vmName{display:none;position:fixed;left:50%;top:calc(50% + 22px);transform:translateX(-50%);z-index:9;pointer-events:none;
  background:rgba(12,16,28,.9);color:#fff;font-family:system-ui;font-size:13px;font-weight:600;padding:5px 12px;border-radius:8px;
  white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.42);backdrop-filter:blur(4px)}
@media (max-width:699px){ #viewMode{top:auto;bottom:16px;right:10px} #vmHelpBox{top:auto;bottom:44px} #vmHint{bottom:70px} }

/* ===== v198: comenzi tactile pentru Explorează =====
   Se arata DOAR in modul Explorează si doar acolo unde nu exista tastatura. Conditia e
   scrisa de doua ori (latime mica SAU pointer grosier pe ecran nu foarte lat) fiindca
   media query-urile nu se pot combina cu SAU intr-o singura regula. Pragul de latime face
   ca panoul de mobil din _ui_preview.html sa le arate si pe desktop, deci se pot incerca
   fara telefon. */
#vmTouch{display:none;position:fixed;inset:0;z-index:10;pointer-events:none}
#vmStick{position:absolute;left:18px;bottom:18px;width:124px;height:124px;border-radius:50%;
  background:rgba(12,16,28,.34);border:1.5px solid rgba(255,255,255,.22);backdrop-filter:blur(5px);
  pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center}
#vmKnob{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.82);
  box-shadow:0 3px 12px rgba(0,0,0,.4);transition:transform .06s linear;will-change:transform}
#vmLift{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;pointer-events:auto}
#vmLift button{width:56px;height:56px;border-radius:50%;font-size:19px;line-height:1;
  background:rgba(12,16,28,.62);border:1.5px solid rgba(255,255,255,.22);color:#f2f0ea;
  backdrop-filter:blur(5px);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
#vmLift button.on{background:rgba(154,61,240,.85);border-color:#d387ff}
.hTouch{display:none}
@media (max-width:699px){
  body.vmLocalOn #vmTouch{display:block}
  .hDesk{display:none} ul.hTouch{display:block} span.hTouch{display:inline}
}
@media (pointer:coarse) and (max-width:1024px){
  body.vmLocalOn #vmTouch{display:block}
  .hDesk{display:none} ul.hTouch{display:block} span.hTouch{display:inline}
}
/* in Explorează pe telefon lasam ecranul liber: raman doar comutatorul de mod si atribuirea */
@media (max-width:699px){
  body.vmLocalOn #catBar,body.vmLocalOn #introTl,body.vmLocalOn #introDrona,
  body.vmLocalOn #routeBar,body.vmLocalOn #search{display:none}
  body.vmLocalOn #viewMode{top:10px;bottom:auto}
  body.vmLocalOn #vmHelpBox{top:48px;bottom:auto}
  body.vmLocalOn #osmAttrib{bottom:10px;right:84px}
  body.vmLocalOn #vmHint{bottom:152px}
}

/* ===== v197: butoanele de intrare + atribuirea, mutate din style inline in CSS ===== */
.introBtn{position:fixed;left:14px;z-index:11;display:inline-flex;align-items:center;gap:7px;
  background:rgba(12,16,28,.92);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);
  color:#f2f0ea;padding:9px 14px;border-radius:12px;font-family:system-ui;font-size:12.5px;cursor:pointer}
.introBtn:active{transform:translateY(1px) scale(.97)}
#introTl{bottom:14px} #introDrona{bottom:58px}
#osmAttrib{position:fixed;right:10px;bottom:8px;z-index:11;color:rgba(20,26,38,.55);
  font-family:system-ui;font-size:10.5px;text-decoration:none;background:rgba(255,255,255,.42);
  padding:2px 7px;border-radius:7px;backdrop-filter:blur(4px)}
#osmAttrib .oShort{display:none}

/* ===== v247: jocul "Where's Selly?" - buton dreapta jos + foaia cu reguli =====
   Stat deasupra atribuirii (care ramane in coltul de jos), sub coloana de categorii. */
#sellyBtn{position:fixed;right:14px;bottom:34px;z-index:12;display:inline-flex;align-items:center;
  gap:7px;background:linear-gradient(135deg,rgba(236,74,164,.96),rgba(124,58,237,.96));
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);color:#fff;padding:9px 14px;
  border-radius:12px;font-family:system-ui;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  cursor:pointer;box-shadow:0 8px 26px rgba(236,74,164,.32)}
#sellyBtn:hover{filter:brightness(1.08)}
#sellyBtn:active{transform:translateY(1px) scale(.97)}
#sellyBtn.on{box-shadow:0 0 0 2px rgba(255,255,255,.35),0 8px 26px rgba(236,74,164,.4)}
#sellyBtn .sIco{font-size:15px;line-height:1}
#sellyBox{position:fixed;right:14px;bottom:80px;z-index:12;width:312px;max-width:calc(100vw - 28px);
  background:rgba(12,16,28,.95);backdrop-filter:blur(10px);border:1px solid rgba(236,74,164,.45);
  border-radius:14px;padding:14px 16px 15px;color:#f2f0ea;font-family:system-ui;font-size:12.8px;
  line-height:1.5;box-shadow:0 16px 44px rgba(0,0,0,.5)}
#sellyBox[hidden]{display:none}
#sellyBox .sHead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 8px;font-size:14.5px}
#sellyBox .sHead button{background:none;border:0;color:#f2f0ea;opacity:.65;font-size:14px;
  cursor:pointer;padding:2px 4px;line-height:1}
#sellyBox .sHead button:hover{opacity:1}
#sellyBox p{margin:0 0 9px}
#sellyBox ol{margin:0 0 9px;padding-left:19px}
#sellyBox li{margin:0 0 3px}
#sellyBox .sNote{font-size:11.8px;opacity:.72}
#sellyBox .sScor{margin:10px 0;padding:8px 11px;border-radius:9px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);font-size:13px}
#sellyBox .sScor b{color:#ff8ecb}
#sellyBox .sLead{margin:0;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.2px;opacity:.9}

/* ===== v197: ASEZAREA PE TELEFON =====
   Pana aici, pragul de 700 px exista, dar bucatile se calcau intre ele:
   - #search si #routeBar erau AMANDOUA la top:10 cu left/right:10, deci "Ruta" statea
     exact peste campul de cautare;
   - #catBar se infasura pe doua randuri peste butoanele de Drona/Timelapse;
   - #viewMode iesea din ecran la dreapta si acoperea atribuirea.
   Acum etajele sunt explicite, de jos in sus: bara de jos (10) -> atribuire (52) ->
   categorii pe UN rand cu derulare (76). Sus: cautare (10) -> Ruta (56). */
@media (max-width:699px){
  #search{z-index:13}                       /* lista de rezultate trebuie sa treaca PESTE butonul Ruta */
  #routeBar{top:56px;z-index:12}

  /* categoriile: un singur rand care se deruleaza lateral, nu doua randuri infasurate */
  #catBar{bottom:76px;left:8px;right:8px;top:auto;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    justify-content:flex-start;padding:2px 2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #catBar::-webkit-scrollbar{display:none}
  .catBtn{flex:0 0 auto}

  /* bara de jos: intrarile video la stanga (doar iconita), modul de vizualizare la dreapta */
  .introBtn{padding:9px 11px}
  .introBtn .iLbl{display:none}
  .introBtn .iIco{font-size:15px;line-height:1}
  /* pe id, nu pe clasa: #introTl/#introDrona din regulile de desktop sunt selectori de id si
     ar bate orice "bottom" pus pe .introBtn */
  #introTl{left:10px;bottom:10px} #introDrona{left:56px;bottom:10px}

  #viewMode{bottom:10px;right:10px;top:auto}
  #vmSeg button{padding:7px 9px;font-size:11.5px}
  #vmHelpBox{top:auto;bottom:48px;right:0;max-width:calc(100vw - 20px)}
  #vmHint{bottom:56px;font-size:12px;max-width:calc(100vw - 24px);white-space:normal;text-align:center}

  /* atribuirea are randul ei, deasupra barii de jos, ca sa nu mai stea sub segmentul de mod.
     v247: butonul Selly ia coltul din dreapta al acestui rand, deci atribuirea trece la stanga
     (acolo randul e gol - Timelapse/Drona sunt jos la bottom:10). */
  #osmAttrib{bottom:52px;right:auto;left:10px}
  #osmAttrib .oFull{display:none}
  #osmAttrib .oShort{display:inline}
  #sellyBtn{right:10px;bottom:48px;padding:8px 11px;font-size:11.5px}
  #sellyBox{right:10px;bottom:88px;width:auto;left:10px;font-size:12.4px}

  /* fisa se deschide ca foaie de jos - lasam loc peste bara de jos */
  #card{max-height:72vh;overflow-y:auto}
}

/* Telefon CULCAT (si orice fereastra lata dar scunda). Atentie: la 844x390 latimea e peste
   prag, deci se aplica asezarea de DESKTOP - butoanele isi pastreaza eticheta si au ~168 px.
   Prima versiune muta atribuirea la left:104 presupunand ca ar fi doar iconite, si se calca
   cu #introTl. Aici problema nu e latimea, ci inaltimea: asezam pe ORIZONTALA in loc de stiva.
   Restrans la min-width:700px ca sa nu se bata cu blocul de mobil de mai sus. */
@media (min-width:700px) and (max-height:520px){
  #introTl{left:14px;bottom:10px}
  #introDrona{left:190px;bottom:10px}
  #osmAttrib{bottom:10px;right:10px;left:auto}
  /* ecran scund: butonul sta peste atribuire, iar foaia de reguli nu incape pe verticala */
  #sellyBtn{bottom:32px;right:14px}
  #sellyBox{bottom:74px;max-height:calc(100vh - 90px);overflow-y:auto}
  #routeBar{top:52px}
  /* coloana de categorii are ~570 px pe verticala si nu incape in 390 px de inaltime.
     Fixand SI top SI bottom, inaltimea se limiteaza intre ele si restul se deruleaza. */
  #catBar{top:96px;bottom:56px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
  #catBar::-webkit-scrollbar{display:none}
  #card{max-height:86vh;overflow-y:auto}
  #vmHint{bottom:56px}
}

/* v224: sectiunea "Program" din cardurile scenelor (Center Stage, Beraria, Arena, The Fool) */
#card .pgSec{margin-top:10px;border-top:1px solid rgba(255,255,255,.1);padding-top:9px}
#card .pgHead{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#ec4aa4;margin-bottom:5px}
#card .pgRow{display:flex;flex-direction:column;gap:1px;padding:5px 8px;margin:0 -8px;border-radius:8px;text-decoration:none;color:#f2f0ea}
#card .pgRow:hover{background:rgba(236,74,164,.14)}
#card .pgRow.today .pgWhen{color:#ff6ec0;font-weight:700}
#card .pgWhen{font-size:11px;color:#b8b4ab}
#card .pgTitle{font-size:12.5px;font-weight:600;line-height:1.3}
#card .pgAll{display:block;margin-top:7px;font-size:11px;color:#9ad7e8;text-decoration:none}
#card .pgAll:hover{text-decoration:underline}
/* v229: vinieta cinematica - colturi usor intunecate + o boare de violet jos, pur CSS (0 cost GPU pe scena).
   pointer-events:none => nu atinge interactiunea; z-index 7 = peste canvas, sub carduri (9) si UI (11). */
#vig{position:fixed;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(ellipse 130% 105% at 50% 42%, rgba(0,0,0,0) 60%, rgba(14,10,34,0.30) 100%),
             linear-gradient(to top, rgba(24,14,44,0.16) 0%, rgba(0,0,0,0) 18%)}

/* ===== v250: FOAIA MARE (#sheet) - programul complet al unei scene si meniul unui local =====
   Se deschide din butoanele cardului. Cardul ramane mic si rezumativ; aici incape tot.
   Aceleasi culori ca la card, ca sa para acelasi obiect, doar desfacut. */
#sheetWrap{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,9,16,.72);backdrop-filter:blur(3px)}
#sheetWrap.on{display:flex}
#sheet{position:relative;width:100%;max-width:720px;max-height:86vh;display:flex;flex-direction:column;
  background:rgba(12,16,28,.97);color:#f2f0ea;font-family:system-ui;border:1px solid rgba(236,74,164,.4);
  border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden}
#sheet .shHead{display:flex;align-items:center;gap:12px;padding:16px 18px 13px;
  border-bottom:1px solid rgba(255,255,255,.1);flex:0 0 auto}
#sheet .shLogo{flex:0 0 44px;width:44px;height:44px;border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center}
#sheet .shLogo img{width:100%;height:100%;object-fit:contain;display:block}
#sheet .shLogo span{font-size:18px;font-weight:700;color:#8e8a82}
#sheet .shT{flex:1;min-width:0}
#sheet .shT b{display:block;font-size:17px;line-height:1.25}
#sheet .shT i{display:block;font-style:normal;font-size:11.5px;color:#b8b4ab;margin-top:2px}
#sheet .shX{flex:0 0 auto;background:none;border:0;color:#f2f0ea;opacity:.6;font-size:16px;
  cursor:pointer;padding:6px 8px;line-height:1;border-radius:8px}
#sheet .shX:hover{opacity:1;background:rgba(255,255,255,.08)}
/* v263: taburi, cand cladirea are doua firme cu meniuri separate (Aryo Gaming / No Name Lounge).
   flex:0 0 auto ca sa nu fure din inaltimea zonei derulabile, si nowrap+scroll orizontal pentru
   ecrane inguste - un tab rupt pe doua randuri urca antetul si taie din meniu. */
#sheet .shTabs{flex:0 0 auto;display:flex;gap:6px;padding:11px 18px 0;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
#sheet .shTabs::-webkit-scrollbar{display:none}
#sheet .shTabs button{flex:0 0 auto;white-space:nowrap;cursor:pointer;font-family:inherit;
  font-size:12.5px;padding:7px 13px;border-radius:999px;color:#d8d4cc;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
#sheet .shTabs button:hover{background:rgba(255,255,255,.1)}
#sheet .shTabs button.on{color:#fff;border-color:rgba(236,74,164,.75);background:rgba(236,74,164,.22)}
#sheet .shFilter{flex:0 0 auto;padding:11px 18px 0}
#sheet .shFilter input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#f2f0ea;
  font-size:13.5px;font-family:inherit;outline:none}
#sheet .shFilter input:focus{border-color:rgba(236,74,164,.65)}
#sheet .shBody{flex:1 1 auto;overflow-y:auto;padding:12px 18px 18px;-webkit-overflow-scrolling:touch}
#sheet .shDay{position:sticky;top:0;background:rgba(12,16,28,.97);padding:9px 0 5px;
  font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#ec4aa4;z-index:1}
#sheet .shDay.today{color:#ff8ecb}
#sheet .shEv{display:flex;gap:12px;align-items:baseline;padding:8px 9px;margin:0 -9px;border-radius:9px;
  text-decoration:none;color:#f2f0ea}
#sheet .shEv:hover{background:rgba(236,74,164,.14)}
#sheet .shEv .w{flex:0 0 92px;font-size:11.5px;color:#b8b4ab;font-variant-numeric:tabular-nums}
#sheet .shEv .t{flex:1;font-size:13.5px;font-weight:600;line-height:1.35}
#sheet .shEv .t small{display:block;font-weight:400;font-size:11.5px;color:#a5a199;margin-top:1px}
#sheet .shIt{display:flex;gap:14px;align-items:baseline;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.07)}
#sheet .shIt:last-child{border-bottom:0}
#sheet .shIt .n{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35}
#sheet .shIt .n small{display:block;font-weight:400;font-size:11.5px;color:#a5a199;line-height:1.4;margin-top:2px}
#sheet .shIt .p{flex:0 0 auto;font-size:13.5px;font-weight:700;color:#ff8ecb;white-space:nowrap;
  font-variant-numeric:tabular-nums}
#sheet .shNote{margin:0 0 10px;font-size:12px;line-height:1.5;color:#a5a199}
#sheet .shSrc{display:block;margin-top:14px;padding-top:11px;border-top:1px solid rgba(255,255,255,.1);
  font-size:11.5px;color:#9ad7e8;text-decoration:none}
#sheet .shSrc:hover{text-decoration:underline}
#sheet .shEmpty{padding:18px 0;text-align:center;font-size:13px;color:#a5a199}
/* butoanele din card care deschid foaia */
#card .cardBtns{display:flex;gap:8px;margin-top:11px}
#card .cardBtns button{flex:1;padding:9px 10px;border-radius:10px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg,rgba(236,74,164,.92),rgba(124,58,237,.92))}
#card .cardBtns button:hover{filter:brightness(1.1)}
#card .cardBtns button:active{transform:translateY(1px) scale(.98)}
@media (max-width:699px){
  #sheetWrap{padding:0;align-items:flex-end}
  #sheet{max-width:none;max-height:92vh;border-radius:18px 18px 0 0;border-bottom:0}
  #sheet .shEv .w{flex-basis:78px}
}