/* ==========================================================================================
   B16 round 2: the Club's scenes -- the Trophy Room, the Board's office, the Training Ground and the Facilities.
   The user (2026-09-28): the trophy room "separates you from all other rules of the UI like the colour palette, pitch
   background etc" -- so the scenes live in their own stylesheet, with their own dark, warm, cinematic palette.
   The light design system (game.css) and its guards are untouched.
   ========================================================================================== */
:root {
  --sc-ink: #f4efe6;
  --sc-ink-2: #c9bfae;
  --sc-ink-3: #8f8676;
  --sc-gold: #d9b25f;
  --sc-gold-2: #f3dc9e;
  --sc-glass: rgba(16, 14, 12, 0.62);
  --sc-glass-strong: rgba(14, 12, 10, 0.86);
  --sc-line: rgba(217, 178, 95, 0.35);
  --sc-ease: cubic-bezier(.22, 1, .36, 1);
}

.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.scene-root { position: fixed; inset: 0; z-index: 40; overflow: hidden; color: var(--sc-ink); font-family: var(--font-ui); animation: sc-fade 700ms var(--sc-ease) both; }
@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
:root[data-career-detail="trophies"] .career-page[data-page="club"], :root[data-career-detail="board"] .career-page[data-page="club"] { padding: 0; }

.sc-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 1px solid var(--sc-line);
  background: var(--sc-glass); color: var(--sc-ink); font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background 190ms, border-color 190ms, transform 130ms var(--sc-ease);
}
.sc-btn svg { width: 18px; height: 18px; }
.sc-btn:hover { background: rgba(40, 32, 22, 0.8); border-color: var(--sc-gold); }
.sc-btn:active { transform: scale(0.96); }
.sc-btn.is-gold { background: linear-gradient(180deg, #e8c77c, #b98a3c); color: #1a1208; border-color: transparent; }
.sc-btn.is-gold:hover { background: linear-gradient(180deg, #f3d898, #c9994a); }

/* --- the Trophy Room ---------------------------------------------------------------------------------------- */
.tr-room { position: fixed; inset: 0; z-index: 40; background: #07080a; color: var(--sc-ink); font-family: var(--font-ui); }
.tr-stage { position: absolute; inset: 0; transform-origin: 0 0; }
/* round 5 (the user: "50 fps at least ... no GPU"): the room is a still; the browser moves pictures, never redraws it */
.tr-room .tr-stage { opacity: 0; }
.tr-room.is-ready .tr-stage { opacity: 1; animation: tr-enter 3400ms cubic-bezier(0.16, 0.84, 0.3, 1) backwards; }
/* the Boardroom's way in (the user: "a black animation ... similar to the board room"): black first, then the room rises out of it */
.tr-veil { position: absolute; inset: 0; background: #000; pointer-events: none; opacity: 0; }
.tr-room.is-ready .tr-veil { animation: tr-veil 3000ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes tr-veil { 0% { opacity: 1; } 18% { opacity: 1; } 100% { opacity: 0; } }
/* round 7: the room comes up out of the dark as the camera drifts in from a little closer and to one side (scaled about
   the centre with a matching offset, since the stage's origin is the corner the moves are measured from) */
@keyframes tr-enter {
  from { opacity: 0; transform: translate(-6.5%, -3.5%) scale(1.13); }
  10% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
/* a sweep of warm light crosses the wall once, as the lamps come on */
.tr-sweep { position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 0%, rgba(255, 226, 170, 0.13) 45%, rgba(255, 240, 210, 0.2) 50%, rgba(255, 226, 170, 0.13) 55%, transparent 100%); }
.tr-room.is-ready .tr-sweep { animation: tr-sweep 2600ms cubic-bezier(0.4, 0, 0.2, 1) 1100ms both; }
@keyframes tr-sweep { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(320%); } }
.tr-room.is-ready .tr-back { animation: tr-drop 800ms var(--sc-ease) 2000ms backwards; }
.tr-room.is-ready .tr-hint { animation: tr-hint 900ms var(--sc-ease) 2400ms backwards; }
@keyframes tr-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes tr-hint { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translateX(-50%); } }
.tr-ghost { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 0 0; pointer-events: none; will-change: transform, opacity; }
.tr-ghost[hidden], .tr-spin[hidden] { display: none; }
.tr-spin { position: absolute; pointer-events: none; }
.tr-glow {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity 180ms ease;
  box-shadow: inset 0 0 0 1.5px rgba(242, 197, 106, 0.9), 0 0 18px 2px rgba(242, 197, 106, 0.35), inset 0 0 22px rgba(242, 197, 106, 0.22);
}
.tr-glow.is-on { opacity: 1; animation: tr-breathe 2.2s ease-in-out infinite; }
@keyframes tr-breathe { 50% { opacity: 0.7; } }
.tr-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
.tr-top { position: absolute; left: clamp(16px, 3vw, 48px); right: clamp(16px, 3vw, 48px); top: clamp(14px, 3vh, 36px); display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); pointer-events: none; }
.tr-top > * { pointer-events: auto; }
.tr-back { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 1px solid var(--sc-line); background: var(--sc-glass); color: var(--sc-ink); font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 190ms, border-color 190ms, transform 130ms; }
.tr-back svg { width: 18px; height: 18px; }
.tr-back:hover { border-color: var(--sc-gold); }
.tr-back:active { transform: scale(0.96); }
.tr-heading { display: flex; flex-direction: column; line-height: 1; }
.tr-heading span { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--sc-gold); }
.tr-heading b { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 38px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7); }
.tr-count { margin-left: auto; display: flex; align-items: baseline; gap: 10px; }
.tr-count b { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 3.6vw, 64px); line-height: 0.9; background: linear-gradient(180deg, var(--sc-gold-2), var(--sc-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tr-count span { font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sc-ink-2); }
.tr-hint { position: absolute; left: 50%; bottom: clamp(14px, 3vh, 32px); transform: translateX(-50%); margin: 0; padding: 9px 18px; background: var(--sc-glass); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 13.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--sc-ink-2); white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 400ms; }
.tr-room.is-focused .tr-hint { opacity: 0; }
.tr-story {
  position: absolute; right: clamp(16px, 4vw, 72px); top: 50%; width: min(420px, 36vw); padding: 28px 30px 30px;
  background: var(--sc-glass-strong); border: 1px solid var(--sc-line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; transform: translate(40px, -50%); pointer-events: none; transition: opacity 500ms var(--sc-ease), transform 600ms var(--sc-ease);
}
.tr-story.is-open { opacity: 1; transform: translate(0, -50%); pointer-events: auto; transition-delay: 350ms; }
.tr-story::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--sc-gold), transparent); transform: scaleX(0); transition: transform 1000ms var(--sc-ease); }
.tr-story.is-open::before { transform: none; transition-delay: 500ms; }
/* the story writes itself in: each line rises after the one above */
.tr-story.is-open > * { animation: tr-line 800ms var(--sc-ease) backwards; }
.tr-story.is-open > :nth-child(1) { animation-delay: 550ms; } .tr-story.is-open > :nth-child(2) { animation-delay: 650ms; }
.tr-story.is-open > :nth-child(3) { animation-delay: 760ms; } .tr-story.is-open > :nth-child(4) { animation-delay: 880ms; }
@keyframes tr-line { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tr-story-kicker { display: block; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sc-gold); }
.tr-story h2 { margin: 8px 0 4px; font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.2vw, 56px); line-height: 1; letter-spacing: 0.02em; color: var(--sc-ink); }
.tr-story h3 { margin: 4px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-gold-2); }
.tr-story p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--sc-ink-2); }
.tr-story .tr-story-meta { color: var(--sc-ink); font-weight: 600; }

@media (max-height: 520px) {
  .tr-top { top: 10px; left: 12px; right: 12px; }
  .tr-back { height: 40px; font-size: 14px; padding: 0 12px; }
  .tr-heading b { font-size: 20px; }
  .tr-count b { font-size: 34px; }
  .tr-count span { font-size: 11px; }
  .tr-hint { font-size: 11.5px; bottom: 8px; padding: 6px 12px; }
  .tr-story { width: min(320px, 44vw); padding: 16px 18px; right: 12px; }
  .tr-story h2 { font-size: 30px; }
  .tr-story h3 { font-size: 15px; }
  .tr-story p { font-size: 13px; margin-top: 8px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) { .tr-story, .tr-story > *, .tr-story::before, .tr-stage, .tr-glow, .tr-sweep, .tr-veil, .tr-back, .tr-hint, .scene-root { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; } }

/* --- the Board's office ------------------------------------------------------------------------------------ */
.bo-room { position: fixed; inset: 0; z-index: 40; background: #0c0a09; color: var(--sc-ink); font-family: var(--font-ui); }
/* round 3, for old phones: no backdrop blur over the live 3D office -- a blur re-samples the canvas under every panel
   on every frame. The panels are a touch more opaque instead. */
.bo-room .tr-back, .bo-room .sc-btn, .bo-room .bo-mood span, .bo-room .bo-talk {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.bo-room .tr-back, .bo-room .bo-mood span { background: rgba(16, 14, 12, 0.84); }
.bo-room .bo-talk { background: rgba(14, 12, 10, 0.92); }
.bo-stage { position: absolute; inset: 0; cursor: pointer; }
.bo-mood { margin-left: auto; display: flex; gap: clamp(14px, 2vw, 32px); }
.bo-mood span { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 6px 14px 6px 10px; background: var(--sc-glass); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bo-mood i { grid-row: 1 / 3; font-style: normal; font-size: 26px; line-height: 1; }
.bo-mood small { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-gold); }
.bo-mood b { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--sc-ink); line-height: 1.05; }
.bo-name {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; pointer-events: none;
  background: var(--sc-glass-strong); border: 1px solid var(--sc-line); opacity: 0; transition: opacity 300ms, left 0s; white-space: nowrap;
}
.bo-name.is-on { opacity: 1; }
.bo-name b { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; }
.bo-name span { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-gold); }
.bo-talk {
  position: absolute; left: 50%; bottom: clamp(16px, 4vh, 44px); width: min(860px, calc(100% - 32px)); transform: translate(-50%, 24px);
  padding: 20px 26px 16px; background: var(--sc-glass-strong); border: 1px solid var(--sc-line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; pointer-events: none; cursor: pointer;
  transition: opacity 400ms var(--sc-ease), transform 500ms var(--sc-ease);
}
.bo-talk.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bo-who { display: flex; align-items: baseline; gap: 12px; }
.bo-who b { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-gold-2); }
.bo-who span { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-3); }
.bo-line { margin: 10px 0 12px; min-height: 2.9em; font-size: clamp(17px, 1.35vw, 23px); line-height: 1.45; font-weight: 500; color: var(--sc-ink); }
.bo-line span { display: inline-block; opacity: 0; transform: translateY(7px); transition: opacity 240ms ease, transform 380ms var(--sc-ease); }
.bo-line span.is-on { opacity: 1; transform: none; }
.bo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bo-next { font-size: 12.5px; letter-spacing: 0.08em; color: var(--sc-ink-3); animation: bo-pulse 2.2s ease-in-out infinite; }
.bo-room.is-typing .bo-next { visibility: hidden; }
@keyframes bo-pulse { 50% { opacity: 0.4; } }
.bo-skip { height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--sc-ink-2); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.bo-skip:hover { color: var(--sc-gold-2); }
.bo-folder {
  position: absolute; left: 50%; top: 50%; width: min(980px, calc(100% - 32px)); max-height: calc(100% - 140px); overflow-y: auto; transform: translate(-50%, -44%) scale(0.97);
  padding: 26px 30px; background: linear-gradient(180deg, rgba(34, 26, 18, 0.95), rgba(18, 14, 10, 0.96)); border: 1px solid var(--sc-line);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); opacity: 0; pointer-events: none; transition: opacity 450ms var(--sc-ease), transform 600ms var(--sc-ease);
}
/* round 7 (the user: "I can just stare at his room"): once he has finished, only this small bar -- nothing covers the office */
.bo-after {
  position: absolute; left: 50%; bottom: clamp(16px, 4vh, 44px); display: flex; gap: 12px; transform: translate(-50%, 18px); opacity: 0; pointer-events: none;
  transition: opacity 600ms var(--sc-ease) 500ms, transform 700ms var(--sc-ease) 500ms;
}
.bo-after.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bo-after.is-open.is-hidden { opacity: 0; transform: translate(-50%, 18px); pointer-events: none; transition-delay: 0ms; transition-duration: 250ms; }
/* the walk in: the header settles down after the room has come up */
.bo-room .tr-top { animation: bo-drop 900ms var(--sc-ease) 1500ms both; }
@keyframes bo-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.bo-name { transform-origin: 50% 100%; }
.bo-folder.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.bo-folder > header { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--sc-line); }
.bo-folder > header span { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sc-gold); }
.bo-folder > header b { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 2.6vw, 44px); line-height: 1; color: var(--sc-ink); }
.bo-objs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 18px; }
.bo-obj { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; background: rgba(255, 255, 255, 0.04); border-top: 3px solid var(--sc-gold); }
/* the cards rise each time the folder is opened (it opens on request now, not once at the end of the talk) */
.bo-folder.is-open .bo-obj { animation: bo-rise 600ms var(--sc-ease) both; }
.bo-folder.is-open .bo-obj:nth-child(2) { animation-delay: 90ms; } .bo-folder.is-open .bo-obj:nth-child(3) { animation-delay: 180ms; } .bo-folder.is-open .bo-obj:nth-child(4) { animation-delay: 270ms; }
@keyframes bo-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.bo-obj small { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-3); }
.bo-obj b { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--sc-ink); }
.bo-obj p { margin: 0 0 8px; font-size: 14px; color: var(--sc-ink-2); }
.bo-folder.is-open .bo-obj .bo-chip { animation: bo-pop 520ms var(--sc-ease) 380ms both; }
@keyframes bo-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.bo-chip { align-self: flex-start; margin-top: auto; padding: 4px 10px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255, 255, 255, 0.1); color: var(--sc-ink); }
.bo-obj.is-ahead .bo-chip { background: #2f9e63; }
.bo-obj.is-behind .bo-chip { background: #c9453f; }
.bo-obj.is-on-course .bo-chip { background: var(--sc-gold); color: #1a1208; }
.bo-warn { margin: 16px 0 0; padding: 10px 14px; border-left: 3px solid #c9453f; background: rgba(201, 69, 63, 0.14); font-weight: 600; }
.bo-folder > footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
@media (max-height: 520px) {
  .bo-mood span { padding: 3px 8px 3px 6px; }
  .bo-mood i { font-size: 18px; }
  .bo-mood b { font-size: 13px; }
  .bo-mood small { font-size: 9px; }
  .bo-talk { padding: 10px 16px 6px; bottom: 8px; }
  .bo-who b { font-size: 15px; }
  .bo-line { font-size: 14px; margin: 4px 0 4px; min-height: 2.6em; }
  .bo-folder { padding: 14px 18px; max-height: calc(100% - 80px); top: 56%; }
  .bo-folder > header b { font-size: 22px; }
  .bo-objs { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 10px; }
  .bo-obj { padding: 8px 10px 10px; }
  .bo-obj b { font-size: 16px; }
  .bo-obj p { font-size: 12px; }
  .bo-folder > footer { margin-top: 10px; }
  .bo-after { bottom: 10px; gap: 8px; }
  .bo-after .sc-btn { height: 40px; padding: 0 12px; font-size: 14px; }
  .bo-mood span:nth-child(n) small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bo-talk, .bo-folder, .bo-obj, .bo-obj .bo-chip, .bo-line span, .bo-after, .bo-room .tr-top { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; } }

/* the scenes' frame (the Facilities): back, title plate, a figure on the right, the canvas under a sky */
.tg-room { position: fixed; inset: 0; z-index: 40; isolation: isolate; color: #10151f; font-family: var(--font-ui); }
.tg-sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #8fbde6 0%, #cfe3f2 38%, #e9f1e4 60%, #6f9a55 100%); }
.tg-stage { position: absolute; inset: 0; }
.tg-top { position: absolute; left: clamp(16px, 3vw, 48px); right: clamp(16px, 3vw, 48px); top: clamp(14px, 2.6vh, 32px); display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.tg-back { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 0; background: rgba(255, 255, 255, 0.82); color: #10151f; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 130ms; }
.tg-back svg { width: 18px; height: 18px; }
.tg-back:active { transform: scale(0.96); }
.tg-title { display: flex; flex-direction: column; line-height: 1; }
.tg-title span { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.4vw, 42px); letter-spacing: 0.06em; text-transform: uppercase; }
.tg-title b { margin-top: 4px; font-size: 14px; font-weight: 600; color: #34404f; }
.tg-sessions { margin-left: auto; display: flex; align-items: baseline; gap: 10px; padding: 8px 16px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tg-sessions b { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; }
.tg-sessions span { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #34404f; }
.tg-train {
  margin-top: auto; align-self: stretch; height: 46px; border: 0; background: #10151f; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 190ms, transform 130ms;
}
.tg-train:hover:not(:disabled) { background: #2d6fd6; }
.tg-train:active:not(:disabled) { transform: scale(0.96); }
.tg-train:disabled { background: rgba(16, 21, 31, 0.12); color: #4d5868; cursor: default; }
.tg-notice { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); margin: 0; padding: 10px 16px; background: #10151f; color: #fff; font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 300ms; }
.tg-room.has-notice .tg-notice { opacity: 1; }
@media (max-height: 520px) {
  .tg-top { top: 8px; left: 12px; right: 12px; }
  .tg-back { height: 40px; font-size: 14px; padding: 0 12px; }
  .tg-title span { font-size: 22px; }
  .tg-title b { font-size: 11px; }
  .tg-sessions { padding: 4px 10px; }
  .tg-sessions b { font-size: 22px; }
  .tg-sessions span { font-size: 10px; }
  .tg-train { height: 40px; font-size: 14px; }
}

/* --- Training (round 3): a card's page like the League table's, on the shell's pitch; five tall cards ----------- */
@property --p { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.tg-page { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; perspective: none; width: 100%; gap: clamp(10px, 1.4vh, 18px); min-height: 0; color: #10151f; font-family: var(--font-ui); }
.tg-head {
  flex: none; display: flex; align-items: center; gap: 14px; padding: 10px clamp(12px, 1.4vw, 22px);
  background: rgba(255, 255, 255, 0.86); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 14px 32px -14px rgba(16, 40, 20, 0.45);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.tg-head .back-btn { box-shadow: none; background: rgba(16, 21, 31, 0.06); min-height: 46px; }
.tg-when { font-size: 14px; font-weight: 600; color: #4d5868; }
.tg-page .tg-sessions { margin-left: auto; display: flex; align-items: baseline; gap: 10px; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tg-page .tg-sessions b { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; }
.tg-page .tg-sessions span { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #34404f; }

.tg-cards { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 18px); }
.tg-card {
  --in: clamp(10px, 1vw, 16px);
  position: relative; display: flex; flex-direction: column; min-height: 0; overflow: visible;
  background: rgba(255, 255, 255, 0.86); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 18px 40px -12px rgba(16, 40, 20, 0.45);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); cursor: pointer; outline: none;
  transition: transform 260ms var(--sc-ease), box-shadow 360ms var(--sc-ease);
}
.tg-face { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6vh, 18px); padding: 44px var(--in) 80px; transition: opacity 160ms ease, transform 160ms ease; }
.tg-card.is-empty .tg-face { padding: var(--in); }
.tg-page.is-entering .tg-card { animation: tg-in 620ms var(--sc-ease) calc(80ms + var(--d, 0) * 70ms) backwards; }
@keyframes tg-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
.tg-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(16, 24, 40, 0.12), 0 28px 50px -14px rgba(16, 40, 20, 0.5); }
.tg-card:active { transform: translateY(-2px) scale(0.99); }
.tg-card:focus-visible { box-shadow: 0 0 0 2px #2d6fd6, 0 18px 40px -12px rgba(16, 40, 20, 0.45); }
/* a new trainee: only this card's face changes */
.tg-card.is-leaving .tg-face, .tg-card.is-leaving .tg-train { opacity: 0; transform: translateY(-10px) scale(0.97); }
.tg-card.is-arriving .tg-face { animation: tg-face-in 420ms var(--sc-ease) both; }
.tg-card.is-arriving .tg-train { animation: tg-face-in 420ms var(--sc-ease) 80ms both; }
@keyframes tg-face-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.tg-card-head { position: absolute; left: var(--in); right: var(--in); top: clamp(10px, 1.4vh, 16px); display: flex; align-items: center; justify-content: space-between; }
.tg-card-n { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #4d5868; }
.tg-card.is-empty .tg-card-n { position: absolute; left: 14px; top: 12px; }
.tg-pips { display: inline-flex; gap: 4px; }
.tg-pips i { width: 18px; height: 5px; background: #10151f; transition: background 400ms ease; }
.tg-pips i.is-used { background: rgba(16, 21, 31, 0.15); }

/* the ring: the fill is --p; a session only sweeps it, evenly, in one green (round 5: "easier on the eye") */
.tg-ring {
  --size: clamp(96px, min(22vh, 11vw), 190px);
  position: relative; flex: none; width: var(--size); height: var(--size); display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(#2f9e63 var(--p), rgba(16, 21, 31, 0.1) 0);
  transition: --p var(--sweep, 1100ms) cubic-bezier(0.45, 0, 0.25, 1);
}
.tg-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; box-shadow: inset 0 2px 6px rgba(16, 24, 40, 0.12); }
.tg-ovr { position: relative; font-family: var(--font-display); font-weight: 700; font-size: calc(var(--size) * 0.42); line-height: 1; color: #10151f; }
.tg-ovr.is-flip { animation: tg-flip 500ms ease-out; }
@keyframes tg-flip { from { opacity: 0; } to { opacity: 1; } }
.tg-sessions b.is-tick { animation: tg-tick 420ms ease-out; }
@keyframes tg-tick { from { color: #2f9e63; } }

.tg-card-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.7vw, 30px); letter-spacing: 0.03em; text-transform: uppercase; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-card-meta { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #34404f; }
.tg-card-meta i, .tg-pos { font-style: normal; padding: 1px 6px; background: rgba(16, 21, 31, 0.08); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: #10151f; }
/* what the last session gave: always its own row, so nothing jumps when it appears */
.tg-gain { min-height: 30px; padding: 3px 12px; background: #2f9e63; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; line-height: 24px; white-space: nowrap; box-shadow: 0 6px 16px rgba(20, 90, 50, 0.3); visibility: hidden; }
.tg-gain.is-shown { visibility: visible; }
.tg-gain.is-pop { animation: tg-gain 500ms ease-out both; }
@keyframes tg-gain { from { opacity: 0; } to { opacity: 1; } }

.tg-page .tg-train {
  position: absolute; left: var(--in); width: calc(100% - 2 * var(--in)); bottom: clamp(10px, 1.4vh, 16px);
  height: 52px; border: 0; overflow: hidden; background: #10151f; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 150ms, opacity 160ms;
}
.tg-page .tg-train:hover:not(:disabled) { background: #26303f; }
.tg-page .tg-train:disabled { background: rgba(16, 21, 31, 0.12); color: #4d5868; cursor: default; }

.tg-card.is-empty { background: rgba(255, 255, 255, 0.55); border: 2px dashed rgba(16, 21, 31, 0.22); }
.tg-add { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: rgba(16, 21, 31, 0.08); color: #10151f; transition: transform 260ms var(--sc-ease), background 190ms; }
.tg-add svg { width: 32px; height: 32px; }
.tg-card.is-empty:hover .tg-add { transform: scale(1.1) rotate(90deg); background: #2d6fd6; color: #fff; }
.tg-add-label { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: #34404f; }

.tg-overlay { color: #10151f; font-family: var(--font-ui); }
.tg-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(8, 16, 10, 0.35); opacity: 0; pointer-events: none; transition: opacity 300ms; }
.tg-overlay.is-picking .tg-scrim { opacity: 1; pointer-events: auto; }
.tg-picker {
  position: fixed; left: 50%; top: 50%; z-index: 61; width: min(980px, calc(100vw - 48px)); height: min(820px, calc(100vh - 64px));
  display: flex; flex-direction: column; padding: clamp(14px, 1.6vw, 26px); background: #f4f6f9;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), 0 40px 90px -20px rgba(8, 16, 10, 0.6);
  opacity: 0; pointer-events: none; transform: translate(-50%, calc(-50% + 16px)); transition: opacity 220ms ease, transform 260ms ease;
}
.tg-overlay.is-picking .tg-picker { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.tg-picker-head { flex: none; display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(16, 21, 31, 0.1); }
.tg-picker-title { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.tg-picker-title span { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: #4d5868; }
.tg-picker-title h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 36px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; color: #10151f; }
.tg-x { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 0; background: rgba(16, 21, 31, 0.06); color: #10151f; cursor: pointer; }
.tg-x:hover { background: rgba(16, 21, 31, 0.12); }
.tg-x svg { width: 18px; height: 18px; }
.tg-remove { flex: none; height: 46px; padding: 0 16px; border: 1px solid rgba(16, 21, 31, 0.2); background: transparent; color: #10151f; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.tg-remove:hover { background: rgba(216, 74, 74, 0.1); border-color: #d84a4a; color: #b53a3a; }
.tg-picker-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 4px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(16, 21, 31, 0.3) transparent; }
.tg-picker-list .sh-head { background: #f4f6f9; z-index: 2; box-shadow: 0 1px 0 rgba(16, 21, 31, 0.08); }
.sh-row.tg-pick { width: 100%; grid-template-columns: 3.4em minmax(9em, 1.6fr) 2.6em 2.8em minmax(6em, 1fr) 4.4em minmax(0, 1fr); min-height: 2.9em; border: 0; border-bottom: 1px solid rgba(16, 21, 31, 0.06); background: transparent; font-family: var(--font-ui); text-align: left; }
button.sh-row.tg-pick { cursor: pointer; transition: background 130ms; }
button.sh-row.tg-pick:hover:not(:disabled) { background: #fff; }
.sh-row.tg-pick.is-on { background: rgba(45, 111, 214, 0.1); box-shadow: inset 3px 0 0 #2d6fd6; }
.sh-row.tg-pick:disabled { cursor: default; color: var(--ink-300, #9aa3af); }
.sh-row.tg-pick.is-out .sh-status { color: var(--form-loss, #c0392b); }
.sh-head.tg-pick { min-height: 2.2em; }
.tg-pick-bar { position: relative; height: 6px; background: rgba(16, 21, 31, 0.1); }
.tg-pick-bar i { position: absolute; inset: 0 auto 0 0; background: #2f9e63; }
.tg-pick-slot { display: flex; }

.tg-page .tg-notice { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 2; margin: 0; padding: 10px 16px; background: #10151f; color: #fff; font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 300ms; }
.tg-page.has-notice .tg-notice { opacity: 1; }

@media (max-height: 520px) {
  .tg-page { gap: 6px; }
  .tg-head { padding: 4px 8px; gap: 8px; }
  .tg-head .back-btn { min-height: 36px; height: 36px; font-size: 13px; padding: 0 10px 0 6px; }
  .tg-head .detail-title { font-size: 20px; }
  .tg-when { font-size: 11px; }
  .tg-page .tg-sessions b { font-size: 20px; }
  .tg-page .tg-sessions span { font-size: 10px; }
  .tg-picker { width: calc(100vw - 24px); height: calc(100vh - 16px); padding: 8px 12px; }
  .tg-picker-head { gap: 8px; padding-bottom: 6px; }
  .tg-picker-title span { font-size: 10px; }
  .tg-picker-title h2 { font-size: 20px; }
  .tg-x, .tg-remove { height: 36px; }
  .tg-x { width: 36px; }
  .tg-remove { font-size: 12px; padding: 0 10px; }
  .sh-row.tg-pick { min-height: 32px; grid-template-columns: 3.2em minmax(8em, 1.6fr) 2.2em 2.4em minmax(4em, 1fr) 4em minmax(0, 1fr); }
  .tg-cards { gap: 6px; }
  .tg-card { --in: 6px; }
  .tg-face { gap: 4px; padding: 20px 6px 46px; }
  .tg-card.is-empty .tg-face { padding: 6px; }
  .tg-card-head { top: 6px; }
  .tg-card-n { font-size: 12px; }
  .tg-pips i { width: 12px; height: 4px; }
  .tg-ring { --size: clamp(52px, 22vh, 90px); }
  .tg-ring::before { inset: 5px; }
  .tg-card-name { font-size: 14px; }
  .tg-card-meta { font-size: 10.5px; gap: 5px; }
  .tg-card-meta i { font-size: 10.5px; }
  .tg-page .tg-train { height: 36px; font-size: 13px; bottom: 6px; }
  .tg-add { width: 48px; height: 48px; }
  .tg-add-label { font-size: 12px; }
  .tg-gain { font-size: 13px; min-height: 22px; line-height: 16px; padding: 3px 8px; }
}
@media (prefers-reduced-motion: reduce) { .tg-card, .tg-face, .tg-ring, .tg-ovr, .tg-gain, .tg-train, .tg-picker { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* --- the Facilities (round 6): flat, the Training page's language; three tall cards with a picture each ------ */
.fy-cards { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 22px); }
.fy-card {
  --in: clamp(12px, 1.2vw, 20px);
  position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 18px 40px -12px rgba(16, 40, 20, 0.45);
  transition: transform 260ms var(--sc-ease), box-shadow 360ms var(--sc-ease);
}
.fy-page.is-entering .fy-card { animation: tg-in 620ms var(--sc-ease) calc(80ms + var(--d, 0) * 90ms) backwards; }
.fy-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(16, 24, 40, 0.12), 0 28px 50px -14px rgba(16, 40, 20, 0.5); }
.fy-pic { flex: 1 1 42%; min-height: 0; margin: 0; overflow: hidden; background: #d7e9f5; }
.fy-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; user-select: none; }
.fy-body { flex: 0 1 auto; display: flex; flex-direction: column; gap: clamp(8px, 1.2vh, 14px); padding: clamp(10px, 1.4vh, 18px) var(--in) var(--in); }
.fy-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fy-name b { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.7vw, 30px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.fy-lvl { display: inline-flex; gap: 4px; flex: none; }
.fy-lvl i { width: 18px; height: 8px; background: rgba(16, 21, 31, 0.12); transition: background 400ms ease; }
.fy-lvl i.is-on { background: #10151f; }
.fy-lvl i.is-building { background: repeating-linear-gradient(135deg, #f2c230 0 4px, #10151f 4px 8px); }
.fy-line { margin: 0; font-size: 14px; font-weight: 500; color: #34404f; }
.fy-effect { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fy-effect div { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; background: rgba(16, 21, 31, 0.05); }
.fy-effect dt { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #4d5868; }
.fy-effect dd { margin: 0; font-size: 14px; font-weight: 600; color: #10151f; }
.fy-effect .is-next dd { color: #1b4ea6; }
.fy-act { display: flex; flex-direction: column; gap: 6px; }
.fy-go {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 52px; padding: 0 18px; border: 0;
  background: #10151f; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: background 150ms, transform 130ms;
}
.fy-go span { letter-spacing: 0.04em; }
.fy-go:hover:not(:disabled) { background: #26303f; }
.fy-go:active:not(:disabled) { transform: scale(0.98); }
.fy-go.is-armed { background: #2f9e63; }
.fy-go.is-armed:hover { background: #28895a; }
.fy-go:disabled { background: rgba(16, 21, 31, 0.12); color: #4d5868; cursor: default; }
.fy-build { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; background: repeating-linear-gradient(135deg, rgba(242, 194, 48, 0.28) 0 10px, rgba(16, 21, 31, 0.04) 10px 20px); font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; color: #10151f; }
.fy-build i { width: 10px; height: 10px; background: #f2c230; flex: none; }
.fy-max { display: flex; align-items: center; height: 52px; padding: 0 16px; background: rgba(47, 158, 99, 0.12); font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.12em; text-transform: uppercase; color: #217a4b; }
.fy-why { font-size: 13px; font-weight: 600; color: #4d5868; }
@media (max-height: 520px) {
  .fy-cards { gap: 6px; }
  .fy-card { --in: 8px; }
  .fy-pic { flex-basis: 30%; }
  .fy-body { gap: 5px; padding: 6px var(--in) var(--in); }
  .fy-name b { font-size: 16px; }
  .fy-lvl i { width: 12px; height: 6px; }
  .fy-line { display: none; }
  .fy-effect { gap: 5px; }
  .fy-effect div { padding: 4px 6px; gap: 1px; }
  .fy-effect dt { font-size: 9px; }
  .fy-effect dd { font-size: 11px; }
  .fy-go, .fy-build, .fy-max { height: 36px; font-size: 13px; padding: 0 10px; }
  .fy-why { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .fy-card, .fy-go { transition-duration: 1ms !important; animation-duration: 1ms !important; } }

/* --- the hub's Training card: each trainee's rating in a ring that fills towards the next overall ------------- */
.tc-slot { justify-content: center; }
.tc-ring {
  position: relative; display: grid; place-items: center; width: var(--d-sphere); height: var(--d-sphere); border-radius: 50%;
  background: conic-gradient(#2f9e63 var(--p), rgba(16, 21, 31, 0.1) 0);
}
.tc-ring::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: #fff; box-shadow: inset 0 2px 5px rgba(16, 24, 40, 0.12); }
.tc-ring b { position: relative; font-family: var(--font-display); font-weight: 700; font-size: calc(var(--d-sphere) * 0.42); line-height: 1; color: #10151f; }
.tc-meta { display: flex; align-items: center; gap: 6px; font-size: clamp(11px, min(6cqh, 2.4cqw), 14px); font-weight: 600; color: #34404f; white-space: nowrap; }
.tc-meta i { font-style: normal; padding: 1px 5px; background: rgba(16, 21, 31, 0.08); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; color: #10151f; }
.tc-pips { display: inline-flex; gap: 3px; }
.tc-pips i { width: 12px; height: 4px; background: var(--ink-900); }
.tc-pips i.is-used { background: rgba(16, 21, 31, 0.16); }
.tc-dash { width: var(--d-sphere); height: var(--d-sphere); border-radius: 50%; border: 2px dashed rgba(16, 21, 31, 0.2); }
.club-grid .tr-item svg { height: clamp(34px, 38cqh, 110px); width: auto; color: var(--ink-500); }
.club-grid .tr-item.is-yours svg { color: #b8913f; }
/* A7: a Super Cup on the shelf: the cup's own small teal mark, a little smaller than a title's cup */
.club-grid .tr-item.is-cup svg { height: clamp(26px, 28cqh, 80px); }
.tg-title { padding: 8px 16px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-shadow: none; }
@media (max-height: 520px) { .tg-title { padding: 4px 10px; } }