/* =====================================================================
SoloScape - mobile layout layer (v2).
EVERY rule lives inside @media (max-width: 768px); desktop rendering
is untouched. Linked from the shared heads AND every self-contained
page (home, forums_*, suggestions_*, login, signup).
v2 changes:
- Homepage sidebar (.left menus) becomes a slide-in drawer behind a
hamburger button, overlaying the page (JS in home.php toggles
.is-open on body).
- News scroll is the centered main content, parchment art scaled.
- Top utility bar (.frame.e) properly tightened + centered.
- Forum containers no longer overflow their background (#main was
display:table; forum pages now actually load this file).
===================================================================== */
@media (max-width: 768px) {
/* ---- 1. Fluid shell ---------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
body.site2006 { text-align: left; }
body.site2006 div#body,
body.site2006 .frame,
body.site2006 .frame.e,
body.site2006 .frame.wide_e,
body.site2006 #cs-game-shell,
#cs-game-shell,
body.site2006 #cs-quicknav,
body.site2006 .gamebox,
.cs-header, .cs-header__utility-inner, .cs-header__masthead,
.cs-main, .cs-main__content,
.widescroll, .widescroll-bgimg,
.horizontalscroll {
width: auto !important;
max-width: 100% !important;
box-sizing: border-box;
}
body.site2006 div#body { margin: 0 auto; padding: 0 6px; }
/* ---- 2. Top utility bar: tight + vertically centered ------------- */
body.site2006 .frame.e {
padding: 6px 8px !important;
margin: 6px auto 4px !important;
text-align: center;
}
body.site2006 .frame.e > div { /* "You are logged in as ..." */
padding: 0; margin: 0 0 4px; line-height: 1.4;
}
body.site2006 .frame.e span[style*="float"] {
float: none !important;
display: flex; flex-wrap: wrap; gap: 0;
margin: 0; justify-content: center; align-items: center;
}
body.site2006 .frame.e a,
body.site2006 .frame.e button {
padding: 6px 8px; font-size: 14px; display: inline-block; line-height: 1;
}
/* Kill the big
gap the 2006 layout puts under the bar. */
body.site2006 .frame.e + br,
body.site2006 .frame.e + br + br { display: none; }
/* ---- 3. Homepage: hamburger drawer for the .left menus ----------- */
.cs-mobile-nav-toggle {
display: block;
position: fixed; top: 8px; left: 8px; z-index: 1002;
width: 42px; height: 38px;
background: #1c1610; color: #ffd470;
border: 2px solid #5a3a14; border-radius: 3px;
font-size: 20px; line-height: 34px; text-align: center;
cursor: pointer; user-select: none;
}
.cs-mobile-nav-toggle:active { background: #2c2218; }
/* Make room so the toggle never covers the login status text. */
body.site2006.site2006-home .frame.e { padding-left: 52px !important; }
/* The slide-in drawer is ONLY for the homepage, which has the hamburger
toggle. Other pages that use a .left sidebar (wiki, disclaimer, rules,
commands, about, sources) have no toggle, so scoping the drawer here
stops their sidebar being pinned off-screen with no way to open it. */
body.site2006-home .left {
float: none !important;
position: fixed; top: 0; bottom: 0; left: -110%;
width: min(320px, 86vw);
overflow-y: auto; -webkit-overflow-scrolling: touch;
background: #17110b;
border-right: 2px solid #5a3a14;
padding: 52px 10px 20px;
margin: 0 !important;
z-index: 1001;
transition: left .22s ease;
box-sizing: border-box;
}
body.site2006-home.cs-nav-open .left { left: 0; }
body.site2006-home .left fieldset.menu { margin: 0 0 10px; width: auto; }
body.site2006-home .left fieldset.menu a { display: block; padding: 7px 4px; }
/* Two-column knowledge-base pages (.cs-uplift-layout): stack the sidebar
above the content and drop the desktop 290px content margin, so nothing
is pushed off a phone screen. */
body.site2006 .cs-uplift-layout { display: block !important; }
body.site2006 .cs-uplift-layout .left {
float: none !important;
position: static !important;
width: auto !important;
margin: 0 0 12px !important;
padding: 0 !important;
border-right: 0 !important;
background: none !important;
}
body.site2006 .cs-uplift-layout .left fieldset.menu { width: auto; margin: 0 0 10px; }
body.site2006 .cs-uplift-right { margin-left: 0 !important; }
/* Forum board picker: a 440px floated box that overflowed a phone. */
body.site2006 #picker { width: auto !important; max-width: 100%; float: none !important; margin-top: 0 !important; }
body.site2006 .cs-uplift-scroll,
body.site2006 .cs-uplift-hero,
body.site2006 .cs-uplift-hero img { max-width: 100% !important; height: auto; box-sizing: border-box; }
.cs-menu-backdrop {
display: none;
position: fixed; inset: 0; z-index: 1000;
background: rgba(0, 0, 0, 0.65);
}
body.site2006.cs-nav-open .cs-menu-backdrop { display: block; }
body.site2006.cs-nav-open { overflow: hidden; }
/* ---- 4. Homepage: news scroll centered as the main content ------- */
body.site2006 .newscontainer {
margin: 0 auto 24px !important;
max-width: 480px;
}
body.site2006 img.narrowscroll-top,
body.site2006 img.narrowscroll-bottom {
width: 100% !important; height: auto !important;
position: static !important; display: block;
}
body.site2006 div.narrowscroll-bg,
body.site2006 div.narrowscroll-bgimg {
width: 100% !important;
margin: 0 !important;
background-size: 100% auto;
}
body.site2006 div.narrowscroll-content { padding: 8px 12px 16px; margin: 0; }
/* Banner logo + player count scale down and center. */
body.site2006 div#body > div img[src*="logo"],
body.site2006 .cs-header__brand img { max-width: 78%; height: auto; }
/* Hide Create/Play hero buttons (no Java client on phones). */
body.site2006 .buttons #button-left,
body.site2006 .buttons #button-right,
a.cs-play-now-button, .cs-play-now-button,
.cs-header__utility-links a[href="/signup"],
.cs-header__utility-links a[href="/game"] {
display: none !important;
}
body.site2006 .buttons { margin: 0; height: auto; }
/* ---- 5. Forums: containers must not exceed the page -------------- */
body.site2006 #main {
display: block !important;
width: 100% !important;
margin: 0 !important;
box-sizing: border-box;
}
body.site2006 #main table,
body.site2006 .frame table {
width: 100% !important;
table-layout: auto;
}
/* Forum name/description cells wrap; numeric columns shrink. */
body.site2006 td.frmname, body.site2006 td.frmname span,
body.site2006 .desc { white-space: normal; word-break: break-word; }
body.site2006 td.num { white-space: nowrap; width: auto; }
body.site2006 td.icon img { max-width: 34px; height: auto; }
/* Long thread titles / post bodies wrap instead of stretching. */
body.site2006 .frame td { word-break: break-word; }
/* ---- 6. Wide data tables (hiscores etc.) scroll, not blow up ----- */
body.site2006 .gamebox table,
body.site2006 #cs-game-shell table,
.cs-main__content table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.site2006 .gamebox table td,
body.site2006 .gamebox table th { white-space: nowrap; padding: 6px 8px; }
/* ---- 7. Quick-nav (logged-in bar on chrome pages) ---------------- */
body.site2006 #cs-quicknav ul { flex-wrap: wrap; }
body.site2006 #cs-quicknav ul li a { padding: 9px 12px; font-size: 13px; }
/* ---- 8. Forms: full width, 16px stops iOS zoom ------------------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea, select {
max-width: 100%; box-sizing: border-box; font-size: 16px;
}
body.site2006 #cs-game-shell .cs-btn,
button[type="submit"] { padding: 10px 16px; font-size: 15px; }
/* ---- 9. Media never overflows ------------------------------------ */
img, canvas, video, iframe { max-width: 100%; height: auto; }
.cs-forum-smiley, .skill-icon, #cs-quicknav img { max-width: none; }
/* ---- 10. Profile render ------------------------------------------ */
.cs-render, .cs-profile__render, [data-cs-render], .demo-render {
max-width: 100% !important; height: auto !important;
}
/* ---- 11. Scroll panels breathe ----------------------------------- */
.widescroll-content, .horizontalscroll-content { padding: 14px 10px; }
.heading span { width: auto !important; display: inline-block; }
}
/* Hamburger + backdrop are mobile-only artifacts: hard-hidden on desktop. */
@media (min-width: 769px) {
.cs-mobile-nav-toggle, .cs-menu-backdrop { display: none !important; }
}
/* ---------------------------------------------------------------------------
Launch polish: membership placeholder, Bond Store cards and the staff world
panel all gained new elements that needed a phone layout.
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* Membership "everyone is a member" page: keep the crown + copy centred and
stop the two call-to-action buttons from colliding. */
.frame.wide_e { width: auto !important; max-width: 100% !important; }
.frame.wide_e a[href="/bond-store"],
.frame.wide_e a[href="/install"] {
display: block !important;
margin: 8px auto 0 !important;
max-width: 260px;
text-align: center;
}
/* Bond Store grid: one card per row so sprites and prices stay legible. */
.cs-store-grid { display: block !important; }
.cs-store-card {
width: 100% !important;
box-sizing: border-box;
margin: 0 0 10px 0 !important;
}
.cs-store-card__buy { text-align: left; }
/* Staff world panel: the live player table scrolls sideways instead of
stretching the page, and the bot filter links wrap onto their own lines. */
.cs-staff-table { display: block; width: 100%; overflow-x: auto; }
.cs-staff-form .cs-form-help a { display: inline-block; margin: 2px 8px 2px 0; }
.cs-staff-stats { display: block !important; }
.cs-staff-stat { width: auto !important; margin: 0 0 6px 0 !important; }
}