/* リングコマンド（src/ui2/ringcmd.js）。手本は 聖剣伝説3（SFC 1995 の 取扱説明書 16・17ページ／2020年 リメイク）＋ tools/ui2/SPEC.md（氷墨）。
   決まり：
   ・輪は **アイコンだけ**（うしろの 暗い 円盤・二重の 輪は 置かない）。細い 光る 線 1本が 輪の 道
   ・**真上（12時）の 照準だけ が えらんで いる しるし**（SFC の 4つの かぎ）。ほかの アイコンは どれも 同じ 見た目（光らない・大きく ならない）
   ・名前と のこり（おなか／回数）は 照準の すぐ 上の 札。輪の 名前（こうげきの わざ など）と 点は その 札の 上の 行
   ・アイコンは 1つの 部品：46px の 丸・暗い ガラス・ふち 2px＝種類の 色・図形の 線＝種類の 明るい 色（SPEC の --t-*）。まだ 使えない ものは 灰色の ふちと 錠
   ・なかまの 顔（先頭の 交代）は 輪と かさねず 下の 板に 1列
   ・字：名前 18px/900 白・のこり 13px 数字の 書体・輪の 名前 12px/700 明るい 種類の 色。地は ガラス（4.5:1 いじょう）
   位置と 大きさ・回る 動きは JS が transform で 入れる（毎フレーム 要素を 作らない）。
   z-index 57：#dun（44）より 上・#fxFlash（58）#demoBar（60）#talkBox（76）#dunWho（78）より 下。 */
#ringCmd{
  --rc-bg:var(--ui-bg,rgba(10,16,28,.78)); --rc-bgs:var(--ui-bg-strong,#0b1320); --rc-line:var(--ui-line,rgba(255,255,255,.14));
  --rc-text:var(--ui-text,#f3f6fa); --rc-sub:var(--ui-sub,#b8c4d4); --rc-mute:var(--ui-mute,#8ea0b6);
  --rc-font:var(--font,'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',system-ui,sans-serif);
  --rc-num:var(--font-num,'Barlow Semi Condensed','Noto Sans JP',system-ui,sans-serif);
  --rc-blur:blur(14px) saturate(1.3);
  --g:#ff5a6a; --gt:#ff9ea8;
  position:absolute; inset:0; z-index:57; overflow:hidden; pointer-events:none;
  font-family:var(--rc-font); color:var(--rc-text); line-height:1.5;
  -webkit-user-select:none; user-select:none; touch-action:none; -webkit-tap-highlight-color:transparent;
}
#ringCmd.hidden{display:none}
#ringCmd.on{pointer-events:auto}
#ringCmd button{font-family:inherit; -webkit-tap-highlight-color:transparent}
/* 種類の 色（--g＝ふち・線／--gt＝暗い 地の 上の 図形と 字。SPEC の --c-* と --t-*） */
#ringCmd .t-atk{--g:var(--c-atk,#ff5a6a); --gt:var(--t-atk,#ff9ea8)}
#ringCmd .t-heal{--g:var(--c-heal,#3ddc97); --gt:var(--t-heal,#5ce6a8)}
#ringCmd .t-buff{--g:var(--c-buff,#5aa9ff); --gt:var(--t-buff,#9ccbff)}
#ringCmd .t-pass{--g:var(--c-pass,#c4b5fd); --gt:var(--t-pass,#c4b5fd)}
#ringCmd .t-ougi{--g:#f8fafc; --gt:#f8fafc}
#ringCmd .t-wand1{--g:var(--c-wand1,#a78bfa); --gt:var(--t-wand,#c4b0ff)}
#ringCmd .t-wandall{--g:var(--c-wandall,#f472b6); --gt:#f9a8d4}
#ringCmd .t-scroll{--g:var(--c-scroll,#2dd4bf); --gt:var(--t-scroll,#5eead4)}

/* まわりを すこし 暗く（主人公の まわりは そのまま。中心は JS が --hx --hy で 追う） */
#ringCmd .rcDim{position:absolute; inset:0; opacity:0;
  background:radial-gradient(circle at var(--hx,50%) var(--hy,50%), rgba(3,7,14,0) 0, rgba(3,7,14,0) 150px, rgba(3,7,14,.34) 260px, rgba(3,7,14,.52) 480px)}

/* 輪（rcRoot の 原点＝輪の 中心＝主人公） */
#ringCmd .rcRoot{position:absolute; left:0; top:0; width:0; height:0; will-change:transform}
#ringCmd .rcTrack{position:absolute; overflow:visible; pointer-events:none}
#ringCmd .rcTrack .line{fill:none; stroke:color-mix(in srgb,var(--gt) 70%,transparent); stroke-width:1.5}
#ringCmd .rcTrack .halo{fill:none; stroke:color-mix(in srgb,var(--g) 30%,transparent); stroke-width:7; filter:blur(3px)}
#ringCmd .rcTrack .orn{fill:var(--gt); stroke:none}
#ringCmd .rcTrack .glow{fill:none; stroke:var(--gt); stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 0 6px var(--g))}

/* 照準（真上・うごかない）：SFC の 4つの かぎ。アイコンが 入って 止まると 1回 しまる（lock） */
#ringCmd .rcAim{position:absolute; left:0; top:0; width:68px; height:68px; margin:-34px 0 0 -34px; pointer-events:none; overflow:visible}
#ringCmd .rcAim path{fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px var(--g)) drop-shadow(0 1px 2px rgba(0,0,0,.7))}
#ringCmd .rcAim.lock{animation:rcLock .24s cubic-bezier(.3,1.3,.5,1)}
@keyframes rcLock{0%{transform:scale(1.14)}55%{transform:scale(.94)}100%{transform:scale(1)}}

/* アイコン（1つの 部品）。大きさ・位置は JS。押せる 大きさ 44px いじょう */
#ringCmd .rcGem{position:absolute; left:0; top:0; width:46px; height:46px; margin:-23px 0 0 -23px; padding:0; border:0; border-radius:50%;
  background:transparent; cursor:pointer; will-change:transform,opacity; color:var(--gt)}
#ringCmd .rcGem .gm{position:absolute; inset:0; border-radius:50%; background:rgba(9,14,24,.84); box-shadow:inset 0 0 0 2px var(--g), 0 4px 12px rgba(0,0,0,.45)}
#ringCmd .rcGem svg{position:absolute; left:50%; top:50%; width:62%; height:62%; transform:translate(-50%,-50%); overflow:visible}
/* おうぎ：白銀の 図形・ふちは 紅と 蒼 */
#ringCmd .rcGem.t-ougi .gm{box-shadow:inset 0 0 0 2px #f8fafc, 0 0 0 1px rgba(255,90,106,.9), 0 0 10px rgba(90,169,255,.55), 0 4px 12px rgba(0,0,0,.45)}
/* まだ 使えない（条件・おなか・回数・ふうじ）：灰色の ふち・図形も 灰・錠 */
#ringCmd .rcGem.lock{color:var(--rc-mute)}
#ringCmd .rcGem.lock .gm{box-shadow:inset 0 0 0 2px rgba(255,255,255,.2), 0 4px 12px rgba(0,0,0,.45)}
#ringCmd .rcGem .lk{position:absolute; right:-4px; bottom:-4px; width:20px; height:20px; border-radius:50%; display:none;
  background:var(--rc-bgs); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); color:var(--rc-text)}
#ringCmd .rcGem .lk svg{width:13px; height:13px}
#ringCmd .rcGem.lock .lk{display:block}
/* 回数・数（つえの のこり・ふだの 数） */
#ringCmd .rcGem .nm{position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); min-width:20px; height:17px; padding:0 5px; border-radius:9px;
  background:var(--rc-bgs); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); color:var(--rc-text);
  font:700 12px/17px var(--rc-num); font-variant-numeric:tabular-nums; text-align:center; display:none}
#ringCmd .rcGem .nm.on{display:block}
#ringCmd .rcGem.no .gm{animation:rcNo .34s linear}
@keyframes rcNo{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
/* おうぎの ゲージ（アイコンの まわりの 輪）。満タンで 紅と 蒼に 光る */
#ringCmd .rcGem .gg{position:absolute; left:-6px; top:-6px; width:calc(100% + 12px); height:calc(100% + 12px); transform:rotate(-90deg); overflow:visible}
#ringCmd .rcGem .ggT{fill:none; stroke:rgba(255,255,255,.18); stroke-width:3.2}
#ringCmd .rcGem .ggV{fill:none; stroke:#f8fafc; stroke-width:3.2; stroke-linecap:round}
#ringCmd .rcGem.full .ggV{animation:rcFull 1.4s ease-in-out infinite}
@keyframes rcFull{0%,100%{filter:drop-shadow(0 0 3px #ff5a6a)}50%{filter:drop-shadow(0 0 7px #5aa9ff)}}

/* 輪が 空（つえ・ふだを もっていない）：照準の 中に 1行 */
#ringCmd .rcEmpty{position:absolute; left:0; top:0; width:200px; text-align:center; pointer-events:none; display:none;
  font-size:13px; font-weight:700; color:var(--rc-text); padding:6px 10px; border-radius:12px; background:var(--rc-bg); box-shadow:inset 0 0 0 1px var(--rc-line)}
#ringCmd .rcEmpty.on{display:block}

/* 照準の 上の 札：1行め＝輪の 名前と 点（5つの 輪）・2行め＝名前と のこり。ガラスの 地・下に 照準を さす 三角 */
#ringCmd .rcTag{position:absolute; left:0; top:0; pointer-events:none; will-change:transform,opacity;
  display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 14px 7px; border-radius:14px; white-space:nowrap;
  background:var(--rc-bg); -webkit-backdrop-filter:var(--rc-blur); backdrop-filter:var(--rc-blur);
  box-shadow:inset 0 0 0 1px var(--rc-line), 0 10px 30px rgba(0,0,0,.35)}
#ringCmd .rcTag::after{content:""; position:absolute; left:50%; top:100%; margin-left:-6px; border:6px solid transparent; border-top:6px solid var(--rc-bg)}
#ringCmd .rcTag .cat{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--gt); line-height:18px}
#ringCmd .rcTag .dots{display:flex; gap:4px}
#ringCmd .rcTag .dots i{display:block; width:5px; height:5px; border-radius:3px; background:rgba(255,255,255,.3); transition:width .18s cubic-bezier(.3,1.3,.5,1)}
#ringCmd .rcTag .dots i.on{width:14px; background:var(--gt)}
#ringCmd .rcTag .nmRow{display:flex; align-items:baseline; gap:8px; line-height:26px}
#ringCmd .rcTag .nmRow b{font-size:18px; font-weight:900; color:var(--rc-text); letter-spacing:.02em}
#ringCmd .rcTag .nmRow .lv{font:700 13px/1 var(--rc-num); font-variant-numeric:tabular-nums; color:var(--rc-sub)}
#ringCmd .rcTag .cost{font-size:12px; font-weight:700; color:var(--rc-text); padding:0 8px; border-radius:999px; line-height:20px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g) 70%,transparent)}
#ringCmd .rcTag .cost em{font-style:normal; font-family:var(--rc-num); font-variant-numeric:tabular-nums; font-size:14px; margin-left:2px}
#ringCmd .rcTag .cost.bad{color:var(--t-atk,#ff9ea8); box-shadow:inset 0 0 0 1px rgba(255,90,106,.7)}
#ringCmd .rcTag .cost:empty{display:none}
#ringCmd .rcTag.up .nmRow{animation:rcUp .24s cubic-bezier(.2,.9,.2,1.15)}
#ringCmd .rcTag.dn .nmRow{animation:rcDn .24s cubic-bezier(.2,.9,.2,1.15)}
@keyframes rcUp{0%{transform:translateY(12px); opacity:0}100%{transform:none; opacity:1}}
@keyframes rcDn{0%{transform:translateY(-12px); opacity:0}100%{transform:none; opacity:1}}

/* 最下部の 板（ダンジョンの 操作盤の 上に 下から かぶさる）：なかまの 顔の 列・流れる 説明・とじる／つかう。入れ物は overflow:hidden */
#ringCmd .rcBar{position:absolute; left:0; right:0; bottom:0; box-sizing:border-box; overflow:hidden;
  padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 12px);
  background:var(--rc-bg); border-top:1px solid var(--rc-line); border-radius:20px 20px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.35);
  -webkit-backdrop-filter:var(--rc-blur); backdrop-filter:var(--rc-blur); will-change:transform}
/* なかまの 顔（先頭の 交代）：いまの 先頭は 白い ふち。体力は 顔の まわりの 輪 */
#ringCmd .rcFaces{display:flex; align-items:center; gap:8px; min-width:0}
#ringCmd .rcFace{position:relative; flex:0 0 46px; width:46px; height:46px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer}
#ringCmd .rcFace .pic{position:absolute; inset:5px; border-radius:50%; background-color:#1b2536; background-repeat:no-repeat;
  background-size:300% auto; background-position:47% 36%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
#ringCmd .rcFace svg.hp{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
#ringCmd .rcFace .hpT{fill:none; stroke:rgba(255,255,255,.14); stroke-width:3}
#ringCmd .rcFace .hpV{fill:none; stroke:var(--hpc,#3ddc97); stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset .3s}
#ringCmd .rcFace.lead .pic{box-shadow:inset 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.45)}
#ringCmd .rcFace.down .pic{filter:grayscale(1) brightness(.55)}
#ringCmd .rcFace.down::after{content:""; position:absolute; left:50%; top:50%; width:28px; height:2px; margin:-1px 0 0 -14px; background:#ff5a6a;
  transform:rotate(-40deg); box-shadow:0 0 0 1px rgba(0,0,0,.5)}
#ringCmd .rcFace.swap{animation:rcSwap .5s cubic-bezier(.2,.9,.2,1.15)}
@keyframes rcSwap{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
#ringCmd .rcFace.no{animation:rcNo .34s linear}
/* 顔の 列の 見出し（1行・左よせ） */
#ringCmd .rcFaceTtl{margin:0 0 6px 2px; font-size:12px; font-weight:700; line-height:16px; letter-spacing:.04em; color:var(--rc-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* 流れる 説明（まだ 使えない わけ＋説明＋だんの のび。はみ出す ときだけ 流す） */
#ringCmd .rcBar .run{margin-top:8px; min-width:0; overflow:hidden; white-space:nowrap; position:relative;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent)}
#ringCmd .rcBar .run > span{display:inline-block; font-size:13px; font-weight:500; line-height:20px; color:var(--rc-sub); will-change:transform}
#ringCmd .rcBar .run em{font-style:normal; font-weight:700; color:var(--t-atk,#ff9ea8); margin-right:.8em}
#ringCmd .rcBar .run em:empty{display:none; margin:0}
#ringCmd .rcBar .run i{font-style:normal}
#ringCmd .rcBar .run.go > span{animation:rcRun var(--rd,8s) linear infinite}
@keyframes rcRun{0%,14%{transform:translateX(0)}86%,100%{transform:translateX(var(--rx,0px))}}
#ringCmd .rcBar .hint{margin-top:2px; font-size:12px; font-weight:700; color:var(--rc-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#ringCmd .rcBar .hint:empty{display:none}
/* とじる・つかう（index.html の 共通の .btn：白＝いちばん 押す もの・ガラス＝ほか）。同じ 列＝同じ 部品・同じ 高さ */
#ringCmd .rcBar .bt{display:flex; gap:10px; margin-top:10px}
#ringCmd .rcBar .bt .btn{min-height:48px; font-size:15px}
#ringCmd .rcBar .bt .rcNo{flex:0 0 104px}
#ringCmd .rcBar .bt .rcGo{flex:1 1 auto}
/* まだ 使えない・いつも はたらく：押すと わけが 出る（字は うすく しない） */
#ringCmd .rcBar .bt .rcGo.lock{background:rgba(255,255,255,.06); color:var(--rc-sub); box-shadow:inset 0 0 0 1px var(--rc-line)}

/* リングを 開いて いる あいだは なかまの ひとこと（#talkBox）と 小さい 地図を かくす（輪と かさなる。もちものと おなじ 決まり） */
#app:has(#ringCmd.on) #talkBox{visibility:hidden}
#app:has(#ringCmd.on) #dunMini{opacity:0 !important}   /* drawMini が style.opacity を じかに 書くので !important */

@media (min-width:768px){
  #ringCmd .rcTag .nmRow b{font-size:20px}
  #ringCmd .rcBar .run > span{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  #ringCmd .rcBar .run.go > span{animation:none}
}