/* HIT 50: Boxing Manager - styles. Themes: dark (default), light, system.
   Visual language: gunmetal panels, steel edges, red corner (left / your fighter), blue corner (right / opponent). */

/* ---------- Tokens ---------- */
:root, [data-theme="dark"] {
  --bg: #07090d; --bg2: #0d1117; --panel: #141920; --panel2: #1b222b; --panel3: #232b36; --line: #2c3540; --line2: #3b4654;
  --text: #edf0f4; --muted: #9aa5b3; --faint: #6b7686;
  --red: #c8141e; --red2: #f0444a; --blue: #1f5fd6; --blue2: #5b95f9; --green: #2bd36b; --amber: #f5a524; --purple: #b57cff;
  --steel1: #ffffff; --steel2: #c3cbd4; --steel3: #6f7a88;
  --shadow: 0 10px 30px rgba(0,0,0,.55); --overlay: rgba(3,5,8,.82);
  --page: radial-gradient(1200px 700px at -10% -20%, rgba(200,20,30,.16), transparent 60%), radial-gradient(1200px 700px at 110% -20%, rgba(31,95,214,.18), transparent 60%), #06080b;
  --panelbg: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 40%), var(--panel);
  --radius: 10px; --radius-sm: 7px;
}
[data-theme="light"] {
  --bg: #e4e7eb; --bg2: #d7dce2; --panel: #f6f7f9; --panel2: #eceff2; --panel3: #e1e5ea; --line: #c4cbd3; --line2: #aab3be;
  --text: #13171c; --muted: #48525e; --faint: #6a7480;
  --red: #b3121b; --red2: #c4161f; --blue: #1a4fb4; --blue2: #1a4fb4; --green: #12803c; --amber: #9a5800; --purple: #7e22ce;
  --steel1: #1c2229; --steel2: #3e4752; --steel3: #8892a0;
  --shadow: 0 6px 18px rgba(20,24,30,.12); --overlay: rgba(220,224,229,.88);
  --page: radial-gradient(1000px 500px at -10% -20%, rgba(200,20,30,.08), transparent 60%), radial-gradient(1000px 500px at 110% -20%, rgba(31,95,214,.08), transparent 60%), #e4e7eb;
  --panelbg: var(--panel);
}
[data-text="small"] { font-size: 14px; } [data-text="medium"] { font-size: 15.5px; } [data-text="large"] { font-size: 18px; }
[data-motion="reduced"] * { transition: none !important; animation: none !important; }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: 'Barlow', 'Segoe UI', system-ui, sans-serif; background: var(--page); background-attachment: fixed; color: var(--text); line-height: 1.45; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: .6rem .75rem; width: 100%; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: var(--blue2); box-shadow: 0 0 0 3px rgba(91,149,249,.2); }
a { color: var(--blue2); text-decoration: none; } a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 10px; border: 2px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; }
h1, h2, h3, .brand, .btn, .chip, .panel h3, #modal h2, .panel-title, .ms-title, .cn, .round, .press, .lm-label, .tug-lbl, .big-num { font-family: 'Russo One', 'Barlow', sans-serif; font-weight: 400; letter-spacing: .02em; }
.num, .money, table.t td.n { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.flag { vertical-align: -2px; border-radius: 2px; margin-right: .4rem; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.hidden { display: none !important; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: .84rem; } .tiny { font-size: .68rem; }
.green { color: var(--green); } .red { color: var(--red2); } .amber { color: var(--amber); } .blue { color: var(--blue2); } .purple { color: var(--purple); }
.bold { font-weight: 800; } .upper { text-transform: uppercase; letter-spacing: .1em; } .center { text-align: center; }
.row { display: flex; gap: .6rem; align-items: center; } .wrap { flex-wrap: wrap; } .between { justify-content: space-between; } .grow { flex: 1; }
.col { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.mt { margin-top: .8rem; } .mb { margin-bottom: .8rem; }
.money { font-weight: 700; } .money.pos { color: var(--green); } .money.neg { color: var(--red2); } .money.zero { color: var(--muted); }

/* ---------- App shell ---------- */
#app { min-height: 100dvh; display: flex; flex-direction: column; }
#topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem 1rem; min-height: 56px;
  background: linear-gradient(90deg, rgba(200,20,30,.22), transparent 18%, transparent 82%, rgba(31,95,214,.22)), rgba(9,12,16,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.03); }
[data-theme="light"] #topbar { background: linear-gradient(90deg, rgba(200,20,30,.1), transparent 18%, transparent 82%, rgba(31,95,214,.1)), rgba(246,247,249,.94); }
#topbar .brand { display: flex; align-items: center; gap: .6rem; font-size: .95rem; white-space: nowrap; }
#topbar .brand small { display: block; color: var(--muted); font-family: 'Barlow', sans-serif; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.brand-logo { height: 34px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
#topbar .row { gap: .45rem; }
#topbar .row > div { line-height: 1.15; }
#screen { flex: 1; width: 100%; max-width: 780px; margin: 0 auto; padding: 1rem; }
body.desktop #screen { max-width: 1680px; padding: 1.2rem 1.6rem; }
body.ms-on #screen, body.gym-full #screen { max-width: none; padding: 0; }
.only-desk { display: none !important; } body.desktop .only-desk { display: inline-flex !important; }

/* ---------- Panels, buttons, chips ---------- */
.panel { background: var(--panelbg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.05rem; box-shadow: var(--shadow); position: relative; min-width: 0; }
.panel h3 { margin: 0 0 .75rem; font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; display: flex; align-items: center; gap: .5rem; }
.panel h3::before { content: ""; width: 3px; height: 12px; background: linear-gradient(var(--red2), var(--blue2)); border-radius: 2px; margin-right: .1rem; flex: none; }
.panel h3 > span:last-child:not(:first-child), .panel h3 > button, .panel h3 > .faint { margin-left: auto; }
.panel h3 > span:first-child:not(:last-child) { margin-right: auto; }
.grid2 > .btn.full:only-child { grid-column: 1 / -1; }
.panel-title { margin: 0 0 .4rem; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .06em; }
.big-num { font-size: 1.7rem; line-height: 1.1; margin-bottom: .2rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: linear-gradient(180deg, var(--panel3), var(--panel2)); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: .66rem 1rem; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.3); transition: transform .12s, border-color .15s, box-shadow .15s, background .15s; text-align: center; }
.btn:hover:not(:disabled) { border-color: var(--steel3); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #e3262f, #a30f17); border-color: #ff5e5e; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 0 22px rgba(240,68,74,.38); }
.btn.blue { background: linear-gradient(180deg, #2f72ea, #17429c); border-color: #79a8ff; color: #fff; }
.btn.blue:hover:not(:disabled) { box-shadow: 0 0 22px rgba(91,149,249,.38); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.big { padding: .95rem 1.2rem; font-size: 1rem; }
.btn.sm { padding: .38rem .65rem; font-size: .7rem; border-radius: 6px; }
.btn.icon { width: 30px; padding: .38rem 0; }
.btn.full { width: 100%; display: flex; }
.btn.on { border-color: var(--red2); color: var(--red2); }
.chip { display: inline-block; font-size: .64rem; padding: .2rem .5rem; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel2); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.chip.good { color: var(--green); border-color: color-mix(in srgb, var(--green) 60%, transparent); }
.chip.bad { color: var(--red2); border-color: color-mix(in srgb, var(--red2) 60%, transparent); }
.chip.mid { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 60%, transparent); }
button.chip { cursor: pointer; }
.bar { height: 6px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--red2)); border-radius: 99px; }
.stat { margin-bottom: .55rem; } .stat .row { justify-content: space-between; font-size: .82rem; margin-bottom: .2rem; }
table.t { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.t th { text-align: left; color: var(--faint); font-weight: 700; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--line2); padding: .45rem .4rem; }
table.t td { padding: .5rem .4rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.click:hover td { background: var(--panel2); cursor: pointer; }
.list-item { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel2); margin-bottom: .45rem; }
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .9rem; }
.tabs .btn.on { border-color: var(--red2); color: #fff; background: linear-gradient(180deg, #3a1517, #24100f); }
[data-theme="light"] .tabs .btn.on { color: var(--red2); background: var(--panel); }
.inbox-item { border-left: 3px solid var(--blue2); }
.inbox-item.urgent { border-left-color: var(--red2); }
.danger-zone { border: 1px solid color-mix(in srgb, var(--red2) 50%, transparent); border-radius: var(--radius); padding: .9rem; }
.form { display: flex; flex-direction: column; gap: .85rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-top: .85rem; }
.form .field { margin-top: 0; }
.field > span { font-size: .68rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.seg-btn { background: transparent; border: 0; border-radius: 5px; padding: .5rem; font-size: .8rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.seg-btn.on { background: var(--panel3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }

/* ---------- Modal, toast ---------- */
#modal { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; backdrop-filter: blur(3px); animation: fade .15s ease; }
#modal .box { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; width: 100%; max-width: 560px; max-height: 88dvh; overflow: auto; padding: 1.2rem 1.25rem; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
#modal .box.wide { max-width: 940px; }
#modal h2 { margin: 0 0 .8rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
#toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--panel3); border: 1px solid var(--line2); padding: .65rem 1.1rem; border-radius: 9px; z-index: 260; box-shadow: var(--shadow); font-size: .86rem; max-width: 92vw; animation: rise .2s ease; }
@keyframes fade { from { opacity: 0; } } @keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- Title screen + intro (always dark, logo always fully visible) ---------- */
body.cinematic { background: #000; overflow: hidden; }
.title-screen { position: relative; min-height: 100dvh; overflow: hidden; cursor: pointer; user-select: none; background: #000; display: flex; align-items: center; justify-content: center; }
.ts-fill { position: absolute; inset: -12px; background-size: cover; background-position: center; filter: blur(3px) brightness(.85); }
.ts-bg { position: relative; z-index: 1; width: min(100vw, calc(100dvh * 16 / 9)); height: auto; max-height: 100dvh; object-fit: contain; display: block;
  -webkit-mask-image: linear-gradient(transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 9%, #000 91%, transparent 100%); animation: tsBreath 6s ease-in-out infinite; }
.ts-vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.7) 100%); pointer-events: none; }
.sparks { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.spark { position: absolute; bottom: -10px; border-radius: 50%; background: #ffb547; box-shadow: 0 0 8px 2px rgba(255,150,40,.8); animation-name: sparkUp; animation-timing-function: linear; animation-iteration-count: infinite; opacity: 0; }
@keyframes sparkUp { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-105vh) translateX(30px); opacity: 0; } }
@keyframes tsBreath { 50% { transform: scale(1.02); filter: brightness(1.06); } }
.press { position: absolute; z-index: 4; bottom: 8vh; left: 50%; transform: translateX(-50%); color: #fff; letter-spacing: .32em; font-size: clamp(.75rem, 1.6vw, 1.05rem); white-space: nowrap; text-shadow: 0 0 14px rgba(255,255,255,.45), 0 2px 4px #000; animation: pulse 1.6s infinite; padding: .7rem 1.4rem; border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); }
.ts-ver { position: absolute; z-index: 4; bottom: .8rem; right: 1rem; font-size: .65rem; color: rgba(255,255,255,.45); letter-spacing: .15em; }
@keyframes pulse { 50% { opacity: .35; } }
.title-screen.playing .press, .title-screen.playing .ts-ver { animation: none; opacity: 0; transition: opacity .25s; }
.title-screen.playing .ts-bg { animation: introPlay 2.6s cubic-bezier(.3,.1,.3,1) forwards; }
.title-screen.playing .sparks .spark { animation-duration: .9s !important; }
.title-screen.playing::after { content: ""; position: absolute; z-index: 5; inset: -20%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.26) 50%, transparent 60%); animation: sweep 1.4s .5s ease-out forwards; transform: translateX(-100%); pointer-events: none; }
@keyframes introPlay { 0% { transform: scale(1); filter: brightness(.6) saturate(.8); } 18% { filter: brightness(1.35) saturate(1.2); } 30% { filter: brightness(1); } 100% { transform: scale(1.1); filter: brightness(1.05); } }
@keyframes sweep { to { transform: translateX(100%); } }
.title-screen.zoomout .ts-bg { animation: zoomOut 1s cubic-bezier(.6,0,.9,.4) forwards; }
.title-screen.zoomout .sparks, .title-screen.zoomout .ts-vignette, .title-screen.zoomout .ts-fill { opacity: 0; transition: opacity .5s; }
@keyframes zoomOut { from { transform: scale(1.1); opacity: 1; } to { transform: scale(3.4); opacity: 0; filter: brightness(.2) blur(3px); } }
#screen.fadein { animation: fadeIn .7s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* Cut-out logo used outside the title screen */
.logo-cut, .ms-logo, .brand-logo { filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 3px rgba(0,0,0,.9)) drop-shadow(0 4px 10px rgba(0,0,0,.7)) !important; }
.logo-cut { display: block; width: min(78vw, 420px); height: auto; margin: 0 auto .4rem; }
.logo-cut.sm { width: min(64vw, 300px); }


/* ---------- Create manager / draft ---------- */
.create-wrap, .draft { max-width: 460px; margin: 4vh auto; }
.create-panel, .draft-panel { border-color: var(--line2); box-shadow: -18px 0 50px rgba(200,20,30,.14), 18px 0 50px rgba(31,95,214,.14), var(--shadow); }

/* ---------- Mode select ---------- */
body.ms-on { background: #050608; }
.ms { position: relative; min-height: 100dvh; display: flex; flex-direction: column; color: #fff; background: radial-gradient(900px 600px at 0% 30%, rgba(200,20,30,.22), transparent 60%), radial-gradient(900px 600px at 100% 30%, rgba(31,95,214,.24), transparent 60%), #050608; }
.ms-logo { position: absolute; z-index: 5; top: 1.2vh; left: 50%; transform: translateX(-50%); width: min(46vw, 380px); height: auto; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(0,0,0,.85)); }
.ms-stage { flex: 1; display: flex; gap: 0; min-height: 0; }
.ms-card { position: relative; flex: 1; border: 0; padding: 0; overflow: hidden; background: #000; transition: flex .55s cubic-bezier(.2,.8,.2,1); outline: none; text-align: left; color: #fff; min-height: 70vh; }
.ms-card + .ms-card { border-left: 1px solid rgba(255,255,255,.08); }
.ms-img { position: absolute; inset: 0; background-size: cover; background-position: center 30%; transform-origin: 50% 22%; transform: scale(1.04); filter: brightness(.55) saturate(.85); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s; }
.ms-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 25%, transparent 50%, rgba(0,0,0,.92) 100%); }
.ms-card.red .ms-shade { box-shadow: inset 0 -4px 0 var(--red); } .ms-card.blue .ms-shade { box-shadow: inset 0 -4px 0 var(--blue); }
.ms-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 2.2rem 2.2rem; display: flex; flex-direction: column; gap: .35rem; }
.ms-card.blue .ms-text { text-align: right; align-items: flex-end; }
.ms-title { font-size: clamp(1.25rem, 3vw, 2.6rem); line-height: 1; letter-spacing: .04em; text-shadow: 0 3px 14px rgba(0,0,0,.8); background: linear-gradient(180deg, #fff 0%, #d6dde5 50%, #8c97a5 52%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-sub { font-size: .78rem; color: var(--amber); letter-spacing: .08em; text-transform: uppercase; }
.ms-desc, .ms-go { max-width: 440px; opacity: 0; transform: translateY(8px); transition: opacity .35s .1s, transform .35s .1s; }
.ms-desc { font-size: .95rem; color: #d9dee5; }
.ms-go { font-family: 'Russo One', sans-serif; font-size: .72rem; letter-spacing: .24em; color: var(--amber); }
.ms-card.red .ms-title { filter: drop-shadow(0 0 0 transparent); }
.ms-stage.has-active .ms-card { flex: .7; }
.ms-stage.has-active .ms-card.active { flex: 1.3; }
.ms-stage.has-active .ms-card:not(.active) .ms-img { filter: brightness(.22) saturate(.3) grayscale(.6); }
.ms-card.active .ms-img { transform: scale(1.1); filter: brightness(.9) saturate(1.05); }
.ms-card.active .ms-desc, .ms-card.active .ms-go { opacity: 1; transform: none; }
.ms-card.red.active { box-shadow: inset 0 0 120px rgba(200,20,30,.45); }
.ms-card.blue.active { box-shadow: inset 0 0 120px rgba(31,95,214,.5); }
.ms-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 1.4rem; background: rgba(5,6,8,.92); border-top: 1px solid rgba(255,255,255,.07); }
.ms-mgr { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #e4e8ed; }
.ms-mgr .sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); }
.ms-mgr .muted { color: #8d97a5; }
.utility { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.utility button { background: none; border: 0; color: #8d97a5; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .3rem 0; }
.utility button:hover { color: #fff; }
@media (max-width: 760px) {
  .ms-logo { position: relative; left: auto; top: auto; transform: none; display: block; margin: .5rem auto .2rem; width: min(58vw, 240px); }
  .ms-stage { flex-direction: column; }
  .ms-card { min-height: 0; flex: 1; }
  .ms-card + .ms-card { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .ms-img { background-position: center 18%; transform-origin: 50% 18%; }
  .ms-card.blue .ms-text { text-align: left; align-items: flex-start; }
  .ms-text { padding: 0 1rem 1.2rem; }
  .ms-desc { font-size: .8rem; }
  .ms-stage.has-active .ms-card { flex: .55; }
  .ms-stage.has-active .ms-card.active { flex: 1.45; }
  .ms-stage.has-active .ms-card:not(.active) .ms-text { opacity: .55; }
  .ms-foot { justify-content: center; padding: .6rem .8rem; }
  .ms-mgr { width: 100%; justify-content: center; }
}

/* ---------- Fight screen ---------- */
.fight { max-width: 1100px; margin: 0 auto; }
.fight-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; margin-bottom: .7rem; }
.corner { display: flex; flex-direction: column; padding: .55rem .8rem; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }
.corner.red { border-left: 4px solid var(--red2); }
.corner.blue { border-right: 4px solid var(--blue2); text-align: right; }
.corner .cn { font-size: clamp(.85rem, 1.6vw, 1.1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.corner .cs { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.fight-mid { text-align: center; }
.fight-title { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
.round { font-size: 1.05rem; color: var(--amber); letter-spacing: .14em; }
.tug { position: relative; height: 22px; border-radius: 99px; overflow: hidden; background: #000; border: 1px solid var(--line2); box-shadow: inset 0 2px 6px rgba(0,0,0,.8); margin-bottom: .8rem; }
.tug-red, .tug-blue { position: absolute; top: 0; bottom: 0; transition: width .22s cubic-bezier(.2,1.6,.4,1); }
.tug-red { left: 0; width: 50%; background: linear-gradient(90deg, #6d070c, var(--red) 70%, #ff4a4a); }
.tug-blue { right: 0; width: 50%; background: linear-gradient(270deg, #0a2763, var(--blue) 70%, #5b95f9); }
.tug-knot { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 14px; margin-left: -7px; border-radius: 4px; background: linear-gradient(180deg, #fff, #c9ced6); box-shadow: 0 0 12px rgba(255,255,255,.75); transition: left .22s cubic-bezier(.2,1.6,.4,1); }
.tug.jolt .tug-knot { animation: jolt .25s; } @keyframes jolt { 40% { transform: scaleY(1.5); box-shadow: 0 0 22px #fff; } }
.tug-lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .6rem; letter-spacing: .4em; color: rgba(255,255,255,.8); text-shadow: 0 1px 2px #000; pointer-events: none; }
.tug.red-on .tug-red { box-shadow: 0 0 20px rgba(240,68,74,.8); filter: brightness(1.15); }
.tug.blue-on .tug-blue { box-shadow: 0 0 20px rgba(91,149,249,.8); filter: brightness(1.15); }
[data-cb="on"] .tug-red { background: linear-gradient(90deg, #6b3b00, #e08a00); } [data-cb="on"] .tug-blue { background: linear-gradient(270deg, #062f5a, #2a8cff); }
.arena { position: relative; height: 200px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line2);
  background: radial-gradient(closest-side at 50% 120%, rgba(255,240,210,.18), transparent), url(../assets/gyms/_placeholder.jpg) center 40% / cover; }
.arena::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(200,20,30,.35), transparent 30%, transparent 70%, rgba(31,95,214,.35)), linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.25)); }
body.desktop .arena { height: 260px; }
body.desktop .arena.three { height: min(56vh, 560px); background: #040507; }
.arena.three::before { display: none; }
.arena canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.ring2d { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12%; }
.ropes { position: absolute; left: 6%; right: 6%; top: 34%; height: 34%; border-top: 3px solid rgba(240,68,74,.75); border-bottom: 3px solid rgba(91,149,249,.75); box-shadow: 0 calc(1px * 0) 0 transparent; }
.ropes::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px solid rgba(255,255,255,.65); }
.f2d { position: relative; z-index: 2; width: clamp(64px, 11vw, 120px); transition: transform .14s ease-out; filter: drop-shadow(0 10px 14px rgba(0,0,0,.7)); }
.glove { width: 100%; height: auto; display: block; }
.glove path, .glove rect { stroke: rgba(0,0,0,.45); stroke-width: 2; }
.glove .lace { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 2.5; }
.glove.red path:first-child, .glove.red rect { fill: url(#none); fill: var(--red2); } .glove.blue path:first-child, .glove.blue rect { fill: var(--blue2); }
.glove rect { fill-opacity: .8; }
.f2d.r .glove { transform: scaleX(-1); }
.f2d.l.punch { animation: punchL .3s ease-out; } .f2d.r.punch { animation: punchR .3s ease-out; }
@keyframes punchL { 50% { transform: translateX(42%) rotate(8deg) scale(1.12); } } @keyframes punchR { 50% { transform: translateX(-42%) rotate(-8deg) scale(1.12); } }
.f2d.hit { animation: hitShake .3s; } @keyframes hitShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.f2d.down { transform: translateY(40%) rotate(80deg); opacity: .55; }
.f2d.r.down { transform: translateY(40%) rotate(-80deg); }
.hitfx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hitfx.big-r { animation: flashR .35s; } .hitfx.big-l { animation: flashL .35s; } .hitfx.small-r { animation: flashRs .25s; } .hitfx.small-l { animation: flashLs .25s; }
@keyframes flashR { 0% { background: radial-gradient(circle at 62% 50%, rgba(255,255,255,.75), transparent 30%); } 100% { background: transparent; } }
@keyframes flashL { 0% { background: radial-gradient(circle at 38% 50%, rgba(255,255,255,.75), transparent 30%); } 100% { background: transparent; } }
@keyframes flashRs { 0% { background: radial-gradient(circle at 62% 50%, rgba(255,255,255,.35), transparent 18%); } 100% { background: transparent; } }
@keyframes flashLs { 0% { background: radial-gradient(circle at 38% 50%, rgba(255,255,255,.35), transparent 18%); } 100% { background: transparent; } }
.chat { height: 280px; overflow-y: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem; margin-top: .8rem; }
body.desktop .chat { height: 220px; }
.msg { padding: .45rem .7rem; border-radius: 6px; margin-bottom: .35rem; font-size: .84rem; }
.msg.A { background: rgba(200,20,30,.13); border-left: 3px solid var(--red2); margin-right: 18%; }
.msg.B { background: rgba(31,95,214,.14); border-right: 3px solid var(--blue2); margin-left: 18%; text-align: right; }
.msg.ref { text-align: center; font-style: italic; color: var(--muted); }
.msg.round { font-weight: 800; font-style: normal; color: var(--text); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; letter-spacing: .06em; }

/* ---------- Solo ---------- */
.layout-solo { display: grid; gap: 1rem; }
body.desktop .layout-solo { grid-template-columns: 200px 1fr 1fr; align-items: start; }
.wide-span { grid-column: span 2; }
body:not(.desktop) .wide-span { grid-column: auto; }
.solo-desk { display: grid; gap: 1.1rem; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.05fr) minmax(280px, .9fr); align-items: start; }
.solo-desk .span-all { grid-column: 1 / -1; }
.sidenav { display: flex; gap: .35rem; flex-wrap: wrap; }
body.desktop .sidenav { flex-direction: column; position: sticky; top: 4.6rem; }
body.desktop .sidenav .btn { justify-content: flex-start; }
.sidenav .btn.blue { background: linear-gradient(90deg, rgba(31,95,214,.35), var(--panel2)); border-color: var(--blue2); color: var(--text); }
.shop-grid { display: grid; gap: .55rem; grid-template-columns: 1fr 1fr; }
.tcard { display: flex; flex-direction: column; gap: .2rem; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .65rem .75rem; transition: border-color .15s, transform .12s, background .15s; }
.tcard:hover:not(:disabled) { border-color: var(--amber); transform: translateY(-1px); background: var(--panel3); }
.tcard:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Fight Business: shell ---------- */
.layout-biz { display: grid; gap: 1rem; }
body.desktop .layout-biz { grid-template-columns: 210px 1fr; align-items: start; }
.biz-main { min-width: 0; }
.biz-dash .dash-cols { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 1rem; margin-top: 1rem; align-items: start; }
.board-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
body.desktop .board-grid { grid-template-columns: 1fr 1fr; }
.pin-paper { border-top: 3px solid var(--amber); }

/* ---------- London map ---------- */
.mapscreen { max-width: 1180px; margin: 0 auto; }
.map-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
.map-purse { display: flex; flex-direction: column; align-items: flex-end; font-size: 1.2rem; }
.lmap-wrap { background: radial-gradient(ellipse at center, rgba(255,255,255,.04), transparent 70%), var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: clamp(.5rem, 2vw, 1.4rem); box-shadow: var(--shadow); }
.lmap { position: relative; width: min(100%, calc((100dvh - 230px) * 913 / 705)); min-width: min(100%, 320px); max-width: 980px; margin: 0 auto; aspect-ratio: 913 / 705; user-select: none; touch-action: manipulation; }
.lmap img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.lm-base { filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
[data-theme="light"] .lm-base { filter: invert(.85) drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
.lm-layer { opacity: 0; transition: opacity .25s; filter: saturate(1.05) drop-shadow(0 0 18px rgba(255,255,255,.15)); }
.lm-layer.on { opacity: 1; }
.lm-label { position: absolute; transform: translate(-50%, -50%); font-size: clamp(.55rem, 1.3vw, .95rem); letter-spacing: .14em; color: rgba(255,255,255,.55); text-shadow: 0 2px 6px #000; pointer-events: none; transition: color .2s, transform .2s, opacity .2s; white-space: nowrap; }
[data-theme="light"] .lm-label { color: rgba(20,24,30,.55); text-shadow: none; }
.lm-label.on { color: #fff; transform: translate(-50%, -50%) scale(1.12); text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.lmap.picked .lm-label.on { opacity: .25; }
.lm-pins { position: absolute; inset: 0; pointer-events: none; }
.lm-pin { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; background: none; border: 0; padding: 0; width: 34px; height: 44px; animation: pinDrop .35s cubic-bezier(.3,1.5,.5,1) both; }
.lm-pin:nth-child(2) { animation-delay: .06s; } .lm-pin:nth-child(3) { animation-delay: .12s; }
@keyframes pinDrop { from { transform: translate(-50%, -160%); opacity: 0; } }
.lm-pin .dot { position: absolute; left: 50%; top: 0; width: 30px; height: 30px; margin-left: -15px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #e9edf2; border: 3px solid #0b0e12; box-shadow: 0 6px 12px rgba(0,0,0,.6); transition: transform .15s, background .15s; }
.lm-pin .tier { position: absolute; left: 0; right: 0; top: 6px; font-family: 'Russo One', sans-serif; font-size: .78rem; color: #0b0e12; }
.lm-pin.open .dot { background: var(--green); } .lm-pin.dear .dot { background: #8c96a3; } .lm-pin.taken .dot { background: var(--amber); } .lm-pin.mine .dot { background: var(--blue2); }
.lm-pin.active .dot, .lm-pin:hover .dot { transform: rotate(-45deg) scale(1.22); }
.lm-card { position: absolute; z-index: 5; width: min(320px, 46%); background: rgba(10,13,18,.96); color: #eef1f5; border: 1px solid var(--line2); border-radius: var(--radius); padding: .8rem .9rem; box-shadow: 0 18px 40px rgba(0,0,0,.6); pointer-events: none; display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.lm-card.above { transform: translateY(-100%); }
.lm-card b { font-family: 'Russo One', sans-serif; font-weight: 400; font-size: 1rem; }
.lm-stats { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: #c8cfd8; margin: .2rem 0; }
.lm-go { margin-top: .35rem; font-family: 'Russo One', sans-serif; font-size: .66rem; letter-spacing: .2em; color: var(--amber); }
@media (max-width: 640px) { .lm-card, .lm-card.above { position: fixed; left: .6rem !important; right: .6rem; top: auto !important; bottom: .6rem; width: auto; transform: none; font-size: .84rem; } .lm-pin { width: 28px; height: 36px; } .lm-pin .dot { width: 24px; height: 24px; margin-left: -12px; } .lm-pin .tier { top: 4px; font-size: .64rem; } }

/* ---------- Gym View (full screen) ---------- */
.gymview { position: relative; width: 100%; height: calc(100dvh - 57px); min-height: 480px; overflow: hidden; background-size: cover, cover; background-position: center, center; background-color: #050608; }
.gymview.t1 { filter: sepia(.18) saturate(.9); } .gymview.t3 { filter: saturate(1.1) contrast(1.05); }
.gv-grade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(200,20,30,.18), transparent 25%, transparent 75%, rgba(31,95,214,.18)), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55)); }
.gpin { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; z-index: 2; display: flex; align-items: center; gap: .4rem; }
.gpin .dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 0 4px rgba(255,255,255,.22), 0 0 18px rgba(255,255,255,.6); animation: gpulse 2.4s infinite; flex: none; }
@keyframes gpulse { 50% { box-shadow: 0 0 0 9px rgba(255,255,255,0), 0 0 18px rgba(255,255,255,.5); } }
.gpin .lbl { display: inline-block; opacity: .92; font-family: 'Russo One', sans-serif; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(5,7,10,.8); padding: .2rem .45rem; border-radius: 4px; white-space: nowrap; }
.gpin.active .lbl { background: var(--amber); color: #111; }
.gpin.nolabel .lbl { display: none; } .gpin.nolabel.active .lbl { display: inline-block; }
.gpin.active .dot { background: var(--amber); box-shadow: 0 0 0 5px rgba(245,165,36,.3), 0 0 24px rgba(245,165,36,.9); animation: none; }
.gpin .badge { position: absolute; left: 10px; top: -12px; background: var(--red2); color: #fff; font-size: .62rem; font-weight: 800; border-radius: 99px; padding: .05rem .35rem; }
.hotcard { position: absolute; z-index: 6; background: rgba(6,8,12,.93); color: #fff; padding: .6rem .8rem; border-radius: 8px; border-left: 3px solid var(--amber); font-size: .8rem; pointer-events: none; max-width: 240px; box-shadow: 0 12px 30px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: .15rem; }
.hotcard b { font-family: 'Russo One', sans-serif; font-weight: 400; font-size: .92rem; }
.wallcal { position: absolute; z-index: 1; width: 64px; background: #fafafa; color: #111; border-radius: 4px; text-align: center; box-shadow: 0 8px 18px rgba(0,0,0,.55); overflow: hidden; transform: rotate(-2deg); }
.wallcal .top { background: var(--red); color: #fff; font-family: 'Russo One', sans-serif; font-size: .5rem; padding: .18rem; letter-spacing: .08em; }
.wallcal .page { font-family: 'Russo One', sans-serif; font-size: 1.5rem; padding: .25rem .2rem .35rem; }
.wallcal .tear { position: absolute; inset: 0; background: #fff; animation: tear .7s forwards; transform-origin: top left; }
@keyframes tear { to { transform: rotate(-35deg) translate(-30px, 80px); opacity: 0; } }
.corkboard { position: absolute; z-index: 1; width: 120px; background: #b98a57; background-image: radial-gradient(rgba(0,0,0,.15) 1px, transparent 1px); background-size: 6px 6px; border: 4px solid #5e4126; color: #1a1209; padding: .4rem .5rem; font-size: .62rem; line-height: 1.3; box-shadow: 0 8px 18px rgba(0,0,0,.55); transform: rotate(1.5deg); }
.corkboard b { display: block; font-family: 'Russo One', sans-serif; font-weight: 400; font-size: .62rem; background: #fff8e6; padding: .1rem .3rem; margin-bottom: .2rem; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
#backgym { margin: 0 0 .8rem; }

/* ---------- Tutorial overlay ---------- */
#tut { position: fixed; inset: 0; z-index: 200; }
#tut .shade { position: absolute; inset: 0; }
#tut .ring { position: fixed; border: 2px solid var(--amber); border-radius: 10px; box-shadow: 0 0 0 9999px rgba(2,4,8,.74), 0 0 22px rgba(245,165,36,.6); pointer-events: none; transition: left .2s, top .2s, width .2s, height .2s, opacity .2s; }
#tut .tip { position: fixed; background: var(--panel); border: 1px solid var(--amber); border-radius: 10px; padding: .8rem .9rem; font-size: .86rem; box-shadow: 0 18px 40px rgba(0,0,0,.6); transition: left .2s, top .2s; }
#tut .tip b { color: var(--amber); display: block; margin-bottom: .25rem; letter-spacing: .14em; font-size: .7rem; font-family: 'Russo One', sans-serif; font-weight: 400; }
.tut-skip { position: fixed; bottom: .9rem; right: .9rem; z-index: 5; background: rgba(10,13,18,.75); color: #aab4c2; border: 1px solid rgba(255,255,255,.15); border-radius: 99px; padding: .3rem .8rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.tut-skip:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) { .solo-desk { grid-template-columns: 1fr 1fr; } .solo-desk > .col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; } .biz-dash .dash-cols { grid-template-columns: 1fr 1fr; } .biz-dash .dash-cols > .col:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .grid3 { grid-template-columns: 1fr; } .hide-m { display: none; } .shop-grid { grid-template-columns: 1fr 1fr; } #topbar { padding: .5rem .7rem; } .brand-logo { height: 26px; } .fight-head { grid-template-columns: 1fr 1fr; } .fight-mid { grid-column: 1 / -1; order: -1; } }
@media (max-width: 420px) { .shop-grid { grid-template-columns: 1fr; } #topbar .brand span { display: none; } }

/* Beta badge */
.beta { display: inline-block; vertical-align: super; margin-left: .45em; padding: .22em .55em .18em; font-family: 'Russo One', sans-serif; font-size: max(.32em, 10px); letter-spacing: .16em; line-height: 1; color: #111; background: var(--amber); -webkit-text-fill-color: #111; border-radius: 4px; box-shadow: 0 0 14px rgba(245,165,36,.45); text-shadow: none; }
.beta.sm { font-size: 8px; padding: .25em .5em .2em; vertical-align: 1px; box-shadow: none; }

/* Mode select: light theme */
[data-theme="light"] body.ms-on { background: #e4e7eb; }
[data-theme="light"] .ms { color: #13171c; background: radial-gradient(900px 600px at 0% 30%, rgba(200,20,30,.12), transparent 60%), radial-gradient(900px 600px at 100% 30%, rgba(31,95,214,.12), transparent 60%), #e4e7eb; }
[data-theme="light"] .ms-card { background: #cfd5dc; }
[data-theme="light"] .ms-card + .ms-card { border-color: rgba(0,0,0,.12); }
[data-theme="light"] .ms-shade { background: linear-gradient(180deg, rgba(228,231,235,.55) 0%, transparent 22%, transparent 48%, rgba(240,242,245,.95) 100%); }
[data-theme="light"] .ms-img { filter: brightness(.85) saturate(.9); }
[data-theme="light"] .ms-card.active .ms-img { filter: brightness(1) saturate(1.05); }
[data-theme="light"] .ms-stage.has-active .ms-card:not(.active) .ms-img { filter: brightness(.6) saturate(.25) grayscale(.6); }
[data-theme="light"] .ms-title { background: linear-gradient(180deg, #2a313a 0%, #4a535e 50%, #13171c 52%, #3a424c 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
[data-theme="light"] .ms-desc { color: #2a313a; }
[data-theme="light"] .ms-go, [data-theme="light"] .ms-sub { color: #9a5800; }
[data-theme="light"] .ms-card.red.active { box-shadow: inset 0 0 120px rgba(200,20,30,.3); }
[data-theme="light"] .ms-card.blue.active { box-shadow: inset 0 0 120px rgba(31,95,214,.3); }
[data-theme="light"] .ms-foot { background: rgba(246,247,249,.96); border-top-color: rgba(0,0,0,.1); }
[data-theme="light"] .ms-mgr { color: #13171c; } [data-theme="light"] .ms-mgr .sep { background: rgba(0,0,0,.18); }
[data-theme="light"] .ms-mgr .muted, [data-theme="light"] .utility button { color: #48525e; }
[data-theme="light"] .utility button:hover { color: #000; }
/* Mobile buy button inside the gym card */
.lm-card .btn { pointer-events: auto; margin-top: .5rem; }
@media (max-width: 640px) { .lm-card { pointer-events: auto; } }
.natpick { display: flex; align-items: center; gap: .5rem; } .natpick input { flex: 1; } #mflag .flag { margin: 0; width: 24px; height: 18px; }
#mnat { margin-top: .4rem; padding: .2rem; } #mnat option { padding: .3rem .4rem; }

@media (orientation: portrait) { .ts-fill { inset: 0; background-size: 100% auto; background-repeat: no-repeat; filter: none; background-color: #000; } .ts-bg { width: 100vw; } }
@media (orientation: landscape) { .ts-fill { background-size: cover; } }