/* NPCWAR / NPCIA — shared site stylesheet.
   Extracted from the original single-page index.html (2026-09-26 multi-page split) so every
   page (index / about / systems / map / rules / join / support) reuses one CSS file instead of
   duplicating the design. Base44版(npc-global-command.base44.app)のゴールド「天国」テーマが原典。
   色・フォントの値は NPCIA_Base44_Export/01-source-code.md の index.css から実測。 */
:root{
  --void:#f7f2e6;
  --panel:#ffffff;
  --panel-raised:#fbf8ef;
  --line:#ddd0ad;
  --ink:#2e2a1e;
  --ink-dim:#716852;
  --accent:#b08a2e;
  --accent-bright:#d4af37;
  --accent-deep:#8f6a1d;
  --amber:#b07d20;
  --amber-bright:#d4af37;
  --gold-soft:#e8c76a;
  --paper:#fffdf6;
  --paper-ink:#241f18;
  --paper-line:#c9bd9d;
  --console-bg:#20242e;
  --console-bg-2:#262b38;
  --console-line:#3a4155;
  --console-text:#a99f85;
  --console-bright:#efe8d5;
  --cut:16px;
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} }
/* Base44実サイトのcomputed styleを照合して発見した、ページ全体の固定背景グラデーション
   (Home.jsx: <div className="fixed inset-0 -z-10" style={{background:"linear-gradient(180deg,#cfdce8 0%,#e9e9df 34%,#f7f2e6 70%)"}} />)。
   単色の--voidだけでは再現できていなかった空気感の大部分はこれが担っている。 */
.bg-fixed{ position:fixed; inset:0; z-index:-10; background:linear-gradient(180deg, #cfdce8 0%, #e9e9df 34%, #f7f2e6 70%); }
body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:"Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size:16px;
  line-height:1.75;
}
h1,h2,h3{font-family:"Shippori Antique", "Zen Kaku Gothic New", serif; font-weight:400; margin:0; text-wrap:balance; letter-spacing:.01em;}
a{color:inherit;}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:"IBM Plex Mono", monospace; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.eyebrow::before{content:"✦"; font-size:12px;}
.bevel{ clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }

/* ---------- ticker ---------- */
.ticker{background:rgba(36,31,24,.92); border-bottom:3px double var(--accent-bright); overflow:hidden; white-space:nowrap; position:relative;}
.ticker__track{
  display:inline-flex; gap:48px; padding:8px 0;
  font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:.06em; color:#c9bfa8;
  animation: ticker 38s linear infinite;
}
.ticker__track span b{color:var(--accent-bright); font-weight:600;}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:50; background:rgba(251,252,253,.6); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:background .3s;}
header.nav.solid{background:rgba(251,252,253,.92);}
.nav__row{display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; font-family:"Shippori Antique",serif; font-size:22px; letter-spacing:.03em;}
.brand__mark{width:22px;height:22px; flex:none;}
.brand small{font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--accent-deep); letter-spacing:.14em; margin-left:6px; font-weight:600;}
.navlinks{display:none; gap:24px; font-size:14px; color:var(--ink-dim);}
.navlinks a{text-decoration:none; transition:color .15s; white-space:nowrap;}
.navlinks a:hover{color:var(--accent-deep);}
.navlinks a[aria-current="page"]{color:var(--accent-deep); font-weight:700;}
@media (min-width:960px){ .navlinks{display:flex;} }

.btn{
  font-family:inherit; font-size:14.5px; font-weight:600; letter-spacing:.02em; text-decoration:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border:1px solid var(--line); background:#fff; color:var(--ink);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .2s ease, color .3s ease;
}
.btn:hover{border-color:var(--accent); color:var(--accent-deep); box-shadow:0 8px 22px -10px rgba(176,138,46,.45); transform:translateY(-1px);}
.btn:active{transform:translateY(1px);}
.btn--accent{ background:linear-gradient(180deg, var(--gold-soft) 0%, #c9992d 100%); color:#241f18; border-color:#a87f27; font-weight:700; box-shadow:0 4px 14px -6px rgba(176,138,46,.55), inset 0 1px 0 rgba(255,255,255,.55);}
.btn--accent:hover{ background:linear-gradient(180deg, #f2d67e 0%, #d4a937 100%); border-color:var(--accent-deep); color:#241f18;}
.btn--ghost{background:transparent;}
.btn svg{width:15px;height:15px; flex:none;}
.btn.copied{border-color:#1f7a4d; color:#1f7a4d; background:rgba(46,139,107,.08);}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, rgba(247,242,230,.30) 0%, rgba(247,242,230,.8) 60%, var(--void) 100%), url("hero-bg.png") center 38% / cover no-repeat;
  padding:clamp(56px,9vw,108px) 0 clamp(48px,7vw,88px);
}
.hero__grid{display:grid; grid-template-columns:1fr; gap:48px; align-items:center; position:relative; z-index:1;}
@media (min-width:960px){ .hero__grid{grid-template-columns:1.1fr 1fr; gap:56px;} }
.badge{
  display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.08em;
  color:var(--accent-deep); border:1px solid rgba(58,117,180,.0); border:1px solid rgba(176,138,46,.4); background:rgba(255,255,255,.85); padding:5px 11px; margin-bottom:22px;
}
.badge__dot{width:6px;height:6px;border-radius:50%;background:var(--accent-bright); box-shadow:0 0 8px var(--accent-bright); animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.hero h1{font-size:clamp(32px,5vw,54px); line-height:1.24; color:var(--ink); opacity:0; animation:fadeUp .7s ease-out .05s forwards;}
.hero p.lead{margin-top:20px; max-width:54ch; color:#4c5662; font-size:16.5px; line-height:1.8; opacity:0; animation:fadeUp .7s ease-out .18s forwards;}
.hero .ctarow{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; opacity:0; animation:fadeUp .7s ease-out .3s forwards;}
.hero .featurepills{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; opacity:0; animation:fadeUp .7s ease-out .3s forwards;}
.featurepill{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); padding:8px 14px; font-size:13px; font-weight:600; color:var(--ink);}
.featurepill i{width:6px;height:6px;border-radius:50%; background:var(--accent); display:block;}
.hero .subline{margin-top:16px; opacity:0; animation:fadeUp .7s ease-out .4s forwards;}
.subline a{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-dim); text-decoration:underline; text-underline-offset:3px;}
.subline a:hover{color:var(--accent-deep);}
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

.console{ background:linear-gradient(180deg, var(--console-bg-2), var(--console-bg)); border:1px solid var(--console-line); box-shadow:0 24px 48px -28px rgba(20,30,45,.55); }
.console__bar{display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--console-line); background:rgba(255,255,255,.03);}
.console__bar span{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; color:var(--console-text);}
.console__dots{display:flex; gap:6px;}
.console__dots i{width:8px;height:8px;border-radius:50%;background:#3A475C; display:block;}
.console__body{padding:18px 18px; font-family:"IBM Plex Mono",monospace; font-size:12.5px;}
.console__row{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed rgba(168,181,199,.14); color:var(--console-text);}
.console__row:last-of-type{border-bottom:none;}
.console__row b{color:var(--console-bright); font-weight:400;}
.status{font-weight:600; letter-spacing:.04em; white-space:nowrap;}
.status--on{color:#7fc99b;}
.status--phase{color:var(--amber-bright);}
.status--live{color:#7fc99b;}
.status--wait{color:var(--console-text);}
.console__prompt{margin-top:14px; padding-top:14px; border-top:1px solid var(--console-line); color:var(--accent-bright);}
.console__prompt .caret{display:inline-block; width:8px; height:14px; background:var(--accent-bright); margin-left:2px; vertical-align:-2px; animation:blink 1s step-end infinite;}
@keyframes blink{ 50%{opacity:0;} }
.typeline{ overflow:hidden; white-space:nowrap; width:0; animation:type 1.6s steps(24,end) .9s forwards; }
@keyframes type{ to{width:22ch;} }

section{padding:clamp(60px,8vw,104px) 0;}
section.alt{background:rgba(255,255,255,.5); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sec-head{max-width:640px; margin-bottom:44px;}
.sec-head h2{font-size:clamp(26px,3.6vw,38px); line-height:1.35; color:var(--ink);}
.sec-head p{color:var(--ink-dim); margin-top:14px; font-size:15.5px; line-height:1.8;}

/* ---------- page hero (subpage banner, replaces in-page anchors now that each section
   is its own page) ---------- */
.pagehero{padding:clamp(40px,7vw,72px) 0 clamp(28px,5vw,44px); border-bottom:1px solid var(--line); background:rgba(255,255,255,.4);}
.pagehero .crumb{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em; color:var(--ink-dim); text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-bottom:18px;}
.pagehero .crumb:hover{color:var(--accent-deep);}
.pagehero h1{font-size:clamp(28px,4.4vw,44px); line-height:1.3; color:var(--ink);}
.pagehero p{color:var(--ink-dim); margin-top:14px; font-size:15.5px; line-height:1.8; max-width:60ch;}

/* ---------- hub (homepage: cards linking to each standalone page) ---------- */
.hubgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.hubcard{background:var(--panel); padding:26px 24px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; transition:background .25s, transform .25s;}
.hubcard:hover{background:linear-gradient(180deg, #eaf2fb, #ffffff); transform:translateY(-2px);}
.hubcard__code{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--accent-deep); letter-spacing:.12em;}
.hubcard h3{font-size:18px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; color:var(--ink);}
.hubcard p{margin:0; color:var(--ink-dim); font-size:14px; line-height:1.7;}
.hubcard__arrow{margin-top:auto; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent);}

/* ---------- live stats widget (real data, fetched from panel.npcwar.com) ---------- */
.livestats{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
.livestat{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.85); border:1px solid rgba(176,138,46,.4); padding:7px 13px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-dim);}
.livestat b{color:var(--accent-deep); font-size:14px;}
.livestat .dot{width:6px;height:6px;border-radius:50%; background:#9aa3ae; flex:none;}
.livestat.is-live .dot{background:var(--accent-bright); box-shadow:0 0 8px var(--accent-bright); animation:pulse 1.8s ease-in-out infinite;}

/* ---------- decree (NPCIA notice) ---------- */
.decree{
  background:var(--paper); color:var(--paper-ink); border:1px solid var(--line);
  padding:clamp(28px,5vw,48px); display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,40px); align-items:start;
  box-shadow:0 30px 60px -30px rgba(40,60,90,.25);
  position:relative;
}
.decree::before, .decree::after, .decree .tk1, .decree .tk2{content:""; position:absolute; width:10px; height:10px; border:0 solid var(--accent); pointer-events:none;}
.decree::before{top:-1px; left:-1px; border-top-width:2px; border-left-width:2px;}
.decree::after{top:-1px; right:-1px; border-top-width:2px; border-right-width:2px;}
.decree .tk1{bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px;}
.decree .tk2{bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px;}
@media (max-width:680px){ .decree{grid-template-columns:1fr;} .decree__seal{margin:0 auto;} }
.decree__seal{width:88px;height:88px;border-radius:50%; border:2px solid var(--accent-deep); position:relative; display:flex; align-items:center; justify-content:center; flex:none;}
.decree__seal::before{content:"";position:absolute; inset:6px; border:1px solid var(--accent-deep); border-radius:50%;}
.decree__seal span{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-align:center; line-height:1.5; color:var(--accent-deep);}
.decree__kicker{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:12px;}
.decree h2{font-size:clamp(22px,3vw,30px); color:var(--paper-ink); line-height:1.5;}
.decree p{color:#4c5662; font-size:15px; margin:14px 0 0; max-width:62ch; line-height:1.85;}
.decree p.big{font-size:17px; color:var(--paper-ink);}

/* ---------- difference (従来サーバーとの違い) ---------- */
.diffgrid{display:grid; grid-template-columns:1fr; gap:36px; align-items:start; margin-bottom:44px;}
@media (min-width:960px){ .diffgrid{grid-template-columns:1.25fr 1fr; gap:56px;} }
.diffimg{position:relative; border:1px solid var(--line); overflow:hidden;}
.diffimg img{width:100%; height:clamp(220px,32vw,380px); object-fit:cover; display:block;}
.diffimg__tag{position:absolute; left:14px; bottom:14px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.08em; color:rgba(255,255,255,.9); background:rgba(22,32,46,.7); padding:6px 10px;}
/* Base44実サイトのDOM構造(grid md:grid-cols-2)を確認して修正: OLD/NEWは縦積みではなく左右2カラム。
   NEW側だけ上端にゴールドの太線＋薄い青のグラデーション(#EAF2FBを実測)が乗る。 */
.diffcard{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
@media (min-width:768px){ .diffcard{grid-template-columns:1fr 1fr;} }
.diffcard__group{padding:28px 26px; background:var(--panel);}
.diffcard__group--new{ background:linear-gradient(180deg, #eaf2fb, #ffffff); border-top:3px solid var(--accent); }
.diffcard__label{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--ink-dim); text-transform:uppercase;}
.diffcard__label--accent{color:var(--accent-deep);}
.diffcard__sub{font-size:20px; font-weight:800; color:var(--ink); margin-top:4px; margin-bottom:18px;}
.diffcard ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.diffcard li{font-size:14.5px; color:#4c5662; line-height:1.75; padding-left:24px; position:relative;}
.diffcard li::before{content:"✕"; position:absolute; left:0; top:2px; color:var(--ink-dim); font-size:12px;}
.diffcard__group--new li{color:var(--ink);}
.diffcard__group--new li::before{content:"◆"; color:var(--accent); font-size:10px; top:6px;}

/* ---------- systems grid ---------- */
.sysgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.syscard{background:var(--panel); padding:26px 24px; display:flex; flex-direction:column; gap:14px;}
.syscard__top{display:flex; align-items:center; justify-content:space-between;}
.syscard__icon{width:38px;height:38px; color:var(--accent); flex:none;}
.syscard__icon svg{width:100%;height:100%;}
.syscard__code{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-dim); letter-spacing:.1em; border:1px solid var(--line); padding:3px 8px; background:rgba(255,255,255,.6);}
.syscard h3{font-size:19px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; color:var(--ink);}
.syscard p{margin:0; color:var(--ink-dim); font-size:14.5px; line-height:1.7;}
.syscard .tag{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--accent-deep); margin-top:auto; border-top:1px dashed var(--line); padding-top:10px;}

/* ---------- living map (地球マップ、実データではなくコンセプト画像) ---------- */
.mapgrid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
@media (min-width:900px){ .mapgrid{grid-template-columns:1fr 320px;} }
.mapimg{position:relative; background:var(--paper-ink); overflow:hidden; min-height:320px;}
.mapimg img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.mapimg::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,32,46,.2), rgba(22,32,46,.65)); z-index:1;}
.mapimg__reticle{position:absolute; inset:0; z-index:1; pointer-events:none;}
.mapimg__reticle i{position:absolute; background:rgba(212,175,55,.25);}
.mapimg__reticle .vline{left:50%; top:0; bottom:0; width:1px;}
.mapimg__reticle .hline{top:50%; left:0; right:0; height:1px;}
.mapimg__reticle .ring{left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border:1px solid rgba(212,175,55,.5); border-radius:50%; background:none;}
.mapimg__reticle .dot{left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 10px var(--accent-bright);}
.mapimg__tag{position:absolute; top:14px; left:14px; z-index:2; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; color:rgba(255,255,255,.85); background:rgba(22,32,46,.6); padding:6px 10px;}
.mapimg__desc{position:absolute; left:14px; right:14px; bottom:14px; z-index:2; color:rgba(255,255,255,.92); font-size:14.5px; max-width:44ch;}
.mapside{background:var(--panel); padding:20px; display:flex; flex-direction:column;}
.mapside__kicker{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:12px;}
.mapregion{text-align:left; padding:13px 14px; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:inherit; cursor:pointer; margin-bottom:8px; width:100%; transition:border-color .2s, background .2s;}
.mapregion span{display:block;}
.mapregion .mono{font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.06em; font-weight:600;}
.mapregion:hover{border-color:var(--accent);}
.mapregion[aria-current="true"]{border-color:var(--accent); background:linear-gradient(90deg, rgba(176,138,46,.08), transparent);}
.mapside__note{margin-top:auto; padding-top:16px; border-top:1px dashed var(--line); font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-dim); line-height:1.7;}
.mapside__note a{color:var(--accent-deep);}
.mapscale{margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-dim); line-height:1.7;}

/* ---------- observe ---------- */
.obsgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.obstile{background:var(--panel); border:1px solid var(--line); padding:22px; text-decoration:none; display:flex; flex-direction:column; gap:10px; transition:transform .3s, box-shadow .3s;}
.obstile:hover{transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(40,60,90,.3);}
.obstile__url{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--accent-deep);}
.obstile h3{font-size:17px; color:var(--ink); font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700;}
.obstile p{margin:0; color:var(--ink-dim); font-size:14px;}
.obstile__arrow{margin-top:auto; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent);}

/* ---------- join ---------- */
.joingrid{display:grid; grid-template-columns:1fr; gap:32px;}
@media (min-width:900px){ .joingrid{grid-template-columns:1fr 1fr;} }
.joinbox{background:var(--panel); border:1px solid var(--line); padding:28px; box-shadow:0 20px 44px -30px rgba(40,60,90,.3);}
.joinbox__tag{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; color:var(--accent-deep); margin-bottom:10px; display:block;}
.addr{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--paper-ink); border:1px solid var(--console-line); padding:16px 18px; margin:18px 0;}
.addr__text{font-family:"IBM Plex Mono",monospace; font-size:17px; color:var(--accent-bright); letter-spacing:.02em;}
.stepline{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line);}
.stepline:first-of-type{border-top:none;}
.stepline b{font-family:"IBM Plex Mono",monospace; color:var(--accent-deep); font-size:12.5px; flex:none; width:64px;}
.stepline span{color:var(--ink-dim); font-size:14.5px;}
.note{margin-top:16px; font-size:13.5px; color:var(--ink-dim); border-left:2px solid var(--accent); padding-left:12px;}
.statuschip{margin-top:20px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; color:var(--amber); border:1px solid rgba(176,125,32,.4); background:rgba(176,125,32,.08); padding:10px 14px; text-align:center;}

/* ---------- rules ---------- */
.reggrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.regcard{background:var(--panel); padding:26px 24px;}
.regcard__code{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--accent-deep); letter-spacing:.12em; display:block; margin-bottom:8px;}
.regcard h3{font-size:17px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; margin-bottom:14px;}
.reglist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.reglist li{font-size:13.5px; color:var(--ink-dim); padding-left:16px; position:relative; line-height:1.7;}
.reglist li::before{content:"◆"; position:absolute; left:0; top:2px; color:var(--accent); font-size:10px;}
.reglist li b{color:var(--ink); font-weight:600;}
.stampbar{margin-top:24px; border:1px solid rgba(176,138,46,.4); background:rgba(176,138,46,.08); color:var(--accent-deep); padding:16px 20px; font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.02em; text-align:center;}

/* ---------- support ---------- */
.supgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px;}
.supcard{background:var(--panel); border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; gap:12px; box-shadow:0 2px 10px -6px rgba(40,60,90,.2);}
.supcard h3{font-size:18px; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700;}
.supcard p{margin:0; color:var(--ink-dim); font-size:14.5px; flex:1;}
.pill{align-self:flex-start; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.08em; padding:3px 9px; border:1px solid var(--line); color:var(--ink-dim); background:rgba(255,255,255,.6);}
.pill--soon{color:var(--amber); border-color:rgba(176,125,32,.4);}
.supcard .btn[aria-disabled="true"]{opacity:.45; pointer-events:none;}

/* ---------- scanner line (装飾のみ、実データではない) ---------- */
.scanner{ position:fixed; inset:0 0 auto 0; height:100vh; pointer-events:none; z-index:45; overflow:hidden; mix-blend-mode:multiply; }
.scanner::after{ content:""; position:absolute; left:0; right:0; top:-2px; height:2px; background:linear-gradient(90deg, transparent, rgba(176,138,46,.5), rgba(212,175,55,.7), rgba(176,138,46,.5), transparent); box-shadow:0 0 12px 2px rgba(212,175,55,.35); animation:scan 8s linear infinite; }
@keyframes scan{ from{transform:translateY(0);} to{transform:translateY(100vh);} }
@media (prefers-reduced-motion: reduce){ .scanner{display:none;} }

/* ---------- coord ticker (装飾のみ、実座標ではない) ---------- */
.coordticker{ position:fixed; bottom:12px; right:12px; z-index:40; display:none; align-items:center; gap:8px; padding:6px 12px; background:rgba(255,255,255,.82); backdrop-filter:blur(8px); border:1px solid var(--line); font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; color:var(--ink-dim); }
@media (min-width:760px){ .coordticker{display:flex;} }
.coordticker b{color:var(--accent-deep);}

footer{border-top:1px solid var(--line); padding:44px 0 32px; background:var(--paper-ink); color:#a8b5c7;}
footer .brand{color:#e6edf5;}
footer .brand small{color:var(--accent-bright);}
.foot__row{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start;}
.foot__nav{display:flex; flex-wrap:wrap; gap:20px; font-size:13.5px; color:#a8b5c7;}
.foot__nav a{text-decoration:none;}
.foot__nav a:hover{color:var(--accent-bright);}
.fine{margin-top:28px; padding-top:20px; border-top:1px solid rgba(168,181,199,.15); display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:#a8b5c7;}