/* Modern cobalt and lime theme — approved reference. Shared by the hub and Khammini. */
@font-face{font-family:Tajawal;src:url('/assets/fonts/tajawal-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Tajawal;src:url('/assets/fonts/tajawal-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Tajawal;src:url('/assets/fonts/tajawal-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Tajawal;src:url('/assets/fonts/tajawal-800.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:Tajawal;src:url('/assets/fonts/tajawal-900.ttf') format('truetype');font-weight:900;font-display:swap}
:root{color-scheme:light;--bg:#fafafd;--surface:#fff;--surface2:#eceef9;--line:#d7dae6;--text:#191d2f;--muted:#606475;--teal:#0d2ed2;--purple:#0d2ed2;--gold:#3c5bf3;--pink:#b93643;--orange:#1439f0;--soft:#eff0f9;font-family:Tajawal,Tahoma,sans-serif;font-size:16px}
body{margin:0;color:var(--text);background:radial-gradient(ellipse at 35% 0,#d9ddf280,transparent 35%),var(--bg);font-weight:500;line-height:1.65}button,input,select{font-family:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:var(--teal)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0d2dcb;outline-offset:3px}::selection{background:#a8b5f9;color:#191d2f}
.top{max-width:1460px;margin:auto;padding:23px 34px 15px;border:0;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{font-size:29px;line-height:1;font-weight:900;color:#191d2f;gap:10px;letter-spacing:-.6px}.brand b{color:#191d2f}.brand small{display:block;font-size:12px;font-weight:500;line-height:1.8;letter-spacing:0;color:#626b9a;text-align:center;margin-top:5px}.mark{position:relative;width:47px;height:52px;background:transparent;transform:none;box-shadow:none;flex-shrink:0;margin-left:3px}.mark i{position:absolute;top:22px;width:23px;height:31px;background:#2d4ef2;border-radius:20px 20px 7px 20px;transform:rotate(-28deg);left:6px}.mark i:nth-child(2){left:24px;transform:rotate(28deg);background:#5872f4;border-radius:20px 20px 20px 7px}.mark i:before{content:'';position:absolute;top:-18px;left:7px;width:12px;height:12px;border-radius:50%;background:inherit}.top-nav{display:flex;align-items:center;gap:25px;margin-left:auto;margin-right:35px}.top-nav a,.top-nav button{color:#191d2f;background:none;text-decoration:none;font-size:16px;font-weight:700;padding:8px 2px;min-height:44px}.top-nav a{border-right:1px solid #a6abc7;padding-right:25px}.top-nav a:hover,.top-nav button:hover{color:var(--orange)}.top-note{color:#505881;font-size:14px;display:flex;align-items:center;gap:17px}.top-note:before{content:'';height:1px;width:55px;background:#7d85ad}.top>.pill{color:#495074;border-color:#bdc1d6;font-size:14px;text-decoration:none}
.app-main{max-width:1460px;padding:0 34px;margin:8px auto 0;min-height:65vh}.intro-head{display:grid;grid-template-columns:1.08fr 1fr;gap:25px;align-items:center;text-align:right;padding:20px 0 33px;min-height:295px;margin:0 0 25px;position:relative}.hero-copy{min-width:0;position:relative;z-index:2;padding:6px 0}.intro-head .kicker{background:none;border:0;border-radius:0;padding:0;margin-bottom:9px;display:block;font-size:12px;font-weight:700;color:#606999}.intro-head h1{font-size:clamp(40px,4.15vw,66px);font-weight:900;line-height:1.35;color:#151828;letter-spacing:-1.8px;margin:0;max-width:none}.intro-head h1 em{font-style:normal;color:inherit}.intro-head p{font-size:clamp(17px,1.8vw,25px);font-weight:700;color:#525a80;line-height:1.8;margin:12px 0 27px}.hero-stats{display:flex;align-items:center;gap:0;margin:0;color:#464d71;font-size:15px}.hero-stats>span{display:flex;align-items:center;gap:7px;padding:0 24px;border-left:1px solid #c6c9db;white-space:nowrap}.hero-stats>span:first-child{padding-right:0}.hero-stats>span:last-child{border-left:0;padding-left:0}.hero-stats b{font-size:23px;font-weight:800;color:#282e4b}.stat-icon{font-size:30px;color:var(--orange);font-style:normal;line-height:1;margin-left:2px}
.cover-art{display:block;width:100%;height:100%;overflow:hidden}.hero-fan{height:267px;position:relative;direction:ltr;width:100%;max-width:590px;justify-self:center;isolation:isolate}.hero-fan:before{content:'';position:absolute;inset:38% -3% -6%;background:radial-gradient(ellipse,#6d84f655,transparent 70%);z-index:-1}.fan-card{position:absolute;width:25%;height:77%;top:15%;overflow:hidden;border:2px solid #eceef8;border-radius:12px;background:#bdc7fb;box-shadow:0 13px 20px #2a304d25;transform-origin:50% 80%}.fan-card .cover-art{height:100%;position:absolute;inset:0}.fan-card span{position:absolute;bottom:0;left:0;right:0;padding:35px 5px 12px;background:linear-gradient(transparent,#141725ba);font-size:13px;font-weight:800;color:#fff;text-align:center;direction:rtl;line-height:1.4}.fan-0{left:1%;top:22%;height:68%;transform:rotate(-13deg);z-index:1}.fan-1{left:16%;transform:rotate(-6deg);z-index:2}.fan-2{left:32%;top:2%;height:92%;transform:rotate(3deg);z-index:6;border-color:#fff}.fan-3{left:49%;top:12%;transform:rotate(9deg);z-index:5}.fan-4{left:64%;top:21%;height:70%;transform:rotate(6deg);z-index:3}.fan-5{left:78%;top:34%;height:55%;width:20%;transform:rotate(11deg);z-index:1}
.setup{border:0;border-radius:0;background:none;box-shadow:none;padding:0;max-width:none}.setup-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:28px;align-items:start}.category-panel{min-width:0}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:3px 0 16px}.setup h2{font-size:29px;color:#191d2f;margin:0;line-height:1.5;font-weight:800;letter-spacing:-.5px}.section-heading p{font-size:14px;color:var(--muted);margin:2px 0 0}.category-total{font-size:12px;color:#0c2abe;background:#e5e8f6;border:1px solid #d2d5e3;padding:5px 10px;border-radius:20px;white-space:nowrap}.category-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}.filter{border:1px solid transparent;border-radius:11px;background:#e9eaf0;color:#616370;font-size:14px;font-weight:700;padding:8px 21px;min-height:42px}.filter:hover{background:#dbdff2;color:#0a2197}.filter.active{background:var(--orange);border-color:var(--orange);color:white}.category-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.category{border:1px solid #d7d9e5;border-radius:12px;background:#fff;text-align:center;color:#191d2f;box-shadow:0 2px 5px #21263e05;transition:transform .17s,border-color .17s,box-shadow .17s;padding:0;overflow:hidden;min-width:0;position:relative}.category:hover{transform:translateY(-3px);border-color:#6d84f6;box-shadow:0 7px 19px #3c425f12}.category.active{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange);background:#f8f8fc;transform:none}.category-art{height:auto;aspect-ratio:16/9;width:100%;margin:0;background:#c2cbfb;border-radius:0;overflow:hidden}.category-copy{padding:8px 8px 9px}.category b{font-size:18px;font-weight:800;line-height:1.5;color:#191d2f;padding:0;display:block}.category small{font-size:13px;color:#696d82;padding:1px 0 0;display:block}.category small span{display:none}.category.active:after{top:10px;left:10px;background:var(--orange);border:2px solid white;color:#fff;width:23px;height:23px;font-size:12px}.new-category{display:none}
.settings-panel{position:sticky;top:20px;background:#fff;border:1px solid #d8dbe7;border-radius:18px;box-shadow:0 8px 25px #30375a10;padding:21px;min-width:0;scroll-margin-top:18px}.tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;gap:0;margin:0 0 25px;background:#ecedf2;border:1px solid #dee0e9;border-radius:11px;width:100%}.tab{font-size:16px;font-weight:700;border-radius:8px;min-height:45px;padding:8px 9px;color:#4f5365;background:none;white-space:nowrap}.tab.active{background:var(--orange);color:white;box-shadow:0 3px 7px #0d2bc51a}.field,.settings-panel .field{color:#242a44;font-size:15px;font-weight:700;margin:0 0 18px}input,select{background:#fff;border:1px solid #cccfde;color:#242a44;border-radius:9px;padding:11px 12px;font-size:16px;min-height:47px}input::placeholder{color:#8b8fa3;font-size:14px}input:hover,select:hover{border-color:#9da3c1}.selected-category{display:flex;align-items:center;gap:10px;border:1px solid #d9ddf0;background:#f9fafd;border-radius:9px;padding:8px;margin-top:1px}.selected-category .cover-art{width:55px;height:40px;border-radius:5px;flex-shrink:0}.selected-category small{font-size:11px;color:#646b8d}.selected-category b{font-size:14px;line-height:1.5;color:#373d59;margin:2px 0 0}.difficulty-field{border:0;margin:20px 0 0;padding:0;min-width:0}.difficulty-field legend{font-size:15px;color:#242a44;font-weight:700;margin-bottom:9px}.difficulty-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.difficulty-choice span{border:1px solid #d5d7e2;border-radius:9px;background:#fcfbfa;min-height:51px;padding:9px 4px;display:flex;flex-direction:row;gap:6px;align-items:center;justify-content:center}.difficulty-choice span:before{content:'';border:1.5px solid #9195a7;border-radius:50%;height:13px;width:13px;box-sizing:border-box;flex-shrink:0}.difficulty-choice b{font-size:15px;font-weight:500;color:#575c72}.difficulty-choice small{display:none}.difficulty-choice input:checked+span{border-color:var(--orange);background:#f0f2fa;box-shadow:none}.difficulty-choice input:checked+span:before{border:4px solid var(--orange);background:white}.difficulty-choice input:checked+span b{color:#0a2197;font-weight:700}.difficulty-choice input:focus-visible+span{outline:3px solid #0d2dcb;outline-offset:3px}.difficulty-summary{font-size:11px;color:#6d728b;line-height:1.7;min-height:0;margin:9px 0 0}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.two-fields label{font-size:14px;color:#242a44;font-weight:700}.two-fields select{font-size:15px;padding:9px 10px;min-height:47px}
.btn,button.btn,a.btn{background:var(--orange);border:1px solid var(--orange);color:#fff;font-size:16px;font-weight:800;min-height:49px;padding:11px 18px;border-radius:10px;gap:10px;box-shadow:none}.btn:hover{background:#0e31dd;border-color:#0e31dd}.setup .btn.full{font-size:19px;min-height:54px;border-radius:10px;box-shadow:0 4px 9px #0d2ed012}.setup .btn.full span{font-size:15px}.setup-tip{font-size:11px;text-align:center;color:#6c7291;margin:13px 0 0}.btn.secondary{background:#eaedf8;color:#0c29ba;border-color:#a8b5f9}.btn.outline{background:transparent;color:#4c5379;border-color:#bcc0d5}.btn.outline:hover{background:#e7eaf7}.btn.danger{background:#fae6e7;color:#a72d3b;border-color:#e9bbc0}.step-label{color:#5f6998;font-size:12px}.join-panel{max-width:430px;margin:0 auto 30px;border:1px solid #d8dbe7;background:#fff;box-shadow:0 8px 25px #30375a10;padding:27px;border-radius:18px}.join-panel h2{font-size:31px;margin:7px 0 22px}.join-panel .field{font-size:15px}.code-input{font-size:27px}.text-button{color:#545c85;font-size:13px}.notice{color:#4d547a;border-color:#ced1e1;background:#eff0f9;font-size:14px}.notice.error,.error-inline{color:#a72d3b}.notice.error{background:#f4f5fb;border-color:#e7bac0}.small,.muted{color:var(--muted)}.how-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;margin:34px 0 21px}.how-strip span{font-size:13px;color:#61688a;background:none;border:0;padding:0;display:flex;align-items:center;gap:8px}.how-strip b{display:grid;place-items:center;color:#5d6695;background:#dde1f3;border:0;font-size:12px;width:25px;height:25px;border-radius:50%}.closing-note{text-align:center;font-size:25px;color:#565f8a;margin:25px 0 0;font-weight:500}.mobile-continue{display:none}
/* In-room surfaces follow the same colors; game rules and card assets are shared. */
.room-head h1{color:#0d2cc9;font-size:34px}.room-head p{font-size:15px;color:#525a80}.room-head .btn{font-size:13px}.difficulty-badge{color:#0c2abe;background:#dde1f3;border:1px solid #a1b0f9;border-radius:7px;padding:1px 7px}.lobby-panel{background:#fff;border-color:#cdd0df;border-radius:20px}.room-code{color:#0e31e0}.player{background:#f5f6fc;border-color:#d5d7e4}.avatar{background:#e3e6f5;border-color:#a0aff9;color:#0e2fd7}.player:nth-child(2) .avatar{background:#eef2df;border-color:#d8debc;color:#69763c}.player b{font-size:19px}.player small{font-size:13px}.status-ready,.ready-wait{color:#617b30!important}.ready-note{font-size:14px}.share-row .btn{font-size:15px}.score{background:#fff;border-color:#d5d7e4}.score span{font-size:15px}.score b{color:#0e31e1}.score.second b{color:#7b843d}.vs{color:#636a8a}.play-meta{font-size:14px}.round-clock{background:#e7e9f6;border:1px solid #bdc1d5;color:#0c29bc;font-size:27px}.secret-stage{background:#fff;border-color:#c3c7da;border-radius:20px;box-shadow:0 8px 25px #2d345411}.secret-stage:before{background:linear-gradient(90deg,#7b90f7,var(--orange));height:4px}.secret-stage p{color:#5d6488;font-size:15px}.secret-stage h2{font-size:29px}.secret-caption{color:#0d2cc9!important}.secret-answer{font-size:39px;color:#252a44}.shield,.big-count{color:#0f32e4}.card-credit{font-size:11px!important;opacity:1}.play-warning{font-size:13px}.play-actions .btn{font-size:13px}.answer-mini,.summary-list{background:#fff;border-color:#cdd0df}.answer-mini small{font-size:13px;color:#636a8a}.answer-mini b{font-size:20px}.result-head .result-symbol{color:#1b3ef0}.result-head h2{font-size:32px}.result-head p{font-size:15px}.summary-row{font-size:15px}.summary-row b{color:#0d2cca}.result-actions .btn{font-size:16px}dialog{background:#f9fafd;color:#252a44;border-color:#bbc0d5}dialog::backdrop{background:#181c2db8;backdrop-filter:blur(5px)}.modal-head{border-color:#d5d7e4}.modal-head h2{font-size:24px}.modal-head button{background:#dbdff2;color:#464d71}#modal-body{font-size:16px}.toast{background:#292f4c;color:#fff;font-size:15px}.credit-page p{color:#585e7e;font-size:16px}.source-list{font-size:14px}#connection:not(:empty){background:#e2e5f5;color:#0a24a2;border-color:#8a9df8}.loader{border-color:#b4c0fa;border-top-color:var(--orange)}
/* Warm illustration at the bottom leaves the navigation links readable. */
footer{max-width:1460px;position:relative;margin:15px auto 0;padding:70px 34px 29px;border:0;font-size:12px;color:#5c6592;background:url('/assets/warm-footer.svg') center bottom/100% 150px no-repeat}footer:before{content:'';position:absolute;top:0;right:2%;left:2%;height:1px;background:linear-gradient(90deg,transparent,#bdc1d5,transparent)}footer small{font-size:11px}footer a,footer .text-button{color:#555e88}footer>span:first-child{font-weight:700}
/* The home page uses the same theme. */
.hub{max-width:1260px;margin:36px auto 0;padding:0 30px}.eyebrow{color:#5c6593;font-size:14px}.hub h1{font-size:clamp(43px,5.4vw,74px);line-height:1.2;font-weight:900;color:#1b1f33;letter-spacing:-1px;margin:18px 0}.hub h1 em{color:#0f32e5}.hub>.intro{font-size:18px;color:#555e88;margin-bottom:35px}.game-stack{display:grid;grid-template-columns:1fr 1fr;gap:25px}.game{flex-direction:column;align-items:stretch;border:1px solid #cdd0df;border-radius:21px;background:#f5f6fb;color:#252a44;padding:28px;box-shadow:0 6px 25px #2a304d0a;gap:15px}.game:hover{border-color:#687ff5;box-shadow:0 9px 27px #2a304d15}.guess-game{background:#ebedf8}.game h2,.guess-game h2{color:#252a44;font-size:38px}.game p{font-size:16px;color:#555e89}.game .mini-label{font-size:13px;color:#555e88}.game .new{color:#0c2bc2;background:#b1bdfa}.game .tags span{font-size:12px;background:#fff9;color:#555e88;border-color:#cfd2e1}.game .enter,.guess-game .enter{background:var(--orange);color:#fff;font-size:17px;min-height:49px}.game-art{width:100%;height:190px;margin:0}.game-art>img{width:100%;height:100%;object-fit:contain}.phones-art{width:225px;margin:auto}.phone{border:2px solid #858db3!important;box-shadow:0 10px 15px #2b325120}.phone.back{background:#90a1f8;color:#4e567c}.phone.front{background:#eef0f9}.phone .face,.phone span{color:#474e72}.spark{color:#2648f1}.hub-note{color:#5b6491;font-size:13px}.update{color:#474e72;background:#e7eaf7;border-color:#bbbfd4}.update button{color:#0d2dcd}
@media(min-width:1600px){.top,.app-main,footer{max-width:1530px}.intro-head{min-height:320px}.intro-head h1{font-size:67px}.hero-fan{height:290px}.setup-layout{grid-template-columns:minmax(0,1fr) 390px;gap:32px}.settings-panel{padding:25px}.category-copy{padding:10px}.category b{font-size:21px}}
@media(max-width:1180px){.top,.app-main{padding-left:26px;padding-right:26px}.top-note{display:none}.top-nav{margin-right:auto;margin-left:0}.intro-head{gap:20px;min-height:255px;padding:15px 0 28px}.intro-head h1{font-size:46px}.intro-head p{font-size:20px;margin-bottom:20px}.hero-fan{height:225px}.hero-stats{font-size:13px}.hero-stats>span{padding:0 14px}.hero-stats b{font-size:21px}.stat-icon{font-size:24px}.setup-layout{grid-template-columns:minmax(0,1fr) 315px;gap:22px}.settings-panel{padding:18px}.category-list{gap:13px}.category b{font-size:16px}.category small{font-size:12px}.section-heading h2{font-size:26px}.category-total{display:none}.difficulty-choice b{font-size:14px}.fan-card span{font-size:11px}.filter{padding:8px 18px}}
@media(max-width:950px){.intro-head h1{font-size:39px}.intro-head p{font-size:17px}.hero-stats>span{padding:0 10px;gap:5px}.hero-stats{font-size:12px}.hero-stats b{font-size:19px}.stat-icon{display:none}.hero-fan{height:210px}.setup-layout{grid-template-columns:minmax(0,1fr) 285px;gap:18px}.category-list{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-panel{padding:16px}.tab{font-size:14px}.filter{font-size:13px;padding:7px 13px}.two-fields select{font-size:16px;padding:8px}.difficulty-choice span{gap:5px}.fan-card span{font-size:10px}.game-stack{gap:18px}.game{padding:23px}}
@media(max-width:740px){.top{padding:16px 20px}.brand{font-size:24px}.brand small{font-size:10px}.mark{transform:scale(.85);transform-origin:right center;width:43px}.top-nav{gap:15px}.top-nav a,.top-nav button{font-size:13px}.top-nav a{padding-right:15px}.app-main{padding:0 20px;margin:0 auto}.intro-head{grid-template-columns:1fr;gap:10px;padding:17px 0 27px;margin-bottom:5px;text-align:center}.hero-copy{order:0}.intro-head .kicker{font-size:11px;margin-bottom:4px}.intro-head h1{font-size:clamp(34px,6vw,45px);letter-spacing:-1px}.intro-head p{font-size:17px;margin:6px 0 13px}.hero-stats{justify-content:center;font-size:13px}.hero-stats>span{padding:0 17px}.hero-stats b{font-size:21px}.hero-fan{order:1;width:min(100%,460px);height:220px;margin-top:3px}.fan-card span{font-size:12px}.setup-layout{grid-template-columns:1fr;gap:26px}.settings-panel{position:static;max-width:none;padding:25px}.category-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.section-heading{margin-bottom:13px}.section-heading h2{font-size:27px}.section-heading p{font-size:13px}.category-total{display:block;font-size:11px;padding:4px 8px}.category-filters{gap:7px;margin-bottom:16px}.filter{font-size:14px;padding:8px 19px;min-height:42px}.category b{font-size:16px}.category-copy{padding:8px 5px}.tabs{margin-bottom:22px}.tab{font-size:16px}.difficulty-choice span{min-height:53px}.difficulty-choice b{font-size:16px}.difficulty-summary{font-size:12px}.two-fields label,.field,.settings-panel .field{font-size:15px}.two-fields select{font-size:16px}.setup .btn.full{min-height:53px}.setup-tip{font-size:12px}.how-strip{gap:15px;margin:27px 0 18px}.how-strip span{font-size:11px;gap:6px}.closing-note{font-size:23px;margin-top:20px}.mobile-continue{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:20px;right:20px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid #c4c8da;border-radius:14px;box-shadow:0 7px 30px #292f4c26;background:#f8f8fc;color:#373d58}.mobile-continue small{display:block;font-size:10px;color:#6a73a1}.mobile-continue b{display:block;font-size:14px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-continue .btn{font-size:14px;min-height:44px;padding:9px 14px}.room-head h1{font-size:31px}.room-head p{font-size:13px}.room-head .btn{font-size:12px;flex-shrink:0}.lobby-panel{padding:23px 18px}.player b{font-size:17px}.player small,.ready-note{font-size:12px}.notice{font-size:13px}.share-row .btn{font-size:13px}.secret-stage h2{font-size:27px}.secret-stage p{font-size:14px}.secret-answer{font-size:32px}.play-meta{font-size:12px}.play-actions .btn{font-size:12px}.play-warning{font-size:12px}.answer-mini b{font-size:17px}.answer-mini small{font-size:12px}.score span{font-size:13px}.result-head h2{font-size:28px}.result-head p{font-size:14px}.hub{padding:0 22px;margin-top:28px}.hub h1{font-size:53px}.hub>.intro{font-size:16px}.game-stack{grid-template-columns:1fr}.game{flex-direction:row-reverse;align-items:center;padding:26px;gap:20px}.game-art{width:180px;height:190px;flex-shrink:0}.game h2,.guess-game h2{font-size:33px}.game p{font-size:15px}.game .mini-label{font-size:12px}.game .tags span{font-size:11px}.game .enter{font-size:15px}.game-art>img{width:100%}footer{padding:65px 20px 25px;font-size:12px}body:has(.mobile-continue) footer{padding-bottom:105px}}
@media(max-width:480px){.top{padding:13px 16px;gap:10px}.brand{font-size:22px;gap:6px}.brand small{font-size:9px}.mark{transform:scale(.7);width:36px;margin-left:0}.top-nav{gap:11px}.top-nav a,.top-nav button{font-size:12px}.top-nav a{padding-right:11px}.app-main{padding:0 16px}.intro-head{padding:13px 0 21px;gap:3px}.intro-head h1{font-size:36px;white-space:nowrap}.intro-head p{font-size:16px;margin:5px 0 10px}.hero-stats{font-size:12px}.hero-stats b{font-size:19px}.hero-stats>span{padding:0 15px}.hero-fan{height:178px;width:96%;margin:10px auto 0}.fan-card{border-radius:8px}.fan-card span{font-size:10px;padding-bottom:8px}.category-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.category b{font-size:16px}.category small{font-size:12px}.category-copy{padding:8px 5px}.section-heading h2{font-size:25px}.section-heading p{font-size:12px}.category-total{font-size:10px;padding:4px 7px}.category-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.filter{padding:8px 2px;font-size:13px;min-height:40px;border-radius:9px}.settings-panel{padding:21px 18px}.how-strip{gap:8px;justify-content:space-between}.how-strip span{font-size:10px;gap:4px}.how-strip b{width:21px;height:21px;font-size:10px}.closing-note{font-size:22px}.mobile-continue{left:16px;right:16px;bottom:max(10px,env(safe-area-inset-bottom));padding:10px 12px}.mobile-continue b{font-size:13px;max-width:155px}.mobile-continue .btn{font-size:13px;padding:9px 12px}.join-panel{padding:23px 20px}.room-code{font-size:36px}.secret-stage{padding:22px 16px}.score span{font-size:12px}.score b{font-size:25px}.hub{padding:0 18px}.hub h1{font-size:44px}.game{padding:22px 18px;gap:13px}.game-art{width:100px;height:170px}.game h2,.guess-game h2{font-size:30px}.game .mini-label{font-size:11px}.game p{font-size:13px}.game .tags span{font-size:10px}.game .enter{font-size:14px}.hub-note{font-size:12px}.top>.top-note{font-size:11px}.phone.back{left:0}.phone.front{right:0}footer{background-size:auto 125px}.credit-page p{font-size:15px}}
@media(max-width:360px){.brand{font-size:20px}.top-nav a,.top-nav button{font-size:11px}.top{padding:11px 13px}.app-main{padding:0 13px}.intro-head h1{font-size:30px}.intro-head p{font-size:14px}.hero-stats>span{padding:0 12px}.hero-stats b{font-size:18px}.hero-fan{height:150px}.fan-card span{font-size:9px}.section-heading h2{font-size:23px}.category-total{font-size:9px}.category b{font-size:14px}.category small{font-size:11px}.category-list{gap:10px}.settings-panel{padding:19px 15px}.how-strip span{font-size:9px}.mobile-continue b{max-width:125px}.mobile-continue .btn{font-size:12px}.hub h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){.category,.game{transition:none}.category:hover,.game:hover{transform:none}.loader{animation:none}}

.mobile-entry{display:none}@media(max-width:740px){.mobile-entry{display:block}.mobile-entry .tabs{margin:0 0 24px}.settings-panel>.tabs{display:none}}
/* Align the category tools with the title on wide screens, as in the approved concept. */
@media(min-width:951px){.intro-head{padding:12px 0 23px;margin-bottom:20px;min-height:0}.hero-fan{height:clamp(220px,18vw,267px)}.category-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start}.section-heading{grid-column:1;grid-row:1;margin:0 0 19px}.category-total{display:none}.category-filters{grid-column:2;grid-row:1;align-self:center;margin:0 0 19px;gap:6px}.category-list{grid-column:1/-1}.section-heading h2{font-size:27px}.section-heading p{font-size:13px}.filter{padding:8px 14px;font-size:13px}.top{padding-top:17px;padding-bottom:10px}}
@media(max-width:360px){.category-total{display:none}}

.game-art>.hub-cover{width:100%;height:100%;border-radius:13px;overflow:hidden}

/* Keep the expanded filter list on its own row when space is tight. */
@media(min-width:951px){.category-panel{grid-template-columns:minmax(0,1fr)}.section-heading{grid-column:1;grid-row:1}.category-filters{grid-column:1;grid-row:2;justify-self:start;flex-wrap:wrap}.category-list{grid-row:3}}

/* Shared modern identity and controls. */
:root{--bg:#f6f7fc;--surface:#fff;--surface2:#edf0ff;--line:#dce0ea;--text:#141824;--muted:#656b7b;--teal:#304bdf;--purple:#304bdf;--gold:#dffb78;--orange:#304bdf;--soft:#edf0ff}
body{background:var(--bg)}.brand,.brand b{color:#131722}.brand small{color:#72798b}.mark i,.mark i:nth-child(2){background:#3453ff}.top-note{color:#686f80}.top-note:before{background:#d4d9e6}.top-nav a,.top-nav button{color:#252b3b}.top-nav a{border-color:#d8deef}
.btn:hover{background:#243cc4;border-color:#243cc4}.btn.secondary{background:#e9edff;color:#3045c0;border-color:#d2dafa}.btn.outline{color:#555e74;border-color:#cdd3e2}.btn.outline:hover{background:#e9edff}.btn.danger{background:#fff0f2;color:#a72d3b;border-color:#e9bbc0}
.filter.active,.tab.active{background:#304bdf;border-color:#304bdf}.filter:hover{background:#e4e9ff;color:#3045c0}.category.active{background:#f0f3ff}.category:hover{border-color:#a6b4ff}.settings-panel{box-shadow:0 8px 28px #15234408;border-color:#e0e4ed;border-radius:22px}.intro-head h1 em{color:#304bdf}.intro-head h1{color:#131722}.hero-fan:before{background:radial-gradient(ellipse,#3453ff14,transparent 70%)}.fan-card{border-color:#eef1ff}.closing-note{color:#747b8c}.score.second b{color:#587c19}.player:nth-child(2) .avatar{background:#edfacf;color:#48630f}.status-ready,.ready-wait{color:#486b18!important}.secret-stage:before{background:linear-gradient(90deg,#dffb78,#3453ff)}.round-clock{background:#edf1ff;color:#3045c0;border-color:#d7def8}.notice.warning{background:#fff7df;border-color:#e8d399;color:#755111}.mobile-continue{background:#fff;border-color:#d9dff1}.category-filters{grid-template-columns:repeat(6,minmax(0,1fr))}
footer{background:none;color:#747b8c;padding-top:28px}footer:before{background:#dde1ed}footer a,footer .text-button{color:#4d5c96}