/* Shared viewport layouts; colors, club assets and country assets stay unchanged. */
[hidden]{display:none!important}
.screen-tabs,.screen-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0;flex:none}
.screen-tabs button,.screen-pagination button{padding:7px 14px;min-height:32px;background:#ffffff08;color:var(--ink);border:1px solid var(--line);border-radius:5px}
.screen-tabs button[aria-pressed=true]{border-color:#b9e976;color:#b9e976;background:#b9e97613}
/* Tab panels share one cell so the host height does not change between tabs. */
.screen-tab-host{display:grid!important;grid-template-columns:minmax(0,1fr)!important;row-gap:0!important;align-items:start}
.screen-tab-inactive{visibility:hidden}
.screen-pagination span{font-size:12px;min-width:55px;text-align:center}
.screen-pagination button:disabled{opacity:.35;cursor:default}
#app{min-height:0}
/* 100vh is the largest mobile viewport (address bar hidden) and made pages scroll by the bar height. */
body{min-height:100dvh}
body:has(#app>.panel)>header,body:has(#app>.panel)>footer,body:has(#app>.panel)>.pitch{display:none}
body:has(#app>.panel)>main{padding:0;max-width:none}
#app>.panel{min-height:100dvh;margin:0 auto;padding:24px;display:flex;flex-direction:column;justify-content:center}
#app>.panel h2{font-size:clamp(28px,5vw,48px)}
.match-tools{max-height:calc(100dvh - 20px);padding:18px}
@media(max-height:600px){.match-tools p{font-size:11px;line-height:1.4}.match-tools h2{font-size:24px;margin:8px 0}}
.room-layout:not(.team-selection-layout){min-height:100dvh}
.room-layout:not(.team-selection-layout) .room-main{padding:14px 26px}
.room-layout:not(.team-selection-layout) .room-title{margin:12px 0}
.room-layout:not(.team-selection-layout) .room-title h1{font-size:clamp(28px,3vw,44px)}
.room-layout:not(.team-selection-layout) .room-card{padding:14px}
.room-layout:not(.team-selection-layout) .room-page-bottom{margin-top:10px}
.room-page-bottom:empty{display:none}
/* The sign-off hangs off the layout like the account tile: one corner on every screen. */
.room-signoff{position:fixed;right:26px;bottom:20px;margin:0;z-index:2;text-align:right;color:#bccbd0;
 font:italic 22px/1.2 'Barlow Condensed',Impact,sans-serif;transform:rotate(-5deg);pointer-events:none}
.room-signoff em{color:#b9e976;font-style:inherit}
@media(max-width:1280px){.room-signoff{display:none}}
.room-layout:not(.team-selection-layout) .room-sidebar-motto{margin-top:24px}
.room-layout:not(.team-selection-layout) .room-logo{padding-bottom:12px}
.room-layout:not(.team-selection-layout) .room-sidebar nav{margin-top:10px;gap:5px}
.room-layout:not(.team-selection-layout) .room-sidebar nav button{min-height:38px;padding:9px}
.room-layout:not(.team-selection-layout) .room-card-heading{padding-bottom:8px;margin-bottom:8px}
.room-layout:not(.team-selection-layout) .fineprint{margin:6px 0;font-size:10px}
.room-layout:not(.team-selection-layout) .field-label{margin:6px 0 4px}
.room-layout:not(.team-selection-layout) .room-submit{padding:10px;margin-top:10px}
.room-layout:not(.team-selection-layout) .room-topline .home-guest{padding:4px 10px}
.room-layout:not(.team-selection-layout) input,.room-layout:not(.team-selection-layout) select{min-height:34px;padding:7px 10px}
.room-config{margin-top:10px!important;padding-top:10px!important}
.room-field-grid{gap:8px!important}
.room-columns:has(>.screen-tabs){display:block;max-width:1000px;margin:auto}
.room-columns:has(>.screen-tabs)>.room-support{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.room-config label{margin:6px 0 4px!important}
.room-create-card .room-card-heading{margin-bottom:8px}
.room-create-card .room-config h3{margin:0}
.room-create-card .room-config>p{margin:5px 0}
.room-create-card form>button{margin-top:10px}
.settings-page:not(.team-selection-layout),.match-finale{min-height:100dvh;padding:14px 4vw}
.settings-header{margin-bottom:8px}
.settings-content{max-width:900px}
.settings-title{margin:0 0 12px!important}
.settings-title h1,.guide-title h1{font-size:36px!important}
.settings-title>span{display:none}
.settings-card .settings-section{padding:18px}
.settings-section-heading{margin-bottom:12px}
.settings-slider-row{margin:12px 0}
.settings-back{margin-top:12px!important}
.settings-motion-note,.settings-footer{margin-top:10px!important}
.guide-title{margin:0 0 12px!important}
.guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.guide-card{min-height:0!important;padding:16px!important}
/* Examples size to their content: a fixed height made them spill over the card text and the pager. */
.guide-example{min-height:0!important;height:auto!important;padding:12px!important;justify-content:flex-start!important}
.guide-card>p{margin:10px 0 12px!important}
.guide-mini-note{margin-top:10px!important}
.guide-actions{margin-top:12px!important}
.guide-text-card{grid-column:1/-1}
.guide-text-card p{font-size:13px;line-height:1.5}
.match-content{padding-top:0!important}
.match-room .topbar{margin-bottom:8px}
.match-topbar{margin:8px 0;padding:8px 0}
.lobby-grid .room-card{padding:14px}
.lobby-invite .code{margin:10px 0;padding:10px}
.lobby-rules{margin-top:10px;padding-top:10px}
.match-room #stage>h2{margin:8px 0;font-size:26px}
.answer-panel .results{max-height:none!important;overflow:visible!important}
.match-notice{padding:14px!important}
.match-notice h1,.match-notice h2{margin:8px 0!important}
.finale-heading{margin:10px 0!important}
.finale-duel{margin:10px 0!important}
.finale-reward{margin:10px 0!important}
.finale-consent{margin-top:10px!important;padding:12px!important}
.finale-rounds{margin-top:8px!important}
.history-attempts>span{display:block}
.finale-rounds .room-table-wrap{max-height:none;overflow:visible}
.finale-rounds td{padding:8px!important}
.finale-rounds .screen-pagination{margin:3px 0}
@media(max-height:750px){
 .home-redesign .home-navigation{gap:8px}
 .home-redesign .home-sidebar{padding-top:20px;padding-bottom:16px}
 .room-layout:not(.team-selection-layout) .room-sidebar{padding-top:18px}
 .room-layout:not(.team-selection-layout) .room-sidebar nav button{min-height:34px;padding:8px}
 .settings-header .room-logo small,.settings-header .home-guest small{display:none}
 .settings-section-heading p{margin:4px 0}
 .settings-switch-row{padding:10px 0}
}
@media(max-width:700px){
 .room-layout:not(.team-selection-layout){display:block}
 .room-layout:not(.team-selection-layout) .room-sidebar{padding:8px 12px}
 .room-layout:not(.team-selection-layout) .room-sidebar>.room-logo{width:90px;margin:auto;padding-bottom:0}
 .room-layout:not(.team-selection-layout) .room-sidebar>.room-logo span,.room-layout:not(.team-selection-layout) .room-sidebar>.room-logo em{font-size:22px}
 .room-layout:not(.team-selection-layout) .room-sidebar>.room-logo small{display:none}
 .room-layout:not(.team-selection-layout) .room-sidebar nav{display:flex;flex-wrap:wrap;gap:3px}
 .room-layout:not(.team-selection-layout) .room-sidebar nav button{min-height:28px;padding:5px;font-size:10px;width:auto}
 .room-layout:not(.team-selection-layout) .room-sidebar-motto{display:none}
 .room-layout:not(.team-selection-layout) .room-main{padding:8px 12px}
 .room-layout:not(.team-selection-layout) .room-topline{display:none}
 .room-layout:not(.team-selection-layout) .room-title{margin:6px 0}
 .room-layout:not(.team-selection-layout) .room-title h1{font-size:26px}
 .room-layout:not(.team-selection-layout) .room-title p{display:none}
 .room-layout:not(.team-selection-layout) .set-tile{min-height:54px;padding:6px 4px}
 .room-layout:not(.team-selection-layout) .set-tile small{display:none}
 .room-layout:not(.team-selection-layout) .set-tile-icon svg{width:18px;height:18px}
 .room-layout:not(.team-selection-layout) .room-active-fields .fineprint{display:none}
 .room-layout:not(.team-selection-layout) .room-form-footnote{display:none}
 .room-columns{gap:8px!important}
 .room-columns:has(>.screen-tabs)>.room-support{grid-template-columns:1fr}
 .room-invite-art{height:60px!important;margin:8px auto!important}
 .room-friends-card p{margin-bottom:6px}
 .lobby-grid{grid-template-columns:1fr 1fr;gap:8px}
 .lobby-grid h2{font-size:19px}
 .lobby-grid .room-card{padding:10px}
 .lobby-grid .player-readiness{grid-template-columns:1fr}
 .lobby-grid .readiness{min-height:0;padding:8px}
 .lobby-grid .code{font-size:25px;letter-spacing:3px;padding:8px}
 .lobby-grid .lobby-rules{gap:5px;flex-wrap:wrap}
 .lobby-grid .fineprint{font-size:9px}
 .lobby-grid .consent-panel>button{padding:10px}
 .room-support{gap:8px!important}
 .settings-page,.match-finale{padding:10px 12px!important}
 .settings-title h1,.guide-title h1{font-size:28px!important}
 .settings-card .settings-section{padding:12px}
 .settings-languages{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .settings-slider-row{gap:6px!important}
 .settings-slider-row label{font-size:12px}
 .guide-grid{grid-template-columns:1fr}
 .guide-card>p{font-size:13px}
 .settings-footer{font-size:12px}
 .finale-rounds table{min-width:0!important;width:100%;table-layout:fixed;font-size:10px}
 .finale-rounds td,.finale-rounds th{overflow-wrap:anywhere;white-space:normal;padding:4px!important}
 .finale-rounds .history-answer{flex-wrap:wrap;min-width:0}
 .finale-rounds .screen-pagination{gap:2px;flex-wrap:wrap}
 .finale-rounds .screen-pagination button{padding:4px;min-width:20px}
 .finale-rounds .screen-pagination span{min-width:0;font-size:9px}
 .screen-tabs button{padding:6px 12px}
}
/* ===== Match play screen (team reveal and player search) =====
   Readable type. Wide windows put the teams and the answer panel side by side so the
   screen fits without shrinking. Fixed slots (results, pager, feedback) mean typing,
   paging or a wrong answer never moves or rescales anything. */
.match-room .match-content{max-width:1280px}
.match-room .settings-header .sound-toggle{font-size:12px}
.match-status span{font-size:11px}
.match-status b{font-size:26px;margin-top:4px}
.match-topbar>span{font-size:12px}
.match-room .scoreboard>span{font-size:14px}
.match-topbar .score{font-size:34px}
.match-room .match-topbar .textbtn{font-size:13px}
.match-heading{margin:8px 0 10px}
.match-heading .eyebrow{font-size:11px;margin-bottom:4px}
.match-heading h1{font-size:40px;margin:0}
.match-heading p{display:none}
.match-room .match-kicker{font-size:11px;letter-spacing:1.5px}
.play-duel{max-width:900px;margin:0 auto!important;padding:0!important;gap:20px;align-items:stretch}
.play-duel .play-clock{align-self:center}
.play-duel .side{min-height:0;padding:16px 14px}
.play-duel .side .crest{margin:10px auto;width:72px;height:82px}
.play-duel .teamname{font-size:clamp(20px,1.9vw,32px);line-height:1.05;margin:8px 0}
.play-duel .side p{font-size:14px;line-height:1.5}
.play-clock>span,.play-clock>small{font-size:11px;letter-spacing:1.5px}
.play-clock .timer{font-size:76px;margin:8px 0}
.play-progress{max-width:900px;margin:12px auto!important}
.reveal-caption{font-size:14px}
.answer-panel{max-width:640px;margin:0 auto!important;padding:16px 20px!important}
.answer-panel-heading>span,.answer-panel-heading>span:last-child{font-size:11px;letter-spacing:1px}
.answer-panel .searchbox{margin:10px 0 0}
.answer-panel input{font-size:18px;padding:13px 16px}
.answer-panel #playerresults,.answer-panel #playerresults:empty{display:block;height:calc(4 * 52px + 2px);margin-top:8px;overflow-x:hidden!important;overflow-y:auto!important;max-height:none!important;overscroll-behavior:contain}
.answer-panel #playerresults:empty{background:transparent;border-color:transparent}
.answer-panel #playerresults .option{height:52px;min-height:0;padding:0 14px;font-size:16px;white-space:nowrap}
.answer-panel #playerresults .option>span[translate]{min-width:0;overflow:hidden;text-overflow:ellipsis}
.answer-panel #playerresults .option small{font-size:13px}
.answer-panel #playerresults .player-thumb{width:34px;height:38px;font-size:11px}
.answer-panel #playerresults>p{font-size:15px}
.answer-panel #playerresults+.screen-pagination{margin:6px 0}
.answer-panel #playerresults+.screen-pagination span{font-size:14px}
.answer-panel #playerresults+.screen-pagination[hidden]{display:flex!important;visibility:hidden}
.answer-panel #feedback,.answer-panel #feedback:empty{display:block;box-sizing:border-box;min-height:36px;margin:4px 0 0;padding:8px 12px;font-size:14px;line-height:20px}
.answer-panel>p.center{font-size:13px;margin:6px 0 0!important}
.give-up-panel{margin-top:8px!important;padding:4px!important}
.give-up-panel button{font-size:15px;padding:11px 22px}
.give-up-panel p{font-size:13px!important;margin:6px 0 0!important}
.match-room .settings-footer{font-size:10px;margin-top:10px!important}
.match-room .settings-footer em{font-size:18px}
@media(min-width:960px){
 .match-room #stage:has(.answer-panel) .play-duel{grid-template-columns:1fr clamp(96px,9vw,140px) 1fr;gap:clamp(10px,1.2vw,20px)}
 .match-room #stage:has(.answer-panel){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"heading heading" "progress progress" "duel answer";column-gap:32px;align-items:center}
 .match-room #stage:has(.answer-panel)>.match-heading{grid-area:heading}
 .match-room #stage:has(.answer-panel)>.play-progress{grid-area:progress;width:100%;max-width:none;margin:2px 0 16px!important}
 .match-room #stage:has(.answer-panel)>.play-duel{grid-area:duel;width:100%;max-width:none}
 .match-room #stage:has(.answer-panel)>#answerarea{grid-area:answer;min-width:0}
 .match-room #stage:has(.answer-panel) .answer-panel{max-width:none}
}
@media(max-width:699px){
 .match-status span{font-size:9px}
 .match-status b{font-size:20px}
 .match-topbar .score{font-size:26px}
 .match-room .scoreboard>span{font-size:12px}
 .match-heading h1{font-size:26px}
 .match-room .match-kicker{font-size:9px;letter-spacing:.5px}
 .play-duel{grid-template-columns:1fr 64px 1fr;gap:8px}
 .play-duel .side{padding:10px 6px}
 .play-duel .side .crest{width:44px;height:50px;margin:6px auto}
 .play-duel .teamname{font-size:18px}
 /* Space-saving on phones: names are already on the scoreboard, the placeholder explains the search. */
 .play-duel .side p:last-child,.match-heading .eyebrow,.answer-panel>p.center,.match-room .settings-footer{display:none}
 .match-room .settings-header .room-logo small{display:none}
 .match-room .settings-header .room-logo>span,.match-room .settings-header .room-logo>em{font-size:22px}
 .answer-panel #feedback,.answer-panel #feedback:empty{min-height:30px;padding:5px 10px;font-size:13px}
 .play-duel .side p{font-size:12px}
 .play-clock>span,.play-clock>small{font-size:9px;letter-spacing:0}
 .play-clock .timer{font-size:46px}
 .answer-panel{padding:12px!important}
 /* iOS Safari zooms the page into inputs smaller than 16px. */
 .answer-panel input{font-size:16px}
 .answer-panel #playerresults,.answer-panel #playerresults:empty{height:calc(6 * 48px + 2px)}
 .answer-panel #playerresults .option{height:48px;font-size:15px}
 .give-up-panel p{font-size:12px!important}
}
/* Team selection: the column count follows the list width (app.js sets --team-columns, 5-7 on
   desktop, 3 on phones) so tiles stay compact; the country strip spans the full width and its
   buttons share the row evenly (app.js sets --nation-columns to as many as fit). */
.team-selection-layout .selection-team-list{grid-template-columns:repeat(var(--team-columns,5),minmax(0,1fr))!important}
.team-selection-layout .nation-strip{max-width:none}
.team-selection-layout .nation-window>.nation-choice{flex:0 0 calc((100% - (var(--nation-columns,1) - 1) * 4px) / var(--nation-columns,1))}
.team-selection-layout .nation-choice span{font-size:9px}
/* Game set picker: square tiles with an icon, like the team grid, instead of a dropdown. */
.set-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:6px 0 12px}
.set-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:94px;padding:12px 8px;border:1px solid #6b8a9640;border-radius:10px;background:#08191fcc;color:#c8d6d9;text-align:center;line-height:1.25}
.set-tile strong{font-size:12px;font-weight:600;overflow-wrap:anywhere}
.set-tile small{font-size:10px;color:#8ea5ad}
.set-tile-icon svg{width:26px;height:26px;color:#9fc16f}
.set-tile:hover:not(:disabled){border-color:#8fb08c80}
.set-tile[aria-checked=true]{border-color:#b9e976;background:#b9e9760f;color:#e6f2d9;box-shadow:0 0 18px #b9e97612}
.set-tile[aria-checked=true] .set-tile-icon svg{color:#b9e976}
@media(max-width:699px){.set-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.set-tile{min-height:76px;padding:9px 6px}.set-tile strong{font-size:11px}}
/* Round nobody scored in: a red cross above the message, in place of the usual emblem. */
.match-notice{position:relative}
.cancel-mark{display:grid;place-items:center;width:clamp(104px,13vw,140px);height:clamp(104px,13vw,140px);margin:0 auto 10px;border-radius:50%;border:3px solid #ff4d52;background:radial-gradient(circle,#ff4d5233,#ff4d520a);color:#ff6165;font:800 clamp(60px,8vw,84px)/1 'Barlow Condensed',Impact,sans-serif;box-shadow:0 0 38px #ff4d5240,inset 0 0 26px #ff4d521f}
.result-cancelled .result-emblem{display:none}
/* Give-up requests: one warning lamp per player. */
.give-up-lamps{display:flex;justify-content:center;gap:30px;margin-top:10px}
.give-up-lamp{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;letter-spacing:1px;color:#8ea5ad;text-transform:uppercase}
.give-up-lamp i{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#22353d,#101d23);border:1px solid #6b8a9666;box-shadow:inset 0 2px 6px #00000080}
.give-up-lamp.is-on i{background:radial-gradient(circle at 35% 30%,#ff8f92,#e02a30);border-color:#ffc0c1;box-shadow:0 0 16px #ff4d52d9,0 0 34px #ff4d5280;animation:lamp-pulse 1.1s ease-in-out infinite}
.give-up-lamp.is-on small{color:#ffb2b4}
@keyframes lamp-pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* Wrong answer: a red countdown covers the answer box until the player may try again. */
.cooldown-lock{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:9px;border:1px solid #ff6b6f55;background:linear-gradient(160deg,#3b171df2,#23121af2);text-align:center;padding:10px}
.cooldown-lock strong{font:800 clamp(64px,11vw,132px)/1 'Barlow Condensed',Impact,sans-serif;color:#ff6b6f;text-shadow:0 0 26px #ff4d5266}
.cooldown-lock span{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#ffb9bb}
@media(max-width:699px){.cooldown-lock span{font-size:10px}.give-up-lamps{gap:16px}}
/* Both players ready: a full-screen 3-2-1 before the selection clock starts. */
.start-countdown{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(ellipse at 50% 45%,#12331fe6,#03090cf7);color:#dfeee0;text-align:center;padding:20px}
.start-countdown span{font-size:clamp(12px,1.6vw,16px);letter-spacing:6px;color:#b9e976}
.start-countdown strong{font:800 clamp(140px,26vw,260px)/1 'Barlow Condensed',Impact,sans-serif;color:#b9e976;text-shadow:0 0 50px #b9e97640;animation:count-pop .9s ease-out}
.start-countdown small{font-size:clamp(11px,1.4vw,14px);color:#9fb7ab;letter-spacing:2px}
@keyframes count-pop{from{opacity:.2;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}
.finale-pending{margin:10px 0 0;font-size:13px;color:#b9e976;letter-spacing:1px}
/* Match summary: one readable card per played round. */
.finale-rounds .finale-section-heading h2{font-size:20px}
.finale-rounds .finale-section-heading>span{font-size:11px;letter-spacing:1.5px}
.finale-round-list{display:grid;gap:10px}
.finale-round{display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.4fr) auto;align-items:center;gap:16px;padding:12px 16px;border:1px solid #6f8d9740;border-left:3px solid #6f8d97;border-radius:10px;background:#0a1d24b8}
.finale-round.is-win{border-left-color:#b9e976;background:linear-gradient(90deg,#b9e9760f,#0a1d24b8)}
.finale-round.is-loss{border-left-color:#ff7f83}
.finale-round.is-draw{border-left-color:#9aa7ab}
.finale-round-no{display:flex;flex-direction:column;align-items:center;min-width:42px;color:#9db3ba}
.finale-round-no b{font:700 26px 'Barlow Condensed',sans-serif;color:#dbe7ea}
.finale-round-no small{font-size:9px;letter-spacing:1.5px}
.finale-round-teams{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:#e3ecef;font-weight:600}
.finale-round-teams i{font-style:italic;color:#7f979f;font-size:12px;font-weight:400}
.finale-round-answer{display:flex;align-items:center;gap:10px;min-width:0}
.finale-round-answer b{display:block;font-size:15px;color:#cfe3b9;font-weight:600;overflow-wrap:anywhere}
.finale-round .history-attempts{font-size:12px;line-height:1.7;margin-top:4px}
.finale-round-outcome{font-size:13px;font-weight:700;white-space:nowrap}
.is-win .finale-round-outcome{color:#b9e976}
.is-loss .finale-round-outcome{color:#ff9a9d}
.is-draw .finale-round-outcome{color:#a8b6ba}
.finale-round-empty{font-size:14px;color:#9db3ba;text-align:center;margin:10px 0}
/* Finale: bigger player cards and rating strip. */
.finale-player-card{padding:22px 18px}
.finale-avatar{width:104px;height:116px;font-size:42px}
.finale-player-card h2{font-size:26px}
.finale-player-card p{font-size:13px}
.finale-player-label{font-size:11px;letter-spacing:2px}
.finale-rating{padding:16px 18px;margin:12px 18px 0}
.finale-rating>span{font-size:12px;letter-spacing:1.5px;color:#b3c6cb}
.finale-rating strong{font-size:22px;color:#cfdde1}
.finale-rating small{font-size:10px}
.finale-score>strong{font-size:clamp(70px,8vw,116px)}
.finale-score p{font-size:14px}
.finale-score>small{font-size:10px;letter-spacing:2px}
/* Answers nobody found: a plain table, one player per row with the years at both clubs. */
@media(max-width:760px){
 .finale-round{grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding:10px 12px}
 .finale-round-answer{grid-column:1/-1}
 .finale-round-outcome{grid-column:2;justify-self:end}
 .finale-round-teams{font-size:14px}
 .finale-avatar{width:78px;height:88px;font-size:32px}
 .finale-player-card h2{font-size:19px}
 .finale-rating{margin:10px 0 0;padding:12px}
 .finale-rating strong{font-size:18px}
}
/* Room screens (create / join / bot): readable type instead of the old compact sizes. */
.room-layout:not(.team-selection-layout) .set-picker{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px;margin:4px 0 8px}
.room-layout:not(.team-selection-layout) .set-tile{min-height:62px;padding:7px 6px;gap:2px}
.room-layout:not(.team-selection-layout) .set-tile-icon svg{width:20px;height:20px}
.room-layout:not(.team-selection-layout) .field-label{font-size:13px;margin:10px 0 5px;color:#ccd8dd}
.room-layout:not(.team-selection-layout) input,.room-layout:not(.team-selection-layout) select{font-size:14px;min-height:38px;padding:8px 12px}
.room-layout:not(.team-selection-layout) .room-card-heading h2{font-size:21px}
.room-layout:not(.team-selection-layout) .room-create-card .room-card-heading p{display:none}
.room-layout:not(.team-selection-layout) .room-card-heading p{font-size:13px}
.room-layout:not(.team-selection-layout) .fineprint{font-size:12px}
.room-layout:not(.team-selection-layout) .room-section-label h3{font-size:15px}
.room-layout:not(.team-selection-layout) .room-config-note{display:none}
.room-layout:not(.team-selection-layout) .room-form-footnote{font-size:12px!important}
.room-layout:not(.team-selection-layout) .room-preview-badge{font-size:11px;padding:5px 9px}
.room-layout:not(.team-selection-layout) .room-submit{font-size:15px;min-height:48px}
.room-layout:not(.team-selection-layout) .room-title p{font-size:14px;margin:4px 0 0}
.room-layout:not(.team-selection-layout) .room-title h1{font-size:clamp(26px,2.4vw,34px)}
.room-layout:not(.team-selection-layout) .room-steps strong{font-size:14px}
.room-layout:not(.team-selection-layout) .room-steps p{font-size:12px}
.room-layout:not(.team-selection-layout) .room-table{font-size:13px}
.room-layout:not(.team-selection-layout) .room-directory h2{font-size:19px}
.room-layout:not(.team-selection-layout) .room-tabs button{font-size:13px}
.room-layout:not(.team-selection-layout) .room-demo-note{font-size:12px}
.room-layout:not(.team-selection-layout) .room-refresh{font-size:13px;padding:10px 16px;width:auto}
.room-layout:not(.team-selection-layout) .set-tile strong{font-size:13px}
.room-layout:not(.team-selection-layout) .set-tile small{font-size:11px}
/* Room list: the Set column is new; on phones drop the always-1v1 Mode column so the table never scrolls sideways. */
@media(max-width:700px){.room-directory .room-table th:nth-child(3),.room-directory .room-table td:nth-child(3){display:none}}
/* Mobile team selection shows Ana Menü and Ayarlar/Rehber in a fixed top row; keep the title below it. */
@media(max-width:999px){.team-selection-layout .room-main{padding-top:46px!important}}
/* Back to the previous menu screen */
.page-back{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid #ffffff26;border-radius:7px;background:#0a1b24;color:var(--ink);font-size:15px;font-weight:700;white-space:nowrap}
.page-back:hover:not(:disabled){background:#12303b}
.room-title{position:relative}
.room-title>.page-back{position:absolute;left:0;top:0;bottom:0;margin:auto 0;height:max-content}
.settings-header>.page-back{margin:0 auto 0 18px}
@media(max-width:700px){.room-title>.page-back{position:static;display:flex;margin:0 auto 8px}.page-back{padding:8px 14px;font-size:14px}}
/* Touch screens (iPad): no double-tap zoom, no rubber-band drag, and inputs at 16px
   so Safari does not zoom and shift the page when a field is focused. */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overscroll-behavior:none}
/* Every screen is scaled to fit the window, so the page itself never scrolls. */
html,body{height:100%;overflow:hidden}
/* The match screen keeps its own compact layout: drop the motto before it runs past the edge. */
@media(max-height:820px){.team-selection-layout .room-sidebar-motto{display:none}}
/* The menu grew with the profile pages: on a short window it drops the motto and tightens up. */
@media(max-height:800px){
 .room-layout:not(.team-selection-layout) .room-sidebar-motto{display:none}
 .room-layout:not(.team-selection-layout) .room-sidebar nav{gap:3px;margin-top:6px}
 .room-layout:not(.team-selection-layout) .room-sidebar nav button{min-height:32px;padding:6px 9px}
}
@media(hover:none) and (pointer:coarse){input:not([type=range]):not([type=checkbox]),select,textarea{font-size:16px!important}}
/* Round result: the two clubs with crests and the answer's years, and the players' names */
.answer-proof .answer-clubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;color:var(--ink);font-size:inherit}
.answer-club{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.answer-club-crest{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:10px;overflow:hidden;font:700 20px 'Barlow Condensed',sans-serif;color:var(--lime);background:#0b1920}
.answer-club-name{font:700 clamp(26px,2.6vw,34px)/1.05 'Barlow Condensed',Impact,sans-serif;text-transform:none;overflow-wrap:anywhere}
/* One chip per spell: a comma-separated line of year ranges is hard to read at a glance. */
.answer-club-years{display:flex;flex-direction:column;align-items:center;gap:4px}
.answer-club-years b{padding:3px 12px;border-radius:999px;border:1px solid #b9e97655;background:#b9e97614;
 color:#d7f59a;font:600 15px/1.2 Manrope,Arial,sans-serif;white-space:nowrap}
.answer-club-years:empty{display:none}
.final-score .final-player{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:220px;font-size:inherit}
.final-score .final-player strong{font:700 clamp(22px,2.2vw,30px)/1.05 'Barlow Condensed',Impact,sans-serif;color:var(--ink);overflow-wrap:anywhere}
.final-score .final-player small{font-size:12px;letter-spacing:2px;color:var(--muted)}
@media(max-width:700px){.answer-club-crest{width:48px;height:48px}.answer-proof .answer-clubs{gap:10px}.answer-club-years b{font-size:13px;padding:2px 9px}.final-score .final-player{max-width:120px}}
/* Wide screens: answer and clubs on the left, score and ready buttons on the right,
   so the result fits without scaling the whole screen down. */
@media(min-width:960px){
.match-room .result.match-notice{max-width:1180px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:0 36px;align-items:center}
.result-side{border-left:1px solid var(--line);padding-left:36px}
.result-side .final-score{margin-top:0}
.result-main .answer-proof{margin-bottom:0;border-bottom:0}
}
/* Bilgisayara karşı: target score and answer time sit side by side */
.bot-setup{max-width:900px}
/* Friendly / ranked matchmaking and the invite screen */
.matchmaking-card{max-width:900px;margin:auto}
.matchmaking-rules{margin:16px 0 8px}
.matchmaking-note{font-size:14px;color:#aebbc2;margin:10px 0 16px}
#queue-form[hidden],.matchmaking-search[hidden]{display:none!important}
.matchmaking-search{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 10px;text-align:center}
.matchmaking-search h2{font:700 clamp(30px,3vw,42px)/1 'Barlow Condensed',Impact,sans-serif;margin:0;text-transform:none}
.matchmaking-search p{font-size:15px;color:#aebbc2;margin:0}
.matchmaking-pulse{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;color:#b9e976;border:2px solid #b9e97680;animation:search-pulse 1.6s ease-out infinite}
.matchmaking-pulse svg{width:44px;height:44px}
.matchmaking-clock{font:700 44px/1 'Barlow Condensed',sans-serif;color:#b9e976}
@keyframes search-pulse{0%{box-shadow:0 0 0 0 #b9e97655}100%{box-shadow:0 0 0 30px #b9e97600}}
.invite-name{margin-bottom:12px}
.start-opponent{font-style:normal;font-size:clamp(16px,2vw,22px);color:#dfeee0;margin-top:6px}
.start-opponent b{color:#b9e976}
/* The name on the match set-up screens, the narrower name field and the code boxes */
.signed-in-name{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 16px;border-radius:999px;
 border:1px solid #b9e97655;background:#b9e9760f;font-size:14px;color:#aebbc2;letter-spacing:.4px;text-transform:uppercase}
.signed-in-name b{color:#b9e976;margin:0;font:700 19px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.6px;text-transform:none}
.name-input{max-width:360px}
/* The name on the invite screen: one wide, centred field with no card around it. */
.invite-name{display:grid;justify-items:center;gap:4px;margin:0 auto 14px;max-width:250px;text-align:center}
.room-layout .invite-name .name-input{max-width:none;width:100%;height:78px;text-align:center;font:700 36px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.5px;padding:8px 12px}
.invite-name .field-label{font-size:13px}
.option-group{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#0b1a1580}
.code-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;max-width:660px;margin:8px auto 6px}
.room-layout .code-boxes .code-box{aspect-ratio:3/4;padding:0;text-align:center;text-transform:uppercase;border-radius:14px;
 font:700 clamp(30px,3.4vw,52px)/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px}
.room-layout .code-boxes .code-box:focus{border-color:#b9e976;outline:none;box-shadow:0 0 0 3px #b9e97633}
/* Account screens: the home tile, the account chip, sign-in, the kit picker and settings */
/* Outside every scaled screen and pinned to the window: one place, one size, everywhere. */
.account-tile{position:fixed;top:18px;right:24px;z-index:3;width:132px;height:132px;display:grid;justify-items:center;align-content:center;
 gap:2px;padding:10px;border-radius:20px;cursor:pointer;border:2px solid #b9e976;color:#06140d;text-align:center;
 background:linear-gradient(150deg,#d6f78f,#8fd14a);box-shadow:0 14px 34px #00000055,0 0 0 6px #b9e97622;transition:transform .15s ease,box-shadow .15s ease}
.account-tile:hover{transform:translateY(-2px);box-shadow:0 18px 40px #00000066,0 0 0 8px #b9e97633}
.account-tile strong{font:700 24px/1.05 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;text-transform:uppercase}
/* A player's name is shown exactly as they typed it. */
.account-tile:not(.account-tile-guest) strong{text-transform:none}
.account-tile small{font-size:12px;color:#123c1f;letter-spacing:.3px}
.account-tile-icon{display:grid;place-items:center;width:34px;height:34px;color:#123c1f}
.account-tile-icon svg{width:26px;height:26px}
.account-tile:not(.account-tile-guest){background:linear-gradient(150deg,#1b3a26,#0d2119);border-color:#b9e97688;color:var(--ink)}
.account-tile:not(.account-tile-guest) strong{font-size:19px;letter-spacing:.4px}
.account-tile:not(.account-tile-guest) small{color:#aebbc2}
.account-tile-kit{display:grid;place-items:center;margin-bottom:2px}
.account-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:999px;cursor:pointer;
 border:1px solid #b9e97666;background:linear-gradient(120deg,#16301f,#0d2119);color:inherit;text-align:left;box-shadow:0 6px 18px #00000040}
.account-chip:hover{border-color:#b9e976;background:linear-gradient(120deg,#1b3a26,#10281d)}
.account-chip-guest{border-color:#b9e976;background:linear-gradient(120deg,#1d3d27,#0f2a1c)}
.account-chip-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#b9e97622;color:#b9e976}
.account-chip-icon svg{width:18px;height:18px}
.account-chip-kit{display:grid;place-items:center;width:34px;height:34px}
.account-chip-text{display:grid;line-height:1.15}
.account-chip-text strong{font-size:15px;letter-spacing:.2px}
.account-chip-text small{font-size:12px;color:#aebbc2}
.account-chip-arrow{color:#b9e976;font-size:16px}
.room-layout{position:relative}
.account-warning{color:#ffeb00}
.ok{color:#b9e976}
.jersey{display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.auth-card{max-width:560px;margin:0 auto}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.auth-tabs button{padding:10px;border-radius:10px;border:1px solid var(--line);background:#0d2119;color:#aebbc2;font:600 15px/1 inherit;cursor:pointer}
.auth-tabs button[aria-selected="true"]{background:#b9e97622;border-color:#b9e97688;color:var(--ink)}
.auth-providers{display:grid;gap:10px}
.auth-provider{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;padding:12px}
.auth-provider-mark{font-weight:700}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:#88989f;font-size:13px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-top:14px}
.auth-links .room-submit{margin-top:0}
.fineprint.error{color:#ff8a80}
.legal-text h3{margin:18px 0 6px;font-size:17px}
.legal-text p{font-size:14px;line-height:1.55;color:#c8d6cc}
/* Settings: a summary bar, then three tabbed panels so the screen never has to shrink. */
.account-summary{display:grid;grid-template-columns:1fr auto;gap:18px 24px;align-items:center;max-width:1040px;margin:0 auto}
.account-side{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.account-side-end{justify-content:flex-end}
.account-identity{display:flex;align-items:center;gap:14px}
.account-identity h2{margin:0;font-size:22px}
.account-identity p{margin:3px 0 0;font-size:14px;color:#aebbc2}
.account-state{font-size:13px}
.danger-solid{padding:12px 26px;border-radius:12px;border:1px solid #ff6b5c;background:linear-gradient(140deg,#b02a20,#7d1a13);color:#ffe9e5;
 font:700 16px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 20px #00000045}
.danger-solid:hover{background:linear-gradient(140deg,#c8352a,#8f2018)}
.account-grid{display:grid;gap:16px;max-width:1040px;margin:12px auto 0}
.account-panel{display:grid;gap:16px;align-items:start}
.account-panel-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.account-panel-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.account-panel .account-wide{grid-column:1/-1}
.account-column{display:grid;gap:16px;align-content:start}
.account-grid h2{margin:0 0 10px;padding-left:12px;border-left:4px solid #b9e976;color:#b9e976;
 font:700 20px/1.1 'Barlow Condensed',Impact,sans-serif;letter-spacing:1.6px;text-transform:uppercase}
.account-grid form{display:grid;gap:6px;margin-bottom:14px}
.account-grid form:last-of-type{margin-bottom:0}
.account-grid form button{justify-self:start;margin-top:6px}
.account-note{margin:8px 0;padding:9px 12px;border-left:3px solid #ffeb00;border-radius:0 8px 8px 0;background:#ffeb001a;color:#f5e3b0;font-size:13px;line-height:1.45}
.account-note b{color:#ffeb00}
.account-danger{border-color:#ff8a8055}
.danger{border-color:#ff8a8088;color:#ffb4a9}
/* Kit picker: a big preview, twelve equal pattern tiles and twelve square colours */
.kit-picker{display:grid;grid-template-columns:minmax(190px,220px) minmax(300px,1fr);gap:22px;align-items:center}
.kit-preview{display:grid;place-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:#0d2119}
.kit-choices{display:grid;gap:10px}
.kit-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.kit-tile{display:grid;place-items:center;padding:6px;border-radius:10px;border:1px solid var(--line);background:#0d2119;cursor:pointer}
.kit-tile[aria-pressed="true"]{border-color:#b9e976;background:#b9e97615;box-shadow:0 0 0 2px #b9e97633}
.color-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.color-grid-number .color-swatch{background:#26332e;display:grid;place-items:center;color:var(--swatch);
 font:700 15px/1 'Barlow Condensed',Impact,sans-serif;text-shadow:0 0 2px #000}
.kit-number-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.kit-number-row .field-label{margin:0}
.room-layout .kit-number-row input{width:84px;text-align:center}
.kit-number-row small{color:#aebbc2;font-size:12px}
.color-swatch{aspect-ratio:1;border-radius:6px;border:1px solid #ffffff22;background:var(--swatch);cursor:pointer;padding:0}
/* The second colour only trims the kit, so its row is drawn as a frame around the shirt colour. */
.color-grid-secondary .color-swatch{background:#0d2119;box-shadow:inset 0 0 0 7px var(--swatch)}
.color-swatch[aria-pressed="true"]{outline:2px solid #b9e976;outline-offset:2px}
.provider-list,.session-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.provider-list li,.session-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.provider-list li:last-child,.session-list li:last-child{border-bottom:0;padding-bottom:0}
.session-list small{display:block;color:#aebbc2;font-size:12px}
.session-current{color:#b9e976;font-size:13px}
@media(max-width:900px){
 .account-summary{grid-template-columns:1fr}
 .account-side-end{justify-content:flex-start}
 .account-panel-two,.account-panel-three{grid-template-columns:1fr}
 .kit-picker{grid-template-columns:1fr;justify-items:center}
 .kit-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .account-tile{width:104px;height:104px;top:14px;right:18px}
 .account-tile strong{font-size:20px}
}

/* One place for the back button, and the guide inside the ordinary page shell */
/* Outside the scaled column, like the account tile: the same spot on every screen. */
.room-layout > .page-back{position:fixed;top:18px;left:236px;margin:0;z-index:3}
@media(max-width:1100px){.room-layout > .page-back{left:201px}}
@media(max-width:900px){.room-layout > .page-back{position:static;margin:12px 0 0 16px;justify-self:start}}
.guide-page-content{max-width:1100px;margin:0 auto}
.guide-page-content .guide-actions{margin-top:18px}
/* Profile, match history and match detail */
.stats-screen{display:grid;gap:14px;max-width:1180px;margin:0 auto;padding-bottom:34px}
.profile-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.profile-head h2{margin:0;font-size:24px}
.profile-head p{margin:4px 0 0;font-size:13px;color:#aebbc2}
.profile-who{min-width:0}
.profile-kit{display:grid;place-items:center;width:84px;height:84px;border:1px solid var(--line);border-radius:16px;background:#0d2119;flex:none}
.profile-rating{display:grid;justify-items:center;text-align:center;padding:0 24px}
.profile-rating strong{font:700 42px/1 'Barlow Condensed',Impact,sans-serif;color:#b9e976}
.profile-rating strong span{font-size:26px}
.profile-rating small{font-size:11px;color:#8b979d;margin-top:4px}
.stats-title{margin:4px 0 0;text-align:center;font:700 26px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.6px}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat-tile{display:grid;justify-items:center;gap:2px;padding:14px 12px;border:1px solid var(--line);border-radius:14px;background:#0b1a1580;text-align:center}
.stat-tile strong{font:700 34px/1 'Barlow Condensed',Impact,sans-serif;color:var(--ink)}
.stat-tile span{font-size:13px;color:#aebbc2}
.tile-total{border-color:#b9e97655;background:linear-gradient(160deg,#1a2a1780,#0b1a1580)}
.tile-total strong{color:#d7f59a}
.tile-win{border-color:#b9e97677;background:linear-gradient(160deg,#14301c90,#0b1a1580)}
.tile-win strong{color:#b9e976}
.tile-loss{border-color:#ff8a8055;background:linear-gradient(160deg,#2c151590,#0b1a1580)}
.tile-loss strong{color:#ff8a80}
.form-row{display:grid;justify-items:center;gap:6px}
.form-row span{font-size:12px;color:#aebbc2;letter-spacing:.4px}
.form-marks{display:flex;gap:8px}
.form-mark{display:grid;place-items:center;width:34px;height:30px;border-radius:8px;font:700 15px/1 'Barlow Condensed',Impact,sans-serif}
.form-win{background:#1e4426;border:1px solid #b9e97666;color:#d7f59a}
.form-loss{background:#3d1b1b;border:1px solid #ff8a8055;color:#ffb4a9}
.podium-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.podium-card{padding:14px 16px 0}
.podium-card h2{margin:0 0 6px;text-align:center;font-size:17px}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;max-width:420px;margin:0 auto}
.podium-place{width:118px}
.podium-place{display:grid;justify-items:center;gap:3px;text-align:center;min-width:0}
.podium-place strong{font-size:13px;line-height:1.2}
.podium-place small{font-size:12px;color:#b9e976}
.podium-badge{display:grid;place-items:center;width:46px;height:46px;position:relative}
.podium-badge img{width:100%;height:100%;object-fit:contain}
.podium-badge .badge-fallback{font:700 15px/1 'Barlow Condensed',Impact,sans-serif;color:#aebbc2}
.podium-face{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ffffff12;color:#aebbc2}
.podium-face svg{width:22px;height:22px}
/* The steps stay colourless: the height alone says which place it is. */
.podium-step{display:grid;place-items:center;width:100%;border-radius:8px 8px 0 0;font:700 22px/1 'Barlow Condensed',Impact,sans-serif;
 color:#c8d6cc;background:#ffffff0a;border:1px solid var(--line);border-bottom:0}
.place-1 .podium-step{height:54px}
.place-2 .podium-step{height:38px}
.place-3 .podium-step{height:30px}
.stats-empty{text-align:center}
.history-screen{display:grid;gap:14px;max-width:1180px;margin:0 auto}
/* Match history: three result tiles, then one row per match */
.result-tiles{display:flex;justify-content:center;gap:16px}
.result-tile{display:grid;justify-items:center;gap:6px;width:118px;padding:12px 8px;border-radius:14px;cursor:pointer;
 border:2px solid var(--line);background:#0b1a1580;color:#aebbc2;font-size:13px}
.result-tile-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid currentColor}
.result-tile-mark svg{width:24px;height:24px}
.result-tile.result-win{color:#b9e976}
.result-tile.result-loss{color:#ff8a80}
.result-tile.result-draw{color:#aebbc2}
.result-tile[aria-pressed="true"]{border-color:currentColor;background:#ffffff0d;box-shadow:0 0 22px #00000055}
.result-tile:hover{background:#ffffff0a}
.history-list{display:grid;gap:10px}
.history-row{display:grid;grid-template-columns:64px minmax(130px,1fr) minmax(0,1fr) auto minmax(0,1fr) 20px;align-items:center;gap:14px;
 padding:10px 16px;border:1px solid var(--line);border-left-width:5px;border-radius:14px;background:#0b1a1580;color:inherit;text-align:left;cursor:pointer}
.history-row:hover:not(:disabled){border-color:#b9e97688;background:#12272090}
.history-row.result-win{border-left-color:#b9e976}
.history-row.result-loss{border-left-color:#ff8a80}
.history-row.result-draw{border-left-color:#8b979d}
.history-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2px solid currentColor}
.history-mark svg{width:24px;height:24px}
.result-win .history-mark{color:#b9e976}
.result-loss .history-mark{color:#ff8a80}
.result-draw .history-mark{color:#8b979d}
.history-kind{display:grid;line-height:1.3}
.history-kind strong{font-size:15px}
.history-kind small{font-size:12px;color:#8b979d}
.history-player{display:flex;align-items:center;gap:10px;min-width:0}
.history-player b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-player-end{justify-content:flex-end}
.history-kit{display:grid;place-items:center;width:38px;height:38px;flex:none}
.history-anon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffffff14;color:#aebbc2}
.history-anon svg{width:18px;height:18px}
.history-score{display:flex;align-items:center;gap:8px;padding:8px 20px;border:1px solid var(--line);border-radius:12px;
 font:700 26px/1 'Barlow Condensed',Impact,sans-serif}
.result-win .history-score{border-color:#b9e97666;background:#b9e97612;color:#b9e976}
.result-loss .history-score{border-color:#ff8a8055;background:#ff8a8010;color:#ff8a80}
.result-draw .history-score{border-color:#ffffff22;background:#ffffff08}
.history-score i{font-style:normal;opacity:.6}
.history-go{color:#8b979d;font-size:18px;text-align:right}
.history-empty{margin:0;padding:26px;text-align:center;color:#aebbc2;border:1px dashed var(--line);border-radius:14px;font-size:14px}
.history-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.history-note{margin:0;font-size:13px;color:#8b979d}
.history-note span{color:#b9e976;margin-right:4px}
.history-modes{display:grid;gap:6px;justify-items:end}
.history-modes .field-label{margin:0}
.achievements-empty{display:grid;justify-items:center;gap:10px;text-align:center;max-width:560px;margin:0 auto}
.achievements-empty h2{margin:0}
.achievements-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:2px solid #b9e97666;color:#b9e976}
.achievements-mark svg{width:32px;height:32px}
.profile-actions{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.profile-actions button{display:inline-flex;align-items:center;gap:8px}
.profile-actions svg{width:18px;height:18px}
.history-filters{display:grid;gap:8px;margin-bottom:12px}
.filter-row{display:flex;flex-wrap:wrap;gap:8px}
.filter-row button{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#0d2119;color:#aebbc2;font-size:13px;cursor:pointer}
.filter-row button[aria-pressed="true"]{border-color:#b9e976;color:#b9e976;background:#b9e97615}
.history-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;font-size:13px;color:#aebbc2}
.match-summary{display:grid;gap:10px;justify-items:center;text-align:center}
.match-sides{display:flex;align-items:center;gap:26px}
.match-side{display:grid;justify-items:center;gap:6px;font-size:13px;color:#aebbc2}
.match-kit{display:grid;place-items:center;width:52px;height:52px}
.match-score{font:700 40px/1 'Barlow Condensed',Impact,sans-serif}
.match-score i{color:#8b979d;margin:0 8px;font-style:normal}
.round-list{display:grid;gap:8px}
.round-card{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.4fr) 44px auto;align-items:center;gap:14px;padding:10px 14px;
 border:1px solid var(--line);border-left-width:4px;border-radius:12px;background:#0b1a1580}
.round-card.result-win{border-left-color:#b9e976}
.round-card.result-loss{border-left-color:#ff8a80}
.round-card.result-draw,.round-card.is-cancelled{border-left-color:#8b979d}
.round-no{display:grid;justify-items:center;color:#aebbc2}
.round-no b{font:700 20px/1 'Barlow Condensed',Impact,sans-serif;color:var(--ink)}
.round-no small{font-size:10px;letter-spacing:1px}
.round-teams{display:grid;gap:2px;font-size:14px}
.round-teams i{color:#8b979d;font-style:normal;font-size:12px}
.round-teams b{font-weight:600}
.round-answer b{font-size:14px}
.round-answer small{display:block;font-size:12px;color:#aebbc2;line-height:1.5}
.round-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid currentColor}
.round-mark svg{width:20px;height:20px}
.result-win .round-mark{color:#b9e976}
.result-loss .round-mark{color:#ff8a80}
.result-draw .round-mark{color:#8b979d}
.round-report{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:#8b979d;font-size:12px;cursor:pointer;white-space:nowrap}
.round-report:hover{border-color:#ff8a8066;color:#ffb4a9}
.report-form{grid-column:1/-1;display:grid;gap:6px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.report-form textarea{width:100%;resize:vertical}
.report-actions{display:flex;gap:10px;align-items:center}
.report-done{grid-column:1/-1;margin:8px 0 0;color:#b9e976;font-size:13px}
.report-hint{margin:10px 0 0;text-align:center}
.result-tile.result-all{color:#c8d6cc}
.duel-line{margin:0;font-size:15px}
.duel-line b{color:#b9e976;font-size:19px}
@media(max-width:900px){
 .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .podium-cards{grid-template-columns:1fr}
 .history-row{grid-template-columns:44px minmax(0,1fr) auto}
 .history-player,.history-go{display:none}
 .result-tiles{gap:10px}
 .result-tile{width:96px}
 .round-card{grid-template-columns:44px minmax(0,1fr) 34px}
 .round-report{grid-column:1/-1;justify-self:start}
}

/* League artwork: the kit sits inside the league's ring */
/* The ring sits behind; the kit is drawn over it, big enough for the sleeves to reach past the ring. */
.league-kit{position:relative;display:inline-grid;place-items:center;width:var(--kit-size);height:var(--kit-size);flex:none}
.league-kit::before{content:'';position:absolute;inset:19%;border-radius:50%;background:#08141a}
.league-kit-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.league-kit-shirt{position:relative;z-index:2;display:grid;place-items:center;transform:translateY(2%)}
.league-kit-shirt .jersey{filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.league-kit.league-super-lig .league-kit-shirt{transform:translateY(5%)}
.league-badge{display:block;object-fit:contain}
.account-tile-kit{margin-bottom:0}
.account-tile{gap:0}
.rating-chip{display:inline-block;padding:2px 8px;border-radius:999px;font:700 13px/1.3 'Barlow Condensed',Impact,sans-serif;letter-spacing:.3px}
.rating-chip.up{background:#b9e97620;color:#b9e976;border:1px solid #b9e97655}
.rating-chip.down{background:#ff8a8018;color:#ff8a80;border:1px solid #ff8a8055}
.rating-chip.flat{background:#ffffff0d;color:#aebbc2;border:1px solid var(--line)}
.rating-lines{list-style:none;margin:0;padding:0;display:grid;gap:4px;min-width:220px}
.rating-lines li{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:#c8d6cc}
.rating-lines li b{font-family:'Barlow Condensed',Impact,sans-serif;font-size:17px}
.rating-lines li.up b{color:#b9e976}
.rating-lines li.down b{color:#ff8a80}
.rating-lines li.note{color:#f2e36a;font-weight:600}

/* Ranked: the league card, progress, graph and leaderboard */
.ranked-standing{display:flex;align-items:center;gap:16px;padding:10px 14px;margin-bottom:12px;border:1px solid #b9e97640;border-radius:14px;background:#b9e9760a}
.ranked-standing strong{display:block;font:700 24px/1.1 'Barlow Condensed',Impact,sans-serif}
.ranked-standing strong small{font:600 14px/1 Manrope,Arial,sans-serif;color:#b9e976;margin-left:6px}
.ranked-standing > div{flex:1;min-width:0}
.ranked-standing small{font-size:12px;color:#aebbc2}
.league-progress{height:8px;margin:6px 0 4px;border-radius:999px;background:#ffffff14;overflow:hidden;max-width:360px}
.league-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8fd14a,#d7f59a)}
.ranked-gate{display:grid;justify-items:center;gap:10px;text-align:center}
.ranked-gate-mark{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:2px solid #f2e36a88;color:#f2e36a}
.ranked-gate-mark svg{width:28px;height:28px}
.ranked-gate h2{margin:0}
.finale-ranked{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.finale-league{display:flex;align-items:center;gap:12px}
.finale-league p{margin:0}
.rating-count{color:#d7f59a}
.profile-kit-league{width:auto;height:auto;border:0;background:none}
.profile-league{display:flex;align-items:center;gap:12px;padding:0 10px}
.profile-league strong{display:block;font:700 22px/1.1 'Barlow Condensed',Impact,sans-serif}
.profile-elo{display:block;font:700 18px/1.2 'Barlow Condensed',Impact,sans-serif;color:#b9e976}
.profile-elo small{font:500 12px/1 Manrope,Arial,sans-serif;color:#aebbc2}
.profile-league > div > small{font-size:11px;color:#8b979d}
.rating-graph-card{padding:12px 16px}
.rating-graph-card h2{margin:0 0 6px;font-size:16px}
.rating-graph-card h2 small{font:500 12px/1 Manrope,Arial,sans-serif;color:#8b979d;margin-left:6px}
.rating-graph{display:block;width:100%;height:72px}
.rating-graph-legend{display:flex;justify-content:space-between;font-size:12px;color:#8b979d}
.rating-graph-legend .peak{color:#f2e36a}
.season-badges{display:flex;gap:10px;margin-top:8px}
.season-badge{display:grid;justify-items:center;font-size:10px;color:#aebbc2}
.history-score-cell{display:flex;align-items:center;gap:8px}
.detail-rating{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;font-size:14px;color:#c8d6cc}
.board-screen{display:grid;gap:10px;max-width:920px;margin:0 auto}
.board-list{display:grid;gap:8px}
.board-row{display:grid;grid-template-columns:44px 46px minmax(0,1fr) auto 90px;align-items:center;gap:14px;padding:8px 16px;
 border:1px solid var(--line);border-radius:14px;background:#0b1a1580;color:inherit;text-decoration:none}
.board-row:hover{border-color:#b9e97677}
.board-row.is-me{border-color:#b9e976;background:#b9e97612}
.board-rank{font:700 24px/1 'Barlow Condensed',Impact,sans-serif;color:#aebbc2;text-align:center}
.rank-1 .board-rank{color:#f2e36a}.rank-2 .board-rank{color:#dfe7ea}.rank-3 .board-rank{color:#e0a36a}
.board-name{display:grid;min-width:0}
.board-name b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-name small{font-size:12px;color:#8b979d}
.board-record{font-size:13px;color:#aebbc2}
.board-rating{font:700 24px/1 'Barlow Condensed',Impact,sans-serif;color:#b9e976;text-align:right}
.board-rating small{font:500 11px/1 Manrope,Arial,sans-serif;color:#8b979d;margin-left:4px}
.board-gap{margin:6px 0 0;text-align:center;font-size:12px;color:#8b979d;letter-spacing:1px;text-transform:uppercase}
.board-note{text-align:center}
@media(max-width:900px){
 .board-row{grid-template-columns:34px 40px minmax(0,1fr) 70px}
 .board-record{display:none}
 .profile-league{padding:0}
}
.room-rating{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0;font-size:15px}
.room-rating b{color:#d7f59a}
.account-kit{display:grid;place-items:center;flex:none}
.account-tile .account-tile-league{font:700 14px/1.1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.6px;color:#d7f59a;text-transform:uppercase}
/* The finale, closer up: a wider column, bigger players and score, kits instead of initials */
.match-finale .finale-content{max-width:1180px}
.match-finale .finale-heading h1{font-size:clamp(44px,4.6vw,68px)}
.match-finale .finale-heading>p{font-size:15px}
.match-finale .finale-player-card{padding:22px 20px}
.match-finale .finale-player-card h2{font-size:26px}
.match-finale .finale-player-card p{font-size:14px}
.match-finale .finale-player-label{font-size:14px}
.match-finale .finale-score>strong{font-size:clamp(84px,8.5vw,128px)}
.match-finale .finale-score p{font-size:15px}
.finale-avatar.finale-kit{clip-path:none;background:none;width:128px;height:128px;margin:12px auto 10px}
.finale-kit .jersey{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.finale-bot,.finale-guest{display:grid;place-items:center;width:104px;height:104px;border-radius:24px;border:2px solid #9cafb355;background:#0b1a1f;color:#c4d7d4}
.finale-bot svg,.finale-guest svg{width:58px;height:58px}
.is-winner .finale-bot,.is-winner .finale-guest{border-color:var(--final-accent);color:var(--final-accent)}
/* Ranked: the new rating is the headline under each player */
.finale-rating.is-ranked{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:4px 12px;
 padding:14px 18px;text-align:center;border-color:#b9e97644;background:linear-gradient(160deg,#16301f99,#08171d80)}
.finale-rating.is-ranked>span{grid-column:1/-1;font-size:13px;letter-spacing:2px;color:#b9e976}
.finale-rating.is-ranked strong{font:700 56px/1 'Barlow Condensed',Impact,sans-serif;color:#eef7d8;text-shadow:0 0 22px #b9e97655}
.finale-rating.is-ranked small.rating-chip{font-size:20px;padding:4px 12px}
.finale-rating.is-ranked em{grid-column:1/-1;font-style:normal;font-size:13px;color:#aebbc2}
.finale-saying{justify-content:center}
.finale-saying blockquote{margin:0;font-size:20px;text-align:center}
.finale-ranked blockquote{flex-basis:100%;text-align:center;margin:6px 0 0}
/* Closer up: a slim header, no footer, the band on one row, so the screen scales up instead of down */
.match-finale .finale-header{align-items:center}
.match-finale .finale-header .room-logo small{display:none}
.match-finale .finale-header .room-logo>span,.match-finale .finale-header .room-logo>em{font-size:34px}
.match-finale .finale-mode>strong{font-size:40px}
.match-finale .finale-mode>strong:empty{display:none}
.match-finale .finale-mode>strong:after{margin:6px auto 4px}
.match-finale .finale-footer{display:none}
.match-finale .finale-content{margin-top:6px}
.match-finale .finale-heading{margin-bottom:12px}
.match-finale .finale-heading h1{margin:2px 0 6px}
.match-finale .finale-crown{font-size:28px}
.finale-player-card .finale-rating.is-ranked{margin:12px 0 0}
.finale-ranked{flex-wrap:nowrap}
.finale-ranked blockquote{flex-basis:auto;text-align:left;margin:0;max-width:280px}
.match-finale .finale-reward{margin:14px 0 0!important;padding:14px 26px}
.match-finale .finale-consent{margin-top:14px}

/* Promotion: old emblem -> shards -> flash -> new emblem (about four seconds) */
.promotion{position:fixed;inset:0;z-index:50;display:grid;place-items:center;align-content:center;gap:10px;
 background:radial-gradient(ellipse at 50% 45%,#0b2233,#03080c 70%);animation:promo-in .5s ease both}
.promotion.is-leaving{animation:promo-out .45s ease both}
.promo-fog{position:absolute;inset:-10%;background:radial-gradient(40% 30% at 25% 30%,color-mix(in srgb,var(--glow) 12%,transparent),transparent 70%),
 radial-gradient(35% 25% at 75% 65%,color-mix(in srgb,var(--glow) 10%,transparent),transparent 70%);animation:promo-drift 9s ease-in-out infinite alternate}
.promo-stage{position:relative;width:280px;height:280px;display:grid;place-items:center}
.promo-stage > *{position:absolute}
.promo-old,.promo-shard,.promo-new{width:210px;height:210px}
.promo-old{animation:promo-old 1.25s ease-in both;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--glow) 60%,transparent))}
.promo-shard{opacity:0;animation:promo-shard 1.75s cubic-bezier(.2,.7,.3,1) 1.2s both;filter:drop-shadow(0 0 10px var(--glow))}
.promo-flare{width:520px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--glow),#fff,var(--glow),transparent);
 filter:blur(1px);opacity:0;animation:promo-flare 1.1s ease-out 1.2s both, promo-flare 0.9s ease-out 2.85s both}
.promo-ring{width:120px;height:120px;border-radius:50%;border:3px solid var(--glow);opacity:0;animation:promo-ring 1s ease-out 1.2s both}
.promo-core{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 0 30px 12px var(--glow),0 0 80px 30px color-mix(in srgb,var(--glow) 50%,transparent);
 opacity:0;animation:promo-core 1.8s ease-in-out 1.2s both}
.promo-spark{width:5px;height:5px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow);opacity:0;
 animation:promo-spark 1.3s ease-out calc(1.25s + var(--delay)) both}
.promo-rays{width:420px;height:420px;border-radius:50%;opacity:0;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--glow) 38%,transparent) 0deg 6deg,transparent 6deg 22deg);
 -webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);
 animation:promo-rays-in .8s ease-out 2.95s both, promo-spin 14s linear 2.95s infinite}
.promo-new{opacity:0;animation:promo-new 1s cubic-bezier(.2,1.4,.4,1) 2.95s both;filter:drop-shadow(0 0 26px var(--glow)) drop-shadow(0 0 60px color-mix(in srgb,var(--glow) 50%,transparent))}
.promo-text{position:relative;display:grid;justify-items:center;gap:4px;text-align:center;opacity:0;animation:promo-text .7s ease-out 3.55s both}
.promo-text span{font-size:14px;letter-spacing:4px;color:var(--glow)}
.promo-text strong{font:700 clamp(40px,5vw,64px)/1 'Barlow Condensed',Impact,sans-serif;color:#fff;text-shadow:0 0 24px var(--glow)}
.promo-text small{font-size:14px;color:#aebbc2;margin-bottom:10px}
@keyframes promo-in{from{opacity:0}to{opacity:1}}
@keyframes promo-out{to{opacity:0}}
@keyframes promo-drift{from{transform:translate(-2%,-1%)}to{transform:translate(2%,1%)}}
@keyframes promo-old{0%{opacity:0;transform:scale(.7)}25%{opacity:1;transform:scale(1)}72%{transform:scale(1.04)}
 78%{transform:translate(-4px,1px) rotate(-2deg)}84%{transform:translate(4px,-1px) rotate(2deg)}90%{transform:translate(-3px,0) scale(1.06)}
 99%{opacity:1}100%{opacity:0;transform:scale(1.08)}}
@keyframes promo-shard{0%{opacity:0;transform:translate(0,0) rotate(0)}1%{opacity:1;transform:translate(0,0) rotate(0)}
 45%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.9)}
 62%{opacity:1;transform:translate(calc(var(--dx) * 1.05),calc(var(--dy) * 1.05)) rotate(var(--rot)) scale(.85)}
 100%{opacity:0;transform:translate(0,0) rotate(calc(var(--rot) * 2)) scale(.15)}}
@keyframes promo-flare{0%{opacity:0;transform:scaleX(.05)}30%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.25)}}
@keyframes promo-ring{0%{opacity:0;transform:scale(.3)}1%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(3.2)}}
@keyframes promo-core{0%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(1)}75%{opacity:.9;transform:scale(.8)}
 90%{opacity:1;transform:scale(2.4)}100%{opacity:0;transform:scale(3)}}
@keyframes promo-spark{0%{opacity:0;transform:translate(0,0)}1%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
@keyframes promo-rays-in{from{opacity:0}to{opacity:1}}
@keyframes promo-spin{to{rotate:360deg}}
@keyframes promo-new{0%{opacity:0;transform:scale(.35)}60%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
@keyframes promo-text{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 .promo-old,.promo-shard,.promo-flare,.promo-ring,.promo-core,.promo-spark{display:none}
 .promo-new,.promo-rays,.promo-text{animation:promo-in .4s ease both}
}

/* Social: the bell beside the account tile, friends, invites and notifications */
.notice-bell{position:fixed;top:18px;right:168px;z-index:3;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;
 background:linear-gradient(150deg,#1b3a26,#0d2119);border:1px solid #b9e97666;color:var(--ink);box-shadow:0 10px 26px #00000055}
.notice-bell svg{width:24px;height:24px}
.notice-bell:hover{border-color:#b9e976}
.notice-count{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
 background:#e5484d;color:#fff;font:800 11px/1 Manrope,Arial,sans-serif;box-shadow:0 0 0 2px #0b1012}
.notice-count[hidden]{display:none}
@media(max-width:900px){.notice-bell{top:14px;right:132px;width:44px;height:44px}}

.friends-screen,.notice-screen{display:grid;gap:14px;max-width:920px;margin:0 auto}
.friend-add .field-label{margin-top:0}
.friend-add-row{display:flex;gap:10px}
.friend-add-row input{flex:1;min-width:0}
.friend-add-row button{padding:12px 22px;white-space:nowrap}
.friend-group h2{margin:0 0 8px;font-size:20px}
.friend-group h2 small{font:600 13px/1 Manrope,Arial,sans-serif;color:#8b979d;margin-left:6px}
.friend-list,.notice-list{display:grid;gap:8px}
.friend-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:8px 16px;
 border:1px solid var(--line);border-radius:14px;background:#0d2119cc}
.friend-who{display:flex;align-items:center;gap:14px;min-width:0;color:inherit;text-decoration:none}
.friend-name{display:grid;gap:3px;min-width:0}
.friend-name b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-name small{font-size:12px;color:#8b979d}
.friend-rating{font:700 22px/1 'Barlow Condensed',Impact,sans-serif;color:#b9e976}
.friend-rating small{font:500 11px/1 Manrope,Arial,sans-serif;color:#8b979d;margin-left:4px}
.friend-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.friend-actions button,.relation button:not(.textbtn){padding:10px 16px;font-size:13px}
.friend-actions small{color:#8b979d;font-size:12px}
.presence{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#8b979d}
.presence i{width:8px;height:8px;border-radius:50%;background:#5d686d}
.presence-online{color:#9fe38a}.presence-online i{background:#6fdc6f;box-shadow:0 0 8px #6fdc6f}
.presence-match{color:#f2d272}.presence-match i{background:#f2c94c}
@media(max-width:700px){.friend-row{grid-template-columns:minmax(0,1fr) auto}.friend-actions{grid-column:1/-1;justify-content:flex-start}}

.relation{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.relation small{color:#aebbc2;font-size:13px}
.duel-list{margin-top:10px}
.board-tabs{margin-bottom:4px}
.toggle-line{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink);cursor:pointer}
.toggle-line input{width:18px;height:18px;margin:2px 0 0;padding:0;accent-color:#b9e976;flex:none}

.invite-dialog{max-width:min(680px,calc(100% - 32px));padding:22px 24px;border-radius:18px;border:1px solid #b9e97655;
 background:#0f1d17;color:var(--ink);box-shadow:0 30px 80px #000000aa}
.invite-dialog::backdrop{background:#000000a0}
.invite-dialog h2{margin:0 0 6px;font-size:28px}
.invite-dialog .fineprint{margin:0 0 6px}
.invite-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

.invite-card{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:45;width:min(620px,calc(100% - 32px));
 display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 18px 18px;overflow:hidden;
 border-radius:16px;border:1px solid #b9e976;background:linear-gradient(150deg,#1d3d27,#0d2119);box-shadow:0 24px 60px #000000aa;
 animation:invite-in .35s cubic-bezier(.2,.8,.3,1) both}
.invite-card-text{display:grid;gap:3px;min-width:0}
.invite-card-text span{font-size:11px;letter-spacing:2px;color:#b9e976;font-weight:800}
.invite-card-text strong{font-size:16px}
.invite-card-text small{font-size:12px;color:#aebbc2}
.invite-card-actions{display:flex;gap:8px}
.invite-card-actions button{padding:10px 16px;font-size:13px}
.invite-card-clock{position:absolute;left:0;right:0;bottom:0;height:4px;background:#ffffff14}
.invite-card-clock i{display:block;height:100%;background:#b9e976;animation:invite-clock linear both}
@keyframes invite-in{from{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes invite-clock{from{width:100%}to{width:0}}
@media(max-width:700px){.invite-card{grid-template-columns:auto minmax(0,1fr)}.invite-card-actions{grid-column:1/-1}}

.notice-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 16px;
 border:1px solid var(--line);border-radius:14px;background:#0d2119cc}
.notice-row.is-new{border-color:#b9e97688;background:#b9e97610}
.notice-row p{margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.notice-row p small{display:block;font-size:12px;color:#8b979d}
.notice-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ffffff0d;color:#b9e976}
.notice-icon svg{width:22px;height:22px}
.invite-dialog .set-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:4px 0 8px}
.invite-dialog .field-label{margin:14px 0 6px}

/* Phones: the page scrolls like any web page instead of being scaled to fit (see screen-layout.js).
   The menu is one row that slides sideways, and the account tile shrinks to a square in the corner. */
@media(max-width:699px){
 html,body{height:auto;overflow-x:hidden;overflow-y:auto}
 .room-layout:not(.team-selection-layout){min-height:100vh}
 .room-layout:not(.team-selection-layout) .room-sidebar{position:relative;padding:12px 12px 8px}
 .room-layout:not(.team-selection-layout) .room-sidebar>.room-logo{margin:0;width:auto;min-height:64px;display:grid;align-content:center;justify-items:start}
 .room-layout:not(.team-selection-layout) .room-sidebar>.room-logo span,.room-layout:not(.team-selection-layout) .room-sidebar>.room-logo em{font-size:26px}
 .room-layout:not(.team-selection-layout) .room-sidebar nav{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin-top:10px;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .room-layout:not(.team-selection-layout) .room-sidebar nav::-webkit-scrollbar{display:none}
 .room-layout:not(.team-selection-layout) .room-sidebar nav button{flex:none;white-space:nowrap;min-height:36px;padding:6px 10px;font-size:12px}
 .room-layout:not(.team-selection-layout) .room-main{padding:10px 14px 28px}
 .room-layout:not(.team-selection-layout) .room-title h1{font-size:28px}
 .room-layout > .page-back{position:static;margin:10px 14px 0}
 .account-tile{position:absolute;top:12px;right:12px;width:64px;height:64px;border-radius:14px;padding:4px}
 .account-tile-guest strong{font-size:14px}
 .account-tile-guest small,.account-tile-guest .account-tile-icon{display:none}
 .account-tile:not(.account-tile-guest) strong,.account-tile:not(.account-tile-guest) small{display:none}
 .account-tile-kit svg{width:54px;height:54px}
 .notice-bell{position:absolute;top:22px;right:86px;width:44px;height:44px;border-radius:12px}
 .home-redesign .account-tile,.match-finale .account-tile{top:12px;right:12px}
 /* Finale: the score on its own row above the two players, who stand side by side. */
 .match-finale .finale-duel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
 .match-finale .finale-score{grid-column:1/-1;grid-row:1}
 .match-finale .finale-score>strong{font-size:72px}
 .match-finale .finale-score p{font-size:14px;margin:6px 0 2px}
 .match-finale .finale-player-card{padding:14px 10px}
}

/* Admin panel: a working page that scrolls, with plain tables. */
html.page-scrolls,html.page-scrolls body{height:auto;overflow-x:hidden;overflow-y:auto}
.admin-panel{display:grid;gap:14px;max-width:1180px;margin:0 auto;text-align:left}
.admin-tabs{justify-content:center}
.admin-filter{margin-bottom:-4px}
.admin-stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.admin-unlock{max-width:420px;margin:0 auto;display:grid;gap:10px}
.admin-search{max-width:640px}
.admin-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#0d2119cc}
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th{text-align:left;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#8b979d;padding:10px 12px;border-bottom:1px solid var(--line)}
.admin-table td{padding:9px 12px;border-bottom:1px solid #ffffff0d;vertical-align:top;color:var(--ink)}
.admin-table tr:last-child td{border-bottom:0}
.admin-table a{color:#b9e976}
.admin-table small{color:#8b979d}
.admin-buttons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.admin-buttons button{padding:8px 14px;font-size:13px}
.admin-bad{color:#ff8a80}.admin-good{color:#9fe38a}
.admin-user-head{display:flex;gap:16px;align-items:center}
.admin-user-head h2{margin:0;font-size:26px;text-transform:none}
.admin-user-head p{margin:2px 0;font-size:13px;color:#aebbc2}
.admin-user-actions{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.admin-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.admin-columns h2,.admin-panel .room-card>h2{font-size:18px;margin:0 0 8px}
.admin-list{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13px;color:var(--ink)}
.admin-list .textbtn{padding:0 0 0 6px;font-size:12px;color:#ff8a80}
.admin-settings{display:grid;gap:10px;max-width:760px}
.admin-setting{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:14px;align-items:center;font-size:14px;color:var(--ink)}
.admin-setting small{display:block;font-size:11px;color:#8b979d}
.admin-setting input{padding:10px}
.admin-settings textarea,.admin-dialog textarea,.report-dialog textarea{width:100%;background:#151d20;border:1px solid #ffffff25;border-radius:6px;padding:10px;color:var(--ink);font:inherit;font-size:14px}
.admin-dialog select{width:100%;background:#151d20;border:1px solid #ffffff25;border-radius:6px;padding:10px;color:var(--ink);font:inherit}
.admin-dialog p,.admin-dialog h3{color:var(--ink);font-size:14px}
.report-player{color:#ff8a80!important}
.report-reasons{border:0;padding:0;margin:8px 0 0;display:grid;gap:6px}
.report-reasons label{display:flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--ink);font-size:14px}
.report-reasons input{width:auto;margin:0;accent-color:#b9e976}
.report-reasons label:has(input:checked){border-color:#b9e976;background:#b9e97612}
.report-dialog h2{text-transform:none;font-size:24px}

/* A suspended account's sign-in attempt */
.suspended-card{max-width:560px;margin:0 auto;display:grid;justify-items:center;gap:10px;text-align:center;border-color:#ff8a8066!important}
.suspended-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#ff8a801a;color:#ff8a80;font-size:28px}
.suspended-message{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.suspended-card .fineprint{margin:0}

/* Home: the eight destinations under the multiplayer card as square tiles, two to a row. */
.home-redesign{grid-template-columns:minmax(440px,36%) 1fr}
.home-redesign .home-sidebar{max-width:520px}
.home-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.home-tile{aspect-ratio:4/3;display:grid;place-items:center;align-content:center;gap:12px;padding:14px 10px;text-align:center;
 color:#e1e9ec;background:linear-gradient(150deg,#12232dd9,#0c1c25cf);border:1px solid #7294a42b;border-radius:12px;cursor:pointer}
.home-tile:hover{background:#172d37;border-color:#b9e97688}
.home-tile:focus-visible{outline:2px solid #b9e976;outline-offset:3px}
.home-tile-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#b9e97614;color:#b9e976}
.home-tile-icon svg{width:30px;height:30px}
.home-tile strong{font-size:16px;font-weight:700;line-height:1.2;letter-spacing:.2px}
@media(max-width:900px){.home-redesign{grid-template-columns:minmax(380px,48%) 1fr}}
@media(max-width:760px){.home-redesign{grid-template-columns:1fr}.home-tiles{gap:10px}.home-tile strong{font-size:15px}}

/* One icon set: the side menu draws the same line icons as the home tiles */
.room-nav-icon{display:inline-grid;place-items:center;width:24px;height:24px;font:inherit}
.room-nav-icon svg{width:21px;height:21px}
.home-play-actions strong span{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:auto}
.home-play-actions strong span svg{width:18px;height:18px}
.home-play-actions strong{display:flex;align-items:center;gap:8px}

/* Match found: both players side by side for a few seconds before the 3-2-1 */
.match-found{min-height:100vh;display:grid;align-content:center;justify-items:center;gap:14px;padding:32px 20px;text-align:center}
.match-found h1{margin:0;font-size:clamp(40px,5vw,68px)}
.match-found .eyebrow{margin:0;letter-spacing:3px}
.found-duel{display:grid;grid-template-columns:minmax(0,340px) auto minmax(0,340px);align-items:center;gap:28px;width:min(860px,100%)}
.found-card{display:grid;justify-items:center;gap:8px;padding:24px 18px;border-radius:18px;border:1px solid #b9e97640;
 background:linear-gradient(160deg,#16301f,#0b1a14);animation:found-in .5s cubic-bezier(.2,.8,.3,1) both}
.found-card:last-child{border-color:#bec8e540;background:linear-gradient(160deg,#1a2233,#0d131d);animation-delay:.12s}
.found-card h2{margin:4px 0 0;font-size:28px;text-transform:none;overflow-wrap:anywhere}
.found-kit{min-height:136px;display:grid;place-items:center}
.found-kit .finale-guest svg{width:72px;height:72px}
.found-league{margin:0;display:flex;align-items:center;gap:6px;font-size:15px;color:#d8e2e5}
.found-form{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;font-size:12px;color:#8b979d}
.found-form>span{margin-right:4px}
.form-chip{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;font:700 13px/1 Manrope,Arial,sans-serif;font-style:normal}
.form-chip.form-win{background:#b9e97626;color:#b9e976}.form-chip.form-loss{background:#ff8a8026;color:#ff8a80}.form-chip.form-draw{background:#aebbc226;color:#d8e2e5}
.found-vs{font:800 44px/1 'Barlow Condensed',Impact,sans-serif;color:#aebbc2;animation:check-pop .5s ease .25s both}
.found-note{margin:4px 0 0;color:#aebbc2;font-size:14px}
@keyframes found-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:699px){.found-duel{grid-template-columns:1fr;gap:12px}.found-vs{font-size:32px}.found-kit{min-height:100px}}
.form-mark.form-draw{background:#aebbc226;color:#d8e2e5}

/* Draw offers */
.draw-button{position:fixed;left:18px;bottom:18px;z-index:30;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
 border:1px solid #aebbc255;background:#0d1b22ee;color:#e1e9ec;font-size:13px;font-weight:600;box-shadow:0 10px 26px #00000066}
.draw-button svg{width:18px;height:18px}
.draw-button:hover:not(:disabled){border-color:#b9e976;color:#b9e976}
.draw-offer{position:fixed;inset:0;z-index:48;display:grid;place-items:center;padding:20px;background:#02070acc;animation:promo-in .25s ease both}
.draw-offer-card{position:relative;overflow:hidden;width:min(480px,100%);display:grid;justify-items:center;gap:10px;text-align:center;padding:28px 26px 30px;
 border-radius:20px;border:1px solid #b9e976;background:linear-gradient(160deg,#16301f,#0b1a14);box-shadow:0 30px 80px #000000aa;animation:check-pop .35s ease both}
.draw-offer-card h2{margin:0;font-size:clamp(28px,4vw,38px)}
.draw-offer-card p{margin:0;color:#c8d6cc;font-size:15px;line-height:1.5}
.draw-offer-card .eyebrow{margin:0;letter-spacing:3px}
.draw-offer-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#b9e97620;color:#b9e976}
.draw-offer-mark svg{width:34px;height:34px}
.draw-offer-actions{display:flex;gap:12px;margin-top:6px}
.draw-offer-actions button{min-width:140px;padding:14px 20px;font-size:16px}
.draw-offer-clock{position:absolute;left:0;right:0;bottom:0;height:5px;background:#ffffff14}
.draw-offer-clock i{display:block;height:100%;background:#b9e976;transition:width .2s linear}
.draw-offer-card small{color:#8b979d;font-size:12px}
.ready-countdown{margin:8px 0 0;font-size:13px;color:#aebbc2;text-align:center}
@media(max-width:699px){.draw-button{left:12px;bottom:12px;padding:8px 12px;font-size:12px}}

/* The result list opens over the rest of the answer panel, down to the window's bottom edge */
@media(min-width:700px){
 .answer-panel .searchbox{position:relative}
 .answer-panel #playerresults:not(:empty){position:absolute;left:0;right:0;z-index:6;background:#101e25;box-shadow:0 18px 40px #000000aa}
 .answer-panel #playerresults:empty{display:none!important}
}
body:has(.match-found)>header,body:has(.match-found)>footer,body:has(.match-found)>.pitch{display:none}
body:has(.match-found)>main{max-width:none;padding:0;min-height:100svh}
body:has(.match-found){background:radial-gradient(ellipse at 50% 40%,#12301f,#071116 70%)}

/* Wrong answer lock: one compact line over the search field, number beside the label */
.cooldown-lock{flex-direction:row;gap:14px}
.cooldown-lock strong{font-size:44px}
.cooldown-lock span{font-size:13px}

/* Home: Dereceli is the headline button, Dostluk stays bright but second */
.home-play-actions #ranked{position:relative;overflow:hidden;background:linear-gradient(135deg,#ffe07a,#f2b705 55%,#d99100);color:#241800;
 border:1px solid #ffe9a3;box-shadow:0 10px 28px #f2b70540,inset 0 1px 0 #fff6d0}
.home-play-actions #ranked::after{content:'';position:absolute;inset:-40% auto -40% -60%;width:40%;transform:rotate(18deg);
 background:linear-gradient(90deg,transparent,#ffffff70,transparent);animation:ranked-shine 4.5s ease-in-out infinite}
.home-play-actions #ranked strong{font-size:14px}
.home-play-actions #ranked small{opacity:.8}
.home-play-actions #ranked:hover{filter:brightness(1.06)}
.home-play-actions #friendly{background:#b9e97622;color:#dff5c0;border:1px solid #b9e97699}
.home-play-actions #friendly:hover{background:#b9e97633}
@keyframes ranked-shine{0%,70%{left:-60%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.home-play-actions #ranked::after{display:none}}

/* Draw: a gold pill in the score bar once three rounds in a row went unanswered */
.draw-button{position:static;left:auto;bottom:auto;z-index:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
 border:1px solid #ffd76a;background:linear-gradient(135deg,#ffe07a,#f2b705);color:#241800;font-size:13px;font-weight:800;
 box-shadow:0 0 0 0 #f2b70566;animation:draw-pulse 2s ease-out infinite;white-space:nowrap}
.draw-button svg{width:18px;height:18px}
.draw-button:hover:not(:disabled){filter:brightness(1.08);color:#241800;border-color:#fff1b8}
.draw-button:disabled{animation:none;opacity:.55}
.draw-button.is-waiting{background:#1a2a33;color:#ffd76a;animation:none}
@keyframes draw-pulse{0%{box-shadow:0 0 0 0 #f2b70566}70%{box-shadow:0 0 0 12px #f2b70500}100%{box-shadow:0 0 0 0 #f2b70500}}
.match-topbar{gap:14px}
.selection-matchbar{flex-wrap:wrap}
.draw-prompt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:14px 0 4px;padding:14px 16px;
 border-radius:14px;border:1px solid #ffd76a;background:linear-gradient(135deg,#3a2c05,#1d1a0b);text-align:left;animation:check-pop .4s ease both}
.draw-prompt strong{display:block;color:#ffe07a;font-size:15px}
.draw-prompt p{margin:2px 0 0;font-size:13px;color:#e8dfc0;line-height:1.45}
.draw-prompt-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f2b70526;color:#ffd76a}
.draw-prompt-mark svg{width:24px;height:24px}
.draw-prompt .primary{background:linear-gradient(135deg,#ffe07a,#f2b705);color:#241800;padding:12px 16px;white-space:nowrap}
@media(max-width:699px){.draw-prompt{grid-template-columns:auto minmax(0,1fr)}.draw-prompt .primary{grid-column:1/-1}.draw-button{padding:8px 12px;font-size:12px}}
.draw-ask .draw-offer-card{border-color:#ffd76a;background:linear-gradient(160deg,#3a2c05,#15130a)}
.draw-ask .draw-offer-mark{background:#f2b70526;color:#ffd76a}
.draw-ask .eyebrow{color:#ffd76a}
.draw-ask .primary{background:linear-gradient(135deg,#ffe07a,#f2b705);color:#241800}
/* The label first, the seconds after it: "YANLIŞ CEVAP · TEKRAR DENEMEK İÇİN 3" */
.cooldown-lock span{order:1}
.cooldown-lock strong{order:2}

.admin-setting-group{border:1px solid var(--line);border-radius:12px;padding:10px 14px 14px;margin:0;display:grid;gap:8px}
.admin-setting-group legend{padding:0 6px;font:700 15px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.5px;color:#b9e976;text-transform:uppercase}

/* Ana menü, 19 Eylül tasarımı: oyun modları paneli, günün eşleşmesi kartı ve 2×2 kutular. */
.home-redesign{grid-template-columns:minmax(460px,31%) 1fr}
.home-redesign .home-sidebar{max-width:560px;padding:34px 18px 26px clamp(22px,2.2vw,40px);justify-content:flex-start}
.home-brand-row{display:flex;align-items:center;gap:18px}
.home-brand-row .home-wordmark{margin:0 0 0 12px}
.home-brand-row .home-wordmark h1{font-size:clamp(56px,4.6vw,76px)}
.home-quick{display:flex;gap:12px;margin-left:10px}
.home-round{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#0d1d24;border:1px solid #b9e97640;color:#b9e976;box-shadow:0 0 18px #b9e97612}
.home-round svg{width:26px;height:26px}
.home-round:hover{border-color:#b9e976;background:#132a33}
.home-redesign .home-tagline{margin:18px 0 22px 14px}
.home-redesign .home-navigation{gap:14px}
.home-modes{display:grid;gap:10px;padding:20px 18px 18px;border:1px solid #7294a433;border-radius:12px;background:linear-gradient(160deg,#0f1f27e6,#0a171ee6)}
.home-modes-title{display:flex;align-items:center;gap:6px;margin:0 0 6px 10px;font-family:'Barlow Condensed',Impact,sans-serif;font-style:italic;font-weight:800;font-size:36px;letter-spacing:-.5px;color:#eef3f1;line-height:1}
.home-modes-title em{color:#b9e976;font-style:inherit}
.home-modes-title:after{content:'';flex:1;height:1px;margin-left:22px;background:#7294a44d}
.home-mode-row{display:flex;align-items:center;gap:22px;width:100%;min-height:66px;padding:0 26px;text-align:left;color:#eef3f1;background:#0f222b;border:1px solid #7294a433;border-radius:8px}
.home-mode-row strong{flex:1;font-size:22px;font-weight:700;letter-spacing:.1px}
.home-mode-row:hover{background:#15303a;border-color:#b9e97677}
.home-mode-icon{display:grid;place-items:center;width:40px;color:#b9e976}
.home-mode-icon svg{width:36px;height:36px}
.home-chevron{display:grid;place-items:center;color:#dfe7e9}
.home-chevron svg{width:22px;height:22px}
.home-mode-row#ranked{background:linear-gradient(90deg,#e6f53a,#9ee34a 55%,#6fcf3f);border-color:#c7f06a;color:#10200a;box-shadow:0 0 26px #b9e97633}
.home-mode-row#ranked .home-mode-icon,.home-mode-row#ranked .home-chevron{color:#10200a}
.home-mode-row#ranked:hover{filter:brightness(1.05)}
.home-redesign .home-daily{position:relative;overflow:hidden;gap:16px;margin:0;min-height:86px;padding:12px 18px 12px 26px;border:1px solid #b9e97666;border-radius:10px;background:linear-gradient(105deg,#1b3028f2,#0f222be6 55%,#0d1c23e6);box-shadow:0 0 26px #b9e9760d}
.home-redesign .home-daily:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#b9e976,#6fcf3f)}
.home-redesign .home-daily:hover{border-color:#b9e976;background:linear-gradient(105deg,#21392ff2,#12272fe6 55%,#0f2029e6)}
.home-daily-icon{display:grid;place-items:center;width:58px;height:58px;flex:none;border-radius:10px;border:1px solid #b9e97666;background:#b9e9761a;color:#b9e976}
.home-daily-icon svg{width:32px;height:32px}
.home-redesign .home-daily-text strong{font-size:22px;font-weight:700}
.home-redesign .home-daily-text small{font-size:13px;margin-top:6px;opacity:.8}
.home-redesign .home-daily-meta{gap:8px}.home-redesign .home-daily-meta .tier-pill{font-size:14px;padding:4px 22px}.home-redesign .home-daily-meta small{font-size:13px}
.home-redesign .home-tiles{gap:12px}
.home-redesign .home-tile{aspect-ratio:auto;min-height:92px;gap:6px;padding:12px 10px;border-radius:8px}
.home-redesign .home-tile-icon{width:auto;height:auto;background:none;border-radius:0}
.home-redesign .home-tile-icon svg{width:38px;height:38px}
.home-redesign .home-tile strong{font-size:20px}
@media(max-width:900px){.home-redesign{grid-template-columns:minmax(400px,48%) 1fr}}
@media(max-width:760px){
 .home-redesign{grid-template-columns:1fr}
 .home-redesign .home-sidebar{padding:24px 16px;max-width:560px;width:100%;margin:auto}
 .home-brand-row .home-wordmark h1{font-size:54px}
 .home-round{width:44px;height:44px}.home-round svg{width:22px;height:22px}
 .home-modes{padding:16px 12px 12px}.home-modes-title{font-size:30px}
 .home-mode-row{min-height:58px;padding:0 16px;gap:16px}.home-mode-row strong{font-size:18px}
 .home-mode-icon svg{width:30px;height:30px}
 .home-redesign .home-daily{padding:10px 12px 10px 18px;gap:12px}.home-daily-icon{width:46px;height:46px}
 .home-redesign .home-daily-text strong{font-size:18px}.home-redesign .home-daily-text small{font-size:11px}
 .home-redesign .home-daily-meta .tier-pill{padding:3px 12px;font-size:12px}
 .home-redesign .home-tile strong{font-size:16px}
}

/* Ana menü adları, 'Bilginle Oyna' ile aynı yazı biçiminde. */
.home-mode-row strong,.home-redesign .home-daily-text strong,.home-redesign .home-tile strong{font-family:'Barlow Condensed',Impact,sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.2px;line-height:1}
.home-mode-row strong{font-size:27px}
.home-redesign .home-daily-text strong{font-size:27px}
.home-redesign .home-tile strong{font-size:23px}
@media(max-width:760px){.home-mode-row strong,.home-redesign .home-daily-text strong{font-size:23px}.home-redesign .home-tile strong{font-size:20px}}
/* Yan menü adları da 'Bilginle Oyna' ile aynı yazı biçiminde. */
.room-layout .room-sidebar nav button{font-family:'Barlow Condensed',Impact,sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.3px;font-size:19px;line-height:1}
@media(max-width:650px){.room-layout .room-sidebar nav button{font-size:15px}}

/* Sayfa menüsü (19 Eylül): logo yanında Ayarlar ve Nasıl Oynanır?, sayfalar 5 × 2 kare düğme. */
.room-layout:has(.sidebar-grid){grid-template-columns:292px minmax(0,1fr)}
.room-layout .room-sidebar.sidebar-grid{padding:22px 14px 20px;display:flex;flex-direction:column}
.sidebar-grid .room-brand{display:flex;align-items:center;justify-content:space-between;gap:10px}
.room-layout .sidebar-grid .room-brand>.room-logo{width:auto;margin:0;padding:0 0 0 6px;text-align:left}
.room-layout .sidebar-grid .room-brand>.room-logo span,.room-layout .sidebar-grid .room-brand>.room-logo em{font-size:40px}
.room-layout .sidebar-grid .room-brand>.room-logo em{margin-left:16px}
.sidebar-grid .room-quick{display:flex;gap:8px}
.sidebar-grid .room-quick .home-round{width:46px;height:46px}
.sidebar-grid .room-quick .home-round svg{width:23px;height:23px}
.sidebar-grid .room-quick .home-round[aria-current=page]{background:#b9e976;color:#10200a;border-color:#b9e976}
.sidebar-grid .room-tagline{margin:16px 0 14px 6px;font-size:9px;letter-spacing:2.6px;color:#a3b2b8}
.room-layout .room-sidebar.sidebar-grid nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;overflow:visible}
.room-layout .room-sidebar.sidebar-grid nav button{aspect-ratio:1;min-height:0;height:auto;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 8px;text-align:center;white-space:normal;border-radius:10px;background:#0f222b;border:1px solid #7294a433;color:#e6edef;font-size:16px;line-height:1.05}
.room-layout .room-sidebar.sidebar-grid nav button:hover{background:#15303a;border-color:#b9e97677}
.room-layout .room-sidebar.sidebar-grid nav button[aria-current=page]{background:linear-gradient(160deg,#e6f53a,#9ee34a 60%,#6fcf3f);border-color:#c7f06a;color:#10200a;box-shadow:0 0 20px #b9e97633}
.sidebar-grid .room-nav-icon{display:grid;place-items:center;width:auto;color:#b9e976}
.sidebar-grid .room-nav-icon svg{width:32px;height:32px}
.sidebar-grid nav button[aria-current=page] .room-nav-icon{color:#10200a}
@media(max-width:1100px){.room-layout:has(.sidebar-grid){grid-template-columns:246px minmax(0,1fr)}.room-layout .room-sidebar.sidebar-grid nav button{font-size:14px;gap:7px}.sidebar-grid .room-nav-icon svg{width:26px;height:26px}.room-layout .sidebar-grid .room-brand>.room-logo span,.room-layout .sidebar-grid .room-brand>.room-logo em{font-size:32px}.sidebar-grid .room-quick .home-round{width:40px;height:40px}}
@media(max-width:760px){
 .room-layout:has(.sidebar-grid){grid-template-columns:1fr}
 .room-layout .room-sidebar.sidebar-grid{padding:12px 14px 10px}
 .room-layout .sidebar-grid .room-brand>.room-logo span,.room-layout .sidebar-grid .room-brand>.room-logo em{font-size:26px}
 .sidebar-grid .room-tagline{display:none}
 .room-layout .room-sidebar.sidebar-grid nav{display:flex;overflow-x:auto;gap:8px;margin-top:12px;padding-bottom:4px;scrollbar-width:none}
 .room-layout .room-sidebar.sidebar-grid nav button{flex:none;width:84px;font-size:12px;gap:6px;padding:8px 6px}
 .sidebar-grid .room-nav-icon svg{width:24px;height:24px}
}
.room-layout:has(.sidebar-grid) > .page-back{left:318px}
@media(max-width:1100px){.room-layout:has(.sidebar-grid) > .page-back{left:268px}}
@media(max-width:900px){.room-layout:has(.sidebar-grid) > .page-back{left:auto}}
@media(max-width:650px){.sidebar-grid .room-brand{justify-content:flex-start;gap:14px}.sidebar-grid .room-quick .home-round{width:38px;height:38px}.sidebar-grid .room-quick .home-round svg{width:19px;height:19px}}
/* 19 Eylül: menü adları kalın değil, biraz küçük; yan menü her ekran yüksekliğine sığar. */
.home-mode-row strong,.home-redesign .home-daily-text strong,.home-redesign .home-tile strong,.room-layout .room-sidebar nav button{font-weight:500}
.home-mode-row strong,.home-redesign .home-daily-text strong{font-size:23px}
.home-redesign .home-tile strong{font-size:19px}
@media(max-width:760px){.home-mode-row strong,.home-redesign .home-daily-text strong{font-size:20px}.home-redesign .home-tile strong{font-size:17px}}
@media(min-width:761px){
 .room-layout .room-sidebar.sidebar-grid{position:sticky;top:0;height:100svh;overflow:hidden;box-sizing:border-box}
 .room-layout .room-sidebar.sidebar-grid nav{flex:1 1 auto;min-height:0;grid-template-rows:repeat(5,minmax(0,140px));align-content:start}
 .room-layout .room-sidebar.sidebar-grid nav button{aspect-ratio:auto;height:auto;min-height:0;font-size:14px;gap:8px;overflow:hidden}
 .sidebar-grid .room-nav-icon svg{width:28px;height:28px}
}
@media(min-width:761px) and (max-height:700px){.room-layout .room-sidebar.sidebar-grid nav button{font-size:12px;gap:4px}.sidebar-grid .room-nav-icon svg{width:22px;height:22px}.sidebar-grid .room-tagline{display:none}}

/* Ana menü: bu haftanın en çok seçilen takımı (hesap kartının altında) */
.home-weekly{position:fixed;top:164px;right:24px;z-index:3;width:200px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 14px 12px;text-align:center;color:#eef3f1;border-radius:18px;border:1px solid #b9e97655;background:linear-gradient(160deg,#16302af2,#0b1a21f2);box-shadow:0 14px 34px #0007}
.home-weekly:hover{border-color:#b9e976}
.weekly-title{font-size:9.5px;font-weight:800;letter-spacing:1.6px;color:#b9e976;line-height:1.35}
.weekly-body{display:flex;flex-direction:column;align-items:center;gap:4px}
.weekly-crest{position:relative;width:58px;height:58px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:#ffffff0d}
.weekly-crest .catalog-image{background:transparent;padding:6px}
.weekly-body strong{font:italic 800 22px/1.05 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase}
.weekly-body small{font-size:11px;color:#8fa7ae}
.weekly-link{width:100%;padding-top:8px;border-top:1px solid #ffffff14;font:italic 500 16px 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;letter-spacing:.3px;color:#e6edef}
@media(max-width:900px) and (min-width:761px){.home-weekly{top:132px;right:18px;width:180px}}
@media(max-width:760px){.home-weekly{position:static;width:auto;margin:0 16px 20px}}
/* Genel istatistikler */
.general-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.general-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#b9e976;color:#10200a}.general-mark svg{width:30px;height:30px}
.general-head h2{margin:0;font:italic 800 28px 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase}.general-head p{margin:2px 0 0;font-size:12px;color:#8fa7ae}
.general-filters{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 14px}
.saver-row,.pair-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #ffffff10}.saver-row:last-child,.pair-row:last-child{border:0}
.saver-rank{width:22px;text-align:center;font:800 18px 'Barlow Condensed',Impact,sans-serif;color:#b9e976}
.saver-row .podium-face{position:relative;width:34px;height:34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#ffffff0d}
.saver-row strong{flex:1;font-size:13px}
.pair-crests{display:flex;gap:2px}.pair-names{flex:1;font-size:12.5px}.pair-names i{color:#6f8a93;font-style:normal}
.winner-rate.is-hard{color:#ff8b6b}

/* Haftalık kart hesap kartıyla aynı genişlikte (profile.js placeWeeklyCard) */
.home-weekly{width:132px;padding:12px 10px 10px;gap:7px;border-radius:20px}
.weekly-title{font-size:8.5px;letter-spacing:1.1px}
.weekly-crest{width:50px;height:50px;border-radius:12px}
.weekly-body strong{font-size:18px;overflow-wrap:anywhere}
.weekly-body small{font-size:10px}
.weekly-link{font-size:13px;padding-top:7px}

/* Bize ulaş */
.contact-screen{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;width:100%;max-width:1100px;margin:0 auto;align-items:start}
.contact-form{display:grid;gap:8px}
.contact-form input,.contact-form textarea{width:100%;box-sizing:border-box}
.contact-form textarea{resize:vertical;min-height:140px;font:inherit}
.contact-topics{border:0;margin:0 0 6px;padding:0;min-width:0}
.contact-topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:6px}
.contact-topic{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0d2119;color:#c9d6db;font-size:13px;text-align:left;cursor:pointer}
.contact-topic span{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#ffffff0a;color:#b9e976}.contact-topic svg{width:18px;height:18px}
.contact-topic:hover{border-color:#b9e97677}
.contact-topic[aria-pressed="true"]{border-color:#b9e976;background:#b9e97615;color:#eef3f1}
.contact-topic[aria-pressed="true"] span{background:#b9e976;color:#10200a}
.contact-hint{margin:8px 0 0;padding:9px 12px;border-radius:10px;background:#ffffff08;border-left:3px solid #b9e976;font-size:12.5px;color:#aebbc2}
.contact-count{justify-self:end;margin-top:-4px;font-size:11px;color:#6f8a93}
.contact-reply{margin:4px 0;font-size:13px;color:#aebbc2}.contact-reply b{color:#eef3f1}
.field-label small{font-weight:400;color:#6f8a93;margin-left:6px;text-transform:none;letter-spacing:0}
.contact-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 14px;border-radius:14px;border:1.5px dashed #b9e97655;background:#0b1a21;text-align:center;cursor:pointer;color:#c9d6db}
.contact-drop[hidden]{display:none}
.contact-drop:hover,.contact-drop:focus-visible,.contact-drop.is-over{border-color:#b9e976;background:#b9e9760d;outline:none}
.contact-drop>span{color:#b9e976}.contact-drop svg{width:30px;height:30px}
.contact-drop b{font-size:14px}.contact-drop small{font-size:11.5px;color:#8fa7ae}
.contact-thumbs{display:flex;flex-wrap:wrap;gap:10px}.contact-thumbs:empty{display:none}
.contact-thumb{position:relative;margin:0;width:120px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0b1a21}
.contact-thumb img{display:block;width:100%;height:80px;object-fit:cover}
.contact-thumb figcaption{padding:4px 7px;font-size:10.5px;color:#8fa7ae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-thumb button{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:0;background:#000b;color:#fff;font-size:16px;line-height:1;cursor:pointer}
.contact-note{margin:2px 0 4px}
.contact-side{display:grid;gap:12px}
.contact-tip{display:flex;gap:12px;align-items:flex-start;padding:14px}
.contact-tip>span{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:#b9e9761a;color:#b9e976}.contact-tip svg{width:21px;height:21px}
.contact-tip strong{display:block;font-size:13.5px;color:#eef3f1}.contact-tip p{margin:3px 0 0;font-size:12px;line-height:1.45;color:#8fa7ae}
.contact-screen.is-sent{grid-template-columns:minmax(0,560px);justify-content:center}
.contact-done{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 24px;text-align:center}
.contact-done-mark{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#b9e976;color:#10200a;font-size:38px;font-weight:800}
.contact-done h2{margin:6px 0 0;font:italic 800 34px 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase}
.contact-done p{margin:0;color:#aebbc2;font-size:14px}.contact-done b{color:#eef3f1}
.contact-done-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.contact-dialog{max-width:680px}
.contact-dialog-text{white-space:pre-wrap;padding:12px;border-radius:10px;background:#ffffff08;font-size:13.5px;line-height:1.5;max-height:260px;overflow:auto}
.contact-dialog-images{display:flex;gap:10px;flex-wrap:wrap}.contact-dialog-images img{width:180px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
@media(max-width:900px){.contact-screen{grid-template-columns:1fr}}
@media(max-width:760px){.contact-topic-grid{grid-template-columns:1fr 1fr}.contact-topic{font-size:12px;padding:8px}}

/* Sıralama: ligler */
.league-tabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:14px}
.league-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;border-radius:12px;border:1px solid var(--line);background:#0d2119;color:#aebbc2;cursor:pointer;min-width:0}
.league-tab img{width:34px;height:34px}
.league-tab span{font:italic 500 14px/1.05 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.league-tab small{font-size:10.5px;color:#6f8a93}
.league-tab:hover{border-color:#b9e97677}
.league-tab[aria-pressed="true"]{border-color:#b9e976;background:#b9e97615;color:#eef3f1}.league-tab[aria-pressed="true"] small{color:#b9e976}
.league-head{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.league-head h2{margin:0;font:italic 800 28px/1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase}.league-head p{margin:3px 0 0;font-size:12px;color:#8fa7ae}
@media(max-width:760px){.league-tabs{display:flex;overflow-x:auto;padding-bottom:4px}.league-tab{flex:none;width:82px}}
.friends-tabs{margin-bottom:14px}
/* Ayarlar, rehber ve bize ulaş: üç yuvarlak düğme logonun yanına sığsın */
.home-quick{gap:8px;margin-left:auto}
.home-quick .home-round{width:46px;height:46px}.home-quick .home-round svg{width:23px;height:23px}
.sidebar-grid .room-quick{gap:6px}
@media(max-width:760px){.home-quick .home-round{width:40px;height:40px}.home-quick .home-round svg{width:20px;height:20px}}

/* Bize ulaş: iki sütun, ekrana küçülmeden sığsın */
.contact-screen{grid-template-columns:minmax(0,1fr);max-width:1060px}
.contact-topic-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.contact-columns{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;margin-top:4px}
.contact-column{display:grid;gap:8px;align-content:start}
.contact-form textarea{min-height:168px}
.contact-drop{padding:14px 12px}
.contact-column .room-submit{margin-top:4px}
@media(max-width:900px){.contact-columns{grid-template-columns:1fr}.contact-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contact-form textarea{background:#071820;color:#eef2ed;border:1px solid #68838e4d;border-radius:6px;padding:10px 12px;font-size:14px}.contact-form textarea:focus{border-color:#b9e976;outline:none}
@media(max-width:760px){.home-redesign .home-sidebar{min-width:0}.home-brand-row{min-width:0}.home-brand-row .home-wordmark h1{font-size:42px}.home-quick{gap:6px}.home-quick .home-round{width:38px;height:38px}.home-quick .home-round svg{width:19px;height:19px}}

/* Sıralama: ligler basamak basamak yükselir */
.league-tabs{align-items:end}
.league-tab{height:calc(84px + var(--step, 0) * 9px);justify-content:flex-end;padding-bottom:9px;border-bottom-width:3px;
  background:linear-gradient(180deg,#0d2119, color-mix(in srgb,#0d2119 calc(100% - var(--step, 0) * 3%), #b9e976));
  animation:league-step-in .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--step, 0) * 55ms)}
.league-tab img{width:calc(30px + var(--step, 0) * 2px);height:calc(30px + var(--step, 0) * 2px)}
@keyframes league-step-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.league-tab{animation:none}}
@media(max-width:760px){.league-tabs{align-items:flex-end}.league-tab{height:calc(76px + var(--step, 0) * 6px)}}

/* İstatistiklerim: lig kartı */
.my-head{display:flex;align-items:stretch;gap:22px;padding:16px 22px}
.my-crest{flex:none;display:flex;align-items:center;justify-content:center;width:150px}
.my-crest img{width:100%;height:100%;max-height:190px;object-fit:contain;filter:drop-shadow(0 8px 18px #0008)}
.my-league{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0;flex:1}
.my-kicker{font-size:10.5px;font-weight:800;letter-spacing:2px;color:#8fa7ae}
.my-league strong{font:italic 800 38px/1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;color:#eef3f1}
.my-elo{display:flex;align-items:baseline;gap:6px;font:800 30px/1.05 'Barlow Condensed',Impact,sans-serif;color:#b9e976}
.my-elo small{font-size:16px;color:#b9e976}.my-elo em{font:500 12.5px Manrope,Arial,sans-serif;color:#aebbc2;margin-left:6px}
.my-league .league-progress{width:100%;max-width:420px;margin-top:6px}
.my-next{font-size:12px;color:#8b979d}
.my-badges-button{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 16px 10px 10px;border-radius:14px;border:1px solid #f2c94c88;
  background:linear-gradient(120deg,#3a2c08,#1c2a14);color:#fff3cf;cursor:pointer;text-align:left;box-shadow:0 8px 22px #0006,inset 0 1px 0 #ffffff14;transition:transform .15s,border-color .15s}
.my-badges-button:hover{transform:translateY(-2px);border-color:#f2c94c}
.my-badges-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(160deg,#ffd84d,#f29f05);color:#3a2502}
.my-badges-icon svg{width:26px;height:26px}
.my-badges-button b{display:block;font:italic 800 22px/1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;letter-spacing:.4px}
.my-badges-button small{display:block;margin-top:2px;font-size:11.5px;color:#d9c89a}
.my-badges-chevron{color:#f2c94c;margin-left:6px}.my-badges-chevron svg{width:20px;height:20px}
@media(max-width:760px){.my-head{gap:14px;padding:14px}.my-crest{width:96px}.my-league strong{font-size:30px}.my-elo{font-size:24px}}
.my-head{padding:12px 20px}
.my-crest{width:128px}.my-crest img{max-height:136px}
.my-title{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.my-league .league-progress{margin-top:4px}
.my-badges-button{margin-top:10px;padding:7px 16px 7px 8px}
.my-badges-icon{width:38px;height:38px}.my-badges-icon svg{width:23px;height:23px}
@media(max-width:760px){.my-crest{width:88px}}
.room-card.my-head{padding:12px 20px}.my-badges-button{min-height:0;height:auto;line-height:1.1;margin-top:8px}.my-badges-button small{margin-top:3px}
/* İstatistiklerim: Başarılarım en sağda kare bir kutu */
.my-head{align-items:center}
.my-badges-square{flex:none;align-self:stretch;aspect-ratio:1;min-height:0;height:auto;width:auto;max-width:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;margin-left:auto;
  border-radius:18px;border:1px solid #f2c94c88;background:radial-gradient(circle at 50% 30%,#5a430c,#23200f 70%);color:#fff3cf;cursor:pointer;text-align:center;
  box-shadow:0 10px 26px #0007,inset 0 1px 0 #ffffff1a;transition:transform .15s,border-color .15s,box-shadow .15s}
.my-badges-square:hover{transform:translateY(-3px);border-color:#f2c94c;box-shadow:0 14px 30px #0008,0 0 24px #f2c94c33}
.my-badges-square .my-badges-icon{width:58px;height:58px;border-radius:16px;box-shadow:0 6px 16px #f29f0555}
.my-badges-square .my-badges-icon svg{width:34px;height:34px}
.my-badges-square b{font:italic 800 22px/1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;letter-spacing:.4px}
.my-badges-square small{font-size:11px;color:#d9c89a;line-height:1.2}
/* Özet: altı sayı tek sırada, sayfa küçülmesin */
.summary-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:stretch}
.summary-left{display:grid;gap:12px;align-content:start}
.summary-left .rating-graph-card,.summary-left .form-row{margin:0}
.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:0;align-content:stretch}
.profile-tab-body{min-height:460px}
.room-card.my-head{padding:10px 20px}.my-crest img{max-height:122px}
@media(max-width:900px){.summary-top{grid-template-columns:1fr}}
@media(max-width:760px){.my-badges-square{max-width:104px}.my-badges-square .my-badges-icon{width:44px;height:44px}.my-badges-square b{font-size:17px}.my-badges-square small{display:none}}

/* Sıralama: her lig kendi renginde */
.league-tabs{gap:10px;padding-top:6px}
.league-tab{position:relative;overflow:hidden;height:calc(122px + var(--step, 0) * 9px);gap:2px;padding:10px 4px 10px;border:1px solid color-mix(in srgb,var(--lc) 40%,transparent);border-bottom:3px solid var(--lc);border-radius:14px;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--lc) 7%,transparent) 0 6px,transparent 6px 14px),
    linear-gradient(180deg,color-mix(in srgb,var(--lc) 26%,#0b1a21),#0b1a21 78%);color:#dfe8ea}
.league-tab::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--lc),transparent);opacity:.8}
.league-tab::after{content:'';position:absolute;left:50%;top:38%;width:70px;height:70px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--lc) 45%,transparent),transparent 70%);pointer-events:none}
.league-tab>*{position:relative;z-index:1}
.league-tab-crest img{width:calc(34px + var(--step, 0) * 2.5px);height:calc(34px + var(--step, 0) * 2.5px);filter:drop-shadow(0 3px 8px #000a)}
.league-tab-name{font:italic 700 15px/1.05 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;white-space:normal;text-align:center;max-width:100%;overflow-wrap:anywhere}
.league-tab-range{font:700 11px/1.2 Manrope,Arial,sans-serif;color:color-mix(in srgb,var(--lc) 70%,#fff);white-space:nowrap}
.league-tab small{font-size:10px;color:#8fa7ae}
.league-tab:hover{border-color:var(--lc);transform:translateY(-2px)}
.league-tabs .league-tab[aria-pressed="true"]{border-color:var(--lc);color:#fff;box-shadow:0 0 0 1px var(--lc),0 10px 24px color-mix(in srgb,var(--lc) 35%,transparent);
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--lc) 12%,transparent) 0 6px,transparent 6px 14px),
    linear-gradient(180deg,color-mix(in srgb,var(--lc) 45%,#0b1a21),#0b1a21 85%)}
.league-tabs .league-tab[aria-pressed="true"] small{color:#eef3f1}
@media(max-width:760px){.league-tab{height:calc(112px + var(--step, 0) * 6px);width:92px}}
.league-tab{animation-fill-mode:backwards;transition:transform .15s,box-shadow .15s}

/* Ana menü: Kupa kartı (hesap kartının altında, haftanın takımının üstünde) */
.home-cup{position:fixed;top:164px;right:24px;z-index:3;width:132px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4px;padding:10px 8px 10px;overflow:hidden;
  border-radius:20px;border:1px solid #f2c94c99;color:#fff3cf;text-align:center;cursor:pointer;
  background:radial-gradient(circle at 50% 38%,#f2c94c40,transparent 62%),repeating-linear-gradient(135deg,#f2c94c0d 0 6px,transparent 6px 13px),linear-gradient(170deg,#3a2c08f5,#15140cf5 75%);
  box-shadow:0 14px 34px #0008,0 0 26px #f2c94c26,inset 0 1px 0 #fff3}
.home-cup::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,#ffd84d,transparent)}
.home-cup:hover{border-color:#ffd84d;box-shadow:0 16px 36px #0009,0 0 34px #f2c94c44}
.cup-ribbon{display:inline-block;padding:3px 9px;border-radius:999px;background:#ffd84d;color:#3a2502;font:800 9px/1.2 Manrope,Arial,sans-serif;letter-spacing:1.4px;box-shadow:0 3px 10px #f2c94c55}
.cup-trophy{display:grid;place-items:center;width:74px;height:74px;filter:drop-shadow(0 6px 14px #f29f0566);animation:cup-float 3.2s ease-in-out infinite}
.cup-trophy svg{width:100%;height:100%}
@keyframes cup-float{50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.cup-trophy{animation:none}}
.cup-title{font:italic 800 26px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;background:linear-gradient(180deg,#fff3b0,#ffc21a);-webkit-background-clip:text;background-clip:text;color:transparent}
.cup-line{font-size:10px;line-height:1.25;color:#d9c89a}
.cup-button,.cup-gold-button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:linear-gradient(180deg,#ffe57f,#f2b705 55%,#c98a06);color:#3a2502;font:italic 800 14px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.6px;text-transform:uppercase;box-shadow:0 4px 12px #f29f0555,inset 0 1px 0 #fff9;border:0}
.cup-button{width:100%;padding:7px 6px}
.cup-gold-button{padding:12px 20px}
@media(max-width:900px) and (min-width:761px){.home-cup{top:132px;right:18px}}
@media(max-width:760px){.home-cup{position:static;width:auto;margin:0 16px 14px;flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 16px}
  .home-cup .cup-trophy{width:56px;height:56px}.home-cup .cup-ribbon{position:absolute;top:10px;right:12px}.home-cup .cup-button{width:auto;margin-left:auto;padding:8px 12px}}

/* Çok yakında penceresi */
.cup-teaser{max-width:440px;text-align:center}
.cup-teaser form{display:flex;flex-direction:column;align-items:center;gap:8px}
.cup-teaser-trophy{width:96px;height:96px;filter:drop-shadow(0 8px 18px #f29f0566)}.cup-teaser-trophy svg{width:100%;height:100%}
.cup-teaser h2{margin:2px 0 0;font:italic 800 38px/1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;color:#ffd84d}
.cup-teaser p{margin:0;color:#c9d6db}
.cup-teaser-list{list-style:none;margin:6px 0;padding:0;display:grid;gap:8px;text-align:left}
.cup-teaser-list li{padding:9px 12px;border-radius:12px;background:#ffffff08;border-left:3px solid #ffd84d;font-size:12.5px;color:#aebbc2;line-height:1.45}
.cup-teaser-list b{display:block;color:#fff3cf;font-size:13.5px}

/* Kupa sayfası ve tablo */
.cup-screen{display:grid;gap:12px;width:100%;max-width:1000px;margin:0 auto}
.cup-item{display:flex;align-items:center;gap:16px}
.cup-item-trophy{flex:none;width:58px;height:58px}.cup-item-trophy svg{width:100%;height:100%}
.cup-item-body{flex:1;min-width:0}.cup-item-body h2{margin:0;font:italic 800 26px/1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase}
.cup-item-body p{margin:4px 0 0;font-size:13px;color:#aebbc2}
.cup-item-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cup-state{font-size:12.5px;color:#b9e976}
.cup-cancelled{opacity:.6}
.cup-bracket{display:flex;gap:18px;overflow-x:auto;padding-bottom:8px;width:100%}
.cup-round{display:flex;flex-direction:column;justify-content:space-around;gap:12px;min-width:190px}
.cup-round h3{margin:0 0 4px;font:italic 800 18px 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;color:#ffd84d;text-align:center}
.cup-match{position:relative;display:grid;border-radius:12px;border:1px solid var(--line);background:#0b1a21;overflow:hidden}
.cup-match.is-mine{border-color:#ffd84d}
.cup-match em{position:absolute;right:8px;bottom:4px;font-size:10px;color:#8fa7ae}
.cup-slot{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13px;color:#c9d6db}
.cup-slot+.cup-slot{border-top:1px solid #ffffff10}
.cup-slot small{width:18px;text-align:center;color:#6f8a93}
.cup-slot.is-winner{background:#ffd84d18;color:#fff3cf}.cup-slot.is-winner b{color:#ffd84d}
.cup-slot.is-empty{color:#6f8a93;font-style:italic}
.cup-bracket-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}
.cup-invite-art svg{width:120px;height:120px}
.notice-cup svg{width:26px;height:26px}

/* Sezon rozetleri */
.season-art{position:relative;display:inline-flex;flex-direction:column;align-items:center;width:var(--size);padding-bottom:10px}
.season-art .league-badge{width:var(--size);height:var(--size);filter:drop-shadow(0 4px 10px #0009)}
.season-art.is-champion .league-badge{filter:drop-shadow(0 0 12px #ffd84d99)}
.season-ribbon{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;padding:2px 8px;border-radius:4px;background:linear-gradient(180deg,#1d3a2c,#10261b);border:1px solid #b9e97666;color:#dff5c2;font:700 calc(var(--size) * .16 + 2px)/1.2 Manrope,Arial,sans-serif}
.season-art.is-champion .season-ribbon{background:linear-gradient(180deg,#ffe57f,#d99a0b);color:#3a2502;border-color:#fff3b0}
.season-mark{position:absolute;top:-4px;right:-6px;display:grid;place-items:center;width:calc(var(--size) * .36);height:calc(var(--size) * .36);min-width:18px;min-height:18px;border-radius:50%;font-style:normal;font-weight:800;font-size:calc(var(--size) * .2 + 3px);box-shadow:0 3px 8px #0008}
.season-mark.is-champion{background:linear-gradient(180deg,#ffe57f,#f2b705);color:#3a2502}
.season-mark.is-top{background:linear-gradient(180deg,#e3f2fd,#90caf9);color:#0d2a4a}
.season-mark.is-first{background:linear-gradient(180deg,#d7f59a,#8fd14a);color:#10200a}
.season-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.season-card .season-art{margin:4px 0 2px}
.season-card-awards{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.season-card-awards span{padding:3px 8px;border-radius:999px;background:#b9e9761a;color:#d7f59a;font-size:11px}
.season-card-awards .is-missed{background:#ffffff0a;color:#8fa7ae}
.season-rules{margin:0 0 12px;text-align:center}

/* Sıralama: sezon seçici ve sezon şeridi */
.board-season-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.board-season-pick{display:flex;align-items:center;gap:8px;font-size:12px;color:#8fa7ae}
.board-season-pick select{background:#0d2119;color:#eef3f1;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px}
.season-closed-note{font-size:12px;color:#8fa7ae}
.season-strip{display:flex;align-items:center;gap:18px;flex:1;flex-wrap:wrap;padding:8px 14px;border-radius:12px;background:#0b1a21;border:1px solid var(--line)}
.season-strip-clock,.season-strip-goal{display:flex;align-items:center;gap:10px}
.season-strip-clock svg{width:22px;height:22px;color:#b9e976}
.season-strip b{display:block;font:800 18px/1 'Barlow Condensed',Impact,sans-serif;color:#eef3f1}
.season-strip small{font-size:11px;color:#8fa7ae}
.season-strip-goal{flex:1;min-width:220px}
.season-strip-goal .league-progress{flex:1;margin:0;max-width:none}
.matchmaking-card .season-strip{margin:12px 0 4px}

/* Sezon özeti penceresi */
.season-summary{max-width:420px;text-align:center}
.season-summary form{display:flex;flex-direction:column;align-items:center;gap:8px}
.season-summary-kicker{font-size:11px;font-weight:800;letter-spacing:2px;color:#b9e976}
.season-summary h2{margin:0;font:italic 800 34px/1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase}
.season-summary p{margin:0;color:#c9d6db}
.season-summary-awards{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.season-summary-awards span{padding:5px 12px;border-radius:999px;background:linear-gradient(180deg,#ffe57f,#f2b705);color:#3a2502;font-weight:800;font-size:12px}

/* Yönetim: kupa formu */
.admin-cup-form{display:grid;gap:8px;margin-bottom:14px}
.admin-cup-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.admin-cup-grid select,.admin-cup-grid input{width:100%}
@media(max-width:900px){.admin-cup-grid{grid-template-columns:1fr 1fr}}
/* Kupa kartı haftanın takımıyla aynı boyda kalsın; sahne altı bilgi satırı sağdaki kart sütununa girmesin */
.home-cup .cup-trophy{width:62px;height:62px}.home-cup .cup-title{font-size:24px}.home-cup{padding:9px 8px}
@media(min-width:761px){.home-redesign .home-scene-footer{justify-content:flex-start}}
.cup-teaser-trophy{display:block;width:76px;height:76px}.cup-teaser form{gap:6px}.cup-teaser-list li{padding:7px 12px}
.season-strip{flex:0 1 auto}
.cup-teaser .invite-dialog-actions{margin-top:4px}.cup-teaser .cup-gold-button{padding:10px 34px;font-size:17px}
.cup-teaser-trophy{width:64px;height:64px}.cup-teaser h2{font-size:32px}
.season-summary .primary{padding:12px 28px}.home-weekly{justify-content:space-between}

/* Kupa kartı ve kupa ekranları: temanın yeşili (20 Eylül) */
.home-cup{justify-content:center;gap:10px;padding:12px 8px;border-color:#b9e97666;color:#eef3f1;
  background:radial-gradient(circle at 50% 30%,#b9e97626,transparent 60%),repeating-linear-gradient(135deg,#b9e9760a 0 6px,transparent 6px 13px),linear-gradient(170deg,#16302af5,#0b1a21f5 75%);
  box-shadow:0 14px 34px #0008,0 0 22px #b9e9761f,inset 0 1px 0 #ffffff1a}
.home-cup::before{background:linear-gradient(90deg,transparent,#b9e976,transparent)}
.home-cup:hover{border-color:#b9e976;box-shadow:0 16px 36px #0009,0 0 30px #b9e97633}
.home-cup .cup-trophy{width:46px;height:46px;filter:drop-shadow(0 4px 12px #b9e97640)}
.home-cup .cup-line{font:italic 800 19px/1.02 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;letter-spacing:.3px;color:#fff}
.cup-button,.cup-go-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;background:linear-gradient(180deg,#d7f59a,#b9e976 55%,#8fd14a);
  color:#10200a;font:italic 800 15px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.6px;text-transform:uppercase;box-shadow:0 4px 14px #b9e97655,inset 0 1px 0 #fff9}
.home-cup .cup-button{position:relative;overflow:hidden;width:100%;padding:9px 6px;font-size:16px;animation:cup-soon 2.4s ease-in-out infinite}
.home-cup .cup-button i{width:7px;height:7px;border-radius:50%;background:#10200a;animation:cup-dot 1.2s ease-in-out infinite}
.home-cup .cup-button::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff8c 50%,transparent 70%);transform:translateX(-100%);animation:cup-shine 3s ease-in-out infinite}
@keyframes cup-soon{50%{box-shadow:0 4px 22px #b9e976aa,inset 0 1px 0 #fff9;transform:scale(1.04)}}
@keyframes cup-dot{50%{opacity:.25}}
@keyframes cup-shine{60%,100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.home-cup .cup-button,.home-cup .cup-button i,.home-cup .cup-button::after{animation:none}}
.cup-go-button{padding:12px 20px}
.cup-teaser .cup-go-button{padding:10px 34px;font-size:17px}
.cup-teaser h2{color:#b9e976}
.cup-teaser-list li{border-left-color:#b9e976}.cup-teaser-list b{color:#eef3f1}
.cup-teaser .cup-ribbon,.cup-ribbon{background:#b9e976;color:#10200a;box-shadow:0 3px 12px #b9e97655}
.cup-teaser-trophy,.cup-item-trophy{filter:drop-shadow(0 6px 14px #b9e97640)}
.cup-round h3{color:#b9e976}
.cup-match.is-mine{border-color:#b9e976}
.cup-slot.is-winner{background:#b9e9761a;color:#eef3f1}.cup-slot.is-winner b{color:#b9e976}
@media(max-width:760px){.home-cup{flex-direction:row;gap:12px}.home-cup .cup-line{font-size:17px;text-align:left}.home-cup .cup-button{width:auto;margin-left:auto;padding:8px 12px}}
/* Hesap kartı: forma ile ad üst üste binmesin (finale); telefonda kart 64 px kalır */
@media(min-width:761px){.account-tile:not(.account-tile-guest){height:auto;min-height:132px}.account-tile-kit{min-height:70px}}

/* Mobil uyumluluk (20 Eylül): sağ üstteki sabit hesap kartı ve zil, logonun yanındaki düğmelere ve menü şeridine binmesin */
@media(max-width:760px){
 .home-brand-row{flex-wrap:wrap;padding-right:150px;row-gap:10px}
 .home-brand-row .home-quick{width:100%;margin-left:0;justify-content:flex-start}
 .sidebar-grid .room-brand{flex-wrap:wrap;padding-right:150px;row-gap:8px}
 .sidebar-grid .room-quick{width:100%}
 .room-layout .room-sidebar.sidebar-grid nav{margin-top:10px}
 .home-weekly{width:auto;max-width:none;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;text-align:left;gap:8px 14px;padding:12px 16px}
 .home-weekly .weekly-title{width:100%}
 .home-weekly .weekly-link{width:auto;border-top:0;padding-top:0;margin-left:auto}
 .home-weekly .weekly-body{flex-direction:row;gap:10px;align-items:center}
}
/* Mobil (dikey telefon ve yatay telefon): takım seçimi tek sütun — seçim kartı üstte, liste altta, kilit düğmesi ekranın altında sabit */
@media(max-width:760px),(max-height:520px) and (max-width:1023px){
 .room-layout.team-selection-layout{display:block;min-height:100dvh}
 .team-selection-layout .room-main{min-width:0;padding:8px 12px 88px}
 .team-selection-layout .room-title{margin:6px 0 8px}
 .team-selection-layout .room-title h1{font-size:26px}
 .team-selection-layout .room-title p{display:none}
 .team-selection-layout > .page-back{display:none}
 .team-selection-layout .selection-matchbar{flex-wrap:wrap;gap:8px}
 .team-selection-layout .selection-columns{display:flex;flex-direction:column;gap:10px;min-height:0;flex:none}
 .room-layout.team-selection-layout,.team-selection-layout .room-main{height:auto!important;max-height:none!important;overflow:visible!important}
 .team-selection-layout .selection-detail{order:-1;display:grid;grid-template-columns:1fr;gap:8px}
 .team-selection-layout .selection-team-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;text-align:left;padding:10px 12px}
 .team-selection-layout .selection-team-card h2{grid-column:1/-1;margin:0 0 2px;font-size:13px}
 .team-selection-layout .selection-big-crest{grid-row:2/5;width:52px;height:60px;margin:0}
 .team-selection-layout .selection-team-card h3{font-size:18px;margin:0}
 .team-selection-layout .selection-card-status{margin:0!important;font-size:11px}
 .team-selection-layout .selection-team-info{display:flex;gap:14px;margin:0}
 .team-selection-layout .selection-team-info>div{padding:0;font-size:10px;flex-direction:row;gap:6px}
 .team-selection-layout .selection-data-note{display:none}
 .team-selection-layout .selection-opponent{padding:8px 10px}
 .team-selection-layout .selection-footnote{display:none}
 .team-selection-layout .selection-lock-status{position:fixed;left:12px;right:12px;bottom:12px;z-index:6;padding:14px;box-shadow:0 10px 30px #000a}
 .team-selection-layout .selection-browser{display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:8px;padding:10px;min-height:0}
 .team-selection-layout .selection-categories{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
 .team-selection-layout .selection-categories button{flex:none;padding:8px 10px;font-size:11px}
 .team-selection-layout .selection-team-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:auto;gap:6px;max-height:none;overflow:visible}
 .team-selection-layout .selection-team-row{min-height:74px;padding:6px 4px}
 .team-selection-layout .selection-mini-crest{width:34px;height:38px;max-height:none}
 .team-selection-layout .selection-team-row>.selection-tile-label{font-size:11px}
}
/* Mobil: cevap ekranında eşleşme zorluğu rozeti takım kartlarının üstüne binmesin */
@media(max-width:760px),(max-height:520px) and (max-width:1023px){
 .play-duel .side-tier{position:static;transform:none;display:flex;justify-content:center;margin-bottom:6px}
 .play-duel .side{padding-top:8px}
 .pair-badge{min-width:0;padding:6px 10px 7px;margin-bottom:10px}.pair-badge b{font-size:20px}.pair-badge small{font-size:8px;letter-spacing:1.5px}
}
@media(max-width:760px),(max-height:520px) and (max-width:1023px){
 .team-selection-layout .selection-team-list{align-content:start}
 .team-selection-layout .selection-team-row{height:auto}
 .team-selection-layout .selection-team-info{flex-wrap:wrap}
}
@media(max-width:760px){.team-selection-layout .selection-mobile-home{display:none}}
/* Yatay telefon: yan menü yer kaplamasın, ana menü düğmesi üstte kalsın */
@media(max-height:520px) and (min-width:761px) and (max-width:1023px){.room-layout.team-selection-layout .room-sidebar.sidebar-grid{display:none}.team-selection-layout .selection-mobile-home{display:block;top:6px;left:12px;font-size:12px}.team-selection-layout .room-title{padding-left:96px}.team-selection-layout .selection-team-list{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:760px){.color-grid{grid-template-columns:repeat(auto-fill,minmax(34px,1fr))!important;gap:8px}}

/* Tablet dikey: sağdaki sabit kartlar sahne yazısının üstüne binmesin */
@media(min-width:761px) and (max-width:1023px){.home-redesign .home-scene{padding-right:180px}.home-redesign .home-slogan{margin-left:4%}}
/* Yatay telefon: ana menü kartları akışta, hesap kartı küçük */
@media(max-height:520px) and (min-width:761px) and (max-width:1023px){
 .account-tile{position:absolute;top:12px;right:12px;width:64px;height:64px!important;min-height:0!important;border-radius:14px;padding:4px}
 .account-tile:not(.account-tile-guest) strong,.account-tile:not(.account-tile-guest) small{display:none}
 .account-tile-guest strong{font-size:14px}.account-tile-guest small,.account-tile-guest .account-tile-icon{display:none}
 .account-tile-kit{min-height:0}.account-tile-kit svg{width:54px;height:54px}
 .notice-bell{position:absolute;top:22px;right:86px;width:44px;height:44px;border-radius:12px}
 .home-cup,.home-weekly{position:static!important;width:auto!important;height:auto!important;min-height:0!important;margin:0 24px 14px;top:auto!important;right:auto!important}
 .home-redesign .home-scene{padding-right:24px}
}

/* Tablet dikey: sahne yazısı sağdaki kartlara girmesin */
@media(min-width:761px) and (max-width:1023px){.home-redesign .home-slogan h2{font-size:54px}.home-redesign .home-slogan{margin:60px 0 auto 0;max-width:calc(100% - 40px)}.home-redesign .home-slogan-copy{font-size:14px}}
/* Yatay telefon: alt kartlar tam genişlikte, yan yana içerik */
@media(max-height:520px) and (min-width:761px) and (max-width:1023px){
 .home-cup{flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 16px}.home-cup .cup-trophy{width:56px;height:56px}.home-cup .cup-button{width:auto;margin-left:auto;padding:8px 12px}
 .home-weekly{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;text-align:left;gap:8px 14px;padding:12px 16px}
 .home-weekly .weekly-title{width:100%}.home-weekly .weekly-link{width:auto;border-top:0;padding-top:0;margin-left:auto}.home-weekly .weekly-body{flex-direction:row;gap:10px;align-items:center}
}
/* Tablet: dil seçenekleri satıra sığsın */
@media(max-width:1023px){.settings-languages{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.settings-languages button{min-width:0;overflow:hidden}}
@media(min-width:761px) and (max-width:1023px){.home-redesign .home-slogan{transform:rotate(-7deg) scale(.82);transform-origin:left top}.home-redesign .home-scene{padding-right:200px}}
@media(min-width:761px) and (max-width:1023px){.home-redesign .home-slogan>p:first-child{white-space:nowrap}}

/* İki adımlı doğrulama: kurulum ekranı ve yedek kodlar */
.admin-twofactor{max-width:520px;margin:0 auto}
.admin-qr{display:flex;justify-content:center;padding:18px}
.admin-qr svg{width:220px;height:220px;border-radius:10px}
.admin-secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;letter-spacing:.08em;
  word-break:break-all;background:rgba(255,255,255,.06);border-radius:8px;padding:10px 12px;margin:6px 0}
.admin-note{font-size:13px;opacity:.78;margin:4px 0}
.admin-apps{text-align:center;margin:-4px 0 0}
.admin-backup-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 18px;margin:10px 0 4px;padding-left:22px}
.admin-backup-codes li{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;letter-spacing:.05em}
@media (max-width:760px){.admin-qr svg{width:min(70vw,220px);height:auto}.admin-backup-codes{grid-template-columns:1fr}}