/* === Cross Matrix – Cleaned CSS (2025-09-28) === */
/* Minimal, modern aesthetic */
:root{
  --bg:#0b0c10;
  --panel:#11131a;
  --ink:#e6e6eb;
  --muted:#a7a8b3;
  --acc:#7aa2ff;
  --chip:#1a1d27;
  --chip2:#212635;
  --line:#262b3a;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --radius:18px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:linear-gradient(180deg,#0b0c10,#0a0d14 40%,#0b0c10);
  color:var(--ink);
  font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
.wrap{max-width:1200px;margin:0 auto;padding:20px}
img,svg{max-width:100%;height:auto;display:block}

/* ===== Header & Navigation ===== */
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
  background:rgba(10,12,18,.7);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 16px;
}
.brand{ display:flex; align-items:center; }
.brand img, #siteLogo { height: clamp(32px, 6vw, 48px); width:auto; display:block; }

/* Primary nav (desktop) */
.nav{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.nav a{
  color:var(--muted); text-decoration:none;
  padding:8px 12px; border-radius:999px;
}
.nav a.active,.nav a:hover{ color:var(--ink); background:var(--chip); }

/* Hamburger & Mobile drawer (one true source) */
.hamburger{
  position:relative; width:40px; height:40px;
  border:1px solid var(--line); border-radius:10px; background:var(--chip2);
  cursor:pointer; display:none;
}
.hamburger span{
  position:absolute; left:8px; right:8px; height:2px; background:var(--ink);
  transition:transform .25s, top .25s, opacity .2s;
}
.hamburger span:nth-child(1){ top:12px; }
.hamburger span:nth-child(2){ top:19px; }
.hamburger span:nth-child(3){ top:26px; }
.hamburger.is-open span:nth-child(1){ top:19px; transform:rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ top:19px; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:9999; display:none;
  backdrop-filter: blur(10px) saturate(120%);
  background:rgba(10,12,18,.72);
}
.mobile-menu.is-open{ display:block; }
.mobile-menu .mobile-menu-inner{
  position:absolute; left:0; right:0; top:64px; bottom:0;
  padding:20px 18px; overflow:auto;
}
.mobile-menu a{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 6px; font-size:20px; color:var(--ink); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mobile-menu .menu-close{
  position:absolute; top:14px; right:14px; width:40px; height:40px;
  font-size:24px; line-height:40px; border:1px solid var(--line);
  border-radius:10px; background:var(--chip2); color:var(--ink);
}

.body-lock{ overflow:hidden; } /* single definition */

/* ===== Filters & Cards ===== */
.site-footer{border-top:1px solid var(--line);background:rgba(10,12,18,.6)}
.filters{margin:20px 0;padding:18px;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow)}
.filters .row{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.filters .row-actions{margin-top:10px;display:flex;justify-content:space-between;align-items:center}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:.9rem;color:var(--muted)}
.field input[type="search"], .field input[type="number"], .field select{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--chip2);color:var(--ink);
}
.range{display:flex;gap:8px;align-items:center}
.btn{border:none;border-radius:12px;padding:10px 14px;background:var(--acc);color:#fff;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.count{color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px;margin:24px 0}
.card{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#121523, #0f1322);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.thumb-wrap{position:relative;background:#0b0e18;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center}
.thumb{width:100%;height:100%;object-fit:cover}
.badge.rarity{position:absolute;left:10px;top:10px;background:#0008;padding:6px 10px;border-radius:999px;font-size:.8rem;border:1px solid var(--line)}
.meta{padding:14px}
.name{margin:0 0 6px;font-size:1.1rem}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.tag{background:var(--chip);border:1px solid var(--line);padding:4px 8px;border-radius:999px;color:var(--muted);font-size:.85rem}
.text{color:#cfd3ff;line-height:1.6}

/* ===== Featured & Hero ===== */
.featured-cards .card-list{ display:flex; gap:20px; justify-content:center; }
.featured-cards .card img{ width:150px; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.2); }
.featured-cards .card p{ text-align:center; margin-top:8px; font-weight:600; }

.hero{
  position:relative; width:100%; height:460px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden; margin-bottom:40px;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  filter:brightness(75%);
}
.hero-content{ position:relative; z-index:1; color:#fff; max-width:700px; padding:0 16px; }
.hero-content h2{ font-size:2.4rem; margin-bottom:12px; }
.hero-content p{ font-size:1.1rem; margin-bottom:20px; line-height:1.6; }
.hero-buttons{ margin-top:12px; }
.hero-buttons .btn{ display:inline-block; padding:12px 24px; margin:0 8px; font-weight:bold; border-radius:8px; text-decoration:none; transition:background .3s ease; }
.hero-buttons .btn.primary{ background:#ffcc00; color:#111; }
.hero-buttons .btn.secondary{ background:rgba(255,255,255,.1); color:#fff; border:1px solid #fff; }
.hero-buttons .btn.primary:hover{ background:#ffdb4d; }
.hero-buttons .btn.secondary:hover{ background:rgba(255,255,255,.2); }

/* Rules-specific hero override (single source) */
.hero.hero--rules{
  display:block; height:auto; min-height:0; padding:16px 0 10px;
  background:none; text-align:left; align-items:initial; justify-content:initial;
}
.hero.hero--rules h1{
  margin:0 0 4px; font-size:clamp(26px,3.2vw,42px); font-weight:800; color:#fff;
}
.hero.hero--rules .meta-sub{
  display:block; font-size:14px; color:var(--muted); margin-bottom:8px; line-height:1.5;
}
.hero.hero--rules .meta-sub .dot::before{ content:"・"; opacity:.6; }
.hero.hero--rules p{ margin:0; font-size:15px; color:var(--muted); }

/* ===== Legend / Notes / Posts / News ===== */
.card-legend{ margin:48px auto; }
.card-legend h2{ font-weight:800; font-size:1.4rem; margin-bottom:16px; }

.legend-wrap{
  display:grid; grid-template-columns:minmax(240px,420px) 1fr; gap:28px; align-items:start;
}
.legend-card img{
  width:100%; height:auto; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.legend-card figcaption{ font-size:.8rem; color:#888; margin-top:6px; }

.legend-list{ counter-reset:legend; list-style:none; margin:0; padding:0; }
.legend-list li{
  counter-increment:legend; position:relative; padding-left:44px;
  margin:12px 0 14px; line-height:1.7;
}
.legend-list li::before{
  content:counter(legend); position:absolute; left:0; top:2px;
  width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  font-weight:800; color:#fff; background:#0E4E5A; box-shadow:0 2px 6px rgba(0,0,0,.15) inset;
}
.legend-list strong{ margin-right:.25em; }

.news-lead{ color:#666; margin:8px 0 12px; }

.news-accordion{ border-top:1px solid rgba(0,0,0,.08); }
.news-entry{ border-bottom:1px solid rgba(0,0,0,.08); }
.news-entry>summary{
  list-style:none; cursor:pointer; display:flex; gap:12px; align-items:baseline; padding:12px 0;
}
.news-entry>summary::-webkit-details-marker{ display:none; }
.news-entry time{
  width:8ch; flex:0 0 auto; font-variant-numeric:tabular-nums; color:#666;
}
.news-cat{ font-size:.8rem; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.08); }
.news-title{ flex:1; }
.news-entry[open]>summary .news-title{ text-decoration:underline; }
.news-body{ padding:4px 0 14px; line-height:1.8; }

.post{ max-width:840px; margin:28px auto; }
.post-header h1{ font-size:clamp(1.4rem,2.2vw,2rem); margin:0 0 8px; }
.post-meta{ display:flex; gap:10px; align-items:center; color:#666; margin-bottom:18px; }
.post-body{ line-height:1.9; }
.post-body img{ max-width:100%; height:auto; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.15); margin:10px 0; }
.post-nav{ margin-top:28px; }

/* Sleek News list */
.news{ --accent:#e5c259; --line:rgba(255,255,255,.10); --bg:rgba(255,255,255,.035); --bg-hover:rgba(255,255,255,.065); }
.news-list{ list-style:none; margin:12px 0 20px; padding:0; display:flex; flex-direction:column; gap:10px; }
.news-item a{
  display:grid; grid-template-columns:9ch auto 1fr auto; align-items:center; column-gap:12px;
  padding:12px 14px; border-radius:12px; background:var(--bg); border:1px solid var(--line);
  color:inherit; text-decoration:none; transition:transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
.news-item a:hover{ background:var(--bg-hover); border-color:rgba(229,194,89,.35); box-shadow:0 0 0 2px rgba(229,194,89,.15); transform:translateY(-1px); }
.news-item time{ width:9ch; font-variant-numeric:tabular-nums; color:#98a1ab; }
.news-cat{ font-size:.78rem; padding:2px 10px; border-radius:999px; color:#ead99a; background:linear-gradient(180deg, rgba(229,194,89,.18), rgba(229,194,89,.06)); border:1px solid rgba(229,194,89,.35); }
.news-title{ font-weight:600; letter-spacing:.01em; }
.news-item a::after{ content:"→"; opacity:.6; transition:transform .15s, opacity .15s; }
.news-item a:hover::after{ transform:translateX(4px); opacity:1; }

/* ===== Rules / Board diagrams ===== */
.field-rows{ display:grid; grid-template-columns:minmax(280px,1fr) 320px; gap:16px; align-items:start; }
.grid-diagram{ margin:0; }
.board-svg{ width:100%; height:auto; display:block; }
.zone-notes{ margin:0; padding-left:1.1em; }

/* Card note layout */
.card-note{ display:grid; grid-template-columns:110px 1fr; gap:12px; }
.card-note__fig img{ width:100%; max-width:110px; aspect-ratio:3/4; height:auto; object-fit:cover; }

/* 2 card images left, list on right (no HTML change) */
.legend-wrap:has(> .legend-card + .legend-card){
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(220px,280px) 1fr;
  gap:20px; align-items:start;
}
.legend-wrap:has(> .legend-card + .legend-card) .legend-card:nth-of-type(1){ grid-column:1; }
.legend-wrap:has(> .legend-card + .legend-card) .legend-card:nth-of-type(2){ grid-column:2; }
.legend-wrap:has(> .legend-card + .legend-card) .legend-list{ grid-column:3; }

/* ===== Utilities ===== */
.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); }
.cta .btn{ width:100%; }

/* ===== Responsive ===== */
/* Desktop → tablet */
@media (max-width: 960px){
  .filters .row{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .rules-wrap{ grid-template-columns:1fr; }
  .toc{ display:none; }
  .toc.is-open{
    display:block; position:fixed; inset:64px 12px 12px 12px; z-index:50; overflow:auto;
    background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow);
  }
  .toc-toggle{ position:sticky; top:12px; z-index:51; }
  /* Mobile header mode */
  .hamburger{ display:block; }
  .nav{ display:none !important; }
  .brand img, #siteLogo{ height:36px; }
  .site-header .wrap{ flex-direction:row; }
  .field-rows{ grid-template-columns:1fr; }
  .zone-notes{ margin-top:12px; }
}

/* Phone */
@media (max-width: 560px){
  .grid{ grid-template-columns:1fr; }
  .news-item a{ grid-template-columns:9ch 1fr auto; }
  .nav a{ padding:6px 10px; }
  .brand img, #siteLogo{ height:32px !important; }
  .cta .btn{ width:100% }
  .site-header{ backdrop-filter: blur(6px) }
  .mobile-menu{ backdrop-filter: blur(8px) }
}

/* Small phones / typography helpers */
@media (max-width: 600px){
  html,body{ font-size:15px; line-height:1.7; }
  .wrap{ padding:12px; }
  .section{ padding:16px; }
  .section h2{ font-size:clamp(18px, 5.2vw, 22px); }
  .section p,.section li{ font-size:.97rem; }
  a,button{ min-height:44px; }
  .nav a{ font-size:14px; }
  /* SVG labels larger for mobile */
  svg.board-svg text{
    font-size:16px !important; font-weight:600; paint-order:stroke;
    stroke:rgba(0,0,0,.55); stroke-width:1.4px; letter-spacing:.02em;
  }
  /* legend vertical */
  .legend-wrap{ grid-template-columns:1fr; }
  .legend-card img{ max-width:72%; margin:0 auto; }
  /* 2-card variant collapses to single column */
  .legend-wrap:has(> .legend-card + .legend-card){ grid-template-columns:1fr; }
  .legend-wrap:has(> .legend-card + .legend-card) .legend-card:nth-of-type(1),
  .legend-wrap:has(> .legend-card + .legend-card) .legend-card:nth-of-type(2),
  .legend-wrap:has(> .legend-card + .legend-card) .legend-list{ grid-column:1; }
  /* card note single column */
  .card-note{ grid-template-columns:1fr; }
  .card-note__fig{ max-width:160px; }
}