@charset "utf-8";

:root { --bg: #07070a; --red: #b31322; --hot: #ff3147; --deep: #1a070d; --text: #f7f3f3; --muted: #c8b8bd; --card: rgba(255,255,255,0.065); --border: rgba(255,255,255,0.15); --mx: 50%; --my: 50%; --tiltX: 0deg; --tiltY: 0deg; }

* { box-sizing: border-box; margin: 0px; padding: 0px; }

html { scroll-behavior: smooth; width: 100%; min-height: 100%; overflow-x: hidden; background-color: rgb(22, 7, 12); }

body { min-height: 100dvh; width: 100%; margin: 0px; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: radial-gradient(circle at var(--mx) var(--my), rgba(255,49,71,0.22), transparent 24%),
        radial-gradient(circle at 18% 10%, rgba(179,19,34,0.46), transparent 34%),
        radial-gradient(circle at 82% 82%, rgba(255,49,71,0.25), transparent 38%),
        linear-gradient(135deg, #07070a 0%, #16070c 48%, #07070a 100%); overflow-x: hidden; }

body::after { content: ""; position: fixed; inset: 0px; z-index: -2; pointer-events: none; background: radial-gradient(circle at 18% 10%, rgba(179, 19, 34, 0.46), transparent 34%), radial-gradient(circle at 82% 82%, rgba(255, 49, 71, 0.25), transparent 38%), linear-gradient(135deg, rgb(7, 7, 10) 0%, rgb(22, 7, 12) 48%, rgb(7, 7, 10) 100%); }

body::before { content: ""; position: fixed; inset: -20%; pointer-events: none; background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.043) 46%, transparent 54%), radial-gradient(circle at 65% 20%, rgba(255, 49, 71, 0.11), transparent 24%); transform: translate3d(calc((var(--mx) - 50%) / 24), calc((var(--my) - 50%) / 24), 0); opacity: 0.85; z-index: 0; }

.grain { position: fixed; inset: 0px; pointer-events: none; opacity: 0.16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.28'/%3E%3C/svg%3E"); z-index: 1; }

.cursor-glow { position: fixed; width: 360px; height: 360px; border-radius: 50%; left: var(--mx); top: var(--my); transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, rgba(255, 49, 71, 0.2), transparent 62%); filter: blur(10px); z-index: 1; }

.particles { position: fixed; inset: 0px; overflow: hidden; pointer-events: none; z-index: 1; }

.particles span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 49, 71, 0.9); box-shadow: rgba(255, 49, 71, 0.9) 0px 0px 12px; animation: auto linear 0s infinite normal none running floatUp; opacity: 0.55; }

@keyframes floatUp { 
  0% { transform: translateY(110vh) translateX(0px) scale(0.8); opacity: 0; }
  10% { opacity: 0.75; }
  90% { opacity: 0.75; }
  100% { transform: translateY(-10vh) translateX(55px) scale(1.2); opacity: 0; }
}

.wrap { width: min(1180px, 100% - 32px); margin: 0px auto; padding: 28px 0px; position: relative; z-index: 2; }

header { display: flex; align-items: center; justify-content: space-between; gap: 22px; position: relative; z-index: 3; animation: 0.85s ease 0s 1 normal both running fadeDown; }

@keyframes fadeDown { 
  0% { opacity: 0; transform: translateY(-16px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.brand { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--text); }

.brand-logo { width: 155px; max-width: 40vw; height: auto; filter: drop-shadow(rgba(255, 49, 71, 0.34) 0px 0px 20px); transition: transform 0.25s, filter 0.25s; }

.brand:hover .brand-logo { transform: scale(1.035) rotate(-1deg); filter: drop-shadow(rgba(255, 49, 71, 0.55) 0px 0px 30px); }

.brand-name { font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.95rem; white-space: nowrap; text-shadow: rgba(255, 255, 255, 0.08) 0px 0px 16px; }

nav { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

nav a, .btn { color: var(--text); text-decoration: none; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); padding: 11px 15px; border-radius: 999px; font-weight: 850; transition: transform 0.2s, background 0.2s, border 0.2s, box-shadow 0.2s; backdrop-filter: blur(10px); display: inline-flex; align-items: center; gap: 9px; position: relative; overflow: hidden; }

nav a::before, .btn::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.12), transparent); transform: translateX(-120%); transition: transform 0.45s; }

nav a:hover::before, .btn:hover::before { transform: translateX(120%); }

nav a:hover, .btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.32); box-shadow: rgba(255, 49, 71, 0.12) 0px 10px 34px; }

.hero { min-height: 76vh; display: grid; align-items: center; padding: 88px 0px 44px; grid-template-columns: 1.03fr 0.97fr; gap: 58px; position: relative; z-index: 2; }

.hero-text { animation: 0.95s ease 0.05s 1 normal both running fadeUp; }

@keyframes fadeUp { 
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.tag { display: inline-flex; align-items: center; gap: 8px; color: rgb(255, 215, 221); background: rgba(179, 19, 34, 0.25); border: 1px solid rgba(255, 49, 71, 0.34); padding: 9px 13px; border-radius: 999px; font-weight: 900; margin-bottom: 22px; box-shadow: rgba(255, 49, 71, 0.13) 0px 0px 26px; }

h1 { font-size: clamp(3.2rem, 8vw, 7.6rem); line-height: 0.88; letter-spacing: -0.075em; text-transform: uppercase; margin-bottom: 24px; transform: translate3d(calc((var(--mx) - 50%) / -80), calc((var(--my) - 50%) / -100), 0); }

h1 span { display: block; color: var(--hot); text-shadow: rgba(255, 49, 71, 0.34) 0px 0px 24px, rgba(255, 49, 71, 0.18) 0px 0px 70px; animation: 2.4s ease-in-out 0s infinite normal none running glowText; }

@keyframes glowText { 
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

.lead { font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--muted); max-width: 670px; line-height: 1.7; margin-bottom: 30px; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }

.btn.primary { background: linear-gradient(135deg, var(--red), var(--hot)); border-color: rgba(255, 255, 255, 0.22); box-shadow: rgba(255, 49, 71, 0.25) 0px 14px 44px; }

.btn.discord { background: linear-gradient(135deg, var(--red), var(--hot)); border-color: rgba(255, 255, 255, 0.22); box-shadow: rgba(255, 49, 71, 0.25) 0px 14px 44px; }

.status { color: var(--muted); font-size: 0.95rem; }

.status a { color: rgb(255, 215, 221); }

.showcase { min-height: 360px; border-radius: 34px; border: 1px solid var(--border); background: linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.024)), radial-gradient(circle at 50% 33%, rgba(255, 49, 71, 0.44), transparent 47%); box-shadow: rgba(0, 0, 0, 0.42) 0px 30px 100px; overflow: hidden; padding: 28px; transform: perspective(900px)
        rotateX(var(--tiltX))
        rotateY(var(--tiltY)); transition: transform 0.15s, border-color 0.25s, box-shadow 0.25s; animation: 0.95s ease 0.16s 1 normal both running fadeUp; position: relative; }

.showcase:hover { border-color: rgba(255, 49, 71, 0.45); box-shadow: rgba(255, 49, 71, 0.16) 0px 36px 110px, rgba(0, 0, 0, 0.42) 0px 30px 100px; }

.showcase::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.16), transparent 23%),
        conic-gradient(from 120deg, transparent, rgba(255,49,71,0.16), transparent, rgba(255,255,255,0.06), transparent); animation: 9s linear 0s infinite normal none running spin; opacity: 0.65; }

@keyframes spin { 
  100% { transform: rotate(360deg); }
}

.showcase-inner { position: relative; z-index: 1; height: 100%; min-height: 304px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.14); display: grid; place-items: center; text-align: center; background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016)), radial-gradient(circle, rgba(255, 49, 71, 0.27), rgba(50, 10, 18, 0.35) 52%, rgba(0, 0, 0, 0.04)); backdrop-filter: blur(7px); overflow: hidden; }

.showcase-inner::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 49, 71, 0.55), transparent 68%); filter: blur(10px); animation: 3s ease-in-out 0s infinite normal none running breathe; }

@keyframes breathe { 
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.18); opacity: 1; }
}

.showcase-logo { position: relative; z-index: 2; width: min(420px, 82%); filter: drop-shadow(rgba(255, 49, 71, 0.42) 0px 0px 34px); animation: 4.2s ease-in-out 0s infinite normal none running floatLogo; }

@keyframes floatLogo { 
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-10px) scale(1.018); }
}

.info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 28px 0px 50px; position: relative; z-index: 2; }

.info-box { border: 1px solid var(--border); background: var(--card); border-radius: 22px; padding: 22px; backdrop-filter: blur(12px); text-decoration: none; color: var(--text); min-height: 128px; transition: transform 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s; position: relative; overflow: hidden; animation: 0.9s ease 0s 1 normal both running fadeUp; }

.info-box:nth-child(2) { animation-delay: 0.08s; }

.info-box:nth-child(3) { animation-delay: 0.16s; }

.info-box::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,49,71,0.15), transparent 38%); opacity: 0; transition: opacity 0.25s; }

.info-box:hover { transform: translateY(-6px); border-color: rgba(255, 49, 71, 0.42); background: rgba(255, 255, 255, 0.09); box-shadow: rgba(255, 49, 71, 0.13) 0px 16px 50px; }

.info-box:hover::before { opacity: 1; }

.info-box h3 { position: relative; margin-bottom: 8px; font-size: 1.05rem; }

.info-box p, .info-box span { position: relative; color: var(--muted); line-height: 1.55; }

.info-box.discord-card { border-color: rgba(255, 49, 71, 0.32); box-shadow: rgba(255, 49, 71, 0.08) 0px 0px 0px 1px inset; }

footer { border-top: 1px solid var(--border); padding: 24px 0px 10px; color: var(--muted); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 0.95rem; position: relative; z-index: 2; }

footer a { color: var(--text); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; transform: none !important; }
}

@media (max-width: 900px) {
  header { align-items: flex-start; flex-direction: column; }
  nav { justify-content: flex-start; }
  .hero { grid-template-columns: 1fr; padding-top: 58px; }
  .showcase { transform: none; }
  .info { grid-template-columns: 1fr; }
  .brand-name { display: none; }
}

@media (max-width: 520px) {
  .wrap { width: min(100%, 100% - 24px); }
  header { gap: 18px; }
  .hero { padding-top: 46px; }
  .brand-logo { width: 140px; }
  nav a, .btn { padding: 10px 12px; font-size: 0.9rem; }
  .showcase { min-height: 280px; padding: 18px; }
  .showcase-inner { min-height: 240px; }
}
/* ===== 2026 CONTENT UPDATE ===== */
.section { position:relative; z-index:2; margin-top:88px; scroll-margin-top:30px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.section-head h2 { font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.045em; line-height:1; }
.kicker { display:block; color:var(--hot); font-size:.72rem; font-weight:900; letter-spacing:.2em; margin-bottom:10px; }
.section-note,.updated { color:var(--muted); font-size:.86rem; }
nav { flex-wrap:wrap; justify-content:flex-end; }
nav a { white-space:nowrap; }

.reveal-card,.status-panel { border:1px solid var(--border); background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); border-radius:28px; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.24); }
.reveal-card { display:grid; grid-template-columns:1.25fr 1fr; min-height:430px; }
.reveal-visual { min-height:430px; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 50%,rgba(255,49,71,.25),transparent 45%),linear-gradient(145deg,#19070d,#08070a); }
.reveal-visual>img, .reveal-visual>video { width:100%; height:100%; object-fit:cover; display:none; position:absolute; inset:0; }
.reveal-logo-fallback { position:absolute; inset:0; display:grid; place-items:center; padding:70px; }
.reveal-logo-fallback img { width:min(360px,80%); filter:drop-shadow(0 22px 50px rgba(255,49,71,.25)); }
.reveal-copy { padding:clamp(28px,5vw,58px); display:flex; flex-direction:column; justify-content:center; }
.reveal-copy h3 { font-size:clamp(2rem,4vw,3.7rem); margin-bottom:18px; letter-spacing:-.045em; }
.reveal-copy p { color:var(--muted); line-height:1.7; font-size:1rem; max-width:48ch; }
.text-link { color:#fff; font-weight:800; text-decoration:none; margin-top:26px; width:max-content; }
.text-link:hover { color:var(--hot); }
.slider-controls { display:flex; gap:8px; }
.slider-controls button { width:46px; height:46px; border-radius:50%; border:1px solid var(--border); color:#fff; background:rgba(255,255,255,.06); cursor:pointer; font-size:1.1rem; transition:.2s ease; }
.slider-controls button:hover { background:rgba(255,49,71,.18); border-color:rgba(255,49,71,.5); transform:translateY(-2px); }
.dots { display:flex; gap:7px; margin-top:32px; }
.dot { width:7px; height:7px; border:0; padding:0; border-radius:99px; background:rgba(255,255,255,.28); cursor:pointer; transition:.25s ease; }
.dot.active { width:26px; background:var(--hot); }
.reveal-card.swap { animation:revealSwap .32s ease; }
@keyframes revealSwap { from{opacity:.55;transform:translateY(5px)} to{opacity:1;transform:none} }

.status-panel { padding:34px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px; }
.status-indicator { display:flex; align-items:center; gap:17px; min-width:245px; }
.status-dot { width:15px; height:15px; border-radius:50%; background:#f4c542; box-shadow:0 0 22px currentColor; flex:0 0 auto; }
.status-label { color:var(--muted); font-size:.66rem; font-weight:900; letter-spacing:.16em; }
.status-panel h3 { font-size:1.35rem; margin-top:4px; }
.status-panel p { color:var(--muted); line-height:1.6; }
.status-dot.online{background:#49db87}.status-dot.development{background:#f4c542}.status-dot.maintenance{background:#ff8d42}.status-dot.offline{background:#ff4255}

.character-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.character-card { min-height:320px; border-radius:22px; border:1px solid var(--border); overflow:hidden; position:relative; background:linear-gradient(160deg,rgba(255,49,71,.13),rgba(255,255,255,.025)); transition:.25s ease; }
.character-card:hover { transform:translateY(-5px); border-color:rgba(255,49,71,.42); }
.character-art { height:225px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 70%,rgba(255,49,71,.18),transparent 50%); }
.character-art img.character-photo { width:100%; height:100%; object-fit:cover; }
.character-art img.character-fallback { width:90px; opacity:.18; filter:grayscale(1); }
.character-meta { padding:19px 20px 22px; }
.character-meta h3 { font-size:1.2rem; margin:5px 0 8px; }
.character-role { color:var(--hot); font-size:.67rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.character-status { color:var(--muted); font-size:.8rem; }
.character-status.confirmed { color:#d9ffe1; font-weight:800; letter-spacing:.04em; }

.news-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.news-card { display:block; text-decoration:none; color:inherit; border:1px solid var(--border); background:rgba(255,255,255,.045); border-radius:22px; padding:28px; transition:.25s ease; }
.news-card:hover { transform:translateY(-4px); background:rgba(255,255,255,.065); border-color:rgba(255,49,71,.38); }
.news-top { display:flex; justify-content:space-between; gap:15px; color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.news-category { color:var(--hot); }
.news-card h3 { font-size:1.45rem; margin:28px 0 10px; }
.news-card p { color:var(--muted); line-height:1.6; }

@media(max-width:900px){.reveal-card{grid-template-columns:1fr}.reveal-visual{min-height:300px}.status-panel{grid-template-columns:1fr;gap:20px}.character-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.section{margin-top:64px}.section-head{align-items:flex-start;flex-direction:column}.character-grid,.news-grid{grid-template-columns:1fr}.reveal-visual{min-height:250px}.reveal-logo-fallback{padding:45px}.status-panel{padding:25px}.section-note{display:none}}

/* ===== iOS Safari edge tint fix =====
   Safari 26 derives browser chrome tint from content touching the viewport edge.
   On mobile, make the real site header a full-bleed, edge-attached surface instead
   of leaving the 12px .wrap gutter above/around it. */
@media (max-width: 900px) {
  .wrap {
    padding-top: 0;
  }

  header {
    position: sticky;
    top: 0;
    margin-left: calc((100vw - 100%) / -2);
    margin-right: calc((100vw - 100%) / -2);
    padding: 18px max(16px, calc((100vw - 100%) / 2));
    width: 100vw;
    background: #16070c;
    z-index: 100;
  }

  /* Keep an edge-attached surface at the bottom as well, so Safari's
     floating bottom chrome samples the same site colour instead of black. */
  body::marker { content: none; }

  footer {
    margin-left: calc((100vw - 100%) / -2);
    margin-right: calc((100vw - 100%) / -2);
    padding-left: max(16px, calc((100vw - 100%) / 2));
    padding-right: max(16px, calc((100vw - 100%) / 2));
    padding-bottom: 24px;
    width: 100vw;
    background: #16070c;
  }
}

/* ===== polished mobile layout ===== */
.menu-toggle { display:none; }

@media (max-width: 900px) {
  .wrap { width: min(100% - 32px, 680px); }

  header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.16);
  }

  .brand-logo { width: 118px; max-width: none; }

  .menu-toggle {
    width: 46px;
    height: 46px;
    display: grid;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255,255,255,.065);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: white;
    cursor: pointer;
    position: relative;
    z-index: 102;
  }
  .menu-toggle span { width: 19px; height: 2px; border-radius: 3px; background: currentColor; transition: .22s ease; }
  .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  header nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(22,7,12,.96);
    box-shadow: 0 24px 70px rgba(0,0,0,.48);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  header nav.open { opacity: 1; visibility: visible; transform: none; }
  header nav a { width: 100%; border: 0; border-radius: 14px; padding: 13px 14px; background: transparent; font-size: .96rem; }
  header nav a:hover { transform: none; background: rgba(255,255,255,.075); box-shadow: none; }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 56px 0 16px;
  }
  h1 { font-size: clamp(3.3rem, 15vw, 5.8rem); line-height: .88; margin-bottom: 20px; }
  .lead { font-size: 1.06rem; line-height: 1.62; margin-bottom: 24px; }
  .actions { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 0; }
  .actions .btn { justify-content:center; min-height: 48px; text-align:center; }
  .actions .btn:first-child { grid-column: 1 / -1; }

  .showcase { min-height: 300px; padding: 16px; border-radius: 26px; }
  .showcase-inner { min-height: 266px; border-radius: 20px; }
  .showcase-logo { width: min(390px, 88%); }

  .section { margin-top: 72px; }
  .section-head { margin-bottom: 18px; }
  .section-head h2 { font-size: clamp(2rem, 9vw, 2.8rem); }

  .reveal-card { border-radius: 22px; min-height: 0; }
  .reveal-visual { min-height: 280px; aspect-ratio: 16 / 10; }
  .reveal-copy { padding: 26px 22px 28px; }
  .reveal-copy h3 { font-size: 2rem; margin-bottom: 12px; }
  .dots { margin-top: 22px; }

  .status-panel { border-radius: 22px; padding: 24px 22px; gap: 16px; }
  .status-indicator { min-width: 0; }

  .character-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .character-card { min-height: 0; border-radius: 18px; }
  .character-art { height: auto; aspect-ratio: .9 / 1; }
  .character-meta { padding: 15px 14px 17px; }
  .character-meta h3 { font-size: 1.05rem; }
  .character-status { font-size: .66rem; }

  .news-grid { grid-template-columns: 1fr; gap: 12px; }
  .news-card { padding: 22px; border-radius: 18px; }
  .news-card h3 { margin-top: 20px; }

  .info { gap: 12px; padding: 22px 0 38px; }
  .info-box { min-height: 0; padding: 20px; border-radius: 18px; }

  footer {
    font-size: .82rem;
    gap: 8px;
    padding-top: 20px;
    /* slightly overdraw the lower edge so Safari cannot expose a hairline */
    padding-bottom: max(34px, env(safe-area-inset-bottom));
    margin-bottom: -2px;
    box-shadow: 0 3px 0 #16070c;
  }
}

@media (max-width: 520px) {
  .wrap { width: calc(100% - 28px); }
  header { padding-left: 14px; padding-right: 14px; }
  .brand-logo { width: 108px; }
  .menu-toggle { width: 43px; height: 43px; }
  .hero { padding-top: 44px; gap: 34px; }
  .tag { margin-bottom: 18px; padding: 8px 12px; font-size: .9rem; }
  h1 { font-size: clamp(3.05rem, 15.4vw, 4.65rem); letter-spacing: -.07em; }
  .lead { font-size: 1rem; }
  .actions { grid-template-columns: 1fr; }
  .actions .btn:first-child { grid-column: auto; }
  .actions .btn { width: 100%; font-size: .94rem; }
  .showcase { min-height: 245px; padding: 13px; }
  .showcase-inner { min-height: 219px; }
  .reveal-visual { min-height: 225px; }
  .slider-controls button { width: 42px; height: 42px; }
  .character-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .character-meta { padding: 13px 12px 15px; }
  .character-role { font-size: .6rem; }
  .character-status { display:block; line-height:1.3; }
}

@media (max-width: 360px) {
  .character-grid { grid-template-columns: 1fr; }
  .character-art { aspect-ratio: 1.15 / 1; }
}

/* ===== mobile polish v2: compact menu + premium roster + Safari lower edge ===== */
@media (max-width: 900px) {
  /* Safari can sample just outside the visual viewport while its floating bar animates. */
  body::after { inset: -28px; }

  /* Compact popover instead of a giant sheet. */
  header nav {
    left: auto;
    right: 14px;
    top: calc(100% + 10px);
    width: min(280px, calc(100vw - 28px));
    padding: 8px;
    border-radius: 22px;
    gap: 3px;
    background: rgba(20, 5, 10, .94);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 20px 55px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.035);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
  }
  header nav a {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    font-size: .93rem;
    letter-spacing: -.01em;
  }
  header nav a + a { border-top: 1px solid rgba(255,255,255,.055); }
  header nav a::after {
    content: '›';
    margin-left: auto;
    color: rgba(255,255,255,.35);
    font-size: 1.25rem;
    line-height: 1;
  }

  /* Roster becomes a compact game-style list on phones/tablets. */
  .character-grid { grid-template-columns: 1fr; gap: 10px; }
  .character-card {
    display: grid;
    grid-template-columns: 88px minmax(0,1fr);
    align-items: stretch;
    min-height: 108px;
    border-radius: 20px;
    background: linear-gradient(110deg, rgba(255,49,71,.13), rgba(255,255,255,.035));
    box-shadow: inset 0 1px rgba(255,255,255,.035);
  }
  .character-card::after {
    content: '›';
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.26);
    font-size: 1.55rem;
    font-weight: 300;
  }
  .character-card.hero-card { background: linear-gradient(110deg, rgba(255,49,71,.14), rgba(255,255,255,.035)); }
  .character-card.villain-card { background: linear-gradient(110deg, rgba(112,28,63,.20), rgba(255,255,255,.03)); }
  .character-art {
    width: 88px;
    height: 100%;
    min-height: 108px;
    aspect-ratio: auto;
    border-right: 1px solid rgba(255,255,255,.08);
    background: radial-gradient(circle at 50% 50%, rgba(255,49,71,.22), transparent 66%);
  }
  .character-art img.character-fallback { width: 55px; opacity: .28; filter: grayscale(.65); }
  .character-meta {
    min-width: 0;
    padding: 17px 42px 16px 17px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .character-role {
    width: fit-content;
    padding: 4px 7px;
    margin-bottom: 5px;
    border-radius: 999px;
    background: rgba(255,49,71,.10);
    border: 1px solid rgba(255,49,71,.20);
    font-size: .57rem;
    letter-spacing: .14em;
  }
  .villain-card .character-role { background: rgba(168,51,96,.12); border-color: rgba(255,94,150,.16); }
  .character-meta h3 { margin: 2px 0 6px; font-size: 1.18rem; letter-spacing: -.025em; }
  .character-status { font-size: .62rem; line-height: 1.2; opacity: .82; }
}

@media (max-width: 520px) {
  header nav { right: 10px; width: min(260px, calc(100vw - 24px)); }
  .character-card { grid-template-columns: 78px minmax(0,1fr); min-height: 98px; }
  .character-art { width: 78px; min-height: 98px; }
  .character-art img.character-fallback { width: 48px; }
  .character-meta { padding: 14px 38px 14px 14px; }
  .character-meta h3 { font-size: 1.08rem; }
}

/* ===== compact mobile nav: intentionally non-liquid-glass ===== */
@media (max-width: 900px) {
  header nav {
    width: min(225px, calc(100vw - 28px));
    right: 14px;
    padding: 6px;
    gap: 1px;
    border-radius: 18px;
    background: rgba(20,5,10,.96);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 16px 42px rgba(0,0,0,.40);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  header nav a {
    min-height: 40px;
    padding: 0 11px;
    border-radius: 11px;
    font-size: .86rem;
  }
  header nav a::after { font-size: 1.05rem; }
}
@media (max-width: 520px) {
  header nav {
    width: 218px;
    max-width: calc(100vw - 24px);
    right: 10px;
  }
}


/* ===== compact content-hugging mobile menu ===== */
@media (max-width: 900px) {
  header nav {
    width: 205px;
    max-width: calc(100vw - 24px);
    right: 10px;
    padding: 4px;
    gap: 0;
    border-radius: 16px;
  }
  header nav a {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding: 10px 30px 10px 12px;
    border-radius: 10px;
    font-size: .84rem;
    line-height: 1.15;
  }
  header nav a::after { right: 11px; }
}

/* ===== back to top ===== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(25,6,11,.90);
  color: #fff;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: 0 12px 32px rgba(0,0,0,.34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.92);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .2s ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: rgba(255,49,71,.88); transform: translateY(-2px); }
@media (max-width: 900px) {
  .back-to-top {
    right: 16px;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }
}

/* ===== mobile v3: true 2-up roster + content-hugging nav ===== */
@media (max-width: 900px) {
  /* The popover should hug the longest label instead of leaving a dead gutter. */
  header nav {
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 24px);
    right: 10px;
    left: auto;
    padding: 4px;
  }
  header nav a {
    width: auto;
    min-width: 168px;
    justify-content: flex-start;
    padding: 10px 28px 10px 11px;
    text-align: left;
  }
  header nav a::after {
    position: absolute;
    right: 10px;
  }

  /* Two cards per row again, but compact. No giant unused right half. */
  .character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .character-card {
    display: block;
    min-height: 126px;
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
  }
  .character-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-right: 0;
    pointer-events: none;
    background: radial-gradient(circle at 80% 25%, rgba(255,49,71,.17), transparent 45%);
  }
  .character-art img.character-fallback {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 46px;
    opacity: .12;
  }
  .character-art img.character-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .36;
  }
  .character-meta {
    position: relative;
    z-index: 2;
    min-height: 126px;
    padding: 14px 24px 13px 14px;
    justify-content: flex-end;
  }
  .character-role {
    padding: 3px 6px;
    margin-bottom: 5px;
    font-size: .52rem;
  }
  .character-meta h3 {
    margin: 1px 0 5px;
    font-size: 1rem;
    line-height: 1.08;
  }
  .character-status {
    font-size: .52rem;
    line-height: 1.15;
    white-space: normal;
  }
  .character-card::after {
    right: 10px;
    top: auto;
    bottom: 14px;
    transform: none;
    font-size: 1.15rem;
  }
}

@media (max-width: 370px) {
  .character-grid { gap: 8px; }
  .character-meta { padding-left: 11px; padding-right: 20px; }
  .character-meta h3 { font-size: .92rem; }
  .character-status { font-size: .48rem; }
  header nav a { min-width: 160px; }
}
\n\n/* ===== final polish: subtle motion ===== */
@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
  }
  .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
  .character-card:hover,
  .news-card:hover,
  .info-box:hover,
  .status-panel:hover { transform: translateY(-4px); border-color: rgba(255,91,111,.48); box-shadow: 0 16px 40px rgba(0,0,0,.20), 0 0 28px rgba(255,49,71,.08); }
  .reveal-card:hover { transform: translateY(-3px) scale(1.008); border-color: rgba(255,91,111,.42); box-shadow: 0 18px 46px rgba(0,0,0,.24); }
  .reveal-card { transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease; }
  .character-card, .news-card, .status-panel { transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease; }
}
@media (hover: none) {
  .character-card:hover, .news-card:hover, .info-box:hover, .status-panel:hover, .reveal-card:hover { transform: none; }
}