/* ==========================================================
   LUMIA TOUR v2 — 게임 셸 / 재현도 램프 시트
   lumi-hud.css 위에 얹는 오버라이드 + 게임 전용 컴포넌트.
   원본(lumi-hud.css)은 무수정 상속. 게임 전용 클래스는 .g-* 접두.
   문법 3원칙 유지: ①불투명 카드 없음 ②45° 챔퍼 리본 ③80ms 스냅
   ========================================================== */

/* ---------- 색 토큰 보간 등록 (재현도 전환을 부드럽게) ---------- */
@property --bg { syntax:'<color>'; inherits:true; initial-value:#272536; }
@property --bg-deep { syntax:'<color>'; inherits:true; initial-value:#0A1020; }
@property --text { syntax:'<color>'; inherits:true; initial-value:#FFFFFF; }
@property --surface-border { syntax:'<color>'; inherits:true; initial-value:#356675; }

:root{
  transition:--bg .7s ease, --bg-deep .7s ease, --text .7s ease, --surface-border .7s ease;
  --g-danger:#E0455A; --g-warn:#F2A03D; --g-ok:#3ADDC2;
  --g-panel-h:clamp(190px,29vh,250px);
}

/* ---------- F0 블루프린트 ---------- */
[data-fidelity="0"]{
  --bg:#F7FAFC; --bg-scene:#EEF6F9; --bg-deep:#DCEEF4;
  --surface:rgba(255,255,255,.86); --surface-hover:rgba(214,243,251,.95);
  --surface-border:#8FD4E4; --surface-disabled:rgba(220,230,235,.5);
  --accent:#00B4D8; --accent-bright:#0096B7; --accent-line:#00B4D8;
  --text-on-accent:#FFFFFF;
  --text:#123A46; --text-option:#33788D; --text-on-hover:#0B4B5E;
  --text-muted:#5C818C; --text-dim:#9DB4BC;
  --text-shadow:none;
  --cta-fill:#00B4D8; --cta-text:#FFFFFF; --cta-border:#0096B7;
  --g-grid:rgba(0,180,216,.10);
}
/* ---------- F1 채색 시작 ---------- */
[data-fidelity="1"]{
  --bg:#DFEBF1; --bg-scene:#CFE2EA; --bg-deep:#9FC4D2;
  --surface:rgba(255,255,255,.70); --surface-hover:rgba(186,229,240,.92);
  --surface-border:#5FB8CE;
  --accent:#00AFD3; --accent-bright:#0895B4; --accent-line:#35D2F2;
  --text-on-accent:#04303C;
  --text:#0F3541; --text-option:#2A6C81; --text-on-hover:#083F50;
  --text-muted:#48707C; --text-dim:#87A3AC;
  --text-shadow:0 1px 3px rgba(180,215,225,.6);
  --cta-fill:#0AC0E4; --cta-text:#04303C; --cta-border:#0996B2;
  --g-grid:rgba(20,110,140,.10);
}
/* ---------- F2 게임 근접 ---------- */
[data-fidelity="2"]{
  --bg:#3A4254; --bg-scene:#3E3D4C; --bg-deep:#1A2233;
  --surface:rgba(67,110,123,.62); --surface-hover:rgba(35,100,125,.88);
  --surface-border:#3E7A8C;
  --accent:#00B4D8; --accent-bright:#38D3F0; --accent-line:#6AE3FA;
  --text-on-accent:#032530;
  --text:#F2FAFC; --text-option:#8FC6DB; --text-on-hover:#EDFDFF;
  --text-muted:#BFC6D2; --text-dim:#8A8FA0;
  --text-shadow:0 2px 5px rgba(0,0,0,.5);
  --cta-fill:#E6EAEC; --cta-text:#0A0A10; --cta-border:#368588;
  --g-grid:rgba(130,190,215,.06);
}
/* ---------- F3 본편 재현 = lumi-hud.css 기본값 ---------- */
[data-fidelity="3"]{ --g-grid:rgba(130,190,215,.05); }

/* ==========================================================
   셸 레이아웃
   ========================================================== */
*{-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  transition:background .7s ease,color .7s ease;overflow:hidden;
  -webkit-user-select:none;user-select:none;overscroll-behavior:none;
}
#app{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;
  max-width:560px;margin:0 auto;position:relative;}
#hud{grid-area:hud;} #stage-wrap{grid-area:stage;} #panel{grid-area:panel;}
#app{grid-template-areas:"hud" "stage" "panel";}
@media(min-width:1000px){
  #app{max-width:none;grid-template-columns:minmax(0,1fr) min(440px,40vw);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"stage hud" "stage panel";}
  #panel{border-left:1px solid var(--surface-border);border-top:0;height:auto;
    padding:16px 20px 20px;gap:10px;}
  #hud{border-left:1px solid var(--surface-border);}
}

/* ---------- 상단 HUD — 390px에서 반드시 한 줄 ---------- */
#hud{
  display:flex;align-items:center;gap:7px;padding:8px 11px;flex:none;
  font-size:11px;white-space:nowrap;color:var(--text-muted);
  border-bottom:1px solid var(--surface-border);
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-deep) 26%,transparent),transparent);
}
#hud .spacer{flex:1;min-width:4px;}
#act-label{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--accent-bright);
  display:inline-flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;max-width:34vw;}
#act-label::before{content:"";width:11px;height:7px;flex:none;background:var(--accent);
  clip-path:polygon(0 0,100% 0,60% 100%,0 100%);}
#ver-badge{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--accent-bright);
  border:1px solid var(--surface-border);padding:2px 6px;flex:none;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);}
#phase-badge{font-weight:800;font-size:10px;letter-spacing:.1em;color:var(--accent-bright);flex:none;}
#survivors{font-weight:600;font-size:10.5px;color:var(--text);letter-spacing:0;flex:none;}
#survivors b{font-weight:800;color:var(--accent-bright);font-variant-numeric:tabular-nums;}
#sfx-btn{all:unset;cursor:pointer;font-size:13px;padding:2px 4px;flex:none;opacity:.7;line-height:1;}
#sfx-btn.is-on{opacity:1;}
.g-bump{animation:g-bump .32s var(--ease);}
@keyframes g-bump{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}

/* ---------- 스테이지 ---------- */
#stage-wrap{
  position:relative;flex:1 1 auto;min-height:0;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 60%),
    repeating-linear-gradient(0deg,var(--g-grid) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(90deg,var(--g-grid) 0 1px,transparent 1px 40px);
  background-color:var(--bg);
  transition:background-color .7s ease;
}
#scene-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);opacity:0;transition:opacity .9s ease,filter .7s ease;z-index:0;
  filter:blur(5px) brightness(.62) saturate(.9);}
[data-fidelity="2"] #scene-img.is-on{opacity:.9;filter:blur(4px) brightness(.6) saturate(.85);}
[data-fidelity="3"] #scene-img.is-on{opacity:1;filter:blur(2.5px) brightness(.66) saturate(1);}
#stage-veil{position:absolute;inset:0;z-index:1;pointer-events:none;transition:background .8s ease,box-shadow .8s ease;
  background:linear-gradient(180deg,rgba(10,16,32,0),rgba(10,16,32,0));}
[data-fidelity="2"] #stage-veil{background:linear-gradient(180deg,rgba(10,16,32,.44),rgba(10,16,32,.12) 42%,rgba(10,16,32,.55));
  box-shadow:inset 0 0 120px rgba(4,8,16,.55);}
[data-fidelity="3"] #stage-veil{background:linear-gradient(180deg,rgba(8,12,26,.52),rgba(8,12,26,.14) 42%,rgba(8,12,26,.66));
  box-shadow:inset 0 0 140px rgba(3,6,14,.7);}
#pixi{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;touch-action:none;}
#stage-ui{position:absolute;inset:0;z-index:3;pointer-events:none;}
#stage-ui > *{pointer-events:none;}

/* ---------- 보스 플레이트 ---------- */
#boss-plate{
  position:absolute;top:10px;left:50%;transform:translateX(-50%) translateY(-140%);
  width:min(420px,calc(100% - 24px));opacity:0;transition:transform .18s var(--ease),opacity .18s var(--ease);
}
#boss-plate.is-on{transform:translateX(-50%) translateY(0);opacity:1;}
.bp-top{display:flex;align-items:center;gap:7px;margin-bottom:5px;}
/* 원본 맵 아이콘은 어두운 실루엣 — HUD에서는 흰 글리프로 반전해 쓴다 */
#bp-icon{width:24px;height:24px;flex:none;image-rendering:auto;
  filter:brightness(0) invert(1) drop-shadow(0 0 5px color-mix(in srgb,var(--g-danger) 85%,transparent));}
#bp-name{font-size:15px;font-weight:800;letter-spacing:.02em;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7);}
#bp-sub{font-size:8.5px;font-weight:800;letter-spacing:.2em;color:var(--g-danger);
  border:1px solid color-mix(in srgb,var(--g-danger) 60%,transparent);padding:2px 6px;
  transform:skewX(-12deg);}
#bp-pct{margin-left:auto;font-size:11px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 5px rgba(0,0,0,.7);}
.bp-bar{position:relative;height:11px;background:rgba(6,12,20,.66);
  border:1px solid rgba(224,69,90,.5);overflow:hidden;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);}
.bp-bar i{position:absolute;left:0;top:0;bottom:0;display:block;}
#bp-ghost{background:rgba(255,255,255,.75);width:100%;
  transition:width .55s cubic-bezier(.2,0,.1,1) .3s;}
#bp-fill{background:linear-gradient(90deg,#B3253A,#E0455A 60%,#FF7A6A);width:100%;
  box-shadow:0 0 12px rgba(224,69,90,.6);transition:width .1s linear;}
#boss-plate.is-rage #bp-fill{background:linear-gradient(90deg,#7A1020,#FF3B2E 60%,#FFB36A);}
#boss-plate.is-rage .bp-bar{border-color:#FF7A4A;animation:bp-rage 1.1s ease infinite;}
@keyframes bp-rage{50%{box-shadow:0 0 16px rgba(255,90,60,.65)}}
#bp-tagline{margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.06em;
  color:var(--accent-bright);text-shadow:0 2px 6px rgba(0,0,0,.7);min-height:13px;}
.g-slam{animation:g-slam .34s cubic-bezier(.2,0,.1,1);}
@keyframes g-slam{0%{transform:translateX(-50%) scale(1.5);opacity:0;filter:blur(6px)}
  60%{transform:translateX(-50%) scale(.97);opacity:1;filter:blur(0)}100%{transform:translateX(-50%) scale(1)}}

/* ---------- 탭 힌트 ---------- */
#hint-tap{position:absolute;left:50%;bottom:12px;transform:translateX(-50%) translateY(8px);
  font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--accent-bright);
  background:color-mix(in srgb,var(--bg-deep) 62%,transparent);padding:5px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  opacity:0;transition:opacity .18s var(--ease),transform .18s var(--ease);}
#hint-tap.is-on{opacity:1;transform:translateX(-50%) translateY(0);animation:g-blink 1.6s ease infinite;}
@keyframes g-blink{50%{opacity:.45}}

/* ---------- 토스트 ---------- */
#toast-zone{position:absolute;top:8px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:5px;align-items:center;z-index:6;}
.g-toast{font-size:12px;font-weight:700;color:var(--text-on-hover);
  background:color-mix(in srgb,var(--bg-deep) 78%,transparent);
  border:1px solid var(--accent);padding:6px 13px;white-space:nowrap;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  animation:g-toast 2.6s var(--ease) forwards;}
.g-toast.is-get{border-color:var(--g-ok);color:#EAFFFA;}
.g-toast.is-warn{border-color:var(--g-danger);color:#FFECEC;}
@keyframes g-toast{0%{opacity:0;transform:translateY(-10px) scale(.94)}
  9%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}

/* ---------- 배너 / 아이캐치 ---------- */
#banner{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;}
#banner.is-on{opacity:1;}
#banner::before,#banner::after{content:"";position:absolute;left:0;right:0;height:0;
  background:color-mix(in srgb,var(--bg-deep) 88%,transparent);}
#banner.is-on::before{top:calc(50% - 74px);animation:bn-band .5s var(--ease) forwards;}
#banner.is-on::after{bottom:calc(50% - 74px);animation:bn-band .5s var(--ease) forwards;}
@keyframes bn-band{to{height:74px}}
.bn-inner{position:relative;text-align:center;z-index:2;padding:0 18px;}
#bn-eyebrow{font-size:10px;font-weight:800;letter-spacing:.3em;color:var(--accent-bright);opacity:0;}
#bn-title{font-size:clamp(24px,7vw,34px);font-weight:800;letter-spacing:-.01em;color:#fff;
  text-shadow:0 3px 14px rgba(0,0,0,.6);margin:4px 0 2px;word-break:keep-all;opacity:0;}
#bn-sub{font-size:12px;color:var(--text-muted);letter-spacing:.04em;word-break:keep-all;opacity:0;}
#banner.is-on #bn-eyebrow{animation:bn-in .4s var(--ease) .22s forwards;}
#banner.is-on #bn-title{animation:bn-in .45s var(--ease) .3s forwards;}
#banner.is-on #bn-sub{animation:bn-in .4s var(--ease) .42s forwards;}
@keyframes bn-in{from{opacity:0;transform:translateY(10px) skewX(-6deg)}to{opacity:1;transform:none}}

/* ---------- 궁극기 컷인 ---------- */
#cutin{position:fixed;inset:0;z-index:70;display:none;overflow:hidden;--ci-accent:#00B4D8;}
#cutin.is-on{display:block;}
#cutin::before{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(6,10,20,.94) 0 42%,rgba(6,10,20,.72) 60%,rgba(6,10,20,.94));
  animation:ci-bg .22s var(--ease);}
@keyframes ci-bg{from{opacity:0}}
.ci-slash{position:absolute;top:0;bottom:0;width:160%;left:-30%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ci-accent) 60%,transparent),transparent);
  transform:skewX(-18deg) translateX(-120%);animation:ci-slash .7s var(--ease) forwards;}
@keyframes ci-slash{to{transform:skewX(-18deg) translateX(120%)}}
#ci-char{position:absolute;left:-10%;bottom:0;z-index:1;
  height:min(86%,620px);max-width:86%;object-fit:contain;object-position:left bottom;
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--ci-accent) 55%,transparent));
  transform:translateX(-40px) scale(1.06);opacity:0;
  animation:ci-char .5s cubic-bezier(.16,.9,.3,1) .05s forwards;}
@keyframes ci-char{to{transform:translateX(0) scale(1);opacity:1}}
/* 텍스트 가독 스크림 — 일러스트 위, 텍스트 아래 */
#cutin::after{content:"";position:absolute;right:0;top:0;bottom:0;width:76%;z-index:2;
  background:linear-gradient(270deg,rgba(6,10,20,.9) 0 26%,rgba(6,10,20,.55) 62%,transparent);}
.ci-text{position:absolute;right:5%;top:50%;transform:translateY(-50%);text-align:right;
  max-width:66%;z-index:3;}
#ci-name{font-size:12px;font-weight:800;letter-spacing:.24em;color:var(--ci-accent);
  opacity:0;animation:ci-in .35s var(--ease) .2s forwards;}
#ci-skill{font-size:clamp(26px,8vw,44px);font-weight:800;line-height:1.1;color:#fff;
  text-shadow:0 4px 20px rgba(0,0,0,.7);margin:6px 0;word-break:keep-all;
  opacity:0;animation:ci-in .4s var(--ease) .3s forwards;}
#ci-quote{font-size:13px;color:#CFE6EE;word-break:keep-all;
  opacity:0;animation:ci-in .4s var(--ease) .44s forwards;}
@keyframes ci-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
#cutin .ci-bar{position:absolute;left:0;right:0;z-index:4;height:5px;background:var(--ci-accent);
  box-shadow:0 0 18px var(--ci-accent);transform:scaleX(0);transform-origin:left;
  animation:ci-bar .5s var(--ease) .1s forwards;}
#cutin .ci-bar.t{top:12%;} #cutin .ci-bar.b{bottom:12%;transform-origin:right;}
@keyframes ci-bar{to{transform:scaleX(1)}}
#cutin.is-out{animation:ci-out .3s var(--ease) forwards;}
@keyframes ci-out{to{opacity:0;transform:scale(1.06)}}

/* ==========================================================
   하단 패널
   ========================================================== */
#panel{height:var(--g-panel-h);display:flex;flex-direction:column;gap:8px;
  padding:10px 14px 12px;box-sizing:border-box;min-height:0;position:relative;
  border-top:1px solid var(--surface-border);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg-deep) 20%,transparent));}
/* 시네마틱 구간 — 패널을 접어 스테이지에 화면을 넘긴다 */
#panel{transition:height .45s var(--ease),opacity .35s ease;}
html.is-cinematic #panel{opacity:.18;pointer-events:none;height:46px;overflow:hidden;}
@media(min-width:1000px){ html.is-cinematic #panel{height:auto;} }

#goal-line{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--accent-bright);
  min-height:15px;display:flex;align-items:center;gap:6px;word-break:keep-all;}
#goal-line::before{content:"";width:9px;height:9px;flex:none;background:var(--accent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
#goal-line.is-empty{opacity:0;}

/* ---------- 대사 ---------- */
#dialog{display:flex;gap:11px;align-items:flex-start;flex:1;min-height:0;opacity:0;
  transition:opacity .18s var(--ease);}
#dialog.is-on{opacity:1;}
#lumi-face{width:58px;height:58px;flex:none;position:relative;overflow:hidden;
  border:2px solid var(--accent);background:color-mix(in srgb,#FFFFFF 88%,var(--accent));
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 32%,transparent);}
#lumi-face img{position:absolute;left:50%;top:6%;width:145%;transform:translateX(-50%);}
#lumi-face.g-pop{animation:g-facepop .28s var(--ease);}
@keyframes g-facepop{0%{transform:scale(.86) translateY(4px)}60%{transform:scale(1.05)}100%{transform:none}}
#dialog-body{flex:1;min-width:0;display:flex;flex-direction:column;}
#speaker{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--accent-bright);margin-bottom:3px;}
#dialog-text{font-size:14.5px;line-height:1.5;color:var(--text);text-shadow:var(--text-shadow);
  word-break:keep-all;text-wrap:pretty;overflow-y:auto;flex:1;min-height:0;}
#dialog-text .em{color:var(--accent-bright);font-weight:800;}
#dialog-text .hot{color:var(--g-warn);font-weight:800;}
#tap-hint{font-size:10px;color:var(--text-dim);text-align:right;letter-spacing:.06em;
  animation:g-blink 1.5s ease infinite;flex:none;}
#dialog.is-barge{position:absolute;left:14px;right:14px;bottom:10px;z-index:5;
  background:color-mix(in srgb,var(--bg-deep) 72%,transparent);padding:8px 10px;
  border-left:3px solid var(--accent);}

/* ---------- 선택지 ---------- */
#choices{flex:none;}
#choices:empty{display:none;}
#choices .hud-opt{animation:g-optin .26s var(--ease) backwards;}
@keyframes g-optin{from{opacity:0;transform:translateX(-14px)}}

/* ---------- 인벤토리 칩 ---------- */
#inventory{display:flex;gap:5px;flex-wrap:wrap;flex:none;min-height:0;}
#inventory:empty{display:none;}
.g-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  color:var(--text-option);background:var(--surface);border:1px solid var(--surface-border);
  padding:3px 8px;letter-spacing:.01em;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);}
.g-chip .cnt{opacity:.65;font-weight:400;font-variant-numeric:tabular-nums;}
.g-chip.g-pop{animation:g-chippop .34s var(--ease);}
@keyframes g-chippop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.09)}100%{transform:none}}

/* ---------- 플레이어 스트립 (HP + 보호막) ---------- */
#player-strip{display:none;align-items:center;gap:9px;flex:none;}
#player-strip.is-on{display:flex;}
#ps-name{font-size:11px;font-weight:800;color:var(--text);white-space:nowrap;
  max-width:96px;overflow:hidden;text-overflow:ellipsis;}
.ps-bar{position:relative;flex:1;height:10px;background:rgba(6,12,20,.5);
  border:1px solid var(--surface-border);overflow:hidden;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);}
.ps-bar i{position:absolute;left:0;top:0;bottom:0;display:block;}
#ps-ghost{background:rgba(255,255,255,.7);width:100%;transition:width .5s var(--ease) .28s;}
#ps-fill{background:linear-gradient(90deg,#0FC2A4,#3ADDC2);width:100%;
  box-shadow:0 0 10px rgba(58,221,194,.5);transition:width .1s linear;}
#player-strip.is-low #ps-fill{background:linear-gradient(90deg,#C33,#F2A03D);animation:bp-rage 1s ease infinite;}
#ps-shield{font-size:9px;font-weight:800;letter-spacing:.1em;color:#04303C;background:var(--accent-line);
  padding:3px 7px;opacity:0;transform:scale(.8);transition:opacity .1s,transform .1s;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);}
#ps-shield.is-on{opacity:1;transform:none;}

/* ---------- 스킬 바 ---------- */
#skills{display:none;gap:7px;justify-content:center;flex:none;}
#skills.is-on{display:flex;}
.g-skill{all:unset;position:relative;box-sizing:border-box;flex:1;max-width:92px;height:52px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  cursor:pointer;overflow:hidden;background:var(--surface);
  border:2px solid var(--surface-border);color:var(--text-option);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),transform var(--dur) var(--ease);}
.g-skill-key{font-size:16px;font-weight:800;line-height:1;}
.g-skill-name{font-size:8.5px;font-weight:700;letter-spacing:.02em;opacity:.8;white-space:nowrap;}
.g-skill-cd{position:absolute;inset:0;background:rgba(6,12,20,.66);transform-origin:top;
  transform:scaleY(0);pointer-events:none;}
.g-skill-lock{position:absolute;inset:0;display:none;place-items:center;font-size:9px;
  font-weight:800;letter-spacing:.14em;background:rgba(6,12,20,.5);color:var(--text-dim);font-style:normal;}
.g-skill.is-locked{opacity:.4;pointer-events:none;}
.g-skill.is-locked .g-skill-lock{display:grid;}
.g-skill.is-ready{border-color:var(--accent);color:var(--text-on-hover);}
.g-skill.is-ready:hover{background:var(--surface-hover);transform:translateY(-2px);}
.g-skill.is-ult{border-color:color-mix(in srgb,var(--g-warn) 70%,transparent);}
.g-skill.is-ult.is-ready{border-color:var(--g-warn);color:#FFF0D6;
  background:linear-gradient(180deg,color-mix(in srgb,var(--g-warn) 26%,transparent),var(--surface));
  animation:g-ultpulse 1.2s ease infinite;}
@keyframes g-ultpulse{50%{box-shadow:0 0 0 2px color-mix(in srgb,var(--g-warn) 55%,transparent),0 0 20px color-mix(in srgb,var(--g-warn) 45%,transparent)}}
.g-skill.g-flash{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent-line);
  transform:scale(.94);}

/* ==========================================================
   재현도 전환 스윕
   ========================================================== */
#sweep{position:fixed;inset:0;z-index:75;pointer-events:none;opacity:0;}
#sweep.run{animation:g-sweep .9s ease-in-out forwards;}
#sweep::before{content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent-line) 45%,transparent),
    color-mix(in srgb,var(--accent-bright) 85%,transparent),transparent);
  filter:blur(2px);animation:g-sweepbar .9s ease-in-out forwards;}
#sweep::after{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px);}
@keyframes g-sweep{0%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes g-sweepbar{from{left:-45%}to{left:112%}}

/* ==========================================================
   오버레이 (시작 메뉴 · 결과)
   ========================================================== */
.g-overlay{position:fixed;inset:0;z-index:80;display:none;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);
  overflow-y:auto;padding:22px 18px;box-sizing:border-box;}
.g-overlay.is-on{display:grid;place-items:center;}
.g-ov-panel{width:min(460px,100%);display:flex;flex-direction:column;gap:14px;}

/* 타이틀 로고 모션 */
.g-logo{position:relative;text-align:center;padding:6px 0 2px;}
.g-logo-eyebrow{font-size:10px;font-weight:800;letter-spacing:.34em;color:var(--accent-bright);
  opacity:0;animation:g-in .5s var(--ease) .1s forwards;}
.g-logo-title{font-size:clamp(30px,10vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.06;
  color:var(--text);margin:6px 0 4px;opacity:0;animation:g-in .6s var(--ease) .22s forwards;}
.g-logo-title .accent{color:var(--accent);}
.g-logo-sub{font-size:12px;color:var(--text-muted);letter-spacing:.05em;word-break:keep-all;
  opacity:0;animation:g-in .5s var(--ease) .38s forwards;}
.g-logo-rule{height:2px;margin:10px auto 0;width:0;background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:g-rule .7s var(--ease) .3s forwards;}
@keyframes g-rule{to{width:100%}}
@keyframes g-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.g-field{display:flex;flex-direction:column;gap:6px;}
.g-label{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--accent-bright);}
.g-input{all:unset;box-sizing:border-box;width:100%;padding:12px 15px;font-size:16px;font-weight:700;
  color:var(--text);background:var(--surface);border:2px solid var(--surface-border);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);}
.g-input::placeholder{color:var(--text-dim);font-weight:400;}
.g-input:focus{border-color:var(--accent);}

.g-picks{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.g-pick{all:unset;position:relative;cursor:pointer;overflow:hidden;box-sizing:border-box;
  border:2px solid var(--surface-border);background:var(--surface);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);}
.g-pick img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;
  filter:grayscale(.35) contrast(1.02);transition:filter var(--dur) var(--ease);}
.g-pick .nm{display:block;text-align:center;font-size:11px;font-weight:700;padding:5px 2px;color:var(--text);}
.g-pick:hover{border-color:var(--accent);transform:translateY(-2px);}
.g-pick.is-picked{border-color:var(--accent-line);
  box-shadow:0 0 0 1px var(--accent-line),0 0 16px var(--accent-glow);}
.g-pick.is-picked img{filter:none;}
.g-pick.is-picked .nm{background:var(--accent);color:var(--text-on-accent);font-weight:800;}
.g-pick-line{font-size:11px;color:var(--text-muted);min-height:16px;text-align:center;word-break:keep-all;}

.g-scenes{display:flex;flex-direction:column;gap:var(--option-gap);}
.g-scene-note{font-size:10.5px;color:var(--text-dim);letter-spacing:.02em;word-break:keep-all;line-height:1.5;}
.g-note-box{border-left:2px solid var(--surface-border);padding:7px 10px;
  font-size:10.5px;line-height:1.55;color:var(--text-muted);word-break:keep-all;}
.g-note-box b{color:var(--accent-bright);}

/* 결과 카드 — 재현도와 무관하게 항상 다크(캡처·공유 전제) */
#ov-end{
  --bg:#272536; --bg-deep:#0A1020; --text:#FFFFFF; --text-muted:#CBC9D0; --text-dim:#8E8C9C;
  --accent:#00B4D8; --accent-bright:#38D3F0; --accent-line:#6AE3FA;
  --surface:rgba(67,110,123,.72); --surface-border:#356675;
  --cta-fill:#EDEDED; --cta-text:#08080D; --cta-border:#368588;
  --text-shadow:0 2px 6px rgba(0,0,0,.55);
  background:color-mix(in srgb,#080D18 92%,transparent);
}
#ov-end .hud-cta{color:#EDEDED;border-color:rgba(237,237,237,.45);}
#result-card{position:relative;overflow:hidden;padding:18px;display:flex;flex-direction:column;gap:12px;
  border:2px solid var(--accent);background:color-mix(in srgb,var(--bg-deep) 88%,transparent);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  animation:g-cardin .5s cubic-bezier(.16,.9,.3,1);}
@keyframes g-cardin{from{opacity:0;transform:translateY(20px) scale(.96)}}
#result-card::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(130,190,215,.5) 0 1px,transparent 1px 32px),
             repeating-linear-gradient(90deg,rgba(130,190,215,.5) 0 1px,transparent 1px 32px);}
#result-card>*{position:relative;}
.rc-row{display:flex;gap:12px;align-items:center;}
.rc-face{width:54px;height:54px;flex:none;display:grid;place-items:center;overflow:hidden;
  background:#fff;border:2px solid var(--accent);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);}
.rc-face img{width:112%;}
.rc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;}
.rc-stat b{display:block;font-size:19px;color:var(--accent-bright);font-variant-numeric:tabular-nums;}
.rc-stat span{font-size:9.5px;color:var(--text-muted);letter-spacing:.1em;}
.cta-row{display:flex;gap:8px;}
.cta-row .hud-cta{flex:1;min-width:0;font-size:12.5px;letter-spacing:.02em;padding:0 10px;
  text-align:center;text-decoration:none;box-sizing:border-box;white-space:nowrap;}

/* ---------- 로딩 ---------- */
#boot{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:#F7FAFC;
  transition:opacity .5s ease;}
#boot.is-out{opacity:0;pointer-events:none;}
.boot-inner{text-align:center;width:min(320px,74vw);}
.boot-title{font-size:13px;font-weight:800;letter-spacing:.3em;color:#00B4D8;margin-bottom:10px;}
.boot-sub{font-size:10.5px;color:#6B8A94;margin-top:9px;letter-spacing:.04em;}

.hidden{display:none !important;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}

/* ==========================================================
   데스크톱 미세 조정 — 기본 규칙보다 뒤에 두어 우선순위를 확보한다
   ========================================================== */
@media(min-width:1000px){
  #panel{height:auto;padding:16px 20px 20px;gap:10px;}
  #dialog{margin-top:auto;flex:0 0 auto;min-height:104px;align-items:flex-start;}
  #dialog-text{font-size:16px;line-height:1.55;}
  #lumi-face{width:72px;height:72px;}
  #goal-line{font-size:12px;}
  .g-skill{height:62px;max-width:112px;}
  .g-skill-name{font-size:10px;}
  #inventory{margin-bottom:2px;}
}

/* ==========================================================
   2단계 추가 컴포넌트
   프롤로그 · 아이캐치 · 경보 · 조합 · 연타 · 풀스크린 연출 · 결과 카드
   ========================================================== */

/* ---------- 막 전환 아이캐치 (막 번호 워터마크) ---------- */
#banner.is-act::before,#banner.is-act::after{
  background:color-mix(in srgb,var(--bg-deep) 94%,transparent);}
#banner.is-act.is-on::before,#banner.is-act.is-on::after{animation:bn-band-act .5s var(--ease) forwards;}
@keyframes bn-band-act{to{height:98px}}
#banner.is-act #bn-title{font-size:clamp(30px,9vw,44px);}
#banner.is-act #bn-eyebrow{font-size:11px;letter-spacing:.36em;}
#banner.is-act #bn-eyebrow::after{
  content:"";display:block;width:34px;height:2px;margin:8px auto 0;background:var(--accent);}
/* 배경에 크게 깔리는 막 번호 */
#banner.is-act .bn-inner[data-no]:not([data-no=""])::before{
  content:attr(data-no);position:absolute;left:50%;top:50%;z-index:-1;
  transform:translate(-50%,-50%);pointer-events:none;
  font-size:min(180px,44vw);font-weight:800;line-height:1;letter-spacing:-.04em;
  color:color-mix(in srgb,var(--accent) 18%,transparent);
  opacity:0;animation:bn-no .8s var(--ease) .16s forwards;}
@keyframes bn-no{from{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* ---------- 경보 프레임 ---------- */
#alarm{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;
  transition:opacity .24s var(--ease);}
#alarm.is-on{opacity:1;animation:al-pulse 1.15s ease infinite;}
#alarm::before{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 3px rgba(224,69,90,.85),inset 0 0 60px rgba(224,69,90,.35);}
/* 사선 해칭은 가장자리에만 — 화면 전체가 붉게 물들면 잠긴 구역이 안 읽힌다 */
#alarm::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,rgba(224,69,90,.16) 0 14px,transparent 14px 34px);
  opacity:.62;
  -webkit-mask-image:radial-gradient(115% 78% at 50% 50%,transparent 38%,#000 100%);
  mask-image:radial-gradient(115% 78% at 50% 50%,transparent 38%,#000 100%);}
#alarm .al-text{position:absolute;left:50%;top:9px;transform:translateX(-50%);
  font-size:10px;font-weight:800;letter-spacing:.2em;color:#FFE3E3;white-space:nowrap;
  background:rgba(120,20,32,.8);border:1px solid rgba(255,120,110,.75);padding:4px 12px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);}
@keyframes al-pulse{50%{opacity:.55}}

/* ---------- 아이템 스플래시 ---------- */
#item-splash{position:absolute;inset:0;z-index:8;display:none;place-items:center;pointer-events:none;}
#item-splash.is-on{display:grid;}
#item-splash::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 45% at 50% 50%,rgba(255,214,92,.28),transparent 70%);
  animation:g-in .3s var(--ease);}
.is-card{position:relative;text-align:center;padding:16px 30px;
  background:rgba(9,14,22,.88);
  border:2px solid #FFD65C;box-shadow:0 0 30px rgba(255,214,92,.45);
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
  animation:is-in .42s cubic-bezier(.16,.9,.3,1);}
#item-splash.is-out .is-card{animation:is-out .32s var(--ease) forwards;}
@keyframes is-in{0%{opacity:0;transform:scale(.7) rotate(-3deg)}
  60%{opacity:1;transform:scale(1.06)}100%{transform:none}}
@keyframes is-out{to{opacity:0;transform:scale(1.1) translateY(-12px)}}
.is-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.34em;color:#FFD65C;}
.is-name{font-size:clamp(22px,7vw,32px);font-weight:800;letter-spacing:.06em;color:#fff;
  margin:6px 0 4px;text-shadow:0 3px 14px rgba(0,0,0,.6);white-space:nowrap;}
.is-sub{font-size:11px;color:#E6D9B8;letter-spacing:.04em;white-space:nowrap;}

/* ---------- 연타 게이지 ---------- */
#mash{display:none;flex:none;gap:8px;align-items:center;}
#mash.is-on{display:flex;}
#mash-label{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--accent-bright);
  white-space:nowrap;}
.mash-bar{position:relative;flex:1;height:14px;background:rgba(6,12,20,.55);
  border:1px solid var(--surface-border);overflow:hidden;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);}
#mash-fill{position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,#0FC2A4,#3ADDC2 70%,#EAFFFA);
  box-shadow:0 0 12px rgba(58,221,194,.6);transition:width .09s linear;}
#mash-btn{all:unset;box-sizing:border-box;cursor:pointer;flex:none;
  min-width:88px;height:38px;display:grid;place-items:center;
  font-size:14px;font-weight:800;letter-spacing:.06em;color:var(--text-on-accent);
  background:var(--accent);border:2px solid var(--accent-line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
#mash-btn.g-flash{background:#EAFFFA;transform:scale(.94);}

/* ---------- 조합 선택 상태 ---------- */
#inventory.is-craft .g-chip{transition:opacity .12s var(--ease),transform .12s var(--ease);}
.g-chip.is-dim{opacity:.28;}
.g-chip.is-sel-able{border-color:var(--accent);color:var(--text-on-hover);cursor:pointer;
  animation:g-blink 1.1s ease infinite;}
.g-chip.is-sel{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent-line);
  animation:none;transform:scale(1.06);}

/* ---------- R 티저 (막3에서 잠긴 채 반짝) ---------- */
.g-skill.is-teaser{animation:sk-teaser .5s var(--ease) 4;}
@keyframes sk-teaser{50%{opacity:.9;border-color:var(--g-warn);box-shadow:0 0 16px rgba(242,160,61,.5)}}

/* ---------- 부쉬 은신 ---------- */
html.is-stealth #stage-wrap{filter:saturate(.72) brightness(.86);}
html.is-stealth #stage-veil{box-shadow:inset 0 0 160px rgba(4,10,6,.8);}

/* ---------- 풀스크린 연출 (하이퍼루프 · VLS) ---------- */
#fullfx{position:fixed;inset:0;z-index:72;display:none;overflow:hidden;--ff-accent:#6AE3FA;
  background:radial-gradient(70% 70% at 50% 50%,#0B1A24,#05080F 70%);}
#fullfx.is-on{display:grid;place-items:center;animation:g-in .24s var(--ease);}
#fullfx.is-out{animation:ff-out .42s var(--ease) forwards;}
@keyframes ff-out{to{opacity:0;transform:scale(1.08)}}
.ff-tunnel{position:absolute;inset:0;display:grid;place-items:center;}
/* 터널 링 — clip-path를 쓰면 테두리까지 잘려 조각난 선만 남는다. 회전 사각형으로 그린다 */
.ff-tunnel i{position:absolute;width:44vmin;height:44vmin;
  border:2px solid color-mix(in srgb,var(--ff-accent) 60%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--ff-accent) 30%,transparent);
  animation:ff-ring 1.6s linear infinite;opacity:0;}
.ff-tunnel i:nth-child(2){animation-delay:.26s}
.ff-tunnel i:nth-child(3){animation-delay:.52s}
.ff-tunnel i:nth-child(4){animation-delay:.78s}
.ff-tunnel i:nth-child(5){animation-delay:1.04s}
.ff-tunnel i:nth-child(6){animation-delay:1.3s}
@keyframes ff-ring{
  0%{transform:rotate(45deg) scale(.05);opacity:0}
  14%{opacity:.95}
  100%{transform:rotate(78deg) scale(2.8);opacity:0}}
#fullfx[data-kind="vls"] .ff-tunnel i{animation-name:ff-rise;}
@keyframes ff-rise{
  0%{transform:translateY(58vh) rotate(45deg) scale(1.7);opacity:0}
  16%{opacity:.9}
  100%{transform:translateY(-66vh) rotate(45deg) scale(.45);opacity:0}}
.ff-body{position:relative;z-index:2;text-align:center;width:min(430px,84vw);}
.ff-eyebrow{font-size:11px;font-weight:800;letter-spacing:.36em;color:var(--ff-accent);}
.ff-title{font-size:clamp(26px,8vw,40px);font-weight:800;color:#fff;margin:8px 0 6px;
  text-shadow:0 4px 24px rgba(0,0,0,.7);word-break:keep-all;}
.ff-sub{font-size:12px;color:#BFD6DE;letter-spacing:.05em;margin-bottom:16px;}
.ff-bar{position:relative;height:6px;background:rgba(255,255,255,.14);overflow:hidden;}
#ff-fill{position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,var(--ff-accent),#fff);
  box-shadow:0 0 14px var(--ff-accent);}

/* ==========================================================
   프롤로그 — 타이틀
   ========================================================== */
.g-overlay.is-title{background:
  radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%),
  color-mix(in srgb,var(--bg) 96%,transparent);}
.g-title-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,180,216,.07) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(90deg,rgba(0,180,216,.07) 0 1px,transparent 1px 42px);}
.g-title-bg .tb-ring{position:absolute;left:50%;top:38%;width:min(560px,120vw);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.2);border:2px solid color-mix(in srgb,var(--accent) 62%,transparent);
  box-shadow:0 0 26px color-mix(in srgb,var(--accent) 22%,transparent);
  clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%);
  opacity:0;animation:tb-ring 5.4s linear infinite;}
.g-title-bg .tb-ring:nth-child(2){animation-delay:1.8s}
.g-title-bg .tb-ring:nth-child(3){animation-delay:3.6s}
@keyframes tb-ring{0%{transform:translate(-50%,-50%) scale(.12) rotate(0);opacity:0}
  16%{opacity:.55}100%{transform:translate(-50%,-50%) scale(1.5) rotate(20deg);opacity:0}}
.g-title-cta{margin-top:4px;}
.is-title .g-ov-panel{position:relative;z-index:2;}
.is-title .g-logo-title{text-shadow:0 6px 30px color-mix(in srgb,var(--accent) 30%,transparent);}

/* ==========================================================
   프롤로그 — 관제실
   ========================================================== */
.g-room-head{display:flex;flex-direction:column;gap:6px;}
.g-room-lumi{display:grid;grid-template-columns:64px 1fr;gap:11px;align-items:center;
  border-left:2px solid var(--accent);padding-left:11px;}
.g-room-face{position:relative;width:64px;height:64px;overflow:hidden;
  border:2px solid var(--accent);background:color-mix(in srgb,#FFFFFF 88%,var(--accent));
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 35%,transparent);}
.g-room-face img{position:absolute;left:50%;top:6%;width:145%;transform:translateX(-50%);}
.g-room-line{font-size:12.5px;line-height:1.55;color:var(--text);word-break:keep-all;
  min-height:38px;}
.g-opt-note{display:block;margin-top:3px;font-size:10.5px;line-height:1.45;opacity:.72;font-weight:400;}

/* ==========================================================
   결과 카드 확장
   ========================================================== */
#result-card{padding-top:22px;}
/* #result-card>* 의 position:relative 보다 특이도가 높아야 코너 태그로 붙는다 */
#result-card>.rc-rank{position:absolute;top:0;right:0;left:auto;width:auto;
  display:none;flex-direction:column;align-items:center;
  padding:7px 15px 8px;background:var(--accent);color:var(--text-on-accent);
  clip-path:polygon(16px 0,100% 0,100% 100%,0 100%);}
#result-card>.rc-rank.is-on{display:flex;}
.rc-rank b{font-size:20px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.rc-rank span{font-size:7.5px;font-weight:800;letter-spacing:.16em;opacity:.85;margin-top:2px;}
.rc-row{align-items:center;}
.rc-partner{display:none;margin-left:auto;flex-direction:column;align-items:center;gap:3px;
  width:46px;flex:none;}
.rc-partner.is-on{display:flex;}
.rc-partner img{width:46px;height:56px;object-fit:cover;object-position:top center;
  border:1px solid var(--accent);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);}
.rc-partner span{font-size:9.5px;font-weight:700;color:var(--text-muted);}
.rc-fids{display:none;grid-template-columns:repeat(4,1fr);gap:7px;}
.rc-fids.is-on{display:grid;}
.rc-fid{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.3;
  transition:opacity .3s var(--ease),transform .3s var(--ease);}
.rc-fid.is-lit{opacity:1;transform:translateY(-2px);}
.rc-fid i{display:block;width:100%;height:26px;position:relative;overflow:hidden;
  border:1px solid var(--surface-border);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);}
/* 미니어처 — 재현도 단계별 블루프린트 썸네일 */
.rc-fid[data-f="0"] i{background:#F7FAFC;
  background-image:repeating-linear-gradient(0deg,rgba(0,180,216,.35) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(0,180,216,.35) 0 1px,transparent 1px 7px);}
.rc-fid[data-f="1"] i{background:#DFEBF1;
  background-image:linear-gradient(135deg,#B9E3C9 0 40%,#8FD2AF 40% 62%,#A9D8F2 62%);}
.rc-fid[data-f="2"] i{background:#3A4254;
  background-image:linear-gradient(135deg,#2E5B45 0 42%,#1F4634 42% 64%,#1F4E6E 64%);}
.rc-fid[data-f="3"] i{background:#272536;
  background-image:linear-gradient(135deg,#27503D 0 42%,#1B3E2E 42% 64%,#1B4462 64%),
    radial-gradient(60% 60% at 30% 20%,rgba(106,227,250,.35),transparent);}
.rc-fid.is-lit i{border-color:var(--accent-line);box-shadow:0 0 10px var(--accent-glow);}
.rc-fid span{font-size:8.5px;font-weight:700;letter-spacing:.06em;color:var(--text-muted);}
.hud-cta.is-sub{min-height:42px;font-size:12px;opacity:.82;}
#result-card.is-final{border-color:var(--accent-line);
  box-shadow:0 0 0 1px var(--accent),0 0 44px color-mix(in srgb,var(--accent) 30%,transparent);}
#result-card.is-final::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
  animation:rc-shine 2.6s var(--ease) .5s infinite;}
@keyframes rc-shine{0%{transform:translateX(-70%)}55%,100%{transform:translateX(70%)}}

/* ---------- 좁은 화면 보정 ---------- */
@media(max-width:400px){
  .is-name{font-size:24px;}
  #mash-label{font-size:9.5px;}
  #mash-btn{min-width:72px;font-size:13px;}
  .cta-row .hud-cta{font-size:11.5px;letter-spacing:0;padding:0 6px;}
}
@media(min-width:1000px){
  #mash{margin-top:auto;}
  .rc-fid i{height:32px;}
}

/* ---------- 밝은 재현도에서의 CTA 가독성 ----------
   lumi-hud.css의 .hud-cta 는 다크 전제(#EDEDED 글자)라 F0/F1 배경에서 사라진다.
   결과 카드(#ov-end)는 자체 다크 토큰을 쓰므로 그대로 둔다. */
[data-fidelity="0"] .g-overlay:not(#ov-end) .hud-cta,
[data-fidelity="1"] .g-overlay:not(#ov-end) .hud-cta{
  color:var(--text);border-color:var(--surface-border);
  background:color-mix(in srgb,var(--surface) 70%,transparent);font-weight:700;}
[data-fidelity="0"] .g-overlay:not(#ov-end) .hud-cta:hover:not(:disabled),
[data-fidelity="1"] .g-overlay:not(#ov-end) .hud-cta:hover:not(:disabled){
  background:var(--cta-fill);color:var(--cta-text);border-color:var(--cta-border);}
[data-fidelity="0"] .hud-ghost,[data-fidelity="1"] .hud-ghost{color:var(--text-muted);}

/* ==========================================================
   밝은 재현도(F0/F1)에서의 스테이지 오버레이 가독성
   보스 플레이트·아이콘·힌트는 다크 전제로 만들어져 있어 밝은 배경에서 사라진다.
   ========================================================== */
[data-fidelity="0"] #bp-icon,[data-fidelity="1"] #bp-icon{
  filter:brightness(0) saturate(0) opacity(.85)
    drop-shadow(0 0 3px color-mix(in srgb,var(--g-danger) 60%,transparent));}
[data-fidelity="0"] #bp-name,[data-fidelity="1"] #bp-name,
[data-fidelity="0"] #bp-pct,[data-fidelity="1"] #bp-pct{
  color:var(--text);text-shadow:0 1px 0 rgba(255,255,255,.85),0 2px 6px rgba(255,255,255,.7);}
[data-fidelity="0"] #bp-tagline,[data-fidelity="1"] #bp-tagline{
  color:#B3253A;text-shadow:0 1px 0 rgba(255,255,255,.9);font-weight:800;}
[data-fidelity="0"] .bp-bar,[data-fidelity="1"] .bp-bar{
  background:rgba(255,255,255,.72);border-color:rgba(179,37,58,.6);}
[data-fidelity="0"] #bp-ghost,[data-fidelity="1"] #bp-ghost{background:rgba(120,20,32,.35);}
/* 보스 플레이트 뒤에 아주 옅은 스크림만 — 불투명 카드는 만들지 않는다 */
[data-fidelity="0"] #boss-plate::before,[data-fidelity="1"] #boss-plate::before{
  content:"";position:absolute;inset:-8px -12px -6px;z-index:-1;
  background:radial-gradient(90% 120% at 50% 30%,rgba(255,255,255,.72),rgba(255,255,255,0) 75%);}
#boss-plate{isolation:isolate;}
[data-fidelity="0"] #hint-tap,[data-fidelity="1"] #hint-tap{
  color:var(--accent-bright);background:rgba(255,255,255,.82);}
[data-fidelity="0"] .g-toast,[data-fidelity="1"] .g-toast{
  background:rgba(255,255,255,.9);color:var(--text);}
[data-fidelity="0"] #banner::before,[data-fidelity="0"] #banner::after,
[data-fidelity="1"] #banner::before,[data-fidelity="1"] #banner::after{
  background:color-mix(in srgb,var(--bg-deep) 92%,transparent);}
[data-fidelity="0"] #bn-title,[data-fidelity="1"] #bn-title{
  color:var(--text);text-shadow:0 2px 10px rgba(255,255,255,.6);}