/* ============================================================================
   DEEPER shared design tokens — single source of truth.
   Loaded by BOTH index.html (public) and admin-*.php (admin) so colour /
   surface / radius changes propagate to both. Edit design tokens HERE only.
   ============================================================================ */

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #1a1a2e;
    --bg-hover: #242440;
    --text-primary: #e0e0e8;
    --text-secondary: #8888a0;
    --accent: #6c5ce7;
    --accent-glow: rgba(108, 92, 231, 0.3);
    --border: #2a2a3e;
    /* IIDX lamp colors */
    --lamp-noplay: #333;
    --lamp-failed: #888;
    --lamp-assist: #9c27b0;
    --lamp-easy: #4caf50;
    --lamp-normal: #2196f3;
    --lamp-hard: #ff9800;
    --lamp-exhard: #f44336;
    --lamp-fc: #ffd700;
}

/* ===== Shared redesign tokens (mobile .m-root + PC .pc-root) ===== */
.m-root, .pc-root {
    /* surfaces */
    --bg-page:#0a0a10; --bg-abyss:#05060b; --bg-base:#090a12;
    --surface-1:#11131e; --surface-2:#171a28; --surface-3:#1f2232;
    --border:#222640; --border-soft:rgba(255,255,255,.065);
    /* text */
    --text-1:#e9e9f3; --text-2:#a4a9c2; --text-3:#838799;
    /* 3-axis voltage */
    --cv:#8b7cf0; --fv:#35d4c4; --sv:#5e8cf2;
    --accent-glow:rgba(139,124,240,.30); --accent-soft:rgba(139,124,240,.14);
    /* IIDX lamps (original deepers.site label palette) */
    --lamp-noplay:#555; --lamp-failed:#888; --lamp-assist:#3a7a3a;
    --lamp-easy:#6aad6a; --lamp-normal:#6a9fc9; --lamp-hard:#c47272;
    --lamp-exhard:#b0a040; --lamp-fc:#c0ccd8;
    /* score grade colors (per-theme; light mode darkens gold/silver/blue) */
    --grade-max:#ffd700; --grade-aaa:#ffd700; --grade-aa:#c0c0c0; --grade-a:#cd7f32;
    --grade-b:#4fc3f7; --grade-c:#4caf50; --grade-d:#ff9800; --grade-e:#f44336;
    /* CV/FV/SV ability-tier value colors (mAbilityColor; light mode darkens) */
    --ability-high:#ffd700; --ability-mid:#ff9800; --ability-low:#c8c8d0;
    /* radius */
    --r:16px; --r-sm:11px;
}

/* ===== Admin redesign skin =====
   Remaps the legacy var names (--bg-*, --accent, --border) to the new redesign
   palette so admin pages match the public site WITHOUT rewriting every rule.
   Scoped to body.admin-skin → zero impact on index.html. */
body.admin-skin {
    --bg-primary:#06070d;
    --bg-secondary:#11131e;   /* surface-1 */
    --bg-card:#171a28;        /* surface-2 */
    --bg-hover:#1f2232;       /* surface-3 */
    --border:#222640;
    --accent:#8b7cf0;         /* CV purple */
    --accent-glow:rgba(139,124,240,.20);
    --text-primary:#e9e9f3;
    --text-secondary:#959ab4;
    background:linear-gradient(180deg,#0c0d18 0%,#090a12 40%,#06070d 100%);
}
body.admin-skin .header {
    background:linear-gradient(96deg,#241d52 0%,#2f2862 55%,#15414a 100%);
}
/* Rounded corners + softer surfaces to match the public redesign */
body.admin-skin .upload-form,
body.admin-skin .player-header,
body.admin-skin .cmp-header,
body.admin-skin .cmp-summary,
body.admin-skin .cmp-modal,
body.admin-skin .ability-card { border-radius: var(--r-sm); }
body.admin-skin .tab { border-radius: 9px; }
body.admin-skin .btn { border-radius: 10px; box-shadow: 0 2px 10px rgba(139,124,240,.25); }
body.admin-skin .form-group input,
body.admin-skin .form-group select { border-radius: 8px; }
body.admin-skin .data-table th { letter-spacing: .6px; }
body.admin-skin .nav-ico { display: none; }  /* desktop: labels only (unchanged) */

/* ===== Admin mobile (≤768px): turn the top nav into a bottom tab bar ===== */
@media (max-width: 768px) {
    body.admin-skin .header { padding: 9px 12px; }
    body.admin-skin .header h1 { font-size: 18px; }
    body.admin-skin .nav {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 150;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border); border-bottom: none;
        box-shadow: 0 -4px 18px rgba(0,0,0,.45);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body.admin-skin .nav a {
        flex: 0 0 auto; border-bottom: none; padding: 6px 13px 7px;
        flex-direction: column; align-items: center; gap: 1px;
        font-size: 10px; letter-spacing: .3px;
    }
    body.admin-skin .nav-ico { display: flex; }
    body.admin-skin .nav-ico svg { width: 21px; height: 21px; }
    body.admin-skin .nav a.active {
        border-bottom: none; color: #fff;
        background: linear-gradient(180deg, var(--accent-glow), transparent);
        box-shadow: inset 0 -2px 0 var(--accent);
    }
    body.admin-skin .content { padding-bottom: 66px; }
}


/* ===== Merged from handoff/theme-overrides.css (2026-06-29 redesign decisions) ===== */
/* ============================================================================
   DEEPER · design-decision overrides (2026-06-29)
   Layered on top of theme.css to demonstrate the agreed-on changes:
     - Light A (Lavender Fog) palette, opt-in via <body class="theme-light">
     - Reduced radius (--r 16→8, --r-sm 11→5)
     - Primary nav emphasis (PLAYERS / UPLOAD / SETS)
     - #9 mobile row height bump
     - #10 SETS official-vs-user differentiation
   When implementing in Claude Code, merge these rules into theme.css.
   ============================================================================ */

/* ─────────── reduced radius ─────────── */
.m-root, .pc-root {
    --r:    8px;
    --r-sm: 5px;
    /* glass surface for inline nav/tabbar backgrounds (swapped in light mode) */
    --surface-1-glass: rgba(9,10,18,.92);
}
body.theme-light { --surface-1-glass: rgba(255,255,255,.85); }

/* ─────────── theme: LIGHT A — Lavender Fog ─────────── */
body.theme-light .m-root,
body.theme-light .pc-root {
    --bg-page:    #efebf5;
    --bg-abyss:   #e6e0ec;
    --bg-base:    #eee9f4;
    --surface-1:  #ffffff;
    --surface-2:  #f3eff8;
    --surface-3:  #e8e2f0;
    --border:     #dcd5e6;
    --border-soft: rgba(70,40,140,.08);
    --text-1:     #1f1936;
    --text-2:     #5b5377;
    --text-3:     #8c869f;
    --cv:         #6c5ce7;
    --fv:         #1d9486;
    --sv:         #3a5fc8;
    --accent-glow: rgba(108,92,231,.16);
    --accent-soft: rgba(108,92,231,.10);
    /* grade colors: darken gold/silver/blue so rate text reads on the light bg */
    --grade-max:#8a6100; --grade-aaa:#8a6100; --grade-aa:#787884; --grade-a:#9c5a24;
    --grade-b:#2b8fc4; --grade-c:#3a9a45; --grade-d:#cf7a00; --grade-e:#d83a2e;
    /* CV/FV/SV value tiers: deep gold/orange so the big numbers read on light */
    --ability-high:#8a6100; --ability-mid:#c06a00; --ability-low:#7a7f93;
    /* lamps: darken the faint silver FC + olive EX-HARD so lamp text reads */
    --lamp-fc:#5a6675; --lamp-exhard:#8a7320;
}

body.theme-light .pc-root {
    background: linear-gradient(180deg, #f4f0fa 0%, #efebf5 40%, #e9e3ee 100%) !important;
    color: var(--text-1);
}
body.theme-light .m-root,
body.theme-light .m-shell {
    background: linear-gradient(180deg, #f4f0fa 0%, #efebf5 40%, #e9e3ee 100%) !important;
}

body.theme-light {
    background: #efebf5;
    color: #1f1936;
}

/* legacy admin-only token map (kept in sync for completeness) */
body.theme-light {
    --bg-primary: #efebf5;
    --bg-secondary: #ffffff;
    --bg-card: #f3eff8;
    --bg-hover: #e8e2f0;
    --text-primary: #1f1936;
    --text-secondary: #5b5377;
    --accent: #6c5ce7;
    --accent-glow: rgba(108,92,231,.16);
    --border: #dcd5e6;
}

/* legacy header surfaces — soften the brand gradient for light bg */
body.theme-light .header {
    background: linear-gradient(96deg, #ffffff 0%, #f3eff8 55%, #e8e2f0 100%) !important;
    color: var(--text-1);
    border-bottom: 1px solid var(--border);
}
body.theme-light .header h1 {
    background: linear-gradient(96deg, #6c5ce7 0%, #8a6bd9 50%, #1d9486 120%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* nav bar: in light mode, give it a tinted surface so the bar reads clearly */
body.theme-light .nav-wrap {
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

/* form fields: invert input fills */
body.theme-light input,
body.theme-light textarea,
body.theme-light select {
    background: var(--surface-1) !important;
    color: var(--text-1) !important;
    border-color: var(--border) !important;
}

/* ─────────── nav primary/secondary emphasis ───────────
   PRIMARY  → PLAYERS / UPLOAD / SETS  (kept prominent)
   SECONDARY → WEEKLY / CHAT / REQUESTS / SONGS / APPLY / ABOUT (de-emphasized)

   NOTE: full restructure (DOM order + secondary group right-aligned) is for
   Claude Code. These rules visually demote the secondary group inside the
   existing nav DOM.
*/
.nav a[href="#weekly"],
.nav a[href="#chat"],
.nav a[href="#requests"],
.nav a[href="#songs"],
.nav a[href="#data"],
.nav a[href="#apply"],
.nav a[href="#about"] {
    font-size: 11.5px;
    opacity: .68;
    letter-spacing: .05em;
}
.nav a[href="#weekly"]:hover,
.nav a[href="#chat"]:hover,
.nav a[href="#requests"]:hover,
.nav a[href="#songs"]:hover,
.nav a[href="#data"]:hover,
.nav a[href="#apply"]:hover,
.nav a[href="#about"]:hover { opacity: 1; }

/* ─────────── LATEST UPDATE chip layout (採用) ───────────
   Replaces the stacked rows with horizontal pill-chips.
   Container & rows are tagged by theme-toggle.js (data-latest-list / -row).
*/
[data-latest-list="1"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
}
[data-latest-row="1"] {
    background: var(--surface-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    border-top: 1px solid var(--border-soft) !important;
    width: auto !important;
}
/* hide the "X曲更新" middle span — too noisy in chip mode */
[data-latest-row="1"] > :nth-child(2) {
    display: none !important;
}
/* tighten chip internals */
[data-latest-row="1"] > a:first-child {
    min-width: 0 !important;
    font-size: 13px !important;
}
[data-latest-row="1"] > div {
    gap: 8px !important;
}

/* ─────────── deeper abyss gradients (DARK mode push) ───────────
   #7 follow-up: more pronounced gradient on key surfaces.
   Light mode keeps its softer airy treatment unchanged.
*/
.pc-root {
    background:
        radial-gradient(55% 35% at 85% -5%, rgba(139,124,240,.14) 0%, transparent 60%),
        radial-gradient(45% 30% at 8% 100%, rgba(53,212,196,.08) 0%, transparent 65%),
        linear-gradient(180deg,#10101a 0%,#0a0a14 40%,#06070d 100%);
}
.m-shell {
    background:
        radial-gradient(50% 30% at 80% 0%, rgba(139,124,240,.16) 0%, transparent 60%),
        radial-gradient(40% 25% at 5% 100%, rgba(53,212,196,.08) 0%, transparent 65%),
        linear-gradient(180deg,#10101a 0%,#0a0a14 40%,#06070d 100%);
}

body.theme-light .pc-root {
    background:
        radial-gradient(55% 40% at 88% -5%, rgba(108,92,231,.12) 0%, transparent 60%),
        radial-gradient(45% 35% at 5% 100%, rgba(29,148,134,.08) 0%, transparent 65%),
        linear-gradient(180deg,#f4f0fa 0%,#efebf5 40%,#e9e3ee 100%) !important;
}
body.theme-light .m-shell {
    background:
        radial-gradient(50% 35% at 80% 0%, rgba(108,92,231,.14) 0%, transparent 60%),
        radial-gradient(40% 30% at 5% 100%, rgba(29,148,134,.08) 0%, transparent 65%),
        linear-gradient(180deg,#f4f0fa 0%,#efebf5 40%,#e9e3ee 100%) !important;
}

/* Voltage tile gets a subtle inner gradient (both themes) */
.pc-root [style*="border-left: 3px solid"] {
    background-image: linear-gradient(180deg, var(--surface-1), color-mix(in oklab, var(--surface-1) 92%, black));
}

/* ─────────── font-size baseline (Material 3 / Apple HIG aligned) ───────────
   Old → New:
     9-10px micro labels   → 11px   (HIG Caption 2 floor, M3 label-small)
     11px body             → 12.5px (M3 body-small floor)
     12px body             → 13.5px
     13px body             → 14px   (M3 body-medium)
     headings 24-26 → 28-30 (handled per heading)

   Inline-styled sizes are remapped at runtime by theme-toggle.js
   (normalizeFontSizes). The CSS below covers non-inline cases.
*/
.pc-root, .m-root { font-size: 14px; }
.pc-root .num, .m-root .num { font-variant-numeric: tabular-nums; }

/* page-level headings */
.pc-root h1 { font-size: 30px !important; line-height: 1.15; }
.pc-root h2 { font-size: 22px !important; line-height: 1.25; }



/* PC redesign uses raw <button> elements — tagged by theme-toggle.js with
   data-nav-priority. Secondary items get demoted; primary stays prominent. */
header nav button[data-nav-priority="secondary"] {
    opacity: .55;
    font-size: 11.5px !important;
    letter-spacing: .04em !important;
}
header nav button[data-nav-priority="secondary"]:hover {
    opacity: 1;
}
header nav button[data-nav-priority="primary"] {
    font-weight: 800 !important;
    letter-spacing: .12em !important;
}

/* ─────────── #9 mobile row height — ≥44px touch target ─────────── */
@media (max-width: 768px) {
    /* PLAYERS ranking rows (mobile redesign) */
    .m-root [data-row="player"],
    .m-root .ptable tr,
    .m-root table tr { min-height: 44px; }

    /* generic table cell taps */
    .m-root table td { padding-top: 11px; padding-bottom: 11px; }
}

/* ─────────── #10 SETS official-vs-user differentiation ───────────
   Implementations should add `data-set-official="true"` to official-set cards
   so this rule can target them. Until then, this acts as a forward-compatible
   stub Claude Code can wire up.
*/
[data-set-official="true"] {
    border-left: 3px solid var(--cv) !important;
    background: linear-gradient(180deg, var(--surface-2), var(--surface-1)) !important;
}
[data-set-official="true"] .set-badge,
[data-set-official="true"]::before {
    background: var(--cv);
    color: #fff;
}
[data-set-official="false"] .set-badge {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-3);
}

/* ── daily3 / 潜水深度 ─────────────────────────────────────────
   Card/widget surfaces follow the active theme; only the tier-reached
   overlay keeps its deep-sea dark gradient in both themes.
   NOTE: the light-mode contract site-wide is body.theme-light (set by
   theme-toggle.js) — :root[data-theme] never matches here. */
:root {
    --depth:#7fd4f0; --depth-deep:#5ac8e8; --ok:#3ecf8e; --gold:#f0c86b;
    --d3-card-bg: linear-gradient(180deg,#141428 0%,#10101c 100%);
    --d3-row-bg: rgba(255,255,255,.025);
    --d3-track: rgba(255,255,255,.07);
    --d3-odo: #b8ecfc;
    --d3-violet: #b0a6f5;
    --d3-orange: #f0aa80;
}
body.theme-light {
    --depth:#0f7fa8; --depth-deep:#1a94c4; --ok:#178a55; --gold:#9a7a1a;
    --d3-card-bg: linear-gradient(180deg,#eef7fc 0%,#ffffff 100%);
    --d3-row-bg: rgba(15,60,100,.045);
    --d3-track: rgba(15,60,100,.12);
    --d3-odo: #0a6a92;
    --d3-violet: #5d4fc8;
    --d3-orange: #a85520;
}
@keyframes d3breathe { 0%,100% { border-color: rgba(127,212,240,.4); } 50% { border-color: rgba(127,212,240,.95); } }
@keyframes d3ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2); opacity: 0; } }
@keyframes d3bubble { 0% { transform: translateY(0); opacity: .9; } 100% { transform: translateY(-52px); opacity: 0; } }
@keyframes d3rise { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes d3chip { 0% { transform: translateY(46px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.d3-ready { animation: d3breathe 2.2s ease-in-out infinite; cursor: pointer; }
/* daily3: auto-marquee for overflowing row text (ping-pong scroll) */
@keyframes d3marq {
    0%, 12% { transform: translateX(0); }
    42%, 58% { transform: translateX(var(--d3-shift, 0px)); }
    88%, 100% { transform: translateX(0); }
}
/* daily3: continuous loop marquee (replaces the ping-pong d3marq) */
@keyframes d3loop { 0%, 20% { transform: translateX(0); } 100% { transform: translateX(var(--d3-shift, 0px)); } }