/* AMIX GAME PORT — 規約・プライバシー・ライセンス（白い世界・入口と同じ配色） */
:root {
  --w-bg: #f3f5f9; --w-ink: #12141a; --w-ink-2: #5b6170; --w-line: rgba(18, 20, 26, .12);
  --o1: #ff7a45; --o2: #22b8f0; --o3: #ff5c9a;
  --f-sans: 'Outfit', 'Zen Kaku Gothic New', system-ui, sans-serif;
  --f-jp: 'Zen Kaku Gothic New', 'Outfit', system-ui, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--w-bg); color: var(--w-ink); font: 400 15px/1.95 var(--f-jp); }
a { color: inherit; }
.lg-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: max(16px, env(safe-area-inset-top)) clamp(16px, 4vw, 44px) 14px; background: color-mix(in srgb, var(--w-bg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 26px; height: 26px; }
.brand b { font: 700 15px/1 var(--f-sans); letter-spacing: .06em; }
.lg-head nav { margin-left: auto; display: flex; gap: 18px; font: 400 12px/1 var(--f-mono); letter-spacing: .12em; }
.lg-head nav a { text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; opacity: .7; }
.lg-head nav a[aria-current="page"], .lg-head nav a:hover { opacity: 1; border-bottom-color: currentColor; }

/* 見出し：天球儀の輪が静かにまわる */
.lg-hero { position: relative; max-width: 980px; margin: 0 auto; padding: clamp(40px, 9vw, 96px) clamp(16px, 4vw, 44px) 28px; }
.lg-orbits { position: absolute; right: clamp(-60px, -2vw, 0px); top: 10px; width: clamp(200px, 34vw, 340px); height: auto; opacity: .9; pointer-events: none; animation: lgTurn 60s linear infinite; }
.lg-orbits ellipse { fill: none; stroke-width: .7; stroke-opacity: .55; }
.lg-orbits .o1 { stroke: var(--o1); fill: var(--o1); } .lg-orbits .o2 { stroke: var(--o2); fill: var(--o2); } .lg-orbits .o3 { stroke: var(--o3); fill: var(--o3); }
.lg-orbits circle { stroke: none; }
.lg-orbits .core { fill: #fff; stroke: var(--w-line); stroke-width: .6; }
@keyframes lgTurn { to { rotate: 360deg; } }
.lg-kicker { margin: 0 0 14px; font: 400 11px/1 var(--f-mono); letter-spacing: .3em; color: var(--w-ink-2); }
.lg-hero h1 { position: relative; margin: 0; font: 700 clamp(30px, 6vw, 52px)/1.2 var(--f-sans); letter-spacing: .02em; }
.lg-lede { position: relative; max-width: 34em; margin: 18px 0 0; color: var(--w-ink-2); }
.lg-meta { position: relative; margin: 18px 0 0; font: 400 11.5px/1.6 var(--f-mono); letter-spacing: .08em; color: var(--w-ink-2); }
.lg-draft { display: inline-block; margin-left: 10px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 999px; font: 500 10px/1 var(--f-mono); letter-spacing: .16em; color: var(--o1); vertical-align: 2px; }

.lg-main { max-width: 980px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 44px) 80px; display: grid; gap: 14px; }
.lg-sec { background: #fff; border: 1px solid var(--w-line); border-radius: 22px; padding: clamp(20px, 3.4vw, 34px); animation: lgIn .7s var(--ease-out) both; }
.lg-sec:nth-child(2) { animation-delay: .05s; } .lg-sec:nth-child(3) { animation-delay: .1s; } .lg-sec:nth-child(n+4) { animation-delay: .15s; }
@keyframes lgIn { from { transform: translateY(10px); } }   /* 透明からは始めない（アニメーションが止まる環境でも本文が見えるように） */
.lg-sec h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; font: 700 18px/1.5 var(--f-jp); }
.lg-sec h2 .no { font: 400 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--w-ink-2); flex: none; }
.lg-sec p { margin: 0 0 10px; }
.lg-sec p:last-child, .lg-sec ul:last-child { margin-bottom: 0; }
.lg-sec ul { margin: 0 0 10px; padding-left: 1.2em; }
.lg-sec li { margin: 3px 0; }
.lg-sec small, .lg-note { color: var(--w-ink-2); font-size: 13px; }
.lg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 10px; }
.lg-box { border: 1px solid var(--w-line); border-radius: 16px; padding: 14px 16px; }
.lg-box h3 { margin: 0 0 6px; font: 500 11px/1 var(--f-mono); letter-spacing: .2em; color: var(--w-ink-2); }
.lg-box ul { margin: 0; }
.lg-box--no h3 { color: var(--o1); }
.lg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lg-table th, .lg-table td { text-align: left; vertical-align: top; padding: 10px 8px; border-top: 1px solid var(--w-line); }
.lg-table th { width: 34%; font-weight: 700; }
.lg-table code, .lg-sec code { font: 400 12.5px/1.6 var(--f-mono); background: var(--w-bg); padding: 1px 6px; border-radius: 6px; }
.lg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lg-card { border: 1px solid var(--w-line); border-radius: 16px; padding: 14px 16px; }
.lg-card b { display: block; font: 700 15px/1.4 var(--f-sans); }
.lg-card .by { display: block; margin-top: 2px; font-size: 13px; color: var(--w-ink-2); }
.lg-card .lic { display: inline-block; margin-top: 8px; font: 400 11px/1 var(--f-mono); letter-spacing: .1em; padding: 4px 8px; border-radius: 999px; background: var(--w-bg); }
.lg-card p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.8; }
.lg-foot { max-width: 980px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 44px) max(36px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 8px 20px; font: 400 11.5px/1.6 var(--f-mono); letter-spacing: .08em; color: var(--w-ink-2); }
.lg-foot a { text-decoration: none; border-bottom: 1px solid currentColor; }
.lg-foot span { margin-right: auto; }
@media (max-width: 640px) {
  .lg-head nav { gap: 12px; font-size: 11px; }
  .lg-head .brand b { display: none; }
  .lg-two { grid-template-columns: 1fr; }
  .lg-table th { width: 40%; }
  .lg-orbits { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .lg-orbits, .lg-sec { animation: none; } }