/* Anzol de Estrelas — css/style.css (the only stylesheet; owner WP12a) * Pixel-art DOM skin (design-art §12, SPEC §9.4–9.9, §10.12). Sections: * tokens · reset · app grid (wide / narrow) · skin frames (.sk-*) · text helpers · components (.ui-*) · tabs · dock · * stage + HUD (.hud-*) · narrow action strip + card bar · modals · toasts · tooltip · tutorial bubble · modal contents · * accessibility modes (reduced motion, high contrast) · boot/debug/test/gallery pages. * One skin pixel = var(--u) = --ui-px CSS px (an integer number of device px, set by G.ui.layout). Frames are 18×18 * canvases (slice 6) painted by G.ui.skin; until they exist (or if painting fails) the token colours below are the * plain fallback. Standards + quirks mode safe: explicit html/body height, units everywhere, no % heights of auto parents. */ /* ============================================================================================== tokens */ :root { --ui-px: 2; --u: calc(1px * var(--ui-px)); --c-ink: #2e1c2b; --c-ink-2: #140c1c; --c-paper: #f4e2bc; --c-paper-hi: #fff6e0; --c-paper-lo: #e0c498; --c-wood: #6d3e2a; --c-wood-dk: #54281e; --c-wood-lt: #8a5a3a; --c-wood-deep: #2c160f; --c-gold: #f2b832; --c-gold-hi: #fff0a8; --c-money: #fedb70; --c-teal: #2ea094; --c-good: #6cc86a; --c-good-dk: #2f7d32; --c-bad: #e8402e; --c-bad-dk: #b8302a; --c-warn: #f2a12a; --c-text-dark: #2e1c2b; --c-text-mid: #6a4a3e; --c-text-light: #fff1d6; --c-muted: #b8b0d8; --c-income: #8ff0b0; --c-chip: rgba(24, 18, 48, .82); --c-night: #0b0a16; --c-shadow: #120a1c; --r-common: #b8c0c8; --r-uncommon: #6cc86a; --r-rare: #4aa8f0; --r-epic: #b86af0; --r-legendary: #f0b23a; --r-mythic: #ff6ab0; /* DOM text = the game's own bitmap fonts (js/gfx/font.js) compiled to css/fonts.css by tools/build-webfont.js (SPEC §9.5/§10.12). Rule: one font pixel = one skin pixel, so font-size = H × --ui-px and every stem lands on whole device pixels. Three tiers only: title (H 14) · body (H 10) · small (H 8). Weight 400 only, never italic, no letter-spacing. --fs-cap / --fs-tiny are kept as aliases of the small tier; --fw-* stay 400 (legacy tokens). G.ui.layout republishes the sizes on (and on the dock when it has its own skin px). */ --font-title: 'Anzol Title', 'Anzol Body', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif; --font-body: 'Anzol Body', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif; --font-small: 'Anzol Small', 'Anzol Body', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif; --font-ui: var(--font-body); --fs-body: calc(10px * var(--ui-px)); --fs-title: calc(14px * var(--ui-px)); --fs-small: calc(8px * var(--ui-px)); --fs-cap: var(--fs-small); --fs-tiny: var(--fs-small); --fw-b: 400; --fw-c: 400; --fw-t: 400; --fw-y: 400; --sh: 0 var(--u) 0 var(--c-shadow); /* 1-skin-px drop shadow for light text */ --sh-paper: 0 var(--u) 0 rgba(255, 250, 240, .9); --tabs-w: 64px; --tabs-h: calc(52px + env(safe-area-inset-bottom, 0px)); /* the dock is sized in skin px (160–230), so 1920 windows and uiScale 1.25/1.5 give the panels the room they were drawn for; G.ui.layout lowers --dock-px (the dock's own skin px) when even 160 would take > 36 % of the window */ --dock-px: var(--ui-px); /* --dock-pref: 30vw at 100 %, up to the dock's share of the window at 125 / 150 % (G.ui.layout --dock-pref) */ --dock-w: clamp(calc(160px * var(--dock-px)), var(--dock-pref, 30vw), calc(230px * var(--dock-px))); --strip-h: 48px; --b: calc(6px * var(--ui-px)); /* skin border width */ } /* ============================================================================================== reset */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--c-night); } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.25; color: var(--c-text-light); /* bitmap faces have one weight and no slant: never fake bold/italic (it smears the 1-px strokes) */ font-synthesis: none; font-kerning: none; letter-spacing: 0; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; /* Pixelify Sans' "fi"/"fl" ligatures draw "fim" as "Am": off everywhere (feature-settings survive a `font:` shorthand) */ font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0; } button { font: inherit; color: inherit; cursor: pointer; margin: 0; } button:disabled { cursor: not-allowed; } input, textarea, select { font: inherit; } h1, h2, h3, h4, p { margin: 0; } h1, h2, h3, h4, h5, h6, b, strong, th { font-weight: var(--fw-b); } img, canvas { max-width: 100%; display: block; } /* standards-mode safe (no inline-image line-height gaps) */ [hidden] { display: none !important; } :focus { outline: none; } :focus-visible { outline: var(--u) solid #fff6c0; outline-offset: var(--u); } .app button:focus-visible, .modal-root button:focus-visible { outline: calc(2px * var(--ui-px)) solid #fff6c0; outline-offset: 0; } /* ============================================================================================== app grid */ .app { position: fixed; inset: 0; display: grid; overflow: hidden; background: var(--c-night); } .app > * { min-width: 0; min-height: 0; } /* wide: [stage 1fr][tabs 64px][dock] (SPEC §9.5) */ .app[data-layout="wide"] { grid-template-columns: minmax(0, 1fr) var(--tabs-w) var(--dock-w); grid-template-rows: 100%; grid-template-areas: "stage tabs dock"; height: 100vh; height: 100dvh; } /* narrow (rev2, D33): stage fitted to the canvas, 48-px action strip, dock bottom sheet, 9 icon-only tabs */ .app[data-layout="narrow"] { grid-template-columns: 100%; grid-template-rows: var(--stage-fit-h, clamp(300px, 50dvh, 460px)) var(--strip-h) minmax(0, 1fr) var(--tabs-h); grid-template-areas: "stage" "strip" "dock" "tabs"; height: 100vh; height: 100dvh; } .app[data-layout="narrow"].is-collapsed { grid-template-rows: minmax(0, 1fr) var(--strip-h) auto var(--tabs-h); } /* narrow bottom sheet, 3rd detent: browsing a panel (Loja, Tripulação, Diário…) the sheet rises over the stage and the strip to ~76 % of the screen; the stage stays laid out (no canvas resize) and dims under a scrim — a tap on it brings the sheet back to its default height (and never casts) */ .sheet-scrim { display: none; } .app[data-layout="narrow"].is-expanded .sheet-scrim { display: block; grid-column: 1; grid-row: stage-start / dock-end; z-index: 4; cursor: pointer; background: linear-gradient(rgba(10, 6, 22, .25), rgba(10, 6, 22, .62)); } .app[data-layout="narrow"].is-expanded .dock { grid-row: stage-start / dock-end; align-self: end; height: min(100%, 76vh); height: min(100%, 76dvh); z-index: 5; animation: sheet-up .2s steps(4, end); } .app[data-layout="wide"] .strip { display: none; } /* ============================================================================================== skin frames */ /* border-image: var(--skin-x) 6 fill / calc(6px * var(--ui-px)) round (SPEC §10.12). An undefined --skin-x makes the source invalid -> none -> the fallback colours below show (border-color + background + stepped outline). */ .sk { border-style: solid; border-width: var(--b); border-color: var(--c-paper); border-image-slice: 6 fill; border-image-width: 1; border-image-repeat: round; border-image-outset: 0; image-rendering: pixelated; background-clip: border-box; } .sk-panel { border-image-source: var(--skin-panel); border-color: var(--c-wood-lt); background-color: var(--c-wood); box-shadow: 0 0 0 var(--u) var(--c-ink); } .sk-card { border-image-source: var(--skin-card); border-color: #fbeed2; background-color: #fbeed2; box-shadow: 0 0 0 var(--u) var(--c-ink); } .sk-stone { border-image-source: var(--skin-stone); border-color: #5a6a86; background-color: #424c66; box-shadow: 0 0 0 var(--u) #1d1d33; } .sk-slot { border-image-source: var(--skin-slot); border-color: #e8d4a8; background-color: #e8d4a8; box-shadow: inset 0 0 0 var(--u) #b8864a; } .sk-chip { border-image-source: var(--skin-chip); border-color: rgba(24, 18, 48, .82); background-color: rgba(24, 18, 48, .82); box-shadow: 0 0 0 var(--u) #140c22; } .sk-tooltip { border-image-source: var(--skin-tooltip); border-color: rgba(24, 18, 48, .94); background-color: rgba(24, 18, 48, .94); } .sk-paper { border-image-source: var(--skin-paper); border-color: #fbf1dc; background-color: #fbf1dc; } .sk-ribbon { border-image-source: var(--skin-ribbon); border-color: #c84a3a; background-color: #c84a3a; } html.skin-on .sk { background-color: transparent; box-shadow: none; } /* ============================================================================================== text helpers */ .ui-title { font-family: var(--font-title); font-size: var(--fs-title); font-weight: var(--fw-t); line-height: 1.1; } .ui-small { font-family: var(--font-small); font-size: var(--fs-small); } .ui-tiny { font-family: var(--font-small); font-size: var(--fs-small); } .ui-muted { color: var(--c-text-mid); } .ui-good { color: var(--c-good-dk); } .ui-bad { color: var(--c-bad-dk); } .ui-gold { color: #9a5a10; } .ui-center { text-align: center; } .ui-row { display: flex; align-items: center; gap: calc(3px * var(--ui-px)); min-width: 0; } .ui-row--wrap { flex-wrap: wrap; } .ui-col { display: flex; flex-direction: column; gap: calc(3px * var(--ui-px)); min-width: 0; } .ui-spacer { flex: 1 1 auto; } .ui-list { display: flex; flex-direction: column; gap: calc(2px * var(--ui-px)); min-width: 0; } .ui-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(28px * var(--ui-px)), 1fr)); gap: calc(2px * var(--ui-px)); } .ui-scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; } .dark-text, .sk-card, .sk-slot, .sk-paper { color: var(--c-text-dark); } .sk-panel .ui-muted, .sk-chip .ui-muted, .sk-stone .ui-muted { color: var(--c-muted); } .sk-card .ui-muted, .sk-paper .ui-muted, .sk-slot .ui-muted { color: var(--c-text-mid); } /* after: a card inside a panel wins */ /* ============================================================================================== components */ /* icons (G.ui.c.icon): --px = size at --ui-px 2; displayed at px/2 skin px */ .px-icon { --px: 32; width: calc(var(--px) * 0.5px * var(--ui-px)); height: calc(var(--px) * 0.5px * var(--ui-px)); flex: 0 0 auto; image-rendering: pixelated; image-rendering: crisp-edges; user-select: none; -webkit-user-drag: none; max-width: none; } .px-icon--empty { visibility: hidden; } /* buttons: gold primary · teal secondary · danger · plain parchment (design-art §12.2) */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(3px * var(--ui-px)); min-height: 44px; min-width: 44px; padding: 0 calc(2px * var(--ui-px)); font-weight: var(--fw-b); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.1; white-space: nowrap; text-align: center; color: #2a1408; text-shadow: 0 var(--u) 0 rgba(255, 240, 168, .7); background: none; user-select: none; position: relative; touch-action: manipulation; } .ui-btn > .px-icon { margin: calc(-4px * var(--ui-px)) 0 calc(-4px * var(--ui-px)) calc(-3px * var(--ui-px)); } .ui-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ui-btn--icononly > .px-icon { margin: calc(-4px * var(--ui-px)); } .ui-btn--block { display: flex; width: 100%; } .ui-btn--small { min-height: 36px; font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); } .ui-btn--gold { border-image-source: var(--skin-btn); border-color: var(--c-gold); background-color: var(--c-gold); box-shadow: 0 0 0 var(--u) #2a1408; } .ui-btn--gold:hover:not(:disabled) { border-image-source: var(--skin-btnHover); } .ui-btn--gold:active:not(:disabled) { border-image-source: var(--skin-btnDown); } .ui-btn--teal { border-image-source: var(--skin-btnTeal); border-color: var(--c-teal); background-color: var(--c-teal); color: #fff1d6; box-shadow: 0 0 0 var(--u) #1a2a2e; /* cream on teal is ~3:1: a 1-px dark pixel outline + drop keeps labels ≥ 4.5:1 against their edge (SPEC §9.9) */ text-shadow: 1px 0 0 #134440, -1px 0 0 #134440, 0 -1px 0 #134440, 0 1px 0 #134440, 0 var(--u) 0 #0e3431; } .ui-btn--teal:hover:not(:disabled) { border-image-source: var(--skin-btnTealHover); } .ui-btn--teal:active:not(:disabled), .ui-btn--teal.is-on { border-image-source: var(--skin-btnTealDown); } .ui-btn--danger { border-image-source: var(--skin-btnDanger); border-color: #d8383a; background-color: #d8383a; color: #fff1d6; box-shadow: 0 0 0 var(--u) #2a0a10; text-shadow: 1px 0 0 #6a0a24, -1px 0 0 #6a0a24, 0 -1px 0 #6a0a24, 0 1px 0 #6a0a24, 0 var(--u) 0 #4a0020; } .ui-btn--danger:hover:not(:disabled) { border-image-source: var(--skin-btnDangerHover); } .ui-btn--danger:active:not(:disabled) { border-image-source: var(--skin-btnDangerDown); } .ui-btn--plain { border-image-source: var(--skin-btnPlain); border-color: var(--c-paper); background-color: var(--c-paper); color: var(--c-ink); text-shadow: var(--sh-paper); box-shadow: 0 0 0 var(--u) var(--c-ink); } .ui-btn--plain:hover:not(:disabled) { border-image-source: var(--skin-btnPlainHover); } .ui-btn--plain:active:not(:disabled) { border-image-source: var(--skin-btnPlainDown); } .ui-btn:active:not(:disabled) { transform: translateY(var(--u)); } .ui-btn:disabled, .ui-btn:disabled:hover { border-image-source: var(--skin-btnOff); border-color: #5e5a6e; background-color: #5e5a6e; color: #d8d4e2; text-shadow: 0 var(--u) 0 #2a2436; } html.skin-on .ui-btn { background-color: transparent; box-shadow: none; } .ui-btn:disabled .px-icon { filter: grayscale(.7) brightness(.9); } /* bars (barTrack skin, segmented fill 6+2 px, 2-px top highlight) */ .ui-bar { position: relative; display: flex; align-items: center; gap: calc(2px * var(--ui-px)); min-width: 0; } .ui-bar__track { position: relative; flex: 1 1 auto; min-width: calc(16px * var(--ui-px)); height: calc(5px * var(--ui-px)); background: #3a2430; box-shadow: 0 0 0 var(--u) #5a3a2a, 0 0 0 calc(2px * var(--ui-px)) #2e1c2b, inset 0 var(--u) 0 #2a1a24; margin: calc(2px * var(--ui-px)); overflow: hidden; } .ui-bar__fill { --f1: #8ff0a0; --f2: #4cc070; --f3: #2f8a4a; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(var(--f1) 0 calc(1px * var(--ui-px)), transparent calc(1px * var(--ui-px))), repeating-linear-gradient(90deg, var(--f2) 0 calc(6px * var(--ui-px)), var(--f3) calc(6px * var(--ui-px)) calc(7px * var(--ui-px))); transition: width .25s steps(4, end); } .ui-bar--gold .ui-bar__fill { --f1: #fff0a8; --f2: #f2b832; --f3: #c47a1a; } .ui-bar--blue .ui-bar__fill { --f1: #9ee1ff; --f2: #4aa8f0; --f3: #2c6aa8; } .ui-bar--red .ui-bar__fill { --f1: #ffa77f; --f2: #e8402e; --f3: #9a1e2a; } .ui-bar--violet .ui-bar__fill { --f1: #e2a2ee; --f2: #a86ae0; --f3: #6a36a0; } .ui-bar--teal .ui-bar__fill { --f1: #93d4d0; --f2: #2ea094; --f3: #1f6a6a; } .ui-bar--small .ui-bar__track { height: calc(3px * var(--ui-px)); } .ui-bar__label { flex: 0 0 auto; font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); white-space: nowrap; } /* price tag */ .ui-price { display: inline-flex; align-items: center; gap: calc(3px * var(--ui-px)); white-space: nowrap; } .ui-price__part { display: inline-flex; align-items: center; gap: var(--u); } .ui-price__part .px-icon { --px: 24 !important; margin: calc(-2px * var(--ui-px)) 0; } .ui-price__v { font-weight: inherit; } .ui-price.is-poor .ui-price__v { color: #b8302a; text-shadow: none; } .ui-btn:disabled .ui-price.is-poor .ui-price__v { color: #ffb0a0; text-shadow: 0 var(--u) 0 #2a2436; } /* badges (NOVO, hot, rarity chips with glyphs) */ .ui-badge { display: inline-flex; align-items: center; gap: var(--u); padding: 0 calc(2px * var(--ui-px)); height: calc(8px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-y); line-height: 1; white-space: nowrap; text-transform: uppercase; color: #fff; background: #5a4a86; text-shadow: 0 var(--u) 0 rgba(20, 12, 28, .55); box-shadow: 0 0 0 var(--u) #140c1c, inset 0 var(--u) 0 rgba(255, 255, 255, .35), inset 0 calc(-1px * var(--ui-px)) 0 rgba(0, 0, 0, .25); margin: var(--u); } .ui-badge--new, .ui-badge--hot { background: #c84a3a; } .ui-badge--good { background: #3f9a4a; } .ui-badge--gold { background: #d8901e; } .ui-badge--teal { background: #1f8a80; } .ui-badge--muted { background: #6a6478; } .ui-badge--info { background: #5a4a86; } .ui-badge--rarity { text-transform: none; color: #140c1c; text-shadow: 0 var(--u) 0 rgba(255, 255, 255, .45); } .ui-badge--common { background: var(--r-common); } .ui-badge--uncommon { background: var(--r-uncommon); } .ui-badge--rare { background: var(--r-rare); } .ui-badge--epic { background: var(--r-epic); } .ui-badge--legendary { background: var(--r-legendary); } .ui-badge--mythic { background: linear-gradient(90deg, #ff6ab0, #ffb03a, #f4e05a, #6af0a8, #4aa8f0, #b86af0); } .ui-badge__glyph { font-style: normal; font-size: 1.1em; } html.no-glyphs .ui-badge__glyph, html.no-glyphs .r-glyph { display: none; } .ui-dot { position: absolute; top: calc(1px * var(--ui-px)); right: calc(1px * var(--ui-px)); width: calc(3px * var(--ui-px)); height: calc(3px * var(--ui-px)); background: #e8402e; box-shadow: 0 0 0 var(--u) #140c1c, inset var(--u) var(--u) 0 #ffa77f; pointer-events: none; } /* sub-tabs (shop kinds, Diário sections) */ .ui-subtabs { display: flex; flex-wrap: wrap; gap: var(--u); margin: 0 0 calc(3px * var(--ui-px)); } .ui-subtab { position: relative; display: inline-flex; align-items: center; gap: var(--u); min-height: 40px; padding: 0 var(--u); border-image-source: var(--skin-tab); border-color: #322a5c; background-color: #322a5c; color: #e6dcff; font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); text-shadow: var(--sh); flex: 0 0 auto; } .ui-subtab > .px-icon { --px: 32; margin: calc(-4px * var(--ui-px)) calc(-2px * var(--ui-px)); } .ui-subtab:hover { border-image-source: var(--skin-tabHover); } .ui-subtab.is-on { border-image-source: var(--skin-tabOn); border-color: var(--c-paper); background-color: var(--c-paper); color: var(--c-ink); text-shadow: var(--sh-paper); transform: translateY(calc(-1px * var(--ui-px))); } html.skin-on .ui-subtab { background-color: transparent; } /* segmented (×1/×10/Próx./Máx) */ .ui-seg { display: inline-flex; padding: var(--u); gap: var(--u); background: #2c160f; box-shadow: 0 0 0 var(--u) #140c1c, inset 0 var(--u) 0 #1a0c08; } .ui-seg__opt { min-height: 36px; min-width: 40px; padding: 0 calc(3px * var(--ui-px)); border: 0; background: #54281e; color: #e8c8a0; font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); text-shadow: var(--sh); box-shadow: inset 0 var(--u) 0 #7a4a32; } .ui-seg__opt:hover { background: #6d3e2a; } .ui-seg__opt.is-on { background: var(--c-gold); color: #2a1408; text-shadow: 0 var(--u) 0 rgba(255, 240, 168, .7); box-shadow: inset 0 var(--u) 0 #fff0a8, inset 0 calc(-1px * var(--ui-px)) 0 #a8601a; } /* offer rows (design-art §12.4 upgrade card row) */ /* icon well · text · price button in one row; when the text column would get narrower than ~110 skin px (narrow dock, uiScale 1.5) the button wraps under the text, right-aligned, instead of squeezing it to a word per line */ .ui-offer { display: flex; flex-wrap: wrap; align-items: center; gap: calc(2px * var(--ui-px)) calc(3px * var(--ui-px)); min-height: calc(32px * var(--ui-px)); } .ui-offer__well { flex: 0 0 auto; display: grid; place-items: center; width: calc(26px * var(--ui-px)); height: calc(26px * var(--ui-px)); margin: calc(-3px * var(--ui-px)) 0 calc(-3px * var(--ui-px)) calc(-2px * var(--ui-px)); } .ui-offer__well .px-icon { --px: 48 !important; margin: calc(-6px * var(--ui-px)); } .ui-offer__info { flex: 1 1 calc(110px * var(--ui-px)); min-width: 0; display: flex; flex-direction: column; gap: 0; } .ui-offer > .ui-offer__btn { flex: 0 0 auto; margin-left: auto; } .ui-offer__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 calc(2px * var(--ui-px)); } .ui-offer__name { font-weight: var(--fw-b); color: var(--c-ink); overflow-wrap: anywhere; } .ui-offer__lvl { font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); color: var(--c-good-dk); } .ui-offer__badge .ui-badge { margin: 0; transform: translateY(calc(-1px * var(--ui-px))); } .ui-offer__desc { font-family: var(--font-small); font-size: var(--fs-small); color: var(--c-text-mid); line-height: 1.2; } .ui-offer__stats { font-family: var(--font-small); font-size: var(--fs-small); color: #3a5a2a; font-weight: var(--fw-c); line-height: 1.2; } .ui-offer__diff { font-family: var(--font-small); font-size: var(--fs-small); color: #9a5a10; font-weight: var(--fw-c); } .ui-offer__lock { font-family: var(--font-small); font-size: var(--fs-small); color: #8a3a2a; font-weight: var(--fw-c); } .ui-offer__lock::before { content: '🔒︎'; font-size: .9em; margin-right: var(--u); filter: grayscale(1); } .ui-offer .ui-bar { margin-top: var(--u); } .ui-offer__btn { min-width: calc(40px * var(--ui-px)); flex-direction: column; gap: 0; padding: 0 var(--u); align-self: center; } .ui-offer__qty { font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-y); line-height: 1; margin-top: calc(-2px * var(--ui-px)); } .ui-offer__act { font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); } .ui-offer.is-locked .ui-offer__well .px-icon { filter: grayscale(1) brightness(.75); } .ui-offer.is-locked .ui-offer__name { color: #6a5a52; } /* toggles and sliders */ .ui-toggle { display: flex; align-items: center; gap: calc(3px * var(--ui-px)); width: 100%; min-height: 44px; padding: var(--u) calc(2px * var(--ui-px)); background: none; border: 0; text-align: left; color: inherit; } .ui-toggle > .px-icon { margin: calc(-2px * var(--ui-px)) 0; } .ui-toggle__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .ui-toggle__label { font-weight: var(--fw-b); } .ui-toggle__desc { font-family: var(--font-small); font-size: var(--fs-small); opacity: .8; } .ui-switch__track { position: relative; flex: 0 0 auto; width: calc(18px * var(--ui-px)); height: calc(9px * var(--ui-px)); background: #3a2430; box-shadow: 0 0 0 var(--u) #140c1c, inset 0 var(--u) 0 #1a0c14; } .ui-switch__knob { position: absolute; top: var(--u); left: var(--u); width: calc(7px * var(--ui-px)); height: calc(7px * var(--ui-px)); background: #b8b0c8; box-shadow: inset 0 var(--u) 0 #f0ecf8, inset 0 calc(-1px * var(--ui-px)) 0 #6a6478, 0 0 0 var(--u) #140c1c; transition: left .12s steps(3, end); } .ui-toggle.is-on .ui-switch__track { background: #2ea094; box-shadow: 0 0 0 var(--u) #140c1c, inset 0 var(--u) 0 #1f6a6a; } .ui-toggle.is-on .ui-switch__knob { left: calc(10px * var(--ui-px)); background: #fff1d6; box-shadow: inset 0 var(--u) 0 #fff, inset 0 calc(-1px * var(--ui-px)) 0 #c8a878, 0 0 0 var(--u) #140c1c; } .ui-toggle:disabled { opacity: .55; } .ui-slider { display: grid; grid-template-columns: minmax(0, 1fr) minmax(calc(40px * var(--ui-px)), 1.4fr) auto; align-items: center; gap: calc(3px * var(--ui-px)); min-height: 44px; padding: 0 calc(2px * var(--ui-px)); } .ui-slider__label { font-weight: var(--fw-b); min-width: 0; } .ui-slider__value { font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); min-width: calc(18px * var(--ui-px)); text-align: right; } .ui-slider__input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; --fill: 50%; } .ui-slider__input::-webkit-slider-runnable-track { height: calc(4px * var(--ui-px)); box-shadow: 0 0 0 var(--u) #140c1c; background: linear-gradient(90deg, #f2b832 0 var(--fill), #3a2430 var(--fill) 100%); } .ui-slider__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: calc(6px * var(--ui-px)); height: calc(10px * var(--ui-px)); margin-top: calc(-3px * var(--ui-px)); background: #fff1d6; box-shadow: 0 0 0 var(--u) #140c1c, inset 0 calc(-2px * var(--ui-px)) 0 #c8a878; } .ui-slider__input::-moz-range-track { height: calc(4px * var(--ui-px)); background: #3a2430; box-shadow: 0 0 0 var(--u) #140c1c; } .ui-slider__input::-moz-range-progress { height: calc(4px * var(--ui-px)); background: #f2b832; } .ui-slider__input::-moz-range-thumb { width: calc(6px * var(--ui-px)); height: calc(10px * var(--ui-px)); border: 0; border-radius: 0; background: #fff1d6; box-shadow: 0 0 0 var(--u) #140c1c; } /* sections, cards, kv, empty, portrait */ .ui-section { display: flex; flex-direction: column; gap: calc(2px * var(--ui-px)); margin: 0 0 calc(4px * var(--ui-px)); min-width: 0; } .ui-section__head { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); min-height: calc(14px * var(--ui-px)); padding: 0 var(--u); } .ui-section__head > .px-icon { margin: calc(-2px * var(--ui-px)) 0; } .ui-section__title { flex: 1 1 auto; min-width: 0; font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); text-transform: uppercase; color: #ffd98a; text-shadow: var(--sh); } .ui-section__body { display: flex; flex-direction: column; gap: calc(2px * var(--ui-px)); min-width: 0; } .sk-card .ui-section__title { color: #8a4a1a; text-shadow: var(--sh-paper); } .ui-card { min-width: 0; } .ui-empty { padding: calc(4px * var(--ui-px)) calc(2px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); color: #e8d0b0; text-align: center; font-style: italic; } .sk-card .ui-empty { color: var(--c-text-mid); } /* "label ..... value": when both do not fit on one line the value wraps under the label (right-aligned), never on top of it */ .ui-kv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(2px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); min-width: 0; } .ui-kv__k { flex: 0 1 auto; min-width: 0; color: var(--c-text-mid); overflow-wrap: anywhere; } .ui-kv__dots { flex: 1 1 calc(4px * var(--ui-px)); min-width: calc(4px * var(--ui-px)); border-bottom: var(--u) dotted rgba(122, 90, 74, .5); transform: translateY(calc(-2px * var(--ui-px))); } .ui-kv__v { flex: 0 1 auto; min-width: 0; margin-left: auto; font-weight: var(--fw-c); text-align: right; overflow-wrap: anywhere; } .ui-portrait { --px: 64; position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: calc((var(--px) * 0.5 + 6) * 1px * var(--ui-px)); height: calc((var(--px) * 0.5 + 6) * 1px * var(--ui-px)); filter: drop-shadow(0 var(--u) 0 #2e1c2b); /* the canvas draws its own disc + ink / parchment ring (WP10a) */ } /* ============================================================================================== tabs rail / bar */ .tabs { grid-area: tabs; position: relative; display: flex; gap: calc(2px * var(--ui-px)); padding: calc(3px * var(--ui-px)); background: repeating-linear-gradient(90deg, transparent 0 calc(9px * var(--ui-px)), rgba(0, 0, 0, .18) calc(9px * var(--ui-px)) calc(10px * var(--ui-px))), linear-gradient(#3e2014, #2c160f); box-shadow: inset var(--u) 0 0 #140c1c, inset calc(-1px * var(--ui-px)) 0 0 #140c1c, inset calc(2px * var(--ui-px)) 0 0 #5a3624; z-index: 3; } .app[data-layout="wide"] .tabs { flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: calc(4px * var(--ui-px)) 0; } .app[data-layout="wide"] .tabs::-webkit-scrollbar { display: none; } .app[data-layout="narrow"] .tabs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0; padding: calc(2px * var(--ui-px)) var(--u) env(safe-area-inset-bottom, 0px); box-shadow: inset 0 var(--u) 0 #140c1c, inset 0 calc(2px * var(--ui-px)) 0 #5a3624; } .tab { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; min-width: 44px; min-height: 44px; padding: 0; border-image-source: var(--skin-tab); border-color: #322a5c; background-color: #322a5c; color: var(--c-text-light); transition: transform .08s steps(2, end); } .tab > .px-icon { --px: 32; position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); } .tab:hover { border-image-source: var(--skin-tabHover); } .tab.on { border-image-source: var(--skin-tabOn); border-color: var(--c-paper); background-color: var(--c-paper); } html.skin-on .tab { background-color: transparent; } .app[data-layout="wide"] .tab.on { transform: translateX(calc(2px * var(--ui-px))); } .app[data-layout="narrow"] .tab { width: auto; min-width: 0; height: 48px; margin: 0 calc(0.5px * var(--ui-px)); } .app[data-layout="narrow"] .tab.on { transform: translateY(calc(-2px * var(--ui-px))); } .tab.is-hidden { visibility: hidden; pointer-events: none; } /* narrow: hidden tabs keep their slot */ .app[data-layout="wide"] .tab.is-hidden { display: none; } .tab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .tab .ui-dot { top: calc(-3px * var(--ui-px)); right: calc(-3px * var(--ui-px)); } /* "can act" pip (something to buy / claim / light): gold, pulsing (static under reduced motion); a count for Pedidos */ .ui-pip { position: absolute; top: calc(-3px * var(--ui-px)); right: calc(-3px * var(--ui-px)); min-width: calc(4px * var(--ui-px)); height: calc(4px * var(--ui-px)); padding: 0; font-style: normal; font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-y); line-height: calc(4px * var(--ui-px)); text-align: center; color: #2a1408; background: #f2b832; box-shadow: 0 0 0 var(--u) #2a1408, inset var(--u) var(--u) 0 #fff0a8, inset calc(-1px * var(--ui-px)) calc(-1px * var(--ui-px)) 0 #c47a1a; pointer-events: none; animation: pip-pulse 1.4s steps(2, end) infinite; z-index: 1; } .ui-pip.has-n { min-width: calc(7px * var(--ui-px)); height: calc(7px * var(--ui-px)); line-height: calc(7px * var(--ui-px)); padding: 0 var(--u); } .ui-subtab .ui-pip { top: calc(-2px * var(--ui-px)); right: calc(-2px * var(--ui-px)); } /* ============================================================================================== dock */ .dock { grid-area: dock; position: relative; display: flex; flex-direction: column; min-height: 0; color: var(--c-text-light); border-width: var(--b); } .app[data-layout="narrow"] .dock { margin-top: calc(-1px * var(--ui-px)); } .dock__head { flex: 0 0 auto; display: flex; align-items: center; gap: calc(2px * var(--ui-px)); min-height: calc(18px * var(--ui-px)); margin: calc(-3px * var(--ui-px)) calc(-3px * var(--ui-px)) calc(2px * var(--ui-px)); padding: 0 calc(3px * var(--ui-px)); background: linear-gradient(#54281e 0 calc(100% - 2px * var(--ui-px)), #3a1e16 0); box-shadow: inset 0 calc(-1px * var(--ui-px)) 0 #7a4a32; } .dock__icon { margin: calc(-2px * var(--ui-px)) 0; } .dock__title { flex: 1 1 auto; min-width: 0; font-family: var(--font-title); font-size: var(--fs-title); font-weight: var(--fw-t); color: #ffe8b8; text-shadow: var(--sh), 0 calc(-1px * var(--ui-px)) 0 #3a1e16; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dock__toggle { min-height: 44px; min-width: 44px; } .app[data-layout="wide"] .dock__toggle { display: none; } .dock__toggle .px-icon { transition: transform .1s steps(2, end); } .app.is-collapsed .dock__toggle .px-icon { transform: rotate(180deg); } .dock__handle { display: none; } .app[data-layout="narrow"] .dock__handle { display: block; position: absolute; left: 50%; top: calc(-5px * var(--ui-px)); width: calc(20px * var(--ui-px)); height: calc(2px * var(--ui-px)); transform: translateX(-50%); background: #c9955e; box-shadow: 0 var(--u) 0 #3a1e16; } .dock__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--u) var(--u) calc(4px * var(--ui-px)); scrollbar-width: thin; scrollbar-color: #c9955e #3a1e16; overscroll-behavior: contain; } .dock__body::-webkit-scrollbar { width: calc(4px * var(--ui-px)); } .dock__body::-webkit-scrollbar-track { background: #3a1e16; } .dock__body::-webkit-scrollbar-thumb { background: #c9955e; box-shadow: inset 0 0 0 var(--u) #5a3624; } .app.is-collapsed .dock__body { display: none; } .panel { min-width: 0; display: flex; flex-direction: column; gap: calc(3px * var(--ui-px)); } .panel-placeholder { padding: calc(8px * var(--ui-px)) calc(4px * var(--ui-px)); text-align: center; color: #e8d0b0; font-family: var(--font-small); font-size: var(--fs-small); } /* ============================================================================================== stage + HUD */ .stage { grid-area: stage; position: relative; overflow: hidden; background: #10131c; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; } .game-canvas { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; image-rendering: crisp-edges; } .stage-overlay { position: absolute; inset: 0; pointer-events: none; } .hud { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; color: var(--c-text-light); } .hud [data-hud-control], .hud button { pointer-events: auto; } .hud-tl, .hud-tr, .hud-tc, .hud-br, .hud-bc, .hud-bl { position: absolute; display: flex; min-width: 0; } .hud-tl { left: calc(4px * var(--ui-px)); top: calc(4px * var(--ui-px)); flex-direction: column; align-items: flex-start; gap: calc(2px * var(--ui-px)); max-width: 58%; } .hud-tr { right: calc(4px * var(--ui-px)); top: calc(4px * var(--ui-px)); align-items: flex-start; gap: calc(2px * var(--ui-px)); } .hud-tc { left: 50%; top: calc(30px * var(--ui-px)); transform: translateX(-50%); flex-direction: column; align-items: center; gap: calc(2px * var(--ui-px)); width: max-content; max-width: 70%; } /* wide: the action column (cooler · Vender tudo · Modo automático) hangs under the top-right chips — the bottom rows of the canvas (the lake floor, where every zone keeps its bed props) stay clear. hud.js sets its top (under .hud-tr). */ .hud-br { right: calc(4px * var(--ui-px)); top: calc(30px * var(--ui-px)); align-items: stretch; gap: calc(2px * var(--ui-px)); } .hud:not(.is-narrow) .hud-actions { flex-direction: column; align-items: stretch; } .hud:not(.is-narrow) .hud-actions > .ui-btn { justify-content: flex-start; padding-right: calc(3px * var(--ui-px)); } .hud:not(.is-narrow) .hud-actions > .hud-auto { justify-content: flex-start; } .hud:not(.is-narrow) .hud-auto__lamp { margin-left: auto; } /* wide rail (rev3): the column is a slim icon rail at the right edge — cooler count + bar, sack + value, auto + lamp; the names live in the tooltips (and in the Pescar panel) — so the sun, moon and eclipse (design-art §4.6: x .55–.82 of the view) are never covered at 1280–1920 */ .hud.is-rail .hud-actions { align-items: flex-end; } .hud.is-rail .hud-actions > .ui-btn, .hud.is-rail .hud-actions > .hud-cooler { width: calc(34px * var(--ui-px)); min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: var(--u) 0 calc(2px * var(--ui-px)); } .hud.is-rail .hud-actions > * > .px-icon, .hud.is-rail .hud-actions > .chip > .px-icon:first-child { margin: calc(-2px * var(--ui-px)) 0 0; } .hud.is-rail .hud-cooler__label, .hud.is-rail .hud-sell .ui-btn__label, .hud.is-rail .hud-auto__txt { display: none; } .hud.is-rail .hud-cooler__box { width: 100%; align-items: center; } .hud.is-rail .hud-cooler__top { justify-content: center; } .hud.is-rail .hud-cooler .ui-bar__track { width: calc(24px * var(--ui-px)); } .hud.is-rail .hud-sell__col { align-items: center; } .hud.is-rail .hud-auto__lamp { margin: var(--u) 0 0; } /* the hint: wide = the sky band beside/under the top row (hud.js sets left/top/width); narrow = bottom of the stage */ .hud-bc { left: 0; top: calc(30px * var(--ui-px)); flex-direction: column; align-items: center; gap: calc(2px * var(--ui-px)); } .hud.is-narrow .hud-bc { top: auto; left: 50%; bottom: calc(4px * var(--ui-px)); transform: translateX(-50%); max-width: 86%; width: max-content; } .hud-bl { left: calc(4px * var(--ui-px)); bottom: calc(4px * var(--ui-px)); } .hud-row { display: flex; align-items: flex-start; gap: calc(2px * var(--ui-px)); flex-wrap: nowrap; } .hud-row > * { flex: 0 0 auto; } /* narrow: event banner + pills in a compact column under the clock chip (the left keeps only coins + goal) */ .hud-rc { position: absolute; right: calc(4px * var(--ui-px)); top: calc(6px * var(--ui-px) + 44px); display: flex; flex-direction: column; align-items: flex-end; gap: calc(2px * var(--ui-px)); max-width: 46%; min-width: 0; } .hud-rc .hud-col { align-items: flex-end; } .hud.is-narrow .hud-tl { max-width: calc(56% - 4px * var(--ui-px)); } .hud.is-narrow .hud-rc { max-width: calc(44% - 6px * var(--ui-px)); } .hud.is-narrow .hud-event { min-width: 0; max-width: 100%; } .hud.is-narrow .hud-event__desc, .hud.is-narrow .hud-legend > span, .hud.is-narrow .hud-buff > span:not(.hud-pill__time) { display: none; } .hud.is-narrow .hud-event__name { font-family: var(--font-small); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hud-col { display: flex; flex-direction: column; align-items: flex-start; gap: calc(1px * var(--ui-px)); } .chip { display: inline-flex; align-items: center; gap: calc(2px * var(--ui-px)); min-width: 0; padding: 0 var(--u); color: var(--c-text-light); text-shadow: var(--sh); white-space: nowrap; line-height: 1.1; } .chip > * { margin-top: calc(-4px * var(--ui-px)); margin-bottom: calc(-4px * var(--ui-px)); } .chip > .px-icon:first-child { margin-left: calc(-3px * var(--ui-px)); } .chip b { font-weight: var(--fw-b); } .chip--btn { cursor: pointer; } .chip--btn:hover { filter: brightness(1.15); } .hud.is-narrow .chip--btn { min-height: 44px; } /* phone touch targets (SPEC §9.9) */ .hud-coins b { color: var(--c-money); font-family: var(--font-body); font-size: var(--fs-body); } .hud-coins__rate { color: var(--c-income); font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); } .hud-pearls b { color: #e8f0ff; } .hud-frags b { color: #ffe9a8; } .hud-level { gap: calc(2px * var(--ui-px)); } .hud-level__txt { display: flex; flex-direction: column; gap: 0; min-width: calc(34px * var(--ui-px)); } .hud-level__txt b { font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); } .hud-level .ui-bar { margin: 0 0 var(--u); } .hud-level.is-levelup { animation: hud-pop .8s steps(3, end); } /* phones: a crew haul pulses the strip's cooler chip; "+n" counts the hauls of the last 2 s */ .hud-cooler { position: relative; } .hud-cooler.is-haul { animation: hud-haul .15s steps(2, end); } .hud-haul { position: absolute; right: 0; top: calc(1px * var(--ui-px)); margin: 0 !important; padding: 0 var(--u); z-index: 1; pointer-events: none; font-style: normal; font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(8px * var(--ui-px)); color: #14301c; text-shadow: none; background: #8ff0a0; box-shadow: 0 0 0 var(--u) #140c1c, inset 0 var(--u) 0 #eaffd8; } /* this browser blocks storage: a red mark on the settings chip / tab (nothing is ever saved) */ .hud-iconbtn { position: relative; } .hud-nosave, .tab.is-nosave::after { position: absolute; right: calc(2px * var(--ui-px)); bottom: calc(2px * var(--ui-px)); width: calc(4px * var(--ui-px)); height: calc(4px * var(--ui-px)); margin: 0 !important; background: #e8402e; box-shadow: 0 0 0 var(--u) #140c1c, inset var(--u) var(--u) 0 #ffa77f; pointer-events: none; } .tab.is-nosave::after { content: ''; z-index: 1; } .hud-level .ui-bar__track { margin: var(--u) var(--u) 0; height: calc(2px * var(--ui-px)); min-width: calc(30px * var(--ui-px)); } /* "Próxima meta": ONE line (star · zone · unmet requirement chips) + the bottleneck bar; the sentence is the tooltip (wide) or opens on a tap (narrow, .is-open) */ .hud-goal { max-width: min(100%, calc(170px * var(--ui-px))); font-family: var(--font-small); font-size: var(--fs-small); cursor: pointer; flex-direction: column; align-items: stretch; gap: 0; white-space: normal; text-align: left; padding: 0 calc(3px * var(--ui-px)) 0 calc(2px * var(--ui-px)); } .hud-goal > * { margin: 0; } .hud-goal__top { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); min-width: 0; margin-top: calc(-4px * var(--ui-px)) !important; margin-bottom: calc(-2px * var(--ui-px)) !important; } .hud-goal__top > .px-icon { --px: 24 !important; margin: calc(-2px * var(--ui-px)) calc(-1px * var(--ui-px)) calc(-2px * var(--ui-px)) calc(-3px * var(--ui-px)); } .hud-goal__title { flex: 0 1 auto; min-width: min(calc(34px * var(--ui-px)), 40%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffd98a; font-weight: var(--fw-c); } .hud-goal__parts { flex: 0 0 auto; display: flex; align-items: center; gap: calc(4px * var(--ui-px)); margin-left: calc(2px * var(--ui-px)); } .hud-goal__part { display: inline-flex; align-items: center; gap: var(--u); white-space: nowrap; color: var(--c-text-light); } .hud-goal__part .px-icon { --px: 24 !important; margin: calc(-3px * var(--ui-px)) 0; } .hud-goal__part b { font-weight: var(--fw-c); } .hud-goal__part.is-low b { color: #ffc27a; } .hud-goal__text { color: var(--c-text-light); line-height: 1.2; margin: calc(2px * var(--ui-px)) 0 0 !important; } .hud-goal__hint { font-family: var(--font-small); font-size: var(--fs-small); color: var(--c-muted); line-height: 1.1; margin: calc(1px * var(--ui-px)) 0 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hud-goal .ui-bar { margin-bottom: calc(-4px * var(--ui-px)) !important; } .hud-goal .ui-bar__track { height: calc(2px * var(--ui-px)); margin: calc(2px * var(--ui-px)) 0 calc(2px * var(--ui-px)); box-shadow: 0 0 0 var(--u) #140c1c; } .hud-goal:hover { filter: brightness(1.12); } .hud.is-narrow .hud-goal { opacity: .92; } .hud.is-narrow .hud-goal.is-open { opacity: 1; max-width: calc(100vw - 8px * var(--ui-px)); } .hud-zone { gap: calc(2px * var(--ui-px)); } .hud-zone__txt { display: flex; flex-direction: column; align-items: flex-end; gap: 0; min-width: 0; overflow: hidden; } .hud-zone__name { font-weight: var(--fw-b); color: #fff1d6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hud-zone__sub { font-family: var(--font-small); font-size: var(--fs-small); color: #ffd98a; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hud-zone__sub i { font-style: normal; color: var(--c-muted); } /* the zone NAME wins the room: the weather goes first, then the clock line (hud.js fitTop) */ .hud-zone.is-noweather .hud-zone__sub i { display: none; } .hud-zone.is-nosub .hud-zone__sub { display: none; } /* cramped top row (landscape phones, 900–950-px panels): the level chip is its icon + number */ .hud.is-cramped .hud-level__full, .hud.is-cramped .hud-level .ui-bar { display: none; } .hud.is-cramped .hud-level__n { display: inline; } .hud.is-cramped .hud-level__txt { min-width: 0; justify-content: center; } .hud.is-norate .hud-coins__rate { display: none; } .hud-iconbtn { width: calc(20px * var(--ui-px)); height: calc(20px * var(--ui-px)); min-width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; } .hud-iconbtn > .px-icon { margin: calc(-6px * var(--ui-px)); } .hud-pill { font-family: var(--font-small); font-size: var(--fs-small); gap: var(--u); padding: 0 var(--u); } .hud-pill > .px-icon { --px: 24 !important; } .hud-pill__time { color: var(--c-muted); font-weight: var(--fw-c); margin-left: calc(2px * var(--ui-px)); } /* "Pressa 5 min", never "Pressa5 min" */ .hud-combo b { color: #ffcf4a; font-family: var(--font-body); font-size: var(--fs-body); } .hud-legend { color: #ffe08a; } .hud-legend .px-icon { animation: hud-blink 1s steps(2, end) infinite; } .hud-audio { font-family: var(--font-small); font-size: var(--fs-small); color: var(--c-muted); opacity: .9; } /* event banner: ribbon (icon, name, flavour, timer bar) under the top row */ .hud-event { flex-direction: column; align-items: stretch; gap: 0; white-space: normal; min-width: calc(80px * var(--ui-px)); max-width: calc(170px * var(--ui-px)); padding: 0 calc(2px * var(--ui-px)); } .hud-event > * { margin: 0; } .hud-event__top { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); margin-top: calc(-4px * var(--ui-px)) !important; } .hud-event__top .px-icon { margin: calc(-2px * var(--ui-px)) 0 calc(-2px * var(--ui-px)) calc(-3px * var(--ui-px)); } .hud-event__name { font-weight: var(--fw-b); color: #ffd98a; } .hud-event__desc { font-family: var(--font-small); font-size: var(--fs-small); color: #e6dcff; line-height: 1.2; } .hud-event .ui-bar { margin-bottom: calc(-4px * var(--ui-px)) !important; } .hud-event .ui-bar__track { height: calc(2px * var(--ui-px)); margin: calc(2px * var(--ui-px)) 0; box-shadow: 0 0 0 var(--u) #140c1c; } .hud-event.is-new { animation: hud-drop .35s steps(5, end); } .hud-wish { margin: calc(2px * var(--ui-px)) 0 var(--u) !important; min-height: 36px; align-self: flex-start; } .hud-event.is-wish .hud-wish { animation: hud-pulse 1.2s steps(2, end) infinite; } .hud.is-narrow .hud-wish .ui-btn__label { display: none; } .hud.is-narrow .hud-wish { min-height: 44px; min-width: 44px; align-self: stretch; } /* hint (bottom centre) */ .hud-hint { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-b); justify-content: center; white-space: normal; text-align: center; padding: 0 calc(3px * var(--ui-px)); } .hud-hint.is-hot { color: #ffe08a; } /* action cluster: cooler meter · Vender tudo · Modo automático (wide: bottom-right over the canvas; narrow: strip) */ .hud-actions { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); } .hud-cooler { gap: calc(2px * var(--ui-px)); min-width: calc(62px * var(--ui-px)); } .hud-cooler__box { display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; min-width: 0; } .hud-cooler__top { display: flex; align-items: baseline; justify-content: space-between; gap: calc(2px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); } .hud-cooler__label { color: #d8d0f0; } .hud-cooler__n { font-weight: var(--fw-c); color: #fff1d6; } .hud-cooler .ui-bar__track { margin: var(--u) var(--u) 0; height: calc(3px * var(--ui-px)); } .hud-cooler.is-full .hud-cooler__n { color: #ff8a6a; } .hud-cooler.is-full { animation: hud-pulse 1s steps(2, end) infinite; } .hud-sell .ui-price { font-family: var(--font-small); font-size: var(--fs-small); } .hud-sell__col { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; } .hud-sell__col .ui-price { font-weight: var(--fw-c); } .hud-sell__col .ui-price .px-icon { display: none; } /* the sack icon already carries the coin */ .hud-auto { gap: calc(3px * var(--ui-px)); padding-right: calc(3px * var(--ui-px)); } .hud-auto__lamp { width: calc(4px * var(--ui-px)); height: calc(4px * var(--ui-px)); flex: 0 0 auto; background: #2a3a3a; box-shadow: 0 0 0 var(--u) #0e1e1e, inset var(--u) var(--u) 0 #4a5a5a; } .hud-auto.is-on .hud-auto__lamp { background: #8ff0a0; box-shadow: 0 0 0 var(--u) #0e1e1e, inset var(--u) var(--u) 0 #eaffd8, 0 0 calc(4px * var(--ui-px)) #8ff0a0; } .hud-auto.is-paused .hud-auto__lamp { background: #f2a12a; box-shadow: 0 0 0 var(--u) #0e1e1e, inset var(--u) var(--u) 0 #ffe0a0; } .hud-auto__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; } .hud-auto__state { font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-y); opacity: .9; } /* narrow: action strip between the stage and the dock; card bar replaces it while the catch card is open */ .strip { grid-area: strip; position: relative; display: flex; align-items: center; gap: var(--u); padding: 0 calc(2px * var(--ui-px)); background: linear-gradient(#2a1a3a, #1c1230); box-shadow: inset 0 var(--u) 0 #140c1c, inset 0 calc(2px * var(--ui-px)) 0 #3e3470, inset 0 calc(-1px * var(--ui-px)) 0 #140c1c; z-index: 2; overflow: hidden; } .strip .hud-actions { flex: 1 1 auto; min-width: 0; justify-content: space-between; gap: calc(2px * var(--ui-px)); } .strip .ui-btn { min-height: 44px; flex: 0 0 auto; } /* chips in the strip are flat (the strip is their frame): no skin border, compact */ .strip .chip.sk { border-width: 0; border-image: none; background: none; box-shadow: none; padding: 0; min-height: 44px; } .strip .chip > * { margin-top: 0; margin-bottom: 0; } .strip .chip > .px-icon:first-child { margin-left: 0; } .strip .hud-level { flex: 0 0 auto; gap: var(--u); } .strip .hud-level__txt { min-width: calc(12px * var(--ui-px)); } .strip .hud-level__full { display: none; } .strip .hud-level__n { display: inline; font-family: var(--font-body); font-size: var(--fs-body); color: #b8f0a0; } .strip .hud-level .ui-bar__track { min-width: calc(12px * var(--ui-px)); } .strip .hud-cooler { flex: 1 1 auto; min-width: calc(36px * var(--ui-px)); } .strip .hud-cooler__label { display: none; } .strip .hud-cooler__top { justify-content: flex-start; font-family: var(--font-small); font-size: var(--fs-small); } .strip .hud-sell__col .ui-price { display: none; } .strip .hud-sell .ui-btn__label { font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); } .strip .hud-auto__txt { display: none; } .strip .hud-auto { padding-right: var(--u); } .hud-auto__short, .hud-level__n { display: none; } /* wide canvases narrower than the bottom cluster (900–1000 px windows): short labels */ .hud.is-tight .hud-auto__name, .hud.is-tight .hud-cooler__label { display: none; } .hud.is-tight .hud-auto__short { display: inline; } @media (max-width: 379px) { .strip .hud-sell .ui-btn__label { display: none; } .strip .hud-sell > .px-icon { margin: calc(-4px * var(--ui-px)); } } .cardbar { position: absolute; inset: 0; display: flex; align-items: center; gap: calc(2px * var(--ui-px)); padding: 0 calc(2px * var(--ui-px)); background: inherit; } .cardbar .ui-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0; gap: var(--u); } .cardbar .ui-btn > .px-icon { margin-left: calc(-4px * var(--ui-px)); } .cardbar.is-open { animation: hud-rise .2s steps(4, end); } /* narrow + catch card open: the 2× card takes the stage top; the goal pill and event/buff pills step aside */ .hud-tl.is-under-card > :not(.hud-row) { visibility: hidden; } .cardbar__v { font-family: var(--font-small); font-size: var(--fs-small); color: #6a3a0a; } /* ============================================================================================== modals */ .modal-root { position: fixed; inset: 0; pointer-events: none; z-index: 20; } .modal-root > * { pointer-events: auto; } .modal-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(4px * var(--ui-px)); background: rgba(10, 6, 22, .62); background-image: radial-gradient(rgba(10, 6, 22, 0) 30%, rgba(10, 6, 22, .45) 100%); } .modal-back.is-in { animation: modal-fade .18s steps(3, end); } .modal { position: relative; display: flex; flex-direction: column; width: min(calc(270px * var(--ui-px)), 96vw); max-height: min(92dvh, 92vh); color: var(--c-text-light); min-height: 0; } .modal--wide { width: min(calc(320px * var(--ui-px)), 96vw); } .modal--narrow { width: min(calc(252px * var(--ui-px)), 96vw); } .modal-back.is-in .modal { animation: modal-pop .22s steps(4, end); } .modal__title { flex: 0 0 auto; position: relative; align-self: center; display: flex; align-items: center; justify-content: center; gap: calc(2px * var(--ui-px)); margin: calc(-12px * var(--ui-px)) 0 calc(3px * var(--ui-px)); max-width: calc(100% - 88px - 4px * var(--ui-px)); /* the ribbon never runs under the ✕ (≥ 44 px); its tails may */ line-height: 1.1; padding: 0 calc(6px * var(--ui-px)); min-height: calc(18px * var(--ui-px)); color: #fff6e0; font-family: var(--font-title); font-size: var(--fs-title); font-weight: var(--fw-t); text-align: center; text-shadow: 0 var(--u) 0 #600032; } .modal__title > * { margin: calc(-4px * var(--ui-px)) 0; } /* one line: the ribbon (and its tails) keeps clear of the ✕ on both sides; a long title ellipsizes (full text in its title attribute) instead of growing into the close button */ .modal__title { max-width: calc(100% - 2 * (44px + 12px * var(--ui-px))); } .modal__ttext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal.no-close .modal__title { max-width: calc(100% - 24px * var(--ui-px)); } html[data-layout="narrow"] .modal__title { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-b); padding: 0 calc(3px * var(--ui-px)); max-width: calc(100% - 2 * (44px + 5px * var(--ui-px))); } html[data-layout="narrow"] .modal.no-close .modal__title { max-width: calc(100% - 20px * var(--ui-px)); } .modal__sub { align-self: center; margin: calc(-2px * var(--ui-px)) 0 calc(3px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); color: #ffd98a; text-shadow: var(--sh); } .modal__title::before, .modal__title::after { content: ''; position: absolute; top: calc(4px * var(--ui-px)); width: calc(6px * var(--ui-px)); height: calc(10px * var(--ui-px)); background: #840039; box-shadow: 0 0 0 var(--u) #2e1c2b; z-index: -1; } .modal__title::before { left: calc(-9px * var(--ui-px)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); } .modal__title::after { right: calc(-9px * var(--ui-px)); clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); } .modal__close { position: absolute; right: calc(-2px * var(--ui-px)); top: calc(-2px * var(--ui-px)); z-index: 2; } .modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: calc(3px * var(--ui-px)); scrollbar-width: thin; scrollbar-color: #c89a62 #e0c498; line-height: 1.3; } .modal__body p { white-space: pre-line; } .modal__buttons { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(3px * var(--ui-px)); margin: calc(4px * var(--ui-px)) 0 calc(-1px * var(--ui-px)); } .modal__buttons .ui-btn { flex: 1 1 auto; max-width: calc(130px * var(--ui-px)); } .modal-note { font-family: var(--font-small); font-size: var(--fs-small); color: var(--c-text-mid); } .modal-err { font-family: var(--font-small); font-size: var(--fs-small); color: var(--c-bad-dk); font-weight: var(--fw-c); } .modal-lede { font-family: var(--font-body); font-size: var(--fs-body); } .modal-big { font-family: var(--font-title); font-size: var(--fs-title); font-weight: var(--fw-t); color: #8a4a1a; text-align: center; } .modal-text { width: 100%; min-height: calc(40px * var(--ui-px)); resize: vertical; padding: calc(2px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.3; color: var(--c-ink); background: #fffaf0; border: 0; box-shadow: inset 0 0 0 var(--u) #b8864a, inset var(--u) var(--u) 0 calc(var(--u)) #e0c498; word-break: break-all; } .modal-input { width: 100%; min-height: 44px; padding: 0 calc(3px * var(--ui-px)); font-weight: var(--fw-b); text-transform: uppercase; color: var(--c-ink); background: #fffaf0; border: 0; box-shadow: inset 0 0 0 var(--u) #b8864a, inset 0 var(--u) 0 calc(var(--u)) #e0c498; } .modal-input::placeholder { color: #b89a7a; letter-spacing: 0; text-transform: none; font-weight: 400; } .modal-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--u); font-family: var(--font-small); font-size: var(--fs-small); } .modal-list li { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); } .modal-list li::before { content: ''; flex: 0 0 auto; width: calc(3px * var(--ui-px)); height: calc(3px * var(--ui-px)); background: var(--c-good); box-shadow: 0 0 0 var(--u) #2e1c2b; } .modal-list--lose li::before { background: #e8402e; } .modal-split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(3px * var(--ui-px)); } .modal-split > * { min-width: 0; } .modal-h { font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); text-transform: uppercase; color: #8a4a1a; margin-bottom: var(--u); } .modal-hero { display: flex; align-items: center; gap: calc(4px * var(--ui-px)); } .modal-hero__txt { flex: 1 1 auto; min-width: 0; } .modal-stat { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); font-weight: var(--fw-b); } .modal-stat b { color: #8a4a1a; } .modal-gain { display: flex; align-items: center; justify-content: center; gap: calc(2px * var(--ui-px)); padding: calc(2px * var(--ui-px)); font-family: var(--font-title); font-size: var(--fs-title); font-weight: var(--fw-t); color: #3a2a6a; background: linear-gradient(#e8e4ff, #d0c8f4); box-shadow: 0 0 0 var(--u) #5a4a86, inset 0 var(--u) 0 #fff; } .modal-warn { padding: calc(2px * var(--ui-px)) calc(3px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); color: #7a3a10; background: #ffe2a8; box-shadow: 0 0 0 var(--u) #c47a1a; } .modal-pill { display: inline-flex; align-self: center; padding: 0 calc(3px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); color: #fff; background: #3f9a4a; box-shadow: 0 0 0 var(--u) #1a3a1a; text-transform: uppercase; } /* premise: the hook line as the headline beside a big Vó; skin swatches with a live preview of the angler */ .premise-hero { align-items: flex-start; margin-top: calc(2px * var(--ui-px)); } .premise-tag { font-family: var(--font-title); font-size: var(--fs-title); font-weight: var(--fw-t); line-height: 1.15; color: #8a4a1a; text-shadow: var(--sh-paper); } .skin-pick { display: flex; align-items: center; justify-content: center; gap: calc(4px * var(--ui-px)); } .skin-pick .ui-col { align-items: flex-start; gap: var(--u); } .skin-preview { flex: 0 0 auto; display: grid; place-items: center; } .skin-row { justify-content: flex-start; gap: calc(3px * var(--ui-px)); } .skin-swatch { width: calc(14px * var(--ui-px)); height: calc(14px * var(--ui-px)); min-width: 36px; min-height: 36px; padding: 0; border: 0; box-shadow: 0 0 0 var(--u) #2e1c2b, inset var(--u) var(--u) 0 rgba(255, 255, 255, .35), inset calc(-1px * var(--ui-px)) calc(-1px * var(--ui-px)) 0 rgba(0, 0, 0, .25); } .skin-swatch.is-on { box-shadow: 0 0 0 var(--u) #2e1c2b, 0 0 0 calc(2px * var(--ui-px)) #f2b832, 0 0 0 calc(3px * var(--ui-px)) #2e1c2b; transform: translateY(calc(-1px * var(--ui-px))); } /* choice (Estrela Cadente) */ .choice-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2px * var(--ui-px)); } .choice-opt { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(2px * var(--ui-px)); padding: calc(3px * var(--ui-px)) calc(2px * var(--ui-px)); min-height: 44px; color: var(--c-ink); text-align: center; white-space: normal; } .choice-opt .px-icon { margin: calc(-3px * var(--ui-px)) 0 calc(-2px * var(--ui-px)); } .choice-opt b { font-family: var(--font-title); font-size: var(--fs-title); font-weight: var(--fw-t); color: #8a4a1a; } .choice-opt__desc { font-family: var(--font-body); font-size: var(--fs-body); color: var(--c-ink); line-height: 1.2; } html[data-layout="narrow"] .choice-opts { grid-template-columns: minmax(0, 1fr); } html[data-layout="narrow"] .choice-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: calc(3px * var(--ui-px)); text-align: left; align-items: center; } html[data-layout="narrow"] .choice-opt .px-icon { grid-row: 1 / 3; } .choice-opt:hover { filter: brightness(1.05); transform: translateY(calc(-1px * var(--ui-px))); } /* species page (fish:) */ .species-window { position: relative; display: grid; place-items: center; min-height: calc(62px * var(--ui-px)); overflow: hidden; background: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255, 255, 255, .06) 0 11.25deg, transparent 11.25deg 22.5deg), linear-gradient(#2a78a8 0 35%, #236494 35% 70%, #163a66 70%); box-shadow: 0 0 0 var(--u) #2e1c2b, inset 0 var(--u) 0 rgba(255, 255, 255, .35); } .species-window canvas { image-rendering: pixelated; } .species-window .species-sprite { max-width: none; position: relative; } .species-window.is-unknown canvas { filter: brightness(0) opacity(.55); } .species-name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(2px * var(--ui-px)); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-b); color: var(--c-text-mid); text-align: center; } .species-name > .px-icon { margin: calc(-3px * var(--ui-px)) calc(-1px * var(--ui-px)); } .species-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(110px * var(--ui-px)), 1fr)); gap: var(--u) calc(4px * var(--ui-px)); } .species-fields > * { min-width: 0; } html[data-layout="narrow"] .species-fields { grid-template-columns: minmax(0, 1fr); } .species-desc { font-family: var(--font-small); font-size: var(--fs-small); font-style: italic; color: var(--c-text-mid); white-space: pre-line; } .species-shiny { display: flex; align-items: center; gap: calc(3px * var(--ui-px)); padding: calc(2px * var(--ui-px)); background: #fff3c8; box-shadow: 0 0 0 var(--u) #e0b050; font-family: var(--font-small); font-size: var(--fs-small); } .species-shiny canvas { image-rendering: pixelated; } .species-shiny.is-missing canvas { filter: brightness(0) opacity(.35); } /* zone postcard (zone:) */ .postcard { position: relative; padding: calc(3px * var(--ui-px)); background: #fffaf0; box-shadow: 0 0 0 var(--u) #c89a62, 0 calc(2px * var(--ui-px)) 0 rgba(46, 28, 43, .3); transform: rotate(-.6deg); } .postcard__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated; background: #1d4a4c; } .postcard__sky { width: 100%; aspect-ratio: 16 / 7; box-shadow: inset 0 0 0 var(--u) rgba(0, 0, 0, .15); } .postcard__stamp { position: absolute; right: calc(5px * var(--ui-px)); top: calc(5px * var(--ui-px)); padding: var(--u) calc(2px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-y); color: #c84a3a; background: #fff6e0; box-shadow: 0 0 0 var(--u) #c84a3a; transform: rotate(4deg); } .postcard__phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(3px * var(--ui-px)); margin-top: calc(3px * var(--ui-px)); } .postcard__phase { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; box-shadow: 0 0 0 var(--u) #c89a62; } .postcard__phase.is-now { box-shadow: 0 0 0 var(--u) #2e1c2b, 0 0 0 calc(2px * var(--ui-px)) #f2b832; } .postcard__phase > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; image-rendering: pixelated; aspect-ratio: auto; } .postcard__pimg:not([hidden]) + .postcard__sky { display: none; } .zone-species { display: flex; flex-wrap: wrap; gap: var(--u); } .zone-species .sk-slot { padding: 0; } .zone-species .px-icon { margin: calc(-5px * var(--ui-px)); } .zone-species .is-unknown .px-icon { filter: brightness(0) opacity(.5); } .req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--u); font-family: var(--font-small); font-size: var(--fs-small); } .req-list li { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); } .req-list .req-ok { color: var(--c-good-dk); font-weight: var(--fw-c); } .req-list .req-no { color: var(--c-bad-dk); font-weight: var(--fw-c); } /* handwritten pages (memory:, bottle:) */ /* a torn notebook page (zig-zag top and bottom edges) with a small picture taped to it and a place/date stamp; the pixel font is never slanted (no synthetic italics) */ .page { position: relative; padding: calc(8px * var(--ui-px)) calc(6px * var(--ui-px)) calc(8px * var(--ui-px)) calc(12px * var(--ui-px)); color: #3a2a4a; font-family: var(--font-body); font-size: var(--fs-body); line-height: calc(12px * var(--ui-px)); white-space: pre-line; font-style: normal; background: linear-gradient(90deg, transparent calc(8px * var(--ui-px)), rgba(216, 56, 58, .45) calc(8px * var(--ui-px)) calc(9px * var(--ui-px)), transparent calc(9px * var(--ui-px))), repeating-linear-gradient(transparent 0 calc(11px * var(--ui-px)), rgba(74, 168, 240, .28) calc(11px * var(--ui-px)) calc(12px * var(--ui-px))), #fbf1dc; background-position: 0 calc(7px * var(--ui-px)); --tear: calc(3px * var(--ui-px)); clip-path: polygon(0 var(--tear), 6% 0, 12% var(--tear), 18% 0, 24% var(--tear), 30% 0, 36% var(--tear), 42% 0, 48% var(--tear), 54% 0, 60% var(--tear), 66% 0, 72% var(--tear), 78% 0, 84% var(--tear), 90% 0, 96% var(--tear), 100% 0, 100% calc(100% - var(--tear)), 94% 100%, 88% calc(100% - var(--tear)), 82% 100%, 76% calc(100% - var(--tear)), 70% 100%, 64% calc(100% - var(--tear)), 58% 100%, 52% calc(100% - var(--tear)), 46% 100%, 40% calc(100% - var(--tear)), 34% 100%, 28% calc(100% - var(--tear)), 22% 100%, 16% calc(100% - var(--tear)), 10% 100%, 4% calc(100% - var(--tear)), 0 100%); } .page-wrap { filter: drop-shadow(0 0 var(--u) #b8925e) drop-shadow(calc(2px * var(--ui-px)) calc(2px * var(--ui-px)) 0 rgba(46, 28, 43, .25)); } .page::after { content: ''; display: block; clear: both; } .page__title { font-style: normal; font-family: var(--font-title); font-size: var(--fs-title); font-weight: var(--fw-t); color: #6a2a3a; margin-bottom: var(--u); line-height: 1.1; } .page__stamp { display: inline-block; margin: 0 0 calc(3px * var(--ui-px)); padding: 0 calc(2px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-y); line-height: 1.5; color: #c84a3a; box-shadow: inset 0 0 0 var(--u) #c84a3a; transform: rotate(-1.5deg); text-transform: uppercase; } .page__text { white-space: pre-line; } .page__vig { float: right; position: relative; display: grid; place-items: center; width: calc(64px * var(--ui-px)); height: calc(48px * var(--ui-px)); margin: calc(-2px * var(--ui-px)) 0 calc(3px * var(--ui-px)) calc(4px * var(--ui-px)); overflow: hidden; transform: rotate(2deg); background: radial-gradient(circle at 50% 45%, #fff6e0 0 30%, #e8d4a8 70%); box-shadow: 0 0 0 calc(2px * var(--ui-px)) #fffaf0, 0 0 0 calc(3px * var(--ui-px)) #c89a62, calc(2px * var(--ui-px)) calc(3px * var(--ui-px)) 0 calc(2px * var(--ui-px)) rgba(46, 28, 43, .2); } .page__vig::before { content: ''; position: absolute; left: 30%; top: calc(-2px * var(--ui-px)); width: 40%; height: calc(5px * var(--ui-px)); background: rgba(240, 220, 150, .75); z-index: 2; transform: rotate(-3deg); } .page__vig > .px-icon { image-rendering: pixelated; } .page__vig--zone > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; image-rendering: pixelated; } .page__vig-img:not([hidden]) + .postcard__sky { display: none; } .page--bottle { background-color: #eef4e8; transform: rotate(.5deg); } .page__vig--bottle { background: radial-gradient(circle at 50% 45%, #e8f6f0 0 30%, #b8d8d0 75%); } html[data-layout="narrow"] .page__vig { width: calc(48px * var(--ui-px)); height: calc(36px * var(--ui-px)); } .reunion { display: flex; align-items: flex-end; justify-content: center; gap: calc(6px * var(--ui-px)); padding: calc(4px * var(--ui-px)) 0; } .reunion__heart { font-family: var(--font-title); font-size: var(--fs-title); color: #e84a6a; text-shadow: 0 var(--u) 0 #600032; align-self: center; } /* finale + credits */ .finale-scene { position: relative; height: calc(96px * var(--ui-px)); overflow: hidden; box-shadow: 0 0 0 var(--u) #2e1c2b; background: linear-gradient(#0b1430 0%, #28406e 55%, #3a4a8a 70%, #1d2a50 70.5%, #0e1e3a 100%); } .finale-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 12%; image-rendering: pixelated; } .finale-scene__stars { position: absolute; inset: 0; background-image: radial-gradient(circle, #fff6d8 0 1px, transparent 1.5px), radial-gradient(circle, #c8e0ff 0 1px, transparent 1.5px); background-size: 37px 29px, 53px 41px; background-position: 3px 5px, 19px 11px; opacity: .7; } .finale-scene__people { position: absolute; left: 0; right: 0; bottom: calc(3px * var(--ui-px)); display: flex; justify-content: center; align-items: flex-end; gap: calc(14px * var(--ui-px)); } .finale-who { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--u); } .finale-who figcaption { padding: 0 calc(2px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); color: #fff1d6; text-shadow: var(--sh); background: rgba(20, 12, 40, .72); box-shadow: 0 0 0 var(--u) #140c1c; white-space: nowrap; } .finale-body { font-family: var(--font-body); font-size: var(--fs-body); white-space: pre-line; text-align: center; } .credits { position: relative; height: calc(60px * var(--ui-px)); overflow: hidden; background: #140c1c; box-shadow: 0 0 0 var(--u) #2e1c2b; animation: credits-in .6s steps(4, end) both; } /* the title is already inside the box when the panel appears (never an empty black box), then the roll crawls up until its last line leaves the top edge */ .credits__roll { position: absolute; left: 0; right: 0; top: 24%; text-align: center; color: #fff1d6; white-space: pre-line; line-height: 1.6; text-shadow: var(--sh); animation: credits-roll 45s linear 2s forwards; } .credits__roll b { color: #ffd98a; font-family: var(--font-title); font-size: var(--fs-title); font-weight: var(--fw-t); } .credits__line { display: block; padding: var(--u) calc(4px * var(--ui-px)); } .credits__h { display: block; margin-top: calc(6px * var(--ui-px)); color: #ffd98a; font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); text-transform: uppercase; } .credits__crew { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(3px * var(--ui-px)) calc(5px * var(--ui-px)); padding: calc(2px * var(--ui-px)) calc(4px * var(--ui-px)); } .credits__who { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--u); width: calc(40px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.1; } .credits__fish { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--u); padding: calc(2px * var(--ui-px)) calc(6px * var(--ui-px)); } .credits__fish .px-icon { margin: calc(-3px * var(--ui-px)); } .credits__fish .px-icon.is-shadow { filter: brightness(0) opacity(.5); } /* the finale owns the whole screen: the HUD, dock and tabs go dark behind it */ .modal-back[data-modal="finale"] { background: #070612; background-image: radial-gradient(circle at 50% 30%, #1a1840 0, #070612 70%); } .modal--finale { width: min(calc(340px * var(--ui-px)), 96vw); } .modal--finale .finale-scene { height: calc(120px * var(--ui-px)); } .modal--finale .credits { height: calc(80px * var(--ui-px)); } .finale-you { padding: calc(2px * var(--ui-px)) calc(3px * var(--ui-px)); background: #fff3c8; box-shadow: 0 0 0 var(--u) #e0b050; } .finale-you .modal-list li::before { background: #f2b832; } /* credits of the staged cinematic: beside the stage, over the dock's rect (wide) / a bottom sheet (narrow), no backdrop and click-through around the panel, so the fireworks stay on screen (dialogs.js placeSide) */ .modal-back.is-side, .modal-back.is-side[data-modal="finale"] { background: transparent; background-image: none; pointer-events: none; padding: 0; } .modal-back.is-side > .modal { pointer-events: auto; } .modal--finale-side { max-width: none; } .modal--finale-side .modal__body > .ui-col { flex: 1 1 auto; min-height: 0; } .modal--finale-side .credits { flex: 1 1 auto; height: auto; min-height: calc(80px * var(--ui-px)); } html[data-layout="narrow"] .modal--finale-side .credits { min-height: calc(46px * var(--ui-px)); } .modal--finale-side .modal__title { font-family: var(--font-body); font-size: var(--fs-body); padding: 0 calc(3px * var(--ui-px)); } .credits__you { margin-top: calc(6px * var(--ui-px)); color: #e6dcff; } html.rm .modal--finale-side .credits, html.still .modal--finale-side .credits { flex: 0 0 auto; } .reunion__star { color: #ffd23a; text-shadow: 0 var(--u) 0 #8a4a1a; } /* cinema shell (dialogs.js): while a staged cinematic plays the HUD fades out, the dock / tabs / strip sit under a dark veil (inert), a transparent catcher over the stage turns taps into hint / skip, "Pular ▸" waits at the bottom-right just above the letterbox bar (gfx.cinema: 6.6 % of the stage; the captions are centred in that bar and the tap hint sits in the top bar's right end, so neither is covered) */ .app.is-cinema .hud { opacity: 0; transition: opacity .4s steps(4, end); } .app.is-cinema .hud, .app.is-cinema .hud * { pointer-events: none !important; } .cinema-veil { position: absolute; inset: 0; z-index: 30; background: rgba(10, 6, 22, .82); pointer-events: auto; animation: modal-fade .4s steps(4, end); } .dock > .cinema-veil { inset: calc(-1 * var(--b)); } .cinema-catch { position: absolute; inset: 0; z-index: 4; background: transparent; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; } .cinema-skip { position: absolute; right: calc(4px * var(--ui-px)); bottom: calc(7% + 2px * var(--ui-px)); z-index: 6; pointer-events: auto; min-height: 44px; min-width: 44px; padding: 0 calc(4px * var(--ui-px)); color: #fff1d6; text-shadow: var(--sh); font-family: var(--font-body); font-size: var(--fs-body); animation: modal-fade .3s steps(3, end); } .cinema-skip:hover { filter: brightness(1.2); } /* zone title card (first arrival, ui.js): "ZONA n DE 9" over the zone name and its arrival line, on a stepped dark band in the upper third of the stage; 4-step fade in and out; click-through (a tap still casts) */ .zone-title { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--u); pointer-events: none; padding: calc(7px * var(--ui-px)) calc(8px * var(--ui-px)); text-align: center; text-shadow: var(--sh); background: linear-gradient(rgba(10, 6, 22, 0) 0 5%, rgba(10, 6, 22, .3) 5% 12%, rgba(10, 6, 22, .6) 12% 88%, rgba(10, 6, 22, .3) 88% 95%, rgba(10, 6, 22, 0) 95%); } .zone-title__n { font-family: var(--font-small); font-size: var(--fs-small); color: #ffd98a; text-transform: uppercase; } .zone-title__name { font-family: var(--font-title); font-size: var(--fs-title); font-weight: var(--fw-t); color: #fff6e0; text-shadow: 0 var(--u) 0 #140c1c, 0 calc(2px * var(--ui-px)) 0 rgba(20, 12, 28, .5); } .zone-title__line { max-width: min(92%, calc(220px * var(--ui-px))); font-family: var(--font-body); font-size: var(--fs-body); color: #e6dcff; line-height: 1.25; } .zone-title.is-in { animation: title-in .4s steps(4, end) both; } .zone-title.is-out { animation: title-out .4s steps(4, end) forwards; } /* phones: the first few times the tall sheet is up, a caption just above it (over the dimmed stage) says a tap there brings the lake back (a child of the dock; click-through to the scrim) */ .sheet-cap { display: none; } .app[data-layout="narrow"].is-expanded .sheet-cap.is-on { display: block; position: absolute; left: 50%; bottom: calc(100% + var(--b) + 4px); transform: translateX(-50%); pointer-events: none; padding: 0 calc(3px * var(--ui-px)); white-space: nowrap; color: #fff1d6; text-shadow: var(--sh); font-family: var(--font-small); font-size: var(--fs-small); } /* offline summary */ .offline-hero { display: flex; align-items: center; gap: calc(3px * var(--ui-px)); } .offline-hero__img { flex: 0 0 auto; display: grid; place-items: center; width: calc(34px * var(--ui-px)); height: calc(34px * var(--ui-px)); background: radial-gradient(circle at 50% 60%, #28406e 0 55%, #0b1430 56%); box-shadow: 0 0 0 var(--u) #2e1c2b; } .offline-hero__img canvas, .offline-hero__img img { image-rendering: pixelated; } .offline-hero__z { position: absolute; font-weight: var(--fw-b); color: #c8e0ff; } .offline-rows { display: flex; flex-direction: column; gap: var(--u); } /* ============================================================================================== toasts */ /* toasts: wide = right column of the canvas under the action column (--toast-top, set by hud.js); narrow = one-line ribbons over the stage's sky band just under the chips (≤ 2; the dock header and its controls stay free) */ .toast-root { position: fixed; z-index: 19; pointer-events: none; display: flex; flex-direction: column; gap: calc(2px * var(--ui-px)); /* under the modal backdrop */ top: var(--toast-top, calc(var(--hud-t, 0px) + 25px * var(--ui-px))); right: calc(100vw - var(--hud-l, 0px) - var(--hud-w, 100vw) + 4px * var(--ui-px)); align-items: flex-end; width: min(calc(var(--hud-w, 100vw) * .5), calc(180px * var(--ui-px))); } html[data-layout="narrow"] .toast-root { top: var(--toast-top, calc(var(--hud-t, 0px) + 28px * var(--ui-px))); right: auto; left: 50%; transform: translateX(-50%); align-items: stretch; width: min(calc(100vw - 8px * var(--ui-px)), calc(200px * var(--ui-px))); } .toast-root.is-held { visibility: hidden; } html[data-layout="narrow"] .toast__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* a warning carries an instruction ("copie seu save"): up to three lines on phones instead of one cut short */ html[data-layout="narrow"] .toast--warn .toast__text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .toast--link .toast__text::after { content: '\00a0›'; color: #ffd98a; } /* no-break: the chevron never wraps alone */ html[data-layout="narrow"] .toast { min-height: 36px; } .toast { display: flex; align-items: center; gap: calc(2px * var(--ui-px)); max-width: 100%; padding: 0 calc(2px * var(--ui-px)); font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-c); line-height: 1.25; color: var(--c-text-light); text-shadow: var(--sh); pointer-events: auto; cursor: pointer; } .toast > * { margin-top: calc(-3px * var(--ui-px)); margin-bottom: calc(-3px * var(--ui-px)); } .toast > .px-icon { margin-left: calc(-3px * var(--ui-px)); } .toast__bar { flex: 0 0 auto; align-self: stretch; width: calc(2px * var(--ui-px)); margin-left: calc(-3px * var(--ui-px)); background: #8a7ab8; box-shadow: var(--u) 0 0 rgba(0, 0, 0, .3); } .toast--good .toast__bar { background: #6cc86a; } .toast--warn .toast__bar { background: #f2a12a; } .toast--warn { color: #ffe2b8; } .toast--rare { color: var(--c-ink); text-shadow: var(--sh-paper); font-weight: var(--fw-c); } .toast--rare .toast__bar { background: linear-gradient(#ff6ab0, #ffb03a, #f4e05a, #6af0a8, #4aa8f0, #b86af0); } .toast--tray { color: #ffe9a8; } .toast--tray .toast__bar { background: #f2b832; } .toast__col { display: flex; flex-direction: column; min-width: 0; } .toast__list { list-style: none; margin: var(--u) 0 calc(2px * var(--ui-px)); padding: 0; display: flex; flex-direction: column; gap: var(--u); color: var(--c-text-light); } .toast__list li { display: flex; align-items: center; gap: var(--u); min-width: 0; } .toast__list li .px-icon { margin: calc(-2px * var(--ui-px)) 0; } .toast__list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toast.is-in { animation: toast-in .25s steps(4, end); } .toast.is-out { animation: toast-out .25s steps(4, end) forwards; } /* ============================================================================================== tooltip */ .tooltip { position: fixed; z-index: 40; pointer-events: none; max-width: min(80vw, calc(140px * var(--ui-px))); padding: 0 var(--u); color: var(--c-text-light); font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.25; text-shadow: var(--sh); white-space: pre-line; } .tooltip > span { display: block; margin: calc(-3px * var(--ui-px)) 0; } /* ============================================================================================== tutorial (Vó Nazaré) */ .tut { position: fixed; inset: 0; z-index: 25; pointer-events: none; } .tut__ring { position: fixed; pointer-events: none; box-shadow: 0 0 0 calc(2px * var(--ui-px)) #ffe08a, 0 0 0 calc(3px * var(--ui-px)) #2e1c2b, 0 0 calc(10px * var(--ui-px)) calc(2px * var(--ui-px)) rgba(255, 224, 138, .55); animation: tut-pulse 1.2s steps(3, end) infinite; } .tut__box { position: fixed; display: flex; align-items: flex-end; gap: calc(2px * var(--ui-px)); width: min(calc(190px * var(--ui-px)), calc(100vw - 16px)); pointer-events: none; } .tut__box.is-in { animation: tut-in .3s steps(4, end); } .tut__box.is-flip { flex-direction: row-reverse; } .tut__face { flex: 0 0 auto; pointer-events: none; } /* click-through: a tap or a hold on Vó's bubble casts, hooks and reels like a tap on the water (it sits over the lake on the canvas steps); only "Pular tutorial" and "Entendi!" take clicks */ .tut__bubble { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(2px * var(--ui-px)); pointer-events: none; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.3; } .tut__skip, .tut__bubble .ui-btn { pointer-events: auto; } .tut__bubble::after { content: ''; position: absolute; left: calc(-9px * var(--ui-px)); bottom: calc(2px * var(--ui-px)); width: calc(6px * var(--ui-px)); height: calc(6px * var(--ui-px)); background: #fbeed2; box-shadow: calc(-1px * var(--ui-px)) 0 0 #2e1c2b, 0 var(--u) 0 #2e1c2b; clip-path: polygon(100% 0, 100% 100%, 0 100%); } .tut__box.is-flip .tut__bubble::after { left: auto; right: calc(-9px * var(--ui-px)); clip-path: polygon(0 0, 100% 100%, 0 100%); box-shadow: var(--u) 0 0 #2e1c2b, 0 var(--u) 0 #2e1c2b; } /* rail (wide tab targets): Vó beside the tab, the bubble over the dock, the tail up at her face */ .tut__box.is-rail { align-items: flex-start; } .tut__box.is-rail .tut__bubble::after { bottom: auto; top: calc(8px * var(--ui-px)); clip-path: polygon(0 0, 100% 0, 100% 100%); box-shadow: calc(-1px * var(--ui-px)) 0 0 #2e1c2b, 0 calc(-1px * var(--ui-px)) 0 #2e1c2b; } .tut__box.is-below { align-items: flex-start; } .tut__box.is-below .tut__bubble::after { bottom: auto; top: calc(8px * var(--ui-px)); clip-path: polygon(0 0, 100% 0, 100% 100%); box-shadow: calc(-1px * var(--ui-px)) 0 0 #2e1c2b, 0 calc(-1px * var(--ui-px)) 0 #2e1c2b; } .tut__box.is-below.is-flip .tut__bubble::after { clip-path: polygon(0 0, 100% 0, 0 100%); box-shadow: var(--u) 0 0 #2e1c2b, 0 calc(-1px * var(--ui-px)) 0 #2e1c2b; } /* a fish on the line: small, out of the way of the tension meter and the "Fisgou!" float */ .tut__box.is-mini { width: min(calc(132px * var(--ui-px)), calc(100vw - 16px)); } .tut__box.is-mini .tut__bubble { font-family: var(--font-small); font-size: var(--fs-small); line-height: 1.25; } .tut__box.is-mini .tut__who { display: none; } .tut__box.is-mini .tut__face { --px: 40 !important; } .tut__box.is-mini .tut__face > .px-icon { width: calc(20px * var(--ui-px)); height: calc(20px * var(--ui-px)); } .tut__who { font-family: var(--font-small); font-size: var(--fs-small); font-weight: var(--fw-y); color: #8a4a1a; text-transform: uppercase; margin-top: calc(-3px * var(--ui-px)); } .tut__text { color: var(--c-ink); } .tut__foot { display: flex; align-items: center; justify-content: space-between; gap: calc(2px * var(--ui-px)); margin-bottom: calc(-3px * var(--ui-px)); } .tut__skip { min-height: 32px; padding: 0 var(--u); border: 0; background: none; color: #8a5a3a; font-family: var(--font-small); font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; } .tut__skip:hover { color: #c84a3a; } .tut__step { font-family: var(--font-small); font-size: var(--fs-small); color: var(--c-text-mid); } /* ============================================================================================== boot / debug / test / gallery */ .boot-cover { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--c-night); color: var(--c-paper); font-family: var(--font-title); font-size: var(--fs-title); } .test-output { position: fixed; left: 0; right: 0; bottom: 0; max-height: 45vh; overflow: auto; z-index: 60; margin: 0; padding: 8px; background: rgba(0, 0, 0, .85); color: #d8ffd8; font: 12px/1.3 Consolas, monospace; white-space: pre-wrap; } .debug-overlay { position: absolute; left: 4px; bottom: 4px; margin: 0; padding: 4px 6px; z-index: 5; background: rgba(0, 0, 0, .55); color: #b8ffb0; font: 11px/1.25 Consolas, monospace; white-space: pre; } /* debug only: out of the HUD's way (wide: under the left chips; phones: small, at the bottom of the stage) */ html[data-layout="wide"] .debug-overlay { bottom: auto; top: calc(var(--hud-t, 0px) + 64px * var(--ui-px)); left: calc(var(--hud-l, 0px) + 4px * var(--ui-px)); opacity: .85; } html[data-layout="narrow"] .debug-overlay { font-size: 9px; top: auto; bottom: 0; max-width: 100%; opacity: .85; } .gallery { padding: 12px; color: var(--c-text-light); height: 100%; overflow: auto; } /* phones: every control is a ≥ 44 css px touch target (SPEC §9.9) */ html[data-layout="narrow"] .ui-btn--small, html[data-layout="narrow"] .ui-subtab, html[data-layout="narrow"] .ui-seg__opt, html[data-layout="narrow"] .tut__skip, html[data-layout="narrow"] .skin-swatch { min-height: 44px; } html[data-layout="narrow"] .skin-swatch { min-width: 44px; } /* ============================================================================================== keyframes */ @keyframes hud-pulse { 50% { filter: brightness(1.35) saturate(1.2); } } @keyframes pip-pulse { 50% { transform: scale(1.25); filter: brightness(1.2); } } @keyframes sheet-up { from { transform: translateY(calc(12px * var(--ui-px))); } } @keyframes hud-blink { 50% { opacity: .35; } } @keyframes hud-drop { from { transform: translateY(calc(-8px * var(--ui-px))); opacity: 0; } } @keyframes hud-rise { from { transform: translateY(calc(6px * var(--ui-px))); opacity: 0; } } @keyframes modal-fade { from { opacity: 0; } } @keyframes modal-pop { from { transform: translateY(calc(10px * var(--ui-px))); opacity: 0; } } @keyframes toast-in { from { transform: translateY(calc(-6px * var(--ui-px))); opacity: 0; } } @keyframes toast-out { to { transform: translateY(calc(-6px * var(--ui-px))); opacity: 0; } } @keyframes tut-pulse { 50% { box-shadow: 0 0 0 calc(3px * var(--ui-px)) #fff6c0, 0 0 0 calc(4px * var(--ui-px)) #2e1c2b, 0 0 calc(14px * var(--ui-px)) calc(4px * var(--ui-px)) rgba(255, 224, 138, .7); } } @keyframes tut-in { from { transform: translateY(calc(6px * var(--ui-px))); opacity: 0; } } @keyframes credits-roll { to { top: 0; transform: translateY(-100%); } } @keyframes credits-in { from { opacity: 0; } } @keyframes hud-pop { 0% { transform: scale(1); } 33% { transform: scale(1.15); filter: brightness(1.6) sepia(.8) saturate(2.4); } 66% { transform: scale(1.15); } 100% { transform: scale(1); } } @keyframes hud-haul { 50% { transform: scale(1.15); } } @keyframes title-in { from { opacity: 0; transform: translateY(calc(-4px * var(--ui-px))); } } @keyframes title-out { to { opacity: 0; } } /* ============================================================================================== accessibility modes */ /* reducedMotion: no transitions/animations (the credits simply show at rest) — SPEC §9.9. html.still (frames=N screenshots, test=): entry animations would be captured mid-way. */ html.rm *, html.rm *::before, html.rm *::after, html.still *, html.still *::before, html.still *::after { animation: none !important; transition: none !important; } html.rm .credits__roll, html.still .credits__roll { position: static; padding: calc(3px * var(--ui-px)) 0; } html.rm .credits, html.still .credits { height: auto; } @media (prefers-reduced-motion: reduce) { .toast.is-in, .modal-back.is-in .modal, .tut__box.is-in, .hud-event.is-new { animation: none; } } /* highContrast: opaque HUD chips, outlined text */ html.hc .sk-chip, html.hc .sk-tooltip { border-image-source: var(--skin-chipHC); border-color: #140e2a; } html.hc:not(.skin-on) .sk-chip { background-color: #140e2a; } html.hc .chip, html.hc .toast, html.hc .tooltip, html.hc .dock__title, html.hc .ui-section__title { text-shadow: calc(-1px * var(--ui-px)) 0 #000, var(--u) 0 #000, 0 calc(-1px * var(--ui-px)) #000, 0 var(--u) #000; } html.hc .ui-offer__desc, html.hc .ui-muted, html.hc .modal-note { color: #3a2418; } html.hc .hud-cooler__label, html.hc .hud-zone__sub i { color: #ffffff; } .postcard__img:not([hidden]) + .postcard__sky { display: none; }