Spaces:
Sleeping
Sleeping
| /* ========================================================================= | |
| TinyBard — Anishinaabe Solarpunk CRT Terminal | |
| ---------------------------------------------------------------------------- | |
| A retro CRT terminal reinterpreted through Anishinaabe + Solarpunk lenses. | |
| Phosphor glow becomes "fire-fly light"; scanlines become "birch-bark rings"; | |
| the cabinet's amber becomes rising sun; the screen is the lake (Gichigami) | |
| at dusk, framed in cedar and copper. | |
| ========================================================================= */ | |
| /* === ANISHINAABE-SOLARPUNK DESIGN TOKENS ============================== */ | |
| :root { | |
| /* Solarpunk palette */ | |
| --asp-sky: #5BA4D9; | |
| --asp-water: #1B4965; | |
| --asp-ice: #BEE9E8; | |
| --asp-frost: #CAF0F8; | |
| --asp-sun: #F2A93B; | |
| --asp-sunlight: #FFB347; | |
| --asp-ember: #E76F51; | |
| --asp-birch: #F5F1E8; | |
| --asp-terra: #C8553D; | |
| --asp-earth: #8B3A1F; | |
| --asp-moss: #588157; | |
| --asp-forest: #3D6A4A; | |
| --asp-spruce: #1B4332; | |
| --asp-night: #0F1A2C; | |
| --asp-ash: #3A2E2A; | |
| --asp-stone: #A89F91; | |
| --asp-ink: #1A1F2E; | |
| /* CRT / terminal legacy (re-anchored to solarpunk palette) */ | |
| --green: var(--asp-sun); /* phosphor -> rising sun amber */ | |
| --green-dim: #C97F1E; /* dim sun */ | |
| --green-dark: #5E3A0E; /* cedar-bark */ | |
| --green-glow: rgba(242, 169, 59, 0.18); | |
| --amber: var(--asp-sunlight); | |
| --red: var(--asp-ember); | |
| --bg: var(--asp-night); | |
| --terminal-bg: linear-gradient(160deg, #0F1A2C 0%, #1A2A1F 100%); | |
| --scanline-opacity: 0.04; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| @font-face { | |
| font-family: 'MonoFallback'; | |
| src: local('JetBrains Mono'), local('Fira Code'), local('SF Mono'), local('Menlo'), local('monospace'); | |
| } | |
| body { | |
| background: | |
| radial-gradient(ellipse at top, #1B4965 0%, transparent 60%), | |
| radial-gradient(ellipse at bottom right, #1B4332 0%, transparent 70%), | |
| var(--bg); | |
| font-family: 'MonoFallback', monospace; | |
| color: var(--asp-birch); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| } | |
| /* === ANISHINAABE-SOLARPUNK BANNER ===================================== */ | |
| .asp-banner { | |
| width: 90vw; | |
| max-width: 900px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.7em; | |
| padding: 12px 18px; | |
| margin-top: 18px; | |
| background: linear-gradient(95deg, var(--asp-sky) 0%, var(--asp-water) 100%); | |
| color: var(--asp-birch); | |
| border: 1px solid rgba(255, 179, 71, 0.3); | |
| border-radius: 10px 10px 0 0; | |
| font-family: Georgia, 'Iowan Old Style', serif; | |
| letter-spacing: 0.5px; | |
| text-shadow: 0 1px 2px rgba(15, 26, 44, 0.45); | |
| box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); | |
| } | |
| .asp-banner .syll { font-size: 1.5em; opacity: 0.9; } | |
| .asp-banner .title { font-size: 1.05em; font-weight: 600; } | |
| .asp-banner .glyph { | |
| display: inline-block; | |
| transform: translateY(-1px); | |
| font-size: 1.15em; | |
| color: var(--asp-sunlight); | |
| } | |
| .asp-banner .subtitle { | |
| color: var(--asp-frost); | |
| font-size: 0.85em; | |
| font-style: italic; | |
| opacity: 0.85; | |
| } | |
| /* === CRT MONITOR (cedar-copper cabinet) ================================ */ | |
| .crt-container { | |
| width: 90vw; | |
| max-width: 900px; | |
| height: 75vh; | |
| max-height: 660px; | |
| position: relative; | |
| background: | |
| linear-gradient(180deg, #8B3A1F 0%, #5E2710 100%); | |
| border-radius: 18px 18px 30px 30px; | |
| padding: 22px; | |
| box-shadow: | |
| 0 0 80px rgba(91, 164, 217, 0.12), | |
| inset 0 0 60px rgba(0, 0, 0, 0.5), | |
| 0 20px 60px rgba(0, 0, 0, 0.8); | |
| } | |
| /* decorative bezel rivets — medicine wheel */ | |
| .crt-container::before, | |
| .crt-container::after { | |
| content: "◈"; | |
| position: absolute; | |
| top: 8px; | |
| color: var(--asp-sunlight); | |
| opacity: 0.6; | |
| font-size: 0.9em; | |
| } | |
| .crt-container::before { left: 12px; } | |
| .crt-container::after { right: 12px; } | |
| .crt-screen { | |
| width: 100%; | |
| height: 100%; | |
| background: var(--terminal-bg); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| position: relative; | |
| border: 2px solid #1B4332; | |
| box-shadow: | |
| inset 0 0 80px rgba(27, 73, 50, 0.5), | |
| inset 0 0 4px rgba(255, 179, 71, 0.2); | |
| } | |
| /* Scanlines — birch-bark rings reinterpreted */ | |
| .scanlines { | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 2px, | |
| rgba(91, 164, 217, var(--scanline-opacity)) 2px, | |
| rgba(91, 164, 217, var(--scanline-opacity)) 4px | |
| ); | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| /* Vignette — horizon glow */ | |
| .vignette { | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: radial-gradient( | |
| ellipse at 50% 30%, | |
| rgba(242, 169, 59, 0.05) 0%, | |
| transparent 50%, | |
| rgba(15, 26, 44, 0.55) 100% | |
| ); | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| /* CRT reflection/glare — frost on glass */ | |
| .crt-reflection { | |
| position: absolute; | |
| top: 5%; | |
| left: 5%; | |
| width: 40%; | |
| height: 30%; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(190, 233, 232, 0.05) 0%, | |
| transparent 100% | |
| ); | |
| pointer-events: none; | |
| z-index: 20; | |
| border-radius: 50%; | |
| } | |
| /* === TERMINAL LAYOUT ================================================== */ | |
| .terminal { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 15px 20px; | |
| position: relative; | |
| z-index: 5; | |
| color: var(--asp-birch); | |
| } | |
| .terminal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid rgba(91, 164, 217, 0.3); | |
| margin-bottom: 10px; | |
| font-size: 0.75rem; | |
| color: var(--asp-frost); | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| font-family: Georgia, serif; | |
| } | |
| .terminal-header .status { | |
| color: var(--asp-sunlight); | |
| text-shadow: 0 0 8px rgba(242, 169, 59, 0.35); | |
| } | |
| #health-val { color: var(--asp-sun); font-weight: bold; } | |
| /* === TERMINAL OUTPUT ================================================== */ | |
| .terminal-body { | |
| flex: 1; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| padding-right: 10px; | |
| font-size: 0.88rem; | |
| line-height: 1.65; | |
| text-shadow: 0 0 6px rgba(242, 169, 59, 0.15); | |
| scroll-behavior: smooth; | |
| } | |
| .terminal-body::-webkit-scrollbar { width: 6px; } | |
| .terminal-body::-webkit-scrollbar-track { background: transparent; } | |
| .terminal-body::-webkit-scrollbar-thumb { | |
| background: rgba(91, 164, 217, 0.3); | |
| border-radius: 3px; | |
| } | |
| .line { | |
| display: block; | |
| margin-bottom: 3px; | |
| opacity: 0; | |
| animation: typeIn 0.5s forwards; | |
| } | |
| .line.success { color: var(--asp-sunlight); } | |
| .line.error { color: var(--asp-ember); } | |
| .line.amber { color: var(--asp-sun); } | |
| .story-text { | |
| display: block; | |
| margin: 14px 0; | |
| padding: 12px 16px; | |
| border-left: 2px solid var(--asp-sun); | |
| background: rgba(91, 164, 217, 0.06); | |
| border-radius: 0 4px 4px 0; | |
| white-space: pre-wrap; | |
| color: var(--asp-birch); | |
| animation: fadeSlideIn 0.6s ease-out; | |
| box-shadow: inset 0 0 20px rgba(15, 26, 44, 0.3); | |
| } | |
| .narrator-prefix { | |
| color: var(--asp-sun); | |
| font-weight: bold; | |
| text-shadow: 0 0 8px rgba(242, 169, 59, 0.4); | |
| } | |
| .player-action { | |
| display: block; | |
| color: var(--asp-frost); | |
| margin: 5px 0; | |
| font-style: italic; | |
| border-left: 2px dashed rgba(190, 233, 232, 0.4); | |
| padding-left: 8px; | |
| } | |
| .game-over-win { | |
| color: var(--asp-sunlight); | |
| text-shadow: 0 0 20px rgba(255, 179, 71, 0.6); | |
| font-size: 1.15rem; | |
| text-align: center; | |
| padding: 20px; | |
| animation: pulse 2s infinite; | |
| font-family: Georgia, serif; | |
| } | |
| .game-over-lose { | |
| color: var(--asp-ember); | |
| text-shadow: 0 0 20px rgba(231, 111, 81, 0.5); | |
| font-size: 1.15rem; | |
| text-align: center; | |
| padding: 20px; | |
| animation: pulse 2s infinite; | |
| font-family: Georgia, serif; | |
| } | |
| /* === GENRE SELECTOR =================================================== */ | |
| .genre-selector { | |
| display: flex; | |
| gap: 15px; | |
| padding: 15px 0; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .genre-option { | |
| padding: 12px 25px; | |
| border: 1px solid rgba(91, 164, 217, 0.4); | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| font-size: 0.8rem; | |
| color: var(--asp-frost); | |
| background: rgba(15, 26, 44, 0.4); | |
| } | |
| .genre-option:hover { | |
| background: linear-gradient(95deg, rgba(242, 169, 59, 0.2) 0%, rgba(91, 164, 217, 0.2) 100%); | |
| color: var(--asp-sunlight); | |
| border-color: var(--asp-sun); | |
| text-shadow: 0 0 12px rgba(242, 169, 59, 0.6); | |
| box-shadow: 0 0 18px rgba(242, 169, 59, 0.3); | |
| transform: translateY(-1px); | |
| } | |
| .genre-option .icon { margin-right: 8px; font-size: 1.1em; color: var(--asp-sun); } | |
| /* === CHOICE BUTTONS =================================================== */ | |
| .choices-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| padding: 10px 0; | |
| } | |
| .choice-btn { | |
| display: block; | |
| padding: 10px 15px; | |
| border: 1px solid rgba(91, 164, 217, 0.4); | |
| border-radius: 3px; | |
| background: transparent; | |
| color: var(--asp-frost); | |
| font-family: 'MonoFallback', monospace; | |
| font-size: 0.82rem; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: all 0.15s; | |
| text-shadow: 0 0 3px rgba(91, 164, 217, 0.25); | |
| } | |
| .choice-btn:hover { | |
| background: rgba(91, 164, 217, 0.1); | |
| border-color: var(--asp-sun); | |
| color: var(--asp-sunlight); | |
| padding-left: 25px; | |
| box-shadow: 0 0 12px rgba(242, 169, 59, 0.2); | |
| } | |
| .choice-btn::before { | |
| content: '☼ '; | |
| color: var(--asp-sun); | |
| margin-right: 4px; | |
| } | |
| /* === INPUT LINE ======================================================= */ | |
| .input-line { | |
| display: flex; | |
| align-items: center; | |
| padding: 10px 0 5px; | |
| border-top: 1px solid rgba(91, 164, 217, 0.3); | |
| margin-top: 5px; | |
| } | |
| .prompt-char { | |
| color: var(--asp-sun); | |
| margin-right: 8px; | |
| font-weight: bold; | |
| text-shadow: 0 0 8px rgba(242, 169, 59, 0.5); | |
| } | |
| #cmd-input { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: var(--asp-birch); | |
| font-family: 'MonoFallback', monospace; | |
| font-size: 0.88rem; | |
| outline: none; | |
| caret-color: transparent; | |
| } | |
| .cursor { | |
| color: var(--asp-sun); | |
| text-shadow: 0 0 6px rgba(242, 169, 59, 0.6); | |
| animation: blink 0.8s step-end infinite; | |
| } | |
| /* === TERMINAL FOOTER ================================================== */ | |
| .terminal-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| padding-top: 8px; | |
| border-top: 1px solid rgba(91, 164, 217, 0.2); | |
| margin-top: 8px; | |
| font-size: 0.65rem; | |
| color: var(--asp-stone); | |
| letter-spacing: 1.5px; | |
| } | |
| #model-status { color: var(--asp-moss); } | |
| /* === HEALTH BAR ====================================================== */ | |
| .health-bar-visual { | |
| width: 100%; | |
| height: 4px; | |
| background: rgba(15, 26, 44, 0.6); | |
| border-radius: 2px; | |
| margin-top: 5px; | |
| overflow: hidden; | |
| border: 1px solid rgba(91, 164, 217, 0.3); | |
| } | |
| .health-bar-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--asp-sun) 0%, var(--asp-sunlight) 100%); | |
| transition: width 0.5s ease, background-color 0.5s; | |
| border-radius: 2px; | |
| box-shadow: 0 0 8px rgba(242, 169, 59, 0.5); | |
| } | |
| .health-bar-fill.low { background: linear-gradient(90deg, var(--asp-ember) 0%, var(--asp-terra) 100%); } | |
| .health-bar-fill.mid { background: linear-gradient(90deg, var(--asp-sun) 0%, var(--asp-amber, #FFB347) 100%); } | |
| /* === NEW GAME BUTTON ================================================= */ | |
| .new-game-btn { | |
| display: inline-block; | |
| padding: 10px 22px; | |
| border: 1px solid rgba(91, 164, 217, 0.4); | |
| border-radius: 3px; | |
| background: transparent; | |
| color: var(--asp-frost); | |
| font-family: 'MonoFallback', monospace; | |
| font-size: 0.78rem; | |
| cursor: pointer; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| margin-top: 10px; | |
| transition: all 0.2s; | |
| } | |
| .new-game-btn:hover { | |
| background: linear-gradient(95deg, rgba(242, 169, 59, 0.2) 0%, rgba(91, 164, 217, 0.2) 100%); | |
| color: var(--asp-sunlight); | |
| border-color: var(--asp-sun); | |
| box-shadow: 0 0 16px rgba(242, 169, 59, 0.35); | |
| } | |
| /* === ANIMATIONS ====================================================== */ | |
| @keyframes typeIn { | |
| from { opacity: 0; transform: translateY(5px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeSlideIn { | |
| from { opacity: 0; transform: translateX(-10px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes blink { | |
| 50% { opacity: 0; } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.65; } | |
| } | |
| /* CRT power-on (sun rising) */ | |
| .crt-screen { | |
| animation: sunRise 0.7s ease-out; | |
| } | |
| @keyframes sunRise { | |
| 0% { opacity: 0; transform: scaleY(0.01); box-shadow: inset 0 0 0 rgba(242, 169, 59, 0); } | |
| 40% { opacity: 1; transform: scaleY(0.01); } | |
| 60% { transform: scaleY(1.05); } | |
| 80% { transform: scaleY(0.98); } | |
| 100% { transform: scaleY(1); box-shadow: inset 0 0 80px rgba(27, 73, 50, 0.5); } | |
| } | |
| /* === MOBILE ========================================================== */ | |
| @media (max-width: 600px) { | |
| .crt-container { | |
| width: 95vw; | |
| height: 78vh; | |
| padding: 12px; | |
| border-radius: 14px; | |
| } | |
| .genre-selector { flex-direction: column; gap: 8px; } | |
| .genre-option { text-align: center; } | |
| .terminal-body { font-size: 0.78rem; } | |
| .asp-banner { font-size: 0.85em; } | |
| } | |