/* BoxMining 2027 refinement: dark obsidian, warm gold, Dynamic-Island navigation */
:root {
  --bm-gold: #ffd447;
  --bm-gold-bright: #ffe99a;
  --bm-gold-deep: #9b6800;
  --bm-gold-soft: rgba(255, 212, 71, .14);
  --bm-bg: #08090b;
  --bm-panel: #111318;
  --bm-panel-2: #171a20;
  --bm-border: rgba(255, 212, 71, .18);
  --bm-text: #f7f7f8;
  --bm-muted: #9da3ae;
  color-scheme: dark;
}
html { background: var(--bm-bg) !important; scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 190, 35, .075), transparent 34rem),
    radial-gradient(ellipse at 100% 45%, rgba(255, 212, 71, .025), transparent 28rem),
    var(--bm-bg) !important;
  color: var(--bm-text);
}
::selection { color:#171104; background:var(--bm-gold); }
/* Re-map leftover green/blue accents from the previous iteration to gold. */
:root { --m-blue: var(--bm-gold) !important; --m-yellow: var(--bm-gold) !important; --mars-gold: var(--bm-gold) !important; --marsulia-yellow: var(--bm-gold) !important; }
[class*="text-green"], [class*="text-emerald"], [class*="text-lime"], [class*="text-teal"],
.text-success, .text-primary, .text-info { color: var(--bm-gold) !important; }
[class*="bg-green"], [class*="bg-emerald"], [class*="bg-lime"], [class*="bg-teal"],
.bg-success, .alert-success, .badge-success { background-color: var(--bm-gold) !important; color:#251900 !important; }
[class*="border-green"], [class*="border-emerald"], [class*="border-lime"], [class*="border-teal"] { border-color: rgba(255,212,71,.55) !important; }
/* Floating Dynamic-Island style nav capsule */
#header.marsulia-header {
  position: sticky !important; top: 12px !important; z-index: 1000 !important;
  width: min(1160px, calc(100% - 36px)) !important; height: 70px !important;
  margin: 12px auto 0 !important; overflow: visible !important;
  border: 1px solid rgba(255,212,71,.27) !important; border-radius: 28px !important;
  background: rgba(7,8,10,.82) !important; backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
  box-shadow: 0 12px 44px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045), 0 0 28px rgba(255,194,39,.055) !important;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease !important;
}
#header.marsulia-header:before { content:"" !important; position:absolute !important; inset:-1px !important; border-radius:inherit !important; pointer-events:none !important; background:linear-gradient(110deg,transparent 12%,rgba(255,212,71,.16) 48%,transparent 76%) !important; opacity:.55 !important; }
#header.marsulia-header:after { content:"" !important; position:absolute !important; left:22%; right:22%; bottom:-1px !important; height:1px !important; border-radius:100% !important; background:linear-gradient(90deg,transparent,var(--bm-gold),transparent) !important; box-shadow:0 0 16px rgba(255,212,71,.6) !important; }
#header .marsulia-header-inner { height:68px !important; max-width:none !important; padding:0 16px !important; }
#header .marsulia-nav-left, #header .marsulia-nav-right { gap:3px !important; width:calc(50% - 70px) !important; flex-basis:calc(50% - 70px) !important; }
#header .marsulia-nav-left { padding-right:62px !important; }
#header .marsulia-nav-right { padding-left:62px !important; }
#header .marsulia-nav-link { min-height:42px !important; padding:0 12px !important; border-radius:14px !important; color:#c5c8cf !important; font-size:12px !important; transition:background .22s ease,color .22s ease,transform .22s ease !important; }
#header .marsulia-nav-link:after { display:none !important; }
#header .marsulia-nav-link:hover, #header .marsulia-nav-link.active { color:var(--bm-gold-bright) !important; background:rgba(255,212,71,.105) !important; transform:translateY(-1px) !important; box-shadow:inset 0 0 0 1px rgba(255,212,71,.16) !important; }
#header .marsulia-nav-link i { color:var(--bm-gold) !important; }
#header .marsulia-header-logo { width:108px !important; height:58px !important; border:1px solid rgba(255,212,71,.26) !important; border-radius:22px !important; background:linear-gradient(180deg,rgba(28,25,17,.98),rgba(7,8,10,.98)) !important; box-shadow:0 0 26px rgba(255,193,36,.12), inset 0 1px 0 rgba(255,255,255,.06) !important; overflow:hidden !important; }
#header .marsulia-header-logo img { width:66px !important; height:66px !important; max-width:66px !important; object-fit:contain !important; filter:drop-shadow(0 0 12px rgba(255,212,71,.28)) !important; }
#header .marsulia-logo-glow { background:radial-gradient(ellipse,rgba(255,212,71,.22),transparent 70%) !important; }
#header .marsulia-header-right { width:calc(50% - 70px) !important; flex-basis:calc(50% - 70px) !important; }
#header .marsulia-header-actions { gap:8px !important; }
#header .marsulia-login-button, #header .marsulia-cart-button, #header .marsulia-profile-button, #header #marsulia-desktop-menu-button {
  min-height:40px !important; border-radius:15px !important; border:1px solid rgba(255,212,71,.26) !important;
  background:linear-gradient(180deg,#242017,#111216) !important; color:#f7e4a4 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}
#header .marsulia-login-button:hover, #header .marsulia-cart-button:hover, #header .marsulia-profile-button:hover, #header #marsulia-desktop-menu-button:hover { transform:translateY(-2px) !important; border-color:var(--bm-gold) !important; box-shadow:0 6px 20px rgba(255,196,39,.13) !important; }
#header #marsulia-desktop-menu-button { background:linear-gradient(135deg,#ffe889,#eeb92a) !important; color:#201600 !important; border-color:#ffdf67 !important; }
/* Deep obsidian page surfaces */
.card, .panel, .modal-content, .dropdown-menu, .marsulia-desktop-menu-inner,
.page-section .card, .store-category, .product-card, .package-card,
[class*="rounded-xl"][class*="bg-gray"], [class*="rounded-2xl"][class*="bg-gray"] {
  border-color:rgba(255,212,71,.12) !important;
}
.page-section, .container { --tw-ring-color:rgba(255,212,71,.2); }
.page-header { color:#fff !important; text-shadow:0 3px 28px rgba(255,196,39,.09) !important; }
.page-header:after { background:linear-gradient(90deg,var(--bm-gold),rgba(255,212,71,.15)) !important; box-shadow:0 0 18px rgba(255,212,71,.32) !important; }
button, .btn, a.btn, input[type="submit"], [role="button"] { transition:transform .2s ease,filter .2s ease,box-shadow .2s ease,border-color .2s ease !important; }
.btn-primary, .btn-success, .btn-info, .bg-indigo-500, .bg-indigo-600, .bg-blue-500, .bg-blue-600,
button[class*="bg-green"], a[class*="bg-green"], button[class*="bg-emerald"], a[class*="bg-emerald"] {
  color:#241900 !important; background:linear-gradient(135deg,#ffe77b 0%,#ffd447 48%,#e8ad1e 100%) !important;
  border:1px solid #ffdf67 !important; border-radius:13px !important;
  box-shadow:0 4px 0 #8c6107,0 9px 22px rgba(255,194,39,.09),inset 0 1px 0 rgba(255,255,255,.3) !important;
  font-weight:800 !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .bg-indigo-500:hover, .bg-indigo-600:hover,
button[class*="bg-green"]:hover, a[class*="bg-green"]:hover { filter:brightness(1.08) !important; transform:translateY(-2px) !important; box-shadow:0 6px 0 #8c6107,0 12px 25px rgba(255,194,39,.16) !important; }
input:not([type="checkbox"]):not([type="radio"]), textarea, select, .form-control {
  background:#0c0e12 !important; color:#f4f4f5 !important; border:1px solid #303039 !important; border-radius:12px !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus { border-color:rgba(255,212,71,.7) !important; box-shadow:0 0 0 3px rgba(255,212,71,.09) !important; outline:0 !important; }
.breadcrumb, nav[aria-label="breadcrumb"] { background:rgba(17,19,24,.86) !important; border-color:rgba(255,212,71,.12) !important; border-radius:14px !important; }
footer { background:#060709 !important; border-top:1px solid rgba(255,212,71,.17) !important; }
footer a:hover { color:var(--bm-gold) !important; }
/* Page-to-page transitions: elegant gold sweep without interfering with navigation */
#bm-transition {
  position:fixed; inset:0; z-index:99999; pointer-events:none; opacity:0;
  background:linear-gradient(110deg,transparent 0%,rgba(255,212,71,.025) 35%,rgba(255,212,71,.16) 50%,rgba(255,212,71,.025) 65%,transparent 100%);
  transform:translateX(-110%); backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0);
}
#bm-transition.is-active { opacity:1; animation:bmGoldSweep .58s cubic-bezier(.7,0,.2,1) forwards; }
body.bm-page-enter { animation:bmPageEnter .48s cubic-bezier(.2,.75,.25,1) both; }
@keyframes bmGoldSweep { 0%{transform:translateX(-110%);opacity:0} 20%{opacity:1} 100%{transform:translateX(110%);opacity:0} }
@keyframes bmPageEnter { from{opacity:.35;filter:blur(3px);transform:translateY(7px)} to{opacity:1;filter:blur(0);transform:translateY(0)} }
@media(max-width:900px) {
  #header.marsulia-header { width:calc(100% - 20px) !important; top:7px !important; margin-top:7px !important; height:64px !important; border-radius:22px !important; }
  #header .marsulia-header-inner { height:62px !important; padding:0 10px !important; }
  #header .marsulia-nav-left, #header .marsulia-nav-right { display:none !important; }
  #header .marsulia-header-logo { width:82px !important; height:50px !important; }
  #header .marsulia-header-logo img { width:54px !important; height:54px !important; }
  #header .marsulia-header-right { width:auto !important; flex-basis:auto !important; margin-left:auto !important; }
  #header .marsulia-profile-name { display:none !important; }
}
@media(max-width:520px) {
  #header.marsulia-header { width:calc(100% - 14px) !important; }
  #header .marsulia-login-button span { display:none !important; }
  #header .marsulia-header-actions { gap:5px !important; }
  .page-section { padding-left:14px !important; padding-right:14px !important; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  #bm-transition { display:none !important; }
}

/* FINAL FIX: full-bleed homepage hero image and visible page transitions */
body:has(#marsulia-home) { overflow-x: clip !important; }
#marsulia-home { width:100%; max-width:none !important; overflow:visible; }
#marsulia-home .mx-hero {
  position:relative !important;
  width:100vw !important;
  max-width:100vw !important;
  min-height:clamp(620px, calc(100vh - 68px), 900px) !important;
  height:clamp(620px, calc(100vh - 68px), 900px) !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:0 !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:#050506 !important;
}
#marsulia-home .mx-hero-image {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  transform:scale(1.015);
}
#marsulia-home .mx-hero-image:after {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg,rgba(3,4,6,.84) 0%,rgba(3,4,6,.56) 27%,rgba(3,4,6,.12) 65%,rgba(3,4,6,.08) 100%),linear-gradient(0deg,rgba(3,4,6,.56) 0%,transparent 34%,rgba(3,4,6,.18) 100%) !important;
}
#marsulia-home .mx-hero-content { width:100% !important; max-width:1280px !important; margin:0 auto !important; }
#bm-transition {
  position:fixed !important; inset:0 !important; z-index:2147483000 !important;
  pointer-events:none !important; opacity:0 !important; visibility:hidden !important;
  transform:translateX(-105%) skewX(-8deg) !important;
  background:linear-gradient(105deg,transparent 0%,rgba(255,212,71,.10) 34%,rgba(255,212,71,.92) 50%,rgba(255,212,71,.14) 65%,transparent 100%) !important;
  box-shadow:0 0 60px rgba(255,190,30,.12) !important;
}
#bm-transition.is-active { visibility:visible !important; opacity:1 !important; animation:bmGoldPageWipe .42s cubic-bezier(.72,0,.25,1) forwards !important; }
body.bm-page-enter { animation:bmPageReveal .58s cubic-bezier(.2,.75,.25,1) both !important; }
body.bm-page-leave { pointer-events:none !important; }
@keyframes bmGoldPageWipe {
  0% { transform:translateX(-105%) skewX(-8deg) !important; opacity:0 !important; }
  12% { opacity:1 !important; }
  100% { transform:translateX(105%) skewX(-8deg) !important; opacity:1 !important; }
}
@keyframes bmPageReveal {
  0% { opacity:.12; filter:blur(5px); transform:translateY(10px); }
  100% { opacity:1; filter:blur(0); transform:translateY(0); }
}
@media(max-width:768px) {
  #marsulia-home .mx-hero { min-height:680px !important; height:calc(100svh - 68px) !important; max-height:850px !important; }
  #marsulia-home .mx-hero-image { background-position:58% center !important; }
  #marsulia-home .mx-hero-content { padding-left:20px !important; padding-right:20px !important; }
}
@media(prefers-reduced-motion:reduce) {
  body.bm-page-enter, body.bm-page-leave { animation:none !important; }
  #bm-transition { display:none !important; }
}


/* FINAL VISUAL CORRECTION: use the full-resolution Minecraft artwork and a dark, readable cinematic overlay */
#marsulia-home .mx-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: clamp(640px, 78vh, 900px) !important;
  height: clamp(640px, 78vh, 900px) !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
  background: #08090c !important;
}
#marsulia-home .mx-hero-image {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center 43% !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}
#marsulia-home .mx-hero-image:after {
  background:
    linear-gradient(90deg, rgba(5,6,9,.86) 0%, rgba(5,6,9,.68) 26%, rgba(5,6,9,.22) 62%, rgba(5,6,9,.08) 100%),
    linear-gradient(180deg, rgba(5,6,9,.22) 0%, transparent 40%, rgba(5,6,9,.64) 100%) !important;
}
#marsulia-home .mx-hero-content {
  min-height: inherit !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding-top: 70px !important;
  padding-bottom: 95px !important;
}
#bm-transition {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: block !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateX(-110%) skewX(-8deg);
  background: linear-gradient(105deg, transparent 0%, rgba(255,212,71,.10) 34%, rgba(255,212,71,.94) 50%, rgba(255,212,71,.16) 66%, transparent 100%) !important;
}
#bm-transition.is-active {
  visibility: visible !important;
  opacity: 1 !important;
  animation: bmGoldPageWipeFixed .52s cubic-bezier(.72,0,.25,1) forwards !important;
}
body.bm-page-leave { pointer-events: none !important; }
body.bm-page-enter { animation: bmPageRevealFixed .58s cubic-bezier(.2,.75,.25,1) both !important; }
@keyframes bmGoldPageWipeFixed {
  0% { transform: translateX(-110%) skewX(-8deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateX(110%) skewX(-8deg); opacity: 1; }
}
@keyframes bmPageRevealFixed {
  0% { opacity: .08; filter: blur(5px); transform: translateY(10px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@media (max-width: 768px) {
  #marsulia-home .mx-hero { min-height: 700px !important; height: 82svh !important; max-height: 900px !important; }
  #marsulia-home .mx-hero-image { background-position: 54% center !important; }
  #marsulia-home .mx-hero-content { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.bm-page-enter, body.bm-page-leave { animation: none !important; }
  #bm-transition { display: none !important; }
}


/* TRANSITION V2 — unmistakable gold portal reveal */
#bm-transition {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: block !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 50%, #fff8cf 0%, #ffe56a 12%, #ffc928 32%, #a96b00 52%, #090909 74%) !important;
  clip-path: circle(0% at 50% 50%) !important;
  transition: clip-path .46s cubic-bezier(.16,1,.3,1), opacity .08s linear !important;
  box-shadow: inset 0 0 100px rgba(255,220,70,.8) !important;
}
#bm-transition::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(115deg, transparent 0 48px, rgba(255,255,255,.15) 50px 52px, transparent 54px 96px) !important;
  opacity: .55 !important;
}
#bm-transition.is-active {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  clip-path: circle(150% at 50% 50%) !important;
  animation: none !important;
}
body.bm-page-leave #app {
  opacity: .12 !important;
  filter: blur(8px) brightness(.55) !important;
  transform: scale(.985) !important;
  transition: opacity .22s ease, filter .22s ease, transform .22s ease !important;
}
body.bm-page-enter #app {
  animation: bmPortalContentIn .65s cubic-bezier(.2,.75,.25,1) both !important;
}
@keyframes bmPortalContentIn {
  0% { opacity: .15; filter: blur(8px); transform: translateY(14px) scale(.99); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #bm-transition { display: none !important; }
  body.bm-page-leave #app, body.bm-page-enter #app { transition: none !important; animation: none !important; }
}