/* web/styles.css — real client palette. Iron Sanctum re-skin (design canvas Durnvale-print-9g3j8m.dc.html, sheet 5a + component language 3a). Dark-fantasy warm iron/bronze; mobile-first (390) with a desktop frame (>=1024). Skin, not a redesign — the information architecture below is unchanged; only chrome, type and the token layer. THE TOKEN LAYER (5a). Before this pass every color was a hardcoded hex; these variables are the single source of truth for the re-skin. Rarity hues are RESERVED: the four strict ones (--r-uncommon/-rare/-epic/-mythic) may appear ONLY inside rarity-scoped classes (the r-dash and s-dash rarity classes, and rarity keyframes) — enforced by tests/test_styles_guard.py. --ember and Legendary deliberately SHARE #E0B25A (5a: "context disambiguates"), so #E0B25A is the one rarity-adjacent value allowed anywhere (it is also the sanctioned warm accent). */ :root { color-scheme: dark; /* base & chrome — COLD iron (Post-Pass-8 P1). The base is blue-black / desaturated slate so the shadow is a COLDER temperature than the warm ember accent (the old warm-brown #262C36 iron made the whole UI read sepia). The splash art is cool teal; the UI it opens into is cold, with warm highlights only. R <= B on every chrome value below. */ --void: #08090C; /* app bg / deepest ground */ --panel: #0E1014; /* panel fill */ --panel-raise:#171B22; /* a lifted card / selected row (derived step) */ --inset: #090A0D; /* recessed well / track / disabled (derived step) */ --iron: #262C36; /* 1px iron border — cold slate, NOT brown */ --iron-soft: #1A1E25; /* dimmer border / hairline (derived step) */ --bronze: #8A6A2E; /* the ONE warm chrome: CTA edge / bracket / rule (kept sparingly) */ --bronze-lo: #5E4A22; /* the dark stop of the forged-bronze CTA gradient (derived) */ --ember: #E7A83E; /* the warm accent (GS / CTA edge-glow / energy fill / active nav) — its OWN bronze-amber, DISTINCT from Legendary (no rarity alias). */ --parchment: #E6D5A8; /* headings / world-voice names (the warm text highlight) */ --body: #C3B48E; /* body text */ --muted: #6A6E77; /* dim / tracked micro-labels — cool grey, not sepia brown */ --danger: #C4553E; /* warning / error / defeat-adjacent — a WARM rust, NOT mythic */ /* rarity — reserved, never decorative. NONE may be aliased to a non-rarity token (enforced by tests/test_styles_guard.py). --ember is deliberately its OWN hue now. */ --r-common: #9C927A; --r-uncommon: #5AC67A; --r-rare: #4A9EFF; --r-epic: #A56BFF; --r-legendary:#E0B25A; /* Legendary keeps the canonical gold; ember is now separate */ --r-mythic: #E5484D; /* glow law — two sources only: ember/bronze and item rarity. Nothing else. */ --ember-glow: 0 0 18px -8px rgba(201,154,76,.5); /* type law (5a): Spectral = world-voice (self-hosted below); Plex Sans = interface. */ --serif: 'Spectral', Georgia, 'Times New Roman', serif; --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; } /* Self-hosted type (5a: "self-host both"). Latin woff2, served from web/fonts/ (the whole web/ dir is mounted at / — see main.py). font-display:swap so the Georgia/ system-ui fallbacks in --serif/--sans paint instantly and never block a hunt. */ @font-face { font-family:'Spectral'; font-style:normal; font-weight:400; src:url('fonts/spectral-400.woff2') format('woff2'); font-display:swap; } @font-face { font-family:'Spectral'; font-style:normal; font-weight:600; src:url('fonts/spectral-600.woff2') format('woff2'); font-display:swap; } @font-face { font-family:'Spectral'; font-style:italic; font-weight:400; src:url('fonts/spectral-400i.woff2') format('woff2'); font-display:swap; } @font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600; src:url('fonts/plexsans.woff2') format('woff2'); font-display:swap; } body { margin:0; background:var(--void); color:var(--body); font-family:var(--sans); display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; } /* iOS: 100vh over-counts the URL-bar area; dvh is the visible box */ /* Header strip: energy / gold / dust. Stays fixed in the header across all tabs. */ #strip { display:flex; align-items:center; gap:10px; justify-content:space-between; /* iOS standalone (black-translucent status bar / notch): keep the wallet clear of the status bar + side notch. env() is 0 everywhere except a notched safe-area. */ padding:calc(10px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) 10px calc(14px + env(safe-area-inset-left,0px)); background:#0E1014; border-bottom:1px solid #262C36; font-size:14px; } .ebar { flex:1; height:7px; background:#191D24; border-radius:4px; overflow:hidden; margin:0 2px; } .ebar>div { height:100%; background:linear-gradient(90deg,#8A6A2E,#E7A83E); } #strip .gold { color:#E6D5A8; } #strip .dust { color:#C3B48E; } /* FIX #16 (P2, Trader legibility): "the wallet tick-animates on a completed transaction" — app.js's pulseWallet() toggles .tick after a sell/buy lands. */ @keyframes goldtick { 0%{transform:scale(1)} 35%{transform:scale(1.22);text-shadow:0 0 10px #E6D5A8cc} 100%{transform:scale(1)} } #strip .gold.tick { display:inline-block; animation:goldtick .5s ease; } main { flex:1; padding:16px; max-width:430px; margin:0 auto; width:100%; box-sizing:border-box; } /* ---- FIX #18 (P2, owner playtest): desktop/wide-viewport frame ------------------ "Bloomberg-terminal-meets-anime" -- centers the WHOLE app (header strip included: #strip is a direct `body` child alongside `main`/`#tabs`/`#toast`, so capping BODY's own width pulls the currency strip inside the same bordered column too, not just `main`, which already had its own independent 430px cap above) in a ~480px bordered column with a dark radial vignette glowing behind it. Gated behind a min-width media query: every rule above this block (body's own base flex/background/min-height, #strip, #tabs, main's own 430px cap, the entire rest of this file) is completely UNCHANGED below the breakpoint -- the 390px-first phone layout this file opens with is untouched, verified live at 390px width. No overflow:hidden on body: #reveal/#toast/#itemModal/#screenflash (T20-T23, FIX #13) are position:fixed children of body, and an overflow:hidden ancestor would visually clip those full-viewport overlays -- the frame is a border + shadow only, never a clipping box. */ @media (min-width: 768px) { /* Spec-number normalization (Step-2 item 6): the frame band starts at the committed spec's 768, not the pre-existing 700 — 700–767 viewers now get the mobile layout the spec prescribes for them. */ /* Margin wash layer A (6a): a cool radial vignette filling the gutters — the margins are atmosphere, not void. Layer B (the faint active-zone banner) is #bg-zone, set by JS. */ html { background: radial-gradient(130% 100% at 50% -10%, #10161F 0%, #08090C 62%); } #bg-zone { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06; background-size:cover; background-position:center top; filter:blur(10px); -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); } /* min-height overridden (not just added to) here: body's base rule above is `min-height:100vh` — left as-is, this 24px top+bottom margin would push the panel's total occupied height past 100vh, forcing a scroll just to reach the bottom tab nav (confirmed live before this line was added). calc(100vh - 48px) + the 2×24px margin nets back out to exactly 100vh — keep the pair in step. Item 6: margin snapped to the 4/8/12/16/24/32/48 scale (was 28), the leftover 1px ring dropped, the shadow normalized to the spec lift shadow. */ body { max-width:480px; margin:24px auto; min-height:calc(100vh - 48px); border:1px solid #262C36; box-shadow:0 40px 120px -40px #000; } /* Gold-value truncation guard: at the frame's ~480px width (far narrower than an unbounded desktop window, where #strip previously had unlimited room to grow into and this pressure never existed), a large toLocaleString() gold number ("🪙 1,234,567") competing with the energy bar's own `flex:1` growth could otherwise wrap/squeeze inside the header strip. Only the energy bar (purely decorative) is left free to shrink; the numeric/icon text spans hold their natural single-line width. */ #strip .ico, #strip .eval, #strip .gold, #strip .dust { flex:0 0 auto; white-space:nowrap; } } /* #tabs' own base (mobile bottom-bar) rule — relocated here (content byte-for-byte unchanged, only its position in the file moved) by FIX #7 (P2, cert Day-1 batch T2 desktop polish). Root cause of "nav labels float in huge gaps" at >=1024px: this file's own established convention (see the >=1024px `body` rule's comment directly below) is "equal-specificity conflicts resolve by SOURCE ORDER, later wins" — but this rule used to sit AFTER the >=1024px nav-rail override block below (same "#tabs"/"#tabs button"/"#tabs .on" selectors, equal specificity), so THIS rule's flex:1/padding:12px/font-size:13px/border-top was silently winning the cascade at EVERY width, including >=1024px: each nav-rail button stretched to fill an equal share of the rail's full (grid-row:1fr, very tall) height instead of packing at the top. Moving it to before the >=1024px block restores the intended order, so the desktop override's flex:0 0 auto/padding:13px 22px/font-size:14px/border-top:0 correctly wins there, packing the nav labels into a tight list at the rail's top. Nothing here is gated by any media query, so mobile (<1024px) renders byte-for-byte what it did before — this is a pure reorder, not a content change. */ #tabs { display:flex; border-top:1px solid #262C36; background:#0E1014; padding-bottom:env(safe-area-inset-bottom,0px); } /* iOS: clear the home indicator */ #tabs button { flex:1; padding:12px; background:none; border:0; color:#6A6E77; font-size:13px; } #tabs .on { color:#E7A83E; font-weight:700; } /* ---- T2.2 (desktop layout >=1024px): nav rail + content column + persistent right panel -------------------------------------------------------------------------- SAME DOM as every other breakpoint — no new elements from app.js's own render() path. The only new markup anywhere is index.html's static `