:root{
  --bg: #170F2B;
  --surface: #221A3D;
  --surface-2: #2C2350;
  --border: #3C3168;
  --gold: #E7B84C;
  --gold-soft: #F4D98A;
  --cyan: #52D6CE;
  --text: #F3EFE6;
  --text-muted: #B4A9D6;
  --danger: #E2637A;
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --radius-card: 14px;
  --radius-pill: 999px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: radial-gradient(1200px 600px at 85% -10%, #2C2058 0%, var(--bg) 55%) fixed;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
button{ font-family: inherit; cursor:pointer; }
:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
header{ position: sticky; top:0; z-index: 40; background: rgba(23,15,43,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.header-inner{ display:flex; align-items:center; gap: 28px; height: 74px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-size: 1.35rem; font-weight:700; letter-spacing: 0.3px; white-space:nowrap; color: var(--text); }
.brand svg{ width: 34px; height:34px; flex-shrink:0; }
nav.main-nav{ display:flex; gap: 22px; margin-left: 8px; }
nav.main-nav a{ text-decoration:none; color: var(--text-muted); font-weight:500; font-size: 0.97rem; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
nav.main-nav a:hover{ color: var(--text); border-color: var(--cyan); }
.header-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.viewer-chip{ font-size: 0.85rem; color: var(--text-muted); white-space:nowrap; }
.cart-btn{ position:relative; background: var(--surface-2); border:1px solid var(--border); color: var(--text); border-radius: var(--radius-pill); padding: 9px 16px 9px 14px; display:flex; align-items:center; gap:8px; font-size:0.92rem; font-weight:600; text-decoration:none; }
.cart-btn:hover{ border-color: var(--cyan); }
.cart-count{ background: var(--gold); color: #1A1230; font-weight:700; font-size:0.72rem; min-width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding: 0 4px; }

.menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:none; padding:8px; width:38px; height:38px; }
.menu-toggle span{ width:20px; height:2px; background: var(--text); border-radius:2px; }
.mobile-nav{ display:none; flex-direction:column; background: var(--surface); border-bottom: 1px solid var(--border); padding: 6px 24px 14px; }
.mobile-nav.open{ display:flex; }
.mobile-nav a{ padding: 13px 0; color: var(--text); text-decoration:none; border-bottom: 1px solid var(--border); font-weight:500; }
.mobile-nav a:last-child{ border-bottom:none; }

@media (max-width: 860px){
  nav.main-nav{ display:none; }
  .menu-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{ padding: 72px 0 64px; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items:center; }
.hero-eyebrow{ color: var(--cyan); font-weight:600; font-size:0.95rem; margin: 0 0 14px; }
.hero h1{ font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 3.1rem); line-height:1.15; margin: 0 0 20px; max-width: 15ch; }
.hero p.lead{ color: var(--text-muted); font-size: 1.08rem; max-width: 46ch; margin: 0 0 30px; }
.hero-ctas{ display:flex; gap: 14px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:8px; border-radius: var(--radius-pill); padding: 13px 24px; font-weight:600; font-size: 0.97rem; text-decoration:none; border: 1px solid transparent; }
.btn-primary{ background: var(--gold); color: #1A1230; }
.btn-primary:hover{ background: var(--gold-soft); }
.btn-secondary{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-secondary:hover{ border-color: var(--cyan); color: var(--cyan); }

.crest-glow{ animation: pulseGlow 4.5s ease-in-out infinite; transform-origin: center; }
@keyframes pulseGlow{ 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .crest-art{ order:-1; max-width: 260px; margin: 0 auto; }
}

/* ---------- Carousel ---------- */
.carousel-section{ padding: 8px 0 56px; }
.carousel-section .block-head{ margin-bottom: 20px; }
.carousel-wrap{ position:relative; }
.carousel-track{ display:flex; overflow-x:auto; scroll-snap-type: x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-slide{ flex: 0 0 100%; scroll-snap-align:start; display:grid; grid-template-columns: 0.9fr 1.1fr; gap:32px; align-items:center; padding: 6px 24px; }
.slide-art{ border-radius: 18px; overflow:hidden; border: 1px solid var(--border); }
.slide-art svg{ display:block; width:100%; height:100%; }
.slide-content .tag{ margin-bottom: 12px; }
.slide-content h3{ font-family: var(--font-display); font-size: 1.5rem; line-height:1.3; margin: 0 0 12px; }
.slide-content p{ color: var(--text-muted); margin: 0 0 16px; max-width: 46ch; }
.carousel-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:42px; height:42px; border-radius:50%; background: var(--surface-2); border:1px solid var(--border); color: var(--text); font-size:1.3rem; display:flex; align-items:center; justify-content:center; }
.carousel-nav:hover{ border-color: var(--gold); color: var(--gold); }
.carousel-nav.prev{ left: -6px; }
.carousel-nav.next{ right: -6px; }
.carousel-dots{ display:flex; gap:8px; justify-content:center; margin-top: 18px; }
.carousel-dots .dot{ width:8px; height:8px; border-radius:50%; background: var(--border); border:none; padding:0; }
.carousel-dots .dot.active{ background: var(--gold); width:22px; border-radius:5px; transition: width .2s, background .2s; }
@media (max-width: 760px){
  .carousel-slide{ grid-template-columns: 1fr; padding: 4px 46px; }
  .slide-art{ max-width: 260px; margin: 0 auto; }
  .carousel-nav{ width:36px; height:36px; font-size:1.1rem; }
}

/* ---------- Section shell ---------- */
section.block{ padding: 56px 0; }
.block-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin-bottom: 30px; flex-wrap:wrap; }
.block-head h2{ font-family: var(--font-display); font-size: 1.9rem; margin: 0 0 6px; }
.block-head p{ color: var(--text-muted); margin:0; max-width: 52ch; }

/* ---------- Filter chips ---------- */
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 28px; }
.chip{ background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); padding: 8px 16px; border-radius: var(--radius-pill); font-size: 0.88rem; font-weight:500; text-decoration:none; display:inline-block; }
.chip.active{ background: var(--cyan); border-color: var(--cyan); color: #0F2624; font-weight:700; }
.chip:hover:not(.active){ border-color: var(--cyan); color: var(--text); }

/* ---------- News grid ---------- */
.news-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px){ .news-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .news-grid{ grid-template-columns: 1fr; } }

.card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow:hidden; display:flex; flex-direction:column; }
.card-art{ aspect-ratio: 16/10; display:flex; align-items:center; justify-content:center; }
.card-body{ padding: 18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tag{ align-self:flex-start; font-size: 0.74rem; font-weight:700; padding: 4px 10px; border-radius: var(--radius-pill); }
.tag-games{ background: rgba(82,214,206,0.16); color: var(--cyan); }
.tag-cinema{ background: rgba(231,184,76,0.16); color: var(--gold); }
.tag-animes{ background: rgba(226,99,122,0.16); color: var(--danger); }
.tag-hqs{ background: rgba(180,169,214,0.18); color: var(--text-muted); }
.card h3{ font-family: var(--font-display); font-size: 1.12rem; margin: 0; line-height:1.35; }
.card p{ color: var(--text-muted); font-size: 0.92rem; margin:0; flex:1; }
.card-meta{ color: var(--text-muted); font-size: 0.8rem; opacity:0.85; }

/* ---------- Store grid ---------- */
.store-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1020px){ .store-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px){ .store-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .store-grid{ grid-template-columns: 1fr; } }

.product-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow:hidden; display:flex; flex-direction:column; }
.product-art{ aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; background: var(--surface-2); }
.product-body{ padding: 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-body h3{ font-size: 0.98rem; margin:0; font-weight:600; }
.price{ color: var(--gold); font-weight:700; font-size: 1.02rem; }
.add-btn{ width:100%; margin-top:auto; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 10px 12px; font-weight:600; font-size:0.88rem; display:flex; align-items:center; justify-content:center; gap:8px; }
.add-btn:hover{ border-color: var(--gold); color: var(--gold); }

/* ---------- Cart page / drawer items ---------- */
.drawer-empty{ color: var(--text-muted); text-align:center; padding: 40px 10px; font-size:0.95rem; }
.cart-item{ display:flex; gap:12px; align-items:center; border-bottom: 1px solid var(--border); padding: 14px 0; }
.cart-item-art{ width:52px; height:52px; border-radius:10px; background: var(--surface-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h4{ margin:0 0 4px; font-size:0.92rem; font-weight:600; }
.qty-row{ display:flex; align-items:center; gap:8px; }
.qty-btn{ width:26px; height:26px; border-radius:6px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); display:flex; align-items:center; justify-content:center; font-size:0.9rem; }
.qty-btn:hover{ border-color: var(--cyan); }
.remove-btn{ background:none; border:none; color: var(--text-muted); font-size:0.8rem; text-decoration:underline; }
.remove-btn:hover{ color: var(--danger); }
.subtotal-row{ display:flex; justify-content:space-between; font-weight:700; font-size:1.05rem; margin-bottom:14px; }
.checkout-btn{ width:100%; background: var(--gold); color:#1A1230; border:none; border-radius: var(--radius-pill); padding: 13px; font-weight:700; font-size:0.98rem; }
.checkout-btn:hover{ background: var(--gold-soft); }
.checkout-note{ font-size:0.76rem; color: var(--text-muted); margin-top:10px; text-align:center; }

/* ---------- Footer ---------- */
footer{ border-top: 1px solid var(--border); padding: 40px 0 30px; margin-top: 20px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; color: var(--text-muted); font-size:0.85rem; }
.footer-brand{ font-family: var(--font-display); color: var(--text); font-size:1.05rem; }

/* ---------- Toast ---------- */
.toast{ position:fixed; bottom:24px; left:50%; transform: translateX(-50%) translateY(20px); background: var(--surface-2); border:1px solid var(--cyan); color: var(--text); padding: 12px 20px; border-radius: var(--radius-pill); font-size:0.9rem; font-weight:600; opacity:0; pointer-events:none; transition: opacity .2s, transform .2s; z-index:80; }
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }