/* ===== RaconCodes: menu + mobile layout (loaded last on every page) ===== */

/* ---- menu contents (inside the slide-out panel, all screen sizes) ---- */
.m-menu{display:flex;flex-direction:column;gap:6px;padding:14px 14px 8px}
.m-item{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:16px;background:#2b0838;border:1px solid #431455;color:#f8efdb!important;font-size:16px;font-weight:700;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.m-item:hover,.m-item:focus-visible{background:#370c48;border-color:#f5b21b;transform:translateX(-2px)}
.m-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,#ffdd6b,#f5b21b 55%,#d98f0a);color:#1d0525}
.m-ic svg{width:20px;height:20px}
.m-tx{flex:1;min-width:0}
.m-go{flex:none;color:#996eaa}.m-go svg{width:18px;height:18px}
.m-item .nav-live{font-size:10px!important;padding:2px 8px!important;gap:5px!important}
.m-new{padding:2px 8px;border-radius:999px;background:#7b0c7f;color:#fcc8ff;font-size:10px;font-weight:800;letter-spacing:.6px}
.m-countries{padding:6px 14px 4px}
.m-countries small{display:block;margin:4px 2px 8px;color:#f5b21b;font-size:11px;font-weight:800;letter-spacing:1.2px}
.m-countries div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.m-countries a{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px;border-radius:12px;background:#2b0838;border:1px solid #431455;color:#f8efdb!important;font-size:14px;font-weight:700;text-decoration:none}
.m-countries a:hover{border-color:#f5b21b}
.m-countries img{width:24px;height:18px;border-radius:3px;flex:none;background:none!important;animation:none!important}
.m-contact{display:flex;gap:8px;padding:12px 14px 6px}
.m-contact a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:14px;font-size:15px;font-weight:800;text-decoration:none}
.m-wa{background:#25d366;color:#04261a!important}
.m-tg{background:rgb(151 0 251 / .14);border:1.5px solid #9700fb;color:#f6e7ff!important}
.m-contact img{width:20px;height:20px;background:none!important;animation:none!important}
.m-gal-title{margin:14px 16px 0;color:#f5b21b;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.m-servers{display:none}

/* desktop: hero picture shows the bear room in full colour */
.hero-picture img{filter:none!important;object-position:46% center!important}

/* ---- phones & tablets ---- */
@media(max-width:900px){
  /* compact one-row header */
  .site-header{top:12px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:calc(100% - 24px)!important;min-height:62px!important;height:62px;padding:6px 8px 6px 10px!important;gap:8px!important;flex-wrap:nowrap!important;border-radius:20px!important;background:rgb(31 4 42 / .9)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgb(245 178 27 / .35)!important;box-shadow:0 10px 30px rgb(0 0 0 / .45)!important}
  body.has-sv-topbar .site-header{top:42px!important}
  body.header-stuck .site-header{position:fixed!important;top:8px!important;left:12px!important;right:12px!important;width:auto!important;transform:none!important;translate:none!important;padding-left:10px!important;padding-right:8px!important;border-radius:20px!important}
  .desktop-nav{display:none!important}
  .brand{min-width:0!important;display:flex!important;align-items:center;gap:9px}
  .brand .brand-mark{width:42px!important;height:42px!important;transform:none!important}
  .brand span{font-size:20px!important}
  .brand small{display:none!important}
  .header-tools{margin-left:auto!important;gap:8px!important}
  .m-servers{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 14px;border-radius:999px;background:#0f3b27;border:1.5px solid #3ee59a;color:#d9ffe9!important;font-size:13.5px;font-weight:800;text-decoration:none;white-space:nowrap}
  .m-servers i{width:8px;height:8px;border-radius:50%;background:#3ee59a;box-shadow:0 0 0 3px rgb(62 229 154 / .3);animation:sv-blink 1.4s infinite}
  .menu-control{width:44px!important;height:44px!important;border-radius:14px!important;background:linear-gradient(180deg,#ffdd6b,#f5b21b 55%,#d98f0a)!important;border:0!important;color:#1d0525!important;position:relative}
  .menu-control .gallery-grid-icon{display:none!important}
  .menu-control::before{content:"";width:20px;height:2.5px;border-radius:2px;background:currentColor;box-shadow:0 -6.5px 0 currentColor,0 6.5px 0 currentColor;transition:transform .25s,box-shadow .25s}
  .menu-control.is-open::before{box-shadow:none;transform:rotate(45deg)}
  .menu-control.is-open::after{content:"";position:absolute;width:20px;height:2.5px;border-radius:2px;background:currentColor;transform:rotate(-45deg)}

  /* full-height slide-in menu */
  .mobile-nav.gallery-panel{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(400px,90vw)!important;height:100dvh!important;max-height:none!important;border-radius:24px 0 0 24px!important;border:0!important;border-left:1px solid rgb(245 178 27 / .35)!important;background:#17031e!important;transform:translateX(102%)!important;opacity:1!important;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s!important;z-index:120!important;overscroll-behavior:contain}
  .mobile-nav.gallery-panel.open{transform:none!important}
  body.nav-open::after{content:"";position:fixed;inset:0;z-index:110;background:rgb(10 0 14 / .62);backdrop-filter:blur(3px)}
  body.nav-open{overflow:hidden}
  .gallery-panel-head{position:sticky;top:0;z-index:2;background:#17031e}
  .gallery-intro,.gallery-links{display:none!important}

  /* hero: bear watching TV fills the screen */
  .hero{height:860px!important;min-height:860px!important}
  .hero-picture{inset:0!important;clip-path:none!important;opacity:1!important}
  .hero-picture img{object-position:center bottom!important}
  .hero::after{opacity:1!important;background:linear-gradient(180deg,rgb(23 3 30 / .6) 0,rgb(23 3 30 / .9) 16%,rgb(23 3 30 / .84) 52%,rgb(23 3 30 / .25) 72%,rgb(23 3 30 / .1) 88%,rgb(23 3 30 / .6) 100%)!important}
  .hero-wave,.hero-slice,.hero-band,.hero-dots{display:none!important}
  .hero-content{top:140px!important;left:20px!important;width:calc(100% - 40px)!important}
  body.has-sv-topbar .hero-content{top:150px!important}
  .hero h1{font-size:clamp(36px,10vw,52px)!important;line-height:1.06!important}
  .hero-copy{font-size:15px!important;line-height:1.6!important;margin:16px 0 20px!important;color:#e9e3d2!important}
  .hero-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%}
  .hero-actions a{min-height:52px!important;font-size:14px!important;border-radius:14px!important}
  .hero-actions .hero-servers{grid-column:1/-1}
  .price-badge{top:auto!important;bottom:250px!important;right:16px!important;width:96px!important;height:84px!important}
  .hero-medallion{display:none!important}
}
@media(max-width:380px){
  .brand span{font-size:17px!important}
  .m-servers{padding:0 11px;font-size:12.5px}
  .brand .brand-mark{width:36px!important;height:36px!important}
}
@media(prefers-reduced-motion:reduce){.m-servers i{animation:none}.mobile-nav.gallery-panel{transition:none!important}}
@keyframes sv-blink{50%{opacity:.35}}
/* keep menu items consistent (override older gallery-panel link styles) */
.mobile-nav .m-item,.mobile-nav .m-countries a{background:#2b0838!important;border:1px solid #431455!important;color:#f8efdb!important;box-shadow:none!important;padding:8px 12px!important;margin:0!important;width:auto!important}
.mobile-nav .m-countries a{padding:0 12px!important}
.mobile-nav .m-item:hover,.mobile-nav .m-countries a:hover{border-color:#f5b21b!important}
.mobile-nav .m-wa{background:#25d366!important;color:#04261a!important;border:0!important;box-shadow:none!important}
.mobile-nav .m-tg{border-radius:14px!important;margin:0!important;min-height:50px!important;background:rgb(151 0 251 / .14)!important;border:1.5px solid #9700fb!important;color:#f6e7ff!important;box-shadow:none!important}
.mobile-nav .m-item::before,.mobile-nav .m-item::after,.mobile-nav .m-countries a::before,.mobile-nav .m-countries a::after,.mobile-nav .m-contact a::before,.mobile-nav .m-contact a::after{display:none!important}
@media(max-width:900px){.price-badge{right:auto!important;left:16px!important;bottom:236px!important}}
/* phones: no tap flash, no scroll-to-top circle behind the WhatsApp button */
html{-webkit-tap-highlight-color:transparent}
@media(max-width:900px){.to-top{display:none!important}.video-thumb span{animation:none!important}}
.hero-band{display:none!important}