/* 효과 옵션 button (2026-10-27): its base rule has two ids, so it gets its own plate rule; inside the shared lists it outranked
   the summon and pressed-state rules. */
html[data-frame=h] #unit-option-action #unit-details-open{border-radius:3px;border:1px solid #8A4A2A;background:linear-gradient(180deg,#3A3532,#1E1C1B);color:var(--fh-text);box-shadow:inset 0 1px 0 #ffffff1C,inset 0 -2px 0 #00000088,0 2px 0 #000000AA}
html[data-frame=h][data-hbtn=plate] #unit-option-action #unit-details-open{border:1px solid #0A0909;border-bottom:2px solid #C8502A;background:linear-gradient(180deg,#2A2726,#171514);color:#FFB27A;text-shadow:0 0 6px #FF5A2A55;box-shadow:inset 0 1px 0 #ffffff12,0 2px 0 #000000AA}
/* 효과 옵션 button (2026-10-27): its base rule has two ids, so it gets its own plate rule; inside the shared lists it outranked
   the summon and pressed-state rules. */

/* Character panel (2026-10-27, user): the effect list button takes the place of the 'auto' note, beside the module count. */
html[data-frame=h] .legend-modules #legend-catalog-open{display:inline-flex;align-items:center;width:auto;min-height:24px;margin:0 0 0 auto;padding:2px 10px;border:1px solid #0A0909;border-bottom:2px solid #C8502A;border-radius:3px;background:linear-gradient(180deg,#2A2726,#171514);color:#FFB27A;font-size:11px;font-weight:700;text-decoration:none;box-shadow:inset 0 1px 0 #ffffff12}
html[data-frame=h] .legend-modules #legend-catalog-open[hidden]{display:none}
/* Space (2026-10-27): the H band and the paired boxes made the left column scroll at 1440x900; trim the top bar and card spacing. */
html[data-frame=h] .app>.combat-header{min-height:56px;padding-block:2px}
html[data-frame=h] #operation-panel{padding-block:12px 10px}
html[data-frame=h] #operation-panel .mission-wave{padding:4px 0 6px}
html[data-frame=h] #operation-panel :is(.wave-timer,.heretic-status){margin-top:6px;padding:5px 10px 6px}
/* Field warning bar and boss panel (2026-10-27, user: fit the game's look): a slim dark plate with a coloured left edge, yellow
   while warning, orange-red with a hazard stripe on top when the loss timer runs. */
html[data-frame=h] .battle-status :is(.danger-banner,.boss-panel){width:min(100%,460px);padding:5px 12px 6px 14px;border:1px solid #3A3532;border-left:3px solid #F2C14E;border-radius:2px;background:linear-gradient(180deg,#1F1C1BEE,#121111EE);box-shadow:0 2px 0 #000000AA}
html[data-frame=h] .battle-status .boss-panel{border-left-color:#FF5A2A}
html[data-frame=h] .battle-status .danger-banner:is([data-level=danger],[data-level=ended]){border-color:#5A2A1C;border-left-color:#FF5A2A;background:repeating-linear-gradient(-45deg,#F2C14E 0 5px,#14171B 5px 10px) left top/100% 3px no-repeat,linear-gradient(180deg,#3A1A14EE,#1E0E0BEE)}
html[data-frame=h] .battle-status .danger-banner p{font-size:11px;line-height:1.4;color:#EADFD6;letter-spacing:.02em}
html[data-frame=h] .battle-status .danger-banner progress{display:block;width:100%;height:3px;margin-top:4px;border:0;background:#2E2A28;appearance:none}
html[data-frame=h] .battle-status .danger-banner progress::-webkit-progress-bar{background:#2E2A28}
html[data-frame=h] .battle-status .danger-banner progress::-webkit-progress-value{background:linear-gradient(90deg,#C8401E,#FF7A3A)}
html[data-frame=h] .battle-status .danger-banner progress::-moz-progress-bar{background:#FF5A2A}
html[data-frame=h] .view-toggle{padding:6px 12px;font-size:12px;font-weight:700}/* Panel frames (2026-10-27). html[data-frame] picks one; index.html ships with h + data-hbtn=plate (user pick, earlier ac).
   Without the attribute the tactical skin stays as it was.
   a = NIKKE operation terminal (cut corners, corner brackets, English captions)
   b = Ark hologram (glass panels, cyan glow, scanlines, light sweep)
   c = battle armor plate (steel, bolts, hazard stripes)
   Only borders, backgrounds and headings change; layout, sizes and game rules stay the same. */

/* ---------- shared: small English captions next to panel titles (a and c) ---------- */
html[data-frame=a] #operation-panel .mission-heading h2::after,html[data-frame=c] #operation-panel .mission-heading h2::after,html[data-frame=ac] #operation-panel .mission-heading h2::after{content:'OPERATION STATUS'}
html[data-frame=a] #squad-overview .mission-heading h2::after,html[data-frame=c] #squad-overview .mission-heading h2::after,html[data-frame=ac] #squad-overview .mission-heading h2::after{content:'SQUAD STATUS'}
html[data-frame=a] #catalog-panel .side-heading h2::after,html[data-frame=c] #catalog-panel .side-heading h2::after,html[data-frame=ac] #catalog-panel .side-heading h2::after{content:'FUSION ARCHIVE'}
html[data-frame=a] .overview-heading::after,html[data-frame=c] .overview-heading::after,html[data-frame=ac] .overview-heading::after{content:'SQUAD STATUS'}
html[data-frame=a] #roster-title::after,html[data-frame=c] #roster-title::after,html[data-frame=ac] #roster-title::after{content:'SQUAD ROSTER'}
html[data-frame=a] dialog h2::after,html[data-frame=c] dialog h2::after,html[data-frame=ac] dialog h2::after{content:'NIKKE COMMAND'}
html[data-frame] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title,dialog h2)::after{display:inline-block;margin-left:8px;vertical-align:middle;font-size:9px;font-weight:700;letter-spacing:.2em;line-height:1;opacity:.8;white-space:nowrap}
html[data-frame] :is(.mission-heading h2,#catalog-panel .side-heading h2){white-space:nowrap;overflow:visible}
/* The tactical skin draws a small stripe in these ::after boxes; the drafts use them for the caption instead. */
html[data-frame]:not([data-frame=b]) :is(#operation-panel .mission-heading h2,#squad-overview .mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title)::after{position:static;width:auto;height:auto;background:none;transform:none;pointer-events:none}
html[data-frame=b] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title,dialog h2)::after{content:none}

/* ================= A. NIKKE operation terminal ================= */
html[data-frame=a]{--fa-line:#5A6470;--fa-bright:#E9EDF2;--fa-accent:#D63843;--fa-gold:#F2C14E;--fa-cut:18px}
html[data-frame=a] :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock,.combat-metrics .hud-item,.combat-metrics .hud-wallet){
 border:1px solid var(--fa-line);border-radius:0;
 clip-path:polygon(0 0,calc(100% - var(--fa-cut)) 0,100% var(--fa-cut),100% 100%,var(--fa-cut) 100%,0 calc(100% - var(--fa-cut)));
 background:
  linear-gradient(var(--fa-bright),var(--fa-bright)) left top/28px 3px no-repeat,
  linear-gradient(var(--fa-bright),var(--fa-bright)) left top/3px 28px no-repeat,
  linear-gradient(var(--fa-accent),var(--fa-accent)) right bottom/28px 3px no-repeat,
  linear-gradient(var(--fa-accent),var(--fa-accent)) right bottom/3px 28px no-repeat,
  linear-gradient(90deg,var(--fa-accent) 0 6px,transparent 6px 10px,var(--fa-accent) 10px 16px,transparent 16px) right 26px top 5px/40px 3px no-repeat,
  linear-gradient(to bottom left,transparent calc(50% - 1px),var(--fa-line) calc(50% - 1px),var(--fa-line) calc(50% + 1px),transparent calc(50% + 1px)) right top/var(--fa-cut) var(--fa-cut) no-repeat,
  linear-gradient(to top right,transparent calc(50% - 1px),var(--fa-line) calc(50% - 1px),var(--fa-line) calc(50% + 1px),transparent calc(50% + 1px)) left bottom/var(--fa-cut) var(--fa-cut) no-repeat,
  linear-gradient(180deg,#262C34,#1E232A)}
html[data-frame=a] .combat-metrics :is(.hud-item,.hud-wallet){--fa-cut:9px;background-size:14px 2px,2px 14px,14px 2px,2px 14px,0 0,var(--fa-cut) var(--fa-cut),var(--fa-cut) var(--fa-cut),auto!important}
html[data-frame=a] .mission-heading{border-bottom:0;background:linear-gradient(90deg,var(--fa-accent) 0 34px,var(--fa-line) 34px) left bottom/100% 1px no-repeat}
html[data-frame=a] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title)::after{color:var(--fa-gold)}
html[data-frame=a] #catalog-panel>.side-heading{background:linear-gradient(90deg,var(--fa-accent) 0 34px,var(--fa-line) 34px) left bottom/100% 1px no-repeat;padding-bottom:6px}
html[data-frame=a] :is(.recipe,.unit-select-card){border-radius:0;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
 background:linear-gradient(var(--fa-bright),var(--fa-bright)) left top/10px 1.5px no-repeat,linear-gradient(var(--fa-bright),var(--fa-bright)) left top/1.5px 10px no-repeat,#1B2026}
html[data-frame=a] .recipe.available{background:linear-gradient(var(--fa-gold),var(--fa-gold)) left top/10px 2px no-repeat,linear-gradient(var(--fa-gold),var(--fa-gold)) left top/2px 10px no-repeat,linear-gradient(90deg,#3A3420,#1B2026 60%)}
html[data-frame=a] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button,#catalog-filters button,.legend-roll-actions button){border-radius:0;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
html[data-frame=a] .command-dock :is(#summon,#summon-batch){background:repeating-linear-gradient(-55deg,#ffffff14 0 6px,transparent 6px 14px),linear-gradient(180deg,#E04551,#B72E38)}
html[data-frame=a] dialog{border-radius:0;border:1px solid var(--fa-line);background:
  linear-gradient(var(--fa-bright),var(--fa-bright)) left top/24px 2px no-repeat,linear-gradient(var(--fa-bright),var(--fa-bright)) left top/2px 24px no-repeat,
  linear-gradient(var(--fa-accent),var(--fa-accent)) right bottom/24px 2px no-repeat,linear-gradient(var(--fa-accent),var(--fa-accent)) right bottom/2px 24px no-repeat,#1E232A}

/* ================= B. Ark hologram ================= */
html[data-frame=b]{--fb-glow:#4FD6FF;--fb-line:#4FD6FF66;--fb-glass:rgba(18,30,42,.72)}
html[data-frame=b] :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock,.combat-metrics .hud-item,.combat-metrics .hud-wallet,dialog){
 position:relative;border:1px solid var(--fb-line);border-radius:6px;
 background:
  linear-gradient(var(--fb-glow),var(--fb-glow)) left top/16px 2px no-repeat,linear-gradient(var(--fb-glow),var(--fb-glow)) left top/2px 16px no-repeat,
  linear-gradient(var(--fb-glow),var(--fb-glow)) right top/16px 2px no-repeat,linear-gradient(var(--fb-glow),var(--fb-glow)) right top/2px 16px no-repeat,
  linear-gradient(var(--fb-glow),var(--fb-glow)) left bottom/16px 2px no-repeat,linear-gradient(var(--fb-glow),var(--fb-glow)) left bottom/2px 16px no-repeat,
  linear-gradient(var(--fb-glow),var(--fb-glow)) right bottom/16px 2px no-repeat,linear-gradient(var(--fb-glow),var(--fb-glow)) right bottom/2px 16px no-repeat,
  repeating-linear-gradient(0deg,#4FD6FF08 0 1px,transparent 1px 3px),
  linear-gradient(90deg,transparent,#4FD6FF22,transparent) -200% 0/60% 2px no-repeat,
  linear-gradient(180deg,rgba(28,48,66,.78),var(--fb-glass));
 box-shadow:0 0 0 1px #4FD6FF14,0 0 14px #4FD6FF26,inset 0 0 18px #4FD6FF14;backdrop-filter:blur(6px);animation:fb-sweep 5s linear infinite}
@keyframes fb-sweep{to{background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%,0 0,300% 0,0 0}}
html[data-frame=b] .mission-heading,html[data-frame=b] #catalog-panel>.side-heading{border-bottom:1px solid var(--fb-line)}
html[data-frame=b] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title){color:#DDF6FF;text-shadow:0 0 8px #4FD6FF88}
html[data-frame=b] :is(.recipe,.unit-select-card){border:1px solid #4FD6FF44;border-radius:6px;background:linear-gradient(180deg,rgba(30,52,70,.7),rgba(16,26,36,.7));box-shadow:inset 0 0 10px #4FD6FF10}
html[data-frame=b] .recipe.available{border-color:#4FD6FF;box-shadow:0 0 10px #4FD6FF55,inset 0 0 12px #4FD6FF22}
html[data-frame=b] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button,#catalog-filters button,.legend-roll-actions button){border-radius:6px;border-color:#4FD6FF66;background:rgba(30,56,76,.7);box-shadow:inset 0 0 8px #4FD6FF22}
html[data-frame=b] .command-dock :is(#summon,#summon-batch){background:linear-gradient(180deg,#D63843,#9E2630);border-color:#FF9BA3;box-shadow:0 0 12px #D6384388}
html[data-frame=b] button[aria-pressed=true]{border-color:var(--fb-glow);box-shadow:0 0 8px #4FD6FF88,inset 0 0 0 1px var(--fb-glow)}
@media(prefers-reduced-motion:reduce){html[data-frame=b] *{animation:none!important}}

/* ================= C. battle armor plate ================= */
html[data-frame=c]{--fc-steel:#2B3036;--fc-edge:#6E7782;--fc-dark:#15181C;--fc-hazard:#F2C14E}
html[data-frame=c] :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock,dialog){
 border:2px solid #0E1013;border-radius:3px;
 background:
  radial-gradient(circle at 7px 7px,#A9B2BC 0 1.6px,#3B4148 2.2px,transparent 2.8px),
  radial-gradient(circle at calc(100% - 7px) 7px,#A9B2BC 0 1.6px,#3B4148 2.2px,transparent 2.8px),
  radial-gradient(circle at 7px calc(100% - 7px),#A9B2BC 0 1.6px,#3B4148 2.2px,transparent 2.8px),
  radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),#A9B2BC 0 1.6px,#3B4148 2.2px,transparent 2.8px),
  repeating-linear-gradient(-45deg,var(--fc-hazard) 0 7px,#1A1A1A 7px 14px) left top/100% 4px no-repeat,
  linear-gradient(180deg,#323840,var(--fc-steel) 30%,#23272C);
 box-shadow:inset 0 1px 0 #ffffff22,inset 0 -2px 0 #00000066,inset 1px 0 0 #ffffff10,0 2px 0 #000000AA}
html[data-frame=c] :is(.combat-metrics .hud-item,.combat-metrics .hud-wallet){border:2px solid #0E1013;border-radius:3px;background:linear-gradient(180deg,#323840,#23272C);box-shadow:inset 0 1px 0 #ffffff22,inset 0 -2px 0 #00000066}
html[data-frame=c] .mission-heading,html[data-frame=c] #catalog-panel>.side-heading{border-bottom:2px solid #0E1013;box-shadow:0 1px 0 #ffffff14;padding-top:4px}
html[data-frame=c] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title){text-transform:none;text-shadow:0 2px 0 #000}
html[data-frame=c] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title)::after{color:var(--fc-hazard)}
html[data-frame=c] :is(.recipe,.unit-select-card){border:1px solid #0E1013;border-radius:2px;background:linear-gradient(180deg,#2E343B,#202429);box-shadow:inset 0 1px 0 #ffffff1A,inset 0 -1px 0 #00000080}
html[data-frame=c] .recipe.available{background:linear-gradient(90deg,var(--fc-hazard) 0 4px,transparent 4px),linear-gradient(180deg,#3A3526,#22211C)}
html[data-frame=c] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button,#catalog-filters button,.legend-roll-actions button){border:1px solid #0E1013;border-radius:3px;background:linear-gradient(180deg,#48505A,#2E343B);box-shadow:inset 0 1px 0 #ffffff2A,inset 0 -2px 0 #00000070,0 1px 0 #000}
html[data-frame=c] .command-dock :is(#summon,#summon-batch){background:repeating-linear-gradient(-45deg,#00000026 0 6px,transparent 6px 12px),linear-gradient(180deg,#E04551,#A32831);border-color:#3A0C10}
html[data-frame=c] button[aria-pressed=true]{background:linear-gradient(180deg,#5A2A30,#3A1C20);border-color:#0E1013;box-shadow:inset 0 0 0 1px var(--accent),inset 0 -2px 0 #00000070}

/* ================= AC. operation terminal x armor plate (user pick, 2026-10-27; armor side made stronger) =================
   A's cut corners, white/red corner brackets and gold English captions on C's brushed steel plate: four bolts,
   a thick hazard stripe along the top edge, heavy bevels and metal buttons. Border widths and paddings stay as in the
   tactical skin so every panel keeps its size (screen checks measure them). */
html[data-frame=ac]{--fx-line:#0B0D10;--fx-bright:#E9EDF2;--fx-accent:#D63843;--fx-gold:#F2C14E;--fx-cut:18px;
 --fx-bolt:#B9C2CC 0 1.8px,#4A5159 2.4px,#15181C 3.1px,transparent 3.6px;
 --fx-steel:repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 3px),linear-gradient(180deg,#3A414A,#2C3239 28%,#22262B 72%,#1B1E22)}
html[data-frame=ac] :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock){
 border-color:var(--fx-line);border-radius:0;
 clip-path:polygon(0 0,calc(100% - var(--fx-cut)) 0,100% var(--fx-cut),100% 100%,var(--fx-cut) 100%,0 calc(100% - var(--fx-cut)));
 background:
  linear-gradient(var(--fx-bright),var(--fx-bright)) left top/30px 3px no-repeat,
  linear-gradient(var(--fx-bright),var(--fx-bright)) left top/3px 30px no-repeat,
  linear-gradient(var(--fx-accent),var(--fx-accent)) right bottom/30px 3px no-repeat,
  linear-gradient(var(--fx-accent),var(--fx-accent)) right bottom/3px 30px no-repeat,
  radial-gradient(circle at 13px 15px,var(--fx-bolt)),
  radial-gradient(circle at calc(100% - 28px) 15px,var(--fx-bolt)),
  radial-gradient(circle at 28px calc(100% - 13px),var(--fx-bolt)),
  radial-gradient(circle at calc(100% - 13px) calc(100% - 15px),var(--fx-bolt)),
  linear-gradient(to bottom left,transparent calc(50% - 1.5px),#7A848F calc(50% - 1.5px),#7A848F calc(50% + 1.5px),transparent calc(50% + 1.5px)) right top/var(--fx-cut) var(--fx-cut) no-repeat,
  linear-gradient(to top right,transparent calc(50% - 1.5px),#7A848F calc(50% - 1.5px),#7A848F calc(50% + 1.5px),transparent calc(50% + 1.5px)) left bottom/var(--fx-cut) var(--fx-cut) no-repeat,
  repeating-linear-gradient(-45deg,var(--fx-gold) 0 8px,#141414 8px 16px) left 34px top/calc(100% - 34px - var(--fx-cut) - 6px) 6px no-repeat,
  linear-gradient(#0B0D10,#0B0D10) left 34px top 6px/calc(100% - 34px - var(--fx-cut) - 6px) 1px no-repeat,
  var(--fx-steel);
 box-shadow:inset 0 2px 0 #ffffff26,inset 0 -3px 0 #00000088,inset 2px 0 0 #ffffff0F,inset -2px 0 0 #00000055,inset 0 0 0 1px #00000066}
html[data-frame=ac] :is(.combat-metrics .hud-item,.combat-metrics .hud-wallet){border-color:var(--fx-line);border-radius:0;
 clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
 background:linear-gradient(var(--fx-bright),var(--fx-bright)) left top/12px 2px no-repeat,linear-gradient(var(--fx-bright),var(--fx-bright)) left top/2px 12px no-repeat,
  repeating-linear-gradient(-45deg,var(--fx-gold) 0 5px,#141414 5px 10px) left bottom/100% 3px no-repeat,var(--fx-steel);
 box-shadow:inset 0 2px 0 #ffffff22,inset 0 -3px 0 #00000077}
html[data-frame=ac] .mission-heading,html[data-frame=ac] #catalog-panel>.side-heading{border-bottom-color:transparent;background:linear-gradient(90deg,var(--fx-accent) 0 40px,transparent 40px) left bottom/100% 3px no-repeat,linear-gradient(#000000AA,#000000AA) left bottom/100% 1px no-repeat,linear-gradient(#ffffff1A,#ffffff1A) left bottom 1px/100% 1px no-repeat}
html[data-frame=ac] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title){text-shadow:0 2px 0 #000,0 0 1px #000}
html[data-frame=ac] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading)::after{color:var(--fx-gold)}
/* The roster title shares its row with the input hint, so it keeps no caption. */
html[data-frame=ac] #roster-title::after{content:none!important}
html[data-frame=ac] :is(.recipe,.unit-select-card){border-color:var(--fx-line);border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
 background:linear-gradient(var(--fx-bright),var(--fx-bright)) left top/12px 2px no-repeat,linear-gradient(var(--fx-bright),var(--fx-bright)) left top/2px 12px no-repeat,
  radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),#8D96A0 0 1.3px,#2A2F35 1.9px,transparent 2.4px),var(--fx-steel);
 box-shadow:inset 0 1px 0 #ffffff22,inset 0 -2px 0 #00000088}
html[data-frame=ac] .recipe.available{background:linear-gradient(var(--fx-gold),var(--fx-gold)) left top/12px 2px no-repeat,linear-gradient(var(--fx-gold),var(--fx-gold)) left top/2px 12px no-repeat,
  repeating-linear-gradient(-45deg,var(--fx-gold) 0 4px,#141414 4px 8px) left top/5px 100% no-repeat,linear-gradient(180deg,#463E26,#25231C)}
html[data-frame=ac] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button,#catalog-filters button,.legend-roll-actions button){border-color:var(--fx-line);border-radius:0;
 clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));background-color:#363D45;
 background-image:repeating-linear-gradient(90deg,#ffffff07 0 1px,transparent 1px 3px),linear-gradient(180deg,#535C67,#2E343B);box-shadow:inset 0 2px 0 #ffffff30,inset 0 -3px 0 #00000080}
html[data-frame=ac] .command-dock :is(#summon,#summon-batch){background-color:var(--accent);background-image:repeating-linear-gradient(-55deg,#00000030 0 6px,transparent 6px 14px),linear-gradient(180deg,#E8505C,#A32831);border-color:#3A0C10}
html[data-frame=ac] button[aria-pressed=true]{background-color:#4A2328;background-image:linear-gradient(180deg,#5A2A30,#3A1C20);box-shadow:inset 0 0 0 1px var(--fx-accent),inset 0 -3px 0 #00000080}
html[data-frame=ac] dialog{border-radius:0;border-color:var(--fx-line);background:
  linear-gradient(var(--fx-bright),var(--fx-bright)) left top/30px 3px no-repeat,linear-gradient(var(--fx-bright),var(--fx-bright)) left top/3px 30px no-repeat,
  linear-gradient(var(--fx-accent),var(--fx-accent)) right bottom/30px 3px no-repeat,linear-gradient(var(--fx-accent),var(--fx-accent)) right bottom/3px 30px no-repeat,
  repeating-linear-gradient(-45deg,var(--fx-gold) 0 8px,#141414 8px 16px) left 34px top/calc(100% - 68px) 6px no-repeat,var(--fx-steel);
 box-shadow:inset 0 2px 0 #ffffff26,inset 0 -3px 0 #00000088}
/* Taller HUD plates on PC and tablet (user: the time, enemy, credit and module boxes looked thin, 2026-10-27). */
@media(min-width:768px){html[data-frame=ac] .combat-header .combat-metrics{gap:6px}html[data-frame=ac] .combat-header .combat-metrics .hud-item{min-height:50px;padding-block:6px;border-left:0}}
/* Profile picture inside the character panel: its own cut corners keep it clear of the panel's corner bracket (user, 2026-10-27). */
html[data-frame=ac] #operation-mount .character-panel .portrait.profile-frame{border-radius:0;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);box-shadow:inset 0 0 0 1px #0B0D10}
/* ---------- Catalog filter button drafts (2026-10-27): html[data-filters] picks one; compare in ?uilab ----------
   tabs    = underline tabs, no boxes; the active tab glows with a red bar
   chips   = grade-colored chips (SR purple, SSR gold, UR red, LR blue); the active one fills with its color
   segment = one connected dark bar with slanted dividers, active segment raised with a hazard underline */
html[data-filters] #catalog-filters button{clip-path:none!important;box-shadow:none!important;background-image:none!important}
html[data-filters=tabs] #catalog-filters{gap:0;border-bottom:1px solid #49515B}
html[data-filters=tabs] #catalog-filters button{border:0!important;border-radius:0!important;background:transparent!important;color:#9AA4AE;font-weight:700;letter-spacing:.06em;position:relative}
html[data-filters=tabs] #catalog-filters button:hover{color:#F1F1ED}
html[data-filters=tabs] #catalog-filters button[aria-pressed=true]{color:#FFFFFF;text-shadow:0 0 10px #D6384399;box-shadow:inset 0 -3px 0 #D63843!important;background:linear-gradient(0deg,#D6384322,transparent 70%)!important}
html[data-filters=chips] #catalog-filters{gap:6px}
html[data-filters=chips] #catalog-filters button{--chip:#C9CFD6;border:1px solid var(--chip)!important;border-radius:0!important;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)!important;background:color-mix(in srgb,var(--chip) 12%,#1B1F24)!important;color:var(--chip)!important;font-weight:800;letter-spacing:.04em}
html[data-filters=chips] #catalog-filters button[data-catalog-tier="1"]{--chip:#C79BEA}
html[data-filters=chips] #catalog-filters button[data-catalog-tier="2"]{--chip:#F2C14E}
html[data-filters=chips] #catalog-filters button[data-catalog-tier="3"]{--chip:#FF6B78}
html[data-filters=chips] #catalog-filters button[data-catalog-tier="4"]{--chip:#6FB7F0}
html[data-filters=chips] #catalog-filters button[aria-pressed=true]{background:var(--chip)!important;color:#15181C!important;text-shadow:none}
html[data-filters=segment] #catalog-filters{gap:0;padding:3px;border:1px solid #0B0D10;background:linear-gradient(180deg,#15181C,#1E2227);box-shadow:inset 0 2px 4px #00000099}
html[data-filters=segment] #catalog-filters button{border:0!important;border-radius:0!important;background:transparent!important;color:#AEB7C1;font-weight:700;position:relative}
html[data-filters=segment] #catalog-filters button+button{background:linear-gradient(105deg,transparent 0 3px,#49515B 3px 4px,transparent 4px) left/8px 100% no-repeat!important}
html[data-filters=segment] #catalog-filters button[aria-pressed=true]{color:#FFFFFF;background:repeating-linear-gradient(-45deg,#F2C14E 0 5px,#141414 5px 10px) left bottom/100% 3px no-repeat,linear-gradient(180deg,#59616C,#363D45)!important;box-shadow:inset 0 1px 0 #ffffff33,0 2px 6px #000000AA!important}
/* ---------- Result screen (2026-10-27) ----------
   MISSION FAILED / COMPLETE captions; buttons stay plain (user: no red or gold). Feedback is a quiet text link that
   shares the milestone line. html[data-resultbtn] holds button drafts compared in ?uilab. */
html[data-frame=ac] .result-dialog[data-outcome=defeat] h2::after{content:'MISSION FAILED';color:#FF6B78}
html[data-frame=ac] .result-dialog[data-outcome=victory] h2::after{content:'MISSION COMPLETE';color:#F2C14E}
.result-dialog .result-milestone-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.result-dialog .result-milestone-row .result-milestones{margin:0;flex:1 1 auto;min-width:0}
html[data-frame] .result-dialog #result-feedback{flex:0 0 auto;clip-path:none;min-height:36px;margin:0;padding:4px 2px;border:0;background:none!important;box-shadow:none;color:#9FB3C8;font-weight:600;text-decoration:underline;text-underline-offset:4px}
html[data-frame] .result-dialog #result-feedback:hover:not(:disabled){color:#FFFFFF;background:none!important}
html[data-frame=ac] .result-dialog .dialog-actions button{min-height:48px;white-space:nowrap;font-weight:700}
html[data-frame=ac] .result-dialog .dialog-actions button:last-child{background-color:#363D45;background-image:repeating-linear-gradient(90deg,#ffffff07 0 1px,transparent 1px 3px),linear-gradient(180deg,#535C67,#2E343B);color:#F1F1ED}
/* Result button drafts (2026-10-27), all neutral colors:
   outline = thin frame only, fills softly on hover
   slab    = dark flat slabs with a light left edge, like the NIKKE lobby menu
   bar     = one connected bar split into equal parts with slanted dividers */
html[data-resultbtn] .result-dialog .dialog-actions button{clip-path:none!important;box-shadow:none!important;background-image:none!important}
html[data-resultbtn=outline] .result-dialog .dialog-actions button{background:transparent!important;border:1px solid #8995A3!important;border-radius:0!important;color:#E9EDF2}
html[data-resultbtn=outline] .result-dialog .dialog-actions button:hover:not(:disabled){background:#ffffff14!important;border-color:#E9EDF2!important}
html[data-resultbtn=slab] .result-dialog .dialog-actions{gap:6px}
html[data-resultbtn=slab] .result-dialog .dialog-actions button{border:0!important;border-radius:0!important;background:linear-gradient(90deg,#E9EDF2 0 3px,#262B31 3px)!important;color:#E9EDF2;text-align:left;padding-left:16px}
html[data-resultbtn=slab] .result-dialog .dialog-actions button:hover:not(:disabled){background:linear-gradient(90deg,#E9EDF2 0 5px,#343A42 5px)!important}
html[data-resultbtn=bar] .result-dialog .dialog-actions{gap:0;padding:3px;border:1px solid #0B0D10;background:#15181C;box-shadow:inset 0 2px 4px #00000099}
html[data-resultbtn=bar] .result-dialog .dialog-actions button{border:0!important;border-radius:0!important;background:transparent!important;color:#C9D0D7}
html[data-resultbtn=bar] .result-dialog .dialog-actions button+button{background:linear-gradient(105deg,transparent 0 3px,#49515B 3px 4px,transparent 4px) left/8px 100% no-repeat!important}
html[data-resultbtn=bar] .result-dialog .dialog-actions button:hover:not(:disabled){background:#2C3239!important;color:#FFFFFF}
/* Result button drafts, round 2 (2026-10-27): newer takes on the metal plate.
   mix    = the plate's cut corners with a dark see-through fill, a thin light outline, small corner ticks and a soft
            metal sheen that rises on hover
   modern = flat dark slab, hairline outline, a bright accent line along the bottom, a light sweep on hover
   hud    = corner brackets only (no full outline) over a faint fill, like a NIKKE targeting frame; fills on hover */
html[data-resultbtn=mix] .result-dialog .dialog-actions button{border:0!important;border-radius:0!important;color:#EEF1F4;letter-spacing:.03em;
 clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))!important;
 background:linear-gradient(#E9EDF2,#E9EDF2) left top/9px 2px no-repeat,linear-gradient(#E9EDF2,#E9EDF2) left top/2px 9px no-repeat,
  linear-gradient(#E9EDF2,#E9EDF2) right bottom/9px 2px no-repeat,linear-gradient(#E9EDF2,#E9EDF2) right bottom/2px 9px no-repeat,
  linear-gradient(to bottom left,transparent calc(50% - .7px),#AEB7C1 calc(50% - .7px),#AEB7C1 calc(50% + .7px),transparent calc(50% + .7px)) right top/10px 10px no-repeat,
  linear-gradient(to top right,transparent calc(50% - .7px),#AEB7C1 calc(50% - .7px),#AEB7C1 calc(50% + .7px),transparent calc(50% + .7px)) left bottom/10px 10px no-repeat,
  linear-gradient(180deg,#ffffff00 40%,#ffffff00),rgba(24,28,33,.72)!important;
 box-shadow:inset 0 0 0 1px #AEB7C199!important;transition:box-shadow .15s,background-color .15s}
html[data-resultbtn=mix] .result-dialog .dialog-actions button:hover:not(:disabled){box-shadow:inset 0 0 0 1px #EEF1F4,inset 0 -18px 24px -14px #ffffff2E!important}
html[data-resultbtn=modern] .result-dialog .dialog-actions button{position:relative;overflow:hidden;border:1px solid #ffffff26!important;border-radius:2px!important;color:#F1F3F5;font-weight:700;
 background:linear-gradient(#DDE3E8,#DDE3E8) left bottom/100% 2px no-repeat,linear-gradient(180deg,#2A3037,#20252B)!important;box-shadow:0 4px 14px #00000066!important}
html[data-resultbtn=modern] .result-dialog .dialog-actions button::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff22 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
html[data-resultbtn=modern] .result-dialog .dialog-actions button:hover:not(:disabled){border-color:#ffffff55!important}
html[data-resultbtn=modern] .result-dialog .dialog-actions button:hover:not(:disabled)::after{transition:transform .6s ease;transform:translateX(120%)}
html[data-resultbtn=hud] .result-dialog .dialog-actions button{border:0!important;border-radius:0!important;color:#EEF1F4;letter-spacing:.04em;
 background:linear-gradient(#E9EDF2,#E9EDF2) left top/12px 2px no-repeat,linear-gradient(#E9EDF2,#E9EDF2) left top/2px 12px no-repeat,
  linear-gradient(#E9EDF2,#E9EDF2) right top/12px 2px no-repeat,linear-gradient(#E9EDF2,#E9EDF2) right top/2px 12px no-repeat,
  linear-gradient(#E9EDF2,#E9EDF2) left bottom/12px 2px no-repeat,linear-gradient(#E9EDF2,#E9EDF2) left bottom/2px 12px no-repeat,
  linear-gradient(#E9EDF2,#E9EDF2) right bottom/12px 2px no-repeat,linear-gradient(#E9EDF2,#E9EDF2) right bottom/2px 12px no-repeat,
  rgba(255,255,255,.04)!important;transition:background-color .15s}
html[data-resultbtn=hud] .result-dialog .dialog-actions button:hover:not(:disabled){background-color:rgba(255,255,255,.12)!important}
@media(prefers-reduced-motion:reduce){html[data-resultbtn=modern] .result-dialog .dialog-actions button::after{display:none}}
/* The A (mix) button look also for the fusion confirmation and the character panel buttons (user, 2026-10-27). */
html[data-frame=ac] :is(.recipe-confirm-actions button,.recipe-confirmation .recipe-effects,#unit-details-open,#unit-sell,#unit-portal,.legend-roll-actions button,#legend-catalog-open){border:0!important;border-radius:0!important;color:#EEF1F4;letter-spacing:.03em;
 clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))!important;
 background:linear-gradient(#E9EDF2,#E9EDF2) left top/9px 2px no-repeat,linear-gradient(#E9EDF2,#E9EDF2) left top/2px 9px no-repeat,
  linear-gradient(#E9EDF2,#E9EDF2) right bottom/9px 2px no-repeat,linear-gradient(#E9EDF2,#E9EDF2) right bottom/2px 9px no-repeat,
  linear-gradient(to bottom left,transparent calc(50% - .7px),#AEB7C1 calc(50% - .7px),#AEB7C1 calc(50% + .7px),transparent calc(50% + .7px)) right top/10px 10px no-repeat,
  linear-gradient(to top right,transparent calc(50% - .7px),#AEB7C1 calc(50% - .7px),#AEB7C1 calc(50% + .7px),transparent calc(50% + .7px)) left bottom/10px 10px no-repeat,
  rgba(24,28,33,.72)!important;
 box-shadow:inset 0 0 0 1px #AEB7C199!important;transition:box-shadow .15s}
html[data-frame=ac] :is(.recipe-confirm-actions button,.recipe-confirmation .recipe-effects,#unit-details-open,#unit-sell,#unit-portal,.legend-roll-actions button,#legend-catalog-open):hover:not(:disabled){box-shadow:inset 0 0 0 1px #EEF1F4,inset 0 -18px 24px -14px #ffffff2E!important}
html[data-frame=ac] :is(.recipe-confirm-actions button,#unit-details-open,#unit-sell,#unit-portal,.legend-roll-actions button,#legend-catalog-open):disabled{opacity:.5}

/* ================= D/E/F drafts (2026-10-27, user: "워크래프트 / 롤 / 도타 같은 느낌"). Mood only, drawn with CSS, no borrowed art. ================= */
html:is([data-frame=d],[data-frame=e],[data-frame=e2],[data-frame=f],[data-frame=g],[data-frame=h]) :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title,dialog h2)::after{content:none}

/* ---------- D. carved stone and gold (classic fantasy RTS mood) ---------- */
html[data-frame=d]{--fd-gold:#D9B266;--fd-bronze:#8A6328;--fd-text:#F3DFA6}
html[data-frame=d] :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock,.combat-metrics .hud-item,.combat-metrics .hud-wallet,dialog){
 border:3px solid;border-image:linear-gradient(180deg,#F0D48C,#8A6328 45%,#5C3F18 55%,#C9A04A) 1;border-radius:0;
 background:
  radial-gradient(circle at 9px 9px,#FBE7A8 0 2px,#B08435 2.5px 4px,#3A2A12 4.5px,transparent 5.5px),
  radial-gradient(circle at calc(100% - 9px) 9px,#FBE7A8 0 2px,#B08435 2.5px 4px,#3A2A12 4.5px,transparent 5.5px),
  radial-gradient(circle at 9px calc(100% - 9px),#FBE7A8 0 2px,#B08435 2.5px 4px,#3A2A12 4.5px,transparent 5.5px),
  radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#FBE7A8 0 2px,#B08435 2.5px 4px,#3A2A12 4.5px,transparent 5.5px),
  repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,#00000018 0 1px,transparent 1px 38px),
  radial-gradient(ellipse at 50% 0%,#4A4034,transparent 70%),linear-gradient(180deg,#2E2922,#1B1814);
 box-shadow:inset 0 0 0 1px #000000AA,inset 0 0 0 3px #3B2F1E,inset 0 0 22px #000000AA,0 3px 0 #00000088}
html[data-frame=d] .combat-metrics :is(.hud-item,.hud-wallet){border-width:2px}
html[data-frame=d] :is(.mission-heading,#catalog-panel>.side-heading){border-bottom:0;padding-bottom:6px;background:linear-gradient(90deg,transparent,var(--fd-gold) 15%,var(--fd-bronze) 50%,var(--fd-gold) 85%,transparent) left bottom/100% 2px no-repeat}
html[data-frame=d] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title,dialog h2){color:var(--fd-text);font-family:Georgia,"Times New Roman",serif;letter-spacing:.03em;text-shadow:0 1px 0 #000,0 0 8px #D9B26644}
html[data-frame=d] :is(#catalog-panel .recipe,.unit-select-card){border:1px solid #6B5530;border-radius:2px;background:linear-gradient(180deg,#2A241C,#1E1A15);box-shadow:inset 0 1px 0 #ffffff0D}
html[data-frame=d] #catalog-panel .recipe.available{border-color:var(--fd-gold);box-shadow:0 0 8px #D9B26655,inset 0 0 10px #D9B26622}
html[data-frame=d] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button,#catalog-filters button,.legend-roll-actions button){border-radius:2px;border:1px solid var(--fd-bronze);background:linear-gradient(180deg,#4F3E24,#2A2014);color:var(--fd-text);box-shadow:inset 0 1px 0 #F0D48C33,0 1px 0 #000}
html[data-frame=d] .command-dock :is(#summon,#summon-batch){background:linear-gradient(180deg,#9A2E22,#5E1712);border-color:var(--fd-gold);color:#FFF1CC}
html[data-frame=d] button[aria-pressed=true]{border-color:var(--fd-gold);background:linear-gradient(180deg,#7A5E2E,#3E2E16);box-shadow:0 0 8px #D9B26666}

/* ---------- E. thin gold lines on navy (modern MOBA mood) ---------- */
html:is([data-frame=e],[data-frame=e2]){--fe-gold:#C8AA6E;--fe-dim:#785A28;--fe-text:#F0E6D2;--fe-teal:#0AC8B9}
html:is([data-frame=e],[data-frame=e2]) :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock,.combat-metrics .hud-item,.combat-metrics .hud-wallet,dialog){
 border:1px solid var(--fe-dim);border-radius:0;
 background:
  linear-gradient(var(--fe-gold),var(--fe-gold)) left top/22px 2px no-repeat,linear-gradient(var(--fe-gold),var(--fe-gold)) left top/2px 22px no-repeat,
  linear-gradient(var(--fe-gold),var(--fe-gold)) right top/22px 2px no-repeat,linear-gradient(var(--fe-gold),var(--fe-gold)) right top/2px 22px no-repeat,
  linear-gradient(var(--fe-gold),var(--fe-gold)) left bottom/22px 2px no-repeat,linear-gradient(var(--fe-gold),var(--fe-gold)) left bottom/2px 22px no-repeat,
  linear-gradient(var(--fe-gold),var(--fe-gold)) right bottom/22px 2px no-repeat,linear-gradient(var(--fe-gold),var(--fe-gold)) right bottom/2px 22px no-repeat,
  linear-gradient(90deg,transparent,var(--fe-gold),transparent) center top/60% 1px no-repeat,
  radial-gradient(ellipse at 50% 0%,#0AC8B914,transparent 60%),linear-gradient(180deg,#0E1A2E,#050B14);
 box-shadow:inset 0 0 0 4px #050B14,inset 0 0 0 5px #C8AA6E40,0 0 0 1px #00000088}
html:is([data-frame=e],[data-frame=e2]) .combat-metrics :is(.hud-item,.hud-wallet){background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,60% 1px,auto,auto!important;box-shadow:inset 0 0 0 2px #050B14,inset 0 0 0 3px #C8AA6E33}
html:is([data-frame=e],[data-frame=e2]) :is(.mission-heading,#catalog-panel>.side-heading){border-bottom:0;padding-bottom:6px;background:linear-gradient(90deg,var(--fe-gold),var(--fe-dim) 45%,transparent) left bottom/100% 1px no-repeat}
html:is([data-frame=e],[data-frame=e2]) :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title,dialog h2){color:var(--fe-text);letter-spacing:.08em;text-shadow:0 0 6px #C8AA6E44}
html:is([data-frame=e],[data-frame=e2]) :is(#catalog-panel .recipe,.unit-select-card){border:1px solid #463714;border-radius:0;background:linear-gradient(180deg,#0E1A2E,#091220)}
html:is([data-frame=e],[data-frame=e2]) #catalog-panel .recipe.available{border-color:var(--fe-gold);box-shadow:0 0 8px #C8AA6E55,inset 0 0 0 1px #C8AA6E33}
html:is([data-frame=e],[data-frame=e2]) :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button,#catalog-filters button,.legend-roll-actions button){border-radius:0;border:1px solid var(--fe-dim);background:linear-gradient(180deg,#1E2328,#0E1A2E);color:var(--fe-text);box-shadow:inset 0 0 0 1px #00000066}
html:is([data-frame=e],[data-frame=e2]) .command-dock :is(#summon,#summon-batch){background:linear-gradient(180deg,#0A8C9A,#005A82);border-color:var(--fe-gold);color:#E8FBFF;box-shadow:0 0 10px #0AC8B955,inset 0 1px 0 #ffffff33}
html:is([data-frame=e],[data-frame=e2]) button[aria-pressed=true]{border-color:var(--fe-gold);color:#fff;box-shadow:0 0 8px #C8AA6E77,inset 0 0 0 1px var(--fe-gold)}

/* ---------- E2 (2026-10-27, user pick E): E plus a plainer top bar, F-style depth (light top edge, dark bottom edge,
   deep inner and outer shadows) and C's yellow-black hazard stripes as small accents. Shares every E rule above. ---------- */
html[data-frame=e2]{--fe-hazard:repeating-linear-gradient(-45deg,#F2C14E 0 6px,#14171B 6px 12px)}
html[data-frame=e2] :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock,dialog){
 background:
  linear-gradient(var(--fe-gold),var(--fe-gold)) left top/22px 2px no-repeat,linear-gradient(var(--fe-gold),var(--fe-gold)) left top/2px 22px no-repeat,
  linear-gradient(var(--fe-gold),var(--fe-gold)) right top/22px 2px no-repeat,linear-gradient(var(--fe-gold),var(--fe-gold)) right top/2px 22px no-repeat,
  linear-gradient(var(--fe-gold),var(--fe-gold)) left bottom/22px 2px no-repeat,linear-gradient(var(--fe-gold),var(--fe-gold)) left bottom/2px 22px no-repeat,
  linear-gradient(var(--fe-gold),var(--fe-gold)) right bottom/22px 2px no-repeat,linear-gradient(var(--fe-gold),var(--fe-gold)) right bottom/2px 22px no-repeat,
  linear-gradient(90deg,transparent,var(--fe-gold),transparent) center top/60% 1px no-repeat,
  radial-gradient(ellipse at 50% 0%,#0AC8B91A,transparent 60%),linear-gradient(180deg,#17263F,#0A1424 55%,#040910);
 box-shadow:inset 0 1px 0 #C8AA6E88,inset 0 -2px 0 #000,inset 0 0 0 4px #050B14,inset 0 0 0 5px #C8AA6E40,inset 0 0 26px #000000B0,0 4px 10px #000000AA}
/* Hazard stripe along the top edge of the squad dock (!important: the shared panel rule above carries an id). */
html[data-frame=e2] .command-dock{background:var(--fe-hazard) left top/100% 5px no-repeat,
  linear-gradient(var(--fe-gold),var(--fe-gold)) left bottom/22px 2px no-repeat,linear-gradient(var(--fe-gold),var(--fe-gold)) left bottom/2px 22px no-repeat,
  linear-gradient(var(--fe-gold),var(--fe-gold)) right bottom/22px 2px no-repeat,linear-gradient(var(--fe-gold),var(--fe-gold)) right bottom/2px 22px no-repeat,
  radial-gradient(ellipse at 50% 0%,#0AC8B91A,transparent 60%),linear-gradient(180deg,#17263F,#0A1424 55%,#040910)!important}
/* Plain top bar: no corner brackets or double lines, one thin gold line under each readout, slightly raised. */
html[data-frame=e2] .combat-metrics :is(.hud-item,.hud-wallet){border:0!important;border-bottom:1px solid var(--fe-gold)!important;border-radius:0!important;background:linear-gradient(180deg,#132036,#08111E)!important;box-shadow:inset 0 1px 0 #ffffff14,0 2px 4px #00000088!important}
/* Panel titles: gold line with a short hazard stripe at the right end. */
html[data-frame=e2] :is(.mission-heading,#catalog-panel>.side-heading){background:var(--fe-hazard) right bottom/60px 6px no-repeat,linear-gradient(90deg,var(--fe-gold),var(--fe-dim) 45%,transparent) left bottom/100% 1px no-repeat}
/* Raised cards and buttons: light top edge, dark bottom edge. */
html[data-frame=e2] :is(#catalog-panel .recipe,.unit-select-card){background:linear-gradient(180deg,#132036,#08111E);box-shadow:inset 0 1px 0 #C8AA6E33,inset 0 -2px 0 #00000099,0 2px 4px #00000088}
html[data-frame=e2] #catalog-panel .recipe.available{box-shadow:inset 0 1px 0 #C8AA6E66,inset 0 -2px 0 #00000099,0 0 8px #C8AA6E55}
html[data-frame=e2] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button,#catalog-filters button,.legend-roll-actions button){background:linear-gradient(180deg,#2A3646,#0E1A2E);box-shadow:inset 0 1px 0 #ffffff22,inset 0 -2px 0 #00000088,0 2px 3px #000000AA}
html[data-frame=e2] .command-dock :is(#summon,#summon-batch){background:linear-gradient(180deg,#14A6B5,#006A94 55%,#004A6A);box-shadow:inset 0 1px 0 #ffffff44,inset 0 -2px 0 #00000066,0 2px 4px #000000AA,0 0 10px #0AC8B944}
html[data-frame=e2] button[aria-pressed=true]{box-shadow:inset 0 2px 3px #00000099,0 0 8px #C8AA6E77,inset 0 0 0 1px var(--fe-gold)}

/* ---------- F. rusted iron and red stone (dark fantasy MOBA mood) ---------- */
html[data-frame=f]{--ff-rust:#9E4A30;--ff-red:#B2342A;--ff-text:#EADBC8}
html[data-frame=f] :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock,.combat-metrics .hud-item,.combat-metrics .hud-wallet,dialog){
 border:2px solid #0A0807;border-radius:4px;
 background:
  radial-gradient(circle at 8px 8px,#C08A64 0 1.5px,#5A3020 2px 3px,transparent 3.6px),
  radial-gradient(circle at calc(100% - 8px) 8px,#C08A64 0 1.5px,#5A3020 2px 3px,transparent 3.6px),
  radial-gradient(circle at 8px calc(100% - 8px),#C08A64 0 1.5px,#5A3020 2px 3px,transparent 3.6px),
  radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),#C08A64 0 1.5px,#5A3020 2px 3px,transparent 3.6px),
  repeating-linear-gradient(115deg,#ffffff06 0 2px,transparent 2px 6px),
  radial-gradient(ellipse at 20% 0%,#4A2A20AA,transparent 55%),radial-gradient(ellipse at 90% 100%,#3A1A14AA,transparent 50%),
  linear-gradient(180deg,#2A2220,#141110);
 box-shadow:inset 0 1px 0 #A0583A,inset 0 -2px 0 #000,inset 0 0 0 3px #2E1812,inset 0 0 0 4px #7A3A24AA,inset 0 0 28px #000000CC,0 3px 8px #000000AA}
html[data-frame=f] :is(.mission-heading,#catalog-panel>.side-heading){border-bottom:0;padding-bottom:6px;background:linear-gradient(90deg,var(--ff-red),#5A1A12 55%,transparent) left bottom/100% 2px no-repeat}
html[data-frame=f] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title,dialog h2){color:var(--ff-text);font-weight:800;letter-spacing:.04em;text-shadow:0 -1px 0 #000,0 1px 0 #9E4A3055}
html[data-frame=f] :is(#catalog-panel .recipe,.unit-select-card){border:1px solid #3E2A22;border-radius:3px;background:linear-gradient(180deg,#241C1A,#171312);box-shadow:inset 0 1px 0 #ffffff0A,inset 0 -1px 0 #000}
html[data-frame=f] #catalog-panel .recipe.available{border-color:#C0503A;box-shadow:0 0 8px #C0503A55,inset 0 0 10px #B2342A22}
html[data-frame=f] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button,#catalog-filters button,.legend-roll-actions button){border-radius:3px;border:1px solid #5A2A1C;background:linear-gradient(180deg,#3A2A24,#1E1614);color:var(--ff-text);box-shadow:inset 0 1px 0 #ffffff14,0 1px 2px #000}
html[data-frame=f] .command-dock :is(#summon,#summon-batch){background:linear-gradient(180deg,var(--ff-red),#6E1A14);border-color:#E0705A;color:#FFF0E8;box-shadow:inset 0 1px 0 #ffffff2A,0 0 10px #B2342A55}
html[data-frame=f] button[aria-pressed=true]{border-color:#E0705A;background:linear-gradient(180deg,#6E2A1E,#3A1610);box-shadow:0 0 8px #C0503A66}

/* ---------- G (2026-10-27): after the user's reference picture (files/dcfd6bba-….jfif) — steel-blue brushed metal band with a
   diagonal sheen, double gold trim, round gold medallions on the corners, a crest with gold bars at the top centre and small
   HUD readouts inside. Wings are simplified to the bars. Top readouts stay plain (user preference from E2). ---------- */
html[data-frame=g]{--fg-gold:#E2B04A;--fg-gold-hi:#FFE6A3;--fg-steel:#1C2F4D;--fg-text:#F3E7C8;
 --fg-medal:#FFE9A8 0 2px,#E2B04A 2.5px 4px,#0F1B30 4.5px 6px,#E2B04A 6.5px 8px,#6B4A14 8.5px,transparent 9.5px}
html[data-frame=g] :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock,dialog){
 border:6px solid transparent;border-radius:3px;
 background:
  radial-gradient(circle at 9px 9px,var(--fg-medal)),radial-gradient(circle at calc(100% - 9px) 9px,var(--fg-medal)),
  radial-gradient(circle at 9px calc(100% - 9px),var(--fg-medal)),radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),var(--fg-medal)),
  radial-gradient(circle at 50% 3px,#FFE9A8 0 1.5px,#E2B04A 2px 3.5px,transparent 4px),
  linear-gradient(90deg,transparent,var(--fg-gold) 20%,var(--fg-gold-hi) 50%,var(--fg-gold) 80%,transparent) center top 2px/96px 2px no-repeat,
  repeating-linear-gradient(90deg,#E2B04A99 0 1px,transparent 1px 3px) right 14px top 10px/34px 5px no-repeat,
  linear-gradient(#E2B04A66,#E2B04A66) right 52px top 12px/18px 1px no-repeat,
  linear-gradient(#E2B04A66,#E2B04A66) right 14px bottom 10px/46px 1px no-repeat,linear-gradient(#E2B04A44,#E2B04A44) right 14px bottom 14px/28px 1px no-repeat,
  radial-gradient(ellipse at 50% 0%,#4F7FC026,transparent 60%),linear-gradient(180deg,#14233B,#0A1426 60%,#070E1B),
  linear-gradient(125deg,#16263F,#3E6290 22%,#1A2C48 40%,#557BAA 58%,#1A2B46 76%,#2E4D78);
 background-origin:border-box,border-box,border-box,border-box,border-box,border-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,border-box;
 background-clip:border-box,border-box,border-box,border-box,border-box,border-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,border-box;
 background-repeat:no-repeat;
 outline:1px solid #E2B04ACC;outline-offset:-3px;
 box-shadow:inset 0 0 0 1px var(--fg-gold),inset 0 0 0 3px #0A1426,inset 0 0 0 4px #E2B04A55,inset 0 0 22px #4F7FC022,0 0 0 1px #070C16,0 4px 12px #000000AA}
html[data-frame=g] :is(.mission-heading,#catalog-panel>.side-heading){border-bottom:0;padding-bottom:6px;background:linear-gradient(90deg,var(--fg-gold-hi),var(--fg-gold) 30%,#6B4A14 70%,transparent) left bottom/100% 1px no-repeat}
html[data-frame=g] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title,dialog h2){color:var(--fg-text);letter-spacing:.05em;text-shadow:0 1px 0 #000,0 0 8px #E2B04A44}
html[data-frame=g] :is(#catalog-panel .recipe,.unit-select-card){border:1px solid #3E6290;border-radius:2px;background:linear-gradient(180deg,#132138,#0A1426);box-shadow:inset 0 0 0 1px #0A1426,inset 0 0 0 2px #E2B04A33,inset 0 1px 0 #ffffff14,0 2px 4px #00000088}
html[data-frame=g] #catalog-panel .recipe.available{border-color:var(--fg-gold);box-shadow:inset 0 0 0 1px #0A1426,inset 0 0 0 2px #E2B04A77,0 0 8px #E2B04A55}
html[data-frame=g] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button,#catalog-filters button,.legend-roll-actions button){border-radius:2px;border:1px solid #E2B04A99;background:linear-gradient(125deg,#1F3556,#3E6290 45%,#1C3050);color:var(--fg-text);box-shadow:inset 0 1px 0 #ffffff26,inset 0 -2px 0 #00000077,0 2px 3px #000000AA}
html[data-frame=g] .command-dock :is(#summon,#summon-batch){background:linear-gradient(180deg,#FFE29A,#E2B04A 45%,#A8761E);border-color:#FFE9A8;color:#14203A;text-shadow:0 1px 0 #FFF2C866;box-shadow:inset 0 1px 0 #ffffff88,inset 0 -2px 0 #6B4A1488,0 2px 4px #000000AA,0 0 10px #E2B04A55}
html[data-frame=g] button[aria-pressed=true]{border-color:var(--fg-gold-hi);box-shadow:inset 0 2px 3px #00000099,0 0 8px #E2B04A77,inset 0 0 0 1px var(--fg-gold)}
/* Plain top readouts: no frame, one gold line underneath. */
html[data-frame=g] .combat-metrics :is(.hud-item,.hud-wallet){border:0!important;border-bottom:1px solid var(--fg-gold)!important;border-radius:0!important;background:linear-gradient(180deg,#132138,#0A1426)!important;box-shadow:inset 0 1px 0 #ffffff14,0 2px 4px #00000088!important}

/* ---------- H (2026-10-27, user pick): after the user's second reference (files/5df936b5-….jfif) — dark gunmetal band with
   rusted bronze patches, glowing red-orange lights along it, bronze corner brackets with a small light, red HUD readouts inside.
   Mechanical arms, cables and runes are left out (runes may show as boxes on some devices); tick marks stand in for the runes.
   Round corner devices (user preferred them over brackets). The squad dock sits inside the centre column, so it draws no frame of its own
   (two frames looked doubled), and the centre column paints its corner devices above the battlefield canvas. Top readouts stay plain. ---------- */
html[data-frame=h]{--fh-glow:#FF5A2A;--fh-hot:#FFB27A;--fh-rust:#8A4A2A;--fh-text:#EADFD6;
 --fh-core:#FFE2C8 0 1.5px,#FF7A3A 2px 3px,#B5381A 3.5px 4.5px,#2A2523 5px 6.5px,#7A6A5E 7px 8px,#151312 8.5px,transparent 9.5px;
 --fh-corners:radial-gradient(circle at 9px 9px,var(--fh-core)),radial-gradient(circle at calc(100% - 9px) 9px,var(--fh-core)),radial-gradient(circle at 9px calc(100% - 9px),var(--fh-core)),radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),var(--fh-core))}
html[data-frame=h] :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock,dialog,.app>.combat-header){
 border:6px solid transparent;border-radius:4px;
 background:
  var(--fh-corners),
  radial-gradient(circle at 50% 3px,#FFE2C8 0 1px,#FF5A2A 1.5px 2.5px,#FF5A2A55 3px 5px,transparent 5.5px),
  radial-gradient(circle at 3px 50%,#FFB27A 0 1px,#FF5A2A88 1.5px 2.5px,transparent 3.5px),radial-gradient(circle at calc(100% - 3px) 50%,#FFB27A 0 1px,#FF5A2A88 1.5px 2.5px,transparent 3.5px),
  radial-gradient(circle at 30% calc(100% - 3px),#FF7A3A 0 1px,#FF5A2A66 1.5px 2.5px,transparent 3.5px),radial-gradient(circle at 70% calc(100% - 3px),#FF7A3A 0 1px,#FF5A2A66 1.5px 2.5px,transparent 3.5px),
  repeating-linear-gradient(90deg,#7A6A5E 0 1px,transparent 1px 5px) left 28px top 2px/30px 2px,repeating-linear-gradient(90deg,#7A6A5E 0 1px,transparent 1px 5px) right 28px top 2px/30px 2px,
  repeating-linear-gradient(90deg,#FF5A2AAA 0 1px,transparent 1px 3px) right 14px top 10px/34px 5px,
  linear-gradient(#FF5A2A77,#FF5A2A77) right 52px top 12px/18px 1px,
  linear-gradient(#FF5A2A77,#FF5A2A77) right 14px bottom 10px/46px 1px,linear-gradient(#FF5A2A44,#FF5A2A44) right 14px bottom 14px/28px 1px,
  radial-gradient(ellipse at 50% 0%,#FF5A2A14,transparent 55%),linear-gradient(180deg,#1C1A1A,#121111 60%,#0C0B0B),
  radial-gradient(ellipse at 15% 20%,#8A4A2A66,transparent 40%),radial-gradient(ellipse at 85% 80%,#6A3A22AA,transparent 45%),
  repeating-linear-gradient(115deg,#ffffff08 0 2px,transparent 2px 7px),linear-gradient(160deg,#2E2C2B,#4A4542 30%,#252322 55%,#3A3532 80%,#1E1C1B);
 background-origin:border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,border-box,border-box,border-box,border-box;
 background-clip:border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,padding-box,padding-box,padding-box,padding-box,padding-box,padding-box,border-box,border-box,border-box,border-box;
 background-repeat:no-repeat;
 box-shadow:inset 0 0 0 1px #5A3020,inset 0 0 0 2px #0A0909,inset 0 0 0 3px #FF5A2A14,0 0 0 1px #050404,0 3px 0 #000000AA}
/* Smoothness (2026-10-27): an outline and large blurred shadows on these panels were repainted with every timer tick and cut the
   frame rate to a third in software rendering; the inner dark line is drawn by the inset shadows instead, and shadows are sharp. */
html[data-frame=h] :is(.mission-heading,#catalog-panel>.side-heading){border-bottom:0;padding-bottom:6px;background:linear-gradient(90deg,var(--fh-glow),#8A2A14 40%,transparent) left bottom/100% 1px no-repeat}
html[data-frame=h] :is(.mission-heading h2,#catalog-panel .side-heading h2,.overview-heading,#roster-title,dialog h2){color:var(--fh-text);letter-spacing:.05em;text-shadow:0 1px 0 #000,0 0 8px #FF5A2A44}
html[data-frame=h] :is(#catalog-panel .recipe,.unit-select-card){border:1px solid #3A3532;border-radius:3px;background:linear-gradient(180deg,#1E1C1B,#121111);box-shadow:inset 0 0 0 1px #0A0909,inset 0 0 0 2px #5A302044,inset 0 1px 0 #ffffff10,0 2px 0 #000000AA}
html[data-frame=h] #catalog-panel .recipe.available{border-color:#C8502A;box-shadow:inset 0 0 0 1px #0A0909}
html[data-frame=h] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button:not(#catalog-panel *),#catalog-filters button,.legend-roll-actions button,#unit-sell,#unit-portal,.recipe-confirmation .recipe-effects,.view-toggle){border-radius:3px;border:1px solid #8A4A2A;background:linear-gradient(180deg,#3A3532,#1E1C1B);color:var(--fh-text);box-shadow:inset 0 1px 0 #ffffff1C,inset 0 -2px 0 #00000088,0 2px 0 #000000AA}
html[data-frame=h] .command-dock :is(#summon,#summon-batch){background:radial-gradient(ellipse at 50% 0%,#FFB27A66,transparent 70%),linear-gradient(180deg,#D8441E,#8A1E0E);border-color:var(--fh-hot);color:#FFF1E8;box-shadow:inset 0 1px 0 #ffffff44,inset 0 -2px 0 #00000077,0 2px 0 #000000AA}
html[data-frame=h] button[aria-pressed=true]{border-color:var(--fh-glow);box-shadow:inset 0 2px 0 #00000099,inset 0 0 0 1px var(--fh-glow)}
/* Plain top readouts: no frame, one glowing line underneath. */
html[data-frame=h] .combat-metrics :is(.hud-item,.hud-wallet){border:0!important;border-bottom:1px solid #C8502A!important;border-radius:0!important;background:linear-gradient(180deg,#1E1C1B,#121111)!important;box-shadow:inset 0 1px 0 #ffffff10,0 2px 0 #000000AA,0 1px 0 #FF5A2A33!important}

/* Centre column: one frame for field and dock; corner devices drawn over the canvas so they are not covered. */
/* The column itself is left alone (2026-10-27): making it a positioned box stopped phone taps on the field from selecting. The rings'
   outer halves come from its band background; their inner halves are drawn over the field (top) and the squad dock (bottom). */
html[data-frame=h] .battle-stage::after{content:'';position:absolute;inset:0 0 auto;height:12px;z-index:6;pointer-events:none;background:radial-gradient(circle at 3px 3px,var(--fh-core)),radial-gradient(circle at calc(100% - 3px) 3px,var(--fh-core));background-repeat:no-repeat}
html[data-frame=h] .board-column .command-dock::after{content:'';position:absolute;inset:auto 0 0;height:12px;z-index:6;pointer-events:none;background:radial-gradient(circle at 3px calc(100% - 3px),var(--fh-core)),radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),var(--fh-core));background-repeat:no-repeat}
/* Where the dock is not sticky (phones and short landscape screens keep sticky, which also positions the overlay). */
@media(min-width:768px) and (min-height:500px){html[data-frame=h] .board-column .command-dock{position:relative}}
html[data-frame=h] .board-column .command-dock{border:0!important;border-radius:0!important;outline:0!important;background:linear-gradient(90deg,transparent,#FF5A2A 20%,#FFB27A 50%,#FF5A2A 80%,transparent) left top/100% 1px no-repeat,linear-gradient(180deg,#1E1B1A,#121111)!important;box-shadow:0 -1px 0 #000!important}

/* Popup buttons skip the catalogue: on phones it opens in a dialog and its ingredient buttons must keep their size. */
/* Result screen feedback link (2026-10-27, user: too big): a small underlined link, not a plate button. */
html[data-frame=h] .result-dialog #result-feedback{border:0!important;background:none!important;box-shadow:none!important;min-height:28px;padding:2px 4px;font-size:12px!important;font-weight:500;color:#C9B7A8!important;text-shadow:none!important}
html[data-frame=h] .result-dialog #result-feedback:hover:not(:disabled){color:#FFE2C8!important}
/* Operation card (2026-10-27, user: next wave and heretic should read as a matched pair): two equal inset boxes, orange for
   the wave timer, purple (the gate's colour) for the heretic; the heretic note stays on one line. */
html[data-frame=h] #operation-panel .mission-wave{padding:8px 0}
html[data-frame=h] #operation-panel :is(.wave-timer,.heretic-status){margin-top:8px;padding:7px 10px 8px;border:1px solid #3A3532;border-left:3px solid var(--box-accent);border-radius:3px;background:linear-gradient(180deg,#1F1C1B,#141211);box-shadow:inset 0 1px 0 #ffffff0D,0 1px 0 #000000AA}
html[data-frame=h] #operation-panel .wave-timer{--box-accent:#FF5A2A}
html[data-frame=h] #operation-panel .heretic-status{--box-accent:#B86BFF}
html[data-frame=h] #operation-panel :is(.mission-clock,.heretic-row){display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0;padding:0;font-size:13px;line-height:1.3;color:#B9ADA4}
html[data-frame=h] #operation-panel .mission-clock strong{font-size:22px}
html[data-frame=h] #operation-panel .heretic-row strong{font-size:14px;font-weight:800;color:#F0DCFF;font-variant-numeric:tabular-nums}
html[data-frame=h] #operation-panel :is(#next-wave-progress,#heretic-progress){display:block;width:100%;height:5px;margin:6px 0 0;border:0;border-radius:3px;background:#2E2A28;appearance:none}
html[data-frame=h] #operation-panel :is(#next-wave-progress,#heretic-progress)::-webkit-progress-bar{background:#2E2A28;border-radius:3px}
html[data-frame=h] #operation-panel #next-wave-progress::-webkit-progress-value{background:linear-gradient(90deg,#C8401E,#FF7A3A);border-radius:3px}
html[data-frame=h] #operation-panel #heretic-progress::-webkit-progress-value{background:linear-gradient(90deg,#7A3ACC,#C88BFF);border-radius:3px}
html[data-frame=h] #operation-panel #next-wave-progress::-moz-progress-bar{background:#FF5A2A}
html[data-frame=h] #operation-panel #heretic-progress::-moz-progress-bar{background:#B86BFF}
html[data-frame=h] #operation-panel #heretic-note{margin-top:5px;font-size:11px;line-height:1.3;color:#9C918A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-frame=h] #operation-panel .heretic-status[data-warn="true"]{--box-accent:#FF5A6A}/* H button drafts (2026-10-27, user: "버튼 색이 조금 어색한데 다른 버튼 예시"): html[data-hbtn], switched in ?uilab. */
html[data-frame=h][data-hbtn=plate] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button:not(#catalog-panel *),#catalog-filters button,.legend-roll-actions button,#unit-sell,#unit-portal,.recipe-confirmation .recipe-effects,.view-toggle){border:1px solid #0A0909;border-bottom:2px solid #C8502A;background:linear-gradient(180deg,#2A2726,#171514);color:#FFB27A;text-shadow:0 0 6px #FF5A2A55;box-shadow:inset 0 1px 0 #ffffff12,0 2px 0 #000000AA}
html[data-frame=h][data-hbtn=plate] .command-dock :is(#summon,#summon-batch){border:1px solid #FF7A3A;border-bottom-width:2px;background:linear-gradient(180deg,#3A2420,#1E1210);color:#FFD2B0;box-shadow:none}
html[data-frame=h][data-hbtn=plate] button[aria-pressed=true]{border-bottom-color:#FFB27A;background:linear-gradient(180deg,#3A2A22,#221816);color:#FFE2C8}
html[data-frame=h][data-hbtn=glass] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button:not(#catalog-panel *),#catalog-filters button,.legend-roll-actions button){border:1px solid #FF5A2A88;border-radius:4px;background:rgba(24,14,12,.6);color:#F4DCCC;box-shadow:none;backdrop-filter:blur(4px)}
html[data-frame=h][data-hbtn=glass] .command-dock :is(#summon,#summon-batch){border-color:#FF7A3A;background:rgba(120,24,10,.6);color:#FFF1E8;box-shadow:none}
html[data-frame=h][data-hbtn=glass] button[aria-pressed=true]{border-color:#FFB27A;box-shadow:none}
html[data-frame=h][data-hbtn=bronze] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button:not(#catalog-panel *),#catalog-filters button,.legend-roll-actions button){border:1px solid #1A0E08;border-radius:3px;
 background:radial-gradient(circle at 6px 50%,#E0B08A 0 1px,#3A2010 1.6px,transparent 2.2px),radial-gradient(circle at calc(100% - 6px) 50%,#E0B08A 0 1px,#3A2010 1.6px,transparent 2.2px),linear-gradient(180deg,#7A5238,#4A2E1E 50%,#2E1C12);
 color:#F6E2CC;text-shadow:0 1px 0 #000;box-shadow:inset 0 1px 0 #D8A27A66,inset 0 -2px 0 #00000088,0 2px 0 #000000AA}
html[data-frame=h][data-hbtn=bronze] .command-dock :is(#summon,#summon-batch){border-color:#FFB27A;background:linear-gradient(180deg,#C8502A,#7A2A12 60%,#4A160A);color:#FFF1E8;box-shadow:inset 0 1px 0 #FFB27A88,inset 0 -2px 0 #00000088,0 2px 0 #000000AA}
html[data-frame=h][data-hbtn=bronze] button[aria-pressed=true]{background:linear-gradient(180deg,#A8724E,#6A4026);box-shadow:inset 0 2px 0 #00000088}
html[data-frame=h][data-hbtn=hazard] :is(.command-dock .command-button,.header-actions #pause-top,.recipe-confirm-actions button,dialog button:not(#catalog-panel *),#catalog-filters button,.legend-roll-actions button){border:1px solid #3A3532;border-radius:2px;background:repeating-linear-gradient(-45deg,#F2C14E 0 5px,#111 5px 10px) left top/100% 3px no-repeat,linear-gradient(180deg,#1E1C1B,#0E0D0C);color:#EADFD6;box-shadow:inset 0 -2px 0 #00000088,0 2px 0 #000000AA}
html[data-frame=h][data-hbtn=hazard] .command-dock :is(#summon,#summon-batch){border-color:#F2C14E;background:repeating-linear-gradient(-45deg,#F2C14E 0 5px,#111 5px 10px) left top/100% 4px no-repeat,linear-gradient(180deg,#B2341E,#6E1A0E);color:#FFF1E8;box-shadow:0 2px 0 #000000AA}
html[data-frame=h][data-hbtn=hazard] button[aria-pressed=true]{border-color:#F2C14E;color:#F2C14E}