Spaces:
Running
Running
| * { box-sizing: border-box; margin: 0; } | |
| html, body { height: 100%; overflow: hidden; } | |
| body { | |
| font-family: "Noto Serif SC", Georgia, serif; | |
| background: #1a1714; color: #e8dfca; | |
| } | |
| #app { position: relative; width: 100vw; height: 100vh; } | |
| canvas#world { display: block; width: 100%; height: 100%; cursor: crosshair; } | |
| /* ---------- HUD ---------- */ | |
| #hud { | |
| position: absolute; top: 0; left: 0; right: 0; | |
| display: flex; justify-content: space-between; align-items: center; | |
| padding: 8px 14px; pointer-events: none; | |
| background: linear-gradient(#000a, transparent); | |
| } | |
| #hud-left span { | |
| margin-right: 14px; font-size: 15px; text-shadow: 0 1px 3px #000; | |
| } | |
| #hud-right button { pointer-events: auto; } | |
| button { | |
| font-family: inherit; font-size: 13px; color: #e8dfca; | |
| background: #2c2620ee; border: 1px solid #6b5a3e; border-radius: 8px; | |
| padding: 6px 12px; cursor: pointer; margin-left: 6px; | |
| } | |
| button:hover { background: #3a3128; } | |
| button.danger { border-color: #8a3a32; color: #e8b0a8; } | |
| /* ---------- follow bar ---------- */ | |
| #follow-bar { | |
| position: absolute; top: 52px; left: 10px; display: flex; flex-direction: column; gap: 6px; | |
| } | |
| #follow-bar .chip { | |
| width: 44px; height: 44px; border-radius: 50%; border: 2px solid #6b5a3e; | |
| background: #2c2620dd; font-size: 22px; display: flex; align-items: center; | |
| justify-content: center; cursor: pointer; position: relative; | |
| } | |
| #follow-bar .chip.on { border-color: #d8b35a; box-shadow: 0 0 10px #d8b35a88; } | |
| #follow-bar .chip .drops { position: absolute; right: -4px; top: -6px; font-size: 11px; } | |
| #btn-home { | |
| position: absolute; left: 12px; bottom: 18px; font-size: 16px; | |
| padding: 9px 14px; border-color: #d8b35a; z-index: 15; | |
| } | |
| #dlg-trait details { margin-top: 4px; } | |
| #dlg-trait summary { cursor: pointer; color: #d8b35a; } | |
| #ctx-search:disabled { opacity: .55; cursor: default; border-color: #6b5a3e; } | |
| #ctx-search { | |
| position: absolute; left: 50%; transform: translateX(-50%); bottom: 88px; | |
| font-size: 15px; padding: 9px 18px; border-color: #d8b35a; | |
| } | |
| #toast { | |
| position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; | |
| background: #2c2620ee; border: 1px solid #6b5a3e; border-radius: 10px; | |
| padding: 9px 16px; max-width: 70vw; font-size: 14px; z-index: 30; | |
| } | |
| /* ---------- dialogue ---------- */ | |
| #dialogue { | |
| position: absolute; top: 52px; right: 10px; bottom: 14px; width: 360px; | |
| background: #211c17f2; border: 1px solid #6b5a3e; border-radius: 14px; | |
| display: flex; flex-direction: column; z-index: 20; | |
| } | |
| #dialogue header { | |
| display: flex; gap: 10px; align-items: center; padding: 10px 12px; | |
| border-bottom: 1px solid #443a2c; | |
| } | |
| #dlg-avatar { font-size: 30px; } | |
| #dlg-close { margin-left: auto; } | |
| #dlg-trait { padding: 6px 12px; font-size: 12px; opacity: .75; border-bottom: 1px solid #443a2c; } | |
| #dlg-log { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } | |
| .msg { border-radius: 10px; padding: 7px 11px; font-size: 14px; line-height: 1.55; max-width: 92%; } | |
| .msg.det { align-self: flex-end; background: #31435130; border: 1px solid #4a6071; } | |
| .msg.npc { align-self: flex-start; background: #2c2620; border: 1px solid #6b5a3e; } | |
| .msg .cur { animation: blink 1s steps(1) infinite; } | |
| #dlg-actions { display: flex; gap: 6px; padding: 6px 10px 0; } | |
| #dlg-actions button { flex: 1; font-size: 12px; padding: 6px 4px; margin: 0; } | |
| #dlg-skills { display: flex; gap: 6px; padding: 6px 10px 0; } | |
| #dlg-skills button { flex: 1; font-size: 11.5px; padding: 5px 2px; margin: 0; border-color: #7a5a8a; } | |
| #dlg-skills button:disabled { opacity: .45; cursor: default; } | |
| .msg.dice { align-self: center; background: #1d1812; border: 1px dashed #d8b35a; | |
| font-size: .9em; text-align: center; } | |
| .dice-roll { display: inline-block; animation: roll .6s ease; font-size: 1.3em; } | |
| @keyframes roll { from { transform: rotate(0) scale(.4); opacity: 0; } | |
| 60% { transform: rotate(540deg) scale(1.25); } to { transform: rotate(720deg) scale(1); } } | |
| .attr-bars { margin-top: 3px; font-size: 11px; letter-spacing: 1px; opacity: .9; } | |
| #dialogue footer { display: flex; gap: 6px; padding: 10px; border-top: 1px solid #443a2c; } | |
| #ev-list { display: flex; flex-direction: column; gap: 6px; } | |
| #ev-list .card { | |
| padding: 8px 12px; border: 1px solid #443a2c; border-radius: 8px; cursor: pointer; | |
| font-size: 13px; line-height: 1.5; background: #2c262066; | |
| } | |
| #ev-list .card:hover { border-color: #d8b35a; background: #d8b35a14; } | |
| #ev-hint { font-size: 12px; opacity: .7; margin-bottom: 8px; } | |
| .msg.confront { border-color: #8a3a32; background: rgba(138,58,50,.12); } | |
| .msg.npc { position: relative; } | |
| .pin-btn { | |
| position: absolute; right: -8px; top: -10px; display: none; | |
| padding: 2px 7px; font-size: 12px; margin: 0; border-color: #d8b35a; | |
| } | |
| .msg.npc:hover .pin-btn { display: block; } | |
| .msg.busted { border-color: #d8b35a; box-shadow: 0 0 8px #d8b35a55; } | |
| #bd-body table { width: 100%; border-collapse: collapse; font-size: 14px; } | |
| #bd-body td, #bd-body th { padding: 6px 8px; border-bottom: 1px solid #352d23; text-align: left; } | |
| #bd-body tr:first-child td { color: #d8b35a; font-weight: bold; } | |
| #ov-score { margin-top: 14px; } | |
| #ov-name { | |
| background: #16120e; color: #e8dfca; border: 1px solid #6b5a3e; | |
| border-radius: 8px; padding: 8px 10px; font-family: inherit; width: 200px; | |
| } | |
| #ov-board { margin-top: 10px; font-size: 13px; text-align: left; } | |
| .chip .mark { position: absolute; left: -4px; top: -6px; font-size: 12px; } | |
| #dlg-input { | |
| flex: 1; background: #16120e; color: #e8dfca; border: 1px solid #6b5a3e; | |
| border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 14px; | |
| } | |
| /* ---------- modals ---------- */ | |
| .modal { | |
| position: absolute; inset: 0; background: #0009; z-index: 40; | |
| display: flex; align-items: center; justify-content: center; | |
| } | |
| .modal-card { | |
| width: min(680px, 92vw); max-height: 84vh; overflow-y: auto; | |
| background: #211c17; border: 1px solid #6b5a3e; border-radius: 14px; padding: 14px 18px; | |
| } | |
| .modal-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } | |
| .nb-tabs { display: flex; gap: 6px; margin-bottom: 10px; } | |
| .nb-tabs button.on { border-color: #d8b35a; } | |
| #nb-body { font-size: 14px; line-height: 1.6; } | |
| #nb-body .ev { border-left: 3px solid #8a6d3b; padding: 4px 10px; margin: 6px 0; background: #2c262066; } | |
| #nb-body .q { opacity: .7; margin-top: 8px; font-size: 13px; } | |
| #nb-body .a { border-left: 2px solid #6b5a3e; padding-left: 10px; margin: 2px 0 6px; } | |
| #ac-suspects { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } | |
| #ac-suspects .sus { | |
| width: 92px; text-align: center; padding: 8px 4px; border: 2px solid #443a2c; | |
| border-radius: 10px; cursor: pointer; font-size: 13px; | |
| } | |
| #ac-suspects .sus .av { font-size: 26px; } | |
| #ac-suspects .sus.on { border-color: #d8b35a; background: #d8b35a18; } | |
| #ac-motives { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } | |
| #ac-motives .mot { padding: 7px 12px; border: 2px solid #443a2c; border-radius: 16px; cursor: pointer; font-size: 13px; } | |
| #ac-motives .mot.on { border-color: #d8b35a; background: #d8b35a18; } | |
| #ac-warn { font-size: 13px; opacity: .7; } | |
| #ac-go { width: 100%; margin: 8px 0 4px; padding: 10px; font-size: 15px; } | |
| /* ---------- overlay ---------- */ | |
| #overlay { | |
| position: absolute; inset: 0; z-index: 50; overflow: hidden; | |
| display: flex; align-items: center; justify-content: center; | |
| /* dark base + corner vignette echoing the in-game mist */ | |
| background: | |
| radial-gradient(125% 120% at 50% 42%, transparent 42%, #07050399 100%), | |
| #0e0b09ee; | |
| transition: opacity .6s ease; | |
| } | |
| #overlay.fade-out { opacity: 0; } | |
| /* two drifting fog layers — pure CSS, no assets, no perf cost */ | |
| #overlay::before, #overlay::after { | |
| content: ""; position: absolute; inset: -25%; pointer-events: none; z-index: 0; | |
| } | |
| #overlay::before { | |
| background: | |
| radial-gradient(40% 55% at 25% 40%, #6b6f7a22, transparent 70%), | |
| radial-gradient(45% 50% at 75% 60%, #4a4f5a22, transparent 72%), | |
| radial-gradient(35% 42% at 55% 22%, #7a715f1c, transparent 70%); | |
| animation: fogdrift 34s ease-in-out infinite alternate; | |
| } | |
| #overlay::after { | |
| background: | |
| radial-gradient(50% 45% at 70% 35%, #5a5e6820, transparent 70%), | |
| radial-gradient(40% 50% at 30% 70%, #6e6a5a1c, transparent 72%); | |
| animation: fogdrift2 46s ease-in-out infinite alternate; | |
| } | |
| #ov-card { | |
| position: relative; z-index: 1; | |
| width: min(640px, 92vw); max-height: 86vh; overflow-y: auto; | |
| text-align: center; padding: 28px 26px; | |
| animation: cardrise .7s ease both; | |
| } | |
| #ov-title { | |
| font-size: 38px; margin-bottom: 6px; letter-spacing: .06em; | |
| background: linear-gradient(90deg, #b9a06a, #e3d3a5, #8b96a8); | |
| -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; | |
| filter: drop-shadow(0 2px 10px #0009); | |
| } | |
| #ov-tagline { | |
| font-size: 13.5px; opacity: .6; font-style: italic; | |
| letter-spacing: .03em; margin-bottom: 18px; | |
| } | |
| #ov-body { font-size: 15px; line-height: 1.9; text-align: left; white-space: pre-wrap; } | |
| #ov-body ul { text-align: left; font-size: 13px; opacity: .9; } | |
| /* connect spinner */ | |
| .ov-spinner { | |
| width: 26px; height: 26px; margin: 14px auto 4px; | |
| border: 3px solid #6b5a3e55; border-top-color: #d8b35a; border-radius: 50%; | |
| animation: spin .9s linear infinite; | |
| } | |
| /* indeterminate "weaving" progress bar */ | |
| .ov-bar { | |
| width: min(280px, 72%); height: 7px; margin: 14px auto 4px; | |
| border-radius: 5px; background: #2c262099; overflow: hidden; position: relative; | |
| } | |
| .ov-bar::after { | |
| content: ""; position: absolute; top: 0; bottom: 0; width: 42%; border-radius: 5px; | |
| background: linear-gradient(90deg, transparent, #d8b35a, transparent); | |
| animation: barslide 1.6s ease-in-out infinite; | |
| } | |
| #ov-retry { margin-top: 16px; font-size: 15px; padding: 9px 22px; border-color: #d8b35a; } | |
| #ov-hint { font-size: 12px; opacity: .5; margin-top: 16px; } | |
| #ov-speech { | |
| margin-top: 14px; padding: 12px 14px; border: 1px dashed #8a6d3b; border-radius: 10px; | |
| font-style: italic; text-align: left; line-height: 1.7; | |
| } | |
| #ov-actions { margin-top: 18px; } | |
| #lang-gate { display: flex; gap: 18px; justify-content: center; margin-top: 26px; } | |
| #lang-gate button { | |
| font-size: 22px; padding: 18px 36px; border-color: #d8b35a; border-radius: 14px; | |
| line-height: 1.5; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; | |
| } | |
| #lang-gate button:hover { | |
| transform: translateY(-3px); background: #d8b35a14; box-shadow: 0 6px 22px #d8b35a3a; | |
| } | |
| #lang-gate button small { font-size: 12px; opacity: .65; } | |
| #ov-langswap { padding: 10px 12px; } | |
| #ov-lang { | |
| background: #16120e; color: #e8dfca; border: 1px solid #6b5a3e; | |
| border-radius: 8px; padding: 8px 10px; font-family: inherit; | |
| } | |
| #ov-start { font-size: 16px; padding: 10px 26px; border-color: #d8b35a; } | |
| .win { color: #8fc98f; } .lose { color: #d98a80; } | |
| .route { display: flex; flex-direction: column; gap: 4px; text-align: left; } | |
| .route-step { padding: 4px 10px; border-left: 3px solid #6b5a3e; background: #2c262055; font-size: 14px; } | |
| .route-step.murder { border-left-color: #c0392b; background: rgba(192,57,43,.14); font-weight: bold; } | |
| #ov-epi { text-align: left; line-height: 1.85; white-space: pre-wrap; font-size: 14.5px; | |
| border-left: 3px solid #8a6d3b; padding: 6px 12px; margin-top: 6px; } | |
| #ov-body details summary { cursor: pointer; color: #d8b35a; margin-top: 8px; } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| @keyframes fogdrift { | |
| from { transform: translate3d(-3%, -1%, 0) scale(1.06); } | |
| to { transform: translate3d(3%, 2%, 0) scale(1.13); } | |
| } | |
| @keyframes fogdrift2 { | |
| from { transform: translate3d(2%, 1%, 0) scale(1.1); } | |
| to { transform: translate3d(-3%, -2%, 0) scale(1.04); } | |
| } | |
| @keyframes cardrise { | |
| from { opacity: 0; transform: translateY(14px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| @keyframes barslide { from { left: -42%; } to { left: 100%; } } | |
| @media (prefers-reduced-motion: reduce) { | |
| #overlay, #overlay::before, #overlay::after, #ov-card { animation: none; transition: none; } | |
| .ov-bar::after { animation-duration: 3.2s; } | |
| } | |
| [hidden] { display: none ; } | |