/* ============================================================
   Buran Casino — deck.css
   Tokens · reset · a11y · components (by-component order)
   ============================================================ */

:root {
    /* colors (final, ±2% shifted) */
    --accent-main: #1c2844;
    --accent: #d741a7;
    --surface: #0f172a;
    --highlight-active: #c92b8b;
    --grad-light: #2cced1;
    --gradient-to: #e9a43f;
    --ink: #ffffff;
    --muted: #c2c0c0;
    --card-bg: #16223c;
    --color-surface-x: #1c2844;
    --border: #2c3c60;
    --alert-bg: #dc2626;

    /* fonts */
    --display-font: "Outfit", system-ui, sans-serif;
    --body-font: "Barlow", system-ui, sans-serif;

    /* container (CONT-06) */
    --shell-width: 1400px;
    --measure: 720px;
    --inset-desktop: 24px;

    /* spacing (SPACE-04) */
    --spacing-xs: 6px;
    --gap-sm: 12px;
    --spacing-md: 20px;
    --gap-lg: 32px;
    --gap-xl: 44px;
    --space-section-x: 48px;

    /* geometry (GEO-10) */
    --corner-sm: 8px;
    --rounded-md: 14px;
    --corner-lg: 22px;

    /* motion (MOTION-06) */
    --ease-x: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-x: 220ms;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--body-font);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display-font); line-height: 1.15; margin: 0 0 var(--gap-sm); font-weight: 700; }
p { margin: 0 0 var(--spacing-md); }
img { max-width: 100%; display: block; }
a { color: var(--grad-light); text-decoration: none; transition: color var(--dur-x) var(--ease-x); }
a:hover { color: var(--ink); }
ul, ol { margin: 0 0 var(--spacing-md); padding-left: 1.3em; }
strong { color: var(--ink); font-weight: 700; }

/* ---------- a11y ---------- */
.skip-link {
    position: absolute; left: var(--spacing-md); z-index: 200;
    background: var(--accent); color: var(--ink);
    padding: 10px 16px; border-radius: var(--corner-sm);
}
.skip-link:not(:focus) { top: -200px !important; }
.skip-link:focus { top: var(--spacing-md); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--grad-light); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- structural helpers ---------- */
.page { display: block; }
.canvasFooter-brand { display: block; }
.canvasFooter-col { display: block; }
.cellTrack-body { flex: 1 1 auto; }

/* ---------- shared section width ---------- */
.huskZone-inner, .canvasFooter-inner, .boltContainer-inner, .stallZone-inner,
.nookBunch-inner, .arrowFooter-inner, .chipWrapper-inner, .fragmentGrid-inner,
.boardBar-inner, .rayModule-inner, .chipGroup-inner, .cellTrack-inner,
.elementGroup-inner, .shellRegion-inner {
    max-width: calc(var(--shell-width) + 2 * var(--inset-desktop));
    margin-inline: auto;
    padding-inline: var(--inset-desktop);
    width: 100%;
}
.vectorBar-readable, .slateGroup-readable {
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--inset-desktop);
}

/* buttons (shared look) */
.boltContainer-btn, .boardBar-btn, .fragmentGrid-btn, .chipGroup-btn,
.shellRegion-btn, .cellTrack-cta, .elementGroup-btn--accept-x {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--ink);
    font-family: var(--display-font); font-weight: 700; font-size: 16px;
    padding: 14px 30px; border-radius: var(--rounded-md);
    border: 0; cursor: pointer; white-space: nowrap;
    transition: background var(--dur-x) var(--ease-x), transform var(--dur-x) var(--ease-x);
}
.boltContainer-btn:hover, .boardBar-btn:hover, .fragmentGrid-btn:hover,
.chipGroup-btn:hover, .shellRegion-btn:hover, .elementGroup-btn--accept-x:hover {
    background: var(--highlight-active); color: var(--ink);
    transform: translateY(-2px);
}

/* ============================================================
   HEADER — huskZone (HEAD-02 / NAV-01 / AUTH-NONE)
   ============================================================ */
.huskZone {
    position: relative;
    background: var(--accent-main);
    border-bottom: 1px solid var(--border);
}
.huskZone-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--spacing-md);
    padding-block: 14px;
}
.huskZone-logo { flex-shrink: 0; display: inline-flex; }
.huskZone-logo-pill {
    display: inline-flex; align-items: center; justify-content: center;
    background: #ffffff; padding: 6px 14px; border-radius: var(--rounded-md);
}
.huskZone-logo-img { height: 88px; width: auto; }
.huskZone-nav { margin-left: auto; }
.huskZone-nav-list {
    display: flex; flex-wrap: nowrap; align-items: center;
    gap: var(--gap-lg); list-style: none; margin: 0; padding: 0;
}
.huskZone-nav-item { margin: 0; }
.huskZone-nav-link {
    color: var(--ink); font-family: var(--display-font);
    font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
}
.huskZone-nav-link:hover { color: var(--accent); }
.huskZone-nav-link[aria-current="page"] { color: var(--grad-light); }
.huskZone-toggle {
    display: none; margin-left: auto; flex-direction: column; gap: 5px;
    background: transparent; border: 0; cursor: pointer; padding: 8px;
}
.huskZone-toggle-bar {
    display: block; width: 26px; height: 3px; border-radius: 2px;
    background: var(--ink); transition: transform var(--dur-x) var(--ease-x);
}
.huskZone-drawer {
    display: none;
    background: var(--accent-main);
    border-top: 1px solid var(--border);
    padding-block: var(--spacing-md);
}
.huskZone-drawer.is-open { display: block; }
.huskZone-drawer-list { list-style: none; margin: 0; padding: 0 var(--inset-desktop); }
.huskZone-drawer-item { border-bottom: 1px solid var(--border); }
.huskZone-drawer-link {
    display: block; padding: 14px 0; color: var(--ink);
    font-family: var(--display-font); font-weight: 600; font-size: 17px;
}
.huskZone-drawer-link:hover { color: var(--accent); }
.huskZone-drawer-link[aria-current="page"] { color: var(--grad-light); }

/* ============================================================
   HERO — boltContainer (HERO-05)
   ============================================================ */
.boltContainer { padding-block: var(--space-section-x); background:
    radial-gradient(120% 140% at 85% 0%, rgba(45,212,212,0.10), transparent 55%),
    radial-gradient(120% 140% at 0% 100%, rgba(215,65,167,0.14), transparent 50%),
    var(--surface); }
.boltContainer-inner { display: flex; align-items: center; gap: var(--gap-xl); }
.boltContainer-copy { flex: 1 1 52%; }
.boltContainer-eyebrow {
    display: inline-block; text-transform: uppercase; letter-spacing: 0.16em;
    font-size: 13px; font-weight: 700; color: var(--grad-light);
    margin-bottom: var(--gap-sm);
}
.boltContainer-title { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: var(--spacing-md); }
.boltContainer-sub { color: var(--muted); font-size: 1.12rem; max-width: 560px; margin-bottom: var(--gap-lg); }
.boltContainer-btn { font-size: 17px; padding: 16px 34px; }
.boltContainer-media { flex: 1 1 48%; }
.boltContainer-img {
    width: 100%; height: auto; border-radius: var(--corner-lg);
    border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

/* ============================================================
   PAGE HEADER — stallZone (PHEAD-01)
   ============================================================ */
.stallZone { padding-block: var(--space-section-x); border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--accent-main), var(--surface)); }
.stallZone-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.stallZone-sub { color: var(--muted); max-width: var(--measure); margin: 0; }

/* ============================================================
   PROSE — vectorBar (PROSE-07)
   ============================================================ */
.vectorBar { padding-block: var(--space-section-x); }
.vectorBar-heading { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--ink); }
.vectorBar-readable p { color: var(--muted); }
.vectorBar-readable a { color: var(--grad-light); text-decoration: underline; text-underline-offset: 3px; }
.vectorBar-readable a:hover { color: var(--ink); }
.vectorBar-list, .vectorBar-steps { color: var(--muted); }
.vectorBar-list li, .vectorBar-steps li { margin-bottom: var(--spacing-xs); }
.vectorBar-figure { margin: var(--gap-lg) 0 0; }
.vectorBar-figure img { width: 100%; height: auto; border-radius: var(--rounded-md); border: 1px solid var(--border); }
.vectorBar-figure--context { margin-top: var(--spacing-md); }
.vectorBar-figure--detail { margin-top: var(--gap-lg); }

/* ============================================================
   ITEMS GRID — nookBunch (GRID-12)
   ============================================================ */
.nookBunch { padding-block: var(--space-section-x); background: var(--card-bg); }
.nookBunch-heading { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: var(--gap-lg); }
.nookBunch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-md); }
.nookBunch-card {
    background: var(--color-surface-x); border: 1px solid var(--border);
    border-radius: var(--rounded-md); padding: var(--gap-lg);
    transition: transform var(--dur-x) var(--ease-x), border-color var(--dur-x) var(--ease-x);
}
.nookBunch-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.nookBunch-card-title { font-size: 1.18rem; color: var(--gradient-to); }
.nookBunch-card-text { color: var(--muted); margin: 0; font-size: 0.98rem; }

/* ============================================================
   REVIEWS — chipWrapper (REV-09)
   ============================================================ */
.chipWrapper { padding-block: var(--space-section-x); }
.chipWrapper-heading { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: var(--gap-lg); }
.chipWrapper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-md); }
.chipWrapper-card {
    background: var(--color-surface-x); border: 1px solid var(--border);
    border-radius: var(--rounded-md); padding: var(--gap-lg);
}
.chipWrapper-stars { color: var(--gradient-to); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: var(--gap-sm); }
.chipWrapper-text { color: var(--muted); font-style: italic; }
.chipWrapper-author { font-family: var(--display-font); font-weight: 700; color: var(--ink); margin: 0; }

/* ============================================================
   FAQ — arrowFooter (FAQ-08)
   ============================================================ */
.arrowFooter { padding-block: var(--space-section-x); background: var(--card-bg); }
.arrowFooter-heading { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: var(--gap-lg); }
.arrowFooter-list { display: flex; flex-direction: column; gap: var(--gap-sm); }
.arrowFooter-item {
    background: var(--color-surface-x); border: 1px solid var(--border);
    border-radius: var(--rounded-md); padding: var(--spacing-md) var(--gap-lg);
}
.arrowFooter-q {
    cursor: pointer; font-family: var(--display-font); font-weight: 600;
    font-size: 1.08rem; color: var(--ink); list-style: none;
    display: flex; justify-content: space-between; gap: var(--spacing-md);
}
.arrowFooter-q::-webkit-details-marker { display: none; }
.arrowFooter-q::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.arrowFooter-item[open] .arrowFooter-q::after { content: "−"; }
.arrowFooter-a { color: var(--muted); padding-top: var(--gap-sm); }
.arrowFooter-a p { margin: 0; }

/* ============================================================
   CTA BLOCK — fragmentGrid (CTA-08)
   ============================================================ */
.fragmentGrid { padding-block: var(--space-section-x); }
.fragmentGrid-inner {
    background: linear-gradient(120deg, var(--accent-main), var(--highlight-active));
    border: 1px solid var(--border); border-radius: var(--corner-lg);
    padding: var(--gap-xl); text-align: center;
}
.fragmentGrid-title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.fragmentGrid-text { color: var(--ink); max-width: 640px; margin: 0 auto var(--gap-lg); }
.fragmentGrid-btn { font-size: 17px; }

/* ============================================================
   INLINE CTA — boardBar (INLINE-CTA-03)
   ============================================================ */
.boardBar { padding-block: var(--gap-lg); }
.boardBar-inner {
    display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg);
    background: var(--color-surface-x); border: 1px solid var(--accent);
    border-radius: var(--rounded-md); padding: var(--gap-lg) var(--gap-xl);
}
.boardBar-copy { flex: 1 1 auto; }
.boardBar-title { font-size: 1.3rem; margin-bottom: 4px; }
.boardBar-text { color: var(--muted); margin: 0; }
.boardBar-btn { flex-shrink: 0; }

/* ============================================================
   DATA TABLE — rayModule (TABLE-04)
   ============================================================ */
.rayModule { padding-block: var(--space-section-x); }
.rayModule-heading { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: var(--gap-lg); }
.rayModule-scroll { overflow-x: auto; border-radius: var(--rounded-md); border: 1px solid var(--border); }
.rayModule-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.rayModule-table th, .rayModule-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.rayModule-table th { background: var(--accent-main); color: var(--ink); font-family: var(--display-font); }
.rayModule-table td { color: var(--muted); }
.rayModule-table tbody tr:last-child td { border-bottom: 0; }

/* ============================================================
   LEGAL — slateGroup (LEGAL-05)
   ============================================================ */
.slateGroup { padding-block: var(--space-section-x); }
.slateGroup-intro { color: var(--muted); font-size: 1.08rem; }
.slateGroup-block { margin-top: var(--gap-lg); }
.slateGroup-subheading { font-size: 1.35rem; color: var(--ink); }
.slateGroup-p { color: var(--muted); }
.slateGroup-list { color: var(--muted); }
.slateGroup-list li { margin-bottom: var(--spacing-xs); }
.slateGroup-disclaimer {
    margin-top: var(--gap-lg); padding: var(--spacing-md) var(--gap-lg);
    border-left: 3px solid var(--accent); background: var(--color-surface-x);
    color: var(--muted); font-size: 0.95rem; border-radius: var(--corner-sm);
}

/* ============================================================
   CONTACT FORM — chipGroup (FORM-07)
   ============================================================ */
.chipGroup { padding-block: var(--space-section-x); }
.chipGroup-intro { color: var(--muted); max-width: 720px; }
.chipGroup-form {
    background: var(--color-surface-x); border: 1px solid var(--border);
    border-radius: var(--rounded-md); padding: var(--gap-xl); max-width: 720px;
    display: flex; flex-direction: column; gap: var(--spacing-md);
}
.chipGroup-field { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.chipGroup-label { font-family: var(--display-font); font-weight: 600; color: var(--ink); }
.chipGroup-input {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--corner-sm); padding: 12px 14px; color: var(--ink);
    font-family: var(--body-font); font-size: 16px;
}
.chipGroup-input:focus { border-color: var(--accent); outline: none; }
.chipGroup-textarea { resize: vertical; min-height: 130px; }
.chipGroup-btn { align-self: flex-start; }
.chipGroup-success {
    margin: 0; padding: var(--spacing-md); border-radius: var(--corner-sm);
    background: rgba(44,206,209,0.15); border: 1px solid var(--grad-light);
    color: var(--ink);
}

/* ============================================================
   AUTHOR CARD — cellTrack (AUTH-08)
   ============================================================ */
.cellTrack { padding-block: var(--space-section-x); }
.cellTrack-inner {
    display: flex; gap: var(--gap-xl); align-items: flex-start;
    background: var(--color-surface-x); border: 1px solid var(--border);
    border-radius: var(--corner-lg); padding: var(--gap-xl);
}
.cellTrack-photo {
    width: 160px; height: 160px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--accent); flex-shrink: 0;
}
.cellTrack-name { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 4px; }
.cellTrack-role { color: var(--grad-light); font-weight: 600; margin-bottom: var(--spacing-md); }
.cellTrack-bio { color: var(--muted); }
.cellTrack-exp { list-style: none; padding: 0; margin: var(--spacing-md) 0 0; display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.cellTrack-exp-item {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 999px; padding: 6px 14px; font-size: 0.9rem; color: var(--muted);
}

/* ============================================================
   AUTHOR BYLINE — capsuleRail (BYLINE-05)
   ============================================================ */
.capsuleRail { padding-block: var(--gap-lg); }
.capsuleRail-inner {
    display: flex; align-items: center; gap: var(--spacing-md);
    max-width: calc(var(--shell-width) + 2 * var(--inset-desktop));
    margin-inline: auto; padding-inline: var(--inset-desktop);
}
.capsuleRail-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.capsuleRail-meta { display: flex; flex-direction: column; }
.capsuleRail-kicker { text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; color: var(--muted); }
.capsuleRail-name { font-family: var(--display-font); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.capsuleRail-name:hover { color: var(--accent); }
.capsuleRail-role { font-size: 0.9rem; color: var(--muted); }

/* ============================================================
   COOKIE — elementGroup (COOK-07)
   ============================================================ */
.elementGroup {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: var(--accent-main); border-top: 1px solid var(--accent);
    box-shadow: 0 -12px 40px rgba(0,0,0,0.4);
}
.elementGroup[hidden] { display: none; }
.elementGroup-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg); padding-block: var(--spacing-md); }
.elementGroup-text { color: var(--muted); margin: 0; font-size: 0.95rem; }
.elementGroup-actions { display: flex; gap: var(--gap-sm); flex-shrink: 0; }
.elementGroup-btn { font-family: var(--display-font); font-weight: 600; padding: 10px 20px; border-radius: var(--corner-sm); cursor: pointer; border: 1px solid var(--border); }
.elementGroup-btn--decline-x { background: transparent; color: var(--ink); }
.elementGroup-btn--decline-x:hover { border-color: var(--ink); color: var(--ink); }

/* ============================================================
   ERROR — shellRegion (ERR-05)
   ============================================================ */
.shellRegion { padding-block: 88px; text-align: center; }
.shellRegion-code { font-family: var(--display-font); font-size: clamp(4rem, 14vw, 9rem); font-weight: 800; color: var(--accent); line-height: 1; margin: 0; }
.shellRegion-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.shellRegion-text { color: var(--muted); max-width: 560px; margin: 0 auto var(--gap-lg); }

/* ============================================================
   FOOTER — canvasFooter (FOOT-10)
   ============================================================ */
.canvasFooter { background: var(--accent-main); border-top: 1px solid var(--border); padding-block: var(--space-section-x) var(--gap-lg); margin-top: var(--gap-lg); }
.canvasFooter-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gap-xl); }
.canvasFooter-logo-pill { display: inline-flex; background: #ffffff; padding: 6px 12px; border-radius: var(--rounded-md); }
.canvasFooter-logo-img { height: 44px; width: auto; }
.canvasFooter-tagline { color: var(--muted); margin-top: var(--spacing-md); max-width: 380px; }
.canvasFooter-age { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.canvasFooter-heading { font-size: 1.05rem; color: var(--ink); margin-bottom: var(--spacing-md); }
.canvasFooter-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); }
.canvasFooter-nav-item { margin: 0; }
.canvasFooter-nav-link { color: var(--muted); font-size: 0.96rem; }
.canvasFooter-nav-link:hover { color: var(--accent); }
.canvasFooter-bar { border-top: 1px solid var(--border); margin-top: var(--gap-lg); padding-top: var(--spacing-md); }
.canvasFooter-copy { text-align: center; color: var(--muted); font-size: 0.88rem; margin: 0;
    max-width: calc(var(--shell-width) + 2 * var(--inset-desktop)); margin-inline: auto; padding-inline: var(--inset-desktop); }

/* ============================================================
   RESPONSIVE (desktop-first / BP-01)
   ============================================================ */
@media (max-width: 900px) {
    .huskZone-nav { display: none; }
    .huskZone-toggle { display: flex; }
    .boltContainer-inner { flex-direction: column; }
    .boltContainer-copy, .boltContainer-media { flex: 1 1 100%; }
    .canvasFooter-inner { grid-template-columns: 1fr 1fr; }
    .cellTrack-inner { flex-direction: column; align-items: center; text-align: center; }
    .cellTrack-exp { justify-content: center; }
    .boardBar-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
    body { font-size: 16px; }
    .canvasFooter-inner { grid-template-columns: 1fr; }
    .elementGroup-inner { flex-direction: column; align-items: flex-start; gap: var(--gap-sm); padding: 12px 14px; }
    .elementGroup-text { font-size: 13px; line-height: 1.35; }
    .elementGroup-actions { width: 100%; }
    .elementGroup-btn { padding: 8px 14px; font-size: 12px; min-height: 36px; flex: 1 1 auto; }
    .fragmentGrid-inner, .chipGroup-form, .cellTrack-inner { padding: var(--gap-lg); }
    .boltContainer-title { font-size: 2rem; }
    .huskZone-logo-img { height: 60px; }
    .canvasFooter-logo-img { height: 40px; }
}