*{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
body{min-height:100vh}.hidden{display:none!important}.screen{min-height:100vh}
.login-screen{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,var(--panel2) 0,var(--panel) 45%,var(--bg) 100%)}
.login-wrap{width:min(440px,100%)}.brand{text-align:center;margin:20px 0 32px}.brand-mark{font-size:64px;font-weight:900;letter-spacing:-12px}
.brand-mark span:nth-child(2),.brand-mark span:nth-child(3){color:var(--gold2)}.tagline{letter-spacing:8px;color:var(--gold2);font-size:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 25px 80px var(--scrim)}
.login-card{padding:28px}.login-card h1{margin:0 0 8px}.login-card p{margin:0 0 24px;color:var(--muted);line-height:1.5}
label{display:block;font-size:13px;color:var(--muted);margin:14px 0}input{width:100%;margin-top:7px;padding:15px;border-radius:12px;border:1px solid var(--control-line);background:var(--bg);color:var(--text);font-size:16px;outline:none}
input:focus{border-color:var(--gold)}button{cursor:pointer;border:0}.primary{width:100%;padding:15px;border-radius:12px;background:linear-gradient(135deg,var(--gold2),var(--gold));font-weight:800;color:var(--on-accent);font-size:15px}
.status{padding:10px 0;color:var(--muted);font-size:13px}.topbar{position:sticky;top:0;z-index:20;height:68px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;background:var(--chrome);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.mini-brand{font-size:25px;font-weight:900;color:var(--gold2)}.small{font-size:8px;letter-spacing:4px;color:var(--muted)}.ghost{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
main{width:min(620px,100%);margin:0 auto;padding:10px 10px 90px}.post-card{overflow:hidden;margin:10px 0 18px;background:var(--panel);border:1px solid var(--line);border-radius:18px}
.post-head{display:flex;gap:10px;align-items:center;padding:13px 14px}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);color:var(--gold2);font-weight:900}
.meta{min-width:0;flex:1}.manager{font-weight:800}.verified{color:var(--accent-light)}.player{color:var(--gold2);font-size:13px;margin-top:3px}.follow{background:var(--panel2);color:var(--text);border-radius:9px;padding:8px 10px}.follow.on{color:var(--gold2)}
.media{width:100%;display:block;background:var(--bg);max-height:650px;object-fit:contain}.description{padding:13px 14px 4px;line-height:1.45;color:var(--text)}.actions{display:flex;gap:8px;padding:10px 12px 14px;align-items:center}
.action{background:transparent;color:var(--text);padding:8px 7px;font-size:15px}.action.on{color:var(--danger)}.time{margin-left:auto;color:var(--muted);font-size:11px}.empty{padding:35px;text-align:center;color:var(--muted)}
.bottom-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;height:72px;background:var(--chrome);border-top:1px solid var(--line);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav button{width:min(20%,120px);background:transparent;color:var(--muted);font-size:21px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.bottom-nav button span{font-size:9px}.bottom-nav .active{color:var(--gold2)}.bottom-nav .post{color:var(--on-accent);background:var(--gold2);height:48px;margin-top:8px;border-radius:16px;max-width:64px}
@media (min-width:700px){body{background:var(--bg)}.post-card{box-shadow:0 10px 40px var(--scrim)}}

.clickable{cursor:pointer}.clickable:hover{text-decoration:underline}.profile-view{padding:4px 0 20px}.profile-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:10px 0}.profile-hero{padding:22px}.profile-back{background:transparent;color:var(--gold2);padding:8px 0 14px;font-weight:800}.profile-title{font-size:27px;font-weight:900}.profile-sub{color:var(--muted);margin-top:5px}.profile-bio{margin-top:16px;line-height:1.5;color:var(--text)}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.profile-stat{text-align:center;padding:15px 6px}.profile-stat b{display:block;font-size:19px;color:var(--gold2)}.profile-stat span{font-size:10px;color:var(--muted)}.profile-section{padding:17px}.profile-section h2{font-size:16px;margin:0 0 12px}.player-row{padding:13px;border:1px solid var(--line);border-radius:12px;margin:8px 0;background:var(--panel2);cursor:pointer}.player-row b{display:block}.player-row span{color:var(--muted);font-size:12px}.player-hero{display:flex;gap:15px;align-items:center}.player-photo{width:88px;height:88px;object-fit:cover;border-radius:18px;background:var(--panel2)}.player-placeholder{width:88px;height:88px;border-radius:18px;background:var(--panel2);display:grid;place-items:center;font-size:34px;color:var(--gold2);font-weight:900}.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:15px}.fact{background:var(--panel2);border-radius:11px;padding:11px}.fact span{display:block;font-size:9px;color:var(--muted);text-transform:uppercase}.fact b{font-size:14px}.manager-link{color:var(--gold2);cursor:pointer;font-weight:800}


/* Player Profile v3: Delphi FMX PlayerProfile visual structure */
.pp-shell{width:min(420px,100%);margin:0 auto;background:var(--panel);color:var(--text);min-height:100vh;border-left:2px solid var(--gold);border-right:2px solid var(--gold)}
.pp-topbar{height:58px;background:var(--bg);color:var(--text);border-bottom:1px solid var(--gold);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;position:sticky;top:0;z-index:35}
.pp-topbar button{background:transparent;color:var(--text);text-align:left;padding:0 15px;font-size:12px}
.pp-topbar strong{text-align:center;font-size:12px;white-space:nowrap}.pp-content{padding-bottom:28px}
.pp-card{margin:10px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.pp-hero{padding:16px 16px 14px}.pp-photo,.pp-photo-placeholder{width:100%;height:205px;border-radius:12px;background:var(--panel2);object-fit:contain;display:flex;align-items:center;justify-content:center;color:var(--text)}
.pp-photo-placeholder{color:var(--text);background:var(--panel2)}.pp-name{font-size:14px;margin:20px 2px 15px}.pp-hero>div:not(.pp-name):not(.pp-photo-placeholder){font-size:12px;margin:0 2px 14px}
.pp-info{height:105px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;text-align:center;padding:8px 3px}
.pp-info b{display:block;font-size:12px;margin-bottom:16px}.pp-info span{font-size:10px}
.pp-section-title{font-size:12px;font-weight:400;margin:18px 18px 10px}
.pp-rating-card{margin:0 10px;border:2px solid var(--gold);border-radius:18px;background:var(--bg);color:var(--text);padding:12px 20px 18px;overflow:hidden}
.pp-logo{width:105px;height:58px;object-fit:contain;display:block;margin:0 0 4px 12px}
.pp-rating-grid{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center}
.pp-rating-circle{width:108px;height:108px;border:3px solid var(--gold2);border-radius:50%;display:grid;place-items:center;font-size:12px}
.pp-rating-caption{text-align:center;color:var(--gold2);font-size:11px;margin-top:8px}
.pp-rating-lines{font-size:11px}.pp-rating-lines div{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0 0 17px}.pp-rating-lines b{font-weight:400}
.pp-risk{text-align:center;color:var(--gold2);font-size:10px;margin-top:13px}
.pp-manager-card{padding:15px;font-size:11px;line-height:2}.pp-manager-name{font-size:12px;cursor:pointer}.pp-manager-name:hover{text-decoration:underline}
.pp-about{min-height:94px;padding:18px;font-size:11px;line-height:1.5}
.pp-list-card{margin:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px;font-size:11px;line-height:2}
.pp-row-head{display:flex;justify-content:space-between;gap:12px}.pp-row-head span:last-child{text-align:right}
.pp-metrics.six{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;gap:8px 0}.pp-metrics>div{text-align:center}.pp-metrics b{display:block;font-weight:400;font-size:12px}.pp-metrics span{font-size:10px}
.pp-list-card.injury{min-height:130px}.pp-list-card.injury p{margin:14px 0 0;line-height:1.35}.pp-empty{padding:18px;font-size:11px}
.profile-loading{padding:30px;color:var(--muted)}
#profileView:not(.hidden){position:relative}
@media(min-width:700px){
  #profileView{padding:0}
  .pp-shell{box-shadow:0 0 50px var(--scrim)}
}


/* v4 desktop profile layout + reliable mobile tap targets */
.name-link{
  display:block;
  width:max-content;
  max-width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  -webkit-tap-highlight-color:var(--tap);
  touch-action:manipulation;
  pointer-events:auto;
  position:relative;
  z-index:4;
}
.manager-link-feed{font-weight:800;color:var(--text)}
.player-link-feed{color:var(--gold2);font-size:13px;margin-top:3px}
.name-link:hover,.name-link:focus{text-decoration:underline;outline:none}

.player-row{
  display:block;
  width:100%;
  text-align:left;
  color:var(--text);
  font:inherit;
  -webkit-tap-highlight-color:var(--tap);
  touch-action:manipulation;
  pointer-events:auto;
}
.pp-manager-name{
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:12px;
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color:var(--tap);
  touch-action:manipulation;
  pointer-events:auto;
}

/* Desktop: player profile uses the same centered width as the feed instead of phone mockup */
@media (min-width:700px){
  .pp-shell{
    width:min(620px,calc(100vw - 40px));
    margin:22px auto 90px;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    background:var(--panel);
    color:var(--text);
    box-shadow:0 10px 40px var(--scrim);
  }
  .pp-topbar{
    position:relative;
    height:64px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
  }
  .pp-topbar button{color:var(--gold2)}
  .pp-content{padding:12px 14px 30px;background:var(--panel)}
  .pp-card{
    margin:10px 0;
    background:var(--panel2);
    border-color:var(--line);
    color:var(--text);
  }
  .pp-hero{padding:18px}
  .pp-photo,.pp-photo-placeholder{
    height:340px;
    background:var(--bg);
    color:var(--muted);
  }
  .pp-name{font-size:24px;font-weight:900;margin-top:18px}
  .pp-hero>div:not(.pp-name):not(.pp-photo-placeholder){font-size:14px;color:var(--muted);margin-bottom:8px}
  .pp-info{height:auto;padding:14px 8px}
  .pp-info>div{background:var(--panel);border-radius:10px;padding:12px 5px;margin:0 4px}
  .pp-info b{font-size:15px;margin-bottom:8px}
  .pp-info span{color:var(--muted)}
  .pp-section-title{margin:22px 2px 10px;color:var(--text);font-size:13px;font-weight:700}
  .pp-rating-card{margin:0;border-color:var(--gold);padding:18px 28px 24px}
  .pp-logo{width:135px;height:72px}
  .pp-rating-grid{grid-template-columns:160px 1fr;gap:28px}
  .pp-rating-circle{width:145px;height:145px;font-size:18px}
  .pp-rating-lines{font-size:13px}
  .pp-manager-card,.pp-list-card{
    margin:10px 0;
    background:var(--panel2);
    border-color:var(--line);
    color:var(--text);
  }
  .pp-about{padding:15px 2px 20px;color:var(--text);font-size:13px}
  .pp-empty{color:var(--muted)}
}

/* Mobile: make the tap targets larger without changing layout */
@media (max-width:699px){
  .name-link{min-height:24px;display:flex;align-items:center}
  .manager-link-feed{min-height:28px}
  .player-link-feed{min-height:26px}
  .pp-manager-name{min-height:36px;display:flex;align-items:center}
  .player-row{min-height:52px}
}


/* v5 registration + browser camera/library post UI */
.login-separator{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px;margin:22px 0 14px}
.login-separator:before,.login-separator:after{content:"";height:1px;background:var(--line);flex:1}
.secondary{padding:13px 12px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-weight:700}
.secondary:hover{border-color:var(--gold)}
.secondary.wide{display:block;width:100%;margin-top:10px}
.text-link{background:transparent;color:var(--gold2);font-weight:800;padding:6px 0}
.register-wrap{padding:20px 0}.brand.compact{margin:5px 0 18px}.brand.compact .brand-mark{font-size:43px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profile-photo-box{height:190px;border:1px dashed var(--control-line);border-radius:14px;background:var(--bg);display:grid;place-items:center;overflow:hidden;color:var(--muted);margin:15px 0 10px}
.profile-photo-box img{width:100%;height:100%;object-fit:contain}
.media-picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 18px}
.hidden-file{display:none!important}
select,textarea{width:100%;margin-top:7px;padding:13px;border-radius:12px;border:1px solid var(--control-line);background:var(--bg);color:var(--text);font-size:15px;outline:none}
textarea{resize:vertical;min-height:100px;font-family:inherit}
select:focus,textarea:focus{border-color:var(--gold)}

.share-view{padding:10px 0 20px}
.share-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;margin:10px 0 90px}
.share-head{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;margin-bottom:12px}
.share-head strong{text-align:center}
.share-preview{height:360px;background:var(--bg);border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;overflow:hidden;color:var(--muted);margin:14px 0}
.share-preview img,.share-preview video{width:100%;height:100%;object-fit:contain;background:var(--bg)}
#publishPostBtn:disabled{opacity:.55;cursor:wait}

@media(max-width:699px){
  .login-screen{padding:14px}
  .login-card{padding:22px 18px}
  .form-grid{grid-template-columns:1fr}
  .media-picker-grid{grid-template-columns:1fr 1fr}
  .secondary{min-height:48px}
  .share-card{margin:0 0 88px;border-radius:0;border-left:0;border-right:0}
  .share-preview{height:300px}
}

.build-badge{margin:8px 0 2px;text-align:center;font-size:10px;letter-spacing:2px;color:var(--muted)}


/* v5.3 EXPLORE */
.explore-loading{padding:32px;color:var(--muted);text-align:center}
.explore-shell{width:min(680px,100%);margin:0 auto 95px;padding:16px}
.explore-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:8px 0 18px}
.explore-head span{font-size:11px;letter-spacing:2px;color:var(--gold2)}
.explore-head h1{font-size:27px;margin:2px 0 0}
.explore-summary{font-size:10px;color:var(--muted);text-align:right}
.explore-summary b{color:var(--gold2)}
.explore-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:12px}
.explore-tabs button{padding:11px;border-radius:9px;color:var(--muted);font-weight:800}
.explore-tabs button.active{background:var(--gold);color:var(--bg)}
.explore-panel{display:grid;gap:9px}
.explore-manager-card,.explore-player-card{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px;color:var(--text);min-height:78px}
.explore-manager-card:hover,.explore-player-card:hover{border-color:var(--gold)}
.explore-avatar,.explore-player-photo{width:54px;height:54px;min-width:54px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);color:var(--gold2);font-weight:900;font-size:15px;object-fit:cover}
.explore-avatar.player{background:var(--panel2)}
.explore-manager-main,.explore-player-main{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.explore-manager-main b,.explore-player-main b{font-size:14px}
.explore-manager-main small,.explore-player-main small{font-size:11px;color:var(--muted);white-space:normal}
.explore-player-main em{font-size:10px;color:var(--gold2);font-style:normal}
.explore-count{text-align:center;color:var(--gold2);font-size:16px;font-weight:900}
.explore-count small{display:block;font-size:8px;color:var(--muted);margin-top:3px}
.explore-arrow{font-size:28px;color:var(--gold2);padding:0 5px}
@media(max-width:699px){.explore-shell{padding:12px 10px}.explore-head{padding:0 4px}.explore-manager-card,.explore-player-card{min-height:82px}}


/* v5.4 PLAYER PROFILE DETAILS */
.pp-rating-lines .pp-rating-detail{
  width:100%;display:grid;grid-template-columns:1fr auto 14px;gap:8px;
  align-items:center;margin:0 0 12px;padding:8px 7px;border:1px solid var(--line);
  border-radius:9px;background:var(--bg);color:var(--text);text-align:left;cursor:pointer
}
.pp-rating-lines .pp-rating-detail:hover{border-color:var(--gold);background:var(--panel)}
.pp-rating-lines .pp-rating-detail b{font-weight:700;color:var(--gold2)}
.pp-rating-lines .pp-rating-detail i{font-style:normal;color:var(--gold2);font-size:18px}
.pp-detail-panel{margin:12px 10px;padding:16px;border:1px solid var(--gold);border-radius:16px;background:var(--bg)}
.pp-detail-head{display:flex;justify-content:space-between;align-items:center;color:var(--gold2);margin-bottom:13px}
.pp-detail-head button{font-size:24px;color:var(--muted);padding:0 6px}
.pp-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pp-detail-grid>div{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px;text-align:center}
.pp-detail-grid b{display:block;font-size:14px}.pp-detail-grid span{display:block;font-size:8px;color:var(--muted);margin-top:4px}
.pp-detail-panel p,.pp-note{font-size:10px;line-height:1.5;color:var(--muted);margin:12px 2px 0}
@media(min-width:700px){.pp-detail-panel{margin:14px 28px}.pp-detail-grid{grid-template-columns:repeat(4,1fr)}}

/* Stability feedback and mobile post interactions */
button:disabled{opacity:.55;cursor:wait}
.connection-banner{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:10px;padding:12px;background:var(--panel2);color:var(--text);border-bottom:1px solid var(--gold);font-size:14px}
.connection-banner span{flex:1}.connection-banner button,.comment-tools button,.reels-toolbar button,#reelsMore,#copyDialog button{background:var(--panel2);color:var(--text);padding:10px;border-radius:9px}
.actions{flex-wrap:wrap}.actions .time{flex-basis:100%;text-align:right}
.comments-dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;width:min(560px,calc(100% - 20px));max-height:85dvh}
dialog::backdrop{background:var(--scrim)}.comments-dialog header{display:flex;justify-content:space-between;align-items:center}.comments-dialog h2{font-size:19px;margin:0 0 12px}
#commentsClose{background:none;color:var(--text);font-size:26px;padding:8px}#commentsList{max-height:42dvh;overflow:auto;overscroll-behavior:contain}
.comment{padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.comment time{display:block;font-size:11px;color:var(--muted);margin-top:4px}.comment p{white-space:pre-wrap;line-height:1.5}
.comment-tools{display:flex;gap:8px;margin:10px 0}.comments-dialog textarea{width:100%;padding:12px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;font:inherit;resize:vertical}
#commentStatus,#reelsStatus{color:var(--muted);padding:8px 0;font-size:13px}
#reelsView{max-width:480px;margin:auto}.reels-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px}
#reelsList{height:calc(100dvh - 220px);min-height:300px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;background:var(--bg);border-radius:16px}
.reel{position:relative;height:100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;background:var(--bg);overflow:hidden}
.reel video{display:block;width:100%;height:100%;aspect-ratio:9/16;object-fit:contain;background:var(--bg)}
.reel-info{position:absolute;bottom:52px;left:0;right:0;padding:30px 16px 8px;background:linear-gradient(transparent,var(--overlay));pointer-events:none}
.reel-info p{white-space:pre-wrap;overflow-wrap:anywhere;max-height:80px;overflow:auto;font-size:14px;margin:7px 0;pointer-events:auto}
.reel-info button{pointer-events:auto}.reel-actions{display:flex;gap:8px;flex-wrap:wrap}.reel-hint{display:block;font-size:12px;color:var(--muted)}.reel-retry{font-size:12px;color:var(--gold2)}
#reelsMore{width:100%;margin-top:8px}
@media(min-width:700px){#reelsList{max-height:760px}.reel video{max-width:428px;margin:auto}}

/* Owned forms and stable touch targets */
.bottom-nav{grid-template-columns:repeat(5,1fr)}button{min-height:44px}.editor-card{max-width:600px;margin:12px auto;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:16px}.editor-card label{display:block;margin:12px 0}.editor-card input,.editor-card textarea{box-sizing:border-box;width:100%;min-width:0;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}.owner-tools{display:flex;gap:8px;flex-wrap:wrap;padding:12px}.owner-tools button{background:var(--gold);color:var(--on-accent);padding:10px;border-radius:8px}.owner-avatar{width:96px;height:96px;object-fit:cover;border-radius:50%}.post-card img.media{aspect-ratio:4/5;object-fit:contain;background:var(--bg)}.profile-bio,.description{overflow-wrap:anywhere}.reel-info .name-link{color:var(--text);font-weight:bold}.reel-info .follow{pointer-events:auto}

.connection-banner{top:72px}

.actions button,.reel-actions button,#commentsClose,#connectionDismiss{min-width:44px}

.media-error{min-height:220px;display:grid;place-content:center;padding:24px;text-align:center;color:var(--muted);background:var(--bg)}.media-error button{background:var(--gold);color:var(--on-accent);border-radius:8px;padding:12px}

/* Reserve the feed media frame before video metadata or image errors arrive. */
video.media{aspect-ratio:4/5;height:auto;object-fit:contain}
.media-error{aspect-ratio:4/5;min-height:0}

/* FOOTBALLSHIP branding: preserve the supplied logo proportions and existing layout. */
.brand-logo{display:block;width:160px;max-width:100%;height:auto;object-fit:contain;margin:0 auto;border-radius:12px}
.brand.compact .brand-logo{width:104px}
.mini-brand{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:1px}
.mini-brand .brand-logo{width:auto;height:44px;max-width:none;margin:0;border-radius:6px}
.pp-logo{width:96px;height:auto;max-width:100%;margin:0 0 12px;object-fit:contain;border-radius:8px}

@media(max-width:360px){.mini-brand{font-size:16px;letter-spacing:.5px;gap:8px}.mini-brand .brand-logo{height:36px}}

/* Mobile header and inbox, including display cutouts. */
.topbar{height:auto;min-height:68px;padding-top:calc(10px + env(safe-area-inset-top));gap:8px}
.topbar>div:first-child{min-width:0}.mini-brand{min-width:0;font-size:clamp(12px,3.5vw,20px);letter-spacing:0;gap:6px}
.mini-brand .brand-logo{height:32px}.header-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.header-actions .ghost{padding:8px}
.notification-bell{position:relative;display:grid;place-items:center;min-width:44px;color:var(--text)}
#notificationBadge{position:absolute;right:0;top:0;border-radius:12px;padding:2px 5px;background:var(--accent-light);color:var(--bg);font-size:10px;font-weight:800}
#notificationBadge[hidden]{display:none}#notificationsList{max-height:55dvh;overflow:auto;overscroll-behavior:contain}
.notification{padding:8px;border-bottom:1px solid var(--line);border-radius:8px}.notification.unread{background:var(--panel2);border-left:3px solid var(--accent-light)}
.notification-open{display:block;width:100%;text-align:left;background:none;color:var(--text);line-height:1.5;overflow-wrap:anywhere;padding:8px}
.notification time{display:block;font-size:12px;color:var(--muted)}.notification-state{background:none;color:var(--accent-light);font-size:12px;padding:4px 8px}
#notificationsStatus{font-size:13px;color:var(--muted)}.comment-tools{flex-wrap:wrap}#notificationsClose{min-width:44px;font-size:24px}
.bottom-nav{height:calc(72px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.bottom-nav button{min-width:0;width:auto}main{padding-bottom:calc(90px + env(safe-area-inset-bottom))}.comments-dialog{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
@media(max-width:360px){.topbar{padding-left:10px;padding-right:10px}.mini-brand .brand-logo{height:26px}.header-actions .ghost{font-size:12px}}

/* Poster remains above the media until real playback has started. */
.feed-video{position:relative;aspect-ratio:4/5;max-height:calc(100svh - 170px);min-height:160px;overflow:hidden;background:var(--panel);isolation:isolate}
.feed-video video,.feed-cover{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.feed-cover{z-index:1;background:var(--panel);pointer-events:none}
.feed-video.is-playing .feed-cover{visibility:hidden}
.feed-video button{position:absolute;z-index:2;border:0;color:var(--text);background:var(--overlay);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;padding:10px;cursor:pointer}
.feed-video button:focus-visible{outline:2px solid var(--accent-light);outline-offset:-3px}
.feed-play{left:calc(50% - 22px);top:calc(50% - 22px)}
.feed-video.is-playing .feed-play{visibility:hidden}
.feed-sound{right:12px;bottom:12px}.feed-sound svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.feed-sound[data-muted="true"] .sound-on,.feed-sound[data-muted="false"] .sound-off{display:none}

/* Shared brand surfaces; media pixels are never tinted or filtered. */
html{background:var(--bg)}body{background:var(--page-fill);background-attachment:fixed}
.login-screen{background:var(--page-fill);padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.card,.post-card,.profile-card,.share-card,.editor-card,.pp-card,.pp-list-card,.explore-manager-card,.explore-player-card,.comments-dialog{background:var(--card-fill);box-shadow:var(--shadow)}
.primary,.bottom-nav .post{background:var(--accent-fill);color:var(--on-accent)}
input,select,textarea{caret-color:var(--accent-light)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px}
input:focus,textarea:focus,select:focus{border-color:var(--accent-light)}
.ghost,.follow,.secondary,.comment-tools button,.reels-toolbar button,#reelsMore,#copyDialog button{border:1px solid var(--line);color:var(--text)}
.follow.on{color:var(--accent-light);border-color:var(--accent-light)}
.bottom-nav .active{color:var(--accent-light);box-shadow:inset 0 2px var(--accent-light);background:linear-gradient(var(--tap),transparent)}
.bottom-nav .post.active{background:var(--accent-fill);color:var(--on-accent)}
.avatar,.player-placeholder,.explore-avatar,.pp-photo-placeholder{background:linear-gradient(145deg,var(--panel2),var(--panel));color:var(--accent-light)}
.pp-shell,.pp-content{background:var(--bg);color:var(--text)}
.pp-topbar{background:var(--chrome)}.pp-rating-card{background:var(--card-fill)}
.explore-tabs button,.pp-detail-head button{background:transparent}.explore-tabs button.active{background:var(--accent-fill);color:var(--on-accent)}
.notification.unread{background:linear-gradient(110deg,var(--panel2),var(--panel));border-left-color:var(--accent-light)}
.notification-open:hover,.notification-open:focus-visible{background:var(--tap);border-radius:8px}
.feed-video,.feed-cover,.media-error,.share-preview{background:var(--card-fill)}
#reelsList,.reel,.reel video{background:var(--bg)}
.reel video{background-image:url('video-cover.svg');background-position:center;background-size:contain;background-repeat:no-repeat}
.feed-video button{color:var(--text);background:var(--overlay);border:1px solid var(--line)}
.media,.share-preview img,.share-preview video,.post-card img.media{background:var(--bg)}
::selection{background:var(--accent);color:var(--on-accent)}

/* FOOTBALLSHIP Appearance & Install */
html, body {
  background: var(--bg);
  color: var(--text);
}

.fs-settings-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.fs-settings-btn {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 13px;
  cursor: pointer;
}

.fs-settings-dialog {
  width: min(92vw, 440px);
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

.fs-settings-dialog::backdrop {
  background: rgba(0,0,0,.65);
}

.fs-settings-dialog h2 {
  margin-top: 0;
}

.fs-theme-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin: 18px 0;
}

.fs-theme-choice {
  padding: 15px 5px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
}

.fs-theme-choice[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--tap);
}

.fs-install-btn {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-weight: 700;
  cursor: pointer;
}

.fs-install-help {
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.fs-settings-close {
  margin-top: 16px;
  width: 100%;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  color: var(--text);
  background: var(--panel);
}

.reel-info,
.reel-info * {
  color: #fff;
}

// FOOTBALLSHIP - Theme and PWA Installation
(() => {
  const KEY = 'footballship-theme';
  const themes = ['light', 'blue', 'dark'];
  let deferredInstallPrompt = null;

  const dialog = document.getElementById('fsSettingsDialog');
  const installBtn = document.getElementById('fsInstallBtn');
  const help = document.getElementById('fsInstallHelp');

  if (!dialog || !installBtn || !help) return;

  function currentTheme() {
    return themes.includes(document.documentElement.dataset.theme)
      ? document.documentElement.dataset.theme
      : 'blue';
  }

  function applyTheme(theme) {
    if (!themes.includes(theme)) return;

    document.documentElement.dataset.theme = theme;

    try {
      localStorage.setItem(KEY, theme);
    } catch (_) {}

    const themeColors = {
      light: '#F4F8FC',
      blue: '#031948',
      dark: '#0B0E14'
    };

    document.querySelector('meta[name="theme-color"]')
      ?.setAttribute('content', themeColors[theme]);

    document.querySelectorAll('[data-fs-theme]')
      .forEach(button => {
        button.setAttribute(
          'aria-pressed',
          String(button.dataset.fsTheme === theme)
        );
      });
  }

  function openSettings() {
    applyTheme(currentTheme());
    help.textContent = '';
    if (!dialog.open) dialog.showModal();
  }

  function addSettingsButton(container) {
    if (!container || container.querySelector('#fsSettingsBtn')) return;

    const button = document.createElement('button');
    button.id = 'fsSettingsBtn';
    button.type = 'button';
    button.className = 'fs-settings-btn';
    button.textContent = '⚙ Görünüm';
    button.addEventListener('click', openSettings);

    container.prepend(button);
  }

  // Feed üst menüsü
  addSettingsButton(document.querySelector('.header-actions'));

  // Giriş ekranından da tema seçilebilsin
  const loginCard = document.querySelector('#loginView .login-card');
  if (loginCard) {
    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'fs-settings-btn';
    button.textContent = '⚙ Görünüm / Uygulamayı Yükle';
    button.addEventListener('click', openSettings);
    loginCard.appendChild(button);
  }

  document.querySelectorAll('[data-fs-theme]')
    .forEach(button => {
      button.addEventListener('click', () => {
        applyTheme(button.dataset.fsTheme);
      });
    });

  document.getElementById('fsSettingsClose')
    ?.addEventListener('click', () => dialog.close());

  dialog.addEventListener('click', event => {
    if (event.target === dialog) dialog.close();
  });

  window.addEventListener('beforeinstallprompt', event => {
    event.preventDefault();
    deferredInstallPrompt = event;
  });

  installBtn.addEventListener('click', async () => {
    const ua = navigator.userAgent;
    const isIOS = /iPad|iPhone|iPod/.test(ua) ||
      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);

    const standalone =
      window.matchMedia('(display-mode: standalone)').matches ||
      navigator.standalone === true;

    if (standalone) {
      help.textContent = 'FOOTBALLSHIP zaten uygulama olarak açılmış.';
      return;
    }

    if (deferredInstallPrompt) {
      const prompt = deferredInstallPrompt;
      deferredInstallPrompt = null;
      await prompt.prompt();
      await prompt.userChoice;
      return;
    }

    if (isIOS) {
      help.textContent =
        'iPhone: Bu sayfayı Safari ile açın. ' +
        'Paylaş simgesine dokunun, ardından ' +
        '"Ana Ekrana Ekle" seçeneğini kullanın. ' +
        'Seçenek görünmüyorsa Safari paylaşım menüsündeki ' +
        '"Diğer" veya "Eylemleri Düzenle" bölümünü kontrol edin.';
    } else {
      help.textContent =
        'Tarayıcınızın menüsünü açın ve ' +
        '"Uygulamayı yükle" veya "Ana ekrana ekle" ' +
        'seçeneğini kullanın.';
    }
  });

  applyTheme(currentTheme());
})();