:root{--bg:#101522;--panel:#1b2535;--muted:#b5c0d2;--lime:#ff9849;--line:#39465c;--white:#ffffff;--blue:#7ecbc6;--purple:#b5a4cf}
body{padding-left:82px;background:var(--bg);color:var(--white)}
header{margin-left:0;height:74px;background:#151e2e;border-color:#303c52;padding:0 34px}
.brand{letter-spacing:-1.1px;font-size:23px}.brand span{color:#ff9849!important}
.rail{background:#121a29;border-color:#303c52;width:82px;padding-top:19px}
.mark{background:#ff9849;color:#142431;border-radius:14px;box-shadow:0 3px 0 #9b542f;transform:rotate(-4deg)}
.rail button{color:#b4c0d3}.rail button:hover,.rail button.active{background:#263247;color:#ffb87f}
.rail button svg{width:23px;height:23px}.rail .railbottom{margin-bottom:5px}
.pill{color:#b2ccc9;background:#253148;border-color:#45526b;border-radius:6px}
main{width:100%;max-width:1260px;margin:0 auto;padding:32px 34px 42px}
h1,h2,h3{color:var(--white)}
p{color:var(--muted)}
.gamebanner{height:304px;border-radius:22px;border:1px solid #3d4c64;background:#182235;position:relative;overflow:hidden;background-image:none;animation:none}
.hero-scene{position:absolute;right:0;top:0;width:78%;height:100%;object-fit:cover;object-position:center right}
.gamebanner:before{content:none;display:none}
.bannercontent{z-index:2;padding:31px 34px;width:53%;position:relative}
.bannerbadge{padding:0;background:none;border:0;color:#8bded9;font-size:9px;letter-spacing:1.6px;font-weight:800}
.bannercontent h1{font-size:51px;line-height:1.04;margin:17px 0 15px;letter-spacing:.1px;text-shadow:none}
.nowrap{white-space:nowrap}.bannercontent p{font-size:12px;line-height:1.65;margin:0;max-width:none;color:#e0e7f2}
.hero-mini{display:flex;align-items:center;gap:8px;color:#b9c8df;font-size:9px;margin-top:20px;letter-spacing:.2px}
.hero-dot{display:block;width:6px;height:6px;background:#ff9849;border-radius:50%}
.landinggrid{display:grid;grid-template-columns:minmax(0,1fr) 278px;gap:24px;align-items:start;margin-top:28px}
.sectionhead{margin:0 0 16px;align-items:center;height:24px}
.sectionhead h2{font-family:Inter,Arial,sans-serif;font-size:16px;font-weight:700;text-transform:none}
.sectionhead .small{font-size:10px;color:#b4c3d9}
.modes{gap:14px}
.mode{border-radius:16px;border:1px solid #40516d;background:#1d293d;box-shadow:0 4px 0 #0b1220;text-align:left;overflow:hidden;transition:transform .16s,border-color .16s;animation:none}
.mode:nth-child(1){--mode-accent:#c1adcf}.mode:nth-child(2){--mode-accent:#83c9bf}.mode:nth-child(3){--mode-accent:#96bcff}
.mode:hover{transform:translateY(-3px);border-color:var(--mode-accent);box-shadow:0 6px 0 #0b1220}
.mode:active{transform:translateY(1px);box-shadow:0 2px 0 #0b1220}
.modeart,.roomsettings .modeart{height:154px;background:#25344d;position:relative;border-bottom:1px solid #14243140}
.modeart:before{display:none}.modeart img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.mode:hover .modeart img{transform:scale(1.025)}
.modetext{padding:15px 15px 18px}.modetext h3{font-size:25px;letter-spacing:.1px;margin-top:9px}
.modecaption{font-size:8px;letter-spacing:.8px;font-weight:700;color:var(--mode-accent);display:flex;justify-content:space-between;align-items:center}
.modecaption span{font-size:14px;line-height:8px}
.mode p{font-size:10px;line-height:1.65;margin:9px 0 0;min-height:32px;color:#c3cede}
.under-games{font-size:10px;color:#a5b8d0;margin:21px 1px 0}
.startpanel{align-self:start;border-radius:16px;padding:20px;background:#1d283b;border:1px solid #455670;box-shadow:0 4px 0 #0b1220}
.panelheading{display:flex;align-items:center;justify-content:space-between}.panelheading h3{font-size:28px}
.room-symbol{color:#91cfc5;display:block;width:25px;height:25px}.room-symbol svg{width:25px;height:25px}
.profilepick{margin-top:20px;gap:12px}.profilepick .avatar{width:48px;height:48px;border:2px solid #6d87b0;border-radius:13px}
.profilepick strong{font-size:11px}.textbutton{display:block;background:none;border:0;padding:0;margin-top:7px;color:#a8d6d1;font-size:10px}
.textbutton:hover{color:#ffffff;text-decoration:underline}
.field{color:#bfcee3;font-size:9px;letter-spacing:.6px;margin-top:19px}
input,select{border:1px solid #4c607f;background:#111d30;color:#ffffff;border-radius:9px;padding:11px;font-size:12px}
input::placeholder{color:#9caec7}
.btn{background:#ff9849;border:1px solid #ffb576;border-bottom:3px solid #c86b29;border-radius:10px;color:#151e2e;padding:12px 18px;font-size:12px;box-shadow:none}
.btn:hover{background:#ffae6b}.btn.secondary{background:#2d3c55;border:1px solid #526b90;border-bottom:3px solid #15223a;color:#ffffff}
.btn.secondary:hover{background:#394d6d}
.startpanel .btn{margin-top:14px}.divider{color:#a7bddb;font-size:8px;margin:18px 0 12px;gap:9px}.divider:before,.divider:after{background:#3e4f6b}
.joinrow .btn{margin:0;padding:10px 13px}.demo-caption{margin:17px 0 0;font-size:9px;line-height:1.55;color:#a6b9d3}
.avatar{border-radius:10px;background:#334865}.avatar-portrait{display:block;width:100%;height:100%;background:url('https://media.cs2geoguessr.com/assets/avatars-daylight.webp') no-repeat;background-size:300% 100%}
.avatar-button{border:1px solid #6d87b0;padding:0;cursor:pointer;transition:transform .15s}
.avatar-button:hover{transform:rotate(-3deg);outline:2px solid #ff9849;outline-offset:2px}
.avatar-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}
.avatar-option{border:1px solid #567078;background:#203b46;padding:12px 7px;border-radius:13px;color:#ffffff;font-size:10px}
.avatar-option .avatar{width:68px;height:68px;margin:0 auto 12px;border-radius:13px}
.avatar-option:hover,.avatar-option.selected{border-color:#ff9849;background:#344a66}
.box,.roomsettings,.roomplayers{background:#1d283b;border-color:#40516d;border-radius:16px;align-self:start}
.roomsettings .sectionhead h2,.roomplayers .sectionhead h2{font-size:14px}
.roomsettings .modeart{height:118px}.roomsettings .modetext{padding:12px}.roomsettings .mode h3{font-size:22px}
.roomsettings .mode .check{border:1px solid #9eac9e;border-radius:6px;background:#1c343d;color:#ffffff;top:9px;right:9px;z-index:1}
.roomsettings .mode.selected{border:2px solid #ff9849}.roomsettings .mode.selected .check{background:#ff9849;color:#142431}
.ready{background:#315546!important;color:#bfe2c4!important}.note{background:#1a2a42;border-color:#455e82;color:#bfd0e6;border-radius:9px}
.roundtop{background:#26364e;border-color:#435b7d;border-radius:9px}.roundtop #clock{color:#c9deff}
.progress{background:#304e57}.progress div{background:#ff9849}
.clue{background:#2a3d58;border-color:#5d789f;border-radius:12px}.clue small{color:#a3dad0}.clue b{color:#ffffff}
.option{background:#2f4565;border-color:#5979a6;border-bottom-color:#132641;border-radius:10px}.option:hover{background:#3b577f;border-color:#efaf7d}
.question-emblem{margin:0 auto 15px;width:144px;height:85px;overflow:hidden;border-radius:12px}.question-emblem img{width:100%;height:100%;object-fit:cover}
.board .pts{color:#ffffff}.person small{color:#aebfd9}.back{color:#b8cbe5}.modal{background:#223650;border-color:#5b769c}
body>footer{width:calc(100% - 68px);max-width:1192px;margin:0 auto;padding:18px 0 25px;border-color:#33435e;color:#9cafcc;font-size:9px}
@media(min-width:1600px){main{margin:0 auto;padding-left:34px}}
@media(max-width:1100px){main{padding:26px}.landinggrid{grid-template-columns:minmax(0,1fr) 245px;gap:18px}.modeart{height:130px}.modetext{padding:13px 11px 15px}.modetext h3{font-size:22px}.modecaption{font-size:7px}.bannercontent h1{font-size:46px}.bannercontent{width:58%}.startpanel{padding:18px}.sectionhead .small{font-size:9px}.roomsettings .modetext h3{font-size:19px}}
@media(max-width:850px){body{padding-left:0}header{margin:0;height:65px;padding:0 20px}main{margin:0;padding:23px 18px;max-width:760px}.gamebanner{height:275px;border-radius:18px}.hero-scene{width:88%;opacity:1}.bannercontent{padding:28px 25px;width:68%}.bannercontent h1{font-size:43px}.bannercontent p{font-size:11px}.hero-mini{margin-top:17px;font-size:8px}.gamebanner:before{content:none;display:none}.landinggrid{grid-template-columns:1fr;gap:26px;margin-top:23px}.startpanel{padding:20px;max-width:none}.profilepick{display:flex;margin-top:17px}.startpanel .profilepick,.startpanel .hintline{display:flex}.modeart,.roomsettings .modeart{height:130px}.mode p{display:block;font-size:10px}.modetext h3{font-size:23px}.modes{gap:11px}.sectionhead h2{font-size:15px}.sectionhead .small{font-size:9px}.startpanel .field{margin-top:17px}.startpanel .divider{margin:18px 0 12px}.demo-caption{margin-bottom:0}.roomplayers .person{width:48%}.appgrid,.roomlayout{grid-template-columns:1fr}body>footer{margin:0 18px;width:calc(100% - 36px);font-size:8px}.toplinks>a,.topuser strong{display:none}}
@media(max-width:520px){.gamebanner{height:260px}.hero-scene{width:115%;right:-22%;opacity:1}.bannercontent{width:100%;padding:26px 23px}.bannercontent h1{font-size:clamp(31px,7.8vw,39px)}.bannercontent p{max-width:240px}.gamebanner:before{content:none;display:none}.hero-mini{margin-top:19px}.modes{grid-template-columns:1fr}.mode{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:stretch;min-height:128px}.modeart,.roomsettings .modeart{height:100%;min-height:128px;border-bottom:0;border-right:1px solid #14243140}.modeart img{object-fit:cover;object-position:center}.modetext{padding:17px 14px}.modetext h3{font-size:25px;margin-top:8px}.mode p{min-height:0;margin-top:7px}.modecaption{font-size:7px}.roomsettings .mode h3{font-size:23px}.roomsettings .modetext{padding:16px 13px}.roomsettings .mode .check{top:8px;left:8px;right:auto}.roomsettings .modes{grid-template-columns:1fr}.sectionhead .small{max-width:120px;text-align:right;line-height:1.5}.under-games{font-size:9px}.guessrow .btn{width:100%}.hero-mini{font-size:8px}.toplinks{gap:12px}.bannerbadge{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.mode:hover,.mode:active,.mode:hover .modeart img,.avatar-button:hover{transform:none}}

.mobile-start{display:none}@media(max-width:850px){.mobile-start{display:flex;gap:10px;margin:17px 0 0}.mobile-start .btn{flex:1;text-align:center}.landinggrid{margin-top:25px}}

/* Show the illustration directly, without tint, fades or image transparency. */
.gamebanner{display:grid;grid-template-columns:42% 58%;background:#182235;border-color:#3d4c64;box-shadow:none}
.hero-scene{position:static;grid-column:2;grid-row:1;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:1;filter:none;mix-blend-mode:normal}
.bannercontent{grid-column:1;grid-row:1;width:100%;background:#182235;padding:30px 32px}
.gamebanner:before,.gamebanner:after{display:none;content:none}
.bannercontent h1{color:#fff;line-height:1.06;text-shadow:none;font-size:49px}
.bannercontent p{color:#e0e7f2;font-size:13px}
.mode,.startpanel{box-shadow:none}
.mode:hover,.mode:active{box-shadow:none}
.modeart img,.question-emblem img,.avatar-portrait{opacity:1;filter:none;mix-blend-mode:normal}
.mode:hover .modeart img{transform:none}
.mode p{font-size:12px;color:#c3cede;min-height:40px}
.modecaption{font-size:9px}.field{font-size:10px}.profilepick strong{font-size:12px}.textbutton{font-size:11px}
.hero-mini{color:#b9c8df}.bannerbadge{color:#92dedb}.btn{background:#ff9849;color:#111c2c}
@media(max-width:1100px){.bannercontent{padding:28px 25px}.bannercontent h1{font-size:43px}}
@media(max-width:850px){.gamebanner{grid-template-columns:1fr;height:auto}.bannercontent{grid-column:1;grid-row:1;padding:23px 25px;width:100%}.bannercontent h1{font-size:38px;margin:11px 0 12px}.bannercontent p{font-size:12px}.hero-mini{display:none}.hero-scene{grid-column:1;grid-row:2;width:100%;height:170px;right:auto;opacity:1;object-position:right center}.bannerbadge{font-size:9px}.mode p{font-size:11px}.landinggrid>.startpanel{grid-row:auto}}
@media(max-width:520px){.bannercontent{padding:23px}.bannercontent h1{font-size:clamp(31px,7.8vw,38px)}.hero-scene{width:100%;height:145px;opacity:1}.mode p{min-height:0}.hero-mini{display:none}}

/* Neutral whites, deliberate accent colours, no warm cast. */
:root{--white:#ffffff;--blue:#84baff}
.bannercontent,.gamebanner{background:#182235}
.hero-scene,.modeart img,.avatar-portrait{filter:none;opacity:1;mix-blend-mode:normal}
.hero-mini,.field,.textbutton,.mode p{color:#c4d1e5}
.mode:nth-child(3){--mode-accent:#9bc2ff}