/* Sultan Team 9.31 — reference style for the app interface only. */
html{background:#030b19!important}
body{background:radial-gradient(ellipse at 50% 0,#102c52 0,transparent 45%),linear-gradient(180deg,#06142a,#020917 65%,#041126)!important;color:#f8fbff}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:url('assets/ui-ribbons.svg') center top / max(100vw,620px) 100vh no-repeat;opacity:.8}
#app{position:relative;z-index:1;max-width:620px!important;padding:18px 20px max(30px,env(safe-area-inset-bottom))!important;overflow:visible!important}
#view{position:relative!important}
#app .home-showcase{padding-top:44px!important;gap:0!important}
#app .home-games{display:grid!important;grid-template-columns:1fr 1fr!important;direction:ltr;gap:90px!important;padding:0 20px!important;margin:0!important;width:100%!important}
#app .home-game{width:100%!important;max-width:none!important;border-radius:27px!important;transform:rotate(-8deg)!important;border:2px solid #22b8ff!important;box-shadow:0 0 12px #0fa8ff80,0 0 30px #087aff55!important;overflow:hidden!important;background:#062340}
#app .home-game.gold{transform:rotate(8deg)!important;border-color:#ffc660!important;box-shadow:0 0 12px #ffb94670,0 0 30px #f99b2535!important}
#app .home-game img{display:block!important;aspect-ratio:1!important;width:100%!important;height:auto!important;object-fit:cover!important}
#app .home-mark{width:245px!important;max-width:55vw!important;height:auto!important;margin:-15px auto 10px!important;filter:drop-shadow(0 0 15px #4b22ff40)!important;mix-blend-mode:normal!important}
#app .channel{color:#fff!important;background:linear-gradient(#041020,#041020) padding-box,linear-gradient(95deg,#fa21f7,#ffc14b,#0cb6ff) border-box!important;border:1.5px solid transparent!important;box-shadow:0 0 14px #178eff40,0 0 8px #db31ff20!important;line-height:1.4!important}
#app .home-channel{font-size:20px!important;padding:9px 24px!important;margin:0 auto 16px!important;max-width:95%!important;white-space:nowrap!important}
#app .home-title.home-title-svg{display:flex!important;align-items:center!important;justify-content:center!important;height:96px!important;min-height:96px!important;margin:0 0 20px!important;padding:0!important;border:0!important;border-radius:0!important;clip-path:none!important;outline:none!important;background:none!important;box-shadow:none!important;position:relative!important;isolation:isolate!important}
#app .home-title:before,#app .home-title:after{content:none!important;display:none!important}
#app .title-frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:-1!important;filter:drop-shadow(0 0 8px #ffb33c50)!important}
#app .title-copy{font-size:40px!important;line-height:1.1!important;font-weight:950!important;color:#fff!important;white-space:nowrap!important;text-shadow:0 3px 0 #07101e,0 0 14px #127bff30!important}
#app .goldword{color:#ffca55!important;text-shadow:0 3px 0 #664011,0 0 10px #ffb82b35!important}
#app .menu{padding:0 8px!important;gap:15px!important}
#app .menu .menu-row{display:grid!important;grid-template-columns:48px minmax(0,1fr) 20px!important;align-items:center!important;gap:12px!important;direction:ltr;width:100%;padding:12px 22px!important;min-height:80px!important;border-radius:26px!important;background:radial-gradient(ellipse at 20% 0,#0a325455,transparent 65%),linear-gradient(#031328,#020c1d) padding-box,linear-gradient(105deg,#02d4ff,#1989ff,#bb27fd) border-box!important;border:2px solid transparent!important;color:#fff!important;box-shadow:0 0 9px #13a7ff70,0 0 25px #0945ff25,inset 0 0 20px #125df025!important}
#app .menu .menu-row.menu-gold{background:linear-gradient(#07152b,#020a17) padding-box,linear-gradient(105deg,#a86918,#ffe6a2,#d99423) border-box!important;color:#ffcf64!important;box-shadow:0 0 10px #ffbc4560,0 0 22px #a660131c!important}
#app .menu .menu-row.menu-honor{min-height:68px!important;border-color:#466e9b!important;background:linear-gradient(160deg,#0b213b,#061225)!important;box-shadow:0 0 15px #2481c91b!important}
.menu-icon{font-size:35px;filter:drop-shadow(0 0 8px #f5ae4640);line-height:1}
.menu-label{direction:rtl;font-size:26px;font-weight:900;text-align:center;line-height:1.4}
.menu-chevron{width:12px;height:12px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg);opacity:.9}
#app .settings-btn,#app .back{position:absolute!important;top:4px!important;width:42px!important;height:42px!important;display:grid;place-items:center;padding:0!important;border:1px solid #3a729e!important;border-radius:14px!important;background:#06152bd9!important;color:#ccdcef!important;box-shadow:0 0 15px #177aff18;font-size:20px!important}
#app .settings-btn{left:0!important}#app .back{right:0!important}
#app .page-brand{padding-top:24px!important;margin-bottom:14px!important}
#app .page-brand img{width:140px!important;max-width:38vw!important;height:auto!important;margin:0 auto 9px!important}
#app .page-brand .channel{font-size:16px!important;padding:7px 20px!important;margin:0!important;white-space:nowrap!important;max-width:100%!important}
#app .title,#app .quick-title{font-size:28px!important;color:#ffd16d!important;margin:10px 0 18px!important;font-weight:900;text-shadow:0 0 20px #ffb03920!important;line-height:1.4}
#app .title:empty{display:none}
#app .card{border:1px solid #2c648e!important;background:linear-gradient(145deg,#0a2340e8,#041122f5)!important;border-radius:23px!important;padding:18px!important;margin:16px 0!important;box-shadow:0 10px 28px #0004,inset 0 1px 0 #56aeff20!important}
#app .card h2,#app .card h3{color:#ecf5ff;line-height:1.45}
#app .action:not(.quick-qualify){border:1px solid #316b9e;background:linear-gradient(#0b2e50,#06182e);color:#eef7ff;border-radius:15px;min-height:48px;font-family:inherit;line-height:1.4;box-shadow:inset 0 1px 0 #8abaff1a}
#app .action.primary{border-color:#198cdd;background:linear-gradient(145deg,#095389,#0b2f60);box-shadow:0 0 12px #178fff25}
#app .action.gold{border-color:#c99837;background:linear-gradient(145deg,#463112,#211b10);color:#ffda7c}
#app .action.red{border-color:#924153;background:linear-gradient(145deg,#3d1726,#240f1b);color:#ffb6c6}
#app .input{background:#041428!important;color:#eef6ff!important;font-size:16px!important;border-color:#386c99!important;border-radius:14px!important;min-width:0}
#app .input:focus{border-color:#22adff!important;box-shadow:0 0 0 3px #1385c51f!important}
#app .mode-card{background:linear-gradient(145deg,#0a2949,#041021)!important;border-radius:25px!important;border-color:#2eaaff;box-shadow:0 0 16px #178cff25!important;padding:24px 18px!important}
#app .mode-card.knockout{border-color:#d8aa50;box-shadow:0 0 16px #ebb95020!important}
#app .record-card.record-wide{border-radius:23px!important;background:linear-gradient(145deg,#0a2440,#041224)!important;box-shadow:0 0 18px #1785ff18!important;border-color:#3592ce!important}
#app .record-card.gold-record{border-color:#d3a341!important;background:linear-gradient(145deg,#25200f,#061427)!important;box-shadow:0 0 18px #b4822220!important}
#app .record-member{background:linear-gradient(145deg,#0a2440,#061628);border-color:#2a587e;border-radius:18px}
#app .record-member-head{border-bottom-color:#315878}
#app .record-filters{grid-template-columns:1fr 1fr!important;gap:10px!important}
#app .record-filters #search{grid-column:1/-1}
#app .record-filters select{font-size:16px!important;padding:12px 8px!important}
#app .record-date-field .input{font-size:14px!important}
#app .stat{border-radius:18px!important;background:linear-gradient(#0a223f,#06152b)!important;border-color:#2c608e!important;box-shadow:inset 0 1px 0 #58a6ec18!important}
#app .stat b{color:#ffd16b!important}#app .stat.green b{color:#74e3bb!important}
#app .notice{color:#a9bdd4;line-height:1.7}
#app .iconbtn{background:#092c4b;border:1px solid #29658f;border-radius:11px;min-height:36px;color:#e2f3ff}
#app .iconbtn.danger{color:#ff8ca7}
#app .footer{font-size:12px!important;letter-spacing:.3px!important;margin:26px 0 4px!important;color:#8fa4bf!important;line-height:1.5}
#app .footer b{color:#ffcf65}
#app .theme-chooser button{min-height:48px;border-radius:14px;background:#08203a;border-color:#33779f}
#app button:focus-visible{outline:2px solid #69d4ff;outline-offset:4px}
#app .menu-row:active{transform:translateY(1px)}
@media(max-width:520px){
 #app{max-width:460px!important;padding:16px 16px max(26px,env(safe-area-inset-bottom))!important}
 #app .home-showcase{padding-top:45px!important}
 #app .home-games{gap:68px!important;padding:0 10px!important}
 #app .home-game{border-radius:24px!important}
 #app .home-mark{width:205px!important;max-width:54vw!important;margin:-4px auto 8px!important}
 #app .home-channel{font-size:16px!important;padding:8px 19px!important;margin-bottom:13px!important}
 #app .home-title.home-title-svg{height:82px!important;min-height:82px!important;margin:0 -3px 17px!important}
 #app .title-copy{font-size:30px!important}
 #app .menu{padding:0 3px!important;gap:12px!important}
 #app .menu .menu-row{min-height:70px!important;padding:10px 16px!important;border-radius:23px!important;grid-template-columns:38px minmax(0,1fr) 16px!important;gap:8px!important}
 #app .menu .menu-row.menu-honor{min-height:61px!important}
 .menu-label{font-size:23px}.menu-icon{font-size:31px}
 #app .card{padding:15px!important;margin:13px 0!important}
 #app .page-brand{padding-top:36px!important}
 #app .page-brand img{width:138px!important;max-width:39vw!important}
 #app .page-brand .channel{font-size:15px!important}
 #app .title,#app .quick-title{font-size:26px!important}
 #app .challenge-head{padding-top:42px}
 #app .mini-back{top:0;right:0}
 #app .quick-tools .action{min-height:62px;padding:8px 3px}
 #app .quick-tools .action span{font-size:11px}
 #app .record-card.record-wide{grid-template-columns:96px 1fr;gap:13px;padding:12px}
 #app .record-copy b{font-size:22px!important}
 #app .record-visual{height:96px}
 #app .row>.input{flex:1 1 0;width:0}
}
@media(max-width:360px){
 #app{padding-left:12px!important;padding-right:12px!important}
 #app .home-games{gap:54px!important;padding:0 8px!important}
 #app .title-copy{font-size:26px!important}
 #app .home-channel{font-size:14px!important;padding:8px 14px!important}
 .menu-label{font-size:20px}
 #app .page-brand .channel{font-size:13px!important}
 #app .record-card.record-wide{grid-template-columns:80px 1fr}
 #app .record-copy b{font-size:19px!important}
}
body.light{background:linear-gradient(#dbe9f8,#edf4fc)!important;color:#122946}
body.light::before{opacity:.15}
body.light #app .card,body.light #app .mode-card,body.light #app .record-card.record-wide,body.light #app .record-member,body.light #app .stat{background:linear-gradient(#f8fbff,#e6eff9)!important;color:#15324d!important}
body.light #app .card h2,body.light #app .card h3,body.light #app .record-copy b{color:#173754!important}
body.light #app .input{background:#f5f9ff!important;color:#19334b!important}
body.light #app .notice,body.light #app .record-copy small{color:#4c6680!important}
body.light #app .stat b{color:#95691c!important}
body.light #app .title,body.light #app .quick-title{color:#885d12!important;text-shadow:none!important}

/* 9.32: simple home hierarchy — logo, channel, title, then actions. */
#app .home-showcase.home-simple{padding-top:20px!important;padding-bottom:0!important}
#app .home-simple .home-mark{width:250px!important;max-width:59vw!important;margin:0 auto 18px!important}
#app .home-simple .home-channel{margin:0 auto 20px!important}
#app .home-simple .home-title.home-title-svg{margin:0 0 40px!important}
@media(max-width:520px){
 #app .home-showcase.home-simple{padding-top:14px!important}
 #app .home-simple .home-mark{width:220px!important;max-width:59vw!important;margin:0 auto 18px!important}
 #app .home-simple .home-channel{margin:0 auto 18px!important}
 #app .home-simple .home-title.home-title-svg{margin:0 -3px 36px!important}
}

/* 9.34: opening screen matches the app with a single brand name. */
#splash{background:radial-gradient(ellipse at 50% 40%,#102c52 0,transparent 60%),#030d1d;isolation:isolate;padding:env(safe-area-inset-top) 24px env(safe-area-inset-bottom);overflow:hidden}
#splash::before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/ui-ribbons.svg') center / max(100vw,620px) 100vh no-repeat;opacity:.45}
#splash img{width:210px;max-width:55vw;height:auto;border-radius:0;filter:drop-shadow(0 0 22px #713eff50)}
#splash .brand{color:#ffcf64;font-size:clamp(22px,6vw,30px);letter-spacing:4px;margin-top:26px;text-align:center;direction:ltr;text-shadow:0 0 18px #f8bd2920}
#splash footer{bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px));font-size:12px;letter-spacing:.3px;text-align:center;direction:ltr}

/* 9.35: home settings on the right, with a higher logo. */
#app .settings-btn{left:auto!important;right:0!important}

/* 9.36: center the challenge system heading under the channel. */
#app .quick-title{text-align:center!important}

/* 9.37: larger and higher logo on challenge selection only. */
#app .page-brand.challenge-brand{padding-top:14px!important}
#app .page-brand.challenge-brand img{width:180px!important;max-width:48vw!important}
@media(max-width:520px){#app .page-brand.challenge-brand{padding-top:14px!important}#app .page-brand.challenge-brand img{width:175px!important;max-width:48vw!important}}

/* 9.38: compact challenge choices with readable descriptions. */
#app .challenge-modes{gap:14px;margin-top:14px}
#app .challenge-modes .mode-card{min-height:0!important;padding:16px 18px!important;border-radius:22px!important}
#app .challenge-modes .mode-icon{font-size:30px;margin-bottom:6px}
#app .challenge-modes .mode-card b{font-size:23px;line-height:1.4}
#app .challenge-modes .mode-card small{margin-top:6px;font-size:14px;line-height:1.5}

/* 9.39: avoid zero-width inputs in the add-player grid and respect iPhone inset. */
#app{padding-top:max(16px,env(safe-area-inset-top))!important}
#app .add-player-card .row{display:grid!important;grid-template-columns:minmax(0,1fr) 105px!important;gap:10px}
#app .add-player-card .row>.input{width:100%!important;min-width:0!important;padding:12px!important;font-size:16px!important}
#app .add-player-card .add-player-btn{width:100%;max-width:none;min-width:0;font-size:17px}
@media(max-width:360px){#app .add-player-card .row{grid-template-columns:minmax(0,1fr) 90px!important;gap:8px}}

/* 9.41: normal challenge spacing, compact rows, and clearer panels. */
#app .page-brand.normal-brand{padding-top:54px!important}
#app .quick-normal-page .participants .table th,#app .quick-normal-page .participants .table td{padding:6px 4px!important}
#app .quick-normal-page .participants .iconbtn{min-width:36px;min-height:36px;padding:6px}
#app .quick-normal-page .match-title-row{display:block;text-align:center;margin-bottom:12px}
#app .quick-normal-page .match-title-row h2{text-align:center}
#app .quick-normal-page .match-title-row small{display:block;margin:6px 0 0;line-height:1.5}
body:not(.light) #app .quick-normal-page .card{background:linear-gradient(145deg,#0a2340,#041122)!important}

/* 9.42: one labeled return control and compact normal challenge counters. */
#app .back.back-system{width:auto!important;min-width:90px!important;height:42px!important;padding:0 14px!important;border-color:#278bc4!important;border-radius:14px!important;font-size:15px!important;font-weight:800;background:linear-gradient(145deg,#0b2d4c,#06172b)!important;box-shadow:0 0 12px #168fff25}
#app .quick-normal-page .challenge-head{padding-top:0!important}
#app .quick-normal-page .stats{gap:10px}
#app .quick-normal-page .stat{padding:9px 10px!important;min-height:0!important;border-radius:16px!important}
#app .quick-normal-page .stat span{font-size:13px!important;line-height:1.4}
#app .quick-normal-page .stat b{font-size:24px!important;line-height:1.25}

/* 9.43: distinctive normal challenge heading. */
#app .quick-normal-page .challenge-head{margin:18px 0 22px;min-height:64px;padding:12px 18px!important;border:1px solid #299ddd;border-radius:18px;background:linear-gradient(135deg,#0b2c4c,#061427);box-shadow:0 0 14px #168fff20,inset 0 1px 0 #7cbfff22;border-bottom:2px solid #d2a243}
#app .quick-normal-page .challenge-head .quick-title{margin:0!important;font-size:26px!important;font-weight:800!important;line-height:1.4;color:#ffcf64!important;text-shadow:none!important}

/* 9.47: lighter header on the normal challenge page. */
#app .back.back-system{min-width:78px!important;height:36px!important;padding:0 10px!important;font-size:13px!important;border-radius:12px!important;box-shadow:none!important}
#app .page-brand.normal-brand{padding-top:40px!important;margin-bottom:8px!important}
#app .page-brand.normal-brand img{margin-bottom:4px!important}
#app .quick-normal-page .challenge-head{min-height:46px!important;margin:10px 0 14px!important;padding:8px 14px!important;border-radius:14px!important;border-bottom-width:1px!important;box-shadow:0 0 10px #168fff15!important}
#app .quick-normal-page .challenge-head .quick-title{font-size:22px!important;line-height:1.3!important}
#app .quick-normal-page .challenge-head .quick-title span{font-size:21px;vertical-align:middle}

/* 9.48: knockout setup follows the compact challenge layout. */
#app .knockout-page .challenge-head{border-color:#c99b43!important;background:linear-gradient(135deg,#172435,#071427)!important;box-shadow:0 0 12px #ffbb3220!important}
#app .knockout-page .challenge-head .quick-title{font-size:clamp(18px,5vw,22px)!important}

/* 9.49: clear round action and full-width automatic qualification. */
#app .page-brand.knockout-brand{padding-top:48px!important}
#app .ko-match.ko-bye{grid-template-columns:30px minmax(0,1fr)}
#app .ko-match.ko-bye .ko-player{text-align:center;padding:12px 36px}
#app .ko-actions .ko-next-round{grid-column:1/-1;min-height:56px}
@media(max-width:390px){#app .ko-match.ko-bye{grid-template-columns:25px minmax(0,1fr)}}

/* 9.50: compact champion form and game selection. */
#app .page-brand.honor-brand{padding-top:48px!important}
#app .honor-title-bar{margin:10px 0 14px;padding:9px 14px;border:1px solid #c99b43;border-radius:14px;background:linear-gradient(135deg,#172435,#071427)}
#app .honor-title-bar h1{margin:0!important;font-size:22px!important;line-height:1.3;text-align:center;color:#ffcf64}
#app .honor-page .card{padding:16px!important}
body:not(.light) #app .honor-page .card{background:linear-gradient(145deg,#0c2540,#061426)!important}
#app .honor-game-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
#app .honor-game-option{min-height:44px;border:1px solid #376b92;border-radius:12px;background:#071b30;color:#eaf3ff;font:inherit;font-weight:800;cursor:pointer}
#app .honor-game-option.selected{background:linear-gradient(135deg,#d59b25,#f2c85c);border-color:#ffda7c;color:#1b170d;box-shadow:0 0 12px #edb84422}
#app .honor-page .honor-save{display:block;width:100%;min-height:44px;margin-top:10px}
#app .honor-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
#app .honor-secondary-actions .action{min-height:40px!important;padding:8px 12px!important;font-size:15px!important}

/* 9.52: compact, equal champion record menu cards. */
#app .page-brand.records-brand{padding-top:48px!important}
#app .records-title-bar{margin:10px 0 14px;padding:9px 14px;border:1px solid #c99b43;border-radius:14px;background:linear-gradient(135deg,#172435,#071427)}
#app .records-title-bar h1{margin:0!important;font-size:22px!important;line-height:1.3;text-align:center;color:#ffcf64}
#app .records-menu-page .records-vertical{gap:12px!important;grid-auto-rows:1fr}
#app .records-menu-page .record-wide{grid-template-columns:76px minmax(0,1fr)!important;min-height:106px!important;gap:12px!important;padding:12px!important;border-radius:18px!important}
#app .records-menu-page .record-visual{height:76px!important;border-radius:14px}
#app .records-menu-page .record-copy b{font-size:21px!important}
#app .records-menu-page .record-copy small{font-size:12px!important;line-height:1.55;margin-top:5px}
#app .records-menu-page .record-wide.gold-record{border-color:#c99b43!important;background:linear-gradient(135deg,#272311,#07172b)!important}
@media(max-width:360px){#app .records-menu-page .record-wide{grid-template-columns:64px minmax(0,1fr)!important}#app .records-menu-page .record-visual{height:64px!important}#app .records-menu-page .record-copy b{font-size:19px!important}}

/* 9.53: records open with search and a collapsed result form. */
#app .record-detail-page .records-title-bar h1{font-size:clamp(18px,5vw,22px)!important}
#app .record-detail-page .card{padding:16px!important}
body:not(.light) #app .record-detail-page .card,body:not(.light) #app .record-detail-page .record-member{background:linear-gradient(145deg,#0c2540,#061426)!important}
#app .record-add-panel>summary{cursor:pointer;color:#ffcf64;font-weight:800;font-size:17px;min-height:32px;line-height:32px}
#app .record-add-panel[open]>summary{margin-bottom:14px}
#app .record-add-panel .record-form-grid{gap:10px}
#app .record-detail-page .notice{font-size:12px!important;line-height:1.6}

/* 9.54: concise settings with clear theme selection. */
#app .page-brand.settings-brand{padding-top:48px!important}
#app .settings-page .card{padding:16px!important;margin-bottom:12px!important}
body:not(.light) #app .settings-page .card{background:linear-gradient(145deg,#0c2540,#061426)!important}
#app .settings-page h2{font-size:20px!important;margin:0 0 14px!important}
#app .settings-page .notice{font-size:13px!important;line-height:1.6;margin:12px 0}
#app .settings-page .theme-chooser{gap:8px}
#app .settings-page .theme-chooser button{min-height:44px!important;padding:8px 6px!important;font-size:14px!important}
#app .settings-page .theme-chooser button.selected{background:linear-gradient(135deg,#d59b25,#f2c85c)!important;border-color:#ffda7c!important;color:#1b170d!important;font-weight:800;box-shadow:0 0 12px #edb84422}
#app .settings-page .backup-summary{gap:8px!important;margin:12px 0!important}
#app .settings-page .backup-summary span{padding:9px 8px!important;font-size:13px!important;border-radius:12px!important}
#app .settings-page .bigbtn{min-height:48px!important;padding:10px 12px!important;font-size:18px!important;border-radius:14px!important}
#app .settings-page .backup-help{padding:10px 0;border-top:1px solid #315271;color:#a9bfd4;font-size:13px}
#app .settings-page .backup-help summary{cursor:pointer;min-height:30px;line-height:30px}
#app .settings-sync{text-align:center;padding:13px;border:1px solid #315271;border-radius:14px;font-size:14px;color:#a9bfd4;background:#071b30}
#app .settings-version{text-align:center;font-size:12px;color:#91a6c0;margin:16px 0 8px}

/* 9.55: allow the last controls to scroll clear of mobile browser chrome. */
@media (max-width: 640px) {
 #app {padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px))!important}
 html {scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px))}
}
@media (max-width: 640px) and (display-mode: standalone) {
 #app {padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px))!important}
 html {scroll-padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px))}
}

/* 9.56: one brand header for every app page, including home. */
#app #view .page-brand,
#app #view .home-showcase.home-simple {
 display:flex!important;flex-direction:column!important;align-items:center!important;
 padding-top:28px!important;padding-bottom:0!important;gap:0!important;
 margin-bottom:14px!important;
}
#app #view .page-brand img,
#app #view .home-simple .home-mark {
 display:block!important;width:140px!important;max-width:38vw!important;
 height:auto!important;margin:0 auto 9px!important;
}
#app #view .page-brand .channel,
#app #view .home-simple .home-channel {
 font-size:16px!important;padding:7px 20px!important;margin:0 auto!important;
 max-width:100%!important;white-space:nowrap!important;
}
#app #view .home-simple .home-title {width:100%!important;margin-top:14px!important}
@media(max-width:520px) {
 #app #view .page-brand .channel,
 #app #view .home-simple .home-channel {font-size:15px!important}
}
@media(max-width:360px) {
 #app #view .page-brand .channel,
 #app #view .home-simple .home-channel {font-size:13px!important;padding:7px 14px!important}
}

/* 9.57: readable challenge mode labels on the daytime cards. */
body.light #app .mode-card b {color:#173754!important;text-shadow:none!important}
body.light #app .mode-card.knockout b {color:#885d12!important}
body.light #app .mode-card small {color:#4c6680!important}

/* 9.58: distinct neon accents for the three home actions. */
#app .menu .menu-row:not(.menu-honor):not(.menu-gold) {
 background:radial-gradient(ellipse at 20% 0,#0a325455,transparent 65%),linear-gradient(#031328,#020c1d) padding-box,linear-gradient(105deg,#02d4ff,#1989ff) border-box!important;
}
#app .menu .menu-row.menu-honor {
 border-color:transparent!important;
 background:radial-gradient(ellipse at 20% 0,#51249c22,transparent 65%),linear-gradient(#0b213b,#061225) padding-box,linear-gradient(105deg,#1989ff,#8957ff,#c644ff) border-box!important;
 box-shadow:0 0 9px #8957ff70,0 0 24px #7939ff30,inset 0 0 18px #7439ff12!important;
}

/* 9.59: league setup, standings and fixtures. */
#app .mode-card.league{border-color:#57e2b1!important;box-shadow:0 0 16px #57e2b125!important}
#app .mode-card.league b{color:#57e2b1}
body.light #app .mode-card.league b{color:#16654c!important}
#app .league-page .card{margin-bottom:14px}
#app .league-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#app .league-mode .selected{background:linear-gradient(135deg,#d59b25,#f2c85c)!important;color:#1b170d!important;border-color:#ffda7c!important}
#app .league-table-wrap{overflow-x:auto;width:100%;margin:12px 0}
#app .league-table{width:100%;font-size:13px;table-layout:fixed}
#app .league-table th,#app .league-table td{padding:11px 4px;text-align:center}
#app .league-table th:nth-child(2),#app .league-table td:nth-child(2){width:35%;text-align:right;overflow-wrap:anywhere}
#app .league-table .league-points{color:#ffcf64;font-weight:900}
#app .league-bulk{margin-top:16px;color:#a9bfd4}
#app .league-bulk textarea{width:100%;margin:12px 0}
#app .league-bulk summary,#app .league-stage>summary{cursor:pointer;padding:8px 0;line-height:1.6;font-weight:800}
#app .league-wide{width:100%;margin-top:12px}
#app .league-tools{display:flex;gap:10px;margin-top:14px}
#app .league-tools button{flex:1}
#app .league-round{color:#ffcf64;font-size:16px;margin:16px 0 10px}
#app .league-match{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) 28px minmax(0,1fr);gap:5px;align-items:center;margin:10px 0;padding-bottom:0}
#app .league-match .ko-player{overflow-wrap:anywhere;min-width:0;font-size:15px}
#app .league-match .ko-player small{font-size:10px}
#app .league-match-number{color:#ffcf64;text-align:center;font-size:12px}
body.light #app .league-table,body.light #app .league-bulk{color:#173754}
body.light #app .league-table .league-points,body.light #app .league-round,body.light #app .league-match-number{color:#885d12}
.league-export{position:absolute;left:-10000px;top:0;width:680px;background:#061426;color:#fff;padding:36px;text-align:center}
.league-export>img{width:140px;height:auto}.league-export h1,.league-export h2{color:#ffcf64}
.league-export .league-table{width:100%;border-collapse:collapse;font-size:19px}
.league-export .league-table th,.league-export .league-table td{padding:14px 8px;border-bottom:1px solid #315273;overflow-wrap:anywhere}
.league-export .league-points{color:#ffcf64;font-weight:900}.league-export footer{margin-top:26px;color:#a9bfd4}

/* 9.60: a prominent league entry and a polished mobile setup. */
#app .challenge-modes .mode-card.league{position:relative;border-width:2px!important;background:radial-gradient(ellipse at 50% 0,#1b715337,transparent 65%),linear-gradient(145deg,#0b2942,#041021)!important;box-shadow:0 0 18px #57e2b12b,inset 0 0 26px #57e2b108!important;padding:22px 18px!important}
#app .challenge-modes .mode-card.league b{font-size:32px!important;font-weight:900;letter-spacing:.2px;text-shadow:0 0 16px #57e2b130}
#app .league-mode-badges{display:flex;justify-content:center;gap:8px;margin:12px 0}
#app .league-mode-badges>span{font-size:12px;border:1px solid #57e2b14f;border-radius:20px;padding:5px 14px;color:#c9f9e8;background:#163d3440}
#app .league-title-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px!important;border-color:#57e2b180!important;box-shadow:0 0 18px #57e2b11c}
#app .league-title-icon{font-size:32px;line-height:1;margin-bottom:8px}
#app .league-title-bar h1{font-size:32px!important;font-weight:900!important;margin:0!important}
#app .league-title-bar p{font-size:12px;color:#a9bfd4;margin:8px 0 0}
#app .league-page .card{padding:18px!important;border-radius:24px!important}
#app .league-page .card h2{font-size:21px!important;line-height:1.5;margin:0 0 16px}
#app .league-mode button{min-height:76px;padding:12px 8px!important;font-size:19px!important;font-weight:800;border-radius:17px}
#app .league-mode button small{display:block;font-size:11px;line-height:1.5;margin-top:6px;color:#a9bfd4;font-weight:500}
#app .league-mode .selected small{color:#43310d}
#app .league-scoring{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:16px 0 0}
#app .league-scoring>span{font-size:12px;background:#071b30;border:1px solid #315271;border-radius:12px;padding:7px 9px;color:#a9bfd4}
#app .league-scoring b{color:#ffcf64;font-size:16px}
#app .league-count{display:inline-grid;place-items:center;min-width:34px;height:30px;padding:0 7px;background:#57e2b115;border:1px solid #57e2b155;border-radius:10px;color:#57e2b1;font-size:17px}
#app .league-participants-card>.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
#app .league-participants-card>.row .input{width:100%;min-width:0}
#app .league-participants-card>.row button{padding:10px 16px;font-size:16px;min-height:48px}
#app .league-bulk{font-size:13px;border-bottom:1px solid #315271;padding-bottom:10px}
#app .league-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 10px;text-align:center;color:#a9bfd4}
#app .league-empty>span{font-size:30px;opacity:.7}
#app .league-empty>b{font-size:16px;color:#dcecff}
#app .league-empty>small{font-size:12px}
#app .league-page .notice{font-size:12px!important;line-height:1.8}
#app .league-tools button{font-size:14px;padding:11px 8px;min-height:46px}
body.light #app .challenge-modes .mode-card.league{background:linear-gradient(#f8fbff,#e6eff9)!important}
body.light #app .league-mode-badges>span,body.light #app .league-count{color:#16654c;background:#e0f5ec;border-color:#91c8b1}
body.light #app .league-title-bar p,body.light #app .league-mode button:not(.selected) small,body.light #app .league-empty,body.light #app .league-empty>b{color:#4c6680}
body.light #app .league-scoring>span{background:#e6eff9;color:#173754;border-color:#afc4d8}
body.light #app .league-scoring b{color:#885d12}
.league-matches-export .league-export-brand{font-size:19px;color:#dcecff;margin:14px 0}
.league-matches-export .league-export-brand b{color:#ffcf64}
.league-matches-export h1{font-size:34px;margin:18px 0 10px}
.league-matches-export>p{font-size:18px;color:#a9bfd4}
.league-export-match{padding:16px;margin:14px 0;border:1px solid #315271;border-radius:18px;background:#0b1e38}
.league-export-caption{font-size:15px;color:#a9bfd4;margin-bottom:12px}
.league-export-pair{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:9px;align-items:center}
.league-export-pair>div{font-size:22px;font-weight:800;overflow-wrap:anywhere;padding:14px 8px;border:1px solid #238de4;border-radius:12px;background:#07182e;color:#fff}
.league-export-pair>span{color:#57e2b1;font-size:18px;font-weight:900}
.league-export-pair>div.selected{border-color:#e9b447;background:#322913;color:#ffcf64}
.league-export-pair small{display:block;font-size:13px;margin-top:6px;color:#ffcf64}
.league-export-pending{font-size:13px;color:#a9bfd4;margin:12px 0 0}