/* =========================================================
   flux-narg.css
   FLUX NARG 属性カラー設計

   緑    = OPEN / CLOSE（循環・調整）
   星/金  = ATTACK（爆発・決定打）
   機械/灰 = BLUFF（計算・欺き）
   空/青  = BLOCK（流す・回避）
   幽世/紫 = KUI（奪取・吸収）
========================================================= */


/* =========================================================
   カラートークン
   ─ 全色を明度 L:40〜54% に引き上げ（見やすく・ワクワク感）
   ─ 彩度 S:68〜88% でゲームらしい鮮やかさを確保
   ─ OPEN/CLOSE は同じ緑系で明度差だけつける（統一感）
========================================================= */
:root{
  /* 緑・明 (OPEN：解放・広がり)   hsl(143, 72%, 43%) */
  --narg-open:       #20b860;
  --narg-open-bg:    #eafff4;
  --narg-open-fill:  #179048;
  --narg-open-glow:  rgba(32, 184, 96, .42);

  /* 緑・深 (CLOSE：収束・蓄積)    hsl(148, 76%, 32%) */
  --narg-close:      #109848;
  --narg-close-bg:   #e0f8ec;
  --narg-close-fill: #0b7034;
  --narg-close-glow: rgba(16, 152, 72, .42);

  /* 星/爆発 (ATTACK：衝撃波・閃光)  黄7:赤3 → hsl(42) アンバー */
  --narg-atk:        #f0a000;
  --narg-atk-bg:     #fff8e0;
  --narg-atk-fill:   #c07800;
  --narg-atk-glow:   rgba(240, 160, 0, .52);

  /* 機械/鋼 (BLUFF：計算・欺き)   hsl(210, 28%, 52%) */
  --narg-bluff:      #6284a8;
  --narg-bluff-bg:   #f0f5fb;
  --narg-bluff-fill: #486480;
  --narg-bluff-glow: rgba(98, 132, 168, .34);

  /* 空/青 (BLOCK：流す・回避)     hsl(198, 86%, 44%) */
  --narg-block:      #0ca0d0;
  --narg-block-bg:   #e0f6fd;
  --narg-block-fill: #0878a0;
  --narg-block-glow: rgba(12, 160, 208, .42);

  /* 幽世/紫 (KUI：奪取・吸収)     hsl(264, 64%, 52%) */
  --narg-kui:        #7840d0;
  --narg-kui-bg:     #f2eeff;
  --narg-kui-fill:   #5c2ea8;
  --narg-kui-glow:   rgba(120, 64, 208, .42);
}


/* =========================================================
   OPEN捨てボタン（緑・明）
========================================================= */
#a-open-discard{
  border-color: var(--narg-open);
  color:        var(--narg-open);
}
#a-open-discard:hover:not([disabled]){
  background:  var(--narg-open-bg);
  box-shadow:  0 0 10px var(--narg-open-glow);
}
#a-open-discard.open-pressing{
  background:   var(--narg-open-fill) !important;
  color:        #fff !important;
  border-color: var(--narg-open-fill) !important;
}


/* =========================================================
   CLOSE捨てボタン（緑・深）
========================================================= */
#a-close-discard{
  border-color: var(--narg-close);
  color:        var(--narg-close);
}
#a-close-discard:hover:not([disabled]){
  background:  var(--narg-close-bg);
  box-shadow:  0 0 10px var(--narg-close-glow);
}
#a-close-discard.open-pressing,
#a-close-discard.is-active{
  background:   var(--narg-close-fill) !important;
  color:        #fff !important;
  border-color: var(--narg-close-fill) !important;
}


/* =========================================================
   ATTACKボタン群（星/金）
   - to-attack（通常タブ→攻撃パネル切替）
   - back-to-discard（攻撃パネル内のATTACKラベル）
   - 攻撃パネル内 A/A'/B/C/D/E
   - KUI中に出る D/E ボタン
========================================================= */
#to-attack,
#back-to-discard,
#kurau-de-row button[data-attack],
#a-right-attack button[data-attack]{
  border-color: var(--narg-atk);
  color:        var(--narg-atk);
}
#to-attack:hover:not([disabled]),
#kurau-de-row button[data-attack]:hover:not([disabled]),
#a-right-attack button[data-attack]:hover:not([disabled]){
  background:  var(--narg-atk-bg);
  box-shadow:  0 0 12px var(--narg-atk-glow);
}

/* ATTACKパネルに入ったときの中央ラベルボタン（is-active / active） */
#panelA #back-to-discard.is-active,
#panelA #back-to-discard.active{
  background:   var(--narg-atk-fill) !important;
  color:        #fff !important;
  border-color: var(--narg-atk-fill) !important;
}

/* 攻撃押下中（フリック開始時） */
#panelA .a-attack-grid button.atk-pressing{
  background:   var(--narg-atk-fill) !important;
  color:        #fff !important;
  border-color: var(--narg-atk-fill) !important;
}


/* =========================================================
   BLUFFボタン（機械/灰）
========================================================= */
#a-close-discard-bluff{
  border-color: var(--narg-bluff);
  color:        var(--narg-bluff);
}
#a-close-discard-bluff:hover:not([disabled]){
  background:  var(--narg-bluff-bg);
  box-shadow:  0 0 10px var(--narg-bluff-glow);
}
#a-close-discard-bluff:active{
  background:   var(--narg-bluff-fill) !important;
  color:        #fff !important;
  border-color: var(--narg-bluff-fill) !important;
}


/* =========================================================
   KUI（喰い）ボタン（幽世/紫）
========================================================= */
#a-kurau{
  border-color: var(--narg-kui);
  color:        var(--narg-kui);
}
#a-kurau:hover:not([disabled]){
  background:  var(--narg-kui-bg);
  box-shadow:  0 0 12px var(--narg-kui-glow);
}
/* KUIモードON中 */
#a-kurau.is-active{
  background:   var(--narg-kui-fill) !important;
  color:        #fff !important;
  border-color: var(--narg-kui-fill) !important;
  box-shadow:   0 0 16px var(--narg-kui-glow) !important;
}


/* =========================================================
   BLOCK（防御）ボタン群（空/青）
========================================================= */
#defense-buttons .btn[data-defense]:not([data-defense=""]){
  border-color: var(--narg-block);
  color:        var(--narg-block);
}
#defense-buttons .btn[data-defense]:not([data-defense=""]):hover{
  background:  var(--narg-block-bg);
  box-shadow:  0 0 10px var(--narg-block-glow);
}

/* 防御押下中（フリック開始時） */
#defense-buttons .btn.def-pressing{
  background:   var(--narg-block-fill) !important;
  color:        #fff !important;
  border-color: var(--narg-block-fill) !important;
}

/* 防御しないボタン：赤を維持 */
#defense-buttons .btn[data-defense=""]{
  border-color: #e05252;
  color:        #e05252;
}
#defense-buttons .btn[data-defense=""]:hover{
  background:  #fef2f2;
  box-shadow:  0 0 10px rgba(224, 82, 82, .25);
}


/* =========================================================
   押下エフェクト（CSS :active + スプリング遷移）
   ─ 押し込み: 各 :active で高速 ease
   ─ 解放   : 各 ID の transition（y>1 cubic-bezier）でバウンス
   ─ JS・クラス不要
========================================================= */

/* ── OPEN：解放・浮遊感（ふわっと広がる） ── */
#a-open-discard {
  transition:
    transform 420ms cubic-bezier(.18, 2.6, .22, 1),
    filter    180ms ease;
}
#a-open-discard:active {
  transition: transform 55ms ease, filter 55ms ease;
  transform: translateY(2px) scale(0.94);
  filter: brightness(1.10);
}

/* ── CLOSE：収束・圧縮（ぐっと縮んで解放） ── */
#a-close-discard {
  transition:
    transform 310ms cubic-bezier(.28, 2.0, .38, 1),
    filter    160ms ease;
}
#a-close-discard:active {
  transition: transform 55ms ease, filter 55ms ease;
  transform: translateY(2px) scale(0.90);
  filter: brightness(0.88);
}

/* ── ATTACK：爆発・閃光（鋭くスナップ） ── */
#to-attack,
#kurau-de-row button[data-attack],
#a-right-attack button[data-attack] {
  transition:
    transform 270ms cubic-bezier(.14, 3.0, .24, 1),
    filter    130ms ease;
}
#to-attack:active,
#kurau-de-row button[data-attack]:active,
#a-right-attack button[data-attack]:active {
  transition: transform 45ms ease, filter 45ms ease;
  transform: translateY(4px) scale(0.89);
  filter: brightness(1.18);
}

/* ── BLUFF：計算・欺き（素早くキリッと） ── */
#a-close-discard-bluff {
  transition:
    transform 320ms cubic-bezier(.22, 2.0, .36, 1),
    filter    140ms ease;
}
#a-close-discard-bluff:active {
  transition: transform 50ms ease, filter 50ms ease;
  transform: translateY(2px) translateX(2px) scale(0.94);
  filter: hue-rotate(10deg) brightness(0.92);
}

/* ── BLOCK：流す・回避（柔らかくはね返る） ── */
#defense-buttons .btn[data-defense] {
  transition:
    transform 430ms cubic-bezier(.20, 2.8, .28, 1),
    filter    180ms ease;
}
#defense-buttons .btn[data-defense]:active {
  transition: transform 55ms ease, filter 55ms ease;
  transform: translateY(1px) scale(0.95);
  filter: brightness(1.08);
}

/* ── KUI：奪取・吸収（深く沈んで解放） ── */
#a-kurau {
  transition:
    transform 380ms cubic-bezier(.30, 2.4, .38, 1),
    filter    200ms ease;
}
#a-kurau:active {
  transition: transform 60ms ease, filter 60ms ease;
  transform: scale(0.86);
  filter: brightness(0.72) saturate(1.5);
}


/* =========================================================
   解放エフェクト（overlay + button アニメーション）
   ─ pointerup で JS が .narg-fx-* / .narg-btn-* を付与
   ─ overlay は body 直下に fixed 配置（overflow 制限なし）
========================================================= */

/* ── OPEN：緑の光が外に広がる ── */
@keyframes narg-fx-open {
  0%   { box-shadow: 0 0 10px 0   rgba(32,184,96,1.0), 0 0  0px  0  rgba(32,184,96,.5); opacity:1; }
  40%  { box-shadow: 0 0 20px 18px rgba(32,184,96,.45), 0 0 10px 42px rgba(32,184,96,.2); }
  100% { box-shadow: 0 0 30px 55px rgba(32,184,96, 0 ), 0 0 20px 85px rgba(32,184,96, 0); opacity:0; }
}
.narg-fx-open { animation: narg-fx-open 900ms cubic-bezier(.18,1,.3,1) forwards; }

/* ── CLOSE：緑の光が内に収束 ── */
.narg-fx-close {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,152,72,.8) 0%, rgba(16,152,72,.3) 45%, transparent 70%);
  animation: narg-fx-close 580ms ease-in both;
}
@keyframes narg-fx-close {
  0%   { transform: translate(-50%,-50%) scale(2.8); opacity:.9; }
  75%  { transform: translate(-50%,-50%) scale(.35); opacity:.7; }
  100% { transform: translate(-50%,-50%) scale(.04); opacity:0; }
}

/* ── ATTACK：星の爆発・3層衝撃波 ── */
.narg-fx-atk {
  border-radius: 50%;
  animation: narg-fx-atk 750ms cubic-bezier(.08,.95,.2,1) forwards;
}
@keyframes narg-fx-atk {
  0%   {
    box-shadow:
      0 0 55px  0   rgba(255,255,200,1.00),
      0 0  0px  0   rgba(255,200, 40, .90),
      0 0  0px  0   rgba(240,100,  0, .65);
    opacity:1;
  }
  18%  {
    box-shadow:
      0 0 65px 10px rgba(255,248,160, .92),
      0 0  8px 28px rgba(255,200, 40, .80),
      0 0  4px 48px rgba(240,100,  0, .38);
  }
  42%  {
    box-shadow:
      0 0 75px 44px rgba(255,220, 80, .22),
      0 0 12px 65px rgba(255,150, 20, .18),
      0 0  6px 92px rgba(220, 60,  0, .12);
  }
  100% {
    box-shadow:
      0 0 80px  80px rgba(255,200, 40, 0),
      0 0 16px 102px rgba(255,120,  0, 0),
      0 0  8px 132px rgba(200, 40,  0, 0);
    opacity:0;
  }
}
.narg-btn-atk { animation: narg-btn-atk 560ms ease-out; }
@keyframes narg-btn-atk {
  0%   { filter: brightness(1); }
  8%   { filter: brightness(5.0) saturate(0); }
  22%  { filter: brightness(3.0) saturate(3)  hue-rotate(-25deg); }
  48%  { filter: brightness(1.8) saturate(2)  hue-rotate(-15deg); }
  100% { filter: brightness(1)   saturate(1)  hue-rotate(0deg); }
}

/* ── BLUFF：グリッチ・ノイズ・画面の歪み ── */
.narg-fx-bluff {
  background: linear-gradient(180deg,
    rgba(98,132,168,.7) 0%,
    rgba(160,200,230,.5) 45%,
    rgba(98,132,168,.7) 100%
  );
  animation: narg-fx-bluff 480ms steps(4) forwards;
}
@keyframes narg-fx-bluff {
  0%   { opacity:.9; filter: hue-rotate(0deg)   brightness(1.6); clip-path: inset(0%      0 0%      0); transform: translate(-50%,-50%) translateX(0); }
  25%  { opacity:1;  filter: hue-rotate(100deg)  brightness(2.2); clip-path: inset(20%     0 35%     0); transform: translate(-50%,-50%) translateX(-5px); }
  50%  { opacity:.8; filter: hue-rotate(-80deg)  brightness(1.5); clip-path: inset(45%     0 15%     0); transform: translate(-50%,-50%) translateX(6px); }
  75%  { opacity:1;  filter: hue-rotate(55deg)   brightness(1.9); clip-path: inset(10%     0 50%     0); transform: translate(-50%,-50%) translateX(-4px); }
  100% { opacity:0;  filter: hue-rotate(0deg)    brightness(1);   clip-path: inset(0%      0 0%      0); transform: translate(-50%,-50%) translateX(0); }
}
.narg-btn-bluff { animation: narg-btn-bluff 440ms linear; }
@keyframes narg-btn-bluff {
  0%,100% { transform: translateX(0)   translateZ(0); filter: none; }
  10%     { transform: translateX(-8px) translateZ(0); filter: brightness(1.6) hue-rotate(90deg); }
  22%     { transform: translateX( 9px) translateZ(0); filter: brightness(.55) hue-rotate(-75deg); }
  35%     { transform: translateX(-7px) translateZ(0); filter: brightness(1.4) hue-rotate(50deg); }
  48%     { transform: translateX( 8px) translateZ(0); filter: brightness(.75) hue-rotate(-85deg); }
  60%     { transform: translateX(-4px) translateZ(0); filter: brightness(1.2) hue-rotate(30deg); }
  72%     { transform: translateX( 5px) translateZ(0); filter: brightness(.9)  hue-rotate(-15deg); }
  85%     { transform: translateX(-2px) translateZ(0); filter: brightness(1.05); }
}

/* ── BLOCK：風の流れ・薄いベール ── */
.narg-fx-block {
  background: linear-gradient(90deg,
    transparent              5%,
    rgba(12,160,208,.22)    25%,
    rgba(190,240,255,.70)   48%,
    rgba(12,160,208,.22)    72%,
    transparent             95%
  );
  border-radius: 6px;
  animation: narg-fx-block 680ms ease-out forwards;
}
@keyframes narg-fx-block {
  0%   { transform: translate(-50%,-50%) translateX(-130%) skewX(-12deg); opacity:.95; }
  70%  { opacity:.6; }
  100% { transform: translate(-50%,-50%) translateX( 130%) skewX(-12deg); opacity:0; }
}

/* ── KUI：黒い吸収、差し込む紫の光 ── */
.narg-fx-kui {
  border-radius: 12px;
  animation: narg-fx-kui 900ms cubic-bezier(.22,0,.3,1) forwards;
}
@keyframes narg-fx-kui {
  0%   { box-shadow: 0 0  0px  0   rgba(0,0,0,.95),      0 0  0px  0   rgba(0,0,0,.5); opacity:1; }
  28%  { box-shadow: 0 0 22px 28px rgba(0,0,0,.60),      0 0  0px  0   rgba(0,0,0,.2); }
  58%  { box-shadow: 0 0 12px 10px rgba(0,0,0,.10),      0 0 18px 44px rgba(0,0,0,.55); }
  100% { box-shadow: 0 0  0px  0   rgba(0,0,0, 0 ),      0 0 28px 76px rgba(0,0,0, 0); opacity:0; }
}
/* KUI はボタン本体アニメなし（:active 遷移と干渉するため overlay のみ） */


/* =========================================================
   センター表示（#center-float）
   ─ ATTACK の HIT 表示を 星/金 テーマで統一
   ─ A → E に向かって金→琥珀→赤→紫 の強度グラデーション
========================================================= */

/* A / A'：薄い金（2HIT） */
#center-float[data-kind="A"],
#center-float[data-kind="A'"]{
  color: #fef9c3;
  text-shadow:
    0 0 10px rgba(250, 204, 21, .75),
    0 0 22px rgba(250, 204, 21, .40);
}

/* B：黄金（4HIT） */
#center-float[data-kind="B"]{
  color: #fcd34d;
  text-shadow:
    0 0 12px rgba(252, 211, 77, .85),
    0 0 28px rgba(252, 211, 77, .45);
}

/* C：琥珀（4HIT） */
#center-float[data-kind="C"]{
  color: #f59e0b;
  text-shadow:
    0 0 12px rgba(245, 158, 11, .85),
    0 0 28px rgba(245, 158, 11, .45);
}

/* D：赤（6HIT） */
#center-float[data-kind="D"]{
  color: #ef4444;
  text-shadow:
    0 0 12px rgba(239, 68, 68, .85),
    0 0 28px rgba(239, 68, 68, .45);
}

/* E：紫（8HIT） */
#center-float[data-kind="E"]{
  color: #c084fc;
  text-shadow:
    0 0 12px rgba(192, 132, 252, .85),
    0 0 28px rgba(192, 132, 252, .45);
}

/* ドラ付き攻撃：金の輝きを上乗せ（ui.toast.css の青を上書き） */
#center-float[data-dragon="1"]{
  filter: saturate(1.3) brightness(1.1);
  text-shadow:
    0 0 14px rgba(250, 204, 21, .90),
    0 0 30px rgba(250, 204, 21, .50);
}


/* =========================================================
   センター表示：将来の OPEN/CLOSE/BLUFF/BLOCK/KUI 対応
   （現在は攻撃のみセンター表示があるが、今後の拡張用に定義）
========================================================= */
#center-float[data-kind="open"]{
  color: var(--narg-open);
  text-shadow:
    0 0 12px var(--narg-open-glow),
    0 0 24px var(--narg-open-glow);
}
#center-float[data-kind="close"]{
  color: var(--narg-close);
  text-shadow:
    0 0 12px var(--narg-close-glow),
    0 0 24px var(--narg-close-glow);
}
#center-float[data-kind="bluff"]{
  color: #94a3b8;
  text-shadow: 0 0 12px rgba(148, 163, 184, .5);
  filter: saturate(0.3) brightness(0.9);
}
#center-float[data-kind="block"]{
  color: var(--narg-block);
  text-shadow:
    0 0 12px var(--narg-block-glow),
    0 0 24px var(--narg-block-glow);
}
#center-float[data-kind="kui"]{
  color: #2A2A2A;
  text-shadow: none;
}