/* My sport slots and a disposable first-season card. */
#view-my { max-width:1040px; }
#view-my h1 { font-size:30px; letter-spacing:-1.1px; line-height:1.3; }
#view-my .mp-intro { margin:0; font-size:14px; line-height:1.7; }
#my-profile-root { margin:26px 0 16px; }
.mp-overview { display:grid; gap:22px; align-items:start; }
.mp-sports-block { min-width:0; }
.mp-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mp-section-head h2 { margin:0; font-size:17px; letter-spacing:-.5px; }
.mp-section-head > span { color:var(--muted); font-size:12px; }
:is(#my-profile-root,#journey-start-card-root,#my-profile-dialog) svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.mp-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:368px; margin:18px 0 12px; }
.mp-slot { min-width:0; padding:4px; border:0; background:transparent; color:var(--text); display:flex; flex-direction:column; align-items:center; gap:8px; }
.mp-circle { display:block; position:relative; width:min(100%,104px); aspect-ratio:1; border:1px dashed var(--line); border-radius:50%; background:var(--surface); color:var(--accent); }
.mp-circle > svg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px!important; height:30px!important; stroke-width:1.5!important; }
.mp-add-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.mp-add-label svg { width:25px!important; height:25px!important; stroke-width:1.5!important; }
.mp-add-label strong { color:var(--text); font-size:12px!important; font-weight:600; }
.mp-circle > img { position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); object-fit:cover; border-radius:50%; }
.mp-slot.is-filled .mp-circle { border-style:solid; }
.mp-slot strong { font-size:15px; font-weight:650; }
.mp-slot small { color:var(--muted); font-size:12px; line-height:1.5; }
.mp-slot-level { display:flex; align-items:center; justify-content:center; gap:3px; }
.mp-slot-level svg { width:11px!important; height:11px!important; }
.mp-slot-hint { color:var(--muted); font-size:12px; line-height:1.7; margin:0; }
.mp-status { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:12px; line-height:1.6; margin-top:8px; }
.mp-status:empty { display:none; }
.mp-status button { background:transparent; border:0; padding:10px 0; min-height:44px; color:var(--accent); font-size:12px; }
.mp-first { display:flex; align-items:center; gap:20px; min-width:0; padding:22px; border:1px solid var(--line); border-radius:22px; background:var(--surface); }
.mp-first-copy { flex:1; min-width:0; }
.mp-first-copy > span,.mp-start-log > div > span { display:block; color:var(--accent); font-size:12px; }
.mp-first h2 { font-size:20px; letter-spacing:-.7px; margin:7px 0; line-height:1.4; word-break:keep-all; }
.mp-first p { font-size:13px; line-height:1.7; color:var(--muted); margin:0; }
.mp-first .mp-primary { width:auto; min-height:44px; padding:11px 14px; margin-top:16px; font-size:13px; }
.mp-first-art { width:76px; flex-shrink:0; }
.mp-first.is-locked { gap:16px; }
.mp-first.is-locked .mp-first-art { width:44px; }
.mp-first.is-locked h2 { font-size:17px; margin-block:6px; }
.mp-first-placeholder { display:grid; place-items:center; height:58px; color:var(--accent); }
.mp-first-placeholder svg { width:34px!important; height:34px!important; }
.mp-first-art .mp-story { width:76px; height:135px; border-radius:8px; }
.mp-first-art .mp-story-inner { padding:8px; }
.mp-first-art .mp-story-logo { width:24px; }
.mp-first-art .mp-story-copy > span,.mp-first-art .mp-story-copy > p,.mp-first-art .mp-story-level,.mp-first-art .mp-story-copy footer { display:none; }
.mp-first-art .mp-story-copy h3 { font-size:12px; letter-spacing:-.5px; margin:0 0 5px; }
.mp-primary,.mp-secondary { width:100%; min-height:48px; display:flex; justify-content:center; align-items:center; gap:8px; padding:13px 16px; border-radius:14px; font-size:14px; font-weight:650; line-height:1.4; }
.mp-primary { border:1px solid transparent; background:var(--action-bg); color:#fff; }
.mp-secondary { border:1px solid var(--line); background:var(--surface); color:var(--text); }
.mp-next-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0 0; }
.mp-next-links > button { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px 12px; min-width:0; border:1px solid var(--line); border-radius:16px; background:transparent; color:var(--text); text-align:left; }
.mp-next-links > button > span { display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:9px; row-gap:4px; }
.mp-next-links > button > span svg { grid-row:span 2; color:var(--accent); align-self:center; }
.mp-next-links strong { font-size:15px; font-weight:600; }
.mp-next-links small { grid-column:1/-1; color:var(--muted); font-size:11px; line-height:1.6; word-break:keep-all; }
.mp-next-links > button > span svg { grid-row:1; }
.mp-next-links > button > svg { width:15px!important; height:15px!important; }
.mp-design-note { color:var(--muted); font-size:11px; line-height:1.7; margin:16px 0 0; }
.mp-settings { margin-top:22px; border-top:1px solid var(--line); }
.mp-settings > summary { min-height:64px; display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--text); font-size:14px; cursor:pointer; padding:15px 0; list-style:none; }
.mp-settings > summary::-webkit-details-marker { display:none; }
.mp-settings > summary strong { display:block; font-weight:600; }
.mp-settings > summary small { display:block; color:var(--muted); margin-top:3px; font-size:12px; }
.mp-settings > summary > svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.mp-settings[open] > summary > svg { transform:rotate(90deg); }
.mp-settings .settings-panel { margin-top:12px; }
.mp-start-log { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:26px 0; padding:22px; border:1px solid var(--line); border-radius:22px; background:var(--surface); }
.mp-start-log h2 { font-size:19px; letter-spacing:-.7px; margin:8px 0; }
.mp-start-log p { color:var(--muted); font-size:12px; line-height:1.7; margin:0; }
.mp-start-log > button { display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; border:0; background:transparent; color:var(--text); flex-shrink:0; }
.mp-start-log img { width:64px; height:88px; object-fit:cover; border-radius:9px; }
.mp-start-log > button > span { display:flex; align-items:center; gap:4px; font-size:12px; min-height:32px; }
.mp-start-log svg { width:13px!important; height:13px!important; }
body.my-profile-open { overflow:hidden; }
dialog#my-profile-dialog { position:fixed; inset:var(--mp-top,0px) 0 auto; width:100%; height:var(--mp-height,100dvh); max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; background:transparent; color:var(--text); box-shadow:none; }
#my-profile-dialog::backdrop { background:#020b1385; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
#my-profile-dialog > .bottom-nav { position:absolute; }
.mp-panel { position:absolute; top:50%; left:16px; right:16px; transform:translateY(-50%); max-width:480px; height:min(660px,calc(var(--mp-height,100dvh) - 48px)); margin-inline:auto; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:28px; overflow:hidden; background:var(--bg); box-shadow:0 24px 80px #0004; }
.mp-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px 16px; border-bottom:1px solid var(--line); flex-shrink:0; }
.mp-dialog-head h2 { font-size:17px; line-height:1.4; margin:0; letter-spacing:-.5px; }
.mp-dialog-head > div > span { display:block; margin-top:4px; font-size:10px; color:var(--muted); }
.mp-dialog-head .icon-button { width:40px; height:40px; flex-shrink:0; }
.mp-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:24px 22px; }
.mp-footer { flex-shrink:0; border-top:1px solid var(--line); padding:16px 22px; background:var(--bg); }
.mp-footer-actions { display:grid; gap:9px; }
.mp-level-footer { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mp-skip { color:var(--accent); }
.mp-step > span,.mp-card-heading > span { display:block; color:var(--accent); font-size:10px; letter-spacing:2px; }
.mp-step h3 { margin:12px 0 8px; font-size:23px; line-height:1.35; letter-spacing:-1px; }
.mp-step p { color:var(--muted); font-size:13px; line-height:1.7; margin:0 0 24px; }
.mp-sport-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:28px; }
.mp-sport-options > button { padding:0 0 14px; min-width:0; border:1px solid var(--line); border-radius:17px; overflow:hidden; background:var(--surface); color:var(--text); }
.mp-sport-options > button:disabled { opacity:.45; cursor:default; }
.mp-sport-options img { display:block; width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:12px; }
.mp-sport-options strong { display:block; font-size:15px; font-weight:600; }
.mp-sport-options small { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.mp-level-options { display:grid; gap:10px; }
.mp-level-options > button { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:70px; width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:15px; background:var(--surface); color:var(--text); text-align:left; }
.mp-level-options strong { display:block; font-size:14px; font-weight:600; }
.mp-level-options small { display:block; font-size:12px; line-height:1.6; color:var(--muted); margin-top:3px; word-break:keep-all; }
.mp-level-options > button[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--bg)); }
.mp-level-options svg { width:16px!important; height:16px!important; color:var(--muted); }
.mp-text { display:flex; justify-content:center; align-items:center; gap:6px; min-height:44px; padding:12px 0; border:0; background:transparent; color:var(--muted); font-size:12px; margin:12px auto 0; }
.mp-rebuild { color:var(--accent); }
.mp-card-heading { margin:0 0 20px; text-align:center; }
.mp-card-heading h3 { margin:8px 0 0; font-size:21px; line-height:1.4; letter-spacing:-.8px; }
.mp-story { container-type:inline-size; isolation:isolate; position:relative; aspect-ratio:9/16; width:100%; max-width:290px; margin:0 auto; border-radius:20px; overflow:hidden; color:#fff; background:#071925; }
.mp-story-photo,.mp-story-shade { position:absolute; inset:0; width:100%; height:100%; }
.mp-story-photo { object-fit:cover; z-index:-2; }
.mp-story-shade { z-index:-1; background:linear-gradient(180deg,#00172222 0%,#00172222 30%,#00101beb 90%); }
.mp-story-inner { display:flex; flex-direction:column; justify-content:space-between; height:100%; padding:24px; position:absolute; inset:0; }
.mp-story-logo { width:64px; height:auto; }
.mp-story-copy > span { color:#c2ffff; font-size:10px; letter-spacing:2px; }
.mp-story-copy h3 { font-size:clamp(27px,13cqw,37px); letter-spacing:-1.3px; line-height:1.15; margin:13px 0; color:#fff; }
.mp-story-copy > p { font-size:13px; color:#f3fafc; line-height:1.6; margin:0; }
.mp-story-level { color:#d9ebf2; font-size:11px; line-height:1.6; margin-top:10px; }
.mp-story-copy footer { border-top:1px solid #ffffff55; margin-top:24px; padding-top:13px; display:flex; flex-wrap:wrap; gap:5px 10px; justify-content:space-between; color:#c7d9e2; font-size:9px; }
.mp-level-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:20px auto 0; max-width:290px; min-height:44px; font-size:13px; }
.mp-level-toggle input { appearance:none; position:relative; width:44px; height:26px; flex-shrink:0; margin:0; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
.mp-level-toggle input::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--muted); border-radius:50%; }
.mp-level-toggle input:checked { background:var(--action-bg); border-color:var(--action-bg); }
.mp-level-toggle input:checked::after { transform:translateX(18px); background:#fff; }
.mp-footnote { color:var(--muted); font-size:11px; line-height:1.7; text-align:center; margin:14px 0 0; }
.mp-social-preview { max-width:290px; margin:0 auto; }
.mp-social-preview > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:10px; }
.mp-social-preview > div:first-child > span { color:var(--muted); font-size:10px; }
.mp-social-preview > p { font-size:10px; color:var(--muted); text-align:center; margin:12px 0; }
.mp-panel[data-stage="card"] .mp-card-heading { display:none; }
.mp-panel[data-stage="card"] .mp-story { max-width:clamp(180px,calc((min(var(--mp-height,100dvh),772px) - 420px)*.5625),230px); }
.j-profile-level { margin:0 0 16px; padding:10px 12px; border-radius:10px; background:var(--surface); color:var(--muted); font-size:12px; }
@media(min-width:960px) { .mp-overview { grid-template-columns:1.05fr .95fr; gap:32px; } .mp-next-links { gap:16px; } .mp-next-links > button { padding:18px 20px; } .mp-next-links small { grid-column:2; font-size:12px; } .mp-next-links > button > span svg { grid-row:span 2; } .mp-first { margin-top:0; } .mp-design-note { text-align:right; } }
@media(max-width:959px) { .mp-panel { top:calc((var(--mp-height,100dvh) - 88px) / 2); height:min(660px,calc(var(--mp-height,100dvh) - 112px)); } }
@media(max-width:359px) { .mp-slots { gap:10px; } .mp-slot strong { font-size:14px; } .mp-slot small { font-size:11px; } .mp-first { padding:20px; } .mp-first h2 { font-size:19px; } .mp-panel { left:12px; right:12px; border-radius:24px; } .mp-dialog-head { padding:16px; } .mp-scroll { padding:20px 16px; } .mp-footer { padding:14px 16px; } .mp-step h3 { font-size:21px; } .mp-sport-options { gap:8px; } .mp-sport-options strong { font-size:14px; } .mp-level-options > button { padding:12px; } .mp-story-inner { padding:20px; } .mp-start-log { padding:18px; gap:14px; } }
@media(max-height:540px) { .mp-step h3 { font-size:20px; } .mp-scroll { padding-block:16px; } .mp-dialog-head { padding-block:12px; } .mp-footer { padding-block:12px; } }

.mp-level-setting { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; max-width:306px; min-height:44px; margin:16px auto 0; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--text); font-size:12px; text-align:left; }
.mp-level-setting strong { margin-left:6px; font-weight:650; }
.mp-level-setting > span:last-child { display:flex; align-items:center; gap:3px; color:var(--accent); }
.mp-level-setting svg { width:13px!important; height:13px!important; }
.mp-level-setting + .mp-level-toggle { max-width:306px; margin-top:4px; }
.mp-panel[data-stage='card'] .mp-story { flex-shrink:0; }