/*
* responsive.css — mobile/tablet adaptation layer for Genesis.
*
* The legacy layout (layout.css + per-theme theme.css) is a fixed-width
* desktop design: #inner-container 1130px, #header 960px, two floated
* columns, in-game nav (100px) beside content (694px). None of it adapts
* to screen size and there was no viewport meta tag, so phones rendered a
* zoomed-out desktop page with the header overflowing the content.
*
* This file is loaded LAST in common/base.html (after layout.css and the
* active theme.css) so its rules win by source order. EVERYTHING here is
* gated behind a max-width media query, so on desktop (>1150px) nothing in
* this file applies and the original layout renders byte-for-byte the same.
*
* To disable: remove the to this file in common/base.html.
* Breakpoints: <=1150px tablet/fluid container, <=900px stack columns,
* <=600px phone tightening.
*/
/* ========================================================================
* TABLET / NARROW DESKTOP (<= 1150px) — make the fixed container fluid.
* ===================================================================== */
@media (max-width: 1150px) {
#inner-container {
width: auto !important;
max-width: 1130px;
margin-left: 8px;
margin-right: 8px;
box-sizing: border-box;
}
/* Header and footer were locked to 960px; let them fill the container. */
#header,
#header2,
#footer {
width: auto !important;
max-width: 100%;
box-sizing: border-box;
}
/* Left column held the 830px main area; right column held the ad. */
#left-column,
#left-column.unauthenticated {
width: auto !important;
max-width: 100%;
box-sizing: border-box;
}
/* Keep big media blocks from forcing horizontal scroll. */
#leaderboard-ad,
#ad-words,
#ad-words div.bsap,
.overlay,
.recruitment-header,
.campaigns,
#resource-bar,
.game-header,
.game-content {
max-width: 100% !important;
box-sizing: border-box;
}
/* Images should never exceed their box. Icons use background sprites,
so this only affects genuine content (avatars, taunts, flags). */
#content-area img,
.game-content img,
.lobby-panel img {
max-width: 100%;
height: auto;
}
}
/* ========================================================================
* STACK COLUMNS (<= 900px) — drop the side-by-side floats to one column.
* ===================================================================== */
@media (max-width: 900px) {
/* PAGE OVERFLOW GUARD: guarantee nothing forces the whole page to scroll
sideways. Any element that pokes past the viewport is clipped here; wide
data tables keep their OWN internal scroll box (.game-content table /
#resource-bar below), which is a separate scroll container and is not
affected by this. overflow-x is set on only (not ) so the
navbar's position:fixed children stay anchored to the viewport. */
body {
overflow-x: hidden !important;
max-width: 100%;
}
#inner-container,
#middle,
#content-area,
#left-column,
.game-content,
.game-header {
max-width: 100% !important;
box-sizing: border-box;
}
/* Long unbroken strings (URLs, kingdom names) shouldn't stretch the page. */
.game-content,
#content-area p,
.message {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* The right-hand skyscraper ad column has no room on a narrow screen. */
#right-column,
#skyscraper-ad {
display: none !important;
}
#left-column,
#left-column.unauthenticated {
float: none !important;
width: 100% !important;
}
#middle {
overflow: visible !important;
}
/* Header: let it grow to fit wrapped nav instead of clipping at 85/125px,
and remove the 295px left offset that cleared the desktop logo. */
#header,
#header2 {
height: auto !important;
overflow: visible !important;
padding-bottom: 8px;
}
#header-navigation,
#header-navigation-2nd-level,
#header-navigation-3rd-level {
position: static !important;
left: 0 !important;
top: 0 !important;
width: auto !important;
clear: both;
}
/* Shared header nav (lobby / chooser / account pages). The theme gives each
.navigation tab a 2px border + box-shadow, and header_nav.html lays them
out as inline-block. Those pills are TALLER than the line-height, so when
they wrap to several rows on a narrow screen the wrapped rows overlap
vertically (borders touching) and the top row collides with the
absolutely-positioned #header-logo. Lay each nav row out as a centred
flex-wrap with a real gap so the pills always have clear space between
them, and give the first row extra clearance under the logo. */
#header-navigation,
#header-navigation-2nd-level {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
}
/* The staff 3rd-level groups its tabs inside .admin-nav-row blocks; flex
those rows (not their container) so each admin row wraps cleanly too. */
#header-navigation-3rd-level .admin-nav-row {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
overflow: visible !important;
}
/* Drop the float/margins the desktop rules put on each tab — the flex gap
now owns the spacing (otherwise the leftover margins double it up). */
#header-navigation .navigation,
#header-navigation-2nd-level .navigation,
#header-navigation-3rd-level .navigation {
float: none !important;
margin: 0 !important;
vertical-align: top;
}
/* The logo is position:absolute by default (anchored to the top of the
header), so on desktop the nav dodges it with a 295px left offset. On
mobile that offset is gone and the centred nav lands on top of the
absolutely-positioned logo — a margin can't reliably clear an out-of-flow
element. Put the logo back into normal flow and centre it so the nav just
stacks cleanly BELOW it. */
#header,
#header2 {
text-align: center !important;
}
#header-logo {
position: static !important;
display: inline-block !important;
float: none !important;
}
/* Logo is in flow now, so only a small gap is needed above the first nav row
(overrides header_nav.html's desktop margin-top:50px that cleared the
absolute logo). */
#header-navigation { margin-top: 12px !important; }
/* In-game: navigation column (100px float) becomes a full-width wrapping
menu above the content (694px float), which goes full width below it. */
#game-navigation {
float: none !important;
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 12px;
}
#game-navigation .navigation {
display: flex;
flex-wrap: wrap;
gap: 4px 10px;
}
#game-navigation .navigation div {
margin-bottom: 0 !important;
}
.game-header,
.game-content {
float: none !important;
width: 100% !important;
}
/* Wide data tables (resource bar, rankings, stat grids) scroll sideways
instead of overflowing the page. The block+overflow trick is the
standard responsive-table approach and keeps cells readable. */
#resource-bar,
.game-content table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
/* Fixed-width feature blocks → fluid. */
.recruitment-header,
.campaigns,
#resource-bar,
.game-header,
.overlay,
.kingdom-details-scaled-taunt,
.kingdom-details-scaled-taunt img,
.meter-container,
#hostility-meter-example {
width: auto !important;
max-width: 100% !important;
}
/* Science widgets were 30% (3-up); give them more room when stacked. */
.scientist-widget {
width: 46% !important;
}
}
/* ========================================================================
* PHONE (<= 600px) — tighten spacing, single-column widgets, smaller logo.
* ===================================================================== */
@media (max-width: 600px) {
#inner-container {
margin-left: 4px;
margin-right: 4px;
}
#content-area {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* Generous desktop margins waste scarce phone width. */
.game-content p,
.game-content h3 {
margin-left: 8px !important;
margin-right: 8px !important;
}
ul {
margin-left: 24px !important;
}
/* The horizontal nav menu reads better as a tighter wrap on phones. */
#game-navigation .navigation {
gap: 2px 8px;
}
/* One science widget per row on the narrowest screens. */
.scientist-widget {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Keep the logo from eating the whole header row. */
#header-logo {
max-width: 180px;
}
/* Tap targets: a little more breathing room on nav links. */
#game-navigation .navigation a {
padding: 2px 0;
display: inline-block;
}
}
/* ========================================================================
* PHONE DROPDOWNS (<= 600px) — native selects instead of the uniform skin.
*
* Every