.iron-badge { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; min-width: 13px; min-height: 13px; vertical-align: -.22em; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .65)); }
.iron-badge .ia-emblem { width: 100%; height: 100%; }
:is(.lb-who, .clan-who-in, .fr-name, li) > .iron-badge { margin-inline: .05em .25em; }
.cb-name > .iron-badge { align-self: center; width: 1.2rem; height: 1.2rem; margin-right: .3rem; vertical-align: middle; }
.pc-name > .iron-badge { width: .95em; height: .95em; margin-right: .3em; vertical-align: -.12em; }

.mode-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.mode-card { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem; min-height: 4.4rem; padding: .65rem .75rem; border-radius: .7rem; border: 1px solid var(--edge-soft); background: linear-gradient(180deg, rgba(36, 52, 82, .6), rgba(10, 16, 28, .8)); color: var(--text-2); text-align: left; cursor: pointer; transition: border-color .15s, background .2s, box-shadow .2s, translate .15s; }
.mode-card:hover { border-color: var(--edge); translate: 0 -1px; }
.mode-card:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }
.mode-card[disabled] { cursor: default; opacity: .7; }
.mode-mark { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .55rem; background: radial-gradient(circle at 50% 38%, rgba(255, 238, 200, .12), rgba(3, 7, 14, .55)); box-shadow: inset 0 0 0 1px rgba(214, 170, 96, .18); }
.mode-mark .ia-emblem { width: 2.05rem; height: 2.05rem; filter: drop-shadow(0 .1rem .12rem rgba(0, 0, 0, .7)); }
.mode-copy { display: grid; gap: .18rem; min-width: 0; }
.mode-copy b { font: 600 1.02rem/1.1 var(--font-display); color: var(--text-1); }
.mode-copy small { font-size: .78rem; line-height: 1.3; color: var(--text-3); }
.mode-card.is-chosen { border-color: var(--gold-2); background: linear-gradient(180deg, rgba(96, 72, 30, .55), rgba(26, 21, 14, .85)); box-shadow: 0 0 0 1px rgba(242, 198, 106, .45), inset 0 0 1.4rem rgba(242, 198, 106, .14); }
.mode-card.is-chosen .mode-copy b { color: var(--gold-1); }
.mode-card.is-chosen::after { content: ""; position: absolute; top: .45rem; right: .5rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--gold-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1204' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.4'/%3E%3C/svg%3E") 50% 50% / 72% no-repeat; box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.mode-card[data-mode="ironman"].is-chosen { border-color: #b9c4cc; background: linear-gradient(180deg, rgba(74, 84, 94, .62), rgba(16, 19, 24, .9)); box-shadow: 0 0 0 1px rgba(205, 214, 221, .4), inset 0 0 1.4rem rgba(205, 214, 221, .12); }
.mode-card[data-mode="ironman"].is-chosen .mode-copy b { color: #eef2f5; }
.mode-card[data-mode="ironman"].is-chosen::after { background-color: #d9e0e5; }
.mode-slot { display: grid; }
.mode-slot > * { grid-area: 1 / 1; min-width: 0; }
.mode-slot > .is-off { visibility: hidden; }
.mode-slot-kit { display: grid; }
.mode-rules { padding: .7rem .8rem .65rem; border-radius: .65rem; background: rgba(3, 7, 14, .5); border: 1px solid rgba(205, 214, 221, .2); }
.mode-rules ul { display: grid; gap: .34rem; margin: 0; padding: 0; list-style: none; }
.mode-rules li { display: grid; grid-template-columns: 4.6rem 1fr; gap: .55rem; align-items: baseline; font-size: .84rem; line-height: 1.35; color: var(--text-2); }
.mode-rules li b { font: 700 .68rem/1.5 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #c9d2d8; }
.mode-rules li[data-rule="off"] b { color: #f0a08a; }
.mode-rules li[data-rule="leave"] b { color: var(--gold-1); }
.mode-once { display: flex; gap: .4rem; align-items: flex-start; margin: .6rem 0 0; padding-top: .55rem; border-top: 1px solid rgba(205, 214, 221, .12); font-size: .8rem; line-height: 1.35; color: var(--text-3); }
.mode-once .ia-glyph { flex: none; width: .95rem; height: .95rem; margin-top: .1rem; color: #c9d2d8; }

.iron-row-name { display: inline-flex; align-items: center; gap: .35rem; }
.iron-row-name .ia-emblem, .iron-leave-open .ia-emblem { width: 1.15rem; height: 1.15rem; }
.iron-leave-open { gap: .35rem; }
.iron-scrim-hit { position: absolute; inset: 0; cursor: default; background: none; border: 0; }
.iron-leave { position: relative; width: min(30rem, 100%); }
.iron-leave-head { display: grid; justify-items: center; gap: .3rem; }
.iron-leave-mark .ia-emblem { width: 3.6rem; height: 3.6rem; filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .7)); }
.iron-leave-warn { font-size: .95rem; line-height: 1.45; }
.iron-hold { position: relative; overflow: hidden; }
.iron-hold.is-holding .hold-fill { animation-duration: var(--hold-ms, 2s); }
.iron-stay { align-self: center; margin-top: .55rem; }

.iron-note { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .6rem .75rem; border-radius: .6rem; background: linear-gradient(180deg, rgba(74, 84, 94, .32), rgba(16, 19, 24, .55)); border: 1px solid rgba(205, 214, 221, .22); font-size: .88rem; line-height: 1.4; color: var(--text-2); text-align: left; }
.iron-note-mark .ia-emblem { display: block; width: 1.6rem; height: 1.6rem; }

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .mode-card { min-height: 4.8rem; }
  .mode-copy small, .mode-once, .mode-rules li { font-size: .82rem; }
  .mode-rules li { grid-template-columns: 1fr; gap: .1rem; }
  .mode-rules li b { font-size: .75rem; }
  .iron-stay, .iron-row .btn { min-height: 3.3rem; }
}
@media (max-width: 380px) {
  .mode-cards { grid-template-columns: 1fr; }
}

.lb-mode-tools { padding-top: 0; }
.lb-mode-tools .lb-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); width: 100%; }
.lb-modes button { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; white-space: nowrap; padding-inline: .45rem; }
.lb-modes .ia-emblem { flex: none; width: 1.15rem; height: 1.15rem; }
:is(.clan-main, .clan-stack) > .iron-note { flex: none; }