/* ================================================================
   UZ FIELD ID — Square GRAVITY ID
   GT (Gravity Token) と同じ罫線文法 + UZ 専用の独立実装。
   GT の class / CSS / JS は流用しない。

   ─── 罫線構造 (GT 文法に揃える) ─────────────────────────
   1 本目 (一番外): face の border。 連続の rounded rect、 薄い (0.18)
   2 本目 (中央): SVG path の L 字 4 本。 各辺中央に小さな gap、 角を arc で
                 繋ぐ → 4 つの 「コの字」 が 4 隅に配置されているように見える。
                 LINEMOV は この L 字 path 上を走る (= 角を回り込む)。
   3 本目 (一番内): SVG <rect>。 連続の rounded rect、 極めて薄い (alpha 0.18)。
                  外と同じ alpha で揃える (user 指定)。

   ─── DOM 階層 ─────────────────────────────────────
   .uzFieldId           perspective container
     .uzFieldId__shell  flip 用 Y 軸回転 (button)
       .uzFieldId__face--front
       .uzFieldId__face--back
   常時ゆらぎ・hover tilt は無し (ドラッグ操作時のみ動く)。
   ================================================================ */

/* UZ FIELD ID を内包する .structureUZ__visual の "額装" を取り去る
   (MOOTAN / AB の visual には影響しない: :has() で UZ ケース限定) */
.structureUZ__visual:has(.uzFieldId) {
  background: transparent;
  border: 0;
  overflow: visible;
}
.structureUZ__visual:has(.uzFieldId) .structureUZ__placeholder { display: none; }

.uzFieldId {
  --uz-reveal-y: 36px;
  --uz-opacity: 0;

  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  perspective: 1100px;
  pointer-events: none;
  opacity: var(--uz-opacity);
  transform: translateY(var(--uz-reveal-y));
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* ── shell: ドラッグでめくる対象 ──────────── */
.uzFieldId__shell {
  position: relative;
  width: 86%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  pointer-events: auto;
  cursor: grab;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y;
}
.uzFieldId__shell:active { cursor: grabbing; }
.uzFieldId__shell:focus { outline: none; }
.uzFieldId__shell:focus-visible {
  outline: 1px solid rgba(214, 224, 234, 0.45);
  outline-offset: 6px;
}

/* ── face: 表/裏共通。 GT 文法 1 本目 (一番外の薄い rect) ── */
.uzFieldId__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 地は GT と完全に同じ (--bg #262e38 とほぼ同じトーン)。
     「黒い板」 ではなく 「場の中から静かに現れる」 質感。
     背景色の base (不透明) を先に置いて、 その上に半透明グラデを重ねることで
     裏面から透けて見えないようにする (= flip 時に表/裏が混ざる現象を防ぐ)。 */
  background:
    radial-gradient(
      ellipse at 35% 25%,
      rgba(48, 56, 68, 0.50) 0%,
      rgba(38, 46, 56, 0.55) 55%,
      rgba(32, 40, 50, 0.60) 100%
    ),
    #262e38;
  /* face 自体に border は付けない (枠は frame__outer / frame__inner で描画)。
     border-radius は overflow 用に維持。 */
  border: 0;
  border-radius: 14px;
  /* GT と同じ微細な浮遊感: 内側に極細のハイライト + 軽いドロップシャドウ */
  box-shadow:
    inset 0 0 0 1px rgba(214, 224, 234, 0.05),
    0 18px 40px -24px rgba(0, 0, 0, 0.35);
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.uzFieldId__face--front { transform: rotateY(0deg); }
.uzFieldId__face--back { transform: rotateY(180deg); }

/* ─────────────────────────────────────────────
   3 層フレーム:
     1. frame__outer  薄い角丸 border (連続)
     2. frame__inner  薄い角丸 border (連続、 内側)
     3. runner × 4    明るい 4 辺の line 要素 + ::after の光が走る
   border に対して animate せず、 runner は border ではなく
   position:absolute の line。 ::after の translate で光を流す。
   ─────────────────────────────────────────── */
.uzFieldId__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 3;
}

.uzFieldId__frameOuter,
.uzFieldId__frameInner {
  position: absolute;
  border-style: solid;
  /* 一番外の枠は GT カードと同じ alpha 0.05 (= GT の box-shadow inset 0 0 0 1px rgba(214,224,234,0.05) と同じ) */
  border-color: rgba(214, 224, 234, 0.05);
  border-radius: inherit;
  pointer-events: none;
}
.uzFieldId__frameOuter {
  inset: 0;
  border-width: 1px;
}
.uzFieldId__frameInner {
  inset: 8px;
  border-width: 1px;
  /* 内側枠は外側より少し見える程度 (frameOuter より上のレイヤー的役割) */
  border-color: rgba(214, 224, 234, 0.10);
  border-radius: 8px;
}

/* 中央の明るい 4 辺 (= 中央層 line)。 border ではなく line 要素 */
.uzFieldId__runner {
  position: absolute;
  overflow: hidden;
  opacity: 0.95;
  pointer-events: none;
}
/* 上辺 */
.uzFieldId__runner--top {
  left: 18px;
  right: 18px;
  top: 5px;
  height: 1px;
  background: rgba(214, 224, 234, 0.32);
}
/* 右辺 */
.uzFieldId__runner--right {
  top: 18px;
  bottom: 18px;
  right: 5px;
  width: 1px;
  background: rgba(214, 224, 234, 0.32);
}
/* 下辺 */
.uzFieldId__runner--bottom {
  left: 18px;
  right: 18px;
  bottom: 5px;
  height: 1px;
  background: rgba(214, 224, 234, 0.32);
}
/* 左辺 */
.uzFieldId__runner--left {
  top: 18px;
  bottom: 18px;
  left: 5px;
  width: 1px;
  background: rgba(214, 224, 234, 0.32);
}

/* 光の本体 (横辺用 base、 縦辺用は下で上書き) */
/* 光の本体 (横辺用 base、 縦辺用は下で上書き)。
   先端 (進行方向の先) はくっきり bright、 後ろ尾だけ transparent に fade。
   blur は除去。 */
.uzFieldId__runner::after {
  content: "";
  position: absolute;
  display: block;
  /* 横辺 base: 左 (尾) transparent → 右 (先端) bright */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(235, 246, 255, 0.15) 35%,
    rgba(235, 246, 255, 0.55) 70%,
    rgba(235, 246, 255, 0.95) 100%
  );
}
/* 上辺 (translateX で走る、 左 → 右)。
   先端 = 右なので gradient は 左 (尾) transparent → 右 (先端) bright */
.uzFieldId__runner--top::after {
  top: 0;
  left: 0;
  width: 160px;
  height: 1px;
  transform: translateX(-180px);
  animation: uzFieldIdRunX 10s linear infinite;
}
/* 下辺 (右 → 左 に走る)。 専用 keyframe で transform を逆方向に再生。
   reverse を使うと opacity rise/fall タイミングと transform 進行が非対称になり、
   visible 開始位置が中央寄りになるため、 専用 keyframe で正しい位置から fade in する。 */
.uzFieldId__runner--bottom::after {
  top: 0;
  left: 0;
  width: 160px;
  height: 1px;
  background: linear-gradient(
    270deg,
    transparent 0%,
    rgba(235, 246, 255, 0.15) 35%,
    rgba(235, 246, 255, 0.55) 70%,
    rgba(235, 246, 255, 0.95) 100%
  );
  transform: translateX(calc(100% + 180px));
  animation: uzFieldIdRunXRev 10s linear infinite backwards;
}
/* 右辺 (translateY で走る、 上 → 下)。
   先端 = 下なので gradient は 上 (尾) transparent → 下 (先端) bright */
.uzFieldId__runner--right::after {
  top: 0;
  left: 0;
  width: 1px;
  height: 160px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(235, 246, 255, 0.15) 35%,
    rgba(235, 246, 255, 0.55) 70%,
    rgba(235, 246, 255, 0.95) 100%
  );
  transform: translateY(-180px);
  animation: uzFieldIdRunY 10s linear infinite;
}
/* 左辺 (下 → 上 に走る)。 専用 keyframe で transform を逆方向に再生。
   先端 = 上なので gradient は 下 (尾) transparent → 上 (先端) bright */
.uzFieldId__runner--left::after {
  top: 0;
  left: 0;
  width: 1px;
  height: 160px;
  background: linear-gradient(
    0deg,
    transparent 0%,
    rgba(235, 246, 255, 0.15) 35%,
    rgba(235, 246, 255, 0.55) 70%,
    rgba(235, 246, 255, 0.95) 100%
  );
  transform: translateY(calc(100% + 180px));
  animation: uzFieldIdRunYRev 10s linear infinite backwards;
}
/* 4 辺は同時に発火 (delay 0) */
.uzFieldId__runner--top::after,
.uzFieldId__runner--right::after,
.uzFieldId__runner--bottom::after,
.uzFieldId__runner--left::after {
  animation-delay: 0s;
}

/* 10s cycle のうち、 光は最初の 0.6 秒で素早く走り抜け、 残り 9.4 秒は待機。
   keyframe の 0-6% (= 0.6s) で 1 周分の transform 移動を完了する。 */
@keyframes uzFieldIdRunX {
  0%   { transform: translateX(-180px);             opacity: 0; }
  0.5% {                                             opacity: 1; }
  4%   {                                             opacity: 1; }
  5.5% {                                             opacity: 0; }
  6%   { transform: translateX(calc(100% + 180px)); opacity: 0; }
  100% { transform: translateX(calc(100% + 180px)); opacity: 0; }
}
@keyframes uzFieldIdRunY {
  0%   { transform: translateY(-180px);             opacity: 0; }
  0.5% {                                             opacity: 1; }
  4%   {                                             opacity: 1; }
  5.5% {                                             opacity: 0; }
  6%   { transform: translateY(calc(100% + 180px)); opacity: 0; }
  100% { transform: translateY(calc(100% + 180px)); opacity: 0; }
}
/* 反転再生用 (transform が逆方向)。 bottom (右→左)、 left (下→上) で使用。 */
@keyframes uzFieldIdRunXRev {
  0%   { transform: translateX(calc(100% + 180px)); opacity: 0; }
  0.5% {                                             opacity: 1; }
  4%   {                                             opacity: 1; }
  5.5% {                                             opacity: 0; }
  6%   { transform: translateX(-180px);             opacity: 0; }
  100% { transform: translateX(-180px);             opacity: 0; }
}
@keyframes uzFieldIdRunYRev {
  0%   { transform: translateY(calc(100% + 180px)); opacity: 0; }
  0.5% {                                             opacity: 1; }
  4%   {                                             opacity: 1; }
  5.5% {                                             opacity: 0; }
  6%   { transform: translateY(-180px);             opacity: 0; }
  100% { transform: translateY(-180px);             opacity: 0; }
}

/* GI 図版共通の slow rotation (UZ vortex / AB field / Ciro cell) */
@keyframes uzFieldIdRotate {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}
@keyframes uzFieldIdRotateRev {
  0%   { transform: rotate(0deg);    }
  100% { transform: rotate(-360deg); }
}

/* prefers-reduced-motion で animation 停止 (ユーザー設定尊重) */
@media (prefers-reduced-motion: reduce) {
  .uzFieldId__runner::after,
  .uzFieldId__vortex,
  .uzFieldId__field,
  .uzFieldId__cell {
    animation: none;
  }
}

/* ─────────────────────────────────────────────
   裏面 (face--back) の補正:
   face--back は transform: rotateY(180deg) で左右反転されるため、
   frame もまるごと左右反転される。 子の runner ごとに gradient/animation を
   override して visible 方向を補正しようとすると、 表面用と裏面用の指定が
   重なって光が両方向に走るバグが起きやすい。

   よりシンプルな解: 裏面の frame に scaleX(-1) を当てて、
   rotateY による左右反転を frame レベルで打ち消す。 こうすると frame 内の
   runner は表面と全く同じ DOM/CSS で走るので、 個別の override が不要。

   さらに、 裏面は content がスカスカで枠線が際立って明るく見えるため、
   frame border alpha を下げて表面と視覚的に揃える。
   ─────────────────────────────────────────── */
.uzFieldId__face--back .uzFieldId__frame {
  transform: scaleX(-1);
}
.uzFieldId__face--back .uzFieldId__frameOuter {
  border-color: rgba(214, 224, 234, 0.04);
}
.uzFieldId__face--back .uzFieldId__frameInner {
  border-color: rgba(214, 224, 234, 0.07);
}
.uzFieldId__face--back .uzFieldId__runner--top,
.uzFieldId__face--back .uzFieldId__runner--right,
.uzFieldId__face--back .uzFieldId__runner--bottom,
.uzFieldId__face--back .uzFieldId__runner--left {
  background: rgba(214, 224, 234, 0.22);
}

/* ── 表面コンテンツ ──────────────────────────────── */
.uzFieldId__eyebrow {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.40em;
  color: rgba(214, 224, 234, 0.62);
  white-space: nowrap;
}

.uzFieldId__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 46%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}
.uzFieldId__vortex {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  /* GI 図版共通: ゆっくり回転 (45s で 1 周) */
  animation: uzFieldIdRotate 45s linear infinite;
  transform-origin: 50% 50%;
}
.uzFieldId__vortexRing {
  fill: none;
  stroke: rgba(214, 224, 234, 0.16);
  stroke-width: 0.45;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}
.uzFieldId__vortexRing--mid {
  stroke: rgba(214, 224, 234, 0.11);
  stroke-dasharray: 1.5 4;
}
/* 渦は固定 (回転アニメ無し) */
.uzFieldId__vortexSpiral {
  fill: none;
  stroke: rgba(214, 224, 234, 0.42);
  stroke-width: 0.7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.uzFieldId__vortexCenter {
  fill: rgba(238, 244, 252, 0.78);
}

/* ─────────────────────────────────────────────
   AB 専用中央図版 (OPEN FIELD)
   - cellArc × 2: 上半円 + 下半円 (左右にギャップ、 2 つで囲む形)
   - cellVessel: 中央の受け皿の円 (アウトライン)
   - cellNode: 中心のノード
   UZ vortex (最遠半径 78) と同じスケール、 アニメなし。
   ─────────────────────────────────────────── */
.uzFieldId__field {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  /* GI 図版共通: ゆっくり回転 (55s で 1 周、 逆方向で UZ と差別化) */
  animation: uzFieldIdRotateRev 55s linear infinite;
  transform-origin: 50% 50%;
}
/* 外 → 中 → 内 と 3 層の半円ペアが角度をずらしながら中心へ巻き込む */
.uzFieldId__fieldArc {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* 外側: 一番濃い (場の境界) */
.uzFieldId__fieldArc--outer {
  stroke: rgba(214, 224, 234, 0.32);
  stroke-width: 0.55;
}
/* 中位: 少し薄く (中間層) */
.uzFieldId__fieldArc--mid {
  stroke: rgba(214, 224, 234, 0.24);
  stroke-width: 0.5;
}
/* 内側: 最も薄く (中心に近づくほど溶ける) */
.uzFieldId__fieldArc--inner {
  stroke: rgba(214, 224, 234, 0.18);
  stroke-width: 0.45;
}
/* 中央の受け皿の円 (アウトライン) */
.uzFieldId__fieldVessel {
  stroke: rgba(214, 224, 234, 0.42);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}
/* 中心のノード */
.uzFieldId__fieldNode {
  fill: rgba(238, 244, 252, 0.95);
}

/* ─────────────────────────────────────────────
   MOOTAN 専用中央図版 (NODE NETWORK)
   - cellCenter: 中心円 (アウトライン r=8)
   - cellCore: 中心の核
   - cellNode × 8: 中心円のすぐ外側、 同心円 r=34 上に 45° 等分配置
   - cellSpoke × 8: 内側ノード → 外側円中心 への放射線
   - cellOuterRing × 8: 放射線の先、 同心円 r=72 上の小さな円 (アウトライン)
   サイズは UZ vortex (最遠半径 78) と揃える。 アニメなし。
   ─────────────────────────────────────────── */
.uzFieldId__cell {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  /* GI 図版共通: ゆっくり回転 (65s で 1 周、 UZ と同方向だが速度違い) */
  animation: uzFieldIdRotate 65s linear infinite;
  transform-origin: 50% 50%;
}

/* 中心円 (アウトライン) */
.uzFieldId__cellCenter {
  stroke: rgba(214, 224, 234, 0.42);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}

/* 内側 8 ノード */
.uzFieldId__cellNode {
  fill: rgba(238, 244, 252, 0.78);
}

/* 放射線 (内側 → 外側) */
.uzFieldId__cellSpoke {
  stroke: rgba(214, 224, 234, 0.32);
  stroke-width: 0.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* 外側 8 接続円 */
.uzFieldId__cellOuterRing {
  fill: none;
  stroke: rgba(214, 224, 234, 0.42);
  stroke-width: 0.55;
  vector-effect: non-scaling-stroke;
}

/* 中央の核 */
.uzFieldId__cellCore {
  fill: rgba(238, 244, 252, 0.95);
}

.uzFieldId__role {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.32em;
  color: rgba(214, 224, 234, 0.70);
  white-space: nowrap;
}
/* 長い肩書 (例: EVOLUTION CATALYST / GRAVITY KEEPER) はカード幅に収まるよう
   font-size は他と揃えたまま letter-spacing だけ控えめにする */
.uzFieldId__role--long {
  letter-spacing: 0.28em;
}

.uzFieldId__id {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.30em;
  color: rgba(214, 224, 234, 0.36);
  white-space: nowrap;
}

/* GRAVITY ID UZ の下に表示する日付。 ID 表記と同じ色味。 */
.uzFieldId__date {
  position: absolute;
  top: 19%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.30em;
  color: rgba(214, 224, 234, 0.36);
  white-space: nowrap;
}

/* ── 裏面コンテンツ ────────────────────────────── */
/* OTHER FIELDS の上に乗る英文 2 行ステートメント */
.uzFieldId__statement {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 60px);
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.85;
  color: rgba(214, 224, 234, 0.62);
  text-align: center;
  white-space: normal;
}

.uzFieldId__fieldsLabel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.40em;
  color: rgba(214, 224, 234, 0.42);
  white-space: nowrap;
}

.uzFieldId__fields {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.uzFieldId__fields li {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.34em;
  color: rgba(214, 224, 234, 0.66);
  white-space: nowrap;
  line-height: 1;
}
/* 長いフィールド名 (例: ART SPACE BAR BUENA) はカード幅に収まるよう縮める */
.uzFieldId__fields-item--long {
  font-size: 9px;
  letter-spacing: 0.22em;
}
/* ZINK / NAVA の外部リンク。 親の button による flip を阻害しないよう
   JS 側で stopPropagation 済み。 hover で明度を上げる軽い feedback。 */
.uzFieldId__fieldLink {
  color: inherit;
  text-decoration: none;
  letter-spacing: inherit;
  display: inline-block;
  padding: 4px 6px;
  margin: -4px -6px;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.3s ease;
}
.uzFieldId__fieldLink:hover,
.uzFieldId__fieldLink:focus-visible {
  color: rgba(235, 246, 255, 0.95);
  outline: none;
}

.uzFieldId__id--back {
  bottom: 9%;
  color: rgba(214, 224, 234, 0.30);
}

/* ── SP ─────────────────────────────────────── */
@media (max-width: 768px) {
  .uzFieldId__shell {
    width: 88%;
    max-width: 320px;
  }

  /* SP: structureUZ 内（カード幅 200px、PC 320px の約 62%）で文字が大きく見えすぎないよう、
     PC 既定の約 70% に縮小。letter-spacing も詰まりすぎないよう比例縮小。
     スコープを .structureUZ 内の .uzFieldId に限定し、Top page など他箇所の
     カード単独配置（max-width: 320px のフルサイズ）には影響させない。 */
  .structureUZ .uzFieldId__eyebrow      { font-size: 7px;   letter-spacing: 0.30em; }
  .structureUZ .uzFieldId__date         { font-size: 6px;   letter-spacing: 0.22em; }
  .structureUZ .uzFieldId__role         { font-size: 6.5px; letter-spacing: 0.24em; line-height: 1.5; }
  .structureUZ .uzFieldId__role--long   { letter-spacing: 0.20em; }
  .structureUZ .uzFieldId__id           { font-size: 6px;   letter-spacing: 0.22em; }
  .structureUZ .uzFieldId__statement    { font-size: 7px;   letter-spacing: 0.14em; line-height: 1.85; }
  .structureUZ .uzFieldId__fieldsLabel  { font-size: 6.5px; letter-spacing: 0.30em; }
  .structureUZ .uzFieldId__fields li    { font-size: 7.5px; letter-spacing: 0.26em; }
  .structureUZ .uzFieldId__fields-item--long { font-size: 6.5px; letter-spacing: 0.18em; }
}

/* ── prefers-reduced-motion ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .uzFieldId {
    --uz-reveal-y: 0px;
    --uz-opacity: 1;
  }
}