/* どっとゲーム — 共有デザインシステム「古代遺跡のマギテック図鑑」
   深い夜紺 × シアン発光(#45e3ff=遺跡の光) × 金の収集感。
   全ページ(index/viewer/generator/roster)はこの1枚を読み込んで統一する。 */

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root {
  --bg-0:#06080f; --bg-1:#0b1020; --bg-2:#121a30;
  --panel:rgba(18,26,48,.72); --panel-solid:#121a30;
  --line:#27365e; --line-soft:#1c2746; --line-glow:#3f63c0;
  --ink:#e8edff; --ink-dim:#93a0c8; --ink-faint:#5d6a96;
  --cyan:#45e3ff; --cyan-soft:#aef3ff; --cyan-deep:#1c8fb8;
  --gold:#e9cb70; --gold-deep:#9a7d34;
  --violet:#b49bff; --rose:#f2a6c2;
  --radius:14px; --radius-sm:9px;
  --font-disp:'DotGothic16','Zen Kaku Gothic New',monospace;
  --font-body:'Zen Kaku Gothic New','DotGothic16',sans-serif;
  --shadow:0 10px 30px rgba(0,0,0,.5);
  --glow-cyan:0 0 0 1px rgba(69,227,255,.4),0 0 18px rgba(69,227,255,.28);
}

* { box-sizing:border-box; }

html,body { margin:0; }
body {
  min-height:100vh;
  color:var(--ink);
  font-family:var(--font-body);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(69,227,255,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(180,155,255,.10), transparent 60%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  background-attachment:fixed;
  position:relative;
  overflow-x:hidden;
}
/* 星屑＋ヘクスグリッドの背景レイヤー */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(174,243,255,.7), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(174,243,255,.5), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 60% 85%, rgba(180,155,255,.5), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(174,243,255,.4), transparent),
    radial-gradient(2px 2px at 30% 50%, rgba(255,255,255,.35), transparent);
  background-size:cover;
  animation:twinkle 6s ease-in-out infinite alternate;
}
body::after {
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 1 54 16v32L28 63 2 48V16Z' fill='none' stroke='%231a2b4a' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 64px;
  -webkit-mask-image:radial-gradient(900px 600px at 50% 0%, #000 0%, transparent 75%);
          mask-image:radial-gradient(900px 600px at 50% 0%, #000 0%, transparent 75%);
}
@keyframes twinkle { from{opacity:.55} to{opacity:1} }

/* ── トップバー / ナビ ── */
.topbar {
  width:100%; max-width:1100px; margin:0 auto; padding:18px 20px 6px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brand {
  font-family:var(--font-disp); letter-spacing:3px;
  font-size:18px; color:var(--ink); text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.brand .spark { width:10px; height:10px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 10px var(--cyan),0 0 20px var(--cyan); animation:pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:.6;transform:scale(.85)} 50%{opacity:1;transform:scale(1.15)} }
.nav { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.nav a {
  font-family:var(--font-disp); font-size:12px; letter-spacing:1px;
  color:var(--ink-dim); text-decoration:none; padding:7px 13px; border-radius:999px;
  border:1px solid transparent; transition:.18s;
}
.nav a:hover { color:var(--ink); border-color:var(--line-glow); background:rgba(69,227,255,.07); }
.nav a.active { color:var(--bg-0); background:var(--cyan); box-shadow:var(--glow-cyan); }

/* ── 見出し ── */
.eyebrow { font-family:var(--font-disp); font-size:11px; letter-spacing:4px;
  color:var(--cyan-deep); text-transform:uppercase; }
h1.title { font-family:var(--font-disp); font-weight:400; letter-spacing:2px;
  font-size:clamp(22px,4vw,34px); margin:.2em 0; }
h2.section { font-family:var(--font-disp); font-weight:400; letter-spacing:2px;
  font-size:16px; color:var(--ink); margin:26px 0 12px;
  display:flex; align-items:center; gap:10px; }
h2.section::before { content:""; width:14px; height:14px; transform:rotate(45deg);
  background:linear-gradient(135deg,var(--cyan),var(--cyan-deep)); box-shadow:0 0 8px var(--cyan); }
.muted { color:var(--ink-dim); }
.faint { color:var(--ink-faint); }

/* ── パネル / カード ── */
.panel-glass {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  backdrop-filter:blur(8px); box-shadow:var(--shadow);
}
.card {
  position:relative; background:linear-gradient(180deg,rgba(28,38,68,.6),rgba(12,17,33,.75));
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, box-shadow .2s;
}
.card::before { /* 上端のシアン稜線 */
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:.5; }
.card:hover { transform:translateY(-4px); border-color:var(--line-glow);
  box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 22px rgba(69,227,255,.18); }

/* スプライト舞台(キャラを乗せる台座) */
.stage {
  position:relative; border-radius:var(--radius-sm);
  background:
    radial-gradient(120px 40px at 50% 100%, rgba(69,227,255,.16), transparent 70%),
    radial-gradient(60% 80% at 50% 8%, rgba(69,227,255,.06), transparent 70%),
    linear-gradient(180deg,#0a1326,#070d1a);
  border:1px solid var(--line-soft); overflow:hidden;
}
.stage canvas { image-rendering:pixelated; display:block; margin:0 auto; }

/* ── ボタン / フォーム ── */
.btn {
  font-family:var(--font-disp); letter-spacing:1px; font-size:13px;
  color:var(--ink); background:rgba(33,45,80,.7); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:8px 14px; cursor:pointer; transition:.15s;
}
.btn:hover { background:rgba(48,66,116,.8); border-color:var(--line-glow); }
.btn:active { transform:translateY(1px); }
.btn.active { background:var(--cyan); color:var(--bg-0); border-color:var(--cyan); box-shadow:var(--glow-cyan); }
.btn-primary {
  color:var(--bg-0); border:none; font-size:15px; padding:11px 22px;
  background:linear-gradient(135deg,var(--cyan),#37b6e0); box-shadow:var(--glow-cyan);
}
.btn-primary:hover { filter:brightness(1.08); }
.btn-gold { color:#2a200a; border:none;
  background:linear-gradient(135deg,var(--gold),#c9a64e);
  box-shadow:0 0 0 1px rgba(233,203,112,.4),0 0 16px rgba(233,203,112,.3); }
.btn-ghost { background:transparent; border:1px solid var(--line); color:var(--ink-dim); }
.btn-ghost:hover { color:var(--ink); border-color:var(--line-glow); }
.btn.sm { padding:4px 9px; font-size:11px; }

select, input[type=text] {
  font-family:var(--font-disp); font-size:12px; color:var(--ink);
  background:rgba(12,17,33,.8); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:7px 10px; outline:none;
}
select:focus, input[type=text]:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(69,227,255,.18); }
.chk { font-family:var(--font-disp); font-size:11px; color:var(--ink-dim);
  display:inline-flex; align-items:center; gap:4px; cursor:pointer; }

.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.center { justify-content:center; }
.wrap { width:100%; max-width:1100px; margin:0 auto; padding:0 20px 60px; }

/* バッジ(収集の楽しみ) */
.badge { font-family:var(--font-disp); font-size:10px; letter-spacing:1px;
  padding:2px 8px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink-dim); background:rgba(12,17,33,.6); }
.badge.cyan { color:var(--cyan-soft); border-color:rgba(69,227,255,.4); background:rgba(69,227,255,.08); }
.badge.gold { color:var(--gold); border-color:rgba(233,203,112,.4); background:rgba(233,203,112,.08); }
.badge.violet{ color:var(--violet); border-color:rgba(180,155,255,.4); background:rgba(180,155,255,.08); }

/* フッター */
.foot { text-align:center; color:var(--ink-faint); font-size:11px;
  padding:30px 0 50px; font-family:var(--font-disp); letter-spacing:1px; }
.foot a { color:var(--ink-dim); }

@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes sheen { 0%{background-position:-150% 0} 100%{background-position:250% 0} }
@keyframes popIn { from{opacity:0;transform:translateY(10px) scale(.96)} to{opacity:1;transform:none} }
.pop { animation:popIn .35s cubic-bezier(.2,.8,.3,1) both; }