/* Fog & Forge — styles * Gracefully Glitching LLC * Palette: aubergine ground; teal / gold / dusty rose accents. * Gothic warmth: low light, candle glow, soft edges. AA contrast. */ :root { /* grounds */ --ink: #1c1420; --surface: #271b2e; --surface-raised: #352640; --aubergine: #4a3357; /* accents */ --teal: #57c4b8; --gold: #e8c06a; --rose: #d99fa9; /* type */ --text: #efe7ef; --muted: #b6a6bb; /* states */ --danger: #d98a8a; --success: #9ad6b0; --radius: 14px; --radius-sm: 9px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --glow-gold: 0 0 18px rgba(232, 192, 106, 0.25); --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-base: 16px; } /* accessibility settings (toggled on ) */ html.large-text { --fs-base: 19px; } /* ===================== COSMETIC THEMES ===================== */ /* Default (no class) = "Aubergine Dusk", defined in :root above. * Free themes and the premium Season Pack override the palette here. * Placed BEFORE high-contrast so the accessibility theme always wins. */ /* — free — */ html.theme-candlelit { --ink: #201613; --surface: #2c1d17; --surface-raised: #3a281e; --aubergine: #523524; --teal: #d8a24e; --gold: #f0cf86; --rose: #e0a98f; --text: #f3e9df; --muted: #c3ac98; } html.theme-slate { --ink: #12161b; --surface: #1a2027; --surface-raised: #273039; --aubergine: #33414e; --teal: #6fc6c0; --gold: #cdd6dd; --rose: #aebfcb; --text: #e8eef3; --muted: #a3b2bf; } /* — premium: Season Pack — */ html.theme-spring { --ink: #121d18; --surface: #182a22; --surface-raised: #21392f; --aubergine: #2f4a3c; --teal: #69d6a9; --gold: #d7e08a; --rose: #bfe0b0; --text: #eaf4ec; --muted: #a7c2b1; } html.theme-summer { --ink: #211a10; --surface: #2e2414; --surface-raised: #3e311b; --aubergine: #574326; --teal: #e6c25a; --gold: #ffdf8a; --rose: #f0b98a; --text: #f6efe0; --muted: #cdb892; } html.theme-autumn { --ink: #1f1411; --surface: #2c1a14; --surface-raised: #3c241a; --aubergine: #5a3326; --teal: #e08a5a; --gold: #edb368; --rose: #e29a8a; --text: #f4e6df; --muted: #c6a596; } html.theme-winter { --ink: #131820; --surface: #1b232e; --surface-raised: #28313f; --aubergine: #36465a; --teal: #8fcfe0; --gold: #d8e6f0; --rose: #c2d2e0; --text: #ecf2f8; --muted: #a8bccc; } html.high-contrast { --ink: #100a14; --surface: #1e1424; --surface-raised: #2c1f36; --text: #ffffff; --muted: #d8cbdc; --gold: #f3cf80; --teal: #74dccf; --rose: #eeb3bc; } * { box-sizing: border-box; } html { font-size: var(--fs-base); } body { margin: 0; min-height: 100vh; font-family: var(--font-body); color: var(--text); background: radial-gradient(1200px 600px at 20% -10%, rgba(74, 51, 87, 0.55), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(87, 196, 184, 0.08), transparent 55%), linear-gradient(160deg, #20161f 0%, var(--ink) 55%, #160f1a 100%); background-attachment: fixed; line-height: 1.55; } /* drifting fog overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(600px 300px at 30% 80%, rgba(182, 166, 187, 0.06), transparent 70%), radial-gradient(500px 260px at 75% 30%, rgba(182, 166, 187, 0.05), transparent 70%); animation: drift 26s ease-in-out infinite alternate; z-index: 0; } @keyframes drift { from { transform: translate3d(-2%, 0, 0); opacity: 0.8; } to { transform: translate3d(3%, -1.5%, 0); opacity: 1; } } html.reduced-motion body::before { animation: none; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 100; font-family: var(--font-ui); font-weight: 600; } .skip-link:focus { left: 0; } /* visible focus everywhere */ :focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; } .screen { position: relative; z-index: 1; } [hidden] { display: none !important; } /* ===================== TITLE ===================== */ .screen-title { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; } .title-card { max-width: 560px; width: 100%; text-align: center; background: linear-gradient(180deg, rgba(53, 38, 64, 0.85), rgba(39, 27, 46, 0.9)); border: 1px solid rgba(217, 159, 169, 0.18); border-radius: var(--radius); padding: 2.5rem 2rem; box-shadow: var(--shadow); backdrop-filter: blur(4px); } .entity-mark { font-family: var(--font-ui); letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.7rem; color: var(--rose); margin: 0 0 1.2rem; } .game-title { font-size: clamp(2.6rem, 8vw, 3.8rem); margin: 0; font-weight: 600; letter-spacing: 0.01em; } .title-fog { color: var(--muted); } .title-forge { color: var(--gold); text-shadow: var(--glow-gold); } .game-sub { font-family: var(--font-ui); color: var(--teal); margin: 0.4rem 0 1.5rem; letter-spacing: 0.04em; } .game-blurb { color: var(--text); font-size: 1.08rem; margin: 0 auto 2rem; max-width: 42ch; } .title-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; } .title-footer { margin-top: 2rem; font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted); } .title-support { font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); margin: 0.5rem 0 0; } .title-support a, .footer-support { color: var(--gold); text-decoration: none; border-bottom: 1px dotted var(--gold); } .title-support a:hover, .footer-support:hover { color: var(--rose); border-bottom-color: var(--rose); } .footer-support { font-family: inherit; } /* account bar (hidden unless GG backend configured) */ .ff-account { margin-top: 1.4rem; background: rgba(28, 20, 32, 0.55); border: 1px solid rgba(87, 196, 184, 0.22); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; } .ff-acct-row { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap; } .ff-acct-row + .ff-acct-row { margin-top: 0.5rem; } .ff-restore-row:empty { display: none; } .ff-acct-msg { font-family: var(--font-ui); font-size: 0.85rem; color: var(--muted); } .ff-acct-msg strong { color: var(--teal); } /* ===================== BUTTONS ===================== */ .btn { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; color: var(--text); background: var(--surface-raised); border: 1px solid rgba(217, 159, 169, 0.25); padding: 0.7rem 1.3rem; border-radius: 999px; cursor: pointer; transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease; } .btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--teal); } .btn:active:not(:disabled) { transform: translateY(0); } .btn:disabled, .btn.disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: linear-gradient(180deg, var(--gold), #d9a94e); color: #2a1d10; border-color: transparent; box-shadow: var(--glow-gold); } .btn-ghost { background: transparent; } .btn-small { padding: 0.4rem 0.9rem; font-size: 0.82rem; } .btn-forge { background: linear-gradient(180deg, var(--teal), #3fa093); color: #08201d; border: none; padding: 0.5rem 1rem; font-size: 0.85rem; } html.reduced-motion .btn { transition: none; } html.reduced-motion .btn:hover:not(:disabled) { transform: none; } /* ===================== SETTINGS ===================== */ .settings-panel { margin-top: 1.5rem; text-align: left; background: rgba(28, 20, 32, 0.6); border: 1px solid rgba(182, 166, 187, 0.18); border-radius: var(--radius-sm); padding: 1.2rem 1.3rem; } .settings-panel h2 { font-family: var(--font-ui); font-size: 0.95rem; margin: 0 0 0.8rem; color: var(--gold); } .toggle { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-ui); font-size: 0.95rem; padding: 0.35rem 0; cursor: pointer; } .toggle input { width: 1.15rem; height: 1.15rem; accent-color: var(--teal); } .settings-note { font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); margin: 0.7rem 0 0; } /* ===================== GAME LAYOUT ===================== */ .screen-game { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1.25rem 2rem; } .game-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.9rem 1.1rem; background: linear-gradient(180deg, rgba(53,38,64,0.8), rgba(39,27,46,0.85)); border: 1px solid rgba(217, 159, 169, 0.16); border-radius: var(--radius); box-shadow: var(--shadow); } .header-left { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .badge { font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 999px; } .badge-day { background: var(--aubergine); color: var(--text); } .chapter-label { font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; } .chapter-title { color: var(--gold); font-style: italic; } .fog-meter { display: flex; align-items: center; gap: 0.6rem; } .fog-label { font-family: var(--font-ui); font-size: 0.75rem; color: var(--muted); } .fog-track { width: 160px; height: 10px; background: rgba(182, 166, 187, 0.18); border-radius: 999px; overflow: hidden; } .fog-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), var(--muted)); transition: width 0.6s ease; } html.reduced-motion .fog-fill { transition: none; } .fog-pct { font-family: var(--font-ui); font-size: 0.8rem; color: var(--text); min-width: 2.6em; text-align: right; } /* ===================== THE LIVING SCENE ===================== */ .scene-wrap { margin-top: 1.1rem; border: 1px solid rgba(217, 159, 169, 0.18); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--ink); } .ff-scene { display: block; width: 100%; height: clamp(170px, 32vw, 300px); } /* gradient stops (themeable) */ .sc-sky-0 { stop-color: var(--ink); } .sc-sky-1 { stop-color: var(--aubergine); } .sc-moon-0 { stop-color: var(--gold); stop-opacity: 0.45; } .sc-moon-1 { stop-color: var(--gold); stop-opacity: 0; } .sc-forge-0 { stop-color: var(--gold); stop-opacity: 0.85; } .sc-forge-1 { stop-color: var(--gold); stop-opacity: 0; } .sc-star { fill: var(--text); opacity: 0.5; } .sc-moon { fill: var(--gold); opacity: 0.85; } .sc-hills { fill: var(--ink); opacity: 0.55; } .sc-town { fill: var(--ink); opacity: 0.94; } .sc-ground { fill: var(--ink); opacity: 0.88; } .sc-win { fill: var(--muted); opacity: 0.22; transition: fill 0.6s ease, opacity 0.6s ease; } .sc-win.lit { fill: var(--gold); opacity: 0.95; } /* forge */ .sc-anvil, .sc-bowl { fill: var(--ink); } .sc-forge-glow { transform-box: fill-box; transform-origin: center; } .sc-flame-1 { fill: var(--gold); transform-box: fill-box; transform-origin: bottom; animation: sc-flicker 1.4s ease-in-out infinite; } .sc-flame-2 { fill: var(--rose); opacity: 0.85; transform-box: fill-box; transform-origin: bottom; animation: sc-flicker 1.1s ease-in-out infinite 0.3s; } @keyframes sc-flicker { 0%, 100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.18) scaleX(0.92) translateY(-2px); } } /* wards (appear when forged) */ .sc-ward { opacity: 0; transition: opacity 0.7s ease; } .sc-ward.shown { opacity: 1; } .sc-stone { fill: var(--muted); } .sc-stone2 { fill: var(--surface-raised); } .sc-coal { fill: var(--ink); } .sc-cglow { fill: var(--gold); animation: sc-coalglow 2.2s ease-in-out infinite; } @keyframes sc-coalglow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .sc-heart { fill: var(--rose); } .sc-stele { fill: var(--muted); } .sc-stele2 { fill: var(--aubergine); } .sc-post { fill: var(--ink); } .sc-lantern-body { fill: var(--ink); stroke: var(--gold); stroke-width: 1.2; } .sc-lantern-flame { fill: var(--gold); } .sc-lantern-halo { fill: var(--gold); opacity: 0; transition: opacity 0.8s ease; } .has-lantern .sc-lantern-halo { opacity: 0.5; animation: sc-coalglow 3s ease-in-out infinite; } /* townsfolk */ .sc-folk { opacity: 0; transition: opacity 0.7s ease; } .sc-folk.shown { opacity: 1; } .sc-folk-body, .sc-folk-head { fill: var(--ink); } .sc-folk-shadow { fill: #000; opacity: 0.3; } /* embers (group opacity set by JS via --ember-vis) */ .sc-embers { opacity: var(--ember-vis, 0); transition: opacity 0.8s ease; } .sc-ember { fill: var(--gold); opacity: 0.85; transform-box: fill-box; transform-origin: center; animation: sc-emberrise 5s ease-in infinite; } @keyframes sc-emberrise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 0.9; } 100% { transform: translateY(-46px); opacity: 0; } } /* fog banks (group opacity set by JS from the fog level) */ .sc-fog { transition: opacity 0.8s ease; } .sc-fog-layer { fill: var(--muted); opacity: 0.5; transform-box: fill-box; transform-origin: center; animation: sc-fogdrift 22s ease-in-out infinite alternate; } .sc-fog-layer:nth-child(2) { animation-duration: 28s; animation-direction: alternate-reverse; } .sc-fog-layer:nth-child(3) { animation-duration: 34s; } @keyframes sc-fogdrift { from { transform: translateX(-3%); } to { transform: translateX(3%); } } /* action feedback pulses (animations override inline opacity while playing) */ .ff-scene.pulse-forge .sc-forge-glow { animation: sc-pulse-glow 0.9s ease; } @keyframes sc-pulse-glow { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); opacity: 1; } } .ff-scene.pulse-gather .sc-embers { animation: sc-pulse-embers 0.9s ease; } @keyframes sc-pulse-embers { 0%, 100% { opacity: var(--ember-vis, 0); } 40% { opacity: 1; } } .ff-scene.pulse-venture .sc-fog-layer { animation: sc-pulse-fog 0.9s ease; } @keyframes sc-pulse-fog { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5%); } } html.reduced-motion .sc-flame-1, html.reduced-motion .sc-flame-2, html.reduced-motion .sc-cglow, html.reduced-motion .sc-lantern-halo, html.reduced-motion .sc-ember, html.reduced-motion .sc-fog-layer, html.reduced-motion .ff-scene.pulse-forge .sc-forge-glow, html.reduced-motion .ff-scene.pulse-gather .sc-embers, html.reduced-motion .ff-scene.pulse-venture .sc-fog-layer { animation: none !important; } .game-grid { display: grid; grid-template-columns: 280px 1fr 320px; gap: 1.1rem; margin-top: 1.1rem; } @media (max-width: 980px) { .game-grid { grid-template-columns: 1fr; } } .panel { background: linear-gradient(180deg, rgba(53,38,64,0.55), rgba(39,27,46,0.7)); border: 1px solid rgba(182, 166, 187, 0.14); border-radius: var(--radius); padding: 1.1rem 1.15rem; box-shadow: var(--shadow); } .panel-title { font-family: var(--font-ui); font-size: 0.95rem; letter-spacing: 0.03em; color: var(--gold); margin: 0 0 0.9rem; } .log-title { margin-top: 1.4rem; } /* ===================== SPOONS / RESOURCES ===================== */ .spoons { margin-bottom: 1.1rem; } .spoon-label { font-family: var(--font-ui); font-size: 0.9rem; color: var(--text); font-weight: 600; } .spoon-pips { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.45rem; } .spoon-pip { font-size: 1.25rem; filter: grayscale(0); transition: opacity 0.2s ease; } .spoon-pip.spent { opacity: 0.22; filter: grayscale(1); } .resources { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.8rem 0; border-top: 1px solid rgba(182,166,187,0.12); border-bottom: 1px solid rgba(182,166,187,0.12); } .res { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; flex: 1; } .res-icon { font-size: 1.3rem; } .res-num { font-size: 1.25rem; font-weight: 700; color: var(--text); } .res-name { font-family: var(--font-ui); font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .story-progress { padding: 0.9rem 0; } .embers-line { font-family: var(--font-ui); font-size: 0.85rem; margin: 0 0 0.4rem; color: var(--text); } .embers-line strong { color: var(--gold); } .next-chapter { font-size: 0.92rem; color: var(--rose); margin: 0; font-style: italic; } .journal h2 { font-family: var(--font-ui); font-size: 0.85rem; color: var(--gold); margin: 0.6rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; } .journal-list { display: flex; flex-direction: column; gap: 0.4rem; } .journal-list .empty { font-size: 0.85rem; color: var(--muted); font-style: italic; margin: 0; } .journal-entry { background: rgba(28,20,32,0.5); border: 1px solid rgba(182,166,187,0.12); border-radius: var(--radius-sm); padding: 0.4rem 0.7rem; } .journal-entry summary { cursor: pointer; font-family: var(--font-ui); font-size: 0.85rem; color: var(--teal); } .journal-entry p { font-size: 0.9rem; color: var(--text); margin: 0.5rem 0 0.2rem; } /* ===================== ACTIONS ===================== */ .actions { display: flex; flex-direction: column; gap: 0.6rem; } .action-card { display: flex; align-items: center; gap: 0.85rem; text-align: left; width: 100%; background: rgba(28,20,32,0.45); border: 1px solid rgba(182,166,187,0.16); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; cursor: pointer; color: var(--text); font-family: inherit; transition: transform 0.12s ease, border-color 0.2s ease, background 0.2s ease; } .action-card:hover:not(:disabled) { border-color: var(--teal); transform: translateX(2px); background: rgba(53,38,64,0.6); } .action-card.disabled, .action-card:disabled { opacity: 0.4; cursor: not-allowed; } html.reduced-motion .action-card { transition: none; } html.reduced-motion .action-card:hover:not(:disabled) { transform: none; } .action-icon { font-size: 1.7rem; flex-shrink: 0; } .action-body { display: flex; flex-direction: column; gap: 0.15rem; } .action-name { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; } .action-cost { font-size: 0.72rem; background: var(--aubergine); color: var(--gold); padding: 0.1rem 0.5rem; border-radius: 999px; } .action-hint { font-size: 0.85rem; color: var(--muted); } .day-over { text-align: center; padding: 1.2rem 0.5rem; } .day-over p { color: var(--rose); font-style: italic; margin: 0 0 1rem; } .day-over-sub { font-family: var(--font-ui); font-size: 0.85rem; color: var(--muted); font-style: normal; max-width: 42ch; margin: 0 auto !important; } .toggle-spoonie { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px solid rgba(182,166,187,0.14); } .settings-note-spoonie { color: var(--rose); } /* ===================== LOG ===================== */ .log { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.5rem 0.2rem; scroll-behavior: smooth; } html.reduced-motion .log { scroll-behavior: auto; } .log-line { margin: 0; font-size: 0.95rem; } .log-day { color: var(--gold); font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.05em; margin-top: 0.4rem; } .log-ambient { color: var(--muted); font-style: italic; } .log-spoons { color: var(--teal); font-family: var(--font-ui); font-size: 0.85rem; } .log-action { color: var(--text); } .log-note { color: var(--rose); font-family: var(--font-ui); font-size: 0.85rem; } .log-forge { color: var(--gold); } .log-chapter { color: var(--gold); font-weight: 700; font-style: italic; } .log-flash { color: var(--danger); font-family: var(--font-ui); font-size: 0.85rem; } .log-people { color: var(--rose); } .log-glimpse { color: var(--teal); font-style: italic; } .log-gift { color: var(--gold); font-family: var(--font-ui); font-size: 0.92rem; } .log-discovery { color: var(--gold); } .log-lift { color: var(--success); font-family: var(--font-ui); } .log-dip { color: var(--rose); font-family: var(--font-ui); } .alm-hint { font-size: 0.78rem; color: var(--muted); font-style: italic; margin: 0 0 0.5rem; } .days-kept { font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted); margin: 0.5rem 0 0; } /* ===================== ALMANAC ===================== */ .almanac-body .alm-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0.4rem; } .alm-chip { font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); background: rgba(28, 20, 32, 0.5); border: 1px solid rgba(182, 166, 187, 0.16); border-radius: 999px; padding: 0.3rem 0.7rem; } .alm-chip strong { color: var(--gold); } .alm-chip-ic { margin-right: 0.2rem; } .alm-h { font-family: var(--font-ui); font-size: 0.95rem; color: var(--teal); margin: 1.3rem 0 0.5rem; } .alm-people { display: flex; flex-direction: column; gap: 0.55rem; } .alm-person { background: rgba(28, 20, 32, 0.45); border: 1px solid rgba(182, 166, 187, 0.12); border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; opacity: 0.7; } .alm-person.met { opacity: 1; border-color: rgba(217, 159, 169, 0.25); } .alm-person-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; flex-wrap: wrap; } .alm-ic { font-size: 1.25rem; } .alm-person-name { font-family: var(--font-ui); font-weight: 600; } .alm-person-status { font-family: var(--font-ui); font-size: 0.72rem; color: var(--gold); margin-left: auto; background: var(--aubergine); padding: 0.12rem 0.5rem; border-radius: 999px; } .alm-person-text { font-size: 0.9rem; color: var(--text); margin: 0; } .alm-glimpses { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } @media (max-width: 560px) { .alm-glimpses { grid-template-columns: 1fr; } } .alm-glimpse { display: flex; gap: 0.55rem; align-items: flex-start; background: rgba(28, 20, 32, 0.45); border: 1px solid rgba(182, 166, 187, 0.12); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; opacity: 0.6; } .alm-glimpse.seen { opacity: 1; } .alm-gname { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; } .alm-gtext { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; } /* ===================== FORGE MARKET ===================== */ .mkt-lede { font-size: 0.95rem; color: var(--muted); margin: 0.5rem 0 0; } .mkt-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } @media (max-width: 560px) { .mkt-themes { grid-template-columns: 1fr; } } .mkt-theme { text-align: left; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "sw name" "sw desc" "sw tag"; gap: 0.05rem 0.6rem; background: rgba(28, 20, 32, 0.45); border: 1px solid rgba(182, 166, 187, 0.16); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; cursor: pointer; color: var(--text); font-family: inherit; } .mkt-theme:hover { border-color: var(--teal); } .mkt-theme.active { border-color: var(--gold); box-shadow: var(--glow-gold); } .mkt-theme.locked { opacity: 0.72; } .mkt-sw { grid-area: sw; width: 34px; height: 34px; border-radius: 8px; align-self: center; border: 1px solid rgba(255,255,255,0.18); } .mkt-theme-name { grid-area: name; font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; } .mkt-theme-desc { grid-area: desc; font-size: 0.8rem; color: var(--muted); } .mkt-theme-tag { grid-area: tag; font-family: var(--font-ui); font-size: 0.7rem; color: var(--gold); margin-top: 0.15rem; } /* swatch previews (ground · gold · teal of each theme) */ .sw-dusk { background: linear-gradient(135deg, #1c1420 33%, #e8c06a 33% 66%, #57c4b8 66%); } .sw-candlelit { background: linear-gradient(135deg, #201613 33%, #f0cf86 33% 66%, #d8a24e 66%); } .sw-slate { background: linear-gradient(135deg, #12161b 33%, #cdd6dd 33% 66%, #6fc6c0 66%); } .sw-spring { background: linear-gradient(135deg, #121d18 33%, #d7e08a 33% 66%, #69d6a9 66%); } .sw-summer { background: linear-gradient(135deg, #211a10 33%, #ffdf8a 33% 66%, #e6c25a 66%); } .sw-autumn { background: linear-gradient(135deg, #1f1411 33%, #edb368 33% 66%, #e08a5a 66%); } .sw-winter { background: linear-gradient(135deg, #131820 33%, #d8e6f0 33% 66%, #8fcfe0 66%); } .mkt-offers { display: flex; flex-direction: column; gap: 0.55rem; } .mkt-offer { background: rgba(28, 20, 32, 0.45); border: 1px solid rgba(182, 166, 187, 0.14); border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; } .mkt-offer.got { border-color: rgba(154, 214, 176, 0.4); } .mkt-offer-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .mkt-offer-name { font-family: var(--font-ui); font-weight: 600; } .mkt-kind { font-family: var(--font-ui); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: var(--aubergine); padding: 0.1rem 0.45rem; border-radius: 999px; margin-left: auto; } .mkt-offer-desc { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.5rem; } .mkt-offer-foot { display: flex; justify-content: flex-end; } .mkt-owned { font-family: var(--font-ui); font-size: 0.82rem; color: var(--success); font-weight: 600; } .mkt-soon { font-family: var(--font-ui); font-size: 0.8rem; color: var(--rose); font-style: italic; } .mkt-redeem-note, .mkt-tip { font-size: 0.84rem; color: var(--muted); margin: 0.3rem 0; } .mkt-tip a, .mkt-redeem-note a { color: var(--gold); } .mkt-redeem { display: flex; gap: 0.5rem; margin: 0.4rem 0; } .mkt-redeem input { flex: 1; background: rgba(14, 9, 16, 0.5); border: 1px solid rgba(182, 166, 187, 0.25); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-ui); padding: 0.5rem 0.7rem; } .mkt-msg { font-family: var(--font-ui); font-size: 0.84rem; color: var(--teal); min-height: 1.2em; margin: 0.2rem 0; } /* ===================== WARDS ===================== */ .forge-note { font-size: 0.88rem; color: var(--muted); margin: 0 0 1rem; } .wards { display: flex; flex-direction: column; gap: 0.7rem; } .ward-card { background: rgba(28,20,32,0.45); border: 1px solid rgba(182,166,187,0.14); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem; } .ward-card.owned { border-color: rgba(154, 214, 176, 0.5); background: rgba(40, 50, 44, 0.35); } .ward-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; } .ward-icon { font-size: 1.3rem; } .ward-name { font-family: var(--font-ui); font-weight: 600; } .ward-desc { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.6rem; } .ward-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .ward-cost { font-family: var(--font-ui); font-size: 0.74rem; } .ward-cost .cost { padding: 0.1rem 0.4rem; border-radius: 6px; } .ward-cost .cost.ok { color: var(--success); } .ward-cost .cost.short { color: var(--muted); } .ward-state { font-family: var(--font-ui); font-size: 0.82rem; color: var(--success); font-weight: 600; } /* ===================== FOOTER ===================== */ .game-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid rgba(182,166,187,0.1); } .footer-mark { font-family: var(--font-ui); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; } @media (max-width: 980px) { .panel-status { order: 2; } .panel-actions { order: 1; } .panel-forge { order: 3; } } .header-right { display: flex; align-items: center; gap: 0.7rem; } #btn-help { white-space: nowrap; } /* ===================== HOW TO PLAY DIALOG ===================== */ .how-dialog { border: none; background: transparent; padding: 0; max-width: 640px; width: calc(100% - 2rem); color: var(--text); } .how-dialog::backdrop { background: rgba(14, 9, 16, 0.72); backdrop-filter: blur(3px); } .how-inner { background: linear-gradient(180deg, var(--surface-raised), var(--surface)); border: 1px solid rgba(217, 159, 169, 0.25); border-radius: var(--radius); box-shadow: var(--shadow); max-height: 86vh; display: flex; flex-direction: column; } .how-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem 0.8rem; border-bottom: 1px solid rgba(182, 166, 187, 0.16); } .how-head h2 { margin: 0; font-size: 1.3rem; color: var(--gold); } .how-body { padding: 0.4rem 1.3rem 0.8rem; overflow-y: auto; } .how-lede { font-size: 1.05rem; color: var(--text); } .how-body h3 { font-family: var(--font-ui); font-size: 1rem; color: var(--teal); margin: 1.3rem 0 0.4rem; } .how-body ul { margin: 0.3rem 0 0.6rem; padding-left: 1.2rem; } .how-body li { margin: 0.28rem 0; } .how-body p { margin: 0.4rem 0; } .how-foot { padding: 0.9rem 1.3rem 1.2rem; border-top: 1px solid rgba(182, 166, 187, 0.16); display: flex; justify-content: flex-end; } html.reduced-motion .how-dialog::backdrop { backdrop-filter: none; }