/* v17 shared visual language, loaded last. Pandora grammar (user-approved there): no bordered boxes;
   text and numbers sit on the scene; choices are translucent rounded lines; selection = accent bar, not a frame. */
:root{--v17-glass:rgba(16,16,22,.55);--v17-glass-hi:rgba(44,44,56,.7);--v17-ink:rgba(255,255,255,.92);--v17-ink-2:rgba(255,255,255,.56);--v17-accent:#e4be82;--v17-pick:#def68b}

/* containers: no frames, no card fills */
#app .panel,#app .exp-card,#app .staff-card,#app .companion-card,#app .school-card,#app .life-section,#app .life-shop article,#app .agent-banner,#app .offers-empty,#app .contract-summary,#app .rolecard,#app .rolecards>*{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
#app .panelhead{border:0!important;background:transparent!important;padding-left:0;padding-right:0}
#app .panelbody,#app .exp-card,#app .staff-card{padding-left:0!important;padding-right:0!important}
#app .panel+.panel,#app .exp-card+.exp-card,#app .staff-card+.staff-card,#app .life-section+.life-section{margin-top:26px}
#app .staff-avatar{display:none}
#app .staff-role,#app .exp-card-title,#app .panelhead h2,#app .panelhead h3{letter-spacing:.04em}

/* buttons: translucent rounded lines */
#app .panel button,#app .exp-card button,#app .staff-actions button,#app .companion-actions button,#app .life-section button,#app .life-shop button,#app .inlineform button,#app .topactions button,#app .campus-after,#app .campus-fixture,#app .linkbutton{border:0!important;border-radius:12px!important;background:var(--v17-glass)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--v17-ink)!important;box-shadow:none!important}
#app .panel button:hover,#app .exp-card button:hover,#app .staff-actions button:hover,#app .companion-actions button:hover,#app .life-section button:hover,#app .topactions button:hover,#app .campus-after:hover,#app .campus-fixture:hover{background:var(--v17-glass-hi)!important}
#app button:active{box-shadow:inset 3px 0 0 var(--v17-accent)!important}
/* the one forward action on a screen: accent text on glass with an accent edge, not a coloured block */
#app .primary,#app .exp-play,#app .training-confirm,#app .campus-continue,#app .staff-actions button:first-child{background:linear-gradient(90deg,rgba(228,190,130,.22),rgba(16,16,22,.55))!important;color:var(--v17-accent)!important;border:0!important;border-radius:12px!important;box-shadow:inset 3px 0 0 var(--v17-accent)!important;font-weight:600}
#app .campus-continue{color:#ffe7c0!important;text-shadow:0 1px 3px #0009}

/* choice tiles become a list: icon · name · value, selected = accent bar */
#app .exp-focuses{grid-template-columns:1fr!important;gap:4px!important}
#app .exp-focuses button{grid-template-columns:28px 1fr auto!important;align-items:center;padding:12px 14px!important;background:transparent!important}
#app .exp-focuses button span{grid-row:auto!important;font-size:18px!important}
#app .exp-focuses button b{font-size:14px!important;color:var(--v17-ink-2)}
#app .exp-focuses button strong{font-size:15px!important;color:var(--v17-ink-2)!important}
#app .exp-focuses button.selected{background:rgba(222,246,139,.1)!important;box-shadow:inset 3px 0 0 var(--v17-pick)!important}
#app .exp-focuses button.selected b,#app .exp-focuses button.selected strong{color:var(--v17-pick)!important}
/* segmented choices: plain words, the chosen one underlined */
#app .exp-intensity button{background:transparent!important;border-radius:0!important;color:var(--v17-ink-2)!important}
#app .exp-intensity button.selected{color:var(--v17-pick)!important;box-shadow:inset 0 -2px 0 var(--v17-pick)!important}

/* form fields: a line to write on, not a box */
#app .introform input,#app .introform select{border:0!important;border-bottom:1px solid rgba(255,255,255,.28)!important;border-radius:0!important;background:transparent!important;color:var(--v17-ink)!important;padding-left:2px}
#app .introform select option{background:#15171d;color:#fff}

/* mobile navigation: active = colour + dot */
#app .nav button,#app .nav a{background:transparent!important;border:0!important;box-shadow:none!important}
#app .nav .active{color:var(--v17-pick)!important;background:transparent!important;position:relative}
#app .nav .active:after{content:'';position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--v17-pick);transform:translateX(-50%)}

/* story choices: Pandora choice lines with a number, staggered in */
#app .cinema-replies:not(.single) button{background:var(--v17-glass)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0!important;border-radius:12px!important;color:var(--v17-ink)!important;padding:11px 16px!important;font:400 .86rem/1.45 'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif!important;justify-content:flex-start!important;gap:10px!important;max-width:440px;animation:v17-choice .24s cubic-bezier(.23,1,.32,1) backwards}
#app .cinema-replies:not(.single) button:nth-child(2){animation-delay:40ms}#app .cinema-replies:not(.single) button:nth-child(3){animation-delay:80ms}
#app .cinema-replies:not(.single) button>span[aria-hidden]{display:none}
#app .choice-num{color:rgba(255,255,255,.45);font-size:.72rem;font-weight:500;flex:none}
#app .cinema-replies.single button{color:var(--v17-accent)!important;opacity:.75;animation:v17-blink 1.6s infinite}
@keyframes v17-choice{from{opacity:0;transform:translateY(8px)}}
@keyframes v17-blink{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){#app .cinema-replies button{animation:none!important}}

/* setup: the club application form as an object in the world, over the school gate */
#app .application-intro{position:relative;display:block;min-height:100svh;padding:76px 16px 44px;background:#0d0f15;overflow:hidden}
.application-scene{position:fixed;inset:0;background:url('./assets/story-spaces-v17.png') no-repeat left top;background-size:auto 200%;filter:brightness(.48) saturate(.9);z-index:0;image-rendering:pixelated}
.application-scene .cinema-drift{position:absolute;inset:0}
.application-brand{position:absolute;z-index:1;top:22px;left:20px;color:#f4ead6}.application-brand .wordmark{font-size:20px;color:#f4ead6}.application-brand small{font-size:11px;letter-spacing:.08em;color:#f4ead6aa}
#app .application{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:30px 24px 24px;background:#f1e8d4 repeating-linear-gradient(#0000 0 37px,#b9aa8c38 37px 38px);color:#2a2c33;box-shadow:0 24px 60px #000b,0 1px 0 #fff8 inset;transform:rotate(-.5deg);font-family:'Noto Serif KR','Noto Serif CJK KR','Apple Myungjo','AppleMyungjo','Nanum Myeongjo',Batang,serif}
.application-head small{display:block;font:600 11px/1.4 'Noto Sans KR','Malgun Gothic',sans-serif;letter-spacing:.14em;color:#8a7350}
.application-head h1{font-size:23px;line-height:1.4;margin:8px 0 20px;font-weight:700;color:#23252b;letter-spacing:-.01em}
.application-stamp{position:absolute;top:20px;right:18px;width:64px;height:64px;border:3px double #b8443b;border-radius:50%;color:#b8443b;display:grid;place-items:center;font:800 15px/1 'Noto Sans KR','Malgun Gothic',sans-serif;font-style:normal;letter-spacing:.12em;transform:rotate(14deg);opacity:.72}
.application-line{display:grid;grid-template-columns:86px 1fr;align-items:end;gap:10px;padding:7px 0}
#app .application-line label{font-size:13px;color:#6b5a40;letter-spacing:.06em;margin:0;font-weight:500}
#app .application input,#app .application select{border:0!important;border-bottom:1px solid #574c3a!important;border-radius:0!important;background:transparent!important;color:#1f3a6b!important;font:700 17px/1.3 'Noto Serif KR','Apple Myungjo',Batang,serif!important;padding:4px 2px!important;min-height:0!important;box-shadow:none!important;width:100%}
#app .application select option{background:#f1e8d4;color:#1f3a6b}
#app .application select:disabled{opacity:1}
.application-motive{margin:0;color:#9a8a6c;font-style:italic;font-size:14px;border-bottom:1px dashed #9a8a6c90;padding-bottom:4px}
#app .application-note{display:block;margin:12px 0 2px 96px;padding:0!important;color:#b8443b!important;background:transparent!important;border:0!important;font:500 13px/1.6 'Noto Sans KR','Malgun Gothic',sans-serif;transform:rotate(-1.2deg)}
#app .application-note .exp-live-dot{display:none}#app .application-note b{font-weight:700;margin-right:6px}#app .application-note small{color:#b8443bcc}
#app .application-photo{margin-top:18px}
#app .application-photo .setup-preview-pair{position:static!important;background:transparent!important;padding:0!important;gap:14px;justify-content:flex-start}
#app .application-photo figure{margin:0;background:#fff;padding:6px 6px 4px;box-shadow:0 4px 10px #0003;transform:rotate(1.5deg)}
#app .application-photo figure+figure{transform:rotate(-2deg);background:#e8ddc6}
#app .application-photo figcaption{font:500 10px/1.4 'Noto Sans KR',sans-serif;color:#7b6c52;text-align:center;margin-top:3px}
#app .application-photo>p{color:#6b5a40;font-size:13px}
#app .application-photo button,#app .application .appearance-editor summary{background:transparent!important;border:0!important;color:#1f3a6b!important;text-decoration:underline;text-underline-offset:4px;box-shadow:none!important;padding:4px 0!important}
#app .application .appearance-editor label{color:#6b5a40}
#app .application .setupadvanced{margin-top:14px;color:#6b5a40;font-size:12px}
#app .application .application-submit{width:100%;margin-top:20px;min-height:50px;background:#1f3a6b!important;color:#f4ead6!important;border:0!important;border-radius:6px!important;box-shadow:0 3px 0 #11243f!important;font:700 16px/1 'Noto Sans KR','Malgun Gothic',sans-serif}
.application-fine{font-size:11px;color:#8a7c64;margin:12px 0 0;line-height:1.7;font-family:'Noto Sans KR','Malgun Gothic',sans-serif}
.application-links{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:22px auto 0;max-width:520px}
.application-mode{position:relative;z-index:1;max-width:520px;margin:0 auto 14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;color:#f4ead6}
.application-mode>span{grid-column:1/-1;font-size:13px;color:#f4ead6cc}
#app .application-mode button{min-height:44px;padding:8px 14px;border:1px solid #b69c7566;background:#17211fcc;color:#f4ead6;border-radius:7px;font-size:14px}
#app .application-mode button.chosen{border-color:#e4be82;background:#e4be82;color:#252017}
@media(max-width:360px){#app .application-line{grid-template-columns:74px minmax(0,1fr)}#app .application select{font-size:15px!important}}
.companion-date-reason{display:block;margin-top:8px;color:#b7c5be;line-height:1.45}
#app .life-jumps{position:sticky;top:0;z-index:5;display:flex;gap:4px;padding:8px 0;background:#111a22}
#app .life-jumps button{flex:1 1 0;min-width:0;min-height:44px;padding:8px 3px;border:1px solid #51645b;border-radius:8px;background:#1e312d;color:#edf4e7;font-size:clamp(11px,3vw,14px);white-space:nowrap}
#app .life-section[id],#app #barber,#app #tactic-board-section,#app #tactic-team,#app #tactic-players,#app #tactic-starting,#app #tactic-bench{scroll-margin-top:64px}
#app .life-week{grid-template-columns:repeat(2,minmax(0,1fr))}
#app .life-week>div:nth-child(2){display:block}
@media(max-width:700px){
 #app .shell:not(.player-shell)>.sidebar{position:fixed;inset:auto 0 0;z-index:50;width:100%;height:auto;padding:0;overflow:visible;border-top:1px solid #617466;background:#142c26}
 #app .shell:not(.player-shell)>.sidebar>.wordmark{display:none}
 #app .shell:not(.player-shell)>.main{padding-bottom:calc(77px + env(safe-area-inset-bottom,0px))}
 #app .shell:not(.player-shell) .nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));overflow:visible}
 #app .shell:not(.player-shell) .nav>button{display:none!important;flex-direction:column;justify-content:center;gap:1px;min-height:56px;padding:5px 2px;font-size:11px;line-height:1.4}
 #app .shell:not(.player-shell) .nav>button>span{font-size:19px;line-height:1.3}
 #app .shell:not(.player-shell) .nav>button[data-page=home],#app .shell:not(.player-shell) .nav>button[data-page=tactics],#app .shell:not(.player-shell) .nav>button[data-page=match],#app .shell:not(.player-shell) .nav>button[data-page=squad],#app .shell:not(.player-shell) .nav>.mobile-more{display:flex!important}
 #app .shell:not(.player-shell) .nav>button.active{background:#365341}
 #app .shell:not(.player-shell).mobile-menu-open .nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:12px;background:#172f29;box-shadow:0 -20px 50px #071b2277}
 #app .shell:not(.player-shell).mobile-menu-open .nav>button:not(.mobile-extra){display:flex!important;min-height:56px;font-size:13px}
 #app .shell:not(.player-shell).mobile-menu-open .nav>.mobile-more,#app .shell:not(.player-shell).mobile-menu-open .nav>.mobile-more>span{font-size:0!important}
 #app .shell:not(.player-shell).mobile-menu-open .nav>.mobile-more>span::after{content:'×';font-size:22px;line-height:1}
 #app .shell:not(.player-shell).mobile-menu-open .nav>.mobile-more::after{content:'닫기';font-size:13px}
}
#app .application-links button{background:transparent!important;border:0!important;box-shadow:none!important;color:#f4ead6b0!important;font-size:13px;text-decoration:underline;text-underline-offset:5px;padding:6px 2px;min-height:0}
#app .application-links .chosen{color:#e4be82!important;text-decoration-thickness:2px}
#app .application-links button:disabled{opacity:.35}
.application-line[hidden]{display:none!important}
#app .application-note b{color:#b8443b!important}
#app .application-photo .setup-portrait{height:150px!important;width:auto!important}
#app .application-photo .setup-preview-pair .cinema-actor{height:calc(160px * var(--k,1))!important;align-self:center}

/* Keep match controls readable instead of squeezing every action into one line. */
@media(max-width:650px){
 #app .live-controlbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px}
 #app .live-controlbar>span{grid-column:1/-1;font-size:12px;line-height:1.4;margin:0}
 #app .live-controlbar select,#app .live-controlbar button{box-sizing:border-box;min-width:0;width:100%;min-height:44px;margin:0;font:500 13px/1.4 'Noto Sans KR','Malgun Gothic',sans-serif;white-space:normal}
 #app .live-controlbar select{padding:8px 24px 8px 10px;background:rgba(255,255,255,.08);border-radius:6px;color:#f1f3e2}
 #app .live-controlbar option{color:#111}
}

/* match: broadcast score bug, captions, kickoff lineups, viewing modes */
#app .live-pitch-wrap{position:relative}
.score-bug{box-sizing:border-box;max-width:calc(100% - 20px);white-space:nowrap;position:absolute;z-index:3;top:10px;left:10px;display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;background:rgba(10,12,18,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;color:#fff;font:700 13px/1 'Noto Sans KR','Malgun Gothic',sans-serif;letter-spacing:.04em;box-shadow:0 4px 14px #0006}
.score-bug>b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:inherit;line-height:1.3}.score-bug>strong,.score-bug>time,.score-bug>.score-crest{flex-shrink:0}.score-bug .score-crest{display:grid;place-items:center;width:28px;height:28px}.score-bug .score-crest>*{width:28px;height:28px}
.score-bug strong{display:flex;gap:4px;align-items:center;padding:3px 8px;background:#fff;color:#111;border-radius:6px;font-size:15px}
.score-bug strong em{font-style:normal;opacity:.5}
.score-bug time{margin-left:4px;padding-left:8px;border-left:1px solid #ffffff33;color:#e4be82;font-variant-numeric:tabular-nums}
#app .broadcast-caption{position:absolute;z-index:3;left:12px;right:12px;bottom:12px;padding:9px 14px;border-radius:10px;background:rgba(10,12,18,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:500 14px/1.5 'Noto Sans KR','Malgun Gothic',sans-serif;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none}
#app .broadcast-caption.shown{opacity:1;transform:none}
#app .broadcast-caption.goal{background:linear-gradient(90deg,#b8443bee,#10121ccc);font-weight:700}
.live-ticker{display:none;position:absolute;z-index:2;inset:0;flex-direction:column;justify-content:center;gap:10px;padding:56px 22px 22px;background:rgba(8,10,15,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-family:'Noto Sans KR','Malgun Gothic',sans-serif}
.exp-match.between-scenes .live-ticker{display:flex;background:#0b121c;-webkit-backdrop-filter:none;backdrop-filter:none}
.exp-match.between-scenes .fan-layer{display:none}
.exp-match.between-scenes .broadcast-caption{opacity:0!important}
.live-ticker #overviewpitch{display:block;width:min(100%,330px);height:auto;max-height:35%;object-fit:contain;align-self:center}
.live-controlbar .live-settings{grid-column:1/-1;order:3;border-top:1px solid #ffffff20}
.live-controlbar .live-settings summary{cursor:pointer;list-style:none;padding:12px 2px;color:#e1e8dd;font-size:13px;font-weight:600}
.live-controlbar .live-settings summary::-webkit-details-marker{display:none}
.live-controlbar .live-settings summary::after{content:'＋';float:right}
.live-controlbar .live-settings[open] summary::after{content:'−'}
.live-controlbar .live-settings summary span{font-weight:400;color:#aab7ad;margin-left:8px}
.live-controlbar .live-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-bottom:8px}
.live-controlbar .live-settings-grid select,.live-controlbar .live-settings-grid button{box-sizing:border-box;width:100%;min-width:0;min-height:44px}
.exp-intensity-label{margin:20px 0 2px;color:#c9d3c8;font-size:13px;font-weight:600}
@media(max-width:700px){
 #app .exp-training-grid .exp-card:first-child>.exp-card-title{display:block}
 #app .exp-training-grid .exp-card:first-child>.exp-card-title small{display:block;margin-top:4px;line-height:1.4}
 #app .exp-focuses{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px 8px!important}
 #app .exp-focuses button{grid-template-columns:20px minmax(0,1fr) auto!important;gap:4px!important;min-height:48px;padding:8px!important}
 #app .exp-focuses button b{font-size:13px!important;line-height:1.25;overflow-wrap:anywhere}
 #app .exp-focuses button strong{font-size:13px!important}
}
.squad-hint{margin:0 16px 12px;color:#aab7ad;font-size:13px}
@media(max-width:700px){
 #app .player-squad-table{overflow:visible}
 #app .player-squad-table table,#app .player-squad-table tbody{display:block;width:100%;min-width:0}
 #app .player-squad-table thead{display:none}
 #app .player-squad-table tr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 8px;padding:13px 4px;border-bottom:1px solid #ffffff20}
 #app .player-squad-table td{display:block;min-width:0;border:0;padding:0;text-align:left;font-size:13px}
 #app .player-squad-table td:nth-child(1){grid-column:1;align-self:center;color:#cbdca3}
 #app .player-squad-table td:nth-child(2){grid-column:2/6;align-self:center;font-weight:600}
 #app .player-squad-table td:nth-child(n+3)::before{content:attr(data-label);display:block;color:#aab7ad;font-size:11px;margin-bottom:4px}
 #app .player-squad-table td:nth-child(n+3){grid-row:2}
}
.live-ticker>b{font-size:38px;font-variant-numeric:tabular-nums;color:#e4be82}
.ticker-row{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:10px;font-size:13px;color:#ffffffb0}
.ticker-row i{height:5px;background:#ffffff22;border-radius:3px;overflow:hidden}.ticker-row em{display:block;height:100%;background:#def68b}
.ticker-row b{color:#fff;font-variant-numeric:tabular-nums}
.live-ticker ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:13px;color:#ffffffd0}.live-ticker li:first-child{color:#fff;font-weight:600}
.live-ticker small{color:#ffffff70;font-size:11px;margin-top:6px}
.exp-match.in-scene.watch-key .live-pitch-wrap:after{content:'핵심 장면';position:absolute;z-index:3;top:12px;right:12px;padding:4px 9px;border-radius:8px;background:#b8443b;color:#fff;font:700 11px/1.4 'Noto Sans KR',sans-serif;letter-spacing:.06em}
/* kickoff screen */
.exp-prematch{display:grid;gap:18px;padding:6px 0 24px}
.exp-prematch header{display:grid;gap:8px;justify-items:start}.exp-prematch header .score-bug{position:static}
.exp-prematch header p{margin:0;color:#ffffffa0;font-size:13px;letter-spacing:.04em}
.lineup-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.lineup-pitch{margin:0}
.lineup-pitch figcaption{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:#fff}.lineup-pitch figcaption svg,.lineup-pitch figcaption img{width:34px;height:34px}
.lineup-pitch figcaption small{margin-left:auto;color:#e4be82;font-weight:700;letter-spacing:.06em}
.lineup-field{display:grid;gap:12px;padding:16px 8px;border-radius:14px;background:repeating-linear-gradient(0deg,#2c6b3f 0 28px,#2f7444 28px 56px);box-shadow:inset 0 0 0 2px #ffffff26}
.lineup-row{display:flex;justify-content:space-evenly;gap:4px}
.lineup-row span{display:grid;justify-items:center;gap:3px;min-width:0;max-width:24%;color:#fff;font:600 11px/1.25 'Noto Sans KR','Malgun Gothic',sans-serif;text-align:center;text-shadow:0 1px 2px #000a;word-break:keep-all}
.lineup-row span i{font-style:normal;font-size:10px;padding:2px 6px;border-radius:7px;background:#0b0e14cc;color:#e4be82}
.lineup-row span.me i{background:#def68b;color:#18210d}.lineup-row span.me{color:#def68b}
.watch-modes{display:grid;gap:8px}
#app .watch-modes button{display:flex;gap:10px;align-items:flex-start;text-align:left;border:0!important;border-radius:12px!important;background:rgba(16,16,22,.55)!important;color:#fff!important;padding:11px 14px!important}
#app .watch-modes button span{display:grid;gap:2px}#app .watch-modes small{color:#ffffff90;font-size:12px}
#app .watch-modes button.chosen{box-shadow:inset 3px 0 0 #def68b!important;background:rgba(222,246,139,.1)!important}#app .watch-modes button.chosen b{color:#def68b}
#app .exp-prematch .kickoff{min-height:50px;font-size:16px}
@media(max-width:700px){#app .broadcast-caption{position:absolute;left:8px;right:8px;bottom:8px;margin:0;transform:none;font-size:13px;line-height:1.5;min-height:0;opacity:0}#app .broadcast-caption.shown{opacity:1}.score-bug{top:6px;left:6px;padding:4px 8px 4px 4px;gap:5px;font-size:12px}.score-bug .score-crest,.score-bug .score-crest>*{width:22px;height:22px}.score-bug{max-width:calc(100% - 12px);letter-spacing:0;line-height:1.3}.score-bug strong{font-size:12px;padding:2px 6px}.score-bug time{font-size:12px;margin-left:0;padding-left:6px}.live-ticker{padding:44px 14px 12px;gap:6px}.live-ticker>b{font-size:28px}.live-ticker ol{font-size:12px;gap:3px}.live-ticker ol li:nth-child(n+3){display:none}}

/* after school = the close of the day: recap as text on the room, actions as things in the room */
.room-recap{list-style:none;margin:12px 0 10px;padding:0;display:grid;gap:5px;max-width:30em}
.room-recap li{color:#f4ead6;font:400 14px/1.6 'Noto Serif KR','Apple Myungjo',Batang,serif;text-shadow:0 1px 4px #000c}
.room-recap li:before{content:'— ';color:#e4be82}
#app .room-hotspots>button{background:linear-gradient(90deg,rgba(10,12,18,.62),rgba(10,12,18,.2))!important;border:0!important;border-radius:12px!important;box-shadow:none!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:left}
#app .room-hotspots>button small{color:#e4be82}
#app .room-hotspots>button:hover{box-shadow:inset 3px 0 0 #e4be82!important}
#app .room-exit,#app .room-pending{border:0!important;border-radius:12px!important;background:rgba(10,12,18,.6)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* remaining frames: review page, pre-match choices, briefing modal, squad tokens, generic modal */
#app .camp-review,#app .camp-improvement,#app .camp-state,#app .camp-verdict,#app .camp-summary,#app .selection-layout,#app .squad-token,#app .contract-summary,#app .life-week,#app .life-history,#app .family-card,#app .life-ledger{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
#app .preparation-choices button,#app .approach-options button,#app .debrief-actions button,#app .life-week button{border:0!important;border-radius:12px!important;background:var(--v17-glass)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--v17-ink)!important;box-shadow:none!important;text-align:left}
#app .preparation-choices button:hover,#app .approach-options button:hover{background:var(--v17-glass-hi)!important}
#app .approach-options .chosen,#app .approach-options .selected,#app .approach-options [aria-pressed="true"],#app .preparation-choices .selected{background:rgba(222,246,139,.1)!important;box-shadow:inset 3px 0 0 var(--v17-pick)!important;color:var(--v17-pick)!important}
.modal{border:0!important;border-radius:18px!important;background:rgba(20,22,30,.94)!important;box-shadow:0 30px 80px #000c!important}
.modal button:not(.primary){border:0!important;border-radius:12px!important;background:rgba(255,255,255,.06)!important;box-shadow:none!important}
.modal .delegate-options{display:grid;gap:8px}.modal .delegate-options button{display:grid;gap:2px;text-align:left;padding:12px 14px}.modal .delegate-options [aria-pressed="true"]{background:rgba(222,246,139,.1)!important;box-shadow:inset 3px 0 0 var(--v17-pick)!important}.modal .delegate-options [aria-pressed="true"] b{color:var(--v17-pick)}
.modal .primary{background:linear-gradient(90deg,rgba(228,190,130,.24),rgba(16,16,22,.5))!important;color:#e4be82!important;border:0!important;border-radius:12px!important;box-shadow:inset 3px 0 0 #e4be82!important}

/* tables on phones: crest + name on one line, tight numbers, no row boxes */
#app .minitable{border-collapse:collapse;width:100%}
#app .minitable th,#app .minitable td{border:0!important;background:transparent!important;padding:9px 6px;font-variant-numeric:tabular-nums}
#app .minitable tr+tr td{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#app .minitable .linkbutton{display:inline-flex;align-items:center;gap:8px;background:transparent!important;padding:0!important;text-decoration:none;color:var(--v17-ink)!important;-webkit-backdrop-filter:none;backdrop-filter:none;text-align:left;white-space:nowrap}
#app .minitable .linkbutton>:is(svg,img,.kit-badge,canvas){width:22px!important;height:22px!important;flex:none}
#app .minitable tr.mine td{color:var(--v17-pick)}
#app .comps-table-wrap{border:0!important;background:transparent!important;box-shadow:none!important}
#app .comps-table{border:0!important;background:transparent!important}
#app .comps-table th,#app .comps-table td{border:0!important;background:transparent!important;padding:9px 6px;font-variant-numeric:tabular-nums}
#app .comps-table tr+tr td{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#app .comps-table .comps-own td{color:var(--v17-pick)}
#app .comps-table .linkbutton,#app .comps-team{display:inline-flex;align-items:center;gap:8px;background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;text-decoration:none;color:var(--v17-ink)!important;white-space:nowrap}
#app .comps-team>:is(svg,img){width:24px!important;height:24px!important;flex:none}
#app .filterbar select{border:0!important;border-bottom:1px solid rgba(255,255,255,.28)!important;border-radius:0!important;background:transparent!important;color:var(--v17-ink)!important}
#app .filterbar select option{background:#15171d}

/* Crests already contain their own outline; a second clipped shield cuts off the art. */
#app .matchhero .versus{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
#app .matchhero .versus>div{min-width:0}
#app .matchhero .crest{width:76px;height:86px;clip-path:none;background:transparent;display:grid;place-items:center}
#app .matchhero .crest>.club-crest{display:block;max-width:100%;max-height:100%;object-fit:contain}
#app .matchhero .clubname{overflow-wrap:anywhere}
#app .matchhero .matchfoot{flex-wrap:wrap;gap:8px 16px;font-size:12px;line-height:1.6}
#app .matchhero .matchfoot>span{flex:1 1 130px;min-width:0}

/* profile / dossier: identity and roles on the page, not in frames */
#app .player-dossier,#app .dossier-main,#app .dossier-identity,#app .dossier-roles,#app .role-phases,#app .full-attributes,#app .dossier-attributes,#app .school-bio-note,#app .role-explainer,#app .role-coach{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
#app .football-role{border:0!important;border-radius:12px!important;background:var(--v17-glass)!important;box-shadow:none!important}
#app .football-role.selected{background:rgba(222,246,139,.1)!important;box-shadow:inset 3px 0 0 var(--v17-pick)!important}
:is(#app,.modalback) .position-dot{border:0!important;border-radius:8px!important;background:rgba(8,12,18,.6)!important;color:#ffffffc0!important}
/* familiarity at each spot (same scale and colours as the tactics board): natural, competent, awkward; the main position filled.
   The card opens in a modal outside #app, so the rules cover .modalback too (else the modal button style hid the main position) */
:is(#app,.modalback) .position-dot.fam-n{box-shadow:inset 0 0 0 2px #4cc38a!important}:is(#app,.modalback) .position-dot.fam-c{box-shadow:inset 0 0 0 2px #c9c34a!important}:is(#app,.modalback) .position-dot.fam-u{box-shadow:inset 0 0 0 2px #e08a3c!important}
.role-alt{margin:6px 0 0;font-size:14px;color:#cfd8dc}.role-legend{margin:6px 0 0;font-size:12px;color:#9fb0b6;display:flex;gap:4px 10px;flex-wrap:wrap;align-items:center}.role-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:-6px;box-shadow:inset 0 0 0 2px #4cc38a!important}.role-legend i.c{box-shadow:inset 0 0 0 2px #c9c34a!important}.role-legend i.u{box-shadow:inset 0 0 0 2px #e08a3c!important}
:is(#app,.modalback) .position-dot.chosen{background:#def68b!important;color:#18210d!important;box-shadow:0 0 0 2px #def68b55}
#app .appearance-editor{border:0!important;background:transparent!important}
#app .exp-heading>button,#app .exp-heading .exp-role,#app .player-pagehead button{border:0!important;border-radius:12px!important;background:var(--v17-glass)!important;color:var(--v17-accent)!important;box-shadow:none!important}
#app .companion-card,#app .companion-art{border:0!important;box-shadow:none!important}
#app .companion-art{border-radius:14px!important;overflow:hidden}

/* sweep (2026-10-21, user: boxes still everywhere, Sangmu panel included). Base elements first, at element specificity
   so every class rule that already styles a button/field still wins; then every remaining framed card, chip and overlay. */
:where(#app,.modalback) button{border:0;border-radius:12px;background:var(--v17-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--v17-ink);box-shadow:none}
:where(#app,.modalback) button:hover{background:var(--v17-glass-hi)}
:where(#app,.modalback) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select){border:0;border-bottom:1px solid rgba(255,255,255,.28);border-radius:0;background:transparent;color:var(--v17-ink)}
:where(#app,.modalback) select option{background:#15171d;color:#fff}
:where(#app,.modalback) textarea{border:0;border-radius:12px;background:var(--v17-glass);color:var(--v17-ink)}
/* cards and panels on the page: words sit on the page */
#app :is(.metric,.savecard,.player-summary,.weekly-result,.offer-card,.personal-debrief,.exp-role,.exp-fixture,.exp-playerstate,.exp-tile,.exp-drill,.exp-match,.club-start-preview,.exp-result,.result-rating,.dossier-identity,.life-empty,.story-scene,.school-dialogue-teaser,.school-bracket article,.school-biography,.pro-offers article,.residence-family,.comps-details,.comps-next,.comps-military,.logo-pack-panel,.player-portrait,.persondetail div,.player-mode-note,.matchhero,.novel-name){border:0!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;border-radius:0!important}
#app .event-notification{border:0!important;background:transparent!important;border-radius:0!important;box-shadow:inset 3px 0 0 var(--v17-accent)!important;padding-left:14px!important}
#app :is(.matchhero,.player-hero):after{display:none}
/* pictures keep their picture, lose the frame */
#app :is(.exp-ground,.chapter-banner,.graduation-scene,.residence-stage,.locker-stage){border:0!important;box-shadow:none!important}
/* tags and chips: coloured words */
#app :is(.result-coach>span,.career-stages span,.chapter-years span,.campus-person>span,.residence-stage>button>span){border:0!important;background:transparent!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important;color:var(--v17-accent)!important}
#app .campus-person>span{text-shadow:0 1px 3px #000,0 0 8px #000c}
/* buttons that still drew their own frame */
#app :is(.story-choices>button,.school-roster>button,.school-talk-buttons button,.pro-offers button,.novel-top>button,.novel-options>button,.residence-heading>button,.residence-actions button,.comps-actions>button,.logo-pack-actions label,.logo-pack-actions button,.campus-save,.conversation-head button,.cinema-top button,.heroine-scene header button,.chapter-banner button,.school-dialogue-teaser button,.offer-card button){border:0!important;border-radius:12px!important;background:var(--v17-glass)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--v17-ink)!important;box-shadow:none!important}
#app .comps-country-select select{border-radius:0!important;background:transparent!important;border-bottom:1px solid rgba(255,255,255,.28)!important}
#app .activity-next{background:linear-gradient(90deg,rgba(228,190,130,.24),rgba(16,16,22,.5))!important;color:var(--v17-accent)!important;border:0!important;border-radius:12px!important;box-shadow:inset 3px 0 0 var(--v17-accent)!important}
/* text over a scene: Pandora's bottom fade, full width, no edges */
#app :is(.activity-complete,.heroine-panel,.conversation-panel,.novel-dialogue){border:0!important;border-radius:0!important;box-shadow:none!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;padding:64px max(20px,calc((100% - 760px)/2)) max(24px,env(safe-area-inset-bottom))!important;background:linear-gradient(180deg,rgba(8,10,15,0),rgba(8,10,15,.8) 34%,rgba(8,10,15,.92))!important}
#app :is(.locker-cast button>span,.companion-art>span,.role-keys span){border:0!important;background:transparent!important;box-shadow:none!important;text-shadow:0 1px 3px #000,0 0 8px #000a}
#app .role-keys span{padding-left:0!important;color:var(--v17-ink-2)}#app .role-keys b{color:var(--v17-pick)}
#app tr.mine,#app tr.mine td{background:transparent!important;color:var(--v17-pick)}
#app .comps-tabs{border-bottom:0!important}
#app .comps-tabs>button{border:0!important;border-radius:0!important;background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--v17-ink-2)!important}
#app .comps-tabs>.comps-active{color:var(--v17-pick)!important;box-shadow:inset 0 -2px 0 var(--v17-pick)!important}
#app .notice{border:0!important;background:transparent!important;box-shadow:inset 3px 0 0 var(--v17-accent);color:var(--v17-ink)}
#app :is(.sectionnote,.badge,.pill){border:0!important;background:transparent!important;color:var(--v17-ink-2)!important}
#app .badge{padding-left:0;color:var(--v17-accent)!important}
#app :is(.comps-status,.comps-empty){border:0!important;background:transparent!important;box-shadow:inset 3px 0 0 var(--v17-accent)!important;padding-left:14px!important}
#app .comps-table tr,#app .comps-table tr.comps-own{background:transparent!important;box-shadow:none!important}
#app .exp-heading .exp-role{background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none;padding-left:0!important;padding-right:0!important}
#toast{background:rgba(16,16,22,.88)!important;color:var(--v17-ink)!important;border:0!important;border-radius:12px!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* type (user, 2026-10-21): a modern Korean sans everywhere instead of the system gothic. Pretendard 1.3.9 (OFL, assets/fonts/,
   KS X 1001 subset; rarer glyphs fall back to the device sans). Dialogue lines on the story stage, the paper application form and
   the evening recap keep their deliberate serif; SVG text (crest banners) keeps its drawing font. Korean words never split mid-word. */
@font-face{font-family:'Pretendard';font-weight:400;font-display:swap;src:url('./assets/fonts/Pretendard-Regular.subset.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:600;font-display:swap;src:url('./assets/fonts/Pretendard-SemiBold.subset.woff2') format('woff2')}
@font-face{font-family:'Pretendard';font-weight:700;font-display:swap;src:url('./assets/fonts/Pretendard-Bold.subset.woff2') format('woff2')}
:root{--v17-ui:'Pretendard','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif}
#app,#app :not(.cinema-words p,.application,.application *,.room-recap li,svg *),#toast,.modalback,.modalback :not(svg *){font-family:var(--v17-ui)!important}
#app,#toast,.modalback{word-break:keep-all;overflow-wrap:break-word}
#app .exp-heading>button{white-space:nowrap;flex:none}

/* life page: the week as three plain lines on a phone, not a squeezed three-column card */
@media(max-width:700px){
 #app .life-week{grid-template-columns:1fr!important;gap:14px!important;padding:0!important}
 #app .life-week>div{grid-row:auto!important;grid-column:auto!important}
 #app .life-week>div:last-child{text-align:left!important}
 #app .life-week>div:nth-child(2){flex-wrap:wrap}
 #app .exp-heading{flex-direction:column;align-items:flex-start!important;gap:12px}
}
/* companion portraits: the person on the page, fading out at the waist, no painted card behind */
#app .companion-art{background:none!important;border-radius:0!important;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
@media(max-width:700px){#app .selection-layout{grid-template-columns:minmax(0,1fr)!important}#app .selection-layout>*{min-width:0}#app .player-shell .nav{margin:0!important}}

/* dialogs (mounted outside #app): the page darkens and the content sits on it, no floating card or framed slots */
.modalback{background:rgba(6,8,12,.9)!important}
.modal{background:transparent!important;box-shadow:none!important;border-radius:0!important;color:var(--v17-ink)}
.modal :is(.savecard,.warning,.reply,.persondetail div,.notice,.dossier-identity,.dossier-roles,.full-attributes,.player-portrait){border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;color:var(--v17-ink)}
.modal .warning,.modal .notice{box-shadow:inset 3px 0 0 var(--v17-accent)!important;padding-left:12px!important;color:var(--v17-ink-2)}
.modal .savecard+.savecard{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important}
.modal :is(h2,h3,strong,b){color:var(--v17-ink)}
.modal :is(small,.muted,label){color:var(--v17-ink-2)}
.modal .logo-pack-panel{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.modal :is(.logo-pack-actions label,.logo-pack-actions button){border:0!important;border-radius:12px!important;background:var(--v17-glass)!important;color:var(--v17-ink)!important;box-shadow:none!important}
#app .warning{border:0!important;background:transparent!important;box-shadow:inset 3px 0 0 var(--v17-accent)!important;padding-left:12px!important;color:var(--v17-ink-2)}
:where(#app,.modalback) input[type=range]{border:0;background:transparent;padding:0}
/* manager desk on phones: one column, wide tables scroll inside their panel instead of widening the page */
@media(max-width:700px){#app .columns{grid-template-columns:minmax(0,1fr)!important}#app .columns>*,#app .stack>*{min-width:0}#app .panel{overflow-x:auto!important}}
#app .gift-row{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}#app .gift-row small{flex-basis:100%;color:var(--v17-ink-2)}#app .gift-row button{padding:7px 11px!important;font-size:12px}#app .companion-meet-cost{display:block;color:var(--v17-accent);margin-top:4px}
/* A person (or a car, a jet) is never set on a glass card: any button that holds a portrait or a body drops the glass, the blur and the
   rounded panel (the shared button rule above gave e.g. the school ground's teammate a blurred box behind him). */
#app button:has(> .player-portrait, > .companion-portrait, > .cinema-actor, > .possession-art){background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important;box-shadow:none!important}

/* teammate conversation (campus-ui, opened in .modalback outside #app): same grammar as the story stage — scrim, no panel, choice pills */
.modalback .conversation-panel{border:0!important;border-radius:0!important;box-shadow:none!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;padding:64px max(20px,calc((100% - 760px)/2)) max(24px,env(safe-area-inset-bottom))!important;background:linear-gradient(180deg,rgba(8,10,15,0),rgba(8,10,15,.8) 34%,rgba(8,10,15,.92))!important}
.modalback .conversation-choices{border-top:0!important;gap:8px}
.modalback .conversation-choices>button{display:flex!important;align-items:center;background:var(--v17-glass)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0!important;border-radius:12px!important;color:var(--v17-ink)!important;padding:11px 16px!important;min-height:0!important;max-width:440px;gap:10px;animation:v17-choice .24s cubic-bezier(.23,1,.32,1) backwards}
.modalback .conversation-choices>button:nth-child(2){animation-delay:40ms}.modalback .conversation-choices>button:nth-child(3){animation-delay:80ms}
.modalback .conversation-choices>button>span{grid-row:auto;color:rgba(255,255,255,.45);font-size:.72rem;font-weight:500;flex:none}
.modalback .conversation-choices>button>b{display:block;font-weight:400;font-size:.9rem}
.modalback .conversation-choices>button>small{display:block;margin-left:auto;color:var(--v17-ink-2);font-size:.7rem;flex:none}
.modalback .conversation-head button{background:var(--v17-glass)!important;border:0!important;border-radius:12px!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.modalback .conversation-cost{color:var(--v17-ink-2)}

/* campus: the condition readout and the person's "talk" label are not buttons on glass */
#app .campus-condition button{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important;box-shadow:none!important}
#app .campus-person>span{bottom:auto!important;top:calc(100% + 2px)!important;background:transparent!important;border:0!important;padding:0!important;color:var(--v17-accent)!important;text-shadow:0 1px 2px #000,0 0 6px #000c;font-size:13px!important}

/* leftovers found by the visual audit: blur rectangles without a panel, parchment behind graduation, invisible speaker tag */
#app :is(.campus-places button,.campus-school,.residence-family,.heroine-choices>button,.cinema-replies.single button,.novel-next,.conversation-next){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#app .graduation-scene{background:transparent!important;color:var(--v17-ink)!important;padding-left:0!important;padding-right:0!important}
#app .graduation-scene>p,#app .graduation-scene>.eyebrow,#app .graduation-scene .graduation-record{color:var(--v17-ink-2)!important}
#app .graduation-scene h1,#app .graduation-scene h2{color:var(--v17-ink)!important}
#app .novel-name{position:static!important;display:block;background:transparent!important;border:0!important;padding:0 0 6px!important;min-width:0!important;color:var(--v17-accent)!important;font-weight:500!important}

/* match centre: corners and offsides joined the line of stats (2026-10-22); five figures wrap on a phone */
.fieldstats{flex-wrap:wrap;row-gap:8px}
/* graduation without the offer he wanted (youth-ui.js gradPath): trials and leaving unattached, no boxes */
.graduation-scene .grad-none{max-width:560px;margin:12px auto;line-height:1.7}
.graduation-scene .grad-trials{list-style:none;padding:0;margin:10px auto;display:grid;gap:4px}
.graduation-scene .grad-trial-pick{margin:14px auto;max-width:640px}
.graduation-scene .grad-trial-pick summary{cursor:pointer;font-weight:700;padding:8px 0}
.graduation-scene .grad-trial-pick div{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.graduation-scene .grad-trial-pick button{display:grid;gap:2px;padding:8px 12px;background:none;border:0;border-bottom:2px solid currentColor;color:inherit;font:inherit;cursor:pointer}
.graduation-scene .grad-trial-pick small{opacity:.7}
.graduation-scene .grad-unsigned{margin:14px auto;background:none;border:0;border-bottom:1px solid currentColor;color:inherit;font:inherit;cursor:pointer}
/* manager's captain and vice (app.js captainPanel) */
.captain-panel .panelbody{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.captain-panel label{display:grid;gap:4px;font-size:13px}
.captain-panel select{max-width:280px}
/* the player's bench view during a live match (experience.js): the sideline camera over the pitch canvas */
#app .live-pitch-wrap .bench-view{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
#app .live-pitch-wrap .bench-view[hidden]{display:none}
#app .live-controlbar .live-view-pick{padding:6px 10px;border:0;border-radius:6px;background:rgba(255,255,255,.08);color:#f1f3e2;font:inherit;font-size:13px;cursor:pointer}#app .live-controlbar .live-view-pick option{color:#111}
/* phones held upright: the bench view takes a tall box (the painting is cropped to it and follows the ball) instead of the 5:3 pitch box */
@media (max-width:700px) and (orientation:portrait){#app .live-pitch-wrap.bench-on{aspect-ratio:3/4}#app .live-pitch-wrap.bench-on #experiencepitch{position:absolute;inset:0;width:100%;height:100%}}
/* phones turned sideways (short landscape): the left menu becomes a narrow icon rail so the match and story stages get the width */
@media (max-height:500px) and (orientation:landscape){
 .shell,.player-shell{grid-template-columns:64px minmax(0,1fr)!important}
 .shell>.sidebar,.player-shell>.sidebar{width:64px!important;padding:10px 4px!important;overflow-y:auto}
 .sidebar .wordmark,.sidebar .tagline,.sidebar .navlabel,.sidebar .sidebottom{display:none!important}
 .sidebar .nav{display:flex!important;flex-direction:column;gap:2px;margin:0}
 .sidebar .nav button{font-size:0!important;justify-content:center;padding:9px 0;min-height:42px}
 .sidebar .nav button span{font-size:18px!important;width:auto}
 .content,.player-shell .content{padding:10px 12px}
}
/* sideways phones: the live match fits the screen height (the bench view fills it; the pitch canvas keeps its 5:3 and centres) */
@media (max-height:500px) and (orientation:landscape){
 #app .live-pitch-wrap{max-height:calc(100svh - 64px)}
 #app .live-pitch-wrap.bench-on{height:calc(100svh - 64px)}
 #app .live-pitch-wrap.bench-on #experiencepitch{position:absolute;inset:0;width:100%;height:100%}
 #app .live-pitch-wrap:not(.bench-on) #experiencepitch{display:block;max-height:calc(100svh - 64px);width:auto;max-width:100%;margin:0 auto}
}
/* tactics board (manager-ui.js tacticBoard): a portrait pitch with the slots on a 6x5 grid, the squad beside it */
.tb-layout{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:16px;align-items:start}
.tactic-board{position:relative;aspect-ratio:68/100;border-radius:10px;background:repeating-linear-gradient(180deg,#2f7a3b 0 10%,#2a7035 10% 20%);overflow:hidden;touch-action:none;user-select:none}
.tb-lines{position:absolute;inset:3% 4%;border:2px solid rgba(255,255,255,.75);pointer-events:none}
.tb-lines:before{content:'';position:absolute;left:25%;right:25%;top:0;height:14%;border:2px solid rgba(255,255,255,.75);border-top:0}
.tb-lines:after{content:'';position:absolute;left:25%;right:25%;bottom:0;height:14%;border:2px solid rgba(255,255,255,.75);border-bottom:0}
.tb-cell{position:absolute;width:13%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(255,255,255,.0);transition:border-color .15s}
.tactic-board.dragging .tb-cell{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08)}
.tb-slot{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;min-width:58px;max-width:21%;padding:4px 6px;border:0;border-radius:8px;background:rgba(14,24,34,.86);color:#f1f3e2;font:inherit;cursor:grab;touch-action:none}
.tb-slot b{font-size:11px;letter-spacing:.5px;color:#e3c84a}
.tb-slot span{font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tb-slot.pinned{box-shadow:0 0 0 2px #e3c84a}
.tb-slot.poor{box-shadow:0 0 0 2px #d8574a}
.tb-selected{outline:3px solid #8fd3ff;outline-offset:2px}
.tb-squad{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;max-height:560px;overflow:auto}
.tb-player{display:grid;text-align:left;padding:6px 8px;border:0;border-bottom:1px solid rgba(255,255,255,.12);background:none;color:inherit;font:inherit;cursor:grab;touch-action:none}
.tb-player.on b{color:#e3c84a}
.tb-player small{opacity:.7}
.tb-ghost{position:fixed;z-index:999;pointer-events:none;transform:translate(-50%,-50%);opacity:.9}
.tb-reset{margin-top:8px;background:none;border:0;border-bottom:1px solid currentColor;color:inherit;font:inherit;cursor:pointer}
@media (max-width:700px){.tb-layout{grid-template-columns:1fr}.tb-squad{max-height:none;grid-template-columns:repeat(2,1fr)}}
@media (max-height:500px) and (orientation:landscape){.tb-layout{grid-template-columns:minmax(220px,300px) 1fr}}
#app .tb-squad .tb-player{background:none!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.12)!important;border-radius:0!important;box-shadow:none!important;min-height:0}
/* suitability: stars on the slot and, when a slot is picked, on every squad player (FM26 style); the slot edge shows position familiarity */
.tb-slot em,.tb-player em{font-style:normal;font-size:10px;letter-spacing:-1px;color:#e3c84a;white-space:nowrap}
.tb-slot.fam-n{box-shadow:0 0 0 2px #4cc38a}.tb-slot.fam-c{box-shadow:0 0 0 2px #c9c34a}.tb-slot.fam-u{box-shadow:0 0 0 2px #e08a3c}.tb-slot.fam-a{box-shadow:0 0 0 2px #d8574a}
.tb-slot.pinned:after{content:'📌';position:absolute;top:-8px;right:-6px;font-size:11px}
/* FM-style squad table beside the board (manager-ui.js); phones keep starter, player, position, condition, rating, morale */
.tb-views{display:flex;gap:4px;margin:0 0 8px}
.tb-views button{background:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;padding:4px 8px;color:inherit;font:inherit;font-size:13px;opacity:.7;cursor:pointer}
.tb-views button.on{opacity:1;border-bottom-color:#e3c84a!important}
.tb-num{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10px;font-weight:700;background:#e3c84a;color:#15181c;border-radius:6px;padding:0 4px}
.tb-squad{overflow:auto;max-height:640px}
.tb-table{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.tb-table th{position:sticky;top:0;background:#141c26;font-weight:600;text-align:left;padding:6px 6px;font-size:11.5px;opacity:.85}
.tb-table td{padding:6px 6px;border-bottom:1px solid rgba(255,255,255,.08)}
.tb-table tr.tb-player{cursor:grab;touch-action:none}
.tb-table tr.on td:first-child{color:#e3c84a;font-weight:700}
.tb-table tr.tb-selected{outline:2px solid #8fd3ff;outline-offset:-2px}
.tb-table td em{font-style:normal;color:#e3c84a;font-size:10px}
.tb-tag{font-size:11px;padding:1px 6px;border-radius:4px;background:#5a2a2a}
.tb-pos{opacity:.8;font-size:11.5px;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.tb-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.tb-dot.hi{background:#4cc38a}.tb-dot.mid{background:#d8c04a}.tb-dot.lo{background:#d8574a}
.tb-bar{display:inline-block;width:38px;height:6px;border-radius:3px;background:linear-gradient(90deg,currentColor var(--v),rgba(255,255,255,.12) var(--v))}
.tb-bar.hi{color:#4cc38a}.tb-bar.mid{color:#d8c04a}.tb-bar.lo{color:#d8574a}
@media (min-width:1100px){.tb-layout{grid-template-columns:minmax(300px,420px) 1fr}}
@media (max-width:900px){.tb-layout{grid-template-columns:1fr}.tb-squad{max-height:none}}
@media (max-width:700px){.tb-table .tb-x{display:none}.tb-table{font-size:12px}.tb-pos{max-width:70px}}
#app .tb-table tr.tb-player{display:table-row;padding:0;text-align:inherit}
#app .tb-squad{display:block}

/* Calendar progression: actual elapsed time stays readable after returning from a story. */
#app .career-progress-summary{font-size:13px;line-height:1.65;color:var(--v17-ink);padding:10px 0;margin:0 0 16px;border-bottom:1px solid #ffffff18;overflow-wrap:anywhere}
#app .campus-action-row .campus-next-schedule{grid-column:1/-1;grid-row:2;padding:9px 12px;font-size:12px;line-height:1.4;background:transparent;color:#e4dcc9;text-align:right}#app .campus-action-row .campus-after{grid-column:2;grid-row:1}
#app .campus-progress{font-size:inherit;color:#fff0c4;margin-left:12px}#app [data-pathway-section]{scroll-margin-top:20px}
@media(max-width:700px){body:has(#app .shell)>button.phone-launch{bottom:calc(88px + env(safe-area-inset-bottom,0px))}body:has(#app .campus-shell)>button.phone-launch{bottom:calc(240px + env(safe-area-inset-bottom,0px))}}
/* Face changes stay in a draft until the player applies them. */
.face-customizer{max-width:620px;margin:auto}
.face-customizer h2{margin:0 0 8px}
.face-customizer>p{font-size:14px;color:#bbc8ce}
.face-customizer-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:sticky;top:0;z-index:1;background:#15202a;padding:12px 0}
.face-customizer-preview figure{margin:0;text-align:center;min-width:0}
.face-customizer-preview svg{display:block;width:100%;max-height:220px;background:#263940}
.face-customizer-preview figcaption{font-size:13px;padding-top:6px}
.face-customizer-options{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:16px 0}
.face-customizer-options label{font-size:13px;min-width:0}
.face-customizer-options select{display:block;width:100%;font-size:14px;min-height:44px;margin-top:4px}
.face-customizer-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.face-customizer-actions button{min-height:44px;font-size:14px}
.face-customizer-actions [data-face-apply]{background:#c5dd79;color:#15202a}
.face-customizer-preview .face-closeup{height:110px}.face-customizer-preview .body-preview{height:200px;background:#263940}.face-customizer-preview{padding:6px 0;position:static}@media(max-width:420px){.face-customizer-preview .face-closeup{height:85px}.face-customizer-preview .body-preview{height:165px}}
.face-customizer-preview svg{overflow:hidden}.face-customizer-preview .body-preview{max-width:100%}
/* Stoppage shortcuts lead to controls already on the same match screen. */
#app .mm-quick{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
#app .mm-quick button{min-height:42px;padding:9px 14px;border:1px solid #526a60;border-radius:8px;background:#21332e;color:#edf4d6}
#app :is(#manager-talk,#manager-orders,#manager-substitutions){scroll-margin-top:14px}
#app .career-next{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;color:#dae6cf;font-size:14px}
#app .career-next span{color:#a9b9aa;font-size:12px}
#app .career-next strong{color:#d9eb9a;font-size:15px}
#app .exp-plan-selected{margin:12px 0 6px;color:#b8c8bd;font-size:13px;line-height:1.5}
#app .exp-plan-selected b{color:#dfedae}
@media(max-width:700px){
 #app .topactions button{font-size:12px;min-height:40px;line-height:1.3}
 #app .topbar .date{font-size:11px;line-height:1.4}
 #app .exp-selection{flex-wrap:wrap}
 #app .exp-selection b,#app .exp-selection small{font-size:11px;line-height:1.4}
 #app .exp-selection button{display:inline-flex;min-height:40px;font-size:12px;align-items:center}
 #app .career-stages b{font-size:11px;line-height:1.3}
}
.natural-tactics textarea{display:block;width:100%;min-height:96px;box-sizing:border-box;padding:12px;color:inherit;background:var(--surface,#17232c);border:1px solid #536570;border-radius:8px;font:inherit;line-height:1.6;resize:vertical}
.tactical-input-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}.tactical-input-row select{flex:1;min-width:150px}.tactical-preview{border-left:3px solid #cadb80;padding:8px 12px;margin:12px 0}.tactical-preview>div{display:grid;gap:4px;margin-bottom:10px}.tactical-preview label{display:flex;align-items:center;gap:8px;margin:12px 0}.tactical-preview input[type=checkbox]{width:18px;height:18px;margin:0;flex:none}.tactical-active{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}.tactical-active span{overflow-wrap:anywhere}.tactical-active button{flex-shrink:0}.tactical-feedback{border-top:1px solid #536570;margin-top:12px;padding-top:4px;font-size:.9rem}.tactical-feedback p{margin:8px 0}

/* Continuous playback rate stays readable and touchable on narrow screens. */
.view-speed{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:150px}.view-speed output{margin-left:auto;font-variant-numeric:tabular-nums}.view-speed input[type=range]{width:100%;min-height:32px;accent-color:#d7e47f}

.view-speed[hidden]{display:none}.match-coverage{display:flex;align-items:center;gap:8px;font-size:12px}.match-coverage select{flex:1;min-width:0}

@media(max-width:700px){
 #app .shell.unemployed-shell .nav{grid-template-columns:repeat(3,minmax(0,1fr))}
 #app .shell.unemployed-shell .nav>button[data-page]{display:flex!important}
 #app .shell.unemployed-shell .nav>.mobile-more{display:none!important}
}

.title-screen {
 position:relative;
 isolation:isolate;
 display:grid;
 grid-template-rows:auto 1fr auto;
 justify-items:center;
 min-height:100vh;
 min-height:100svh;
 padding:calc(clamp(34px,8svh,92px) + env(safe-area-inset-top)) 18px calc(clamp(18px,4svh,44px) + env(safe-area-inset-bottom));
 color:#fff8e7;
 background:#101620;
}
.title-art,.title-screen::before {position:absolute;inset:0;pointer-events:none;}
.title-art {z-index:-2;overflow:hidden;}
.title-art img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.title-screen::before {
 content:"";
 z-index:-1;
 background:linear-gradient(180deg,#0b1018df 0%,#0b10182b 30%,transparent 53%,#0b1018b8 80%,#0b1018f2 100%);
}
.title-lockup {text-align:center;text-shadow:0 3px 24px #080b12ba;}
#app .title-lockup h1 {
 margin:0;
 color:#fff8e7;
 font:900 italic clamp(44px,10vw,116px)/.98 'Barlow Condensed','Arial Narrow','Segoe UI',sans-serif;
 letter-spacing:-.064em;
}
.title-lockup p {margin:12px 0 0;color:#f1dfb7;font-size:clamp(13px,1.8vw,17px);font-weight:600;letter-spacing:.13em;}
.title-menu {grid-row:3;display:grid;gap:8px;width:min(100%,310px);text-align:center;}
.title-links {display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
body:has(.title-screen) .phone-launch {display:none;}
#entry-status,#entry-load-status {margin:0;font-size:13px;line-height:1.5;overflow-wrap:anywhere;}
#entry-status {color:#f3e6cd;text-shadow:0 2px 6px #000;}
#entry-status:empty,#entry-load-status:empty {display:none;}
#app .title-screen button {min-height:44px;color:#fff8e7!important;}
#app .title-screen .title-action {
 border:1px solid #f2e4c769!important;
 border-radius:4px!important;
 background:#101622d9!important;
 font-size:16px;
 font-weight:750;
}
#app .title-screen .title-action:hover {background:#2c3541!important;}
#app .title-screen .title-action-primary {color:#1a1c21!important;background:#f3d994!important;border-color:#f3d994!important;}
#app .title-screen .title-action-primary:hover {background:#ffe8ad!important;}
#app .title-screen .title-load-link {justify-self:center;background:transparent!important;text-underline-offset:4px;}
#app .title-screen .title-load-link:hover {text-decoration:underline;}
#app .title-screen button:focus-visible {outline:2px solid #ffe8ad;outline-offset:3px;}
#app .title-screen button:disabled {opacity:.55;cursor:wait;}
.title-save-dialog {
 position:fixed;
 inset:0;
 width:min(440px,calc(100% - 32px));
 max-height:calc(100% - 40px);
 margin:auto;
 padding:20px;
 border:1px solid #ebe0c64d;
 border-radius:12px;
 color:#fff8e7;
 background:#171f2a;
}
.title-save-dialog::backdrop {background:#080b13c4;}
.title-save-dialog header,.title-save-dialog li {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.title-save-dialog h2 {margin:0;font-size:21px;}
.title-save-dialog ul {list-style:none;padding:0;margin:8px 0 16px;}
.title-save-dialog li {padding:10px 0;border-bottom:1px solid #fff2;}
.title-save-dialog small {display:block;margin-top:3px;color:#d5dce4;overflow-wrap:anywhere;}
.title-save-dialog li button {flex-shrink:0;}
.title-save-dialog footer {display:flex;flex-wrap:wrap;gap:8px;}