@charset "UTF-8";
/* 조작감·판정 연출 전용 스타일. styles.css 다음에 읽혀 필요한 곳만 덮어씁니다.
   이미지 훅: Codex 가 :root 에 --fx-impact-image / --fx-recovery-image / --fx-brush-image 를 채우고
   같이 있는 --fx-*-fallback 을 none 으로 끄면 그림이 바로 적용됩니다. 기본값은 none 이라 요청이 나가지 않습니다. */

/* ── 연출 레이어 ─────────────────────────────────────────── */
#fx-layer{position:fixed;inset:0;z-index:15;pointer-events:none;overflow:hidden;contain:layout size style}
#fx-layer .fx-node{position:absolute;pointer-events:none;will-change:transform,opacity;animation-fill-mode:both}

/* ── impact-burst · 피해/타격의 잉크 충격 파편 (정사각 투명 PNG 자리) ── */
.impact-burst{
  width:var(--fx-size,160px);height:var(--fx-size,160px);
  transform:translate(-50%,-50%) rotate(var(--fx-rot,0deg));
  background-image:var(--fx-impact-image,none);
  background-size:contain;background-position:center;background-repeat:no-repeat;
  animation:fx-impact .46s cubic-bezier(.2,.8,.3,1)
}
.impact-burst::after{
  content:"";position:absolute;inset:0;display:var(--fx-impact-fallback,block);
  background:
    conic-gradient(from 8deg,
      rgba(165,72,56,.92) 0 3deg, transparent 3deg 26deg,
      rgba(38,52,44,.8) 26deg 29deg, transparent 29deg 54deg,
      rgba(165,72,56,.85) 54deg 58deg, transparent 58deg 84deg,
      rgba(38,52,44,.78) 84deg 86deg, transparent 86deg 118deg,
      rgba(165,72,56,.85) 118deg 122deg, transparent 122deg 152deg,
      rgba(38,52,44,.8) 152deg 154deg, transparent 154deg 188deg,
      rgba(165,72,56,.85) 188deg 192deg, transparent 192deg 224deg,
      rgba(38,52,44,.78) 224deg 227deg, transparent 227deg 258deg,
      rgba(165,72,56,.85) 258deg 262deg, transparent 262deg 292deg,
      rgba(38,52,44,.8) 292deg 294deg, transparent 294deg 326deg,
      rgba(165,72,56,.8) 326deg 330deg, transparent 330deg 360deg),
    radial-gradient(circle,rgba(165,72,56,.5) 0 11%,rgba(38,52,44,.22) 11% 23%,transparent 24%);
  -webkit-mask-image:radial-gradient(circle,#000 0 40%,rgba(0,0,0,.35) 60%,transparent 74%);
  mask-image:radial-gradient(circle,#000 0 40%,rgba(0,0,0,.35) 60%,transparent 74%)
}
@keyframes fx-impact{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--fx-rot,0deg)) scale(.42)}
  22%{opacity:1;transform:translate(-50%,-50%) rotate(var(--fx-rot,0deg)) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--fx-rot,0deg)) scale(1.24)}
}

/* ── recovery-glow · 회복/보급의 생존빛 (정사각 투명 PNG 자리) ── */
.recovery-glow{
  width:var(--fx-size,184px);height:var(--fx-size,184px);
  transform:translate(-50%,-50%);
  background-image:var(--fx-recovery-image,none);
  background-size:contain;background-position:center;background-repeat:no-repeat;
  animation:fx-recovery .64s ease-out
}
.recovery-glow::after{
  content:"";position:absolute;inset:0;display:var(--fx-recovery-fallback,block);border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,253,243,.88) 0 8%,rgba(233,216,166,.55) 8% 26%,rgba(82,100,73,.3) 26% 46%,transparent 58%),
    conic-gradient(from 0deg,transparent 0 16deg,rgba(255,250,228,.42) 18deg 22deg,transparent 24deg 58deg,rgba(255,250,228,.34) 60deg 64deg,transparent 66deg 104deg,rgba(255,250,228,.4) 106deg 110deg,transparent 112deg 162deg,rgba(255,250,228,.32) 164deg 168deg,transparent 170deg 214deg,rgba(255,250,228,.4) 216deg 220deg,transparent 222deg 272deg,rgba(255,250,228,.34) 274deg 278deg,transparent 280deg 330deg,rgba(255,250,228,.38) 332deg 336deg,transparent 338deg 360deg);
  -webkit-mask-image:radial-gradient(circle,#000 0 46%,transparent 76%);
  mask-image:radial-gradient(circle,#000 0 46%,transparent 76%)
}
@keyframes fx-recovery{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}
}

/* ── turn-brush · 턴 전환/전투 시작의 붓터치 띠 (가로 투명 PNG 자리) ── */
.fx-brush-slot{left:50%;top:38%;width:min(92vw,720px);transform:translate(-50%,-50%);display:grid;place-items:center;animation:fx-brush-slot 1.3s ease-out}
.turn-brush{
  grid-area:1/1;width:100%;height:var(--fx-brush-height,74px);
  background-image:var(--fx-brush-image,none);
  background-size:100% 100%;background-position:center;background-repeat:no-repeat;
  animation:fx-brush 1.3s cubic-bezier(.16,.84,.26,1)
}
.turn-brush::after{
  content:"";position:absolute;inset:0;display:var(--fx-brush-fallback,block);
  background:
    linear-gradient(92deg,transparent 0,var(--fx-brush-color,#303d32) 7%,var(--fx-brush-color,#303d32) 93%,transparent 100%),
    repeating-linear-gradient(88deg,rgba(255,253,243,.09) 0 2px,transparent 2px 7px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)
}
.fx-brush-slot{position:absolute}
.turn-brush{position:relative}
.fx-brush-label{grid-area:1/1;position:relative;color:#fffdf3;font-size:clamp(1rem,3.4vw,1.5rem);font-weight:900;letter-spacing:-.03em;text-align:center;padding:0 24px;word-break:keep-all;text-shadow:0 1px 6px rgba(20,28,22,.65);animation:fx-brush-label 1.3s ease-out}
.fx-brush-slot.tone-mine{--fx-brush-color:#35502f}
.fx-brush-slot.tone-theirs{--fx-brush-color:#5d5f4c}
.fx-brush-slot.tone-combat{--fx-brush-color:#5c3a2c}
.fx-brush-slot.tone-ending{--fx-brush-color:#8a5a2e}
.fx-brush-slot.tone-win{--fx-brush-color:#3c5a3a}
.fx-brush-slot.tone-lose{--fx-brush-color:#6d3328}
@keyframes fx-brush-slot{0%,92%{opacity:1}100%{opacity:0}}
@keyframes fx-brush{
  0%{opacity:0;transform:scaleX(.08) skewX(-7deg)}
  34%{opacity:1;transform:scaleX(1) skewX(0)}
  82%{opacity:1;transform:scaleX(1) skewX(0)}
  100%{opacity:0;transform:scaleX(1.03) skewX(0)}
}
@keyframes fx-brush-label{0%,22%{opacity:0;transform:translateY(6px)}44%{opacity:1;transform:none}86%{opacity:1}100%{opacity:0}}

/* Public use: lift from the hand, hold a readable card over the field, then settle. */
#fx-layer .fx-card-notice{width:min(420px,calc(100vw - 24px));z-index:4;transform:translate(-50%,-50%);animation:fx-use-flight var(--use-duration,4200ms) ease-in-out both;perspective:900px}
.fx-notice-card{position:relative;display:grid;grid-template-columns:142px minmax(0,1fr);gap:7px 15px;padding:18px;overflow:hidden;border:1px solid #dcc18c;border-radius:7px;color:#eeeade;background:linear-gradient(130deg,#39424a,#1a242c 74%);box-shadow:inset 0 0 0 4px #131d23,0 14px 42px #000c,0 0 32px #d7b9823b}
.fx-notice-verb{grid-column:2;padding-right:25px;color:#e3be81;font-size:11px;letter-spacing:.06em;font-weight:800}
.fx-notice-title{grid-column:2;padding-right:16px;color:#fff5dc;font-size:23px;line-height:1.25;word-break:keep-all;overflow-wrap:anywhere}
.fx-notice-cost{position:absolute;right:11px;top:11px;display:grid;place-items:center;width:27px;height:29px;color:#ffde9f;background:#263640;border:1px solid #ae9770;border-radius:4px;font:bold 20px Georgia,serif}
.fx-notice-card img{grid-column:1;grid-row:1/5;display:block;align-self:stretch;width:100%;height:100%;min-height:164px;max-height:280px;object-fit:cover;border:1px solid #afa184;border-radius:3px;background:#efe9d7;filter:grayscale(1)}
.fx-notice-effect{grid-column:2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden;margin:5px 0;font-size:14px;line-height:1.55;word-break:keep-all;white-space:pre-line}
.fx-notice-hint{grid-column:2;align-self:end;padding-top:8px;border-top:1px solid #a4957460;color:#adbfc9;font-size:10px;line-height:1.4}
.fx-notice-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;transform-origin:left;background:#e3bb7b;animation:fx-use-progress var(--use-duration,4200ms) linear both}
#fx-layer .fx-card-notice.is-mine{width:min(324px,calc(100vw - 28px));z-index:3}
.fx-card-notice.is-mine .fx-notice-card{grid-template-columns:98px minmax(0,1fr);padding:13px;gap:5px 11px;border-color:#9dbac9;box-shadow:inset 0 0 0 3px #131d23,0 8px 28px #000b}
.fx-card-notice.is-mine .fx-notice-title{font-size:18px}
.fx-card-notice.is-mine .fx-notice-effect{font-size:12px;-webkit-line-clamp:5}
.fx-card-notice.is-mine img{min-height:120px;max-height:180px}
.fx-card-notice.is-mine .fx-notice-hint{display:none}
.fx-card-notice.is-still,.fx-card-notice.is-still .fx-notice-progress{animation:none!important}
.fx-card-notice.is-still .fx-notice-progress{display:none}
@keyframes fx-use-flight{
  0%{opacity:0;transform:translate(calc(-50% + var(--use-from-x)),calc(-50% + var(--use-from-y))) scale(.22) rotate(-8deg)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(1deg)}
  19%,88%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(calc(-50% + var(--use-to-x)),calc(-50% + var(--use-to-y))) scale(.25) rotate(5deg)}
}
@keyframes fx-use-progress{0%,15%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}
.opponent-card-readout.is-card-announced{outline:2px solid #d8b47b;outline-offset:2px;box-shadow:0 0 16px #d8b47b40}
.choice-source-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 12px;margin:12px 0 16px;padding:12px;background:#e9e1cc;border-left:3px solid #9a7949;border-radius:3px}
.choice-source-card img{grid-row:1/4;width:64px;height:84px;object-fit:cover;border:1px solid #a39980}
.choice-source-card small{font-size:11px;color:#6c5936}
.choice-source-card strong{font-size:17px;color:#27352f}
.choice-source-card p{margin:0;font-size:12px;line-height:1.5;white-space:pre-line;color:#3f483d}
@media(max-width:600px){
  #fx-layer .fx-card-notice{width:min(354px,calc(100vw - 24px))}
  .fx-notice-card{grid-template-columns:100px minmax(0,1fr);gap:5px 11px;padding:13px}
  .fx-notice-verb{font-size:10px}
  .fx-notice-title{font-size:19px}
  .fx-notice-card img{min-height:140px;max-height:244px}
  .fx-notice-effect{font-size:12px;line-height:1.5;-webkit-line-clamp:8}
  .fx-notice-hint{font-size:9px;padding-top:5px}
  .fx-notice-cost{width:22px;height:24px;top:8px;right:8px;font-size:16px}
  #fx-layer .fx-card-notice.is-mine{width:min(288px,calc(100vw - 28px))}
}
@media(max-height:500px){
  #fx-layer .fx-card-notice{width:min(370px,calc(100vw - 24px))}
  .fx-notice-card{grid-template-columns:90px minmax(0,1fr);padding:11px;gap:4px 10px}
  .fx-notice-title{font-size:18px}
  .fx-notice-card img{min-height:98px;max-height:142px}
  .fx-notice-effect{font-size:12px;-webkit-line-clamp:5}
  .fx-notice-hint{font-size:9px;padding-top:4px}
  #fx-layer .fx-card-notice.is-mine{width:290px}
  .fx-card-notice.is-mine img{min-height:90px;max-height:120px}
}

/* ── 확정된 공격: 카드 발사 → 체력/멘탈 칸 명중 ────────────── */
.fx-projectile{width:0;height:0;animation:fx-shot var(--shot-flight,380ms) cubic-bezier(.36,.08,.74,.68) var(--shot-delay,80ms)}
.fx-projectile-streak{position:absolute;right:-8px;top:-5px;width:100px;height:10px;transform-origin:calc(100% - 8px) center;transform:rotate(var(--shot-angle));filter:drop-shadow(0 0 5px #ffd59b);background:linear-gradient(90deg,transparent 0,#bc6744 25%,#fbd096 70%,#fffced 95%);clip-path:polygon(0 46%,66% 24%,80% 0,100% 36%,94% 62%,72% 100%,58% 66%)}
.fx-projectile.stat-mental .fx-projectile-streak{background:linear-gradient(90deg,transparent,#8f8bbd 30%,#b9d8ec 75%,#fffdf3);filter:drop-shadow(0 0 6px #a2c4ef)}
@keyframes fx-shot{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translate(var(--shot-x),var(--shot-y))}}
.playing-card.is-firing{outline:2px solid #f2c479;outline-offset:2px;box-shadow:0 0 20px #e8b76980}
.fx-hit-ring{width:var(--fx-size);height:var(--fx-size);border:3px solid #ffe4b1;border-radius:50%;box-shadow:0 0 18px #dc8f63,inset 0 0 15px #c56942;background:radial-gradient(circle,#fff3c763,transparent 64%);animation:fx-hit-ring .32s ease-out}
.fx-hit-ring.stat-mental{border-color:#d3e3ff;box-shadow:0 0 18px #a5acd7,inset 0 0 14px #858eac}
@keyframes fx-hit-ring{0%{opacity:.95;transform:translate(-50%,-50%) scale(.25)}48%{opacity:.75}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
[data-fx-hit].is-hit{animation:fx-hit-shake .3s ease-out;outline:1px solid #d99573;outline-offset:-1px;box-shadow:inset 0 0 34px #c56f413d}
[data-fx-hit].is-hit-still{outline:2px solid #dfba8b;outline-offset:-2px}
@keyframes fx-hit-shake{0%,100%{transform:translateX(0)}16%{transform:translateX(var(--hit-push,5px))}36%{transform:translateX(calc(var(--hit-push,5px)*-.8))}56%{transform:translateX(calc(var(--hit-push,5px)*.5))}76%{transform:translateX(calc(var(--hit-push,5px)*-.25))}}
#fx-layer .fx-hit-number{z-index:2;font-size:clamp(1.2rem,2.5vw,1.65rem);white-space:nowrap;letter-spacing:0;color:#ffdebd;background:#442b23ee;border:1px solid #c48c64;border-radius:4px;padding:5px 9px;text-shadow:0 1px 2px #151a17;line-height:1.15}
.fx-hit-ring.is-still{animation:none;transform:translate(-50%,-50%);background:transparent;box-shadow:none;opacity:.65}

/* ── 증감 숫자 ──────────────────────────────────────────── */
.fx-delta{transform:translate(-50%,0);font-family:Georgia,serif;font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:-.02em;text-shadow:0 1px 0 #fffdf3,0 0 8px rgba(255,253,243,.8);animation:fx-delta 1s ease-out}
.fx-delta.tone-damage{color:#a54838}
.fx-delta.tone-heal{color:#3d6b3f}
.fx-delta.tone-gain{color:#7a5a24}
.fx-delta.tone-cost{color:#6b6a58}
@keyframes fx-delta{0%{opacity:0;transform:translate(-50%,6px) scale(.86)}18%{opacity:1;transform:translate(-50%,-4px) scale(1)}100%{opacity:0;transform:translate(-50%,-38px) scale(1)}}

/* ── 새 로그 한 줄 알림 ──────────────────────────────────── */
.fx-notes{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,560px);display:grid;gap:6px;justify-items:center}
.fx-note{margin:0;max-width:100%;padding:8px 16px;border-radius:4px;background:rgba(39,59,43,.93);color:#f4f1e2;font-size:.82rem;line-height:1.45;text-align:center;word-break:keep-all;border-left:3px solid #9aa882;box-shadow:0 4px 18px rgba(28,44,37,.3);animation:fx-note 2.6s ease-out}
.fx-note.tone-damage{border-left-color:#c46552}
#fx-layer .fx-note{position:relative}
.fx-note.tone-heal{border-left-color:#8fb176}
.fx-note.tone-dice{border-left-color:#d1a85e}
.fx-note.tone-win{border-left-color:#8fb176}
.fx-note.tone-lose{border-left-color:#c46552}
@keyframes fx-note{0%{opacity:0;transform:translateY(8px)}8%{opacity:1;transform:none}86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}

/* ── 상태 변화에 붙는 짧은 클래스 ───────────────────────── */
.stat.is-bumped{animation:fx-bump .5s ease-out}
.stat.is-bumped .value{color:#8f4a36}
@keyframes fx-bump{0%{transform:none}30%{transform:translateY(-3px) scale(1.04)}100%{transform:none}}
.stats.is-acting{outline:2px solid var(--gold);outline-offset:5px;border-radius:3px}
.log li.is-new{background:#f3ecd6;box-shadow:inset 3px 0 0 var(--gold);padding-left:9px;animation:fx-logline .5s ease-out}
@keyframes fx-logline{0%{opacity:.3;transform:translateX(-6px)}100%{opacity:1;transform:none}}
.story-scene{position:relative}
.story-scene.scene-enter{animation:fx-scene .44s ease-out}
.story-scene.scene-enter::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(104deg,transparent 30%,rgba(255,253,243,.62) 48%,transparent 66%);background-size:260% 100%;animation:fx-wash .66s ease-out}
@keyframes fx-scene{0%{opacity:.4;transform:translateY(7px)}100%{opacity:1;transform:none}}
@keyframes fx-wash{0%{background-position:-60% 0;opacity:0}30%{opacity:1}100%{background-position:160% 0;opacity:0}}

/* ── 실제 카드 이동 · 뒷면 공개 · 설치/폐허 이동 ────────── */
.deck-anchor{white-space:nowrap}
.deck-anchor::before{content:"▤";color:#d5bc77;margin-right:5px}
.fx-card-motion{perspective:800px;transform:translate(-50%,-50%);animation:fx-card-flight var(--card-flight) ease-in-out var(--card-delay);filter:drop-shadow(0 9px 12px #000b);z-index:2}
.fx-card-turn{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg)}
.fx-card-motion.is-flipping .fx-card-turn{animation:fx-card-flip var(--card-flight) ease-in-out var(--card-delay) both}
.fx-card-motion.is-hidden .fx-card-turn{transform:none}
.fx-card-front,.fx-card-back{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;border:2px solid #b49b64;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fx-card-back{align-items:center;justify-content:center;gap:12px;color:#cedad9;background:repeating-linear-gradient(135deg,#202f3a 0 5px,#2a3b48 5px 6px);box-shadow:inset 0 0 0 4px #14232e,inset 0 0 0 5px #c4b17c80}
.fx-card-back b{display:grid;place-items:center;width:46%;aspect-ratio:1;border:1px solid #c6ad6d;outline:1px solid #c6ad6d80;outline-offset:4px;font:clamp(22px,4vw,36px) Georgia,serif;transform:rotate(-7deg)}
.fx-card-back small{font:8px Georgia,serif;letter-spacing:1px}
.fx-card-front{transform:rotateY(180deg);background:#f5efd8;color:#23392c;padding:6px;gap:5px;box-shadow:inset 0 0 12px #b49b6440}
.fx-card-front strong{font-size:13px;line-height:1.25;padding-right:17px;min-height:28px;word-break:keep-all}
.fx-card-front img{display:block;width:100%;flex:1;min-height:0;object-fit:cover;border:1px solid #b6ac8c;box-sizing:border-box}
.fx-card-front small{font:9px Georgia,serif;text-align:right}
.fx-card-cost{position:absolute;right:5px;top:5px;display:grid;place-items:center;width:18px;height:18px;background:#304b35;color:#fff3c4;border-radius:50%;font:bold 12px Georgia,serif}
.fx-card-caption{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);font-size:11px;line-height:1.4;white-space:nowrap;color:#ffedbd;background:#172c24ed;padding:3px 9px;border:1px solid #b49b6480;border-radius:3px}
.fx-card-motion.kind-discard .fx-card-caption{color:#edd3c7;border-color:#ab7965}
@keyframes fx-card-flight{
  0%{opacity:0;transform:translate(calc(-50% + var(--card-from-x)),calc(-50% + var(--card-from-y))) rotate(10deg) scale(.46)}
  12%{opacity:1;transform:translate(calc(-50% + var(--card-from-x)),calc(-50% + var(--card-from-y) - 26px)) rotate(7deg) scale(.62)}
  46%,61%{opacity:1;transform:translate(calc(-50% + var(--card-mid-x)),calc(-50% + var(--card-mid-y))) rotate(-5deg) scale(1.12)}
  87%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.96)}
}
@keyframes fx-card-flip{0%,20%{transform:rotateY(0deg)}46%,100%{transform:rotateY(180deg)}}
[data-fx-deck].is-dealing{animation:fx-pile-deal .65s ease-out}
.is-card-arriving{animation:fx-hand-arrival 1.65s ease-out}
@keyframes fx-pile-deal{0%,100%{filter:none}30%{filter:brightness(1.8) drop-shadow(0 0 10px #dfc58d)}}
@keyframes fx-hand-arrival{0%,55%{outline:2px solid transparent;outline-offset:3px}75%{outline:2px solid #efcf8e;outline-offset:3px;box-shadow:0 0 24px #e5bd7860}100%{outline:2px solid transparent;outline-offset:3px}}
.fx-card-mark{box-sizing:border-box;transform:translate(-50%,-50%);border:2px solid #dac279;border-radius:6px;box-shadow:inset 0 0 18px #dac27955,0 0 12px #dac27944;animation:fx-card-mark .65s ease-out}
.fx-card-mark b{position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#1a2e25f5;color:#ffe7a3;border:1px solid #b49b64;padding:3px 8px;font-size:11px;line-height:1.4;border-radius:3px}
.fx-card-mark.kind-exhaust{border-color:#bfa488;box-shadow:inset 0 0 20px #bfa48844}
.fx-card-mark.is-still{animation:none}
@keyframes fx-card-mark{0%{opacity:0;transform:translate(-50%,-50%) scale(.97)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

/* ── 카드 조작감 ────────────────────────────────────────── */
.playing-card{touch-action:manipulation;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.playing-card:active,.playing-card.is-tapped{transform:translateY(2px) scale(.985);box-shadow:1px 1px 0 #26342c20;background:#fff8e9}
.playing-card:focus-visible{outline:3px solid #bb7b3c;outline-offset:3px;box-shadow:0 0 0 1px #bb7b3c inset,2px 3px 0 #26342c20}
.playing-card.playable{border-color:#4a6b45;background:#fdfbf0;box-shadow:inset 3px 0 0 #4a6b45,2px 3px 0 #26342c1f}
.playing-card.playable:hover{box-shadow:inset 3px 0 0 #4a6b45,2px 4px 0 #26342c33}
.playing-card.blocked{opacity:.82}
.playing-card .card-hint{margin-top:6px;font-size:.6rem;font-weight:700;letter-spacing:.02em;line-height:1.35;color:#fffdf3;background:#4a6b45;border-radius:2px;padding:3px 5px;text-align:center;white-space:normal}
.playing-card .card-hint.locked{background:transparent;color:#8a7a5c;border:1px dashed #b9ad8c;font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.playing-card .card-effect{display:none}
.library-grid .playing-card .card-effect{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.64rem;font-weight:400;color:#5d6657;line-height:1.5;margin:0 0 6px;white-space:pre-line}
.library-grid .playing-card .card-symbol{flex:0 0 auto}
.card-row{scroll-padding-inline:3px;overscroll-behavior-x:contain}
.card-row::-webkit-scrollbar{height:7px}
.card-row::-webkit-scrollbar-thumb{background:#b6bca7;border-radius:4px}
.zone-heading .caption{white-space:nowrap}

/* ── 버튼·선택 조작감 ───────────────────────────────────── */
button:active:not(:disabled),.button:active{transform:translateY(1px) scale(.995)}
button.is-tapped:not(:disabled){transform:translateY(1px) scale(.995)}
.story-choice{transition:background .14s ease,border-color .14s ease,transform .12s ease,box-shadow .14s ease}
.story-choice:not(:disabled):hover{box-shadow:-4px 0 0 var(--gold)}
.story-choice.is-tapped{box-shadow:-4px 0 0 var(--gold)}
.decision-option{transition:border-color .12s ease,background .12s ease}
.decision-option:active{background:#f6f1e2}
.decision>button{min-width:180px}
.turn-strip{align-items:center;border-left:4px solid #a9bb8d}
.turn-strip.wait{border-left-color:#c8c8b6}

/* ── 지금 해야 할 행동 ──────────────────────────────────── */
.next-step{display:flex;gap:9px;align-items:baseline;margin:0 0 16px;padding:10px 14px;background:#e9ecdd;border-left:3px solid var(--green);font-size:.84rem;font-weight:700;color:#36442f;word-break:keep-all;border-radius:0 3px 3px 0}
.next-step::before{content:"지금";flex:0 0 auto;font-size:.62rem;letter-spacing:.1em;font-weight:800;color:#6b7a62}
.story-scene .next-step{margin-top:22px}
.turn-strip+.next-step{margin-top:-6px}

/* ── 처리 중 중복 입력 방지 ─────────────────────────────── */
button.is-working{opacity:.6;cursor:progress}
.actions-busy .toolbar button,.actions-busy .story-choice,.actions-busy .decision>button,
.actions-busy .dialog-actions button,.actions-busy .action-control button{pointer-events:none;opacity:.5}
.actions-busy .turn-strip>span::after{content:" · 처리 중";opacity:.8}

/* ── 효과음 토글 ────────────────────────────────────────── */
.sound-toggle{min-height:36px;padding:5px 11px;font-size:.72rem;font-weight:700;background:transparent;color:var(--ink);border-color:var(--line);gap:6px;border-radius:3px}
.sound-toggle:hover{background:#dedfce}
.sound-toggle[aria-pressed=true]{background:var(--green);color:#fffdf3;border-color:var(--ink)}
.sound-toggle .sound-mark{font-size:.9rem;line-height:1}

/* ── 이야기·로비·도감 마무리 ────────────────────────────── */
.story-scene h2{text-wrap:balance}
.story-choices>div{min-width:0}
.story-choice{padding:14px 18px;line-height:1.55}
.story-choice::before{content:"→";font-weight:700;opacity:.7;margin-right:4px}
.decision{box-shadow:0 2px 0 #bc794622}
.choice-order{margin:0 0 10px}
.enemy-panel{transition:border-color .14s ease}
.enemy-panel .stats.is-acting{outline-offset:3px}
.mode-card,.scenario-card{transition:transform .16s ease,box-shadow .16s ease}
.mode-card:hover,.scenario-card:hover{transform:translateY(-2px);box-shadow:0 6px 0 #26342c12}
.library-grid .playing-card{text-align:left}
.library-grid .playing-card:hover{transform:translateY(-2px)}
nav a{transition:color .15s ease}
nav a:not([aria-current=page]):hover{text-decoration:underline}
.brand-mark{transition:transform .2s ease}
.brand:hover .brand-mark{transform:rotate(-8deg)}
.badge{background:#fbf8ee}
.empty{background:repeating-linear-gradient(135deg,transparent 0 6px,#26342c08 6px 7px)}
.panel h2,.page-heading h1{text-wrap:balance}
.legacy-save,.details summary{word-break:keep-all}
.library-controls input,.library-controls select{background:#fffdf5}
.room-code{text-align:center}
.connection{display:inline-flex;align-items:center;white-space:nowrap}

/* ── 자세히 보기 위계 ───────────────────────────────────── */
.dialog-meta{display:flex;align-items:center;gap:14px;margin:4px 0 16px;flex-wrap:wrap}
.dialog-cost{display:grid;place-items:center;width:54px;height:54px;flex:0 0 54px;border-radius:50%;background:var(--green);color:#fffdf3;line-height:1}
.dialog-cost strong{font-family:Georgia,serif;font-size:1.5rem}
.dialog-cost span{font-size:.56rem;letter-spacing:.08em}
.dialog-tags{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.dialog-tags .badge{background:#fffcf2}
.dialog-tags .badge.keyword{border-color:var(--gold);color:#8a5a2e;font-weight:800}
dialog .effect{margin-bottom:14px}
.dialog-actions{display:grid;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.dialog-actions button{flex:none;width:100%;white-space:normal}
.dialog-action .caption{margin:5px 0 0}
.dialog-note{margin:14px 0 0}

@media(max-width:600px){
  .fx-brush-slot{width:94vw}
  .turn-brush{--fx-brush-height:58px}
  .fx-delta{font-size:1.25rem}
  .fx-notes{bottom:calc(76px + env(safe-area-inset-bottom));width:94vw}
  .fx-note{font-size:.76rem;padding:7px 12px}
  nav{gap:10px}
  .sound-toggle{padding:4px 8px}
  .sound-toggle .sound-label{display:none}
  .playing-card .card-hint{font-size:.56rem;padding:2px 4px}
  .dialog-cost{width:46px;height:46px;flex:0 0 46px}
  .dialog-cost strong{font-size:1.25rem}
  .story-choice{padding:13px 14px}
  .decision>button{min-width:0}
}

@media(prefers-reduced-motion:reduce){
  #fx-layer .fx-node,#fx-layer .fx-node::after,.turn-brush,.fx-brush-label,.fx-notice-card,
  .stat.is-bumped,.log li.is-new,.is-card-arriving,[data-fx-deck].is-dealing,.fx-notice-progress,
  .story-scene.scene-enter,.story-scene.scene-enter::before{animation:none!important}
  #fx-layer .fx-node{opacity:1}
  #fx-layer .fx-card-motion{display:none}
  #fx-layer .fx-projectile{display:none}
  [data-fx-hit].is-hit{animation:none;transform:none}
  .fx-hit-ring{transform:translate(-50%,-50%)}
  .story-scene.scene-enter::before{display:none}
  .impact-burst{transform:translate(-50%,-50%)}
  .playing-card:active,.playing-card.is-tapped,button:active:not(:disabled),.button:active,button.is-tapped:not(:disabled){transform:none}
  .mode-card:hover,.scenario-card:hover{transform:none}
}