/* ===========================================================================
   Sakura Isle — Lineage II Sakura Isle portal
   Cherry-blossom design system. Self-hosted, no external fonts/CDN (CSP-safe).
   Three-accent system: blossom-pink (brand/interactive) · lantern-gold
   (premium/achievement) · jade (live/success). Night-plum dark theme.
   Semantic tokens · 4/8px spacing rhythm · AA contrast · responsive · RTL.
   =========================================================================== */

/* ---- Self-hosted fonts (CSP-safe, latin subset) -------------------------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/montserrat-400.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/montserrat-500.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/montserrat-600.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/montserrat-700.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/montserrat-800.woff2") format("woff2");}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/cinzel-700.woff2") format("woff2");}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/cinzel-800.woff2") format("woff2");}

/* ---- Design tokens ------------------------------------------------------- */
:root {
    /* Surfaces (deep ink-plum, warm-cool twilight undertone) */
    --bg:        #110c17;
    --bg-2:      #170f1f;
    --surface:   #1f1629;
    --surface-2: #271c33;
    --surface-3: #31243f;
    --border:    #3a2c46;
    --border-2:  #503c5e;

    /* Text */
    --text:      #f4ecf3;
    --text-2:    #ccbdd5;
    --text-dim:  #998aa6;

    /* Brand accent — sakura blossom pink (interactive / identity) */
    --sakura:      #ff9ec4;
    --sakura-2:    #ffbcd7;
    --sakura-soft: rgba(255, 158, 196, 0.13);
    /* "red" kept as a token name for legacy selectors == sakura primary fill */
    --red:       #d34878;   /* primary button top */
    --red-2:     #b22f5d;   /* primary button bottom (white text AA) */
    --red-soft:  rgba(211, 72, 120, 0.13);

    /* Premium accent — lantern gold (achievement / rank / prime) */
    --gold:      #e9c878;
    --gold-2:    #d2ab4d;
    --gold-soft: rgba(233, 200, 120, 0.13);

    /* Live accent — jade (online / success) [token name "green" kept] */
    --green:     #46d6ad;
    --green-soft:rgba(70, 214, 173, 0.16);
    --amber:     #e0a93a;
    --amber-soft:rgba(224, 169, 58, 0.15);
    --danger:    #e5565b;
    --info:      #6aa9e0;

    /* Petal decoration */
    --petal:     #ffb3cf;
    --petal-2:   #ff8fbb;

    /* Typography — epic serif display (Cinzel) + clean sans UI (Montserrat), both self-hosted */
    --font-display: "Cinzel", "Noto Serif JP", "Trajan Pro", Georgia, "Times New Roman", serif;
    --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
    --font-mono: "SFMono-Regular", "Cascadia Code", Consolas, monospace;

    /* Spacing (4px base) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

    --radius:    12px;
    --radius-sm: 8px;
    --radius-lg: 18px;

    --shadow:    0 18px 48px rgba(0,0,0,0.50);
    --shadow-sm: 0 2px 12px rgba(0,0,0,0.38);
    --glow-pink: 0 0 28px rgba(255, 158, 196, 0.30);

    --maxw: 1200px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .petals { display: none !important; }
}
body {
    margin: 0;
    min-height: 100dvh;
    background:
        radial-gradient(1100px 620px at 50% -180px, rgba(255,158,196,0.12), transparent 70%),
        radial-gradient(900px 520px at 100% 0, rgba(70,214,173,0.07), transparent 62%),
        radial-gradient(760px 480px at 0 12%, rgba(233,200,120,0.05), transparent 60%),
        var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
[dir="rtl"] body { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", var(--font-body); }
img { max-width: 100%; display: block; }
a { color: var(--sakura); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--sakura-2); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.18; margin: 0 0 var(--space-3); letter-spacing: .4px; }
/* Arabic is a connected cursive script: use a Naskh face and never letter-space / uppercase it. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, serif; letter-spacing: normal; }
[dir="rtl"] .nav-links a, [dir="rtl"] .btn, [dir="rtl"] .section-head h2, [dir="rtl"] .cta-banner h2,
[dir="rtl"] .status-pill .label, [dir="rtl"] .footer h4 { letter-spacing: normal; text-transform: none; }
[dir="rtl"] .icon-chevron { transform: scaleX(-1); }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 var(--space-4); color: var(--text-2); }
hr { border: none; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
:focus-visible { outline: 2px solid var(--sakura); outline-offset: 2px; border-radius: 3px; }
::selection { background: rgba(255,158,196,0.30); color: #fff; }

/* ---- Layout -------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-4); }
.section { padding-block: var(--space-7); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-6); }
.section-head h2 { margin-bottom: var(--space-2); }
.section-head p { color: var(--text-dim); margin: 0; }
.skip-link {
    position: absolute; inset-inline-start: -999px; top: 0; background: var(--sakura); color: #2a0f1c;
    padding: var(--space-2) var(--space-4); z-index: 1000; border-end-end-radius: var(--radius-sm); font-weight: 700;
}
.skip-link:focus { inset-inline-start: 0; }
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.muted { color: var(--text-dim); }
.text-center { text-align: center; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---- Top navigation ------------------------------------------------------ */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(17,12,23,0.78);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-bottom: 1px solid var(--border);
}
.navbar-inner { display: flex; align-items: center; gap: var(--space-4); height: 66px; }
.brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; color: var(--text); letter-spacing: .8px; }
.brand .mark { width: 30px; height: 30px; color: var(--sakura); flex: none; filter: drop-shadow(0 0 6px rgba(255,158,196,0.45)); }
.nav-links { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; flex-wrap: wrap; }
.nav-links a {
    color: var(--text-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    font-size: .94rem; font-weight: 500; transition: background .15s, color .15s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.active { color: var(--sakura); background: var(--sakura-soft); }
.nav-toggle { display: none; background: none; border: 1px solid var(--border-2); color: var(--text); border-radius: var(--radius-sm); width: 42px; height: 42px; cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; margin: auto; }
@media (max-width: 860px) {
    .nav-toggle { display: grid; place-items: center; margin-inline-start: auto; }
    .nav-links {
        position: absolute; inset-inline: 0; top: 66px; flex-direction: column; align-items: stretch;
        background: var(--bg-2); border-bottom: 1px solid var(--border); padding: var(--space-2);
        gap: 2px; margin: 0; display: none;
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: var(--space-3); }
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: .96rem; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; transition: transform .12s var(--ease), background .15s, border-color .15s, box-shadow .15s;
    text-align: center; line-height: 1.1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: linear-gradient(180deg, var(--red), var(--red-2)); color: #fff; box-shadow: 0 6px 20px rgba(211,72,120,0.34); }
.btn-primary:hover { color: #fff; box-shadow: 0 8px 26px rgba(211,72,120,0.46); }
.btn-gold { background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #36280a; box-shadow: 0 6px 20px rgba(233,200,120,0.24); }
.btn-gold:hover { color: #36280a; box-shadow: 0 8px 26px rgba(233,200,120,0.34); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); border-color: var(--sakura); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(229,86,91,0.5); }
.btn-danger:hover { background: rgba(229,86,91,0.12); color: var(--danger); }
.btn-sm { min-height: 34px; padding: 0 var(--space-3); font-size: .85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- Cards & panels ------------------------------------------------------ */
.card {
    position: relative;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}
.card-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.card-title h3 { margin: 0; }
.card-title svg { color: var(--sakura); width: 22px; height: 22px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.panel-head h3 { margin: 0; font-size: 1.05rem; }
.panel-body { padding: var(--space-5); }

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; padding-block: var(--space-8) var(--space-7); text-align: center; overflow: hidden; isolation: isolate; }
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(820px 360px at 50% -40px, rgba(255,158,196,0.20), transparent 70%),
        radial-gradient(600px 300px at 85% 20%, rgba(70,214,173,0.10), transparent 65%);
}
/* Hero moon + branch decorations now come from hero-scene.svg / the video. */
.hero .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--sakura); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; font-size: .8rem; margin-bottom: var(--space-4); }
.hero .eyebrow svg { width: 16px; height: 16px; }
.hero h1 {
    background: linear-gradient(180deg, #ffffff 0%, #ffe3ef 55%, #ffc4dd 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 4px 40px rgba(255,158,196,0.22);
}
.hero h1 .jp { display: block; font-size: .4em; font-weight: 600; letter-spacing: .28em; color: #ffc9dd; -webkit-text-fill-color: #ffc9dd; margin-bottom: .45em; opacity: 1; text-shadow: 0 0 18px rgba(255,158,196,0.45); }
.hero .lede { max-width: 640px; margin: var(--space-4) auto var(--space-6); color: var(--text-2); font-size: 1.12rem; }
.hero-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ---- Falling petals (decorative, motion-safe) ---------------------------- */
.petals { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.petal {
    position: absolute; top: -6%; width: 14px; height: 14px;
    background: radial-gradient(circle at 30% 30%, var(--petal), var(--petal-2));
    border-radius: 100% 0 100% 0;
    opacity: 0; will-change: transform, opacity;
    animation: petal-fall linear infinite;
}
@keyframes petal-fall {
    0%   { transform: translate3d(0, -10vh, 0) rotate(0deg);     opacity: 0; }
    10%  { opacity: .85; }
    50%  { transform: translate3d(40px, 45vh, 0) rotate(220deg); opacity: .8; }
    90%  { opacity: .5; }
    100% { transform: translate3d(-30px, 105vh, 0) rotate(540deg); opacity: 0; }
}
.petal:nth-child(1)  { inset-inline-start: 6%;  animation-duration: 11s; animation-delay: 0s;   transform: scale(.7); }
.petal:nth-child(2)  { inset-inline-start: 16%; animation-duration: 14s; animation-delay: 2s;   transform: scale(1); }
.petal:nth-child(3)  { inset-inline-start: 27%; animation-duration: 9s;  animation-delay: 1s;   transform: scale(.6); }
.petal:nth-child(4)  { inset-inline-start: 38%; animation-duration: 13s; animation-delay: 4s;   transform: scale(.9); }
.petal:nth-child(5)  { inset-inline-start: 49%; animation-duration: 10s; animation-delay: .5s;  transform: scale(.75); }
.petal:nth-child(6)  { inset-inline-start: 59%; animation-duration: 15s; animation-delay: 3s;   transform: scale(1.1); }
.petal:nth-child(7)  { inset-inline-start: 69%; animation-duration: 8.5s;animation-delay: 1.5s; transform: scale(.55); }
.petal:nth-child(8)  { inset-inline-start: 78%; animation-duration: 12s; animation-delay: 5s;   transform: scale(.85); }
.petal:nth-child(9)  { inset-inline-start: 87%; animation-duration: 10.5s;animation-delay: 2.5s;transform: scale(.7); }
.petal:nth-child(10) { inset-inline-start: 94%; animation-duration: 13.5s;animation-delay: .8s; transform: scale(.95); }

/* ---- Server status widget ------------------------------------------------ */
.status-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }
.status-pill {
    display: flex; align-items: center; gap: var(--space-3); background: rgba(31,22,41,0.7);
    border: 1px solid var(--border); border-radius: 999px; padding: var(--space-2) var(--space-5);
}
.status-pill svg { color: var(--sakura); width: 22px; height: 22px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px var(--green-soft); background: var(--green); }
.status-dot.down { background: var(--danger); box-shadow: 0 0 0 4px rgba(229,86,91,0.18); }
.status-pill .label { color: var(--text-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
.status-pill .value { font-weight: 700; font-size: 1.05rem; }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } }
.stat {
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5);
    display: flex; align-items: center; gap: var(--space-4); transition: border-color .15s, transform .12s;
}
.stat:hover { border-color: var(--border-2); transform: translateY(-2px); }
.stat .ico { width: 48px; height: 48px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--sakura-soft); color: var(--sakura); flex: none; }
.stat .ico svg { width: 24px; height: 24px; }
.stat .num { font-size: 1.7rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .desc { color: var(--text-dim); font-size: .85rem; margin-top: 2px; }

/* ---- Feature cards (home) ------------------------------------------------ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }
.feature {
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6);
    transition: border-color .15s, transform .12s, box-shadow .15s;
}
.feature:hover { border-color: var(--sakura); transform: translateY(-3px); box-shadow: var(--glow-pink); }
.feature .ico { width: 52px; height: 52px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--sakura-soft); color: var(--sakura); margin-bottom: var(--space-4); }
.feature .ico svg { width: 26px; height: 26px; }
.feature h3 { margin-bottom: var(--space-2); }
.feature p { margin: 0; color: var(--text-2); }

/* ---- CTA banner ---------------------------------------------------------- */
.cta-banner {
    position: relative; overflow: hidden; text-align: center;
    background:
        radial-gradient(600px 240px at 50% 0, rgba(255,158,196,0.18), transparent 70%),
        linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-5);
}
.cta-banner h2 { margin-bottom: var(--space-2); }
.cta-banner p { max-width: 520px; margin: 0 auto var(--space-5); }

/* ---- Tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.table { width: 100%; border-collapse: collapse; min-width: 540px; }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: start; border-bottom: 1px solid var(--border); }
.table thead th { background: var(--surface-2); color: var(--gold); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; position: sticky; top: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: none; }
.table .rank { font-family: var(--font-display); font-weight: 700; color: var(--gold); width: 52px; }
.table .rank.r1 { color: #ffd700; } .table .rank.r2 { color: #cfd3d6; } .table .rank.r3 { color: #cd7f32; }
.table td.num, .table th.num { text-align: end; font-variant-numeric: tabular-nums; }

/* ---- Badges & chips ------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .3px; }
.badge-alive { background: var(--green-soft); color: var(--green); }
.badge-dead  { background: var(--red-soft); color: var(--danger); }
.badge-on    { background: var(--green-soft); color: var(--green); }
.badge-off   { background: var(--surface-3); color: var(--text-dim); }
.badge-gold  { background: var(--gold-soft); color: var(--gold); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-role  { background: var(--surface-3); color: var(--text-2); text-transform: capitalize; }

/* ---- Tabs ---------------------------------------------------------------- */
.tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); }
.tabs a {
    padding: var(--space-3) var(--space-4); color: var(--text-2); font-weight: 600; font-size: .92rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--sakura); border-bottom-color: var(--sakura); }

/* ---- Forms --------------------------------------------------------------- */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 600; font-size: .9rem; color: var(--text); }
.field .req { color: var(--danger); }
.field .hint { font-size: .8rem; color: var(--text-dim); }
.form-control {
    width: 100%; min-height: 46px; padding: var(--space-3) var(--space-4);
    background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    color: var(--text); font-family: inherit; font-size: 1rem; transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: var(--sakura); box-shadow: 0 0 0 3px var(--sakura-soft); }
.form-control::placeholder { color: var(--text-dim); }
textarea.form-control { min-height: 130px; resize: vertical; }
select.form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] select.form-control { background-position: 18px 20px, 13px 20px; }
.captcha-internal { display: flex; align-items: center; gap: var(--space-3); }
.captcha-q { font-weight: 700; font-size: 1.05rem; color: var(--sakura); white-space: nowrap; }
.captcha-input { max-width: 120px; }
.pw-wrap { position: relative; }
.pw-toggle { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 6px; }
.pw-toggle:hover { color: var(--sakura); }
.pw-toggle svg { width: 20px; height: 20px; }

/* ---- Alerts / flash ------------------------------------------------------ */
.flash-stack { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid; font-size: .94rem; }
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert-success { background: var(--green-soft); border-color: rgba(70,214,173,0.4); color: #9af0d4; }
.alert-error   { background: var(--red-soft); border-color: rgba(229,86,91,0.4); color: #f3a7aa; }
.alert-info    { background: rgba(106,169,224,0.12); border-color: rgba(106,169,224,0.4); color: #abd2f0; }

/* ---- Auth pages ---------------------------------------------------------- */
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-5);
    background: radial-gradient(700px 400px at 50% -60px, rgba(255,158,196,0.10), transparent 70%); }
.auth-card { width: 100%; max-width: 440px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border-2); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-6); }
.auth-card .brand { justify-content: center; margin-bottom: var(--space-5); font-size: 1.45rem; }
.auth-alt { text-align: center; margin-top: var(--space-4); color: var(--text-dim); font-size: .9rem; }

/* ---- Dashboard / admin shell -------------------------------------------- */
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100dvh; }
.side {
    background: var(--bg-2); border-inline-end: 1px solid var(--border); padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-1); position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
.side .brand { padding: var(--space-2) var(--space-3) var(--space-5); }
.side-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; font-size: .94rem; }
.side-link svg { width: 20px; height: 20px; flex: none; }
.side-link:hover { background: var(--surface-2); color: var(--text); }
.side-link.active { background: var(--sakura-soft); color: var(--sakura); }
.side-sep { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); padding: var(--space-4) var(--space-3) var(--space-1); }
.side-foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.main { padding: var(--space-6); min-width: 0; }
.main-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.main-head h1 { font-size: 1.8rem; margin: 0; }
.shell-topbar { display: none; }
/* Mobile off-canvas overlay: must be out of flow on desktop too, otherwise it
   becomes a third grid item in .shell and pushes .main off-screen. */
.scrim { display: none; }
@media (max-width: 860px) {
    .shell { grid-template-columns: 1fr; }
    .side {
        position: fixed; inset-inline-start: 0; top: 0; width: 250px; z-index: 200;
        transform: translateX(-110%); transition: transform .2s var(--ease);
    }
    [dir="rtl"] .side { transform: translateX(110%); }
    .side.open { transform: translateX(0); }
    .shell-topbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-2); z-index: 100; }
    .shell-topbar .nav-toggle { margin-inline-start: 0; }
    .shell-topbar .lang-switch { min-height: 44px; }
    .scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 150; display: none; }
    .scrim.open { display: block; }
}

/* ---- Character / boss cards --------------------------------------------- */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: var(--space-4); }
.char-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); transition: border-color .15s, transform .12s; }
.char-card:hover { border-color: var(--sakura); transform: translateY(-2px); }
.char-card .cname { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.char-card .crace { font-size: .8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.char-meta { display: flex; gap: var(--space-3); margin-top: var(--space-3); font-size: .85rem; color: var(--text-2); }
.char-meta b { color: var(--text); }

/* ---- Epic boss status ---------------------------------------------------- */
.section-head h1 { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; margin-bottom: var(--space-2); font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.section-head h1::after { content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 2px; }
.boss-summary { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.boss-stat { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.boss-stat .n { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.boss-stat .l { font-size: .74rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .1em; }
.boss-stat.alive .n { color: var(--green); }
.boss-stat.dead .n { color: var(--danger); }

.boss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: var(--space-4); }
.boss-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--space-4);
    background: linear-gradient(180deg, rgba(31,22,41,0.55), rgba(12,9,18,0.55)); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--space-4); padding-inline-start: var(--space-5);
    transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.boss-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--border-2); }
.boss-card.is-alive::before { background: var(--green); box-shadow: 0 0 14px var(--green); }
.boss-card.is-dead::before { background: var(--danger); opacity: .7; }
.boss-card.is-dead { opacity: .84; }
.boss-card:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
.boss-emblem { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text-dim); }
.boss-card.is-alive .boss-emblem { color: var(--green); border-color: var(--green-soft); }
.boss-emblem svg { width: 22px; height: 22px; }
.boss-main { flex: 1 1 auto; min-width: 0; }
.boss-card .bn { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boss-card .bl { font-size: .74rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.boss-status { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: end; }
.boss-respawn { font-size: .74rem; color: var(--text-dim); }
.badge-alive .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: boss-pulse 1.8s infinite; }
@keyframes boss-pulse { 0% { box-shadow: 0 0 0 0 rgba(70,214,173,0.5); } 70% { box-shadow: 0 0 0 7px rgba(70,214,173,0); } 100% { box-shadow: 0 0 0 0 rgba(70,214,173,0); } }
@media (prefers-reduced-motion: reduce) { .badge-alive .pulse { animation: none; } }

/* ---- Toggle switch (admin settings) -------------------------------------- */
.field-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.field-toggle .hint { font-size: .82rem; margin-top: 2px; }
.switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-2); transition: background .15s, border-color .15s; }
.switch-thumb { position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-dim); transition: transform .16s var(--ease), background .15s; }
.switch input:checked + .switch-track { background: var(--green-soft); border-color: var(--green); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); background: var(--green); }
[dir="rtl"] .switch input:checked + .switch-track .switch-thumb { transform: translateX(-20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--sakura); outline-offset: 2px; }

/* ---- Definition lists ---------------------------------------------------- */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); }
.dl dt { color: var(--text-dim); font-size: .88rem; }
.dl dd { margin: 0; font-weight: 600; }

/* ---- News ---------------------------------------------------------------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: var(--space-5); }
.news-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); transition: border-color .15s, transform .12s, box-shadow .15s; }
.news-card:hover { border-color: var(--sakura); transform: translateY(-2px); box-shadow: var(--glow-pink); }
.news-card .date { font-size: .8rem; color: var(--sakura); letter-spacing: .5px; }
.news-card h3 { margin: 0; font-size: 1.2rem; }
.news-card p { margin: 0; color: var(--text-2); }
.article-body { line-height: 1.8; }
.article-body p { color: var(--text); }
.article-body a { text-decoration: underline; }
.article-body h2, .article-body h3 { margin-top: var(--space-6); }
.article-body ul, .article-body ol { color: var(--text-2); padding-inline-start: var(--space-5); }
.article-body blockquote { border-inline-start: 3px solid var(--sakura); margin: var(--space-4) 0; padding: var(--space-2) var(--space-4); color: var(--text-2); background: var(--surface-2); }

/* ---- Pagination ---------------------------------------------------------- */
.pager { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }
.pager a, .pager span { min-width: 40px; min-height: 40px; display: grid; place-items: center; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2); }
.pager a:hover { border-color: var(--sakura); color: var(--sakura); }
.pager .current { background: var(--sakura-soft); border-color: var(--sakura); color: var(--sakura); font-weight: 700; }

/* ---- Footer -------------------------------------------------------------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); margin-top: var(--space-8); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; padding-block: var(--space-6); }
.footer .brand .mark { width: 26px; height: 26px; }
.footer h4 { font-family: var(--font-body); font-size: .8rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); margin-bottom: var(--space-3); }
.footer-col a { display: block; color: var(--text-2); padding: var(--space-1) 0; font-size: .92rem; }
.footer-col a:hover { color: var(--sakura); }
.footer-bottom { border-top: 1px solid var(--border); padding-block: var(--space-4); text-align: center; color: var(--text-dim); font-size: .85rem; }

/* Language switcher (nav) */
.lang-switch { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; opacity: .8; padding-inline: 6px; letter-spacing: .02em; }
.lang-switch svg { width: 18px; height: 18px; flex: none; }
.lang-switch:hover { opacity: 1; color: var(--text); }

/* ---- Empty states -------------------------------------------------------- */
.empty { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-dim); }
.empty svg { width: 48px; height: 48px; opacity: .5; margin-bottom: var(--space-3); color: var(--sakura); }

/* ---- Utilities ----------------------------------------------------------- */
.stack { display: grid; gap: var(--space-4); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }
.mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-5); }
.search-form { display: flex; gap: var(--space-2); flex: 1; min-width: 220px; }
.text-gold { color: var(--gold); } .text-red { color: var(--sakura); } .text-green { color: var(--green); }
.nowrap { white-space: nowrap; }

/* ===========================================================================
   CINEMATIC THEME LAYER — "Song of War / Sakura Isle" direction
   Epic dark Lineage II look: gold metallic wordmark, crimson CTAs, gold
   section accents, uppercase Montserrat UI, heavy vignette hero.
   =========================================================================== */
:root {
    --crimson:   #c0143a;
    --crimson-2: #8b0f28;
    --crimson-soft: rgba(179,18,41,0.16);
}

/* Navbar — darker, uppercase Montserrat like the reference */
.navbar { background: rgba(8,5,12,0.74); border-bottom: 1px solid rgba(255,255,255,0.06); }
.brand { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.nav-links a { text-transform: uppercase; letter-spacing: .13em; font-weight: 600; font-size: .82rem; }
.nav-links a:hover { color: #fff; }

/* Buttons — crimson gradient primary, gold, uppercase */
.btn { text-transform: uppercase; letter-spacing: .11em; font-weight: 700; font-family: var(--font-body); }
.btn-primary {
    background: linear-gradient(135deg, #e8608f 0%, #c0143a 52%, #8b0f28 100%);
    border: 1px solid rgba(255,255,255,0.16); color: #fff;
    box-shadow: 0 8px 26px rgba(179,18,41,0.42), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 12px 34px rgba(179,18,41,0.6); }
.btn-gold {
    background: linear-gradient(135deg, #f4dd93, #d2ab4d 58%, #b4842f);
    color: #2a1c05; border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 8px 24px rgba(210,171,77,0.30);
}
.btn-ghost { text-transform: uppercase; letter-spacing: .11em; border: 1px solid var(--border-2); background: rgba(255,255,255,0.03); }
.btn-ghost:hover { border-color: var(--sakura); color: #fff; background: rgba(211,72,120,0.10); }

/* Hero — full-bleed cinematic scene, warm god-ray + crimson floor glow + vignette */
.hero {
    position: relative; overflow: hidden;
    min-height: min(86vh, 740px); display: flex; align-items: center;
    padding-block: clamp(40px, 11vh, 120px);
    background:
        radial-gradient(120% 85% at 50% 6%, rgba(233,200,120,0.10), transparent 46%),
        radial-gradient(95% 70% at 50% 124%, rgba(179,18,41,0.20), transparent 60%),
        linear-gradient(180deg, rgba(8,5,12,0.30) 0%, rgba(8,5,12,0.10) 38%, rgba(7,5,9,0.74) 100%),
        url("/assets/img/hero-scene.svg") center 32% / cover no-repeat,
        #070509;
}
/* Animated hero video (Remotion) — layers above the SVG poster, below content.
   SVG background stays as poster/fallback; video hidden for reduced-motion. */
.hero { z-index: 0; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.hero > .container { position: relative; z-index: 3; }
.hero .petals { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none !important; } }
/* Scrim ABOVE the video (below petals + content) so centered hero text keeps AA contrast over any frame. */
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(7,5,9,0.58) 0%, rgba(7,5,9,0.40) 44%, rgba(7,5,9,0.64) 100%),
        radial-gradient(125% 100% at 50% 42%, transparent 58%, rgba(0,0,0,0.5) 100%);
}
/* Motion pause/play toggle for the autoplay hero video (revealed by JS; hidden when reduced-motion removes the video) */
.hero-motion {
    position: absolute; z-index: 4; inset-block-end: var(--space-4); inset-inline-end: var(--space-4);
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(7,5,9,0.5); border: 1px solid rgba(255,255,255,0.14); border-radius: 50%;
    color: #fff; cursor: pointer; opacity: .6; transition: opacity .15s var(--ease);
}
.hero-motion:hover, .hero-motion:focus-visible { opacity: 1; }
.hero-motion svg { width: 18px; height: 18px; }
.hero-motion .hero-motion-play { display: none; }
.hero-motion.is-paused .hero-motion-pause { display: none; }
.hero-motion.is-paused .hero-motion-play { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .hero-motion { display: none; } }
.hero .container { position: relative; z-index: 2; }
.hero .eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .32em; font-weight: 700; font-size: .72rem; }
.hero .eyebrow svg { color: var(--sakura); }

/* Hero wordmark — gold metallic (echoes the reference's forged logo) */
.hero h1 {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2.2rem, 8.5vw, 5.6rem); line-height: 1.02; overflow-wrap: anywhere;
    text-transform: uppercase; letter-spacing: .05em;
    background: linear-gradient(180deg, #ffffff 0%, #ffe7bf 34%, #e9c878 60%, #c9962f 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    text-shadow: none; filter: drop-shadow(0 6px 22px rgba(0,0,0,0.55));
}
.hero h1 .jp {
    display: block; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Sans JP", "MS PMincho", var(--font-body); font-weight: 800;
    font-size: .2em; letter-spacing: .55em; text-indent: .55em; margin-bottom: .5em;
    color: var(--sakura); -webkit-text-fill-color: var(--sakura);
    text-shadow: 0 0 24px rgba(255,158,196,0.55);
}
.hero .lede { color: #d9cfe0; font-size: clamp(1rem, 1.5vw, 1.16rem); }

/* Status pills — glassy dark slabs */
.status-pill { background: linear-gradient(180deg, rgba(31,22,41,0.72), rgba(13,10,20,0.72)); border: 1px solid rgba(255,255,255,0.07); }
.status-dot { box-shadow: 0 0 10px currentColor; }

/* Section headings — uppercase with a forged-gold underline (reference cadence) */
.section-head h2 { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.section-head h2::after {
    content: ""; display: block; width: 56px; height: 3px; margin: 14px auto 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 2px;
}

/* Feature + stat cards — darker slabs, gold edge on hover */
.feature, .stat { background: linear-gradient(180deg, rgba(31,22,41,0.66), rgba(12,9,18,0.66)); border: 1px solid rgba(255,255,255,0.06); transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
.feature:hover { border-color: rgba(233,200,120,0.38); box-shadow: 0 14px 34px rgba(0,0,0,0.45); transform: translateY(-3px); }
.feature h3 { font-family: var(--font-display); letter-spacing: .01em; }
.feature .ico, .stat .ico { color: var(--sakura); }

/* CTA banner — crimson-lit slab */
.cta-banner { border: 1px solid rgba(233,200,120,0.18); box-shadow: 0 0 60px rgba(179,18,41,0.14) inset; }
.cta-banner h2 { text-transform: uppercase; letter-spacing: .08em; }

/* Footer brand mark in Cinzel to match hero */
.footer .brand span { font-family: var(--font-display); letter-spacing: .06em; }

/* Social icon row (footer) — renders only configured networks */
.social-links { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.social-links .social {
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid var(--border-2); border-radius: 10px;
    color: var(--text-2); background: rgba(255,255,255,0.03);
    transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.social-links .social:hover { color: #fff; border-color: var(--sakura); background: rgba(211,72,120,0.12); transform: translateY(-2px); }
.social-links .social svg { width: 19px; height: 19px; }