/* career-quick.css — Quick Play (career mode). 20261022qp1
   Pick a pro from the Career Studio list, set the game up, walk on, play him
   at the average on his card, see the result. Every colour reads the studio's
   "Quick play" part (--tb-quick*) with a Throw default behind it.
   Shared by career.html (js/career-ui.js RENDER.quick) and the studio
   preview — one markup, one stylesheet.
   NATIVE PARITY: lib/features/career/quick/quick_play_screen.dart */
.qp-page{padding:0 !important;gap:0}
.qp-hero{position:relative;overflow:hidden;padding:22px 24px 18px;background:var(--tb-quickGrad,linear-gradient(135deg,#121517,#2a3038));color:var(--tb-quickText,#fff)}
.qp-hero .qp-k{font-size:9.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;opacity:.55}
.qp-hero .qp-t{font-family:var(--beb,'Bebas Neue','Arial Narrow',sans-serif);font-size:38px;line-height:.95;letter-spacing:.04em;margin:4px 0 2px;font-weight:400;text-transform:uppercase}
.c4-page .qp-hero .qp-sub{color:inherit;font-size:12.5px;opacity:.72;margin:0 0 14px;max-width:560px;line-height:1.5}
.qp-seg{display:inline-flex;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:3px;gap:2px}
.qp-seg button{appearance:none;border:0;background:transparent;padding:7px 12px;border-radius:8px;font:800 11px 'DM Sans',sans-serif;color:inherit;opacity:.7;cursor:pointer}
.qp-seg button.on{background:var(--tb-quickCard,#fffefb);color:var(--tb-quickCardText,#121517);opacity:1}
/* header layers position against the whole band - the studio draws the same band, so a logo at 90% across is at 90% on both */
.qp-hero > .tb-layers{--tb-box:100%}
.qp-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;padding:18px 22px 26px;align-items:start}
.qp-body>*{min-width:0}
.qp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;min-width:0}
.qp-pro{min-width:0}
.qp-empty{grid-column:1/-1;padding:40px 20px;text-align:center;color:var(--text-3,#7b8896);font-size:13px;line-height:1.5}
.qp-empty b{display:block;font-family:var(--beb);font-size:22px;letter-spacing:.04em;color:var(--text,#121517);margin-bottom:4px;font-weight:400}
.qp-pro{position:relative;background:var(--tb-quickCard,#fffefb);color:var(--tb-quickCardText,#121517);border:1px solid color-mix(in srgb,var(--tb-quickCardText,#121517) 12%,transparent);border-radius:14px;overflow:hidden;cursor:pointer;text-align:left;padding:0;font:inherit;outline:0;transition:transform .12s}
.qp-pro:hover{transform:translateY(-2px)}
.qp-pro.on{outline:2.5px solid var(--tb-quickAccent,#ba2e1b);outline-offset:0}
.qp-pro .qp-pic{height:150px;background:var(--tb-quickPhotoBg,#1d2228);display:grid;place-items:center;overflow:hidden}
.qp-pro .qp-pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.qp-pro .qp-pic span{font-size:9px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.35)}
.qp-pro .qp-rank{position:absolute;left:8px;top:8px;background:var(--tb-quickRankChip,#fff);color:var(--tb-quickRankChipText,#121517);font:400 14px var(--beb);padding:2px 7px;border-radius:6px;letter-spacing:.04em}
.qp-pro .qp-avg{position:absolute;right:8px;top:8px;background:var(--tb-quickChip,#121517);color:var(--tb-quickChipText,#fff);font:400 13px var(--beb);padding:2px 7px;border-radius:6px;letter-spacing:.05em}
.qp-pro .qp-b{padding:9px 10px 10px}
.qp-pro .qp-nm{font:400 17px/.95 var(--beb);letter-spacing:.03em;text-transform:uppercase}
.qp-pro .qp-nm small{display:block;font-size:11px;color:var(--tb-quickCardMuted,#7b8896);letter-spacing:.08em}
.qp-pro .qp-nick{font-size:9.5px;font-weight:800;letter-spacing:.12em;color:var(--tb-quickAccent,#ba2e1b);text-transform:uppercase;margin-top:4px;min-height:12px}
.qp-pro .qp-rec{font-size:10px;color:var(--tb-quickCardMuted,#7b8896);margin-top:4px}
.qp-pro .qp-rec b{color:var(--tb-quickCardText,#121517)}
/* the set-up panel (desktop: a column; phone: a sheet) */
.qp-setup{background:var(--tb-quickCard,#fffefb);color:var(--tb-quickCardText,#121517);border:1px solid color-mix(in srgb,var(--tb-quickCardText,#121517) 12%,transparent);border-radius:16px;padding:16px 18px 18px;position:sticky;top:76px}
.qp-setup .qp-k{font-size:9.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--tb-quickCardMuted,#7b8896)}
.qp-setup h3{font:400 22px var(--beb);margin:2px 0;letter-spacing:.04em;text-transform:uppercase}
.qp-vs{display:flex;align-items:center;gap:10px;background:var(--tb-quickChip,#121517);color:var(--tb-quickChipText,#fff);border-radius:12px;padding:12px 14px;margin:12px 0}
.qp-vs .qp-p{width:38px;height:46px;border-radius:7px;background:rgba(255,255,255,.12);flex:none;overflow:hidden}
.qp-vs .qp-p img{width:100%;height:100%;object-fit:cover;object-position:top}
.qp-vs .qp-n{font:400 16px/.95 var(--beb);letter-spacing:.03em;min-width:0;text-transform:uppercase}
.qp-vs .qp-n small{display:block;font:600 9.5px 'DM Sans',sans-serif;opacity:.6;margin-top:3px;text-transform:none;letter-spacing:0}
.qp-vs .qp-x{font:400 18px var(--beb);opacity:.35;margin:0 auto}
.qp-vs .qp-n.r{text-align:right}
.qp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--tb-quickCardText,#121517) 8%,transparent);font-size:12.5px;font-weight:700}
.qp-row:first-of-type{border-top:0}
.qp-pill{display:inline-flex;background:color-mix(in srgb,var(--tb-quickCardText,#121517) 6%,transparent);border-radius:9px;padding:3px;flex:none}
.qp-pill button{appearance:none;border:0;background:transparent;padding:6px 10px;border-radius:7px;font:800 11px 'DM Sans',sans-serif;color:var(--tb-quickCardMuted,#7b8896);cursor:pointer}
.qp-pill button.on{background:var(--tb-quickPillOn,#121517);color:var(--tb-quickPillOnText,#fff)}
.c4-page .qp-go,.qp-go{display:block;width:100%;appearance:none;border:0;background:var(--tb-quickGo,#ba2e1b);color:var(--tb-quickGoText,#fff);border-radius:11px;text-align:center;padding:13px;font:400 18px var(--beb);letter-spacing:.08em;margin-top:8px;cursor:pointer}
.qp-go:disabled{opacity:.4;cursor:default}
.qp-note{font-size:10.5px;color:var(--tb-quickCardMuted,#7b8896);margin-top:8px;line-height:1.45}
.qp-close{display:none}
/* the hub strip */
.qp-strip{display:flex;align-items:center;gap:14px;background:var(--surface,#fffefb);border:1px solid var(--border-2,rgba(18,21,23,.12));border-radius:14px;padding:12px 14px;margin-top:12px}
.qp-strip .qp-ic{width:38px;height:38px;border-radius:10px;background:var(--tb-quickChip,#121517);color:var(--tb-quickChipText,#fff);display:grid;place-items:center;font:400 15px var(--beb);flex:none}
.qp-strip .qp-tx{flex:1;min-width:0}
.qp-strip .qp-tx b{display:block;font:400 18px var(--beb);letter-spacing:.04em}
.qp-strip .qp-tx small{font-size:11px;color:var(--text-3,#7b8896)}
.qp-strip .c4-b{flex:none}
/* walk-on kicker + result extras */
.qp-rec2{display:flex;gap:18px;justify-content:center;margin-top:14px}
.qp-rec2 div{text-align:center}.qp-rec2 .c4-v{display:block;font:400 26px var(--beb)}.qp-rec2 .c4-l{display:block;font-size:8.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;opacity:.5;margin-top:2px}
@media (max-width:899px){
  .qp-hero{padding:16px 14px 14px}
  .qp-hero .qp-t{font-size:30px}
  .qp-body{display:block;padding:12px 12px 110px}
  .qp-grid{grid-template-columns:repeat(2,1fr)}
  .qp-pro .qp-pic{height:128px}
  /* the set-up becomes a sheet from the bottom once a pro is picked */
  .qp-setup{position:fixed;left:0;right:0;bottom:0;z-index:40;border-radius:18px 18px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.35);transform:translateY(105%);transition:transform .22s;max-height:88vh;overflow:auto}
  .qp-setup.open{transform:none}
  .qp-close{display:block;position:absolute;right:12px;top:10px;appearance:none;border:0;background:color-mix(in srgb,var(--tb-quickCardText,#121517) 8%,transparent);color:inherit;width:30px;height:30px;border-radius:50%;font-size:16px;cursor:pointer}
  .qp-row{flex-wrap:wrap}
  .qp-strip{flex-wrap:wrap}
  .qp-strip .c4-b{width:100%;text-align:center}
}
/* nine items on the phone bar now (Quick play joined the eight) */
@media (max-width:899px){body[data-cr-shell="1"] .c4-bnav{grid-template-columns:repeat(9,1fr)}.c4-bnav a{font-size:8px}}
/* 20261022wp1 — Profile → Walk-on card (photo or shirt) */
.c4-wo-set{display:flex;gap:16px;align-items:flex-start;padding-top:10px}
.c4-wo-pv{flex:none;width:96px;height:124px;border-radius:12px;background:linear-gradient(180deg,#2a3038,#171b20);display:grid;place-items:center;overflow:hidden}
.c4-wo-pv img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.c4-wo-pv .c4-wo-sh{display:block;width:76%}.c4-wo-pv .c4-wo-sh svg{width:100%;height:auto;display:block}
.c4-wo-opts{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.c4-wo-opts .c4-pills{margin:0}
.c4-wo-opts .c4-pills button:disabled{opacity:.4;cursor:default}
/* 20261022wp2 — your photo in place of the shirt: rail, profile card, result faces, hub strip */
.c4-has-photo .c4-me-img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:8px}
.c4-me-shirt.c4-has-photo{width:40px;border-radius:8px;overflow:hidden}
.c4-id-shirt.c4-has-photo{width:84px;border-radius:12px;overflow:hidden}
.c4-shirt.c4-has-photo .c4-me-img{width:64px;border-radius:10px}
@media (max-width:899px){.c4-id-shirt.c4-has-photo{width:64px}}
/* 20261022wp3 — the walk-on photo cropper */
.wo-crop{max-width:360px}
.wo-frame{position:relative;margin:12px auto 0;border-radius:14px;overflow:hidden;background:#111;cursor:grab;touch-action:none;user-select:none;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.wo-frame:active{cursor:grabbing}
.wo-frame canvas{display:block}
.wo-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 33.3%,rgba(255,255,255,.18) 33.3%,rgba(255,255,255,.18) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(255,255,255,.18) 66.6%,rgba(255,255,255,.18) calc(66.6% + 1px),transparent calc(66.6% + 1px)),linear-gradient(180deg,transparent 33.3%,rgba(255,255,255,.18) 33.3%,rgba(255,255,255,.18) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(255,255,255,.18) 66.6%,rgba(255,255,255,.18) calc(66.6% + 1px),transparent calc(66.6% + 1px));border:1px solid rgba(255,255,255,.25);border-radius:14px}
.wo-zoom{display:flex;align-items:center;gap:10px;margin:12px auto 4px;max-width:270px;font:800 16px 'DM Sans',sans-serif;color:var(--text-3,#7b8896)}
.wo-zoom input{flex:1}
/* 24 Oct 2026 — Profile → walk-on music */
.c4-wo-music{grid-column:1/-1}
.c4-wo-mrow{display:flex;gap:8px;margin-bottom:10px}
.c4-wo-mrow input{flex:1;min-width:0;height:38px;border:1.5px solid var(--border-2,rgba(18,21,23,.16));border-radius:9px;padding:0 10px;font:600 13px 'DM Sans',sans-serif;background:var(--surface,#fff);color:var(--text,#121517)}