/* Page 75 · VISUAL CHOICES (item 1: GLOAT UI). Page chrome + hub screens = 72_base.css (+ 72_pf.css for the questions);
   the chrome below is page 74's (copied, prefix t75-); then the gloat parts drawn over REAL kill-film frames (img/75/*.jpg).
   Screens: 998 x 460 units (iPhone 16 landscape) or 998 x 561 (16:9, the wide shape). */
.dT { --dc: #FF5A7A; } .dD { --dc: #FF4FA3; } .dE { --dc: #7CFFA3; }
.t75-quote span { white-space: normal; }
.t75-lead { color: var(--cream-2); font-size: 16px; margin: 16px 0 0; max-width: 940px; }
.t75-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.t75-rules span { font: 400 13.5px/1.2 var(--f-display); letter-spacing: 0.04em; padding: 8px 11px 7px; border-radius: 10px; border: 2.5px solid var(--ink); box-shadow: 2px 4px 0 var(--ink); background: var(--panel-2); color: #fff; }
.t75-rules span.y { background: var(--yellow); color: var(--ink); }

/* jump cards to the approaches */
.t75-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 22px 0 4px; }
.t75-nav a { text-decoration: none; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 5px 0 var(--ink); padding: 10px 11px; display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; background: linear-gradient(180deg, #2E2850, #1E1A33); position: relative; }
.t75-nav a:hover { transform: translateY(-2px); }
.t75-nav .L { font: 400 24px/1 var(--f-display); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; border: 3px solid var(--ink); color: var(--ink); background: var(--dc); }
.t75-nav .t { font: 400 15.5px/1.05 var(--f-display); color: #fff; letter-spacing: 0.02em; }
.t75-nav .t small { display: block; font: 600 11.5px/1.25 var(--f-body); color: var(--cream-3); margin-top: 3px; letter-spacing: 0; }
.t75-nav .st { position: absolute; right: -6px; top: -9px; font: 400 11px/1 var(--f-display); background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 7px; padding: 3px 5px 2px; transform: rotate(4deg); }

/* TODAY numbers (p70-today) */
.t75-today .p70-today__count b { color: var(--hot); }
.t75-today .p70-trow > b { width: auto; }

/* a step: phone + caption + the red pins' legend */
.t75-step .p70-step__cap { align-items: flex-start; }
.t75-step .p70-step__cap i { align-self: flex-start; margin-top: 1px; }
.t75-time { font: 400 12.5px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink); background: var(--dc); border: 2px solid var(--ink); border-radius: 7px; padding: 3px 6px 2px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.t75-later .p70-step__cap i { background: #fff; }
.t75-later .p70-dev { box-shadow: 0 0 0 2px #000, 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 0 5px rgba(255, 255, 255, 0.12), inset 0 0 0 1.5px rgba(255, 255, 255, 0.16); }
.t75-pins { list-style: none; margin: 10px 2px 0; padding: 0; display: grid; gap: 6px; }
.t75-pins li { display: grid; grid-template-columns: 26px 1fr; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--cream-2); }
.t75-pins li > i { font: 400 14px/1 var(--f-display); font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #E8394A; color: #fff; border: 2.5px solid var(--ink); }
.t75-pins li b { color: #fff; font-weight: 700; }
.t75-pins code { font-size: 0.8em; }

/* findings list */
.t75-find { margin-top: 22px; border: 3px solid var(--ink); border-radius: 16px; background: var(--panel); box-shadow: 3px 6px 0 var(--ink); }
.t75-find summary { cursor: pointer; list-style: none; padding: 13px 16px; font: 400 18px/1.1 var(--f-display); letter-spacing: 0.03em; color: #fff; display: flex; align-items: center; gap: 10px; }
.t75-find summary::-webkit-details-marker { display: none; }
.t75-find summary::after { content: "+"; margin-left: auto; font-size: 24px; color: var(--yellow); }
.t75-find[open] summary::after { content: "\2212"; }
.t75-find summary small { font: 600 12.5px/1.2 var(--f-body); color: var(--cream-3); letter-spacing: 0; }
.t75-find ol { margin: 0; padding: 0 16px 16px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; counter-reset: f; }
.t75-find li { counter-increment: f; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--panel-2); padding: 10px 12px 10px 46px; position: relative; font-size: 13.5px; line-height: 1.45; color: var(--cream-2); }
.t75-find li::before { content: counter(f); position: absolute; left: 10px; top: 10px; width: 26px; height: 26px; border-radius: 8px; background: #E8394A; color: #fff; border: 2px solid var(--ink); font: 400 14px/1 var(--f-display); display: grid; place-items: center; }
.t75-find li b { display: block; font: 400 15.5px/1.2 var(--f-display); letter-spacing: 0.02em; color: #fff; margin-bottom: 3px; }
.t75-find li code { font-size: 0.78em; }

/* an approach's facts */
.t75-facts { margin-top: 22px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; align-items: start; }
@media (min-width: 641px) { .p70-dir .p70-dirhead .big { grid-column: 3; grid-row: 1 / span 2; } }
.t75-hstar { font: 400 15px/1 var(--f-display); letter-spacing: 0.05em; background: var(--yellow); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 8px; padding: 4px 7px 3px; vertical-align: 10px; margin-left: 8px; text-shadow: none; white-space: nowrap; }
.t75-box { border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 6px 0 var(--ink); padding: 13px 15px; background: linear-gradient(180deg, #2E2850, #1E1A33 70%); }
.t75-box h4 { margin: 0 0 8px; font: 400 15px/1 var(--f-display); letter-spacing: 0.06em; color: var(--dc); }
.t75-f60 ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.t75-f60 li { display: grid; grid-template-columns: 50px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--cream-2); }
.t75-f60 li > b { font: 400 14px/1 var(--f-display); color: var(--ink); background: var(--dc); border: 2px solid var(--ink); border-radius: 7px; padding: 4px 0 3px; text-align: center; align-self: start; letter-spacing: 0.02em; }
.t75-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.t75-fgrid .t75-box p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--cream-2); }
.t75-big { display: block; font: 400 34px/0.95 var(--f-display); color: #fff; text-shadow: 0 3px 0 var(--ink); }
.t75-big + span { display: block; font-size: 13px; color: var(--cream-3); margin-top: 5px; line-height: 1.35; }
.t75-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.t75-chips .p70-chip { font-size: 12px; }
.t75-chips .p70-chip.n { background: var(--yellow); color: var(--ink); }
.t75-chips .p70-chip.l { background: rgba(255, 255, 255, 0.06); color: var(--cream-3); border-style: dashed; border-color: rgba(255, 255, 255, 0.22); }
.t75-chips .ar { color: var(--cream-3); font: 400 13px/1 var(--f-display); }
.t75-chips .sep { flex-basis: 100%; font: 600 11.5px/1.2 var(--f-body); color: var(--cream-3); margin: 3px 0 0; }
.t75-pc { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: stretch; }
.t75-pc p { margin: 0; border: 3px solid var(--ink); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; color: var(--cream); box-shadow: 2px 4px 0 var(--ink); display: flex; gap: 10px; align-items: center; }
.t75-pc p b { font: 400 14px/1 var(--f-display); letter-spacing: 0.05em; border: 2px solid var(--ink); border-radius: 7px; padding: 4px 6px 3px; flex: none; }
.t75-pc .pro { background: #1D3B2C; } .t75-pc .pro b { background: var(--mint); color: var(--ink); }
.t75-pc .con { background: #3A1C2C; } .t75-pc .con b { background: #FFB3C2; color: var(--ink); }
.t75-pc .pick { display: grid; place-items: center; text-align: center; min-width: 120px; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 12px; box-shadow: 2px 4px 0 var(--ink); background: var(--panel-2); font: 400 14px/1.1 var(--f-display); letter-spacing: 0.04em; color: var(--cream-3); }
.t75-pc .pick.on { background: var(--yellow); color: var(--ink); }
.t75-pc .pick em { display: block; font-style: normal; font-size: 26px; line-height: 1; }

/* our pick */
.t75-pickbox { border: 3.5px solid var(--ink); border-radius: 20px; box-shadow: 4px 8px 0 var(--ink); padding: 18px 20px; background: radial-gradient(60% 90% at 0% 0%, rgba(255, 210, 63, 0.18), transparent 70%), linear-gradient(180deg, #312A57, #1E1A33); }
.t75-pickbox h3 { margin: 0 0 6px; font: 400 clamp(24px, 3.4vw, 36px)/1.05 var(--f-display); color: var(--yellow); text-shadow: 0 3px 0 var(--ink); }
.t75-pickbox > p { margin: 0 0 14px; color: var(--cream-2); max-width: 900px; }
.t75-chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; }
.t75-chain > div { border: 3px solid var(--ink); border-radius: 14px; background: var(--panel-2); box-shadow: 2px 5px 0 var(--ink); padding: 10px 12px 11px; position: relative; }
.t75-chain > div:not(:last-child)::after { content: "\203A"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); font: 400 30px/1 var(--f-display); color: var(--yellow); text-shadow: 0 2px 0 var(--ink); z-index: 2; }
.t75-chain small { display: block; font: 400 12px/1 var(--f-display); letter-spacing: 0.06em; color: var(--yellow); margin-bottom: 5px; }
.t75-chain b { display: block; font: 400 18px/1.1 var(--f-display); color: #fff; margin-bottom: 4px; }
.t75-chain span { font-size: 13px; line-height: 1.4; color: var(--cream-2); display: block; }
.t75-chain .L { position: absolute; right: 10px; top: 9px; font: 400 13px/1 var(--f-display); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; border: 2px solid var(--ink); color: var(--ink); }

/* the compare table */
.t75-table th.dT { color: #FF8A9E; } .t75-table th.dD { color: #FF8AC6; } .t75-table th.dE { color: var(--mint); }
.t75-table thead th em { font-style: normal; font-size: 11px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; padding: 2px 4px 1px; margin-left: 4px; vertical-align: 2px; }
.t75-table td.td { background: rgba(232, 57, 74, 0.08); }

/* questions: multi-pick hint */
.t75-multi { font: 600 11.5px/1 var(--f-body); color: var(--cream-3); letter-spacing: 0.04em; margin-left: 6px; text-transform: uppercase; }

@media (max-width: 1100px) { .t75-nav { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) {
  .t75-facts { grid-template-columns: 1fr; }
  .t75-find ol { grid-template-columns: 1fr; }
  .t75-chain { grid-template-columns: 1fr 1fr; }
  .t75-chain > div:nth-child(2)::after { display: none; }
}
@media (max-width: 640px) {
  .t75-nav { grid-template-columns: 1fr 1fr; gap: 8px; }
  .t75-nav a { padding: 8px 9px; }
  .t75-nav .t { font-size: 14px; }
  .t75-fgrid { grid-template-columns: 1fr; }
  .t75-pc { grid-template-columns: 1fr; }
  .t75-chain { grid-template-columns: 1fr; }
  .t75-chain > div::after { display: none; }
  .t75-pins li { font-size: 13px; }
  .t75-f60 li { grid-template-columns: 46px 1fr; font-size: 13.5px; }
}


/* ---------------------------------------------------------------- VISUAL CHOICES header (the running list of visual questions) */
.t75-vc { border: 3.5px solid var(--ink); border-radius: 20px; box-shadow: 4px 8px 0 var(--ink); padding: 16px 18px; background: radial-gradient(60% 90% at 100% 0%, rgba(63, 234, 245, 0.14), transparent 70%), linear-gradient(180deg, #2E2850, #1E1A33); margin-top: 20px; }
.t75-vc h2 { margin: 0 0 4px; font: 400 clamp(22px, 3vw, 30px)/1 var(--f-display); color: #fff; text-shadow: 0 3px 0 var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.t75-vc h2 small { font: 600 13px/1.3 var(--f-body); color: var(--cream-3); text-shadow: none; }
.t75-vc ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.t75-vc li a, .t75-vc li > div { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-decoration: none; border: 3px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: var(--panel-2); box-shadow: 2px 4px 0 var(--ink); }
.t75-vc li > div { border-style: dashed; border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.03); box-shadow: none; }
.t75-vc .n { font: 400 20px/1 var(--f-display); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 2.5px solid var(--ink); background: var(--cyan); color: var(--ink); }
.t75-vc li > div .n { background: rgba(255, 255, 255, 0.08); color: var(--cream-3); border-color: rgba(255, 255, 255, 0.2); }
.t75-vc .t { font: 400 16px/1.1 var(--f-display); color: #fff; letter-spacing: 0.02em; }
.t75-vc .t small { display: block; font: 600 12px/1.3 var(--f-body); color: var(--cream-3); letter-spacing: 0; margin-top: 2px; }
.t75-vc .s { font: 400 11.5px/1 var(--f-display); letter-spacing: 0.06em; padding: 4px 7px 3px; border-radius: 7px; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink); white-space: nowrap; }
.t75-vc .s.done { background: var(--mint); }
.t75-vc .s.wait { background: rgba(255, 255, 255, 0.1); color: var(--cream-3); border-color: rgba(255, 255, 255, 0.2); }
.t75-item { margin-top: 30px; padding-top: 14px; border-top: 3px dashed rgba(255, 255, 255, 0.12); }
.t75-itemhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.t75-itemhead .n { font: 400 15px/1 var(--f-display); letter-spacing: 0.06em; padding: 6px 10px 5px; border-radius: 9px; border: 2.5px solid var(--ink); background: var(--cyan); color: var(--ink); box-shadow: 2px 3px 0 var(--ink); }
.t75-itemhead h2 { margin: 0; font: 400 clamp(30px, 5vw, 54px)/1 var(--f-display); color: #fff; text-shadow: 0 4px 0 var(--ink); }
.t75-itemhead h2 span { color: var(--yellow); }

/* the wide screens (16:9) */
.p70-fit.t75-w { aspect-ratio: 998 / 561; }
.t75-flow3 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.t75-facts4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.t75-facts4 .t75-box b.t75-big { font-size: 30px; }
.t75-rules4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.t75-rules4 .p70-step__cap b { font-size: 15.5px; }
.t75-rules4 .p70-dev { padding: 6px 7px; border-radius: 16px; }
.t75-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13.5px; color: var(--cream-2); align-items: center; }
.t75-legend i { display: inline-block; width: 26px; height: 16px; border-radius: 5px; vertical-align: -3px; margin-right: 6px; }
@media (max-width: 980px) { .t75-flow3 { grid-template-columns: 1fr; gap: 20px; } .t75-facts4 { grid-template-columns: 1fr 1fr; } .t75-rules4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .t75-facts4 { grid-template-columns: 1fr; } .t75-rules4 { grid-template-columns: 1fr; gap: 14px; } }

/* =====================================================================================================================
   GAME PARTS (over the real film frames)
   ===================================================================================================================== */
.t75-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.t75-skip { position: absolute; z-index: 9; width: 76px; height: 26px; border-radius: 99px; border: 2px solid rgba(255, 246, 224, 0.55); background: rgba(12, 9, 24, 0.62); display: flex; align-items: center; padding-left: 12px; gap: 4px; font-size: 14px; color: #FFF6E0; letter-spacing: 0.04em; }
.t75-skip i { font-style: normal; font-size: 15px; margin-left: 2px; }
.t75-chip { position: absolute; border-radius: 50%; border: 3px solid var(--ink); background: rgba(18, 12, 36, 0.92); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), inset 0 0 0 2px var(--rc, rgba(255, 255, 255, 0.25)); display: grid; place-items: center; z-index: 6; }
.t75-chip svg { width: 66%; height: 66%; display: block; }
.t75-chip.on { background: var(--gc); box-shadow: 0 0 0 4px var(--yellow), 0 0 0 7px var(--ink), 0 0 26px 8px rgba(255, 210, 63, 0.55); }
.t75-chip.dim { opacity: 0.3; }
.t75-chip.big { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ink); }
.t75-chip .ok { position: absolute; right: -7px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: #2DC768; border: 2.5px solid var(--ink); color: #fff; font-size: 13px; line-height: 17px; text-align: center; }
.t75-crown { position: absolute; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 38% 32%, #4A3A7A, #1E1438 70%); box-shadow: inset 0 0 0 3px #FFC21A, 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 16px 3px rgba(255, 196, 40, 0.35); display: grid; place-items: center; z-index: 7; }
.t75-crown svg { width: 62%; height: 62%; display: block; }
.t75-crown.ink { background: #1D1B24; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.4); }
.t75-ring { position: absolute; z-index: 6; pointer-events: none; overflow: visible; }
.t75-lbl { position: absolute; z-index: 8; font-size: 13px; letter-spacing: 0.08em; color: #FFE98C; white-space: nowrap; }
.t75-name { position: absolute; z-index: 8; padding: 6px 12px 4px; border-radius: 10px; border: 3px solid var(--ink); background: #FFF6E0; color: var(--ink); font-size: 18px; white-space: nowrap; box-shadow: 0 3px 0 var(--ink); line-height: 1.1; }
.t75-name small { display: block; font: 800 10.5px/1.2 var(--f-body); letter-spacing: 0.06em; color: rgba(29, 27, 36, 0.6); }
.t75-name.gold { background: linear-gradient(180deg, #FFEB8A, #FFD23F 55%, #F4AE00); }
.t75-name.dark { background: rgba(18, 12, 36, 0.9); color: #fff; border-color: var(--ink); }
.t75-name.dark small { color: rgba(255, 255, 255, 0.6); }
.t75-scrim { position: absolute; z-index: 5; pointer-events: none; }
.t75-hand { position: absolute; width: 48px; height: 48px; z-index: 10; transform: rotate(-16deg); pointer-events: none; }
.t75-plate { position: absolute; z-index: 8; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #2E2A48, #1A1630); box-shadow: 0 4px 0 var(--ink), 0 0 26px 6px rgba(255, 210, 63, 0.35); white-space: nowrap; }
.t75-plate b { font-weight: 400; font-size: 24px; color: var(--yellow); line-height: 1; }
.t75-plate small { display: block; font: 800 11px/1.2 var(--f-body); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); }
.t75-inset { position: absolute; z-index: 8; padding: 8px 12px; border-radius: 12px; border: 3px solid var(--ink); background: rgba(18, 12, 36, 0.88); box-shadow: 0 4px 0 var(--ink); font-size: 15px; color: #fff; line-height: 1.15; }
.t75-inset small { display: block; font: 800 10.5px/1.25 var(--f-body); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.65); margin-top: 3px; }
.t75-pin { position: absolute; z-index: 20; width: 40px; height: 40px; border-radius: 50%; background: #E8394A; color: #fff; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px var(--ink); display: grid; place-items: center; font-size: 22px; line-height: 1; }
.t75-mark { position: absolute; z-index: 19; border: 4px dashed #FF5A7A; border-radius: 14px; pointer-events: none; }
.t75-dimall { position: absolute; inset: 0; z-index: 4; background: rgba(10, 6, 20, 0.5); }
.t75-tag { position: absolute; z-index: 21; font-size: 13px; letter-spacing: 0.06em; padding: 4px 8px 3px; border-radius: 7px; border: 2.5px solid var(--ink); white-space: nowrap; }
.t75-zone { position: absolute; z-index: 3; border-radius: 50%; background: radial-gradient(closest-side, rgba(89, 240, 138, 0.26), rgba(89, 240, 138, 0.1) 80%, rgba(89, 240, 138, 0)); border: 3px dashed rgba(124, 255, 163, 0.7); pointer-events: none; }
.t75-keep { position: absolute; z-index: 18; border: 3px dashed #FF5A7A; background: rgba(255, 90, 122, 0.08); border-radius: 10px; pointer-events: none; }
.t75-hit { position: absolute; z-index: 18; border: 3px dashed var(--yellow); background: rgba(255, 210, 63, 0.12); border-radius: 10px; pointer-events: none; }
.t75-hit em { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font-style: normal; font-size: 12px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 6px; padding: 2px 5px 1px; white-space: nowrap; }
.t75-hit.r em { top: auto; bottom: -22px; }
.t75-tab { position: absolute; z-index: 7; border: 3px solid var(--ink); border-right: 0; border-radius: 16px 0 0 16px; background: linear-gradient(90deg, #2E2448, #1A1430); box-shadow: inset 0 0 0 2px rgba(255, 194, 26, 0.7), -3px 3px 0 rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; }
.t75-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; letter-spacing: 0.14em; color: var(--yellow); }
.t75-tab i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255, 210, 63, 0.28); }
.t75-drawer { position: absolute; z-index: 7; border: 3px solid var(--ink); border-right: 0; border-radius: 18px 0 0 18px; background: rgba(22, 16, 40, 0.92); box-shadow: -4px 4px 0 rgba(0, 0, 0, 0.5); }
.t75-row { position: absolute; z-index: 8; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 4px; border-radius: 12px; font-size: 16px; color: #fff; white-space: nowrap; }
.t75-row.on { background: rgba(255, 210, 63, 0.18); box-shadow: inset 0 0 0 2px var(--yellow); }
.t75-row .t75-chip { position: relative; z-index: 1; flex: none; }
.t75-bar { position: absolute; z-index: 7; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.t75-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #59F08A, #FFD23F); }
.t75-pillc { position: absolute; z-index: 7; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 4px; border-radius: 99px; border: 3px solid var(--ink); background: rgba(18, 12, 36, 0.9); box-shadow: inset 0 0 0 2px rgba(255, 194, 26, 0.75), 0 3px 0 rgba(0, 0, 0, 0.5); color: #fff; white-space: nowrap; }
.t75-pillc b { font-weight: 400; font-size: 17px; line-height: 1; display: block; color: #fff; }
.t75-pillc small { display: block; font: 800 10px/1.2 var(--f-body); letter-spacing: 0.08em; color: #FFE98C; }
.t75-pillc .arr { font-size: 20px; color: rgba(255, 255, 255, 0.6); padding: 0 2px; }
.t75-pillc.gold { background: linear-gradient(180deg, #FFEB8A, #FFD23F 55%, #F4AE00); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
.t75-pillc.gold b { color: var(--ink); }
.t75-pillc.gold small { color: rgba(29, 27, 36, 0.7); }
.t75-sheet { position: absolute; z-index: 5; border-radius: 18px; border: 3px solid var(--ink); background: rgba(22, 16, 40, 0.93); box-shadow: 0 5px 0 var(--ink); }