/* Shared with host.js so visible pads, touch targets and court viewport agree. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--phone-dock:174px;--phone-head:104px}
@media(max-width:650px) and (orientation:portrait){
 #campaign .match-top{top:calc(var(--safe-top) + 10px);left:12px;right:12px;gap:8px;align-items:center}
 #campaign .match-top>button{width:44px;height:44px;padding:10px;text-align:center;flex:none}
 #campaign .scoreboard{padding:5px 6px;gap:5px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);min-width:0;background:transparent}
 #campaign .scoreboard>span{max-width:none;min-width:0;white-space:nowrap;font-size:11px}
 #campaign .scoreboard b{font-size:25px}
 #campaign .clock{font-size:18px;min-width:38px;padding:10px 6px}
 #campaign .possession{top:calc(var(--safe-top) + 69px);left:12px;right:12px}
 #campaign #possession-label{font-size:10px;padding:0;background:none}
 #campaign #match-notice{font-size:10px;line-height:13px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #campaign .action-controls{right:16px;bottom:calc(var(--safe-bottom) + 16px);width:88px;gap:6px}
 #campaign #shoot-action{width:88px;height:88px;min-height:88px;padding:10px}
 #campaign #shoot-action b{font-size:12px}
 #campaign .action-controls>button:not(#shoot-action){min-height:44px;padding:10px;font-size:12px;text-align:center}
 #campaign #shot-meter{bottom:calc(var(--safe-bottom) + 116px);left:auto;right:16px;transform:none;width:calc(100% - 124px);max-width:250px;padding:10px 12px 12px}
 #campaign .shot-track{height:13px}
 #campaign[data-mode="play"] #balance-hud{left:16px;bottom:calc(var(--safe-bottom) + 116px);width:76px}
 #campaign #balance-hud>span{font-size:9px;letter-spacing:.04em}
 #campaign .move-hint{font-size:0;left:16px;bottom:calc(var(--safe-bottom) + 5px);width:76px;text-align:center}
 #campaign .move-hint span{font-size:9px;letter-spacing:.03em;margin:0;color:#e3ddc3}
 #campaign #shot-outcome{top:auto;bottom:calc(var(--safe-bottom) + 114px);left:auto;right:16px;min-width:0;width:calc(100% - 124px);max-width:250px;padding:8px 10px}
 #campaign #shot-outcome b{font-size:21px;margin:3px 0}
 #campaign[data-modal]:not([data-modal=""]) .action-controls,#campaign[data-modal]:not([data-modal=""]) #balance-hud,#campaign[data-modal]:not([data-modal=""]) .move-hint{visibility:hidden}
 #campaign .title-screen{padding:calc(var(--safe-top) + 22px) 22px calc(var(--safe-bottom) + 20px);overflow-y:auto;gap:30px;pointer-events:auto;touch-action:pan-y}
 #campaign .park-header{top:calc(var(--safe-top) + 14px);left:12px;right:12px;gap:8px}
 #campaign .park-header>div:first-child{min-width:0}
 #campaign .park-header h2{font-size:23px;white-space:nowrap}
 #campaign .mini-dot{display:none}
 #campaign .park-header p{font-size:11px}
 #campaign .park-utilities{gap:5px;flex:none}
 #campaign .park-utilities>button{min-width:38px;min-height:44px;padding:8px;font-size:11px}
 #campaign .wallet{min-width:60px;padding:8px 6px;max-width:76px;overflow:hidden}
 #campaign .wallet b{font-size:17px;overflow:hidden;text-overflow:ellipsis}
 #campaign .park-footer{bottom:calc(var(--safe-bottom) + 18px);right:16px;max-width:calc(100% - 32px)}
 #campaign .park-footer nav{gap:6px}
 #campaign .park-footer nav button{min-height:48px;padding:10px 12px}
 #campaign #park-book-button{font-size:16px;gap:8px}
 #campaign #nearby-hint{bottom:calc(var(--safe-bottom) + 101px);font-size:11px;max-width:calc(100% - 24px)}
 #campaign[data-mode="park"] #balance-hud{bottom:calc(var(--safe-bottom) + 74px);left:14px;width:76px}
 #campaign .player-panel{top:calc(var(--safe-top) + 12px);bottom:calc(var(--safe-bottom) + 12px);left:12px;right:12px;width:auto;max-width:none}
 #campaign[data-panel="player"] .park-header,#campaign[data-panel="player"] .park-footer{visibility:hidden}
 #campaign .panel-heading{padding:15px 16px 12px;gap:8px}
 #campaign .panel-heading>div{min-width:0}
 #campaign .panel-heading .eyebrow{overflow-wrap:anywhere;letter-spacing:.06em}
 #campaign .panel-heading button,#campaign .book-heading>button{min-width:44px;min-height:44px;flex:none}
 #campaign .player-tabs{padding:8px 12px;gap:5px}
 #campaign .player-tabs button{min-height:44px;font-size:12px}
 #campaign .panel-scroll{min-height:0;padding:0 16px 20px}
 #campaign .swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;justify-items:center}
 #campaign .swatches button{width:44px;height:44px;min-width:44px}
 #campaign .style-options button{min-height:44px}
 #campaign .book-shade{padding:calc(var(--safe-top) + 10px) 10px calc(var(--safe-bottom) + 14px)}
 #campaign .park-book{height:100%;max-height:100%;border-width:5px;border-left-width:8px}
 #campaign .book-heading{padding:12px;gap:8px}
 #campaign .book-heading>div{min-width:0}
 #campaign .book-heading .eyebrow{font-size:8px;letter-spacing:.05em}
 #campaign .current-book .book-heading h2{font-size:24px}
 #campaign .current-book .book-pages{padding:14px 12px 24px}
 #campaign .season-card{padding:12px}
 #campaign .book-row p{font-size:12px}
 #campaign .opponent-scout{padding:12px}
 #campaign .modal-shade,#campaign .creator-shade,#campaign .opponents-shade{padding:calc(var(--safe-top) + 12px) 12px calc(var(--safe-bottom) + 12px)}
 #campaign .modal,#campaign .creator-shade .modal,#campaign .opponents-shade .modal{max-height:100%;max-width:100%;padding:20px;gap:14px}
 #campaign .modal button{min-height:44px}
 #campaign .opponent-roster button{font-size:13px;padding:10px 6px;min-height:60px}
 #campaign .work-receipt{top:calc(var(--safe-top) + 130px);max-width:calc(100% - 24px)}
}