/* =========================================================
   世界賢人連合 — Command Deck
   ========================================================= */
:root{
  --void:#0A0C10;
  --panel:#12161C;
  --line:#2A323C;
  --line-soft:#1D2129;
  --text:#E5E8EA;
  --text-dim:#8A939D;
  --text-faint:#545C66;
  --cyan:#6FE3C4;      /* PHP側から上書きされる */
  --cyan-16:rgba(111,227,196,0.16);
  --cyan-30:rgba(111,227,196,0.30);
  --cyan-60:rgba(111,227,196,0.60);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Zen Kaku Gothic New', sans-serif;
  background:var(--void);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
}
.dot{ font-family:'DotGothic16', sans-serif; }
.mono{ font-family:'IBM Plex Mono', monospace; }
::selection{ background:var(--cyan); color:#000; }

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  background:linear-gradient(to bottom, rgba(10,12,16,0.9), rgba(10,12,16,0));
  backdrop-filter:blur(4px);
}
.logo-mark{ display:flex; align-items:center; gap:10px; }
.logo-mark .logo-img{ height:26px; width:auto; display:block; }
.logo-mark span{ font-size:12px; letter-spacing:0.22em; color:var(--text); }
@media(max-width:480px){ .logo-mark span{ display:none; } }

.header-right{ display:flex; align-items:center; gap:20px; }
.header-right .nav-tag{ font-size:10px; color:var(--text-dim); letter-spacing:0.08em; display:none; }
@media(min-width:760px){ .header-right .nav-tag{ display:inline; } }

.login-btn{
  font-family:'DotGothic16', sans-serif; font-size:13px; letter-spacing:0.08em;
  color:var(--text); background:transparent; border:1px solid var(--line);
  padding:8px 20px; border-radius:2px; text-decoration:none;
  transition:all .25s ease; white-space:nowrap;
}
.login-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.login-btn.is-locked{
  border-style:dashed; color:var(--text-faint); cursor:not-allowed; opacity:0.6;
}
.login-btn.is-locked:hover{ border-color:var(--line); color:var(--text-faint); }

/* ---------- scroll meter / hud ---------- */
.scroll-meter{
  position:fixed; bottom:20px; left:20px; z-index:50;
  font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--text-faint);
  letter-spacing:0.12em; display:flex; align-items:center; gap:8px;
}
.scroll-meter .bar{ width:80px; height:2px; background:var(--line-soft); position:relative; }
.scroll-meter .bar i{ position:absolute; left:0; top:0; height:100%; background:var(--cyan); width:0%; transition:width .1s linear; }
@media(max-width:520px){ .scroll-meter .bar{ width:52px; } }

.hud-corner{ position:fixed; width:22px; height:22px; border-color:var(--line); pointer-events:none; opacity:0.6; z-index:40; }
.hud-corner.tl{ top:16px; left:16px; border-top:1px solid; border-left:1px solid; }
.hud-corner.tr{ top:16px; right:16px; border-top:1px solid; border-right:1px solid; }
.hud-corner.bl{ bottom:16px; left:16px; border-bottom:1px solid; border-left:1px solid; }
.hud-corner.br{ bottom:16px; right:16px; border-bottom:1px solid; border-right:1px solid; }

/* ---------- hero ---------- */
.hero{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; padding:110px 20px 70px;
  background:radial-gradient(ellipse at 50% 30%, #151b22 0%, var(--void) 60%);
}
.hero .eyebrow{ font-size:10px; letter-spacing:0.3em; color:var(--cyan); text-transform:uppercase; margin-bottom:16px; text-align:center; }
.hero h1{
  font-family:'DotGothic16', sans-serif; font-weight:400; font-size:clamp(30px,5.2vw,54px);
  letter-spacing:0.06em; margin-bottom:10px; text-align:center;
}
.hero .hero-sub{ color:var(--text-dim); font-size:13px; letter-spacing:0.04em; margin-bottom:26px; text-align:center; }

/* ---------- orbit ---------- */
.orbit-wrap{
  position:relative; width:min(500px,84vw); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.orbit-ring{ position:absolute; border:1px solid var(--line); border-radius:50%; animation:spin 60s linear infinite; transition:opacity .5s ease; }
.orbit-ring.r1{ inset:0; }
.orbit-ring.r2{ inset:12%; border-color:var(--cyan-16); animation-duration:90s; animation-direction:reverse; }
.orbit-ring.r3{ inset:26%; border-style:dashed; border-color:rgba(255,255,255,0.08); animation-duration:40s; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.core-dot{
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 12px 3px var(--cyan-60);
  animation:pulse2 3s ease-in-out infinite; transition:opacity .4s ease;
}
@keyframes pulse2{ 0%,100%{opacity:0.5; transform:scale(1);} 50%{opacity:1; transform:scale(1.4);} }

.orbit-wrap.has-focus .orbit-ring{ opacity:0.25; }
.orbit-wrap.has-focus .core-dot{
  opacity:0 !important;
  animation:none !important; /* pulse2アニメーションがopacityを上書きし続けるのを止める */
  box-shadow:none !important;
}
.orbit-wrap.has-focus .orbit-divider{ opacity:0.3; }

/* 外周の直径に合わせた縦の仕切り線（左:GAME / 右:CONTENT） */
.orbit-divider{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:var(--line); transform:translateX(-50%);
  transition:opacity .4s ease; z-index:2;
}
.divider-label{
  position:absolute; top:-24px; font-size:9px; letter-spacing:0.18em;
  color:var(--text-faint); white-space:nowrap;
}
.divider-label.left{ right:8px; text-align:right; }
.divider-label.right{ left:8px; text-align:left; }

.orbit-node{
  position:absolute; top:50%; left:50%; width:0; height:0;
  transition:transform .65s cubic-bezier(.22,.9,.32,1), opacity .45s ease;
  cursor:pointer;
}
.orbit-node-inner{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%;
  background:rgba(18,22,28,0.94); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6px;
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
@media(max-width:480px){
  .orbit-node-inner{ width:92px; height:92px; }
  .orbit-node .n-name{ font-size:11px; }
}
.orbit-node:hover .orbit-node-inner{ border-color:var(--cyan); }
.orbit-node.is-focused .orbit-node-inner{
  border-color:var(--cyan);
  box-shadow:0 0 34px var(--cyan-30);
}
.orbit-node.confirming .orbit-node-inner{ background:var(--cyan-16); }

/* 中央寄せの安定化：3行すべて常に同じ高さを確保する */
.orbit-node .n-tag{
  font-family:'IBM Plex Mono',monospace; font-size:8px; color:var(--text-faint);
  letter-spacing:0.08em; line-height:1; height:10px; display:flex; align-items:center; justify-content:center;
}
.orbit-node .n-name{
  font-family:'DotGothic16',sans-serif; font-size:13px; color:var(--text);
  line-height:1.25; margin:7px 0; word-break:keep-all;
}
.orbit-node .n-confirm{
  font-family:'IBM Plex Mono',monospace; font-size:8px; color:var(--cyan);
  letter-spacing:0.1em; line-height:1; height:10px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
}
.orbit-node.is-focused .n-confirm{ opacity:0.9; }

.orbit-hint{
  color:var(--text-dim); font-size:11px; letter-spacing:0.04em;
  margin-top:18px; margin-bottom:34px; text-align:center; min-height:20px;
  transition:color .3s ease;
}

.scroll-cue{
  font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--text-faint);
  letter-spacing:0.15em; display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:bob 2.4s ease-in-out infinite;
}
.scroll-cue .line{ width:1px; height:24px; background:linear-gradient(to bottom, var(--text-faint), transparent); }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

/* ---------- sections ---------- */
section.block{ position:relative; padding:76px 24px; max-width:1000px; margin:0 auto; }
.section-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.28em;
  color:var(--cyan); text-transform:uppercase; margin-bottom:12px;
}
.section-title{
  font-family:'DotGothic16', sans-serif; font-size:clamp(22px,3.2vw,32px);
  letter-spacing:0.04em; margin-bottom:24px;
}

[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }

/* ---------- about ---------- */
.about-lead{ color:var(--text-dim); font-size:14.5px; max-width:660px; margin-bottom:44px; }
.principles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
}
.principle{
  background:var(--panel); padding:28px 24px;
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.principle.in-view{ opacity:1; transform:translateY(0); }
.principle .p-index{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-faint); margin-bottom:12px; }
.principle h3{ font-family:'DotGothic16',sans-serif; font-size:16px; margin-bottom:10px; color:var(--cyan); }
.principle p{ font-size:12.5px; color:var(--text-dim); }

.locked-btn-wrap{ margin-top:32px; }
.locked-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'DotGothic16', sans-serif; font-size:14px; color:var(--text-dim);
  border:1px dashed var(--line); padding:13px 22px; text-decoration:none;
  cursor:not-allowed; opacity:0.55; user-select:none;
}
.locked-btn.is-open{ cursor:pointer; opacity:1; border-style:solid; color:var(--text); }
.locked-btn.is-open:hover{ border-color:var(--cyan); color:var(--cyan); }
.locked-caption{ margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-faint); }

/* ---------- stats ---------- */
.stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
}
.stat-item{ background:var(--panel); padding:26px 20px; text-align:center; }
.stat-item .s-num{ font-family:'DotGothic16',sans-serif; font-size:clamp(26px,3.2vw,38px); color:var(--text); line-height:1.2; }
.stat-item .s-label{ font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--text-faint); letter-spacing:0.1em; margin-top:8px; }
.stats-note{ margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-faint); }

/* ---------- module list ---------- */
.module-group-label{
  font-size:10px; letter-spacing:0.24em; color:var(--cyan);
  margin:28px 0 10px; text-transform:uppercase;
}
.module-group-label:first-of-type{ margin-top:0; }
.module-list{ border:1px solid var(--line); margin-bottom:8px; }
.module-card{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  padding:18px 22px; background:var(--panel); text-decoration:none; color:var(--text);
  border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease, background .25s ease;
}
.module-card:last-child{ border-bottom:none; }
.module-card.in-view{ opacity:1; transform:translateY(0); }
.module-card:hover{ background:#171C23; }
.module-card.is-locked{ cursor:not-allowed; opacity:0.5; }
.module-card .m-left{ display:flex; align-items:center; gap:16px; }
.module-card .m-index{ font-family:'DotGothic16',sans-serif; font-size:17px; color:var(--text-faint); min-width:26px; }
.module-card .m-name{ font-family:'DotGothic16',sans-serif; font-size:15px; margin-bottom:2px; }
.module-card .m-desc{ font-size:11.5px; color:var(--text-dim); }
.module-card .m-status{
  font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--cyan); letter-spacing:0.1em;
  border:1px solid var(--cyan-30); padding:4px 10px; border-radius:2px; white-space:nowrap;
}
.module-card.is-locked .m-status{ color:var(--text-faint); border-color:var(--line); }

footer.site-footer{
  padding:50px 24px 90px; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-faint); letter-spacing:0.06em;
}

/* ---------- dev entry badge ---------- */
.dev-badge{
  position:fixed; bottom:20px; right:56px; z-index:60;
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.1em;
  color:var(--void); background:var(--cyan); padding:5px 12px; border-radius:2px;
  text-decoration:none;
}

/* ---------- a11y ---------- */
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}