/* TFO Valley UI A storybook sticker UI that rots. `--d` (0..1) and `data-phase` on are driven by ui.setDread(); every color below derives from them. */ :root { --d: 0; /* paper slowly loses its warmth as dread rises */ --paper-base: #fbf1dc; --paper-sick: #a7a597; --paper: color-mix(in oklab, var(--paper-base), var(--paper-sick) calc(var(--d) * 80%)); --paper-2: color-mix(in oklab, var(--paper), #c7a676 24%); --paper-hi: color-mix(in oklab, var(--paper), #ffffff 50%); --ink: #3a2a1c; --text: var(--ink); --muted: color-mix(in oklab, var(--text), var(--paper) 40%); --on-color: #fff7e6; --ember: color-mix(in oklab, #e0703a, #7b5f52 calc(var(--d) * 65%)); --sun: color-mix(in oklab, #f0a53a, #9a8b66 calc(var(--d) * 65%)); --leaf: color-mix(in oklab, #4f7a3a, #4b5249 calc(var(--d) * 60%)); --pin: #d0392c; --pen: #3b5fa8; --note: #fde38d; --moon: #f4edd5; --vig: #1c1109; --stain: #6b5230; --stain-c: color-mix(in srgb, var(--stain) 45%, transparent); --chat-bg: color-mix(in srgb, var(--ink) 68%, transparent); --backdrop: color-mix(in srgb, var(--ink) 58%, transparent); --polaroid: #fbfaf5; --polaroid-pen: #2c3f86; --scare-red: #e00000; --burst-a: #ffd83a; --burst-b: #ff7a1c; --grain: none; --fiber: none; --static: none; --shadow: 5px 5px 0 var(--ink); --r: 16px; --font-display: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif; --font-body: "Nunito", ui-rounded, system-ui, sans-serif; --font-hand: "Gochi Hand", "Comic Sans MS", cursive; --font-diary: "Kalam", "Comic Sans MS", cursive; --font-meme: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif; /* chunky sticker outline, scales with font size */ --sticker: 0 -0.05em 0 var(--ink), 0.035em -0.035em 0 var(--ink), 0.05em 0 0 var(--ink), 0.035em 0.035em 0 var(--ink), 0 0.05em 0 var(--ink), -0.035em 0.035em 0 var(--ink), -0.05em 0 0 var(--ink), -0.035em -0.035em 0 var(--ink), 0.02em -0.047em 0 var(--ink), 0.047em -0.02em 0 var(--ink), 0.047em 0.02em 0 var(--ink), 0.02em 0.047em 0 var(--ink), -0.02em 0.047em 0 var(--ink), -0.047em 0.02em 0 var(--ink), -0.047em -0.02em 0 var(--ink), -0.02em -0.047em 0 var(--ink), 0.055em 0.06em 0 var(--ink), 0.07em 0.075em 0 var(--ink), 0.085em 0.09em 0 var(--ink); --sticker-sm: 0 -2px 0 var(--ink), 1.5px -1.5px 0 var(--ink), 2px 0 0 var(--ink), 1.5px 1.5px 0 var(--ink), 0 2px 0 var(--ink), -1.5px 1.5px 0 var(--ink), -2px 0 0 var(--ink), -1.5px -1.5px 0 var(--ink), 2px 3px 0 var(--ink), 3px 4px 0 var(--ink); } /* phase 1 "uneasy" and 2 "wrong" ride on --d; hunt and blood moon get hard overrides */ :root[data-phase="3"] { --ink: #1d1411; --vig: #140202; --stain: #3f1f16; } :root[data-phase="4"] { --paper: #3b100e; --paper-2: #2a0907; --paper-hi: #4d1613; --ink: #0c0303; --text: #f2d6c4; --muted: #c99585; --on-color: #ffe3d6; --ember: #a8161b; --sun: #d8392f; --leaf: #6a1414; --pin: #ff2a2a; --pen: #ff7a6a; --note: #5a1411; --moon: #d3211b; --vig: #420000; --stain: #a00d0d; --chat-bg: color-mix(in srgb, #220505 80%, transparent); --backdrop: color-mix(in srgb, #1a0000 72%, transparent); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; height: 100%; overflow: hidden; } body { background: #e7d6b0; color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; } input { user-select: text; -webkit-user-select: text; } button { font: inherit; color: inherit; } :focus-visible { outline: 3px dashed var(--ember); outline-offset: 3px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } #view { position: fixed; inset: 0; z-index: 0; display: block; width: 100vw; height: 100vh; outline: none; } /* ---------- shared pieces ---------- */ .paper { position: relative; isolation: isolate; color: var(--text); background-color: var(--paper); background-image: var(--fiber); border: 3px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow), inset 0 0 calc(var(--d) * 28px) var(--stain-c); } /* grime: coffee rings and damp blotches that bloom with dread (turn to blood in phase 4) */ .paper::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: clamp(0, calc(var(--d) * 1.5 - 0.4), 0.95); background: radial-gradient(closest-side, var(--stain-c), transparent) 6% 12% / 46% 72% no-repeat, radial-gradient(closest-side, transparent 70%, var(--stain-c) 79%, transparent 90%) 94% 96% / 36% 64% no-repeat, radial-gradient(closest-side, var(--stain-c), transparent) 72% 0% / 22% 44% no-repeat, radial-gradient(closest-side, var(--stain-c), transparent 70%) 38% 112% / 58% 52% no-repeat; } .sticker-text { font-family: var(--font-display); font-weight: 700; color: var(--paper); text-shadow: var(--sticker); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; font: 600 18px/1 var(--font-display); color: var(--on-color); text-shadow: 0 2px 0 var(--ink); white-space: nowrap; background: var(--ember); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; pointer-events: auto; transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, filter 0.15s; } .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); filter: brightness(1.06); } .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); transition-duration: 0.03s; } .btn-big { padding: 16px 28px; font-size: 22px; border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); } .btn-big:hover { box-shadow: 7px 7px 0 var(--ink); } .btn-big:active { transform: translate(5px, 5px); box-shadow: 1px 1px 0 var(--ink); } .btn-small { padding: 8px 12px; font-size: 15px; border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); text-shadow: 0 1.5px 0 var(--ink); } .btn-small:hover { box-shadow: 4px 4px 0 var(--ink); } .btn-small:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } .btn-ghost { background: var(--paper-hi); color: var(--text); text-shadow: none; } .key { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; font: 700 15px/1 var(--font-display); color: var(--text); white-space: nowrap; background: var(--paper-hi); border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 0 4px 0 var(--ink); translate: 0 -2px; } .field { width: 100%; padding: 10px 14px; font: 800 20px/1.2 var(--font-body); color: var(--text); background: var(--paper-hi); border: 3px solid var(--ink); border-radius: 12px; box-shadow: inset 0 3px 0 color-mix(in srgb, var(--ink) 14%, transparent); outline: none; transition: box-shadow 0.15s; } .field::placeholder { color: var(--muted); font-weight: 700; } .field:focus { box-shadow: inset 0 3px 0 color-mix(in srgb, var(--ink) 14%, transparent), 0 0 0 4px color-mix(in srgb, var(--sun) 70%, transparent); } .field-sm { padding: 8px 10px; font-size: 14px; font-weight: 700; text-overflow: ellipsis; } .avatar { display: block; flex: none; width: 34px; height: 34px; background: var(--c, var(--leaf)); border: 3px solid var(--ink); border-radius: 50%; } /* ---------- atmosphere layers ---------- */ .fx { position: fixed; inset: 0; pointer-events: none; } .fx-vignette { z-index: 1; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 38%, color-mix(in srgb, var(--vig) 55%, transparent) 72%, var(--vig) 108%); opacity: calc(0.14 + var(--d) * 0.86); transform: scale(calc(1.4 - var(--d) * 0.4)); transition: opacity 2s linear, transform 2s linear; } .fx-blood { z-index: 2; background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(110, 0, 0, 0.5) 100%), rgba(120, 0, 0, 0.14); opacity: 0; transition: opacity 4s ease-in; } :root[data-phase="4"] .fx-blood { opacity: 1; } .fx-hunter { z-index: 3; opacity: 0; transition: opacity 0.25s linear; } .fx-hunter.off { display: none; } .fx-hunter-beat { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 30%, rgba(95, 0, 0, 0.6) 68%, rgba(35, 0, 0, 0.96) 100%); animation: heartbeat 1.15s ease-out infinite; } .fx-hunter.close .fx-hunter-beat { animation-duration: 0.66s; } .fx-hurt { z-index: 4; opacity: 0; background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 35%, rgba(200, 10, 0, 0.45) 75%, rgba(120, 0, 0, 0.85) 100%); } /* the Hollow's TV snow, over the HUD but under the menus; opacity comes from horror.ts */ .fx-static { z-index: 26; inset: -160px; background-color: rgba(8, 8, 8, 0.25); background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 4px), var(--static); opacity: 0; animation: grain 0.24s steps(1) infinite; } .fx-static.off { display: none; } .fx-grain { z-index: 75; inset: -160px; background-image: var(--grain); opacity: calc(0.035 + var(--d) * 0.3); animation: grain 0.7s steps(1) infinite; } :root[data-phase="4"] .fx-grain { opacity: 0.4; } .fx-glitch { z-index: 76; inset: -20% 0; display: none; background: linear-gradient(transparent 0 18%, rgba(255, 0, 80, 0.16) 18% 21%, transparent 21% 57%, rgba(0, 230, 255, 0.14) 57% 61%, transparent 61% 83%, rgba(255, 255, 255, 0.1) 83% 84%, transparent 84%), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px); } .glitching .fx-glitch { display: block; animation: glitch-bars 0.3s steps(1) infinite; } .blackout { position: fixed; inset: 0; z-index: 80; background: #000; opacity: 0; pointer-events: none; } /* ---------- HUD ---------- */ .hud { position: fixed; inset: 0; z-index: 10; display: none; pointer-events: none; } .hud.on { display: block; } .hud button, .hud input, .hud .interactive { pointer-events: auto; } .glitching .hud, .glitching .toasts, .glitching .dialog { animation: glitch-jit 0.14s steps(1) infinite; } .glitching :is(.hud, .dialog, .toasts, .pause) * { text-shadow: 2px 0 rgba(255, 0, 72, 0.85), -2px 0 rgba(0, 224, 255, 0.85) !important; } /* quest: a notebook page pinned to the corner of the screen */ .quest { position: absolute; top: 26px; left: 26px; width: 276px; padding: 16px 18px 16px 36px; border-radius: 6px 6px 16px 6px; background-image: linear-gradient(90deg, transparent 22px, color-mix(in srgb, var(--pin) 40%, transparent) 22px 24px, transparent 24px), repeating-linear-gradient(transparent 0 25px, color-mix(in srgb, var(--pen) 22%, transparent) 25px 26px), var(--fiber); background-position: 0 0, 0 10px, 0 0; rotate: calc(-1.5deg - var(--d) * 2deg); transform-origin: 50% 0; transition: rotate 1.2s cubic-bezier(0.3, 1.6, 0.5, 1); } .hud.on .quest { animation: in-left 0.6s 0.1s cubic-bezier(0.2, 1.3, 0.4, 1) both; } .quest-pin { position: absolute; top: -11px; left: 50%; width: 22px; height: 22px; margin-left: -11px; background: radial-gradient(circle at 35% 32%, #ffb3a6 0 12%, var(--pin) 45%, color-mix(in oklab, var(--pin), #000 45%)); border: 2.5px solid var(--ink); border-radius: 50%; box-shadow: 2px 3px 0 var(--ink); } .quest-label { margin-bottom: 2px; font: 21px/1 var(--font-hand); color: var(--ember); } .quest-title { margin: 0; font: 600 20px/1.22 var(--font-display); overflow-wrap: anywhere; } .quest-sub { margin: 5px 0 0; font: 700 14.5px/1.35 var(--font-body); color: var(--muted); } /* side goals: a checklist scribbled under the main task */ .quest-side { margin-top: 12px; padding-top: 8px; border-top: 2px dashed color-mix(in srgb, var(--ink) 28%, transparent); } .quest-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; font: 19px/1 var(--font-hand); color: var(--ember); } .quest-side-more { display: flex; align-items: center; gap: 5px; font: 800 10.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .quest-side-more .key { min-width: 20px; height: 20px; padding: 0 4px; font-size: 10.5px; box-shadow: 0 2.5px 0 var(--ink); } .quest-goals { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .qg { display: grid; grid-template-columns: 14px 1fr auto; align-items: start; gap: 8px; font: 700 14px/1.3 var(--font-body); } .qg-box { position: relative; width: 14px; height: 14px; margin-top: 2px; background: var(--paper-hi); border: 2px solid var(--ink); border-radius: 3px; } .qg-n { font: 18px/1 var(--font-hand); color: var(--pen); white-space: nowrap; } .qg.done { animation: goal-tick 0.6s cubic-bezier(0.2, 1.5, 0.4, 1); } .qg.done .qg-text { text-decoration: line-through 2px var(--pen); color: var(--muted); } .qg.done .qg-n { color: var(--leaf); } .qg.done .qg-box::after { content: ""; position: absolute; left: 2px; top: -5px; width: 6px; height: 12px; border: solid var(--leaf); border-width: 0 3.5px 3.5px 0; rotate: 40deg; } @keyframes goal-tick { 0% { transform: scale(1); } 35% { transform: scale(1.08) rotate(-1.5deg); } 100% { transform: none; } } /* the pin works loose, then falls out and the note hangs from one corner */ :root[data-phase="2"] .quest { rotate: -5deg; } :root:is([data-phase="3"], [data-phase="4"]) .quest { rotate: 7deg; transform-origin: 10% 4%; } :root:is([data-phase="3"], [data-phase="4"]) .quest-pin { display: none; } :root:is([data-phase="3"], [data-phase="4"]) .quest-title { animation: tremble 0.2s steps(1) infinite; } /* clock: a little sign hanging from two strings */ .clock { position: absolute; top: 0; left: 0; right: 0; width: fit-content; margin: 0 auto; padding-top: 24px; transform-origin: 50% 0; } .hud.on .clock { animation: drop-in 0.7s 0.2s cubic-bezier(0.2, 1.4, 0.4, 1) both, swing 5s 0.9s ease-in-out infinite; } .clock::before, .clock::after { content: ""; position: absolute; top: -4px; width: 3px; height: 32px; background: var(--ink); border-radius: 2px; transform-origin: 50% 0; } .clock::before { left: 24px; } .clock::after { right: 24px; } .clock-sign { --shadow: 4px 4px 0 var(--ink); display: flex; align-items: center; gap: 8px; padding: 6px 15px 6px 9px; font: 600 19px/1 var(--font-display); white-space: nowrap; border-radius: 12px; } .clock-icon { position: relative; flex: none; width: 26px; height: 26px; } .clock-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; } .ico-sun { fill: var(--sun); animation: spin 16s linear infinite; } .ico-moon { display: none; fill: var(--moon); } .clock:is([data-kind="moon"], [data-kind="blood"]) .ico-sun { display: none; } .clock:is([data-kind="moon"], [data-kind="blood"]) .ico-moon { display: block; } .clock[data-kind="blood"] .ico-moon { fill: #d3211b; filter: drop-shadow(0 0 5px #ff2a1a); } .clock[data-kind="blood"] .clock-label { color: #ff5a4a; } :root[data-phase="1"] .hud.on .clock { animation-duration: 0.7s, 9s; } /* one string snaps */ :root:is([data-phase="2"], [data-phase="3"], [data-phase="4"]) .hud.on .clock { animation: none; rotate: 9deg; transform-origin: 25px 0; } :root:is([data-phase="2"], [data-phase="3"], [data-phase="4"]) .clock::after { height: 13px; rotate: -28deg; } /* lobby card, top right */ .lobby { position: absolute; top: 22px; right: 26px; display: grid; justify-items: start; gap: 10px; min-width: 190px; padding: 12px 14px 14px; rotate: calc(1.2deg + var(--d) * 2.5deg); transition: rotate 1.2s ease; } .hud.on .lobby { animation: in-right 0.6s 0.15s cubic-bezier(0.2, 1.3, 0.4, 1) both; } .lobby-head { display: flex; align-items: baseline; gap: 8px; font: 800 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .lobby-head b { font: 700 22px/1 var(--font-display); letter-spacing: 0.12em; color: var(--text); } .lobby-faces { display: flex; align-items: center; min-height: 36px; padding-left: 8px; } .lobby-faces .avatar { margin-left: -8px; box-shadow: 2px 2px 0 var(--ink); } .lobby-faces .avatar.you { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--sun), 0 0 0 5.5px var(--ink); } .lobby-more { margin-left: 8px; font: 700 15px/1 var(--font-display); } .bag { display: flex; align-items: center; gap: 7px; margin-top: 2px; font: 700 13.5px/1 var(--font-body); color: var(--muted); } .bag-icon { flex: none; width: 20px; height: 20px; overflow: visible; fill: var(--sun); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; } .bag b { font: 700 16px/1 var(--font-display); color: var(--text); } .bag .key { min-width: 22px; height: 22px; margin-left: 2px; padding: 0 5px; font-size: 11px; box-shadow: 0 3px 0 var(--ink); } /* stamina ring, beside the character */ .stamina { position: absolute; top: calc(50% - 8px); left: calc(50% + 64px); width: 44px; height: 44px; transition: opacity 0.2s; } .stamina.full { opacity: 0; transition: opacity 0.6s 0.5s; } .stamina svg { width: 100%; height: 100%; overflow: visible; rotate: -90deg; } .stamina circle { fill: none; } .st-edge { stroke: var(--ink); stroke-width: 11; } .st-track { stroke: var(--paper); stroke-width: 5.5; } .st-fill { stroke: var(--leaf); stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 100; } .stamina.low .st-fill { stroke: var(--ember); } .stamina.low { animation: wobble 0.28s ease-in-out infinite; } /* health: a heart and a short bar under the stamina ring, only after you take a punch */ .health { position: absolute; top: calc(50% + 44px); left: calc(50% + 52px); display: flex; align-items: center; rotate: -3deg; transition: opacity 0.2s; } .health.full { opacity: 0; transition: opacity 0.6s 0.8s; } .health-heart { position: relative; z-index: 1; flex: none; width: 24px; height: 24px; margin-right: -7px; overflow: visible; fill: var(--pin); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; filter: drop-shadow(2px 2px 0 var(--ink)); } .health.low .health-heart { animation: thump 0.6s ease-in-out infinite; } .health-bar { width: 58px; height: 14px; overflow: hidden; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); } .health-bar i { display: block; height: 100%; background: var(--pin); border-right: 2.5px solid var(--ink); transition: transform 0.35s cubic-bezier(0.3, 1.3, 0.5, 1); } /* level + photo album, bottom right */ .progress { position: absolute; right: 26px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .hud.on .progress { animation: rise-in 0.6s 0.25s cubic-bezier(0.2, 1.3, 0.4, 1) both; } .album { display: flex; align-items: center; gap: 11px; padding-right: 4px; font: 600 18px/1 var(--font-display); color: var(--on-color); text-shadow: var(--sticker-sm); rotate: -2deg; } .album b { color: var(--sun); font-weight: 700; } .album-snap { position: relative; width: 26px; height: 30px; background: var(--polaroid); border: 2.5px solid var(--ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--ink); rotate: -9deg; } .album-snap::before { content: ""; position: absolute; top: 2px; left: 2px; right: 2px; height: 15px; background: linear-gradient(160deg, #86b8da 0 48%, #6c9a4c 48%); } .xp { --shadow: 4px 4px 0 var(--ink); display: flex; align-items: center; gap: 12px; padding: 8px 16px 9px 9px; rotate: -0.8deg; } .xp-sun { position: relative; display: grid; place-items: center; flex: none; width: 50px; height: 50px; } .xp-sun svg { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); overflow: visible; fill: var(--sun); stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; animation: spin 30s linear infinite; } .xp-sun b { position: relative; font: 700 20px/1 var(--font-display); } .xp-meta { display: grid; gap: 5px; } .xp-caption { font: 800 10.5px/1 var(--font-body); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .xp-bar { width: 150px; height: 17px; overflow: hidden; background: var(--paper-2); border: 3px solid var(--ink); border-radius: 9px; } .xp-bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--leaf) 0 7px, color-mix(in oklab, var(--leaf), #fff 20%) 7px 14px); border-right: 3px solid var(--ink); transform: translateX(-100%); transition: transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1); } .xp-bar i.snap { transition: none; } .xp-perk { max-width: 190px; font: 16px/1.05 var(--font-hand); color: var(--ember); } /* "+25 xp" pops rising from the level badge */ .xp-pops { position: absolute; right: 6px; bottom: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-bottom: 10px; pointer-events: none; } .xp-pop { display: flex; align-items: baseline; gap: 8px; text-shadow: var(--sticker-sm); white-space: nowrap; } .xp-pop b { font: 700 24px/1 var(--font-display); color: var(--sun); } .xp-pop span { font: 19px/1 var(--font-hand); color: var(--on-color); } /* interaction prompt */ .prompt { --shadow: 4px 4px 0 var(--ink); position: absolute; left: 0; right: 0; bottom: 118px; display: flex; align-items: center; gap: 11px; width: fit-content; max-width: 60vw; margin: 0 auto; padding: 7px 17px 7px 8px; font: 700 17px/1.2 var(--font-body); border-radius: 14px; animation: pop-in 0.25s cubic-bezier(0.2, 1.6, 0.4, 1); } .prompt .key { animation: key-tap 1.6s ease-in-out infinite; } .dialog-open .prompt { display: none; } /* chat */ .chat { position: absolute; left: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; width: min(420px, 36vw); transition: transform 0.3s cubic-bezier(0.3, 1.2, 0.5, 1); } .dialog-open .chat { transform: translateY(calc(-1 * var(--dialog-h, 190px))); } .chat-log { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-height: 32vh; overflow: hidden; } .chat-line { max-width: 100%; padding: 4px 10px 5px; font: 700 15px/1.35 var(--font-body); color: #fff4df; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; background: var(--chat-bg); border-radius: 10px; transition: opacity 1.2s ease; animation: line-in 0.22s ease-out; } .chat-line b { margin-right: 6px; font-weight: 800; color: color-mix(in oklab, var(--c, var(--sun)) 70%, #fff); } .chat-line.sys { font-style: italic; background: color-mix(in srgb, var(--leaf) 80%, transparent); } .chat-line.old { opacity: 0; } .chat.open .chat-line { opacity: 1; } .chat.open .chat-log { max-height: 40vh; overflow-y: auto; pointer-events: auto; scrollbar-width: thin; scrollbar-color: var(--paper) transparent; } .chat-form { --shadow: 4px 4px 0 var(--ink); display: none; align-items: center; gap: 8px; padding: 5px; border-radius: 14px; } .chat.open .chat-form { display: flex; animation: pop-in 0.18s ease-out; } .chat-say { padding: 6px 10px; font: 600 15px/1 var(--font-display); background: var(--sun); border: 2.5px solid var(--ink); border-radius: 9px; } .chat-input { flex: 1; min-width: 0; padding: 6px 4px; font: 700 16px/1.2 var(--font-body); color: var(--text); background: transparent; border: 0; outline: none; } .chat-input::placeholder { color: var(--muted); } /* ---------- NPC dialogue ---------- */ .dialog { --shadow: 6px 6px 0 var(--ink); position: fixed; left: 0; right: 0; bottom: 26px; z-index: 12; width: clamp(460px, calc(100vw - 540px), 700px); min-height: 128px; margin: 0 auto; padding: 28px 30px 28px; border-radius: 20px; cursor: pointer; pointer-events: auto; } .dialog-name { position: absolute; top: -21px; left: 22px; padding: 5px 14px 6px; font: 600 19px/1 var(--font-display); white-space: nowrap; background: var(--sun); border: 3px solid var(--ink); border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); rotate: -2.5deg; } .dialog-text { margin: 0; font: 700 20px/1.5 var(--font-body); overflow-wrap: anywhere; white-space: pre-line; } .dialog-rest { visibility: hidden; } .dialog-next { position: absolute; right: 20px; bottom: -19px; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; font: 600 15px/1 var(--font-display); background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); opacity: 0; transition: opacity 0.15s; } .dialog-next .key { min-width: 26px; height: 26px; font-size: 13px; box-shadow: 0 3px 0 var(--ink); } .dialog.ready .dialog-next { opacity: 1; } .dialog.ready .dialog-next .key { animation: key-tap 1.2s ease-in-out infinite; } /* ---------- toasts ---------- */ .toasts { position: fixed; top: 84px; left: 0; right: 0; z-index: 14; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(430px, 44vw); margin: 0 auto; pointer-events: none; } .toast { --shadow: 4px 4px 0 var(--ink); max-width: 100%; padding: 10px 18px 11px; font: 700 17px/1.3 var(--font-body); text-align: center; overflow-wrap: anywhere; border-radius: 14px; rotate: var(--r, 0deg); animation: toast-in 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both; } .toast.funny { font: 600 19px/1.25 var(--font-display); background-color: var(--sun); animation: toast-funny 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; } .toast.dread { font-style: italic; letter-spacing: 0.03em; color: #ead3c1; background: #120a08; border: 3px solid #000; box-shadow: 4px 4px 0 #4f0a0a; animation: toast-dread 0.8s steps(10) both; } .toast.out { animation: toast-out 0.32s ease-in forwards; } /* ---------- click to play ---------- */ .click-hint { position: fixed; top: 58%; left: 0; right: 0; z-index: 13; width: fit-content; margin: 0 auto; pointer-events: none; animation: pop-in 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); } .click-card { display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 16px; rotate: -1deg; } .click-card b { display: block; font: 600 24px/1.1 var(--font-display); } .click-card small { font: 700 13.5px/1.3 var(--font-body); color: var(--muted); } .mouse { position: relative; flex: none; width: 30px; height: 44px; background: linear-gradient(90deg, var(--ember) 50%, transparent 50%) 0 0 / 100% 45% no-repeat, var(--paper-hi); border: 3px solid var(--ink); border-radius: 15px; overflow: hidden; animation: click-blink 1.1s steps(1) infinite; } .mouse::before, .mouse::after { content: ""; position: absolute; background: var(--ink); } .mouse::before { top: 0; left: 50%; width: 3px; height: 45%; margin-left: -1.5px; } .mouse::after { top: 45%; left: 0; right: 0; height: 3px; } /* ---------- screens ---------- */ .screen { position: fixed; inset: 0; display: flex; } /* title screen */ .menu { z-index: 20; align-items: center; justify-content: space-between; gap: 32px; padding: 24px clamp(28px, 5vw, 96px); background: radial-gradient(ellipse 60% 80% at 20% 45%, rgba(255, 222, 150, 0.32), transparent 70%), linear-gradient(90deg, rgba(58, 42, 28, 0.16), transparent 45%, rgba(58, 42, 28, 0.24)); animation: fade-in 0.5s ease-out; } .menu.leaving { pointer-events: none; animation: menu-out 0.28s ease-in forwards; } .menu-hero { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-width: 0; } .title { position: relative; isolation: isolate; margin: 0 0 0 0.04em; font: 700 clamp(80px, 9.2vw, 156px)/0.86 var(--font-display); animation: title-in 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) both; } .title-w { display: block; white-space: nowrap; text-shadow: var(--sticker); } .title-w i { display: inline-block; font-style: normal; animation: bob 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.22s); } .sunny { color: var(--sun); rotate: -4deg; transform-origin: 0 100%; } .hollow { margin-left: 0.42em; color: var(--paper); rotate: 1.5deg; } .title-sun { position: absolute; top: -0.62em; left: 2.5em; z-index: -1; width: 0.8em; height: 0.8em; } .title-sun svg { width: 100%; height: 100%; overflow: visible; fill: var(--sun); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0.05em 0.05em 0 var(--ink)); animation: spin 40s linear infinite; } .ribbon { position: relative; margin: 24px 0 0 36px; rotate: -2deg; animation: ribbon-in 0.6s 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both; } .ribbon-band { position: relative; z-index: 1; display: block; padding: 10px 24px 11px; font: 800 clamp(15px, 1.5vw, 20px)/1.2 var(--font-body); color: var(--on-color); white-space: nowrap; background: var(--leaf); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink); } .ribbon-tail { position: absolute; top: 13px; bottom: -13px; width: 46px; background: color-mix(in oklab, var(--leaf), #000 42%); } .ribbon-tail.l { left: -30px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); } .ribbon-tail.r { right: -30px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%); } .menu-foot { margin: 26px 0 0 14px; font: 23px/1.1 var(--font-hand); color: var(--on-color); text-shadow: var(--sticker-sm); rotate: -2deg; animation: fade-in 0.6s 0.6s both; } .menu-card { --shadow: 8px 8px 0 var(--ink); display: flex; flex: none; flex-direction: column; gap: 8px; width: 456px; max-height: calc(100vh - 40px); padding: 22px 26px 18px; border-radius: 22px; rotate: 0.6deg; animation: card-in 0.55s 0.12s cubic-bezier(0.2, 1.3, 0.4, 1) both; } .field-label { margin-top: 4px; font: 600 17px/1.2 var(--font-display); } .field-help { margin: -5px 0 2px; font: 700 13.5px/1.35 var(--font-body); color: var(--muted); } .ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-height: max(200px, calc(100vh - 405px)); margin: 0 -10px 0 -6px; padding: 12px 10px 14px 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; } .op { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 8px 8px 10px; color: var(--text); text-align: center; background: var(--paper-hi); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform 0.14s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.14s, background-color 0.14s; } .op:hover { transform: translate(-1px, -2px) rotate(-1deg); box-shadow: 4px 5px 0 var(--ink); } .op:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } .op[aria-checked="true"] { z-index: 1; background: var(--sun); transform: translate(-2px, -3px) rotate(-2.5deg); box-shadow: 5px 6px 0 var(--ink); } .op:nth-child(even)[aria-checked="true"] { transform: translate(-2px, -3px) rotate(2deg); } .op-face { display: block; width: 100%; height: auto; aspect-ratio: 1; background: var(--c, var(--leaf)); border: 3px solid var(--ink); border-radius: 12px; } .op-name, .op-code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .op-name { margin-top: 3px; font: 600 16px/1.15 var(--font-display); } .op-code { font: 800 10px/1.3 var(--font-body); letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); } .op[aria-checked="true"] .op-code { color: var(--text); opacity: 0.75; } .op-me { position: absolute; top: -11px; right: -7px; display: none; padding: 3px 7px 2px; font: 18px/1 var(--font-hand); white-space: nowrap; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); rotate: 9deg; } .op[aria-checked="true"] .op-me { display: block; animation: stamp 0.3s cubic-bezier(0.2, 1.8, 0.4, 1); } .menu-lobby { display: flex; align-items: center; gap: 16px; margin: 6px 0 6px; } .ticket { position: relative; display: grid; flex: none; justify-items: center; padding: 6px 12px 6px 18px; background: var(--paper-2); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 3px 3px 0 var(--ink); rotate: -3deg; } .ticket::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 5px; border-left: 3px dotted color-mix(in srgb, var(--ink) 55%, transparent); } .ticket small { font: 800 10px/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; } .ticket b { font: 700 22px/1 var(--font-display); letter-spacing: 0.1em; } #menuLobbyText { margin: 0; font: 700 14.5px/1.4 var(--font-body); } #menuLobbyText b { font-weight: 800; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--sun) 75%, transparent) 55% 92%, transparent 92%); } .menu-card .btn-big { margin-top: 4px; } .menu-status { min-height: 1.35em; margin: 2px 0 0; font: 700 14px/1.35 var(--font-body); color: var(--muted); text-align: center; } /* pause */ .pause { z-index: 30; align-items: center; justify-content: center; padding: 48px 24px 24px; background: var(--backdrop); animation: fade-in 0.18s ease-out; } .pause-card { --shadow: 9px 9px 0 var(--ink); width: min(860px, 100%); padding: 46px 32px 26px; border-radius: 24px; animation: card-drop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); } .pause-title { position: absolute; top: -42px; left: 30px; margin: 0; font-size: 66px; line-height: 1; color: var(--sun); rotate: -3deg; } .pause-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; } .sub-h { margin: 18px 0 9px; font: 600 17px/1.1 var(--font-display); } .pause-col > .sub-h:first-child { margin-top: 0; } .invite { display: flex; gap: 8px; } .invite .field { min-width: 0; } .warn-note { position: relative; margin-top: 16px; padding: 13px 14px 12px; font: 700 14px/1.45 var(--font-body); color: var(--text); background: var(--note); border: 3px solid var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); rotate: -1deg; } .warn-note::before { content: ""; position: absolute; top: -11px; left: 50%; width: 72px; height: 20px; margin-left: -36px; background: color-mix(in srgb, #ffffff 55%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); rotate: 3deg; } .warn-note code { padding: 1px 6px; font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; background: var(--paper-hi); border: 2px solid var(--ink); border-radius: 6px; user-select: all; -webkit-user-select: all; } .players { display: grid; gap: 8px; max-height: 190px; margin: 0; padding: 0 0 4px 4px; overflow-y: auto; list-style: none; scrollbar-width: thin; } .players li { display: flex; align-items: center; gap: 10px; min-width: 0; font: 700 16px/1.2 var(--font-body); } .players .avatar { width: 36px; height: 36px; box-shadow: 2px 2px 0 var(--ink); } .players .pl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .players .pl-you { font: 19px/1 var(--font-hand); color: var(--ember); rotate: -4deg; } .slider { display: grid; gap: 6px; margin-bottom: 14px; cursor: pointer; } .slider-row { display: flex; justify-content: space-between; font: 700 15px/1.2 var(--font-body); } .slider-row output { font: 600 15px/1.2 var(--font-display); } .slider input { width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; } .slider input::-webkit-slider-runnable-track { height: 16px; background: linear-gradient(90deg, var(--leaf) calc(var(--v, 0.5) * 100%), var(--paper-2) 0); border: 3px solid var(--ink); border-radius: 9px; } .slider input::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -8px; background: var(--sun); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink); -webkit-appearance: none; appearance: none; } .slider input::-moz-range-track { height: 10px; background: linear-gradient(90deg, var(--leaf) calc(var(--v, 0.5) * 100%), var(--paper-2) 0); border: 3px solid var(--ink); border-radius: 9px; } .slider input::-moz-range-thumb { width: 20px; height: 20px; background: var(--sun); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink); } .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; } .controls > div { display: flex; align-items: center; gap: 8px; min-width: 0; } .controls dt { display: flex; gap: 3px; } .controls dd { margin: 0; font: 700 14.5px/1.2 var(--font-body); } .controls .key { min-width: 26px; height: 26px; padding: 0 6px; font-size: 12.5px; border-radius: 7px; box-shadow: 0 3px 0 var(--ink); } .pause-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 24px; } /* ---------- satchel / inventory ---------- */ .inv { z-index: 32; align-items: center; justify-content: center; padding: 40px 24px 24px; background: var(--backdrop); animation: fade-in 0.18s ease-out; } body.inv-open #view { pointer-events: none; } .inv-card { --shadow: 9px 9px 0 var(--ink); position: relative; display: flex; flex-direction: column; width: min(960px, 100%); max-height: calc(100vh - 64px); padding: 46px 32px 28px; border-radius: 24px; animation: card-drop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); } .inv-title { position: absolute; top: -40px; left: 30px; margin: 0; font-size: 52px; line-height: 1; color: var(--leaf); rotate: -2deg; } .inv-close { position: absolute; top: 18px; right: 20px; } .inv-tabs { display: flex; gap: 10px; margin: 0 0 18px; } .inv-tab { padding: 10px 22px; font: 600 16px/1 var(--font-display); color: var(--text); background: var(--paper-2); border: 3px solid var(--ink); border-radius: 12px 12px 6px 6px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform 0.14s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.14s, background-color 0.14s; } .inv-tab:hover { transform: translateY(-2px); box-shadow: 4px 5px 0 var(--ink); } .inv-tab[aria-selected="true"] { background: var(--sun); transform: translateY(-3px); box-shadow: 5px 6px 0 var(--ink); } .inv-body { flex: 1; min-height: 0; overflow: hidden; } .inv-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; } .inv-count { margin: 0 0 12px; font: 800 12.5px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .inv-empty { margin: 0; padding: 18px 4px; font: 700 15px/1.4 var(--font-body); color: var(--muted); font-style: italic; } .inv-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; flex: 1; min-height: 0; } /* bag */ .inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); align-content: start; gap: 14px; max-height: min(380px, 52vh); padding: 6px 8px 6px 2px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; } .inv-slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 6px; background: var(--paper-hi); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform 0.14s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.14s; } .inv-slot:hover:not(:disabled) { transform: translate(-1px, -2px); box-shadow: 4px 5px 0 var(--ink); } .inv-slot.on { background: var(--sun); transform: translate(-2px, -3px) rotate(-2deg); box-shadow: 5px 6px 0 var(--ink); } .inv-slot-icon { font-size: 32px; line-height: 1; } .inv-slot-count { position: absolute; bottom: -8px; right: -8px; min-width: 22px; padding: 2px 6px; font: 700 12.5px/1.2 var(--font-display); text-align: center; color: var(--text); background: var(--paper); border: 2.5px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); rotate: 8deg; } .inv-slot.rarity-rare { box-shadow: inset 0 0 0 3px var(--pen), 3px 3px 0 var(--ink); } .inv-slot.rarity-rare:hover:not(:disabled) { box-shadow: inset 0 0 0 3px var(--pen), 4px 5px 0 var(--ink); } .inv-slot.rarity-legendary { background: repeating-linear-gradient(135deg, var(--paper-hi) 0 9px, color-mix(in oklab, var(--sun), #fff 40%) 9px 12px); box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--sun), #000 10%), 3px 3px 0 var(--ink); } .inv-slot.rarity-legendary:hover:not(:disabled) { box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--sun), #000 10%), 4px 5px 0 var(--ink); } .inv-slot-blank { background: color-mix(in srgb, var(--paper-2) 70%, transparent); border-style: dashed; box-shadow: none; color: var(--muted); font: 700 20px/1 var(--font-display); cursor: default; opacity: 0.7; } .inv-detail { display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 18px; background: var(--paper-hi); border: 3px solid var(--ink); border-radius: 16px; } .inv-detail-head { display: flex; align-items: center; gap: 10px; } .inv-detail-icon { font-size: 38px; line-height: 1; } .inv-detail-name { margin: 0; font: 600 21px/1.15 var(--font-display); overflow-wrap: anywhere; } .inv-detail-desc { margin: 0; font: 700 15px/1.45 var(--font-body); } .inv-detail-count { margin: -4px 0 0; font: 800 13px/1.2 var(--font-body); color: var(--muted); } .inv-detail .btn { align-self: flex-start; margin-top: auto; } .inv-tag { display: inline-flex; align-self: flex-start; padding: 3px 10px; font: 800 11px/1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; border: 2px solid var(--ink); border-radius: 8px; } .inv-tag-common { background: var(--paper-2); color: var(--muted); } .inv-tag-rare { background: color-mix(in srgb, var(--pen) 20%, var(--paper-hi)); color: color-mix(in oklab, var(--pen), #000 15%); } .inv-tag-legendary { background: color-mix(in srgb, var(--sun) 26%, var(--paper-hi)); color: color-mix(in oklab, var(--sun), #000 40%); } /* diary */ .inv-note-list { display: flex; flex-direction: column; gap: 5px; max-height: min(380px, 52vh); margin: 0; padding: 0 6px 0 0; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; } .inv-note-btn { display: block; width: 100%; padding: 9px 12px; font: 700 15px/1.25 var(--font-body); color: var(--text); text-align: left; background: transparent; border: 2.5px solid transparent; border-radius: 10px; cursor: pointer; overflow-wrap: anywhere; } .inv-note-btn:hover { background: color-mix(in srgb, var(--paper-2) 70%, transparent); } .inv-note-btn.on { background: var(--paper-hi); border-color: var(--ink); } .inv-reading { min-height: 220px; padding: 22px 24px; background: var(--paper-hi); border: 3px solid var(--ink); border-radius: 16px; overflow-y: auto; } .inv-reading-title { margin: 0 0 10px; font: 600 19px/1.2 var(--font-display); } .inv-reading-text { margin: 0; font: 26px/1.4 var(--font-diary); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; } /* album */ .inv-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 26px 22px; max-height: min(420px, 56vh); padding: 10px 8px 16px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; } .inv-polaroid { padding: 10px 10px 0; background: var(--polaroid); border: 0; border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 12px 20px -8px rgba(0, 0, 0, 0.45); rotate: var(--r, 0deg); cursor: pointer; transition: transform 0.16s ease-out; } .inv-polaroid:hover { transform: scale(1.04) rotate(0deg); } .inv-polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #2a2622; filter: saturate(0.9) contrast(1.05) sepia(0.08); } .inv-polaroid-cap { display: block; padding: 10px 4px 14px; font: 20px/1.15 var(--font-hand); color: var(--polaroid-pen); text-align: center; overflow-wrap: anywhere; } .inv-polaroid-blank { position: relative; aspect-ratio: 0.86; background: color-mix(in srgb, var(--paper-2) 65%, transparent); border: 3px dashed color-mix(in srgb, var(--ink) 45%, transparent); box-shadow: none; cursor: default; } .inv-polaroid-blank::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 30px/1 var(--font-display); color: var(--muted); opacity: 0.6; } .inv-polaroid-blank:hover { transform: none; } /* goals */ .inv-goal-list { display: flex; flex-direction: column; gap: 10px; max-height: min(420px, 56vh); margin: 0; padding: 4px 8px 8px 2px; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; } .inv-goal { display: grid; gap: 6px; padding: 10px 14px 12px; background: var(--paper-hi); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); } .inv-goal.done { background: color-mix(in srgb, var(--paper-2) 60%, transparent); box-shadow: none; } .inv-goal-head { display: flex; align-items: center; gap: 9px; } .inv-goal-name { font: 600 17px/1.1 var(--font-display); } .inv-goal-pips { display: flex; gap: 3px; } .inv-goal-pips i { width: 10px; height: 10px; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 50%; } .inv-goal-pips i.on { background: var(--leaf); } .inv-goal-xp { margin-left: auto; font: 19px/1 var(--font-hand); color: var(--ember); white-space: nowrap; } .inv-goal.done .inv-goal-xp { color: var(--leaf); } .inv-goal-row { display: flex; justify-content: space-between; gap: 10px; font: 700 14px/1.3 var(--font-body); } .inv-goal-n { font-weight: 800; color: var(--muted); white-space: nowrap; } .inv-goal-bar { height: 11px; overflow: hidden; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 6px; } .inv-goal-bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--leaf) 0 6px, color-mix(in oklab, var(--leaf), #fff 20%) 6px 12px); border-right: 2px solid var(--ink); } .inv-goal.done .inv-goal-bar { display: none; } .inv-goal.done .inv-goal-text { text-decoration: line-through 2px var(--pen); color: var(--muted); } .inv-howto { max-height: min(420px, 56vh); padding: 18px 22px 20px; background: var(--paper-hi); border: 3px solid var(--ink); border-radius: 16px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; } .inv-howto-h { margin: 0 0 6px; font: 600 17px/1.2 var(--font-display); } .inv-howto-h:not(:first-child) { margin-top: 16px; } .inv-howto-p { margin: 0; font: 700 14px/1.45 var(--font-body); } .inv-howto-src { display: grid; gap: 2px; margin: 0; } .inv-howto-src div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 30%, transparent); } .inv-howto-src dt { font: 700 14px/1.3 var(--font-body); } .inv-howto-src dd { margin: 0; font: 18px/1 var(--font-hand); color: var(--ember); text-align: right; } .inv-howto-perks { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .inv-howto-perks li { font: 700 14px/1.35 var(--font-body); color: var(--muted); } .inv-howto-perks li.on { color: var(--text); } .inv-secrets { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .inv-secrets li { display: grid; font: 700 13px/1.35 var(--font-body); color: var(--muted); } .inv-secrets b { font: 600 15px/1.2 var(--font-display); letter-spacing: 0.04em; } .inv-secrets li.on b { color: var(--leaf); letter-spacing: 0; } .inv-howto-perks b { display: inline-block; min-width: 42px; font: 17px/1 var(--font-hand); font-weight: 400; color: var(--muted); } .inv-howto-perks li.on b { color: var(--leaf); } /* lightbox */ .inv-lightbox { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 32px; background: color-mix(in srgb, var(--ink) 78%, transparent); border-radius: inherit; cursor: zoom-out; } .inv-lightbox-card { max-width: min(480px, 90%); padding: 16px 16px 8px; background: var(--polaroid); border-radius: 4px; box-shadow: 0 24px 45px -10px rgba(0, 0, 0, 0.6); rotate: -1.5deg; } .inv-lightbox-card img { display: block; width: 100%; max-height: 55vh; object-fit: contain; background: #2a2622; } .inv-lightbox-card figcaption { padding: 14px 6px 4px; font: 26px/1.2 var(--font-hand); color: var(--polaroid-pen); text-align: center; overflow-wrap: anywhere; } /* disconnected */ .disc { z-index: 90; align-items: center; justify-content: center; background: color-mix(in srgb, #140c08 80%, transparent); animation: fade-in 0.3s ease-out; } .disc-card { --shadow: 9px 9px 0 #000; display: grid; justify-items: center; width: min(470px, calc(100vw - 48px)); padding: 48px 32px 28px; text-align: center; border-radius: 22px; animation: card-drop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); } .disc-title { position: absolute; top: -38px; left: 0; right: 0; margin: 0; font-size: 56px; line-height: 1; color: var(--ember); rotate: -2deg; } .disc-lead { margin: 0; font: 25px/1.2 var(--font-hand); } .disc-msg { margin: 8px 0 22px; font: 700 15px/1.4 var(--font-body); color: var(--muted); overflow-wrap: anywhere; } /* ---------- polaroid easter egg ---------- */ .polaroid { position: fixed; top: 0; bottom: 0; left: 26vw; right: 0; z-index: 40; width: min(330px, 30vw); height: fit-content; margin: auto; padding: 14px 14px 0; background: var(--polaroid); border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 24px 40px -8px rgba(0, 0, 0, 0.5); pointer-events: none; } .polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #2a2622; filter: saturate(0.9) contrast(1.05) sepia(0.1); } .polaroid figcaption { padding: 12px 6px 16px; font: 30px/1.05 var(--font-hand); color: var(--polaroid-pen); text-align: center; overflow-wrap: anywhere; } .polaroid-tape { position: absolute; top: -14px; left: 50%; width: 112px; height: 30px; margin-left: -56px; background: color-mix(in srgb, #f3dea0 78%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); rotate: -3deg; } /* ---------- jump scare ---------- */ .scare { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; overflow: hidden; pointer-events: none; } .scare.on { display: grid; } .scare-bg, .scare-lines, .scare-flash, .scare-stickers { position: absolute; inset: 0; } .scare-bg { background: #000; } .scare.funny .scare-bg { background: radial-gradient(circle, transparent 30%, rgba(255, 120, 0, 0.35)); } .scare-burst { position: absolute; top: 50%; left: 50%; display: none; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; background: repeating-conic-gradient(var(--burst-a) 0deg 9deg, var(--burst-b) 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 50%); mask: radial-gradient(circle, #000 10%, transparent 50%); } .scare.funny .scare-burst { display: block; } .scare-wrap { position: relative; grid-area: 1 / 1; } .scare-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .scare-face { display: block; width: auto; max-width: none; height: 104vh; } .scare.scary .scare-face { filter: contrast(1.75) brightness(0.92) saturate(0.55); } .scare.scary .scare-wrap::after { background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.9) 78%); } .scare.funny .scare-face { height: 70vh; border: 8px solid #fff; box-shadow: 0 0 0 4px #000, 0 0 70px 24px rgba(255, 90, 0, 0.6); filter: saturate(3.8) contrast(2.3) brightness(1.12) hue-rotate(-12deg); } /* jpeg crunch */ .scare.funny .scare-wrap::after { inset: 8px; background-image: var(--grain); background-size: 80px; mix-blend-mode: overlay; } .flare { position: absolute; display: none; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 5%, rgba(255, 240, 200, 0.95) 9%, rgba(255, 40, 20, 0.75) 20%, rgba(255, 0, 0, 0.25) 38%, transparent 62%); mix-blend-mode: screen; translate: -50% -50%; } .flare::after { content: ""; position: absolute; top: 50%; left: -70%; right: -70%; height: 4px; margin-top: -2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); } .scare.funny .flare { display: block; animation: flare-pulse 0.3s ease-in-out infinite alternate; } .scare-cap { position: absolute; left: 3%; right: 3%; display: none; font: 400 clamp(40px, 7.5vh, 88px)/1 var(--font-meme); color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 0.01em; text-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 4px 5px 0 #000; } .scare-cap.top { top: 3%; } .scare-cap.bottom { bottom: 3%; } .scare.funny .scare-cap { display: block; } .scare-stickers { display: none; } .scare.funny .scare-stickers { display: block; } .scare-sticker { position: absolute; font-size: clamp(64px, 11vh, 128px); line-height: 1; translate: -50% -50%; filter: saturate(2) contrast(1.4); } .scare-lines { display: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 4px); } .scare.scary .scare-lines { display: block; } .scare-flash { background: var(--scare-red); opacity: 0; } .scare.funny .scare-flash { background: #fff; } /* ---------- keyframes ---------- */ @keyframes fade-in { from { opacity: 0; } } @keyframes menu-out { to { opacity: 0; transform: scale(1.03); } } @keyframes title-in { from { opacity: 0; transform: scale(0.6) rotate(-6deg); } } @keyframes ribbon-in { from { opacity: 0; transform: translateX(-40px) rotate(-6deg); } } @keyframes card-in { from { opacity: 0; transform: translateX(70px) rotate(5deg); } } @keyframes card-drop { from { opacity: 0; transform: translateY(-40px) rotate(-2deg) scale(0.96); } } @keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.9); } } @keyframes stamp { from { opacity: 0; transform: scale(1.8) rotate(-12deg); } } @keyframes in-left { from { translate: -130% 0; } } @keyframes in-right { from { translate: 130% 0; } } @keyframes drop-in { from { translate: 0 -130px; } } @keyframes rise-in { from { translate: 0 150%; } } @keyframes line-in { from { opacity: 0; transform: translateX(-10px); } } @keyframes spin { to { rotate: 360deg; } } @keyframes swing { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } } @keyframes bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -0.05em; rotate: -3deg; } } @keyframes wobble { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } } @keyframes thump { 0%, 100% { scale: 1; } 30% { scale: 1.25; } } @keyframes tremble { 0% { translate: 0 0; } 50% { translate: 0.7px -0.6px; } } @keyframes key-tap { 0%, 70%, 100% { translate: 0 -2px; box-shadow: 0 4px 0 var(--ink); } 80% { translate: 0 1px; box-shadow: 0 1px 0 var(--ink); } } @keyframes click-blink { 50% { background-size: 0 0; } } @keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(0.9); } } @keyframes toast-out { to { opacity: 0; transform: translateY(-10px) scale(0.95); } } @keyframes toast-funny { 0% { opacity: 0; transform: scale(0.3) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.12) rotate(3deg); } 100% { transform: none; } } @keyframes toast-dread { from { clip-path: inset(-12px 100% -12px -12px); } to { clip-path: inset(-12px -12px -12px -12px); } } @keyframes heartbeat { 0% { opacity: 0.5; transform: scale(1.08); } 10% { opacity: 1; transform: scale(1); } 22% { opacity: 0.65; transform: scale(1.05); } 32% { opacity: 0.95; transform: scale(1.01); } 100% { opacity: 0.5; transform: scale(1.08); } } @keyframes grain { 0% { transform: translate(0, 0); } 12.5% { transform: translate(-72px, 38px); } 25% { transform: translate(44px, -96px); } 37.5% { transform: translate(-118px, -20px); } 50% { transform: translate(96px, 64px); } 62.5% { transform: translate(-30px, 120px); } 75% { transform: translate(130px, -58px); } 87.5% { transform: translate(-90px, 90px); } } @keyframes glitch-jit { 0% { translate: 3px -1px; } 25% { translate: -5px 2px; } 50% { translate: 2px 3px; } 75% { translate: -2px -3px; } } @keyframes glitch-bars { 0% { transform: translateY(0); } 25% { transform: translateY(-9%) scaleY(1.2); } 50% { transform: translateY(12%); } 75% { transform: translateY(-4%) scaleY(0.8); } } @keyframes flare-pulse { from { opacity: 0.75; scale: 0.9; } to { opacity: 1; scale: 1.1; } } @media (prefers-reduced-motion: reduce) { .title-w i, .title-sun svg, .ico-sun, .xp-sun svg, .hud.on .clock, .prompt .key, .dialog.ready .dialog-next .key, .fx-grain, .fx-static, .health.low .health-heart { animation: none; } } /* ---------- hotbar and crosshair (build.ts) ---------- */ /* sticker slots along the bottom edge: hand, pickaxe, then whatever blocks you carry */ .hotbar { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: fit-content; margin: 0 auto; } .hud.on .hotbar { animation: rise-in 0.6s 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both; } /* On narrower screens a full hotbar reaches the corners: chat and the level badge step up over it. */ @media (max-width: 1320px) { .chat, .progress { bottom: 96px; } } .hotbar-slots { display: flex; align-items: flex-end; gap: clamp(5px, 0.5vw, 7px); margin: 0; padding: 0; list-style: none; } .slot { --slot: clamp(40px, 4.1vw, 52px); position: relative; display: grid; place-items: center; width: var(--slot); height: var(--slot); background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); transition: transform 0.14s cubic-bezier(0.2, 1.6, 0.4, 1), box-shadow 0.14s, background-color 0.14s; } .slot.on { z-index: 1; background: var(--sun); transform: translateY(-7px) rotate(-3deg); box-shadow: 4px 6px 0 var(--ink); } .slot:nth-child(even).on { transform: translateY(-7px) rotate(2.5deg); } .slot-icon { width: calc(var(--slot) * 0.77); height: calc(var(--slot) * 0.77); pointer-events: none; } .slot.empty .slot-icon { opacity: 0.4; filter: grayscale(1); } .slot-key { position: absolute; top: -9px; left: -9px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; font: 700 12px/1 var(--font-display); color: var(--text); background: var(--paper-hi); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 0 2px 0 var(--ink); } .slot-n { position: absolute; right: -6px; bottom: -10px; font: 23px/1 var(--font-hand); color: var(--on-color); text-shadow: var(--sticker-sm); white-space: nowrap; } .hotbar-name { font: 600 19px/1 var(--font-display); color: var(--on-color); text-shadow: var(--sticker-sm); white-space: nowrap; opacity: 0; translate: 0 6px; transition: opacity 0.25s, translate 0.25s; } .hotbar-name.show { opacity: 1; translate: 0 0; } /* an ink plus with a paper halo; swells in sun yellow over something you can dig, red if you can't */ .crosshair { --ch: var(--ink); position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; filter: drop-shadow(0 0 1px var(--paper-hi)) drop-shadow(0 0 1px var(--paper-hi)); transition: scale 0.12s cubic-bezier(0.2, 1.6, 0.4, 1); } .crosshair::before, .crosshair::after { content: ""; position: absolute; background: var(--ch); border-radius: 2px; } .crosshair::before { left: 6.5px; top: 0; width: 3px; height: 16px; } .crosshair::after { top: 6.5px; left: 0; width: 16px; height: 3px; } .crosshair.aim { --ch: var(--sun); scale: 1.3; filter: drop-shadow(0 0 0 var(--ink)) drop-shadow(1.5px 1.5px 0 var(--ink)); } .crosshair.bad { --ch: var(--pin); scale: 1.15; rotate: 45deg; } /* ---------- dawn recap: last night's awards ---------- */ .recap { --shadow: 8px 8px 0 var(--ink); position: fixed; top: 50%; left: 50%; z-index: 13; width: min(780px, calc(100vw - 32px)); padding: 26px 28px 20px; border-radius: 22px; translate: -50% -50%; rotate: -1deg; pointer-events: none; animation: card-drop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); transition: opacity 0.5s, translate 0.5s; } .recap.out { opacity: 0; translate: -50% -40%; } .recap-title { margin: -52px 0 16px; font-size: 44px; line-height: 1; color: var(--sun); text-align: center; } .recap-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 16px; margin: 0; padding: 0; list-style: none; } .recap-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; background: var(--paper-hi); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); rotate: var(--r, 0deg); animation: rise-in 0.5s calc(0.25s + var(--i, 0) * 0.12s) cubic-bezier(0.2, 1.3, 0.4, 1) both; } .recap-face { flex: none; width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 0 0 3px var(--c, var(--sun)), 0 0 0 5.5px var(--ink); } .recap-text { display: grid; gap: 1px; min-width: 0; } .recap-award { font: 600 18px/1.1 var(--font-display); color: var(--ember); overflow-wrap: anywhere; } .recap-name { font: 800 15px/1.2 var(--font-body); } .recap-line { font: 19px/1.1 var(--font-hand); color: var(--pen); } .recap-foot { margin: 14px 0 0; font: 21px/1.2 var(--font-hand); color: var(--muted); text-align: center; } /* selfies in the album get a little tag so they stand apart from the found polaroids */ .inv-selfie { position: relative; } .inv-selfie::before { content: "selfie"; position: absolute; top: -10px; left: 50%; z-index: 1; padding: 2px 10px; font: 700 12px/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-color); background: var(--pen); border: 2px solid var(--ink); border-radius: 6px; translate: -50% 0; rotate: -3deg; } /* Mjölnir's lightning (eggs.ts) */ .egg-flash { position: fixed; inset: 0; z-index: 60; background: #eef4ff; pointer-events: none; }