/* mobile.css — override layer on top of css/index.css for small screens. * * Loaded from html.php's beginHTML()/beginGAME() and from login.php's own * . AFTER index.css so its selectors win the cascade. All non-media * rules here are safe on desktop too (image and iframe scaling); everything * that would alter the desktop layout is wrapped in @media (max-width: 800px). */ /* --- always-on --------------------------------------------------------- */ /* Legacy pages hardcode img/embed widths in pixels. Cap them at the parent * so a phone's 400px viewport doesn't scroll horizontally. * * ruffle-embed intentionally excluded — it's a replaced custom element * with no intrinsic size, and `height: auto` here collapses it to 0px. * Pages that host a SWF must set per-SWF sizing (aspect-ratio) locally. */ img, embed, object, iframe { max-width: 100%; height: auto; } /* --- narrow viewports (phones + small tablets) ------------------------- */ @media (max-width: 800px) { html, body { max-width: 100vw; overflow-x: hidden; margin: 0; } /* Every hardcoded-width table becomes fluid. This is what turns the * fixed 750-pixel game layout into something that fits a phone. * (Deliberately NOT using table-layout: fixed here — it broke image * rendering in the header cells by removing content-based sizing.) */ table[width] { max-width: 100% !important; width: 100% !important; } /* Individual cells with hardcoded pixel widths (many 2005 layouts add * width="319" etc. on ) should relax those widths on mobile so * cells can shrink into the narrowed parent. */ td[width], th[width] { max-width: 100% !important; } /* SELECTs are replaced elements and don't wrap; force them to their * cell's width so they can't overflow (the discipline.php * "bitches: SELECT ONE" case). */ select { max-width: 100% !important; width: 100% !important; box-sizing: border-box; } /* Cell padding is tight on 2005 desktop layouts; bump for touch. */ td, th { padding: 6px !important; } /* Prevent iOS zoom-in on input focus (fires when input font is <16px). */ input, select, textarea, button { font-size: 16px !important; min-height: 36px; } /* Restore legibility on the 2005 spam. * Applied via [size] attr selector so we don't touch anything larger. */ font[size="1"], font[size="2"] { font-size: 14px !important; } /* --- Layer 1.5: fix specific clipping issues surfaced in mobile QA --- */ /* Any cell with long unwrappable content (long URLs, no-space words) * should break rather than push the layout off-screen. Fixes text * cases like the message board's occasional long tokens. */ td, th { overflow-wrap: anywhere; word-wrap: break-word; } /* Cells with the HTML `nowrap` attribute (used across the game for * label+control rows like discipline.php's bitches+contacts SELECTs * and funcs.php's bar() stat row) override the attr with CSS so * they wrap on narrow screens. */ td[nowrap], th[nowrap] { white-space: normal !important; } } /* --- very narrow (phones portrait) ------------------------------------ */ @media (max-width: 480px) { /* Body copy needs a touch more breathing room on tiny screens */ body { font-size: 15px; } /* Header/footer chrome images (750px wide) center-shrink rather than * bleed off the edge. */ img[width="750"] { display: block; margin: 0 auto; } }