/* Midnight Harvest — HUD (approved day layout: chat lower-left, roster right, phase upper-right, utilities lower-right). #ui is a 1672x941 design-space layer scaled and offset by JS to sit exactly over the scene. */ :root { --panel: rgba(9, 11, 20, 0.86); --edge: #6b5537; --edge-inner: #3a2c1c; --ink: #ebdfc6; --ink-dim: #a99a80; --gold: #e0b45f; --alive: #5ad46a; --dead: #c9463b; --offline: #8a8a8a; --serif: Georgia, 'Times New Roman', serif; } #ui { position: fixed; left: 0; top: 0; width: 1672px; height: 941px; transform-origin: 0 0; pointer-events: none; font-family: var(--serif); color: var(--ink); } #ui > * { pointer-events: auto; } #ui .panel { position: absolute; background: var(--panel); border: 1px solid var(--edge); border-radius: 8px; box-shadow: inset 0 0 0 2px #0a0c14, inset 0 0 0 3px var(--edge-inner), 0 4px 18px rgba(0,0,0,.55); } /* Title (top-left) — the logo asset */ #ui .logo { position: absolute; left: 18px; top: 10px; width: 262px; } /* 75% of the original 350px */ #ui .logo img { width: 100%; display: block; } #ui .logo .slogan { position: absolute; left: 0; right: 0; top: 78.4%; text-align: center; font-size: 10.6px; letter-spacing: .16em; text-transform: uppercase; color: #efe2c4; text-shadow: 0 1px 0 #000, 0 0 3px #000; white-space: nowrap; } #ui .logo .slogan::before, #ui .logo .slogan::after { content: '—✦—'; font-size: 6px; letter-spacing: 0; vertical-align: middle; margin: 0 4px; color: #d9c48f; } /* Phase panel (upper-right) */ #ui .phase { left: 1410px; top: 14px; width: 250px; padding: 14px 12px 12px; text-align: center; } #ui .phase .day { font-size: 20px; letter-spacing: .02em; } #ui .phase .name { font-size: 22px; margin-top: 6px; } #ui .phase .rule { width: 60%; margin: 8px auto; border: 0; border-top: 1px solid var(--edge); } #ui .phase .timer { font-size: 30px; letter-spacing: .03em; } #ui .phase .timer .glass { font-size: 24px; margin-right: 6px; color: var(--gold); } #ui .phase .hint { font-size: 11px; color: var(--ink-dim); margin-top: 8px; letter-spacing: .12em; } /* Roster (right) */ #ui .roster { left: 1497px; top: 495px; width: 164px; padding: 8px 10px 8px; } #ui .roster-title { font-size: 19px; font-weight: normal; text-align: center; margin: 0 0 6px; padding-bottom: 6px; position: relative; } #ui .roster-title::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 0; border-top: 1px solid var(--edge); } #ui .roster-list { list-style: none; margin: 0; padding: 0; } #ui .roster-row { display: grid; grid-template-columns: 24px 1fr auto 12px; align-items: center; gap: 8px; height: 28px; font-size: 16px; } #ui .roster-votes { min-width: 14px; text-align: center; font-size: 12px; color: #1a1408; background: var(--gold); border-radius: 8px; padding: 0 4px; line-height: 16px; } #ui .roster-votes:empty { display: none; } #ui .roster-portrait { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; image-rendering: auto; border: 1px solid var(--edge-inner); } #ui .roster-status { width: 9px; height: 9px; border-radius: 50%; background: var(--alive); box-shadow: 0 0 5px var(--alive); } #ui .roster-row.is-offline .roster-status { background: var(--offline); box-shadow: none; } #ui .roster-row.is-dead { color: var(--ink-dim); } #ui .roster-row.is-dead .roster-portrait { filter: grayscale(1) brightness(.6); } #ui .roster-row.is-dead .roster-status { background: var(--dead); box-shadow: none; border-radius: 2px; } /* Chat (lower-left) — shell only in M2; wired in M5 */ #ui .chat { left: 24px; top: 664px; width: 436px; height: 256px; padding: 0; display: flex; flex-direction: column; } #ui .chat .tabs { display: flex; gap: 6px; padding: 8px 8px 0; } #ui .chat .tab { border: 1px solid var(--edge); border-bottom: 0; border-radius: 6px 6px 0 0; padding: 4px 18px; font: 15px var(--serif); color: var(--ink-dim); background: rgba(255,255,255,.03); cursor: pointer; } #ui .chat .tab.is-active { color: var(--ink); background: #27406e; } #ui .chat .log { flex: 1; margin: 6px 8px 0; padding: 8px 10px; font-size: 15px; line-height: 1.45; overflow-y: auto; border-top: 1px solid var(--edge-inner); } #ui .chat .msg.is-system { color: var(--ink-dim); font-style: italic; } #ui .chat .who.is-me { color: var(--gold); } #ui .chat .log .who { color: #e06a6a; display: inline-block; min-width: 68px; } #ui .chat .input { margin: 6px 8px 8px; height: 40px; border: 1px solid var(--edge); border-radius: 6px; display: flex; align-items: center; padding: 0 4px 0 12px; color: var(--ink-dim); font-size: 15px; background: rgba(0,0,0,.35); } #ui .chat .chat-text { flex: 1; background: none; border: 0; color: var(--ink); font: 15px var(--serif); outline: none; } #ui .chat .chat-text:disabled { color: var(--ink-dim); } #ui .chat .send { background: none; border: 0; color: var(--ink); font-size: 18px; cursor: pointer; padding: 6px 8px; } #ui .chat .send:disabled { color: var(--ink-dim); cursor: default; } #ui .chat .send:focus-visible, #ui .chat .chat-text:focus-visible, #ui .chat .tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } #ui .chat .input .send { margin-left: auto; color: var(--ink); } /* Utility buttons (lower-right) — shell only */ #ui .utils { left: 1290px; top: 854px; width: 370px; height: 70px; display: grid; grid-template-columns: repeat(5, 1fr); } /* Roles · Lobbies · Profile · Settings · Log out */ #ui.is-hidden > :not(.utils) { display: none; } /* M11/M14: outside a match only the utility bar shows */ #ui.is-out { display: none; } /* M14: signed out — nothing but the landing panel */ #ui .utils button { background: none; border: 0; border-left: 1px solid var(--edge-inner); color: var(--ink); font: 13px var(--serif); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; } #ui .utils button:first-child { border-left: 0; } #ui .utils button img { width: 30px; height: 30px; } #ui .utils button:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; } #ui .utils button { transition: background .12s, color .12s; } #ui .utils button:hover { background: rgba(160, 28, 24, .45); color: #ffc7bc; } /* red hover highlight (owner, 2026-09-24) */ #ui .utils button:hover img, #ui .utils button:hover .ut-icon { filter: drop-shadow(0 0 5px rgba(255, 70, 50, .9)); } #ui .utils button:active { background: rgba(160, 28, 24, .7); } #ui .utils .ut-icon { width: 30px; height: 30px; display: block; background: #d9a441; } #ui .utils .ut-icon-logout { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h9v3h-2V5H6v14h5v-1h2v3H4z'/%3E%3Cpath d='M14 8l5 4-5 4v-3H9v-2h5z'/%3E%3C/svg%3E") center / 26px 26px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h9v3h-2V5H6v14h5v-1h2v3H4z'/%3E%3Cpath d='M14 8l5 4-5 4v-3H9v-2h5z'/%3E%3C/svg%3E") center / 26px 26px no-repeat; } @media (prefers-reduced-motion: reduce) { #ui * { transition: none !important; } } /* Lobby (M3) — full-screen over the village until the match starts */ /* ============================================================================================================ Painted screens (M10, owner asset drop 2026-09-23). A .scr overlay centres one .scr-frame: the screen PNG plus overlays placed in the screen's own pixel grid (percentages, see screens.js). Font sizes use cqw so text scales with the frame. Buttons are cut-out sprites with hover / pressed / disabled states. */ .scr { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(3, 5, 12, .7); font-family: var(--serif); color: var(--ink); } .scr[hidden] { display: none; } .scr-frame { position: relative; container-type: inline-size; width: min(1180px, 96vw, calc(96vh * var(--scr-w) / var(--scr-h))); filter: drop-shadow(0 10px 30px rgba(0,0,0,.7)); } .scr-frame > .scr-bg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; } .scr-frame > * { position: absolute; } .scr-frame > .scr-bg { position: relative; } .scr-btn { padding: 0; margin: 0; border: 0; background: none; cursor: pointer; transition: filter .12s, transform .08s; } .scr-btn img { display: block; width: 100%; height: 100%; } .scr-btn:hover, .scr-btn:focus-visible { filter: brightness(1.15) drop-shadow(0 0 6px rgba(240, 190, 90, .75)); outline: none; } .scr-btn:active { transform: translateY(1.5%) scale(.985); filter: brightness(.85); } .scr-btn:disabled { opacity: .45; filter: grayscale(.5); cursor: default; transform: none; } .scr-text { display: flex; align-items: center; justify-content: center; text-align: center; color: #f1e3c2; text-shadow: 0 .15cqw .3cqw #000, 0 0 .6cqw #000; white-space: nowrap; } .scr-phase { font-size: 2.35cqw; letter-spacing: .02em; } .scr-timer { font-size: 2.6cqw; color: #f1e3c2; font-variant-numeric: tabular-nums; } .scr-note { font-size: 1.75cqw; white-space: normal; line-height: 1.35; color: var(--gold); padding: 0 1cqw; } .scr-note.is-wolf { color: #ff6a5a; } .scr-strip { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; font-size: 1.45cqw; color: var(--gold); padding: 0 .6cqw; white-space: nowrap; overflow: hidden; } .scr-strip .nightact-note, .scr-strip .vote-status { overflow: hidden; text-overflow: ellipsis; } .scr-strip .nightact-note.is-wolf { color: #ff6a5a; } .scr-strip [data-timer] { font-variant-numeric: tabular-nums; color: #f1e3c2; } .scr-list { list-style: none; margin: 0; padding: .4cqw .5cqw; overflow-y: auto; display: flex; flex-direction: column; gap: .35cqw; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } .scr-list.is-dimmed { opacity: .25; pointer-events: none; } .scr-row { display: flex; align-items: center; gap: .8cqw; height: 3.9cqw; min-height: 3.9cqw; padding: 0 .9cqw 0 .5cqw; border: .12cqw solid rgba(224, 180, 95, .35); border-radius: .5cqw; background: rgba(0, 0, 0, .35); color: #f1e3c2; font-size: 1.55cqw; cursor: pointer; position: relative; } .scr-row img { width: 3cqw; height: 3cqw; border-radius: .4cqw; object-fit: cover; border: .1cqw solid #3a2c1c; } .scr-row .scr-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scr-row .scr-dot { width: .95cqw; height: .95cqw; border-radius: 50%; background: var(--alive); box-shadow: 0 0 .5cqw var(--alive); } .scr-row .scr-row-tag { font-size: 1.05cqw; color: var(--gold); letter-spacing: .04em; text-transform: uppercase; } .scr-row:hover, .scr-row:focus-visible { border-color: var(--gold); background: rgba(224, 180, 95, .12); outline: none; } .scr-row.is-chosen { border-color: var(--gold); background: rgba(122, 20, 20, .55); box-shadow: 0 0 .6cqw rgba(224, 180, 95, .5); } .scr-row.is-submitted { box-shadow: inset .35cqw 0 0 #b3281f; } .scr-row.is-pack { animation: pack-glow 1.4s ease-in-out 2; } @keyframes pack-glow { 0%, 100% { box-shadow: 0 0 .6cqw rgba(224,180,95,.5); } 50% { box-shadow: 0 0 1.6cqw rgba(255, 210, 110, .95); } } .scr-pip { min-width: 1.9cqw; height: 1.9cqw; line-height: 1.9cqw; text-align: center; font-size: 1.15cqw; color: #1a1408; background: var(--gold); border-radius: 1cqw; padding: 0 .4cqw; box-shadow: 0 0 .4cqw rgba(224,180,95,.7); } .scr-pip:empty { visibility: hidden; } /* doctor's list sits on parchment: darker rows read better there */ .scr-night_select_doctor .scr-row { background: rgba(30, 22, 10, .8); border-color: rgba(122, 90, 42, .6); } .scr-night_select_doctor .scr-strip { color: #4a3820; } .scr-night_select_doctor .scr-strip [data-timer] { color: #2a1c0c; } .scr-night_select_doctor .scr-strip .nightact-note.is-wolf { color: #8a1a10; } /* seer verdict on the compass rose */ .seer-verdict { transform: translate(-50%, -50%); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 8%; box-sizing: border-box; font-size: 2.1cqw; line-height: 1.25; animation: verdict-in .7s ease-out both; } .seer-verdict[hidden] { display: none; } .seer-verdict.is-clear { color: #dbe9ff; background: radial-gradient(circle, rgba(70, 120, 255, .55), rgba(40, 80, 200, .25) 55%, transparent 72%); text-shadow: 0 0 .8cqw #3f7dff, 0 .15cqw .3cqw #000; } .seer-verdict.is-wolf { color: #ffd9d2; background: radial-gradient(circle, rgba(255, 60, 40, .6), rgba(160, 20, 10, .3) 55%, transparent 72%); text-shadow: 0 0 .9cqw #ff3b2e, 0 .15cqw .3cqw #000; } @keyframes verdict-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* Night sky (non-active players): static plate + drifting cloud/mist layers */ #night { position: fixed; inset: 0; z-index: 4; overflow: hidden; background: #06091a; } #night[hidden] { display: none; } #night .night-sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #night .night-layer { position: absolute; left: 0; pointer-events: none; opacity: .95; mix-blend-mode: screen; animation: cloud-cross var(--drift, 150s) linear infinite; will-change: transform; } @keyframes cloud-cross { from { transform: translateX(-100%); } to { transform: translateX(100vw); } } #night .night-stars { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1px 1px at 12% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 33% 9%, #cfe0ff, transparent), radial-gradient(1px 1px at 51% 16%, #fff, transparent), radial-gradient(1px 1px at 86% 6%, #dfe8ff, transparent), radial-gradient(1.5px 1.5px at 22% 24%, #cfe0ff, transparent), radial-gradient(1px 1px at 63% 22%, #fff, transparent); animation: star-twinkle 6s ease-in-out infinite alternate; } @keyframes star-twinkle { from { opacity: .35; } to { opacity: .9; } } #night .night-text { position: absolute; bottom: 6%; left: 0; right: 0; text-align: center; color: var(--ink); font-family: var(--serif); text-shadow: 0 2px 4px #000, 0 0 12px #000; } #night .night-title { font-size: 34px; letter-spacing: .05em; } #night .night-sub { font-size: 20px; color: #cfd6e6; margin-top: 6px; } #night .night-timer { font-size: 17px; color: var(--gold); margin-top: 14px; letter-spacing: .04em; } #night .night-timer span { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { #night .night-layer { animation-play-state: paused; } #night .night-stars { animation: none; } } /* paused keeps each layer at its staggered start position */ #ui.is-night .chat, #ui.is-night .roster, #ui.is-night .utils { visibility: hidden; } /* no roster/chat/vote UI at night */ /* Role reveal (M4, M10): face-down card back, click to flip to the role card */ #reveal { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(3,5,12,.78); font-family: var(--serif); } #reveal[hidden] { display: none; } #reveal .reveal-stage { display: grid; grid-template-columns: auto auto; align-items: center; gap: 28px; max-width: 94vw; } #reveal .reveal-flip { padding: 0; border: 0; background: none; cursor: pointer; perspective: 1400px; width: min(300px, 40vw, 60vh * 880 / 1300); aspect-ratio: 880 / 1300; } #reveal .reveal-flip:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 12px; } #reveal .reveal-card3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1); } /* no filter here: a filter forces transform-style: flat and breaks the flip */ #reveal .reveal-card3d img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 12px 28px rgba(0,0,0,.8)); transition: visibility 0s .45s; } /* fallback for browsers that flatten the 3D context anyway: swap which face is visible at the flip's midpoint */ #reveal.is-flipped .reveal-back { visibility: hidden; } #reveal:not(.is-flipped) .reveal-img { visibility: hidden; } #reveal .reveal-img { transform: rotateY(180deg); } #reveal.is-flipped .reveal-card3d { transform: rotateY(180deg); } #reveal:not(.is-flipped) .reveal-back { animation: card-tease 2.4s ease-in-out infinite; } @keyframes card-tease { 0%, 100% { transform: translateY(0) rotateZ(0); } 50% { transform: translateY(-6px) rotateZ(-.8deg); } } #reveal .reveal-hint { grid-column: 1 / -1; text-align: center; color: var(--ink-dim); font-size: 15px; letter-spacing: .06em; } #reveal.is-flipped .reveal-hint { visibility: hidden; } #reveal .reveal-info { width: min(320px, 44vw); text-align: center; color: var(--ink); opacity: 0; transform: translateX(-10px); transition: opacity .5s .45s, transform .5s .45s; } #reveal.is-flipped .reveal-info { opacity: 1; transform: none; } #reveal .reveal-name { font-weight: normal; font-size: 26px; margin: 0 0 6px; } #reveal .reveal-blurb { margin: 0; color: var(--ink-dim); font-size: 15px; } #reveal .reveal-allies { color: var(--gold); font-size: 15px; margin: 8px 0 0; min-height: 1.2em; } /* M45b: the keepsake's private word on the back of the card — warm when it helped, cold when it didn't */ #reveal .reveal-word { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 15px; font-style: italic; color: #b8c2d6; } #reveal .reveal-word[hidden] { display: none; } #reveal .reveal-word-img { flex: none; width: 44px; height: 44px; object-fit: contain; filter: grayscale(.55) brightness(.8); } #reveal .reveal-word.is-helped { color: #f0c46a; } #reveal .reveal-word.is-helped .reveal-word-img { filter: drop-shadow(0 0 8px rgba(240, 196, 106, .85)); } #reveal button.reveal-ok { font: 15px var(--serif); color: var(--ink); background: #27406e; border: 1px solid var(--edge); border-radius: 6px; padding: 8px 16px; margin-top: 12px; cursor: pointer; } @media (max-width: 720px) { #reveal .reveal-stage { grid-template-columns: 1fr; justify-items: center; gap: 12px; } #reveal .reveal-info { width: min(320px, 90vw); } } @media (prefers-reduced-motion: reduce) { #reveal .reveal-card3d { transition: none; } #reveal .reveal-card3d img { transition: none; } #reveal .reveal-back { animation: none !important; } } /* Morning announcement (M10): painted panel; portrait, status, parchment lines fade in one by one */ #morning { z-index: 5; } #morning .morning-portrait { display: grid; place-items: center; overflow: hidden; } #morning .morning-portrait img { width: 92%; height: 92%; object-fit: cover; border-radius: .6cqw; } #morning .morning-portrait.is-moon img { width: 60%; height: auto; filter: drop-shadow(0 0 1.2cqw rgba(160, 190, 255, .8)); } #morning .morning-status { font-size: 2.1cqw; letter-spacing: .08em; text-transform: uppercase; color: #cfe3c8; } #morning .morning-status.is-dead { color: #ff7a6a; } #morning .morning-parchment { color: #2a1c0c; padding: 2cqw 3cqw; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqw; text-align: center; } #morning .morning-title { font-size: 3cqw; letter-spacing: .02em; color: #3a2408; } #morning .morning-lines p { margin: .5cqw 0; font-size: 1.9cqw; line-height: 1.4; color: #4a3820; opacity: 0; animation: line-in .7s ease-out forwards; animation-delay: calc(.5s + var(--i) * .8s); } @keyframes line-in { from { opacity: 0; transform: translateY(.6cqw); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #morning .morning-lines p { animation: none; opacity: 1; } } #announce { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 5; min-width: 320px; max-width: 60vw; padding: 14px 22px; text-align: center; font-family: var(--serif); color: var(--ink); background: linear-gradient(#f0e2c2, #e3cfa4); border-color: #7a5a2a; } #announce[hidden] { display: none; } #announce .announce-title { font-size: 20px; color: #2a1c0c; } #announce .announce-text { font-size: 15px; color: #4a3820; margin-top: 4px; } /* Vote panel (M5, M10): painted "Voting (Day Discussion)" screen; select a row, then Confirm */ #vote { z-index: 5; } #vote .vote-list { padding: .6cqw .7cqw; } /* Night role screens (M10): painted per-role screens; .scr rules above */ #nightact { z-index: 5; } /* Victim slash (M6) — private, brief; drawn in CSS because no slash asset exists */ #slash { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(120,0,0,.55), rgba(20,0,0,.85)); animation: slash-fade 2.6s ease-out forwards; font-family: var(--serif); } #slash[hidden] { display: none; } #slash .slash-marks { position: relative; width: min(60vw, 420px); height: min(40vh, 300px); } #slash .slash-marks i { position: absolute; top: 10%; height: 80%; width: 10px; background: linear-gradient(#ff3b2e, #7a0000); border-radius: 6px; transform: rotate(28deg); transform-origin: top; box-shadow: 0 0 18px #ff2a1a; animation: slash-draw .35s ease-out both; } #slash .slash-marks i:nth-child(1) { left: 35%; } #slash .slash-marks i:nth-child(2) { left: 50%; animation-delay: .08s; } #slash .slash-marks i:nth-child(3) { left: 65%; animation-delay: .16s; } #slash .slash-text { position: absolute; top: 18%; left: 0; right: 0; text-align: center; font-size: 32px; color: #ff5a4a; text-shadow: 0 0 12px #000; letter-spacing: .04em; } @keyframes slash-draw { from { transform: rotate(28deg) scaleY(0); } to { transform: rotate(28deg) scaleY(1); } } @keyframes slash-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #slash, #slash .slash-marks i { animation: none; } } /* Game over (M8, M10): step 1 painted victory screen, step 2 role reveal table */ #gameover { z-index: 6; background: rgba(3,5,12,.8); } #gameover .gameover-victory { display: contents; } #gameover.is-step2 .gameover-victory { display: none; } #gameover .gameover-card { display: none; position: relative; width: min(560px, 94vw); padding: 16px 20px 14px; text-align: center; } #gameover.is-step2 .gameover-card { display: block; } #gameover .gameover-banner { width: 100%; max-width: 420px; border-radius: 8px; } #gameover .gameover-title { font-weight: normal; font-size: 19px; margin: 10px 0 12px; } #gameover .gameover-roles { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; text-align: left; } #gameover .gameover-row { display: grid; grid-template-columns: 26px 1fr 22px 90px 70px; gap: 10px; align-items: center; padding: 4px 6px; border-bottom: 1px solid var(--edge-inner); font-size: 15px; } #gameover .gameover-portrait, #gameover .gameover-roleicon { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; } #gameover .team-werewolf .gameover-role { color: #ff7a6a; } #gameover .team-village .gameover-role { color: #9fd3a0; } #gameover .gameover-row.is-dead .gameover-name { color: var(--ink-dim); text-decoration: line-through; } #gameover .gameover-fate { color: var(--ink-dim); font-size: 13px; text-align: right; } #gameover .gameover-actions { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 12px; } #gameover .gameover-wait { color: var(--ink-dim); font-size: 14px; } #gameover .gameover-wait[hidden], #gameover .gameover-rematch[hidden] { display: none; } #gameover .gameover-card button { font: 15px var(--serif); color: var(--ink); background: #7a3a1c; border: 1px solid var(--edge); border-radius: 6px; padding: 8px 18px; cursor: pointer; } #gameover .gameover-card button.quiet { background: none; color: var(--ink-dim); border-color: var(--edge-inner); } #gameover .gameover-card button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Settings (M9) */ #settings { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(3,5,12,.6); font-family: var(--serif); color: var(--ink); } #settings[hidden] { display: none; } #settings .settings-card { width: min(380px, 92vw); padding: 16px 20px 14px; } #settings h2 { font-weight: normal; font-size: 22px; margin: 0 0 10px; } #settings label { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 15px; } #settings input[type=range] { flex: 1; } #settings .settings-hint { color: var(--ink-dim); font-size: 13px; } #settings .settings-actions { text-align: right; margin-top: 8px; } #settings button { font: 15px var(--serif); color: var(--ink); background: #27406e; border: 1px solid var(--edge); border-radius: 6px; padding: 7px 16px; cursor: pointer; } #settings input:focus-visible, #settings button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Portrait / very narrow windows: the village is designed 16:9; say so instead of shrinking into a strip */ #portrait-note { position: fixed; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 9; background: var(--panel); border: 1px solid var(--edge); color: var(--ink); font: 14px var(--serif); padding: 8px 14px; border-radius: 8px; display: none; } @media (max-aspect-ratio: 1/1) { #portrait-note { display: block; } } /* Home screen (M11): live village list, host options, profile placeholder. Overlays the empty village. */ #home { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(4, 6, 14, .5); font-family: var(--serif); color: var(--ink); pointer-events: none; } /* backdrop lets the utility bar through (M14) */ #home > * { pointer-events: auto; } #home[hidden] { display: none; } #home .home-card { width: min(640px, 94vw); max-height: 90vh; overflow: auto; padding: 18px 24px 20px; box-sizing: border-box; } #home .home-head { text-align: center; margin-bottom: 8px; } #home .home-title { font-size: 30px; font-weight: normal; margin: 0; letter-spacing: .03em; } #home .home-slogan { color: var(--gold); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; } #home .home-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--edge-inner); margin: 10px 0 14px; } #home .home-tab { font: 15px var(--serif); color: var(--ink-dim); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; } #home .home-tab.is-active { color: var(--gold); border-bottom-color: var(--gold); } #home .home-tab:focus-visible, #home input:focus-visible, #home button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } #home .home-namerow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; } #home label { display: block; font-size: 14px; color: var(--ink-dim); } #home input[type="text"], #home input:not([type]), #home input[type="password"], #home input[type="number"] { display: block; margin-top: 4px; font: 16px var(--serif); color: var(--ink); background: rgba(0,0,0,.4); border: 1px solid var(--edge); border-radius: 6px; padding: 8px 10px; width: 100%; box-sizing: border-box; } #home button { font: 15px var(--serif); color: var(--ink); background: #27406e; border: 1px solid var(--edge); border-radius: 6px; padding: 9px 16px; cursor: pointer; white-space: nowrap; } #home button.primary { background: #7a3a1c; } #home button.quiet { background: none; color: var(--ink-dim); border-color: var(--edge-inner); } #home button:disabled { opacity: .4; cursor: default; } #home .home-hostopts { display: grid; grid-template-columns: 90px 1fr 1fr auto auto; gap: 10px; align-items: end; margin: 12px 0 4px; padding: 12px; border: 1px solid var(--edge-inner); border-radius: 8px; background: rgba(0,0,0,.25); } #home .home-hostopts[hidden] { display: none; } #home .home-hostopts label:nth-child(2) { align-self: center; padding-bottom: 8px; } #home .home-msg { min-height: 1.2em; margin: 8px 0; color: var(--gold); font-size: 14px; } #home .home-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; } #home .home-row { display: grid; grid-template-columns: 1.4fr 1fr 60px 90px auto; gap: 10px; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--edge-inner); font-size: 15px; } #home .home-row.is-closed { color: var(--ink-dim); } #home .hv-name { font-size: 17px; } #home .hv-host { color: var(--ink-dim); font-size: 14px; } #home .hv-count { text-align: center; } #home .hv-status { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); } #home .home-row.is-closed .hv-status { color: var(--ink-dim); } #home .home-empty { padding: 18px; text-align: center; color: var(--ink-dim); } #home .home-dim { color: var(--ink-dim); } #home.is-overlay { z-index: 7; } @media (max-width: 640px) { #home .home-namerow, #home .home-hostopts { grid-template-columns: 1fr; } #home .home-row { grid-template-columns: 1fr 60px auto; } #home .hv-host, #home .hv-status { display: none; } } /* Profile tab (M12) */ #home .profile-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } #home .profile-forms form { padding: 12px; border: 1px solid var(--edge-inner); border-radius: 8px; background: rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 8px; } #home .profile-forms h3, #home .profile-card h3 { font-weight: normal; font-size: 17px; margin: 0 0 4px; color: var(--gold); } #home .profile-head { display: flex; align-items: center; gap: 14px; } #home .profile-avatar { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid var(--edge); } #home .profile-name { margin: 0; font-weight: normal; font-size: 24px; } #home .profile-head > .quiet { margin-left: auto; } #home .profile-title { display: inline-block; margin: 4px 6px 0 0; padding: 2px 8px; border: 1px solid var(--edge); border-radius: 10px; font-size: 12px; color: var(--gold); letter-spacing: .04em; } #home .profile-avatars { margin: 10px 0; } #home .profile-avatars summary { cursor: pointer; color: var(--ink-dim); font-size: 14px; } #home .profile-avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; } #home .profile-avatar-pick { padding: 2px; background: none; border: 2px solid transparent; border-radius: 8px; } #home .profile-avatar-pick img { width: 100%; border-radius: 6px; display: block; } #home .profile-avatar-pick.is-current { border-color: var(--gold); } #home .profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; } #home .stat { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--edge-inner); border-radius: 8px; background: rgba(0,0,0,.25); } #home .stat-k { font-size: 12px; color: var(--ink-dim); letter-spacing: .04em; text-transform: uppercase; } #home .stat-v { font-size: 17px; } #home .profile-bg textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: 15px var(--serif); color: var(--ink); background: rgba(0,0,0,.4); border: 1px solid var(--edge); border-radius: 6px; padding: 8px 10px; resize: vertical; } #home .profile-bg-actions { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; } #home .profile-recent { list-style: none; margin: 0; padding: 0; } #home .profile-recent li { display: grid; grid-template-columns: 90px 1fr 90px 90px; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--edge-inner); font-size: 14px; } #home .profile-recent li.is-won span:last-child { color: #9fd3a0; } #home .profile-recent li.is-lost span:last-child { color: #ff9a8a; } .home-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #141a2c; border: 1px solid var(--gold); border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.7); font-size: 15px; } .home-toast[hidden] { display: none; } @media (max-width: 640px) { #home .profile-forms { grid-template-columns: 1fr; } #home .profile-stats { grid-template-columns: repeat(2, 1fr); } #home .profile-avatar-grid { grid-template-columns: repeat(4, 1fr); } } /* M13 — profile polish: popover, roster titles, lobby picker + backgrounds, profile groups, hall */ #profilecard { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(3,5,12,.6); font-family: var(--serif); color: var(--ink); } #profilecard[hidden] { display: none; } #profilecard .profilecard-box { position: relative; width: min(520px, 94vw); max-height: 88vh; overflow: auto; padding: 18px 22px; box-sizing: border-box; } #profilecard .profilecard-close { position: absolute; top: 8px; right: 10px; font: 22px var(--serif); color: var(--ink-dim); background: none; border: 0; cursor: pointer; } #profilecard .profilecard-name { font-weight: normal; font-size: 24px; margin: 0; } #profilecard h3, #home .profile-card h3 { font-weight: normal; font-size: 15px; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; margin: 14px 0 6px; } .profile-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 12px 0; } .profile-strip > div, .profile-stats .stat { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border: 1px solid var(--edge-inner); border-radius: 6px; background: rgba(0,0,0,.25); } .stat-k { font-size: 11px; color: var(--ink-dim); letter-spacing: .04em; text-transform: uppercase; text-align: center; } .stat-v { font-size: 17px; } .profile-background p { white-space: pre-wrap; margin: 0; line-height: 1.45; color: var(--ink); } [data-profile] { cursor: pointer; } [data-profile]:hover { color: var(--gold); text-decoration: underline dotted; } #roster .roster-row.is-clickable { cursor: pointer; } #roster .roster-names { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.1; } #roster .roster-titletag { font-size: 10px; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #roster .roster-titletag:empty { display: none; } #home .profile-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } #home .profile-group h3 { margin-top: 0; } #home .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } #home .profile-roles { width: 100%; border-collapse: collapse; font-size: 14px; } #home .profile-roles th, #home .profile-roles td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--edge-inner); } #home .profile-roles th { color: var(--ink-dim); font-weight: normal; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } #home .profile-played, #home .hall-board ol { list-style: none; margin: 0; padding: 0; } #home .profile-played li, #home .hall-board li { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; padding: 5px 4px; border-bottom: 1px solid var(--edge-inner); font-size: 14px; } #home .profile-played img, #home .hall-board img, #home .hv-avatar { width: 26px; height: 26px; border-radius: 4px; vertical-align: middle; } #home .hv-avatar { margin-right: 6px; } #home .hall-board li { grid-template-columns: 28px 1fr auto; } #home .hall-board strong { color: var(--gold); } #home .hall-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } #home .profile-password form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 8px; } #home .profile-password summary, #home .profile-avatars summary { cursor: pointer; color: var(--gold); margin: 10px 0 4px; } @media (max-width: 640px) { .profile-strip { grid-template-columns: repeat(3, 1fr); } #home .profile-groups, #home .hall-boards { grid-template-columns: 1fr; } #lobby .lobby-picker-grid { grid-template-columns: repeat(4, 1fr); } } /* Landing sign-in panel (owner brief 2026-09-24): left third of the darkened village, uniformly scaled; mute bottom-right */ #login { position: fixed; inset: 0; z-index: 6; background: rgba(4, 6, 14, .45); font-family: var(--serif); color: var(--ink); } #login[hidden] { display: none; } #login .login-anchor { position: absolute; left: clamp(24px, 2.5vw, 80px); top: 50%; transform: translateY(-50%); width: min(20vw, calc(55vh * 1086 / 1448), 460px); } /* 40 % smaller than the brief's left third (owner, 2026-09-24) */ #login .scr-frame { width: 100%; filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 0 3px rgba(0,0,0,.35)); } /* softer, wider shadow; the PNG itself is pre-shrunk with feathered alpha */ #login .login-form { width: 0; height: 0; overflow: hidden; } #login .login-field { box-sizing: border-box; background: transparent; border: 0; outline: none; color: #f1e3c2; font: 3.4cqw var(--serif); padding: 0 1.4cqw; caret-color: var(--gold); border-radius: .6cqw; transition: box-shadow .12s; } #login .login-field::placeholder { color: var(--ink-dim); } #login .login-field:focus-visible { box-shadow: 0 0 0 .18cqw var(--gold), 0 0 1.2cqw rgba(224,180,95,.6); } #login .login-field.is-error { box-shadow: 0 0 0 .18cqw #e0603c, 0 0 1.2cqw rgba(224, 96, 60, .7); } #login .login-field:-webkit-autofill { -webkit-text-fill-color: #f1e3c2; box-shadow: 0 0 0 100cqw #0e1420 inset; } #login .login-msg { display: flex; align-items: center; justify-content: center; font-size: 2.5cqw; color: var(--ink-dim); text-shadow: 0 .1cqw .25cqw #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #login .login-msg.is-error { color: #ff8c6e; } #login .scr-btn:disabled { opacity: .6; filter: none; } #login .login-mute { position: fixed; right: clamp(16px, 2vw, 40px); bottom: clamp(16px, 2vw, 40px); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--edge); background: rgba(8, 12, 22, .85); cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.6); } #login .login-mute:hover, #login .login-mute:focus-visible { border-color: var(--gold); outline: none; box-shadow: 0 0 10px rgba(224,180,95,.6); } #login .login-mute-icon { width: 22px; height: 22px; background: currentColor; color: var(--ink-dim); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3Cpath d='M19 4l1.4 1.4L5.4 20.4 4 19z' opacity='.9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3Cpath d='M19 4l1.4 1.4L5.4 20.4 4 19z' opacity='.9'/%3E%3C/svg%3E") center / contain no-repeat; } #login .login-mute.is-on .login-mute-icon { color: var(--gold); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E"); } #home .home-me { display: flex; align-items: center; gap: 10px; } #home .home-me img { width: 40px; height: 40px; border-radius: 6px; } #home .home-me strong { display: block; font-size: 18px; font-weight: normal; } @media (max-width: 900px), (max-aspect-ratio: 4/3) { #login { overflow: auto; } #login .login-anchor { position: static; transform: none; width: min(80vw, 400px); margin: 24px auto; } } /* M14 extras: lantern flicker, werewolf eye pulse (sharper on a wrong password), shake, slide-out */ #login .login-lantern, #login .login-eye { position: absolute; pointer-events: none; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen; } #login .login-lantern { width: 14cqw; height: 14cqw; background: radial-gradient(circle, rgba(255, 190, 90, .55), rgba(255, 140, 40, .25) 40%, transparent 70%); animation: lantern-flicker var(--dur, 3s) ease-in-out infinite alternate; } @keyframes lantern-flicker { 0% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } 35% { opacity: .9; } 60% { opacity: .7; transform: translate(-50%, -50%) scale(1.04); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } #login .login-eye { width: 5cqw; height: 5cqw; background: radial-gradient(circle, rgba(255, 70, 40, .8), rgba(255, 40, 20, .35) 40%, transparent 70%); animation: eye-pulse 3.2s ease-in-out infinite alternate; } @keyframes eye-pulse { from { opacity: .25; } to { opacity: .7; } } #login .scr-frame.is-angry .login-eye { animation: eye-flare 1.4s ease-out 1; } @keyframes eye-flare { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.8); } 100% { opacity: .4; transform: translate(-50%, -50%) scale(1); } } #login .login-anchor.is-shake { animation: panel-shake .45s cubic-bezier(.36, .07, .19, .97) 1; } @keyframes panel-shake { 10%, 90% { transform: translateY(-50%) translateX(-1px); } 20%, 80% { transform: translateY(-50%) translateX(2px); } 30%, 50%, 70% { transform: translateY(-50%) translateX(-4px); } 40%, 60% { transform: translateY(-50%) translateX(4px); } } #login .login-anchor { transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .5s; } #login.is-leaving .login-anchor { transform: translateY(-50%) translateX(-120%); opacity: 0; } #login.is-leaving { background: transparent; transition: background .6s; } #home { animation: home-in .5s ease-out both; } @keyframes home-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #login .login-lantern, #login .login-eye, #login .login-anchor.is-shake, #home { animation: none; } #login .login-anchor { transition: none; } } @media (max-width: 900px), (max-aspect-ratio: 4/3) { @keyframes panel-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } #login.is-leaving .login-anchor { transform: translateX(-120%); } } /* ============================================================================================================ Village Lobby (M15c). A fixed 1672×941 design-space layer (.lb-space) scaled by JS to 60 % of the viewport fit and centred — the HUD's own letterbox technique — so every control is placed in plate pixels and cannot drift. */ #lobbybrowser { position: fixed; inset: 0; z-index: 0; background: rgba(4, 6, 14, .22); font-family: var(--serif); color: #f1e3c2; } /* below #ui by DOM order; overlays (z≥5) cover it */ #lobbybrowser[hidden] { display: none; } #lobbybrowser .lb-space { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; transform-origin: 0 0; } #lobbybrowser .lb-space > * { position: absolute; box-sizing: border-box; } #lobbybrowser .lb-bg { left: 0; top: 0; width: 1672px; height: 941px; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 14px 34px rgba(0,0,0,.6)); } #lobbybrowser .lb-input { background: transparent; border: 0; outline: none; color: #f1e3c2; font: 22px var(--serif); padding: 0 10px; caret-color: var(--gold); border-radius: 6px; } #lobbybrowser .lb-input::placeholder { color: #6f7a86; } #lobbybrowser .lb-input:focus-visible { box-shadow: 0 0 0 2px var(--gold); } #lobbybrowser .lb-icon-search { pointer-events: none; opacity: .9; object-fit: contain; } #lobbybrowser .lb-filters { display: flex; align-items: center; gap: 26px; font-size: 19px; } #lobbybrowser .lb-filters label { display: flex; align-items: center; gap: 8px; } #lobbybrowser .lb-select { position: relative; display: inline-flex; align-items: center; min-width: 150px; height: 38px; padding: 0 40px 0 14px; box-sizing: border-box; background: #0c1015; border: 1.5px solid #8a6a2b; border-radius: 5px; font-size: 18px; color: #f1e3c2; } #lobbybrowser .lb-select select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 40px 0 14px; background: transparent; border: 0; color: #f1e3c2; font: 18px var(--serif); appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; } #lobbybrowser .lb-select select:focus-visible { box-shadow: 0 0 0 2px var(--gold); } #lobbybrowser .lb-select select option { background: #0c1015; } #lobbybrowser .lb-select img { position: absolute; right: 10px; top: 50%; width: 22px; transform: translateY(-50%); pointer-events: none; } #lobbybrowser .lb-select.is-fixed { color: #b9a98a; cursor: default; } #lobbybrowser .lb-wide { min-width: 0; flex: 1; } #lobbybrowser .lb-check { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; color: #f1e3c2; font: 19px var(--serif); cursor: pointer; padding: 0; } #lobbybrowser .lb-check img { width: 34px; height: 34px; } #lobbybrowser .lb-check:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } #lobbybrowser .lb-list, #lobbybrowser .lb-results { list-style: none; margin: 0; padding: 4px 6px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } /* rows: banner · name/host · seats · lock · Join — the owner's frame sheet, 3-sliced (default / hover / selected / disabled) */ #lobbybrowser .lb-row { display: grid; grid-template-columns: 200px 1fr 120px 44px 150px; align-items: center; gap: 14px; height: 76px; min-height: 76px; padding: 0 14px 0 0; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; color: #f1e3c2; border-style: solid; border-width: 5px 36px; border-image: url("../../assets/ui/lobby/row_default.png") 5 90 5 90 / 5px 36px stretch; /* no `fill`: the interior is our own background so the banner can sit under the frame */ background-color: #0a0c10; background-clip: padding-box; background-repeat: no-repeat; background-position: left center, left center; background-size: auto 100%, 280px 100%; background-image: linear-gradient(to right, rgba(10, 12, 16, 0) 150px, rgba(10, 12, 16, .55) 220px, #0a0c10 270px), var(--banner); transition: background-position 1.4s ease-out; } #lobbybrowser .lb-row:hover { background-position: left center, -12px center; } /* the wind moves the scene a little */ #lobbybrowser .lb-row:hover, #lobbybrowser .lb-row:focus-visible { border-image-source: url("../../assets/ui/lobby/row_hover.png"); outline: none; } #lobbybrowser .lb-row.is-selected { border-image-source: url("../../assets/ui/lobby/row_selected.png"); } #lobbybrowser .lb-row.is-closed { border-image-source: url("../../assets/ui/lobby/row_disabled.png"); color: #b9a98a; background-color: #07080b; background-blend-mode: normal, luminosity; } #lobbybrowser .lb-row.is-closed.is-selected { border-image-source: url("../../assets/ui/lobby/row_selected.png"); } #lobbybrowser .lb-name { font-size: 25px; line-height: 1.1; display: flex; flex-direction: column; min-width: 0; } #lobbybrowser .lb-name small { font-size: 15px; color: #b9a98a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #lobbybrowser .lb-seats { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; } #lobbybrowser .lb-seats img { width: 34px; } #lobbybrowser .lb-lock { display: flex; justify-content: center; } #lobbybrowser .lb-lock img { height: 36px; } #lobbybrowser .lb-row-join { height: 44px; font-size: 20px; min-width: 0; padding: 0 10px; } #lobbybrowser .lb-row.is-new { animation: row-in .55s cubic-bezier(.2, .7, .2, 1) both; } #lobbybrowser .lb-row.is-new::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 220, 140, .35) 50%, transparent 70%); transform: translateX(-120%); animation: row-glint 1.1s ease-out .3s 1; pointer-events: none; } @keyframes row-in { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: none; } } @keyframes row-glint { to { transform: translateX(120%); } } #lobbybrowser .lb-empty, #lobbybrowser .lb-dim { color: #b9a98a; font-size: 19px; padding: 20px; text-align: center; list-style: none; } /* art buttons: 3-slice horizontally so the end caps keep their shape; labels are HTML */ #lobbybrowser .lb-btn { border: 0; background: none; color: #f6d98f; font: 30px var(--serif); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 4px #000, 0 0 12px rgba(0,0,0,.8); cursor: pointer; box-sizing: border-box; padding: 0 30px; display: flex; align-items: center; justify-content: center; } #lobbybrowser .lb-btn-wide { border-style: solid; border-width: 0 52px; border-image: url("../../assets/ui/lobby/btn_wide_default.png") 0 230 0 230 fill / 0 52px stretch; } #lobbybrowser .lb-btn-wide:hover:not(:disabled), #lobbybrowser .lb-btn-wide:focus-visible { border-image-source: url("../../assets/ui/lobby/btn_wide_hover.png"); color: #fff0c8; outline: none; } #lobbybrowser .lb-btn-wide:disabled { border-image-source: url("../../assets/ui/lobby/btn_wide_disabled.png"); color: #8f8570; cursor: default; } #lobbybrowser .lb-btn-compact { border-style: solid; border-width: 0 30px; border-image: url("../../assets/ui/lobby/btn_compact_default.png") 0 140 0 140 fill / 0 30px stretch; height: 44px; font-size: 20px; min-width: 150px; } #lobbybrowser .lb-btn-compact:hover:not(:disabled), #lobbybrowser .lb-btn-compact:focus-visible { border-image-source: url("../../assets/ui/lobby/btn_compact_hover.png"); outline: none; } #lobbybrowser .lb-btn-compact:disabled { border-image-source: url("../../assets/ui/lobby/btn_compact_disabled.png"); color: #8f8570; cursor: default; } #lobbybrowser #br-create { font-size: 26px; } #lobbybrowser .lb-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.9); } /* create room fields */ #lobbybrowser .lb-field { display: flex; align-items: center; gap: 12px; } #lobbybrowser .lb-label { width: 116px; font-size: 19px; flex: none; } #lobbybrowser .lb-scenes { display: flex; gap: 8px; flex: 1; } #lobbybrowser .lb-scene { flex: 1; height: 52px; padding: 0; border: 1.5px solid #8a6a2b; border-radius: 5px; background: #000; overflow: hidden; cursor: pointer; opacity: .75; } #lobbybrowser .lb-scene img { width: 100%; height: 100%; object-fit: cover; display: block; } #lobbybrowser .lb-scene { position: relative; } #lobbybrowser .lb-scene.is-locked img { filter: grayscale(.85) brightness(.55); } #lobbybrowser .lb-scene.is-locked::after { content: '🔒'; position: absolute; right: 4px; bottom: 2px; font-size: 14px; } /* M27 */ #lobbybrowser .lb-scene:hover, #lobbybrowser .lb-scene:focus-visible { opacity: 1; border-color: var(--gold); outline: none; } #lobbybrowser .lb-scene.is-current { opacity: 1; border-color: #d42a1e; box-shadow: 0 0 0 2px #d42a1e; } #lobbybrowser .lb-toggle { background: none; border: 0; padding: 0; cursor: pointer; height: 36px; } #lobbybrowser .lb-toggle img { height: 100%; } #lobbybrowser .lb-toggle:focus-visible { outline: 2px solid var(--gold); border-radius: 18px; } #lobbybrowser .lb-pw { flex: 1; height: 38px; background: #0c1015; border: 1.5px solid #8a6a2b; font-size: 18px; } #lobbybrowser .lb-pw:disabled { opacity: .45; } #lobbybrowser .lb-box { background: #0c1015; border: 1.5px solid #8a6a2b; border-radius: 6px; box-shadow: inset 0 2px 6px rgba(0,0,0,.8); } /* find players results */ #lobbybrowser .lb-player { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 12px; height: 58px; padding: 0 12px; box-sizing: border-box; border: 1.5px solid #8a6a2b; border-radius: 5px; background: rgba(4, 5, 8, .75); } #lobbybrowser .lb-player img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--gold); } #lobbybrowser .lb-pname { font-size: 20px; display: flex; flex-direction: column; line-height: 1.15; cursor: pointer; } #lobbybrowser .lb-pname small { font-size: 14px; color: #9fd3a0; display: flex; align-items: center; gap: 6px; } #lobbybrowser .lb-pname small img { width: 15px; height: 15px; border: 0; border-radius: 50%; } #lobbybrowser .lb-msg { margin: 0; font-size: 18px; color: var(--gold); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 3px #000; } #lobbybrowser .lb-msg.is-error { color: #ff8c6e; } /* password prompt */ #lobbybrowser .lb-modal { left: 0; top: 0; width: 1672px; height: 941px; display: grid; place-items: center; background: rgba(3, 5, 12, .7); z-index: 4; } #lobbybrowser .lb-modal[hidden] { display: none; } #lobbybrowser .lb-modal-box { position: relative; width: 440px; padding: 24px 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } #lobbybrowser .lb-modal-box > img { height: 66px; } #lobbybrowser .lb-modal-box h3 { margin: 0; font-weight: normal; font-size: 24px; } #lobbybrowser .lb-modal-box .lb-input { width: 100%; height: 40px; background: #0c1015; border: 1.5px solid #8a6a2b; } #lobbybrowser .lb-modal-actions { display: flex; gap: 14px; } #lobbybrowser .lb-modal .lb-msg { position: static; width: auto; } /* extras: the blood moon breathes, the lanterns flicker */ #lobbybrowser .lb-moon, #lobbybrowser .lb-lantern { pointer-events: none; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen; } #lobbybrowser .lb-moon { background: radial-gradient(circle, rgba(255, 60, 40, .5), rgba(255, 30, 20, .22) 45%, transparent 70%); animation: moon-breathe 7s ease-in-out infinite alternate; } @keyframes moon-breathe { from { opacity: .35; transform: translate(-50%, -50%) scale(.96); } to { opacity: .8; transform: translate(-50%, -50%) scale(1.06); } } #lobbybrowser .lb-lantern { width: 118px; height: 118px; background: radial-gradient(circle, rgba(255, 190, 90, .5), rgba(255, 140, 40, .22) 40%, transparent 70%); animation: lantern-flicker var(--dur, 3s) ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { #lobbybrowser .lb-moon, #lobbybrowser .lb-lantern, #lobbybrowser .lb-row.is-new, #lobbybrowser .lb-row.is-new::after { animation: none; } #lobbybrowser .lb-row { transition: none; } } #home .home-close { position: absolute; top: 8px; right: 12px; font: 22px var(--serif); color: var(--ink-dim); background: none; border: 0; cursor: pointer; } #home .home-card { position: relative; } #home .profile-head-actions { display: flex; gap: 8px; } @media (max-width: 900px) { #lobbybrowser .lb-row { grid-template-columns: 10cqw 1fr 6cqw 6cqw; } #lobbybrowser .lb-type, #lobbybrowser .lb-status { display: none; } } /* Row hover card (M15b): details + shortcut Join, anchored under the hovered row */ #lobbybrowser .lb-card { width: 24cqw; padding: .9cqw 1cqw 1cqw; box-sizing: border-box; z-index: 3; pointer-events: auto; transform: translateY(.3cqw); animation: card-in .16s ease-out both; font-size: 1.05cqw; color: #f1e3c2; } #lobbybrowser .lb-card[hidden] { display: none; } #lobbybrowser .lb-card.is-above { transform: translateY(calc(-100% - 5.2cqw)); } @keyframes card-in { from { opacity: 0; } to { opacity: 1; } } #lobbybrowser .lb-card-head { display: flex; align-items: center; gap: .8cqw; margin-bottom: .6cqw; } #lobbybrowser .lb-card-head strong { display: block; font-size: 1.4cqw; font-weight: normal; } #lobbybrowser .lb-card-head small { color: #b9a98a; font-size: .9cqw; } #lobbybrowser .lb-card-banner { width: 7cqw; height: 2.6cqw; object-fit: cover; border-radius: .25cqw; border: .08cqw solid #8a6a2b; } #lobbybrowser .lb-card-lines { list-style: none; margin: 0 0 .8cqw; padding: 0; display: flex; flex-direction: column; gap: .35cqw; } #lobbybrowser .lb-card-lines li { display: flex; align-items: center; gap: .6cqw; } #lobbybrowser .lb-card-lines img { height: 1.5cqw; width: auto; } #lobbybrowser .lb-card-avatar { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; object-fit: cover; border: .06cqw solid var(--gold); } #lobbybrowser .lb-card-join { height: 2.6cqw; font-size: 1.1cqw; min-width: 8cqw; margin-left: auto; } @media (prefers-reduced-motion: reduce) { #lobbybrowser .lb-card { animation: none; } } /* ============================================================================================================ Waiting room (M16, owner's charcoal handoff). Fixed 1670×941 design-space layer scaled to 60 % of the viewport fit (same as the Village Lobby); every control in canvas pixels on top of the blank charcoal plate. */ #lobby { position: fixed; inset: 0; z-index: 5; background: rgba(4, 6, 14, .22); font-family: var(--serif); color: #f1e3c2; } #lobby { pointer-events: none; } #lobby .wr-space { pointer-events: auto; } /* M49: the dim backdrop no longer swallows clicks meant for the utility bar (Settings, Profile, the Stall) */ #lobby[hidden] { display: none; } #lobby .wr-space { position: absolute; left: 0; top: 0; width: 1670px; height: 941px; transform-origin: 0 0; } #lobby .wr-space > * { position: absolute; box-sizing: border-box; margin: 0; } #lobby .wr-bg { left: 0; top: 0; width: 1670px; height: 941px; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 14px 34px rgba(0,0,0,.6)); } #lobby .wr-crest { object-fit: contain; } #lobby .wr-title { display: flex; align-items: center; font-size: 50px; font-weight: normal; letter-spacing: .03em; color: #f1dfb6; text-shadow: 0 2px 4px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #lobby .wr-subtitle { display: flex; align-items: center; font-size: 20px; letter-spacing: .32em; text-transform: uppercase; color: #b9a98a; } #lobby .wr-subtitle::before, #lobby .wr-subtitle::after { content: ''; width: 34px; height: 2px; background: linear-gradient(90deg, #b3281f, #d9a441); margin: 0 12px; } #lobby .wr-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; color: #f1dfb6; } #lobby .wr-host .lobby-host { font-size: 13px; letter-spacing: .1em; color: var(--gold); } #lobby .wr-host .lobby-host[hidden] { display: none; } /* art buttons: 3-slice horizontally (labels are HTML) */ #lobby .wr-btn { display: flex; align-items: center; justify-content: center; gap: 12px; color: #f1e3c2; font: 20px var(--serif); cursor: pointer; padding: 0 18px; text-shadow: 0 1px 3px #000; } #lobby .wr-btn img { height: 60%; width: auto; object-fit: contain; } #lobby .wr-btn-compact { white-space: nowrap; border-style: solid; border-width: 0 34px; border-image: url("../../assets/ui/waiting/btn_compact.png") 0 60 0 60 fill / 0 34px stretch; background: none; } #lobby .wr-btn-compact:hover:not(:disabled), #lobby .wr-btn-compact:focus-visible { border-image-source: url("../../assets/ui/waiting/btn_compact_hover.png"); outline: none; color: #fff0c8; } #lobby .wr-btn-medium { border-style: solid; border-width: 0 40px; border-image: url("../../assets/ui/waiting/btn_medium.png") 0 70 0 70 fill / 0 40px stretch; background: none; flex: 1; height: 100%; font-size: 21px; } #lobby .wr-btn-medium:hover:not(:disabled), #lobby .wr-btn-medium:focus-visible { border-image-source: url("../../assets/ui/waiting/btn_medium_hover.png"); outline: none; color: #fff0c8; } #lobby .wr-btn-primary { border-style: solid; border-width: 0 52px; border-image: url("../../assets/ui/waiting/btn_primary.png") 0 95 0 95 fill / 0 52px stretch; background: none; font-size: 30px; letter-spacing: .06em; text-transform: uppercase; color: #fbe6b8; } #lobby .wr-btn-primary:hover:not(:disabled), #lobby .wr-btn-primary:focus-visible { filter: brightness(1.12); outline: none; } #lobby .wr-btn:disabled { border-image-source: url("../../assets/ui/waiting/btn_disabled.png"); color: #8f8570; cursor: default; filter: none; } #lobby .wr-btn:disabled img { opacity: .5; } #lobby .wr-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.9); } #lobby .wr-btn-small { position: static; height: 42px; font-size: 17px; padding: 0 10px; border-width: 0 24px; border-image-width: 0 24px; } #lobby .wr-link { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: #f1dfb6; font: 20px var(--serif); cursor: pointer; padding: 0; text-align: left; } #lobby .wr-link img { height: 22px; } #lobby .wr-link:hover, #lobby .wr-link:focus-visible { color: var(--gold); outline: none; } /* choose your villager */ #lobby .wr-chooser summary { list-style: none; display: flex; align-items: center; gap: 14px; height: 100%; font-size: 24px; cursor: pointer; color: #f1dfb6; } #lobby .wr-chooser summary::-webkit-details-marker { display: none; } #lobby .wr-chooser summary > img:first-child { height: 30px; } #lobby .wr-chooser .lobby-picker-current { color: #fff; } #lobby .wr-chevron { height: 14px; margin-left: 4px; } #lobby .wr-picker-pop { position: absolute; left: 0; top: 46px; width: 760px; padding: 14px; z-index: 3; } #lobby .lobby-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } #lobby .lobby-pick { padding: 6px; border: 1px solid var(--edge-inner); border-radius: 6px; background: rgba(0,0,0,.35); color: #f1e3c2; font: 15px var(--serif); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; } #lobby .lobby-pick img { width: 64px; height: 64px; border-radius: 4px; } #lobby .lobby-pick:hover:not(:disabled) { border-color: var(--gold); } #lobby .lobby-pick.is-mine { border-color: var(--gold); box-shadow: 0 0 8px rgba(224,180,95,.6); } #lobby .lobby-pick.is-taken { opacity: .35; cursor: default; } #lobby .lobby-pick.is-npc img { filter: saturate(.6); } #lobby .wr-picker-pop .lobby-msg { margin: 8px 0 0; color: #ff8c6e; font-size: 15px; } /* headings */ #lobby .wr-h { display: flex; align-items: center; gap: 16px; font-size: 26px; font-weight: normal; letter-spacing: .28em; text-transform: uppercase; color: #f1dfb6; white-space: nowrap; } #lobby .wr-h::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, #d9a441, rgba(217,164,65,.15)); } /* seat rows */ #lobby .wr-seats { list-style: none; padding: 0 4px 0 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } #lobby .wr-seat { display: grid; grid-template-columns: 62px 58px 1fr 200px 150px; align-items: center; gap: 16px; height: 60px; min-height: 60px; padding: 0 10px 0 0; border: 1.5px solid #7d6335; border-radius: 6px; background: rgba(8, 9, 12, .82); font-size: 22px; } #lobby .wr-seat .seat-no { display: grid; place-items: center; width: 62px; height: 100%; border-right: 1.5px solid #7d6335; font-size: 24px; color: #f1dfb6; } #lobby .wr-seat .seat-face { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; border: 1.5px solid #7d6335; } #lobby .wr-seat .seat-face.is-empty { opacity: .25; object-fit: contain; padding: 6px; } #lobby .wr-seat .seat-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; } #lobby .wr-seat .seat-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #lobby .wr-seat .seat-title { font-style: normal; font-size: 12px; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; margin-left: 8px; } #lobby .wr-seat .seat-bg { font-size: 13px; color: #b9a98a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #lobby .wr-seat .seat-bg:empty { display: none; } #lobby .wr-seat .seat-sub { color: #d8c9a6; font-size: 20px; border-left: 1.5px solid #4a3a20; padding-left: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #lobby .wr-seat.is-npc .seat-sub { color: #b9a98a; } #lobby .wr-seat.is-empty .seat-who { color: #8d8470; font-style: italic; } #lobby .wr-seat.is-empty .seat-sub { border: 0; } #lobby .wr-seat .seat-right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; } #lobby .wr-dash { color: #6b5537; } #lobby .wr-hostbadge { display: flex; align-items: center; gap: 8px; color: #e0603c; font-size: 20px; } #lobby .wr-hostbadge img { height: 22px; } #lobby .wr-remove { font-size: 15px; color: #b9a98a; } [data-profile] { cursor: pointer; } /* host settings */ #lobby .wr-settings { display: flex; flex-direction: column; } #lobby .wr-settings[hidden] { display: none; } #lobby .wr-setting { display: grid; grid-template-columns: 1fr 176px 76px; align-items: center; gap: 18px; padding: 10px 0; border-bottom: 1.5px solid #4a3a20; } #lobby .wr-setting-text strong { display: block; font-size: 22px; font-weight: normal; color: #f1dfb6; } #lobby .wr-setting-text small { font-size: 16px; color: #d8c9a6; } #lobby .wr-setting-text em { display: block; font-size: 15px; color: #b9a98a; } #lobby .wr-stepper { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; height: 44px; border: 1.5px solid #7d6335; border-radius: 6px; background: #0c0e12; overflow: hidden; } #lobby .wr-stepper input { width: 100%; height: 100%; margin: 0; padding: 0; text-align: center; font: 24px var(--serif); color: #f1e3c2; background: transparent; border: 0; border-left: 1.5px solid #4a3a20; border-right: 1.5px solid #4a3a20; outline: none; -moz-appearance: textfield; } #lobby .wr-stepper input::-webkit-outer-spin-button, #lobby .wr-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #lobby .wr-stepper input:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); } #lobby .wr-step { background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; height: 100%; } #lobby .wr-step img { width: 18px; height: 18px; object-fit: contain; } #lobby .wr-step:hover:not(:disabled) { background: rgba(224,180,95,.12); } #lobby .wr-minmax { font-size: 15px; color: #b9a98a; line-height: 1.3; } #lobby .wr-setting-lock { grid-template-columns: 1fr auto; border-bottom: 0; } #lobby .wr-toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; font-size: 20px; color: #f1dfb6; } #lobby .wr-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; } #lobby .wr-toggle-img { height: 40px; } #lobby .wr-toggle input:focus-visible + .wr-toggle-img { outline: 2px solid var(--gold); border-radius: 20px; } #lobby:not(.is-host) .wr-settings, #lobby:not(.is-host) .wr-buttons { opacity: .55; pointer-events: none; } #lobby .wr-buttons { display: flex; gap: 18px; } #lobby .wr-hint { display: flex; align-items: center; justify-content: center; font-size: 17px; font-style: italic; color: #b9a98a; text-align: center; } #lobby .wr-invitemsg { left: 905px; top: 150px; width: 680px; font-size: 14px; color: var(--gold); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #lobby .wr-invitemsg:empty { display: none; } #lobby .wr-online { list-style: none; margin: 0; padding: 12px; overflow-y: auto; z-index: 3; display: flex; flex-direction: column; gap: 8px; } #lobby .wr-online[hidden] { display: none; } #lobby .wr-online li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; font-size: 18px; } /* Waiting room extras (M16b): chat, ready check, away, toasts, dice, holder tags, fill presets, drag, animations, night-fall */ #lobby .wr-chat { display: flex; flex-direction: column; border: 1.5px solid #7d6335; border-radius: 6px; background: rgba(8, 9, 12, .82); padding: 8px 12px 10px; gap: 6px; } #lobby .wr-chat-head { font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: #f1dfb6; } #lobby .wr-chat-hint { font-size: 13px; letter-spacing: .04em; text-transform: none; color: #b9a98a; margin-left: 10px; } #lobby .wr-chat-log { list-style: none; margin: 0; padding: 0 4px 0 0; flex: 1; overflow-y: auto; font-size: 19px; line-height: 1.35; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } #lobby .wr-chat-log b { color: var(--gold); font-weight: normal; margin-right: 6px; } #lobby .wr-chat-log li { padding: 2px 0; border-bottom: 1px solid rgba(74, 58, 32, .5); } #lobby .wr-chat-form { display: flex; gap: 10px; align-items: center; } #lobby .wr-chat-input { flex: 1; height: 42px; padding: 0 12px; background: #0c0e12; border: 1.5px solid #7d6335; border-radius: 6px; color: #f1e3c2; font: 19px var(--serif); outline: none; } #lobby .wr-chat-input:focus-visible { box-shadow: 0 0 0 2px var(--gold); } #lobby .wr-chat-input::placeholder { color: #6f7a86; } #lobby .wr-seat.is-away { opacity: .55; } #lobby .wr-readybtn.is-on { color: #dfffe0; filter: drop-shadow(0 0 6px rgba(90, 212, 106, .9)) saturate(1.2) hue-rotate(95deg) brightness(1.15); } /* the button itself lights green */ #lobby .wr-readychip { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #dfffe0; border: 1px solid #5ad46a; border-radius: 4px; padding: 3px 10px; background: rgba(90, 212, 106, .18); box-shadow: 0 0 8px rgba(90, 212, 106, .5); } #lobby .wr-seat.is-glint::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 220, 140, .35) 50%, transparent 70%); transform: translateX(-120%); animation: row-glint 1s ease-out 1; pointer-events: none; } #lobby .wr-seat { position: relative; overflow: hidden; } #lobby .wr-toasts { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 4px; pointer-events: none; } #lobby .wr-toast { font-size: 15px; color: #f1dfb6; background: rgba(8, 9, 12, .9); border: 1px solid #7d6335; border-radius: 4px; padding: 3px 10px; animation: toast-in .25s ease-out both; } #lobby .wr-toast.is-gone { opacity: 0; transition: opacity .4s; } @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } #lobby .wr-dice { justify-content: center; font-size: 24px; color: #b9a98a; } #lobby .wr-dice:hover { color: var(--gold); transform: rotate(-12deg); } #lobby .wr-veil { left: 0; top: 0; width: 1670px; height: 941px; background: rgba(2, 3, 6, .92); z-index: 2; } #lobby .wr-veil[hidden] { display: none; } #lobby .wr-chooser { z-index: 3; } #lobby .wr-picker-pop { width: 900px; padding: 18px; } /* M27: sold villagers show a lock + price; a face another human wears only gets a soft ring (faces may repeat) */ #lobby .lobby-pick.is-locked { opacity: .45; cursor: default; } #lobby .lobby-pick.is-locked img { filter: grayscale(.8) brightness(.7); } #lobby .lobby-pick.is-shared:not(.is-mine) { border-style: dashed; } #lobby .lobby-pick-holder { font-size: 11px; color: #b9a98a; letter-spacing: .04em; text-transform: uppercase; } #lobby .wr-fillwrap { position: relative; flex: 1; display: flex; } #lobby .wr-fillwrap .wr-btn-medium { flex: 1; padding-right: 44px; } #lobby .wr-fillto { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; opacity: 0; cursor: pointer; } #lobby .wr-fillwrap::after { content: '▾'; position: absolute; right: 50px; top: 50%; transform: translateY(-50%); color: #d9a441; font-size: 18px; pointer-events: none; } #lobby.is-host .wr-seat[draggable="true"] { cursor: grab; } #lobby .wr-seat.is-dragging { opacity: .4; } #lobby .wr-seat.is-dropzone { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(224,180,95,.6); } #lobby .wr-crest { animation: crest-breathe 5s ease-in-out infinite alternate; transform-origin: center; } @keyframes crest-breathe { from { filter: drop-shadow(0 0 4px rgba(255, 60, 40, .25)); transform: scale(.985); } to { filter: drop-shadow(0 0 14px rgba(255, 60, 40, .6)); transform: scale(1.015); } } #lobby .wr-gem { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 60, 40, .55), rgba(255, 30, 20, .2) 45%, transparent 70%); mix-blend-mode: screen; pointer-events: none; transform: translate(-50%, -50%); animation: lantern-flicker var(--dur, 3s) ease-in-out infinite alternate; } #lobby.is-starting .wr-space { transition: opacity 1.2s ease-in, filter 1.2s ease-in; opacity: 0; filter: blur(3px); } #nightfall { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 120%, rgba(6, 9, 26, .2), #05071a 70%); animation: nightfall-in .9s ease-out both; pointer-events: none; } #nightfall[hidden] { display: none; } #nightfall.is-out { animation: nightfall-out .7s ease-in both; } #nightfall img { width: min(22vw, 240px); filter: drop-shadow(0 0 40px rgba(170, 190, 255, .8)); animation: moon-rise 1.6s ease-out both; } #nightfall .nightfall-text { position: absolute; bottom: 18%; left: 0; right: 0; text-align: center; font: 26px var(--serif); letter-spacing: .12em; color: #cfd6e6; text-shadow: 0 2px 6px #000; animation: nightfall-in 1.2s .3s ease-out both; } @keyframes nightfall-in { from { opacity: 0; } to { opacity: 1; } } @keyframes nightfall-out { to { opacity: 0; } } @keyframes moon-rise { from { transform: translateY(60px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { #lobby .wr-crest, #lobby .wr-gem, #lobby .wr-seat.is-glint::after, #nightfall, #nightfall img, #nightfall .nightfall-text { animation: none; } #lobby.is-starting .wr-space { transition: none; } } /* ============================================================================================================ Profile screen (M17, owner's Option B charcoal handoff). A fixed 1670×942 design-space layer (.pf-space) scaled by JS to 60 % of the viewport fit — the same technique as the Village Lobby and the waiting room. Buttons and fields are 3-slice border-images cut from the handoff sheets (client/assets/ui/profile/); long rules are CSS gradients. */ #profile { position: fixed; inset: 0; z-index: 6; background: rgba(4, 6, 14, .32); font-family: var(--serif); color: #f1e3c2; } #profile[hidden] { display: none; } #profile .pf-space { position: absolute; left: 0; top: 0; width: 1670px; height: 942px; transform-origin: 0 0; } #profile .pf-space > *, #profile .pf-pane > * { position: absolute; box-sizing: border-box; margin: 0; } #profile .pf-pane { position: static; } #profile .pf-pane[hidden] { display: none; } #profile .pf-bg { left: 0; top: 0; width: 1670px; height: 942px; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 14px 34px rgba(0,0,0,.6)); } #profile .pf-crest { object-fit: contain; animation: crest-breathe 5s ease-in-out infinite alternate; transform-origin: center; } #profile .pf-gem { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 60, 40, .55), rgba(255, 30, 20, .2) 45%, transparent 70%); mix-blend-mode: screen; pointer-events: none; transform: translate(-50%, -50%); animation: lantern-flicker var(--dur, 3s) ease-in-out infinite alternate; } #profile .pf-heading.is-long { font-size: 40px; letter-spacing: .03em; } /* M45: long headings (Achievements) clear the tab row */ #profile .pf-heading { display: flex; align-items: center; font-size: 56px; font-weight: normal; letter-spacing: .06em; font-variant: small-caps; color: #f1dfb6; text-shadow: 0 2px 4px #000; } #profile .pf-rule { object-fit: contain; object-position: left center; } #profile .pf-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #7d6335; background: rgba(8, 9, 12, .9); color: #f1dfb6; font: 30px/1 var(--serif); cursor: pointer; } #profile .pf-close:hover, #profile .pf-close:focus-visible { color: #fff; border-color: var(--gold); outline: none; } /* tabs */ #profile .pf-tabs { display: flex; gap: 10px; align-items: stretch; } #profile .pf-tab { position: static; flex: 1; min-width: 0; border-style: solid; border-width: 0 20px; border-image: url("../../assets/ui/profile/btn_tab.png") 0 60 0 60 fill / 0 20px stretch; background: none; color: #f1dfb6; font: 17px var(--serif); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; padding: 0 2px; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: clip; } #profile .pf-tab[aria-selected="true"] { border-image-source: url("../../assets/ui/profile/btn_tab_active.png"); color: #fbe6b8; } /* same geometry, colour only (owner) */ #profile .pf-tab:hover:not([aria-disabled="true"]), #profile .pf-tab:focus-visible { filter: brightness(1.15); outline: none; color: #fff0c8; } #profile .pf-tab[aria-disabled="true"] { color: #8f8570; cursor: default; filter: saturate(.4) brightness(.85); } #profile .pf-tab.is-flash { animation: pf-flash .5s ease-out 1; } @keyframes pf-flash { 30% { filter: brightness(1.5); } } #profile.is-dirty .pf-tab[data-tab="profile"]::after { content: ''; position: absolute; right: -6px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #ffb46a, #e2554a 60%); box-shadow: 0 0 8px rgba(240, 138, 60, .9); } #profile .pf-tab { position: relative; } /* identity strip */ #profile .pf-portrait { display: grid; place-items: center; } #profile .pf-portrait > img { position: absolute; } #profile .pf-portrait-img { width: 79%; height: 79%; object-fit: cover; border-radius: 3px; } #profile .pf-portrait-frame { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } #profile .pf-name { display: flex; align-items: center; font-size: 56px; letter-spacing: .01em; color: var(--gold); text-shadow: 0 2px 6px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s; } #profile .pf-chip-wrap { display: flex; align-items: center; } #profile .pf-chip { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-style: solid; border-width: 0 26px; border-image: url("../../assets/ui/profile/btn_compact.png") 0 60 0 60 fill / 0 26px stretch; color: var(--gold); font-size: 24px; letter-spacing: .02em; white-space: nowrap; } #profile .pf-chip[hidden] { display: none; } #profile .pf-since { display: flex; align-items: center; font-size: 24px; color: #d8c9a6; } #profile .pf-strip { background: linear-gradient(180deg, transparent, #b3281f 30%, #d9a441 70%, transparent); } #profile .pf-link { display: flex; align-items: center; gap: 12px; background: none; border: 0; color: #f1dfb6; font: 24px var(--serif); cursor: pointer; padding: 0; text-align: left; white-space: nowrap; } #profile .pf-link img { height: 30px; object-fit: contain; } #profile .pf-link:hover:not(:disabled), #profile .pf-link:focus-visible { color: var(--gold); outline: none; } #profile .pf-link:disabled { color: #8f8570; cursor: default; } #profile .pf-signout { justify-content: center; } /* headings and text */ #profile .pf-h { display: flex; align-items: center; gap: 16px; font-size: 30px; font-weight: normal; letter-spacing: .22em; text-transform: uppercase; color: #f1dfb6; white-space: nowrap; } #profile .pf-h::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, #d9a441, rgba(217,164,65,.15)); } #profile .pf-h-icon { height: 34px; } #profile .pf-sub { display: flex; align-items: center; gap: 14px; font-size: 24px; font-weight: normal; color: #f1dfb6; white-space: nowrap; } #profile .pf-sub::after { content: ''; flex: 1; height: 1.5px; background: linear-gradient(90deg, #d9a441, rgba(217,164,65,.12)); } #profile .pf-help { display: flex; align-items: center; font-size: 24px; color: #d8c9a6; } #profile .pf-tiny { display: flex; align-items: flex-end; justify-content: center; font-size: 16px; color: #b9a98a; } #profile .pf-dim { color: #b9a98a; } /* story */ #profile .pf-story { resize: none; padding: 22px 26px; border-style: solid; border-width: 22px 34px; border-image: url("../../assets/ui/profile/field_textarea.png") 40 60 40 60 fill / 22px 34px stretch; background: none; color: #f1e3c2; font: 24px/1.4 var(--serif); outline: none; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } #profile .pf-story::placeholder { color: #8f8570; font-style: italic; } #profile .pf-story:focus-visible { filter: drop-shadow(0 0 6px rgba(224,180,95,.5)); } #profile .pf-count { display: flex; align-items: center; justify-content: flex-end; font-size: 20px; color: #d8c9a6; pointer-events: none; } #profile .pf-count.is-warn { color: #f08a3c; } #profile .pf-count.is-full { color: #e2554a; } #profile .pf-msg { display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--gold); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #profile .pf-msg.is-error { color: #ff8c6e; } /* buttons */ #profile .pf-btn { display: flex; align-items: center; justify-content: center; gap: 12px; color: #f1e3c2; font: 24px var(--serif); cursor: pointer; padding: 0 18px; text-shadow: 0 1px 3px #000; background: none; white-space: nowrap; } #profile .pf-btn-primary { border-style: solid; border-width: 0 70px; border-image: url("../../assets/ui/profile/btn_primary.png") 0 150 0 150 fill / 0 70px stretch; font-size: 30px; letter-spacing: .04em; color: #fbe6b8; } #profile .pf-btn-primary:hover:not(:disabled), #profile .pf-btn-primary:focus-visible { filter: brightness(1.14); outline: none; } #profile .pf-btn-primary:disabled { filter: saturate(.35) brightness(.7); color: #b8a78a; cursor: default; } #profile .pf-btn-primary.is-saved { filter: hue-rotate(95deg) saturate(1.1) brightness(1.2); } #profile .pf-btn-primary-small { position: static; height: 56px; font-size: 24px; border-width: 0 48px; border-image-width: 0 48px; } #profile .pf-btn-compact { border-style: solid; border-width: 0 26px; border-image: url("../../assets/ui/profile/btn_compact.png") 0 60 0 60 fill / 0 26px stretch; font-size: 22px; } #profile .pf-btn-compact:hover:not(:disabled), #profile .pf-btn-compact:focus-visible { filter: brightness(1.2); outline: none; color: #fff0c8; } #profile .pf-btn:active:not(:disabled) { transform: translateY(1px); } #profile .pf-square { display: grid; place-items: center; border-style: solid; border-width: 10px; border-image: url("../../assets/ui/profile/btn_square.png") 30 fill / 10px stretch; background: none; cursor: pointer; padding: 0; } #profile .pf-square img { height: 26px; object-fit: contain; } #profile .pf-square:hover:not(:disabled), #profile .pf-square:focus-visible { filter: brightness(1.25); outline: none; } #profile .pf-square:disabled { opacity: .4; cursor: default; } /* turntable */ #profile .pf-turntable { display: flex; align-items: center; justify-content: center; gap: 18px; overflow: visible; } #profile .pf-tt { position: relative; display: grid; place-items: center; width: 120px; height: 120px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .55; transition: opacity .2s, transform .2s; filter: saturate(.7); } #profile .pf-tt.is-center { width: 152px; height: 152px; opacity: 1; filter: none; cursor: default; } #profile .pf-tt:hover:not(.is-center), #profile .pf-tt:focus-visible { opacity: .9; outline: none; filter: none; } #profile .pf-tt-img { position: absolute; width: 80%; height: 80%; object-fit: cover; border-radius: 3px; } #profile .pf-tt-frame { position: absolute; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } #profile .pf-turntable.is-slide-l .pf-tt.is-center, #profile .pf-turntable.is-slide-r .pf-tt.is-center { animation: pf-slide .28s ease-out 1; } @keyframes pf-slide { from { transform: scale(.88); filter: brightness(1.4); } } #profile .pf-counter { display: flex; align-items: center; justify-content: center; font-size: 20px; color: #d8c9a6; } /* fields + dropdowns */ #profile .pf-dd { z-index: 2; } #profile .pf-dd.is-open { z-index: 3; } #profile .pf-field { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; padding: 0 10px 0 18px; border-style: solid; border-width: 0 110px 0 40px; border-image: url("../../assets/ui/profile/field_dropdown.png") 0 118 0 42 fill / 0 110px 0 40px stretch; background: none; color: #f1e3c2; font: 24px var(--serif); cursor: pointer; text-align: left; box-sizing: border-box; } #profile .pf-field-dd .pf-field-icon { position: absolute; right: -80px; top: 50%; height: 16px; transform: translateY(-50%); pointer-events: none; } #profile .pf-field-search .pf-field-icon-search { right: -40px; height: 26px; } #profile .pf-field-caret { position: absolute; right: -96px; top: 0; height: 100%; width: 60px; background: none; border: 0; cursor: pointer; padding: 0; } #profile .pf-field-caret img { height: 16px; } #profile .pf-field-search .pf-field-icon { display: none; } #profile .pf-field:hover, #profile .pf-field:focus-within { filter: brightness(1.15); outline: none; } #profile .pf-field-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #profile .pf-field-input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: none; color: #f1e3c2; font: 24px var(--serif); padding: 0; } #profile .pf-field-input::placeholder { color: #8f8570; font-style: italic; } #profile .pf-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #e0b45f; box-shadow: 0 0 6px rgba(0,0,0,.6); flex: none; } #profile .pf-preview { display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--gold); border-style: solid; border-width: 0 26px; border-image: url("../../assets/ui/profile/btn_compact.png") 0 60 0 60 fill / 0 26px stretch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px #000; } #profile .pf-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow-y: auto; margin: 0; padding: 8px; list-style: none; background: rgba(8, 9, 12, .97); border: 1.5px solid #7d6335; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.7); scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } #profile .pf-list[hidden] { display: none; } #profile .pf-opt { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; padding: 8px 12px; border-radius: 4px; font-size: 22px; cursor: pointer; color: #f1e3c2; } #profile .pf-opt small { grid-column: 1 / -1; font-size: 15px; color: #b9a98a; } #profile .pf-opt:hover, #profile .pf-opt:focus-visible { background: rgba(224,180,95,.14); outline: none; } #profile .pf-opt.is-selected { background: rgba(179, 40, 31, .35); box-shadow: inset 0 0 0 1px #b3281f; } #profile .pf-opt.is-locked { opacity: .55; cursor: not-allowed; } #profile .pf-opt.is-empty { color: #b9a98a; font-style: italic; cursor: default; } /* veil + dialogs */ #profile .pf-veil { left: 0; top: 0; width: 1670px; height: 942px; background: rgba(2, 3, 6, .92); z-index: 4; } #profile .pf-veil[hidden] { display: none; } #profile .pf-dialog { z-index: 5; display: flex; flex-direction: column; gap: 18px; padding: 28px 34px; background: rgba(9, 11, 20, .97); border: 2px solid #7d6335; border-radius: 8px; box-shadow: 0 0 0 1px #3a2c1c, 0 20px 60px rgba(0,0,0,.8); } #profile .pf-dialog[hidden] { display: none; } #profile .pf-dialog > * { position: static; } #profile .pf-gridwrap { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } #profile .pf-gridcell { position: relative; display: grid; place-items: center; height: 150px; padding: 0; border: 0; background: none; cursor: pointer; color: #f1e3c2; font: 17px var(--serif); opacity: .8; } #profile .pf-gridcell .pf-tt-img { width: 70%; height: 70%; top: 6%; } #profile .pf-gridcell .pf-tt-frame { top: 0; height: 84%; } #profile .pf-gridcell span { position: absolute; bottom: 0; } #profile .pf-gridcell:hover:not(:disabled), #profile .pf-gridcell:focus-visible { opacity: 1; outline: none; filter: brightness(1.15); } #profile .pf-gridcell.is-selected { opacity: 1; } #profile .pf-gridcell:disabled { opacity: .3; cursor: default; } #profile .pf-dialog-close { align-self: center; height: 48px; width: 220px; } #profile .pf-dialog-row { display: flex; gap: 18px; justify-content: center; } #profile .pf-dialog-row .pf-btn-compact { height: 56px; width: 180px; } #profile .pf-pwlabel { display: flex; flex-direction: column; gap: 8px; font-size: 22px; color: #d8c9a6; } #profile .pf-pwlabel .pf-field { height: 54px; cursor: text; } #profile .pf-frame-compact { border-width: 0 26px; border-image: url("../../assets/ui/profile/btn_compact.png") 0 60 0 60 fill / 0 26px stretch; } #profile .pf-pwdialog.is-shake { animation: pf-shake .4s ease-in-out 1; } @keyframes pf-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } /* Stats tab */ #profile .pf-statsbox { display: flex; flex-direction: column; gap: 14px; padding: 6px 12px 6px 4px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } #profile .pf-statsbox > * { position: static; } #profile .pf-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; } #profile .pf-group .pf-sub { margin-bottom: 6px; } #profile .pf-cells { display: flex; flex-direction: column; gap: 3px; } #profile .pf-cell { display: flex; justify-content: space-between; gap: 12px; font-size: 20px; border-bottom: 1px solid rgba(74, 58, 32, .5); padding: 2px 0; } #profile .pf-k { color: #d8c9a6; } #profile .pf-v { color: #f1e3c2; } #profile .pf-table { width: 100%; border-collapse: collapse; font-size: 20px; } #profile .pf-table th { text-align: left; font-weight: normal; color: #b9a98a; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; padding: 4px 8px; } #profile .pf-table td { padding: 5px 8px; border-top: 1px solid rgba(74, 58, 32, .5); } #profile .pf-table td + td { text-align: right; } #profile .pf-titlesearned { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #profile .pf-titlesearned .pf-sub { width: 100%; } #profile .pf-titlesearned .pf-chip { height: 34px; font-size: 18px; } #profile .pf-recent, #profile .pf-played { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 20px; } #profile .pf-recent li { display: grid; grid-template-columns: 120px 1fr 110px 110px; gap: 10px; padding: 4px 8px; border-left: 3px solid #6b5537; } #profile .pf-recent li.is-won { border-left-color: var(--alive); } #profile .pf-recent li.is-lost { border-left-color: var(--dead); } #profile .pf-played li { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 12px; } #profile .pf-played img { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; } #profile .pf-link-inline { font-size: 18px; letter-spacing: .08em; color: var(--gold); text-transform: none; margin-left: auto; } #profile .pf-soon { display: grid; place-items: center; font-size: 30px; font-style: italic; color: #8f8570; text-align: center; } @media (prefers-reduced-motion: reduce) { #profile .pf-crest, #profile .pf-gem, #profile .pf-tab.is-flash, #profile .pf-turntable .pf-tt, #profile .pf-pwdialog.is-shake { animation: none; } } /* M17: username colors follow the account everywhere its name shows (set inline from the seat's public nameColor) */ .roster-name[style*="color"], .chat .who[style*="color"], .seat-who[style*="color"], .gameover-name[style*="color"], .profilecard-name[style*="color"] { text-shadow: 0 1px 3px #000; } /* M17b: unlockable storied portraits, invites inbox, story glint */ #profile .pf-tt.is-locked, #profile .pf-gridcell.is-locked { filter: saturate(.15) brightness(.55); cursor: not-allowed; } #profile .pf-tt.is-locked .pf-tt-img, #profile .pf-gridcell.is-locked .pf-tt-img { opacity: .8; } #profile .pf-lock { position: absolute; right: 6px; bottom: 6px; font-size: 22px; filter: none; text-shadow: 0 0 6px #000; } #profile .pf-counter.is-locked { color: #f08a3c; font-size: 17px; } #profile .pf-badge { position: absolute; right: -8px; top: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: radial-gradient(circle at 40% 35%, #ffb46a, #e2554a 70%); color: #fff; font: 14px/22px var(--serif); box-shadow: 0 0 8px rgba(240, 138, 60, .9); } #profile .pf-badge[hidden] { display: none; } #profile .pf-inbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } #profile .pf-inbox-list li { display: grid; grid-template-columns: 1fr 120px auto; align-items: center; gap: 14px; padding: 10px 12px; border: 1.5px solid #7d6335; border-radius: 6px; background: rgba(8, 9, 12, .82); font-size: 21px; } #profile .pf-inbox-list li .pf-btn-compact { height: 44px; position: static; font-size: 20px; } #profile .pf-inbox-list li .pf-link { font-size: 17px; color: #b9a98a; } #profile .pf-inbox-text { display: flex; flex-direction: column; } #profile .pf-inbox-text b { font-weight: normal; color: var(--gold); } #profile .pf-inbox-text small { font-size: 14px; color: #b9a98a; } #profile .pf-soon small { display: block; font-size: 18px; font-style: normal; margin-top: 8px; } #profile .pf-story:focus-visible { animation: pf-glint 1.1s ease-out 1; } @keyframes pf-glint { 0% { filter: drop-shadow(0 0 0 rgba(224,180,95,0)); } 30% { filter: drop-shadow(0 0 18px rgba(255,220,140,.75)); } 100% { filter: drop-shadow(0 0 6px rgba(224,180,95,.5)); } } @media (prefers-reduced-motion: reduce) { #profile .pf-story:focus-visible { animation: none; } } /* M17c: Achievements tab */ #profile .pf-h-count { font-size: 18px; letter-spacing: .08em; color: #b9a98a; } #profile .pf-ach { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #profile .pf-ach li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; padding: 6px 10px; border-left: 3px solid #6b5537; background: rgba(8, 9, 12, .5); } #profile .pf-ach li.is-earned { border-left-color: var(--gold); } #profile .pf-ach li.is-locked { opacity: .6; } #profile .pf-ach-mark { display: grid; place-items: center; font-size: 22px; color: var(--gold); } #profile .pf-ach-mark .pf-swatch { width: 26px; height: 26px; display: block; } #profile .pf-ach-face { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; } #profile .pf-ach-text { display: flex; flex-direction: column; line-height: 1.15; } #profile .pf-ach-text b { font-weight: normal; font-size: 21px; color: #f1e3c2; } #profile .pf-ach-text small { font-size: 15px; color: #b9a98a; } #profile .pf-ach-foot { font-size: 15px; font-style: italic; } /* ===== Leaderboard screen (M18) — shares the profile canvas classes (#profile rules are scoped, so #leaderboard repeats what it needs) */ #leaderboard { position: fixed; inset: 0; z-index: 6; background: rgba(4, 6, 14, .32); font-family: var(--serif); color: #f1e3c2; } #leaderboard[hidden] { display: none; } #leaderboard .pf-space { position: absolute; left: 0; top: 0; width: 1670px; height: 942px; transform-origin: 0 0; } #leaderboard .pf-space > * { position: absolute; box-sizing: border-box; margin: 0; } #leaderboard .pf-bg { left: 0; top: 0; width: 1670px; height: 942px; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 14px 34px rgba(0,0,0,.6)); } #leaderboard .pf-gem { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 60, 40, .55), rgba(255, 30, 20, .2) 45%, transparent 70%); mix-blend-mode: screen; pointer-events: none; transform: translate(-50%, -50%); animation: lantern-flicker var(--dur, 3s) ease-in-out infinite alternate; } #leaderboard .lb2-crown { object-fit: contain; filter: drop-shadow(0 0 10px rgba(255, 200, 90, .45)); animation: crest-breathe 5s ease-in-out infinite alternate; } #leaderboard .pf-heading { display: flex; align-items: center; font-size: 56px; font-weight: normal; letter-spacing: .06em; font-variant: small-caps; color: #f1dfb6; text-shadow: 0 2px 4px #000; } #leaderboard .pf-rule { object-fit: contain; object-position: left center; } #leaderboard .pf-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #7d6335; background: rgba(8, 9, 12, .9); color: #f1dfb6; font: 30px/1 var(--serif); cursor: pointer; } #leaderboard .pf-close:hover, #leaderboard .pf-close:focus-visible { color: #fff; border-color: var(--gold); outline: none; } #leaderboard .pf-tabs { display: flex; gap: 8px; align-items: stretch; } #leaderboard .pf-tab { position: relative; flex: 1; min-width: 0; border-style: solid; border-width: 0 18px; border-image: url("../../assets/ui/profile/btn_tab.png") 0 60 0 60 fill / 0 18px stretch; background: none; color: #f1dfb6; font: 16px var(--serif); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; padding: 0 2px; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; } #leaderboard .pf-tab[aria-selected="true"] { border-image-source: url("../../assets/ui/profile/btn_tab_active.png"); color: #fbe6b8; } #leaderboard .pf-tab:hover, #leaderboard .pf-tab:focus-visible { filter: brightness(1.15); outline: none; } #leaderboard .pf-portrait { display: grid; place-items: center; } #leaderboard .pf-portrait > img { position: absolute; } #leaderboard .pf-portrait-img { width: 79%; height: 79%; object-fit: cover; border-radius: 3px; } #leaderboard .pf-portrait-frame { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } #leaderboard .pf-help { display: flex; align-items: center; font-size: 22px; color: #d8c9a6; } #leaderboard .lb2-line { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #leaderboard .lb2-rank { display: flex; align-items: center; font-size: 54px; color: var(--gold); text-shadow: 0 2px 6px #000; } #leaderboard .lb2-name { display: flex; align-items: center; font-size: 48px; color: var(--gold); text-shadow: 0 2px 6px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #leaderboard .pf-chip-wrap { display: flex; align-items: center; } #leaderboard .pf-chip { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 14px; border-style: solid; border-width: 0 26px; border-image: url("../../assets/ui/profile/btn_compact.png") 0 60 0 60 fill / 0 26px stretch; color: var(--gold); font-size: 22px; white-space: nowrap; } #leaderboard .pf-strip { background: linear-gradient(180deg, transparent, #b3281f 30%, #d9a441 70%, transparent); } #leaderboard .pf-tiny { display: flex; align-items: flex-end; justify-content: center; font-size: 16px; color: #b9a98a; } #leaderboard .pf-dd { z-index: 2; } #leaderboard .pf-dd.is-open { z-index: 3; } #leaderboard .pf-field { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 0 8px 0 16px; border-style: solid; border-width: 0 60px 0 32px; border-image: url("../../assets/ui/profile/field_dropdown_s.png") 0 118 0 42 fill / 0 60px 0 32px stretch; background: none; color: #f1e3c2; font: 20px var(--serif); cursor: pointer; text-align: left; box-sizing: border-box; } #leaderboard .pf-field .pf-field-icon { position: absolute; right: -44px; top: 50%; height: 14px; transform: translateY(-50%); pointer-events: none; } #leaderboard .pf-field:hover, #leaderboard .pf-field:focus-visible { filter: brightness(1.15); outline: none; } #leaderboard .pf-field-text { flex: 1; white-space: nowrap; } #leaderboard .pf-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 8px; list-style: none; background: rgba(8, 9, 12, .97); border: 1.5px solid #7d6335; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.7); } #leaderboard .pf-list[hidden] { display: none; } #leaderboard .pf-opt { padding: 8px 12px; border-radius: 4px; font-size: 20px; cursor: pointer; } #leaderboard .pf-opt:hover, #leaderboard .pf-opt:focus-visible { background: rgba(224,180,95,.14); outline: none; } #leaderboard .pf-opt.is-selected { background: rgba(179, 40, 31, .35); box-shadow: inset 0 0 0 1px #b3281f; } #leaderboard .pf-h { display: flex; align-items: center; gap: 16px; font-size: 28px; font-weight: normal; letter-spacing: .22em; text-transform: uppercase; color: #f1dfb6; white-space: nowrap; } #leaderboard .pf-h::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, #d9a441, rgba(217,164,65,.15)); } #leaderboard .pf-sub { display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: normal; color: #f1dfb6; white-space: nowrap; } #leaderboard .pf-sub::after { content: ''; flex: 1; height: 1.5px; background: linear-gradient(90deg, #d9a441, rgba(217,164,65,.12)); } #leaderboard .pf-dim { color: #b9a98a; } #leaderboard .pf-link { background: none; border: 0; color: #d8c9a6; font: 17px var(--serif); cursor: pointer; padding: 0; text-align: left; } #leaderboard .pf-link:hover, #leaderboard .pf-link:focus-visible { color: var(--gold); outline: none; } #leaderboard .lb2-table { list-style: none; margin: 0; padding: 4px 8px 4px 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } #leaderboard .lb2-row { display: grid; grid-template-columns: 50px 40px 220px 1fr 130px; align-items: center; gap: 10px; height: 46px; min-height: 46px; padding: 0 10px 0 8px; border-style: solid; border-width: 0 26px; border-image: url("../../assets/ui/profile/btn_compact.png") 0 60 0 60 fill / 0 26px stretch; font-size: 21px; } #leaderboard .lb2-row.is-me { filter: brightness(1.25) drop-shadow(0 0 6px rgba(224,180,95,.6)); } #leaderboard .lb2-rankcell { text-align: center; color: #d8c9a6; } #leaderboard .lb2-row.is-top .lb2-rankcell { color: var(--gold); } #leaderboard .lb2-face { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; } #leaderboard .lb2-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; cursor: pointer; } #leaderboard .lb2-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #leaderboard .lb2-value { text-align: right; font-size: 23px; color: #f1e3c2; } #leaderboard .lb2-value small { font-size: 15px; color: #b9a98a; margin-left: 6px; } #leaderboard .lb2-empty { padding: 24px; text-align: center; font-size: 20px; font-style: italic; color: #b9a98a; } #leaderboard .lb2-empty.is-error { color: #ff8c6e; } #leaderboard .lb2-foot { justify-content: center; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #leaderboard .lb2-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; justify-items: center; gap: 12px; padding: 0 10px; } #leaderboard .lb2-pod { display: flex; flex-direction: column; align-items: center; gap: 4px; } #leaderboard .lb2-pod-frame { position: relative; display: grid; place-items: center; width: 140px; height: 140px; } #leaderboard .lb2-pod.p0 .lb2-pod-frame { width: 180px; height: 180px; } #leaderboard .lb2-pod-frame img { position: absolute; } #leaderboard .lb2-pod-frame .pf-tt-img { width: 80%; height: 80%; object-fit: cover; border-radius: 3px; } #leaderboard .lb2-pod-frame .pf-tt-frame { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } #leaderboard .lb2-pod-crown { top: -34px; height: 44px; z-index: 1; filter: drop-shadow(0 0 8px rgba(255, 200, 90, .7)); } #leaderboard .lb2-pod.is-empty { opacity: .35; } #leaderboard .lb2-pod-label { font-size: 17px; letter-spacing: .12em; color: var(--gold); } #leaderboard .lb2-pod.p0 .lb2-pod-label { margin-top: 30px; } #leaderboard .lb2-pod-name { font-size: 24px; } #leaderboard .lb2-pod-value { font-size: 17px; color: #d8c9a6; } #leaderboard .lb2-others { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 17px; } #leaderboard .lb2-others li { display: flex; justify-content: space-between; gap: 12px; } #leaderboard .lb2-others [data-profile] { cursor: pointer; } @media (prefers-reduced-motion: reduce) { #leaderboard .lb2-crown, #leaderboard .pf-gem { animation: none; } } /* ===== Mira's Stall (M28) — the Store on the profile canvas (canvas rules repeated from #leaderboard, which are scoped) */ #stall { position: fixed; inset: 0; z-index: 6; background: rgba(4, 6, 14, .32); font-family: var(--serif); color: #f1e3c2; } #stall[hidden] { display: none; } #stall .pf-space { position: absolute; left: 0; top: 0; width: 1670px; height: 942px; transform-origin: 0 0; } #stall .pf-space > * { position: absolute; box-sizing: border-box; margin: 0; } #stall .pf-bg { left: 0; top: 0; width: 1670px; height: 942px; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 14px 34px rgba(0,0,0,.6)); } #stall .pf-gem { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 60, 40, .55), rgba(255, 30, 20, .2) 45%, transparent 70%); mix-blend-mode: screen; pointer-events: none; transform: translate(-50%, -50%); animation: lantern-flicker var(--dur, 3s) ease-in-out infinite alternate; } #stall .pf-heading { display: flex; align-items: center; font-size: 56px; font-weight: normal; letter-spacing: .06em; font-variant: small-caps; color: #f1dfb6; text-shadow: 0 2px 4px #000; } #stall .pf-rule { object-fit: contain; object-position: left center; } #stall .pf-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #7d6335; background: rgba(8, 9, 12, .9); color: #f1dfb6; font: 30px/1 var(--serif); cursor: pointer; } #stall .pf-close:hover, #stall .pf-close:focus-visible { color: #fff; border-color: var(--gold); outline: none; } #stall .pf-tabs { display: flex; gap: 8px; align-items: stretch; } #stall .pf-tab { position: relative; flex: 1; min-width: 0; border-style: solid; border-width: 0 18px; border-image: url("../../assets/ui/profile/btn_tab.png") 0 60 0 60 fill / 0 18px stretch; background: none; color: #f1dfb6; font: 16px var(--serif); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; padding: 0 2px; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; } #stall .pf-tab[aria-selected="true"] { border-image-source: url("../../assets/ui/profile/btn_tab_active.png"); color: #fbe6b8; } #stall .pf-tab:hover, #stall .pf-tab:focus-visible { filter: brightness(1.15); outline: none; } #stall .pf-portrait { display: grid; place-items: center; } #stall .pf-portrait > img { position: absolute; } #stall .pf-portrait-img { width: 79%; height: 79%; object-fit: cover; border-radius: 3px; } #stall .pf-portrait-frame { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } #stall .pf-chip-wrap { display: flex; align-items: center; } #stall .pf-chip { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 14px; border-style: solid; border-width: 0 26px; border-image: url("../../assets/ui/profile/btn_compact.png") 0 60 0 60 fill / 0 26px stretch; color: var(--gold); font-size: 22px; white-space: nowrap; } #stall .pf-strip { background: linear-gradient(180deg, transparent, #b3281f 30%, #d9a441 70%, transparent); } #stall .pf-tiny { display: flex; align-items: flex-end; justify-content: center; font-size: 16px; color: #b9a98a; } #stall .pf-dd { z-index: 2; } #stall .pf-dd.is-open { z-index: 3; } #stall .pf-field { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 0 8px 0 16px; border-style: solid; border-width: 0 60px 0 32px; border-image: url("../../assets/ui/profile/field_dropdown_s.png") 0 118 0 42 fill / 0 60px 0 32px stretch; background: none; color: #f1e3c2; font: 20px var(--serif); cursor: pointer; text-align: left; box-sizing: border-box; } #stall .pf-field .pf-field-icon { position: absolute; right: -44px; top: 50%; height: 14px; transform: translateY(-50%); pointer-events: none; } #stall .pf-field:hover, #stall .pf-field:focus-visible { filter: brightness(1.15); outline: none; } #stall .pf-field-text { flex: 1; white-space: nowrap; } #stall .pf-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 8px; list-style: none; background: rgba(8, 9, 12, .97); border: 1.5px solid #7d6335; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.7); } #stall .pf-list[hidden] { display: none; } #stall .pf-opt { padding: 8px 12px; border-radius: 4px; font-size: 20px; cursor: pointer; } #stall .pf-opt:hover, #stall .pf-opt:focus-visible { background: rgba(224,180,95,.14); outline: none; } #stall .pf-opt.is-selected { background: rgba(179, 40, 31, .35); box-shadow: inset 0 0 0 1px #b3281f; } #stall .pf-h { display: flex; align-items: center; gap: 16px; font-size: 28px; font-weight: normal; letter-spacing: .22em; text-transform: uppercase; color: #f1dfb6; white-space: nowrap; } #stall .pf-h::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, #d9a441, rgba(217,164,65,.15)); } #stall .pf-sub { display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: normal; color: #f1dfb6; white-space: nowrap; } #stall .pf-sub::after { content: ''; flex: 1; height: 1.5px; background: linear-gradient(90deg, #d9a441, rgba(217,164,65,.12)); } #stall .pf-dim { color: #b9a98a; } #stall .pf-link { background: none; border: 0; color: #d8c9a6; font: 17px var(--serif); cursor: pointer; padding: 0; text-align: left; } #stall .pf-link:hover, #stall .pf-link:focus-visible { color: var(--gold); outline: none; } #stall .st-coin { object-fit: contain; filter: drop-shadow(0 0 12px rgba(220, 225, 240, .45)); animation: crest-breathe 5s ease-in-out infinite alternate; } #stall .pf-tab.is-soon { opacity: .55; } #stall .pf-tab.is-soon::after { content: ' ·soon'; font-size: 11px; letter-spacing: .04em; text-transform: none; } #stall .st-who { font-size: 20px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } #stall .st-line { display: flex; align-items: center; font-size: 30px; font-style: italic; line-height: 1.3; color: #f1e3c2; text-shadow: 0 2px 4px #000; } #stall .st-line.is-new { animation: st-say .35s ease-out; } @keyframes st-say { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } #stall .st-purse { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 40px; color: #e9edf5; text-shadow: 0 2px 6px #000; } #stall .st-purse img { width: 44px; height: 44px; } #stall .st-purse.is-spent { animation: st-spent .6s ease-out; } @keyframes st-spent { 0% { transform: scale(1.18); color: var(--gold); } 100% { transform: none; } } #stall .st-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid #7d6335; border-radius: 6px; background: rgba(8, 9, 12, .85); } #stall .st-search img { width: 22px; height: 22px; opacity: .8; } #stall .st-search input { flex: 1; min-width: 0; background: none; border: 0; color: #f1e3c2; font: 20px var(--serif); outline: none; } #stall .st-search:focus-within { border-color: var(--gold); } #stall .st-select { padding: 0 12px; border: 1.5px solid #7d6335; border-radius: 6px; background: rgba(8, 9, 12, .9); color: #f1e3c2; font: 18px var(--serif); cursor: pointer; } #stall .st-select:focus-visible { border-color: var(--gold); outline: none; } #stall .st-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 176px; gap: 12px; align-content: start; overflow-y: auto; padding: 2px 8px 2px 2px; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } #stall .st-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; padding: 10px 6px 8px; border: 1.5px solid #5d4a2a; border-radius: 6px; background: rgba(0, 0, 0, .4); color: #f1e3c2; font: 18px var(--serif); cursor: pointer; } #stall .st-tile:hover, #stall .st-tile:focus-visible { border-color: var(--gold); outline: none; } #stall .st-tile.is-selected { border-color: #b3281f; box-shadow: 0 0 0 1.5px #d9a441, 0 0 14px rgba(224,180,95,.45); } #stall .st-tile-art { display: grid; place-items: center; width: 100%; height: 104px; } #stall .st-tile-art img { max-width: 100%; max-height: 100%; object-fit: contain; } #stall .st-tile-art .st-banner { width: 100%; height: 88px; object-fit: cover; border-radius: 4px; } /* name + price side by side on a small opaque dark plate (owner): the hover-card look, so they read over any portrait */ #stall .st-tile-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; padding: 4px 9px; background: rgba(9, 11, 20, .96); border: 1px solid var(--edge); border-radius: 5px; box-shadow: inset 0 0 0 1px #0a0c14, 0 2px 6px rgba(0,0,0,.55); } #stall .st-tile-name { min-width: 0; font-size: 18px; color: #f1e3c2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; } #stall .st-tile-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 17px; color: #e9edf5; white-space: nowrap; } #stall .st-tile-tag img { width: 18px; height: 18px; } #stall .st-tile.is-owned .st-tile-tag { color: #8fcf8a; letter-spacing: .04em; } #stall .st-tile.is-short .st-tile-tag { color: #b9a98a; } #stall .st-tile.is-needs { opacity: .6; } #stall .st-tile.is-needs .st-tile-tag { color: #d8a070; } #stall .st-empty { grid-column: 1 / -1; padding: 40px 20px; text-align: center; font-size: 22px; font-style: italic; color: #b9a98a; } #stall .st-empty.is-error { color: #ff8c6e; } #stall .st-preview { display: grid; place-items: center; border: 1.5px solid #3d3120; border-radius: 8px; background: radial-gradient(ellipse at 50% 70%, rgba(240, 150, 60, .22), rgba(0,0,0,.35) 65%); overflow: hidden; } #stall .st-spin { height: 88%; image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgba(0,0,0,.7)); } #stall .st-banner-big { width: 92%; max-height: 88%; object-fit: cover; border-radius: 6px; border: 1.5px solid #7d6335; } #stall .st-turn { display: grid; place-items: center; background: none; border: 0; cursor: pointer; z-index: 1; } #stall .st-turn img { height: 44px; } #stall .st-turn:hover img, #stall .st-turn:focus-visible img { filter: brightness(1.3); } #stall .st-turn[hidden] { display: none; } #stall .st-blurb { justify-content: center; text-align: center; font-size: 21px; } #stall .st-price { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 26px; color: #e9edf5; } #stall .st-price img { width: 28px; height: 28px; } #stall .st-short { font-size: 19px; color: #b9a98a; } #stall .st-buy { border-style: solid; border-width: 0 70px; border-image: url("../../assets/ui/profile/btn_primary.png") 0 150 0 150 fill / 0 70px stretch; background: none; color: #fbe6b8; font: 26px var(--serif); letter-spacing: .04em; cursor: pointer; text-shadow: 0 2px 4px #000; } #stall .st-buy:hover:not(:disabled), #stall .st-buy:focus-visible { filter: brightness(1.15); outline: none; } #stall .st-buy:disabled { filter: grayscale(.8) brightness(.6); cursor: default; } #stall .st-confirm { left: 0; top: 0; width: 1670px; height: 942px; display: grid; place-items: center; background: rgba(4, 6, 14, .6); z-index: 5; } #stall .st-confirm[hidden] { display: none; } #stall .st-confirm-box { width: 720px; padding: 34px 40px; border: 2px solid #b08a3e; border-radius: 10px; background: rgba(10, 11, 14, .97); box-shadow: 0 20px 60px rgba(0,0,0,.8); text-align: center; } #stall .st-confirm-box p { margin: 0 0 14px; font-size: 26px; font-style: italic; } #stall .st-confirm-box .st-confirm-sum { font-style: normal; font-size: 21px; color: #d8c9a6; } #stall .st-confirm-actions { display: flex; gap: 20px; justify-content: center; margin-top: 10px; } #stall .st-confirm-actions .st-buy { position: static; width: 300px; height: 64px; } #stall .st-cancel { width: 200px; height: 64px; border: 1.5px solid #7d6335; border-radius: 6px; background: rgba(8, 9, 12, .9); color: #f1dfb6; font: 22px var(--serif); cursor: pointer; } #stall .st-cancel:hover, #stall .st-cancel:focus-visible { border-color: var(--gold); outline: none; } @media (prefers-reduced-motion: reduce) { #stall .st-coin, #stall .pf-gem, #stall .st-line.is-new, #stall .st-purse.is-spent { animation: none; } } /* M18: utility bar — eight icon-only buttons with hover/focus labels (owner) */ #ui .utils { grid-template-columns: repeat(8, 1fr); overflow: visible; } #ui .utils button { position: relative; gap: 0; } #ui .utils button img, #ui .utils button .ut-icon { width: 28px; height: 28px; } #ui .utils button::after { content: attr(data-label); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); padding: 4px 10px; border: 1px solid #7d6335; border-radius: 4px; background: rgba(8, 9, 12, .95); color: #f1dfb6; font: 13px var(--serif); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; } #ui .utils button:hover::after, #ui .utils button:focus-visible::after { opacity: 1; transform: translateX(-50%); } #ui .utils button.is-soon { opacity: .45; cursor: default; } #ui .utils button.is-soon::after { content: attr(data-label) " · coming soon"; } #ui .utils .ut-icon-logout { width: 28px; height: 28px; } /* ===== M19: the opening minute — dealing beat, card dealt from the deck, gathering banner, ready seals ===== */ #dealing { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; background: rgba(3, 5, 12, .72); font-family: var(--serif); animation: nightfall-in .25s ease-out both; } #dealing[hidden] { display: none; } #dealing.is-out { animation: nightfall-out .35s ease-in both; } #dealing .dealing-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 46px 22px; background: rgba(9, 11, 20, .96); border: 2px solid #7d6335; border-radius: 8px; box-shadow: 0 0 0 1px #3a2c1c, 0 20px 60px rgba(0,0,0,.8), inset 0 0 40px rgba(240, 138, 60, .08); } #dealing .dealing-table { position: relative; width: 240px; height: 190px; } #dealing .dealing-deck, #dealing .dealing-card { position: absolute; left: 50%; top: 50%; width: 64px; margin: -47px 0 0 -32px; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.6); } #dealing .dealing-deck { z-index: 1; filter: brightness(1.05); box-shadow: 2px 2px 0 #1a1208, 4px 4px 0 #120c05, 0 6px 14px rgba(0,0,0,.7); } #dealing .dealing-card { opacity: 0; animation: deal-out 1.1s cubic-bezier(.2, .7, .3, 1) var(--d) both; } @keyframes deal-out { 0% { opacity: 1; transform: rotate(0) translateY(0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-150px) rotate(calc(-1 * var(--a) + 20deg)) scale(.7); } } #dealing .dealing-text { font-size: 26px; letter-spacing: .14em; text-transform: uppercase; color: #f1dfb6; text-shadow: 0 2px 4px #000; } #dealing .dealing-dots i { font-style: normal; animation: deal-dot 1.2s infinite; } #dealing .dealing-dots i:nth-child(2) { animation-delay: .2s; } #dealing .dealing-dots i:nth-child(3) { animation-delay: .4s; } @keyframes deal-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } } #dealing .dealing-sub { font-size: 16px; font-style: italic; color: #b9a98a; } #reveal.is-dealt .reveal-flip { animation: deal-in .6s cubic-bezier(.2, .8, .3, 1.1) both; } @keyframes deal-in { from { transform: translateY(-26vh) rotate(-14deg) scale(.4); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } } #gather { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 18px; padding: 8px 10px 8px 20px; background: rgba(9, 11, 20, .92); border: 1.5px solid #7d6335; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.6); font-family: var(--serif); color: #f1e3c2; white-space: nowrap; animation: nightfall-in .4s ease-out both; } #gather[hidden] { display: none; } #gather .gather-text { font-size: 17px; font-style: italic; color: #d8c9a6; } #gather .gather-timer { font-size: 17px; } #gather .gather-timer b { font-weight: normal; color: var(--gold); font-variant-numeric: tabular-nums; } #gather .gather-card { padding: 6px 14px; border: 1px solid #7d6335; border-radius: 4px; background: rgba(179, 40, 31, .35); color: #fbe6b8; font: 15px var(--serif); cursor: pointer; } #gather .gather-card:hover, #gather .gather-card:focus-visible { background: rgba(179, 40, 31, .6); outline: none; } /* ready seal: a small red wax disc with a gold rim pressed onto the roster row (says nothing about the role) */ #ui .roster-row { position: relative; } #ui .roster-row.is-sealed::after { content: '✦'; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #e2554a, #8f1d16 70%); box-shadow: 0 0 0 1.5px #d9a441, 0 1px 3px rgba(0,0,0,.8); color: #f6d58f; font-size: 10px; line-height: 1; animation: seal-press .35s cubic-bezier(.3, 1.6, .5, 1) both; pointer-events: none; } @keyframes seal-press { from { transform: scale(1.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #dealing, #dealing .dealing-card, #dealing .dealing-dots i, #reveal.is-dealt .reveal-flip, #gather, #ui .roster-row.is-sealed::after { animation: none; } #dealing .dealing-card { display: none; } } /* ===== M20: the clock in the phase panel — the moon wanes hour by hour; the fire line turns ember red when it will not reach sunrise */ #ui .phase .clock { display: flex; align-items: center; justify-content: center; gap: 10px; } #ui .phase .clock-moon { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(170, 190, 255, .55)); transition: opacity .6s; } #ui .phase .clock-time { font-size: 24px; letter-spacing: .03em; color: #f1e3c2; font-variant-numeric: tabular-nums; } #ui .phase .fire { font-size: 12px; color: var(--ink-dim); margin: 2px 0 6px; letter-spacing: .02em; } #ui .phase .fire.is-short { color: #ff7a4d; text-shadow: 0 0 8px rgba(255, 90, 40, .5); } #ui .phase .fire.is-out { color: #8fa3c7; } #ui .phase .day { font-size: 16px; color: var(--ink-dim); } #night .night-time { font-size: 22px; color: #e8c26a; margin-top: 4px; letter-spacing: .06em; } #night .night-fire { font-size: 16px; color: #cfd6e6; margin-top: 4px; } #night .night-fire.is-short { color: #ff7a4d; } /* the fire died: the village's warm light drains to cold blue before the Werewolf victory screen */ #stage { transition: filter 2.6s ease-in; } body.is-fire-out #stage { filter: saturate(.35) hue-rotate(185deg) brightness(.55) contrast(1.05); } @media (prefers-reduced-motion: reduce) { #stage { transition: none; } } /* ===== M20 screens ===== */ /* Werewolf pack screen: action cards in the middle column, the pack column on the right */ .prowl { gap: .6cqw; } .prowl-head { font-size: 1.75cqw; color: #f1e3c2; text-align: center; padding: .3cqw 0 .5cqw; border-bottom: .1cqw solid rgba(224, 180, 95, .4); } .prowl-cards { display: flex; flex-direction: column; gap: .6cqw; } .prowl-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .25cqw; padding: .8cqw 1cqw; border: .15cqw solid rgba(125, 99, 53, .9); border-radius: .6cqw; background: rgba(16, 18, 24, .92); color: #fbe6b8; font-family: var(--serif); text-align: left; cursor: pointer; } .prowl-card:hover, .prowl-card:focus-visible { border-color: #e0b45f; outline: none; } .prowl-card.is-picked { background: rgba(80, 14, 14, .92); border-color: #e2554a; box-shadow: 0 0 1cqw rgba(226, 85, 74, .35); } .prowl-card.is-sent .prowl-card-title::after { content: ' ✓'; color: #e8c26a; } .prowl-card.is-locked { opacity: .55; cursor: not-allowed; } .prowl-card-title { font-size: 2.1cqw; font-weight: bold; letter-spacing: .02em; } .prowl-card-sub { font-size: 1.15cqw; color: #b9a98a; line-height: 1.3; } .prowl-card-lock { font-size: 1.1cqw; color: #e2554a; letter-spacing: .04em; } .prowl-tag { position: absolute; right: .8cqw; top: .7cqw; font-size: 1.05cqw; color: #e8c26a; text-transform: uppercase; letter-spacing: .05em; } .prowl-targets { list-style: none; margin: .3cqw 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: .3cqw; max-height: 18cqw; overflow-y: auto; } .prowl-target { cursor: pointer; } .prowl-target.is-chosen { background: rgba(110, 22, 18, .9); border-color: #e2554a; } .prowl-note { margin: 0; min-height: 2.6cqw; font-size: 1.2cqw; line-height: 1.35; color: #e8c26a; text-align: center; white-space: normal; } .prowl-pack { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .5cqw; padding: .6cqw .4cqw; color: #f1e3c2; font-family: var(--serif); text-align: center; overflow: hidden; } .prowl-pack-title { font-size: 1.25cqw; letter-spacing: .16em; text-transform: uppercase; color: #e8c26a; } .prowl-mate { display: flex; flex-direction: column; align-items: center; gap: .2cqw; } .prowl-mate img { width: 4.6cqw; height: 4.6cqw; border-radius: .4cqw; border: .15cqw solid #e2554a; object-fit: cover; } .prowl-mate-name { font-size: 1.35cqw; color: #f08a3c; } .prowl-mate-choice { font-size: 1.5cqw; font-weight: bold; color: #fbe6b8; } .prowl-fire { margin-top: auto; font-size: 1.15cqw; color: #d8c9a6; } .prowl-fire b { color: #e8c26a; font-weight: normal; } .prowl-fire.is-short b { color: #ff7a4d; } /* Woodsman: his card beside two choices */ #nightact .wd-panel { position: relative; display: flex; gap: 28px; align-items: center; padding: 24px 28px; max-width: min(820px, 94vw); font-family: var(--serif); color: #f1e3c2; } #nightact .wd-card { width: min(250px, 30vw); aspect-ratio: 880 / 1300; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.7); } #nightact .wd-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1; } #nightact .wd-title { margin: 0; font-size: 28px; font-weight: normal; letter-spacing: .1em; text-transform: uppercase; color: #f1dfb6; } #nightact .wd-clock { margin: 0; font-size: 17px; color: #d8c9a6; } #nightact .wd-clock .is-short { color: #ff7a4d; } #nightact .wd-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 18px; border: 1.5px solid #7d6335; border-radius: 6px; background: rgba(16, 18, 24, .92); color: #fbe6b8; font: 22px var(--serif); text-align: left; cursor: pointer; } #nightact .wd-choice small { font-size: 14px; color: #b9a98a; } #nightact .wd-choice:hover:not(:disabled), #nightact .wd-choice:focus-visible { border-color: #e0b45f; outline: none; } #nightact .wd-choice.is-sent { background: rgba(90, 48, 14, .92); border-color: #f08a3c; box-shadow: 0 0 12px rgba(240, 138, 60, .35); } #nightact .wd-choice.is-sent b::after { content: ' ✓'; color: #e8c26a; } #nightact .wd-choice:disabled { opacity: .45; cursor: not-allowed; } #nightact .wd-note { margin: 0; min-height: 22px; font-size: 16px; color: #e8c26a; } #nightact .wd-timer { margin: 0; font-size: 15px; color: #b9a98a; } /* Hourly Announcement lines, Voting Hour rule, victory sentence, labelled blue button */ .morning-lines .is-short { color: #a3261c; } .morning-lines .is-private { color: #3d5a2a; } .vote-rule { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--serif); font-size: 2.05cqw; font-weight: bold; line-height: 1.15; color: #2a1a0c; } .scr-vote_hour .scr-phase { flex-direction: column; gap: .1cqw; } .scr-vote_hour .scr-phase small { font-size: 1.2cqw; color: #b9a98a; } .victory-line { position: absolute; display: flex; align-items: center; justify-content: center; margin: 0; text-align: center; font-family: var(--serif); font-size: 2.6cqw; line-height: 1.3; color: #f6ecd6; text-shadow: 0 .2cqw .6cqw #000, 0 0 1.2cqw #000; } .scr-btn .scr-btn-label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 2.2cqw; color: #f1e3c2; text-shadow: 0 .15cqw .4cqw #000; pointer-events: none; } #nightact .wd-spare { font-size: 15px; color: #b9a98a; } #nightact .wd-spare.is-spare { color: #8fcf8a; } #nightact .wd-spare.is-short { color: #ff7a4d; } .seer-verdict.is-mist { color: #cfd6e6; background: radial-gradient(circle, rgba(150, 165, 190, .45), rgba(90, 105, 135, .2) 55%, transparent 72%); text-shadow: 0 0 .6cqw #000; } /* M22 (owner): art buttons are the art — no box, border or padding from any panel rule; focus glows around the painted shape */ .scr .scr-btn, #gameover .scr-btn { background: none !important; border: 0 !important; border-radius: 0; padding: 0 !important; box-shadow: none; outline: none; } /* ===== M23: Silver, XP, levels, achievements ===== */ .lvl { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; border-radius: .75em; background: radial-gradient(circle at 40% 35%, #3a2c1c, #140f08); border: 1px solid #d9a441; color: #f6d58f; font: bold .72em/1 var(--serif); vertical-align: .1em; box-sizing: border-box; } .coin { color: #d9dce6; font-weight: normal; text-shadow: 0 0 4px rgba(200, 210, 230, .6); } #ui .roster-lvl { margin-left: 6px; font-size: 11px; } #ui .roster-lvl[hidden] { display: none; } .wr-practice { font-weight: normal; font-size: .75em; color: #ff9a6b; letter-spacing: .02em; } .wr-practice[hidden] { display: none; } .lb-practice { color: #ff9a6b; font-weight: normal; } /* score screen: every seat's totals + your harvest */ #gameover .gameover-earn { margin-left: auto; font-size: 14px; color: #f1e3c2; white-space: nowrap; } #gameover .gameover-earn small { color: #b9a98a; } #gameover .gameover-earn.is-practice { color: #b9a98a; font-style: italic; } #gameover .gameover-harvest { margin: 4px 0 10px; } .harvest-head { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #e8c26a; margin-bottom: 4px; } .harvest-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .harvest-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #d8c9a6; opacity: 0; animation: harvest-in .35s ease-out both; animation-delay: calc(var(--k) * .18s + .2s); } @keyframes harvest-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .harvest-total { display: flex; justify-content: space-between; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(217, 164, 65, .4); font-size: 15px; color: #fbe6b8; } .harvest-level { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .harvest-bar, .pf-xpbar, .pf-ach-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; } .harvest-bar i, .pf-xpbar i, .pf-ach-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b3281f, #e8c26a); transition: width .8s ease-out; } .harvest-balance { font-size: 14px; color: #f1e3c2; } .harvest-up { margin: 6px 0 0; color: #8fcf8a; font-size: 14px; } .harvest-ach { margin: 4px 0 0; font-size: 14px; color: #e8c26a; } .harvest-ach span { float: right; } .harvest-practice { margin: 0 0 8px; font-size: 14px; font-style: italic; color: #b9a98a; } @media (prefers-reduced-motion: reduce) { .harvest-lines li { animation: none; opacity: 1; } } /* profile */ #profile .pf-progress { display: flex; flex-direction: column; justify-content: center; gap: 6px; } #profile .pf-prog-row { display: flex; align-items: center; gap: 10px; font-size: 22px; color: #f1e3c2; } #profile .pf-lvl { font-size: 22px; } #profile .pf-prog-silver { margin-left: auto; font-size: 20px; } #profile .pf-xpbar { flex: none; height: 10px; } #profile .pf-prog-xp { font-size: 15px; color: #b9a98a; } #profile .pf-ach-silver { float: right; font-size: 15px; color: #d8c9a6; font-weight: normal; } #profile .pf-ach-bar { display: block; flex: none; margin-top: 4px; height: 6px; } #profile .pf-ach-n { font-size: 13px; } #profile .pf-lb-row .lvl, #leaderboard .lb2-title .lvl { font-size: 11px; } /* ===== M24: the Silver coin art replaces the ◈ glyph; XP bars are solid ember red ===== */ .coin { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.18em; font-size: inherit; color: transparent !important; text-shadow: none !important; overflow: hidden; text-indent: 2em; white-space: nowrap; background: url("../../assets/ui/currency/silver_coin_64.png") center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); } #profile .pf-prog-silver .coin, .harvest-total .coin, .harvest-balance .coin { width: 1.25em; height: 1.25em; vertical-align: -.26em; } .harvest-bar i, .pf-xpbar i, .pf-ach-bar i { background: linear-gradient(180deg, #e2554a, #b3281f 55%, #8f1d16); box-shadow: 0 0 6px rgba(226, 85, 74, .55); } .harvest-bar, .pf-xpbar, .pf-ach-bar { background: rgba(60, 12, 10, .55); box-shadow: inset 0 0 0 1px rgba(179, 40, 31, .45); } /* ===== M24: admin panel (admins only) ===== */ #ui .utils.has-admin { grid-template-columns: repeat(9, 1fr); } #ui .utils button[hidden] { display: none; } .wr-practice.is-test, .lb-practice.is-test { color: #8fc6f0; } .adm-overlay { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(3, 5, 12, .7); font-family: var(--serif); } .adm-overlay[hidden] { display: none; } .adm-panel { position: relative; display: flex; flex-direction: column; width: min(1100px, 94vw); height: min(760px, 90vh); padding: 18px 22px; color: #f1e3c2; box-sizing: border-box; } .adm-head { display: flex; align-items: center; gap: 12px; } .adm-head img { width: 42px; height: 42px; } .adm-head h2 { margin: 0; font-size: 26px; font-weight: normal; letter-spacing: .14em; text-transform: uppercase; color: #f1dfb6; } .adm-who { margin-left: auto; color: #b9a98a; font-size: 15px; } .adm-close { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #7d6335; background: rgba(8, 9, 12, .9); color: #f1dfb6; font-size: 22px; cursor: pointer; } .adm-tabs { display: flex; gap: 6px; margin: 12px 0 6px; border-bottom: 1px solid rgba(217, 164, 65, .35); } .adm-tabs button { padding: 7px 14px; border: 1px solid #5a4528; border-bottom: 0; border-radius: 6px 6px 0 0; background: rgba(16, 18, 24, .9); color: #d8c9a6; font: 15px var(--serif); cursor: pointer; } .adm-tabs button[aria-selected="true"] { background: rgba(90, 20, 16, .95); border-color: #b3281f; color: #fbe6b8; } .adm-msg { min-height: 20px; margin: 4px 0; font-size: 14px; color: #8fcf8a; } .adm-msg.is-error { color: #ff8c6e; } .adm-body { flex: 1; overflow: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } .adm-card { margin: 0 0 12px; padding: 12px 14px; border: 1px solid #5a4528; border-radius: 6px; background: rgba(10, 11, 16, .85); } .adm-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: normal; color: #e8c26a; letter-spacing: .06em; } .adm-card-head { margin-bottom: 6px; } .adm-dim { color: #b9a98a; font-size: 13px; } .adm-tag { padding: 1px 7px; border-radius: 8px; background: #1e3a55; color: #cfe6ff; font-size: 12px; } .adm-tag.is-you { background: #4a2a10; color: #ffd6a0; } .adm-seats { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; } .adm-seats .is-dead { opacity: .5; text-decoration: line-through; } .adm-role { padding: 0 6px; border-radius: 6px; font-size: 12px; background: #2b3140; } .adm-role.is-werewolf { background: #6a1810; color: #ffd0c8; } .adm-role.is-seer { background: #3b2a6a; } .adm-role.is-doctor { background: #1f4a2a; } .adm-role.is-woodsman { background: #5a3a14; } .adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; } .adm-panel button { padding: 6px 12px; border: 1px solid #7d6335; border-radius: 5px; background: rgba(40, 30, 16, .9); color: #fbe6b8; font: 14px var(--serif); cursor: pointer; } .adm-panel button:hover { border-color: #e0b45f; } .adm-panel button.is-danger { background: rgba(90, 20, 16, .9); border-color: #b3281f; } .adm-panel input, .adm-panel select { padding: 5px 8px; border: 1px solid #5a4528; border-radius: 4px; background: #0c0e14; color: #f1e3c2; font: 14px var(--serif); } .adm-panel label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #d8c9a6; margin-bottom: 6px; } .adm-panel label.adm-check { flex-direction: row; align-items: center; gap: 6px; } .adm-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; } .adm-events { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .adm-events input { width: 70px; } .adm-table { width: 100%; border-collapse: collapse; font-size: 14px; } .adm-table th { text-align: left; font-weight: normal; color: #b9a98a; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; } .adm-table td { padding: 5px 6px; border-top: 1px solid rgba(90, 69, 40, .5); } .adm-actions { display: flex; gap: 6px; justify-content: flex-end; } .adm-out { font-size: 14px; color: #f1e3c2; } /* ===== M25: roster — avatar + name only, wider, the ready seal beside the online dot, a light hover card ===== */ #ui .roster { left: 1462px; width: 199px; top: 232px; } /* M45 owner: up under the timer panel (12 players reached the bar at 495); index.html keeps it 12px below the panel as the panel grows */ #ui .roster-row { grid-template-columns: 24px 1fr auto auto 12px; gap: 7px; position: relative; } #ui .roster-row:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; border-radius: 3px; } #ui .roster-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .roster-votes[hidden] { display: none; } #ui .roster-row.is-sealed::after { content: none; display: none; } #ui .roster-seal { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #e2554a, #8f1d16 70%); box-shadow: 0 0 0 1.5px #d9a441, 0 1px 3px rgba(0,0,0,.8); animation: seal-press .35s cubic-bezier(.3, 1.6, .5, 1) both; } #ui .roster-seal::before { content: '✦'; color: #f6d58f; font-size: 9px; line-height: 1; } #ui .roster-seal[hidden] { display: none; } #ui .roster-card { position: absolute; right: calc(100% + 10px); width: 230px; display: flex; gap: 10px; align-items: center; padding: 9px 11px; background: rgba(9, 11, 20, .96); border: 1px solid var(--edge); border-radius: 7px; box-shadow: inset 0 0 0 1px #0a0c14, 0 6px 18px rgba(0,0,0,.6); pointer-events: none; z-index: 3; } #ui .roster-card[hidden] { display: none; } #ui .roster-card img { width: 46px; height: 46px; border-radius: 5px; object-fit: cover; flex: none; } #ui .roster-card .rc-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } #ui .rc-name { font-weight: normal; font-size: 16px; color: #f1e3c2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ui .rc-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); } #ui .rc-sub { font-size: 13px; color: var(--ink-dim); } #ui .rc-record { font-size: 13px; color: #d8c9a6; } #ui .rc-w { color: #8fcf8a; font-weight: normal; } #ui .rc-l { color: #e2554a; font-weight: normal; } @media (prefers-reduced-motion: reduce) { #ui .roster-seal { animation: none; } } /* ===== The hover-card look (owner, M28b): the roster hover card's dark box is the house style for player info and the end-of-match score card and the Settings box (M29). They live outside #ui, so the #ui .panel style never reached them (they had no box of their own). One rule set, kept last. */ #profilecard .profilecard-box, #gameover .gameover-card, #settings .settings-card { background: rgba(9, 11, 20, .96); border: 1px solid var(--edge); border-radius: 7px; box-shadow: inset 0 0 0 1px #0a0c14, 0 6px 18px rgba(0,0,0,.6); background-image: none; } #profilecard .profilecard-box { padding: 16px 20px; } #gameover .gameover-card { padding: 16px 20px 14px; } #settings .settings-card { padding: 16px 20px 14px; } /* ===== M29: the shared hover card floats over any list (chat lines, waiting-room seats); same look as the roster's */ #hovercard { position: fixed; z-index: 20; width: 230px; display: flex; gap: 10px; align-items: center; padding: 9px 11px; background: rgba(9, 11, 20, .96); border: 1px solid var(--edge); border-radius: 7px; box-shadow: inset 0 0 0 1px #0a0c14, 0 6px 18px rgba(0,0,0,.6); pointer-events: none; font-family: var(--serif); color: var(--ink); } #hovercard[hidden] { display: none; } #hovercard img { width: 46px; height: 46px; border-radius: 5px; object-fit: cover; flex: none; } #hovercard .rc-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } #hovercard .rc-name { font-weight: normal; font-size: 16px; color: #f1e3c2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; } #hovercard .rc-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); } #hovercard .rc-sub { font-size: 13px; color: var(--ink-dim); } #hovercard .rc-record { font-size: 13px; color: #d8c9a6; } #hovercard .rc-w { color: #8fcf8a; font-weight: normal; } #hovercard .rc-l { color: #e2554a; font-weight: normal; } /* M29: chat lines lead with the speaker's face, then the time */ .chat .msg[data-seat], #lobby .wr-chatline { display: flex; align-items: flex-start; gap: 6px; } .chat .msg[data-seat]:hover, #lobby .wr-chatline:hover { background: rgba(224, 180, 95, .07); border-radius: 4px; } .chat .chat-face, #lobby .wr-chatline .chat-face { flex: none; width: 20px; height: 20px; border-radius: 3px; object-fit: cover; margin-top: 1px; } .chat .chat-face.is-none, #lobby .chat-face.is-none { display: inline-block; background: rgba(255,255,255,.06); } .chat .chat-time, #lobby .wr-chatline .chat-time { flex: none; font-size: .78em; color: var(--ink-dim); margin-top: .18em; font-variant-numeric: tabular-nums; } .chat .chat-body, #lobby .wr-chatline .chat-body { min-width: 0; overflow-wrap: anywhere; } #lobby .wr-chatwho { font-weight: bold; } /* ===== M29: pack chat, click-a-name actions, reports */ #ui .chat .tab-pack { color: #ff8c7a; } #ui .chat .tab-pack[hidden] { display: none; } #ui .chat .tab-pack.is-active { color: #ffb3a6; box-shadow: inset 0 -2px 0 #b3281f; } #ui .chat .tab-pack.has-unread::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: #e2554a; box-shadow: 0 0 6px #e2554a; vertical-align: .15em; } #ui .chat.is-pack .log { background: linear-gradient(180deg, rgba(90, 10, 10, .22), rgba(40, 4, 4, .12)); } .chat .chat-face, .chat .who, #lobby .wr-chatline .chat-face, #lobby .wr-chatwho { cursor: pointer; } #chatactions { position: fixed; z-index: 21; min-width: 210px; max-width: 300px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: rgba(9, 11, 20, .96); border: 1px solid var(--edge); border-radius: 7px; box-shadow: inset 0 0 0 1px #0a0c14, 0 6px 18px rgba(0,0,0,.6); font-family: var(--serif); color: var(--ink); } #chatactions[hidden] { display: none; } #chatactions .ca-name { font-weight: normal; font-size: 16px; color: #f1e3c2; margin-bottom: 2px; } #chatactions .ca-btn { text-align: left; padding: 6px 10px; border: 1px solid var(--edge-inner); border-radius: 5px; background: rgba(255,255,255,.03); color: #f1e3c2; font: 14px var(--serif); cursor: pointer; } #chatactions .ca-btn:hover, #chatactions .ca-btn:focus-visible { border-color: var(--gold); outline: none; } #chatactions .ca-btn.is-warn { color: #ff9a86; } #chatactions .ca-btn:disabled { opacity: .5; cursor: default; } #chatactions .ca-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-dim); } #chatactions select, #chatactions textarea { background: rgba(0,0,0,.4); color: #f1e3c2; border: 1px solid var(--edge-inner); border-radius: 4px; font: 14px var(--serif); padding: 4px 6px; resize: vertical; } #chatactions .ca-row { display: flex; gap: 6px; } #chatactions .ca-hint { margin: 0; font-size: 12px; color: var(--ink-dim); } #chatactions .ca-msg { margin: 0; font-size: 13px; color: #8fcf8a; } #chatactions .ca-msg:empty { display: none; } #chatactions .ca-msg.is-error { color: #ff8c6e; } #packnight { position: fixed; left: 16px; bottom: 16px; z-index: 7; width: min(340px, 42vw); display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: rgba(9, 11, 20, .96); border: 1px solid #7a2a22; border-radius: 7px; box-shadow: inset 0 0 0 1px #0a0c14, 0 6px 18px rgba(0,0,0,.6), 0 0 18px rgba(179, 40, 31, .25); font-family: var(--serif); color: var(--ink); } #packnight[hidden] { display: none; } #packnight .packnight-title { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #ff9a86; } #packnight .packnight-title small { margin-left: 6px; letter-spacing: 0; text-transform: none; color: var(--ink-dim); font-size: 12px; } #packnight .packnight-log { max-height: 180px; overflow-y: auto; font-size: 14px; display: flex; flex-direction: column; gap: 3px; } #packnight .msg { display: flex; align-items: flex-start; gap: 6px; } #packnight .chat-face { width: 20px; height: 20px; border-radius: 3px; flex: none; } #packnight .chat-time { font-size: .78em; color: var(--ink-dim); margin-top: .18em; } #packnight .msg.is-system { color: var(--ink-dim); font-style: italic; } #packnight form { display: flex; gap: 6px; } #packnight input { flex: 1; min-width: 0; background: rgba(0,0,0,.45); color: #f1e3c2; border: 1px solid #5a2320; border-radius: 4px; font: 14px var(--serif); padding: 5px 8px; } #packnight button { background: #7a1f18; color: #fbe6b8; border: 1px solid #b3281f; border-radius: 4px; cursor: pointer; padding: 0 10px; } .adm-report.is-resolved { opacity: .65; } .adm-excerpt { list-style: none; margin: 8px 0; padding: 8px 10px; max-height: 240px; overflow-y: auto; background: rgba(0,0,0,.35); border-radius: 5px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; } .adm-excerpt li.is-target { background: rgba(179, 40, 31, .25); border-radius: 3px; } .adm-excerpt li.is-pack b::after { content: ' 🐺'; } .adm-note { margin: 6px 0; font-style: italic; } .adm-tag.is-bad { background: #7a1f18; } /* ===== M30: pets and keepsakes */ #hovercard .rc-companions, #ui .roster-card .rc-companions { display: flex; gap: 6px; align-items: flex-end; margin-top: 3px; } #hovercard .rc-companions img, #ui .roster-card .rc-companions img { width: auto !important; height: 22px !important; object-fit: contain; border-radius: 0; image-rendering: auto; } #lobby .seat-companions { display: inline-flex; gap: 4px; align-items: flex-end; vertical-align: -3px; margin-left: 6px; } #lobby .seat-companions img { height: 20px; width: auto; } #stall .st-tile-art .st-pet { max-height: 96px; } #stall .st-spin.is-pet { height: 62%; } #profile .pf-companions { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; } #profile .pf-h3 { margin: 0; font-weight: normal; font-size: 26px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); } #profile .pf-petgrid, #profile .pf-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } #profile .pf-shelf { grid-template-columns: repeat(4, 1fr); } #profile .pf-pet, #profile .pf-keepsake { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 128px; padding: 8px 4px; border: 1.5px solid #5d4a2a; border-radius: 6px; background: rgba(0,0,0,.4); color: #f1e3c2; font: 17px var(--serif); cursor: pointer; } #profile .pf-pet img, #profile .pf-keepsake img { max-height: 76px; max-width: 90%; object-fit: contain; } #profile .pf-pet-none { font-size: 40px; color: #8a7a5a; line-height: 76px; } #profile .pf-pet small { font-size: 13px; color: #b9a98a; } #profile .pf-pet.is-current, #profile .pf-keepsake.is-current { border-color: #b3281f; box-shadow: 0 0 0 1.5px #d9a441, 0 0 14px rgba(224,180,95,.45); } #profile .pf-pet:hover:not(:disabled), #profile .pf-keepsake:hover:not(:disabled) { border-color: var(--gold); } #profile .pf-pet.is-locked { opacity: .45; cursor: default; } #profile .pf-keepsake.is-locked { cursor: default; } #profile .pf-keepsake.is-locked img { filter: brightness(0) opacity(.55); } #profile .pf-keepsake.is-locked span { font-size: 14px; color: #b9a98a; font-style: italic; } #nightact .prowl-target.is-capped { opacity: .4; cursor: not-allowed; } /* M33: the pack already strikes two players */ /* M34: the Woodsman's painted screen — dark ink on the parchment, like the Doctor's */ .scr-night_select_woodsman .nightact-list { display: flex; flex-direction: column; gap: 14px; padding: 8px 18px; list-style: none; } .scr-night_select_woodsman .wd-clock { font-size: 1.05em; color: #3a2a14; text-align: center; line-height: 1.5; } .scr-night_select_woodsman .wd-clock b { color: #2a1c0c; } .scr-night_select_woodsman .wd-clock .is-short { color: #8a1a10; } .scr-night_select_woodsman .wd-spare { display: block; font-style: italic; font-size: .9em; color: #5a4526; } .scr-night_select_woodsman .wd-spare.is-short { color: #8a1a10; } .scr-night_select_woodsman .wd-spare.is-spare { color: #2f5a22; } .scr-night_select_woodsman .wd-choice { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 2px solid rgba(122, 90, 42, .55); border-radius: 8px; background: rgba(255, 244, 214, .55); color: #2a1c0c; cursor: pointer; } .scr-night_select_woodsman .wd-choice b { font-size: 1.25em; font-weight: normal; } .scr-night_select_woodsman .wd-choice small { font-size: .88em; color: #5a4526; } .scr-night_select_woodsman .wd-choice:hover, .scr-night_select_woodsman .wd-choice:focus-visible { border-color: #b8862b; outline: none; } .scr-night_select_woodsman .wd-choice.is-chosen { border-color: #8a1a10; box-shadow: 0 0 0 2px rgba(224, 180, 95, .8); background: rgba(255, 236, 190, .8); } .scr-night_select_woodsman .wd-choice.is-sent::after { content: '✓ sent'; align-self: flex-end; font-size: .8em; color: #2f5a22; } .scr-night_select_woodsman .wd-choice.is-off { opacity: .45; cursor: default; } .scr-night_select_woodsman .scr-strip { color: #4a3820; } .scr-night_select_woodsman .scr-strip [data-timer] { color: #2a1c0c; } /* ============ M35a — Welcome & News (owner goal image, 2026-09-26). Fixed 828×1483 layer (frame pixels) scaled by a transform like every full-screen panel; section frames are CSS 9-slices of the sheet's panel so corners stay crisp; the modal is the same parchment. Every word is HTML. */ #news { position: fixed; inset: 0; z-index: 0; pointer-events: none; font-family: var(--serif); } /* before #ui in DOM: the utility bar stays on top */ #news[hidden] { display: none; } #news .nw-slide { position: absolute; inset: 0; } #news .nw-slide.is-gliding { transition: transform .55s cubic-bezier(.4, 0, .2, 1); } #news.is-in .nw-slide { animation: nw-in .75s .12s cubic-bezier(.2, .75, .25, 1) both; } /* follows the login panel's slide-out */ @keyframes nw-in { from { translate: -70vw 0; opacity: 0; } 60% { opacity: 1; } to { translate: 0 0; opacity: 1; } } #news .nw-space { position: absolute; left: 0; top: 0; width: 828px; height: 1483px; transform-origin: 0 0; pointer-events: auto; color: #2b1d0f; } #news .nw-space > * { position: absolute; box-sizing: border-box; } #news .nw-frame { left: 0; top: 0; width: 828px; height: 1483px; user-select: none; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 16px 34px rgba(0,0,0,.6)); } /* section = the sheet's panel as a 9-slice under its content; the hero art is inset to clear the gold edge */ #news .nw-sec, #news-modal .nwm-card { isolation: isolate; } #news .nw-sec { display: flex; flex-direction: column; padding: 13px 26px 8px; } #news .nw-sec[hidden], #news .nw-patch[hidden] { display: none; } #news .nw-sec::before { content: ''; position: absolute; inset: 0; border: 30px solid transparent; border-image: var(--panel) 80 fill / 30px stretch; pointer-events: none; z-index: -2; } #news .nw-h, #news-modal .nwm-h { display: flex; align-items: center; gap: 12px; margin: 0; font: normal 32px/1.15 var(--serif); font-variant: small-caps; letter-spacing: .015em; color: #1d140b; text-shadow: 0 1px 0 rgba(255,240,205,.5); } #news .nw-h-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } #news .nw-rule, #news-modal .nw-rule { flex: 1 1 60px; min-width: 60px; height: 22px; padding: 0 12px; background: var(--gem) center / auto 100% no-repeat, var(--cap-l) left center / auto 100% no-repeat, var(--cap-r) right center / auto 100% no-repeat, var(--line) center / auto 100% repeat-x; background-clip: border-box, border-box, border-box, content-box; } /* Welcome */ #news .nw-hero { position: absolute; inset: 11px 14px; background: right center / auto 100% no-repeat; border-radius: 0 6px 6px 0; z-index: -1; } #news .nw-welcome .nw-h { position: relative; } #news .nw-welcome .nw-rule { flex: 0 1 150px; } #news .nw-hit { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } #news .nw-welcome-body { margin-top: 10px; width: 45%; font-size: 21px; line-height: 1.3; color: #2d2010; position: relative; } #news .nw-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } #news .nw-welcome-body:hover, #news .nw-welcome-body:focus-visible { color: #6e1a0f; outline: none; } /* Latest News */ #news .nw-all { margin-left: 8px; background: none; border: 0; padding: 0; font: 17px var(--serif); color: #8a1f14; cursor: pointer; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(138,31,20,.45); text-underline-offset: 3px; font-variant: normal; } #news .nw-all:hover, #news .nw-all:focus-visible { color: #b0281a; outline: none; } #news .nw-rows, #news-modal .nwm-list { list-style: none; margin: 4px 0 0; padding: 0; } #news .nw-rows > li + li, #news-modal .nwm-list > li + li { border-top: 1px solid rgba(96, 64, 24, .45); position: relative; } #news .nw-rows > li + li::before, #news .nw-rows > li + li::after { content: ''; position: absolute; top: -3.5px; width: 6px; height: 6px; background: #7b5a2c; transform: rotate(45deg); } #news .nw-rows > li + li::before { left: -3px; } #news .nw-rows > li + li::after { right: -3px; } #news .nw-row, #news-modal .nw-row { display: grid; grid-template-columns: 97px 1fr; gap: 18px; width: 100%; align-items: start; padding: 7px 2px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } #news .nw-thumb, #news-modal .nw-thumb { display: block; width: 97px; height: 80px; } #news .nw-thumb img, #news-modal .nw-thumb img, #news .nw-icon img, #news-modal .nw-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } #news .is-plain, #news-modal .is-plain { box-sizing: border-box; background: radial-gradient(circle at 50% 40%, #2a3350, #0d1220 75%); border: 3px solid #b98a37; border-radius: 4px; box-shadow: inset 0 0 0 1px #3a2a12, 0 1px 2px rgba(0,0,0,.4); } #news .is-plain img, #news-modal .is-plain img { object-fit: contain; padding: 4px; box-sizing: border-box; } #news .nw-row-main, #news-modal .nw-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #news .nw-row-top, #news-modal .nw-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } #news .nw-row-title, #news-modal .nw-row-title { font-size: 21px; line-height: 1.2; color: #1d140b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #news time, #news-modal time { font-size: 17px; color: #6b5a45; white-space: nowrap; flex: none; } #news .nw-row-sum, #news-modal .nw-row-sum { font-size: 17px; line-height: 1.3; color: #3b2c1a; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } #news .nw-row:hover .nw-row-title, #news .nw-row:focus-visible .nw-row-title, #news-modal .nw-row:hover .nw-row-title, #news-modal .nw-row:focus-visible .nw-row-title { color: #8a1f14; } #news .nw-row:focus-visible, #news .nw-hl-item:focus-visible, #news-modal .nw-row:focus-visible { outline: 2px solid #b98a37; outline-offset: 2px; border-radius: 4px; } #news .nw-empty, #news-modal .nw-empty { padding: 18px 4px; font-style: italic; color: #6b5a45; font-size: 18px; } /* Tonight's Highlights: first column fills top to bottom, like the goal */ #news .nw-hl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1.08fr 1fr; grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 10px 16px; } #news .nw-hl-item { display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: start; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } #news .nw-icon, #news-modal .nw-icon { display: block; width: 78px; height: 74px; flex: none; } #news .nw-hl-item b { display: block; font-size: 18.5px; line-height: 1.2; color: #1d140b; } #news .nw-hl-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15.5px; line-height: 1.3; color: #4a3822; margin-top: 3px; } #news .nw-hl-item:hover b { color: #8a1f14; } /* Quick Links */ #news .nw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin-top: 8px; } #news .nw-link { height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 16px 0 22px; border: 0; background: none; position: relative; isolation: isolate; font: 19px var(--serif); color: #f1e3c2; text-align: left; cursor: pointer; } /* M45 owner: the owner's painted Quick Links button drawn WHOLE (tools/cut_quicklink_button.py) — the old 9-slice showed seam lines at the panel's fractional scale. Hover brightens with a gold glow; pressing sinks it 2px, darker, the label moving with it. */ #news .nw-link::before { content: ''; position: absolute; inset: 0; background: var(--qbtn) center / 100% 100% no-repeat; z-index: -1; transition: filter .12s, transform .06s; } #news .nw-link span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #news .nw-link:hover::before, #news .nw-link:focus-visible::before { filter: brightness(1.3) saturate(1.1) drop-shadow(0 0 6px rgba(240, 196, 106, .55)); } #news .nw-link { transition: transform .06s; } #news .nw-link:active { transform: translateY(2px); } #news .nw-link:active::before { filter: brightness(.72) drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } /* follows the painted shape — no box */ #news .nw-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; } #news .nw-link:hover, #news .nw-link:focus-visible { color: #ffe7b0; outline: none; } #news .nw-chev { font-style: normal; font-size: 30px; line-height: 1; color: var(--gold); } #news .nw-glyph { flex: none; width: 28px; height: 28px; background: #e2c186; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } #news .nw-glyph.is-group { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='3.2'/%3E%3Ccircle cx='5.5' cy='9' r='2.5'/%3E%3Ccircle cx='18.5' cy='9' r='2.5'/%3E%3Cpath d='M6.5 20c0-3.6 2.5-6 5.5-6s5.5 2.4 5.5 6z'/%3E%3Cpath d='M1 19c0-2.8 1.8-4.6 4.2-4.6 1 0 1.8.3 2.5.8C6.3 16.4 5.6 17.8 5.5 19zM23 19c0-2.8-1.8-4.6-4.2-4.6-1 0-1.8.3-2.5.8 1.4 1.2 2.1 2.6 2.2 3.8z'/%3E%3C/svg%3E"); } #news .nw-glyph.is-book { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5c3-1.2 6.5-1.2 9.2.8V20c-2.7-1.6-6.2-1.6-9.2-.4zM22 5c-3-1.2-6.5-1.2-9.2.8V20c2.7-1.6 6.2-1.6 9.2-.4z'/%3E%3C/svg%3E"); } #news .nw-glyph.is-gear { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.3 2h3.4l.5 2.6 1.7.7 2.2-1.5 2.4 2.4-1.5 2.2.7 1.7 2.6.5v3.4l-2.6.5-.7 1.7 1.5 2.2-2.4 2.4-2.2-1.5-1.7.7-.5 2.6h-3.4l-.5-2.6-1.7-.7-2.2 1.5-2.4-2.4 1.5-2.2-.7-1.7L2 13.7v-3.4l2.6-.5.7-1.7-1.5-2.2 2.4-2.4 2.2 1.5 1.7-.7zM12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z'/%3E%3C/svg%3E"); } #news .nw-glyph.is-coin { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.5a9.5 9.5 0 1 1 0 19 9.5 9.5 0 0 1 0-19zm0 3a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13z'/%3E%3Cpath d='M12 8l2.2 4L12 16l-2.2-4z'/%3E%3C/svg%3E"); } #news .nw-glyph.is-crown { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v2.5H3zM2.5 6.5l5 4.5L12 3.5l4.5 7.5 5-4.5-1.8 10H4.3z'/%3E%3C/svg%3E"); } #news .nw-glyph.is-person { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7.5 8-7.5s8 3.1 8 7.5z'/%3E%3C/svg%3E"); } #news .nw-glyph.is-bubble { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3.5h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8l-5 4v-4H4a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); } #news .nw-glyph.is-scroll { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h11a3 3 0 0 1 3 3v1.5h-3.5V18a3 3 0 0 1-3 3H5.5a3 3 0 0 1-3-3v-1.5H6V6a3 3 0 0 1 1-3z'/%3E%3C/svg%3E"); } /* View patch notes: a label over the painted band button */ #news .nw-patch { background: none; border: 0; font: 23px var(--serif); letter-spacing: .08em; text-transform: uppercase; color: #efe2c4; text-shadow: 0 2px 3px #000; cursor: pointer; border-radius: 8px; } #news .nw-patch:hover, #news .nw-patch:focus-visible { color: #ffe0a0; outline: none; background: radial-gradient(ellipse at center, rgba(224, 180, 95, .2), transparent 70%); } /* the ribbon: folds the whole panel off to the left and brings it back */ #news .nw-ribbon { border: 3px solid #d9a441; border-left: 0; border-radius: 0 12px 12px 0; background: linear-gradient(90deg, #5b0c0c, #8f1d1a 60%, #6d1111); box-shadow: 0 4px 12px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.35); color: #f0c46a; font: 40px/1 var(--serif); cursor: pointer; display: grid; place-items: center; z-index: -1; } #news .nw-ribbon:hover, #news .nw-ribbon:focus-visible { background: linear-gradient(90deg, #6d1010, #a82622 60%, #7d1414); outline: none; box-shadow: 0 0 14px rgba(240, 196, 106, .55); } /* Large news text (Settings): bigger letters, fewer preview lines — the modal always has the whole text */ #news.is-large .nw-h { font-size: 38px; } #news.is-large .nw-welcome-body { font-size: 25px; width: 48%; } #news.is-large .nw-clamp { -webkit-line-clamp: 4; } #news.is-large .nw-row-title { font-size: 24px; } #news.is-large time { font-size: 19px; } #news.is-large .nw-row-sum { font-size: 21px; -webkit-line-clamp: 1; } #news.is-large .nw-hl-item b { font-size: 21px; } #news.is-large .nw-hl-text { font-size: 18.5px; -webkit-line-clamp: 1; } #news.is-large .nw-link { font-size: 22px; } #news.is-large .nw-all { font-size: 20px; } /* ---- the parchment modal */ #news-modal { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(4, 6, 14, .55); font-family: var(--serif); } #news-modal[hidden] { display: none; } #news-modal .nwm-card { position: relative; box-sizing: border-box; width: min(720px, 92vw); max-height: min(86vh, 920px); display: flex; flex-direction: column; padding: 30px 20px 26px; color: #2b1d0f; filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); } #news-modal .nwm-card::before { content: ''; position: absolute; inset: 0; border: 40px solid transparent; border-image: var(--panel) 80 fill / 40px stretch; pointer-events: none; z-index: -1; } #news-modal.is-in .nwm-card { animation: nwm-unroll .32s cubic-bezier(.2, .8, .3, 1) both; transform-origin: 50% 0; } @keyframes nwm-unroll { from { transform: scaleY(.82); opacity: 0; } to { transform: none; opacity: 1; } } #news-modal .nwm-scroll { overflow-y: auto; padding: 6px 16px 8px; scrollbar-width: thin; scrollbar-color: #9b7a45 transparent; } #news-modal .nwm-close { position: absolute; top: -14px; right: -14px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #d9a441; background: #0e1420; color: #f0c46a; font: 26px/1 var(--serif); cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.6); } #news-modal .nwm-close:hover, #news-modal .nwm-close:focus-visible { background: #6d1111; outline: none; } #news-modal .nwm-h { font-size: 30px; } #news-modal .nwm-rule { display: block; margin: 8px 0 12px; width: 100%; box-sizing: border-box; } #news-modal .nwm-head { display: flex; gap: 16px; align-items: center; } #news-modal .nwm-head time { display: block; margin-top: 2px; } #news-modal .nwm-banner { height: 150px; background: right center / cover no-repeat; border-radius: 6px; margin-bottom: 14px; box-shadow: inset 0 0 0 2px rgba(120, 80, 20, .5); } #news-modal .nwm-body { font-size: 18px; line-height: 1.55; color: #2d2010; } #news-modal .nwm-body p { margin: 0 0 .75em; } #news-modal .nwm-body ul { margin: 0 0 .75em; padding-left: 1.3em; } #news-modal .nwm-body li { margin: .2em 0; } #news-modal .nwm-body a { color: #8a1f14; } #news-modal .nwm-body b { color: #1d140b; } #news-modal .nwm-note + .nwm-note { border-top: 1px solid rgba(96, 64, 24, .4); padding-top: 10px; } #news-modal .nwm-note h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 6px; font: normal 22px var(--serif); font-variant: small-caps; color: #1d140b; } #news-modal .nwm-act { display: block; margin: 16px auto 4px; width: 480px; padding: 0 20%; white-space: nowrap; max-width: 100%; aspect-ratio: 932 / 115; background: var(--btn-long) center / 100% 100% no-repeat; border: 0; color: #efe2c4; font: 19px var(--serif); letter-spacing: .04em; text-shadow: 0 2px 3px #000; cursor: pointer; } #news-modal .nwm-act:hover, #news-modal .nwm-act:focus-visible { filter: brightness(1.25); outline: none; color: #ffe0a0; } #news-modal .nwm-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 10px; border-top: 1px solid rgba(96, 64, 24, .4); } #news-modal .nwm-nav, #news-modal .nwm-link { min-width: 90px; background: none; border: 0; padding: 4px 2px; font: 17px var(--serif); color: #8a1f14; cursor: pointer; } #news-modal .nwm-nav.is-next { text-align: right; } #news-modal .nwm-link { text-decoration: underline; text-underline-offset: 3px; } #news-modal .nwm-nav:hover, #news-modal .nwm-link:hover, #news-modal .nwm-nav:focus-visible, #news-modal .nwm-link:focus-visible { color: #b0281a; outline: none; } #news-modal.is-large .nwm-body { font-size: 21px; } #news-modal.is-large .nwm-h { font-size: 34px; } /* Village Lobby: a close button, and the glide beside the news panel */ #lobbybrowser .lb-space.is-gliding { transition: transform .55s cubic-bezier(.4, 0, .2, 1); } #lobbybrowser .lb-close { width: 52px; height: 52px; border-radius: 50%; border: 3px solid #d9a441; background: #0e1420; color: #f0c46a; font: 34px/1 var(--serif); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.7); z-index: 2; } #lobbybrowser .lb-close:hover, #lobbybrowser .lb-close:focus-visible { background: #6d1111; outline: none; } @media (prefers-reduced-motion: reduce) { #news.is-in .nw-slide, #news-modal.is-in .nwm-card { animation: none; } #news .nw-slide.is-gliding, #lobbybrowser .lb-space.is-gliding { transition: none; } } #news-modal .nwm-note h3 time { font-variant: normal; } /* M35: your own row in the Voting Hour — not choosable; turns ember red when ash lands on you */ .scr-row.is-me { cursor: default; opacity: .9; font-style: italic; } .scr-row.is-me.is-targeted { border-color: #b3281f; background: rgba(120, 22, 18, .35); } .scr-row.is-me.is-targeted .scr-pip { background: #e2554a; color: #fff3e0; } /* ============ M36 — item tiles (placeholder silhouettes until the owner's item art), the Satchel, finds on the score screen */ .it-tile { position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; box-sizing: border-box; border: 2px solid var(--rar, #cdbf9f); border-radius: 7px; background: radial-gradient(circle at 50% 38%, #2a2f44, #0d1018 78%); box-shadow: inset 0 0 10px rgba(0,0,0,.7), 0 0 6px color-mix(in srgb, var(--rar) 35%, transparent); flex: none; } .it-tile img { width: 88%; height: 88%; object-fit: contain; } .it-glyph { display: block; width: 62%; height: 62%; background: color-mix(in srgb, var(--rar, #e8dcc4) 55%, #efe2c4); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } .it-qty { position: absolute; right: 3px; bottom: 1px; font: bold 13px var(--serif); color: #fff3dc; text-shadow: 0 1px 2px #000, 0 0 3px #000; } .it-glyph.is-bloody_shirt { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3 3 6l2 4 2-1v12h10V9l2 1 2-4-5-3c-.5 1.5-2 2.5-4 2.5S8.5 4.5 8 3z'/%3E%3C/svg%3E"); } .it-glyph.is-bloody_pants { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12l1 18h-5l-2-11-2 11H5z'/%3E%3C/svg%3E"); } .it-glyph.is-bloody_boots { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h6v11l6 3v5H6v-4l2-2z'/%3E%3C/svg%3E"); } .it-glyph.is-bloody_gloves { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 21v-6L4 11l1.5-1.5L8 12V4a1.2 1.2 0 0 1 2.4 0v6h.6V3a1.2 1.2 0 0 1 2.4 0v7h.6V4a1.2 1.2 0 0 1 2.4 0v7h.6V6a1.2 1.2 0 0 1 2.4 0v9l-2 6z'/%3E%3C/svg%3E"); } .it-glyph.is-wolf_pelt { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c2 2 4 1 6 0 0 3 2 4 4 5-2 1-3 3-3 5 1 2 0 5-2 7-2-1-3-1-5 1-2-2-3-2-5-1-2-2-3-5-2-7 0-2-1-4-3-5 2-1 4-2 4-5 2 1 4 2 6 0z'/%3E%3C/svg%3E"); } .it-glyph.is-wolf_tooth { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4c2-1 4 0 6 0s4-1 6 0c2 2 1 6-1 8l-1 8c-1 1-2 0-2-1l-1-5h-2l-1 5c0 1-1 2-2 1l-1-8C5 10 4 6 6 4z'/%3E%3C/svg%3E"); } .it-glyph.is-wolf_claw { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21c0-7 2-12 7-17-1 6-1 11 0 17zM10 21c0-6 3-11 8-15-2 5-3 10-3 15zM15.5 21c1-5 3-8 6.5-10-2 4-2.5 7-2.5 10z'/%3E%3C/svg%3E"); } .it-glyph.is-wolf_eye { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M1 12c3-5 7-8 11-8s8 3 11 8c-3 5-7 8-11 8S4 17 1 12zm11-5c-1.2 1.3-1.8 3-1.8 5s.6 3.7 1.8 5c1.2-1.3 1.8-3 1.8-5s-.6-3.7-1.8-5z'/%3E%3C/svg%3E"); } .it-glyph.is-potion { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v2h-1v5l5 9a2 2 0 0 1-2 3H7a2 2 0 0 1-2-3l5-9V4H9z'/%3E%3C/svg%3E"); } .it-glyph.is-bag { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8 7a4 4 0 0 1 8 0h3l1 14H4L5 7zm2 0h4a2 2 0 0 0-4 0z'/%3E%3C/svg%3E"); } #profile .sat-grid { display: grid; grid-template-columns: repeat(6, 78px); gap: 12px; } #profile .sat-slot { position: relative; width: 78px; height: 78px; padding: 0; border: 0; background: none; border-radius: 9px; cursor: pointer; } #profile .sat-slot .it-tile { width: 78px; height: 78px; } #profile .sat-slot .it-qty { font-size: 16px; right: 5px; bottom: 3px; } #profile .sat-slot.is-empty { box-sizing: border-box; border: 2px dashed rgba(193, 150, 80, .45); background: rgba(8, 10, 18, .45); cursor: default; } #profile .sat-slot.is-locked { box-sizing: border-box; display: grid; place-items: center; border: 2px solid rgba(90, 80, 70, .5); background: rgba(8, 10, 18, .7); cursor: help; opacity: .55; } #profile .sat-slot.is-locked .it-glyph { --rar: #6d6252; width: 40%; height: 40%; } #profile .sat-slot.is-picked .it-tile, #profile .sat-slot:focus-visible .it-tile { outline: 3px solid var(--gold); outline-offset: 2px; } #profile .sat-slot:focus-visible { outline: none; } #profile .sat-detail { display: flex; gap: 16px; align-items: flex-start; min-height: 120px; padding: 12px 14px; border: 1px solid rgba(107, 85, 55, .6); border-radius: 8px; background: rgba(8, 10, 18, .55); font-size: 20px; } #profile .sat-detail p { margin: 6px 0 0; } #profile .sat-rar { font-size: 16px; letter-spacing: .08em; text-transform: uppercase; margin-left: 8px; } #profile .sat-btn { height: 44px; margin-top: 10px; font-size: 19px; border-style: solid; border-width: 0 30px; border-image: url("../../assets/ui/lobby/btn_compact_default.png") 0 140 0 140 fill / 0 30px stretch; } #profile .sat-btn:hover:not(:disabled), #profile .sat-btn:focus-visible { border-image-source: url("../../assets/ui/lobby/btn_compact_hover.png"); outline: none; } #profile .sat-btn:disabled { border-image-source: url("../../assets/ui/lobby/btn_compact_disabled.png"); color: #8f8570; cursor: default; } #profile .sat-throw { border-image-source: url("../../assets/ui/lobby/btn_compact_default.png"); color: #ffb49c; } #profile .sat-potion { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid rgba(107, 85, 55, .5); border-radius: 8px; background: rgba(8, 10, 18, .5); font-size: 19px; } #profile .sat-potion p { margin: 2px 0 6px; font-size: 16px; color: var(--ink-dim); } #profile .sat-potion .sat-btn { margin: 0; } #profile .sat-potion.is-active { border-color: #b98a37; box-shadow: 0 0 10px rgba(224, 180, 95, .35); } #profile .sat-needs { display: flex; gap: 6px; } #profile .sat-needs .it-tile { width: 40px; height: 40px; } #profile .sat-needs .it-qty { font-size: 11px; } #profile .sat-working { color: var(--gold); font-size: 17px; white-space: nowrap; } #profile .sat-luck { margin-top: 6px; font-style: italic; } .harvest-finds { margin-top: 12px; } .harvest-finds .find-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; margin: 6px 0; animation: find-in .5s calc(var(--k) * .35s + .4s) both; } .harvest-finds .find-row .it-tile { width: 46px; height: 46px; } .harvest-finds .find-row small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } @keyframes find-in { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } } .harvest-finds .find-status { color: var(--ink-dim); font-size: 14px; } .harvest-finds .find-choose, .harvest-finds .find-letgo { background: #3a1210; border: 1px solid #b3281f; color: #ffcfbf; border-radius: 6px; padding: 4px 10px; font: 14px var(--serif); cursor: pointer; } .harvest-finds .find-choose:hover, .harvest-finds .find-letgo:hover, .harvest-finds .find-choose:focus-visible, .harvest-finds .find-letgo:focus-visible { background: #5b1a16; outline: none; } .harvest-finds .find-chooser { margin-top: 8px; padding: 10px; border: 1px solid var(--edge); border-radius: 8px; background: rgba(8, 10, 18, .7); } .harvest-finds .find-chooser p { margin: 0 0 8px; font-size: 15px; } .harvest-finds .find-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .harvest-finds .find-slot { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; } .harvest-finds .find-slot .it-tile { width: 50px; height: 50px; } .harvest-finds .find-slot:hover .it-tile, .harvest-finds .find-slot:focus-visible .it-tile { outline: 2px solid #e2554a; outline-offset: 2px; } .harvest-finds .find-slot:focus-visible { outline: none; } .gameover-finds { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; } .it-tile.is-mini { width: 26px; height: 26px; border-width: 1px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .harvest-finds .find-row { animation: none; } } #stall .st-selltile .st-tile-art { display: grid; place-items: center; } #stall .st-selltile .it-tile { width: 96px; height: 96px; } #stall .st-selltile .it-qty { font-size: 18px; } #stall .st-preview .it-tile.is-big { width: 170px; height: 170px; border-width: 3px; border-radius: 12px; } #stall .st-preview .it-tile.is-big .it-glyph { width: 58%; height: 58%; } /* M36: six Profile tabs (Satchel joined) — slightly smaller lettering so every label fits */ #profile .pf-tabs .pf-tab { font-size: 15px; letter-spacing: .02em; } #profile .sat-grid { grid-template-columns: repeat(6, 70px); gap: 10px; } #profile .sat-slot, #profile .sat-slot .it-tile { width: 70px; height: 70px; } #profile .sat-detail { min-height: 0; padding: 10px 12px; font-size: 18px; } #profile .sat-detail .sat-btn { margin-top: 6px; } #profile #pf-bag .pf-help { margin: 0; } #stall .st-select[hidden] { display: none; } /* M36: filter/sort hide on the Sell tab */ /* M36: finds buttons must not inherit the general #gameover button box (SETUP §12: panel styles leak) */ #gameover .harvest-finds .find-slot { background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; height: auto; } #gameover .harvest-finds .find-choose, #gameover .harvest-finds .find-letgo { background: #3a1210; border: 1px solid #b3281f; color: #ffcfbf; box-shadow: none; min-width: 0; height: auto; padding: 4px 10px; font: 14px var(--serif); } #gameover .harvest-finds .find-choose:hover, #gameover .harvest-finds .find-letgo:hover, #gameover .harvest-finds .find-choose:focus-visible, #gameover .harvest-finds .find-letgo:focus-visible { background: #5b1a16; } #gameover .gameover-earn .gameover-finds { margin-left: 10px; } #profile .pf-tabs .pf-tab { font-size: 14.5px; letter-spacing: 0; } /* ============ M36b — the owner's item art: icons carry their own frame (no rarity edge on the tile; rarity = the name's colour, on hover and in labels); the Satchel is the owner's bag with the slots inside its opening */ .it-tile.has-art { border: 0; border-radius: 0; background: none; box-shadow: none; } .it-tile.has-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); } .it-tile .it-qty { min-width: 16px; padding: 0 4px; border-radius: 8px; background: rgba(8, 6, 6, .82); border: 1px solid rgba(217, 164, 65, .7); text-align: center; line-height: 16px; } .item-hover { position: fixed; z-index: 30; max-width: 260px; padding: 10px 12px; border: 1px solid #7d6335; border-radius: 8px; background: rgba(12, 14, 20, .96); box-shadow: 0 8px 24px rgba(0,0,0,.6); color: #e8dcc4; font: 14px/1.4 var(--serif); pointer-events: none; } .item-hover[hidden] { display: none; } .item-hover .ih-name { display: block; font-size: 17px; } .item-hover .ih-rar { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .item-hover p { margin: 6px 0 0; } .item-hover .ih-meta { color: #a89c86; font-size: 12.5px; } #profile .sat-wrap { display: flex; gap: 18px; align-items: flex-start; height: 100%; } #profile .sat-bag { position: relative; flex: none; height: 468px; aspect-ratio: 900 / 812; } #profile .sat-bag-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); } #profile .sat-bag .sat-grid { position: absolute; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; place-items: center; } #profile .sat-bag .sat-slot, #profile .sat-bag .sat-slot .it-tile { width: 66px; height: 66px; } #profile .sat-bag .sat-slot.is-empty { border: 1.5px dashed rgba(120, 90, 55, .55); background: rgba(40, 26, 14, .18); border-radius: 8px; } #profile .sat-bag .sat-slot.is-locked { border: 0; background: rgba(40, 26, 14, .12); opacity: .45; border-radius: 8px; } #profile .sat-bag .sat-slot.is-picked .it-tile { outline: 3px solid var(--gold); outline-offset: 1px; } #profile .sat-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; } #profile .sat-side .sat-detail { display: block; } #profile .sat-flask { width: 56px; height: 56px; display: grid; place-items: center; } #profile .sat-flask .it-potion { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); } #profile .sat-baghead { display: flex; align-items: center; gap: 10px; } #profile .sat-baghead img { width: 42px; height: auto; } /* ============ M37 — outfits: Mira's Outfits shelf (recipe as have/need tiles) and the Companions outfit rack */ #stall .st-outfit { height: 88%; width: auto; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); } #stall .st-recipe { display: inline-flex; gap: 8px; vertical-align: middle; } #stall .st-plus { margin: 0 8px; color: var(--gold); } #stall .st-need { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; color: #e2554a; } #stall .st-need.is-met { color: #7fb069; } #stall .st-need .it-tile { width: 44px; height: 44px; } #profile .pf-outfits { display: flex; flex-wrap: wrap; gap: 10px; } #profile .pf-outfit { position: relative; width: 118px; padding: 6px 4px; border: 1.5px solid #3d3120; border-radius: 8px; background: rgba(8, 10, 18, .55); color: #e8dcc4; font: 14px var(--serif); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; } #profile .pf-outfit img { height: 92px; width: auto; } #profile .pf-outfit small { color: #a89c86; font-size: 12px; } #profile .pf-outfit.is-current { border-color: var(--gold); box-shadow: 0 0 10px rgba(224, 180, 95, .4); } #profile .pf-outfit.is-locked { opacity: .45; cursor: default; filter: grayscale(.6); } #profile .pf-outfit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* M37 fix: long outfit names widened the auto columns and pushed the 4th tile (Drifter's Poncho) past the panel — columns may shrink (labels ellipsize), and outfit sprites keep to the art box like pets */ #stall .st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } #stall .st-tile-label { min-width: 0; } #stall .st-tile-tag { flex: none; white-space: nowrap; } #stall .st-tile-art .st-outfit { height: auto; width: auto; max-height: 96px; max-width: 100%; } /* M38: Items & tools */ #admin .adm-out { max-height: 260px; overflow: auto; margin: 8px 0 0; padding: 8px 10px; background: #07090e; border: 1px solid #3d3120; border-radius: 6px; font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; color: #d8ccb2; white-space: pre-wrap; } #admin .adm-cmd input[name=line] { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; } /* ============ M39 — the owner's graphical utility bar (tools/cut_bar.py; positions generated from ui/bar/layout.json). Bottom-right, about a third of the width. Eight wells as drawn (Roles · Lobbies · Profile · Leaderboard · Friends · Stall · Settings · Log out); the flame crest is the Admin button for admins, the news/fire light for everyone. */ #ui .utils.ut-bar { position: absolute; left: 1109px; top: 821px; width: 557px; height: 116px; display: block; padding: 0; background: url("../../assets/ui/bar/bar.png") 0 0 / 100% 100% no-repeat; border: 0; border-radius: 0; box-shadow: none; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); } #ui .utils.ut-bar button { position: absolute; padding: 0; margin: 0; border: 0; border-radius: 10px; background: center / 100% 100% no-repeat; transition: filter .15s, transform .1s; } #ui .utils.ut-bar button > img, #ui .utils.ut-bar button > .ut-icon { display: none; } #ui .utils.ut-bar button:hover { background-color: transparent; filter: brightness(1.18) drop-shadow(0 0 6px rgba(255, 170, 70, .85)); } #ui .utils.ut-bar button:active { transform: translateY(1px); filter: brightness(.92); } #ui .utils.ut-bar button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } #ui .utils.ut-bar button.is-soon { opacity: 1; filter: grayscale(.75) brightness(.6); } #ui .utils.ut-bar button.is-soon:hover { filter: grayscale(.6) brightness(.75); } /* the glowing well: whichever screen is open */ #ui .utils.ut-bar button.is-open { filter: brightness(1.12); box-shadow: inset 0 0 0 2px rgba(255, 196, 92, .85), inset 0 0 14px rgba(255, 150, 50, .55), 0 0 12px rgba(255, 150, 50, .55); } /* parchment hover labels with the number key */ #ui .utils.ut-bar button::after { content: attr(data-label) " · " attr(data-key); bottom: calc(100% + 14px); padding: 4px 10px; background: #efdcb2; color: #2b1d0f; border: 1px solid #8a6a32; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.5); font: 14px var(--serif); white-space: nowrap; } #ui .utils.ut-bar button.is-soon::after { content: attr(data-label) " · coming soon"; } #ui .utils.ut-bar #ut-admin::after, #ui .utils.ut-bar #ut-crest::after { content: attr(data-label); } #ui .utils.ut-bar #ut-admin, #ui .utils.ut-bar #ut-crest { left: 263.7px; top: 8.7px; width: 29.6px; height: 33.1px; border-radius: 50%; background: none; z-index: 2; } #ui .utils.ut-bar #ut-admin[hidden], #ui .utils.ut-bar #ut-crest[hidden] { display: none; } /* the living flame: pulses for unread news; during a match it burns with the fire's hours (ember red when short) */ #ui .utils.ut-bar .ut-flame { position: absolute; left: 261.1px; top: 7.8px; width: 34.8px; height: 34.8px; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(255, 214, 120, .95) 0%, rgba(255, 150, 40, .55) 35%, rgba(255, 90, 20, 0) 70%); mix-blend-mode: screen; opacity: .35; transition: opacity .6s, filter .6s; } #ui .utils.ut-bar.is-news .ut-flame { animation: ut-news 1.8s ease-in-out infinite; } @keyframes ut-news { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.18); } } #ui .utils.ut-bar.is-fire .ut-flame { opacity: calc(.25 + .75 * var(--fire, 1)); animation: ut-flicker 2.6s ease-in-out infinite; } #ui .utils.ut-bar.is-short .ut-flame { filter: hue-rotate(-25deg) saturate(1.6); } @keyframes ut-flicker { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.06); } 70% { transform: scale(.96); } } @media (prefers-reduced-motion: reduce) { #ui .utils.ut-bar .ut-flame { animation: none !important; } } #ui .utils.ut-bar #ut-guide { left: 37.4px; top: 40.0px; width: 54.4px; height: 54.4px; background-image: url("../../assets/ui/bar/icon_roles.png"); } #ui .utils.ut-bar #ut-lobbies { left: 97.9px; top: 40.0px; width: 54.4px; height: 54.4px; background-image: url("../../assets/ui/bar/icon_lobbies.png"); } #ui .utils.ut-bar #ut-profile { left: 157.1px; top: 40.0px; width: 56.1px; height: 54.4px; background-image: url("../../assets/ui/bar/icon_profile.png"); } #ui .utils.ut-bar #ut-leaderboard { left: 218.9px; top: 40.0px; width: 56.1px; height: 54.4px; background-image: url("../../assets/ui/bar/icon_leaderboard.png"); } #ui .utils.ut-bar #ut-friends { left: 281.5px; top: 40.0px; width: 55.3px; height: 54.4px; background-image: url("../../assets/ui/bar/icon_friends.png"); } #ui .utils.ut-bar #ut-store { left: 342.9px; top: 40.0px; width: 53.5px; height: 54.4px; background-image: url("../../assets/ui/bar/icon_store.png"); } #ui .utils.ut-bar #ut-settings { left: 402.5px; top: 40.0px; width: 54.8px; height: 54.4px; background-image: url("../../assets/ui/bar/icon_settings.png"); } #ui .utils.ut-bar #ut-logout { left: 463.4px; top: 40.0px; width: 55.3px; height: 54.4px; background-image: url("../../assets/ui/bar/icon_logout.png"); } /* M39b (owner): the Stall's well shows our silver coin instead of the drawn stall (the empty well is in bar.png) */ #ui .utils.ut-bar #ut-store { background-image: url("../../assets/ui/currency/silver_coin_128.png"); background-size: 60% 60%; background-position: 50% 52%; } /* ============ M40 — Friends & Mail: the news section's parchment (9-slice panel), wax seals in the sender's colour */ #friends { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(4, 6, 14, .55); font-family: var(--serif); } #friends[hidden] { display: none; } .fm-scope .fm-card { position: relative; isolation: isolate; box-sizing: border-box; width: min(1040px, 94vw); height: min(760px, 90vh); display: flex; flex-direction: column; padding: 30px 34px 22px; color: #2b1d0f; filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); } .fm-scope .fm-card::before { content: ''; position: absolute; inset: 0; border: 44px solid transparent; border-image: var(--panel) 80 fill / 44px stretch; z-index: -1; pointer-events: none; } .fm-scope .fm-close { position: absolute; top: -14px; right: -14px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #d9a441; background: #0e1420; color: #f0c46a; font: 26px/1 var(--serif); cursor: pointer; z-index: 3; } .fm-scope .fm-close:hover, .fm-scope .fm-close:focus-visible { background: #6d1111; outline: none; } .fm-scope .fm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .fm-scope .fm-h { margin: 0; font: normal 32px var(--serif); font-variant: small-caps; color: #1d140b; } .fm-scope .fm-tabs { display: flex; gap: 6px; } .fm-scope .fm-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 12px; font: 20px var(--serif); font-variant: small-caps; color: #6b5a45; cursor: pointer; } .fm-scope .fm-tabs button[aria-selected="true"] { color: #1d140b; border-bottom-color: #8a1f14; } .fm-scope .fm-tabs button:focus-visible { outline: 2px solid #b98a37; } .fm-scope .fm-count:not(:empty) { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: #8a1f14; color: #fff3dc; font: bold 12px/18px var(--serif); text-align: center; font-variant: normal; } .fm-scope .fm-rule { display: block; margin: 6px 0 10px; height: 20px; } .fm-scope .fm-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #9b7a45 transparent; } .fm-scope .fm-msg { min-height: 20px; margin: 6px 0 0; font-size: 15px; color: #3b5b2a; } .fm-scope .fm-msg.is-bad { color: #8a1f14; } .fm-scope .fm-btn { padding: 6px 14px; border: 1px solid #8a6a32; border-radius: 6px; background: #1b1410; color: #f1dfb6; font: 16px var(--serif); cursor: pointer; } .fm-scope .fm-btn:hover, .fm-scope .fm-btn:focus-visible { background: #3a2a14; outline: none; } .fm-scope .fm-link { background: none; border: 0; padding: 2px 4px; color: #8a1f14; font: 15px var(--serif); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .fm-scope .fm-danger { color: #a1231a; } .fm-scope input, .fm-scope textarea { box-sizing: border-box; padding: 7px 10px; border: 1px solid #a88a58; border-radius: 6px; background: rgba(255, 248, 232, .7); color: #2b1d0f; font: 16px var(--serif); } .fm-scope input:focus, .fm-scope textarea:focus { outline: 2px solid #b98a37; outline-offset: 0; } /* mail list: message LEFT, sender RIGHT */ .fm-scope .fm-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; } .fm-scope .fm-search { flex: 1; min-width: 0; } .fm-scope .fm-seg { display: inline-flex; border: 1px solid #a88a58; border-radius: 6px; overflow: hidden; } .fm-scope .fm-seg button { background: none; border: 0; padding: 6px 12px; font: 15px var(--serif); color: #4a3822; cursor: pointer; } .fm-scope .fm-seg button[aria-pressed="true"] { background: #2b1d0f; color: #f1dfb6; } .fm-scope .fm-list, .fm-scope .fm-flist { list-style: none; margin: 0; padding: 0; } .fm-scope .fm-list > li + li, .fm-scope .fm-flist > li + li { border-top: 1px solid rgba(96, 64, 24, .35); } .fm-scope .fm-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; width: 100%; padding: 9px 6px; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 6px; } .fm-scope .fm-row:hover, .fm-scope .fm-row:focus-visible { background: rgba(138, 31, 20, .07); outline: none; } .fm-scope .fm-left { display: flex; gap: 12px; align-items: center; min-width: 0; } .fm-scope .fm-text { display: flex; flex-direction: column; min-width: 0; } .fm-scope .fm-subject { font-weight: normal; font-size: 17px; color: #2b1d0f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fm-scope .fm-row.is-unread .fm-subject { font-weight: bold; color: #1d140b; } .fm-scope .fm-preview { font-size: 14px; color: #5f4d36; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fm-scope .fm-right { display: flex; flex-direction: column; align-items: flex-end; min-width: 120px; } .fm-scope .fm-from { font-size: 16px; font-weight: bold; color: #2b1d0f; text-shadow: 0 0 1px rgba(0,0,0,.25); } .fm-scope .fm-right time { font-size: 13px; color: #6b5a45; } .fm-scope .fm-row.is-unread .fm-right::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #8a1f14; margin-bottom: 3px; } .fm-scope .fm-empty { padding: 24px 6px; font-style: italic; color: #6b5a45; } /* wax seal in the sender's colour */ .fm-scope .fm-seal { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50% 46% 52% 48%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--wax) 70%, #fff) 0%, var(--wax) 45%, color-mix(in srgb, var(--wax) 55%, #000) 100%); box-shadow: 0 2px 3px rgba(0,0,0,.4), inset 0 0 0 3px color-mix(in srgb, var(--wax) 80%, #000); color: rgba(255, 255, 255, .8); font: bold 16px var(--serif); text-shadow: 0 -1px 0 rgba(0,0,0,.4); } /* a letter, and writing one */ .fm-scope .fm-back { background: none; border: 0; padding: 0; margin-bottom: 8px; color: #8a1f14; font: 15px var(--serif); cursor: pointer; } .fm-scope .fm-letter header { display: flex; gap: 14px; align-items: center; } .fm-scope .fm-letter h3, .fm-scope .fm-compose h3 { margin: 0; font: normal 24px var(--serif); font-variant: small-caps; color: #1d140b; } .fm-scope .fm-meta { margin: 2px 0 0; font-size: 14px; color: #5f4d36; } .fm-scope .fm-letter-body { margin: 16px 0; padding: 14px 16px; border-left: 3px solid rgba(138, 31, 20, .35); font-size: 18px; line-height: 1.55; white-space: normal; } .fm-scope .fm-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .fm-scope .fm-compose { display: flex; flex-direction: column; gap: 10px; } .fm-scope .fm-compose label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: #4a3822; } .fm-scope .fm-compose textarea { resize: vertical; line-height: 1.5; } .fm-scope .fm-counter { margin: -6px 0 0; text-align: right; font-size: 13px; color: #6b5a45; } /* friends */ .fm-scope .fm-add { display: flex; gap: 10px; margin-bottom: 12px; } .fm-scope .fm-add input { flex: 1; min-width: 0; } .fm-scope .fm-reqs h3, .fm-scope .fm-friends h3 { margin: 8px 0 6px; font: normal 20px var(--serif); font-variant: small-caps; color: #1d140b; } .fm-scope h3 small { font-size: 14px; color: #6b5a45; font-variant: normal; } .fm-scope .fm-req { display: flex; gap: 10px; align-items: center; margin: 4px 0; font-size: 16px; } .fm-scope .fm-req.is-out { color: #5f4d36; } .fm-scope .fm-friend { display: grid; grid-template-columns: 14px minmax(90px, auto) auto auto 1fr auto; gap: 10px; align-items: center; padding: 8px 4px; font-size: 16px; } .fm-scope .fm-dot { width: 10px; height: 10px; border-radius: 50%; background: #9b907e; } .fm-scope .fm-friend.is-online .fm-dot { background: #4f9a3a; box-shadow: 0 0 5px rgba(79, 154, 58, .8); } .fm-scope .fm-friend.is-fire .fm-dot { background: #e0892c; box-shadow: 0 0 6px rgba(224, 137, 44, .9); } .fm-scope .fm-fname { font-weight: bold; text-shadow: 0 0 1px rgba(0,0,0,.3); } .fm-scope .fm-lvl, .fm-scope .fm-status { font-size: 14px; color: #5f4d36; } .fm-scope .fm-friend.is-fire .fm-status { color: #a4520f; } .fm-scope .fm-note { font-style: italic; font-size: 14px; color: #4a3822; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fm-scope .fm-noteinput { width: 100%; font-size: 14px; padding: 3px 8px; } .fm-scope .fm-factions { display: flex; gap: 2px; } #ui .utils.ut-bar .ut-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9443a, #8a1510 70%); box-shadow: 0 1px 3px rgba(0,0,0,.6); color: #fff3dc; font: bold 12px/20px var(--serif); text-align: center; z-index: 2; } #ui .utils.ut-bar .ut-badge[hidden] { display: none; } #lobby .wr-friend { margin-left: 4px; padding: 0 5px; border-radius: 4px; background: #3d5a2a; color: #e8f5d8; font-size: 11px; } .fm-scope .fm-fname { display: inline-flex; align-items: center; gap: 8px; } #friends .fm-fname .fm-seal { width: 24px; height: 24px; font-size: 11px; } .fm-scope .fm-from, .fm-scope .fm-fname, .fm-scope .fm-meta b { color: #1d140b; text-shadow: none; } /* M40b: the mail lives in the Profile's Messages tab — the same parchment, a little larger text for the scaled layer */ #profile .pf-mail { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; padding: 34px 40px 18px; color: #2b1d0f; isolation: isolate; font-family: var(--serif); } #profile .pf-mail::before { content: ''; position: absolute; inset: 0; border: 44px solid transparent; border-image: var(--panel) 80 fill / 44px stretch; z-index: -1; pointer-events: none; } #profile .pf-mail-inner { flex: 1; min-height: 0; overflow-y: auto; zoom: 1.28; scrollbar-width: thin; scrollbar-color: #9b7a45 transparent; } #profile .pf-mail .fm-msg { zoom: 1.28; margin: 4px 0 0; } /* ============ M41 — weather: rain canvases (over the village under the HUD, and inside the night screen), the night screen's storm tint and its soft flash. The village tint, splashes, lightning and wolf are drawn in the scene. */ .rain-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } #night .rain-canvas { z-index: 3; } #night.is-storm { filter: brightness(.82) saturate(.8); transition: filter 2s; } #night .night-flash { position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at 60% 20%, rgba(225, 235, 255, .55), rgba(200, 215, 255, .18) 60%, transparent); opacity: 0; } #night .night-flash.is-on { animation: night-flash .46s ease-out; } @keyframes night-flash { 0% { opacity: 0; } 17% { opacity: 1; } 30% { opacity: .4; } 43% { opacity: .8; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #night .night-flash.is-on { animation: none; } } /* ============ M42 — the Game Guide: the news parchment as a two-page spread (contents left, chapter right). The layer is a fixed 1284×868 design space scaled by GuideUI.fit(), so every size below is design-space px. */ #guide { position: fixed; inset: 0; z-index: 7; background: rgba(4, 6, 14, .58); font-family: var(--serif); } #guide[hidden] { display: none; } #guide .gd-space { position: absolute; left: 0; top: 0; transform-origin: 0 0; } #guide .gd-card { position: relative; isolation: isolate; box-sizing: border-box; width: 100%; height: 100%; display: flex; gap: 30px; padding: 54px 58px 40px; color: #2b1d0f; filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); } #guide .gd-card::before { content: ''; position: absolute; inset: 0; border: 40px solid transparent; border-image: var(--panel) 80 fill / 40px stretch; pointer-events: none; z-index: -1; } #guide.is-in .gd-card { animation: nwm-unroll .32s cubic-bezier(.2, .8, .3, 1) both; transform-origin: 50% 0; } @media (prefers-reduced-motion: reduce) { #guide.is-in .gd-card { animation: none; } } #guide .nw-rule { display: block; height: 22px; padding: 0 12px; box-sizing: border-box; background: var(--gem) center / auto 100% no-repeat, var(--cap-l) left center / auto 100% no-repeat, var(--cap-r) right center / auto 100% no-repeat, var(--line) center / auto 100% repeat-x; background-clip: border-box, border-box, border-box, content-box; } #guide .gd-close { position: absolute; top: -14px; right: -14px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #d9a441; background: #0e1420; color: #f0c46a; font: 26px/1 var(--serif); cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.6); } #guide .gd-close:hover, #guide .gd-close:focus-visible { background: #6d1111; outline: none; } /* contents */ #guide .gd-contents { flex: none; width: 360px; min-height: 0; display: flex; flex-direction: column; } #guide .gd-title { margin: 0 8px; font: normal 34px/1.15 var(--serif); font-variant: small-caps; letter-spacing: .015em; color: #1d140b; text-shadow: 0 1px 0 rgba(255,240,205,.5); } #guide .gd-sub { margin: 2px 8px 0; font-size: 15px; font-style: italic; color: #5a4526; } #guide .gd-rule { margin: 10px 0 8px; width: 100%; } #guide .gd-toc { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; scrollbar-color: #9b7a45 transparent; } #guide .gd-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; font-family: inherit; color: inherit; text-align: left; cursor: pointer; } #guide .gd-row:hover, #guide .gd-row:focus-visible { background: rgba(138, 31, 20, .07); box-shadow: inset 0 0 0 1px rgba(138, 31, 20, .3); outline: none; } #guide .gd-row.is-on { background: rgba(138, 31, 20, .13); box-shadow: inset 0 0 0 1px rgba(138, 31, 20, .35); } #guide .gd-thumb { flex: none; width: 52px; height: 52px; display: grid; place-items: center; } #guide .gd-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } #guide .gd-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #guide .gd-row-title { font-size: 18px; font-variant: small-caps; color: #1d140b; } #guide .gd-row.is-on .gd-row-title { color: #6e1a0f; } #guide .gd-num { margin-right: 6px; color: #8a6a36; } #guide .gd-row-sum { font-size: 13.5px; line-height: 1.3; color: #4a3822; } #guide .gd-seal { flex: none; width: 20px; height: 20px; border-radius: 50%; } #guide .gd-seal.is-read { background: radial-gradient(circle at 38% 35%, #c8372a, #7a1410 70%); box-shadow: inset 0 0 0 3px rgba(60, 6, 4, .55), 0 1px 2px rgba(0,0,0,.45); } #guide .gd-divider { flex: none; width: 1px; background: rgba(96, 64, 24, .4); } /* the page */ #guide .gd-page { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } #guide .gd-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #7a5a2a; } #guide .gd-tabs { display: flex; gap: 8px; margin-top: 10px; } #guide .gd-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; padding: 6px 0 4px; border: 0; border-radius: 8px; background: none; font: 14px var(--serif); color: #4a3822; cursor: pointer; } #guide .gd-tab-icon { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; opacity: .78; } #guide .gd-tab-icon img { width: 100%; height: 100%; object-fit: cover; } #guide .gd-tab:hover .gd-tab-icon, #guide .gd-tab:focus-visible .gd-tab-icon { opacity: 1; } #guide .gd-tab:focus-visible { outline: 2px solid #b98a37; } #guide .gd-tab.is-on { background: rgba(138, 31, 20, .13); color: #6e1a0f; font-weight: bold; } #guide .gd-tab.is-on .gd-tab-icon { opacity: 1; box-shadow: 0 0 0 3px #d9a441, 0 0 12px rgba(217, 164, 65, .7); } #guide .gd-h { display: flex; align-items: center; gap: 14px; margin: 6px 0 0; font: normal 32px/1.15 var(--serif); font-variant: small-caps; letter-spacing: .015em; color: #1d140b; text-shadow: 0 1px 0 rgba(255,240,205,.5); } #guide .gd-h > span { white-space: nowrap; } #guide .gd-h .nw-rule { flex: 1 1 60px; min-width: 60px; } #guide .gd-h:focus { outline: none; } #guide .gd-body { flex: 1; min-height: 0; overflow-y: auto; margin-top: 14px; padding-right: 8px; font-size: 17px; line-height: 1.5; color: #2d2010; scrollbar-width: thin; scrollbar-color: #9b7a45 transparent; } #guide .gd-body > * + * { margin-top: 12px; } #guide .gd-md p { margin: 0 0 .6em; } #guide .gd-md p:last-child, #guide .gd-md ul:last-child { margin-bottom: 0; } #guide .gd-md ul { margin: 0 0 .6em; padding-left: 1.3em; } #guide .gd-md li { margin: 0 0 .3em; } #guide .gd-md b { color: #1d140b; } #guide .gd-md a { color: #8a1f14; } #guide .gd-role { display: flex; gap: 26px; } #guide .gd-role > .gd-md { flex: 1; min-width: 0; } #guide .gd-card-fig { flex: none; width: 190px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; } #guide .gd-card-fig img { width: 190px; height: 281px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(40, 20, 5, .45)); } #guide .gd-card-fig figcaption { font-size: 14px; color: #4a3822; } #guide .gd-card-fig b { color: #6e1a0f; } #guide .gd-screen, #guide .gd-note, #guide .gd-timeline, #guide .gd-rulecard { border-radius: 8px; background: rgba(96, 64, 24, .09); box-shadow: inset 0 0 0 1px rgba(96, 64, 24, .25); } #guide .gd-screen { display: flex; gap: 20px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; } #guide .gd-screen img { flex: none; width: 208px; height: 156px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 2px rgba(120, 80, 20, .6); } #guide .gd-screen figcaption { display: flex; flex-direction: column; gap: 4px; font-size: 15.5px; line-height: 1.45; } #guide .gd-screen-h { font-size: 18px; font-variant: small-caps; color: #1d140b; } #guide .gd-note { padding: 10px 14px; font-size: 15.5px; font-style: italic; color: #3d2d17; } #guide .gd-note p { margin: 0; } #guide .gd-h3 { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font: normal 21px var(--serif); font-variant: small-caps; color: #1d140b; } #guide .gd-body > .gd-h3:first-child { margin-top: 0; } #guide .gd-h3 .nw-rule { flex: 1; height: 18px; } #guide .gd-h3 + .gd-md { margin-top: 8px; } #guide .gd-sides { display: flex; gap: 12px; } #guide .gd-side { flex: 1 1 0; padding: 12px 14px; border-radius: 8px; background: rgba(255, 246, 222, .55); box-shadow: inset 0 0 0 1px rgba(96, 64, 24, .35); font-size: 15.5px; line-height: 1.45; } #guide .gd-side-h { display: block; margin-bottom: 4px; font-size: 18px; font-variant: small-caps; color: #24406a; } #guide .gd-side.is-wolf .gd-side-h { color: #8a1f14; } #guide .gd-phases { list-style: none; margin: 0; padding: 0; counter-reset: gd-ph; display: flex; flex-direction: column; gap: 6px; } #guide .gd-phases li { counter-increment: gd-ph; display: grid; grid-template-columns: 28px 180px 1fr auto; gap: 12px; align-items: baseline; padding: 8px 12px; border-radius: 8px; background: rgba(96, 64, 24, .07); } #guide .gd-phases li::before { content: counter(gd-ph); align-self: center; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #6e1a0f; color: #f3e3c0; font-size: 14px; } #guide .gd-phase-name { font-size: 18px; font-variant: small-caps; color: #1d140b; } #guide .gd-phase-text { font-size: 15.5px; line-height: 1.4; } #guide .gd-phase-time { font-size: 14px; font-style: italic; color: #5a4526; white-space: nowrap; } #guide .gd-timeline { padding: 14px 18px 12px; } #guide .gd-ticks { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; } #guide .gd-ticks .is-dawn { color: #6e1a0f; font-weight: bold; } #guide .gd-logs { display: flex; gap: 8px; } #guide .gd-log { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; color: #4a3822; } #guide .gd-log i { width: 100%; height: 34px; border-radius: 17px; background: linear-gradient(180deg, #c9731f, #8a3b10); box-shadow: inset 0 -4px 0 rgba(60, 20, 4, .35), inset 0 2px 0 rgba(255, 210, 140, .5); } #guide .gd-cards { display: flex; gap: 12px; } #guide .gd-rulecard { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; font-size: 15px; line-height: 1.4; } #guide .gd-rulecard-h { display: flex; align-items: center; gap: 10px; font-size: 18px; font-variant: small-caps; color: #1d140b; } #guide .gd-rulecard-h b { font-size: 22px; font-variant: normal; color: #8a3b10; } #guide .gd-rulecard.is-wolf b { color: #8a1f14; } #guide .gd-rulecard.is-log b { color: #2f5d2a; } #guide .gd-fireline { display: flex; gap: 18px; align-items: center; } #guide .gd-fire-demo { flex: none; display: flex; flex-direction: column; gap: 6px; } #guide .gd-fire-demo span { padding: 6px 14px; border-radius: 6px; background: #0e1420; border: 1px solid #5b4a2a; font-size: 15px; color: #e8c26a; } #guide .gd-fire-demo .is-short { color: #e0573a; } #guide .gd-fireline p { margin: 0; font-size: 15.5px; line-height: 1.45; } #guide .gd-fireline b { color: #8a1f14; font-weight: normal; } #guide .gd-outcomes { margin: 0; display: flex; flex-direction: column; gap: 6px; } #guide .gd-outcomes > div { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; padding: 8px 12px; border-radius: 8px; background: rgba(96, 64, 24, .07); } #guide .gd-outcomes dt { font-size: 15.5px; line-height: 1.4; color: #1d140b; } #guide .gd-outcomes dd { margin: 0; font-size: 15.5px; line-height: 1.4; } #guide .gd-sizes { width: 100%; border-collapse: collapse; font-size: 16px; } #guide .gd-sizes th, #guide .gd-sizes td { padding: 8px 12px; text-align: center; border-bottom: 1px solid rgba(96, 64, 24, .3); } #guide .gd-sizes thead th { font-weight: normal; font-variant: small-caps; color: #5a4526; } #guide .gd-sizes tbody th { color: #1d140b; } #guide .gd-sizes tbody tr:nth-child(odd) { background: rgba(96, 64, 24, .06); } #guide .gd-glossary { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; } #guide .gd-glossary > div { padding: 6px 0; border-bottom: 1px solid rgba(96, 64, 24, .25); } #guide .gd-glossary dt { font-size: 17px; font-variant: small-caps; color: #6e1a0f; } #guide .gd-glossary dd { margin: 2px 0 0; font-size: 15px; line-height: 1.4; } #guide .gd-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(96, 64, 24, .4); } #guide .gd-nav, #guide .gd-to-contents { min-width: 200px; padding: 4px 2px; background: none; border: 0; font: 17px var(--serif); color: #8a1f14; text-align: left; cursor: pointer; } #guide .gd-nav.is-next { text-align: right; } #guide .gd-to-contents { min-width: 0; text-decoration: underline; text-underline-offset: 3px; } #guide .gd-nav:hover, #guide .gd-nav:focus-visible, #guide .gd-to-contents:hover, #guide .gd-to-contents:focus-visible { color: #b0281a; text-decoration: underline; text-underline-offset: 3px; outline: none; } /* ============ M45a — the Wardrobe: Outfits | Pets switch on top, filters, a searchable keepsake shelf (Profile design px) */ #profile .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #profile .pf-wd-switch { display: flex; gap: 0; align-self: flex-start; border: 1.5px solid #5d4a2e; border-radius: 10px; overflow: hidden; } #profile .pf-wd-tab { min-width: 150px; padding: 8px 22px; border: 0; background: rgba(8, 10, 18, .55); color: #cdbf9f; font: 24px var(--serif); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } #profile .pf-wd-tab + .pf-wd-tab { border-left: 1.5px solid #5d4a2e; } #profile .pf-wd-tab.is-on { background: linear-gradient(180deg, rgba(179, 40, 31, .55), rgba(110, 22, 16, .55)); color: var(--gold); } #profile .pf-wd-tab:hover:not(.is-on) { color: #efe2c4; } #profile .pf-wd-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; } #profile #pf-wd-help { font-size: 20px; color: #bfb08e; } #profile .pf-wd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 20px; color: #d8c9a6; } #profile .pf-wd-filters [hidden] { display: none; } #profile .pf-wd-villager select, #profile .pf-ks-search input { margin-left: 8px; padding: 5px 10px; border: 1.5px solid #5d4a2e; border-radius: 8px; background: rgba(8, 10, 18, .7); color: #efe2c4; font: 20px var(--serif); } #profile .pf-wd-villager select:focus-visible, #profile .pf-ks-search input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } #profile .pf-wd-types { display: flex; flex-wrap: wrap; gap: 6px; } #profile .pf-chip { padding: 4px 14px; border: 1.5px solid #5d4a2e; border-radius: 999px; background: rgba(8, 10, 18, .55); color: #cdbf9f; font: 19px var(--serif); cursor: pointer; } #profile .pf-chip.is-on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 8px rgba(224, 180, 95, .35); } #profile .pf-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } #profile .pf-wd-owned { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } #profile .pf-wd-owned input { width: 20px; height: 20px; accent-color: #b3281f; } #profile .pf-wd-empty { font-size: 20px; color: #a89c86; font-style: italic; } #profile .pf-ks-search { display: block; } #profile .pf-ks-search input { margin-left: 0; width: 100%; box-sizing: border-box; } /* M45a: the switch and filters stay put; only the grid scrolls (a tall pet grid used to carry the switch out of view) */ #profile #pf-pets { overflow: hidden; } #profile #pf-pets .pf-wd-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } #profile #pf-keepsakes { overflow: hidden; } #profile #pf-keepsakes .pf-shelf { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #6b5537 transparent; } #profile #pf-pets > :not(.pf-wd-panel), #profile #pf-keepsakes > :not(.pf-shelf) { flex-shrink: 0; } /* only the grids give way */ #profile #pf-pets .pf-petgrid { grid-template-columns: repeat(4, 1fr); gap: 8px; } #profile #pf-pets .pf-pet { height: 104px; padding: 6px 4px; } #profile #pf-pets .pf-pet img { max-height: 58px; } #profile #pf-pets .pf-pet-none { line-height: 58px; } /* M45b: role keepsakes on the Wardrobe shelf — a list of cards (art · name, rarity, boost, source · equip) */ #profile .pf-ks-help { font-size: 19px; color: #bfb08e; } #profile .pf-ks-filters { display: flex; gap: 14px; font-size: 18px; color: #d8c9a6; } #profile .pf-ks-pick { display: inline-flex; align-items: center; gap: 6px; } #profile .pf-ks-pick select { padding: 4px 8px; border: 1.5px solid #5d4a2e; border-radius: 8px; background: rgba(8, 10, 18, .7); color: #efe2c4; font: 18px var(--serif); } #profile .pf-ks-pick select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } #profile .pf-ks-shelf { display: flex; flex-direction: column; gap: 8px; } #profile .pf-ks-card { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1.5px solid #3d3120; border-radius: 8px; background: rgba(8, 10, 18, .55); } #profile .pf-ks-card img { flex: none; width: 66px; height: 66px; object-fit: contain; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rarity) 34%, transparent) 0, transparent 68%); } #profile .pf-ks-card.is-locked img { filter: brightness(.18) saturate(0); } #profile .pf-ks-card.is-locked .pf-ks-name { color: #a89c86; } #profile .pf-ks-card.is-current { border-color: var(--gold); box-shadow: 0 0 12px rgba(224, 180, 95, .35); } #profile .pf-ks-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; } #profile .pf-ks-name { font-size: 19px; color: #efe2c4; } #profile .pf-ks-rarity { font-size: 14px; color: var(--rarity); letter-spacing: .04em; } #profile .pf-ks-boost { font-size: 15px; color: #e0c98f; } #profile .pf-ks-source { font-size: 13px; color: #a89c86; font-style: italic; } #profile .pf-ks-equip { flex: none; min-width: 96px; padding: 6px 12px; border: 1.5px solid #5d4a2e; border-radius: 8px; background: rgba(8, 10, 18, .7); color: #efe2c4; font: 16px var(--serif); cursor: pointer; } #profile .pf-ks-equip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: linear-gradient(180deg, rgba(179, 40, 31, .5), rgba(110, 22, 16, .5)); } #profile .pf-ks-equip:hover, #profile .pf-ks-equip:focus-visible { border-color: var(--gold); outline: none; } #profile .pf-ks-lock { flex: none; min-width: 96px; text-align: center; font-size: 14px; color: #8a7a5a; font-style: italic; } /* M45c: keepsakes at Mira's Stall — tile art, a still preview (they don't turn), and how to find the ones not for sale */ #stall .st-tile.is-keepsake .st-tile-label { flex-direction: column; align-items: center; gap: 0; padding: 3px 6px; } #stall .st-tile.is-keepsake .st-tile-name { max-width: 100%; } #stall .st-tile-art .st-keepsake { height: auto; max-height: 84px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); } #stall .st-keepsake-big { height: 80%; width: auto; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.7)); } #stall .st-how { font-size: 20px; font-style: italic; color: #cdbf9f; text-align: center; } /* ============ M45 (owner, option A) — Mira's Stall: hanging price tags, wax-seal status, name-only labels, Mira's receipt */ #stall .st-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #stall .st-tile-label { justify-content: center; } #stall .st-tile-name { text-align: center; } #stall .st-tile.is-keepsake .st-tile-label { flex-direction: row; padding: 4px 9px; } /* the tag: a parchment ticket on a string, pinned to the tile's top edge and swinging a little */ #stall .st-pricetag { position: absolute; top: 14px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 13px; background: linear-gradient(170deg, #f3e4bf, #d9c08a); color: #2b1d0f; font: bold 15px var(--serif); border-radius: 3px 5px 5px 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(90, 60, 20, .35); transform: rotate(7deg); transform-origin: 30% -12px; } #stall .st-pricetag img { width: 16px; height: 16px; } #stall .st-pricetag::after { content: ''; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #3a2a14; } /* the punched hole */ #stall .st-pricetag::before { content: ''; position: absolute; left: 6px; bottom: 100%; width: 1px; height: 13px; background: #c9b27a; transform: rotate(-7deg); transform-origin: bottom; } /* the string */ #stall .st-pricetag.is-word { font-style: italic; font-weight: normal; background: linear-gradient(170deg, #cfc6b4, #a89c86); } #stall .st-tile:hover .st-pricetag { transform: rotate(3deg); } @media (prefers-reduced-motion: reduce) { #stall .st-pricetag { transition: none; } } #stall .st-pricetag { transition: transform .25s; } /* the seal: status at the top-left */ #stall .st-seal { position: absolute; top: 8px; left: 8px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #e2554a, #8f1d16 70%); box-shadow: 0 0 0 1.5px rgba(60, 6, 4, .7), 0 2px 4px rgba(0, 0, 0, .6); color: #f6d58f; font-size: 15px; line-height: 1; } #stall .st-seal.is-owned { background: radial-gradient(circle at 38% 32%, #6fa05a, #2f5a26 70%); } #stall .st-seal.is-needs { background: #3a1510; padding: 2px; } #stall .st-seal.is-needs img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(.4); } /* the receipt: a parchment slip in Mira's hand, one line per cost */ #stall .st-price { display: block; } #stall .st-blurb { align-items: flex-start; line-height: 1.25; font-size: 19px; } #stall .st-receipt { display: flex; flex-direction: column; gap: 3px; width: 78%; margin: 0 auto; padding: 6px 14px 8px; box-sizing: border-box; background: linear-gradient(175deg, #f1e2bd, #dcc491); color: #2b1d0f; border-radius: 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(90, 60, 20, .3); transform: rotate(-.6deg); } #stall .st-receipt-h { font: italic 15px var(--serif); color: #6b4a1e; border-bottom: 1px dashed rgba(90, 60, 20, .45); padding-bottom: 2px; margin-bottom: 2px; } #stall .st-rrow { display: flex; align-items: center; gap: 8px; font-size: 17px; line-height: 1.2; } #stall .st-ricon { flex: none; width: 22px; height: 22px; display: grid; place-items: center; font-size: 15px; color: #6b4a1e; } #stall .st-ricon img, #stall .st-ricon .itile, #stall .st-ricon > * { max-width: 22px; max-height: 22px; border-radius: 3px; } #stall .st-rtext { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #stall .st-rrow b { flex: none; font-size: 15px; color: #8a1f14; } #stall .st-rrow b.is-met, #stall .st-rrow.is-met b { color: #2f5a26; } #stall .st-rrow .st-short { color: #8a1f14; font-weight: normal; font-style: italic; } #stall .st-rhow { font-size: 16px; font-style: italic; color: #4a3822; line-height: 1.3; } #stall .st-ricon .it-tile { width: 22px !important; height: 22px !important; min-width: 0; padding: 0; border-width: 1px; } #stall .st-ricon .it-tile img { width: 100%; height: 100%; object-fit: contain; } /* the receipt's rows are rows (an older .st-need rule stacked the icon over the text); long recipes use two columns */ #stall .st-receipt .st-rrow.st-need { flex-direction: row; align-items: center; gap: 8px; width: auto; padding: 0; background: none; border: 0; } #stall .st-receipt.is-long { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 2px; width: 94%; } #stall .st-receipt.is-long > * { grid-column: 1 / -1; } #stall .st-receipt.is-long > .st-rrow.st-need { grid-column: auto; font-size: 15px; } #stall .st-receipt.is-long .st-ricon { width: 18px; height: 18px; } #stall .st-receipt.is-long .st-ricon .it-tile { width: 18px !important; height: 18px !important; } #stall .st-keepsake-big { height: auto; max-height: 150px; max-width: 70%; } /* fits the shorter preview (184px) */ /* M45c: a keepsake found this match, on the score screen's "Your harvest" (private) */ #gameover .harvest-keepsake { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(224, 180, 95, .08); border: 1px solid rgba(224, 180, 95, .35); font-size: 15px; line-height: 1.35; } #gameover .harvest-ks-img { flex: none; width: 52px; height: 52px; object-fit: contain; } #gameover .harvest-keepsake.is-legendary { border-color: #e8a33d; box-shadow: 0 0 16px rgba(232, 163, 61, .45); background: rgba(232, 163, 61, .12); } #gameover .harvest-keepsake.is-legendary .harvest-ks-img { filter: drop-shadow(0 0 10px rgba(232, 163, 61, .9)); } /* M47b: the graveyard's night box — the pack box's shape, a ghostly pale-blue title instead of the pack's red */ #gravenight { position: fixed; left: 16px; bottom: 16px; z-index: 7; width: min(340px, 42vw); display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: rgba(9, 11, 20, .96); border: 1px solid #7a2a22; border-radius: 7px; box-shadow: inset 0 0 0 1px #0a0c14, 0 6px 18px rgba(0,0,0,.6), 0 0 18px rgba(179, 40, 31, .25); font-family: var(--serif); color: var(--ink); } #gravenight[hidden] { display: none; } #gravenight .packnight-title { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #ff9a86; } #gravenight .packnight-title small { margin-left: 6px; letter-spacing: 0; text-transform: none; color: var(--ink-dim); font-size: 12px; } #gravenight .packnight-log { max-height: 180px; overflow-y: auto; font-size: 14px; display: flex; flex-direction: column; gap: 3px; } #gravenight .msg { display: flex; align-items: flex-start; gap: 6px; } #gravenight .chat-face { width: 20px; height: 20px; border-radius: 3px; flex: none; } #gravenight .chat-time { font-size: .78em; color: var(--ink-dim); margin-top: .18em; } #gravenight .msg.is-system { color: var(--ink-dim); font-style: italic; } #gravenight form { display: flex; gap: 6px; } #gravenight input { flex: 1; min-width: 0; background: rgba(0,0,0,.45); color: #f1e3c2; border: 1px solid #5a2320; border-radius: 4px; font: 14px var(--serif); padding: 5px 8px; } #gravenight button { background: #7a1f18; color: #fbe6b8; border: 1px solid #b3281f; border-radius: 4px; cursor: pointer; padding: 0 10px; } #gravenight .packnight-title { color: #b8c2d6; } #gravenight { border-color: rgba(150, 170, 205, .45); } /* M47b: the Graveyard tab — the Pack tab's rules in pale blue; [hidden] must win or the living would see the tab */ #ui .chat .tab-grave { color: #b8c2d6; } #ui .chat .tab-grave[hidden] { display: none; } #ui .chat .tab-grave.is-active { color: #dbe3f1; box-shadow: inset 0 -2px 0 #7f94b8; } #ui .chat .tab-grave.has-unread::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: #9fb4d8; box-shadow: 0 0 6px #9fb4d8; vertical-align: .15em; } /* ============ M47c (owner) — the score screen on the parchment of the news and the Game Guide, and the Chronicle */ #gameover .nw-rule, #chronicle .nw-rule { display: block; width: 100%; height: 22px; padding: 0 12px; box-sizing: border-box; background: var(--gem) center / auto 100% no-repeat, var(--cap-l) left center / auto 100% no-repeat, var(--cap-r) right center / auto 100% no-repeat, var(--line) center / auto 100% repeat-x; background-clip: border-box, border-box, border-box, content-box; } #gameover.is-step2 .gameover-card { position: relative; isolation: isolate; width: min(900px, 95vw); max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; padding: 38px 48px 30px; background: none; border: 0; box-shadow: none; color: #2b1d0f; filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); } #gameover.is-step2 .gameover-card::before { content: ''; position: absolute; inset: 0; border: 40px solid transparent; border-image: var(--panel) 80 fill / 40px stretch; pointer-events: none; z-index: -1; } #gameover .gameover-banner { max-width: 360px; align-self: center; filter: drop-shadow(0 6px 10px rgba(40, 20, 5, .45)); } #gameover.is-step2 .gameover-title { margin: 10px 0 4px; font: normal 22px/1.3 var(--serif); font-variant: small-caps; letter-spacing: .02em; color: #1d140b; } #gameover .gameover-rule { margin: 4px 0 12px; flex: none; } #gameover .gameover-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; min-height: 0; flex: 1 1 auto; overflow: hidden; text-align: left; } #gameover .gameover-cols > * { min-height: 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #9b7a45 transparent; } @media (max-width: 760px) { #gameover .gameover-cols { grid-template-columns: 1fr; overflow-y: auto; } #gameover .gameover-cols > * { overflow: visible; } } /* ink on parchment */ #gameover.is-step2 .harvest-head { color: #6e1a0f; } #gameover.is-step2 .harvest-lines li { color: #2d2010; } #gameover.is-step2 .harvest-total { color: #1d140b; border-top-color: rgba(96, 64, 24, .45); font-weight: bold; } #gameover.is-step2 .harvest-balance, #gameover.is-step2 .harvest-ach { color: #2d2010; } #gameover.is-step2 .harvest-up { color: #2f5a26; } #gameover.is-step2 .harvest-practice { color: #5a4526; } #gameover.is-step2 .harvest-finds .find-status { color: #5a4526; } #gameover.is-step2 .harvest-keepsake { background: rgba(224, 180, 95, .16); border-color: rgba(138, 106, 54, .5); color: #2b1d0f; } #gameover.is-step2 .gameover-roles { max-height: none; } #gameover.is-step2 .gameover-row { border-bottom-color: rgba(96, 64, 24, .25); color: #2b1d0f; } #gameover.is-step2 .gameover-row .gameover-name { color: #1d140b; } #gameover.is-step2 .gameover-row.is-dead .gameover-name { color: #7a6a50; } #gameover.is-step2 .team-werewolf .gameover-role { color: #8a1f14; } #gameover.is-step2 .team-village .gameover-role { color: #2f5a26; } #gameover.is-step2 .gameover-fate { color: #6b5a40; } #gameover.is-step2 .gameover-earn { color: #4a3822; } #gameover.is-step2 .gameover-earn small { color: #6b5a40; } /* the painted Quick Links button for all three actions */ #gameover.is-step2 .gameover-actions { flex: none; margin-top: 16px; gap: 14px; } #gameover.is-step2 .gameover-actions button { min-width: 168px; height: 46px; padding: 0 22px; border: 0; border-radius: 0; background: var(--qbtn) center / 100% 100% no-repeat; color: #efe2c4; font: 16px var(--serif); text-shadow: 0 1px 2px #000; cursor: pointer; transition: filter .12s, transform .06s; } #gameover.is-step2 .gameover-actions button.quiet { opacity: .85; } #gameover.is-step2 .gameover-actions button:hover, #gameover.is-step2 .gameover-actions button:focus-visible { filter: brightness(1.3) drop-shadow(0 0 6px rgba(240, 196, 106, .55)); outline: none; } #gameover.is-step2 .gameover-actions button:active { transform: translateY(2px); filter: brightness(.75); } #gameover .gameover-actions button[hidden] { display: none; } #gameover.is-step2 .gameover-wait { color: #5a4526; } /* the Chronicle */ #chronicle { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(3, 5, 12, .62); font-family: var(--serif); } #chronicle[hidden] { display: none; } #chronicle .chr-card { position: relative; isolation: isolate; width: min(780px, 94vw); max-height: 88vh; display: flex; flex-direction: column; box-sizing: border-box; padding: 42px 52px 32px; color: #2b1d0f; filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); animation: nwm-unroll .3s cubic-bezier(.2, .8, .3, 1) both; transform-origin: 50% 0; } @media (prefers-reduced-motion: reduce) { #chronicle .chr-card { animation: none; } } #chronicle .chr-card::before { content: ''; position: absolute; inset: 0; border: 40px solid transparent; border-image: var(--panel) 80 fill / 40px stretch; pointer-events: none; z-index: -1; } #chronicle .chr-close { position: absolute; top: -14px; right: -14px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #d9a441; background: #0e1420; color: #f0c46a; font: 26px/1 var(--serif); cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.6); } #chronicle .chr-close:hover, #chronicle .chr-close:focus-visible { background: #6d1111; outline: none; } #chronicle .chr-title { margin: 0; font: normal 34px/1.1 var(--serif); font-variant: small-caps; letter-spacing: .02em; color: #1d140b; text-align: center; } #chronicle .chr-sub { margin: 4px 0 8px; font-style: italic; color: #5a4526; text-align: center; } #chronicle .chr-body { overflow-y: auto; margin-top: 10px; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #9b7a45 transparent; } #chronicle .chr-round + .chr-round { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(96, 64, 24, .35); } #chronicle .chr-h { margin: 0 0 4px; font: normal 22px var(--serif); font-variant: small-caps; color: #6e1a0f; } #chronicle .chr-when { margin: 8px 0 4px; font: normal 12px var(--serif); letter-spacing: .14em; text-transform: uppercase; color: #7a5a2a; } #chronicle .chr-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } #chronicle .chr-lines li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.4; } #chronicle .chr-lines li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: #9b8a6a; } #chronicle .chr-lines li.is-death::before { background: #8a1f14; } #chronicle .chr-lines li.is-death { color: #6e1a0f; } #chronicle .chr-lines li.is-save::before { background: #2f5a26; } #chronicle .chr-lines li.is-wolf::before { background: #4a1510; } #chronicle .chr-lines li.is-fire::before { background: #c9731f; } #chronicle .chr-lines li.is-vote::before { background: #6b5a40; } /* M47c: username colours were made for dark panels (Candle White vanishes on parchment) — keep the earned colour, give it a fine dark outline */ #gameover.is-step2 .gameover-name[style*="color"] { text-shadow: 0 0 1px #1d140b, 0 0 1px #1d140b, 0 1px 2px rgba(0, 0, 0, .85); } /* M47c: rarity colours were made for dark panels too (Common's pale gold vanished on parchment) — keep the colour, outline it */ #gameover.is-step2 .harvest-finds .find-row [style*="color"] { text-shadow: 0 0 1px #1d140b, 0 0 1px #1d140b, 0 1px 2px rgba(0, 0, 0, .85); } /* M47c (owner): finds as pictures alone — the status keeps its place on the right; name and rarity are the hover label */ .harvest-finds .find-row { grid-template-columns: 46px 1fr; } .harvest-finds .find-row .find-status, .harvest-finds .find-row .find-choose { justify-self: end; } .find-tile { display: inline-flex; cursor: help; } /* ============ M48 — the Village Gate: the sign-in page on the Welcome & News frame (LoginUI) */ #login.gate { background: rgba(4, 6, 14, .45); } #login .nw-slide { position: absolute; inset: 0; } #login .nw-space { position: absolute; left: 0; top: 0; width: 828px; height: 1483px; transform-origin: 0 0; color: #2b1d0f; } #login .nw-space > * { position: absolute; box-sizing: border-box; } #login .nw-frame { left: 0; top: 0; width: 828px; height: 1483px; user-select: none; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 16px 34px rgba(0,0,0,.6)); } #login .gt-subtitle { left: 0; top: 199px; width: 828px; height: 34px; margin: 0; text-align: center; font: 20px/34px var(--serif); letter-spacing: .24em; text-transform: uppercase; color: #e6c98f; text-shadow: 0 2px 3px #000; pointer-events: none; } #login .gt-subtitle span { color: #d9a441; letter-spacing: .1em; margin: 0 .15em; } #login .nw-sec { display: flex; flex-direction: column; padding: 16px 30px 12px; isolation: isolate; } /* keeps each panel above the frame */ #login .nw-sec::before { content: ''; position: absolute; inset: 0; border: 30px solid transparent; border-image: var(--panel) 80 fill / 30px stretch; pointer-events: none; z-index: -2; } #login .nw-h { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: normal 32px/1.15 var(--serif); font-variant: small-caps; letter-spacing: .015em; color: #1d140b; text-shadow: 0 1px 0 rgba(255,240,205,.5); } #login .nw-h-text { white-space: nowrap; } #login .nw-rule, #gate-modal .nw-rule { display: block; flex: 1 1 60px; min-width: 60px; height: 22px; padding: 0 12px; background: var(--gem) center / auto 100% no-repeat, var(--cap-l) left center / auto 100% no-repeat, var(--cap-r) right center / auto 100% no-repeat, var(--line) center / auto 100% repeat-x; background-clip: border-box, border-box, border-box, content-box; } /* the hero card: the owner's art, the pitch on its parchment side; one button → the overview */ #login .gt-hero { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: filter .15s; } #login .gt-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } #login .gt-hero-text { position: absolute; left: 9%; top: 17%; width: 49%; bottom: 15%; display: flex; flex-direction: column; gap: 4px; } #login .gt-hero-lead { font: normal 25px/1.1 var(--serif); font-variant: small-caps; color: #1d140b; } #login .gt-hero-pitch { font-size: 15px; line-height: 1.3; color: #2d2010; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } #login .gt-more { margin-top: auto; font-style: normal; font-size: 16px; color: #8a1f14; text-decoration: underline; text-decoration-color: rgba(138,31,20,.45); text-underline-offset: 3px; } #login .gt-hero:hover, #login .gt-hero:focus-visible { filter: brightness(1.06) drop-shadow(0 0 10px rgba(240, 196, 106, .55)); outline: none; } /* the forms: ink on parchment */ #login .gt-form, #gate-modal .gm-form { display: flex; flex-direction: column; gap: 8px; } #login .gt-label, #gate-modal .gt-label { display: flex; flex-direction: column; gap: 4px; font-size: 18px; color: #3a2a16; } #gate-modal .gt-label small { font-size: 14px; color: #6b5a40; } #login .gt-input, #gate-modal .gt-input { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1.5px solid #8a6a36; border-radius: 6px; background: rgba(255, 248, 230, .72); font: 21px var(--serif); color: #1d140b; box-shadow: inset 0 2px 4px rgba(90, 60, 20, .18); outline: none; } #login .gt-input:focus-visible, #gate-modal .gt-input:focus-visible { border-color: #b8862f; box-shadow: inset 0 2px 4px rgba(90, 60, 20, .18), 0 0 0 3px rgba(224, 180, 95, .45); } #login .gt-input.is-error, #gate-modal .gt-input.is-error { border-color: #a3261a; box-shadow: 0 0 0 3px rgba(163, 38, 26, .3); } #login .gt-pass { position: relative; display: block; } #login .gt-pass .gt-input { padding-right: 52px; } #login .gt-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: #6b5a40; font-size: 20px; cursor: pointer; } #login .gt-eye[aria-pressed="true"] { color: #6e1a0f; } #login .gt-eye:hover, #login .gt-eye:focus-visible { background: rgba(224, 180, 95, .3); outline: none; } #login .gt-caps { margin: 0; font-size: 15px; font-style: italic; color: #8a1f14; } #login .gt-caps[hidden] { display: none; } #login .gt-back { margin: 0 0 4px; font-size: 18px; color: #3a2a16; } #login .gt-back[hidden] { display: none; } #login .gt-link { border: 0; background: none; padding: 0; font: inherit; font-size: 16px; color: #8a1f14; text-decoration: underline; cursor: pointer; } #login .login-msg, #gate-modal .login-msg { min-height: 24px; font-size: 16px; color: #5a4526; text-align: center; } #login .login-msg, #gate-modal .login-msg { display: block; white-space: normal; overflow: visible; line-height: 1.35; } /* M52a: a ban notice (end + reason) is a sentence or two — let it wrap instead of clipping both ends */ #login .login-msg.is-error, #gate-modal .login-msg.is-error { color: #8a1f14; } /* the owner's long painted button */ #login .gt-btn, #gate-modal .gt-btn { height: 66px; padding: 0 30px; border: 0; background: var(--long) center / 100% 100% no-repeat; color: #efe2c4; font: 24px var(--serif); font-variant: small-caps; letter-spacing: .06em; text-shadow: 0 2px 3px #000; cursor: pointer; transition: filter .12s, transform .06s; } #login .gt-btn:hover, #login .gt-btn:focus-visible, #gate-modal .gt-btn:hover, #gate-modal .gt-btn:focus-visible { filter: brightness(1.25) drop-shadow(0 0 8px rgba(240, 196, 106, .55)); outline: none; } #login .gt-btn:active, #gate-modal .gt-btn:active { transform: translateY(2px); filter: brightness(.8); } #login .gt-btn:disabled, #gate-modal .gt-btn:disabled { filter: grayscale(.5) brightness(.8); cursor: default; } #login .gt-or { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; color: #6b5a40; font-style: italic; } #login .gt-or i { flex: 1; height: 1px; background: rgba(96, 64, 24, .4); } #login .gt-or[hidden], #login .gt-providers[hidden] { display: none; } #login .gt-new-text { margin: 0 0 12px; font-size: 19px; line-height: 1.35; color: #2d2010; } #login .gt-guide { background: none; border: 0; font: 23px var(--serif); letter-spacing: .08em; text-transform: uppercase; color: #efe2c4; text-shadow: 0 2px 3px #000; cursor: pointer; border-radius: 8px; } #login .gt-guide:hover, #login .gt-guide:focus-visible { color: #ffe0a0; outline: none; background: radial-gradient(ellipse at center, rgba(224, 180, 95, .2), transparent 70%); } /* signed in: the page slides out to the left while the news slides in (owner: not the page-turn); a wrong password shakes it */ #login.is-leaving .nw-slide { animation: gt-out .6s cubic-bezier(.5, 0, .75, .4) forwards; } @keyframes gt-out { to { transform: translateX(-70vw); opacity: 0; } } #login.is-leaving { background: transparent; transition: background .5s; } #login .nw-slide.is-shake { animation: gt-shake .42s; } @keyframes gt-shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } } @media (prefers-reduced-motion: reduce) { #login.is-leaving .nw-slide { animation: none; opacity: 0; } #login .nw-slide.is-shake { animation: none; } } /* the pop-ups: the overview and create an account */ #gate-modal { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(3, 5, 12, .62); font-family: var(--serif); } #gate-modal[hidden] { display: none; } #gate-modal .gm-card { position: relative; isolation: isolate; width: min(740px, 94vw); max-height: 92vh; display: flex; flex-direction: column; box-sizing: border-box; padding: 40px 50px 30px; color: #2b1d0f; filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); animation: nwm-unroll .3s cubic-bezier(.2, .8, .3, 1) both; transform-origin: 50% 0; } #gate-modal .gm-card::before { content: ''; position: absolute; inset: 0; border: 40px solid transparent; border-image: var(--panel) 80 fill / 40px stretch; pointer-events: none; z-index: -1; } @media (prefers-reduced-motion: reduce) { #gate-modal .gm-card { animation: none; } } #gate-modal .gm-close { position: absolute; top: -14px; right: -14px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #d9a441; background: #0e1420; color: #f0c46a; font: 26px/1 var(--serif); cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.6); } #gate-modal .gm-close:hover, #gate-modal .gm-close:focus-visible { background: #6d1111; outline: none; } #gate-modal .gm-title { margin: 0; text-align: center; font: normal 32px/1.1 var(--serif); font-variant: small-caps; color: #1d140b; } #gate-modal .nw-rule { flex: none; width: 100%; margin: 8px 0 12px; } #gate-modal .gm-body { overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #9b7a45 transparent; } #gate-modal .gm-lead { margin: 0 0 12px; font-size: 18px; line-height: 1.4; color: #2d2010; } #gate-modal .gm-h { margin: 6px 0 8px; font: normal 22px var(--serif); font-variant: small-caps; color: #6e1a0f; } #gate-modal .gm-roles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } #gate-modal .gm-role { margin: 0; display: flex; flex-direction: column; gap: 6px; } #gate-modal .gm-role img { width: 100%; aspect-ratio: 880 / 1300; height: auto; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(40, 20, 5, .45)); } #gate-modal .gm-role figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.3; color: #3a2a16; } #gate-modal .gm-role b { font-size: 15px; font-variant: small-caps; color: #1d140b; } #gate-modal .gm-actions { display: flex; gap: 12px; margin-top: 16px; } #gate-modal .gm-actions .gt-btn { flex: 1; height: 60px; font-size: 20px; } @media (max-width: 720px) { #gate-modal .gm-roles { grid-template-columns: repeat(3, 1fr); } #gate-modal .gm-actions { flex-direction: column; } } #gate-modal .gm-note { margin: -2px 0 4px; font-size: 14px; color: #6b5a40; } #gate-modal .gm-note.is-free { color: #2f5a26; } #gate-modal .gm-note.is-taken { color: #8a1f14; } #gate-modal .gm-rules { margin: 6px 0 2px; padding: 10px 14px; border: 1.5px solid rgba(138, 106, 54, .55); border-radius: 8px; background: rgba(255, 248, 230, .4); } #gate-modal .gm-rules legend { padding: 0 6px; font-variant: small-caps; font-size: 18px; color: #6e1a0f; } #gate-modal .gm-rules ol { margin: 0 0 8px; padding-left: 22px; font-size: 15px; line-height: 1.4; color: #2d2010; } #gate-modal .gm-agree { display: flex; align-items: center; gap: 10px; font-size: 17px; color: #1d140b; cursor: pointer; } #gate-modal .gm-agree input { width: 20px; height: 20px; accent-color: #6e1a0f; } #gate-modal .gm-go { margin-top: 6px; } #login .gt-keeps { margin: 0 0 16px; padding-left: 24px; font-size: 18px; line-height: 1.45; color: #2d2010; } #login .gt-keeps li::marker { color: #8a1f14; } #gate-modal .gt-btn.is-plain { background-image: var(--qbtn); font-size: 19px; } /* the plain Quick Links button: the long one's flourishes cross longer words */ /* M47d: the Daily Harvest — a line under the news's welcome, a box at the top of the Profile's Stats, lines on the score screen */ #news .nw-daily { position: relative; margin-top: auto; align-self: flex-start; font-size: 18px; color: #6e1a0f; text-decoration: underline; text-decoration-color: rgba(138,31,20,.4); text-underline-offset: 3px; } #news .nw-daily[hidden] { display: none; } #news .nw-daily b { font-weight: normal; color: #2d2010; } #news .nw-daily:hover, #news .nw-daily:focus-visible { color: #a3261a; outline: none; } #profile .pf-daily { margin: 0 0 14px; padding: 10px 14px; border: 1.5px solid rgba(224, 180, 95, .45); border-radius: 8px; background: rgba(8, 10, 18, .45); } #profile .pf-daily:empty { display: none; } #profile .pf-daily .pf-sub small { font-size: .7em; color: #bfb08e; letter-spacing: 0; text-transform: none; margin-left: 8px; } #profile .pf-daily-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #profile .pf-daily-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; font-size: 20px; color: #efe2c4; } #profile .pf-daily-list li.is-done .pf-daily-text { color: #9fbf8a; text-decoration: line-through; text-decoration-color: rgba(159, 191, 138, .5); } #profile .pf-daily-prog { color: #e0c98f; } #profile .pf-daily-silver { color: #d8d0c0; } #gameover.is-step2 .harvest-daily { color: #2f5a26; } /* ============ M49 — the shared parchment kit (the news / Game Guide / Chronicle look for any screen). Vars: index.html. */ .parch { position: relative; isolation: isolate; box-sizing: border-box; color: #2b1d0f; font-family: var(--serif); filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); } .parch::before { content: ''; position: absolute; inset: 0; border: 40px solid transparent; border-image: var(--parch-panel) 80 fill / 40px stretch; pointer-events: none; z-index: -1; } .parch-title { margin: 0; text-align: center; font: normal 32px/1.1 var(--serif); font-variant: small-caps; letter-spacing: .015em; color: #1d140b; text-shadow: 0 1px 0 rgba(255,240,205,.5); } .parch-h { margin: 0 0 6px; font: normal 21px var(--serif); font-variant: small-caps; color: #6e1a0f; } .parch-rule { display: block; width: 100%; height: 22px; margin: 8px 0 12px; padding: 0 12px; box-sizing: border-box; flex: none; background: var(--parch-gem) center / auto 100% no-repeat, var(--parch-cap-l) left center / auto 100% no-repeat, var(--parch-cap-r) right center / auto 100% no-repeat, var(--parch-line) center / auto 100% repeat-x; background-clip: border-box, border-box, border-box, content-box; } .parch-close { position: absolute; top: -14px; right: -14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #d9a441; background: #0e1420; color: #f0c46a; font: 26px/1 var(--serif); cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.6); } .parch-close:hover, .parch-close:focus-visible { background: #6d1111; outline: none; } .parch-btn { height: 46px; padding: 0 22px; border: 0; background: var(--parch-qbtn) center / 100% 100% no-repeat; color: #efe2c4; font: 17px var(--serif); text-shadow: 0 1px 2px #000; cursor: pointer; transition: filter .12s, transform .06s; } .parch-btn:hover, .parch-btn:focus-visible { filter: brightness(1.3) drop-shadow(0 0 6px rgba(240, 196, 106, .55)); outline: none; } .parch-btn:active { transform: translateY(2px); filter: brightness(.75); } .parch-input { box-sizing: border-box; padding: 8px 12px; border: 1.5px solid #8a6a36; border-radius: 6px; background: rgba(255, 248, 230, .72); font: 18px var(--serif); color: #1d140b; box-shadow: inset 0 2px 4px rgba(90, 60, 20, .18); outline: none; } .parch-input:focus-visible { border-color: #b8862f; box-shadow: inset 0 2px 4px rgba(90, 60, 20, .18), 0 0 0 3px rgba(224, 180, 95, .45); } .parch-input::placeholder { color: #8a7a5a; } .parch-chip { padding: 4px 14px; border: 1.5px solid rgba(138, 106, 54, .6); border-radius: 999px; background: rgba(255, 248, 230, .45); color: #3a2a16; font: 16px var(--serif); cursor: pointer; } .parch-chip.is-on, .parch-chip[aria-pressed="true"] { border-color: #6e1a0f; background: #6e1a0f; color: #f6e7c4; } .parch-chip:focus-visible { outline: 2px solid #b8862f; outline-offset: 2px; } /* a switch: */ .parch-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 18px; color: #2b1d0f; } .parch-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .parch-knob { position: relative; flex: none; width: 46px; height: 24px; border-radius: 12px; background: #b9a582; box-shadow: inset 0 2px 4px rgba(60, 40, 10, .4); transition: background .15s; } .parch-knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #f6ecd2; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .15s; } .parch-switch input:checked + .parch-knob { background: #6e1a0f; } .parch-switch input:checked + .parch-knob::after { transform: translateX(22px); } .parch-switch input:focus-visible + .parch-knob { outline: 2px solid #b8862f; outline-offset: 2px; } .parch-note { font-size: 14px; color: #6b5a40; } .parch-range { width: 100%; accent-color: #6e1a0f; } /* M49: the villager picker on parchment — search, chips, Surprise me; bigger cards with the villager's trade */ #lobby .wr-picker-pop.parch { left: 0; top: 50px; width: 1080px; max-height: 800px; padding: 44px 52px 32px; display: flex; flex-direction: column; background: none; border: 0; box-shadow: none; z-index: 5; } #lobby .pk-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; flex: none; } #lobby .pk-q { width: 300px; } #lobby .pk-chips { display: flex; gap: 6px; flex-wrap: wrap; } #lobby .pk-random { margin-left: auto; } #lobby .wr-picker-pop.parch .lobby-picker-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; overflow-y: auto; padding: 2px 6px 2px 2px; scrollbar-width: thin; scrollbar-color: #9b7a45 transparent; } #lobby .wr-picker-pop.parch .lobby-pick { padding: 10px 6px 8px; gap: 2px; border: 1.5px solid rgba(138, 106, 54, .5); border-radius: 8px; background: rgba(255, 248, 230, .5); color: #2b1d0f; font: 16px var(--serif); transition: transform .12s, box-shadow .12s; } #lobby .wr-picker-pop.parch .lobby-pick[hidden] { display: none; } #lobby .wr-picker-pop.parch .lobby-pick img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(40, 20, 5, .4)); } #lobby .wr-picker-pop.parch .lobby-pick:not(:disabled):hover, #lobby .wr-picker-pop.parch .lobby-pick:not(:disabled):focus-visible { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(60, 35, 10, .35); border-color: #b8862f; outline: none; } #lobby .wr-picker-pop.parch .pk-name { font-size: 17px; font-weight: bold; color: #1d140b; } #lobby .wr-picker-pop.parch .pk-trade { font-size: 13px; font-style: italic; color: #6b5a40; } #lobby .wr-picker-pop.parch .lobby-pick-holder { margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: rgba(96, 64, 24, .15); color: #4a3822; font-size: 12px; } #lobby .wr-picker-pop.parch .lobby-pick.is-mine { opacity: 1; border: 2px solid #b8862f; box-shadow: 0 0 10px rgba(224, 180, 95, .7); background: rgba(255, 240, 200, .75); } #lobby .wr-picker-pop.parch .lobby-pick.is-mine .lobby-pick-holder { background: #6e1a0f; color: #f6e7c4; } #lobby .wr-picker-pop.parch .lobby-pick.is-locked { opacity: 1; } #lobby .wr-picker-pop.parch .lobby-pick.is-locked img { filter: grayscale(.85) brightness(.75); } #lobby .wr-picker-pop.parch .lobby-pick.is-locked .lobby-pick-holder { background: rgba(138, 31, 20, .15); color: #6e1a0f; } #lobby .wr-picker-pop.parch .pk-empty { margin: 14px 0 0; text-align: center; font-style: italic; color: #6b5a40; } #lobby .wr-picker-pop.parch .pk-empty[hidden] { display: none; } #lobby .wr-picker-pop.parch .lobby-msg { color: #8a1f14; } /* M49: Settings on parchment — two columns: Sound + Comfort | The Village; switches; the old dark-panel rules are more specific, so scope over them */ #settings .settings-card.parch { width: min(980px, 94vw); max-height: 92vh; overflow-y: auto; padding: 42px 52px 30px; background: none; border: 0; box-shadow: none; color: #2b1d0f; } #settings .set-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; } @media (max-width: 720px) { #settings .set-cols { grid-template-columns: 1fr; } } #settings .set-sec + .set-sec { margin-top: 14px; } #settings .parch-switch { margin: 12px 0; align-items: flex-start; font-size: 18px; } #settings .parch-switch .parch-knob { margin-top: 2px; } #settings .set-text { display: flex; flex-direction: column; gap: 2px; } #settings .set-text .settings-hint { color: #6b5a40; font-size: 14px; } #settings .set-range { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 4px 0 10px 58px; font-size: 15px; color: #4a3822; } #settings #set-sound-status { color: #8a1f14; font-size: 14px; margin-left: 58px; } #settings #set-sound-status:empty { display: none; } #settings .settings-actions { text-align: center; margin-top: 16px; } #settings button.parch-btn { background: var(--parch-qbtn) center / 100% 100% no-repeat; border: 0; border-radius: 0; color: #efe2c4; min-width: 170px; height: 46px; font-size: 17px; } #settings button.parch-close { background: #0e1420; border: 2px solid #d9a441; border-radius: 50%; color: #f0c46a; padding: 0; font-size: 26px; } #settings button.parch-close:hover { background: #6d1111; } #settings h2.parch-title { font-size: 32px; margin: 0; } /* the old #settings h2 rule outranked the kit title */ /* M49: the player card on parchment — portrait, name, title and level, stats, then its sections (CARD_SECTIONS: Background, Recent …) */ #profilecard .profilecard-box.parch { width: min(620px, 94vw); max-height: 88vh; overflow-y: auto; padding: 40px 46px 30px; background: none; border: 0; box-shadow: none; color: #2b1d0f; } #profilecard .pc-head { display: flex; align-items: center; gap: 18px; } #profilecard .pc-avatar { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(40, 20, 5, .45)); } #profilecard .pc-who { min-width: 0; } #profilecard .profilecard-name { margin: 0; font: normal 32px/1.1 var(--serif); color: #1d140b; } #profilecard .profilecard-name[style*="color"] { text-shadow: 0 0 1px #1d140b, 0 0 1px #1d140b, 0 1px 2px rgba(0, 0, 0, .85); } #profilecard .pc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; } #profilecard .pc-tag { padding: 2px 10px; border-radius: 999px; background: #6e1a0f; color: #f6e7c4; font-size: 14px; font-variant: small-caps; } #profilecard .pc-since { margin: 2px 0 0; font-size: 14px; font-style: italic; color: #6b5a40; } #profilecard .pc-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; text-align: center; margin-bottom: 8px; } #profilecard .pc-strip b { display: block; font-size: 22px; color: #1d140b; } #profilecard .pc-strip span { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #6b5a40; } @media (max-width: 560px) { #profilecard .pc-strip { grid-template-columns: repeat(3, 1fr); } } #profilecard .pc-sec { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(96, 64, 24, .3); } #profilecard .pc-bg { margin: 0; font-size: 17px; line-height: 1.45; color: #2d2010; white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } #profilecard .pc-bg.is-open { display: block; -webkit-line-clamp: unset; } #profilecard .pc-more { margin-top: 4px; padding: 0; border: 0; background: none; font: 16px var(--serif); color: #8a1f14; text-decoration: underline; cursor: pointer; } #profilecard .pc-more[hidden] { display: none; } #profilecard .pc-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } #profilecard .pc-recent li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; font-size: 15px; color: #3a2a16; } #profilecard .pc-recent b { font-weight: normal; } #profilecard .pc-recent .is-won b { color: #2f5a26; } #profilecard .pc-recent .is-lost b { color: #8a1f14; } #profilecard button.parch-close { opacity: 1; background: #0e1420; border: 2px solid #d9a441; color: #f0c46a; } /* the old card's quiet close button showed through */ #profilecard button.parch-close:hover, #profilecard button.parch-close:focus-visible { background: #6d1111; } #profilecard .pc-sec .parch-h { color: #6e1a0f; font-size: 19px; } /* ============ M50a (owner) — Admin on parchment: the Warden's Ledger. Scoped under #admin so it outranks the M24 .adm-* rules. */ #admin .adm-panel.parch { width: min(1320px, 96vw); height: min(880px, 93vh); padding: 44px 52px 34px; color: #2b1d0f; background: none; border: 0; box-shadow: none; } #admin .adm-head { gap: 14px; } #admin .adm-head img { width: 54px; height: 54px; filter: drop-shadow(0 3px 5px rgba(40, 20, 5, .45)); } #admin .adm-titles { display: flex; flex-direction: column; } #admin .adm-head h2.parch-title { text-align: left; font-size: 34px; letter-spacing: .02em; text-transform: none; color: #1d140b; } #admin .adm-sub { margin: 0; font-style: italic; color: #6b5a40; font-size: 16px; } #admin .adm-who { color: #6b5a40; font-size: 16px; font-style: italic; } #admin .adm-ledger { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr; gap: 28px; } #admin .adm-tabs { flex-direction: column; gap: 4px; margin: 0; padding: 4px 16px 4px 0; border: 0; border-right: 1.5px solid rgba(96, 64, 24, .35); overflow-y: auto; } #admin .adm-tabs button { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: #3a2a16; font: 19px var(--serif); text-align: left; height: auto; } #admin .adm-tabs button:hover, #admin .adm-tabs button:focus-visible { background: rgba(224, 180, 95, .22); outline: none; } #admin .adm-tabs button[aria-selected="true"] { background: rgba(110, 26, 15, .12); color: #6e1a0f; } #admin .adm-tabs button::before { content: attr(data-seal); flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #b24a3e, #6e1a0f 70%); color: #f6d58f; font-size: 15px; font-variant: small-caps; box-shadow: 0 0 0 1.5px rgba(60, 6, 4, .5), 0 2px 3px rgba(0, 0, 0, .35); opacity: .7; } #admin .adm-tabs button[aria-selected="true"]::before { opacity: 1; box-shadow: 0 0 0 2px #d9a441, 0 0 10px rgba(224, 180, 95, .7); } #admin .adm-page { display: flex; flex-direction: column; min-height: 0; } #admin .adm-page-h { font-size: 26px; margin: 0; } #admin .adm-msg { min-height: 22px; margin: 2px 0 6px; font-size: 15px; color: #2f5a26; } #admin .adm-msg.is-error { color: #8a1f14; } #admin .adm-body { scrollbar-color: #9b7a45 transparent; } #admin .adm-card { background: rgba(255, 248, 230, .55); border: 1.5px solid rgba(138, 106, 54, .45); border-radius: 8px; color: #2b1d0f; } #admin .adm-card h3 { color: #6e1a0f; font-variant: small-caps; letter-spacing: .02em; text-transform: none; font-size: 19px; } #admin .adm-dim { color: #6b5a40; } #admin .adm-note { color: #4a3822; } #admin .adm-tag { background: rgba(96, 64, 24, .15); color: #3a2a16; } #admin .adm-tag.is-you { background: #6e1a0f; color: #f6e7c4; } #admin .adm-tag.is-bad { background: #8a1f14; color: #f6e7c4; } #admin .adm-role { background: rgba(96, 64, 24, .15); color: #3a2a16; } #admin .adm-role.is-werewolf { background: #8a1f14; color: #f6e7c4; } #admin .adm-role.is-seer { background: #4a3a7a; color: #f0eaff; } #admin .adm-role.is-doctor { background: #2f5a26; color: #eaf6e4; } #admin .adm-role.is-woodsman { background: #6b4a1e; color: #f6ecd8; } #admin .adm-panel button:not(.adm-close):not([role="tab"]) { height: 36px; padding: 0 16px; border: 0; border-radius: 0; background: var(--parch-qbtn) center / 100% 100% no-repeat; color: #efe2c4; font: 15px var(--serif); text-shadow: 0 1px 2px #000; } #admin .adm-panel button:not(.adm-close):not([role="tab"]):hover, #admin .adm-panel button:not(.adm-close):not([role="tab"]):focus-visible { filter: brightness(1.3) drop-shadow(0 0 6px rgba(240, 196, 106, .55)); outline: none; } #admin .adm-panel button.is-danger { background: #6e1a0f; border: 1.5px solid #d9a441; border-radius: 6px; } #admin .adm-panel input:not([type="checkbox"]), #admin .adm-panel select, #admin .adm-panel textarea { padding: 6px 10px; border: 1.5px solid #8a6a36; border-radius: 6px; background: rgba(255, 248, 230, .75); color: #1d140b; font: 15px var(--serif); box-shadow: inset 0 2px 4px rgba(90, 60, 20, .15); } #admin .adm-panel input:focus-visible, #admin .adm-panel select:focus-visible, #admin .adm-panel textarea:focus-visible { outline: none; border-color: #b8862f; box-shadow: 0 0 0 3px rgba(224, 180, 95, .45); } #admin .adm-panel input[type="checkbox"] { accent-color: #6e1a0f; } #admin .adm-panel label { color: #3a2a16; font-size: 14px; } #admin .adm-table th { color: #6b5a40; position: sticky; top: 0; background: #efe0bd; } #admin .adm-table td { border-bottom: 1px solid rgba(96, 64, 24, .2); color: #2b1d0f; } #admin .adm-table tbody tr:hover td { background: rgba(224, 180, 95, .15); } #admin .adm-excerpt { background: rgba(255, 248, 230, .6); border: 1px solid rgba(138, 106, 54, .4); color: #2b1d0f; } #admin .adm-excerpt li.is-target { background: rgba(163, 38, 26, .15); } #admin .adm-out { border-color: #6b5537; } /* the console stays a dark slate */ #admin .adm-seats li { color: #2b1d0f; } #admin .adm-panel button.adm-close { width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 2px solid #d9a441; background: #0e1420; color: #f0c46a; font: 26px/1 var(--serif); } /* the M24 .adm-panel button rule outranked the kit close */ #admin .adm-panel button.adm-close:hover, #admin .adm-panel button.adm-close:focus-visible { background: #6d1111; } #admin .adm-out:empty { display: none; } /* result boxes appear once they have something to say */ /* M50b: the news editor (the Warden's Ledger → News) and the Preview banner on the real panel */ #admin .ne-status { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; font-size: 15px; color: #4a3822; } #admin .ne-dirty { color: #8a1f14; } #admin .ne-bar { position: sticky; top: 0; z-index: 2; padding: 6px 0 10px; background: linear-gradient(#f0e2c0 80%, rgba(240, 226, 192, 0)); } #admin .ne-bar .ne-versions { margin-left: auto; max-width: 320px; } #admin .ne-problems { margin: 0 0 12px; padding: 10px 14px 10px 30px; border: 1.5px solid #a3261a; border-radius: 8px; background: rgba(163, 38, 26, .08); color: #6e1a0f; font-size: 15px; } #admin .ne-sec > summary, #admin .ne-item > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; } #admin .ne-sec > summary::-webkit-details-marker, #admin .ne-item > summary::-webkit-details-marker { display: none; } #admin .ne-sec > summary h3 { margin: 0; } #admin .ne-sec > summary::before, #admin .ne-item > summary::before { content: '▸'; color: #8a6a36; transition: transform .15s; } #admin .ne-sec[open] > summary::before, #admin .ne-item[open] > summary::before { transform: rotate(90deg); } #admin .ne-vis { margin: 0 0 0 auto; } #admin .ne-sec-body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } #admin .ne-item { padding: 8px 12px; border: 1px solid rgba(138, 106, 54, .4); border-radius: 6px; background: rgba(255, 252, 240, .5); } #admin .ne-item + .ne-item { margin-top: 6px; } #admin .ne-item[open] { background: rgba(255, 252, 240, .8); } #admin .ne-item > summary b { font-weight: normal; font-size: 17px; } #admin .ne-field { display: flex; flex-direction: column; gap: 3px; } #admin .ne-field textarea { width: 100%; box-sizing: border-box; resize: vertical; font: 15px/1.45 var(--serif); } #admin .ne-field input[type="text"], #admin .ne-field select, #admin .ne-field input[type="datetime-local"] { width: 100%; box-sizing: border-box; } #admin .ne-count { margin-left: 6px; font-size: 12px; color: #8a7a5a; } #admin .ne-count.is-over { color: #a3261a; font-weight: bold; } #admin .ne-2 { grid-template-columns: 1fr 1fr; } #admin .ne-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } #admin .ne-art-row { display: flex; gap: 8px; align-items: center; } #admin .ne-art-row select { flex: 1; } #admin .ne-thumb { width: 44px; height: 44px; object-fit: contain; border-radius: 4px; background: rgba(40, 25, 10, .15); } #admin .ne-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } #admin .ne-link { margin: 0; padding: 10px; } #admin .ne-item-tools { margin-top: 8px; } #news .nw-previewbar { left: 64px; top: 216px; width: 699px; height: 40px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 8px; background: #6e1a0f; color: #f6e7c4; font-size: 19px; box-shadow: 0 4px 10px rgba(0,0,0,.4); } #news .nw-previewbar[hidden] { display: none; } #news .nw-previewbar button { padding: 4px 14px; border: 1.5px solid #d9a441; border-radius: 6px; background: #1d140b; color: #f0c46a; font: 16px var(--serif); cursor: pointer; } /* M50c fix (owner: "the X in the top right is cut off and there is a slider to slide back and forth"): a scrolling box clips what sits outside it — the kit's × (14 px past the corner) was cut in half and made the card scroll sideways. The card no longer scrolls; the content inside does. Same for the player card. */ #settings .settings-card.parch { overflow: visible; display: flex; flex-direction: column; max-height: 92vh; } #settings .settings-card.parch .set-cols { min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #9b7a45 transparent; } #settings .settings-card.parch .settings-actions { flex: none; } #profilecard .profilecard-box.parch { overflow: visible; display: flex; flex-direction: column; max-height: 88vh; } #profilecard .profilecard-box.parch .profilecard-body { min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #9b7a45 transparent; } /* M50c: the crop dialog (inside the ledger) and your uploads */ #admin .ne-upload { flex: none; } #admin .ne-crop { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(30, 18, 6, .45); border-radius: 12px; } #admin .ne-crop-card { width: max-content; max-width: 92%; background: #f3e6c6; box-shadow: 0 16px 40px rgba(0,0,0,.5); } #admin .ne-crop-stage { margin: 10px 0; border: 2px solid #8a6a36; border-radius: 6px; overflow: hidden; background: repeating-conic-gradient(#e6d3a8 0 25%, #f3e6c6 0 50%) 0 0 / 20px 20px; box-shadow: inset 0 0 0 3px rgba(224, 180, 95, .5); } #admin .ne-crop-stage canvas { display: block; cursor: grab; touch-action: none; } #admin .ne-crop-stage canvas:active { cursor: grabbing; } #admin .ne-ups { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } #admin .ne-up { margin: 0; padding: 8px; border: 1px solid rgba(138, 106, 54, .4); border-radius: 6px; background: rgba(255, 252, 240, .6); display: flex; flex-direction: column; gap: 6px; font-size: 14px; } #admin .ne-up img { width: 100%; height: 96px; object-fit: contain; background: rgba(40, 25, 10, .12); border-radius: 4px; } /* M50d: unread news — a small red wax seal on each unread row; Copy link in an item's pop-up */ #news .nw-row.is-unread, #news-modal .nw-row.is-unread { position: relative; } #news .nw-row.is-unread::after, #news-modal .nw-row.is-unread::after { content: ''; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #c4564a, #6e1a0f 70%); box-shadow: 0 0 0 1.5px rgba(60, 6, 4, .55), 0 2px 3px rgba(0, 0, 0, .4); } #news-modal .nwm-share { margin: 10px 0 0; text-align: right; } #news-modal .nwm-copy { padding: 4px 12px; border: 1.5px solid #8a6a36; border-radius: 6px; background: rgba(255, 248, 230, .6); font: 15px var(--serif); color: #3a2a16; cursor: pointer; } #news-modal .nwm-copy:hover, #news-modal .nwm-copy:focus-visible { border-color: #b8862f; outline: none; } #news-modal .nwm-linkbox { width: 100%; padding: 6px 8px; font: 14px var(--serif); } /* M35e: the Harvest Night ribbon on the news panel — gold while on, quieter while it waits */ #news .nw-harvest { left: 64px; top: 216px; width: 699px; height: 40px; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; background: linear-gradient(#3a2a10, #1d140b); border: 1.5px solid #8a6a36; color: #e6c98f; font-size: 19px; box-shadow: 0 4px 10px rgba(0,0,0,.4); } #news .nw-harvest[hidden] { display: none; } #news .nw-harvest b { color: #f6d58f; } #news .nw-harvest.is-on { background: linear-gradient(#b8862f, #7a5418); border-color: #f0c46a; color: #1d140b; text-shadow: 0 1px 0 rgba(255, 230, 170, .5); animation: nw-harvest-glow 2.6s ease-in-out infinite alternate; } #news .nw-harvest.is-on b { color: #1d140b; } @keyframes nw-harvest-glow { to { box-shadow: 0 0 18px rgba(240, 196, 106, .8), 0 4px 10px rgba(0,0,0,.4); } } @media (prefers-reduced-motion: reduce) { #news .nw-harvest.is-on { animation: none; } } /* M35e: the ribbon sits in the Welcome section's flow, under its heading (it first covered the frame's painted header) */ #news .nw-welcome .nw-harvest { position: relative; left: auto; top: auto; width: auto; height: auto; align-self: flex-start; margin: 6px 0 0; padding: 4px 14px; font-size: 16px; border-radius: 6px; z-index: 1; } #admin .adm-tag { white-space: nowrap; } #news .nw-welcome:has(.nw-harvest:not([hidden])) .nw-clamp { -webkit-line-clamp: 4; } /* M35e: room for the ribbon — the full welcome is one click away */ /* M35c: the personal welcome (over the welcome art), candles, the crier in All news, the patch filter */ #news .nw-welcome .nw-me { position: absolute; right: 16px; bottom: 14px; width: 42%; display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; z-index: 2; background: rgba(16, 12, 8, .76); border: 1px solid rgba(224, 180, 95, .55); color: #efe2c4; box-shadow: 0 3px 8px rgba(0,0,0,.4); } #news .nw-welcome .nw-me[hidden] { display: none; } #news .nw-me img { width: 46px; height: 46px; object-fit: contain; flex: none; } #news .nw-me-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14px; } #news .nw-me-text b { font-size: 16px; color: #f6d58f; font-weight: normal; } #news .nw-me-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; } #news .nw-me-bar i { display: block; height: 100%; background: #b3281f; } #news .nw-me-text small { font-size: 13px; line-height: 1.25; color: #d9cba8; } .nw-candles { margin-left: 8px; font-size: 13px; color: #8a6a36; white-space: nowrap; } #news-modal .nwm-candle { margin-right: 8px; padding: 4px 12px; border: 1.5px solid #b8862f; border-radius: 6px; background: rgba(255, 236, 190, .7); font: 15px var(--serif); color: #6e1a0f; cursor: pointer; } #news-modal .nwm-candle.is-lit { border-color: #d9a441; background: #6e1a0f; color: #f6d58f; cursor: default; } #news-modal .nwm-crier { margin: 0 0 14px; padding: 10px 14px; border: 1.5px solid rgba(138, 106, 54, .5); border-radius: 8px; background: rgba(255, 248, 230, .5); } #news-modal .nwm-crier h3 { margin: 0 0 6px; font: normal 18px var(--serif); font-variant: small-caps; color: #6e1a0f; } #news-modal .nwm-crier ul { margin: 0; padding-left: 18px; } #news-modal .nwm-crier li { font-size: 15px; color: #6b5a40; } #news-modal .nwm-crier li.is-active { color: #1d140b; } #news-modal .nwm-crier time { color: #8a7a5a; margin-right: 6px; } #news-modal .nwm-filter { margin: 0 0 10px; } #news-modal .nwm-since { padding: 4px 12px; border: 1.5px solid #8a6a36; border-radius: 999px; background: rgba(255, 248, 230, .6); font: 15px var(--serif); color: #3a2a16; cursor: pointer; } #news-modal .nwm-since[aria-pressed="true"] { background: #6e1a0f; color: #f6e7c4; border-color: #6e1a0f; } /* M35d: the town crier's toast (top centre, parchment, slides down); M35c: the featured village's gold tag */ #crier { position: fixed; left: 50%; top: 18px; z-index: 12; width: min(620px, 92vw); padding: 26px 34px 18px; transform: translateX(-50%); text-align: center; } #crier[hidden] { display: none; } #crier.is-in { animation: crier-in .45s cubic-bezier(.2, .8, .3, 1) both; } @keyframes crier-in { from { transform: translate(-50%, -140%); } to { transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { #crier.is-in { animation: none; } } #crier .crier-head { margin: 0; font-variant: small-caps; letter-spacing: .12em; font-size: 15px; color: #6e1a0f; } #crier .crier-text { margin: 6px 0 10px; font-size: 20px; line-height: 1.35; color: #1d140b; } #crier .crier-row { display: flex; justify-content: center; gap: 12px; align-items: center; } #crier .crier-act[hidden] { display: none; } #crier .crier-x { position: absolute; top: 8px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: #6b5a40; font: 24px/1 var(--serif); cursor: pointer; } #crier .crier-x:hover { background: rgba(110, 26, 15, .12); color: #6e1a0f; } .lb-practice.is-featured { background: linear-gradient(#e6c16a, #b8862f); color: #1d140b; } /* ============ M52a — The Stocks: the sanction form, the lookup card and the list (parchment, like the rest of the ledger) */ #admin .adm-sanction { border-color: rgba(110, 26, 15, .55); background: rgba(255, 244, 222, .75); box-shadow: 0 2px 10px rgba(60, 30, 5, .18); } #admin .adm-sanction .adm-row { align-items: flex-end; } #admin .adm-sanction label { margin-bottom: 0; } #admin .adm-grow { flex: 1; min-width: 220px; } #admin .adm-grow input { width: 100%; box-sizing: border-box; } #admin .adm-sanction > label:not(.adm-check) input { width: 100%; box-sizing: border-box; } #admin .adm-lookup input { flex: 1; max-width: 320px; } #admin .adm-sfilters .adm-sq { margin-left: auto; width: 200px; } #admin .adm-sfilters button[aria-pressed="true"] { filter: brightness(1.35) drop-shadow(0 0 5px rgba(224, 180, 95, .8)); } #admin .adm-who-card .adm-who-name { font-size: 20px; color: #6e1a0f; } #admin .adm-who-line { margin: 4px 0; font-size: 15px; } #admin .adm-who-line.is-bad { color: #8a1f14; } #admin .adm-who-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0; } #admin .adm-who-cols h4 { margin: 0 0 4px; font-weight: normal; font-variant: small-caps; color: #6e1a0f; font-size: 16px; } #admin .adm-who-list { margin: 0; padding-left: 18px; max-height: 120px; overflow-y: auto; font-size: 14px; } #admin .adm-tag.is-on { background: #2f5a26; color: #eaf6e4; } #admin .adm-stocks tr.is-ended td { opacity: .6; } #admin .adm-stocks tr.is-ban td:first-child b { color: #8a1f14; } #admin .adm-stocks td:nth-child(3), #admin .adm-stocks td:nth-child(4), #admin .adm-stocks td:nth-child(5), #admin .adm-actions button { white-space: nowrap; } #admin .adm-stocks td:nth-child(6) { min-width: 160px; } #admin .adm-sfilters button[aria-pressed="true"] { box-shadow: 0 0 0 2px #d9a441, 0 0 8px rgba(224, 180, 95, .8); } /* M52a: the danger button (Ban, Reset progress…) was outranked by the painted-button rule since M50a; same selector weight, later wins */ #admin .adm-panel button.is-danger:not(.adm-close):not([role="tab"]) { background: #6e1a0f; border: 1.5px solid #d9a441; border-radius: 6px; } /* ============ M52e — Results: real win rates against the 40–55 % band */ #admin .adm-rfilters button[aria-pressed="true"] { box-shadow: 0 0 0 2px #d9a441, 0 0 8px rgba(224, 180, 95, .8); } #admin .adm-inline { flex-direction: row; align-items: center; gap: 6px; margin: 0 0 0 8px; } #admin .adm-rkinds { display: flex; gap: 14px; margin-left: auto; } #admin .adm-rkinds .adm-check { margin: 0; } #admin .adm-rbig { font-size: 22px; margin-bottom: 6px; } #admin .adm-rbig b { font-size: 34px; font-weight: normal; } #admin .adm-rbig .is-wolf { color: #8a1f14; } #admin .adm-rbig .is-village { color: #2f5a26; } #admin .adm-rbar { position: relative; display: inline-block; width: 100%; min-width: 140px; height: 12px; border-radius: 6px; background: rgba(47, 90, 38, .28); overflow: hidden; vertical-align: middle; } #admin .adm-rhead .adm-rbar { height: 16px; } #admin .adm-rband { position: absolute; top: 0; bottom: 0; background: rgba(217, 164, 65, .55); z-index: 1; } #admin .adm-rval { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(138, 31, 20, .85); z-index: 2; border-right: 2px solid #f6e7c4; } #admin .adm-rsize tr.is-empty td { opacity: .45; } #admin .adm-rsize td:nth-child(4) { width: 34%; } #admin .adm-verdict { padding: 1px 8px; border-radius: 8px; font-size: 13px; white-space: nowrap; background: rgba(96, 64, 24, .15); } #admin .adm-verdict.is-ok { background: #2f5a26; color: #eaf6e4; } #admin .adm-verdict.is-wolves { background: #8a1f14; color: #f6e7c4; } #admin .adm-verdict.is-village { background: #1e3a55; color: #cfe6ff; } #admin .adm-rgrid { grid-template-columns: 1.35fr 1fr; } #admin .adm-rgrid td { white-space: nowrap; } #admin .adm-rgrid td:last-child { width: 38%; } /* ============ M52b — the closed beta: the gate's notice and key field; the ledger's Invitations page */ #login .gt-beta { margin: 0 0 10px; font-size: 19px; line-height: 1.35; color: #6e1a0f; } /* the gate's design space is scaled: match .gt-new-text */ #login .gt-beta[hidden] { display: none; } #gate-modal .gm-key { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; } #admin .adm-key, #admin .adm-who-line code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .04em; color: #3a2a16; white-space: nowrap; } #admin .adm-betaswitch { font-size: 16px; margin-bottom: 6px; } #admin .adm-betaswitch input { width: 18px; height: 18px; } #admin .adm-keylist { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; resize: vertical; } #admin .adm-kfilters button[aria-pressed="true"] { box-shadow: 0 0 0 2px #d9a441, 0 0 8px rgba(224, 180, 95, .8); } #admin .adm-kfilters .adm-kq { margin-left: auto; width: 220px; } #admin .adm-keys tr.is-used td, #admin .adm-keys tr.is-expired td, #admin .adm-keys tr.is-revoked td { opacity: .6; } #admin .adm-keys td { white-space: nowrap; } #admin .adm-keys td:nth-child(5) { white-space: normal; } #admin .adm-keymake .adm-row { align-items: flex-end; } #admin .adm-keymake label { margin-bottom: 0; } #admin .adm-keymake input[type="number"] { width: 90px; } #admin .adm-tag.is-founder { background: #b8862f; color: #1d140b; } /* M52c: maintenance on the gate — the same scaled ink as its neighbours */ #login .gt-maint { margin: 0 0 8px; font-size: 18px; line-height: 1.35; color: #8a1f14; } #login .gt-maint[hidden] { display: none; } /* ============ M52c — Upkeep: version, maintenance, health, backups, a gift */ #admin .adm-upgrid { grid-template-columns: 1fr 1fr; align-items: start; } #admin .adm-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 6px; font-size: 15px; } #admin .adm-dl dt { color: #6b5a40; } #admin .adm-dl dd { margin: 0; } #admin .adm-dl .is-bad { color: #8a1f14; } #admin .adm-upgrid code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; } #admin .adm-gift > label, #admin .adm-gift > label input { width: 100%; box-sizing: border-box; } #admin .adm-gift input[type="number"], #admin .adm-maint input[type="number"] { width: 80px; } #admin .adm-version .adm-row, #admin .adm-maint .adm-row, #admin .adm-gift .adm-row, #admin .adm-backups .adm-row { align-items: flex-end; } #admin .adm-upgrid label { margin-bottom: 0; } /* M52c: 17 ledger pages now — tighter tabs so they all fit at 1080p (the column still scrolls on shorter screens) */ #admin .adm-tabs { gap: 1px; } #admin .adm-tabs button { padding: 4px 10px; font-size: 17px; gap: 10px; } #admin .adm-tabs button::before { width: 26px; height: 26px; font-size: 14px; } /* ============ M52e² — the Economy pulse */ #admin .adm-rtabs button[aria-pressed="true"] { box-shadow: 0 0 0 2px #d9a441, 0 0 8px rgba(224, 180, 95, .8); } #admin .adm-echart { width: 100%; height: auto; max-height: 240px; display: block; } #admin .adm-echart .axis { stroke: rgba(96, 64, 24, .45); } #admin .adm-echart .lab { font: 11px var(--serif); fill: #6b5a40; } #admin .adm-echart polyline { fill: none; stroke-width: 2.5; } #admin .adm-echart .in { stroke: #2f5a26; fill: #2f5a26; } #admin .adm-echart polyline.in { fill: none; } #admin .adm-echart .out { stroke: #8a1f14; fill: #8a1f14; } #admin .adm-echart polyline.out { fill: none; } #admin .adm-echart .in-t { fill: #2f5a26; } #admin .adm-echart .out-t { fill: #8a1f14; } #admin .adm-scroll { overflow-x: auto; } #admin .adm-esrc td, #admin .adm-esrc th { white-space: nowrap; text-align: right; } #admin .adm-esrc td:first-child { text-align: left; } #admin .adm-esec td { font-variant: small-caps; color: #6e1a0f; text-align: left !important; } /* ============ M52f — case files, the resolve form, collusion flags */ #admin .adm-casefile { border-color: rgba(110, 26, 15, .5); } #admin .adm-casefile h3 { margin: 0; } #admin .adm-casefile .adm-row { justify-content: space-between; } #admin .adm-casegrid { grid-template-columns: 1fr 1.2fr; } #admin .adm-casegrid h4 { margin: 4px 0; font-weight: normal; font-variant: small-caps; color: #6e1a0f; } #admin .adm-story { max-height: 320px; } #admin .adm-story li { margin-bottom: 6px; } #admin .adm-casechat { max-height: 320px; } #admin .adm-casefile .adm-role { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; } #admin .adm-follow { border: 1px solid rgba(138, 106, 54, .45); border-radius: 6px; margin: 6px 0; padding: 4px 10px; } #admin .adm-follow legend { font-size: 14px; color: #6b5a40; } #admin .adm-follow .adm-check { margin: 2px 0; } /* ============ M52g — moderators, Letters, Undo */ #admin .adm-tabs button[hidden] { display: none; } #admin .adm-lgrid { grid-template-columns: 300px 1fr; align-items: start; } #admin .adm-llist { list-style: none; margin: 0 0 8px; padding: 0; } #admin .adm-llist button { width: 100%; text-align: left; margin: 0 0 4px; height: auto !important; min-height: 32px; } #admin .adm-llist button[aria-pressed="true"] { box-shadow: 0 0 0 2px #d9a441; } #admin .adm-leditor > label { display: flex; } #admin .adm-leditor input, #admin .adm-leditor textarea { width: 100%; box-sizing: border-box; font-family: var(--serif); } #admin .adm-lpreview { margin: 8px 0; padding: 10px 12px; border: 1px dashed rgba(138, 106, 54, .6); border-radius: 6px; background: rgba(255, 250, 238, .6); white-space: pre-wrap; } #admin .adm-lpreview .adm-lpsub { display: block; margin-bottom: 4px; color: #6e1a0f; } #admin .adm-log tr.is-undone td { opacity: .55; text-decoration: line-through; } #admin .adm-log tr.is-undone td:last-child { text-decoration: none; } /* ============ M52h — the Watchtower, test tools, view as */ #admin .adm-watchhead { justify-content: space-between; } #admin .adm-watchhead h3 { margin: 0; } #admin .adm-wfeed { max-height: 420px; } #admin .adm-wfeed li.is-night { background: rgba(30, 58, 85, .12); } #admin .adm-wfeed li.is-grave { font-style: italic; } #admin .adm-wfeed li.is-system { color: #6e1a0f; } #admin .adm-wseats { flex-direction: column; } #admin .adm-viewas { border-color: rgba(30, 58, 85, .5); } #admin .adm-viewas h4 { margin: 6px 0 4px; font-weight: normal; font-variant: small-caps; color: #6e1a0f; } #admin .adm-sanction[data-kind="tools"] input[type="number"] { width: 70px; } /* ============ M51a — the Tuning Table */ #admin .adm-tunehead .adm-row { justify-content: space-between; } #admin .adm-tunegroups button[aria-pressed="true"] { box-shadow: 0 0 0 2px #d9a441, 0 0 8px rgba(224, 180, 95, .8); } #admin .adm-tunegroups { gap: 6px; } #admin .adm-tunegroups button { height: 32px !important; padding: 0 12px !important; font-size: 14px; } #admin .adm-tune tr.is-changed td { background: rgba(224, 180, 95, .45); } #admin .adm-tune tr.is-changed td:first-child { box-shadow: inset 4px 0 0 #b8862f; font-weight: bold; } #admin .adm-tune td:first-child { max-width: 420px; } #admin .adm-tuneval input[type="number"] { width: 90px; } #admin .adm-tuneval { white-space: nowrap; } #admin .adm-when { font-size: 12px; opacity: .8; } #admin .adm-when::before { content: '· '; } #admin .adm-tunenote { margin: 4px 0 8px; font-size: 15px; } #lobby-browser .lb-practice.is-customs, .lb-practice.is-customs { background: rgba(30, 58, 85, .55); } /* ============ M51b — Sandbox rules */ #admin .adm-sbgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 6px 0; } #admin .adm-sbgrid label { margin: 0; } #admin .adm-sbgrid input { width: 170px; } #admin .adm-sbgrid input::placeholder { color: #9b8a6a; font-style: italic; } #admin .adm-tag.is-sandbox { background: #4a3a7a; color: #eee6ff; } /* M53b²: Updates — the progress log reads like the console (a dark slate); a dragged patch lights the upload card */ #admin .adm-upd-log { margin: 6px 0 0; max-height: 280px; overflow: auto; padding: 8px 10px; background: #1d1a17; color: #e8dcc0; border-radius: 4px; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; } #admin .adm-upd-up.is-drop { outline: 2px dashed #8a6a2c; outline-offset: -6px; } #admin .adm-upd .adm-actions { white-space: nowrap; } #admin .adm-upd .adm-actions button + button { margin-left: 6px; } #admin .adm-upd-confirm td { background: rgba(138, 31, 20, .06); } #admin .adm-upd-confirm p { margin: 4px 0 8px; } #admin .adm-upd .adm-table td { vertical-align: top; } #admin .adm-upd .adm-tag { margin-left: 4px; } /* M53c: Report a bug — the parchment pop-up (the card never scrolls; its body does), the doors, and the refresh ribbon */ #bugreport { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(3,5,12,.6); font-family: var(--serif); color: var(--ink); } #bugreport[hidden] { display: none; } #bugreport .bug-card { position: relative; width: min(620px, 94vw); max-height: 90vh; display: flex; flex-direction: column; padding: 18px 22px 16px; } #bugreport .bug-card.is-drop { outline: 2px dashed #8a6a2c; outline-offset: -8px; } #bugreport .bug-body { overflow: auto; min-height: 0; padding-right: 4px; } #bugreport .bug-lead { margin: 6px 0 10px; } #bugreport .bug-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } #bugreport .bug-kinds [aria-checked="true"] { outline: 2px solid #8a6a2c; } #bugreport .bug-label { display: block; margin: 8px 0 4px; font-size: 15px; } #bugreport .bug-label small { opacity: .7; } #bugreport textarea { width: 100%; box-sizing: border-box; resize: vertical; font: 15px var(--serif); } #bugreport .bug-picrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #bugreport .bug-thumb { max-width: 160px; max-height: 90px; border: 1px solid #8a6a2c55; } #bugreport .bug-notes { margin: 10px 0 4px; font-size: 13px; } #bugreport .bug-notes ul { margin: 6px 0 0; padding-left: 18px; } #bugreport .bug-notes li { overflow-wrap: anywhere; } #bugreport .bug-msg { min-height: 1.3em; margin: 6px 0; font-size: 14px; } #bugreport .bug-msg.is-bad { color: #8a1f14; } #bugreport .bug-actions { display: flex; justify-content: flex-end; } .site-corner { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 5; display: flex; gap: 4px; align-items: center; } .site-corner .site-version { position: static; } .site-corner .site-bug::before { content: '\00b7'; margin-right: 6px; opacity: .7; } #profile .pf-buglink { font-size: 20px; justify-content: flex-end; } .gt-help { margin: 8px 0 0; text-align: center; font-size: 14px; } #settings .set-bug { margin: 2px 0 4px; } #refresh-ribbon { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 31; padding: 8px 16px; display: flex; gap: 12px; align-items: center; font-family: var(--serif); color: var(--ink); box-shadow: 0 4px 18px rgba(0,0,0,.45); } #refresh-ribbon[hidden] { display: none; } #admin .adm-bugbar { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } #admin .adm-chip { padding: 2px 10px; } #admin .adm-chip.is-on { outline: 2px solid #8a6a2c; } #admin .adm-clickrow { cursor: pointer; } #admin .adm-clickrow:hover td { background: rgba(138, 106, 44, .08); } #admin .adm-bug { margin: 10px 0; } #admin .adm-bugwhat { white-space: pre-wrap; font-size: 16px; } #admin .adm-bugpic { max-width: 100%; max-height: 360px; border: 1px solid #8a6a2c55; } #admin .adm-errs { margin-top: 12px; } #admin .adm-errs code { overflow-wrap: anywhere; } /* M53c fix (owner's screenshot): the ledger's page column never grows past its frame on any page — it shrinks, and wide content wraps */ #admin .adm-ledger { grid-template-columns: 220px minmax(0, 1fr); } #admin .adm-page { min-width: 0; } #admin .adm-body { overflow-x: hidden; } #admin .adm-upd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #admin .adm-upd > .adm-card { min-width: 0; } #admin .adm-upd code, #admin .adm-upd .adm-key { overflow-wrap: anywhere; word-break: break-all; white-space: normal; } #admin .adm-upd .adm-table { width: 100%; } #admin .adm-upd .adm-actions { white-space: normal; text-align: right; } #admin .adm-upd .adm-actions button { margin: 3px 0 3px 6px; white-space: nowrap; } #admin .adm-upd .adm-actions button + button { margin-left: 6px; } #admin .adm-upd-rel .adm-actions, #admin .adm-upd-bk .adm-actions { display: flex; flex-direction: column; align-items: stretch; width: auto; min-width: 150px; } #admin .adm-upd-rel .adm-actions button, #admin .adm-upd-bk .adm-actions button { margin: 2px 0; } #admin .adm-upd-bk td:nth-child(2) { white-space: nowrap; } #admin .adm-upd-up .adm-row { flex-wrap: wrap; } #admin .adm-upd-up input[type="file"] { min-width: 0; max-width: 100%; } /* M53c: unread bug reports on the Mending Book's tab */ #admin .adm-tabs .adm-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: #6e1a0f; color: #f6d58f; font: bold 13px/22px var(--serif); text-align: center; } #admin .adm-tabs .adm-count[hidden] { display: none; }