| @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&display=swap'); |
|
|
| |
| :root { |
| --parchment: #FDF6E3; |
| --panel: #FDFBF7; |
| --orange: #E87A10; |
| --orange-lt: #FFE0B2; |
| --wood: #8B5E3C; |
| --wood-dark: #5C3D1E; |
| --forest: #4A7B3A; |
| --border: #3B2D1F; |
| --text: #2C1A0E; |
| --muted: #7A5C3A; |
| --highlight-bg: #FFF4D0; |
| --pixel-shadow: 3px 3px 0 var(--border); |
| } |
|
|
| |
| html, |
| body { |
| margin: 0 !important; |
| overflow-x: hidden !important; |
| overscroll-behavior: none !important; |
| } |
|
|
| body, |
| .gradio-container, |
| .main, |
| #root { |
| background: var(--parchment) !important; |
| font-family: 'VT323', monospace !important; |
| color: var(--text) !important; |
| } |
|
|
| .gradio-container { |
| padding: 0 !important; |
| max-width: none !important; |
| overflow: visible !important; |
| overscroll-behavior: none !important; |
| } |
|
|
| .main, |
| .contain, |
| gradio-app { |
| min-height: 0 !important; |
| overflow: visible !important; |
| overscroll-behavior: none !important; |
| } |
|
|
| footer, |
| .built-with { |
| display: none !important; |
| } |
|
|
| .react-shell { |
| width: min(100vw, 480px); |
| aspect-ratio: 852 / 1846; |
| height: auto; |
| margin: 0 auto; |
| overflow: hidden; |
| overscroll-behavior: none; |
| background: #F8F5EE; |
| box-shadow: 0 18px 60px rgba(47, 36, 24, 0.22); |
| } |
|
|
| .react-shell-frame { |
| display: block; |
| width: 100%; |
| height: 100%; |
| border: 0; |
| background: #F8F5EE; |
| } |
|
|
| .react-shell-error { |
| margin: 24px auto; |
| max-width: 520px; |
| padding: 18px; |
| border: 3px solid var(--border); |
| background: var(--panel); |
| color: var(--text); |
| } |
|
|
| |
| .app-header { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| padding: 16px 20px 12px; |
| border-bottom: 3px solid var(--border); |
| background: linear-gradient(135deg, #1787C2 0%, #0E4D82 100%); |
| margin-bottom: 0; |
| } |
| .header-globe { font-size: 40px; line-height: 1; } |
| .header-title { |
| font-family: 'Press Start 2P', monospace; |
| font-size: 16px; |
| color: #FFF1C8; |
| text-shadow: 2px 2px 0 #0E4D82; |
| letter-spacing: 1px; |
| } |
| .header-sub { |
| font-size: 16px; |
| color: #B8D9F0; |
| margin-top: 4px; |
| } |
|
|
| |
| .main-tabs .tab-nav button { |
| font-family: 'Press Start 2P', monospace !important; |
| font-size: 9px !important; |
| padding: 8px 12px !important; |
| border-radius: 0 !important; |
| border: 2px solid var(--border) !important; |
| background: var(--panel) !important; |
| color: var(--wood) !important; |
| margin-right: 3px; |
| } |
| .main-tabs .tab-nav button.selected { |
| background: var(--wood) !important; |
| color: var(--panel) !important; |
| box-shadow: var(--pixel-shadow); |
| } |
| .tab-intro { |
| font-size: 15px; |
| color: var(--muted); |
| padding: 8px 0 12px; |
| border-bottom: 2px dashed var(--wood); |
| margin-bottom: 12px; |
| } |
|
|
| |
| .scene-radio .wrap { |
| gap: 6px !important; |
| } |
| .scene-radio label span { |
| font-family: 'VT323', monospace !important; |
| font-size: 16px !important; |
| color: var(--text) !important; |
| } |
| .scene-radio label { |
| border: 2px solid var(--border) !important; |
| border-radius: 0 !important; |
| padding: 8px 10px !important; |
| background: var(--panel) !important; |
| box-shadow: 2px 2px 0 var(--border); |
| cursor: pointer; |
| transition: background 0.1s; |
| } |
| .scene-radio label:hover { |
| background: var(--orange-lt) !important; |
| } |
| .scene-radio label.selected, |
| .scene-radio input:checked + label { |
| background: var(--wood) !important; |
| color: var(--panel) !important; |
| } |
|
|
| |
| .decode-btn, |
| .decode-btn button { |
| font-family: 'Press Start 2P', monospace !important; |
| font-size: 11px !important; |
| background: var(--orange) !important; |
| color: #FFF !important; |
| border: 3px solid var(--border) !important; |
| border-radius: 0 !important; |
| box-shadow: 4px 4px 0 var(--border) !important; |
| padding: 12px 20px !important; |
| width: 100% !important; |
| margin-top: 10px; |
| cursor: pointer; |
| transition: box-shadow 0.1s, transform 0.1s; |
| } |
| .decode-btn button:hover { |
| box-shadow: 2px 2px 0 var(--border) !important; |
| transform: translate(2px, 2px); |
| } |
| .decode-btn button:active { |
| box-shadow: none !important; |
| transform: translate(4px, 4px); |
| } |
|
|
| |
| .loading-state { |
| text-align: center; |
| padding: 24px 20px; |
| border: 2px solid var(--wood); |
| background: var(--panel); |
| } |
| .loading-spinner { font-size: 28px; animation: spin 1.2s linear infinite; display: inline-block; } |
| @keyframes spin { to { transform: rotate(360deg); } } |
| .loading-step { |
| font-family: 'Press Start 2P', monospace; |
| font-size: 9px; |
| color: var(--orange); |
| margin-top: 8px; |
| } |
| .loading-detail { font-size: 14px; color: var(--muted); margin-top: 4px; } |
| .error-state { |
| font-size: 15px; |
| color: #C0392B; |
| text-align: center; |
| padding: 24px 20px; |
| border: 2px solid #C0392B; |
| background: #FFF0EE; |
| } |
| .empty-state { |
| font-size: 16px; |
| color: var(--muted); |
| text-align: center; |
| padding: 40px 20px; |
| border: 2px dashed var(--wood); |
| background: var(--panel); |
| } |
|
|
| |
| .decode-root { display: flex; flex-direction: column; gap: 14px; } |
|
|
| .scene-banner { |
| display: flex; |
| gap: 14px; |
| align-items: center; |
| background: var(--panel); |
| border: 3px solid var(--border); |
| box-shadow: var(--pixel-shadow); |
| padding: 12px; |
| } |
| .scene-thumb { |
| width: 100px; |
| height: 80px; |
| object-fit: cover; |
| border: 2px solid var(--border); |
| flex-shrink: 0; |
| image-rendering: pixelated; |
| } |
| .scene-flag-big { font-size: 28px; line-height: 1; margin-bottom: 4px; } |
| .scene-title-big { |
| font-family: 'Press Start 2P', monospace; |
| font-size: 9px; |
| color: var(--text); |
| line-height: 1.5; |
| margin-bottom: 4px; |
| } |
| .scene-loc { font-size: 14px; color: var(--wood); } |
| .scene-cat { |
| display: inline-block; |
| font-size: 13px; |
| background: var(--wood); |
| color: var(--panel); |
| padding: 1px 6px; |
| margin-top: 3px; |
| } |
|
|
| |
| .section-card { |
| background: var(--panel); |
| border: 3px solid var(--border); |
| box-shadow: var(--pixel-shadow); |
| overflow: hidden; |
| } |
| .section-header { |
| font-family: 'Press Start 2P', monospace; |
| font-size: 9px; |
| background: var(--wood); |
| color: var(--panel); |
| padding: 8px 12px; |
| border-bottom: 2px solid var(--border); |
| letter-spacing: 1px; |
| } |
|
|
| .detected-subject { |
| font-size: 16px; |
| color: var(--text); |
| padding: 10px 12px 4px; |
| margin: 0; |
| font-weight: bold; |
| } |
| .features-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| padding: 4px 12px 8px; |
| } |
| .feature-tag { |
| font-size: 13px; |
| background: var(--panel); |
| border: 2px solid var(--border); |
| padding: 2px 8px; |
| color: var(--wood); |
| } |
| .context-box { |
| background: #F0E8D0; |
| border-top: 2px solid var(--border); |
| padding: 8px 12px; |
| } |
| .context-label { |
| font-family: 'Press Start 2P', monospace; |
| font-size: 8px; |
| color: var(--orange); |
| margin-bottom: 4px; |
| } |
| .context-text { font-size: 14px; color: var(--muted); margin: 0; } |
|
|
| |
| .layer-card { |
| border-top: 2px solid var(--border); |
| padding: 10px 12px; |
| } |
| .layer-card:first-child { border-top: none; } |
| .layer-standard { background: #FDFBF7; } |
| .layer-highlight { background: var(--highlight-bg); box-shadow: inset 3px 0 0 var(--orange); } |
|
|
| .layer-header { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| margin-bottom: 6px; |
| } |
| .layer-badge { |
| font-family: 'Press Start 2P', monospace; |
| font-size: 8px; |
| background: var(--wood); |
| color: var(--panel); |
| padding: 3px 6px; |
| flex-shrink: 0; |
| } |
| .layer-highlight .layer-badge { background: var(--orange); } |
| .layer-heading { |
| font-family: 'Press Start 2P', monospace; |
| font-size: 8px; |
| color: var(--text); |
| } |
| .layer-text { |
| font-size: 15px; |
| color: var(--text); |
| line-height: 1.5; |
| margin: 0; |
| } |
| .bullet-list { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
| .bullet-list li { |
| font-size: 15px; |
| color: var(--text); |
| display: flex; |
| gap: 8px; |
| align-items: flex-start; |
| } |
| .bullet-bang { |
| color: var(--orange); |
| font-weight: bold; |
| flex-shrink: 0; |
| } |
|
|
| |
| .map-root { padding: 12px 0; } |
| .map-grid { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| padding: 12px; |
| } |
| .map-pin { |
| background: var(--panel); |
| border: 2px solid var(--border); |
| box-shadow: 2px 2px 0 var(--border); |
| padding: 10px 14px; |
| text-align: center; |
| font-size: 28px; |
| min-width: 120px; |
| cursor: pointer; |
| } |
| .map-pin:hover { background: var(--orange-lt); } |
| .pin-label { font-size: 13px; color: var(--muted); margin-top: 4px; } |
| .pin-scene { font-size: 13px; color: var(--wood); font-weight: bold; } |
|
|
| |
| .journal-grid { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| padding: 12px; |
| } |
| .journal-card { |
| display: flex; |
| gap: 12px; |
| align-items: center; |
| background: var(--panel); |
| border: 2px solid var(--border); |
| box-shadow: 2px 2px 0 var(--border); |
| padding: 10px; |
| } |
| .journal-thumb { |
| width: 64px; |
| height: 52px; |
| object-fit: cover; |
| border: 2px solid var(--border); |
| flex-shrink: 0; |
| } |
| .journal-flag { font-size: 20px; } |
| .journal-title { font-size: 15px; color: var(--text); font-weight: bold; } |
| .journal-loc { font-size: 13px; color: var(--muted); } |
|
|
| |
| .profile-root { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; } |
| .profile-card { |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| background: var(--panel); |
| border: 3px solid var(--border); |
| box-shadow: var(--pixel-shadow); |
| padding: 14px; |
| } |
| .avatar { font-size: 48px; } |
| .profile-name { |
| font-family: 'Press Start 2P', monospace; |
| font-size: 11px; |
| color: var(--text); |
| } |
| .profile-tag { |
| font-size: 15px; |
| color: var(--wood); |
| margin-top: 4px; |
| } |
| .stats-row { |
| display: flex; |
| gap: 10px; |
| } |
| .stat-box { |
| flex: 1; |
| text-align: center; |
| background: var(--panel); |
| border: 2px solid var(--border); |
| box-shadow: 2px 2px 0 var(--border); |
| padding: 12px 8px; |
| } |
| .stat-num { |
| font-family: 'Press Start 2P', monospace; |
| font-size: 16px; |
| color: var(--orange); |
| } |
| .stat-label { font-size: 14px; color: var(--muted); margin-top: 4px; } |
|
|
| .ach-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 10px; |
| padding: 12px; |
| } |
| .ach-badge { |
| text-align: center; |
| padding: 10px 6px; |
| border: 2px solid var(--border); |
| font-size: 24px; |
| cursor: default; |
| } |
| .ach-unlocked { background: var(--highlight-bg); box-shadow: 2px 2px 0 var(--orange); } |
| .ach-locked { background: #E8E0D0; opacity: 0.5; filter: grayscale(1); } |
| .ach-name { font-size: 11px; color: var(--muted); margin-top: 4px; } |
|
|
