/* game.css — the Holiday theme (docs/UX-plan.md §1, "Poolside at Golden Hour"). Light-first: warm sand page, white cards, Sunshine yellow fills, Hot Pink actions, Sky Blue journeys, Apple Green go-signals. Same class hooks as before — ui.js unchanged. Color rules (UX-plan §1.1): yellow is NEVER text; pink text uses the darkened text-safe tone; green/red/sky text always use their text-safe darks. */ :root { /* surfaces */ --iv-bg: #FFF6E9; /* sand — the page */ --iv-card: #FFFFFF; /* shell — cards float on sand */ --iv-well: #FFF3DE; /* sand tint — meter tracks, sunken rows */ --iv-line: #F0E2CC; /* sand line — soft separators */ /* ink */ --iv-ink: #2B1E16; /* warm near-black */ --iv-sub: #77614F; /* dune — secondary text (darkened for AA at small sizes, audit 6.8) */ /* brand */ --iv-sun: #FFC800; /* Sunshine — fills & highlights only, never text */ --iv-sun-tint: #FFF4CC; --iv-pink: #FF2E88; /* Hot Pink — the action color (fills) */ --iv-pink-text: #D9186E; /* text-safe pink */ --iv-pink-tint: #FFE7F1; --iv-sky: #45C4FF; /* Sky Blue — journeys/info (fills) */ --iv-sky-text: #0E7FC0; --iv-sky-tint: #E4F6FF; --iv-green: #7ED957; /* Apple Green — go (fills/borders) */ --iv-green-text: #2E7D24; /* darkened for AA (audit 6.8) */ --iv-green-tint: #EFFAE8; --iv-red-text: #C0392B; /* costs/crashes (text-safe) */ --iv-red-tint: #FDECEA; /* legacy token aliases (pre-holiday rules still read these) */ --iv-accent: var(--iv-pink-text); /* accent TEXT reads pink */ --iv-good: var(--iv-green-text); /* good TEXT reads deep green */ --iv-shadow: 0 4px 16px rgba(43, 30, 22, .08); } * { box-sizing: border-box; } body { background: var(--iv-bg); color: var(--iv-ink); margin: 0; padding: 0 0 90px; font-family: 'Nunito', system-ui, sans-serif; font-variant-numeric: tabular-nums; } h1, h2, h3, .iv-beattitle { font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-weight: 600; } :focus-visible { outline: 2px solid var(--iv-sky); outline-offset: 2px; border-radius: 6px; } /* icon sprite (Phase 6C): refs against the inline symbol defs at the top of . Icons carry their own flat palette fills (see the defs), so no color rule is needed here — just size + baseline alignment against whatever text they sit beside. */ .ic { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; } #topbar { position: sticky; top: 0; z-index: 5; padding: 8px 14px; background: linear-gradient(180deg, var(--iv-sun-tint), var(--iv-bg)); box-shadow: var(--iv-shadow); } #topbar h1 { margin: 0 0 4px; font-size: 1.15rem; } #topbar h1 small { color: var(--iv-sub); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; } .iv-header { display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; } .iv-res b { color: var(--iv-pink-text); } .iv-onboarding { background: var(--iv-sky-tint); border-bottom: 1px solid var(--iv-line); padding: 8px 14px; font-size: .82rem; color: var(--iv-ink); } .iv-onboarding b { color: var(--iv-pink-text); } .iv-onboarding[hidden] { display: none; } /* toasts: white cards with a colored left rail (UX-plan §3) */ .iv-notifs { position: fixed; right: 10px; top: 62px; z-index: 9; width: min(340px, 80vw); } .iv-notif { background: var(--iv-card); border-left: 4px solid var(--iv-sun); padding: 6px 10px; margin-bottom: 6px; border-radius: 10px; font-size: .8rem; animation: slidein .25s ease; box-shadow: var(--iv-shadow); } .iv-notif.iv-story { border-color: var(--iv-sky); } .iv-notif.iv-unlock { border-color: var(--iv-green); } .iv-notif.iv-ascend { border-color: #C77BFF; } .iv-notif.iv-info { border-color: var(--iv-line); } .iv-notif.iv-vignette { border-color: var(--iv-sun); font-style: italic; } .iv-notif.iv-celebrate { border-color: var(--iv-sun); font-weight: bold; font-size: .88rem; animation: slidein .25s ease, celebrateglow 1.2s ease 1; } @keyframes slidein { from { transform: translateX(30px); opacity: 0; } } @keyframes celebrateglow { 0%, 100% { box-shadow: var(--iv-shadow); } 50% { box-shadow: 0 4px 22px rgba(255, 200, 0, .6); } } @media (prefers-reduced-motion: reduce) { .iv-notif.iv-celebrate { animation: none; } } .iv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; max-width: 1100px; margin: 0 auto; } .iv-card { background: var(--iv-card); border: none; border-radius: 16px; padding: 12px 14px; box-shadow: var(--iv-shadow); } .iv-card h3 { margin: 0 0 8px; font-size: 1rem; border-bottom: 1px solid var(--iv-line); padding-bottom: 6px; } .iv-card h3 small { color: var(--iv-sub); font-weight: normal; font-family: 'Nunito', sans-serif; } .iv-wide { grid-column: 1 / -1; } @media (max-width: 720px) { .iv-grid { grid-template-columns: 1fr; } } /* ---- tabbed navigation: one focused screen at a time; future tabs stay hidden ---- */ .iv-story-strip { max-width: 1100px; margin: 0 auto; padding: 12px 12px 0; } /* sticks BELOW the topbar (height measured into --iv-topbar-h by ui.bind's ResizeObserver) — both used to stick at top:0 and the tab bar painted OVER the cash HUD once scrolled. */ .iv-tabbar { position: sticky; top: var(--iv-topbar-h, 52px); z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; max-width: 1100px; margin: 0 auto; padding: 8px 12px; background: var(--iv-bg); } .iv-tab-btn { background: var(--iv-card); color: var(--iv-sub); border: 1px solid var(--iv-line); border-radius: 999px; padding: 6px 14px; font-size: .9rem; cursor: pointer; white-space: nowrap; font-family: 'Nunito', sans-serif; font-weight: 700; transition: background .15s, color .15s, border-color .15s; } .iv-tab-btn:hover { color: var(--iv-ink); border-color: var(--iv-pink); } .iv-tab-btn.iv-tab-active { background: var(--iv-sun); color: var(--iv-ink); border-color: var(--iv-sun); } .iv-tab-btn.iv-tab-new::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--iv-green); vertical-align: middle; animation: iv-tabpulse 1.4s ease-in-out infinite; } @keyframes iv-tabpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .iv-tab-btn.iv-tab-new::after { animation: none; } } .iv-tabpanel[hidden] { display: none; } @media (max-width: 720px) { .iv-tabbar { overflow-x: auto; flex-wrap: nowrap; } } /* buttons: white tiles; primary CTAs go Hot Pink (one per card — UX-plan §1.1) */ .iv-btn { background: var(--iv-card); color: var(--iv-ink); border: 1px solid var(--iv-line); border-radius: 12px; padding: 6px 10px; margin: 2px; cursor: pointer; font-size: .78rem; line-height: 1.2; text-align: center; height: auto; font-family: 'Nunito', sans-serif; box-shadow: 0 1px 4px rgba(43, 30, 22, .06); } .iv-btn:hover:not(:disabled) { border-color: var(--iv-pink); } .iv-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; } .iv-btn small { color: var(--iv-sub); } .iv-btn.btn-primary { background: var(--iv-pink); border-color: var(--iv-pink); color: #fff; font-weight: 800; border-radius: 999px; } .iv-btn.btn-primary small { color: #FFD6E8; } .iv-btn.btn-primary:hover:not(:disabled) { background: var(--iv-pink-text); border-color: var(--iv-pink-text); } .iv-maxed { border-color: var(--iv-green); } .iv-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px dashed var(--iv-line); padding: 6px 0; } .iv-row-main b { color: var(--iv-ink); } .iv-row-buy { display: flex; gap: 4px; } .iv-sub { color: var(--iv-sub); font-size: .76rem; } .iv-gen-flavor { font-size: .72rem; margin: 2px 0 0; } .iv-qty { margin-bottom: 6px; font-size: .78rem; color: var(--iv-sub); } .iv-tag { text-transform: uppercase; letter-spacing: .08em; color: var(--iv-pink-text); font-size: .75rem; font-weight: 800; margin: 8px 0 4px; } .iv-amenities { display: flex; flex-wrap: wrap; gap: 4px; } .iv-amenities > .iv-btn, .iv-amenities > button { flex: 1 1 130px; max-width: 220px; } .iv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .iv-splash-pop { position: absolute; transform: translateX(-50%); color: var(--iv-sky-text); font-size: .85rem; pointer-events: none; z-index: 8; animation: splashfloat .7s ease-out forwards; } @keyframes splashfloat { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -18px); } } @media (prefers-reduced-motion: reduce) { .iv-splash-pop { animation: none; opacity: 0; } } /* meters: pill track in sand; sunshine fill (the fill IS the sunshine — UX-plan §3) */ .iv-comfort-bonus { margin-bottom: 4px; font-size: .82rem; } .iv-comfort-bonus b { color: var(--iv-pink-text); } .iv-comfort-meter { background: var(--iv-well); border: none; border-radius: 999px; height: 10px; overflow: hidden; margin-bottom: 4px; } .iv-comfort-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--iv-green), var(--iv-sun)); border-radius: 999px; transition: width .4s ease; } /* accommodation ladder: postcard-ish rows (full postcard component lands in U2) */ .iv-acc-ladder { display: flex; flex-direction: column; gap: 4px; } .iv-acc-row { background: var(--iv-well); border: 1px solid var(--iv-line); border-radius: 12px; padding: 6px 10px; font-size: .8rem; } .iv-acc-owned { color: var(--iv-sub); font-size: .76rem; background: transparent; border: none; } .iv-acc-current { background: var(--iv-sun-tint); border-color: var(--iv-sun); } .iv-acc-next { background: var(--iv-card); border-color: var(--iv-pink); box-shadow: var(--iv-shadow); } .iv-acc-next .iv-comfort-meter { margin: 4px 0; } .iv-acc-locked { opacity: .6; } .iv-acc-more { color: var(--iv-sub); font-size: .75rem; text-align: center; background: transparent; border: none; } .iv-upg-legend { margin-bottom: 6px; } .iv-flavor { font-style: italic; color: var(--iv-sub); margin-bottom: 6px; } .iv-beatnum { color: var(--iv-sub); font-size: .72rem; } .iv-beattitle { color: var(--iv-pink-text); font-weight: 600; font-size: 1.05rem; margin: 2px 0; } .iv-beattext { font-size: .85rem; } .iv-choices { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; } .iv-npcs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .iv-npc { background: var(--iv-well); border: 1px solid var(--iv-line); border-radius: 12px; padding: 6px 8px; font-size: .78rem; flex: 1 1 150px; max-width: 240px; } .iv-npc-emoji { font-size: 1rem; } .iv-skills, .iv-skill, .iv-path { margin-bottom: 6px; } .iv-skill .bar { background: var(--iv-well); border-radius: 999px; height: 6px; overflow: hidden; margin-top: 3px; } .iv-skill .bar i { display: block; height: 100%; background: var(--iv-green); border-radius: 999px; } .iv-skill-effect b { color: var(--iv-pink-text); } .label { background: var(--iv-sun-tint); color: var(--iv-ink); border-radius: 999px; padding: 1px 8px; font-size: .7rem; } .iv-badge-maxed { background: var(--iv-green-tint); color: var(--iv-green-text); border: 1px solid var(--iv-green); border-radius: 999px; padding: 1px 8px; font-size: .75rem; margin-left: 4px; } .iv-notif.iv-levelup { border-color: var(--iv-sky); font-weight: bold; font-size: .88rem; animation: slidein .25s ease, celebrateglow 1.2s ease 1; } .iv-skill-flash .bar i { animation: skillpulse .6s ease 1; } @keyframes skillpulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); } } @media (prefers-reduced-motion: reduce) { .iv-notif.iv-levelup { animation: none; } .iv-skill-flash .bar i { animation: none; } } .iv-xp-pop { position: absolute; transform: translateX(-50%); color: var(--iv-pink-text); font-weight: bold; font-size: .8rem; pointer-events: none; z-index: 8; animation: splashfloat .7s ease-out forwards; } @media (prefers-reduced-motion: reduce) { .iv-xp-pop { animation: none; opacity: 0; } } .iv-pathmeter { margin-bottom: 8px; } .iv-pmeter-row { display: flex; align-items: center; gap: 6px; font-size: .74rem; margin-bottom: 3px; } .iv-pmeter-label { flex: 0 0 150px; color: var(--iv-sub); } .iv-pmeter-bar { flex: 1 1 auto; background: var(--iv-well); border-radius: 999px; height: 6px; overflow: hidden; } .iv-pmeter-bar i { display: block; height: 100%; background: var(--iv-sky); border-radius: 999px; } .iv-pmeter-val { flex: 0 0 auto; color: var(--iv-ink); white-space: nowrap; } /* destinations: owned places read as passport stamps (full stamp skin lands in U2) */ .iv-dest-owned { background: var(--iv-green-tint); border: 1px solid var(--iv-green); border-radius: 12px; padding: 6px 8px; font-size: .78rem; flex: 1 1 150px; max-width: 220px; } .iv-dest-owned .iv-btn { margin-top: 2px; } .iv-controls { position: fixed; bottom: 0; left: 0; right: 0; background: var(--iv-card); box-shadow: 0 -4px 16px rgba(43, 30, 22, .08); padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .78rem; z-index: 6; } .iv-speed { color: var(--iv-sub); } .iv-speed button { margin: 0 1px; } .iv-tap-pop { position: absolute; bottom: 46px; transform: translateX(-50%); color: var(--iv-green-text); font-weight: bold; font-size: .85rem; pointer-events: none; animation: tapfloat .7s ease-out forwards; } @keyframes tapfloat { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -22px); } } /* found by tools/uxcheck.mjs: the one pop that skipped the reduced-motion guard its siblings have */ @media (prefers-reduced-motion: reduce) { .iv-tap-pop { animation: none; opacity: 0; } } /* Energy: sunshine → pink gradient (fully on-palette) */ .iv-energy-meter i { background: linear-gradient(90deg, var(--iv-sun), var(--iv-pink)); } .iv-energy-low i { opacity: .55; } .iv-energy-pulse i { animation: energypulse .5s ease 1; } @keyframes energypulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } } @media (prefers-reduced-motion: reduce) { .iv-energy-pulse i { animation: none; } } .iv-energy-inline { margin-left: 4px; } .iv-energy-inline.iv-energy-low { color: var(--iv-red-text); } .iv-energy-inline.iv-energy-pulse { animation: energypulse .5s ease 1; } @media (prefers-reduced-motion: reduce) { .iv-energy-inline.iv-energy-pulse { animation: none; } } .iv-concierge-log { display: flex; flex-direction: column; gap: 2px; } .iv-concierge-flash { animation: conciergepulse .9s ease 1; } @keyframes conciergepulse { 0%, 100% { filter: brightness(1); } 30% { filter: brightness(1.4); } } @media (prefers-reduced-motion: reduce) { .iv-concierge-flash { animation: none; } } /* Creator combo: sky → sunshine → pink as it heats up (on-palette) */ .iv-combo-meter i { background: linear-gradient(90deg, var(--iv-sky), var(--iv-sun)); } .iv-combo-warm i { background: linear-gradient(90deg, var(--iv-sun), var(--iv-pink)); } .iv-combo-viral i { background: linear-gradient(90deg, var(--iv-pink), var(--iv-pink-text)); } .iv-combo-pulse i { animation: energypulse .4s ease 1; } .iv-combo-burst { animation: comboburst .9s ease 1; } @keyframes comboburst { 0%, 100% { filter: brightness(1); } 30% { filter: brightness(1.6); } } @media (prefers-reduced-motion: reduce) { .iv-combo-pulse i { animation: none; } .iv-combo-burst { animation: none; } } .iv-content-item { text-align: left; flex: 1 1 160px; max-width: 240px; } .iv-sponsor-active { background: var(--iv-green-tint); border-color: var(--iv-green); text-align: left; flex: 1 1 160px; max-width: 240px; } .iv-notif.iv-sponsor { border-color: var(--iv-sun); } .iv-notif.iv-boom { border-color: var(--iv-green); } .iv-notif.iv-crash { border-color: var(--iv-red-text); } .iv-market-ticker { font-weight: bold; margin-bottom: 4px; font-size: .9rem; } .iv-ticker-up { color: var(--iv-green-text); } .iv-ticker-down { color: var(--iv-red-text); } .iv-ticker-flat { color: var(--iv-sub); } .iv-market-banner { border-radius: 12px; padding: 5px 8px; margin-bottom: 6px; font-size: .8rem; font-weight: bold; } .iv-market-boom { background: var(--iv-green-tint); border: 1px solid var(--iv-green); color: var(--iv-green-text); } .iv-market-crash { background: var(--iv-red-tint); border: 1px solid var(--iv-red-text); color: var(--iv-red-text); } .iv-market-chop { background: var(--iv-well); border: 1px solid var(--iv-line); color: var(--iv-sub); } .iv-strike { color: var(--iv-sub); text-decoration: line-through; margin-right: 4px; font-size: .72rem; } .iv-upkeep { color: var(--iv-red-text); } .iv-slots { letter-spacing: 2px; color: var(--iv-sky-text); } .iv-warn { background: var(--iv-sun-tint); border: 1px solid var(--iv-sun); color: var(--iv-ink); border-radius: 12px; padding: 6px 8px; margin: 6px 0; font-size: .82rem; } .iv-capstone-on { background: var(--iv-sun-tint); border: 1px solid var(--iv-sun); color: var(--iv-ink); border-radius: 12px; padding: 6px 8px; margin: 6px 0; font-size: .85rem; } .iv-capstone-off { color: var(--iv-sub); border: 1px dashed var(--iv-line); border-radius: 12px; padding: 6px 8px; margin: 6px 0; font-size: .82rem; } .iv-modal-overlay { position: fixed; inset: 0; background: rgba(43, 30, 22, .45); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; } .iv-modal-overlay[hidden] { display: none; } .iv-modal { background: var(--iv-card); border: none; border-radius: 16px; padding: 16px; max-width: 380px; width: 100%; box-shadow: 0 12px 40px rgba(43, 30, 22, .25); } .iv-modal h3 { margin: 0 0 8px; } .iv-offline-row { margin: 4px 0; font-size: .88rem; } /* Task 2c: the offline-summary postcard reskin — a dashed "postcard back" divider under the scene */ .iv-offline-postcard { border-bottom: 2px dashed var(--iv-sky); padding-bottom: 8px; } /* ---- U2: the Holiday component kit (UX-plan §3) ---- */ /* postcard: the current accommodation tier as a collectible card */ .iv-postcard { background: linear-gradient(180deg, var(--iv-sky-tint), var(--iv-card)); border: 1px solid var(--iv-line); border-radius: 12px; padding: 10px 12px 8px; margin-bottom: 8px; text-align: center; } .iv-postcard-scene { font-size: 1.8rem; letter-spacing: .12em; line-height: 1.2; } .iv-postcard-img { width: 100%; max-width: 380px; border-radius: 8px; display: block; margin: 0 auto 4px; } .iv-postcard-name { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.1rem; } .iv-postcard-caption { color: var(--iv-sub); font-size: .74rem; font-style: italic; } /* Task 2: postcard-flip on tier-up — the one sanctioned "unlock flip" (UX-plan §1.4) */ .iv-postcard.iv-postcard-flip { animation: postcardflip .6s ease; } @keyframes postcardflip { 0%, 100% { transform: rotateY(0deg); } 45% { transform: rotateY(94deg); opacity: .35; } 55% { transform: rotateY(-94deg); opacity: .35; } } @media (prefers-reduced-motion: reduce) { .iv-postcard.iv-postcard-flip { animation: postcardcrossfade .3s ease; } } @keyframes postcardcrossfade { from { opacity: .15; } to { opacity: 1; } } /* the postcard PREVIEW (era-modal takeover, "send a postcard"): the tier art above, styled like a postcard's written back below — a dashed card, a tilted stamp in the corner, message text preserving the generated line breaks. */ .iv-postcard-back { position: relative; text-align: left; background: var(--iv-well); border: 1px dashed var(--iv-line); border-radius: 10px; padding: 12px 40px 12px 14px; margin: 10px 0; } .iv-postcard-stamp { position: absolute; top: 8px; right: 10px; font-size: 1.5rem; transform: rotate(12deg); opacity: .85; } .iv-postcard-message { font-size: .82rem; line-height: 1.6; white-space: pre-line; } /* passport stamps: owned destinations sit inked-and-rotated; unowned = a dotted empty slot */ .iv-stamp { transform: rotate(-2deg); border: 2px solid var(--iv-green); } .iv-stamp:nth-child(even) { transform: rotate(1.5deg); } .iv-stamp b { text-transform: uppercase; letter-spacing: .05em; } .iv-stamp-empty { border: 2px dashed var(--iv-sub); background: transparent; box-shadow: none; } @media (prefers-reduced-motion: reduce) { .iv-stamp, .iv-stamp:nth-child(even) { transform: none; } } /* luggage stickers: earned trophies as colorful stickers; locked = a blank outline */ .iv-sticker { border: 2px solid var(--iv-sun); border-radius: 18px; background: var(--iv-sun-tint); transform: rotate(-1.5deg); } .iv-sticker:nth-child(3n) { transform: rotate(1.5deg); border-color: var(--iv-sky); background: var(--iv-sky-tint); } .iv-sticker:nth-child(3n+1) { border-color: var(--iv-pink); background: var(--iv-pink-tint); } .iv-sticker-locked { border: 2px dashed var(--iv-line); border-radius: 18px; background: transparent; box-shadow: none; color: var(--iv-sub); } @media (prefers-reduced-motion: reduce) { .iv-sticker, .iv-sticker:nth-child(3n) { transform: none; } } /* Task 4: sticker art hook — the generated image sits where the 🏆 emoji used to */ .iv-sticker-img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; border-radius: 50%; margin-right: 2px; } /* boarding passes: transport rows get a route-card look with a perforated edge */ #transport > .iv-btn { text-align: left; border-left: 6px solid var(--iv-sky); background: linear-gradient(90deg, var(--iv-sky-tint), var(--iv-card) 40%); } .iv-boarding-scene { font-family: 'Fredoka', sans-serif; font-size: 1.15rem; border: 2px dashed var(--iv-sky); border-radius: 10px; padding: 8px; margin-bottom: 6px; } /* the sun that rides the comfort meter's edge */ .iv-sunmeter { position: relative; overflow: visible; } .iv-sunmeter i { border-radius: 999px; } .iv-sun-dot { position: absolute; top: 50%; transform: translate(-50%, -55%); font-size: .85rem; font-style: normal; pointer-events: none; transition: left .4s ease; } @media (prefers-reduced-motion: reduce) { .iv-sun-dot { transition: none; } } /* sliders: a sand track with a beach-ball thumb (budget dials) */ .iv-slider { -webkit-appearance: none; appearance: none; width: 150px; height: 6px; border-radius: 999px; background: var(--iv-well); vertical-align: middle; margin: 0 6px; } .iv-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 18%, var(--iv-pink) 19% 100%); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(43, 30, 22, .3); cursor: grab; } .iv-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--iv-pink); border: 2px solid #fff; cursor: grab; } /* "+N more" chip on collapsed amenity shelves */ .iv-more-chip { border-radius: 999px !important; color: var(--iv-sub); background: var(--iv-well); border: none; box-shadow: none; flex: 0 0 auto !important; align-self: center; } /* ---- U3: the debug drawer (R8) + era modals (T1) ---- */ .iv-devtools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--iv-well); border-radius: 12px; padding: 4px 8px; } .iv-era { max-width: 420px; text-align: center; } .iv-era .iv-postcard-scene { font-size: 2.4rem; margin-bottom: 4px; } .iv-era h3 { font-size: 1.3rem; margin: 4px 0 8px; } .iv-era input[type="text"] { width: 100%; border: 1px solid var(--iv-line); border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-family: 'Nunito', sans-serif; font-size: .9rem; background: var(--iv-card); color: var(--iv-ink); } .iv-era-actions { margin-top: 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .iv-era-epitaph { font-style: italic; margin: 6px 0; } /* The Crossroads (beat 6, T1): four polaroid branch choices, 2×2 on desktop, stacked narrow. */ .iv-crossroads-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; } @media (max-width: 480px) { .iv-crossroads-grid { grid-template-columns: 1fr; } } .iv-polaroid-choice { background: var(--iv-card); border: 1px solid var(--iv-line); border-radius: 4px 4px 12px 12px; padding: 10px 6px 12px; cursor: pointer; text-align: center; box-shadow: var(--iv-shadow); font-family: 'Nunito', sans-serif; transform: rotate(-2deg); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .iv-polaroid-choice:nth-child(2n) { transform: rotate(1.5deg); } .iv-polaroid-choice:hover, .iv-polaroid-choice:focus-visible { transform: rotate(0deg) scale(1.03); box-shadow: 0 8px 20px rgba(43, 30, 22, .18); border-color: var(--iv-pink); } .iv-polaroid-scene { font-size: 1.7rem; margin-bottom: 4px; } .iv-polaroid-name { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .82rem; color: var(--iv-pink-text); } .iv-polaroid-flavor { font-size: .72rem; color: var(--iv-sub); margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .iv-polaroid-choice, .iv-polaroid-choice:nth-child(2n) { transform: none; } .iv-polaroid-choice:hover, .iv-polaroid-choice:focus-visible { transform: none; } } /* Task 2b: polaroid framing on the Story card + diary pages — extends the Crossroads polaroid look (white frame, slight rotation) to the "current beat" presentation everywhere it shows up. */ .iv-polaroid-frame { background: var(--iv-card); border: 1px solid var(--iv-line); border-radius: 4px 4px 14px 14px; padding: 10px 10px 12px; box-shadow: var(--iv-shadow); transform: rotate(-1deg); } .iv-polaroid-photo { font-size: 2rem; text-align: center; background: var(--iv-well); border-radius: 4px; padding: 14px 0; margin-bottom: 6px; } .iv-polaroid-photo-img { width: 100%; max-width: 320px; display: block; margin: 0 auto 6px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .iv-polaroid-frame { transform: none; } } /* ---- U4: era skies — the light warms as the trip climbs (body[data-era] set in ui.render) ---- */ body[data-era="drizzle"] #topbar { background: linear-gradient(180deg, #E8EEF2, var(--iv-bg)); } body[data-era="bright"] #topbar { background: linear-gradient(180deg, var(--iv-sky-tint), var(--iv-bg)); } body[data-era="warm"] #topbar { background: linear-gradient(180deg, var(--iv-sun-tint), var(--iv-bg)); } body[data-era="golden"] #topbar { background: linear-gradient(180deg, #FFE3B3, #FFECD9); } /* ---- the Travel Diary (UX-plan §3/§6): seen story beats as journal pages, each a polaroid (Task 2b) — margin-stacked instead of the old border-separated list, alternating tilt. ---- */ .iv-diary { max-width: 460px; max-height: 70vh; overflow-y: auto; } .iv-diary-entry.iv-polaroid-frame { margin-bottom: 10px; } .iv-diary-entry.iv-polaroid-frame:nth-child(even) { transform: rotate(1deg); } @media (prefers-reduced-motion: reduce) { .iv-diary-entry.iv-polaroid-frame:nth-child(even) { transform: none; } } .iv-diary-when { color: var(--iv-sub); font-size: .7rem; } .iv-diary-title { font-family: 'Fredoka', sans-serif; color: var(--iv-pink-text); font-size: .95rem; margin: 1px 0; } .iv-diary-text { font-size: .82rem; font-style: italic; } .iv-diary-continues { text-align: center; color: var(--iv-sub); font-size: .74rem; padding: 8px 0 2px; } /* ---- Task 1: the Passport spread view ---- */ .iv-passport-btn { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; } .iv-passport-cover-thumb { width: 20px; height: auto; border-radius: 2px; vertical-align: middle; box-shadow: 0 1px 3px rgba(43, 30, 22, .3); } .iv-modal.iv-passport-modal { max-width: 640px; } .iv-passport-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .iv-passport-header h3 { margin: 0; } /* the open spread: inside.webp as the page background, cream fallback if the image never loads */ .iv-passport-spread { position: relative; width: 100%; max-width: 600px; aspect-ratio: 960 / 720; margin: 8px auto; border-radius: 10px; background-color: #FFF6E9; background-image: url('../assets/img/passport/inside.webp'); background-size: cover; background-position: center; box-shadow: var(--iv-shadow); } .iv-passport-gold { box-shadow: 0 0 0 3px var(--iv-sun), var(--iv-shadow); background-color: #FFF4CC; } .iv-passport-goldlabel { text-align: center; color: var(--iv-pink-text); font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .85rem; margin-top: 6px; } /* stamps sit at deterministic slots (ui.js passportSlotPos) — owned ink or a dotted empty slot */ .iv-passport-stamp { position: absolute; width: 15%; text-align: center; font-size: .62rem; line-height: 1.15; } img.iv-passport-stamp { background: none; border: none; box-shadow: none; padding: 0; height: auto; } div.iv-passport-stamp.iv-stamp-empty { padding: 5px 2px; border-radius: 8px; } .iv-passport-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; } .iv-passport-empty { text-align: center; margin-top: 4px; } @media (max-width: 480px) { .iv-modal.iv-passport-modal { max-width: 100%; } } /* ---- final art-wiring pass: island building thumbnails + owned grounds-cluster deeds ---- */ /* island resort buildings (E28): a small photo of the built structure atop its stats — same onerror-remove contract as the passport cover thumb (a missing image just leaves the row text-only, never a broken image icon). */ .iv-island-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 4px; } /* owned grounds clusters (garden/pool/court, E23): a little framed deed photo pinned to the cluster header, tilted like a real paper deed tucked in a folder. */ .iv-deed-thumb { width: 72px; height: auto; border-radius: 6px; vertical-align: middle; margin-right: 6px; transform: rotate(-3deg); box-shadow: 0 1px 4px rgba(43, 30, 22, .3); } @media (prefers-reduced-motion: reduce) { .iv-deed-thumb { transform: none; } } /* ---- Phase D (audit 6.6/6.8/6.9) ---- */ /* the two verified prefers-reduced-motion holes: toast slide-in and the tap float */ @media (prefers-reduced-motion: reduce) { .iv-notif { animation: none; } .iv-tap-pop, .iv-splash-pop, .iv-xp-pop { animation: none; transition: none; } } /* app-level motion override (Options → motion: reduced) mirrors the media query */ :root[data-motion="reduced"] .iv-notif { animation: none; } :root[data-motion="reduced"] .iv-tap-pop, :root[data-motion="reduced"] .iv-splash-pop, :root[data-motion="reduced"] .iv-xp-pop { animation: none; } /* mobile ergonomics (audit 6.9): ≥44px touch targets where thumbs live; safe-area footer */ @media (max-width: 720px) { .iv-tab-btn { min-height: 44px; padding: 10px 16px; } .iv-btn, .btn.iv-btn { min-height: 40px; } #footer { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; overflow-x: auto; } /* right-edge fade signals the tab bar scrolls horizontally */ .iv-tabbar { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); } } /* ---- Home redesign: wallet chip · story row · next-step square · animated tiles ---- */ .iv-topbar-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; max-width: 1100px; margin: 0 auto; } .iv-wallet-chip { background: var(--iv-card); border: 1px solid var(--iv-line); border-radius: 14px; padding: 6px 12px; cursor: pointer; text-align: right; min-width: 118px; font-family: inherit; box-shadow: var(--iv-shadow); display: flex; flex-direction: column; gap: 3px; align-items: flex-end; } .iv-wallet-chip:hover { border-color: var(--iv-pink); } .iv-wallet-cash { font-size: .95rem; } .iv-wallet-cash b { color: var(--iv-pink-text); } .iv-wallet-rate { font-size: .72rem; color: var(--iv-sub); } .iv-wallet-bar { display: block; width: 100%; height: 5px; border-radius: 999px; background: var(--iv-well); overflow: hidden; } .iv-wallet-bar i { display: block; height: 100%; border-radius: 999px; background: var(--iv-sun); transition: width .3s; } .iv-wallet-chip.iv-wallet-full { border-color: var(--iv-red-text); } .iv-wallet-chip.iv-wallet-full .iv-wallet-bar i { background: var(--iv-red-text); } /* the story + accommodation row: stacked (story bar on top, current digs below). */ .iv-story-row { display: flex; flex-direction: column; gap: 10px; } /* the ladder's cash-toward-cost meter (shown once the Comfort gate is met) */ .iv-cash-meter i { background: var(--iv-green); } /* the collapsed story bar: a slim tappable strip that opens the Travel Diary — replaces the old full polaroid card on the home screen (the diary itself still shows every entry). The postcard-share action sits beside it, its own small square button. */ .iv-story-bar-row { display: flex; gap: 8px; align-items: stretch; } .iv-story-bar { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; background: var(--iv-card); border: 1px solid var(--iv-line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--iv-shadow); cursor: pointer; font-family: 'Nunito', sans-serif; font-size: .88rem; font-weight: 700; color: var(--iv-ink); text-align: left; } .iv-story-bar:hover { border-color: var(--iv-pink); } .iv-story-bar-arrow { margin-left: auto; color: var(--iv-sub); } .iv-story-postcard { flex: 0 0 auto; font-size: 1rem; padding: 0 14px; } /* the branch-choice prompt (beat 6): stays inline and visible even though the story card collapsed — it's a one-time decision, not something to bury behind the diary tap. */ .iv-choice-strip { background: var(--iv-card); border: 1px solid var(--iv-pink); border-radius: 14px; padding: 10px 14px; box-shadow: var(--iv-shadow); } .iv-choice-prompt { font-weight: 700; margin-bottom: 6px; } /* animated generator tiles: progress-to-afford bars; milestone level deepens the color band and speeds the sheen (--gen-anim, set per tile from bought/upgrades). */ .iv-gen-tile { border: 1px solid var(--iv-line); border-radius: 14px; padding: 8px 10px; margin: 6px 0; background: var(--iv-card); } .iv-gen-head { display: flex; align-items: baseline; gap: 6px; } .iv-gen-double { margin-left: auto; font-size: .7rem; color: var(--iv-sub); } .iv-gen-bar { position: relative; height: 10px; border-radius: 999px; background: var(--iv-well); overflow: hidden; margin: 6px 0; } .iv-gen-bar i { display: block; height: 100%; border-radius: 999px; transition: width .25s; background: linear-gradient(90deg, var(--gen-c1, #ffe9a8), var(--gen-c2, var(--iv-sun))); background-size: 200% 100%; animation: iv-gen-sheen var(--gen-anim, 3s) linear infinite; } @keyframes iv-gen-sheen { from { background-position: 0% 0; } to { background-position: 200% 0; } } /* the color band deepens with milestone level: sand → sky → green → sun → pink */ .iv-glvl-0 { --gen-c1: #ffe9a8; --gen-c2: #ffc800; } .iv-glvl-1 { --gen-c1: #a8e4ff; --gen-c2: #45c4ff; border-color: #bfe8fb; } .iv-glvl-2 { --gen-c1: #c9f0b2; --gen-c2: #7ed957; border-color: #cdeab9; } .iv-glvl-3 { --gen-c1: #ffd27a; --gen-c2: #ff9d00; border-color: #f7dba8; } .iv-glvl-4 { --gen-c1: #ffb1d4; --gen-c2: #ff2e88; border-color: #ffc4dd; } .iv-gen-tile.iv-can-buy { border-color: var(--iv-green); } .iv-gen-tile.iv-can-buy .iv-gen-bar { box-shadow: 0 0 0 2px var(--iv-green-tint); } .iv-gen-tile.iv-can-buy .iv-gen-actions .btn-primary { animation: iv-ready-pulse 1.2s ease-in-out infinite; } @keyframes iv-ready-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .iv-gen-actions { display: flex; gap: 6px; } @media (prefers-reduced-motion: reduce) { .iv-gen-bar i, .iv-gen-tile.iv-can-buy .iv-gen-actions .btn-primary { animation: none; } } :root[data-motion="reduced"] .iv-gen-bar i, :root[data-motion="reduced"] .iv-gen-tile.iv-can-buy .iv-gen-actions .btn-primary { animation: none; } @media (max-width: 720px) { .iv-topbar-row { align-items: center; } .iv-wallet-chip { min-width: 104px; padding: 6px 10px; } } /* the golden frame (Clout shop, pure pride) */ .iv-polaroid-frame.iv-frame-gold { box-shadow: 0 0 0 3px #ffc800, 0 4px 18px rgba(255, 200, 0, .35); } /* ---- Living-World W1: Trip Events banner + The Golden Goat (both hidden while CONFIG.EVENTS.enabled is false — this wave's shipped default) ---- */ .iv-event-banner { border-radius: 12px; padding: 5px 8px; margin-bottom: 6px; font-size: .8rem; font-weight: bold; background: var(--iv-sun-tint); border: 1px solid var(--iv-sun); color: var(--iv-ink); } /* Legacy Honeymoon (Living-World W3, docs/08 point 8): a top-level banner (mirrors the splurge card's own explicit [hidden] override, outside the tab system). */ .iv-event-banner[hidden] { display: none; } .iv-goat-btn { position: fixed; bottom: 74px; right: 14px; z-index: 7; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--iv-sun); background: var(--iv-card); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--iv-shadow); animation: goatwander 2.4s ease-in-out infinite; } .iv-goat-btn[hidden] { display: none; } @keyframes goatwander { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } } @media (prefers-reduced-motion: reduce) { .iv-goat-btn { animation: none; } } :root[data-motion="reduced"] .iv-goat-btn { animation: none; } .iv-goat-pop { position: fixed; transform: translate(-50%, -100%); color: var(--iv-green-text); font-weight: bold; font-size: .9rem; pointer-events: none; z-index: 8; animation: tapfloat .7s ease-out forwards; } @media (prefers-reduced-motion: reduce) { .iv-goat-pop { animation: none; opacity: 0; } } :root[data-motion="reduced"] .iv-goat-pop { animation: none; opacity: 0; } /* ---- Living-World W2: Sunscreen Boosts + Splurge Moments (both hidden until their own reveal condition, no master switch — see docs/08 points 4/5) ---- */ .iv-boost-row { border: 1px solid var(--iv-line); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; } .iv-boost-head { font-size: .88rem; margin-bottom: 2px; } .iv-boost-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .iv-boost-flash { animation: conciergepulse .7s ease 1; } @media (prefers-reduced-motion: reduce) { .iv-boost-flash { animation: none; } } :root[data-motion="reduced"] .iv-boost-flash { animation: none; } .iv-splurge-card { width: calc(100% - 24px); max-width: 1076px; margin: 0 auto 12px; } .iv-splurge-card[hidden] { display: none; } .iv-splurge-head { font-size: .95rem; margin-bottom: 2px; } .iv-splurge-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } /* ---- Your Road (docs/10 §2.1, Phase 4 UI): the committed path's staged goal bars, top of the Home tab — reuses .iv-comfort-meter for the fill (same generic pill-track look every other progress bar in the game already uses, not a new component). ---- */ .iv-road-head { font-size: .92rem; margin-bottom: 6px; } .iv-road-next { color: var(--iv-pink-text); } .iv-road-complete { color: var(--iv-green-text); font-weight: 700; } .iv-road-bar { margin-bottom: 8px; } .iv-road-bar-label { font-size: .78rem; margin-bottom: 2px; } .iv-road-bar-met .iv-road-bar-label { color: var(--iv-green-text); } .iv-road-fired { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; } /* Accommodation panel's path-gate deep link (docs/10 §2.1, task 2) — styled like a soft warning chip (mirrors .iv-warn's palette), sits right where the taste-gate hint already does. */ .iv-path-gate-hint.iv-btn { display: inline-block; background: var(--iv-red-tint); border-color: var(--iv-red-text); color: var(--iv-red-text); font-weight: 700; margin: 4px 0 0; } .iv-path-gate-hint.iv-btn:hover { background: var(--iv-red-text); color: #fff; } /* ---- Personal Growth, simplified (docs/10 §2.3, Phase 4 UI): title/level/ⓘ on one row, the plain-language line below, numbers moved behind the ⓘ → shared era modal. ---- */ .iv-skill-head { display: flex; align-items: center; gap: 6px; } .iv-skill-info-btn { margin-left: auto; border-radius: 999px !important; padding: 2px 9px !important; min-height: 0; font-weight: 800; color: var(--iv-sky-text); }