/* Smooth 3D art with quiet surfaces: the action, not decoration, leads each screen. */
body.modern-game { --display:system-ui,-apple-system,'Segoe UI',sans-serif; --body:system-ui,-apple-system,'Segoe UI',sans-serif; --bg:#f3f6f8; --panel:#fff; --ink:#14283a; --mute:#536777; --line:#dfe7eb; --r:14px; --r-lg:22px; background:radial-gradient(ellipse at 100% 0%,#e3f2ec,transparent 60%),#f3f6f8; background-attachment:fixed; }
:root[data-theme="dark"] body.modern-game { --bg:#0c1722; --panel:#142532; --ink:#edf5f7; --mute:#afc1cc; --line:#2d4352; background:radial-gradient(ellipse at 100% 0%,#153a35,transparent 55%),#0c1722; }
.modern-game h1,.modern-game h2,.modern-game h3 { font-family:var(--display); text-transform:none; letter-spacing:-.035em; }
.modern-game h1 { font-size:clamp(26px,4vw,38px); line-height:1.16; }
.modern-game .label { letter-spacing:.04em; font-weight:700; }
.art3d { display:block; object-fit:contain; flex-shrink:0; user-select:none; pointer-events:none; }
.modern-game .card { border-radius:20px; border:1px solid var(--line); box-shadow:0 6px 22px -16px #173f5345; }
.modern-game .btn { min-height:46px; border-radius:13px; font-weight:700; transition:transform .15s,box-shadow .15s,background .15s; }
.modern-game .btn:active { transform:scale(.975); }
.modern-game .btn-primary { background:linear-gradient(135deg,#147858,#0d5b49); color:#fff; border-color:#12684f; box-shadow:0 6px 14px -7px #0d664a99; }
.modern-game .btn-primary:hover { background:linear-gradient(135deg,#178965,#116c57); }
.modern-game .btn-primary:disabled { opacity:.55; }
.modern-game .btn:focus-visible,.modern-game a:focus-visible,.welcome-steps button:focus-visible { outline:3px solid #239ec1; outline-offset:3px; }
.modern-game .top { background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(16px); border-bottom:0; }
.modern-game .bug { border-radius:16px; background:linear-gradient(115deg,#152b3e,#163e45); border:1px solid #ffffff22; box-shadow:0 7px 19px -10px #071b3e70; }
.modern-game .bug-club { background:transparent; clip-path:none; border-right:1px solid #ffffff20; }
.modern-game .bug-seg b { font-family:var(--body); letter-spacing:-.03em; }
.modern-game .bug-next { background:#ffffff09; }
.modern-game .nav a { min-height:48px; border-radius:12px; }
.modern-game .nav a .nav-art { width:38px; height:38px; }
.modern-game .nav a.on { background:#e4f5ed; color:#13563f; }
.eyebrow { font-size:10px; font-weight:800; letter-spacing:.12em; }
.club-hub-heading { display:flex; align-items:center; gap:11px; margin:0 0 14px; }
.club-hub-heading>.crest { width:34px; height:40px; }
.club-hub-heading .label { font-size:10px; color:var(--mute); }
.club-hub-heading h1 { font-size:21px; margin:2px 0 0; overflow-wrap:anywhere; }
.hub-save { display:flex; align-items:center; gap:6px; margin-left:auto; font-size:11px; color:var(--mute); white-space:nowrap; }
.hub-save i { height:6px; width:6px; background:#188658; border-radius:50%; box-shadow:0 0 0 3px #18865815; }
.modern-game .welcome-banner,.hub-feature { position:relative; overflow:hidden; border:1px solid #ffffff12; border-radius:24px; background:radial-gradient(ellipse at 95% 35%,#226858 0%,transparent 65%),linear-gradient(120deg,#10283b,#123a3e); padding:24px; min-height:212px; color:#fff; box-shadow:0 15px 30px -20px #0b354b99; isolation:isolate; }
.welcome-copy { position:relative; z-index:1; max-width:64%; }
.welcome-copy .eyebrow { color:#8ed2b6; font-size:9px; }
.modern-game .welcome-copy h2 { font-size:clamp(26px,4vw,38px); line-height:1.12; margin:12px 0; color:#fff; font-weight:800; }
.modern-game .welcome-copy p { font-size:13px; line-height:1.55; margin:0; color:#c4dedc; }
.welcome-stadium { position:absolute; width:56%; height:190px; right:-24px; bottom:-10px; z-index:0; filter:drop-shadow(0 12px 15px #0005); }
.guide-progress-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:17px 2px; font-size:12px; font-weight:650; color:var(--mute); }
.guide-progress-row>b { margin-left:auto; color:var(--ink); font-size:12px; }
.modern-game .guide-progress-row .welcome-progress { flex:0 0 100%; height:5px; margin:0; background:var(--line); border-radius:10px; overflow:hidden; }
.modern-game .welcome-progress>span { display:block; height:100%; background:linear-gradient(90deg,#16714f,#45b289); border-radius:10px; transition:width .35s; }
.modern-game .welcome-grid { display:flex; flex-direction:column; gap:16px; }
.modern-game .welcome-task { padding:19px; margin:0; }
.welcome-task-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.welcome-task-heading .task-art { width:64px; height:64px; }
.modern-game .welcome-task .label { color:#197353; font-size:10px; letter-spacing:.07em; }
:root[data-theme="dark"] .modern-game .welcome-task .label { color:#91dfb8; }
.modern-game .welcome-task h2 { font-size:25px; line-height:1.15; margin:7px 0 0; }
.modern-game .welcome-task p { font-size:14px; line-height:1.55; color:var(--mute); margin:10px 0 0; }
.modern-game .welcome-actions { gap:4px; margin-top:17px; }
.modern-game .welcome-actions .btn-primary { width:100%; min-height:50px; font-size:14px; }
.modern-game .welcome-actions .btn-ghost { width:100%; min-height:34px; font-size:12px; color:var(--mute); }
.modern-game .welcome-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; }
.modern-game .welcome-steps li { padding:0; border:1px solid var(--line); background:var(--panel); border-radius:15px; display:block; min-width:0; }
.modern-game .welcome-steps li.current { border:2px solid #167557; background:#eaf7f0; box-shadow:0 3px 10px -7px #16755799; }
.modern-game .welcome-steps li.done { border-color:#90c8ad; }
.modern-game .welcome-steps button { position:relative; border:0; border-radius:14px; background:transparent; width:100%; display:flex; align-items:center; flex-direction:column; padding:11px 4px 9px; color:var(--ink); cursor:pointer; }
.modern-game .welcome-steps button:disabled { cursor:default; opacity:.68; }
.modern-game .welcome-steps .step-art { width:42px; height:42px; margin-bottom:6px; }
.modern-game .welcome-steps .step-number { position:absolute; top:5px; left:5px; width:16px; height:16px; display:grid; place-items:center; background:var(--panel); border:1px solid var(--line); border-radius:50%; font-size:9px; font-weight:800; }
.modern-game .welcome-steps b { font-size:11px; line-height:1.25; min-height:28px; max-width:72px; }
.modern-game .welcome-steps small { font-size:9px; color:var(--mute); margin-top:3px; }
.modern-game .welcome-steps .current small,.modern-game .welcome-steps .done small { color:#146747; font-weight:800; }
.modern-game .welcome-footer { gap:2px; flex-direction:column; margin:16px 0 4px; }
.modern-game .welcome-footer .btn { font-size:12px; min-height:44px; }
.modern-game .welcome-footer p { font-size:12px; color:var(--mute); min-width:0; text-align:center; margin:4px 0; }
.modern-game .welcome-next summary { font-size:13px; padding:14px 0; }
.modern-game .solo-panel { margin:18px 0 0; padding:16px; gap:12px; border-radius:18px; border:1px solid var(--line); background:var(--panel); box-shadow:none; }
.modern-game .solo-panel-copy { min-width:0; flex:1 1 180px; }
.modern-game .solo-panel .label { display:block; font-size:9px; color:var(--mute); margin-bottom:5px; }
.modern-game .solo-panel b { font-size:15px; }
.modern-game .solo-panel p { margin:5px 0 0; font-size:12px; color:var(--mute); line-height:1.4; }
.modern-game .solo-panel .btn { font-size:13px; }
.hub-feature { display:flex; align-items:center; margin-bottom:16px; min-height:200px; }
.hub-feature>div { z-index:1; }
.hub-feature .eyebrow { color:#acd9ca; }
.hub-feature h2 { font-size:30px; line-height:1.1; margin:10px 0 18px; color:#fff; }
.hub-feature .btn { font-size:12px; }
.hub-feature-art { position:absolute; width:50%; height:200px; right:-10px; bottom:-15px; }
.hub-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0 22px; }
.hub-shortcuts a { display:grid; justify-items:center; padding:12px 4px; border:1px solid var(--line); background:var(--panel); border-radius:16px; text-decoration:none; color:var(--ink); transition:transform .15s; }
.hub-shortcuts a:active { transform:scale(.96); }
.hub-shortcuts .art3d { width:52px; height:52px; }
.hub-shortcuts b { font-size:12px; margin-top:4px; }
.modern-game .auth { background:none; }
.modern-game .solo-auth-hero { min-height:320px; background:radial-gradient(ellipse at 85% 50%,#236b56,transparent 70%),#102c3b; padding:32px 24px; overflow:hidden; display:block; }
.modern-game .solo-auth-hero:after { display:none; }
.auth-brand { max-width:65%; }
.solo-auth-hero .eyebrow { font-size:9px; color:#9cd5bd; }
.modern-game .solo-auth-hero h1 { font-size:42px; line-height:.98; margin:18px 0; font-style:normal; letter-spacing:-.055em; }
.modern-game .solo-auth-hero h1 span { color:#f1d18b; }
.modern-game .solo-auth-hero p { font-size:14px; color:#bddad2; }
.modern-game .auth-stadium { position:absolute; width:52%; height:230px; right:-16px; bottom:28px; z-index:0; }
.modern-game .solo-auth-hero .auth-feats { display:flex; flex-wrap:wrap; gap:7px; margin-top:26px; }
.modern-game .auth-feats span { padding:6px 10px; font-size:10px; border:1px solid #ffffff25; background:#ffffff0b; box-shadow:none; }
.modern-game .auth-form { padding-top:28px; gap:14px; }
.modern-game .auth-form h2 { font-size:28px; margin:0; }
.modern-game .auth-form>p { font-size:14px; line-height:1.6; margin:0; }
.modern-game .auth-form .label { font-size:11px; }
.modern-game .auth-form input[type=text],.modern-game .auth-form input[type=password],.modern-game .auth-form input[type=email] { background:var(--panel); border-radius:12px; border:1px solid var(--line2); min-height:48px; }
.modern-game .ms-grid { gap:9px; }
.modern-game .ms-grid a { min-height:88px; border:1px solid var(--line); background:var(--panel); gap:6px; border-radius:15px; }
.modern-game .ms-grid .nav-art { width:42px; height:42px; }
.modern-game .ms-grid a>svg { margin:8px 0; }
.modern-game .modal-more { max-height:85dvh; overflow-y:auto; border-radius:25px 25px 0 0; }
:root[data-theme="dark"] .modern-game .welcome-steps li.current { background:#153e30; }
:root[data-theme="dark"] .modern-game .welcome-steps .current small,:root[data-theme="dark"] .modern-game .welcome-steps .done small { color:#9be6bd; }
@media(max-width:880px) {
  .modern-game .content { padding-top:15px; padding-bottom:calc(112px + env(safe-area-inset-bottom,0px)); }
  .modern-game .bottom-nav { left:10px; right:10px; bottom:max(8px,env(safe-area-inset-bottom,0px)); padding:6px 5px; display:flex; justify-content:space-between; gap:2px; border:1px solid var(--line); border-radius:23px; background:color-mix(in srgb,var(--panel) 95%,transparent); box-shadow:0 10px 35px -10px #112e3f44; overflow:visible; }
  .modern-game .bottom-nav a,.modern-game .bottom-nav .bn-more { display:flex; flex:1 1 0; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; min-height:62px; padding:3px 1px 5px; border-radius:17px; font-size:10px; color:var(--mute); font-weight:700; position:relative; }
  .modern-game .bottom-nav .nav-art { width:36px; height:36px; transition:transform .18s; }
  .modern-game .bottom-nav a.on { color:#125d45; background:#e3f3eb; }
  .modern-game .bottom-nav a.on .nav-art { transform:translateY(-2px); }
  .modern-game .bottom-nav a.on:after { content:''; position:absolute; bottom:2px; width:12px; height:3px; border-radius:3px; background:#177553; }
  .modern-game .bottom-nav a:active .nav-art,.modern-game .bn-more:active .nav-art { transform:scale(.9); }
  .modern-game .bottom-nav .bn-more span { font-size:10px; }
  .modern-game .match-thumb-bar { bottom:calc(90px + env(safe-area-inset-bottom,0px)); }
  .modern-game.view-match .content { padding-bottom:calc(195px + env(safe-area-inset-bottom,0px)); }
  :root[data-theme="dark"] .modern-game .bottom-nav a.on { color:#b5f5d2; background:#1c4536; }
}
@media(min-width:881px) { .modern-game .welcome-banner { min-height:250px; } .welcome-stadium { width:43%; height:280px; right:20px; } .modern-game .welcome-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); align-items:start; } .modern-game .welcome-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .modern-game .solo-auth-hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:56px; } .auth-brand { max-width:100%; } .modern-game .auth-stadium { width:80%; height:38%; bottom:8%; opacity:.95; } .modern-game .solo-auth-hero .auth-feats { margin-bottom:38vh; } }
@media(max-width:350px) { .modern-game .welcome-banner { padding:20px 17px; min-height:190px; } .modern-game .welcome-copy h2 { font-size:23px; } .welcome-stadium { height:155px; right:-30px; } .modern-game .welcome-copy p { font-size:12px; } .modern-game .welcome-steps { gap:5px; } .modern-game .welcome-steps b { font-size:10px; } .modern-game .welcome-task { padding:16px; } .modern-game .welcome-task h2 { font-size:23px; } .club-hub-heading h1 { font-size:18px; } .modern-game .solo-auth-hero h1 { font-size:36px; } }
@media(prefers-reduced-motion:reduce) { .modern-game *, .modern-game *:before,.modern-game *:after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }
.more-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:3px 0 16px; }
.more-header .label { font-size:10px; color:var(--mute); }
.more-header h2 { margin:4px 0 0; font-size:24px; }
.more-header .btn { min-width:46px; font-size:20px; }
.modern-game .ms-grid a.on { outline:2px solid #167557; background:#eaf7f0; color:#125d45; }
:root[data-theme="dark"] .modern-game .ms-grid a.on { outline-color:#61bb95; background:#193d30; color:#d9f4e6; }
.modern-game .welcome-steps button:disabled { opacity:.82; }
.modern-game .welcome-steps small { font-size:10px; }
@media(min-width:881px) {
  .modern-game .solo-auth-hero { position:sticky; top:0; height:100dvh; min-height:650px; justify-content:flex-start; padding-top:70px; align-self:start; }
  .modern-game .solo-auth-hero h1 { font-size:clamp(48px,5vw,72px); }
  .modern-game .solo-auth-hero .auth-feats { margin-bottom:0; }
  .modern-game .auth-stadium { height:43%; width:80%; bottom:3%; }
}
/* Browser landing page: keep the stadium illustration away from the mobile copy. */
@media(max-width:880px){.web-auth-hero .auth-brand{max-width:100%}.web-auth-hero .auth-brand p{max-width:58%}.modern-game .web-auth-hero .auth-stadium{width:40%;height:150px;right:0;bottom:70px}.modern-game .web-auth-hero .auth-feats{position:relative;z-index:2}}

/* Compact mobile entry: keep the club identity while bringing the form into view. */
@media(max-width:600px) {
  .modern-game .web-auth-hero { min-height:0; padding:20px; }
  .modern-game .web-auth-hero .auth-brand { max-width:calc(100% - 105px); }
  .modern-game .web-auth-hero .eyebrow { display:block; font-size:8px; line-height:1.4; letter-spacing:.1em; }
  .modern-game .web-auth-hero h1 { font-size:34px; line-height:1.02; margin:9px 0 0; }
  .modern-game .web-auth-hero .auth-brand p,.modern-game .web-auth-hero .auth-feats { display:none; }
  .modern-game .web-auth-hero .auth-stadium { width:118px; height:105px; right:8px; top:50%; bottom:auto; transform:translateY(-50%); }
  .auth-form { padding-top:22px; gap:14px; }
}
@media(max-width:380px) {
  .modern-game .web-auth-hero { padding:18px 16px; }
  .modern-game .web-auth-hero .auth-brand { max-width:calc(100% - 90px); }
  .modern-game .web-auth-hero h1 { font-size:29px; }
  .modern-game .web-auth-hero .auth-stadium { width:100px; height:90px; right:4px; }
}

.first-team-review{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;margin-bottom:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.first-team-review p{margin:5px 0 0;color:var(--mute);font-size:14px}.first-team-review .btn{flex-shrink:0}
@media(max-width:650px){.first-team-review{align-items:stretch;flex-direction:column}.first-team-review .btn{text-align:center}}

/* Compact role-based training choices with per-option estimates. */
.training-focus-choice{display:grid;gap:2px;min-width:220px}
.training-focus-choice select{width:100%;max-width:100%}
.training-overview .overview-focus{min-width:240px}