/* AIの管制室（NEURAL NEXUS）：黒い空間・少し傾いた金色の光の帯・六角形の枠の顔・AI CORE・光の柱・光の粒・同心円の床。
   色は --nx（光）・--nx2（濃い光）で変える。ふだんは動画と同じ金色。.cyan / .coral でも変えられる */
.nx { --nx: #ffd23f; --nx2: #ffab00; --nx-bg: #050403; }
.nx.cyan { --nx: #5ef2ff; --nx2: #1f9bff; --nx-bg: #02060d; }
.nx.coral { --nx: #ff8a8f; --nx2: #ff3d6e; --nx-bg: #070405; }
.nx-stage { position: relative; height: 720px; overflow: hidden; border-radius: 16px; color: #f5f1e6; font-family: "Inter", "Noto Sans JP", sans-serif; isolation: isolate;
  background:
    radial-gradient(45% 38% at 50% 56%, color-mix(in srgb, var(--nx2), transparent 72%), transparent 70%),
    radial-gradient(90% 70% at 50% 120%, color-mix(in srgb, var(--nx2), transparent 86%), transparent 70%),
    var(--nx-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx), transparent 72%), inset 0 0 120px rgba(0, 0, 0, .9), 0 30px 60px -30px rgba(0, 0, 0, .9); }
/* 光の粒 */
.nx-dots { position: absolute; inset: 0; z-index: 0; }
.nx-dots i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: var(--nx); box-shadow: 0 0 6px var(--nx); opacity: .5; animation: nxTw 4.2s ease-in-out infinite; }
@keyframes nxTw { 50% { opacity: .08; transform: translateY(-6px); } }
/* 床：遠くへのびる格子と、真ん中から広がる同心円 */
.nx-floor { position: absolute; z-index: 0; left: -50%; right: -50%; top: 50%; height: 90%; transform: perspective(700px) rotateX(72deg); transform-origin: 50% 0;
  background: linear-gradient(color-mix(in srgb, var(--nx), transparent 84%) 1px, transparent 1px) 0 0 / 70px 70px, linear-gradient(90deg, color-mix(in srgb, var(--nx), transparent 84%) 1px, transparent 1px) 0 0 / 70px 70px;
  -webkit-mask-image: radial-gradient(55% 80% at 50% 0%, #000, transparent 80%); mask-image: radial-gradient(55% 80% at 50% 0%, #000, transparent 80%); }
.nx-rings { position: absolute; z-index: 1; width: 0; height: 0; }
.nx-rings i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--nx), transparent 70%); transform: translate(-50%, -50%) scaleY(.32); }
.nx-rings i:nth-child(1) { width: 260px; height: 260px; } .nx-rings i:nth-child(2) { width: 520px; height: 520px; opacity: .7; }
.nx-rings i:nth-child(3) { width: 820px; height: 820px; opacity: .45; border-style: dashed; } .nx-rings i:nth-child(4) { width: 1180px; height: 1180px; opacity: .3; }
/* 光の柱と、のぼる粒 */
.nx-beam { position: absolute; z-index: 2; left: 50%; top: -5%; bottom: -5%; width: 120px; margin-left: -60px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nx), transparent 80%) 30%, color-mix(in srgb, #fff, var(--nx) 35%) 50%, color-mix(in srgb, var(--nx), transparent 80%) 70%, transparent); mix-blend-mode: screen; opacity: .85; }
.nx-beam::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #fff; filter: blur(1px); opacity: .9; }
.nx-rise i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px var(--nx); animation: nxRise 6.5s linear infinite; }
@keyframes nxRise { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-720px); opacity: 0; } }
/* 光の帯 */
.nx-orbit { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.nx-orbit ellipse { fill: none; }
.nx-orbit .halo { stroke: var(--nx2); stroke-width: 60; opacity: .12; filter: blur(14px); }
.nx-orbit .glow { stroke: var(--nx); stroke-width: 22; opacity: .35; filter: blur(7px); }
.nx-orbit .band { stroke: url(#nxBand); stroke-width: 8; opacity: .95; }
.nx-orbit .core { stroke: #fffbe8; stroke-width: 2.2; }
.nx-orbit .comet { stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 90 910; filter: drop-shadow(0 0 8px var(--nx)) drop-shadow(0 0 16px var(--nx)); animation: nxComet 7s linear infinite; }
.nx-orbit .c2 { animation-delay: -3.5s; stroke-dasharray: 40 960; stroke-width: 4; }
.nx-orbit .spark { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 24; opacity: .55; animation: nxComet 30s linear infinite reverse; }
@keyframes nxComet { to { stroke-dashoffset: -1000; } }
.nx.still .nx-fx, .nx.still .nx-hex::before, .nx.still .nx-orbit .comet, .nx.still .nx-orbit .spark, .nx.still .nx-rise i, .nx.still .nx-gyro i, .nx.still .nx-dots i { animation-play-state: paused; }
/* 真ん中：AI CORE とまわる輪（ジャイロ） */
.nx-core { position: absolute; z-index: 25; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; }
.nx-core > b { font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--nx); text-shadow: 0 0 10px var(--nx); white-space: nowrap; background: rgba(0, 0, 0, .55); padding: 2px 10px; border-radius: 4px; }
.nx-gyro { position: absolute; left: 50%; top: 92px; width: 0; height: 0; transform-style: preserve-3d; perspective: 600px; pointer-events: none; }
.nx-gyro i { position: absolute; left: -130px; top: -130px; width: 260px; height: 260px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--nx), transparent 30%); box-shadow: 0 0 12px color-mix(in srgb, var(--nx), transparent 60%); }
.nx-gyro .g1 { animation: nxG1 12s linear infinite; }
.nx-gyro .g2 { left: -105px; top: -105px; width: 210px; height: 210px; animation: nxG2 9s linear infinite; }
.nx-gyro .g3 { left: -170px; top: -170px; width: 340px; height: 340px; border-style: dashed; opacity: .55; animation: nxG3 20s linear infinite; }
@keyframes nxG1 { from { transform: rotateX(72deg) rotateZ(0); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes nxG2 { from { transform: rotateY(64deg) rotateX(20deg) rotateZ(0); } to { transform: rotateY(64deg) rotateX(20deg) rotateZ(360deg); } }
@keyframes nxG3 { from { transform: rotateX(80deg) rotateY(-12deg) rotateZ(0); } to { transform: rotateX(80deg) rotateY(-12deg) rotateZ(-360deg); } }
/* 六角形の枠：金の二重のふち、内側に顔 */
.nx-hex { position: relative; display: grid; place-items: center; width: 96px; height: 108px; padding: 0; border: 0; background: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
/* 枠：金 → ピンク → 水色が流れる。顔には色の変化がかからないよう、枠は ::before に描く */
.nx-hex::before { content: ""; position: absolute; inset: 0; clip-path: inherit; background: linear-gradient(135deg, #fff7d1, var(--nx), #ff4fd8, #4ff3ff, var(--nx2), #fff7d1) 0 0 / 300% 300%; animation: nxFlow 6s linear infinite, nxHue 18s linear infinite; }
.nx-hex::after { content: ""; position: absolute; inset: 4px; clip-path: inherit; background: #0b0802; box-shadow: inset 0 0 18px color-mix(in srgb, var(--nx), transparent 40%); }
@keyframes nxFlow { to { background-position: 300% 300%; } }
@keyframes nxHue { to { filter: hue-rotate(360deg); } }
.nx-in { position: absolute; inset: 7px; z-index: 1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2f2410, #0b0802); overflow: hidden; }
.nx-in img { width: 100%; height: 100%; object-fit: cover; }
.nx-in .r-ava { transform: scale(1.3); }
.nx-hex.big { width: 132px; height: 148px; cursor: pointer; filter: drop-shadow(0 0 24px var(--nx)) drop-shadow(0 0 4px #fff); }
.nx-node { position: absolute; left: 0; top: 0; z-index: 10; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; will-change: transform; }
.nx-node .nx-hex { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--nx), transparent 30%)) drop-shadow(0 6px 10px rgba(0, 0, 0, .8)); transition: filter .3s; }
.nx-node:hover .nx-hex { filter: drop-shadow(0 0 18px var(--nx)) brightness(1.15); }
.nx-cap { display: grid; justify-items: center; text-align: center; line-height: 1.3; white-space: nowrap; }
.nx-cap small { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--nx); text-shadow: 0 0 6px color-mix(in srgb, var(--nx), transparent 40%); }
.nx-cap b { font-size: 15px; font-weight: 900; color: #fff; text-shadow: 0 2px 8px #000, 0 0 2px #000; }
.nx-cap em { font-style: normal; font-size: 11px; color: #cfc6ad; text-shadow: 0 1px 4px #000; }
.nx-you { font-family: "Inter", sans-serif; font-size: 24px; font-weight: 900; letter-spacing: .02em; color: var(--nx); text-shadow: 0 0 12px var(--nx); }
.nx-node.you .nx-in { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--nx2), #000 55%), #0b0802); }
.nx-done { font-size: 34px; color: #fff; text-shadow: 0 0 10px #fff; }
.nx-node.done .nx-hex, .nx-node.done .nx-hex::before, .nx-node.done .nx-hex::after, .nx-node.done .nx-in { clip-path: circle(50%); }
.nx-node.done .nx-hex { width: 104px; height: 104px; }
.nx-here { display: none; font-style: normal; font-size: 11px; font-weight: 900; color: #111; background: var(--nx); padding: 2px 10px; border-radius: 99px; box-shadow: 0 0 14px var(--nx); }
.nx-node.here .nx-here { display: block; }
.nx-node.working .nx-hex, .nx-node.waiting .nx-hex { filter: drop-shadow(0 0 22px var(--nx)) drop-shadow(0 0 4px #fff); }
.nx-node.working .nx-hex::before { animation: nxFlow 1.6s linear infinite, nxHue 6s linear infinite; }
.nx-node.got .nx-hex { animation: nxGot 1.2s ease-out; }
@keyframes nxGot { 0% { filter: drop-shadow(0 0 40px #fff) brightness(2); } 100% { filter: drop-shadow(0 0 10px var(--nx)); } }
/* 文字の表示（左上・右上）と下の操作 */
.nx-hud { position: absolute; z-index: 40; margin: 0; }
.nx-hud.tl { left: 22px; top: 18px; }
.nx-hud.tr { right: 22px; top: 18px; text-align: right; display: grid; justify-items: end; gap: 2px; }
.nx-sys { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; color: var(--nx); display: flex; align-items: center; gap: 6px; }
.nx-sys i { width: 7px; height: 7px; border-radius: 50%; background: #3dff8a; box-shadow: 0 0 8px #3dff8a; }
.nx-hud h3 { margin: 6px 0; font-size: 19px; font-weight: 900; color: #fff; }
.nx-tag { display: inline-block; margin: 0; font-size: 11.5px; font-weight: 800; color: #111; background: var(--nx); padding: 3px 12px; border-radius: 99px; box-shadow: 0 0 14px color-mix(in srgb, var(--nx), transparent 40%); }
.nx-clock { font-family: "Inter", monospace; font-size: 30px; font-weight: 800; color: #fff; letter-spacing: .04em; text-shadow: 0 0 12px color-mix(in srgb, var(--nx), transparent 50%); }
.nx-count { margin: 0; display: flex; gap: 14px; font-size: 11px; color: #cfc6ad; }
.nx-count b { margin-right: 3px; font-size: 15px; color: #fff; }
.nx-bar { position: absolute; z-index: 40; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 99px; background: rgba(0, 0, 0, .7); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx), transparent 65%), 0 0 30px rgba(0, 0, 0, .8); }
.nx-bar button { padding: 6px 16px; border: 0; border-radius: 99px; font-size: 12px; font-weight: 800; color: #111; background: var(--nx); cursor: pointer; }
.nx-bar button + button { color: var(--nx); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx), transparent 50%); }
@media (max-width: 760px) { .nx-stage { height: 540px; } .nx-hud.tr { display: none; } .nx-cap em { display: none; } .nx-hex.big { width: 96px; height: 108px; } }
@media (prefers-reduced-motion: reduce) { .nx-dots i, .nx-rise i, .nx-gyro i, .nx-orbit .comet, .nx-orbit .spark, .nx-node.working .nx-hex::after, .nx-node.got .nx-hex { animation: none; } }

/* 色が移り変わる（金 → ピンク → 水色 → 金） */
.nx-fx { animation: nxHueSoft 16s ease-in-out infinite; }
@keyframes nxHueSoft { 0%, 100% { filter: hue-rotate(0deg); } 33% { filter: hue-rotate(-70deg) saturate(1.3); } 66% { filter: hue-rotate(140deg) saturate(1.2); } }
.nx-orbit .lit { stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 1000; opacity: .85; filter: drop-shadow(0 0 10px var(--nx)) drop-shadow(0 0 22px #ff4fd8); }
/* AI CORE のまわりの円グラフ（全体の進み） */
.nx-gauge { --p: 0; position: relative; display: grid; place-items: center; width: 184px; height: 184px; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 84%, rgba(0, 0, 0, .0) 85%), conic-gradient(from -90deg, var(--nx), #ff4fd8, #4ff3ff calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 87%); mask: radial-gradient(closest-side, transparent 86%, #000 87%); animation: nxHue 18s linear infinite; }
.nx-core { grid-template-areas: "g" "n" "t"; }
.nx-core > .nx-gauge, .nx-core > .nx-hex { grid-area: g; }
.nx-core .nx-hex.big { grid-area: g; place-self: center; }
.nx-core-n { grid-area: n; }
.nx-total { grid-area: t; font-size: 11px; letter-spacing: .1em; color: #cfc6ad; }
.nx-total b { font-family: "Inter", sans-serif; font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 0 12px var(--nx); margin-left: 4px; }
/* 六角形の下のゲージ（目盛りつき） */
.nx-meter { display: grid; grid-template-columns: 92px auto; align-items: center; gap: 6px; }
.nx-mt { position: relative; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.nx-mt i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 1%); background: linear-gradient(90deg, var(--nx), #ff4fd8, #4ff3ff) 0 0 / 200% 100%; animation: nxFlow 3s linear infinite; box-shadow: 0 0 10px var(--nx); }
.nx-mt::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0, 0, 0, .55) 7px 9px); }
.nx-pc { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 900; color: #fff; text-shadow: 0 0 8px var(--nx); min-width: 34px; text-align: left; }
.nx-wait { grid-column: 1 / -1; font-size: 11px; color: #cfc6ad; }
.nx-wait b { font-family: "Inter", sans-serif; font-size: 15px; color: var(--nx); margin-right: 2px; text-shadow: 0 0 8px var(--nx); }
/* 管制室の下：今日の目標のバロメーター */
.nx { display: grid; gap: 10px; }
.nx-goals { padding: 14px 18px 16px; border-radius: 14px; color: #f5f1e6; background: linear-gradient(160deg, #15110a, var(--nx-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx), transparent 70%), 0 20px 40px -26px rgba(0, 0, 0, .9); }
.nx-gs { display: grid; gap: 4px 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.nx-g { --p: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin-top: 9px; font-size: 12px; }
.nx-g .t { font-weight: 800; color: #fff; }
.nx-g .pc { font-family: "Inter", sans-serif; font-weight: 900; color: var(--nx); text-shadow: 0 0 8px var(--nx); }
.nx-g .bar { grid-column: 1 / -1; position: relative; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.nx-g .bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 1%); background: linear-gradient(90deg, var(--nx2), var(--nx), #ff4fd8, #4ff3ff) 0 0 / 200% 100%; animation: nxFlow 2.6s linear infinite; box-shadow: 0 0 12px var(--nx); }
.nx-g .bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .6) 9px 11px); }
.nx-g .v { grid-column: 1 / -1; font-size: 10.5px; color: #cfc6ad; text-align: right; font-family: "Inter", sans-serif; }
.nx-tag { background: linear-gradient(90deg, var(--nx), #ff4fd8, #4ff3ff, var(--nx)) 0 0 / 300% 100%; animation: nxFlow 6s linear infinite; }
@media (max-width: 760px) { .nx-gauge { width: 130px; height: 130px; } }
@media (prefers-reduced-motion: reduce) { .nx-fx, .nx-hex::before, .nx-gauge, .nx-mt i, .nx-g .bar i, .nx-tag { animation: none; } }