/* ===================================================================== SCRIPTORIUM — ILLUMINATED UI FOUNDATION v1 Production layer for the reusable illuminated design system. Scope of v1: - stable root-navigation markup hooks - six real root screens only - bespoke manuscript-navigation artwork - responsive left rail on desktop/tablet/phone IMPORTANT: This file changes presentation only. Screen IDs, onclick handlers, routing, state, saves and gameplay logic stay unchanged. ===================================================================== */ /* --------------------------------------------------------------------- Markup compatibility for every Design mode. The base stylesheet historically styles every .nav-btn span as an icon; nav-label is now explicit, so keep its original label size. --------------------------------------------------------------------- */ .main-nav .nav-btn .nav-label { font-size: inherit; line-height: 1.12; margin: 0; } .main-nav .nav-btn .nav-art { flex: 0 0 auto; } /* --------------------------------------------------------------------- Illuminated tokens --------------------------------------------------------------------- */ body.design-iluminovana { --illum-nav-leather: #21160f; --illum-nav-leather-2: #342216; --illum-nav-edge: #a77b39; --illum-nav-gold: #d0aa58; --illum-nav-gold-soft: rgba(208, 170, 88, .34); --illum-nav-rubric: #7f2b1c; --illum-nav-paper: #efe0bb; --illum-nav-muted: #b8a98a; --illum-nav-mobile-w: 62px; --illum-nav-tablet-w: 74px; --illum-nav-desktop-w: 96px; --illum-nav-wide-w: 108px; } /* Each root button owns only its visual asset; screen routing is unchanged. */ body.design-iluminovana #nav-home { --illum-nav-art: url('/ui/illuminated/nav/home.webp'); } body.design-iluminovana #nav-garden { --illum-nav-art: url('/ui/illuminated/nav/garden.webp'); } body.design-iluminovana #nav-craft { --illum-nav-art: url('/ui/illuminated/nav/craft.webp'); } body.design-iluminovana #nav-inv { --illum-nav-art: url('/ui/illuminated/nav/inv.webp'); } body.design-iluminovana #nav-lore { --illum-nav-art: url('/ui/illuminated/nav/lore.webp'); } body.design-iluminovana #nav-library { --illum-nav-art: url('/ui/illuminated/nav/library.webp'); } /* --------------------------------------------------------------------- Rail shell — Illuminated only. Unlike Pokorná/Marnivá, portrait/mobile also uses the left manuscript index, matching the approved visual target. --------------------------------------------------------------------- */ body.design-iluminovana .main-nav { position: absolute !important; left: 0 !important; right: auto !important; bottom: 0 !important; top: 80px !important; transform: none !important; width: var(--illum-nav-mobile-w) !important; max-width: none !important; height: auto !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 7px !important; padding: 16px 4px max(14px, env(safe-area-inset-bottom)) !important; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; border: 0 !important; border-right: 1px solid var(--illum-nav-edge) !important; background: linear-gradient(90deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 18%, rgba(0,0,0,0) 76%, rgba(0,0,0,.30) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px), linear-gradient(180deg, var(--illum-nav-leather-2), var(--illum-nav-leather)) !important; box-shadow: inset -1px 0 0 rgba(239,210,143,.07), inset 0 0 26px rgba(0,0,0,.30), 5px 0 16px rgba(26,15,8,.12) !important; z-index: 60 !important; } body.design-iluminovana .main-nav::-webkit-scrollbar { width: 0; height: 0; } /* small manuscript flourishes anchoring the rail */ body.design-iluminovana .main-nav::before, body.design-iluminovana .main-nav::after { content: '❦'; display: block; flex: 0 0 auto; text-align: center; color: var(--illum-nav-gold); font-family: Georgia, serif; font-size: 1rem; line-height: 1; opacity: .72; text-shadow: 0 0 5px rgba(208,170,88,.25); } body.design-iluminovana .main-nav::before { margin: 1px 0 3px; } body.design-iluminovana .main-nav::after { margin: 4px 0 0; transform: rotate(180deg); } /* --------------------------------------------------------------------- Root navigation item --------------------------------------------------------------------- */ body.design-iluminovana .main-nav .nav-btn { position: relative; isolation: isolate; width: 100% !important; min-width: 0; min-height: 72px; box-sizing: border-box; margin: 0 !important; padding: 6px 2px 5px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; border: 1px solid transparent !important; border-radius: 2px !important; background: transparent !important; color: var(--illum-nav-muted) !important; box-shadow: none !important; transform: none !important; font-family: 'Cinzel Decorative', 'Cinzel', serif !important; font-size: .54rem !important; font-weight: 600; letter-spacing: .01em; line-height: 1.08; text-align: center; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.84) !important; cursor: pointer; transition: color 130ms ease, border-color 130ms ease, background 130ms ease, box-shadow 130ms ease !important; } /* Disable the old neon indicator in this Design. */ body.design-iluminovana .main-nav .nav-btn::after { content: none !important; display: none !important; } body.design-iluminovana .main-nav .nav-art { width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: hidden; /* Hide fallback emoji without removing it from the DOM. */ font-size: 0 !important; line-height: 0 !important; color: transparent !important; border: 1px solid #876330 !important; outline: 1px solid rgba(216,180,99,.15); outline-offset: -3px; border-radius: 2px !important; background-image: var(--illum-nav-art) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; box-shadow: inset 0 0 0 1px rgba(54,32,17,.34), inset 0 0 10px rgba(57,34,18,.14), 0 2px 4px rgba(0,0,0,.28) !important; filter: sepia(.13) saturate(.88) brightness(.92); transition: filter 130ms ease, border-color 130ms ease, box-shadow 130ms ease !important; } body.design-iluminovana .main-nav .nav-label { display: block; width: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; } /* Keep the historic CS Script
orium translation as a single word here. */ body.design-iluminovana .main-nav .nav-label br { display: none; } body.design-iluminovana .main-nav .nav-btn:hover:not(:disabled), body.design-iluminovana .main-nav .nav-btn:focus-visible { color: #ead8a5 !important; border-color: rgba(167,123,57,.42) !important; background: linear-gradient(90deg, rgba(167,123,57,.07), rgba(127,43,28,.08)) !important; outline: none; } body.design-iluminovana .main-nav .nav-btn:hover:not(:disabled) .nav-art, body.design-iluminovana .main-nav .nav-btn:focus-visible .nav-art { filter: sepia(.05) saturate(1.02) brightness(1.02); border-color: #b58a46 !important; } /* Active root screen = small illuminated manuscript index card. */ body.design-iluminovana .main-nav .nav-btn.active { color: #f1d480 !important; border-color: rgba(208,170,88,.58) !important; background: linear-gradient(90deg, rgba(115,37,24,.56), rgba(65,28,19,.30) 60%, rgba(208,170,88,.055)) !important; box-shadow: inset 3px 0 0 #c79d4d, inset 0 0 13px rgba(198,151,67,.08), 0 0 7px rgba(208,170,88,.13) !important; text-shadow: 0 0 5px rgba(221,181,91,.38), 0 1px 2px #000 !important; } body.design-iluminovana .main-nav .nav-btn.active .nav-art { border-color: #d3ac58 !important; outline-color: rgba(239,205,120,.35); filter: sepia(.02) saturate(1.08) brightness(1.06); box-shadow: inset 0 0 0 2px rgba(239,204,117,.12), 0 0 8px rgba(211,172,88,.38), 0 2px 5px rgba(0,0,0,.38) !important; } body.design-iluminovana .main-nav .nav-btn:disabled { opacity: .34 !important; filter: grayscale(.88) !important; cursor: not-allowed; } /* --------------------------------------------------------------------- Phone portrait — approved target keeps the manuscript rail on the left. --------------------------------------------------------------------- */ @media (max-width: 600px) { body.design-iluminovana #game-container { max-width: 500px; } body.design-iluminovana header { padding-left: 12px !important; padding-right: 12px !important; } body.design-iluminovana main#main-content { padding-left: calc(var(--illum-nav-mobile-w) + 10px) !important; padding-right: 10px !important; padding-bottom: max(18px, env(safe-area-inset-bottom)) !important; } body.design-iluminovana #notification-area { left: var(--illum-nav-mobile-w) !important; width: calc(100% - var(--illum-nav-mobile-w)) !important; } } /* --------------------------------------------------------------------- Tablet / portrait / narrow desktop --------------------------------------------------------------------- */ @media (min-width: 601px) and (max-width: 767px) { body.design-iluminovana .main-nav { width: var(--illum-nav-tablet-w) !important; gap: 10px !important; padding-left: 6px !important; padding-right: 6px !important; } body.design-iluminovana .main-nav .nav-btn { min-height: 80px; font-size: .58rem !important; } body.design-iluminovana .main-nav .nav-art { width: 48px !important; height: 48px !important; } body.design-iluminovana main#main-content { padding-left: calc(var(--illum-nav-tablet-w) + 14px) !important; padding-bottom: 20px !important; } body.design-iluminovana #notification-area { left: var(--illum-nav-tablet-w) !important; width: calc(100% - var(--illum-nav-tablet-w)) !important; } } /* --------------------------------------------------------------------- Desktop --------------------------------------------------------------------- */ @media (min-width: 768px) { body.design-iluminovana header { /* Header landscape remains full-width and independent of the rail. */ padding-left: 18px !important; } body.design-iluminovana .main-nav { top: 128px !important; width: var(--illum-nav-desktop-w) !important; gap: clamp(10px, 1.65vh, 22px) !important; justify-content: center !important; padding: 20px 6px 18px !important; } body.design-iluminovana .main-nav .nav-btn { min-height: 88px; padding: 7px 4px 6px !important; font-size: .60rem !important; } body.design-iluminovana .main-nav .nav-art { width: 52px !important; height: 52px !important; } body.design-iluminovana main#main-content { padding-left: calc(var(--illum-nav-desktop-w) + 18px) !important; padding-bottom: 20px !important; } body.design-iluminovana #notification-area { left: var(--illum-nav-desktop-w) !important; width: calc(100% - var(--illum-nav-desktop-w)) !important; } } /* --------------------------------------------------------------------- Wide desktop — more breathing room, same six real screens. --------------------------------------------------------------------- */ @media (min-width: 1200px) { body.design-iluminovana #game-container { max-width: 1320px; } body.design-iluminovana .main-nav { width: var(--illum-nav-wide-w) !important; padding-left: 7px !important; padding-right: 7px !important; } body.design-iluminovana .main-nav .nav-btn { min-height: 96px; font-size: .64rem !important; } body.design-iluminovana .main-nav .nav-art { width: 58px !important; height: 58px !important; } body.design-iluminovana main#main-content { padding-left: calc(var(--illum-nav-wide-w) + 20px) !important; } body.design-iluminovana #notification-area { left: var(--illum-nav-wide-w) !important; width: calc(100% - var(--illum-nav-wide-w)) !important; } } /* PWA standalone previously reserves bottom space for the bottom nav. Illuminated uses a side rail, so release that space. */ @media (display-mode: standalone) { body.design-iluminovana main#main-content { padding-bottom: max(18px, env(safe-area-inset-bottom)) !important; } } @media (prefers-reduced-motion: reduce) { body.design-iluminovana .main-nav .nav-btn, body.design-iluminovana .main-nav .nav-art { transition: none !important; } } /* ===================================================================== ILLUMINATED NAVIGATION — RESPONSIVE POLICY v1.1 --------------------------------------------------------------------- PORTRAIT / narrow mobile: - main navigation becomes a horizontal bottom dock - horizontally scrollable when needed LANDSCAPE / tablet / desktop: - illuminated navigation stays as the vertical left rail Presentation only — no IDs, onclick handlers or routing changed. ===================================================================== */ body.design-iluminovana { --illum-bottom-nav-height: 82px; --illum-bottom-nav-item-width: 76px; } /* ===================================================================== MOBILE / NARROW PORTRAIT Bottom horizontal illuminated dock ===================================================================== */ @media (max-width: 900px) and (orientation: portrait) { /* --------------------------------------------------------------- MAIN NAV SHELL --------------------------------------------------------------- */ body.design-iluminovana .main-nav { position: fixed !important; top: auto !important; bottom: 0 !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 100vw !important; max-width: 900px !important; height: calc( var(--illum-bottom-nav-height) + env(safe-area-inset-bottom) ) !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; gap: 5px !important; padding: 6px 7px max(7px, env(safe-area-inset-bottom)) 7px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; border: 0 !important; border-right: 0 !important; border-top: 1px solid var(--illum-nav-edge) !important; background: linear-gradient( 180deg, rgba(255, 255, 255, .025) 0%, rgba(0, 0, 0, .10) 20%, rgba(0, 0, 0, .28) 100% ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 8px ), linear-gradient( 180deg, var(--illum-nav-leather-2), var(--illum-nav-leather) ) !important; box-shadow: inset 0 1px 0 rgba(239, 210, 143, .08), inset 0 0 24px rgba(0, 0, 0, .32), 0 -5px 18px rgba(26, 15, 8, .24) !important; z-index: 650 !important; } body.design-iluminovana .main-nav::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Decorative ❦ made sense on a vertical rail, but would become fake navigation items horizontally. */ body.design-iluminovana .main-nav::before, body.design-iluminovana .main-nav::after { content: none !important; display: none !important; } /* --------------------------------------------------------------- SIX ROOT BUTTONS --------------------------------------------------------------- */ body.design-iluminovana .main-nav .nav-btn { flex: 0 0 var(--illum-bottom-nav-item-width) !important; width: var(--illum-bottom-nav-item-width) !important; min-width: var(--illum-bottom-nav-item-width) !important; height: 66px !important; min-height: 66px !important; margin: 0 !important; padding: 4px 3px 3px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; border: 1px solid rgba(167, 123, 57, .20) !important; border-radius: 3px !important; scroll-snap-align: center; font-size: .50rem !important; line-height: 1.05 !important; transform: none !important; } /* --------------------------------------------------------------- ILLUSTRATED ICON --------------------------------------------------------------- */ body.design-iluminovana .main-nav .nav-art { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; margin: 0 !important; border-radius: 2px !important; } /* --------------------------------------------------------------- LABEL --------------------------------------------------------------- */ body.design-iluminovana .main-nav .nav-label { width: 100%; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; line-height: 1.05 !important; } body.design-iluminovana .main-nav .nav-label br { display: none !important; } /* --------------------------------------------------------------- ACTIVE ROOT TAB Gold top illumination instead of desktop left stripe. --------------------------------------------------------------- */ body.design-iluminovana .main-nav .nav-btn.active { color: #f1d480 !important; border-color: rgba(208, 170, 88, .62) !important; background: linear-gradient( 180deg, rgba(127, 43, 28, .58), rgba(70, 30, 19, .36) ) !important; box-shadow: inset 0 3px 0 #d0aa58, inset 0 0 12px rgba(198, 151, 67, .10), 0 0 7px rgba(208, 170, 88, .15) !important; } body.design-iluminovana .main-nav .nav-btn.active .nav-art { border-color: #d3ac58 !important; box-shadow: inset 0 0 0 2px rgba(239, 204, 117, .11), 0 0 7px rgba(211, 172, 88, .34), 0 2px 4px rgba(0, 0, 0, .35) !important; } /* --------------------------------------------------------------- CONTENT No left rail on portrait mobile anymore. Reserve space below for the fixed dock. --------------------------------------------------------------- */ body.design-iluminovana main#main-content { padding-left: 10px !important; padding-right: 10px !important; padding-bottom: calc( var(--illum-bottom-nav-height) + 18px + env(safe-area-inset-bottom) ) !important; } /* Header again uses the whole width. */ body.design-iluminovana header { padding-left: 10px !important; padding-right: 10px !important; } /* Toast area no longer needs to avoid a left sidebar. */ body.design-iluminovana #notification-area { left: 0 !important; width: 100% !important; } /* --------------------------------------------------------------- FLOATING UI Keep it above the bottom dock. --------------------------------------------------------------- */ body.design-iluminovana #canonical-badge { bottom: calc( var(--illum-bottom-nav-height) + 10px + env(safe-area-inset-bottom) ) !important; } body.design-iluminovana .ns-panel-tab { bottom: calc( var(--illum-bottom-nav-height) + 10px + env(safe-area-inset-bottom) ) !important; } body.design-iluminovana .tutorial-guide-bar { bottom: calc( var(--illum-bottom-nav-height) + 12px + env(safe-area-inset-bottom) ) !important; } } /* ===================================================================== VERY NARROW PHONES Slightly smaller items; still scrollable. ===================================================================== */ @media (max-width: 380px) and (orientation: portrait) { body.design-iluminovana { --illum-bottom-nav-item-width: 70px; } body.design-iluminovana .main-nav .nav-btn { font-size: .46rem !important; } body.design-iluminovana .main-nav .nav-art { width: 37px !important; height: 37px !important; flex-basis: 37px !important; } } /* ===================================================================== SHORT MOBILE LANDSCAPE Keep the left rail, but make it compact and vertically scrollable. ===================================================================== */ @media (max-width: 767px) and (orientation: landscape) { body.design-iluminovana .main-nav { position: absolute !important; top: 80px !important; bottom: 0 !important; left: 0 !important; right: auto !important; transform: none !important; width: 68px !important; height: auto !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; gap: 6px !important; padding: 8px 4px max(8px, env(safe-area-inset-bottom)) !important; overflow-x: hidden !important; overflow-y: auto !important; border-top: 0 !important; border-right: 1px solid var(--illum-nav-edge) !important; } body.design-iluminovana .main-nav::before, body.design-iluminovana .main-nav::after { display: block !important; } body.design-iluminovana .main-nav .nav-btn { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; min-height: 66px !important; padding: 4px 2px !important; font-size: .48rem !important; scroll-snap-align: none; } body.design-iluminovana .main-nav .nav-art { width: 38px !important; height: 38px !important; } body.design-iluminovana main#main-content { padding-left: 80px !important; padding-right: 10px !important; padding-bottom: max( 14px, env(safe-area-inset-bottom) ) !important; } body.design-iluminovana #notification-area { left: 68px !important; width: calc(100% - 68px) !important; } } /* ===================================================================== PWA STANDALONE — PORTRAIT Old base CSS reserves extra bottom space for the historical nav. Use our illuminated dock dimensions instead. ===================================================================== */ @media (display-mode: standalone) and (max-width: 900px) and (orientation: portrait) { body.design-iluminovana main#main-content { padding-bottom: calc( var(--illum-bottom-nav-height) + 20px + env(safe-area-inset-bottom) ) !important; } } /* ===================================================================== ILLUMINATED MAIN RAIL — MOBILE FIT-ALL REFINEMENT v1.2 --------------------------------------------------------------------- Goal: - on common portrait phones (375–430 px wide), show all 6 main tabs immediately without initial horizontal scrolling - keep icons readable - if viewport becomes smaller, allow horizontal scroll as fallback ===================================================================== */ /* Shared tokens for illuminated mobile dock */ body.design-iluminovana { --illum-bottom-nav-height: 74px; --illum-bottom-nav-gap: 2px; --illum-bottom-nav-sidepad: 4px; } /* ===================================================================== COMMON MOBILE BOTTOM DOCK ===================================================================== */ @media (max-width: 900px) and (orientation: portrait) { body.design-iluminovana .main-nav { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: calc(var(--illum-bottom-nav-height) + env(safe-area-inset-bottom)) !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: var(--illum-bottom-nav-gap) !important; padding: 4px var(--illum-bottom-nav-sidepad) calc(4px + env(safe-area-inset-bottom)) var(--illum-bottom-nav-sidepad) !important; border: 0 !important; border-top: 1px solid var(--illum-nav-edge) !important; border-right: 0 !important; background: linear-gradient( 180deg, rgba(255,255,255,.025) 0%, rgba(0,0,0,.10) 18%, rgba(0,0,0,.30) 100% ), linear-gradient( 180deg, var(--illum-nav-leather-2), var(--illum-nav-leather) ) !important; box-shadow: inset 0 1px 0 rgba(239,210,143,.07), inset 0 0 24px rgba(0,0,0,.30), 0 -5px 14px rgba(18,10,6,.26) !important; overflow-y: hidden !important; z-index: 650 !important; } body.design-iluminovana .main-nav::before, body.design-iluminovana .main-nav::after { display: none !important; content: none !important; } body.design-iluminovana main#main-content { padding-left: 8px !important; padding-right: 8px !important; padding-bottom: calc(var(--illum-bottom-nav-height) + 16px + env(safe-area-inset-bottom)) !important; } body.design-iluminovana header { padding-left: 8px !important; padding-right: 8px !important; } body.design-iluminovana #notification-area { left: 0 !important; width: 100% !important; } body.design-iluminovana #canonical-badge, body.design-iluminovana .ns-panel-tab, body.design-iluminovana .tutorial-guide-bar { bottom: calc(var(--illum-bottom-nav-height) + 10px + env(safe-area-inset-bottom)) !important; } } /* ===================================================================== PRIMARY TARGET: 360–430 px portrait phones Show ALL 6 items immediately, no initial scroll ===================================================================== */ @media (min-width: 360px) and (max-width: 430px) and (orientation: portrait) { body.design-iluminovana .main-nav { justify-content: space-between !important; overflow-x: hidden !important; scrollbar-width: none !important; } body.design-iluminovana .main-nav::-webkit-scrollbar { display: none !important; } body.design-iluminovana .main-nav .nav-btn { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 64px !important; min-height: 64px !important; margin: 0 !important; padding: 3px 2px 2px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1px !important; border: 1px solid rgba(167,123,57,.20) !important; border-radius: 2px !important; transform: none !important; box-sizing: border-box !important; } /* Mobile-first icon treatment: keep the illuminated art, but make it more readable by giving it slightly better contrast and a clean fixed box. */ body.design-iluminovana .main-nav .nav-art { width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important; flex: 0 0 31px !important; margin: 0 0 1px 0 !important; border-radius: 2px !important; object-fit: cover !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.25) !important; } body.design-iluminovana .main-nav .nav-label { width: 100% !important; margin: 0 !important; font-size: 0.48rem !important; line-height: 0.95 !important; letter-spacing: 0.01em !important; text-align: center !important; white-space: normal !important; overflow: hidden !important; text-overflow: clip !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; max-height: 1.95em !important; } /* Allow intentional label line breaks if they exist */ body.design-iluminovana .main-nav .nav-label br { display: block !important; } /* active state remains obvious even in compact mode */ body.design-iluminovana .main-nav .nav-btn.active { color: #f1d480 !important; border-color: rgba(208,170,88,.65) !important; background: linear-gradient( 180deg, rgba(127,43,28,.56), rgba(70,30,19,.34) ) !important; box-shadow: inset 0 2px 0 #d0aa58, inset 0 0 10px rgba(198,151,67,.10), 0 0 6px rgba(208,170,88,.12) !important; } body.design-iluminovana .main-nav .nav-btn.active .nav-art { border-color: #d3ac58 !important; box-shadow: inset 0 0 0 1px rgba(239,204,117,.10), 0 0 6px rgba(211,172,88,.30), 0 1px 3px rgba(0,0,0,.35) !important; } } /* ===================================================================== SMALLER THAN 360 px Fall back to horizontal scroll ===================================================================== */ @media (max-width: 359px) and (orientation: portrait) { body.design-iluminovana .main-nav { justify-content: flex-start !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; scroll-snap-type: x proximity !important; scrollbar-width: none !important; } body.design-iluminovana .main-nav::-webkit-scrollbar { display: none !important; } body.design-iluminovana .main-nav .nav-btn { flex: 0 0 58px !important; width: 58px !important; min-width: 58px !important; max-width: 58px !important; height: 64px !important; min-height: 64px !important; padding: 3px 2px 2px !important; gap: 1px !important; scroll-snap-align: center !important; } body.design-iluminovana .main-nav .nav-art { width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important; flex-basis: 31px !important; } body.design-iluminovana .main-nav .nav-label { font-size: 0.47rem !important; line-height: 0.94 !important; -webkit-line-clamp: 2 !important; max-height: 1.9em !important; } } /* ===================================================================== 431–900 px portrait Can afford slightly roomier items. Keep scroll available for future expansion. ===================================================================== */ @media (min-width: 431px) and (max-width: 900px) and (orientation: portrait) { body.design-iluminovana .main-nav { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; scroll-snap-type: x proximity !important; scrollbar-width: none !important; } body.design-iluminovana .main-nav::-webkit-scrollbar { display: none !important; } body.design-iluminovana .main-nav .nav-btn { flex: 0 0 66px !important; width: 66px !important; min-width: 66px !important; max-width: 66px !important; height: 66px !important; min-height: 66px !important; padding: 4px 3px 3px !important; gap: 2px !important; scroll-snap-align: center !important; } body.design-iluminovana .main-nav .nav-art { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; flex-basis: 34px !important; } body.design-iluminovana .main-nav .nav-label { font-size: 0.50rem !important; line-height: 0.98 !important; white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; max-height: 2em !important; } } /* ===================================================================== SHORT MOBILE LANDSCAPE Keep left vertical rail, compact ===================================================================== */ @media (max-width: 767px) and (orientation: landscape) { body.design-iluminovana .main-nav { position: absolute !important; top: 80px !important; bottom: 0 !important; left: 0 !important; right: auto !important; transform: none !important; width: 68px !important; height: auto !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; gap: 6px !important; padding: 8px 4px max(8px, env(safe-area-inset-bottom)) !important; overflow-x: hidden !important; overflow-y: auto !important; border-top: 0 !important; border-right: 1px solid var(--illum-nav-edge) !important; } body.design-iluminovana .main-nav::before, body.design-iluminovana .main-nav::after { display: block !important; } body.design-iluminovana .main-nav .nav-btn { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; min-height: 66px !important; padding: 4px 2px !important; font-size: 0.48rem !important; } body.design-iluminovana .main-nav .nav-art { width: 38px !important; height: 38px !important; } body.design-iluminovana main#main-content { padding-left: 80px !important; padding-right: 10px !important; padding-bottom: max(14px, env(safe-area-inset-bottom)) !important; } body.design-iluminovana #notification-area { left: 68px !important; width: calc(100% - 68px) !important; } } /* ===================================================================== ILLUMINATED MOBILE HEADER — CONTINUITY FIX v1.3 --------------------------------------------------------------------- 1. Protect header utility icons against flex deformation. 2. Extend the landscape header behind both mobile pill rows. 3. Remove the artificial empty band before main content. 4. Fade the landscape naturally into the active Theme background. Presentation only. ===================================================================== */ /* --------------------------------------------------------------------- HEADER ICON GEOMETRY The question mark must always remain a true circle. --------------------------------------------------------------------- */ body.design-iluminovana #tutorial-help-btn.help-question-btn { width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; min-height: 30px !important; max-height: 30px !important; flex: 0 0 30px !important; flex-shrink: 0 !important; aspect-ratio: 1 / 1 !important; padding: 0 !important; margin-right: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; border-radius: 50% !important; line-height: 1 !important; } /* Protect the other fixed-size header controls as well. */ body.design-iluminovana .logo-container > svg { flex: 0 0 28px !important; width: 28px !important; height: 28px !important; } body.design-iluminovana #sound-toggle-btn, body.design-iluminovana #settings-btn { flex-shrink: 0 !important; } /* ===================================================================== PORTRAIT MOBILE HEADER ===================================================================== */ @media (max-width: 900px) and (orientation: portrait) { /* Pills are fixed at ~55px from the top and may wrap to two rows. Keep the actual landscape image behind the whole area instead of letting it end after the logo row. */ body.design-iluminovana header { position: sticky !important; height: 120px !important; min-height: 120px !important; padding-top: 6px !important; padding-bottom: 0 !important; overflow: visible !important; } /* Natural transition: landscape → current parchment/theme background. Because --bg-parchment changes with Theme, this works for light, dark, night, seasonal themes etc. */ body.design-iluminovana header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, color-mix( in srgb, var(--bg-parchment) 38%, transparent ) 55%, var(--bg-parchment) 100% ); z-index: 2; } /* header-content is already z-index 3, so logo/buttons remain above the fade. */ body.design-iluminovana .header-content { position: relative !important; z-index: 3 !important; } /* IMPORTANT: Old mobile layout reserves 70px padding above the page because pills used to sit outside the visual header. They now live visually over the extended landscape, therefore this large spacer is no longer needed. */ body.design-iluminovana main#main-content { padding-top: 10px !important; background-color: var(--bg-parchment) !important; } /* Keep the pill layer above the landscape and above the fade. */ body.design-iluminovana #pills-bar { z-index: 9999 !important; } } /* ===================================================================== SHORTER PHONES iPhone SE class displays need a couple more pixels because the status bar tends to wrap more readily. ===================================================================== */ @media (max-width: 380px) and (orientation: portrait) { body.design-iluminovana header { height: 124px !important; min-height: 124px !important; } body.design-iluminovana main#main-content { padding-top: 8px !important; } }