/* Page 74 · TRAINING. Page chrome + the hub screens = 72_base.css (+ the room / question parts of 72_pf.css); this file adds
   the page's own chrome (t74-) and the in-fight game parts drawn from the real training stills (the yard: sky, grass, earth,
   the touch buttons, the coach's bubble, the yellow prompt tags, the cream comic pages). Screens are 998 x 460 game units. */
.dT { --dc: #FF5A7A; } .dD { --dc: #FF4FA3; } .dE { --dc: #7CFFA3; }
.t74-quote span { white-space: normal; }
.t74-lead { color: var(--cream-2); font-size: 16px; margin: 16px 0 0; max-width: 940px; }
.t74-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.t74-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; }
.t74-rules span.y { background: var(--yellow); color: var(--ink); }

/* jump cards to the approaches */
.t74-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 22px 0 4px; }
.t74-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; }
.t74-nav a:hover { transform: translateY(-2px); }
.t74-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); }
.t74-nav .t { font: 400 15.5px/1.05 var(--f-display); color: #fff; letter-spacing: 0.02em; }
.t74-nav .t small { display: block; font: 600 11.5px/1.25 var(--f-body); color: var(--cream-3); margin-top: 3px; letter-spacing: 0; }
.t74-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) */
.t74-today .p70-today__count b { color: var(--hot); }
.t74-today .p70-trow > b { width: auto; }

/* a step: phone + caption + the red pins' legend */
.t74-step .p70-step__cap { align-items: flex-start; }
.t74-step .p70-step__cap i { align-self: flex-start; margin-top: 1px; }
.t74-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; }
.t74-later .p70-step__cap i { background: #fff; }
.t74-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); }
.t74-pins { list-style: none; margin: 10px 2px 0; padding: 0; display: grid; gap: 6px; }
.t74-pins li { display: grid; grid-template-columns: 26px 1fr; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--cream-2); }
.t74-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); }
.t74-pins li b { color: #fff; font-weight: 700; }
.t74-pins code { font-size: 0.8em; }

/* findings list */
.t74-find { margin-top: 22px; border: 3px solid var(--ink); border-radius: 16px; background: var(--panel); box-shadow: 3px 6px 0 var(--ink); }
.t74-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; }
.t74-find summary::-webkit-details-marker { display: none; }
.t74-find summary::after { content: "+"; margin-left: auto; font-size: 24px; color: var(--yellow); }
.t74-find[open] summary::after { content: "\2212"; }
.t74-find summary small { font: 600 12.5px/1.2 var(--f-body); color: var(--cream-3); letter-spacing: 0; }
.t74-find ol { margin: 0; padding: 0 16px 16px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; counter-reset: f; }
.t74-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); }
.t74-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; }
.t74-find li b { display: block; font: 400 15.5px/1.2 var(--f-display); letter-spacing: 0.02em; color: #fff; margin-bottom: 3px; }
.t74-find li code { font-size: 0.78em; }

/* an approach's facts */
.t74-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; } }
.t74-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; }
.t74-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%); }
.t74-box h4 { margin: 0 0 8px; font: 400 15px/1 var(--f-display); letter-spacing: 0.06em; color: var(--dc); }
.t74-f60 ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.t74-f60 li { display: grid; grid-template-columns: 50px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--cream-2); }
.t74-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; }
.t74-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.t74-fgrid .t74-box p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--cream-2); }
.t74-big { display: block; font: 400 34px/0.95 var(--f-display); color: #fff; text-shadow: 0 3px 0 var(--ink); }
.t74-big + span { display: block; font-size: 13px; color: var(--cream-3); margin-top: 5px; line-height: 1.35; }
.t74-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.t74-chips .p70-chip { font-size: 12px; }
.t74-chips .p70-chip.n { background: var(--yellow); color: var(--ink); }
.t74-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); }
.t74-chips .ar { color: var(--cream-3); font: 400 13px/1 var(--f-display); }
.t74-chips .sep { flex-basis: 100%; font: 600 11.5px/1.2 var(--f-body); color: var(--cream-3); margin: 3px 0 0; }
.t74-pc { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: stretch; }
.t74-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; }
.t74-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; }
.t74-pc .pro { background: #1D3B2C; } .t74-pc .pro b { background: var(--mint); color: var(--ink); }
.t74-pc .con { background: #3A1C2C; } .t74-pc .con b { background: #FFB3C2; color: var(--ink); }
.t74-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); }
.t74-pc .pick.on { background: var(--yellow); color: var(--ink); }
.t74-pc .pick em { display: block; font-style: normal; font-size: 26px; line-height: 1; }

/* our pick */
.t74-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); }
.t74-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); }
.t74-pickbox > p { margin: 0 0 14px; color: var(--cream-2); max-width: 900px; }
.t74-chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; }
.t74-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; }
.t74-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; }
.t74-chain small { display: block; font: 400 12px/1 var(--f-display); letter-spacing: 0.06em; color: var(--yellow); margin-bottom: 5px; }
.t74-chain b { display: block; font: 400 18px/1.1 var(--f-display); color: #fff; margin-bottom: 4px; }
.t74-chain span { font-size: 13px; line-height: 1.4; color: var(--cream-2); display: block; }
.t74-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 */
.t74-table th.dT { color: #FF8A9E; } .t74-table th.dD { color: #FF8AC6; } .t74-table th.dE { color: var(--mint); }
.t74-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; }
.t74-table td.td { background: rgba(232, 57, 74, 0.08); }

/* questions: multi-pick hint */
.t74-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) { .t74-nav { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px) {
  .t74-facts { grid-template-columns: 1fr; }
  .t74-find ol { grid-template-columns: 1fr; }
  .t74-chain { grid-template-columns: 1fr 1fr; }
  .t74-chain > div:nth-child(2)::after { display: none; }
}
@media (max-width: 640px) {
  .t74-nav { grid-template-columns: 1fr 1fr; gap: 8px; }
  .t74-nav a { padding: 8px 9px; }
  .t74-nav .t { font-size: 14px; }
  .t74-fgrid { grid-template-columns: 1fr; }
  .t74-pc { grid-template-columns: 1fr; }
  .t74-chain { grid-template-columns: 1fr; }
  .t74-chain > div::after { display: none; }
  .t74-pins li { font-size: 13px; }
  .t74-f60 li { grid-template-columns: 46px 1fr; font-size: 13.5px; }
}

/* =====================================================================================================================
   GAME PARTS (998 x 460 units)
   ===================================================================================================================== */
/* backgrounds: the yard (the real training stills: day sky, soft hills, grass, earth), a night arena (the real maps run
   85-100 % night: the kill-cam still's moon + dark), the hub (72_base's g-hub) */
.t74-yard { background: linear-gradient(180deg, #8FD0EE 0%, #B9E3F4 38%, #E4F5FB 66%, #E4F5FB 100%); }
.t74-night { background: radial-gradient(28% 46% at 64% 40%, #C59A55 0, #B5884A 62%, rgba(181, 136, 74, 0) 63%), linear-gradient(180deg, #2B1B2B, #24161F 60%, #170E14); }
.t74-dim { position: absolute; inset: 0; background: rgba(20, 14, 30, 0.62); z-index: 4; }

/* the touch buttons (positions from the iPhone 16 training still) */
.t74-b { position: absolute; border-radius: 50%; border: 4px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), inset 0 4px 0 rgba(255, 255, 255, 0.28); z-index: 5; }
.t74-b svg { width: 46%; height: 46%; }
.t74-b span { font-size: 13px; line-height: 1; margin-top: 2px; paint-order: stroke fill; -webkit-text-stroke: 3px var(--ink); letter-spacing: 0.03em; }
.t74-b.big span { font-size: 17px; }
.t74-b.sq { border-radius: 14px; }
.t74-b.off { filter: saturate(0.25) brightness(0.8); opacity: 0.5; }
.t74-b.away { background: none !important; border: 3px dashed rgba(255, 255, 255, 0.7); box-shadow: none; }
.t74-stick { position: absolute; border-radius: 50%; border: 4px solid rgba(29, 27, 36, 0.55); background: rgba(255, 255, 255, 0.25); z-index: 5; }
.t74-stick i { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #E6E6EE); border: 4px solid var(--ink); }
.t74-stick.off { opacity: 0.45; }
.t74-ring { position: absolute; border-radius: 50%; border: 7px solid var(--yellow); box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px var(--ink), 0 0 30px 8px rgba(255, 210, 63, 0.55); z-index: 6; pointer-events: none; }
.t74-ring.sq { border-radius: 20px; }
.t74-cap { position: absolute; z-index: 7; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; padding: 7px 12px 5px; font-size: 19px; line-height: 1; white-space: nowrap; box-shadow: 3px 4px 0 var(--ink); letter-spacing: 0.03em; }
.t74-arrow { position: absolute; z-index: 7; width: 40px; height: 26px; }
.t74-pause { position: absolute; left: 88px; top: 14px; width: 54px; height: 54px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #4A4562, #2C2840); box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center; z-index: 5; }
.t74-pause::before { content: ""; width: 20px; height: 22px; border-left: 7px solid #fff; border-right: 7px solid #fff; box-sizing: border-box; }

/* training HUD parts (the yard stills) */
.t74-part { position: absolute; left: 150px; top: 22px; height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 6px; background: #1D1B24; border-radius: 4px; font: 800 14px/1 var(--f-body); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.75); z-index: 5; }
.t74-part b { font: 400 20px/1 var(--f-display); color: #fff; letter-spacing: 0.02em; }
.t74-track { position: absolute; top: 14px; height: 46px; display: flex; align-items: center; gap: 4px; padding: 0 8px; background: #FFF6E0; border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); z-index: 5; }
.t74-track span { display: flex; align-items: center; gap: 4px; font-size: 15px; color: rgba(29, 27, 36, 0.62); padding: 4px 6px 3px; border-radius: 6px; white-space: nowrap; }
.t74-track span i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(29, 27, 36, 0.55); display: grid; place-items: center; font-size: 13px; }
.t74-track span.ok i { background: #2DC768; border-color: var(--ink); color: #fff; font-size: 14px; }
.t74-track span.on { background: var(--yellow); color: var(--ink); border: 2.5px solid var(--ink); }
.t74-track span.on i { border-color: var(--ink); }
.t74-skip { position: absolute; right: 90px; top: 18px; height: 44px; padding: 0 16px; display: grid; place-items: center; background: #FFF6E0; color: var(--ink); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 3px 4px 0 var(--ink); font-size: 17px; letter-spacing: 0.03em; z-index: 5; white-space: nowrap; }
.t74-por { position: absolute; width: 64px; height: 64px; background: #2DC768; border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); overflow: hidden; z-index: 5; }
.t74-bub { position: absolute; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; padding: 9px 14px 8px; font-size: 16px; line-height: 1.18; box-shadow: 3px 4px 0 var(--ink); z-index: 5; letter-spacing: 0.02em; }
.t74-bub::before { content: ""; position: absolute; left: -15px; top: 16px; border: 9px solid transparent; border-right: 14px solid var(--ink); border-left: 0; }
.t74-bub::after { content: ""; position: absolute; left: -9px; top: 19px; border: 6px solid transparent; border-right: 10px solid #fff; border-left: 0; }
.t74-bub.nt::before, .t74-bub.nt::after { display: none; }
.t74-bub em { font-style: normal; color: #F0388E; }
.t74-bub b { color: #C98A00; font-weight: 400; }
.t74-cnt { position: absolute; z-index: 5; background: var(--ink); color: var(--yellow); border-radius: 8px; padding: 5px 9px 3px; font-size: 20px; line-height: 1; }
.t74-tag { position: absolute; z-index: 5; font-size: 14px; color: var(--yellow); paint-order: stroke fill; -webkit-text-stroke: 3px var(--ink); white-space: nowrap; letter-spacing: 0.04em; }
.t74-hp { position: absolute; z-index: 5; height: 14px; border-radius: 99px; background: #1D1B24; border: 2px solid var(--ink); overflow: hidden; }
.t74-hp i { position: absolute; left: 2px; top: 2px; bottom: 2px; border-radius: 99px; background: linear-gradient(180deg, #FF7A8A, #E8394A); }
.t74-hp.g i { background: linear-gradient(180deg, #8CF0A8, #2DC768); }
.t74-pow { position: absolute; z-index: 6; font-size: 40px; line-height: 1; color: var(--yellow); paint-order: stroke fill; -webkit-text-stroke: 7px var(--ink); text-shadow: 0 4px 0 var(--ink); transform: rotate(-8deg); white-space: nowrap; }
.t74-pow.g { color: #59F08A; }
.t74-pow.w { color: #fff; }
.t74-ban { position: absolute; z-index: 6; text-align: center; transform: rotate(-3deg); }
.t74-ban b { display: inline-block; font-weight: 400; font-size: 44px; line-height: 1; padding: 8px 20px 6px; background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); box-shadow: 4px 6px 0 var(--ink); }
.t74-ban span { display: block; margin-top: 8px; font-size: 18px; color: #fff; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); letter-spacing: 0.05em; }
.t74-slow { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(60% 70% at 50% 50%, transparent 55%, rgba(20, 30, 60, 0.55)), repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, 0.05) 46px 48px); }
.t74-slowtag { position: absolute; z-index: 6; font-size: 15px; letter-spacing: 0.1em; padding: 5px 10px 3px; border-radius: 8px; border: 3px solid var(--ink); background: #3FD8F5; color: var(--ink); }
.t74-bang { position: absolute; z-index: 6; width: 40px; height: 48px; border-radius: 10px; background: var(--yellow); border: 4px solid var(--ink); display: grid; place-items: center; font-size: 34px; color: var(--ink); transform: rotate(8deg); box-shadow: 0 4px 0 var(--ink); }

/* the match HUD (kill-cam still: pause, the two pills, ROUND · MAP) */
.t74-pills { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; }
.t74-pills span { height: 42px; padding: 0 14px 0 6px; display: flex; align-items: center; gap: 8px; border-radius: 99px; border: 3px solid var(--ink); background: linear-gradient(180deg, #4A4562, #2C2840); font-size: 17px; }
.t74-pills span i { font-style: normal; height: 28px; padding: 0 10px; border-radius: 99px; display: grid; place-items: center; font-size: 15px; color: var(--ink); }
.t74-pills .y i { background: var(--yellow); }
.t74-pills .r i { background: #FF8A9A; }
.t74-pills em { width: 14px; height: 20px; border-radius: 4px; background: #4AA3FF; border: 2px solid var(--ink); }
.t74-pills .r em { background: #FF5A7A; }
.t74-pills em.x { background: rgba(255, 255, 255, 0.18); }
.t74-round { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 5px 14px 3px; border-radius: 10px; background: rgba(20, 14, 26, 0.7); font-size: 16px; letter-spacing: 0.04em; white-space: nowrap; }

/* comic pages (the cream halftone pages of the training's Ask / Offer / Finish) */
.t74-page { position: absolute; z-index: 6; background-color: #FFF6E0; background-image: radial-gradient(rgba(29, 27, 36, 0.09) 1.3px, transparent 1.7px); background-size: 9px 9px; border: 4px solid var(--ink); box-shadow: 6px 8px 0 var(--ink); color: var(--ink); }
.t74-ttl { position: absolute; z-index: 7; background: var(--yellow); color: var(--ink); border: 3.5px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); padding: 8px 16px 6px; font-size: 25px; line-height: 1; transform: rotate(-2deg); white-space: nowrap; }
.t74-sticker { position: absolute; z-index: 7; display: grid; place-items: center; background: #FFF6E0; color: var(--ink); border: 3.5px solid var(--ink); border-radius: 10px; box-shadow: 4px 5px 0 var(--ink); font-size: 21px; letter-spacing: 0.03em; white-space: nowrap; }
.t74-sticker.y { background: linear-gradient(180deg, #FFEB8A, #FFD23F 50%, #F4AE00); }
.t74-sticker.g { background: linear-gradient(180deg, #7FE8A0, #2DC768 50%, #13A04A); color: #fff; }
.t74-sticker.g span, .t74-sticker.dk span { paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
.t74-sticker.dk { background: linear-gradient(180deg, #4A4562, #2C2840); color: #fff; }
.t74-burst { position: absolute; z-index: 7; }
.t74-burst::before, .t74-burst::after { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0%, 59% 17%, 77% 6%, 76% 26%, 97% 22%, 86% 40%, 100% 52%, 84% 62%, 94% 80%, 74% 78%, 70% 98%, 55% 85%, 42% 100%, 34% 82%, 14% 91%, 18% 72%, 0% 64%, 15% 50%, 3% 33%, 23% 31%, 20% 10%, 39% 18%); }
.t74-burst::before { background: var(--ink); transform: translate(4px, 6px); }
.t74-burst::after { background: var(--ink); }
.t74-burst i { position: absolute; inset: 5px; z-index: 1; clip-path: polygon(50% 0%, 59% 17%, 77% 6%, 76% 26%, 97% 22%, 86% 40%, 100% 52%, 84% 62%, 94% 80%, 74% 78%, 70% 98%, 55% 85%, 42% 100%, 34% 82%, 14% 91%, 18% 72%, 0% 64%, 15% 50%, 3% 33%, 23% 31%, 20% 10%, 39% 18%); background: linear-gradient(180deg, #FFEB8A, #FFD23F 55%, #F4AE00); }
.t74-burst b { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; font-weight: 400; font-size: 23px; line-height: 1; color: var(--ink); transform: rotate(-5deg); }
.t74-mchip { position: absolute; z-index: 7; display: flex; align-items: center; gap: 6px; padding: 6px 10px 4px; background: #fff; border: 3px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); font-size: 15px; color: var(--ink); white-space: nowrap; }
.t74-mcard { position: absolute; z-index: 7; background: #fff; border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); padding: 8px 10px; color: var(--ink); }
.t74-mcard i { display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid var(--ink); border-radius: 10px; margin-bottom: 6px; }
.t74-mcard i svg { width: 28px; height: 28px; }
.t74-mcard b { color: var(--ink); display: block; font-weight: 400; font-size: 17px; line-height: 1.05; }
.t74-mcard span { display: block; font: 800 10.5px/1.25 var(--f-body); letter-spacing: 0.05em; color: rgba(29, 27, 36, 0.62); margin-top: 3px; }
.t74-rays { position: absolute; overflow: hidden; border: 4px solid var(--ink); box-shadow: 6px 8px 0 var(--ink); z-index: 6; }
.t74-rays::before { content: ""; position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.16) 0 8deg, transparent 8deg 20deg); }
.t74-shout { position: absolute; z-index: 8; font-size: 64px; line-height: 0.95; color: #fff; paint-order: stroke fill; -webkit-text-stroke: 9px var(--ink); text-shadow: 0 5px 0 var(--ink); white-space: nowrap; transform: rotate(-4deg); }
.t74-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; }

/* the new parts each approach adds */
.t74-goal { position: absolute; z-index: 6; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 8px; background: #FFF6E0; border: 4px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); color: var(--ink); white-space: nowrap; }
.t74-goal > i { font-style: normal; font-size: 15px; background: var(--ink); color: var(--yellow); padding: 6px 8px 4px; border-radius: 6px; letter-spacing: 0.05em; }
.t74-goal > b { color: var(--ink); font-weight: 400; font-size: 30px; line-height: 1; }
.t74-goal > span { display: flex; gap: 3px; }
.t74-goal > span svg { width: 28px; height: 28px; }
.t74-timer { position: absolute; z-index: 6; left: 50%; top: 76px; transform: translateX(-50%); width: 360px; height: 18px; border-radius: 99px; background: #1D1B24; border: 3px solid var(--ink); overflow: hidden; }
.t74-timer i { position: absolute; left: 2px; top: 2px; bottom: 2px; border-radius: 99px; background: linear-gradient(90deg, #59F08A, #FFD23F); }
.t74-timer + .t74-tsec { position: absolute; z-index: 6; top: 72px; font-size: 20px; color: #fff; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
.t74-check { position: absolute; z-index: 6; background: rgba(255, 246, 224, 0.96); border: 3.5px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); padding: 8px 12px 9px; color: var(--ink); }
.t74-check small { display: block; font-size: 13px; letter-spacing: 0.08em; color: rgba(29, 27, 36, 0.6); margin-bottom: 5px; }
.t74-check div { display: flex; align-items: center; gap: 7px; font-size: 19px; line-height: 1.25; }
.t74-check div i { width: 22px; height: 22px; border-radius: 6px; border: 3px solid var(--ink); display: grid; place-items: center; font-style: normal; font-size: 14px; background: #fff; }
.t74-check div.ok { color: rgba(29, 27, 36, 0.5); text-decoration: line-through; text-decoration-thickness: 3px; }
.t74-check div.ok i { background: #2DC768; color: #fff; }
.t74-tip { position: absolute; z-index: 8; display: flex; gap: 12px; padding: 10px 12px 10px 10px; background: #FFF6E0; border: 4px solid var(--ink); box-shadow: 5px 7px 0 var(--ink); color: var(--ink); }
.t74-tip .clip { position: relative; width: 150px; height: 96px; flex: none; border: 3px solid var(--ink); overflow: hidden; }
.t74-tip .txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.t74-tip .txt small { font-size: 13px; letter-spacing: 0.1em; color: #fff; background: #F0388E; border: 2.5px solid var(--ink); align-self: flex-start; padding: 3px 7px 2px; border-radius: 6px; margin-bottom: 6px; }
.t74-tip .txt b { color: var(--ink); font-weight: 400; font-size: 30px; line-height: 1; }
.t74-tip .txt span { font-size: 17px; line-height: 1.15; margin-top: 5px; color: rgba(29, 27, 36, 0.8); }
.t74-tip .ok { align-self: flex-end; margin-left: 4px; padding: 8px 12px 6px; background: linear-gradient(180deg, #7FE8A0, #2DC768); border: 3px solid var(--ink); border-radius: 10px; font-size: 17px; color: #fff; paint-order: stroke fill; -webkit-text-stroke: 3px var(--ink); white-space: nowrap; box-shadow: 0 3px 0 var(--ink); }
.t74-tip .bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 4px; border-radius: 99px; background: rgba(29, 27, 36, 0.15); overflow: hidden; }
.t74-tip .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; background: #F0388E; }
.t74-clip { overflow: hidden; border: 3px solid var(--ink); }
.t74-clip .pl { position: absolute; right: 6px; bottom: 6px; z-index: 3; font: 400 13px/1 var(--f-display); background: rgba(29, 27, 36, 0.8); color: #fff; padding: 4px 6px 2px; border-radius: 6px; letter-spacing: 0.04em; }
.t74-sign { position: absolute; z-index: 3; text-align: center; }
.t74-sign b { display: block; font-weight: 400; font-size: 15px; line-height: 1; padding: 6px 9px 4px; background: #C98A4B; color: #FFF6E0; border: 3px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); white-space: nowrap; letter-spacing: 0.03em; }
.t74-sign i { display: block; width: 6px; height: 34px; margin: 0 auto; background: #8B5A2B; border: 2px solid var(--ink); border-top: 0; }
.t74-sign.ok b { background: #2DC768; color: #fff; }
.t74-sign.on b { background: var(--yellow); color: var(--ink); }
.t74-exit { position: absolute; z-index: 6; right: 40px; top: 14px; height: 56px; padding: 0 18px; display: flex; align-items: center; gap: 8px; border-radius: 14px; border: 4px solid var(--ink); background: linear-gradient(180deg, #FFEB8A, #FFD23F 45%, #F4AE00); box-shadow: 0 5px 0 var(--ink), 0 0 26px 4px rgba(255, 196, 40, 0.4); color: var(--ink); font-size: 24px; white-space: nowrap; }
.t74-exit em { font-style: normal; font-size: 28px; }
.t74-stations { position: absolute; z-index: 6; left: 156px; top: 16px; display: flex; gap: 5px; padding: 5px; background: rgba(29, 27, 36, 0.78); border: 3px solid var(--ink); border-radius: 12px; }
.t74-stations span { width: 38px; height: 38px; border-radius: 9px; border: 2.5px solid rgba(255, 255, 255, 0.25); display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); position: relative; }
.t74-stations span svg { width: 24px; height: 24px; }
.t74-stations span.ok { background: #2DC768; border-color: var(--ink); }
.t74-stations span.on { background: var(--yellow); border-color: var(--ink); }
.t74-stations span.ok::after { content: "\2713"; position: absolute; right: -5px; bottom: -6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #13A04A; border: 2px solid var(--ink); font: 400 11px/12px var(--f-display); text-align: center; }
.t74-dtile { position: absolute; z-index: 3; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg, #3E3866, #2A2545); box-shadow: 0 4px 0 var(--ink); overflow: hidden; }
.t74-dtile b { position: absolute; left: 10px; font-weight: 400; font-size: 18px; line-height: 1; white-space: nowrap; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); }
.t74-dtile small { position: absolute; left: 10px; font: 800 10.5px/1 var(--f-body); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.65); white-space: nowrap; }
.t74-dtile .st { position: absolute; display: flex; gap: 2px; }
.t74-dtile .st svg { width: 20px; height: 20px; }
.t74-dtile .ic { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border-radius: 10px; border: 3px solid var(--ink); display: grid; place-items: center; }
.t74-dtile .ic svg { width: 26px; height: 26px; }
.t74-dtile.lock { background: rgba(0, 0, 0, 0.28); border-style: dashed; border-color: rgba(255, 255, 255, 0.25); box-shadow: none; }
.t74-dtile.lock b { color: rgba(255, 255, 255, 0.5); -webkit-text-stroke: 0; }
.t74-dtile.lock .ic { filter: grayscale(1); opacity: 0.5; }
.t74-new { position: absolute; z-index: 4; font-size: 12px; padding: 3px 6px 2px; border-radius: 6px; border: 2.5px solid var(--ink); background: #F0388E; color: #fff; transform: rotate(6deg); letter-spacing: 0.06em; }
.t74-toast { position: absolute; z-index: 8; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border: 4px solid var(--ink); border-radius: 16px; background: linear-gradient(180deg, #353052, #23203A); box-shadow: 0 6px 0 var(--ink), 0 0 30px 6px rgba(240, 56, 142, 0.35); }
.t74-toast .ic { width: 52px; height: 52px; border-radius: 12px; border: 3px solid var(--ink); display: grid; place-items: center; background: var(--orange); flex: none; }
.t74-toast .ic svg { width: 34px; height: 34px; }
.t74-toast small { display: block; font-size: 13px; letter-spacing: 0.1em; color: #F7A8CF; }
.t74-toast b { display: block; font-weight: 400; font-size: 24px; line-height: 1.05; }
.t74-toast .d { display: block; font: 800 12px/1.2 var(--f-body); letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.7); }
.t74-menu { position: absolute; z-index: 8; border-radius: 18px; border: 4px solid var(--ink); background: linear-gradient(180deg, #353052, #201C35); box-shadow: 0 7px 0 var(--ink); }
.t74-mrow { position: absolute; height: 52px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(180deg, #3E3866, #2A2545); display: flex; align-items: center; padding: 0 14px; font-size: 22px; box-shadow: 0 3px 0 var(--ink); }
.t74-mrow.y { background: linear-gradient(180deg, #FFEB8A, #FFD23F 45%, #F4AE00); color: var(--ink); }
.t74-sticky { position: absolute; z-index: 7; font-size: 15px; padding: 5px 9px 3px; border-radius: 8px; border: 3px solid var(--ink); background: #F0388E; color: #fff; transform: rotate(-7deg); white-space: nowrap; box-shadow: 0 3px 0 var(--ink); letter-spacing: 0.04em; }
.t74-move { position: absolute; z-index: 3; border-radius: 12px; border: 3px solid var(--ink); background: #15122A; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.t74-move svg { width: 30px; height: 30px; }
.t74-move b { font-weight: 400; font-size: 14px; color: rgba(255, 255, 255, 0.55); line-height: 1; white-space: nowrap; }
.t74-move.ok { background: linear-gradient(180deg, #7FE8A0, #2DC768); }
.t74-move.ok b { color: var(--ink); }
.t74-move.ok::after { content: "\2713"; position: absolute; right: -6px; top: -7px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #13A04A; border: 2.5px solid var(--ink); font: 400 13px/16px var(--f-display); text-align: center; }
.t74-move.q { border-style: dashed; border-color: rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.25); }
.t74-move.q b { color: rgba(255, 255, 255, 0.35); }
.t74-move.q em { font-style: normal; font-size: 30px; color: rgba(255, 255, 255, 0.3); line-height: 1; }