/* ===== オセロニア攻略ラボ TOP — Strategy Lab (実データ版・竜=赤) ===== */
:root {
  --bg:#090C12; --bg-2:#0E121C; --panel:#121826; --panel-2:#161D2E;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.14);
  --ink:#EAEEF7; --ink-2:#A6AFC2; --ink-3:#6B7488; --muted:#707B92;
  --god:#f5c542; --demon:#a855f7; --dragon:#fb7185; --mix:#5fe3c0;   /* 竜=赤 */
  --s:#FF5C6C; --a:#F4C95D; --b:#4FB6FF;
  --gold-soft:rgba(244,201,93,.14);
  --r-lg:18px; --r-md:13px; --r-sm:8px; --maxw:1240px;
  --font-jp:"Zen Kaku Gothic New", system-ui, sans-serif;
  --font-en:"Chakra Petch", monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
/* ===== 銀河系・近未来サイバーSF 背景 ===== */
body { font-family:var(--font-jp); background:#04060c; color:var(--ink); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
/* 星雲(ネビュラ) + 星屑(スターフィールド多層) */
body::before { content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1100px 700px at 10% -10%, rgba(95,227,192,.10), transparent 60%),
    radial-gradient(1000px 800px at 96% 4%, rgba(168,85,247,.13), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(700px 500px at 78% 70%, rgba(251,113,133,.08), transparent 60%),
    #04060c;
}
/* 星屑: 3層の点描を重ねて宇宙感 */
body::after { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(180,220,255,.8), transparent),
    radial-gradient(1.4px 1.4px at 40% 80%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(200,180,255,.7), transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 12% 65%, rgba(150,255,230,.6), transparent);
  background-size:520px 520px, 380px 380px, 640px 640px, 300px 300px, 450px 450px, 560px 560px;
  opacity:.7; animation:starDrift 120s linear infinite; }
@keyframes starDrift { from { background-position:0 0,0 0,0 0,0 0,0 0,0 0; } to { background-position:520px 260px,-380px 190px,640px -320px,-300px 150px,450px 225px,-560px 280px; } }
/* サイバーグリッド(地平線) */
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:42%; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(95,227,192,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(95,227,192,.08) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 90%); mask-image:linear-gradient(180deg, transparent, #000 90%);
  transform:perspective(420px) rotateX(58deg); transform-origin:bottom; opacity:.5; }
@media (prefers-reduced-motion: reduce) { body::after { animation:none; } }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img { display:block; }
::selection { background:rgba(244,201,93,.3); }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.mono { font-family:var(--font-en); }

.shead { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.shead .l { display:flex; flex-direction:column; gap:6px; }
.shead .eyebrow { font-family:var(--font-en); font-size:12px; letter-spacing:.28em; font-weight:600; color:var(--god); text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.shead .eyebrow::before { content:""; width:26px; height:2px; background:var(--god); display:inline-block; }
.shead h2 { font-size:clamp(26px,3.2vw,40px); font-weight:900; letter-spacing:-.01em; line-height:1.15; }
.shead p { color:var(--ink-2); font-size:15px; max-width:52ch; }
section.block { padding:86px 0; position:relative; }
.divider { height:1px; background:linear-gradient(90deg, transparent, var(--line-2), transparent); }

/* crest (clan marker) */
.crest { position:relative; display:grid; place-items:center; flex:none; }
.crest .ring { position:absolute; inset:0; border-radius:50%; border:2px solid color-mix(in oklab, var(--cc) 60%, transparent); box-shadow:0 0 18px var(--cg), inset 0 0 12px color-mix(in oklab, var(--cc) 30%, transparent); }
.crest .core { width:56%; height:56%; border-radius:6px; transform:rotate(45deg); background:linear-gradient(135deg, color-mix(in oklab, var(--cc) 85%, #fff 0%), color-mix(in oklab, var(--cc) 40%, #000)); box-shadow:0 0 16px var(--cg); }
.crest .glyph { position:absolute; font-weight:900; color:#0A0D14; font-size:42%; font-family:var(--font-jp); text-shadow:0 1px 0 rgba(255,255,255,.4); }
/* 実駒アイコン(crestの代わり) */
.pic { border-radius:10px; object-fit:cover; flex:none; border:1px solid var(--line-2); background:#0A0D14; box-shadow:0 0 14px color-mix(in oklab, var(--cc) 22%, transparent); }
.pic.round { border-radius:50%; }

.badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-en); font-weight:600; font-size:11px; letter-spacing:.08em; padding:4px 9px; border-radius:999px; border:1px solid var(--line-2); }
.tier-badge { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; font-family:var(--font-en); font-weight:700; font-size:14px; flex:none; }
.tier-S { background:rgba(255,92,108,.16); color:var(--s); border:1px solid rgba(255,92,108,.4); }
.tier-A { background:rgba(244,201,93,.16); color:var(--a); border:1px solid rgba(244,201,93,.4); }
.tier-B { background:rgba(79,182,255,.16); color:var(--b); border:1px solid rgba(79,182,255,.4); }
.trend { font-family:var(--font-en); font-size:11px; font-weight:700; }
.trend.up { color:#4ED99A; } .trend.down { color:#FF7A88; } .trend.flat { color:var(--muted); }

/* nav */
.nav { position:sticky; top:0; z-index:60; backdrop-filter:blur(14px); background:color-mix(in oklab, var(--bg) 78%, transparent); border-bottom:1px solid var(--line); }
.nav .inner { display:flex; align-items:center; gap:26px; height:68px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:-.01em; }
.brand .mark { width:34px; height:34px; }
.brand b { font-size:17px; } .brand small { display:block; font-family:var(--font-en); font-size:9px; letter-spacing:.26em; color:var(--god); font-weight:600; }
.nav .links { display:flex; gap:4px; margin-left:8px; flex-wrap:wrap; }
.nav .links a { font-size:14px; color:var(--ink-2); padding:8px 13px; border-radius:var(--r-sm); font-weight:500; transition:.18s; }
.nav .links a:hover { color:var(--ink); background:rgba(255,255,255,.05); }
.nav .right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.search { display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 14px; color:var(--muted); font-size:13px; transition:.2s; }
.search:focus-within { border-color:var(--line-2); color:var(--ink-2); }
.search input { background:none; border:none; outline:none; color:var(--ink); width:130px; font-family:inherit; font-size:13px; }
.btn-cta { background:linear-gradient(135deg, var(--god), #E0A93A); color:#14110A; font-weight:800; font-size:13px; padding:9px 16px; border-radius:999px; transition:.2s; box-shadow:0 6px 18px rgba(244,201,93,.25); }
.btn-cta:hover { transform:translateY(-1px); box-shadow:0 10px 26px rgba(244,201,93,.4); }

/* hero */
.hero { position:relative; padding:78px 0 64px; overflow:hidden; }
.hero .grid { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero .meta-pill { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-en); font-size:12px; letter-spacing:.1em; color:var(--ink-2); background:var(--panel); border:1px solid var(--line); padding:7px 14px; border-radius:999px; margin-bottom:22px; }
.hero .meta-pill .dot { width:7px; height:7px; border-radius:50%; background:#4ED99A; box-shadow:0 0 10px #4ED99A; }
.hero h1 { font-size:clamp(38px,5.4vw,70px); font-weight:900; line-height:1.04; letter-spacing:-.02em; }
.hero h1 .hl { background:linear-gradient(120deg, var(--god), var(--dragon) 60%, var(--demon)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead { color:var(--ink-2); font-size:17px; max-width:46ch; margin:22px 0 30px; }
.hero .cta-row { display:flex; gap:14px; flex-wrap:wrap; }
.btn-ghost { border:1px solid var(--line-2); padding:11px 20px; border-radius:999px; font-weight:600; font-size:14px; transition:.2s; }
.btn-ghost:hover { background:rgba(255,255,255,.05); border-color:var(--ink-2); }
.btn-solid { background:var(--ink); color:#0A0D14; padding:12px 22px; border-radius:999px; font-weight:800; font-size:14px; transition:.2s; }
.btn-solid:hover { transform:translateY(-1px); }
.hero .stats { display:flex; gap:30px; margin-top:38px; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap; }
.hero .stats .n { font-family:var(--font-en); font-size:30px; font-weight:700; color:var(--ink); line-height:1; }
.hero .stats .k { font-size:12px; color:var(--muted); margin-top:6px; letter-spacing:.04em; }
.metacard { background:linear-gradient(165deg, var(--panel-2), var(--panel)); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.metacard h3 { font-size:14px; color:var(--ink-2); font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.metacard h3 .mono { color:var(--god); font-size:12px; letter-spacing:.1em; }
.meta-clan { display:flex; align-items:center; gap:14px; padding:13px; border-radius:var(--r-md); transition:.2s; }
.meta-clan:hover { background:rgba(255,255,255,.04); }
.meta-clan + .meta-clan { margin-top:6px; }
.meta-clan .info { flex:1; min-width:0; }
.meta-clan .info .top { display:flex; justify-content:space-between; align-items:baseline; }
.meta-clan .info .nm { font-weight:700; font-size:15px; }
.meta-clan .info .pc { font-family:var(--font-en); font-weight:700; font-size:15px; }
.meta-clan .bar { height:5px; border-radius:99px; background:rgba(255,255,255,.07); margin-top:7px; overflow:hidden; }
.meta-clan .bar i { display:block; height:100%; border-radius:99px; }

/* tier */
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:26px; }
.chip { font-size:13px; font-weight:600; padding:8px 15px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); background:var(--panel); transition:.16s; display:inline-flex; align-items:center; gap:7px; }
.chip:hover { border-color:var(--line-2); color:var(--ink); }
.chip.on { background:var(--ink); color:#0A0D14; border-color:var(--ink); }
.chip .swatch { width:9px; height:9px; border-radius:50%; }
.toolbar .sep { width:1px; height:22px; background:var(--line-2); margin:0 4px; }
.cost-filter { margin-left:auto; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; }
.cost-filter input[type=range] { accent-color:var(--god); width:130px; }
.tier-grid { display:flex; flex-direction:column; gap:14px; }
.tier-row { display:grid; grid-template-columns:64px 1fr; gap:16px; align-items:stretch; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; }
.tier-row .label { display:grid; place-items:center; border-radius:var(--r-md); font-family:var(--font-en); font-weight:700; font-size:26px; }
.tier-row.S .label { background:rgba(255,92,108,.12); color:var(--s); }
.tier-row.A .label { background:rgba(244,201,93,.12); color:var(--a); }
.tier-row.B .label { background:rgba(79,182,255,.12); color:var(--b); }
.tier-cards { display:flex; gap:12px; flex-wrap:wrap; }
.tier-empty { color:var(--muted); font-size:13px; align-self:center; padding:14px 4px; }
.pcard { width:178px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-md); padding:13px; cursor:pointer; transition:.18s; position:relative; overflow:hidden; }
.pcard::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px transparent; transition:.18s; }
.pcard:hover { transform:translateY(-3px); border-color:color-mix(in oklab, var(--cc) 55%, transparent); }
.pcard:hover::after { box-shadow:inset 0 0 30px color-mix(in oklab, var(--cc) 20%, transparent); }
.pcard .ptop { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.pcard .pname { font-weight:700; font-size:13px; line-height:1.3; }
.pcard .prole { font-size:11px; color:var(--muted); margin-top:1px; }
.pcard .pstats { display:flex; gap:8px; }
.pcard .stat { flex:1; background:rgba(0,0,0,.25); border-radius:var(--r-sm); padding:7px 9px; }
.pcard .stat .k { font-family:var(--font-en); font-size:9px; letter-spacing:.12em; color:var(--muted); }
.pcard .stat .v { font-family:var(--font-en); font-weight:700; font-size:15px; line-height:1.1; }
.pcard .stat.atk .v { color:#FF8A95; }
.pcard .stat.hp .v { color:#6FE0A6; }
.pcard .pfoot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.pcard .cost { font-family:var(--font-en); font-size:12px; color:var(--ink-2); }
.pcard .cost b { color:var(--god); font-size:14px; }
.evo-tag { position:absolute; top:8px; right:8px; font-size:9px; font-weight:900; padding:1px 6px; border-radius:5px; color:#fff; }
.evo-combat { background:linear-gradient(135deg,#fb7185,#b42318); }
.evo-normal { background:linear-gradient(135deg,#38bdf8,#1d4ed8); }
.evo-hyper { background:linear-gradient(135deg,#fde68a,#b7791f); color:#2a1a00; }

/* board */
.board-deckbar { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.board-deckbar .vs { display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:7px 14px 7px 7px; }
.board-deckbar .vs small { font-family:var(--font-en); font-size:10px; letter-spacing:.12em; color:var(--muted); display:block; }
.board-deckbar .vs b { font-size:13px; }
.board-wrap { display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:start; }
.board-stage { background:radial-gradient(circle at 50% 38%, #16203a, #0A0E18 78%); border:1px solid var(--line-2); border-radius:20px; padding:22px; box-shadow:0 30px 80px rgba(0,0,0,.55); }
.board { display:grid; grid-template-columns:repeat(6,60px); grid-template-rows:repeat(6,60px); gap:6px; }
.cell { border-radius:9px; background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.06); display:grid; place-items:center; cursor:pointer; transition:.14s; position:relative; }
.cell:hover { background:rgba(255,255,255,.1); }
.cell.legal::before { content:""; width:16px; height:16px; border-radius:50%; border:2px dashed currentColor; opacity:.55; }
.cell.legal.dark { color:var(--demon); } .cell.legal.light { color:var(--god); }
.cell.corner { box-shadow:inset 0 0 0 1px rgba(244,201,93,.3); }
.disc { width:46px; height:46px; border-radius:50%; transition:transform .35s, background .35s; box-shadow:0 4px 12px rgba(0,0,0,.5); background-size:cover; background-position:center; }
.disc.dark { background:radial-gradient(circle at 35% 30%, #C98BF5, #7A2FB8); box-shadow:0 0 16px rgba(168,85,247,.45), 0 4px 10px rgba(0,0,0,.5); }
.disc.light { background:radial-gradient(circle at 35% 30%, #FFE6A8, #D8A23A); box-shadow:0 0 16px rgba(244,201,93,.45), 0 4px 10px rgba(0,0,0,.5); }
@keyframes flip { 0%{transform:rotateY(0) scale(1)} 50%{transform:rotateY(90deg) scale(1.12)} 100%{transform:rotateY(180deg) scale(1)} }
.disc.flipping { animation:flip .4s ease; }
@keyframes drop { 0%{transform:scale(0) rotate(-40deg);opacity:0} 70%{transform:scale(1.14)} 100%{transform:scale(1);opacity:1} }
.disc.placed { animation:drop .28s cubic-bezier(.2,1.3,.5,1); }
.board-side { display:flex; flex-direction:column; gap:18px; }
.scorebar { display:flex; gap:14px; }
.scorebox { flex:1; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; position:relative; }
.scorebox.active { border-color:var(--cc); box-shadow:0 0 0 1px var(--cc), 0 0 26px color-mix(in oklab,var(--cc) 22%, transparent); }
.scorebox .who { display:flex; align-items:center; gap:9px; font-weight:700; font-size:13px; }
.scorebox .turn-tag { font-family:var(--font-en); font-size:10px; letter-spacing:.14em; color:var(--cc); margin-left:auto; opacity:0; transition:.2s; }
.scorebox.active .turn-tag { opacity:1; }
.scorebox .num { font-family:var(--font-en); font-size:40px; font-weight:700; line-height:1; margin-top:8px; }
.board-log { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; flex:1; min-height:120px; }
.board-log h4 { font-size:12px; color:var(--muted); letter-spacing:.1em; margin-bottom:10px; font-family:var(--font-en); }
.board-log .line { font-size:13px; color:var(--ink-2); padding:4px 0; border-bottom:1px dashed var(--line); display:flex; gap:8px; }
.board-log .line .mono { color:var(--god); font-size:11px; }
.board-actions { display:flex; gap:10px; }
.board-note { color:var(--muted); font-size:12.5px; line-height:1.6; }

/* decks */
.deck-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.deckcard { background:linear-gradient(165deg, var(--panel-2), var(--panel)); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; transition:.2s; position:relative; overflow:hidden; }
.deckcard::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--cc); opacity:.9; }
.deckcard:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 24px 60px rgba(0,0,0,.45); }
.deckcard .dhead { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.deckcard .dhead .dn { font-size:18px; font-weight:900; }
.deckcard .dhead .dc { font-size:12px; color:var(--cc); font-weight:600; }
.deckcard .dsummary { color:var(--ink-2); font-size:14px; min-height:64px; }
.deckcard .dmetrics { display:flex; gap:10px; margin:16px 0; }
.deckcard .metric { flex:1; background:rgba(0,0,0,.22); border-radius:var(--r-sm); padding:9px 11px; }
.deckcard .metric .k { font-size:10px; color:var(--muted); letter-spacing:.08em; }
.deckcard .metric .v { font-family:var(--font-en); font-weight:700; font-size:16px; }
.deckcard .dcore { display:flex; gap:7px; margin-top:4px; }
.mini-pic { width:38px; height:38px; border-radius:9px; object-fit:cover; cursor:pointer; transition:.16s; border:1px solid var(--line-2); background:#0A0D14; }
.mini-pic:hover { transform:translateY(-3px) scale(1.08); }
.deckcard .dopen { margin-top:16px; display:inline-block; font-size:13px; color:var(--cc); font-weight:700; }

/* drawer */
.drawer-scrim { position:fixed; inset:0; background:rgba(5,7,11,.7); backdrop-filter:blur(4px); z-index:90; opacity:0; pointer-events:none; transition:.25s; }
.drawer-scrim.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(440px,92vw); background:var(--bg-2); border-left:1px solid var(--line-2); z-index:91; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.1,1); overflow-y:auto; box-shadow:-30px 0 80px rgba(0,0,0,.6); }
.drawer.open { transform:translateX(0); }
.drawer .dh { position:relative; padding:30px 28px 24px; border-bottom:1px solid var(--line); overflow:hidden; }
.drawer .dh .bgglow { position:absolute; inset:0; background:radial-gradient(circle at 80% -10%, color-mix(in oklab,var(--cc) 30%, transparent), transparent 60%); }
.drawer .close { position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.07); display:grid; place-items:center; font-size:17px; z-index:2; transition:.15s; }
.drawer .close:hover { background:rgba(255,255,255,.16); }
.drawer .dh .row { display:flex; align-items:center; gap:16px; position:relative; z-index:1; }
.drawer .dh .nm { font-size:20px; font-weight:900; line-height:1.2; }
.drawer .dh .sub { font-size:13px; color:var(--ink-2); margin-top:5px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.drawer .body { padding:24px 28px 40px; }
.drawer .statline { display:flex; gap:12px; margin-bottom:24px; }
.drawer .statline .b { flex:1; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:13px; }
.drawer .statline .b .k { font-family:var(--font-en); font-size:10px; color:var(--muted); letter-spacing:.12em; }
.drawer .statline .b .v { font-family:var(--font-en); font-weight:700; font-size:22px; }
.skill-block { margin-bottom:18px; }
.skill-block .lab { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--cc); letter-spacing:.04em; margin-bottom:7px; }
.skill-block .lab::before { content:""; width:4px; height:14px; background:var(--cc); border-radius:2px; }
.skill-block p { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 15px; font-size:14px; color:var(--ink); line-height:1.65; }
.drawer .dmore { display:block; text-align:center; margin-top:6px; padding:12px; border-radius:var(--r-md); background:linear-gradient(135deg, var(--god), #E0A93A); color:#14110A; font-weight:800; }

/* footer */
.foot { border-top:1px solid var(--line); padding:40px 0; color:var(--muted); font-size:13px; }
.foot .inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.foot a:hover { color:var(--ink-2); }
.foot .links { display:flex; gap:18px; flex-wrap:wrap; }
.disclaimer { font-size:11.5px; color:var(--ink-3); max-width:64ch; margin-top:10px; line-height:1.6; }

@media (max-width:980px) {
  .hero .grid { grid-template-columns:1fr; gap:36px; }
  .board-wrap { grid-template-columns:1fr; }
  .deck-grid { grid-template-columns:1fr; }
  .board { grid-template-columns:repeat(6,46px); grid-template-rows:repeat(6,46px); }
  /* モバイルナビ: 検索/CTAを隠し、リンクを横スクロールチップに（はみ出し解消+ナビ可能に） */
  .nav .inner { gap:10px; height:auto; min-height:60px; padding:8px 0; }
  .nav .right { display:none; }
  .nav .links { display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-left:0; gap:2px; scrollbar-width:none; }
  .nav .links::-webkit-scrollbar { display:none; }
  .nav .links a { white-space:nowrap; flex:none; font-size:13px; padding:7px 10px; }
  .brand small { display:none; }
}

/* ===== まとめ記事(News) ===== */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.news-card { display:block; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; transition:.18s; position:relative; overflow:hidden; }
.news-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--cc); opacity:.85; }
.news-card:hover { transform:translateY(-3px); border-color:color-mix(in oklab, var(--cc) 55%, transparent); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.news-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.news-pic { width:56px; height:56px; border-radius:12px; object-fit:cover; object-position:top center; flex:none; border:2px solid color-mix(in oklab, var(--cc) 60%, transparent); background:#0A0D14; box-shadow:0 0 16px color-mix(in oklab, var(--cc) 30%, transparent); }
.news-emoji { width:56px; height:56px; border-radius:12px; flex:none; display:grid; place-items:center; font-size:28px; background:linear-gradient(160deg, color-mix(in oklab, var(--cc) 22%, var(--panel)), var(--panel)); border:1px solid color-mix(in oklab, var(--cc) 40%, transparent); }
.news-meta { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.news-cat { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid; opacity:.9; }
.news-date { font-size:11px; color:var(--muted); }
.news-title { font-weight:700; font-size:15px; line-height:1.45; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.news-sum { color:var(--ink-2); font-size:13px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:980px){ .news-grid { grid-template-columns:1fr; } }

/* ===== 環境Tier(デッキ基準) ===== */
.env-tier-grid { display:flex; flex-direction:column; gap:14px; }
.env-tier-grid .tier-row.C .label { background:rgba(168,178,209,.12); color:var(--muted); }
.env-tier-cards { display:flex; flex-wrap:wrap; gap:10px; }
.env-deck-card { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:8px 14px 8px 8px; color:var(--ink); text-decoration:none; transition:.15s; max-width:300px; }
.env-deck-card:hover { background:rgba(244,201,93,.08); border-color:rgba(244,201,93,.4); transform:translateY(-2px); }
.env-deck-card.nolink { opacity:.55; cursor:default; }
.env-deck-leader { width:46px; height:46px; border-radius:50%; border:2px solid var(--line); background:#0a0e16; object-fit:cover; flex:none; }
.env-deck-noimg { display:grid; place-items:center; color:var(--muted); font-weight:700; }
.env-deck-body { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.env-deck-body b { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.env-deck-body small { font-size:11px; color:var(--muted); }

/* ===== 公式キービジュアル(リスペクト実装) ===== */
/* ヒーロー背景: 公式KVをうっすら敷いて世界観を出す（可読性優先で低不透明度+下方向フェード） */
.hero::before { content:""; position:absolute; inset:0; background:url('./assets/official-kv.png') center 22%/cover no-repeat; opacity:.14; pointer-events:none;
  -webkit-mask-image:linear-gradient(105deg,#000 30%,rgba(0,0,0,.35) 55%,transparent 80%); mask-image:linear-gradient(105deg,#000 30%,rgba(0,0,0,.35) 55%,transparent 80%); }
.hero .wrap { position:relative; }
.hero-side { display:flex; flex-direction:column; gap:18px; }
.kv-card { margin:0; position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 46px rgba(244,201,93,.14); }
.kv-card img { display:block; width:100%; max-height:340px; object-fit:cover; object-position:center 26%; }
.kv-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 62%, rgba(9,12,18,.82)); pointer-events:none; }
.kv-credit { position:absolute; right:10px; bottom:7px; z-index:1; font-size:10px; color:rgba(234,238,247,.75); }
.kv-credit a { color:rgba(234,238,247,.9); text-decoration:underline; }

/* ナビ崩れ修正: CTAボタンが折返して円形に潰れるのを防ぐ */
.btn-cta { white-space:nowrap; flex:none; }
.nav .right { flex:none; }
.brand b { white-space:nowrap; }
.brand small { white-space:nowrap; }
@media (max-width:1240px) { .nav .links a { padding:8px 9px; font-size:13px; } }
@media (max-width:1080px) { .btn-cta { display:none; } .search input { width:96px; } }
@media (max-width:980px) {
  .hero-side { flex-direction:column; }
  .kv-card img { max-height:260px; }
  /* モバイルはヒーローが縦長になりロゴが本文に重なるため、背景KVは出さない（世界観はKVカードが担う） */
  .hero::before { display:none; }
}

/* ===== バトルシミュレーター ショーケース ===== */
.sim-showcase { display:grid; grid-template-columns:1.25fr .95fr; gap:26px; align-items:start; }
.sim-shot { position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2);
  box-shadow:0 24px 64px rgba(0,0,0,.5); transition:.2s; }
.sim-shot:hover { transform:translateY(-3px); box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 36px rgba(244,201,93,.18); border-color:rgba(244,201,93,.4); }
.sim-shot img { display:block; width:100%; }
.sim-shot-cap { position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px; font-size:12px; color:var(--ink);
  background:linear-gradient(180deg, transparent, rgba(9,12,18,.92)); }
.sim-showcase-side { display:flex; flex-direction:column; gap:18px; }
.sim-points { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sim-points li { position:relative; padding:10px 14px 10px 36px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); font-size:13px; line-height:1.6; color:var(--ink-2); }
.sim-points li::before { content:"✓"; position:absolute; left:13px; top:9px; color:var(--god); font-weight:800; }
.sim-points li b { color:var(--ink); }
@media (max-width:980px) {
  .sim-showcase { grid-template-columns:1fr; }
}

/* ===== 新駒の即日解析 ===== */
.new-piece-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.new-piece-card { display:flex; gap:12px; align-items:center; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--pc); border-radius:var(--r-md); padding:12px; color:var(--ink); transition:.15s; }
.new-piece-card:hover { transform:translateY(-2px); border-color:var(--pc); box-shadow:0 14px 36px rgba(0,0,0,.4); }
.new-piece-card img { width:58px; height:58px; border-radius:10px; flex:none; }
.np-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.np-head { display:flex; align-items:center; gap:8px; }
.np-head b { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-body small { font-size:11px; color:var(--muted); }
.np-rank { color:var(--god) !important; }

/* ===== 開催中イベントバー ===== */
.event-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 16px; }
.event-bar-label { font-weight:800; color:var(--god); font-size:13px; flex:none; }
.event-chip { display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; padding:7px 13px; color:var(--ink); text-decoration:none; transition:.15s; }
.event-chip:hover { background:rgba(244,201,93,.1); border-color:rgba(244,201,93,.45); transform:translateY(-1px); }
.event-chip b { font-size:13px; }
.event-chip .event-ext { color:var(--muted); font-size:11px; }
.event-chip small { font-size:11px; color:var(--muted); }
.event-chip.urgent { border-color:rgba(251,113,133,.55); }
.event-chip.urgent small { color:var(--dragon); font-weight:700; }
.event-pool-links a { color:var(--god); text-decoration:underline; }
.event-pool-links a:hover { color:var(--ink); }

/* ===== 公式 開催中バナー ===== */
.banner-strip { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.banner-card { display:block; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--panel); position:relative; transition:.18s; }
.banner-card:hover { transform:translateY(-3px); border-color:rgba(244,201,93,.45); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.banner-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#0a0e16; }
.banner-cap { display:block; padding:10px 12px; font-size:13px; font-weight:700; line-height:1.4; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.banner-cap small { color:var(--muted); font-weight:500; font-size:11px; }
@media (max-width:560px){ .banner-strip { grid-template-columns:1fr 1fr; gap:10px; } .banner-cap { font-size:11px; padding:8px; } }

/* ===== 銀河系サイバーSF アクセント ===== */
:root { --neon-cyan:#5fe3c0; --neon-blue:#38bdf8; --neon-magenta:#c97bff; }
/* 見出しにネオングロー */
.shead h2 { text-shadow:0 0 18px rgba(95,227,192,.25); }
.shead .eyebrow { color:var(--neon-cyan); text-shadow:0 0 12px rgba(95,227,192,.45); }
.shead .eyebrow::before { background:linear-gradient(90deg,var(--neon-cyan),transparent); box-shadow:0 0 8px var(--neon-cyan); }
.hero h1 .hl { background:linear-gradient(120deg, var(--neon-cyan), var(--neon-blue) 45%, var(--neon-magenta)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(95,227,192,.35)); }
/* ナビ: ホログラフィック下線 */
.nav { border-bottom:1px solid rgba(95,227,192,.18); box-shadow:0 1px 0 rgba(95,227,192,.06), 0 8px 30px rgba(0,0,0,.4); }
.nav .links a:hover { color:var(--neon-cyan); background:rgba(95,227,192,.08); box-shadow:inset 0 0 0 1px rgba(95,227,192,.25); }
/* カード類にホログラフィック枠+ホバーグロー */
.pcard, .news-card, .tier-row, .metacard, .new-piece-card, .banner-card, .env-deck-card, .kv-card, .sim-shot, .sim-points li {
  border-color:rgba(120,180,220,.14); }
.pcard:hover, .news-card:hover, .new-piece-card:hover, .banner-card:hover, .env-deck-card:hover {
  border-color:rgba(95,227,192,.5); box-shadow:0 18px 48px rgba(0,0,0,.5), 0 0 24px rgba(95,227,192,.14); }
/* ボタン: ネオン縁取り */
.btn-ghost { border-color:rgba(95,227,192,.35); }
.btn-ghost:hover { border-color:var(--neon-cyan); box-shadow:0 0 18px rgba(95,227,192,.3); color:var(--neon-cyan); }
.btn-cta { background:linear-gradient(135deg, var(--neon-cyan), var(--neon-blue)); color:#04121a; box-shadow:0 6px 22px rgba(56,189,248,.35); }
.btn-cta:hover { box-shadow:0 10px 30px rgba(95,227,192,.5); }
.meta-pill { border-color:rgba(95,227,192,.3); box-shadow:inset 0 0 16px rgba(95,227,192,.06); }
.meta-pill .dot { background:var(--neon-cyan); box-shadow:0 0 10px var(--neon-cyan); }
/* divider をネオンライン化 */
.divider { background:linear-gradient(90deg, transparent, rgba(95,227,192,.45), transparent); box-shadow:0 0 10px rgba(95,227,192,.2); }
/* KPI数値をネオン発光 */
.hero .stats .n { color:var(--neon-cyan); text-shadow:0 0 14px rgba(95,227,192,.4); }