/* ═══════════════════════════════════════════════════════════════
   HOOK & LADDER 7 — s113 deep-custom portal skin
   site youxi--1--113 · index.html
   language: slide poles · roll shutter · alarm bells · hose coils
   ═══════════════════════════════════════════════════════════════ */

/* ── palette (unchanged from original site) ──────────────────── */
:root {
  --bg: #0C0C1D;
  --panel: #12122B;
  --panel-2: #1A1A38;
  --accent: #4244F4;
  --accent2: #2424D6;
  --text: #FBF2E8;
  --soft: #948FC9;
  --line: rgba(66, 68, 244,.3);
  --fh: 'Arial Black', Impact, sans-serif;
  --fb: 'Segoe UI', sans-serif;
  --fm: 'Consolas', monospace;
  --sec-gap: 30px;
  /* fire-house derived tones (decor only) */
  --lamp: #FF5A3C;
  --lamp-2: #FFB03A;
  --brass: #C9A227;
  --brass-2: #8F6E14;
  --hose: #D93A25;
  --hose-2: #8F1F12;
}

/* ═══ 0. reset & base ═══════════════════════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html { scroll-behavior: smooth; }

body {
  color: var(--text);
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
}

/* the station night: brick courses under a red lamp glow */
body.t-fire {
  background:
    radial-gradient(circle at 50% -70px, rgba(255, 90, 60,.14), transparent 270px),
    repeating-linear-gradient(0deg, rgba(66, 68, 244,.06) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(66, 68, 244,.05) 0 1px, transparent 1px 30px),
    radial-gradient(ellipse at 25% 0%, rgba(66, 68, 244,.08), transparent 45%),
    var(--bg);
  background-attachment: fixed;
}

[v-cloak] { display: none; }
a { color: inherit; text-decoration: none; display: block; }
img { display: block; max-width: 100%; }
button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

::selection { background: var(--accent); color: #0C0C1D; }

/* ═══ 1. layout shell ════════════════════════════════════════════ */
.wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 18px;
}

/* each section is a riveted steel pane off the apparatus wall */
.sec {
  position: relative;
  margin-top: var(--sec-gap);
  min-width: 0;
  padding: 15px 16px 17px;
  border-radius: 10px;
  border: 1.5px solid rgba(66, 68, 244,.32);
  background:
    linear-gradient(180deg, rgba(66, 68, 244,.06), rgba(12, 12, 29,.4) 60%),
    var(--panel);
  box-shadow:
    inset 0 2px 0 rgba(251, 242, 232,.04),
    0 12px 26px -18px rgba(0,0,0,.75);
}

/* the riveted seam pressed along the pane rim */
.sec::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(251, 242, 232,.42) 0 4px, transparent 4px 10px);
  border-radius: 2px;
  pointer-events: none;
}

/* ═══ 2. callout — the box-alarm stamp ═══════════════════════════ */
.callout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.callout b {
  flex: none;
  font-family: var(--fm);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0C0C1D;
  background: var(--accent);
  border-radius: 3px;
  padding: 4px 13px;
}

.callout span {
  font-family: var(--fm);
  font-size: 10.5px;
  color: var(--soft);
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.callout::after {
  content: '';
  flex: 1;
  border-top: 1.5px dashed rgba(66, 68, 244,.35);
}

/* the flame glyph beside the label */
.co-flame {
  flex: none;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  color: var(--lamp);
}

/* ═══ 3. header — alarm lamps + roll shutter ════════════════════ */
.hdr {
  position: relative;
  z-index: 50;
  background: linear-gradient(180deg, #16162F, #101024);
  overflow: hidden;
}

/* the warning light bar over the bay doors */
.s113-lamps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 9px 0 6px;
}

.s113-lamps i {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FF9B82, var(--lamp) 60%, #C21F0C);
  box-shadow: 0 0 14px rgba(255, 90, 60,.55), inset 0 -2px 3px rgba(0,0,0,.35);
  animation: s113lamp 1.6s ease-in-out infinite;
}

.s113-lamps i:nth-child(1) { animation-delay: 0s; }

.s113-lamps i:nth-child(2) { animation-delay: .53s; }

.s113-lamps i:nth-child(3) { animation-delay: 1.06s; }

@keyframes s113lamp {
  0%, 100% { opacity: .45; box-shadow: 0 0 6px rgba(255, 90, 60,.3); }
  50% { opacity: 1; box-shadow: 0 0 18px rgba(255, 90, 60,.75); }
}

.hdr-in {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 10px;
}

.s113-brand {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hdr-name {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s113-sub {
  font-family: var(--fm);
  font-size: 8.5px;
  letter-spacing: .24em;
  color: var(--soft);
}

.hdr-search {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border: 1.5px solid rgba(66, 68, 244,.45);
  border-radius: 6px;
}

/* the red roll-down shutter closing the header */
.s113-shutter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 14px 7px;
}

.s113-shutter i {
  height: 6px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 3px, transparent 3px 26px),
    linear-gradient(180deg, #6E1A10, #4A0F09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ═══ 4. category rail + search ══════════════════════════════════ */
.s113-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 2px 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.s113-rail::-webkit-scrollbar { display: none; }

/* each chip is a box-alarm card from the index board */
.s113-box {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(66, 68, 244,.35);
  border-radius: 6px;
  padding: 7px 12px;
  background: var(--panel);
}

/* the printed box number */
.s113-box-no {
  flex: none;
  font-family: var(--fm);
  font-size: 8.5px;
  letter-spacing: .06em;
  color: #FBF2E8;
  background: var(--hose);
  border-radius: 3px;
  padding: 3px 5px;
}

.s113-box-no.n1 { background: var(--lamp-2); }

.s113-box-no.n2 { background: var(--accent2); }

.s113-box-no.n3 { background: var(--brass-2); }

.s113-box b {
  font-family: var(--fh);
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
}

.s113-box em {
  font-style: normal;
  font-family: var(--fm);
  font-size: 9px;
  color: var(--soft);
}

.s113-box.on {
  background: var(--accent);
  border-color: var(--accent);
}

.s113-box.on b { color: #0C0C1D; }

.s113-box.on em { color: #23234D; }

.s113-box.on .s113-box-no { background: #0C0C1D; color: var(--accent); }

.s113-box:active { transform: scale(.96); }

.srch-bar {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.srch-input {
  flex: 1;
  min-width: 0;
  background: #08081A;
  border: 1.5px solid rgba(66, 68, 244,.35);
  border-radius: 6px;
  padding: 10px 13px;
  font-family: var(--fb);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
}

.srch-input:focus { border-color: var(--accent); }

.srch-go {
  flex: none;
  font-family: var(--fh);
  font-size: 12.5px;
  font-weight: 800;
  color: #0C0C1D;
  background: var(--accent);
  border-radius: 6px;
  padding: 0 16px;
}

.srch-go:active { transform: scale(.96); }

/* ═══ 5. loading ═════════════════════════════════════════════════ */
.loading-full {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.loading-bar {
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: var(--panel-2);
  overflow: hidden;
  margin: 0 auto 12px;
}

.loading-bar::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  animation: ldslide 1s infinite;
}

@keyframes ldslide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.loading-txt {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--soft);
}

/* ═══ 6. hero — the double fire poles ════════════════════════════ */
.hv11 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hv11-label {
  font-family: var(--fm);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--lamp);
  text-align: center;
}

/* the upper-floor cutaway the poles drop through */
.hv11-house {
  position: relative;
  width: 252px;
  height: 104px;
  margin: 0 auto 10px;
}

/* the concrete slab over the pole holes */
.hv11-slab {
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid rgba(66, 68, 244,.3);
  box-shadow: 0 3px 6px rgba(0,0,0,.4);
}

/* the two pole openings cut in the slab */
.hv11-slab::before,
.hv11-slab::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 13px;
  height: 6px;
  border-radius: 0 0 4px 4px;
  background: #060614;
}

.hv11-slab::before { left: 59px; }

.hv11-slab::after { left: 105px; }

/* the brass sliding poles */
.hv11-pole {
  position: absolute;
  top: 8px;
  bottom: 12px;
  width: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #6E5514, var(--brass) 38%, #EAD26F 50%, var(--brass) 62%, #6E5514);
  box-shadow: 0 0 6px rgba(201, 162, 39,.25);
}

.hv11-pole.p1 { left: 92px; }

.hv11-pole.p2 { left: 138px; }

/* the firefighter dropping down pole one */
.hv11-rider {
  position: absolute;
  top: 10px;
  left: 87px;
  width: 17px;
  height: 25px;
  z-index: 2;
  background: linear-gradient(180deg, #20203F, #0A0A1E);
  border-radius: 6px 6px 3px 3px;
  animation: s113pole 3s ease-in infinite;
}

/* the helmet with its brim */
.hv11-rider::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 13px;
  height: 9px;
  margin-left: -6.5px;
  background: linear-gradient(180deg, #FF7A5C, var(--lamp));
  border-radius: 7px 7px 2px 2px;
  box-shadow: 0 2.5px 0 rgba(255, 90, 60,.85);
}

/* the legs braced around the pole */
.hv11-rider::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: -6px;
  width: 29px;
  height: 8px;
  background: #0A0A1E;
  border-radius: 5px;
  clip-path: polygon(0 0, 26% 0, 30% 55%, 70% 55%, 74% 0, 100% 0, 100% 100%, 0 100%);
}

@keyframes s113pole {
  0% { top: 10px; opacity: 0; }
  10% { opacity: 1; }
  62% { top: 64px; opacity: 1; }
  74% { top: 70px; opacity: 0; }
  100% { top: 70px; opacity: 0; }
}

/* the cushion at the foot of each pole */
.hv11-mat {
  position: absolute;
  bottom: 0;
  width: 44px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--hose), var(--hose-2));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12);
}

.hv11-mat.m1 { left: 74px; }

.hv11-mat.m2 { left: 120px; }

/* the main card styled as the red station door */
.hv11-main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: min(100%, 330px);
  margin: 0 auto;
  padding: 14px 16px 18px;
  border-radius: 14px;
  border: 3px solid rgba(217, 58, 37,.6);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 90, 60,.08), transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.35),
    0 14px 28px -16px rgba(0,0,0,.7);
}

/* the riveted lintel across the door head */
.hv11-main::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  height: 8px;
  border-radius: 14px 14px 0 0;
  background:
    radial-gradient(circle at 10px 4px, rgba(251, 242, 232,.5) 1.2px, transparent 2.2px) 0 0 / 34px 8px repeat-x,
    linear-gradient(180deg, var(--hose), var(--hose-2));
}

.hv11-art {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  border: 4px solid rgba(217, 58, 37,.5);
  background: #060614;
  box-shadow: inset 0 0 20px rgba(0,0,0,.5);
}

.hv11-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the glass glare across the door window */
.hv11-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    rgba(251, 242, 232,.16) 0 14%,
    transparent 14% 52%,
    rgba(251, 242, 232,.07) 52% 58%,
    transparent 58%);
  pointer-events: none;
}

.hv11-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.hv11-nm {
  font-family: var(--fh);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: break-word;
}

.hv11-ds {
  font-size: 12.5px;
  color: var(--soft);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hv11-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.hv11-meta em {
  font-style: normal;
  font-family: var(--fm);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0C0C1D;
  background: var(--accent);
  border-radius: 3px;
  padding: 3px 10px;
}

.hx-stars {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 2px;
}

.hx-stars i { font-style: normal; }
.hx-stars i.off { opacity: .25; }

.hx-cta {
  align-self: center;
  margin-top: 8px;
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #0C0C1D;
  background: var(--accent);
  border-radius: 4px;
  padding: 8px 20px;
}

.hv11-main:active { transform: scale(.98); }

/* ═══ 7. divider — the hose seam ═════════════════════════════════ */
.tk-div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 6px 0 10px;
}

/* laid lengths of attack line */
.tk-div i {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--hose), var(--hose-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

/* the fire-service cross coupling in the middle */
.tk-div i:nth-child(3) {
  width: 13px;
  height: 13px;
  background: transparent;
  border: 2.5px solid var(--brass);
  border-radius: 3px;
  transform: rotate(45deg);
  box-shadow:
    inset 0 0 0 2.5px #0C0C1D,
    inset 0 0 0 4.5px var(--brass);
}

/* ═══ 8. dispatch board — the alarm assignment list ══════════════ */
.s113-dispatch {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px 12px 27px;
  border: 1.5px solid rgba(66, 68, 244,.22);
  border-radius: 10px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(66, 68, 244,.04) 0 1px, transparent 1px 30px),
    var(--panel-2);
}

/* the timeline rail each call hangs from */
.s113-dispatch::before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 12px;
  left: 13px;
  width: 2px;
  background: linear-gradient(180deg, var(--lamp), var(--accent));
  border-radius: 2px;
}

.s113-dsp {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid rgba(66, 68, 244,.18);
  border-radius: 8px;
}

/* the node pin on the rail */
.s113-dsp::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(66, 68, 244,.18);
}

.s113-dsp-time {
  flex: none;
  font-family: var(--fm);
  font-size: 9px;
  color: var(--soft);
  border: 1px dashed rgba(148, 143, 201,.4);
  border-radius: 4px;
  padding: 3px 5px;
}

/* the response-mode lamp */
.s113-dsp-lamp {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.s113-dsp-lamp.a0 {
  background: var(--lamp);
  box-shadow: 0 0 8px rgba(255, 90, 60,.6);
}

.s113-dsp-lamp.a1 {
  background: var(--lamp-2);
  box-shadow: 0 0 8px rgba(255, 176, 58,.5);
}

.s113-dsp-lamp.a2 {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(66, 68, 244,.6);
}

.s113-dsp img {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid rgba(66, 68, 244,.25);
}

.s113-dsp-b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s113-dsp-b b {
  font-family: var(--fh);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s113-dsp-b em {
  font-style: normal;
  font-family: var(--fm);
  font-size: 8.5px;
  letter-spacing: .08em;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s113-dsp-arrow {
  flex: none;
  font-size: 13px;
  color: var(--accent);
}

.s113-dsp:active { transform: scale(.98); }

/* ═══ 9. equipment rack — the pegboard wall ══════════════════════ */
.s113-rack {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 12px;
  padding: 20px 10px 4px;
  border: 1.5px solid rgba(66, 68, 244,.22);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12px 22px, rgba(66, 68, 244,.16) 1.5px, transparent 2.5px) 0 0 / 36px 30px,
    var(--panel-2);
}

/* the brass rail across the top of the board */
.s113-rack::before {
  content: '';
  position: absolute;
  top: 0;
  left: 6px;
  right: 6px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--brass), var(--brass-2));
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}

.s113-rk {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 9px 9px;
  background: var(--panel);
  border: 1px solid rgba(66, 68, 244,.18);
  border-radius: 8px;
}

/* the J-hook each tool hangs from */
.s113-rk-hook {
  width: 20px;
  height: 12px;
  border: 2.5px solid var(--brass);
  border-top: none;
  border-radius: 0 0 11px 11px;
}

.s113-rk-art img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid rgba(66, 68, 244,.3);
}

/* the brass inventory tag wired to each tool */
.s113-rk-tag {
  width: 100%;
  border: 1px dashed rgba(201, 162, 39,.5);
  background: rgba(201, 162, 39,.07);
  border-radius: 5px;
  padding: 5px 8px;
  text-align: center;
}

.s113-rk-tag b {
  display: block;
  font-family: var(--fh);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s113-rk-tag em {
  font-style: normal;
  font-family: var(--fm);
  font-size: 8.5px;
  letter-spacing: .1em;
  color: var(--brass);
}

.s113-rk:active { transform: scale(.97); }

/* ═══ 10. apparatus floor — the engine line-up ═══════════════════ */
.s113-bay {
  position: relative;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 24px 4px 14px;
  -webkit-overflow-scrolling: touch;
}

.s113-bay::-webkit-scrollbar { height: 4px; }
.s113-bay::-webkit-scrollbar-thumb { background: rgba(66, 68, 244,.4); border-radius: 2px; }
.s113-bay::-webkit-scrollbar-track { background: transparent; }

/* the ceiling pipe the bay doors hang from */
.s113-bay::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(148, 143, 201,.6) 5%,
    rgba(148, 143, 201,.6) 95%,
    transparent);
}

.s113-truck {
  position: relative;
  flex: none;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 6px 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1.5px solid rgba(66, 68, 244,.25);
  border-top: 4px solid var(--hose);
  border-radius: 9px;
}

/* the light bar on the cab roof */
.s113-truck-beacon {
  display: flex;
  gap: 4px;
  padding: 2px 0;
}

.s113-truck-beacon i {
  width: 8px;
  height: 6px;
  border-radius: 2px;
  background: var(--lamp);
  box-shadow: 0 0 6px rgba(255, 90, 60,.55);
}

.s113-truck-beacon i:last-child {
  background: var(--lamp-2);
  box-shadow: 0 0 6px rgba(255, 176, 58,.5);
}

.s113-truck-glass {
  width: 100%;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid rgba(66, 68, 244,.3);
}

.s113-truck-glass img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s113-truck-nm {
  font-family: var(--fh);
  font-size: 11px;
  color: var(--text);
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the wheels under the rig */
.s113-truck::before,
.s113-truck::after {
  content: '';
  position: absolute;
  bottom: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #05050F;
  border: 2px solid #23233F;
}

.s113-truck::before { left: 10px; }

.s113-truck::after { right: 10px; }

.s113-truck-no {
  font-style: normal;
  font-family: var(--fm);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--brass);
}

.s113-truck:active { transform: scale(.95); }

/* ═══ 11. house totals — the bell row ════════════════════════════ */
.s113-tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.s113-tally-cell {
  text-align: center;
  padding: 10px 6px 9px;
  border: 1px solid rgba(66, 68, 244,.2);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}

.s113-tally-cell b {
  display: block;
  font-family: var(--fm);
  font-size: 20px;
  color: var(--accent);
  line-height: 1.1;
}

.s113-tally-cell span {
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--soft);
}

.s113-bells {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-top: 15px;
}

/* the mount rail the bells hang from */
.s113-bells::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 8px;
  right: 8px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brass), var(--brass-2));
}

.s113-bell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 5px 9px;
  background: var(--panel-2);
  border: 1px solid rgba(66, 68, 244,.18);
  border-radius: 8px;
}

/* the swinging fire bell */
.s113-bell-dome {
  position: relative;
  width: 30px;
  height: 26px;
  transform-origin: 50% 4px;
  animation: s113bell 2.8s ease-in-out infinite;
}

/* the brass bell body */
.s113-bell-dome::before {
  content: '';
  position: absolute;
  inset: 5px 0 0;
  border-radius: 16px 16px 4px 4px;
  background: linear-gradient(180deg, #EAD26F, var(--brass) 45%, var(--brass-2));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25);
}

/* the crown mount */
.s113-bell-dome::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 6px;
  margin-left: -4px;
  border-radius: 3px 3px 0 0;
  background: var(--brass-2);
}

/* the clapper peeking below the mouth */
.s113-bell-dome i {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #6E5514;
}

.s113-bell:nth-child(2) .s113-bell-dome { animation-delay: .35s; }

.s113-bell:nth-child(3) .s113-bell-dome { animation-delay: .7s; }

.s113-bell:nth-child(4) .s113-bell-dome { animation-delay: 1.05s; }

@keyframes s113bell {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(7deg); }
  40% { transform: rotate(-6deg); }
  60% { transform: rotate(4deg); }
  80% { transform: rotate(-3deg); }
}

.s113-bell-art img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid rgba(66, 68, 244,.3);
}

.s113-bell-nm {
  font-family: var(--fh);
  font-size: 11px;
  color: var(--text);
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s113-bell:active { transform: scale(.95); }

/* ═══ 12. dalmatian corner — the medal wall ══════════════════════ */
.s113-award {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px 16px 14px;
  border: 2px solid rgba(201, 162, 39,.45);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(201, 162, 39,.08), transparent 40%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow:
    inset 0 0 0 4px rgba(12, 12, 29,.65),
    inset 0 0 0 5px rgba(201, 162, 39,.3);
  text-align: center;
  overflow: hidden;
}

/* the ribbon tails the plaque hangs from */
.s113-award-ribbon {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 22px;
}

.s113-award-ribbon i {
  width: 16px;
  height: 30px;
  background: linear-gradient(180deg, var(--lamp), var(--hose-2));
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}

/* the fire-service cross medal */
.s113-award-mark {
  position: relative;
  width: 34px;
  height: 34px;
  margin: -14px auto 0;
  transform: rotate(45deg);
  border-radius: 4px;
  background: linear-gradient(135deg, #EAD26F, var(--brass) 55%, var(--brass-2));
  box-shadow:
    0 0 0 3px var(--panel-2),
    0 0 0 4.5px var(--brass-2),
    0 4px 10px rgba(0,0,0,.5);
}

/* the dark cross core */
.s113-award-mark::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 2px;
  background: rgba(12, 12, 29,.55);
}

.s113-award-q {
  font-family: var(--fh);
  font-size: 26px;
  line-height: .6;
  color: var(--brass);
}

.s113-award-txt {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.s113-award-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(201, 162, 39,.3);
}

.s113-award-by img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brass);
}

.s113-award-by b {
  font-family: var(--fh);
  font-size: 13px;
  color: var(--text);
}

.s113-award-by i {
  font-style: normal;
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--brass);
}

.s113-award:active { transform: scale(.98); }

/* the small medal strip under the plaque */
.s113-medals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.s113-medal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid rgba(66, 68, 244,.16);
  border-radius: 8px;
}

.s113-medal-pip {
  flex: none;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border-radius: 3px;
}

.s113-medal-pip.m0 { background: linear-gradient(135deg, #EAD26F, var(--brass-2)); }

.s113-medal-pip.m1 { background: linear-gradient(135deg, #D8DCE8, #9BA3BF); }

.s113-medal-pip.m2 { background: linear-gradient(135deg, #D98F5F, #8F5A2B); }

.s113-medal img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 7px;
  object-fit: cover;
}

.s113-medal-b {
  flex: 1;
  min-width: 0;
}

.s113-medal-b b {
  display: block;
  font-family: var(--fh);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s113-medal-b em {
  font-style: normal;
  font-family: var(--fm);
  font-size: 8.5px;
  letter-spacing: .1em;
  color: var(--soft);
}

.s113-medal:active { transform: scale(.98); }

/* ═══ 13. open house passes — the drill step discs ═══════════════ */
.s113-drill {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s113-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 9px;
  background: var(--panel);
  border: 1px solid rgba(66, 68, 244,.18);
  border-radius: 10px;
}

/* the numbered dial */
.s113-step-disc {
  flex: none;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--brass);
  background: radial-gradient(circle at 50% 34%, var(--panel-2), var(--panel));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the tick ring around the dial */
.s113-step-disc::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--brass) 0 2deg, transparent 2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
  mask: radial-gradient(circle, transparent 62%, #000 64%);
  opacity: .8;
}

.s113-step-disc i {
  font-style: normal;
  font-family: var(--fm);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.s113-step-art img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid rgba(66, 68, 244,.3);
}

.s113-step-b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s113-step-b b {
  font-family: var(--fh);
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s113-step-b em {
  font-style: normal;
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--lamp-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s113-step:active { transform: scale(.98); }

/* ═══ 14. kitchen table talk — the tool bench ════════════════════ */
.s113-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 15px 14px;
  border: 1.5px solid rgba(255, 176, 58,.4);
  border-left: 5px solid var(--lamp-2);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 176, 58,.08), transparent 55%),
    var(--panel-2);
}

.s113-strip-k {
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lamp-2);
}

.s113-strip-nm {
  font-family: var(--fh);
  font-size: 18px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s113-strip-d {
  font-size: 12px;
  color: var(--soft);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.s113-strip-go {
  margin-top: 4px;
  align-self: flex-start;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #0C0C1D;
  background: var(--lamp-2);
  border-radius: 4px;
  padding: 6px 12px;
}

.s113-strip:active { transform: scale(.98); }

/* the bench with its slotted surface */
.s113-bench {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 18px;
}

/* the steel bench top with keeper rivets */
.s113-bench-surface {
  position: absolute;
  top: 0;
  left: 2px;
  right: 2px;
  height: 9px;
  border-radius: 5px;
  background:
    radial-gradient(circle at 14px 4.5px, rgba(251, 242, 232,.35) 1.5px, transparent 2.5px) 0 0 / 28px 9px repeat-x,
    linear-gradient(180deg, var(--brass), var(--brass-2));
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}

.s113-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid rgba(66, 68, 244,.18);
  border-radius: 8px;
}

/* the keeper notch cut into the bench */
.s113-tool-notch {
  flex: none;
  width: 8px;
  height: 26px;
  border-radius: 4px;
  background: repeating-linear-gradient(180deg, rgba(148, 143, 201,.5) 0 3px, transparent 3px 6px);
  border: 1px solid rgba(148, 143, 201,.35);
}

.s113-tool img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 7px;
  object-fit: cover;
}

.s113-tool-b {
  flex: 1;
  min-width: 0;
}

.s113-tool-b b {
  display: block;
  font-family: var(--fh);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s113-tool-b em {
  font-style: normal;
  font-family: var(--fm);
  font-size: 8.5px;
  letter-spacing: .12em;
  color: var(--soft);
}

.s113-tool:active { transform: scale(.98); }

/* ═══ 15. box alarm index — the district map ═════════════════════ */
.s113-zones {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 11px 10px;
  padding: 15px 11px 11px;
  border: 1.5px solid rgba(66, 68, 244,.22);
  border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, rgba(66, 68, 244,.08) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(66, 68, 244,.08) 0 1px, transparent 1px 22px),
    var(--panel-2);
}

/* the survey crosshair in the map corner */
.s113-zones::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 11px;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(0deg, var(--accent) 0 1.5px, transparent 1.5px) center / 100% 12px no-repeat,
    linear-gradient(90deg, var(--accent) 0 1.5px, transparent 1.5px) center / 12px 100% no-repeat;
  opacity: .7;
}

.s113-zone {
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 11px 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1.5px solid rgba(66, 68, 244,.25);
  border-radius: 9px;
}

/* the dashed district boundary inside each block */
.s113-zone::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px dashed rgba(66, 68, 244,.2);
  border-radius: 6px;
  pointer-events: none;
}

/* the map pin dropped on each district */
.s113-zone-pin {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.s113-zone-pin.z0 { background: var(--lamp); }

.s113-zone-pin.z1 { background: var(--lamp-2); }

.s113-zone-pin.z2 { background: var(--accent); }

.s113-zone-pin.z3 { background: var(--brass); }

.s113-zone-b {
  flex: 1;
  min-width: 0;
}

.s113-zone-b b {
  display: block;
  font-family: var(--fh);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s113-zone-b i {
  font-style: normal;
  font-family: var(--fm);
  font-size: 9px;
  color: var(--soft);
}

.s113-zone-arrow {
  flex: none;
  font-size: 13px;
  color: var(--accent);
}

.s113-zone:active { transform: scale(.97); }

/* ═══ 16. run log — the duty journal ═════════════════════════════ */
.s113-log {
  position: relative;
  padding: 18px 12px 12px;
  background:
    repeating-linear-gradient(0deg, rgba(66, 68, 244,.05) 0 1px, transparent 1px 34px),
    var(--panel);
  border: 1.5px solid rgba(66, 68, 244,.22);
  border-radius: 10px;
}

/* the spiral binding rings along the journal spine */
.s113-log-rings {
  position: absolute;
  top: -8px;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
}

.s113-log-rings i {
  width: 13px;
  height: 15px;
  border-radius: 50%;
  border: 2.5px solid var(--brass);
  background: var(--bg);
}

.arc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid rgba(66, 68, 244,.14);
  border-radius: 8px;
}

.arc img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 7px;
  object-fit: cover;
}

/* the run number logged in the margin */
.s113-entry-no {
  flex: none;
  font-family: var(--fm);
  font-size: 9px;
  color: var(--accent);
  border: 1px dashed rgba(66, 68, 244,.4);
  border-radius: 4px;
  padding: 3px 5px;
}

.arc-b {
  flex: 1;
  min-width: 0;
}

.arc-nm {
  display: block;
  font-family: var(--fh);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arc-ds {
  display: block;
  font-size: 11px;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arc-arrow {
  flex: none;
  font-size: 13px;
  color: var(--accent);
}

.arc:active { transform: scale(.98); }

/* ═══ 17. filter view + empty ════════════════════════════════════ */
.filter-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.filter-back {
  flex: none;
  font-family: var(--fh);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  background: var(--panel);
  border: 1.5px solid rgba(66, 68, 244,.5);
  border-radius: 6px;
  padding: 7px 12px;
}

.filter-title {
  flex: 1;
  min-width: 0;
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-cnt {
  flex: none;
  font-family: var(--fm);
  font-size: 11.5px;
  color: #0C0C1D;
  background: var(--accent);
  border-radius: 4px;
  padding: 3px 8px;
}

.empty-space {
  text-align: center;
  padding: 40px 0 24px;
}

/* the empty cradle on a quiet night */
.empty-space p {
  font-size: 30px;
  line-height: 1;
  color: var(--soft);
}

.empty-space span {
  display: block;
  margin-top: 10px;
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--soft);
}

/* ═══ 18. more ═══════════════════════════════════════════════════ */
.more-wrap {
  text-align: center;
  margin-top: 15px;
}

.more-btn {
  font-family: var(--fh);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--panel);
  border: 1.5px solid rgba(66, 68, 244,.4);
  border-radius: 6px;
  padding: 10px 22px;
}

.more-btn:active { transform: scale(.97); }

/* ═══ 19. footer — the coiled hose rack ══════════════════════════ */
.foot {
  position: relative;
  margin-top: 44px;
  padding: 30px 0 30px;
  text-align: center;
  background: linear-gradient(180deg, #12122B, #0C0C1D);
}

/* the drying rack of coiled hose above the step */
.s113-hose {
  position: relative;
  height: 34px;
  margin-bottom: 12px;
  overflow: hidden;
}

/* the rack rail the coils hang from */
.s113-hose::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}

/* each coiled hose roll */
.s113-hose i {
  position: absolute;
  top: 4px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      #0C0C1D 0 3px,
      transparent 3px 5px,
      rgba(217, 58, 37,.95) 5px 11px,
      rgba(143, 31, 18,.95) 11px 14px,
      rgba(217, 58, 37,.95) 14px 20px,
      rgba(143, 31, 18,.95) 20px 23px,
      rgba(217, 58, 37,.8) 23px 28px,
      rgba(143, 31, 18,.6) 28px 31px,
      transparent 31px);
}

.s113-hose i:nth-child(1) { left: -6%; }

.s113-hose i:nth-child(2) { left: 18%; top: 8px; }

.s113-hose i:nth-child(3) { left: 41%; top: 2px; }

.s113-hose i:nth-child(4) { left: 63%; top: 9px; }

.s113-hose i:nth-child(5) { right: -6%; }

.foot-name {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text);
}

.foot-links {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 12px;
}

.foot-links a {
  display: inline;
  font-size: 12.5px;
  color: var(--soft);
  text-decoration: underline;
}

.foot-fine {
  margin-top: 12px;
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--soft);
  opacity: .75;
}

/* ═══ 20. back-to-top — the alarm button ═════════════════════════ */
.totop-btn {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 60;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 700;
  color: #FBF2E8;
  background: radial-gradient(circle at 40% 30%, #FF8A6E, var(--hose));
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 12px rgba(255, 90, 60,.35);
}

/* ═══ 21. responsive ═════════════════════════════════════════════ */
@media (max-width: 480px) {
  .sec { padding: 13px 12px 15px; }

  .hv11-art { width: 126px; height: 126px; }

  .hv11-nm { font-size: 19px; }

  .hv11-house { margin-bottom: 8px; }

  .s113-dispatch { padding-left: 24px; }

  .s113-rack { gap: 14px 10px; }

  .s113-rk-art img { width: 70px; height: 70px; }

  .s113-truck { width: 92px; }

  .s113-tally { gap: 8px; }

  .s113-bells { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .s113-medal img { width: 40px; height: 40px; }

  .s113-log-rings { left: 22px; right: 22px; }
}

@media (max-width: 375px) {
  .wrap { padding: 0 14px; }

  .hdr-name { font-size: 16px; }

  .s113-lamps { gap: 22px; }

  .s113-zones { gap: 10px 8px; }

  .s113-zone { gap: 7px; padding: 10px 8px 9px; }

  .s113-rk-tag em { font-size: 8px; }

  .s113-entry { gap: 8px; }

  .s113-dsp { gap: 8px; }

  .s113-dsp img { width: 42px; height: 42px; }

  .s113-step { gap: 9px; }

  .s113-step-disc { width: 40px; height: 40px; }

  .s113-award-ribbon { gap: 16px; }

  .s113-strip-nm { font-size: 16px; }
}