/* =========================================================
APP SHELL — reusable mobile frame (include on EVERY page)
Keeps the mobile UI at its native width and simply centers
it on tablet / desktop. Nothing inside is scaled or
stretched, so all absolute positioning, animations and
game interactions keep working untouched.
Usage (per page):
1. Link this file AFTER the page stylesheet:
2. Wrap the existing page markup:
...existing page content, unchanged...
...scripts stay outside the wrapper...
========================================================= */
/* Cross-browser mobile base — same text scale on iOS Safari,
Chrome Android, and desktop WebViews */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* ---------- Mobile (≤430px): completely transparent behaviour —
full width, no radius, no margins, page looks exactly as before */
.app-shell {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
background: transparent;
overflow-x: hidden;
box-sizing: border-box;
}
/* ---------- Tablet / desktop (>430px): fixed mobile-width frame ---------- */
@media (min-width: 431px) {
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
overflow: hidden;
/* Themed backdrop behind the centered frame
(wins over per-page body colors because this file loads last) */
background-color: #2b0709;
background-image:
radial-gradient(
120% 90% at 50% -20%,
rgba(240, 182, 74, 0.22) 0%,
rgba(240, 182, 74, 0) 55%
),
radial-gradient(
80% 60% at 50% 115%,
rgba(122, 17, 22, 0.6) 0%,
rgba(43, 7, 9, 0) 70%
),
radial-gradient(rgba(240, 182, 74, 0.07) 1px, transparent 1.6px);
background-size:
auto,
auto,
26px 26px;
}
.app-shell {
width: 430px;
height: 100vh;
height: 100dvh;
background: #fff;
overflow-x: hidden;
overflow-y: auto; /* long pages scroll inside the frame */
box-shadow:
0 0 0 1px rgba(240, 182, 74, 0.25),
0 30px 80px rgba(0, 0, 0, 0.55);
scrollbar-width: none;
}
.app-shell::-webkit-scrollbar {
display: none;
}
/* Full-viewport screens now fill the FRAME instead of the viewport,
so the layout inside stays pixel-identical to mobile */
.app-shell > .game-screen,
.app-shell > .rath-screen {
height: 100%;
}
.app-shell > .rath-card {
min-height: 100%;
}
}
/* ---------- Enough vertical room: float the frame like a phone ---------- */
@media (min-width: 431px) and (min-height: 780px) {
.app-shell {
height: calc(100vh - 64px);
height: calc(100dvh - 64px);
border-radius: 28px;
}
}