/* css/base.css: Tokens, the app column and the screen-in animation. Loaded first: every other file builds on these custom properties.
   The css/ files are CONTIGUOUS SLICES of the old single styles.css, loaded by index.html in this order (base, front, shell, combat, map, plan, sheets, play, shared).
   Cascade order is part of the meaning: a rule that overrides an earlier rule of the same specificity must stay in a file that loads after it. Move rules between files
   only with a screenshot diff (tools/ui_snapshots.py). New rules for a screen go at the END of the file that owns it. */
/* Magic Realm: portrait-first. The design is a night survey map: blue-black ground, parchment type, one gold accent. */
:root {
    --bg: #0f1117; --panel: #181c27; --panel2: #202636; --line: #323a52; --text: #efe6d0; --dim: #a39a84;
    --gold: #86c47a; --gold-deep: #4f9559; --ember: #d0673c; --moss: #6fae8a; --arcane: #968de0;
    --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --font-text: 'Alegreya', Georgia, 'Times New Roman', serif;
    --font-ui: 'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
    --gutter: max(20px, var(--safe-l), var(--safe-r));
    --tap: 56px;                                   /* the minimum height of a main button: comfortable for a thumb */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
* { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; background: #0a0c11; color: var(--text); font: calc(17px * var(--ts, 1))/1.35 var(--font-ui); overscroll-behavior: none; touch-action: manipulation; }
button { font: inherit; color: inherit; }

/* The app is a phone-width column; on a wide screen it is centred and the rest stays dark. */
#app { position: fixed; inset: 0; margin-inline: auto; width: min(100%, 520px); background: var(--bg); overflow: hidden; display: flex; flex-direction: column;
    padding: var(--safe-t) 0 var(--safe-b); box-shadow: 0 0 0 1px #000, 0 0 60px rgba(0, 0, 0, .6); }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--gutter); animation: screen-in .28s ease-out; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }