/* Own fonts, from webapp/fonts/ (Google Fonts, OFL license; Cyrillic and Latin): the game doesn't go to Google for them. Caveat — marker, Oswald — printed headings, PT Sans Narrow — text, PT Serif — newspaper. */ @font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/caveat-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/caveat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* The knuckle tattoo font (system 22, step 5): Russo One (OFL), blocky letters that read as prison knuckle lettering at a fingernail's size. */ @font-face { font-family: "Russo One"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/russo-one-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Russo One"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/russo-one-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/oswald-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/oswald-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/pt-sans-narrow-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/pt-sans-narrow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/pt-sans-narrow-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/pt-sans-narrow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/pt-serif-400i-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/pt-serif-400i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/pt-serif-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/pt-serif-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/pt-serif-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/pt-serif-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #121417; --text: #eceae4; --muted: #949aa4; --seeds: #f2c230; /* accent: seeds color */ --red: #e0483f; --blue: #5aa9ff; --green: #5ec26a; --common: #a5abb5; --choice: #6aa6ff; /* rarity by the color of its look (system 6): choice — blue electrical tape, rare — red stamp */ --rare: #ff7b6b; --legend: #f2c230; /* The yard, not a mobile game: paper and black stamp, marker, masking tape, the iron of the bus-stop notice board. */ --ink: #1d1b17; /* stamp and marker on paper */ --ink-soft: #5a554b; --pen-red: #b8241a; --paper: #ece6d4; --plate: #1b1916; /* black printed plate with the price */ --f-hand: Caveat, "Segoe Print", cursive; /* marker */ --f-print: Oswald, "Arial Narrow", sans-serif; /* printed headings */ --f-text: "PT Sans Narrow", "Arial Narrow", system-ui, sans-serif; --f-news: "PT Serif", Georgia, serif; /* newspaper */ --hud-h: 64px; /* landscape: the porthole is 58 px, with a frame up to 72 */ --s: 1; /* how many times the scene is enlarged to the window: flying numbers outside the scene grow the same */ } /* -webkit-touch-callout — no «Скопировать / Сохранить» menu on iPhone on a long press on a picture. Telegram-iOS sets this itself, but only in the main frame, and on the backup entrance the game is in the bridge frame (index.html, bridge). */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } html, body { margin: 0; height: 100%; overflow: hidden; background: #08090a; color: var(--text); } body { font: 15px/1.3 var(--f-text); overscroll-behavior: none; user-select: none; -webkit-user-select: none; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; text-align: inherit; } [hidden] { display: none !important; } /* ---------- pictures and placeholders ---------- A placeholder — a gray frame of exactly the size the picture will take, with a caption «kind/id, source size». */ .art { display: block; } img.art { object-fit: contain; pointer-events: none; -webkit-user-drag: none; } .ph { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: repeating-linear-gradient(135deg, #3a3f47 0 10px, #353a41 10px 20px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: #a3a9b3; container-type: inline-size; } .ph-emoji { font-size: 22px; font-size: clamp(12px, 36cqw, 64px); line-height: 1; filter: grayscale(1); opacity: .6; } .ph-label { position: absolute; left: 4px; right: 4px; bottom: 5px; text-align: center; white-space: pre-line; font: 600 10px/1.25 ui-monospace, Menlo, Consolas, monospace; color: rgba(255,255,255,.6); text-shadow: 0 1px 0 rgba(0,0,0,.6); } @container (max-width: 110px) { .ph-label { display: none; } } /* Where a boss's, seller's and doll's head should end up: by this mark the art is drawn, so that medallions and the avatar cut out the face, not the belly. */ .ph[data-kind="boss"]::before, .ph[data-kind="npc"]::before, .ph[data-kind="doll"]::before { content: ""; position: absolute; left: 50%; border: 2px dashed rgba(255,255,255,.28); border-radius: 50%; transform: translate(-50%, -50%); aspect-ratio: 1; } .ph[data-kind="boss"]::before, .ph[data-kind="npc"]::before { top: 26%; width: 30%; } .ph[data-kind="doll"]::before { top: 12%; width: 30%; } .ph[data-kind="doll"] .ph-emoji, .ph[data-kind="boss"] .ph-emoji, .ph[data-kind="npc"] .ph-emoji { margin-top: 20%; } .icon { display: inline-block; flex: none; width: 22px; height: 22px; vertical-align: middle; } .icon .art { width: 100%; height: 100%; } .icon .ph { border-radius: 50%; background: #3a3f47; box-shadow: none; } .icon .ph-emoji { font-size: 13px; filter: none; opacity: 1; } /* An icon in the middle of text (textIcons in app.js) — sized by the letters wherever it stands: in a button, plate, line. Bigger than lowercase letters, level with the icons on plates (owner 2026-09-27: «значки очень маленькие даже с тел, особенно с ПК», was 1.25em); top and bottom margins negative — the extra height doesn't push the lines apart. */ span.icon.inline { width: 1.6em; height: 1.6em; vertical-align: -0.25em; margin: -0.2em .04em; } span.icon.inline .ph-emoji { font-size: .8em; } /* ---------- paper, masking tape, electrical tape ---------- Paper — the strip with a window title, notices, newspaper, cross sticker. Calm color, fading from one edge, dirty edges, a stain, occasionally a mug ring and a fold — smooth, no grain. The spread is set by variables (app.js, scrap). */ .paper { background-color: var(--tint, var(--paper)); background-image: radial-gradient(ellipse var(--p1w, 60%) var(--p1h, 45%) at var(--p1x, 30%) var(--p1y, 30%), rgba(255,255,255,.34), transparent 70%), radial-gradient(circle var(--wr, 30px) at var(--wx, 70%) var(--wy, 70%), transparent 78%, rgba(125,92,40,var(--wa, 0)) 87%, transparent 95%), radial-gradient(ellipse at var(--s1x, 85%) var(--s1y, 25%), rgba(110,85,40,.15), transparent var(--s1r, 24px)), radial-gradient(ellipse var(--m1w, 40%) var(--m1h, 30%) at var(--m1x, 70%) var(--m1y, 60%), rgba(90,80,60,.08), transparent 70%), linear-gradient(var(--fade-dir, 200deg), rgba(255,255,255,var(--fade, .12)), transparent 70%), linear-gradient(var(--fold, 90deg), transparent 49.7%, rgba(0,0,0,.05) 50%, rgba(255,255,255,.28) 50.5%, transparent 51.3%); box-shadow: inset 0 0 16px rgba(100,78,35,.30), inset 0 0 3px rgba(70,52,22,.30); color: var(--ink); } .tape { position: absolute; top: -6px; width: 42px; height: 13px; z-index: 2; pointer-events: none; } .tape.scotch { background: rgba(240,233,205,.74); box-shadow: 0 1px 1px rgba(0,0,0,.18); clip-path: polygon(2% 0, 98% 8%, 100% 55%, 97% 100%, 1% 92%, 0 40%); } .tape.izolenta { height: 11px; background: linear-gradient(#2c2c2c, #0e0e0e 55%, #1b1b1b); box-shadow: 0 1px 2px rgba(0,0,0,.45); } /* Blue electrical tape — the notice of a «choice» item in the kiosk (rarity look, rarTape in app.js). */ .tape.izolenta.blue { background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0) 45%, rgba(0,0,0,.16)), #2a4fae; } /* ---------- splash and «поверни» ---------- */ .splash, .rotate { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; text-align: center; padding: 24px; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.035) 22px 26px), var(--bg); } .splash-logo { font: 700 54px/.95 var(--f-print); letter-spacing: 2px; text-transform: uppercase; color: var(--seeds); text-shadow: 4px 4px 0 #000; transform: rotate(-4deg); } .splash-text { color: var(--muted); max-width: 280px; } /* Load stuck (index.html, BOOT): step, client and first error — small, so that a screenshot says at once where it stopped. */ .splash-info { max-width: 320px; font-size: 12px; line-height: 1.35; color: var(--muted); opacity: .75; white-space: pre-line; overflow-wrap: anywhere; } #rotateIcon { font-size: 64px; } .rotate-phone { animation: turn 2.2s ease-in-out infinite; } @keyframes turn { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } } .rotate-title { font: 700 22px/1.2 var(--f-print); text-transform: uppercase; color: var(--seeds); text-shadow: 2px 2px 0 #000; } .rotate-text { color: var(--muted); max-width: 300px; } /* ---------- yard closed: a notice with tear-off tabs ---------- For those not in the whitelist. The notice hangs on the bus-stop board, behind the board — a blurred yard. The screen lives outside the scene: it is held both in portrait and in landscape, so the sizes here are ordinary, not scene logical pixels. */ .closed { position: fixed; inset: 0; z-index: 25; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; background: var(--bg); /* Cutouts — what Telegram said, and what it didn't say (iPhone on the backup entrance) — what the screen itself knows (insets() in app.js). */ padding: calc(12px + max(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px), env(safe-area-inset-top, 0px))) calc(12px + max(var(--tg-safe-area-inset-right, 0px), env(safe-area-inset-right, 0px))) calc(14px + max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px))) calc(12px + max(var(--tg-safe-area-inset-left, 0px), env(safe-area-inset-left, 0px))); animation: fade .35s ease-out; } .closed-yard { position: fixed; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(10px) brightness(.4) saturate(.75); pointer-events: none; } .closed-wrap { position: relative; margin: auto; width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .closed-logo { font: 700 34px/.95 var(--f-print); letter-spacing: 2px; text-transform: uppercase; color: var(--seeds); text-shadow: 3px 3px 0 #000; transform: rotate(-3deg); } .closed-board { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 6px 10px; border: 30px solid transparent; background: var(--field, none) 0 0 / 100% 100% no-repeat border-box, #56616b padding-box; filter: drop-shadow(0 12px 20px rgba(0,0,0,.7)); } .notice { position: relative; width: 100%; max-width: 420px; transform: rotate(calc(var(--r, 0deg) * .4)); filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); } .notice-sheet { padding: 18px 18px 12px; text-align: center; clip-path: polygon(0 1.2%, 24% 0, 58% .9%, 100% 0, 99.5% 45%, 100% 100%, 0 100%, .4% 52%); } .notice-head { font: 700 30px/1 var(--f-print); letter-spacing: 7px; text-transform: uppercase; } .notice-title { margin-top: 4px; font: 700 32px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-2deg); } .notice-sheet p { margin: 8px 0 0; font: 16px/1.28 var(--f-text); text-align: left; } .notice-sign { margin-top: 6px; text-align: right; font: 700 21px/1 var(--f-hand); color: #3a362f; } /* Tabs — strips below, cut right up to the notice; on them, like a phone number on real ones, — the bot. */ .tabs { display: flex; } /* Tilt under a finger — at once, without transition: while a smooth transition runs, the browser draws a rotated notice with a shadow as a separate layer, and the text of the whole sheet shudders. */ .tab { position: relative; flex: 1 1 0; min-width: 0; height: 92px; display: flex; align-items: center; justify-content: center; border-left: 1.5px dashed rgba(40,34,24,.45); transform-origin: 50% 0; } .tab:first-child { border-left: 0; } .tab span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 16px/1 var(--f-hand); white-space: nowrap; color: var(--ink); } .tab:not(:disabled):hover { transform: rotate(-4deg); } .tab:not(:disabled):active { transform: rotate(-7deg) translateY(2px); } .tab:disabled { cursor: default; } /* A torn-off tab: a stub with a ragged edge is left of the strip. */ .tab.torn { clip-path: polygon(0 0, 100% 0, 100% 12%, 82% 15%, 64% 10%, 45% 16%, 27% 11%, 12% 15%, 0 10%); } .tab.torn span { visibility: hidden; } .tab.falling { position: fixed; z-index: 40; pointer-events: none; border-left: 0; animation: tab-fall .95s ease-in forwards; } @keyframes tab-fall { 0% { transform: none; } 20% { transform: translate(-4px, 10px) rotate(-12deg); } 100% { transform: translate(46px, 320px) rotate(-48deg); opacity: 0; } } /* What happened — on a strip of masking tape under the notice, in marker. */ .closed-note { max-width: 100%; padding: 4px 12px 5px; font: 700 19px/1.15 var(--f-hand); color: var(--ink); text-align: center; background: rgba(236,226,196,.95); transform: rotate(-1deg); clip-path: polygon(1% 5%, 99% 0, 100% 50%, 98.5% 100%, 0 93%, .8% 50%); } .closed-note.bad { color: var(--pen-red); } .closed-undo { padding: 4px 10px 5px; font: 15px/1.2 var(--f-text); color: #e6dcc0; background: rgba(12,13,14,.78); box-shadow: 0 2px 0 #000; text-decoration: underline dashed; text-underline-offset: 3px; } .closed-undo:hover { color: #fff; } @media (max-width: 420px) { .closed { padding-left: 8px; padding-right: 8px; } .closed-board { border-width: 20px; padding: 10px 2px 8px; } .notice-sheet { padding: 14px 12px 10px; } .notice-head { font-size: 25px; letter-spacing: 5px; } .notice-title { font-size: 28px; } .notice-sheet p { font-size: 15px; } .tab { height: 84px; } .tab span { font-size: 14px; } } /* Over the loading screen's scene (app.js showClosed, splash.js BOOT.backdrop; owner 2026-10-28: «в стиле GTA IV загрузочного экрана»): the panes and their cast stay behind, the neon sign is the name; the notice alone, taped over the panes at the bottom, no metal board, no blurred yard; the cassette taped on its corner. */ .splash.aaa.held .sp-wait { display: none; } .closed.scene { z-index: 31; background: none; } .closed.scene .closed-wrap { margin: auto auto 0; max-width: 440px; gap: 10px; } .closed.scene .closed-board { position: relative; padding: 0; border: 0; background: none; filter: none; gap: 10px; } .closed.scene .notice { filter: drop-shadow(0 12px 20px rgba(0,0,0,.75)); } .closed.scene .mz-tape.taped { position: absolute; z-index: 2; right: -14px; top: -58px; width: 150px; margin: 0; transform: rotate(7deg) scale(.78); transform-origin: 100% 0; } /* a phone upright: on the seam under the sign at the right, where «ЧО» leaves room, off the cast's faces */ @media (max-aspect-ratio: 1 / 1) { .closed.scene .mz-tape.taped { position: fixed; right: 10px; top: calc(33% - 66px); } } /* a short phone upright: a smaller notice, so the cast's faces stay above it */ @media (max-aspect-ratio: 1 / 1) and (max-height: 800px) { .closed.scene .notice-sheet { padding: 10px 12px 8px; } .closed.scene .notice-head { font-size: 21px; letter-spacing: 5px; } .closed.scene .notice-title { font-size: 24px; } .closed.scene .notice-sheet p { margin-top: 5px; font-size: 14px; line-height: 1.22; } .closed.scene .notice-sign { margin-top: 2px; font-size: 18px; } .closed.scene .tab { height: 62px; } .closed.scene .tab span { font-size: 13px; } .closed.scene.subscribed .notice-sheet p:first-of-type { display: none; } /* his number torn: the wait's words are enough */ } /* Phone in landscape: a lower board, no signboard — so the tabs fit without scrolling. */ @media (max-height: 540px) { .closed.scene .closed-wrap { max-width: min(440px, 46vw); } .closed.scene .notice-head { display: none; } .closed.scene .mz-tape.taped { position: fixed; top: auto; right: 12px; bottom: 10px; transform: rotate(-5deg) scale(.66); transform-origin: 100% 100%; } .closed-logo { display: none; } .closed-board { border-width: 20px; padding: 8px 4px; gap: 8px; } .notice-sheet { padding: 10px 14px 8px; } .notice-head { font-size: 22px; } .notice-title { font-size: 24px; } .notice-sheet p { margin-top: 5px; font-size: 14px; line-height: 1.22; } .notice-sign { margin-top: 2px; font-size: 18px; } .tab { height: 70px; } .tab span { font-size: 14px; } } /* The opening countdown (otschet.js, app.js otStage; plan system 17 «Табло открытия»): the board is the hero of the screen, the notice keeps its tabs. Upright: the sign, the board on chains over the seam, the boss's sheet between the two faces, the notice at the bottom. Sideways: the board at the bottom on the left, the notice on the right; a real screen has room for the sheet at the far left. */ .closed-tablo { position: relative; width: 100%; } .closed .ot-boss { flex: none; } .closed:not(.scene) .ot-boss { display: none; } .closed .ot-boss:not(.open) p { display: none; } .closed .ot-boss.open { position: fixed; z-index: 3; left: 50%; top: 50%; width: min(84vw, 340px); max-height: 92vh; margin: 0; overflow-y: auto; padding: 12px 12px 14px; transform: translate(-50%, -50%) rotate(-1.2deg); box-shadow: 0 0 0 100vmax rgba(3,3,6,.72); } .closed .ot-boss.open h4 { font-size: 24px; } .closed .ot-boss.open p { font-size: 18px; } /* the stage's light over the scene; the cut and the flash above everything, never a filter */ .closed.scene::before { content: ""; position: fixed; inset: 0; background: none; pointer-events: none; } .closed.scene[data-ot="night"]::before { background: rgba(3,7,14,.34); } .closed.scene[data-ot="hour"]::before { background: radial-gradient(ellipse at 50% 42%, rgba(80,6,0,0) 40%, rgba(70,6,0,.5)); } .closed.scene[data-ot="last"]::before { background: radial-gradient(ellipse at 50% 58%, #5c1206, #030306 72%); } .closed::after { content: ""; position: fixed; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none; } .closed.ot-cut::after { animation: ot-cut .4s linear both; } .closed.ot-boom::after { background: #fff4d2; animation: ot-boom 1.3s ease-out both; } @keyframes ot-cut { 0%, 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes ot-boom { 0% { opacity: 1; } 25% { opacity: .9; } 100% { opacity: 0; } } /* the last minute: nothing but the board and the shape coming closer behind it */ .ot-shape { position: fixed; left: 50%; bottom: -7vh; width: 78vh; height: 104vh; margin-left: -39vh; object-fit: contain; object-position: bottom; transform-origin: 50% 100%; pointer-events: none; animation: ot-near 60s linear both; } @keyframes ot-near { from { transform: scale(.56); opacity: .4; } to { transform: scale(1.14); opacity: 1; } } .closed[data-ot="last"] .closed-board, .closed[data-ot="last"] .closed-knock, .closed[data-ot="last"] .ot-boss { display: none; } .closed[data-ot="last"] .closed-wrap { display: flex; flex: 1 0 auto; margin: 0 auto; width: 100%; max-width: none; align-items: center; justify-content: center; } .closed[data-ot="last"] .closed-tablo { width: min(92vw, 72vh); margin: 0; } .closed[data-ot="last"] .ot-chain { display: none; } @media (max-aspect-ratio: 1 / 1) { .splash.aaa.held { --top: max(5%, 40px); --font: min(13vw, 7.4vh); } .closed.scene .closed-wrap { flex: 1 0 auto; margin: 0 auto; max-width: 460px; gap: 8px; } .closed.scene .closed-tablo { margin-top: calc(max(5vh, 40px) + 1.9 * min(13vw, 7.4vh) - 2px); } .closed.scene .ot-boss:not(.open) { width: 86px; padding: 4px 4px 5px; margin-top: 6px; } .closed.scene .ot-boss:not(.open) h4 { display: none; } .closed.scene .closed-board { margin-top: auto; } .closed.scene .mz-tape.taped { top: max(9.5%, 74px); right: 4px; transform: rotate(7deg) scale(.6); } } @media (max-aspect-ratio: 1 / 1) and (max-height: 900px) { .closed.scene .notice-sheet { padding: 8px 12px 6px; } .closed.scene .notice-head { display: none; } .closed.scene .notice-title { font-size: 25px; } .closed.scene .notice-sheet p { margin-top: 4px; font-size: 14.5px; line-height: 1.2; } .closed.scene .notice-sign { margin-top: 0; font-size: 17px; } .closed.scene .tab { height: 60px; } .closed.scene .tab span { font-size: 12.5px; } } @media (min-aspect-ratio: 1 / 1) { .ot-shape { left: 21%; } .closed.scene .closed-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); gap: 6px 14px; align-items: end; width: 100%; max-width: none; margin: auto 0 0; } .closed.scene .closed-tablo { grid-column: 1; grid-row: 1 / 3; align-self: end; justify-self: center; width: min(100%, 860px); } .closed.scene .closed-board { grid-column: 2; grid-row: 1; } .closed.scene .closed-knock { grid-column: 2; grid-row: 2; justify-self: center; } .closed.scene .ot-boss:not(.open) { position: fixed; top: 8px; right: 122px; width: 78px; padding: 4px 4px 5px; } .closed.scene .ot-boss:not(.open) h4 { display: none; } .closed.scene .mz-tape.taped { position: fixed; top: 6px; right: 8px; bottom: auto; width: 150px; transform: rotate(5deg) scale(.66); transform-origin: 100% 0; } .closed.scene .ot-chain { display: none; } } @media (min-aspect-ratio: 1 / 1) and (max-height: 540px) { .closed.scene.subscribed .notice-sheet p:first-of-type { display: none; } /* his number torn: the wait's words are enough */ } @media (min-aspect-ratio: 1 / 1) and (min-height: 541px) { .closed.scene .closed-wrap { grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(320px, 400px); max-width: 1560px; margin: auto auto 0; gap: 8px 22px; } .closed.scene .ot-boss:not(.open) { position: relative; top: auto; right: auto; grid-column: 1; grid-row: 1 / 3; width: auto; padding: 6px 6px 7px; align-self: end; margin-bottom: 8px; } .closed.scene .ot-boss:not(.open) h4 { display: block; } .closed.scene .closed-tablo { grid-column: 2; } .closed.scene .closed-board, .closed.scene .closed-knock { grid-column: 3; } .closed.scene .mz-tape.taped { top: 10px; right: 14px; transform: rotate(5deg) scale(.8); } .closed.scene .ot-chain { display: block; } } @media (prefers-reduced-motion: reduce) { .closed { animation: none; } .closed.ot-cut::after, .closed.ot-boom::after { animation: none; } } /* ---------- the rules of the game: a sheet before the yard ---------- For one who has not accepted the current rules (app.js, showLegal). Like «двор закрыт», the screen lives outside the scene and is held in portrait and in landscape, so the sizes here are ordinary. The sheet takes the whole height: the text scrolls inside it, the hint and «Прочитал и принимаю» stay at the bottom. The paper is not tilted: a long text on a tilted sheet reads worse. */ .legal { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; background: var(--bg); padding: calc(10px + max(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px), env(safe-area-inset-top, 0px))) calc(10px + max(var(--tg-safe-area-inset-right, 0px), env(safe-area-inset-right, 0px))) calc(10px + max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px))) calc(10px + max(var(--tg-safe-area-inset-left, 0px), env(safe-area-inset-left, 0px))); animation: fade .35s ease-out; } .legal-wrap { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 680px; margin: 0 auto; display: flex; filter: drop-shadow(0 10px 18px rgba(0,0,0,.65)); } .legal-sheet { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 14px 4px 10px 16px; } .legal-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 10px 8px 0; border-bottom: 2px solid rgba(29,27,23,.55); } .legal-title { flex: 1 1 auto; min-width: 0; font: 700 30px/1 var(--f-print); letter-spacing: 5px; text-transform: uppercase; } .legal-lang { flex: none; padding: 3px 10px 5px; font: 700 19px/1 var(--f-hand); color: var(--pen-red); border: 2px solid currentColor; border-radius: 4px; transform: rotate(-3deg); } .legal-lang:hover { background: rgba(184,36,26,.08); } /* «Музон» on and off on the rules sheet (owner 2026-10-25): a round pen mark beside the language switch. */ .legal-sound { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--pen-red); border: 2px solid currentColor; border-radius: 50%; transform: rotate(3deg); } .legal-sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .legal-sound.off { color: #7a7468; } .legal-sound:hover { background: rgba(184,36,26,.08); } .legal-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 12px 18px 0; user-select: text; -webkit-user-select: text; scrollbar-width: thin; scrollbar-color: rgba(29,27,23,.45) transparent; } .legal-text::-webkit-scrollbar { width: 6px; } .legal-text::-webkit-scrollbar-thumb { background: rgba(29,27,23,.4); border-radius: 3px; } .legal-edition { font: 700 21px/1.1 var(--f-hand); color: var(--pen-red); } .legal-text h3 { margin: 18px 0 2px; font: 700 19px/1.15 var(--f-print); letter-spacing: .6px; text-transform: uppercase; } .legal-text p { margin: 7px 0 0; font: 16px/1.34 var(--f-text); } .legal-text p.li { margin-top: 3px; padding-left: 14px; text-indent: -11px; } .legal-wait { color: var(--ink-soft); } .legal-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px 2px 0; border-top: 2px dashed rgba(29,27,23,.4); } .legal-hint { flex: 1 1 auto; min-width: 0; font: 700 20px/1.1 var(--f-hand); color: var(--ink-soft); } .legal-hint.bad { color: var(--pen-red); } .legal-foot .btn { flex: none; } .legal-help { flex: none; padding: 4px 12px 0 0; font: 12.5px/1.25 var(--f-text); color: #6b6455; } /* Portrait phone: the button under the hint, full width: an easy thumb target. */ @media (max-width: 520px) { .legal { padding-left: calc(6px + max(var(--tg-safe-area-inset-left, 0px), env(safe-area-inset-left, 0px))); padding-right: calc(6px + max(var(--tg-safe-area-inset-right, 0px), env(safe-area-inset-right, 0px))); } .legal-sheet { padding: 12px 2px 10px 12px; } .legal-title { font-size: 24px; letter-spacing: 3px; } .legal-text p { font-size: 15.5px; } .legal-foot { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; } .legal-foot .btn { min-height: 42px; } } /* Phone in landscape: low — a thin header and footer, the hint beside the button, more of the text visible. */ @media (max-height: 540px) { .legal { padding-top: calc(6px + max(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px), env(safe-area-inset-top, 0px))); padding-bottom: calc(6px + max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px))); } .legal-sheet { padding-top: 8px; padding-bottom: 6px; } .legal-top { padding-bottom: 5px; } .legal-title { font-size: 22px; letter-spacing: 3px; } .legal-lang { font-size: 17px; } .legal-sound { width: 30px; height: 30px; } .legal-sound svg { width: 19px; height: 19px; } .legal-text { padding-top: 6px; } .legal-text h3 { margin-top: 12px; font-size: 17px; } .legal-text p { font-size: 15px; line-height: 1.28; } .legal-foot { padding-top: 6px; } .legal-hint { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { .legal { animation: none; } } /* ---------- scene ---------- Size — in logical pixels: aspect ratio 760…1000 to 420, on a big screen the scene is bigger, while the interface is no bigger than «one to one» (app.js, fitStage). */ .stage { position: fixed; left: 0; top: 0; height: 420px; width: 760px; transform-origin: 0 0; display: grid; grid-template-rows: var(--hud-h) 1fr; grid-template-columns: minmax(0, 1fr); background: var(--bg); overflow: hidden; border-radius: 6px; } /* Phone: no rounded corners on the stage. On iPhone a rounded clip over moving layers renders the whole scene offscreen every frame, and in fullscreen the corners are not even visible. */ .handheld .stage { border-radius: 0; } /* Screen cutout probe: app.js (envInsets) reads its insets — that is how CSS says where the «notch» and the bottom strip are. */ .env-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } /* ---------- header: black strip, numbers in marker, the porthole ---------- Owner 2026-10-11, after a ChatGPT sketch: the avatar is a porthole with energy and vigor as segmented arcs around it (energy left, vigor right, lit from the bottom), the icons at the top corners, the numbers at the arcs' feet, the level at the bottom. Then the nick with VIP and понты over the authority bar, free space, the buttons, cash over seeds with iron at the right and the fullscreen button in the corner (owner: «почему справа так много места?» — the slack stays in the middle). */ /* The windows' and cards' shade and blur cover the whole screen under the header, which stays sharp over them (owner 2026-10-11: «чтоб весь экран был прозрачный, и шапка поверх рисовалась»); the window box, the card and the buddy's bubble are drawn over the header (owner 2026-10-16: «подсказка с чуваком на кортанах, и прочие меню … должны быть поверх шапки с бабками»), so the porthole and the VIP frame hanging below the header's edge no longer cover their top. Layers of the stage: map 1, window shade 6, card shade 12, header 20, window 22, card 23, bubble 24, flying effects 26 and 27. */ .hud { position: relative; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 3px 12px 3px 10px; } /* No strip and no panel (owner 2026-10-11, with a mobile reference: «не сплошная линия, а отдельные элементы»): the scene shows between the pieces, each piece is its own thing — the porthole, the name plate fading into the scene, the phone tag, the sums in capsules. A soft shade at the top keeps them readable on a bright sky. */ .hud::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(6,5,4,.5), rgba(6,5,4,.22) 55%, transparent); } /* The porthole: a square box --box around the avatar --av (times the frame's --k); the arcs run along the box's edge. A frame makes the box taller than the strip: the porthole hangs from the top edge over the yard (z-index of the header), the strip itself stays. */ .hud-me { position: relative; flex: none; --av: 40px; --k: 1; --cap: 60px; --frame: min(calc(var(--av) * var(--k)), var(--cap)); --box: calc(var(--frame) + 18px); width: var(--box); height: var(--box); align-self: flex-start; margin-top: 11px; } /* the icons above the box must not be cut by the stage edge (owner) */ /* The porthole plate: a dark disc with a steel rim under the arcs, so the unlit segments read as dead lamps on it; with a frame the plate and the arcs hang below the panel (owner: «не против, если рамка будет немного выпирать»). */ .hud-me::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; z-index: 0; background: radial-gradient(circle, #0d0b08 0 52%, #221d17 56%, #0d0b08 60%, #3a3229 61%, #15120d 66%, #000 70%, transparent 71.5%); box-shadow: 0 4px 8px rgba(0,0,0,.6); } .hud-me .avatar, .hud-arcs { z-index: 1; } /* The frame is at most --cap wide (the box then hangs below the strip by a little): a bigger frame shrinks the face into its opening instead of growing the porthole past the header (the crown frame is 2.3 avatars wide). */ .hud-me .avatar { position: absolute; left: 50%; top: 50%; width: calc(var(--frame) / var(--fill) / var(--k)); height: calc(var(--frame) / var(--fill) / var(--k)); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #000, 0 0 0 3.5px #d9cca6; } .hud-me .vip-frame-art { width: calc(var(--frame) / var(--fill)); height: calc(var(--frame) / var(--fill)); } /* --fill: the share of its picture's width the drawing takes. The crowned frames leave empty sides (the hole stays in the centre), so in the porthole their picture grows until the drawing is as wide as any other frame's, and the face grows with it (owner 2026-10-18 on the VIP 15 crown: «отображение рамочки какое т кривое тут и мелкое»; the face was 34 px). Measured by the alpha box of frame/*.webp. */ .hud-me { --fill: 1; } .hud-me[data-ring="vip_zoloto"] { --fill: .92; } .hud-me[data-ring="vip_korona"] { --fill: .78; } .hud-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .hud-arcs path { fill: none; stroke-width: 5px; vector-effect: non-scaling-stroke; stroke-linecap: butt; filter: drop-shadow(0 0 1px #000); } .hud-arcs .energy path { stroke: #f5c928; } .hud-arcs .vigor path { stroke: #e2533f; } .hud-arcs path.off { opacity: .2; } /* Icon at the top corner, the number at the foot of its arc: energy on the left, vigor on the right. */ .hud-gauge { position: absolute; inset: 0; pointer-events: none; z-index: 2; } /* The icons are bigger than the corner (owner: «значок еды и кулака можно увеличить») and look the same size, measured by the picture, not the box (owner: «не мерь по пустотам, мерь по картинке»): the pie's drawing is 113×75 of its 128 file, the fist's 110×113, so at equal boxes the fist has a third more painted area and reads bigger; the pie's box is 37 to the fist's 30 — the painted areas match. */ .hud-gauge .icon { position: absolute; top: -7px; width: 30px; height: 30px; filter: drop-shadow(0 1px 1px #000); } .hud-gauge.energy .icon { left: -8px; top: -10px; width: 37px; height: 37px; } .hud-gauge.vigor .icon { right: -7px; } .hud-gauge b { position: absolute; bottom: 0; min-width: 22px; padding: 0 4px; text-align: center; font: 700 13px/15px var(--f-hand); font-variant-numeric: tabular-nums; color: #16130e; clip-path: polygon(0 8%, 100% 0, 99% 92%, 1% 100%); box-shadow: 0 1px 2px rgba(0,0,0,.6); } .hud-gauge.energy b { left: -4px; background: #f5c928; transform: rotate(-5deg); } .hud-gauge.vigor b { right: -4px; background: #e2533f; color: #fff; transform: rotate(5deg); } .hud-level { position: absolute; left: 50%; bottom: -5px; min-width: 21px; height: 21px; padding: 0 4px; display: grid; place-items: center; font: 700 17px/1 var(--f-hand); color: #15130e; background: #f5c928; border-radius: 3px; transform: translateX(-50%) rotate(-6deg); box-shadow: 0 1px 2px rgba(0,0,0,.6); z-index: 2; } .hud-me em { position: absolute; left: 50%; top: -2px; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #000; z-index: 2; } /* The name plate sizes itself to the name (owner 2026-10-25: the nick never cut) up to a cap, and gives way when the header is crowded. */ .hud-who { flex: 0 1 auto; min-width: 160px; max-width: 400px; display: flex; flex-direction: column; gap: 3px; padding: 4px 16px 5px 10px; margin-left: -6px; border-radius: 4px 16px 16px 4px; background: linear-gradient(90deg, rgba(8,7,5,.8), rgba(8,7,5,.62) 72%, rgba(8,7,5,0)); } /* the name plate */ /* The name is never cut (owner 2026-10-25): app.js fitHudName drops the crew tag, then shrinks the letters, so the VIP plate and понты next to it stay whole. A tap on the name opens the nickname card. */ .hud-name { display: flex; align-items: baseline; gap: 7px; font: 700 22px/1 var(--f-hand); letter-spacing: .3px; white-space: nowrap; overflow: hidden; } #hudName { display: flex; min-width: 0; overflow: hidden; cursor: pointer; border-radius: 4px; } #hudName .nick { flex: none; padding-right: .2em; } /* its own width for measuring; the marker font's tails («й», «д») past its box */ #hudName:hover { color: #fff; } #hudName:active { translate: 0 1px; } .hud-name small { flex: none; font: 400 14px/1 var(--f-text); color: #b9b2a2; white-space: nowrap; } .hud-name small b { font: 700 17px/1 var(--f-hand); color: var(--seeds); } /* VIP plate and понты after the nick (hud-sub); with the plate the name block is wider by it, so the nick is not cut to «Тест…». */ .hud-sub { flex: none; display: flex; align-items: baseline; gap: 7px; } .hud-blat { position: relative; flex: none; display: flex; align-items: center; line-height: 1; } .hud-blat .vip-badge { font-size: 19px; } /* Today's «подгон по VIP» waits: a red dot on the badge. */ .hud-blat.ready::after { content: ""; position: absolute; right: -6px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #e2392b; box-shadow: 0 0 0 1.5px #17140f; } .hud.has-blat .hud-who { min-width: 210px; } .hud-auth { display: flex; align-items: center; gap: 5px; } .hud-auth .icon { flex: none; width: 20px; height: 20px; filter: drop-shadow(0 1px 1px #000); } .hud-auth .bar { flex: 1 1 0; min-width: 0; } .res-cap { flex: none; font: 12.5px/1 var(--f-text); color: #b9b2a2; white-space: nowrap; } .hud .bar { height: 16px; border: 0; border-radius: 0; background: #d9cca6; clip-path: polygon(0 8%, 100% 0, 99% 92%, 1% 100%); } .hud .bar i { border-radius: 0; opacity: .85; } .hud .bar span { color: #16130e; font: 700 15px/16px var(--f-hand); text-shadow: none; } .bar-authority i { background: #6da6e8; } /* The percent of the level: a black tag at the bar's right end, only in portrait where the bar runs across the header. */ .hud .bar em { display: none; position: absolute; right: 0; top: 0; bottom: 0; padding: 0 6px 0 8px; font: 700 13px/16px var(--f-hand); font-style: normal; color: #f3e9cf; background: #15130e; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); } .hud .bar em:empty { display: none; } /* the level cap: no percent, no tag */ .hud-free { flex: 1 1 0; min-width: 0; } /* Cash over seeds with iron, right-aligned; iron (system 15) is a button — the booth. The number is a box of its own, digits anchored at the right: while a sum counts up (rollNumber) the box keeps the width of the final sum, so the icon beside it does not twitch. */ .hud-money { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .hud-money-row { display: flex; align-items: center; gap: 6px; } /* Every sum is a capsule of its own: the icon at the left end, the number after it. */ /* A number never breaks onto a second line and never sticks out of its capsule (owner 2026-10-11): nowrap, the capsule grows with it. */ .money { flex: none; display: flex; gap: 5px; align-items: center; padding: 1px 10px 1px 3px; border-radius: 14px; font: 700 20px/1 var(--f-hand); white-space: nowrap; background: rgba(8,7,5,.74); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); } .money .icon { width: 24px; height: 24px; margin: -2px 0; } .money b { display: inline-block; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .money.iron { padding: 0 2px; border-radius: 6px; } .money.iron:active { transform: scale(.94); } .avatar { position: relative; overflow: hidden; border-radius: 50%; background: #2a2e35; flex: none; } .avatar > .art { width: 100%; height: 100%; } .avatar > .ph .ph-emoji { filter: none; opacity: .9; } /* Avatar — the doll's head: the head is 12 % of the height, centered (section 4 of art-direction.md). */ .avatar > .doll { position: absolute; width: 267%; left: -83.5%; top: 2%; } /* The HD guy (prikid.js, hdFigure with head; hdCam): his head with the cap and the collar, upright and centred, drawn over the whole avatar at its own pixels (the owner 2026-10-28: «персонаж размыт, и в сторону наклонён не по центру, и кажется мелковатым»). --hd-fill: the share of the box's height from the top of his head (or his hat) to his chin; --hd-top: the room above it. */ .avatar > .guy.hd { position: absolute; inset: 0; width: 100%; height: 100%; --hd-fill: .86; --hd-top: .05; } .guy.hd.head > .hd-canvas, .guy.hd.head > .hd-face { inset: 0; width: 100%; height: 100%; transform-origin: 0 0; } /* The header's canvas lies on the screen's pixels one to one (hdPaint), yet the browser still blended each with its neighbour at the fraction the stage's scale leaves (a pixel checker came out at half its contrast; the owner 2026-10-28: «с ПК мыло а с тел нормально»): copied pixel for pixel. Only where nothing turns or zooms the portrait: there it would come out jagged. */ .hud-me .guy.hd.head > canvas { image-rendering: pixelated; } /* his eye in the HD portrait; the header's avatar holds the portrait's own .avatar (z-index 1 in .hud-me), the bruise goes over it */ .avatar.hd.bruised::after, .avatar.bruised:has(> .avatar.hd)::after { left: 25%; top: 42%; width: 25%; height: 18%; } .avatar.bruised::after { z-index: 2; } .bar { position: relative; height: 20px; border-radius: 2px; overflow: hidden; background: rgba(0,0,0,.55); border: 1px solid rgba(0,0,0,.45); } .bar i { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .35s ease; } .bar span { position: relative; display: block; text-align: center; font: 700 12.5px/18px var(--f-text); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); font-variant-numeric: tabular-nums; white-space: nowrap; } .bar-hp i { background: linear-gradient(90deg, #9c2a23, var(--red)); } .bar-me i { background: linear-gradient(90deg, #2f8a3c, var(--green)); } .bar-hp.big { height: 24px; border: 2px solid #000; } .bar-hp.big span { font-size: 14px; line-height: 20px; } /* ---------- yard: the scene you tap ---------- */ /* The screen takes the whole stage, so the backdrop runs under the header (the header floats over it, style.css .hud); the map and the windows start below the header (top: var(--hud-h)). */ .screen { position: relative; overflow: hidden; grid-row: 1 / span 2; grid-column: 1; } .hud { grid-row: 1; grid-column: 1; } .backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .backdrop .fill { width: 100%; height: 100%; object-fit: cover; } .backdrop .ph-label { bottom: auto; top: 44%; font-size: 12px; } /* The art is dark by itself — we darken only the edges so the header and signs read: a vignette over the whole screen and a shade along the top and bottom. It lies on the backdrop, not on the map: a map's own shade stops under the header, which then reads as a lighter strip (the owner 2026-10-31: «шапка фоны осветляет», «края затемнить немного»). */ .backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse farthest-corner at 50% 50%, transparent 45%, rgba(8,9,10,.7)), linear-gradient(to bottom, rgba(8,9,10,.3), transparent 18%, transparent 68%, rgba(8,9,10,.55)); } /* The Zone's cell is dimmer as a whole, the header's part of it too (app.js setBackdrop). */ .backdrop.cell:not(.fight)::after { background: radial-gradient(ellipse farthest-corner at 50% 50%, transparent 45%, rgba(4,6,9,.7)), linear-gradient(to bottom, rgba(8,9,10,.3), transparent 18%, transparent 68%, rgba(8,9,10,.55)), rgba(4,6,9,.28); } .backdrop.fight::after { background: linear-gradient(rgba(60,12,10,.35), rgba(8,9,10,.8)); } .map-layer { position: absolute; inset: var(--hud-h) 0 0 0; z-index: 1; } .map { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px 10px 6px; gap: 6px; } /* caption under a figure — a piece of masking tape, written in marker */ .sign { padding: 2px 11px 3px; font: 700 18px/1 var(--f-hand); color: var(--ink); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; background: rgba(236,226,196,.95); transform: rotate(-1.5deg); clip-path: polygon(1% 5%, 99% 0, 100% 50%, 98.5% 100%, 0 93%, .8% 50%); } /* ---------- windows ---------- Every window has its own look (owner's decision): kiosk — the bus-stop notice board, jobs — a newspaper. Until a window gets its own — a neutral dark panel, like the header. The yard behind the window is blurred: the window reads, the header is sharp. */ /* The layer is no stacking context of its own (no z-index, filter or opacity animation on it): the shade and the blur are its ::before under the header (6), the window itself is over the header (.win, 22). A tap on the shade still lands on the layer (click → closeWin). */ .win-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--hud-h) + 12px) 14px 12px; } .win-layer::before { content: ""; position: absolute; inset: 0; z-index: 6; background: rgba(6,7,8,.38); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); animation: fade .14s ease-out; } .win { position: relative; z-index: 22; display: flex; flex-direction: column; gap: 10px; width: 100%; max-height: 100%; padding: 12px 14px; border: 2px solid #000; border-radius: 4px; background: #17140f repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px); box-shadow: 0 12px 26px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05); animation: pop .16s ease-out; } .win > * { position: relative; } /* Kiosk — an iron notice board from the stop: frame and middle — SVG sized to the board (app.js, dressBoard: the rim is drawn in its border, the middle — under the window), until drawn — just dark iron. */ .win.board { padding: 2px 6px 6px; border: 34px solid transparent; border-radius: 0; box-shadow: none; background: var(--field, none) 0 0 / 100% 100% no-repeat border-box, #56616b padding-box; filter: drop-shadow(0 12px 20px rgba(0,0,0,.7)); } .win.board::before { content: ""; position: absolute; inset: 0; background: rgba(14,16,18,.28); pointer-events: none; } .win.wide { max-width: 980px; } .win.mid { max-width: 640px; } .win.fit { height: 100%; } /* window header: photo (at the kiosk — aunt Sveta), title on a paper strip, cross sticker */ .win-head { display: flex; align-items: flex-start; gap: 14px; } .win-photo { position: relative; flex: none; margin-top: 2px; } .win-photo .art { width: 60px; height: 72px; object-fit: cover; object-position: 50% 0; background: #cfc6b0; border: 4px solid #eeeadf; border-bottom-width: 12px; transform: rotate(3deg); box-shadow: 0 3px 6px rgba(0,0,0,.5); } .win-photo::after { content: ""; position: absolute; left: 10px; top: -7px; width: 42px; height: 13px; background: rgba(238,230,205,.78); transform: rotate(-8deg); } .win-strip { position: relative; flex: 0 1 auto; min-width: 0; margin-top: 4px; transform: rotate(-.8deg); filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); } .strip { padding: 7px 26px 8px 18px; clip-path: polygon(0 4%, 22% 1%, 48% 3%, 76% 0, 100% 3%, 99.5% 50%, 100% 96%, 70% 99%, 41% 97%, 14% 100%, .4% 97%, 0 50%); } .win-title { font: 700 28px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .win-sub { margin-top: 2px; font: 16px/1.2 var(--f-text); color: #3a362f; } .win-strip .tape { top: -8px; } .win-strip .tape.l { left: -14px; transform: rotate(-30deg); } .win-strip .tape.r { right: -14px; transform: rotate(26deg); } /* Cross — a paper sticker, the cross scribbled in marker: in two passes, a rough edge (noise in SVG). */ .win-x { position: relative; margin-left: auto; flex: none; width: 50px; height: 50px; transform: rotate(8deg); filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); } .win-x::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cfilter id='m' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.8'/%3E%3C/filter%3E%3Cg filter='url(%23m)' fill='none' stroke='%231c1a17' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 8.6C15.4 14.6 22.2 22.8 31.4 31.2' stroke-width='5.4' opacity='.86'/%3E%3Cpath d='M10.8 9.8C16.2 15.6 23.4 22.1 29.9 30.1' stroke-width='3.1' opacity='.5'/%3E%3Cpath d='M31.2 8.2C25.1 14.3 17.2 22.9 8.4 32.1' stroke-width='5.2' opacity='.86'/%3E%3Cpath d='M29.4 9.9C24.2 15.2 17.9 21.6 10.2 30.8' stroke-width='3' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") center / 76% no-repeat, linear-gradient(150deg, rgba(255,255,255,.14), transparent 70%), #eee8d6; box-shadow: inset 0 0 12px rgba(100,78,35,.3); clip-path: polygon(3% 5%, 30% 1%, 62% 4%, 97% 0, 99% 34%, 96% 68%, 100% 97%, 64% 99%, 33% 96%, 1% 100%, 4% 62%, 0 30%); } .win-x:hover { transform: rotate(8deg) scale(1.07); } .win-x:active { transform: rotate(8deg) scale(.96); } .win-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 4px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: #9a9385 transparent; } .win-body > * { flex-shrink: 0; } .win-body::-webkit-scrollbar { width: 5px; } .win-body::-webkit-scrollbar-thumb { background: #9a9385; border-radius: 3px; } /* Windows with text (player, fight) — a large sheet of paper on a board: dark text reads at once. */ .win-body.paper { padding: 12px 14px; } .win-tabs { display: flex; gap: 10px; flex-wrap: wrap; } .win-tabs button { position: relative; padding: 7px 14px; font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.4px; color: #d6d9d2; background: #1f2326; box-shadow: inset 0 0 0 2px #0f1112, 0 3px 0 #000; } .win-tabs button:hover { color: #fff; } .win-tabs button.on { background: #f2c230; color: #1a1a14; box-shadow: inset 0 0 0 2px #b58f16, 0 3px 0 #6d560d; } .win-tabs em { position: absolute; right: 2px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); } /* Tabs above the contents, outside the scroll (kiosk, renderWin: tabs): you scroll the notices — the tabs stay put. The left margin — same as the contents': tabs above the first notice, as it was when they lived in it. */ .win-bar { flex-shrink: 0; margin: 2px 4px 0; } /* From the tabs to the notices — as it was inside the contents (its gap is 8 pixels), not the window gap (10, portrait 8, phone in landscape 6). */ .win-bar + .win-body { margin-top: -4px; } .tall .win-bar + .win-body { margin-top: -2px; } .short .win-bar + .win-body { margin-top: 0; } /* ---------- common ---------- */ .title { font: 700 16px/1.2 var(--f-print); } .big-title { font-size: 20px; } .muted { color: var(--muted); font-size: 14px; } /* A player's name (nickname — system 1, crew tag — system 8): the tag before the nick, a bit quieter than the nick itself. In a line with numbers the name is in a nick-cut box: cut with an ellipsis, while the numbers next to it (flex: none on neighbors) are always visible. */ .nick { overflow-wrap: anywhere; } /* a nick with no spaces («ЫЫЫ…» of 32 characters) in a line that wraps — not wider than the screen */ .nick-tag { font-size: .86em; font-weight: 700; opacity: .72; } .nick-cut { display: inline-flex; align-items: baseline; gap: .3em; min-width: 0; max-width: 100%; flex: 0 1 auto; white-space: nowrap; vertical-align: bottom; } .nick-cut .nick-tag { flex: none; } .nick-rest { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Nickname and crew tag change: what's wrong — in red pen right in the card. */ .nick-why { min-height: 1.2em; font: 700 15px/1.2 var(--f-hand); color: var(--pen-red); } .nick-why:empty { min-height: 0; } .tag-input { text-transform: uppercase; letter-spacing: 2px; } .paper .muted { color: var(--ink-soft); } .center { text-align: center; justify-content: center; } .center-self { align-self: center; } .row { display: flex; align-items: center; gap: 8px; } .row.between { justify-content: space-between; } .grow { flex: 1; min-width: 0; } .spacer { flex: 1 1 auto !important; } .h2 { margin: 2px 0 0; font: 700 14px/1.1 var(--f-print); letter-spacing: 1.2px; text-transform: uppercase; color: #6b1d16; } .chips { display: flex; flex-wrap: wrap; gap: 5px; } .chip { padding: 1px 8px; border-radius: 2px; font: 600 13.5px/1.35 var(--f-text); white-space: nowrap; background: rgba(20,22,24,.82); border: 1px solid #0c0d0e; color: var(--text); } .paper .chip { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.28); color: var(--ink); } .chip.coin { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 3px; } .chip.coin .icon { width: 19px; height: 19px; } .chip.wrap { white-space: normal; } .chip.good { color: var(--green); border-color: rgba(94,194,106,.45); } .chip.warn { color: var(--red); border-color: rgba(224,72,63,.5); } .paper .chip.good { color: #1f6b2a; border-color: rgba(31,107,42,.45); } .paper .chip.warn { color: var(--pen-red); border-color: rgba(163,36,28,.5); } /* Button — a painted tin plate: yellow, in a fight — red; secondary — black. */ .btn { flex: none; min-width: 84px; min-height: 34px; padding: 6px 14px; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: 700 15px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; color: #17150f; background: #f2c230; box-shadow: 0 3px 0 #8a6a0c, 0 4px 8px rgba(0,0,0,.3); transition: transform .06s, box-shadow .06s, filter .1s; } .btn:hover { filter: brightness(1.08); } .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a6a0c; } .btn.red { background: #d63c30; color: #fff; box-shadow: 0 3px 0 #7d211c, 0 4px 8px rgba(0,0,0,.3); } .btn.red:active { box-shadow: 0 1px 0 #7d211c; } .btn.ghost { background: #1f2326; color: #e6e3db; box-shadow: inset 0 0 0 2px #0f1112, 0 3px 0 #000; } .btn.small { min-width: 0; min-height: 30px; padding: 4px 11px; font-size: 13px; } .btn.grow { flex: 1; } .btn .icon { width: 20px; height: 20px; } .btn[disabled] { opacity: .45; pointer-events: none; } body.busy .btn, body.busy .buy, body.busy .job, body.busy .td-act, body.busy .td-collect { pointer-events: none; } /* ---------- rarity look (system 6, «Шмот 2.0», owner) ---------- A plain item — on masking tape, a choice item — on blue electrical tape, a rare one — with a red stamp, a legendary — in gold foil from a cigarette pack (app.js, rarPic): tile in the outfit and in the album, notice in the kiosk, item card, boss stash. The picture — in a .rar-pic wrapper: foil under it, tape, electrical tape and stamp over it; no pictures of its own — all here. Pieces — at the picture's corners, don't cover the text; the wrapper is its own layer (isolation), so the upgrade marker and the tile's red dot lie over the tape. The tilt of the pieces (--t) — from the item id. */ .rar-pic { position: relative; z-index: 0; display: block; isolation: isolate; } .rar-pic > .art { position: relative; z-index: 1; width: 100%; height: 100%; } .modal-art > .rar-pic, .good-art > .rar-pic { width: 100%; height: 100%; } /* Masking tape and blue electrical tape — at the top corners, diagonally: the item is stuck on like a photo on a wall. */ .rar-tape { position: absolute; z-index: 2; top: 1%; width: 46%; height: 15%; pointer-events: none; } .rar-tape.l { left: -12%; transform: rotate(calc(-38deg + var(--t, 0deg))); } .rar-tape.r { right: -12%; transform: rotate(calc(36deg + var(--t, 0deg))); } /* Masking tape — yellowish, with a highlight and an edge: visible on a light tile and sheet, and the item through it too. */ .rar-tape.scotch { clip-path: polygon(2% 0, 98% 8%, 100% 55%, 97% 100%, 1% 92%, 0 40%); background: linear-gradient(172deg, rgba(255,255,255,.6), rgba(255,255,255,0) 42%), rgba(214,194,132,.62); box-shadow: inset 0 0 0 1px rgba(128,104,46,.32); } /* Blue electrical tape — dense, glossy at the top; the ends torn unevenly. */ .rar-tape.blue { height: 13%; box-shadow: 0 1px 2px rgba(0,0,0,.45); background: linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,0) 44%, rgba(0,0,0,.18)), #2a4fae; clip-path: polygon(0 6%, 7% 0, 93% 3%, 100% 0, 97% 52%, 100% 100%, 6% 96%, 0 100%, 3% 50%); } /* Stamp — red, round: two rings, «РЕДКАЯ ВЕЩЬ» around the circle and a star in the middle; the paint lay unevenly (noise in SVG), the picture shows through it (multiply). In the bottom right corner of the picture: the tile's caption is below, the upgrade marker — in the top right. */ .rar-stamp { position: absolute; z-index: 2; right: -6%; bottom: -5%; width: 52%; aspect-ratio: 1; pointer-events: none; transform: rotate(calc(-16deg + var(--t, 0deg))); opacity: .9; mix-blend-mode: multiply; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cfilter id='w' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.62' result='m'/%3E%3CfeComposite in='SourceGraphic' in2='m' operator='in'/%3E%3C/filter%3E%3Cpath id='c' d='M50 50m-34.5 0a34.5 34.5 0 1 1 69 0a34.5 34.5 0 1 1-69 0'/%3E%3C/defs%3E%3Cg filter='url(%23w)' fill='%23c1261c'%3E%3Ccircle cx='50' cy='50' r='46.5' fill='none' stroke='%23c1261c' stroke-width='4.5'/%3E%3Ccircle cx='50' cy='50' r='24' fill='none' stroke='%23c1261c' stroke-width='2.4'/%3E%3Ctext font-family='Arial Narrow,Arial,sans-serif' font-weight='700' font-size='12.6'%3E%3CtextPath href='%23c' textLength='213'%3E%D0%A0%D0%95%D0%94%D0%9A%D0%90%D0%AF %D0%92%D0%95%D0%A9%D0%AC %E2%98%85 %D0%A0%D0%95%D0%94%D0%9A%D0%90%D0%AF %D0%92%D0%95%D0%A9%D0%AC %E2%98%85%3C/textPath%3E%3C/text%3E%3Cpath d='M50 32.5L54.4 44.2L66.9 44.6L57.1 52.4L60.5 64.3L50 57.4L39.5 64.3L42.9 52.4L33.1 44.6L45.6 44.2Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } /* Cigarette-pack foil: gold, crumpled facets around the folds and diagonal creases; a glint occasionally passes over it. */ .rar-foil { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 2px; pointer-events: none; background: linear-gradient(28deg, transparent 45%, rgba(255,251,225,.78) 46.8%, rgba(96,62,0,.46) 48.8%, transparent 50.5%), linear-gradient(-56deg, transparent 57%, rgba(255,251,225,.72) 58.6%, rgba(96,62,0,.42) 60.2%, transparent 61.8%), linear-gradient(76deg, transparent 20%, rgba(96,62,0,.42) 21.6%, rgba(255,251,225,.66) 23.2%, transparent 24.8%), linear-gradient(-12deg, transparent 73%, rgba(96,62,0,.36) 74.5%, rgba(255,251,225,.62) 76%, transparent 77.5%), linear-gradient(142deg, transparent 64%, rgba(255,251,225,.56) 65.2%, rgba(96,62,0,.36) 66.6%, transparent 68%), linear-gradient(-100deg, transparent 38%, rgba(96,62,0,.3) 39%, rgba(255,251,225,.5) 40%, transparent 41.2%), conic-gradient(from 18deg at 34% 40%, rgba(255,255,255,.62), rgba(90,58,0,.36) 11%, rgba(255,255,255,.32) 23%, rgba(90,58,0,.4) 37%, rgba(255,255,255,.56) 51%, rgba(90,58,0,.3) 65%, rgba(255,255,255,.44) 80%, rgba(90,58,0,.38) 91%, rgba(255,255,255,.62)), conic-gradient(from 200deg at 74% 72%, rgba(255,255,255,.36), rgba(90,58,0,.28) 20%, rgba(255,255,255,.32) 45%, rgba(90,58,0,.26) 70%, rgba(255,255,255,.36)), conic-gradient(from 80deg at 72% 18%, rgba(255,255,255,.26), rgba(90,58,0,.24) 25%, rgba(255,255,255,.22) 50%, rgba(90,58,0,.22) 75%, rgba(255,255,255,.26)), linear-gradient(135deg, #f8e28f, #cc9a31 40%, #f4d67d 57%, #a6761f); box-shadow: inset 0 0 0 1px rgba(122,82,0,.6), inset 0 0 7px rgba(92,60,0,.38), 0 1px 2px rgba(0,0,0,.35); } .rar-foil::after { content: ""; position: absolute; inset: -10% -60%; transform: translateX(-80%); background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.82) 50%, transparent 62%); animation: rar-glint 5.5s ease-in-out infinite; animation-delay: var(--g, 0s); } @keyframes rar-glint { 0%, 62% { transform: translateX(-80%); } 88%, 100% { transform: translateX(80%); } } .look-foil > .art { filter: drop-shadow(0 2px 2px rgba(60,40,0,.5)); } @media (prefers-reduced-motion: reduce) { .rar-foil::after { animation: none; opacity: 0; } } /* A craft item (workbench): under the picture — a scrap of graph paper in an ink frame, in the corner — a drawing stamp. */ .rar-plan { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(204,104,44,.36) 0 1px, transparent 1px 25%), repeating-linear-gradient(90deg, rgba(204,104,44,.36) 0 1px, transparent 1px 25%), repeating-linear-gradient(0deg, rgba(204,104,44,.15) 0 1px, transparent 1px 5%), repeating-linear-gradient(90deg, rgba(204,104,44,.15) 0 1px, transparent 1px 5%), #f3ecd8; box-shadow: inset 0 0 0 1.5px rgba(29,27,23,.72), 0 1px 2px rgba(0,0,0,.3); } .rar-plan::after { content: ""; position: absolute; right: 0; bottom: 0; width: 40%; height: 17%; background: rgba(243,236,216,.9); border: solid rgba(29,27,23,.72); border-width: 1.5px 0 0 1.5px; box-shadow: inset 0 -1.5px 0 rgba(29,27,23,.72), inset -1.5px 0 0 rgba(29,27,23,.72); } /* Glow by rarity (owner 2026-09-30: «лёгкое сияние с анимацией перелива на заднике… чтобы понимать по цвету, обычная вещь или легендарка; обычная не светится, а другие светятся»; «свечение не за иконкой предмета, а за карточкой предмета, т. е. задник»): the card's backdrop — outfit and album tiles, slot, kiosk notice, stash row, item card picture (app.js, rarGlow). Two spots of the rarity color slowly drift along the backdrop and all of it breathes: choice — blue, rare — raspberry, legendary — gold. The backdrop is under all the card's content (z-index −1 inside the card: it has its own layer, isolation) and over its background. Only transform and opacity are animated, the phase is from the page's common clock (rarPhase): rebuilding the window doesn't jerk the shimmer. No item (album) — the backdrop is pale and still. */ .tile, .zn-lot, .good > .sheet, .modal-art { isolation: isolate; } .card-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; } .card-glow::before { content: ""; position: absolute; inset: -30%; filter: blur(10px); background: radial-gradient(38% 38% at var(--ax, 30%) var(--ay, 66%), var(--glow-a), transparent 72%), radial-gradient(34% 34% at var(--bx, 72%) var(--by, 32%), var(--glow-c), transparent 72%); animation: card-flow var(--fd, 9s) ease-in-out infinite; animation-delay: var(--gs, 0s); } .card-glow::after { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 75% at 50% 45%, var(--glow-b), transparent 78%); animation: card-breath var(--bd, 4.5s) ease-in-out infinite; animation-delay: var(--gb, 0s); } /* A loop of three points is separate for each card (rarGlow): the spots wander, rather than swing along one diagonal. */ @keyframes card-flow { 0%, 100% { transform: translate(var(--p1x, -9%), var(--p1y, 7%)) rotate(var(--r1, 0deg)); } 33% { transform: translate(var(--p2x, 9%), var(--p2y, -7%)) rotate(var(--r2, 16deg)); } 66% { transform: translate(var(--p3x, 4%), var(--p3y, 9%)) rotate(var(--r3, -10deg)); } } @keyframes card-breath { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } .g-choice { --glow-a: rgba(58,140,255,.74); --glow-b: rgba(40,110,240,.4); --glow-c: rgba(110,225,255,.72); } .g-rare { --glow-a: rgba(236,44,100,.66); --glow-b: rgba(200,30,80,.36); --glow-c: rgba(255,120,90,.62); } .g-legend { --glow-a: rgba(255,190,30,.9); --glow-b: rgba(255,160,30,.5); --glow-c: rgba(255,238,160,.95); } .tile.missing .card-glow, .modal-art.missing .card-glow { opacity: .35; } .tile.missing .card-glow::before, .tile.missing .card-glow::after, .modal-art.missing .card-glow::before, .modal-art.missing .card-glow::after { animation: none; } @media (prefers-reduced-motion: reduce) { .card-glow::before, .card-glow::after { animation: none; } } /* ---------- kiosk: notices on the board ---------- Each has its own tilt, color and a rare tear (app.js, scrap), tape — by item rarity: plain and rare on masking tape (the rare one has a stamp on the picture), choice — on blue electrical tape, a legendary has its picture in foil (rarity look). The price is a black printed plate: on yellow paper a yellow sticker would get lost. Bought is torn off: the top remains, the bottom with the price went. */ .goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 14px 14px; padding: 8px 8px 8px; } .good { position: relative; transform: rotate(var(--r)); filter: drop-shadow(0 3px 2px rgba(0,0,0,.42)); } .sheet { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 10px; clip-path: var(--edge); } /* wear of the stamp — a light worn spot over the picture and captions */ .sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse var(--e1w, 40%) var(--e1h, 25%) at var(--e1x, 50%) var(--e1y, 50%), rgba(255,255,255,var(--e1a, .15)), transparent 70%); } .good-art { display: block; width: 80px; height: 80px; } .good-art .art { width: 100%; height: 100%; filter: saturate(var(--sat, .9)) sepia(.08); } .good-art .ph { border-radius: 4px; } .good-art:hover { filter: brightness(1.08); } .good-name { text-align: center; font: 700 15px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: .3px; } .good-stats { text-align: center; font: 15px/1.1 var(--f-text); color: #2d2b27; } .good-until { font: 700 16px/1 var(--f-hand); color: var(--pen-red); text-align: center; } .buy { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding: 6px 12px; font: 700 17px/1 var(--f-print); letter-spacing: .5px; color: #f0d24a; background: var(--plate); transform: rotate(var(--br, 0deg)); box-shadow: 0 2px 0 rgba(0,0,0,.25); } .buy:hover { background: #2e2a24; } .buy .icon { width: 22px; height: 22px; } .buy[disabled] { background: #8d877b; color: #efece4; pointer-events: none; } .note-rar { position: absolute; top: 5px; left: 8px; font: 700 18px/1 var(--f-hand); transform: rotate(-6deg); } .note-rar.r-choice { color: #1d449b; } .note-rar.r-rare { color: #a8231b; } .note-rar.r-legend { color: #8a5a00; } .note-need, .note-took { position: absolute; top: 5px; right: 8px; font: 700 18px/1 var(--f-hand); color: var(--pen-red); transform: rotate(6deg); } .good { --tear-gap: 50px; } /* bought is torn off this many pixels above the bottom: under the name */ .good.owned .good-stats, .good.owned .buy { visibility: hidden; } .good.owned::before { content: ""; position: absolute; inset: 0; background: #f6f3ea; clip-path: var(--under); } /* The kiosk board — full height, in portrait and landscape: otherwise on «семках» or «расходняке» (one or two notices) it shrinks to the middle and the tabs go out from under the finger — a tap on the old «За бабки» spot misses the window and closes the kiosk (owner 2026-09-29: the tabs «должны быть статичными, чтобы переключить в любой момент»; only the notices scroll, the tabs are above them). portrait: notices in two columns (in a wider window — three), a smaller picture — more items fit the screen, in a wide column it grows with it; tabs and price — under the finger. The tear of bought items is as before: under the name, over the price. */ .win.wide.board { height: 100%; } .tall .win.board .win-tabs button { min-height: 38px; padding: 11px 16px 10px; font-size: 15px; } .tall .goods { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px 10px; padding: 6px 6px 10px; } .tall .sheet { padding: 12px 8px 9px; } .tall .good-art { width: clamp(68px, 44%, 92px); height: auto; aspect-ratio: 1; } .tall .good-stats { font-size: 14px; } .tall .buy { padding: 8px 14px; } /* ---------- jobs: «Дворовый вестник» as a spread ---------- Each job is a note: tap — done. Under a finger the note is circled by a red pen. */ .win.gazeta { max-width: 1120px; height: 100%; max-height: 660px; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 14px 22px rgba(0,0,0,.65)); } .win.gazeta > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.gazeta .win-body { padding: 0; overflow: hidden; } .gz { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; color: var(--ink); clip-path: polygon(0 .6%, 50% 0, 100% .5%, 99.8% 99.4%, 50% 100%, .2% 99.5%); background: linear-gradient(90deg, transparent 47.5%, rgba(0,0,0,.10) 49.6%, rgba(0,0,0,.18) 50%, rgba(255,255,255,.25) 50.3%, transparent 52.5%), radial-gradient(ellipse 40% 30% at 18% 78%, rgba(255,255,255,.35), transparent 70%), radial-gradient(ellipse 35% 40% at 82% 30%, rgba(90,80,60,.07), transparent 70%), radial-gradient(circle 34px at 88% 86%, transparent 76%, rgba(125,92,40,.16) 86%, transparent 95%), #e6e2d6; box-shadow: inset 0 0 26px rgba(90,75,45,.25); } .gz-page { position: relative; min-height: 0; padding: 16px 20px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-content: start; overflow-y: auto; scrollbar-width: none; } .gz-page::-webkit-scrollbar { display: none; } .gz-mast { grid-column: 1 / -1; text-align: center; border-bottom: 3px double var(--ink); padding-bottom: 4px; } .gz-name { font: 700 42px/1 var(--f-news); letter-spacing: .5px; } .gz-line, .gz-runner { display: flex; justify-content: space-between; gap: 8px; font: 600 11.5px/1.3 var(--f-print); text-transform: uppercase; letter-spacing: 1px; } .gz-line { border-top: 1px solid var(--ink); margin-top: 4px; padding-top: 3px; } .gz-runner { grid-column: 1 / -1; border-bottom: 1px solid var(--ink); padding: 0 44px 4px 0; } .job { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 38% 1fr; gap: 3px 12px; align-content: start; padding: 6px 6px 8px; border-top: 2px solid var(--ink); color: var(--ink); } .job > :not(.job-photo) { grid-column: 2; } .job-photo { grid-column: 1; grid-row: 1 / span 6; border: 1px solid var(--ink); overflow: hidden; background: #cfcabb; } .job-photo .art { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.3) sepia(.28) contrast(1.08) brightness(1.02); } .job.lead { grid-template-columns: 1.15fr 1fr; gap: 4px 14px; } .job-rubric { font: 600 11.5px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.4px; color: #6b1d16; } .job-title { font: 700 18px/1.12 var(--f-news); } .job.lead .job-title { font-size: 25px; } .job-lede { font: italic 13px/1.25 var(--f-news); color: #3a3630; } .job-terms { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .job-terms .chip { padding: 0; background: none; border: 0; color: var(--ink); font: 700 15px/1 var(--f-text); } .job-terms .chip .icon { width: 20px; height: 20px; } .job-cost { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 4px; background: var(--plate); color: #f0d24a; font: 700 16px/1 var(--f-print); } .job-cost .icon { width: 20px; height: 20px; } .job.tired .job-cost { background: #7a2a22; color: #ffd9d4; } .job-need { font: 700 19px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-3deg); } /* A job outside the law (system 22, step 3): a red stamp across the photo, the cops' terms in red pen in the lead-in and in the terms row. */ .job-photo { position: relative; } .job-stamp { position: absolute; left: -4px; top: 9px; padding: 3px 9px 2px; font: 700 11.5px/1 var(--f-print); letter-spacing: 1.6px; text-transform: uppercase; color: #fff3f0; background: rgba(184,36,26,.9); border: 1px solid rgba(255,255,255,.35); transform: rotate(-9deg); box-shadow: 0 1px 2px rgba(0,0,0,.35); pointer-events: none; } .job-cops { display: block; margin-top: 2px; font: 700 15px/1.15 var(--f-hand); font-style: normal; color: var(--pen-red); } .job-law { display: none; font: 700 16px/1 var(--f-hand); color: var(--pen-red); white-space: nowrap; } /* only where the lead-in is hidden */ .job-mastery { display: flex; align-items: center; gap: 6px; font: 12.5px/1 var(--f-text); color: #4a463e; } .job-rule { flex: 1; position: relative; height: 4px; background: rgba(0,0,0,.12); overflow: hidden; } .job-rule i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); transition: width .35s ease; } .job-count { font-variant-numeric: tabular-nums; } .job.blocked .job-photo .art { filter: grayscale(1) contrast(.9) brightness(1.1); } .job.blocked .job-title, .job.blocked .job-lede { color: #7a756b; } .job::after { content: ""; position: absolute; inset: -6px -8px; border: 3px solid rgba(184,36,26,.85); border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; transform: rotate(-1.5deg); opacity: 0; transition: opacity .12s; pointer-events: none; } .job:active::after { opacity: 1; } @media (hover: hover) { .job:hover::after { opacity: 1; } } .gz-news { font: 8.5px/1.25 var(--f-news); color: #6c675c; text-align: justify; hyphens: auto; overflow: hidden; } .gz-news b { display: block; margin-bottom: 2px; font: 700 12.5px/1.1 var(--f-news); color: #2d2a24; text-align: left; } .gz-box { border: 1px solid var(--ink); padding: 6px 8px; align-self: start; } .gz-box-title { font: 600 11px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; } .gz-chart { display: flex; align-items: flex-end; gap: 4px; height: 44px; padding: 0 4px; border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .gz-chart i { flex: 1; background: #57524a; } /* «Дела 2.0», step 1: the district's week in its newspaper. The front page is the week's story: «На прошлой неделе» under the masthead, the event as the lead article, the «Ветка недели» box under it, a framed notice the reader marks up himself: done steps ticked and struck in red pen with the step's violet stamp, the current one circled in red pen with «Сделать» on a black price plate, the next ones faded; the prize row with «Забрать» in red, «Доведено» stamped across the box; «Всем двором» as the cells of a petition. Jobs: «Закрыто» stamped over a closed one's photo, the week's factor as a price sticker on the corner, the week's notes in red and blue pen. */ .gz-last { grid-column: 1 / -1; margin-top: -4px; padding: 0 2px 4px; border-bottom: 1px solid var(--ink); font: 12.5px/1.25 var(--f-news); color: #3a3630; } .gz-last b { font: 600 11.5px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: #6b1d16; } .gz-ev { grid-column: 1 / -1; display: grid; grid-template-columns: 44% minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 3px 12px; align-content: start; padding: 6px 2px 2px; border-top: 2px solid var(--ink); } .gz-ev > :not(.gz-ev-photo) { grid-column: 2; } .gz-ev-photo { grid-column: 1; grid-row: 1 / span 3; align-self: start; border: 1px solid var(--ink); overflow: hidden; background: #cfcabb; } .gz-ev-photo .art { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.3) sepia(.28) contrast(1.08) brightness(1.02); } .gz-ev-rubric { font: 600 11.5px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.4px; color: #6b1d16; } .gz-ev-title { font: 700 25px/1.08 var(--f-news); } .gz-ev-text { font: italic 13px/1.28 var(--f-news); color: #3a3630; } .wk { position: relative; grid-column: 1 / -1; margin: 3px 3px 4px; padding: 7px 10px 8px; border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 2px; background: rgba(255,255,255,.2); color: var(--ink); } .wk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wk-plate { padding: 4px 9px 3px; background: var(--ink); color: #e6e2d6; font: 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; white-space: nowrap; } .wk-till { font: italic 12px/1 var(--f-news); color: #5a554b; white-space: nowrap; } .wk-title { margin-top: 5px; font: 700 20px/1.1 var(--f-news); } .wk-intro { margin-top: 2px; font: italic 12.5px/1.25 var(--f-news); color: #3a3630; } .wk-steps { display: flex; flex-direction: column; margin-top: 6px; border-top: 1px solid rgba(29,27,23,.6); } .wk-step, .wk-final { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; width: 100%; padding: 5px 4px 5px 0; border-bottom: 1px dotted rgba(29,27,23,.5); color: var(--ink); text-align: left; } .wk-n { grid-column: 1; grid-row: 1 / span 2; align-self: start; font: 700 16px/1.3 var(--f-print); text-align: center; } .wk-line { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; } .wk-name { font: 700 15px/1.15 var(--f-news); } .wk-count { font: 600 12.5px/1 var(--f-print); white-space: nowrap; } .wk-marks { font: 700 16px/1 var(--f-hand); color: var(--pen-red); } .wk-terms { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .wk .chip { padding: 0; background: none; border: 0; color: var(--ink); font: 700 14px/1 var(--f-text); } .wk .chip.warn { color: var(--pen-red); } .wk .chip .icon { width: 18px; height: 18px; } .wk-terms .job-cost { padding: 2px 6px 2px 3px; font-size: 14px; } .wk-terms .job-cost .icon { width: 17px; height: 17px; } .wk-card { grid-column: 2; grid-row: 2; font: italic 12.5px/1.25 var(--f-news); color: #3a3630; } .wk-do { grid-column: 3; grid-row: 2; justify-self: end; align-self: end; padding: 6px 13px 5px; background: var(--plate); color: #f0d24a; font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.3); } .wk-why { grid-column: 2 / -1; grid-row: 3; font: 700 16px/1.1 var(--f-hand); color: var(--pen-red); } /* locked (2026-10-25): the stamp where «Сделать» stands, the shop button under the reason; the chips stay as they are */ .wk-lock { display: inline-block; margin: 0 8px 2px 0; padding: 3px 8px 2px; border: 2px solid rgba(184,36,26,.85); border-radius: 4px; transform: rotate(-3deg); font: 700 14px/1 var(--f-hand); color: var(--pen-red); white-space: nowrap; vertical-align: middle; } .wk-lock .icon { width: 14px; height: 14px; vertical-align: -2px; } .wk-go { grid-column: 2 / -1; grid-row: 4; justify-self: start; margin-top: 3px; padding: 6px 13px 5px; background: var(--plate); color: #f0d24a; font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.3); } .wk-go:active { transform: translateY(2px); box-shadow: none; } /* done: a red tick, the name struck through, the step's stamp in violet */ .wk-step.done .wk-n { font: 700 22px/1 var(--f-hand); color: var(--pen-red); } .wk-step.done .wk-name { color: #4a463e; text-decoration: line-through; text-decoration-color: rgba(184,36,26,.8); text-decoration-thickness: 2px; } .wk-sstamp { grid-column: 3; grid-row: 1 / span 2; justify-self: end; max-width: 200px; padding: 2px 6px 1px; border: 2px solid #5b3a98; border-radius: 3px; color: #5b3a98; font: 700 11px/1.15 var(--f-print); text-transform: uppercase; letter-spacing: .5px; text-align: center; opacity: .85; transform: rotate(-3deg); } /* the next ones: faded print, the price plate grey */ .wk-step.wait { opacity: .5; } .wk-step.wait .job-cost { background: #57524a; color: #e6e2d6; } /* the current one and the final waiting: circled in red pen, as the reader marks what he goes to do */ .wk-step.current, .wk-final.ready { cursor: pointer; } .wk-step.current::after, .wk-final.ready::after { content: ""; position: absolute; inset: -2px -5px; border: 2.5px solid rgba(184,36,26,.8); border-radius: 26% 32% 24% 30% / 52% 44% 58% 46%; transform: rotate(-.5deg); pointer-events: none; } .wk-step.current:active, .wk-final.ready:active { transform: translateY(1px); } .wk-step.current:active .wk-do, .wk-final.ready:active .wk-do { box-shadow: none; transform: translateY(2px); } .wk-step.tired .job-cost { background: #7a2a22; color: #ffd9d4; } .wk-step.current.off { cursor: default; } .wk-step.current.off::after { border-style: dashed; border-color: rgba(29,27,23,.35); } .wk-step.current.off .wk-name, .wk-step.current.off .wk-terms { color: #7a756b; opacity: .8; } .wk-step.current.off .job-cost { background: #57524a; color: #e6e2d6; } /* the final */ .wk-final { border-bottom: 0; } .wk-final .wk-n { color: #8a6410; font-size: 18px; } .wk-prize { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .wk-sup { max-width: 100%; } .wk-notes { display: flex; flex-wrap: wrap; gap: 0 12px; font: 700 15px/1.15 var(--f-hand); color: #1d3f8f; } .wk-do.take { grid-row: 1 / span 2; align-self: center; background: var(--pen-red); color: #fff3f0; padding: 8px 16px 7px; font-size: 15px; transform: rotate(-2deg); } .wk-final.taken .wk-line, .wk-final.taken .wk-notes { opacity: .55; } .wk-stamp { position: absolute; right: 18px; top: 22px; padding: 5px 14px 3px; border: 3px solid rgba(184,36,26,.85); border-radius: 4px; color: rgba(184,36,26,.85); font: 700 26px/1 var(--f-print); text-transform: uppercase; letter-spacing: 3px; transform: rotate(-11deg); pointer-events: none; mix-blend-mode: multiply; } /* «Всем двором» */ .wk-tg { margin-top: 6px; } .wk-tg-row { display: flex; align-items: center; gap: 8px; } .wk-tg-k { flex: none; font: 600 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; } .wk-cells { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; } .wk-cells i { width: 11px; height: 11px; border: 1.5px solid var(--ink); } .wk-cells i.on { background: var(--ink); } .wk-tg.reached .wk-cells i.on { background: var(--pen-red); border-color: var(--pen-red); } .wk-bar { flex: 1; min-width: 40px; height: 9px; border: 1.5px solid var(--ink); } .wk-bar i { display: block; height: 100%; background: var(--ink); } .wk-tg-n { flex: none; margin-left: auto; font: 700 14px/1 var(--f-text); white-space: nowrap; } .wk-tg-score { margin-top: 2px; font: italic 11.5px/1.2 var(--f-news); color: #5a554b; } .wk-tg-text { margin-top: 3px; font: 700 17px/1.1 var(--f-hand); color: var(--pen-red); } body.busy .wk-step, body.busy .wk-final { pointer-events: none; } /* the jobs the week touches */ .job-shut { position: absolute; left: 50%; top: 50%; padding: 4px 12px 2px; border: 3px solid rgba(29,27,23,.85); border-radius: 3px; background: rgba(230,226,214,.7); color: rgba(29,27,23,.9); font: 700 18px/1 var(--f-print); letter-spacing: 3px; text-transform: uppercase; transform: translate(-50%, -50%) rotate(-10deg); white-space: nowrap; pointer-events: none; } .job.shut { cursor: default; } .job.shut::after { display: none; } .job.shut .job-photo .art { filter: grayscale(1) contrast(.85) brightness(1.08); } .job.shut .job-title, .job.shut .job-lede, .job.shut .job-terms, .job.shut .job-rubric { color: #7a756b; } .job.shut .job-cost { background: #57524a; color: #e6e2d6; } .job-mult { position: absolute; right: 5px; top: 5px; padding: 3px 7px 2px; font: 700 15px/1 var(--f-print); white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.45); transform: rotate(5deg); pointer-events: none; } .job-mult.up { background: #f0d24a; color: var(--ink); } .job-mult.down { background: #cdd5dd; color: #22408f; } .job-week { display: flex; flex-wrap: wrap; gap: 0 10px; } .job-note { font: 700 16px/1.1 var(--f-hand); color: var(--pen-red); } .job-trace { font: 700 16px/1.1 var(--f-hand); color: #1d3f8f; } .job-hours { font: 700 16px/1 var(--f-hand); color: var(--pen-red); white-space: nowrap; } .job.temp .job-rubric { color: #1d3f8f; } .temp-day b { font: 600 13px/1 var(--f-print); white-space: nowrap; } .gz-star { grid-column: 1 / -1; font: italic 12.5px/1.25 var(--f-news); color: #3a3630; } /* «Дела 2.0», step 2: the district state as the paper's weather strip under the masthead, and its stamp on the jobs it touches: a pencil note in graphite with the factor («дождь ×0,6»), next to the week's red and blue pen. */ .gz-wx { grid-column: 1 / -1; margin-top: 4px; padding: 4px 2px 5px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 12.5px/1.3 var(--f-news); color: #3a3630; } .gz-wx-k { display: inline-block; margin-right: 7px; padding: 3px 7px 2px; background: var(--ink); color: #e6e2d6; font: 700 11px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; vertical-align: 1px; } .gz-wx b { font: 700 14px/1.1 var(--f-news); color: var(--ink); } .gz-wx-till { font-style: italic; color: #5a554b; white-space: nowrap; } .gz-wx-note { margin-top: 2px; font: 700 16px/1.1 var(--f-hand); color: #3d3a35; } .job-wx { padding: 0 5px; border: 1.5px solid #3d3a35; border-radius: 3px; font: 700 15px/1.2 var(--f-hand); color: #3d3a35; white-space: nowrap; transform: rotate(-2deg); } .job-wx-note { font: 700 16px/1.1 var(--f-hand); color: #3d3a35; } .ob-wx { display: block; font: italic 12.5px/1.15 var(--f-text); color: #a9c4de; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ob-ev.in-tile .ob-wx { font-size: 10.5px; line-height: 1.1; white-space: normal; } .gz-nb p { margin: 0 0 5px; font: 11.5px/1.25 var(--f-news); color: #3a3630; } .step-news { color: #5b3a98; } .short .gz-ev-title { font-size: 18px; } .short .gz-ev-text { align-self: start; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 12px; } .short .wk-intro { display: none; } .short .wk-title { font-size: 17px; } /* portrait: the newspaper is one strip, not a spread (owner 2026-09-25). Both strips of the spread unfold into one (display: contents — the DOM is the same as in landscape): header on top, notes one under another full width, small news and the seeds rate go down as a footer (order). The footer is also a reserve at the bottom: the last note can be scrolled above the buddy, while a short newspaper ends above him anyway. The whole newspaper scrolls (.win-body) — the window keeps this scroll when the contents change after a job, and a tap on the lower note doesn't throw it to the top. The strip is a gazeta container: the note layout looks at its width and height (@container below), not at the screen. */ .tall .win.gazeta { flex: 1 1 auto; width: auto; height: auto; max-height: none; align-self: stretch; margin: 10px 8px 0 0; padding: 0; gap: 0; } /* The sticker hangs on the newspaper's corner, mostly off the paper: the newspaper stepped back from the top and right so that scrollable notes go less under the cross — a tap on a note's corner does the job rather than closing the newspaper. */ .tall .win.gazeta > .win-x { right: -11px; top: -14px; } .tall .win.gazeta .win-body { overflow-y: auto; scrollbar-width: none; container: gazeta / size; } .tall .win.gazeta .win-body::-webkit-scrollbar { display: none; } /* Same paper, only the fold is across, not along: the strip was folded in half. */ .tall .gz { flex: 1 0 auto; gap: 5px 14px; align-content: start; padding: 10px 12px 18px; clip-path: polygon(0 4px, 50% 0, 100% 3px, 99.6% calc(100% - 4px), 50% 100%, .4% calc(100% - 3px)); background: linear-gradient(180deg, transparent 49.4%, rgba(0,0,0,.06) 49.9%, rgba(255,255,255,.3) 50.1%, transparent 50.8%), radial-gradient(ellipse 60% 16% at 22% 64%, rgba(255,255,255,.3), transparent 70%), radial-gradient(ellipse 50% 22% at 80% 22%, rgba(90,80,60,.07), transparent 70%), radial-gradient(circle 34px at 84% 93%, transparent 76%, rgba(125,92,40,.16) 86%, transparent 95%), #e6e2d6; } .tall .gz-page { display: contents; } .tall .gz-runner { display: none; } .tall .gz-mast { padding-bottom: 5px; } .tall .gz-name { font-size: 30px; } /* on the right — the cross: the title doesn't touch it */ .tall .gz-line { font-size: 13px; } .tall .gz-line span:nth-child(2) { display: none; } /* Note: photo on the left, on the right — the «на сегодня» mark, rubric, headline, (lead-in), conditions and mastery, as in landscape. The photo stretches to the text height, the picture is cropped by the frame rather than setting the height itself: no emptiness under the photo and no row of medals torn from the note. Short text — the photo is not below its minimum (≈16:10, cqw — from the strip width), and mastery is pressed to the photo's bottom by a flexible row (minmax(0, 1fr): with a bare 1fr Chrome stretches it without subtracting the lead-in, and the main photo comes out taller than the text). Gaps — by row margins: an empty grid row (no mark, lead-in hidden) has no gap. */ .tall .job { grid-template-columns: clamp(112px, 32%, 170px) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "photo today" "photo rubric" "photo title" "photo week" "photo lede" "photo terms" "photo ." "photo mast"; gap: 0 10px; padding: 6px 2px 7px; } .tall .job-photo { position: relative; grid-area: photo; align-self: stretch; min-height: 78px; min-height: min(20cqw, 104px); } /* The picture — the full frame height with its 16:10 proportion, the frame cuts it at the sides. Not object-fit: a picture cropped by it Chrome shrinks without smoothing, and the photo flickers. So the photo frame is never wider than 16:10 — the minimum height of each layout below is chosen for its width. */ .tall .job-photo .art { position: absolute; top: 0; left: 50%; width: auto; height: 100%; min-width: 100%; transform: translateX(-50%); } .tall .job-today { grid-area: today; margin-bottom: 4px; } .tall .job-rubric { grid-area: rubric; font-size: 13px; } .tall .job-title { grid-area: title; margin-top: 3px; font-size: 17px; } .tall .job-lede { grid-area: lede; display: none; margin-top: 3px; } .tall .job-terms { grid-area: terms; margin-top: 5px; gap: 8px; } .tall .job-mastery { grid-area: mast; margin-top: 5px; font-size: 13px; } .tall .job-mastery .medals { gap: 2px; font-size: 15px; } /* bronze can be told from silver even on a small phone */ .tall .job-stamp { left: -3px; top: 6px; font-size: 10.5px; letter-spacing: 1.3px; padding: 2px 7px; } .tall .job:not(.lead) .job-law { display: inline; font-size: 14px; } /* The main note — as on the front page: rubric and headline big at full width, under them a wider photo, to the right of it the lead-in, conditions and mastery. */ .tall .job.lead { grid-template-columns: clamp(150px, 44%, 250px) minmax(0, 1fr); grid-template-areas: "today today" "rubric rubric" "title title" "week week" "photo lede" "photo terms" "photo ." "photo mast"; } .tall .job.lead .job-title { margin: 2px 0 6px; font-size: 22px; } .tall .job.lead .job-photo { min-height: 108px; min-height: min(27cqw, 156px); } .tall .job.lead .job-lede { display: block; margin-top: 0; } /* A low narrow strip (Telegram not fullscreen, a small phone, a narrow PC window): the main one is lower — a narrower photo, the lead-in in two lines. Without scrolling, one more note is visible. */ @container gazeta (max-width: 519.98px) and (max-height: 720px) { .tall .job.lead { grid-template-columns: clamp(120px, 35%, 200px) minmax(0, 1fr); } .tall .job.lead .job-photo { min-height: min(21cqw, 125px); } .tall .job.lead .job-lede { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } } /* A wide strip (tablet): there is enough room to the right of the photo — a lead-in on every note, and the main one — like the landscape spread: photo on the left, all the text on the right, no empty field under the conditions. */ @container gazeta (min-width: 520px) { .tall .job { grid-template-columns: clamp(118px, 30%, 170px) minmax(0, 1fr); } .tall .job-photo { min-height: min(18cqw, 106px); } .tall .job-lede { display: block; } .tall .job.lead { grid-template-columns: clamp(200px, 44%, 280px) minmax(0, 1fr); grid-template-areas: "photo today" "photo rubric" "photo title" "photo week" "photo lede" "photo terms" "photo ." "photo mast"; } .tall .job.lead .job-title { margin: 3px 0 4px; } .tall .job.lead .job-photo { min-height: min(27.5cqw, 175px); } } /* Footer: small news and the seeds rate in two columns, set off from the notes by a double rule. */ .tall .gz-news, .tall .gz-box { order: 1; } .tall .gz-news { font-size: 11.5px; } .tall .gz-news b { font-size: 14px; } .tall .gz-page:first-child .gz-news { margin-top: 4px; border-top: 3px double var(--ink); padding-top: 7px; } /* «Дела 2.0» in portrait: the strip reads top to bottom: last week, the event, the branch box, the column's note, the jobs; the neighbors' box closes the jobs before the footer. The step row keeps its price on the right; the card line and the reason take the width under the name. */ .tall .job-week { grid-area: week; margin-top: 3px; } .tall .gz-last { margin-top: -2px; font-size: 13px; } .tall .gz-wx { font-size: 13px; } .tall .gz-ev { grid-template-columns: clamp(130px, 40%, 240px) minmax(0, 1fr); gap: 3px 10px; } .tall .gz-ev-title { font-size: 21px; } .tall .gz-ev-text { font-size: 13px; } .tall .wk { margin: 4px 3px 6px; padding: 7px 8px 8px; } .tall .wk-name { font-size: 14.5px; } .tall .wk-card { grid-column: 2 / -1; } .tall .wk-step.current .wk-do { grid-row: 3; } .tall .wk-step.current.off .wk-why { grid-row: 3; } .tall .wk-sstamp { max-width: 120px; font-size: 10px; } .tall .wk-stamp { right: 10px; top: 30px; font-size: 22px; } .tall .gz-star { margin-top: 2px; font-size: 13px; } .tall .gz-nb { grid-column: 1 / -1; } .tall .gz-nb p { font-size: 12.5px; } /* ---------- points: a squared notebook ---------- What you hold under a roof, how much is in the till and what is needed for the next roof — in blue ballpoint on the squares, on the left red margins and spring holes, point photos taped in. Hints — in pencil, actions circled in red. */ .win.tetrad { max-width: 1080px; max-height: 100%; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 14px 22px rgba(0,0,0,.65)); } .win.tetrad > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.tetrad .win-body { padding: 0; overflow: hidden; } .td { --pen: #22408f; --pencil: #6f6c66; position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; padding: 10px 22px 12px 70px; color: var(--pen); background: linear-gradient(90deg, transparent 56px, rgba(214,70,70,.6) 56px 57.5px, transparent 57.5px), repeating-linear-gradient(0deg, rgba(80,130,200,.2) 0 1px, transparent 1px 18px), repeating-linear-gradient(90deg, rgba(80,130,200,.2) 0 1px, transparent 1px 18px), linear-gradient(100deg, rgba(0,0,0,.07), transparent 7%), #f2f1ea; box-shadow: inset 0 0 24px rgba(90,80,50,.2); clip-path: polygon(0 .5%, 60% 0, 100% .4%, 99.7% 99.4%, 40% 100%, .3% 99.6%); } .td::-webkit-scrollbar { display: none; } /* spring holes along the left edge */ .td::before { content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 16px; pointer-events: none; background: radial-gradient(circle at 8px 8px, #3a3833 0 4.5px, rgba(0,0,0,.18) 5.5px, transparent 6.5px) 0 0 / 16px 24px repeat-y; } .td-head { display: flex; align-items: center; gap: 12px; padding: 0 44px 6px 0; } /* on the right — room for the cross */ .td-title { font: 700 36px/1 var(--f-hand); text-decoration: underline double; text-decoration-thickness: 2px; text-underline-offset: 5px; transform: rotate(-2deg); } .td-sub { font: 700 17px/1.05 var(--f-hand); color: var(--pencil); max-width: 260px; } .td-sum { display: flex; align-items: center; gap: 8px; font: 700 20px/1 var(--f-hand); white-space: nowrap; } .td-coin { display: inline-flex; align-items: center; gap: 3px; font: 700 20px/1 var(--f-hand); white-space: nowrap; } .td-coin .icon { width: 21px; height: 21px; } .td-empty { color: var(--pencil); } /* «Собрать всё» — circled in red pen; empty tills — a pencil dotted line */ .td-collect { position: relative; flex: none; padding: 6px 16px 8px; font: 700 25px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-2deg); } .td-collect::after, .td-act::after { content: ""; position: absolute; inset: -3px -7px; border: 2.5px solid rgba(184,36,26,.85); border-radius: 50% 46% 52% 48% / 58% 46% 54% 42%; transform: rotate(2.5deg); pointer-events: none; } .td-collect:hover, .td-act:hover { filter: brightness(1.25); } .td-collect:active, .td-act:active { translate: 0 2px; } .td-collect:disabled { color: #9a968c; cursor: default; } .td-collect:disabled::after { border: 2px dashed rgba(120,115,105,.45); } /* Collector (crew perk) carries the till to the obshchak by himself: instead of «Собрать всё» — a note in red pen */ .td-carried { flex: none; max-width: 170px; font: 700 20px/1.05 var(--f-hand); color: var(--pen-red); transform: rotate(-2deg); text-align: right; } /* each district has its own notebook: whose it is — in red pen next to the title */ .td-district { margin-left: -4px; font: 700 26px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-3deg); white-space: nowrap; } /* notebook row — a point: photo, what place it is, roof with till, next roof */ .td-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 160px 206px; gap: 14px; align-items: start; padding: 10px 0 12px; border-top: 1.5px solid rgba(34,64,143,.4); } .td-photo { position: relative; margin-top: 4px; transform: rotate(var(--r, 0deg)); } .td-photo .art { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 4px solid #fbfaf5; background: #d8d4c8; box-shadow: 0 2px 4px rgba(0,0,0,.35); } .td-photo .ph { border: 4px solid #fbfaf5; } .td-photo .tape { left: 32%; top: -8px; transform: rotate(-5deg); } .td-row.free .td-photo .art { filter: grayscale(.9) contrast(.9) brightness(1.05); } .td-name { font: 700 24px/1 var(--f-hand); } .td-text { margin-top: 4px; font: 14px/1.25 var(--f-text); color: #3b4056; } .td-roofline { display: flex; align-items: center; gap: 7px; font: 700 18px/1 var(--f-hand); } .td-roofs { display: inline-flex; gap: 3px; } .td-roofs i { width: 17px; height: 12px; background: rgba(34,64,143,.18); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .td-roofs i.on { background: var(--pen); } .td-cash { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; font: 700 19px/1 var(--f-hand); } .td-cash .icon { width: 21px; height: 21px; align-self: center; } .td-cash b { font-size: 26px; } .td-bar { position: relative; height: 9px; margin-top: 3px; border: 1.5px solid var(--pen); border-radius: 2px 5px 3px 4px; } .td-fill { position: absolute; inset: 0 auto 0 0; transition: width .4s ease; background: repeating-linear-gradient(-55deg, var(--pen) 0 1.5px, transparent 1.5px 4px); } .td-rate { margin-top: 4px; font: 700 17px/1.05 var(--f-hand); color: var(--pencil); } .td-need { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; } .td-step { font: 700 20px/1 var(--f-hand); } .td-need .td-coin { color: var(--pen-red); } .td-need .td-coin.ok { color: #1f6b2a; } .td-note { margin-top: 4px; font: 13.5px/1.25 var(--f-text); color: var(--pencil); } .td-link { display: inline; font: inherit; color: var(--pen); text-decoration: underline dashed; text-underline-offset: 3px; } .td-link:hover { color: var(--pen-red); } .td-act { position: relative; margin: 10px 0 2px 6px; padding: 4px 12px 6px; font: 700 22px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-2deg); } .td-wait { margin-top: 6px; font: 700 18px/1 var(--f-hand); color: var(--pencil); } .td-top { margin-top: 2px; font: 700 19px/1.05 var(--f-hand); color: #1f6b2a; } /* icon on the notebook in the corner of the yard: roof affordable — a red dot; otherwise — how much has accrued */ .corner-dot { position: absolute; right: -4px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #000; } .corner-tag { position: absolute; right: -8px; bottom: -13px; padding: 1px 6px 2px; font: 700 15px/1 var(--f-hand); color: var(--ink); background: #f5c928; transform: rotate(-6deg); box-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; } /* in a fight: covered by a roof — a link to the notebook */ .fp-roof { align-self: flex-start; padding: 3px 12px 4px; font: 700 18px/1.1 var(--f-hand); color: var(--pen-red); white-space: nowrap; border: 2px solid rgba(184,36,26,.8); border-radius: 46% 54% 48% 52% / 60% 45% 55% 40%; } .fp-roof:hover { background: rgba(184,36,26,.08); } .medals { display: flex; gap: 1px; font-size: 11px; flex: none; } .medals span { filter: grayscale(1); opacity: .3; } .medals span.on { filter: none; opacity: 1; } /* portrait: the notebook is a full-screen page, a point entry — in a column. Narrower margins and spring, the header in three lines: title, in pencil — what it is, tills and «Собрать всё». Entry: photo, next to it name, roof and till; under them the description, below — the next roof («ништяков мало» — at the end of its row), «Взять под крышу» — on the right, under the thumb. Markup is the same as in landscape: a row is a grid by areas. In portrait entries don't fit the screen, and it is not the page itself that scrolls but the window (win-body): the page grows with entries, the grid and spring holes go to its bottom, and the window after an action and a minute's re-read keeps where you were (renderWin remembers the win-body scroll; a page scroll would reset it to the top). */ /* padding and gap — anew: the common window frame in portrait (.tall .win) is later in the cascade and would give the notebook its margins back */ .tall .win.tetrad { height: 100%; padding: 0; gap: 0; } .tall .win.tetrad > .win-x { right: -4px; top: -6px; } .tall .win.tetrad .win-body { overflow-y: auto; scrollbar-width: none; } .tall .win.tetrad .win-body::-webkit-scrollbar { display: none; } .tall .td { flex: 1 0 auto; overflow: visible; container: td / inline-size; padding: 8px 12px 18px 48px; background-position: -16px 0, 0 0, 0 0, 0 0, 0 0; } .tall .td::before { left: 8px; } .tall .td-head { flex-wrap: wrap; gap: 2px 10px; padding: 0 0 10px; } .tall .td-title { font-size: 34px; } .tall .td-district { font-size: 25px; } .tall .td-sub { order: 1; flex-basis: 100%; max-width: none; margin-top: 2px; font-size: 16px; } /* tills and «Собрать всё» — in one line even with two currencies (💵 12 985 and 🌻 3): gaps narrower, no spacer — an extra gap on it used to wrap the button; if bigger sums don't fit — the button goes a line lower, but on the right, under the thumb */ .tall .td-sum { order: 2; margin-top: 6px; gap: 6px; } .tall .td-head .grow { display: none; } .tall .td-collect { order: 4; margin: 6px 6px 0 auto; padding: 6px 12px 8px; } .tall .td-carried { order: 4; margin: 6px 6px 0 auto; } .tall .td-row { grid-template-columns: minmax(94px, 27%) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 12px; padding: 12px 0; grid-template-areas: "photo name" "photo box" "text text" "next next"; } /* photo taller than the name with the till — the excess goes down, not between them */ .tall .td-photo { grid-area: photo; margin-top: 2px; } .tall .td-about { display: contents; } .tall .td-name { grid-area: name; font-size: 23px; text-wrap: balance; } /* «Платный туалет «У Шуры»» — doesn't leave «У» hanging */ .tall .td-box { grid-area: box; margin-top: 5px; } .tall .td-cash { margin-top: 4px; } .tall .td-bar { max-width: 260px; } .tall .td-rate { font-size: 16px; text-wrap: balance; } /* «возьмёшь — капать будет» doesn't break «10 в час» */ .tall .td-text { grid-area: text; margin-top: 8px; } .tall .td-next { grid-area: next; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; grid-template-areas: "need wait" "note note" "act act"; margin-top: 8px; } .tall .td-need { grid-area: need; } .tall .td-note { grid-area: note; font-size: 14px; } .tall .td-wait { grid-area: wait; margin: 0 4px 0 0; font-size: 17px; } .tall .td-top { grid-column: 1 / -1; } /* «где взять» — a link in a line of text: the tap target is wider than the line itself, to hit it with a finger */ .tall .td-link { position: relative; } .tall .td-link::after { content: ""; position: absolute; inset: -9px -4px; } /* «Взять под крышу» — next to what is needed for the roof, in place of «ништяков мало» (empty when the button is there), not its own row with emptiness on the left. Next to the button the requirements don't fit in one line even at «💵 500», so «Крыша 3:» — above them, tokens with cash — a line below: two short lines exactly the button's height, not a break wherever it falls. The «act act» row of td-next above — a reserve for a browser without :has() */ .tall .td-next:has(> .td-act) { grid-template-areas: "need act" "note note"; } .tall .td-next:has(> .td-act) .td-step { flex-basis: 100%; } .tall .td-act { grid-area: act; justify-self: end; align-self: center; margin: 0 8px 0 6px; padding: 6px 16px 8px; white-space: nowrap; } /* a wider page (tablet, narrow PC window): requirements — in one line, the button — beside both lines, and from «где взять» too */ @container td (min-width: 400px) { .tall .td-next:has(> .td-act) { grid-template-areas: "need act" "note act"; } .tall .td-next:has(> .td-act) .td-step { flex-basis: auto; } } /* ---------- first-person fight ---------- The boss full screen, on the right — your hand made of parts (fist/, forearm/): breathes, swings on a tap and hits. The yard behind is blurred and darkened; on the left the name, health and a sheet with the breakdown, top right the district ladder. The boss's reply — shake and the red screen edge. The world (boss and hand) grows with the scene, captions — interface size. */ .fighting .map-layer { visibility: hidden; } /* A fight has its own HUD (the boss, the ladder, your health): the header's floating pieces leave the screen for it, and the fight layer takes the whole stage (before the header floated over the scene the black strip simply sat under the fight's plaque). */ .stage.nohud .hud { display: none; } .fighting .win-layer, .stage.nohud .win-layer { inset: 0; } .backdrop.fight .fill { filter: blur(6px) brightness(.55) saturate(.8); transform: scale(1.06); } .backdrop.fight::after { background: radial-gradient(ellipse 75% 85% at 50% 62%, transparent 35%, rgba(8,9,10,.7)), linear-gradient(rgba(45,12,8,.2), rgba(8,9,10,.45)); } /* Phone (html.handheld, app.js): the fight backdrop is the small copy of the frame (scenemini/, fonmini/), soft by itself, darkened by the overlay and not by a filter: iPhone recomputed the blur in software on every repaint of the scene, every hit included, and showed the scene black for seconds meanwhile (@st_wizard, 2026-10-11). The same for the boss's and the guy's drop-shadow below. */ .handheld .backdrop.fight .fill { filter: none; transform: none; } .handheld .backdrop.fight::after { background: radial-gradient(ellipse 75% 85% at 50% 62%, transparent 35%, rgba(8,9,10,.7)), linear-gradient(rgba(45,12,8,.2), rgba(8,9,10,.45)), rgba(6,7,8,.42); } /* A boss's own place (bossbg/, app.js fightPlace): the camera's focus on him is baked into the picture (scripts/art/bossbg.py), so no filter here, a vignette and a slight dimming by the overlay on any device. */ .backdrop.fight.drawn .fill { filter: none; } .backdrop.fight.drawn::after { background: radial-gradient(ellipse 75% 85% at 50% 62%, transparent 45%, rgba(8,9,10,.5)), rgba(8,9,10,.16); } .win-layer.fp { padding: 0; animation: fade .2s ease-out; } .win-layer.fp::before { display: none; } .win.fp { position: absolute; inset: 0; max-width: none; max-height: none; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; } .win.fp > .win-x { position: absolute; right: 10px; top: 8px; z-index: 6; } .win.fp > .win-body { position: absolute; inset: 0; display: block; padding: 0; overflow: visible; } .fp { position: absolute; inset: 0; overflow: hidden; } .fp-world { position: absolute; inset: 0; } /* The boss is a button: a tap on him is the hit. Stands on the bottom edge, sways; jerks from a hit (app.js, shove). */ .fp-boss { position: absolute; left: 47%; bottom: 0; height: 93%; aspect-ratio: 3 / 4; transform: translateX(-50%); cursor: crosshair; touch-action: manipulation; } .fp-boss-idle { width: 100%; height: 100%; transform-origin: 50% 100%; animation: fp-idle 4.4s ease-in-out infinite; } .fp-boss-body { width: 100%; height: 100%; transform-origin: 50% 100%; } .fp-boss-artbox { width: 100%; height: 100%; } .fp-boss-art { width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); } .handheld .fp-boss-art { filter: none; } /* «Живой босс» (app.js bossFigure): the pose atlas of nine cells, three by three, and over the top 60 % of the frame the damage atlas of fifteen cells, three by five; each cell shown by its background position; the shadow and the locked grey stay on the whole figure. */ .fp-boss-art.live { position: relative; transform-origin: 50% 100%; } /* app.js BOSS_GROW scales a pose around his feet */ .fp-cell { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 300% 300%; background-position: 0 0; } .fp-cell.hurt { bottom: auto; height: 60%; background-size: 300% 600%; } /* three by six: app.js HURT_ROWS */ .fp-cell[hidden] { display: none; } .fp-boss .ph { border-radius: 14px 14px 0 0; } .fp.locked .fp-boss-art { filter: grayscale(1) brightness(.28) drop-shadow(0 10px 18px rgba(0,0,0,.7)); } .handheld .fp.locked .fp-boss-art { filter: grayscale(1) brightness(.28); } .fp.locked .fp-boss { cursor: not-allowed; } @keyframes fp-idle { 0%, 100% { transform: none; } 50% { transform: scale(1.012) rotate(-.5deg); } } /* The hand — a 1200×1500 frame (fist/ and forearm/), stands on screen with knuckles at the point 70 % × 45 % (the translate shift — from app.js, ARM.fist). The frame is larger than the screen: the top with the weapon goes past the top edge, the elbow with the forearm's cut — past the bottom. Breathes by itself (breathe); a hit — rotations of bones (fp-bone, app.js). It isn't tapped: the tap passes through to the boss. */ .fp-hand { position: absolute; left: 70%; top: 45%; height: 160%; aspect-ratio: 4 / 5; z-index: 2; pointer-events: none; } .fp-hand-breathe { position: absolute; inset: 0; transform-origin: 90% 95%; animation: fp-breathe 3.8s ease-in-out infinite; } .fp-arm, .fp-bone { position: absolute; inset: 0; } .fp-bone > .art { position: absolute; inset: 0; width: 100%; height: 100%; } .fp-bone.fist { z-index: 1; } .fp-bone > .art.sleeve { z-index: 2; } /* sleeve cuff — over the wrist */ .fp-bone .ph { opacity: .6; border-radius: 40%; } @keyframes fp-breathe { 0%, 100% { transform: none; } 35% { transform: translate(-.4%, 1%) rotate(-.8deg); } 60% { transform: translate(-.8%, 1.6%) rotate(-1.3deg); } 82% { transform: translate(-.3%, .6%) rotate(-.4deg); } } .fp-stamp { position: absolute; left: 47%; top: 38%; z-index: 3; padding: 4px 16px 6px; pointer-events: none; font: 700 46px/1 var(--f-print); text-transform: uppercase; letter-spacing: 3px; color: #d7261c; border: 5px solid #d7261c; border-radius: 6px; background: rgba(236,226,196,.12); transform: translate(-50%, -50%) rotate(-12deg) scale(1.6); opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); } /* A closed boss — a dark silhouette, over it in marker: what will open him. */ .fp-lockmsg { position: absolute; left: 47%; top: 46%; z-index: 3; max-width: min(46%, 420px); padding: 0 6px; transform: translate(-50%, -50%) rotate(-2deg); text-align: center; pointer-events: none; font: 700 23px/1.12 var(--f-hand); color: #ff8a7e; text-shadow: 0 1px 2px #000, 0 0 10px #000, 0 0 3px #000; } .fp-lockmsg:empty { display: none; } .fp.down .fp-stamp, .fp.dead .fp-stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg); transition-delay: .5s; } /* Looted a legendary (system 6, «Шмот 2.0»): the same stamp as «Уложен!», only gold and with a glint. */ .fp-stamp.legend { color: #f2c230; border-color: #f2c230; background: rgba(40,26,0,.35); text-shadow: 0 0 10px rgba(255,208,70,.8), 0 1px 0 #6b4a00; box-shadow: 0 0 22px rgba(255,200,60,.55), inset 0 0 12px rgba(255,200,60,.35); } .fp.down .fp-lockmsg { visibility: hidden; } /* «на сегодня хватит» — when he gets up, not over the stamp */ /* Fight entry (system 5, 2026-09-30): a line on the sheet — what the fight will cost (entry for a fresh one, a started one — free). */ .fp-entry { font-size: 13.5px; color: #6b1d16; } /* Red screen edge: got hit. Went down — red and dark until you stand up. */ .fp-red { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 72% 70% at 50% 50%, transparent 52%, rgba(205,20,12,.5) 80%, rgba(150,0,0,.88)); } .fp-red.on { animation: fp-red .7s ease-out; } .fp.dead .fp-red { opacity: 1; transition: opacity .5s; background: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(90,0,0,.35) 30%, rgba(150,0,0,.8) 75%, rgba(40,0,0,.95)); } @keyframes fp-red { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } } #screen.shake #backdrop, #screen.shake .fp-world { animation: fp-shake .45s cubic-bezier(.36,.07,.19,.97); } @keyframes fp-shake { 10% { transform: translate(-8px, 3px); } 25% { transform: translate(8px, -4px); } 40% { transform: translate(-6px, 2px); } 55% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 1px); } 100% { transform: none; } } /* «Со всей дури» reply (system 5, triple) — shakes twice as hard and longer. Its own class, not «shake»: app.js removes both before a new reply, otherwise a stuck class would muffle the next shake. */ #screen.haymaker #backdrop, #screen.haymaker .fp-world { animation: fp-shake-hard .65s cubic-bezier(.36,.07,.19,.97); } @keyframes fp-shake-hard { 8% { transform: translate(-16px, 7px) rotate(-.8deg); } 20% { transform: translate(15px, -8px) rotate(.6deg); } 34% { transform: translate(-12px, 5px); } 48% { transform: translate(9px, -4px); } 64% { transform: translate(-5px, 2px); } 80% { transform: translate(2px, -1px); } 100% { transform: none; } } /* On the left: name on a paper strip, boss health, a sheet with the breakdown (scrolls by itself). */ .fp-side { position: absolute; left: 10px; top: 8px; bottom: 50px; width: 240px; z-index: 5; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .fp-side > * { pointer-events: auto; } .fp-plate { display: flex; flex-direction: column; gap: 6px; } .fp-name { position: relative; align-self: flex-start; max-width: 100%; transform: rotate(-1deg); filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); } .fp-name .strip { padding: 5px 16px 6px 12px; } .fp-name .tape.l { left: -12px; top: -6px; transform: rotate(-28deg); } .fp-title { font: 700 19px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: .6px; } /* The opponent is a live player (capt, raid): a long name with a tag — no more than two lines, then an ellipsis. */ .fp-title .nick { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; padding-top: .16em; margin-top: -.16em; } /* room for the dots of «Ё»: a two-line clamp cut them off («СЕРЕГА») */ .fp-sub { margin-top: 2px; font: 14px/1.15 var(--f-text); color: #3a362f; } .fp-hp { height: 22px; border: 2px solid #000; box-shadow: 0 2px 6px rgba(0,0,0,.5); } .fp-hp span { line-height: 18px; font-size: 13.5px; } .fp-wins { margin-top: -2px; font: 700 21px/1 var(--f-hand); color: #ff7a6e; text-shadow: 0 1px 2px #000, 0 0 6px #000; transform: rotate(-3deg); } .fp-wins:empty { display: none; } /* Your own vigor and the beer at the top of a fight (owner 2026-10-16: «сверху иметь предметы для быстрого пополнения энергии и что б было видно сколько энергии есть»): the header leaves the screen in a fight, so the tank stands here under the plate; the tank opens the stash, the can drinks one (app.js, paintFightVigor). Dark capsules in the hand font, like the breath notches. */ .fp-vigor { display: flex; gap: 6px; align-self: flex-start; } .fp-vigor button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 4px 7px; border: 1.5px solid #000; border-radius: 14px; background: rgba(20,22,24,.86); color: var(--text); font: 700 15px/1 var(--f-hand); box-shadow: 0 2px 0 #000, 0 3px 6px rgba(0,0,0,.5); cursor: pointer; } .fp-vigor button .icon { width: 20px; height: 20px; } .fp-vigor button b { font-size: 17px; } .fp-vigor .fv-beer.dry { opacity: .6; } .fp-vigor button:hover { filter: brightness(1.1); } .fp-vigor button:active { translate: 0 1px; } .tall .fp-vigor button { min-height: 34px; font-size: 16px; } .fp-note { flex: 0 1 auto; min-height: 0; display: flex; } .fp-sheet-wrap { position: relative; flex: 1; min-height: 0; display: flex; transform: rotate(calc(var(--r, 0deg) * .35)); filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); } .fp-sheet { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 11px 12px 10px; clip-path: var(--edge); font: 14px/1.22 var(--f-text); scrollbar-width: none; } .fp-sheet::-webkit-scrollbar { display: none; } .fp-sheet .muted { font-size: 13px; } .fp-sheet .fight-warn { font-size: 18px; } .fp-prize { display: flex; flex-direction: column; gap: 3px; } .fp-prize b { font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; } .fight-warn { font: 700 19px/1.1 var(--f-hand); color: var(--pen-red); } /* «Подзатыльник» — in red pen on the fight sheet and as a separate line from the buddy: a small chip went unnoticed. */ .fp-slap { font: 700 19px/1.1 var(--f-hand); color: var(--pen-red); } .say .big.slap { color: #a3241c; } /* The chance to go down from «со всей дури» — a line darker than the text; when serious (from 20 %) app.js writes it in red pen, like «не вывезешь». */ .fp-risk { font-size: 13.5px; color: #6b1d16; } /* Grudge: «Точит на тебя зуб» in print, like «За победу», below — how much angrier and what is added on top for a win. */ .fp-grudge { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; } .fp-grudge b { font: 700 12px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; } .say .big.grudge { color: #7a2a1f; } /* The boss's sworn enemy: «Заклятый враг» in print, below — whose title; the name — in blue pen, tap — the player's profile. */ .fp-enemy { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; } .fp-enemy b { font: 700 12px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; } /* Looted a legendary (system 6): at the buddy — in gold and bigger. The chance and the tenth tooth — in the boss stash (below, .zn-*). */ .say .big.legend-news { color: #8a5a00; font-size: 1.15em; } .pf-name { display: inline; padding: 0; border: 0; background: none; font: 700 16px/1.1 var(--f-hand); color: #1d3f8f; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; } /* kenty in the player's passport (.ps, below): marker note and buttons */ /* District ladder — boss photos at top right, left of the cross. */ .fp-ladder { position: absolute; top: 10px; right: 72px; left: 270px; z-index: 5; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; pointer-events: none; } .fp-ladder > * { pointer-events: auto; } .fp .medallion { width: 42px; } .fp .face { width: 40px; height: 40px; } /* Boss stash (system 6, «Шмот 2.0»): a T-shirt bag with a caption — on the right under the cross, where the district ladder ends; tap — the «what drops from him» card (app.js, stashButton). The picture ui/zanachka doesn't exist yet — the bag is drawn here (.zn-bag); once it is drawn — it will take its place by itself. Red dot — the next win will bring an item for sure. */ .fp-stash { position: absolute; right: 9px; top: 66px; z-index: 5; } .fp-stash:empty { display: none; } .zn-btn { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; } .zn-btn-art { display: block; width: 54px; height: 54px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.7)); transition: transform .12s; } .zn-bag { rotate: -7deg; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%2316130e' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M21.5 27V13.5h5V27z' fill='%232f6b34'/%3E%3Cpath d='M21 13.8h6v-3.4h-6z' fill='%23e0b53c'/%3E%3Cpath d='M36 27l1.6-11.5 7.2 1.2L43 27z' fill='%23f4f1e8'/%3E%3Cpath d='M37 22.6l7 1.2M37.5 19.1l7 1.1' fill='none' stroke='%23c93a2c' stroke-width='2'/%3E%3C/g%3E%3Cpath d='M14.5 27C12 13 15 6.5 21 6.5s8.5 6.5 6.8 20.5M36.2 27C34.5 13 37 6.5 43 6.5S52 13 49.5 27' fill='none' stroke='%2316130e' stroke-width='6.4' stroke-linecap='round'/%3E%3Cpath d='M14.5 27C12 13 15 6.5 21 6.5s8.5 6.5 6.8 20.5M36.2 27C34.5 13 37 6.5 43 6.5S52 13 49.5 27' fill='none' stroke='%23f4f2ec' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M9 25.5Q7.5 43 9.8 58.4Q20.5 62.2 32 59.3Q43.5 62.2 54.2 58.4Q56.5 43 55 25.5Q43.5 28.6 32 26.4Q20.5 28.6 9 25.5Z' fill='%23f4f2ec' stroke='%2316130e' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M20 37.5l12-6.8 12 6.8v4.2l-12-6.8-12 6.8z' fill='%23d23a2b'/%3E%3Crect x='21' y='45' width='22' height='3.6' rx='1.4' fill='%232a4fae'/%3E%3Cpath d='M14 33q2 11 .5 21M50.5 34q-2 10 .3 20M26 51.5q6 2.2 12 0' fill='none' stroke='%239c978b' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M53 5.5l1.6 4.3 4.4 1.6-4.4 1.6-1.6 4.4-1.6-4.4-4.4-1.6 4.4-1.6z' fill='%23ffd54a' stroke='%2316130e' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .zn-btn:hover .zn-btn-art { transform: translateY(-2px) scale(1.06); } .zn-btn:active .zn-btn-art { transform: translateY(1px) scale(.96); } .zn-btn-name { padding: 2px 6px 3px; font: 700 12px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: .5px; color: var(--ink); white-space: nowrap; background: rgba(236,226,196,.96); transform: rotate(1.5deg); box-shadow: 0 2px 3px rgba(0,0,0,.5); } .zn-btn:hover .zn-btn-name { background: #f6eed6; } .zn-btn .corner-dot { right: 0; top: 0; } /* Fight lines — as plates, like captions in a comic, under the boss. */ .fp-log { position: absolute; left: 47%; bottom: 46px; z-index: 5; width: min(400px, 46%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; } .fp-cap { max-width: 100%; padding: 3px 10px 4px; font: 700 15px/1.15 var(--f-text); text-align: center; border: 2px solid #000; box-shadow: 3px 3px 0 rgba(0,0,0,.75); transform: rotate(-1deg); animation: pop .16s ease-out; } .fp-cap.hit { background: #f5d33a; color: #16130e; } .fp-cap.hit.crit { background: #ffac2e; font-size: 16.5px; } .fp-cap.got { background: #c62f24; color: #fff; transform: rotate(1deg); } .fp-cap.got.haymaker { background: #7e1009; font-size: 16.5px; transform: rotate(2deg) scale(1.04); box-shadow: 4px 4px 0 rgba(0,0,0,.85); } .fp-cap.dodge { background: #e9e3cf; color: #3a362f; transform: rotate(.8deg); } /* The returned slipper (legendary perk, app.js returnHit) — a gold plate between your hit and the boss's reply. */ .fp-cap.fishka { background: linear-gradient(135deg, #f8e28f, #d9aa41 45%, #f4d67d 62%, #c08d2c); color: #2a1c00; transform: rotate(-.5deg); } /* Tag of the «возвращается сам» perk at the hand (app.js, fishkaTag): the item picture and the hit count until its return. Lies on the forearm in the bottom right corner; catches no taps — they go to the boss. The next hit will return the item — the tag is gold. */ .fp-fishka { position: absolute; right: 12px; bottom: 10px; z-index: 4; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); } .fp-fishka:empty { display: none; } .fp-tag { display: flex; align-items: center; gap: 3px; padding: 1px 10px 2px 3px; background: rgba(236,226,196,.96); transform: rotate(2deg); clip-path: polygon(0 7%, 100% 0, 98.5% 100%, 1.5% 94%); } .fp-tag-art { width: 36px; height: 36px; } .fp-tag b { font: 700 20px/1 var(--f-hand); color: var(--ink); white-space: nowrap; } .fp-tag.hot { background: linear-gradient(135deg, #f8e28f, #d9aa41 45%, #f4d67d 62%, #c08d2c); animation: fp-tag-hot .9s ease-in-out infinite; } .fp-tag.hot b { color: #2a1c00; } @keyframes fp-tag-hot { 50% { transform: rotate(2deg) scale(1.08); } } .fp.dead .fp-fishka { visibility: hidden; } /* went down: the hand fell, the tag with it */ /* The item arrives by itself (app.js, boomerang): the picture as a boomerang to the hit point; lives outside the scene, like «БАЦ!». */ .boomer { position: fixed; z-index: 26; width: calc(92px * var(--s)); height: calc(92px * var(--s)); pointer-events: none; margin: calc(-46px * var(--s)) 0 0 calc(-46px * var(--s)); opacity: 0; } .boomer .art { width: 100%; height: 100%; filter: drop-shadow(0 0 3px rgba(255,226,130,.95)) drop-shadow(0 4px 5px rgba(0,0,0,.6)); } /* At the bottom: your health on the left, the hint — a strip of masking tape in the middle. */ .fp-me { position: absolute; left: 10px; bottom: 10px; width: 240px; z-index: 5; } .fp-me .bar { height: 22px; border: 2px solid #000; box-shadow: 0 2px 6px rgba(0,0,0,.5); } .fp-me .bar span { line-height: 18px; font-size: 13.5px; } .fp-hint { position: absolute; left: 47%; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 3px 12px 4px; white-space: nowrap; font: 700 17px/1 var(--f-hand); color: var(--ink); pointer-events: none; background: rgba(236,226,196,.93); transform: translateX(-50%) rotate(-1deg); clip-path: polygon(1% 5%, 99% 0, 100% 50%, 98.5% 100%, 0 93%, .8% 50%); } .fp-hint .icon { width: 18px; height: 18px; } .fp-hint .nick-cut { max-width: 11em; } /* «Выходит …» on the capt: a long nick doesn't push the hint off screen */ .fp-hint .bad { color: var(--pen-red); } .fp.down .fp-hint, .fp.dead .fp-hint { visibility: hidden; } /* Brawl — a group fight with a boss (system 5): the same frame. Participants — paper tags where in landscape the district ladder is (top right), in portrait — a strip under the name: name and contribution, you are circled by a pen, the starter with a crown, a knocked-out one — dim. A finished brawl — the boss is gray and lies, over him in marker the result (fp-lockmsg), on the sheet — who finished him and what you got. */ .fp-mates { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 100%; } .fp-mate { display: inline-flex; align-items: center; gap: 5px; max-width: 150px; padding: 3px 9px 4px; overflow: hidden; font: 700 12.5px/1 var(--f-print); text-transform: uppercase; letter-spacing: .4px; color: var(--ink); white-space: nowrap; background: var(--paper); box-shadow: 0 2px 3px rgba(0,0,0,.5); transform: rotate(-1.2deg); cursor: pointer; clip-path: polygon(0 6%, 50% 0, 100% 4%, 99% 94%, 48% 100%, 1% 96%); } .fp-mate:nth-child(2n) { transform: rotate(1deg); } .fp-mate b { color: #6b1d16; font-weight: 700; } .fp-mate i { font: 700 12px/1 var(--f-hand); color: var(--pen-red); text-transform: none; } .fp-mate.me { box-shadow: 0 0 0 2px var(--pen-red), 0 2px 3px rgba(0,0,0,.5); } .fp-mate.ko { opacity: .62; } /* A long nick is cut, the contribution and «в отключке» — always whole (owner 2026-09-29: «% урона улетает в никуда»); a tag with the crew tag and «в отключке» — wider, so that something is left of the nick. */ .fp-mate { max-width: 180px; } .fp-mate.ko { max-width: 240px; } .fp-mate b, .fp-mate i, .fp-mate-crown { flex: none; } .fp-share { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; } .fp-share b { font: 700 12px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; } /* Buttons on the sheet — paper slips with marker: throw a link, call the crew, leave, start a brawl with the boss. */ .fp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; } .fp-btn { padding: 5px 11px 6px; font: 700 15px/1 var(--f-hand); color: var(--ink); background: #fff3b0; border: 2px solid #000; box-shadow: 2px 2px 0 #000; transform: rotate(-.8deg); cursor: pointer; } .fp-btn:hover { background: #fff8cf; } .fp-btn:active { transform: translate(1px, 1px) rotate(-.8deg); box-shadow: 1px 1px 0 #000; } .fp-btn.ghost { background: #e9e3cf; color: #3a362f; } .fp-btn + .fp-btn { transform: rotate(.9deg); } .fp.over .fp-boss-art { filter: grayscale(.7) brightness(.55) drop-shadow(0 10px 18px rgba(0,0,0,.7)); } .handheld .fp.over .fp-boss-art { filter: grayscale(.7) brightness(.55); } .fp.over .fp-boss { cursor: default; } .fp.over .fp-lockmsg { color: #ffd27a; } /* «БАЦ!» — a comic explosion at the hit point (lives outside the scene, like flying numbers: grows via --s). */ .bam { position: fixed; z-index: 26; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); animation: bam .55s ease-out forwards; } .bam span { display: block; padding: calc(20px * var(--s)) calc(24px * var(--s)); background: #ffe14d; font: 700 calc(24px * var(--s))/1 var(--f-print); letter-spacing: 1px; color: #d7261c; -webkit-text-stroke: calc(1px * var(--s)) #000; clip-path: polygon(50% 3%, 57% 20%, 71% 6%, 69% 26%, 88% 20%, 79% 36%, 95% 40%, 83% 50%, 95% 60%, 79% 64%, 86% 79%, 69% 74%, 71% 93%, 58% 83%, 50% 96%, 43% 80%, 29% 94%, 28% 77%, 12% 80%, 21% 64%, 1% 61%, 20% 50%, 2% 39%, 22% 36%, 14% 21%, 31% 26%, 30% 7%, 42% 17%); } .bam.crit span { padding: calc(28px * var(--s)) calc(32px * var(--s)); font-size: calc(33px * var(--s)); background: #fff6c9; } @keyframes bam { 0% { scale: .2; opacity: 0; } 20% { scale: 1.18; opacity: 1; } 65% { scale: 1; opacity: 1; } 100% { scale: 1.05; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .fp-boss-idle, .fp-hand-breathe, .fp-cap, .fp-tag.hot { animation: none; } .bam { display: none; } #screen.shake #backdrop, #screen.shake .fp-world, #screen.haymaker #backdrop, #screen.haymaker .fp-world { animation: none; } } /* district ladder — boss photos; the current one is circled by a pen */ .medallion { position: relative; flex: none; width: 48px; transform: rotate(var(--r, 0deg)); } .face { position: relative; width: 44px; height: 44px; margin: 0 auto; overflow: hidden; background: #d4d0c4; box-shadow: 0 0 0 3px #f2eee4, 0 3px 4px 2px rgba(0,0,0,.45); } .medallion:hover .face { filter: brightness(1.08); } /* The photo cuts out the head by the crop of BOSS_FACE. */ .face img.face-img { position: absolute; width: var(--face-w, 160%); max-width: none; left: var(--face-x, -30%); top: var(--face-y, -4%); } /* BOSS_FACE */ .face .ph { width: 100%; height: 100%; } .face .ph::before { display: none; } .face .ph-emoji { filter: none; opacity: .9; font-size: 19px; margin-top: 0 !important; } .medallion.on::after { content: ""; position: absolute; inset: -9px -8px; border: 3px solid rgba(184,36,26,.85); border-radius: 50% 46% 52% 48%; transform: rotate(-6deg); pointer-events: none; } .medallion.locked .face > * { filter: grayscale(1) brightness(.55); } .medallion-num { position: absolute; left: -5px; top: -6px; min-width: 18px; padding: 1px 4px; text-align: center; font: 700 15px/1 var(--f-hand); color: var(--ink); background: #f5c928; transform: rotate(-8deg); box-shadow: 0 1px 2px rgba(0,0,0,.5); } .medallion-mark { position: absolute; right: -4px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #fff; background: #2f8a3c; box-shadow: 0 1px 2px rgba(0,0,0,.5); } .medallion-mark.lock { background: #2a2e35; font-size: 9px; } /* Portrait: everything that is read — on top as a column (name with health, the ladder as a strip, a sheet with the breakdown), the boss under them in full height as far as the width allows (how much is taken on top — --fp-top, measured by app.js, fightShell). The hand is smaller and keeps to the screen width, the elbow past the right edge; at the bottom — your health full width, above it the hint and fight lines. */ .tall .win-layer.fp, .tall .win.fp { padding: 0; } /* Container — only the fight itself (the fp class is also on the window layer): cqw, cqh and the low screen (@container below) are computed from it. */ .tall .win-body > .fp { container-type: size; } .tall .fp-boss { left: 50%; height: calc((100% - var(--fp-top, 220px)) / .93); /* top of the frame (7 %) is empty */ height: min(calc((100% - var(--fp-top, 220px)) / .93), 148cqw); } /* Fist — at the boss's chest on the right, below the face: they hit the face, we don't cover it. */ .tall .fp-hand { left: 67%; top: calc(var(--fp-top, 220px) * .4 + 60%); height: auto; width: 140%; width: min(140cqw, 90cqh); } .tall .fp-stamp { left: 50%; top: calc(var(--fp-top, 220px) * .6 + 40%); font-size: 40px; } /* in the middle of the boss */ /* What will open it — on the silhouette's chest, under the face: from the screen bottom 60 % of the boss's height (the height — as in .fp-boss above). The text can be five lines and lies over the fist, not under it. */ .tall .fp-lockmsg { left: 50%; top: calc(100% - .6 * (100% - var(--fp-top, 220px)) / .93); top: calc(100% - .6 * min((100% - var(--fp-top, 220px)) / .93, 148cqw)); max-width: 86%; font-size: 22px; } .tall .fp.dead .fp-lockmsg { visibility: hidden; } /* «на сегодня хватит» doesn't climb onto the «Ты лёг» stamp */ /* A column on top — no taller than 58 % of the fight: an unfolded sheet on a low screen scrolls, the boss under it is still visible. */ .tall .fp-side { left: 8px; right: 8px; top: 8px; bottom: auto; width: auto; max-height: min(calc(100% - 96px), 58%); gap: 6px; } .tall .fp-plate { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; } .tall .fp-name { grid-column: 1 / -1; justify-self: start; max-width: calc(100% - 52px); } /* on the right — the cross */ .tall .fp-title { font-size: 18px; } .tall .fp-sub { font-size: 14px; } .tall .fp-plate { grid-template-columns: minmax(0, 1fr) fit-content(50%); } /* the line beside health wraps, health keeps its numbers */ .tall .fp-wins { margin: 0; font-size: 20px; text-align: right; } .tall .fp-hp:has(+ .fp-wins:empty) { grid-column: 1 / -1; } /* not defeated even once — health full width */ /* Bars taller, numbers on them bigger: on a small phone the interface shrinks to 0.86. */ .tall .fp-hp, .tall .fp-me .bar { height: 26px; } .tall .fp-hp span, .tall .fp-me .bar span { font-size: 15px; line-height: 22px; } /* Ladder as a strip: nine photos of 40 pixels with 3 between — at a width of 420, and you can still hit a photo with a finger. */ .tall .fp-side > .fp-ladder { position: static; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 3px; padding: 6px 4px 2px; } .tall .fp-side > .fp-ladder:empty { display: none; } .tall .fp .medallion { width: 40px; } .tall .fp .face { width: 38px; height: 38px; } /* Ring: a chalk plate with points — on the left under health, the month's record — to the right of it (app.js, ringPaint). */ .tall .fp-ladder .pd-badge { flex-direction: row; align-items: baseline; gap: 8px; padding: 3px 12px 5px; } .tall .fp-side > .fp-ladder .pd-badge { margin-left: 0; } .tall .fp-ladder .pd-badge b { font-size: 21px; } .tall .fp-ladder .fp-wins { margin-left: auto; padding-right: 4px; } .tall .fp-sheet { position: relative; padding: 8px 11px 9px; gap: 4px; cursor: pointer; } .tall .fp-sheet .muted { font-size: 14px; } .tall .fp-risk { font-size: 14px; } .tall .fp-sheet .chip { font-size: 14.5px; } .tall .fp-sheet .chip.coin .icon { width: 21px; height: 21px; } /* «скрыть ▴» in the corner of an unfolded sheet — a button (with the keyboard too), but a tap on the whole sheet does the same. */ .tall .fp-more { font: 700 17px/1 var(--f-hand); color: var(--pen-red); white-space: nowrap; } .tall .fp-sheet > .fp-more { position: absolute; right: 10px; top: 8px; z-index: 1; } /* A hidden sheet — a «…» bubble (owner 2026-09-27: «три точки в облачке»), comic style, like the fight lines: white, black outline, hard shadow, a tail of circles — down, toward the boss. Beside — buttons from the sheet (call your own, brawl, to «Точки»); past the bubble and buttons a tap passes through the row. Red dot — the sheet has something to know before the fight. */ .tall .fp-note:has(> .fp-folded) { pointer-events: none; } .tall .fp-folded { display: flex; align-items: center; gap: 8px; min-width: 0; } .tall .fp-folded > * { pointer-events: auto; } .tall .fp-folded .fp-btns { margin: 0; } .tall .fp-folded .muted { display: none; } /* «бригаду позвал» — on the unfolded sheet */ .tall .fp-cloud { position: relative; flex: none; width: 76px; height: 54px; padding: 0; border: 0; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 54'%3E%3Cg fill='%23f4f1e8' stroke='%2316130e' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M8.9 18.2A8.9 8.9 0 0 1 21.6 9.6A10.3 10.3 0 0 1 39.1 7A10.1 10.1 0 0 1 56.2 10.2A8.2 8.2 0 0 1 67.5 18.7A6.1 6.1 0 0 1 67.5 29.3A9.3 9.3 0 0 1 54.4 38.4A12.7 12.7 0 0 1 32.6 40.7A12.5 12.5 0 0 1 12.3 33.5A9.1 9.1 0 0 1 8.9 18.2Z'/%3E%3Ccircle cx='60' cy='45.5' r='3.6'/%3E%3Ccircle cx='67.5' cy='50.5' r='2.2'/%3E%3C/g%3E%3Cg fill='%2316130e'%3E%3Ccircle cx='25.5' cy='24.8' r='3.7'/%3E%3Ccircle cx='38' cy='24' r='3.9'/%3E%3Ccircle cx='50.5' cy='24.9' r='3.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.75)); } .tall .fp-cloud:active { translate: 1px 2px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.75)); } .tall .fp-cloud .corner-dot { right: 5px; top: 3px; } /* Stash in portrait — at the right edge at the bubble's height (owner: «с мобилы она справа»): with a folded sheet — at the end of the bubble's row, with an unfolded one — to the right of the sheet, a tap on it doesn't hide the sheet. */ .tall .fp-folded > .zn-btn { margin-left: auto; } .tall .fp-note > .zn-btn { align-self: flex-start; margin-left: 6px; } .tall .zn-btn-art { width: 46px; height: 46px; } /* The sheet grows out of the bubble and goes back into it: shrinks to the top left corner, where the bubble sits (app.js, foldSheet). */ .tall .fp-unfold { animation: fp-unfold .18s ease-out; } .tall .fp-folding { animation: fp-fold .16s ease-in forwards; pointer-events: none; } .tall .fp-pop .fp-cloud { animation: fp-cloud-pop .24s ease-out; } @keyframes fp-unfold { from { transform-origin: 0 0; scale: .12; opacity: 0; } to { transform-origin: 0 0; } } @keyframes fp-fold { from { transform-origin: 0 0; } to { transform-origin: 0 0; scale: .12; opacity: 0; } } @keyframes fp-cloud-pop { 0% { scale: .4; } 65% { scale: 1.1; } 100% { scale: 1; } } .tall .fp-log { left: 50%; bottom: 76px; width: calc(100% - 24px); } .tall .fp-me { left: 8px; right: 8px; bottom: 8px; width: auto; } .tall .fp-hint { left: 50%; bottom: 42px; } /* The perk tag in portrait — at the right edge on the forearm, above the fight lines. It is held by the column shared with the lines (fp-low, app.js fightShell): while there are one or two plates, the tag is in its place (86px left for the lines), and when there are three or a long one lies in two lines — the tag rises above the top one. It used to stand at 168px from the bottom, and the third plate covered it by half. */ .tall .fp-low { position: absolute; left: 12px; right: 12px; bottom: 76px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; } .tall .fp-low > .fp-log { position: static; width: 100%; min-height: 86px; justify-content: flex-end; transform: none; } .tall .fp-low > .fp-fishka { position: static; align-self: flex-end; margin-right: -4px; } /* Brawl in portrait: participants — a strip under the name (in the ladder), the sheet — as with a boss; buttons on the sheet full width of a finger. */ .tall .fp-side > .fp-ladder .fp-mates { justify-content: flex-start; } .tall .fp-mate { font-size: 13px; padding: 4px 10px 5px; } .tall .fp-btn { padding: 7px 13px 8px; font-size: 16px; } .tall .fp-share { font-size: 14px; } /* Low screen in portrait (an almost square window: Telegram on PC, a narrow browser): remove the ladder, otherwise only a mask is left of the boss. */ @container (max-height: 520px) { .tall .fp-side > .fp-ladder { display: none; } } /* ---------- player window: outfit ---------- */ .doll { position: relative; aspect-ratio: 2 / 3; } .doll .layer { position: absolute; inset: 0; width: 100%; height: 100%; } /* The drawn guy (guy.js): an SVG over the same 2:3 box as the doll; the fist of a punch flies past the box edge. */ .guy { position: relative; aspect-ratio: 2 / 3; } .guy > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* Phone (html.handheld): the main-screen guy breathes as a whole by a transform animation (one composited layer), the rig inside stands still (guy.js, handheld): every SVG attribute change repainted the whole figure in software on iPhone. */ .handheld .guy.hub-doll { animation: guy-breath 3.6s ease-in-out infinite; transform-origin: 50% 100%; } @keyframes guy-breath { 0%, 100% { transform: none; } 50% { transform: scale(1.006, 1.014); } } @media (prefers-reduced-motion: reduce) { .handheld .guy.hub-doll { animation: none; } } /* The HD guy (prikid.js, hdFigure; the visual test of 2026-10-24): one canvas over the box and the 240 rows above it for hats (wear/'s 1024×1776 frame over guy/'s 1024×1536), a still figure that breathes as a whole everywhere. Its own breath, a third of the phone rig's: the rig's 1.4 % moved his head 3–4 px on a phone and 7 on a PC fullscreen, where the classic guy's rig moved under one (the owner 2026-10-24: «слишком сильно качается вверх вниз»). The .handheld rules for the classic boxes above and in «Прикид» lose to these. */ .guy.hd > .hd-canvas { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% * 1776 / 1536); pointer-events: none; } /* His living face (prikid.js, hdFaceDraw): a small canvas over the face rect, placed by its own inline left/top/width/height. */ .guy.hd > .hd-face { position: absolute; pointer-events: none; } /* The fist of «удар» (prikid.js hdPosed, 2026-11-01): the artist's layer over the posed figure in the same frame, flying at the camera about its own centre (transform-origin from art/wearpose.json); hidden with the stance. */ .guy.hd > .hd-fist { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% * 1776 / 1536); pointer-events: none; } .guy.hd > .hd-fist[hidden] { display: none; } .guy.hd.hub-doll, .guy.hd.pk-guy, .handheld .guy.hd.hub-doll, .handheld .guy.hd.pk-guy { animation: hd-breath 3.6s ease-in-out infinite; transform-origin: 50% 100%; } @keyframes hd-breath { 0%, 100% { transform: none; } 50% { transform: scale(1.002, 1.004); } } @media (prefers-reduced-motion: reduce) { .guy.hd.hub-doll, .guy.hd.pk-guy, .handheld .guy.hd.hub-doll, .handheld .guy.hd.pk-guy { animation: none; } } .doll .ph { border-radius: 12px; } .me-title { font: 700 20px/1.1 var(--f-hand); color: #b3261e; transform: rotate(-1deg); } .bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; } .tile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 4px; background: rgba(255,255,255,.4); border: 2px solid rgba(0,0,0,.2); box-shadow: 0 2px 0 rgba(0,0,0,.2); } .tile:hover { filter: brightness(1.06); } .tile-img { width: 100%; aspect-ratio: 1; } .tile-name { font: 700 11.5px/1.15 var(--f-text); text-align: center; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tile.low { opacity: .55; } .tile.r-choice { border-color: rgba(29,68,155,.55); } .tile.r-rare { border-color: rgba(168,35,27,.5); } .tile.r-legend { border-color: rgba(160,110,0,.7); } /* Item name — in the color of its look (system 6): choice — blue, like the electrical tape, rare — red, like the stamp, legendary — gold. */ .r-common { color: var(--common); } .r-choice { color: var(--choice); } .r-rare { color: var(--rare); } .r-legend { color: var(--legend); } .paper .r-common, .say .r-common { color: var(--ink-soft); } .paper .r-choice, .say .r-choice { color: #1d449b; } .paper .r-rare, .say .r-rare { color: #a8231b; } .paper .r-legend, .say .r-legend { color: #8a5a00; } /* A craft item (workbench) — orange, like the graph paper grid. */ .r-craft { color: #f0a05a; } .paper .r-craft, .say .r-craft { color: #a04e12; } .tile.r-craft { border-color: rgba(160,78,18,.6); } /* Upgrade: item level in marker in the tile corner; «can» — the next level is affordable and not locked — a red dot. */ .up-badge { position: absolute; right: 3px; top: 1px; z-index: 1; pointer-events: none; font: 700 18px/1 var(--f-hand); color: var(--pen-red); text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 3px rgba(255,255,255,.8); } .tile.can::after { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px rgba(255,255,255,.75); } .tile.missing .rar-art, .modal-art.missing .rar-art { filter: grayscale(1) brightness(.7) opacity(.45); } /* What you don't have — the picture is gray, and the rarity look is paler but visible: which item it is is clear in the album too. */ .tile.missing .rar-pic > i, .modal-art.missing .rar-pic > i { opacity: .55; } .tile.missing .tile-name { color: var(--ink-soft); font-weight: 400; } .modal-art { position: relative; } .modal-art .up-badge { font-size: 30px; right: 6px; top: 2px; } .up { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed rgba(0,0,0,.25); } .up-head { font-size: 14px; } .up-head b { font: 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; } .up-chance { margin-left: 4px; font: 700 12px/1 var(--f-text); opacity: .75; } .up-result { font: 700 19px/1.1 var(--f-hand); animation: pop .18s ease-out; } /* Upgrade for iron (decision 40): a steel button under cash and seeds, always lands. */ .up .btn.up-iron { background: linear-gradient(#5b6168, #3a3f45); color: #f3e2a6; border-color: #24272b; } .up .btn.up-iron .up-chance { opacity: .9; } .up-result.ok { color: #1f6b2a; } .up-result.miss { color: var(--pen-red); } /* Crew «Золотые руки»: the item jumped a level — its own line, in gold, like a legendary on paper. */ .up-perk { color: #8a5a00; } /* Legendary perk on the item card (system 6, decision 55; app.js, perkBlock): a gold foil sticker — the name in print, what it does — in marker, in small print — that it works from storage. */ .it-perk { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; padding: 6px 9px 7px; color: #2a1c00; background: linear-gradient(135deg, #f8e28f, #d9aa41 45%, #f4d67d 62%, #c08d2c); box-shadow: inset 0 0 0 1px rgba(122,82,0,.55), 0 1px 2px rgba(0,0,0,.3); transform: rotate(-.5deg); } .it-perk b { font: 700 13px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #4a2f00; } .it-perk span { font: 700 18px/1.1 var(--f-hand); } .it-perk small { font: 13px/1.15 var(--f-text); color: #4a3a12; } /* Album: a page per district or a drop; a complete one — «собрано!» in red pen. */ .album-page { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .album-count { font: 700 19px/1 var(--f-hand); color: var(--ink-soft); } .album-page.done .album-count { color: var(--pen-red); transform: rotate(-4deg); } .stat-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; } .stat-row b { font: 700 18px/1 var(--f-print); font-variant-numeric: tabular-nums; } .stat-row small { color: #1f6b2a; font-weight: 700; } .link-box { padding: 6px 9px; background: rgba(255,255,255,.5); border: 1px dashed rgba(0,0,0,.35); font-size: 13px; word-break: break-all; color: var(--ink-soft); user-select: all; -webkit-user-select: all; } .switch { width: 46px; height: 27px; border-radius: 999px; background: #1f2326; border: 2px solid #0f1112; position: relative; flex: none; } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--muted); transition: .15s; } .switch.on { background: var(--seeds); border-color: #8f6f0c; } .switch.on::after { left: 21px; background: #15171a; } /* portrait: the player window's sheets (album, points, settings; «Прикид» has its own layout, .pk): everything pressable no less than 38 pixels, captions no smaller than 12. */ .tall .bag { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .tall .tile-name { font-size: 13px; } .tall .pk-sheet .btn { min-height: 40px; } .tall .stat-row .btn { min-width: 50px; font-size: 16px; } .tall .stat-row small, .tall .pk-sheet .link-box { font-size: 14px; } .tall .pk-sheet .switch { width: 64px; height: 38px; } .tall .pk-sheet .switch::after { width: 30px; height: 30px; } .tall .pk-sheet .switch.on::after { left: 28px; } /* ---------- the crew's patch (system 11): the slot for the crew logo, sewn on wherever a crew is named ---------- */ .crew-patch { position: relative; display: block; width: 34px; height: 38px; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); } .crew-patch svg { display: block; width: 100%; height: 100%; } .crew-patch > span { position: absolute; inset: 0 0 5px; display: flex; align-items: center; justify-content: center; color: #f4f1e8; font: 700 10px/1 var(--f-print); letter-spacing: .3px; } .crew-patch.big { width: 44px; height: 50px; } .crew-patch.big > span { font-size: 13px; } .crew-patch.plate { width: 46px; height: 52px; align-self: center; } .crew-patch.plate > span { font-size: 12px; } .crew-patch.row { width: 40px; height: 45px; transform: rotate(-2deg); } .crew-patch.row > span { font-size: 11px; } .tall .crew-patch.plate { width: 38px; height: 43px; } .tall .crew-patch.plate > span { font-size: 10px; } .tall .crew-patch { width: 28px; height: 32px; } .tall .crew-patch > span { font-size: 8.5px; } /* ---------- «Рейтинг»: the сервант (system 11, decision 93) ---------- Grandma's sideboard behind glass, picked by the owner from the probes (docs/probes/reyting.html, «В · Сервант»): the boards stand as trophies (trophy/) on two glass shelves under brass plates («Пацаны», «Бригады»), each with a paper tag and a red dot with your place; the chosen one is lit. The board itself is on the dark game panel beside it (readability first: light print on the window's dark): who is first now, last time's champion, what counts and how long is left, the prizes on black plates, the list, your row. Landscape: the сервант on the left, the panel on the right; portrait (.tall, at the end of the section): the сервант on top, its guys' shelf scrolls sideways. */ .win.servant { max-width: 980px; height: 100%; padding: 0; gap: 0; background: #17140f; } .win.servant > .win-x { position: absolute; right: -10px; top: -12px; z-index: 6; width: 46px; height: 46px; margin: 0; } .win.servant > .win-body { padding: 0; gap: 0; overflow: hidden; } .sv { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 338px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .sv-case { position: relative; min-height: 0; display: flex; flex-direction: column; padding: 6px 8px 8px; border-radius: 3px 0 0 3px; background: linear-gradient(180deg, #5a361d, #3f2513); box-shadow: inset 0 0 0 2px #2a170a, inset 0 2px 0 rgba(255,210,160,.12); } .sv-title { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 4px; font: 700 24px/1 var(--f-hand); color: #f1e3c8; } .sv-title small { font: 13px/1.1 var(--f-text); color: #cdb898; } .sv-glass { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 2px; border-radius: 3px; background: linear-gradient(180deg, #21160e, #170f09); box-shadow: inset 0 0 0 2px #120a05, inset 0 0 22px rgba(0,0,0,.6); } .sv-wait { padding: 14px 10px; font: 700 18px/1.2 var(--f-hand); color: #cdb898; } .sv-shelf { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px 2px; padding: 0 2px 9px 24px; } /* the glass edge under every row of trophies: a light line, a thin pane, a shadow */ .sv-tr::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -8px; height: 6px; pointer-events: none; background: linear-gradient(180deg, rgba(214,236,232,.75) 0 1px, rgba(150,186,182,.32) 1px 4px, rgba(0,0,0,.5) 4px); } .sv-plate { position: absolute; left: 0; top: 4px; z-index: 2; padding: 6px 3px; font: 700 11px/1 var(--f-print); text-transform: uppercase; letter-spacing: .5px; color: #2e2410; background: linear-gradient(90deg, #e2c27a, #a8833d); border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4); writing-mode: vertical-rl; transform: rotate(180deg); } .sv-tr { position: relative; flex: none; width: 68px; min-height: 76px; display: flex; flex-direction: column; align-items: center; padding: 2px 0 0; border-radius: 6px; cursor: pointer; } .sv-ic { display: block; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(0,0,0,.6)) brightness(.84); } .sv-tag { position: relative; z-index: 1; margin-top: 5px; max-width: 68px; padding: 3px 4px 3px; font: 700 13.5px/1 var(--f-hand); color: var(--ink); background: #ece6d4; transform: rotate(-2deg); box-shadow: 0 2px 3px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-pl { position: absolute; right: 2px; top: 0; min-width: 22px; height: 22px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #b8241a; color: #fff; font: 700 12px/1 var(--f-print); box-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; } .sv-tr.sel { background: radial-gradient(ellipse at 50% 40%, rgba(255,214,120,.3), transparent 70%); } .sv-tr.sel .sv-ic { filter: drop-shadow(0 4px 3px rgba(0,0,0,.6)); } .sv-tr.sel .sv-tag { background: var(--seeds); } .sv-tr:active .sv-ic { scale: .94; } .sv-tr:focus-visible { outline: 2px solid var(--seeds); outline-offset: 1px; } .sv-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 8px; } .sv-champ { flex: none; display: flex; align-items: center; gap: 10px; margin-right: 34px; padding: 3px 10px; border-radius: 4px; background: linear-gradient(90deg, rgba(242,194,48,.16), rgba(242,194,48,.03)); box-shadow: inset 3px 0 0 var(--seeds); } .sv-crown { flex: none; width: 28px; height: 28px; } .sv-champ-t { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; } .sv-champ-t b { min-width: 0; font: 700 19px/1.1 var(--f-hand); color: var(--seeds); } .sv-champ-t small { min-width: 0; font: 13.5px/1.2 var(--f-text); color: #c9bfa9; } .sv-hd { flex: none; display: flex; align-items: flex-start; gap: 10px; } .sv-hd-t { min-width: 0; flex: 1 1 auto; } .sv-hd-nm { font: 700 23px/1 var(--f-hand); color: #eceae4; } .sv-hd-what { margin-top: 2px; font: 14px/1.2 var(--f-text); color: #b9b2a2; } .sv-hd-left { flex: none; display: flex; align-items: center; gap: 5px; font: 700 15px/1.1 var(--f-text); color: #eceae4; white-space: nowrap; } .sv-hd-left small { display: block; font: 12.5px/1.1 var(--f-text); color: #b9b2a2; } .sv-cal { width: 26px; height: 26px; flex: none; } .sv-prizes { flex: none; display: flex; flex-wrap: wrap; gap: 5px; } .sv-prize { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px 2px 3px; border-radius: 2px; background: var(--plate); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); font: 700 13.5px/1.2 var(--f-text); color: #eceae4; } .sv-prize i { flex: none; padding: 3px 5px; border-radius: 2px; font: 700 11px/1 var(--f-print); font-style: normal; white-space: nowrap; background: var(--seeds); color: var(--ink); } .sv-noprize { flex: none; font: 14px/1.25 var(--f-text); color: #a39a8a; } .sv-list { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0 -6px; padding: 0 6px; } .sv-row { width: 100%; min-height: 44px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 6px 3px 2px; border-bottom: 1px solid rgba(255,255,255,.05); text-align: left; color: #eceae4; } .sv-row.crew { grid-template-columns: 30px 34px minmax(0, 1fr) auto; } button.sv-row { cursor: pointer; } button.sv-row:hover { background: rgba(238,234,223,.05); } button.sv-row:active { background: rgba(238,234,223,.1); } .sv-place { font: 700 18px/1 var(--f-print); text-align: right; color: #a39a8a; white-space: nowrap; } .sv-list .sv-row:nth-child(-n+3) .sv-place { color: var(--seeds); } .sv-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .sv-nm { min-width: 0; max-width: 100%; display: flex; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 19px/1.1 var(--f-hand); } .sv-nm .vip-badge { font-size: 14px; } .sv-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 13px/1.15 var(--f-text); color: #a39a8a; } .sv-val { flex: none; display: flex; align-items: center; gap: 2px; font: 700 19px/1 var(--f-hand); white-space: nowrap; } .sv-val span.icon.inline { width: 1.2em; height: 1.2em; margin: 0 .1em 0 0; vertical-align: -.2em; } .sv-row.me { border-radius: 3px; background: rgba(242,194,48,.12); box-shadow: inset 3px 0 0 var(--seeds); } .sv-row.me .sv-place, .sv-row.me .sv-nm, .sv-row.me .sv-val { color: var(--seeds); } .sv-mine { flex: none; } .sv-gap { text-align: center; font: 700 18px/.6 var(--f-hand); color: #a39a8a; } .sv-gets { padding: 3px 4px 0 40px; font: 14.5px/1.25 var(--f-text); color: #b9b2a2; } .sv-gets b { color: #eceae4; } .sv-empty { font: 700 18px/1.25 var(--f-hand); color: #a39a8a; } /* the activities' way in: a chalk tab, a paper tab, the Yama's plaque with the cup in front */ .rt-go-ic { display: inline-block; width: 1.35em; height: 1.35em; margin: -.2em .25em -.25em 0; vertical-align: middle; } .pd-tab.pd-rating, .rz-tab.rz-rating { margin-left: auto; } .ym-rating { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; cursor: pointer; color: var(--ink); } .ym-rating:active { filter: brightness(.94); } .ym-rating .ym-board-h { display: flex; align-items: center; gap: 6px; } .ym-rating-ic { width: 30px; height: 30px; flex: none; } .ym-rating-t { font: 15px/1.25 var(--f-text); color: #4a4438; } /* portrait: the сервант on top, the guys' shelf on one glass pane scrolling sideways, the crews' under it; the panel takes the rest */ .tall .win.servant > .win-x { right: -4px; top: -6px; } .tall .sv { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .tall .sv-case { padding: 8px 10px 10px; border-radius: 3px 3px 0 0; } .tall .sv-title { padding: 0 52px 6px 4px; font-size: 28px; } .tall .sv-title small { font-size: 14px; } .tall .sv-glass { flex: none; gap: 6px; padding: 6px 6px 4px; } .tall .sv-shelf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 0 4px 12px 26px; } .tall .sv-shelf::-webkit-scrollbar { display: none; } .sv-shelf.drag, .ob-strip.drag { cursor: grabbing; } /* dragged by the mouse (app.js, mouseStrip) */ .tall .sv-plate { position: sticky; left: 0; top: auto; flex: none; align-self: center; margin: 0 0 -6px -24px; } .tall .sv-tr { width: 72px; min-height: 86px; padding-top: 4px; } .tall .sv-tr::after { display: none; } /* the glass edge is the shelf's own background scrolling with it (local): a pseudo-element was only as wide as the visible part and broke off once the shelf was scrolled (owner 2026-10-18: «когда двигаешь, полки режуются снизу») */ .tall .sv-shelf { background: linear-gradient(180deg, rgba(214,236,232,.75) 0 1px, rgba(150,186,182,.32) 1px 5px, rgba(0,0,0,.5) 5px) left bottom 4px / 100% 7px no-repeat local; } .tall .sv-ic { width: 50px; height: 50px; } .tall .sv-tag { margin-top: 8px; max-width: 72px; font-size: 14.5px; } .tall .sv-pl { min-width: 24px; height: 24px; font-size: 13px; } .tall .sv-panel { gap: 8px; padding: 10px 12px 10px; } .tall .sv-champ { margin-right: 0; padding: 6px 10px; } .tall .sv-crown { width: 34px; height: 34px; } .tall .sv-champ-t { flex-direction: column; align-items: flex-start; } .tall .sv-champ-t b { font-size: 21px; } .tall .sv-hd-nm { font-size: 26px; } .tall .sv-hd-what { font-size: 14.5px; } .tall .sv-prize { font-size: 14px; } .tall .sv-prize i { font-size: 12px; } .tall .sv-nm { font-size: 20px; } .tall .sv-val { font-size: 20px; } /* Title for last month («Чемпион подвала», system 18) — in red pen under the photo. */ /* portrait: three photos in a row don't fit — the top three as a staircase: the first big on top, the second and third under him; the rest — three in a row, smaller than the top three, and on a tablet too (a column no wider than 116). «Это ты» — inside the board: if it sticks out past the edge — the window will drift sideways. */ /* ---------- item card: a bigger notice ---------- */ /* Like the window layer: the shade is the ::before under the header (12), the card itself is over the header (23). */ .modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--hud-h, 0px) + 14px) 14px 14px; } .modal::before { content: ""; position: absolute; inset: 0; z-index: 12; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .15s ease-out; } .modal-card { position: relative; z-index: 23; width: 100%; max-width: 520px; padding: 16px 16px 14px; display: grid; grid-template-columns: 130px 1fr; gap: 5px 14px; align-items: start; transform: rotate(-.6deg); filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)); animation: pop .18s ease-out; } .modal-card > :not(.modal-art) { grid-column: 2; } .modal-art { grid-row: 1 / span 6; width: 130px; height: 130px; } .modal-art .art { width: 100%; height: 100%; } .modal-card .big-title { text-align: left; } @keyframes fade { from { opacity: 0; } } @keyframes pop { from { transform: scale(.94); opacity: 0; } } /* portrait: the item card — centered, like all (at the bottom the buddy covered it: he sits there after an upgrade). The result of the attempt takes the place of the chances line (the chance is on the buttons anyway, the result itself names the bonus for a miss), the place has one height — two lines of marker, the longest result: the card doesn't grow, the «ещё раз» buttons don't shift — you can tap at once. Only when buttons exist (a .row after them): for one upgraded to the limit and behind a lock the line is an explanation, we don't hide it. */ /* landscape the same (owner 2026-10-03: «окно прыгает то вниз, то вверх из-за текста, невозможно быстро тыкать»): the result — in the place of the chances line, the place has one height; the card column is narrower, so three lines of marker. */ .up-head + .muted:has(+ .row), .up-result:has(+ .muted + .row) { min-height: 63px; } .up-result + .muted:has(+ .row) { display: none; } .tall .up-head + .muted:has(+ .row), .tall .up-result:has(+ .muted + .row) { min-height: 42px; } .tall .up .btn { min-height: 42px; font-size: 16px; } .tall .up .btn .icon { width: 22px; height: 22px; } .tall .up-chance { font-size: 13px; } .tall .modal-card > .up + .row .btn { min-height: 42px; } .tall .modal-card > .up + .row .btn:only-child { flex: 1; } /* «Понял» in the album — full width */ /* ---------- boss stash: a bag emptied onto a newspaper (system 6, «Шмот 2.0») ---------- A card over a fight, album or map (app.js, stashCard): a newspaper sheet — gray paper, columns of small type, a fold across; at the top a T-shirt bag and the title on tape, the cross — a sticker, as on windows. Sections — newspaper columns (landscape two, portrait one): tokens in a pile, gear in rarity look, legendary, trophy, holiday items. What goes with what — in blue pen in the margins, «наверняка» — in red, your own is circled «у тебя». */ .modal-card.zn { max-width: 640px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 14px; transform: rotate(-.5deg); color: var(--ink); /* Newspaper: lines of small gray type, in three columns, each column has its own paragraphs (breaks — paper-colored over the lines). */ background: linear-gradient(0deg, transparent 49.6%, rgba(0,0,0,.06) 50%, rgba(255,255,255,.32) 50.4%, transparent 51.2%), radial-gradient(ellipse 30% 22% at 84% 16%, rgba(120,95,50,.12), transparent 70%), radial-gradient(circle 34px at 10% 88%, transparent 76%, rgba(125,92,40,.14) 86%, transparent 95%), repeating-linear-gradient(90deg, transparent 0 calc(33.33% - 14px), #e2ddcf calc(33.33% - 14px) 33.33%), repeating-linear-gradient(180deg, transparent 0 46px, #e2ddcf 46px 56px) 0 0 / 33.34% 100% no-repeat, repeating-linear-gradient(180deg, transparent 0 70px, #e2ddcf 70px 80px) 50% 22px / 33.34% 100% no-repeat, repeating-linear-gradient(180deg, transparent 0 34px, #e2ddcf 34px 44px) 100% 10px / 33.34% 100% no-repeat, repeating-linear-gradient(180deg, rgba(50,45,38,.085) 0 2px, transparent 2px 6px), #e2ddcf; box-shadow: inset 0 0 18px rgba(100,78,35,.3), inset 0 0 3px rgba(70,52,22,.3); scrollbar-width: thin; scrollbar-color: #9a9385 transparent; } .modal-card.zn:has(.zn-body:not(.two)) { max-width: 420px; } /* one section — a narrower sheet, the column doesn't stand empty */ .zn-head { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding-right: 44px; } .zn-head-art { flex: none; width: 58px; height: 58px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); } .zn-strip { position: relative; min-width: 0; transform: rotate(-1.2deg); filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); } .zn-strip .strip { padding: 5px 18px 6px 12px; } .zn-strip .tape.l { left: -12px; top: -6px; transform: rotate(-28deg); } .zn-title { font: 700 24px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; } .zn-sub { margin-top: 2px; font: 15px/1.15 var(--f-text); color: #3a362f; } .modal-card.zn .zn-x { position: absolute; right: -8px; top: -6px; width: 44px; height: 44px; margin: 0; } .zn-warn { font: 700 18px/1.12 var(--f-hand); color: var(--pen-red); } .zn-body { display: flex; flex-direction: column; gap: 12px; } .zn-body.two { display: block; columns: 2 250px; column-gap: 24px; column-rule: 1px solid rgba(40,36,30,.24); } .zn-sec { display: flex; flex-direction: column; gap: 7px; break-inside: avoid; } .zn-body.two .zn-sec { margin-bottom: 14px; } .zn-body.two .zn-sec:last-child { margin-bottom: 0; } /* Section heading — in print, set off by a double newspaper rule. */ .zn-h { padding-bottom: 3px; font: 700 13px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: 1.3px; color: #6b1d16; border-bottom: 3px double rgba(40,36,30,.55); } .zn-lot { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 3px 10px; align-items: start; } .zn-pic { width: 66px; height: 66px; } .zn-lot-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .zn-lot-name { font: 700 16px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .3px; color: var(--ink); } .zn-lot-sub { font: 14px/1.2 var(--f-text); color: #4a463d; } /* In pen in the margins: blue — what goes with what, red — «наверняка». */ .zn-pen { font: 700 17.5px/1.12 var(--f-hand); color: #1d3f8f; } .zn-pen.hot { color: var(--pen-red); } /* A legendary perk (system 6, decision 55) and a token from it — as a sticker from the same gold foil as under the legendary. */ .zn-pen.zn-perk { align-self: flex-start; padding: 2px 7px 3px; color: #2a1c00; background: linear-gradient(135deg, #f8e28f, #d9aa41 45%, #f4d67d 62%, #c08d2c); box-shadow: inset 0 0 0 1px rgba(122,82,0,.55), 0 1px 2px rgba(0,0,0,.25); transform: rotate(-.6deg); } .zn-until { font: 700 18px/1 var(--f-hand); color: var(--pen-red); } /* Own — in red pen «у тебя» over the bottom of the picture. */ .zn-mine { position: absolute; left: -2px; top: 48px; z-index: 3; padding: 0 3px; pointer-events: none; font: 700 16px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-9deg); text-shadow: 0 0 2px #fff, 0 0 3px #e2ddcf, 0 1px 0 #fff; } .zn-link { align-self: flex-start; margin-top: 1px; font: 700 17px/1.1 var(--f-hand); color: var(--pen-red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Tokens in a pile: three pieces overlapping, as if poured out of the bag. */ .zn-pile { position: relative; } .zn-token { position: absolute; width: 62%; height: 62%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); } .zn-token .art { width: 100%; height: 100%; } .zn-token.t0 { left: -2%; top: 34%; rotate: -16deg; } .zn-token.t1 { left: 40%; top: 38%; rotate: 12deg; } .zn-token.t2 { left: 18%; top: 2%; rotate: -3deg; } /* portrait: the sheet full width, one column; pictures a bit smaller, pen lines no smaller. */ .tall .modal-card.zn { padding: 10px 12px 14px; transform: rotate(-.3deg); } .tall .zn-head-art { width: 50px; height: 50px; } .tall .zn-title { font-size: 22px; } .tall .zn-lot { grid-template-columns: 60px minmax(0, 1fr); } .tall .zn-pic { width: 60px; height: 60px; } .tall .zn-mine { top: 42px; } /* ---------- sets: a catalog page «Товары почтой» (system 6, «Шмот 2.0», decision 55) ---------- A set card (app.js, setCard) — a catalog sheet: yellowish paper with a typographic dot pattern, the header «Товары почтой» with a page number over a double rule, the title in print, the tale in italics, items — as numbered lots (own — in red pen «есть», missing — in gray, with the boss), steps — an order form with leader dots: taken — with a «взято» stamp, the rest — in pen, how many more items are needed. Landscape — two columns (left title and steps, right lots), portrait — one. The line under an item (.kt-link) — in blue pen, a clipping on the album page (.kt-clip) — the same catalog, circled with a dotted line «отрезать». */ .modal-card.kt { max-width: 660px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px 14px; transform: rotate(.4deg); color: var(--ink); background: radial-gradient(ellipse 34% 26% at 88% 92%, rgba(120,95,50,.15), transparent 70%), radial-gradient(circle at 1px 1px, rgba(60,50,30,.075) 1px, transparent 1.4px) 0 0 / 5px 5px, linear-gradient(90deg, rgba(0,0,0,.05), transparent 5%, transparent 95%, rgba(0,0,0,.06)), #efe7cc; box-shadow: inset 0 0 18px rgba(110,84,35,.28), inset 0 0 3px rgba(70,52,22,.3); scrollbar-width: thin; scrollbar-color: #9a9385 transparent; } .kt-top { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px 44px 4px 0; font: 700 11px/1 var(--f-print); text-transform: uppercase; letter-spacing: 2.4px; color: #6b1d16; border-bottom: 3px double rgba(40,36,30,.6); } .modal-card.kt .kt-x { position: absolute; right: -8px; top: -10px; width: 44px; height: 44px; margin: 0; } .kt-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "head lots" "steps lots"; grid-template-rows: auto 1fr; gap: 8px 16px; align-items: start; } .kt-head { grid-area: head; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kt-name { font: 700 25px/1.02 var(--f-print); text-transform: uppercase; letter-spacing: .8px; } .kt-text { font: italic 15px/1.2 var(--f-news); color: #3a362f; } .kt-count { align-self: flex-start; margin-top: 2px; font: 700 23px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-3deg); } .kt-count.done { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .kt-lots { grid-area: lots; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-left: 16px; border-left: 1px solid rgba(40,36,30,.3); } /* A catalog lot: a picture in a frame, a number in the corner, under it — what it is and whether you have it. */ .kt-lot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 15px 3px 4px; background: rgba(255,255,255,.42); box-shadow: inset 0 0 0 1px rgba(40,36,30,.4); cursor: pointer; } .kt-lot:hover { filter: brightness(1.05); } .kt-lot:active { transform: translateY(1px); } .kt-no { position: absolute; left: 4px; top: 3px; font: 700 10px/1 var(--f-print); letter-spacing: .6px; color: #4a463d; } .kt-pic { width: 62px; height: 62px; } .kt-lot-name { width: 100%; min-height: 27px; font: 700 12.5px/1.08 var(--f-text); text-align: center; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .kt-have { font: 700 18px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-5deg); } .kt-from { width: 100%; min-height: 18px; font: 12px/1.08 var(--f-text); text-align: center; color: var(--ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .kt-lot.missing { background: rgba(255,255,255,.2); } .kt-lot.missing .rar-art { filter: grayscale(1) brightness(.7) opacity(.45); } .kt-lot.missing .rar-pic > i { opacity: .5; } .kt-lot.missing .kt-lot-name { color: var(--ink-soft); font-weight: 400; } /* Steps — an order form: «2 вещи … что даёт», under the line leader dots. */ .kt-steps { grid-area: steps; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .kt-h { padding-bottom: 3px; font: 700 12px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: 1.3px; color: #6b1d16; border-bottom: 1px solid rgba(40,36,30,.45); } .kt-step { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 8px; align-items: baseline; padding-bottom: 4px; border-bottom: 1px dotted rgba(40,36,30,.55); } .kt-step-n { font: 700 13px/1.2 var(--f-print); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; color: #4a463d; } .kt-step-text { font: 15.5px/1.18 var(--f-text); color: #4a463d; } .kt-step.got .kt-step-n, .kt-step.got .kt-step-text { color: var(--ink); font-weight: 700; } .kt-need { display: block; font: 700 17px/1.05 var(--f-hand); color: var(--ink-soft); white-space: nowrap; } .kt-step.next .kt-need { color: #1d3f8f; } /* «взято» stamp — in red paint, slightly crooked. */ .kt-stamp { display: inline-block; padding: 1px 5px 1px 6px; font: 700 10.5px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: 1.6px; color: #c1261c; border: 1.6px solid #c1261c; border-radius: 2px; transform: rotate(-5deg); opacity: .88; mix-blend-mode: multiply; white-space: nowrap; } .kt-note { font: 13px/1.15 var(--f-text); color: var(--ink-soft); } .kt-back { align-self: flex-start; margin-top: 2px; font: 700 18px/1.1 var(--f-hand); color: var(--pen-red); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* A line under an item from a set (stash, item card, album): in blue pen, tap — the set card. */ .kt-link { align-self: flex-start; justify-self: start; margin-top: 1px; text-align: left; cursor: pointer; font: 700 17.5px/1.12 var(--f-hand); color: #1d3f8f; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* A clipping from the catalog on the district page in the album: dotted line «отрезать», steps — as form cells. */ .kt-clip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: baseline; margin: 4px 2px 0; padding: 9px 12px 10px; text-align: left; color: var(--ink); cursor: pointer; transform: rotate(-.4deg); background: radial-gradient(circle at 1px 1px, rgba(60,50,30,.075) 1px, transparent 1.4px) 0 0 / 5px 5px, #efe7cc; outline: 1.5px dashed rgba(40,36,30,.5); outline-offset: -4px; box-shadow: 0 2px 4px rgba(0,0,0,.28); } .kt-clip:hover { filter: brightness(1.04); } .kt-clip-name { font: 700 16px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; } .kt-clip-count { font: 700 20px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-4deg); white-space: nowrap; } .kt-clip-steps { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; } .kt-clip-step { position: relative; padding-left: 19px; font: 14.5px/1.2 var(--f-text); color: var(--ink-soft); } .kt-clip-step::before { content: ""; position: absolute; left: 1px; top: 3px; width: 10px; height: 10px; box-shadow: inset 0 0 0 1.4px rgba(40,36,30,.55); } .kt-clip-step.got { color: var(--ink); font-weight: 700; } .kt-clip-step.got::after { content: ""; position: absolute; left: 5px; top: -2px; width: 6px; height: 13px; border: solid var(--pen-red); border-width: 0 2.6px 2.6px 0; transform: rotate(38deg); } /* Sets on the «Прикид» (gearSets): the same clippings, only as a spine — name and how much is collected, in a row above the bag. */ .kt-tabs { display: flex; flex-direction: column; gap: 3px; } .kt-tabs-row { display: flex; flex-wrap: wrap; gap: 8px 12px; padding-bottom: 2px; } .kt-clip.kt-tab { margin: 2px 0 0; padding: 8px 14px 9px; gap: 3px 12px; font: inherit; border: 0; } .kt-clip.kt-tab:nth-child(even) { transform: rotate(.5deg); } /* While an action is in flight (an upgrade from the item card), you can't leave for a set: the response would bring the item card over it. */ body.busy .kt-link, body.busy .kt-lot { pointer-events: none; } /* The buddy about a set: a taken step — more noticeable. */ .say .big.set-news { color: #22408f; } .say .big.set-news.got { color: #1f6b2a; } /* landscape on a low screen (phone in landscape): lots smaller, so the sheet fits without scrolling */ .short .modal-card.kt { gap: 6px; padding: 8px 14px 10px; } .short .kt-name { font-size: 22px; } .short .kt-pic { width: 52px; height: 52px; } .short .kt-lots { gap: 6px; } .short .kt-lot { padding-top: 13px; } /* portrait: one column — title, lots, steps; the sheet full width. */ .tall .modal-card.kt { padding: 10px 12px 14px; transform: rotate(.3deg); } .tall .kt-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "lots" "steps"; grid-template-rows: auto; gap: 9px; } .tall .kt-lots { padding-left: 0; border-left: 0; } .tall .kt-pic { width: 70px; height: 70px; } .tall .kt-lot-name { font-size: 13.5px; min-height: 29px; } .tall .kt-from { font-size: 12.5px; } .tall .kt-step { grid-template-columns: 62px minmax(0, 1fr); } .tall .kt-step-text { font-size: 16.5px; } .tall .kt-note { font-size: 14px; } .tall .kt-clip-step { font-size: 15px; } /* ---------- juice: response to an action ---------- Flying numbers live outside the scene (in window coordinates), so they grow with it via --s. */ .fly { position: fixed; z-index: 27; pointer-events: none; white-space: nowrap; font: 700 calc(24px * var(--s))/1 var(--f-hand); color: var(--seeds); text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.9); transform: translate(-50%, -50%); animation: fly 1.05s ease-out forwards; } .fly.blue { color: var(--blue); } .fly.red { color: #ff6b61; } .fly.crit { font-size: calc(38px * var(--s)); } @keyframes fly { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); } 18% { opacity: 1; transform: translate(-50%, -90%) scale(1.2); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -330%) scale(1); } } .money.bump { animation: bump .4s ease-out; } @keyframes bump { 40% { transform: scale(1.22); } } .medals span.pop { display: inline-block; animation: medal .8s cubic-bezier(.2, 1.7, .4, 1); } @keyframes medal { 0% { transform: scale(0) rotate(-50deg); } 55% { transform: scale(2.1) rotate(12deg); } 100% { transform: scale(1) rotate(0); } } .levelup { position: fixed; inset: 0; z-index: 26; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: radial-gradient(circle at center, rgba(242,194,48,.35), transparent 60%); animation: levelup-veil 1.5s ease-out forwards; } .levelup-num { width: calc(120px * var(--s)); height: calc(120px * var(--s)); border-radius: 50%; display: grid; place-items: center; font: 700 calc(58px * var(--s))/1 var(--f-print); color: #15171a; background: var(--seeds); box-shadow: 0 0 0 6px #000, 0 0 0 9px var(--seeds), 0 0 60px rgba(242,194,48,.8); animation: levelup-num 1.5s cubic-bezier(.2, 1.5, .4, 1) forwards; } .levelup-text { font: 700 calc(18px * var(--s))/1 var(--f-print); letter-spacing: 3px; color: var(--seeds); text-shadow: 0 2px 0 #000; } @keyframes levelup-veil { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } @keyframes levelup-num { 0% { transform: scale(0) rotate(-25deg); } 35% { transform: scale(1.15) rotate(4deg); } 100% { transform: scale(1); } } /* For those made queasy by motion — no flights and flashes: the buddy will write the result anyway. */ @media (prefers-reduced-motion: reduce) { .fly, .levelup { display: none; } .bump, .pop, .rotate-phone { animation: none !important; } .bar i, .job-rule i { transition: none; } } /* ---------- action result: the buddy on his haunches ---------- Instead of a black curtain over the game the buddy sits on the left and says what happened. Only the buddy himself and the bubble catch taps: the empty space around them lets the tap through to the notes and buttons under it (owner 2026-09-25: the buddy interfered with quickly tapping jobs at the bottom of the screen — a full-width strip swallowed the tap). */ .say { position: absolute; left: 8px; bottom: 6px; right: 8px; z-index: 24; display: flex; align-items: flex-end; gap: 0; pointer-events: none; animation: koresh-in .22s ease-out; } .say-art, .say-bubble { pointer-events: auto; } .say.over-tabs { left: 280px; } /* Mirrored to the right (the owner 2026-10-25): the buddy at the right edge facing left, the bubble to his left; the hub's left column (the kiosk, «Барахолка», the crew's gazebo) stays in sight when the tutorial points there. */ .say.mirror { flex-direction: row-reverse; } .say.mirror .say-art { transform: scaleX(-1); } /* his tail flips with him and points left, at the bubble */ .say.mirror .say-bubble { margin: 0 -10px 22px 0; } .short .say.over-tabs { left: 254px; } .tall .say.over-tabs { left: 4px; } .say-art { position: relative; width: 118px; flex: none; } /* The bubble's tail is on the buddy, not on the bubble itself: the bubble has a height ceiling and its own scroll, which would cut off the tail. */ .say-art::after { content: ""; position: absolute; right: 10px; bottom: 36px; border: 9px solid transparent; border-right-color: #f4f1e8; border-left: 0; } .say.bad .say-art::after { border-right-color: #f3dedb; } .say-art .art { width: 100%; aspect-ratio: 3 / 4; filter: drop-shadow(0 6px 10px rgba(0,0,0,.75)); } .say-art .ph { border-radius: 12px; } /* Height ceiling — by the scene (--stage-h is set by fitStage): a long win result (level, trophy, perk, set, day task) on a small screen went over the top, and the title with the beginning got lost (review 2026-10-01). Doesn't fit — scrolls. */ .say-bubble { position: relative; margin: 0 0 22px -10px; max-width: 460px; padding: 9px 13px; border-radius: 13px; background: #f4f1e8; color: #1a1b1e; font: 600 15px/1.3 var(--f-text); box-shadow: 0 4px 0 rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 5px; max-height: calc(var(--stage-h, 420px) - var(--hud-h) - 40px); overflow-y: auto; overscroll-behavior: contain; } .say-bubble > * { flex: none; } .say.bad .say-bubble { background: #f3dedb; } .say .big { font: 700 16px/1.25 var(--f-print); } .say .chip { background: rgba(0,0,0,.06); border-color: #b3a98d; color: #1a1b1e; } .say .chip.good { color: #1f6b2a; border-color: rgba(31,107,42,.45); } .say .chip.warn { color: #a3241c; border-color: rgba(163,36,28,.5); } .say-phrase { font: 700 18px/1.1 var(--f-hand); color: #5a5347; } /* A case waits for a choice, while jobs are being tapped: the card jerks — «сначала реши» (caseNudge). */ .say-bubble.nudge { animation: case-nudge .4s ease-out; } @keyframes case-nudge { 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } } @keyframes koresh-in { from { transform: translate(-22px, 18px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .say { animation: none; } } /* ---------- «Первые шаги» (system 16) ---------- The кореш's quest: what the step gave in green, the task on a yellow tape, the step's button and a quiet «Бросить»; the red arrow over the target (art ui/ukazka, bobbing; from the left or from below when the header leaves no room above); the кореш's face in the header while a run is on (a tap tells the step again). No filter on the moving arrow (phones, UI rules); its outline is drawn. */ .say .tut-done { font: 700 15px/1.25 var(--f-text); color: #1f6b2a; } .say .tut-task { align-self: flex-start; padding: 3px 10px 4px 8px; border-radius: 3px; background: #ffd84a; color: #1a1b1e; font: 700 14px/1.2 var(--f-print); box-shadow: 0 2px 0 rgba(0,0,0,.3); rotate: -1deg; } .say .tut-task b { font-weight: 400; } /* The way out when the step's place is under another window (the arrow is on its cross). */ .say .tut-out { font: 700 14px/1.25 var(--f-text); color: #b23a26; } .tut-act { gap: 10px; align-items: center; flex-wrap: wrap; } /* Answers to a talk step (the cops' «Что скажешь?»): one under another, the full width of the bubble. */ .tut-choices { flex-direction: column; align-items: stretch; gap: 6px; } .tut-choices .tut-choice { text-align: left; } .tut-choices .tut-drop { align-self: flex-start; } .tut-drop { background: none; border: 0; padding: 4px 2px; color: #7a7263; font: 600 13px/1 var(--f-text); text-decoration: underline; cursor: pointer; pointer-events: auto; } .tut-arrow { position: absolute; z-index: 25; width: 46px; height: 46px; pointer-events: none; animation: tut-bob .8s ease-in-out infinite; } .tut-arrow .art, .tut-arrow .ph { width: 100%; height: 100%; } .tut-arrow.up { rotate: 180deg; } .tut-arrow.right { rotate: -90deg; animation-name: tut-bob-x; } @keyframes tut-bob { 50% { translate: 0 -8px; } } @keyframes tut-bob-x { 50% { translate: -8px 0; } } /* The ring stays still (a pulsing shadow repaints every frame on a phone): the arrow above it is what moves. */ .tut-glow { outline: 3px solid #e2533f; outline-offset: -3px; } /* inside the box: a parent's overflow does not clip it */ .hud-tut { position: relative; flex: none; width: 38px; height: 38px; margin-right: 10px; padding: 0; border-radius: 50%; border: 2px solid #ffd84a; background: #3a3d44; box-shadow: 0 2px 0 rgba(0,0,0,.5); cursor: pointer; } .tut-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; } .tut-face .art { position: absolute; width: 250%; max-width: none; height: auto; left: -95%; top: 0; } .hud-tut[data-who="npc/sokamernik"] .tut-face .art { left: -86%; top: -41%; } .hud-tut em { position: absolute; right: -6px; top: -6px; min-width: 17px; height: 17px; border-radius: 9px; background: #e2533f; color: #fff; font: 800 12px/17px var(--f-print); font-style: normal; text-align: center; box-shadow: 0 1px 0 rgba(0,0,0,.4); animation: tut-pulse 1.2s ease-in-out infinite; } @keyframes tut-pulse { 50% { scale: 1.18; } } .tall .hud-tut, .narrow .hud-tut { width: 30px; height: 30px; margin-right: 6px; } @media (prefers-reduced-motion: reduce) { .tut-arrow, .hud-tut em { animation: none; } } /* ---------- phone in landscape: scene below 520 logical pixels — windows denser ---------- */ .short .win { gap: 6px; padding: 8px 10px; } .short .win.board { padding: 0 4px 4px; border-width: 16px; } .short .win-head { gap: 8px; } .short .win-photo .art { width: 40px; height: 48px; border-width: 3px 3px 8px; } .short .win-strip { margin-top: 2px; } .short .strip { padding: 4px 18px 5px 12px; } .short .win-title { font-size: 19px; } .short .win-sub { display: none; } .short .win-x { width: 38px; height: 38px; } .short .win-tabs button { padding: 5px 10px; font-size: 12px; } .short .win-body.paper { padding: 8px 10px; } .short .goods { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; } .short .sheet { padding: 12px 6px 8px; } .short .good { --tear-gap: 40px; } .short .good-art { width: 56px; height: 56px; } .short .good-name { font-size: 13px; } .short .good-stats { font-size: 13px; } .short .buy { padding: 4px 9px; font-size: 14px; } .short .buy .icon { width: 18px; height: 18px; } .short .win.gazeta > .win-x { right: -6px; top: -8px; } .short .gz-page { padding: 10px 12px 8px; gap: 6px 10px; } .short .gz-name { font-size: 26px; } .short .gz-line span:nth-child(2), .short .gz-runner span:nth-child(2) { display: none; } .short .job { grid-template-columns: 30% 1fr; gap: 2px 8px; padding: 4px 4px 6px; } .short .job.lead { grid-template-columns: 34% 1fr; } .short .job-title, .short .job.lead .job-title { font-size: 14.5px; } .short .job-lede, .short .gz-news, .short .gz-box { display: none; } .short .job-terms { gap: 6px; } .short .job-terms .chip, .short .job-cost { font-size: 13px; } .short .win.tetrad > .win-x { right: -6px; top: -8px; } .short .td { padding: 6px 14px 8px 50px; background-position: -16px 0, 0 0, 0 0, 0 0, 0 0; } .short .td::before { left: 8px; top: 6px; background-size: 16px 20px; } .short .td-title { font-size: 28px; } .short .td-district { font-size: 21px; } .short .td-sub, .short .td-text { display: none; } .short .td-row { grid-template-columns: 76px minmax(0, 1fr) 124px 232px; gap: 10px; padding: 5px 0 6px; } .short .td-name { font-size: 20px; } .short .td-roof-text { display: none; } /* the roof level is visible by the triangles */ .short .td-cash { margin-top: 2px; } .short .td-cash b { font-size: 21px; } .short .td-rate, .short .td-top, .short .td-wait { font-size: 16px; } .short .td-note { margin-top: 1px; font-size: 12px; line-height: 1.2; } .short .td-act { margin-top: 5px; font-size: 20px; } .short .fp-side { width: 212px; bottom: 44px; gap: 6px; } .short .fp-me { width: 212px; bottom: 8px; } .short .fp-title { font-size: 16px; } .short .fp-sub { font-size: 12.5px; } .short .fp-name .strip { padding: 4px 12px 5px 10px; } .short .fp-sheet { padding: 8px 10px; font-size: 13px; gap: 4px; } .short .fp-ladder { left: 236px; right: 58px; gap: 6px; } .short .fp-stash { right: 6px; top: 50px; } .short .fp-stash .zn-btn-art { width: 44px; height: 44px; } .short .fp-stash .zn-btn-name { font-size: 11px; padding: 1px 5px 2px; } .short .fp .medallion { width: 34px; } .short .fp .face { width: 32px; height: 32px; } .short .fp-log { bottom: 40px; } .short .fp-fishka { right: 8px; bottom: 8px; } .short .fp-tag-art { width: 30px; height: 30px; } .short .fp-tag b { font-size: 18px; } .short .fp-cap { font-size: 13.5px; } .short .fp-hint { font-size: 15px; bottom: 8px; } .short .fp-stamp { font-size: 34px; } .short .fp-lockmsg { font-size: 19px; } /* ---------- gym: the wall of a basement gym ---------- Whitewash on top, oil-paint green below, a dark baseboard between them (owner's decision: every window has its own look — not a board and not a basement with chalk). The title — stenciled in paint, the signboard — a sheet on tape, each stat has a barbell with plates: a plate is a set in form, a pale gold outline — faded but remembered, an empty outline — opened by level; every fifth one higher. Chalk sticks under the sign are today's sets (decision 89). */ .win.kachalka { max-width: 1040px; padding: 0 0 16px; border: 3px solid #0e100f; border-radius: 3px; background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.35), transparent 60%), repeating-linear-gradient(92deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(180deg, #35532f, #2b4327); box-shadow: inset 0 0 80px rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.7); } .win.kachalka > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.kachalka .win-body { padding: 0 0 2px; overflow-y: auto; gap: 0; scrollbar-width: thin; scrollbar-color: #8a8f95 transparent; } .kz-head { display: flex; align-items: flex-start; gap: 18px; margin: 0 0 6px; padding: 10px 22px 10px; border-bottom: 7px solid rgba(20,22,18,.8); background: repeating-linear-gradient(92deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(180deg, #b7b09c, #a49d89); box-shadow: inset 0 22px 30px -22px rgba(0,0,0,.45); } .kz-title { flex: none; padding: 4px 0 0 4px; font: 700 42px/1 var(--f-print); text-transform: uppercase; letter-spacing: 5px; color: rgba(176,38,28,.92); transform: rotate(-1.4deg); text-shadow: 0 0 5px rgba(176,38,28,.45), 1px 1px 0 rgba(0,0,0,.25); } .kz-note { position: relative; max-width: 560px; margin-left: auto; padding: 8px 12px 9px; font: 15px/1.25 var(--f-text); color: var(--ink); transform: rotate(.8deg); box-shadow: 0 3px 6px rgba(0,0,0,.45); } .kz-note .tape.l { left: 40%; top: -9px; transform: rotate(-3deg); } .kz-row { display: grid; grid-template-columns: 300px minmax(0, 1fr) 156px; gap: 16px; align-items: center; padding: 5px 26px 6px; border-bottom: 2px dashed rgba(236,230,214,.14); } .kz-row:last-of-type { border-bottom: 0; } .kz-stat { min-width: 0; } .kz-name { font: 700 24px/1 var(--f-print); text-transform: uppercase; letter-spacing: 2.5px; color: #ece6d6; text-shadow: 1px 1px 0 rgba(0,0,0,.65); } .kz-about { margin-top: 2px; font: 14px/1.15 var(--f-text); color: #c9c3b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kz-mid { min-width: 0; } .kz-total { margin-top: 3px; font: 700 16px/1 var(--f-hand); color: #f2c230; } .kz-bar { position: relative; min-height: 52px; display: flex; align-items: center; padding-right: 58px; } .kz-rod { position: absolute; left: 0; right: 0; top: 50%; height: 9px; margin-top: -4px; border-radius: 5px; background: linear-gradient(#d3d7da, #7a8085 50%, #3e4347); box-shadow: 0 2px 3px rgba(0,0,0,.65); } .kz-plates { position: relative; display: flex; align-items: center; gap: 2px; margin-left: 14px; min-width: 0; } .kz-plates.many { gap: 1px; } .kz-plate { width: 9px; flex: 0 1 auto; min-width: 3px; height: 36px; border-radius: 2px; border: 1.5px dashed rgba(236,230,214,.38); background: rgba(0,0,0,.14); } .kz-plates.many .kz-plate { min-width: 2px; border-width: 1px; } .kz-plate:nth-child(5n+1) { height: 46px; } .kz-plate.on { border: 1px solid #0b0d0e; background: linear-gradient(90deg, #454a4e, #24282b 55%, #55595d); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 1px 3px rgba(0,0,0,.7); } .kz-plate.mem { border: 1.5px dashed rgba(242,194,48,.85); background: rgba(242,194,48,.16); } /* Today's sets in chalk, the entry beside them; the form line under a barbell: green holds, yellow is its last day, red fades. */ .kz-day { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 0 26px 6px; } .kz-day b { font: 700 22px/1 var(--f-hand); color: #ece6d6; white-space: nowrap; text-shadow: 1px 1px 0 rgba(0,0,0,.6); } .kz-sticks { display: flex; gap: 5px; flex: none; } .kz-sticks i { position: relative; width: 6px; height: 24px; border-radius: 3px; background: #ece6d6; opacity: .9; transform: rotate(4deg); } .kz-sticks i:nth-child(odd) { transform: rotate(-3deg); } .kz-sticks i.used { opacity: .28; } .kz-sticks i.used::after { content: ""; position: absolute; left: -4px; top: 9px; width: 14px; height: 4px; background: #ece6d6; transform: rotate(-35deg); } .kz-fee { display: inline-flex; align-items: center; gap: 4px; font: 14px/1.2 var(--f-text); color: #c9c3b0; white-space: nowrap; } .kz-fee.poor { color: #ef7a5f; } .kz-fee .icon { width: 16px; height: 16px; } .kz-form { margin: 0 0 0 14px; font: 700 16px/1.1 var(--f-hand); color: #8fd16f; } .kz-form.last { color: #f2c230; } .kz-form.drop { color: #ef7a5f; } .kz-form.none { color: #c9c3b0; } .kz-count { position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(2deg); font: 700 22px/1 var(--f-hand); color: #ece6d6; text-shadow: 1px 1px 0 rgba(0,0,0,.6); } .kz-go { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 7px 10px 8px; border: 2px solid #4d1712; border-radius: 3px; background: linear-gradient(#d2503f, #b23a2e); color: #fff; font: 700 17px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; transform: rotate(-1.2deg); box-shadow: 0 3px 0 #4d1712, 0 5px 9px rgba(0,0,0,.45); transition: transform .06s, box-shadow .06s; } .kz-go:hover { filter: brightness(1.06); } .kz-go:active { transform: translateY(2px) rotate(-1.2deg); box-shadow: 0 1px 0 #4d1712; } .kz-go[disabled] { opacity: .55; pointer-events: none; filter: saturate(.5); } .kz-go small { font: 700 16px/1 var(--f-hand); letter-spacing: 0; text-transform: none; white-space: nowrap; } .kz-rules { margin-top: 4px; padding: 0 26px; font: 14px/1.25 var(--f-text); color: #c9c3b0; } body.busy .kz-go { pointer-events: none; } .short .win.kachalka { padding: 0 0 10px; } .short .kz-head { margin: 0 0 4px; padding: 8px 16px 8px; } .short .win.kachalka > .win-x { right: -6px; top: -8px; } .short .kz-title { font-size: 28px; letter-spacing: 3px; } .short .kz-note { display: none; } .short .kz-head { margin-bottom: 2px; } .short .kz-row { grid-template-columns: 262px minmax(0, 1fr) 124px; gap: 10px; padding: 3px 16px 4px; } .short .kz-total { margin-top: 2px; font-size: 14px; } .short .kz-name { font-size: 18px; } .short .kz-about { display: none; } .short .kz-bar { min-height: 30px; padding-right: 48px; } .short .kz-plate { width: 7px; height: 22px; } .short .kz-plate:nth-child(5n+1) { height: 30px; } .short .kz-count { font-size: 18px; } .short .kz-go { padding: 5px 6px 6px; font-size: 14px; } .short .kz-go small { font-size: 14px; } .short .kz-rules { display: none; } .short .kz-day { padding: 0 16px 3px; } .short .kz-day b { font-size: 18px; } .short .kz-sticks i { height: 18px; width: 5px; } .short .kz-form { font-size: 14px; line-height: 1; } /* Portrait: the same wall, barbells one under another. The whitewash — a strip under the title and signboard, the baseboard — its bottom edge (by the signboard height, not by a share of the window: otherwise the light letters of the first barbell would land on the whitewash). At a barbell — the name and «Подход» on the right, under the big thumb; a line below — how much you have and the set count, the bar under them full width: forty plates in a row. */ .tall .win.kachalka { padding: 0; background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.35), transparent 60%), repeating-linear-gradient(92deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(180deg, #35532f, #2b4327); } .tall .win.kachalka > .win-x { right: -4px; top: -6px; } .tall .win.kachalka .win-body { padding: 0 0 4px; } .tall .kz-head { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 12px 14px 14px; border-bottom: 7px solid rgba(20,22,18,.8); background: repeating-linear-gradient(92deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(180deg, #b7b09c, #a49d89); box-shadow: inset 0 22px 30px -22px rgba(0,0,0,.45); } .tall .kz-title { padding: 2px 44px 0 2px; font-size: 34px; letter-spacing: 4px; } /* on the right — the window cross */ .tall .kz-note { max-width: none; margin: 0 4px; padding: 7px 10px 8px; font-size: 15px; } .tall .kz-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "about go" "total total" "mid mid"; gap: 2px 12px; padding: 9px 12px 10px; } .tall .kz-mid { grid-area: mid; } .tall .kz-stat { display: contents; } .tall .kz-name { grid-area: name; align-self: end; font-size: 23px; letter-spacing: 2px; } .tall .kz-about { grid-area: about; align-self: start; font-size: 15px; } .tall .kz-total { grid-area: total; margin-top: 4px; padding-right: 58px; font-size: 18px; line-height: 1.1; } .tall .kz-go { grid-area: go; align-self: center; width: 142px; padding: 7px 6px 8px; } .tall .kz-go small { font-size: 15px; } /* Set count — above the right end of the bar, in the «у тебя» line: forty plates take the whole bar. */ .tall .kz-bar { min-height: 38px; margin-top: 2px; padding-right: 0; } .tall .kz-count { top: auto; bottom: 100%; transform: rotate(2deg); font-size: 20px; } .tall .kz-plates { margin-left: 8px; } .tall .kz-plate { width: 7px; height: 26px; } .tall .kz-plate:nth-child(5n+1) { height: 34px; } .tall .kz-rules { margin-top: 4px; padding: 0 14px 8px; font-size: 15px; } .tall .kz-day { padding: 8px 12px 2px; } .tall .kz-form { margin: 2px 0 0 8px; } /* ---------- a gym set (decision 89): the mini-game first person, kachalka.js draws it on canvas ---------- The canvas fills the window; the name and the reps top left (the cross is top right), the hint at the bottom, the countdown in the middle, the intro and the result on a sheet of paper on tape over the scene. */ .gs { position: absolute; inset: 0; overflow: hidden; background: #0b0d0a; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .gs-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .gs-hud { position: absolute; left: 12px; top: 10px; right: 64px; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; pointer-events: none; } .gs-name { padding: 4px 10px 5px; background: rgba(10,12,9,.72); border-radius: 3px; font: 700 22px/1 var(--f-print); text-transform: uppercase; letter-spacing: 2px; color: #ece6d6; white-space: nowrap; } .gs-name small { margin-left: 8px; font: 700 19px/1 var(--f-hand); letter-spacing: 0; text-transform: none; color: #f2c230; } .gs-reps { display: flex; gap: 5px; padding: 4px 6px; background: rgba(10,12,9,.6); border-radius: 14px; } .gs-reps i { width: 22px; height: 22px; border-radius: 50%; border: 2px dashed rgba(236,230,214,.5); } .gs-reps i.hit { border: 2px solid #0b0d0e; background: radial-gradient(circle, #2a2e31 0 22%, #5b6166 24% 60%, #2a2e31 62%); box-shadow: 0 0 0 2px #f2c230; } .gs-reps i.miss { border: 2px solid #ef7a5f; background: linear-gradient(45deg, transparent 44%, #ef7a5f 45% 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, #ef7a5f 45% 55%, transparent 56%); } .gs-say { position: absolute; left: 0; right: 0; bottom: 10px; padding: 0 16px; text-align: center; pointer-events: none; font: 700 22px/1.1 var(--f-hand); color: #ece6d6; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.8); } .gs-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font: 700 110px/1 var(--f-hand); color: #f2c230; text-shadow: 0 4px 0 #000; } .gs-card { position: absolute; left: 50%; top: 50%; width: min(420px, calc(100% - 24px)); padding: 14px 16px 12px; color: var(--ink); transform: translate(-50%, -50%) rotate(-.6deg); box-shadow: 0 6px 16px rgba(0,0,0,.6); } .gs-card .tape { position: absolute; left: 40%; top: -10px; width: 74px; height: 20px; background: rgba(240,232,200,.62); transform: rotate(3deg); } .gs-card h3 { margin: 0 0 6px; font: 700 28px/1 var(--f-hand); color: #b23a2e; } .gs-card h3.good { color: #2f7a28; } .gs-card p { margin: 0 0 7px; font: 16px/1.3 var(--f-text); } .gs-card p.gs-borya { margin-top: -2px; font: 700 18px/1.15 var(--f-hand); color: #5c5748; } .gs-keys { font-size: 14px !important; color: #5c5748; } /* The needle's intro (the «Кольщик»): the three rules of the session as a list the eye reads first, the key words in red. */ .gs-card ul.gs-rules { margin: 2px 0 8px; padding: 0 0 0 18px; font: 700 16px/1.3 var(--f-text); } .gs-card ul.gs-rules li { margin: 0 0 3px; } .gs-card ul.gs-rules b { color: #b23a2e; } .gs-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .gs-go { flex: 1 1 auto; min-height: 46px; padding: 8px 14px; border: 2px solid #4d1712; border-radius: 3px; background: linear-gradient(#d2503f, #b23a2e); color: #fff; font: 700 17px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; box-shadow: 0 3px 0 #4d1712; } .gs-go:active { transform: translateY(2px); box-shadow: 0 1px 0 #4d1712; } .gs-go.alt { background: #e9e0c8; color: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); } body.gym-playing #say { display: none !important; } .short .gs-name { font-size: 18px; } .short .gs-name small { font-size: 16px; } .short .gs-reps i { width: 18px; height: 18px; } .short .gs-count { font-size: 84px; } .tall .gs-hud { top: 8px; left: 10px; right: 56px; } .tall .gs-name { font-size: 19px; letter-spacing: 1px; } .tall .gs-name small { font-size: 17px; margin-left: 5px; } .tall .gs-reps i { width: 18px; height: 18px; } /* ---------- workbench: a spread of the magazine «Сделай сам» (system 6, «Шмот 2.0») ---------- A spread window on graph paper (app.js, winBench): the rubric as a black plate, craft drawings in ink. A drawing — a sheet with a frame and a margin for binding: a view of the item with dimension lines, the name in drafting font, a corner stamp (slot, level, what it gives), below — what to build or upgrade with: tokens as pictures, «лишних/надо»; if missing — in red pen. The button — a red plate, at the cap — a «до упора» stamp. At the bottom — the «чем качать» ruler: craft level and the ladder boss's token. */ .win.verstak { max-width: 1010px; padding: 11px 20px 9px; border: 0; border-radius: 2px; color: var(--ink); background: linear-gradient(90deg, rgba(60,40,10,.17), transparent 2%, transparent 48.6%, rgba(60,40,10,.15) 49.8%, rgba(255,255,255,.42) 50.2%, transparent 51.6%, transparent 98%, rgba(60,40,10,.15)), repeating-linear-gradient(0deg, rgba(204,104,44,.3) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(204,104,44,.3) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, rgba(204,104,44,.13) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(204,104,44,.13) 0 1px, transparent 1px 8px), #f0ead8; box-shadow: 0 14px 28px rgba(0,0,0,.7), 4px 4px 0 #d8d0ba, 7px 7px 0 #c6bea7, inset 0 0 26px rgba(120,90,40,.2); } .win.verstak > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.verstak .win-body { padding: 0 2px 2px; gap: 5px; } .vs-head { display: flex; align-items: center; gap: 16px; padding-right: 36px; } .vs-rubric { flex: none; display: flex; align-items: baseline; gap: 10px; padding: 4px 13px 6px; background: var(--ink); color: #f3ecd8; transform: rotate(-.8deg); box-shadow: 3px 3px 0 rgba(0,0,0,.2); } .vs-title { font: 700 28px/1 var(--f-print); text-transform: uppercase; letter-spacing: 3px; } .vs-issue { font: 700 20px/1 var(--f-hand); color: #f2c230; } .vs-lead { flex: 1; min-width: 0; font: italic 15px/1.25 var(--f-news); color: #3a352b; } .vs-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 12px; } /* Drawing sheet: a thin trim and an ink frame, on the left — a margin for binding. */ .vs-sheet { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); grid-auto-rows: min-content; align-content: start; gap: 3px 10px; padding: 9px 11px 7px 21px; background: #fbf8ee; box-shadow: 0 2px 4px rgba(0,0,0,.28); } .vs-sheet::before { content: ""; position: absolute; inset: 4px 4px 4px 12px; border: 2px solid var(--ink); pointer-events: none; } /* Something to build or upgrade — a red dot in the binding margin (inside the sheet: outside it the window scroll cut it). */ .vs-sheet.can::after { content: ""; position: absolute; left: 1px; top: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1.5px #fbf8ee; } .vs-no { position: absolute; right: 10px; top: 7px; font: 700 10.5px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: var(--ink-soft); } /* Item view: under it — a dimension line with ticks, as on a drawing. */ .vs-draw { position: relative; grid-row: 1 / span 2; align-self: start; width: 70px; height: 70px; margin: 2px 0 7px; } .vs-draw::before { content: ""; position: absolute; left: 3px; right: 3px; bottom: -7px; height: 5px; border: solid rgba(29,27,23,.6); border-width: 0 1.5px; background: linear-gradient(rgba(29,27,23,.6), rgba(29,27,23,.6)) 0 50% / 100% 1.5px no-repeat; } .vs-pic { width: 100%; height: 100%; } .vs-level { position: absolute; right: 5px; top: -2px; z-index: 3; pointer-events: none; font: 700 24px/1 var(--f-hand); color: var(--pen-red); text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 1px 0 #fff, 0 0 5px #fff; } .vs-name { align-self: end; padding-right: 56px; font: 700 16px/1.08 var(--f-print); text-transform: uppercase; letter-spacing: .7px; } /* Corner stamp: slot and level in cells, under them — what it gives. */ .vs-stamp { display: grid; grid-template-columns: 1fr 1fr; align-self: start; border: 1.5px solid var(--ink); font: 13px/1.15 var(--f-text); } .vs-cell { padding: 1px 5px 2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-cell + .vs-cell { border-left: 1.5px solid var(--ink); } .vs-cell.wide { grid-column: 1 / -1; border-left: 0; border-top: 1.5px solid var(--ink); font-weight: 700; white-space: normal; } .vs-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 2px; } .vs-need { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 30px; } .vs-need-h { font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; } .vs-cost { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 2px; border: 1.5px solid rgba(29,27,23,.55); border-radius: 14px; background: rgba(255,255,255,.6); font: 700 14px/1 var(--f-text); color: var(--ink); white-space: nowrap; } .vs-cost .icon { width: 24px; height: 24px; } .vs-cost.lack { border-style: dashed; border-color: var(--pen-red); color: var(--pen-red); } /* Not enough, and the boss can be hit right now — an arrow on the plate: a tap leads to the fight with him (app.js, benchTokenTap). The arrow adds no width to the plate — room for it comes from the margins and the gap by the picture (1 + 1 + 1 + 7 + 3 = 2 + 3 + 8): there can be two plates in a row, and with extra pixels the second one moved to a new line and the drawing grew (portrait, «Носок с батарейками»). */ .vs-cost.go { gap: 1px; padding-left: 1px; padding-right: 3px; } .vs-cost.go::after { content: "›"; flex: none; width: 7px; text-align: center; font: 700 1.35em/.6 var(--f-text); translate: 0 -.07em; } .vs-cost:active { translate: 0 1px; } .vs-was { font: 13px/1 var(--f-text); color: var(--ink-soft); } /* A pen note above the price: red — «первые девять ждёт крыша», blue — the result of building or upgrading (vs-news). Always one line: the sheet doesn't grow, and the button stays put every time. */ .vs-pen { grid-column: 1 / -1; min-width: 0; min-height: 1.1em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 16px/1.1 var(--f-hand); color: var(--pen-red); } .vs-news { color: #1d3f8f; } /* The buddy at the workbench sits farther from the finger and to the side (say(), class atop): tapped at the bottom — he is at the top, under the header. */ .say.atop { top: calc(var(--hud-h) + 6px); bottom: auto; } .vs-go { flex: none; min-width: 118px; min-height: 32px; padding: 5px 14px 6px; text-align: center; font: 700 15px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; color: #fff7e6; background: #c9432f; box-shadow: 0 3px 0 #7a2318, 0 4px 7px rgba(0,0,0,.25); transform: rotate(-.6deg); transition: transform .06s, box-shadow .06s; } .vs-go:hover { filter: brightness(1.07); } .vs-go:active { transform: translateY(2px) rotate(-.6deg); box-shadow: 0 1px 0 #7a2318; } .vs-go[disabled] { color: var(--ink-soft); background: transparent; box-shadow: none; outline: 1.5px dashed rgba(29,27,23,.4); outline-offset: -2px; pointer-events: none; } body.busy .vs-go { pointer-events: none; } .vs-top { grid-column: 1 / -1; justify-self: end; margin: 2px 6px 2px 0; padding: 2px 12px 3px; border: 3px double var(--pen-red); font: 700 18px/1 var(--f-print); text-transform: uppercase; letter-spacing: 2px; color: var(--pen-red); transform: rotate(-5deg); opacity: .85; } /* The «чем качать» ruler: a cell — level, token and how many are needed; enough for a level — the cell is filled. */ .vs-ladder { display: flex; flex-direction: column; gap: 4px; } .vs-ladder-h { font: 700 12.5px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; color: #6b1d16; } .vs-rungs { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); padding: 0 1.5px 1.5px 0; } .vs-rung { display: flex; flex-direction: column; align-items: center; margin: 0 -1.5px -1.5px 0; padding: 2px 0 3px; border: 1.5px solid var(--ink); background: rgba(252,249,240,.8); color: var(--ink); } .vs-rung.has { background: #cfe6b8; } .vs-rung-n { font: 700 12px/1.1 var(--f-print); } /* A cell whose tap leads to a boss (not enough tokens for the level, and the boss can be hit), — with the same arrow as the plate in the price; it adds no height to the row. */ .vs-rung.go .vs-rung-n::after { content: "›"; margin-left: 2px; font: 700 1.45em/.5 var(--f-text); color: var(--pen-red); } /* Token and how many are needed for the level — in marker nearby. */ .vs-rung-b { display: flex; align-items: flex-end; gap: 1px; } .vs-rung .icon { width: 24px; height: 24px; } .vs-rung-q { font: 700 15px/1 var(--f-hand); color: var(--pen-red); } .vs-rules { font: 14px/1.2 var(--f-text); color: #4a4336; } .short .win.verstak { padding: 8px 12px 10px; } .short .win.verstak > .win-x { right: -6px; top: -8px; } .short .win.verstak .win-body { gap: 6px; } .short .vs-title { font-size: 20px; letter-spacing: 2px; } .short .vs-issue { font-size: 17px; } .short .vs-lead { font-size: 13px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .short .vs-sheets { gap: 7px 8px; } .short .vs-sheet { grid-template-columns: 58px minmax(0, 1fr); gap: 3px 8px; padding: 10px 9px 8px 19px; } .short .vs-draw { width: 58px; height: 58px; margin-bottom: 7px; } .short .vs-level { font-size: 20px; } .short .vs-name { font-size: 14px; padding-right: 50px; } .short .vs-stamp { font-size: 12px; } .short .vs-need { min-height: 26px; } .short .vs-cost { font-size: 13px; } .short .vs-cost .icon { width: 20px; height: 20px; } .short .vs-go { min-width: 104px; min-height: 28px; padding: 4px 10px 5px; font-size: 13.5px; } .short .vs-rules { font-size: 13px; } /* portrait: one page, no fold in the middle; drawings one under another, token plates and the button bigger — for a finger. */ .tall .win.verstak { padding: 10px 10px 12px; background: linear-gradient(90deg, rgba(60,40,10,.17), transparent 3%, transparent 97%, rgba(60,40,10,.15)), repeating-linear-gradient(0deg, rgba(204,104,44,.3) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(204,104,44,.3) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, rgba(204,104,44,.13) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(204,104,44,.13) 0 1px, transparent 1px 8px), #f0ead8; } .tall .win.verstak > .win-x { right: -4px; top: -6px; } .tall .vs-head { flex-direction: column; align-items: flex-start; gap: 7px; padding-right: 40px; } .tall .vs-title { font-size: 26px; } .tall .vs-lead { font-size: 15px; } .tall .vs-sheets { grid-template-columns: minmax(0, 1fr); gap: 10px; } .tall .vs-sheet { grid-template-columns: 92px minmax(0, 1fr); padding: 13px 12px 11px 22px; } .tall .vs-draw { width: 92px; height: 92px; } .tall .vs-name { font-size: 18px; } .tall .vs-stamp { font-size: 14.5px; } .tall .vs-need { min-height: 38px; } .tall .vs-need-h { font-size: 13px; } .tall .vs-cost { min-height: 36px; padding-right: 10px; font-size: 16px; } .tall .vs-cost.go { padding-right: 4px; } .tall .vs-cost.go::after { width: 8px; } .tall .vs-cost .icon { width: 28px; height: 28px; } .tall .vs-pen { font-size: 18px; } .tall .vs-go { min-width: 128px; min-height: 42px; font-size: 16px; } .tall .vs-rungs { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); } .tall .vs-rung { padding: 4px 0 5px; } .tall .vs-rung-n { font-size: 13px; } .tall .vs-rung .icon { width: 28px; height: 28px; } .tall .vs-rung-q { font-size: 17px; } .tall .vs-rules { font-size: 15px; } /* ---------- underground fights: a basement wall with chalk ---------- Concrete, a bulb, chalk: the window has its own look (owner's decision — not a notice board). The fighter's photo is taped on, the top — a chalk table. The «Выйти на ринг» button — red, like everything that hits. */ .win.podval { max-width: 1040px; padding: 14px 18px 16px; border: 3px solid #101214; border-radius: 3px; background: #34383c radial-gradient(ellipse at 30% 0%, rgba(255,236,190,.16), transparent 55%), #34383c repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 3px, transparent 3px 9px); box-shadow: inset 0 0 90px rgba(0,0,0,.55), 0 12px 26px rgba(0,0,0,.7); } .win.podval > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.podval .win-body { padding: 0; overflow: hidden; } .pd { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; } .pd-left, .pd-right { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #8a8f95 transparent; } .pd-right { border-left: 2px solid rgba(236,230,212,.35); padding-left: 16px; } .chalk { font-family: var(--f-hand); color: #ede9df; text-shadow: 0 0 1px rgba(255,255,255,.35), 0 1px 0 rgba(0,0,0,.4); } .pd-title { font: 700 34px/1 var(--f-hand); text-transform: uppercase; letter-spacing: 1px; transform: rotate(-1.2deg); text-decoration: underline wavy rgba(237,233,223,.55); text-underline-offset: 6px; } .pd-intro { font-size: 17px; line-height: 1.2; color: #cfcbc0; } .pd-me { display: flex; flex-direction: column; gap: 2px; font-size: 19px; line-height: 1.15; } .pd-muted { color: #b9b5aa; font-size: 16px; } .pd-h { font: 700 26px/1 var(--f-hand); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; } /* The fighter's card on the basement's board. The fight's sheet is a pd-card too, on paper (.paper): the board's chalk colours stay off it. */ .pd-card:not(.paper) { display: flex; gap: 12px; align-items: flex-start; padding: 8px 6px 6px 2px; border-top: 1px dashed rgba(237,233,223,.35); } .pd-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .pd-fname { font: 700 24px/1.05 var(--f-hand); } .pd-photo { position: relative; flex: none; width: 104px; padding: 5px 5px 16px; background: #f3efe3; transform: rotate(-3deg); box-shadow: 0 4px 8px rgba(0,0,0,.5); } .pd-photo .tape.r { right: -12px; top: -8px; transform: rotate(28deg); } .pd-photo-img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; background: #cfc6b0; } .pd-photo .ph { width: 100%; aspect-ratio: 3 / 4; border-radius: 0; } .pd-card:not(.paper) .chip { background: rgba(0,0,0,.25); border-color: rgba(237,233,223,.35); color: #ede9df; } .pd-card:not(.paper) .chip.warn { color: #ff8d84; } .pd-card:not(.paper) .fight-warn { color: #ff8d84; font: 700 18px/1.1 var(--f-hand); } .pd-go { align-self: flex-start; min-height: 44px; padding: 8px 26px; font-size: 19px; transform: rotate(-.8deg); position: sticky; bottom: 4px; z-index: 1; } /* the left column scrolls — the main button stays in view */ /* «Выйти на ринг» and «Рывок» (decision 138) side by side, held in view together. */ .pd-gos { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; position: sticky; bottom: 4px; z-index: 1; } .pd-gos .pd-go { position: static; } .pd-rush { min-height: 44px; padding: 8px 18px; font-size: 17px; transform: rotate(.9deg); } .pd-rush-line { font-size: 16px; line-height: 1.2; color: #f2c230; } .pd-top { display: flex; flex-direction: column; gap: 1px; font-size: 18px; line-height: 1.2; } .pd-row { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 8px; align-items: baseline; padding: 1px 4px; border-bottom: 1px solid rgba(237,233,223,.18); } .pd-row.me { background: rgba(255,225,120,.14); outline: 2px solid rgba(255,225,120,.45); outline-offset: -2px; } .pd-place { color: #b9b5aa; } .pd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-depth { font-weight: 700; } .pd-rules { margin-top: auto; padding-top: 8px; font-size: 15px; line-height: 1.2; color: #b9b5aa; } /* In a fight: floor and rank in chalk on a plate at top right, the fighter's sheet — as with a boss. */ .pd-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 4px 12px 6px; margin-left: auto; background: rgba(40,43,46,.9); border: 2px solid #101214; transform: rotate(1.5deg); font-family: var(--f-hand); color: #ede9df; pointer-events: none; } .pd-badge b { font-size: 24px; line-height: 1; } .pd-badge span { font-size: 15px; color: #b9b5aa; } /* Season — a month: a line in chalk under the title; last month's result — in the «у тебя» block. */ .pd-season { font-size: 18px; line-height: 1.15; color: #ffe9a8; transform: rotate(-.6deg); } .pd-past { margin-top: 3px; font-size: 17px; color: #cfcbc0; } .pd-past .chip, .pd-me .chip { background: rgba(0,0,0,.25); border-color: rgba(237,233,223,.35); color: #ede9df; padding: 0 6px; font-size: 15px; vertical-align: 1px; } .pd-title-tag { color: #ffe9a8; } /* On the right — chalk tabs: the month's top, the month's leagues, last month; the selected one is underlined, like a heading. */ .pd-tabs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 4px; padding-right: 34px; } /* on the right — the window cross */ .pd-tab { padding: 0 0 3px; border: 0; background: none; cursor: pointer; font: 700 22px/1 var(--f-hand); color: #b9b5aa; text-transform: uppercase; letter-spacing: .6px; text-shadow: inherit; } .pd-tab.on { color: #ede9df; text-decoration: underline wavy rgba(237,233,223,.55); text-underline-offset: 5px; } .pd-leagues { display: flex; flex-direction: column; gap: 1px; font-size: 18px; line-height: 1.2; } /* Eleven leagues since 2026-11-03: the rows are tight so the rules under them stay in view on a PC. */ .pd-league { display: grid; grid-template-columns: 18px 1fr auto 58px; gap: 8px; align-items: center; padding: 0 4px; border-bottom: 1px solid rgba(237,233,223,.18); } .pd-league .chip { justify-self: end; background: rgba(0,0,0,.25); border-color: rgba(237,233,223,.35); color: #ede9df; padding: 0 6px; font-size: 14px; line-height: 1.15; } .pd-league.got { color: #9aa69a; } .pd-league.got .pd-league-name { text-decoration: line-through rgba(237,233,223,.5); } .pd-league.got .chip { opacity: .55; } .pd-league.here { background: rgba(255,225,120,.14); outline: 2px solid rgba(255,225,120,.45); outline-offset: -2px; color: #ede9df; } .pd-league.here .pd-league-name { text-decoration: none; } .pd-league-mark { color: #ffe9a8; font-weight: 700; } .pd-league-from { color: #b9b5aa; font-size: 15px; } .pd-row-past .chip { justify-self: end; background: rgba(0,0,0,.25); border-color: rgba(237,233,223,.35); color: #ede9df; padding: 0 6px; font-size: 14px; } .short .pd { gap: 10px; } .short .pd-title { font-size: 26px; } .short .pd-intro { display: none; } .short .pd-tab { font-size: 18px; } .short .pd-season, .short .pd-past { font-size: 15px; } .short .pd-me { font-size: 17px; } /* Phone in landscape: no fighter description — «Выйти на ринг» must be visible without scrolling. */ .short .pd-card-text > .pd-muted { display: none; } .short .pd-photo { width: 78px; } /* Portrait: columns one under another — on top «у тебя» and the fighter, under a chalk line the tabs with the top. The whole window scrolls (app.js, winRing), and «Выйти на ринг» — on the floor under the wall (pd-foot): in view without scrolling, the wall goes under the floor. Everything — via .win.podval: the fighter's sheet in a fight is built from the same pd-*. */ .tall .win.podval { height: 100%; padding: 10px 0 0; } .tall .win.podval > .win-x { right: -4px; top: -6px; } /* The wall scrolls under the cross: there the text fades (a mask in the corner) rather than being cut by a sticker mid-line. The scroll is the podval container: its height decides below what to remove on a short screen. */ .tall .win.podval .win-body { overflow-y: auto; gap: 0; padding: 0 12px 0 10px; container: podval / size; -webkit-mask-image: radial-gradient(circle at calc(100% - 17px) 5px, transparent 24px, #000 34px); mask-image: radial-gradient(circle at calc(100% - 17px) 5px, transparent 24px, #000 34px); } .tall .win.podval .pd { flex: none; display: flex; flex-direction: column; gap: 12px; padding-bottom: 10px; } .tall .win.podval .pd-left, .tall .win.podval .pd-right { min-height: auto; overflow: visible; padding-right: 0; } .tall .win.podval .pd-right { padding: 4px 0 0; border-left: 0; border-top: 2px solid rgba(236,230,212,.35); } .tall .win.podval .pd-title { font-size: 30px; } .tall .win.podval .pd-season { font-size: 16px; } .tall .win.podval .pd-intro { font-size: 16px; } .tall .win.podval .pd-me { font-size: 17px; } .tall .win.podval .pd-past { font-size: 15px; } .tall .win.podval .pd-photo { width: 84px; } .tall .win.podval .pd-fname { font-size: 22px; } .tall .win.podval .pd-card .chip { font-size: 15px; } /* Chalk tabs — for a finger: the tap is as tall as a button, not as a letter. */ .tall .win.podval .pd-tabs { gap: 0 10px; margin-bottom: 0; padding-right: 0; } .tall .win.podval .pd-tab { padding: 8px 4px 9px; } .tall .win.podval .pd-rules { margin-top: 2px; } /* The button stands on the basement floor: a dark strip the full wall width with a baseboard edge, the wall scrolls under it, as under a threshold — the edge is sharp, its shadow is short. A faded button (you are resting) is semi-transparent — the floor under it is opaque. The floor color is its own, not from the wall: the .win.podval wall background isn't accepted by the browser (the color isn't in the last layer) — they will fix it, the floor will stay the floor. While the text is shorter than the wall, the floor is at the bottom (margin-top: auto). */ .tall .win.podval .pd-foot { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center; margin: auto -12px 0 -10px; padding: 10px 12px 8px 10px; border-top: 2px solid rgba(236,230,212,.2); background: repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 3px, transparent 3px 9px), #131413; box-shadow: 0 -7px 9px -3px rgba(0,0,0,.6); } .tall .win.podval .pd-go { position: static; min-width: 72%; min-height: 48px; padding: 8px 26px; font-size: 20px; } .tall .win.podval .pd-foot.two { gap: 10px; } .tall .win.podval .pd-foot.two .pd-go { min-width: 0; flex: 1.4 1 0; padding: 8px 12px; font-size: 18px; } .tall .win.podval .pd-foot.two .pd-rush { flex: 1 1 0; min-height: 48px; padding: 8px 10px; font-size: 16px; } /* A short screen in portrait (Telegram not fullscreen, a small phone): no intro or fighter description, as in landscape (.short) — then above the floor the tabs and the start of the top are visible. */ @container podval (max-height: 660px) and (max-width: 440px) { .win.podval .pd-intro, .win.podval .pd-card-text > .pd-muted { display: none; } } /* ---------- phone in the header: a handset with a «how many unclaimed» number ---------- The header's free space (.hud-free) — for new indicators; the phone goes first, on the right, by the cash. */ .hud-free { display: flex; align-items: center; justify-content: flex-end; } .hud-phone { position: relative; width: 38px; height: 38px; display: grid; place-items: center; } .hud-phone .icon { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px #000); } .hud-phone em { position: absolute; right: -6px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font: 700 14px/1 var(--f-hand); font-style: normal; color: #15130e; background: #f5c928; border-radius: 3px; transform: rotate(8deg); box-shadow: 0 1px 2px rgba(0,0,0,.6); } .hud-phone.buzz .icon { animation: buzz 2.4s ease-in-out infinite; } @keyframes buzz { 0%, 78%, 100% { transform: none; } 82% { transform: rotate(-9deg); } 86% { transform: rotate(9deg); } 90% { transform: rotate(-6deg); } 94% { transform: rotate(6deg); } } /* ---------- case on a job: choice buttons in the buddy's bubble ---------- */ .say.pinned .say-bubble { max-width: 560px; } .case-title { color: #a3241c; } .case-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .case-perk { font: 700 16px/1.15 var(--f-hand); color: #1f6b2a; } .case-law { font: 700 16px/1.15 var(--f-hand); color: #a3241c; } /* Raspberry jacket (legendary perk): in a case the cash goes not from you but to you — a gold line, at the option «тебе столько-то». */ .case-fishka { font: 700 16px/1.15 var(--f-hand); color: #8a5a00; } .case-opt .chip.good { color: #1f6b2a; } .case-opt { position: relative; overflow: hidden; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 118px; padding: 6px 12px 7px; background: #f2c230; color: #17150f; border-radius: 2px; box-shadow: 0 3px 0 #8a6a0c, 0 4px 8px rgba(0,0,0,.3); text-align: left; transition: transform .06s, box-shadow .06s, filter .1s; } .case-opt:hover { filter: brightness(1.06); } .case-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a6a0c; } .case-opt.off { background: #cfc8b4; color: #6b665c; box-shadow: 0 3px 0 #8a8570; pointer-events: none; } /* Not armed yet (app.js, caseArm): dimmed, the tap goes through to the bubble, a dark line fills the bottom edge until it is live. */ .case-opt.arming { pointer-events: none; opacity: .6; } .case-opt.arming::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #17150f; animation: case-arm .8s linear forwards; } @keyframes case-arm { to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .case-opt.arming::after { animation: none; width: 100%; } } .case-label { font: 700 15px/1 var(--f-print); text-transform: uppercase; letter-spacing: .5px; } .case-opt .chip { padding: 0 6px; font-size: 12.5px; background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.25); color: #17150f; } .case-opt .chip.warn { color: #a3241c; } .case-opt .chip.coin .icon { width: 16px; height: 16px; } .case-blocked { font: 700 15px/1 var(--f-hand); color: #a3241c; } /* ---------- phone: the game menu (app.js, winPhone) ---------- The handset is drawn whole (phone/, 900×1200, no background) — which one is decided by cosmetics (content/phones.json). Where on the picture the screen is — the handset's lcd: app.js puts it with variables --sl --st --sw --sh (percent of the frame) and the rounding --sr (percent of the screen width), theme colors — --mb-*. The window is the whole layer and a size container; the handset is measured so that its SCREEN fits the layer: tw of its width and th of the layer height, the screen center — at cy of the height. The keypad one is held in front: the speaker is visible on top, the keys go off the bottom; the touch one — almost entirely. The screen is a container too: letters and icons on it grow with it (cqw). */ .win.phone { position: absolute; inset: 0; width: auto; height: auto; max-width: none; max-height: none; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; translate: none; container-type: size; } /* The handset closes with a tap past it (app.js, hitArt) and by the paper cross in the layer's corner (owner 2026-10-14: on a small screen the handset fills it and there is nothing to tap past). */ .win.phone .win-body { position: absolute; inset: 0; padding: 0; overflow: visible; display: block; } /* The cross beside the handset's top right corner (the owner 2026-10-25: not in the layer's far corner): the screen is centred at 50cqw, so its right edge is 50cqw + fw·sw/200, and its top is cy·100cqh − fw·sh/150 (the frame's own arithmetic below, the variables are on the cross too, app.js winPhone); the bezel right of the screen is 6 % of the frame (the keypad handset's). Portrait at the section's end: the layer's corner. */ .win.phone .mb-x { position: absolute; left: calc(50cqw + var(--fw) * var(--sw) / 200 + var(--fw) * .06); top: calc(var(--cy) * 100cqh - var(--fw) * var(--sh) / 150 - 12px); margin: 0; z-index: 3; } /* the handset's size and place; the cross (.mb-x) shares the variables to stand by the screen's corner */ .mb-frame, .win.phone .mb-x { --tw: .66; --th: .82; --cy: .52; --fw: min(calc(var(--tw) * 10000cqw / var(--sw)), calc(var(--th) * 7500cqh / var(--sh))); } .mb-frame { position: absolute; width: var(--fw); aspect-ratio: 3 / 4; left: calc(50cqw - var(--fw) * (var(--sl) + var(--sw) / 2) / 100); top: calc(var(--cy) * 100cqh - var(--fw) * (var(--st) + var(--sh) / 2) / 75); filter: drop-shadow(0 14px 22px rgba(0,0,0,.7)); } .mb-touch, .win.phone .mb-x.mb-touch { --tw: .5; --th: .99; --cy: .5; } .mb-body { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .mb-frame > .ph { position: absolute; inset: 0; border-radius: 40px; } .mb-screen, .mb-glass { position: absolute; left: calc(var(--sl) * 1%); top: calc(var(--st) * 1%); width: calc(var(--sw) * 1%); height: calc(var(--sh) * 1%); border-radius: calc(var(--fw) * var(--sw) * var(--sr) / 10000); } .mb-screen { overflow: hidden; display: flex; flex-direction: column; container-type: size; color: var(--mb-ink); background: var(--mb-bg); } .mb-screen button { color: inherit; } /* strip at the top: signal, clock, battery */ .mb-status { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2.4cqw 4cqw 1.4cqw; font: 700 clamp(10px, 4.6cqw, 14px)/1 var(--f-print); letter-spacing: .06em; } .mb-sig { display: flex; align-items: flex-end; gap: 1.5px; height: .95em; } .mb-sig i { width: 3px; background: currentColor; } .mb-sig i:nth-child(1) { height: 30%; } .mb-sig i:nth-child(2) { height: 55%; } .mb-sig i:nth-child(3) { height: 80%; } .mb-sig i:nth-child(4) { height: 100%; opacity: .35; } .mb-bat { position: relative; width: 1.7em; height: .82em; border: 1.5px solid currentColor; border-radius: 2px; } .mb-bat::after { content: ""; position: absolute; right: -4px; top: 25%; width: 2px; height: 50%; background: currentColor; } .mb-bat i { position: absolute; inset: 1.5px 28% 1.5px 1.5px; background: currentColor; } /* app header */ .mb-head { flex: none; display: flex; align-items: center; gap: 1.5cqw; padding: 1cqw 4cqw 2cqw; border-bottom: 1px solid var(--mb-soft); } .mb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 clamp(13px, 6cqw, 20px)/1.05 var(--f-print); text-transform: uppercase; letter-spacing: .08em; } .mb-back { flex: none; margin: -1.5cqw 0; padding: 0 2cqw 0 0; font: 400 clamp(22px, 10cqw, 34px)/.9 var(--f-text); color: var(--mb-accent); } /* list: only it scrolls, the header and bottom stay put */ .mb-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2cqw 3cqw 3cqw; scrollbar-width: thin; scrollbar-color: var(--mb-soft) transparent; font: clamp(11px, 5cqw, 16px)/1.25 var(--f-text); } /* app icons: a grid of three */ .mb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5cqw 1cqw; align-content: start; padding-top: 1.5cqw; } .mb-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; min-width: 0; padding: 1.5cqw 0 1cqw; border-radius: 2cqw; transition: transform .1s; } .mb-app:active { transform: scale(.94); } .mb-ico { position: relative; width: 20cqw; aspect-ratio: 1; display: grid; place-items: center; } .mb-ico-art { width: 100%; height: 100%; object-fit: contain; } .mb-ico .ph { border-radius: 20%; } .mb-label { max-width: 100%; text-align: center; overflow-wrap: anywhere; font: 700 clamp(9px, 3.9cqw, 13px)/1.05 var(--f-print); text-transform: uppercase; letter-spacing: .02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mb-tag { margin-top: -.4cqw; font: 700 clamp(9px, 3.6cqw, 12px)/1 var(--f-text); color: var(--mb-soft); white-space: nowrap; } .mb-dot { position: absolute; right: -3%; top: -3%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #e0483f; box-shadow: 0 0 0 2px var(--mb-bg); } .mb-badge { position: absolute; right: -16%; top: -12%; min-width: 1.6em; padding: .12em .38em; border-radius: 1em; text-align: center; font: 700 clamp(9px, 3.8cqw, 13px)/1.15 var(--f-text); font-style: normal; color: #fff; background: #e0483f; box-shadow: 0 0 0 2px var(--mb-bg); } .mb-lock { position: absolute; right: -10%; bottom: -6%; font-style: normal; font-size: clamp(12px, 5cqw, 18px); } .mb-app.locked .mb-ico-art, .mb-app.locked .mb-glyph { opacity: .4; } .mb-app.locked .mb-label { opacity: .6; } .mb-app.buzz .mb-ico { animation: buzz 2.4s ease-in-out infinite; } /* outline icons (the glyph set): lines in the theme color, with backlight */ .mb-glyph { width: 70%; height: 70%; fill: none; stroke: var(--mb-icon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2.5px var(--mb-icon)); } /* bottom */ .mb-foot { flex: none; } /* «Новое / Прочитанное» tabs */ .mb-tabs { flex: none; display: flex; gap: 2cqw; padding: 2.2cqw 3cqw .6cqw; } .mb-tabs button { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 1.5cqw; padding: 2cqw 1cqw; border: 1.5px solid var(--mb-soft); border-radius: 2cqw; font: 700 clamp(10px, 4.3cqw, 15px)/1 var(--f-print); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .mb-tabs button.on { color: var(--mb-bg); background: var(--mb-ink); border-color: var(--mb-ink); } .mb-tabs em { min-width: 1.4em; padding: .1em .3em; border-radius: 1em; font-style: normal; font-size: .9em; text-align: center; color: var(--mb-bg); background: var(--mb-ink); } .mb-tabs button.on em { color: var(--mb-ink); background: var(--mb-bg); } /* SMS messages */ .mb-screen .sms { padding: 1.8cqw 2.4cqw 2.2cqw; border: 1px solid var(--mb-soft); border-radius: 1.6cqw; background: var(--mb-card); } .mb-screen .sms + .sms { margin-top: 2cqw; } .mb-screen .sms.gift { border-color: var(--mb-ink); box-shadow: inset 3px 0 0 var(--mb-accent); } .sms-head { display: flex; justify-content: space-between; gap: 2cqw; font: 700 clamp(10px, 4.2cqw, 14px)/1.12 var(--f-print); text-transform: uppercase; letter-spacing: .03em; } .sms-head b { min-width: 0; overflow-wrap: anywhere; } .sms-head span { flex: none; white-space: nowrap; font-weight: 400; color: var(--mb-soft); } .sms-text { margin-top: 1cqw; font: clamp(11px, 4.8cqw, 16px)/1.26 var(--f-text); } .sms-gift { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5cqw; margin-top: 1.6cqw; } .mb-screen .sms-gift .chip { font-size: clamp(11px, 4.4cqw, 14px); color: var(--mb-ink); background: rgba(0,0,0,.07); border-color: var(--mb-soft); } .mb-screen .sms-gift .btn { margin-left: auto; min-height: 0; padding: 1.6cqw 4cqw; border: 0; border-radius: 1.6cqw; box-shadow: none; font: 700 clamp(11px, 4.4cqw, 15px)/1 var(--f-print); text-transform: uppercase; color: var(--mb-bg); background: var(--mb-ink); } .sms-done { margin-left: auto; font: 700 clamp(13px, 5.6cqw, 18px)/1 var(--f-hand); color: var(--mb-soft); } .sms-empty { padding: 6cqw 2cqw; text-align: center; font: clamp(11px, 4.8cqw, 15px)/1.3 var(--f-text); color: var(--mb-soft); } /* rows: kenty, handsets, themes */ .mb-sec { margin: 3.5cqw 1cqw 1cqw; font: 700 clamp(10px, 4cqw, 13px)/1 var(--f-print); text-transform: uppercase; letter-spacing: .08em; color: var(--mb-soft); } .mb-row { display: flex; align-items: center; gap: 2.6cqw; width: 100%; padding: 2cqw 1cqw; text-align: left; border-bottom: 1px solid var(--mb-card); border-radius: 1.4cqw; } .mb-row:active { background: var(--mb-card); } .mb-ava { flex: none; width: 10cqw; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--mb-soft); background: var(--mb-card); font: 700 clamp(10px, 4cqw, 14px)/1 var(--f-print); } .mb-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .6cqw; } .mb-row-name { min-width: 0; font: 700 clamp(11px, 4.8cqw, 16px)/1.15 var(--f-text); } .mb-row-name .nick-cut { max-width: 100%; } .mb-row-sub { font: clamp(10px, 4cqw, 13px)/1.22 var(--f-text); color: var(--mb-soft); } .mb-row-mark { flex: none; font: 700 clamp(10px, 3.8cqw, 13px)/1 var(--f-print); text-transform: uppercase; letter-spacing: .04em; color: var(--mb-soft); white-space: nowrap; } .mb-row-mark.on { padding: .35em .55em; border-radius: 1em; color: var(--mb-bg); background: var(--mb-ink); } .mb-row { cursor: pointer; } .mb-row-acts { flex: none; display: flex; gap: 1.2cqw; } .mb-mini { padding: 1.4cqw 2.4cqw; border-radius: 1.4cqw; font: 700 clamp(10px, 3.8cqw, 13px)/1 var(--f-print); text-transform: uppercase; color: var(--mb-bg) !important; background: var(--mb-ink); } .mb-mini.ghost { color: var(--mb-ink) !important; background: none; border: 1.5px solid var(--mb-soft); } .mb-row.locked .mb-row-name, .mb-row.locked .mb-thumb, .mb-row.locked .mb-swatch { opacity: .55; } .mb-thumb { flex: none; width: 12cqw; height: 16cqw; object-fit: contain; } .mb-row .mb-thumb.ph { border-radius: 2cqw; } .mb-swatch { position: relative; flex: none; width: 11cqw; aspect-ratio: 1; border-radius: 28%; border: 1px solid var(--mb-soft); background: linear-gradient(160deg, var(--a), var(--b)); } .mb-swatch i:first-child { position: absolute; right: 16%; bottom: 16%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--c); } .mb-card { display: flex; flex-direction: column; gap: 1.6cqw; padding: 2.6cqw 3cqw; border: 1px solid var(--mb-soft); border-radius: 2cqw; background: var(--mb-card); font: clamp(11px, 4.6cqw, 15px)/1.26 var(--f-text); } .mb-card b { font: 700 clamp(12px, 5cqw, 17px)/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .04em; } .mb-btns { display: flex; gap: 2cqw; } .mb-btn { flex: 1 1 0; padding: 2.2cqw 1cqw; border-radius: 1.6cqw; font: 700 clamp(10px, 4.2cqw, 14px)/1 var(--f-print); text-transform: uppercase; color: var(--mb-bg) !important; background: var(--mb-ink); } .mb-btn.ghost { color: var(--mb-ink) !important; background: none; border: 1.5px solid var(--mb-soft); } .mb-note { margin: 2.5cqw 1cqw 0; font: clamp(10px, 4cqw, 13px)/1.26 var(--f-text); color: var(--mb-soft); } /* «Кипиш»: an event row — the boss's face in a circle (the crop of BOSS_FACE; the drifter's picture zoomed on the face) or a gazebo icon; what he hasn't seen yet — highlighted, like «Новое» in messages; where he can't be let in now (his own brawl is on) — pale, no button. */ .mb-face { position: relative; flex: none; width: 12cqw; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 1px solid var(--mb-soft); background: var(--mb-card); } .mb-face .mb-ico-art, .mb-face .mb-glyph { width: 76%; height: 76%; } .mb-face-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: scale(1.9); transform-origin: 50% 28%; } .mb-face-art.boss-face { position: absolute; width: var(--face-w); height: auto; left: var(--face-x); top: var(--face-y); max-width: none; object-fit: fill; transform: none; } /* BOSS_FACE */ .mb-face-emoji { font-size: clamp(14px, 6.4cqw, 22px); line-height: 1; } .icons-lcd .mb-face-art { filter: grayscale(1) contrast(1.35); mix-blend-mode: multiply; } .kp-row.fresh { background: var(--mb-card); box-shadow: inset 3px 0 0 var(--mb-accent); } .mb-lcd .kp-row.fresh { box-shadow: inset 3px 0 0 var(--mb-ink); } .kp-row.off { cursor: default; } .kp-row.off .mb-row-name, .kp-row.off .mb-face { opacity: .55; } .kp-who { font-weight: 700; color: var(--mb-ink); } .kp-hp { display: block; height: 1.4cqw; min-height: 3px; margin-top: .4cqw; border: 1px solid var(--mb-soft); border-radius: 1cqw; overflow: hidden; } .kp-hp i { display: block; height: 100%; background: var(--mb-accent); } .mb-lcd .kp-hp i { background: var(--mb-ink); } /* keypad (lcd): a one-color screen with backlight and a line grid; icons — the same pictures, in one backlight color (grayed and multiplied with the background: light disappears into the backlight, dark lies as its letters); at the bottom — key captions. */ .mb-lcd .mb-screen { background: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px), var(--mb-bg); filter: url(#mb-bulge); } .mb-lcd .mb-screen > * { padding-left: max(5.5cqw, 14px); padding-right: max(5.5cqw, 14px); } .mb-lcd .mb-status { padding-top: 3.4cqw; } .mb-lcd .mb-soft { padding-bottom: 3.6cqw; } /* glass over the screen: a diagonal glint from the top left, as on the handset picture, and a shadow at the edges — the screen is sunk under a convex glass */ .mb-glass { pointer-events: none; z-index: 2; background: linear-gradient(122deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 17%, rgba(255,255,255,.07) 30%, transparent 31%), radial-gradient(120% 95% at 50% 46%, transparent 58%, rgba(10,20,10,.24) 100%); box-shadow: inset 0 4px 10px rgba(0,0,0,.28), inset 0 0 6px rgba(0,0,0,.3); } .icons-lcd .mb-ico-art { filter: grayscale(1) brightness(1.3) contrast(1.6) drop-shadow(0 0 .6px #000) drop-shadow(0 0 .4px #000); mix-blend-mode: multiply; } .mb-lcd .mb-dot { background: var(--mb-ink); } .mb-lcd .mb-badge { color: var(--mb-bg); background: var(--mb-ink); } .mb-lcd .mb-app:active { color: var(--mb-bg); background: var(--mb-ink); transform: none; } .mb-lcd .mb-app:active .mb-ico-art { mix-blend-mode: normal; filter: grayscale(1) invert(1) contrast(1.3); } .mb-soft { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 1.6cqw 4cqw 2.4cqw; border-top: 1px solid var(--mb-soft); font: 700 clamp(10px, 4.5cqw, 15px)/1 var(--f-print); text-transform: uppercase; letter-spacing: .06em; } .mb-soft > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-soft); } .mb-softkey { flex: none; margin: -1cqw -2cqw -1cqw 0; padding: 1.2cqw 2cqw; border-radius: 1cqw; font: inherit; letter-spacing: inherit; text-transform: inherit; } .mb-softkey:active { color: var(--mb-bg); background: var(--mb-ink); } /* left soft key (the main screen of the keypad one: «Настройки») — in screen letters, not a pale caption */ .mb-soft > span > .mb-softkey.left { margin: -1cqw 0 -1cqw -2cqw; color: var(--mb-ink); } /* touch: the screen fills the whole front — wallpaper as a gradient, a «notch» for the camera (where it is on the «Огрызок» picture, checked against the frame), a clock on the main screen, icons as tiles, the three main ones in the dock, at the bottom a «home» strip. */ .mb-touch .mb-screen { background: radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.14), transparent 60%), linear-gradient(170deg, var(--mb-bg), var(--mb-bg2)); } .mb-touch .mb-screen::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 1.3%; width: 30.7%; height: 4.1%; translate: -50% 0; border-radius: 99px; background: #050505; pointer-events: none; } .mb-touch .mb-status { min-height: 6.4cqh; padding: 1.2cqh 7cqw .4cqh; font: 600 clamp(10px, 4.4cqw, 14px)/1 var(--f-text); } .mb-touch .mb-status .mb-time { order: -1; } .mb-touch .mb-sig { margin-left: auto; } .mb-touch .mb-head { border-bottom: 0; padding: 1cqh 4cqw 1.2cqh; } .mb-touch .mb-title { font: 700 clamp(15px, 7.2cqw, 26px)/1.1 var(--f-text); text-transform: none; letter-spacing: 0; } .mb-clock { flex: none; display: flex; flex-direction: column; align-items: center; gap: .6cqh; padding: 2.2cqh 0 3.4cqh; } .mb-clock b { font: 600 clamp(30px, 19cqw, 72px)/1 var(--f-print); letter-spacing: .02em; } .mb-clock span { font: clamp(11px, 4.4cqw, 15px)/1 var(--f-text); color: var(--mb-soft); } .mb-touch .mb-ico { width: 19cqw; border-radius: 26%; background: var(--mb-icon); box-shadow: 0 2px 6px rgba(0,0,0,.35); } .mb-touch .mb-ico-art { width: 84%; height: 84%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); } .mb-touch .icons-glyph .mb-ico { background: var(--mb-card); box-shadow: inset 0 0 0 1.5px var(--mb-icon), 0 0 10px rgba(0,0,0,.4); } .mb-touch .mb-label { font: 600 clamp(10px, 4cqw, 14px)/1.1 var(--f-text); text-transform: none; letter-spacing: 0; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .mb-touch .mb-badge, .mb-touch .mb-dot { box-shadow: none; } .mb-dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; margin: 0 3cqw 1cqh; padding: 1.6cqh 2cqw .8cqh; border-radius: 7cqw; background: var(--mb-card); } .mb-dock .mb-label { display: none; } .mb-dock .mb-app { padding: 0; } .mb-touch .mb-foot { display: flex; flex-direction: column; } .mb-home { position: relative; align-self: center; width: 40%; height: 4.4cqh; min-height: 18px; } .mb-home::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; translate: 0 -50%; border-radius: 3px; background: var(--mb-ink); opacity: .75; } .mb-touch .mb-tabs button { border-radius: 99px; text-transform: none; letter-spacing: 0; font: 700 clamp(10px, 4.6cqw, 15px)/1 var(--f-text); } .mb-touch .mb-tabs button.on { color: #fff; background: var(--mb-accent); border-color: var(--mb-accent); } .mb-touch .mb-tabs em { color: #fff; background: #e0483f; } .mb-touch .mb-tabs button.on em { color: var(--mb-accent); background: #fff; } .mb-touch .sms { border-color: transparent; border-radius: 3cqw; } .mb-touch .sms.gift { border-color: transparent; box-shadow: inset 3px 0 0 var(--mb-accent); } .mb-touch .sms-head { font: 700 clamp(11px, 4.4cqw, 15px)/1.12 var(--f-text); text-transform: none; letter-spacing: 0; } .mb-touch .mb-screen .sms-gift .btn, .mb-touch .mb-btn { color: #fff !important; background: var(--mb-accent); border-radius: 99px; } .mb-touch .mb-btn.ghost { color: var(--mb-ink) !important; background: none; } .mb-touch .mb-row-mark.on { color: #fff; background: var(--mb-accent); } .mb-touch .mb-mini { color: #fff !important; background: var(--mb-accent); border-radius: 99px; text-transform: none; font-family: var(--f-text); } .mb-touch .mb-mini.ghost { color: var(--mb-ink) !important; background: none; } .mb-touch .mb-row { border-bottom-color: rgba(255,255,255,.06); } .mb-touch .mb-sec { text-transform: none; letter-spacing: .02em; font-family: var(--f-text); } /* portrait: keypad — a wider and higher-than-middle screen, a wider yard above it; touch — almost the whole layer, a band left at the top for the cross (a short phone gave it the whole height) */ .tall .mb-frame { --tw: .82; --th: .62; --cy: .5; } .tall .mb-touch { --tw: .9; --th: .88; --cy: .53; } /* the buddy calls to his own (flushCalls): a button right in the bubble */ .say-act { display: flex; margin-top: 6px; } .say-act .btn { pointer-events: auto; } /* ---------- «Музон»: the player in the phone and the cassette on the stage (app.js phoneMuzon, muzonCassette; webapp/muzon.js) ---------- The player is a phone screen in the theme's colors: the card of what plays (the author's name is a link to his Telegram), «Дальше» and the volume notches like an old handset's. The cassette slides onto the stage when a track starts: a black shell, a cream label written by hand with a red stripe, the reels turning in its window; in a fight it only shows and lets taps through. */ .mz-now { gap: 2cqw; } .mz-by { align-self: flex-start; padding: 0; font: 700 clamp(11px, 4.6cqw, 15px)/1.2 var(--f-text); color: var(--mb-accent); text-decoration: underline dotted; text-underline-offset: .22em; background: none; } .mz-by.off { font-weight: 400; color: var(--mb-soft); text-decoration: none; } .mz-vol { flex: 1 1 0; display: flex; align-items: center; justify-content: space-between; gap: 1.4cqw; } .mz-vol .mb-mini { flex: none; min-width: 9cqw; padding: 1.4cqw 0; text-align: center; } .mz-notches { display: flex; align-items: flex-end; gap: .9cqw; height: 5.4cqw; } .mz-notches i { width: 1.8cqw; background: var(--mb-soft); opacity: .35; } .mz-notches i:nth-child(1) { height: 28%; } .mz-notches i:nth-child(2) { height: 46%; } .mz-notches i:nth-child(3) { height: 64%; } .mz-notches i:nth-child(4) { height: 82%; } .mz-notches i:nth-child(5) { height: 100%; } .mz-notches i.on { background: var(--mb-ink); opacity: 1; } .mb-touch .mz-notches i.on { background: var(--mb-accent); } .mb-btn:disabled, .mb-mini:disabled { opacity: .4; cursor: default; } .mz-idle { cursor: default; } .mz-idle .mb-row-name { opacity: .75; } /* «Плеер»: the place the list fills is lit, like a row under the finger */ .mz-slot.sel { background: var(--mb-card); } /* Over a window and a card (later in the stage than the card, same z), under the кореш's bubble: the bubble up under the header sits where the cassette slides in, and his words win (owner 2026-10-24: the cassette covered the cellmate's lines on the way into the Zone). */ .mz-tape { position: absolute; z-index: 23; left: 12px; top: 96px; width: 200px; cursor: pointer; animation: mz-in .4s cubic-bezier(.2,.9,.3,1.2) both; } .mz-tape.calm { pointer-events: none; cursor: default; } .mz-tape.quiet { pointer-events: none; left: auto; right: 96px; top: 14px; animation-name: mz-drop; } .mz-tape.out { animation: mz-out .45s ease-in both; } .mz-tape.quiet.out { animation-name: mz-lift; } .mz-shell { display: flex; flex-direction: column; gap: 4px; padding: 5px 7px 6px; border: 2px solid #0d0d0f; border-radius: 8px; background: linear-gradient(#34333a, #222126); box-shadow: 0 4px 0 rgba(0,0,0,.35); transform: rotate(-2deg); } .mz-tape:active .mz-shell { transform: rotate(-2deg) translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.35); } .mz-label { display: flex; flex-direction: column; min-width: 0; padding: 2px 9px 3px; border-radius: 3px; border-bottom: 5px solid #c8462e; background: #efe6cc; color: #1b1914; } .mz-label b { overflow: hidden; font: 700 22px/1.05 var(--f-hand); white-space: nowrap; text-overflow: ellipsis; } .mz-tape-by { align-self: flex-start; padding: 0; font: 700 17px/1.1 var(--f-hand); color: #1f3d93; background: none; } button.mz-tape-by { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; } .mz-window { display: flex; justify-content: space-between; align-items: center; height: 21px; margin: 0 26px; padding: 0 5px; border: 2px solid #0d0d0f; border-radius: 11px; background: #4c3b2c; } .mz-reel { width: 15px; height: 15px; border-radius: 50%; animation: mz-spin 1.6s linear infinite; background: radial-gradient(circle, #222126 0 2.5px, transparent 3px), repeating-conic-gradient(#ededed 0 42deg, #8d8d8d 42deg 60deg); } @keyframes mz-in { from { opacity: 0; translate: -240px 0; } to { opacity: 1; translate: 0 0; } } @keyframes mz-out { to { opacity: 0; translate: -240px 0; } } @keyframes mz-drop { from { opacity: 0; translate: 0 -120px; } to { opacity: 1; translate: 0 0; } } @keyframes mz-lift { to { opacity: 0; translate: 0 -120px; } } @keyframes mz-spin { to { rotate: -360deg; } } /* the closed yard's board: the cassette taped under the notice, a switch with a marker hint; its reels turn only while it plays */ .mz-tape.taped { position: relative; left: auto; top: auto; z-index: auto; width: 190px; margin-top: 4px; animation: none; display: flex; flex-direction: column; align-items: center; gap: 4px; } .mz-tape.taped .mz-shell { transform: rotate(3deg); } .mz-tape.taped:active .mz-shell { transform: rotate(3deg) translateY(2px); } .mz-tape.taped:not(.spin) .mz-reel { animation: none; } .mz-hint { padding: 2px 10px 3px; font: 700 18px/1.1 var(--f-hand); color: var(--ink); background: rgba(236,226,196,.95); transform: rotate(-2deg); clip-path: polygon(1% 6%, 99% 0, 100% 52%, 98.5% 100%, 0 94%, .8% 50%); } /* portrait: the header has two rows; a fight's plate and health bar take the top, the cassette goes under them at the right edge */ .tall .mz-tape { top: 114px; } .tall .mz-tape.quiet { right: 10px; top: 100px; } /* ---------- amount slider (sumSlider in app.js): obshchak and a contribution to the crew's obshchak ---------- A pen line, along which a wad of cash is dragged; left of the wad the line is red, like a share underlined with red pen; at the edges — the smallest amount and «всё» in marker. The line is for a finger (44 pixels tall); with a finger on it the browser doesn't give it to scrolling and gestures (touch-action), the movement is entirely the slider's. */ .slide { --t: 1; display: flex; align-items: center; align-self: stretch; } .slide-end { flex: none; padding: 4px 3px 6px; font: 700 19px/1 var(--f-hand); color: var(--ink-soft); white-space: nowrap; } .slide-end:hover { color: var(--ink); } .slide-line { position: relative; flex: 1 1 auto; min-width: 0; height: 44px; touch-action: none; cursor: pointer; outline: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .slide-rail { position: absolute; inset: 0 19px; } .slide-ink { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: rgba(29,27,23,.45); } .slide-ink::after { content: ""; position: absolute; left: 0; top: -1px; width: calc(var(--t) * 100%); height: 4px; border-radius: 2px; background: rgba(184,36,26,.85); } .slide-knob { position: absolute; left: calc(var(--t) * 100%); top: 50%; width: 38px; height: 38px; translate: -50% -50%; rotate: -14deg; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); transition: scale .12s, rotate .12s; } .slide-knob .art { width: 100%; height: 100%; } .slide-knob .ph { border-radius: 50%; } .slide-knob .ph-label { display: none; } .slide-line.on .slide-knob { scale: 1.18; rotate: -4deg; } .slide-line:focus-visible .slide-knob { outline: 2px dashed rgba(184,36,26,.85); outline-offset: 1px; border-radius: 50%; } .short .slide-line { height: 36px; } .short .slide-knob { width: 32px; height: 32px; } /* ---------- obshchak: a cookie tin (picture prop/obshchak) ---------- The tin is drawn whole (900×1200, no background): the lid stands on edge behind the open tin, in the tin — wads on a rubber band. On the lid — a strip of masking tape «Общак», in white marker «не трогать!» and the sum; where the lid is in the frame — --lid-* (fractions of the frame, measured from the picture; redrew the tin — remeasure: scripts/art/prompts.json, prop/obshchak). Next to it — a note under tape: how much on hand, put in and take out; buttons circled in red pen, as in the points notebook. No cross, as with the phone: it closes with a tap past the tin and the note (app.js, hitArt and win-keep). */ .win.banka { width: auto; max-width: none; height: 100%; max-height: none; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; --lid-l: 24%; --lid-t: 12.5%; --lid-w: 52%; --lid-h: 36%; } .win.banka .win-body { flex-direction: row; align-items: center; gap: 0; height: 100%; padding: 0; overflow: visible; } .banka-art { position: relative; flex: none; height: 104%; aspect-ratio: 3 / 4; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); } .banka-body { width: 100%; height: 100%; object-fit: contain; } .banka-art .ph { position: absolute; inset: 6%; border-radius: 50%; } .banka-lid { position: absolute; left: var(--lid-l); top: var(--lid-t); width: var(--lid-w); height: var(--lid-h); display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .banka-tape { padding: 3px 18px 5px; font: 700 30px/1 var(--f-hand); letter-spacing: 1px; color: var(--ink); background: rgba(236,226,196,.96); transform: rotate(-6deg); filter: drop-shadow(0 2px 1px rgba(0,0,0,.45)); clip-path: polygon(1% 6%, 34% 2%, 99% 0, 100% 50%, 98.5% 100%, 60% 97%, 0 93%, .8% 50%); } .banka-warn { margin-top: 6px; font: 700 19px/1 var(--f-hand); color: #f1e9d2; transform: rotate(-3deg); text-shadow: 0 1px 0 rgba(0,0,0,.5); } .banka-sum { margin-top: 4px; font: 700 40px/1 var(--f-hand); color: #f7f0dc; transform: rotate(-2deg); white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.45); } .banka-sum.empty { font-size: 26px; opacity: .8; } .banka-note { --pencil: #6f6c66; position: relative; flex: none; width: 300px; max-height: 100%; margin-left: -14px; padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; transform: rotate(1.3deg); filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); } .banka-note .tape { left: 50%; margin-left: -21px; top: -5px; } .bk-hand { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px dashed rgba(29,27,23,.3); font: 700 14px/1 var(--f-print); letter-spacing: .8px; text-transform: uppercase; } .bk-hand b { display: inline-flex; align-items: center; gap: 4px; font: 700 28px/1 var(--f-hand); letter-spacing: 0; text-transform: none; } .bk-hand .icon { width: 26px; height: 26px; } .bk-block { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .bk-block + .bk-block { padding-top: 8px; border-top: 1px dashed rgba(29,27,23,.3); } .bk-title { font: 700 14px/1 var(--f-print); letter-spacing: .8px; text-transform: uppercase; } .bk-go { position: relative; margin: 4px 0 0 7px; padding: 4px 12px 6px; font: 700 25px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-2deg); } .bk-go::after { content: ""; position: absolute; inset: -3px -7px; border: 2.5px solid rgba(184,36,26,.85); border-radius: 50% 46% 52% 48% / 58% 46% 54% 42%; transform: rotate(2.5deg); pointer-events: none; } .bk-go:hover { filter: brightness(1.25); } .bk-go:active { translate: 0 2px; } .bk-go:disabled { color: #9a968c; cursor: default; } .bk-go:disabled::after { border: 2px dashed rgba(120,115,105,.45); } body.busy .bk-go { pointer-events: none; } .bk-hint { font: 700 17px/1.1 var(--f-hand); color: var(--pencil); } .bk-rules { font: 12.5px/1.25 var(--f-text); color: var(--ink-soft); } /* a buddy line with the tin icon: «закинул», «добрал из общака» */ .with-icon { display: flex; align-items: center; gap: 6px; } .with-icon > .icon { flex: none; width: 24px; height: 24px; } .short .banka-note { width: 272px; padding: 12px 14px 10px; gap: 5px; } .short .bk-hand { padding-bottom: 4px; } .short .bk-block { gap: 3px; } .short .bk-block + .bk-block { padding-top: 5px; } .short .bk-rules { display: none; } .short .bk-go { font-size: 22px; } .short .banka-sum { font-size: 34px; } .short .banka-tape { font-size: 25px; } /* portrait: the note at the bottom, under the thumb, the tin above it and goes with its bottom under the note: the lid is fully visible, the wads too, only the lower side hides. The tin takes as much as the note left in height (the .banka-stand stand measures the room: cqw, cqh), and not wider than the layer; around the lid — the yard: a tap there closes. The letters on the lid — from the tin width. */ .tall .win.banka { width: 100%; height: 100%; padding: 0; container-type: size; } .tall .win.banka .win-body { flex-direction: column; align-items: center; justify-content: flex-end; } .tall .banka-stand { flex: 1 1 0; min-height: 150px; width: 100%; display: flex; align-items: flex-end; justify-content: center; container-type: size; } /* 22 % of the frame height — under the note: the frame's bottom is transparent, then the tin's side down to the wads */ .tall .banka-art { height: auto; width: min(92cqw, 96cqh); translate: 0 22%; container-type: inline-size; } .tall .banka-tape { font-size: clamp(20px, 9cqw, 40px); padding: .1em .6em .17em; } .tall .banka-warn { font-size: clamp(14px, 5.6cqw, 24px); } .tall .banka-sum { font-size: clamp(24px, 11.5cqw, 48px); } .tall .banka-sum.empty { font-size: clamp(18px, 7.5cqw, 32px); } .tall .banka-note { z-index: 1; flex: 0 1 auto; min-height: 0; width: min(100%, 400px); max-height: none; margin: 0 0 2px; padding: 14px 18px 12px; gap: 8px; transform: rotate(-.8deg); } /* All about the note — via .banka-note: the slider (.slide) is also drawn by the crew obshchak card, we don't touch it. Buttons — for a finger; the hint goes to the right of the button, and if it doesn't fit (a button with a big sum) — a line below. */ .tall .banka-note .bk-hand, .tall .banka-note .bk-title { font-size: 15px; } .tall .banka-note .bk-block { flex-flow: row wrap; align-items: center; gap: 3px 14px; } .tall .banka-note .bk-title, .tall .banka-note .slide { flex: 1 0 100%; } .tall .banka-note .bk-go { flex: none; margin: 5px 0 3px 8px; padding: 6px 14px 8px; font-size: 26px; } .tall .banka-note .bk-hint { flex: 1 1 0; min-width: 8em; font-size: 18px; line-height: 1.05; } .tall .banka-note .bk-rules { font-size: 13.5px; line-height: 1.3; } /* A lower layer (Telegram not fullscreen, a small phone, tablet): the rules still fit, the tin is smaller. An almost square PC window — remove the rules, as in landscape, squeeze the note: «Забрать» is visible without scrolling, and the tin with the sum on the lid gets at least some room. */ @container (max-height: 560px) { .tall .banka-stand { min-height: 110px; } .tall .banka-note { padding: 10px 16px 8px; gap: 4px; } .tall .banka-note .bk-hand { padding-bottom: 4px; } .tall .banka-note .bk-block { row-gap: 1px; } .tall .banka-note .bk-block + .bk-block { padding-top: 4px; } .tall .banka-note .slide-line { height: 38px; } .tall .banka-note .bk-go { margin: 2px 0 2px 8px; padding: 3px 12px 5px; font-size: 23px; } .tall .banka-note .bk-rules { display: none; } } /* ---------- daily gift: a notice with tear-off tabs ---------- The same sheet and tabs as «двор закрыт» (.notice, .tabs, .tab), only the tabs have a day and a gift, not a phone number. */ .win.podgon { max-width: 480px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; } .win.podgon > .win-x { position: absolute; right: -18px; top: -14px; z-index: 5; } .win.podgon .win-body { padding: 8px 6px; overflow: visible; } .notice.podgon { max-width: none; margin: 0 auto; transform: rotate(var(--r, 0deg)); } .notice.podgon .notice-sheet p { font-size: 15px; } .podgon-note { margin-top: 8px; font: 700 20px/1.1 var(--f-hand); color: var(--pen-red); transform: rotate(-1.5deg); } .podgon-note.done { color: #5a554b; } .notice.podgon .tab { height: auto; min-height: 74px; flex-direction: column; gap: 3px; } .notice.podgon .tab span, .tab.falling .tab-day, .tab.falling .tab-gift { writing-mode: horizontal-tb; transform: none; white-space: normal; text-align: center; } .tab-day { font: 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: var(--ink); } .tab-gift { font: 700 13px/1.15 var(--f-hand); color: var(--ink); } /* Tickets 3 and 7: «блат +100» in red marker (system 15). */ .notice.podgon .tab .tab-gift.tab-blat, .tab.falling .tab-gift.tab-blat { color: var(--pen-red); font-size: 12px; white-space: nowrap; } /* Today's tab — square, like all, and circled in red pen by hand; each day has its own outline (app.js, PEN_BOXES — SVG in the variable --pen-box). */ .notice.podgon .tab.today::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--pen-box) 0 0 / 100% 100% no-repeat; } .notice.podgon .tab.today:hover { transform: rotate(-3deg); } .notice.podgon .tab:disabled:not(.torn) { opacity: .7; } .tab.falling { flex-direction: column; gap: 3px; } /* «Отсидеть» from a case on a job — in red pen across the newspaper's header. */ .gz-sit { margin-top: 4px; font: 700 20px/1.1 var(--f-hand); color: var(--pen-red); transform: rotate(-1.2deg); } .short .phone-screen { max-height: 230px; } .short .phone-pad { display: none; } .short .notice.podgon .tab { min-height: 62px; } .short .notice.podgon .notice-sheet p { font-size: 14px; } /* portrait: the notice full width, tabs — long strips of a seventh of the sheet: «day» small, number big, under it cash and seeds — an icon over the number (app.js, winDaily); the falling tab — the same (tearDaily, class tall); the cross — on the sheet's corner, inside the screen. The tab sizes — in --tab-px: for a hanging one it is a scene pixel, and the falling one lives in body, outside the scene, its scale doesn't reach it — its pixel is multiplied by --s, like flying numbers (otherwise at the moment of tearing the letters jump: on a tablet shrink, on a phone grow). The falling one takes height and width from the hanging one (tearDaily). */ .tall .win.podgon { padding: 0; } .tall .win.podgon > .win-x { right: -4px; top: -16px; } .tall .win.podgon .win-body { padding: 8px 6px 4px; } .tall .notice.podgon .notice-sheet { padding: 18px 16px 12px; } .tall .notice.podgon .notice-head { font-size: 27px; letter-spacing: 6px; } .tall .notice.podgon .notice-title { font-size: 30px; } .tall .notice.podgon .notice-sheet p { font-size: 16px; line-height: 1.26; } .tall .notice.podgon .tab { --tab-px: 1px; min-height: 146px; } .tab.falling.tall { --tab-px: calc(1px * var(--s)); } .tall .notice.podgon .tab, .tab.falling.tall { justify-content: flex-start; gap: calc(7 * var(--tab-px)); padding-top: calc(9 * var(--tab-px)); } .tall .notice.podgon .tab-day, .tab.falling.tall .tab-day { display: flex; flex-direction: column; align-items: center; font: 700 calc(14 * var(--tab-px))/1 var(--f-hand); letter-spacing: calc(.6 * var(--tab-px)); } .tall .notice.podgon .tab-day b, .tab.falling.tall .tab-day b { font-size: calc(30 * var(--tab-px)); line-height: .9; letter-spacing: 0; } .tall .notice.podgon .tab-gift, .tab.falling.tall .tab-gift { display: flex; flex-direction: column; align-items: center; gap: var(--tab-px); font-size: calc(18 * var(--tab-px)); line-height: 1; } .tall .notice.podgon .tab-gift b, .tab.falling.tall .tab-gift b { font: 700 calc(20 * var(--tab-px))/1 var(--f-hand); } .tall .notice.podgon .tab-gift.tab-blat, .tab.falling.tall .tab-gift.tab-blat { font-size: calc(13 * var(--tab-px)); } /* ---------- raids: the «Их ищут пацаны» stand (system 9) ---------- A parody of a police «Их разыскивает» stand (owner's choice 2026-09-29): iron painted gray, with a frame and a glass glint; on top a red header in white letters; the players — sheets on magnets: a black-and-white doll in his outfit on a height ruler, features, the chance as a red stamp, a «Наехать» plate. On the right — a lined sheet: «Кто кого», the month's top, rules. */ .win.rozysk { max-width: 1040px; padding: 12px 14px 14px; border: 3px solid #0f1113; border-radius: 3px; background: linear-gradient(158deg, rgba(255,255,255,.09), transparent 32%, transparent 70%, rgba(255,255,255,.04)), #3b424a; box-shadow: 0 12px 26px rgba(0,0,0,.7), inset 0 0 0 5px #272c31, inset 0 0 0 7px #565f68; } .win.rozysk > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.rozysk .win-body { padding: 0; overflow: hidden; } .rz { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; } .rz-head { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 16px; padding: 7px 44px 8px; background: linear-gradient(180deg, #c42a23, #a61d18); border: 2px solid #5e110e; box-shadow: inset 0 0 0 2px rgba(255,255,255,.14), 0 3px 0 rgba(0,0,0,.35); } .rz-title { font: 700 30px/1 var(--f-print); letter-spacing: 3px; text-transform: uppercase; color: #fbf6ea; text-shadow: 0 2px 0 rgba(0,0,0,.25); } .rz-sub { font: 600 16px/1 var(--f-text); color: #f6ddd8; } .rz-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.65fr 1fr; gap: 12px; } .rz-main { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 4px 4px 2px; scrollbar-width: thin; scrollbar-color: #8a8f95 transparent; } .rz-label { font: 700 14px/1.1 var(--f-print); letter-spacing: 1.2px; text-transform: uppercase; color: #e3dfd5; } .rz-label.debt { color: #ffb2a6; } .rz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px 10px; } .rz-card { position: relative; display: flex; gap: 9px; padding: 9px 9px 9px 8px; background: #ebe5d5; color: var(--ink); box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 0 12px rgba(100,78,35,.18); } /* A magnet that holds the sheet on the iron. */ .rz-card::before { content: ""; position: absolute; left: 50%; top: -6px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e9e4d6, #6d6a62 72%); box-shadow: 0 2px 2px rgba(0,0,0,.45); } .rz-card.debtor { background: #f2dfd5; box-shadow: 0 0 0 2px #b3221d, 0 3px 6px rgba(0,0,0,.45); } /* Photo: the guy to the waist on a height ruler, black and white; tap — who he is. .rz-hd: the HD guy as a print (prikid.js, the head at one height, a hat goes up into the room above it), .rz-doll: the old doll without his art. */ .rz-photo { position: relative; flex: none; width: 84px; height: 104px; padding: 0; overflow: hidden; cursor: pointer; background: #dcd8cd repeating-linear-gradient(0deg, transparent 0 12px, rgba(0,0,0,.26) 12px 13px); border: 3px solid #faf8f2; box-shadow: 0 0 0 1px #9b958a; } .rz-doll { position: absolute; left: 50%; top: 5%; height: 190%; aspect-ratio: 2 / 3; transform: translateX(-50%); filter: grayscale(1) contrast(1.06); } .rz-hd { position: absolute; inset: 0; filter: grayscale(1) contrast(1.06); } .rz-hd > .guy.hd { position: absolute; inset: 0; width: 100%; height: 100%; --hd-fill: .36; --hd-top: .17; } .rz-doll .layer { position: absolute; inset: 0; width: 100%; height: 100%; } .rz-doll .ph { border-radius: 10px 10px 0 0; } .rz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .rz-name { font: 700 17px/1.1 var(--f-print); letter-spacing: .4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rz-signs { font: 15px/1.15 var(--f-text); color: var(--ink-soft); } .rz-note { font: 14px/1.15 var(--f-text); color: #6b1d16; } .rz-go { align-self: stretch; margin-top: auto; } /* A stamp after a raid: «Обчистил», «Взял», «Нарвался». */ .rz-stamp { position: absolute; left: 50%; top: 42%; z-index: 3; padding: 4px 12px; pointer-events: none; font: 700 26px/1 var(--f-print); letter-spacing: 2px; text-transform: uppercase; color: #b3221d; border: 3px solid currentColor; border-radius: 4px; background: rgba(235,229,213,.6); transform: translate(-50%, -50%) rotate(-12deg); animation: rz-stamp .28s cubic-bezier(.2,1.6,.4,1) both; } .rz-stamp.bad { color: #3a3834; } @keyframes rz-stamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.9); } } .rz-empty { padding: 18px 10px; font: 600 18px/1.25 var(--f-text); color: #e3dfd5; text-align: center; } .rz-empty.small { padding: 8px 4px; font-size: 16px; } .rz-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; font: 15px/1.2 var(--f-text); color: #cfcabe; } /* A side sheet: tabs — underlined in red pen, rows — along the ruling. */ .rz-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; transform: rotate(.6deg); box-shadow: 0 4px 8px rgba(0,0,0,.45); scrollbar-width: thin; scrollbar-color: #9a9385 transparent; } .rz-tabs { display: flex; flex-wrap: wrap; gap: 6px 12px; } .rz-tab { padding: 2px 0 3px; font: 700 14px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid transparent; } .rz-tab.on { color: var(--pen-red); border-bottom-color: var(--pen-red); } .rz-log, .rz-top { display: flex; flex-direction: column; } .rz-line { padding: 4px 0 5px; font: 15px/1.2 var(--f-text); border-bottom: 1px solid rgba(60,90,160,.22); } .rz-line.bad { color: #6b1d16; } .rz-when { margin-right: 6px; font-weight: 700; color: var(--ink-soft); } .rz-place { font-weight: 700; color: var(--ink-soft); } .rz-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rz-pts { font-weight: 700; } .rz-mine { font: 600 15px/1.2 var(--f-text); } .rz-muted { font: 15px/1.2 var(--f-text); color: var(--ink-soft); } .rz-rules { display: flex; flex-direction: column; gap: 6px; font: 15px/1.25 var(--f-text); } .rz-rules p { margin: 0; } /* Black eye — a bruise under the eye: on the avatar in the header (lost a raid, for an hour). */ .avatar.bruised::after { content: ""; position: absolute; left: 24%; top: 34%; width: 26%; height: 20%; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(76,40,110,.85), rgba(110,60,150,.55) 45%, rgba(130,90,160,0) 72%); } /* An unfinished fight — on top of the stand: a red slip with «Добить» (closed the fight midway or the game restarted). */ .rz-going { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f2dfd5; color: var(--ink); font: 15px/1.2 var(--f-text); box-shadow: 0 0 0 2px #b3221d, 0 3px 6px rgba(0,0,0,.45); } .rz-going > div { flex: 1; min-width: 0; } .rz-going .btn { flex: none; } /* The coin of a raid fight: the hand comes up over the fight instead of the fist; the stamp says whose turn it is. The outline is in the drawing: no filter here. */ .fp-flick { position: absolute; left: 50%; bottom: -22%; z-index: 4; height: 130%; aspect-ratio: 1; opacity: 0; pointer-events: none; transform: translate(-50%, 34%); transition: transform .2s ease-out, opacity .12s; } .fp-flick.on { opacity: 1; transform: translate(-50%, 0); } .fp-flick svg { display: block; } .fp.flicking .fp-hand { transform: translateY(70%); transition: transform .2s ease-in; } .fp-turn { position: absolute; left: 47%; top: 62%; z-index: 6; padding: 5px 16px 7px; pointer-events: none; white-space: nowrap; font: 700 34px/1 var(--f-print); letter-spacing: 3px; text-transform: uppercase; color: #b3221d; border: 4px solid currentColor; border-radius: 5px; background: rgba(235,229,213,.92); box-shadow: 0 4px 12px rgba(0,0,0,.5); transform: translate(-50%, -50%) rotate(-7deg); animation: fp-turn .28s cubic-bezier(.2,1.6,.4,1) both; } .fp-turn.mine { color: #2f6b2a; } @keyframes fp-turn { from { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(2); } } .tall .fp-flick { bottom: -4%; height: auto; width: 128%; } .tall .fp-turn { left: 50%; font-size: 36px; } /* In a raid fight: the chance from the stand on a plate at top right (portrait — a strip under the name), like the floor in «Стрелка». */ .short .win.rozysk { padding: 8px 10px 10px; } .short .rz-title { font-size: 24px; } .short .rz-photo { width: 70px; height: 88px; } /* Portrait: the stand full width, sheets — in a column, the slip — under them; everything scrolls together. */ .tall .win.rozysk { padding: 8px 8px 10px; } .tall .win.rozysk > .win-x { right: -4px; top: -6px; } .tall .rz-head { padding: 6px 44px 7px 12px; justify-content: flex-start; } .tall .rz-title { font-size: 24px; letter-spacing: 2px; } .tall .rz-body { display: flex; flex-direction: column; overflow-y: auto; gap: 12px; scrollbar-width: thin; } .tall .rz-main { overflow: visible; flex: none; } .tall .rz-grid { grid-template-columns: minmax(0, 1fr); } /* a long nick is cut, doesn't push the stand apart */ .tall .rz-side { overflow: visible; flex: none; transform: none; } /* ---------- Slap fights: the Leshatnik (system 19) ---------- The window — garage gates of sheet metal (leshatnik): the title in white paint by stencil, you yourself — on a cardboard, opponents — cards on a clothesline with clothespins (face, rank fish, chance as a stamp, what's at stake), at the side — plywood on screws: «Улов недели» with prizes, last week, «Кто кого», rules. Faces from mug.js: the HD guy in what he wears, the swelling as is; the fish are SVG. */ .mug-fish { display: block; width: 100%; height: 100%; overflow: visible; } /* A face (mug.js): the box shows the middle of the bust, the shoulders stick out of it; the head moves by itself over the body and the worn top. */ .mug { position: relative; display: block; width: 100%; height: 100%; } .mug-whole, .mug-tilt, .mug-head { position: absolute; inset: 0; } .mug-tilt { transform: rotate(3deg); } /* the art's head leans 3° to his left (HD_HEAD) */ .mug canvas { position: absolute; display: block; } .mug-back { transform-origin: 50% 100%; } .mug-print { opacity: 0; } .win.leshatnik { max-width: 1040px; padding: 12px 14px 14px; border: 3px solid #0d100f; border-radius: 3px; background: linear-gradient(180deg, rgba(0,0,0,.3), transparent 18%, transparent 78%, rgba(0,0,0,.34)), repeating-linear-gradient(90deg, #3d4d47 0 14px, #33423c 14px 17px, #465750 17px 31px, #53655d 31px 34px); box-shadow: 0 12px 26px rgba(0,0,0,.7), inset 0 0 0 4px #1e2624, inset 0 0 0 6px #5b6d65; } .win.leshatnik > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.leshatnik .win-body { padding: 0; overflow: hidden; } .ls { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; } .ls-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 16px; padding: 4px 48px 2px 6px; } /* Title — stenciled: white paint with bridges (a mask of strips). */ .ls-title { font: 700 34px/1 var(--f-print); letter-spacing: 5px; text-transform: uppercase; color: #efe9d8; opacity: .93; -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 21px, transparent 21px 22.5px); mask-image: repeating-linear-gradient(90deg, #000 0 21px, transparent 21px 22.5px); transform: rotate(-1deg); } .ls-sub { font: 600 15px/1.2 var(--f-text); color: #d5d9cf; text-shadow: 0 1px 0 rgba(0,0,0,.5); } .ls-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.65fr 1fr; gap: 12px; } .ls-main { min-height: 0; overflow: hidden auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 8px 6px 4px; scrollbar-width: thin; scrollbar-color: #8a968f transparent; } .ls-label { font: 700 14px/1.1 var(--f-print); letter-spacing: 1.2px; text-transform: uppercase; color: #e3e6dc; text-shadow: 0 1px 0 rgba(0,0,0,.5); } .ls-label.debt { color: #ffb2a6; } /* «У стола сейчас» and on the right — how many exits today are still free (when they run out — the price of the next). */ .ls-label.split { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 14px; } .ls-free { font: 600 15px/1.15 var(--f-text); letter-spacing: 0; text-transform: none; color: #ffe9a8; } .ls-free.paid { color: #ffb2a6; } .ls-more { align-self: flex-start; padding: 2px 4px 3px; font: 700 18px/1 var(--f-hand); color: #ffd0c8; text-decoration: underline; text-underline-offset: 3px; } /* You yourself — on a piece of cardboard: face as a photo, rank in marker, a bar to the next rank. */ .ls-me { display: flex; gap: 12px; align-items: center; padding: 9px 14px 10px 10px; color: var(--ink); background: linear-gradient(170deg, rgba(255,255,255,.16), transparent 60%), repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 3px, transparent 3px 7px), #c9a876; box-shadow: 0 3px 6px rgba(0,0,0,.5); transform: rotate(-.4deg); clip-path: polygon(0 3%, 30% 0, 71% 2%, 100% 0, 99.4% 52%, 100% 98%, 62% 100%, 28% 97%, .5% 100%, 0 48%); } .ls-mug { display: block; } .ls-mug.me { flex: none; width: 74px; height: 87px; overflow: hidden; background: linear-gradient(#cfd8d2, #aab6ae); border: 3px solid #faf8f2; box-shadow: 0 0 0 1px #8f7a55, 0 2px 4px rgba(0,0,0,.4); transform: rotate(-3deg); } .ls-me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ls-rank { display: flex; align-items: center; gap: 8px; } .ls-rank b { font: 700 27px/1 var(--f-hand); color: #2b1d0e; } .ls-rank > span:last-child { margin-left: auto; font: 700 21px/1 var(--f-hand); color: var(--pen-red); white-space: nowrap; } .ls-fish-ico { display: inline-block; flex: none; width: 44px; height: 26px; } .ls-fish-ico.inline { width: 30px; height: 18px; margin-right: 4px; vertical-align: -4px; } .ls-bar { position: relative; height: 18px; overflow: hidden; background: rgba(40,26,8,.34); border: 2px solid #2b1d0e; } .ls-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #a52a22, #d63c30); transition: width .6s cubic-bezier(.2,.8,.3,1); } .ls-bar > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 12.5px/1 var(--f-text); color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000; white-space: nowrap; } .ls-me-line { font: 15px/1.15 var(--f-text); color: #3b2c16; } .ls-me-line.gold { font-weight: 700; color: #7a4d00; } .ls-rest { font: 700 19px/1 var(--f-hand); color: var(--pen-red); } /* A rope with clothespins: each card has its own piece of rope, a bit wider than it, — neighbors merge into one per row. A card hangs on a clothespin and is slightly rotated (--r — from the player's number), while the rope stays straight. */ .ls-rope { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 24px 12px; padding: 14px 2px 2px; } .ls-card { position: relative; display: flex; gap: 9px; padding: 13px 9px 9px 8px; background: #ebe5d5; color: var(--ink); box-shadow: 0 3px 6px rgba(0,0,0,.45), inset 0 0 12px rgba(100,78,35,.18); transform: rotate(var(--r, 0deg)); transform-origin: 50% -9px; } .ls-card::before { content: ""; position: absolute; left: -8px; right: -8px; top: -10px; height: 3px; border-radius: 2px; background: repeating-linear-gradient(115deg, #dccca6 0 3px, #a8956b 3px 5px); box-shadow: 0 1px 1px rgba(0,0,0,.5); transform: rotate(calc(var(--r, 0deg) * -1)); } .ls-pin { position: absolute; left: 50%; top: -17px; z-index: 1; width: 11px; height: 28px; margin-left: -5px; border-radius: 2px 2px 1px 1px; background: linear-gradient(90deg, #c69a5a, #e9c88e 45%, #b98a4a); box-shadow: 0 2px 2px rgba(0,0,0,.45); } .ls-pin::after { content: ""; position: absolute; left: -1px; right: -1px; top: 9px; height: 3px; border-radius: 1px; background: #8f9499; } .ls-card.debtor { background: #f2dfd5; box-shadow: 0 0 0 2px #b3221d, 0 3px 6px rgba(0,0,0,.45); } /* Photo: a face to the shoulders; tap — who he is. */ .ls-photo { position: relative; flex: none; align-self: flex-start; width: 86px; height: 101px; padding: 0; overflow: hidden; cursor: pointer; background: linear-gradient(#cfd8d2, #aab6ae); border: 3px solid #faf8f2; box-shadow: 0 0 0 1px #9b958a; } .ls-photo .ls-mug { width: 100%; height: 100%; } .ls-photo:hover { filter: brightness(1.06); } .ls-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ls-name { font: 700 17px/1.1 var(--f-print); letter-spacing: .4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ls-crown { font: 700 15px/1.1 var(--f-hand); color: #7a5a0b; } .ls-signs { font: 15px/1.15 var(--f-text); color: var(--ink-soft); } .ls-fish { display: flex; align-items: center; gap: 5px; font: 600 14.5px/1.1 var(--f-text); color: #2f3d4c; } .ls-fish .ls-fish-ico { width: 34px; height: 20px; } .ls-note { font: 14px/1.15 var(--f-text); color: #6b1d16; } .ls-odds { display: flex; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 3px; font: 14px/1 var(--f-text); color: var(--ink-soft); } .ls-odds b { display: inline-block; padding: 1px 6px 2px; font: 700 20px/1 var(--f-print); letter-spacing: .5px; color: #b3221d; border: 2px solid currentColor; border-radius: 3px; transform: rotate(-4deg); opacity: .9; } .ls-odds.easy b { color: #2f6b2a; } .ls-odds.hard b { color: #6a1410; } /* What's at stake: «Улов: +11 или −9» in marker. */ .ls-stake { font: 700 17px/1.05 var(--f-hand); color: var(--ink-soft); } .ls-stake i { font-style: normal; color: #1f6b2a; } .ls-stake u { text-decoration: none; color: var(--pen-red); } .ls-first { font: 13.5px/1.1 var(--f-text); color: var(--ink-soft); } .ls-go { align-self: stretch; margin-top: 3px; } .ls-empty { padding: 18px 10px; font: 600 18px/1.25 var(--f-text); color: #e3e6dc; text-align: center; } .ls-empty.small { padding: 8px 4px; font-size: 16px; } .ls-foot { margin-top: 2px; font: 15px/1.2 var(--f-text); color: #c9cfc4; } /* Plywood at the side: on two screws, table rows — along the grain. */ .ls-side { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 16px 12px 12px; color: var(--ink); background: radial-gradient(circle at 10px 9px, #4b4640 0 3px, rgba(0,0,0,.25) 3.4px 4.4px, transparent 5px), radial-gradient(circle at calc(100% - 10px) 9px, #4b4640 0 3px, rgba(0,0,0,.25) 3.4px 4.4px, transparent 5px), repeating-linear-gradient(91deg, rgba(120,80,30,.11) 0 2px, transparent 2px 9px, rgba(120,80,30,.07) 9px 10px, transparent 10px 23px), linear-gradient(175deg, #dcc08e, #c9a66b 60%, #bd9658); box-shadow: 0 4px 8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(90,60,20,.35); transform: rotate(.5deg); } /* The plywood tabs stay put, its contents scroll (and from the start — when the tab is switched: app.js, slapUpdate). */ .ls-tabs { flex: none; } .ls-pane { flex: 1; min-height: 0; overflow: hidden auto; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: #8f7448 transparent; } .ls-side .rz-tab { color: #5a4526; } .ls-side .rz-tab.on { color: var(--pen-red); } .ls-side .rz-muted, .ls-side .rz-when, .ls-side .rz-place { color: #5a4526; } .ls-side .rz-line { border-bottom-color: rgba(90,60,20,.3); } .ls-row { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; align-items: center; gap: 2px 6px; width: 100%; padding: 3px 0 4px; text-align: left; font: 16px/1.2 var(--f-text); color: var(--ink); border-bottom: 1px solid rgba(90,60,20,.3); } .ls-row:hover { background: rgba(255,255,255,.14); } .ls-row .ls-fish-ico { width: 30px; height: 18px; } .ls-row.me { color: var(--pen-red); font-weight: 700; } .ls-row.out { opacity: .62; } .ls-row .rz-who i { font: 700 14px/1 var(--f-hand); font-style: normal; color: #7a5a0b; } .ls-won { grid-column: 3 / -1; font: 14px/1.1 var(--f-text); color: #5a4526; } .ls-intro { font-style: italic; color: #4a3a22; } .belt-line { font-weight: 700; color: #7a5a0b; } .short .win.leshatnik { padding: 8px 10px 10px; } .short .ls-title { font-size: 26px; } .short .ls-photo { width: 72px; height: 85px; } .short .ls-mug.me { width: 60px; height: 71px; } .short .ls-rank b { font-size: 23px; } /* Portrait: the gates full width, cards — in a column, the plywood — under them; everything scrolls together. */ .tall .win.leshatnik { padding: 8px 8px 10px; } .tall .win.leshatnik > .win-x { right: -4px; top: -6px; } .tall .ls-head { padding: 4px 46px 0 4px; } .tall .ls-title { font-size: 28px; letter-spacing: 4px; } .tall .ls-sub { font-size: 14px; } .tall .ls-body { display: flex; flex-direction: column; overflow: hidden auto; gap: 14px; scrollbar-width: thin; } .tall .ls-main { overflow: visible; flex: none; padding: 2px 4px 2px 4px; } .tall .ls-rope { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 14px 6px 2px; } .tall .ls-side { overflow: visible; flex: none; transform: none; } .tall .ls-pane { overflow: visible; flex: none; } /* ---------- Slap fights: a first-person fight ---------- The garages under a lamp, a crowd behind; the opponent's face full screen, at the table; on the right your palm — follows the finger and on a swipe passes across the cheek; his palm flies into the face by itself. On the left — name, endurance, slap count; at the bottom — your face as a photo (swells from his slaps) and your endurance. The same frame as the boss fight (.fp), its own parts — .lb-*. */ .lb-scene, .lb-crowd, .lb-crowd i, .lb-crowd b { position: absolute; inset: 0; } .lb-scene { background: #2c3a36 center / cover no-repeat; } .lb-crowd { pointer-events: none; } /* The crowd in three rows, each a whole drawing: a row sways about its feet at its own pace and angle, the back one least, so they slide over one another for the depth; a slap goes through them from the front (app.js slapCheer). Wider than the stage: a turned row shows no edge. */ .lb-crowd i { left: -2%; right: -2%; } .lb-crowd b { background: center top / 100% auto no-repeat; transform-origin: 50% 100%; } .lb-crowd .back { top: 16%; } .lb-crowd .mid { top: 27%; } .lb-crowd .front { top: 42%; } .lb-crowd .front b { background-size: 130% auto; } .lb-crowd .back b { animation: lb-sway-a 5.3s ease-in-out infinite -.7s; } .lb-crowd .mid b { animation: lb-sway-b 4.1s ease-in-out infinite -1.9s; } .lb-crowd .front b { animation: lb-sway-c 3.3s ease-in-out infinite -.4s; } @keyframes lb-sway-a { 0%, 100% { transform: translateX(-.25%) rotate(-.3deg); } 50% { transform: translate(.25%, -.5%) rotate(.3deg); } } @keyframes lb-sway-b { 0%, 100% { transform: translateX(.45%) rotate(.5deg); } 50% { transform: translate(-.45%, -.8%) rotate(-.5deg); } } @keyframes lb-sway-c { 0%, 100% { transform: translateX(-.7%) rotate(-.75deg); } 50% { transform: translate(.7%, -1.2%) rotate(.75deg); } } /* Swipe — across the whole fight screen: the browser doesn't take it for itself (scroll, «back»). */ .lb .fp-world { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; } .lb .fp-world:active { cursor: grabbing; } .lb .fp-side > *, .lb .fp-me, .lb .fp-log, .lb .fp-hint { pointer-events: none; } /* No shadow filters on the face and palms: drop-shadow on a live SVG was redrawn every frame and ate half of the thread. */ .lb-foe { left: 47%; bottom: 6%; height: 95%; aspect-ratio: 400 / 470; cursor: inherit; touch-action: none; } /* The table you stand behind: a board at the bottom, over the opponent, under the palm. */ .lb-table { position: absolute; left: -2%; right: -2%; bottom: 0; z-index: 1; height: 9%; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 48px), linear-gradient(#8a623a, #5a3d21); border-top: 5px solid #b98a55; box-shadow: 0 -6px 14px rgba(0,0,0,.55), inset 0 6px 8px rgba(0,0,0,.25); } /* An arrow hint across the face, while you haven't given your own slap in this fight yet. */ .lb-ghost { position: absolute; left: 47%; top: 52%; z-index: 3; width: 170px; height: 50px; margin: -25px 0 0 -85px; opacity: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 50'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M158 25H26M44 8L16 25l28 17' stroke='%2316130e' stroke-width='14'/%3E%3Cpath d='M158 25H26M44 8L16 25l28 17' stroke='%23fff3b0' stroke-width='7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } .lb.mine.fresh .lb-ghost { animation: lb-ghost 1.5s ease-in-out infinite; } @keyframes lb-ghost { 0% { transform: translateX(48%); opacity: 0; } 22%, 68% { opacity: .95; } 100% { transform: translateX(-48%); opacity: 0; } } /* Your palm: the arm of every fight (the frame of fist/ and forearm/) with an open hand: the palm center stands at the point 80 % × 80 % of the screen (the same numbers — SLAP_HOME in app.js), the forearm goes past the bottom edge. The shift after the finger and the slap itself — transform from app.js, rotation — around the palm center. */ .lb-hand { position: absolute; left: 80%; top: 80%; z-index: 2; height: 160%; aspect-ratio: 4 / 5; translate: -27.5% -37%; transform-origin: 27.5% 37%; pointer-events: none; will-change: transform; } .lb-hand.left { left: 20%; } /* the mirrored arm's corner (app.js slapSide, SLAP_HOME) */ .lb-hand-side { position: absolute; inset: 0; transform-origin: 27.5% 37%; transition: transform .09s ease-out; } .lb-hand.left .lb-hand-side { transform: scaleX(-1); } /* The hand by the frame of the slap: ready, cupped; thrown back while the finger is down, its palm kept under the finger. */ .lb-hand .art.cock, .lb-hand.windup .art.rest { visibility: hidden; } .lb-hand.windup .art.cock { visibility: visible; } .lb-hand.windup .lb-hand-side { translate: -14.5% 0; } .lb-hand.left.windup .lb-hand-side { translate: 14.5% 0; } .lb-hand-breathe { position: absolute; inset: 0; transform-origin: 90% 95%; animation: fp-breathe 3.8s ease-in-out infinite; } .lb-hand .art, .lb-his .art { position: absolute; inset: 0; width: 100%; height: 100%; } .lb-hand .art.sleeve { z-index: 2; } .lb-his.left .art { transform: scaleX(-1); } .lb.mine .lb-hand-breathe { animation: lb-ready 1s ease-in-out infinite; } /* your slap: the palm begs to get to work */ @keyframes lb-ready { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg) translateY(-2%); } } .lb.done .lb-hand-breathe { animation: none; } /* His palm: flies into the face from behind his shoulder — appears, grows and goes past the edge (app.js, slapHis). */ .lb-his { position: absolute; left: 50%; top: 46%; z-index: 3; height: 78%; aspect-ratio: 4 / 5; translate: -50% -45%; opacity: 0; pointer-events: none; } .lb .fp-stamp { top: 30%; } .fp-stamp.lb-grey { color: #efe9d8; border-color: #efe9d8; background: rgba(20,20,20,.4); } .lb .fp-wins { color: #ffd27a; } /* Slap count: five circles each, the given ones — filled. */ .lb-pips { align-self: flex-start; display: flex; flex-direction: column; gap: 5px; padding: 6px 10px 7px; background: rgba(16,18,20,.84); border: 2px solid #000; box-shadow: 0 2px 6px rgba(0,0,0,.5); } .lb-pip-row { display: flex; align-items: center; gap: 4px; font: 700 12px/1 var(--f-print); letter-spacing: .6px; text-transform: uppercase; color: #cfd2c8; white-space: nowrap; } .lb-pip-row span { width: 78px; } .lb-pip-row i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #8b9088; } .lb-pip-row i.on { background: #f2c230; border-color: #f2c230; } .lb-pip-row.foe i.on { background: #d63c30; border-color: #d63c30; } /* Your face — as a photo above your endurance: it jerks and swells from his slaps. */ .lb-self { position: absolute; left: 12px; bottom: 40px; z-index: 5; width: 66px; height: 78px; overflow: hidden; pointer-events: none; background: linear-gradient(#cfd8d2, #aab6ae); border: 3px solid #faf8f2; box-shadow: 0 3px 6px rgba(0,0,0,.6); transform: rotate(-4deg); } .lb-self.hit { animation: lb-self-hit .5s ease-out; } @keyframes lb-self-hit { 0%, 100% { transform: rotate(-4deg); filter: none; } 20% { transform: rotate(-12deg) scale(1.18); filter: brightness(1.45) saturate(1.5); } } /* Judge: who took off how much — as a sheet in the middle of the screen, when both withstood. */ .lb-judge { position: absolute; right: 78px; top: 16px; z-index: 5; min-width: 200px; padding: 9px 16px 10px; text-align: center; font: 600 17px/1.25 var(--f-text); box-shadow: 0 4px 10px rgba(0,0,0,.6); transform: rotate(1.5deg); pointer-events: none; } .lb-judge b { display: block; margin-bottom: 3px; font: 700 13px/1.1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; color: #6b1d16; } .lb-judge .good { font-weight: 700; color: #1f6b2a; } .lb-judge .bad { font-weight: 700; color: var(--pen-red); } .lb.done .fp-world { cursor: pointer; } .short .lb-judge { display: none; } /* low screen: the sheet would cover the stamp, and the buddy will say the same */ /* Spray from under the palm (lives outside the scene, like flying numbers: grows via --s). */ .lb-spit { position: fixed; z-index: 26; width: calc(7px * var(--s) * var(--k, 1)); height: calc(7px * var(--s) * var(--k, 1)); margin: calc(-3.5px * var(--s)) 0 0 calc(-3.5px * var(--s)); border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 30%, #fff, #bfe3f5 60%, #7fb8d6); box-shadow: 0 0 0 1px rgba(0,0,0,.35); } @media (prefers-reduced-motion: reduce) { .lb-crowd b, .lb-hand-breathe, .lb.mine .lb-hand-breathe, .lb-self.hit { animation: none; } .lb.mine.fresh .lb-ghost { animation: none; opacity: .9; } } /* Portrait: name, endurance and slap count — on top, the face — under them full width, the palm — below the face on the right, your photo — on the left above your endurance. */ .tall .lb-crowd .back { top: 26%; } .tall .lb-crowd .mid { top: 31%; } .tall .lb-crowd .front { top: 36%; } .tall .lb-crowd .back b { background-size: auto 56%; } .tall .lb-crowd .mid b { background-size: auto 58%; } .tall .lb-crowd .front b { background-size: auto 78%; } .tall .lb-foe { left: 50%; top: var(--fp-top, 150px); bottom: auto; height: min(calc(100% - var(--fp-top, 150px) - 112px), 136cqw); } .tall .lb-hand { left: 76%; top: 86%; height: auto; width: 110cqw; } .tall .lb-hand.left { left: 24%; } .tall .lb-his { top: 50%; height: auto; width: 62cqw; } .tall .lb-table { height: 7%; } .tall .lb .fp-stamp { top: calc(var(--fp-top, 150px) + 20%); font-size: 36px; white-space: nowrap; } .tall .lb-ghost { left: 50%; top: calc(var(--fp-top, 150px) + 38%); } .tall .lb-judge { right: auto; left: 50%; top: 66%; transform: translate(-50%, -50%) rotate(1.5deg); } .tall .lb-pips { flex-direction: row; align-self: stretch; justify-content: space-between; gap: 10px; padding: 6px 9px; } .tall .lb-pip-row span { width: auto; margin-right: 3px; } .tall .lb-self { left: 8px; bottom: 42px; width: 56px; height: 66px; } .tall .lb .fp-log { bottom: 116px; } .tall .lb .fp-hint { left: calc(50% + 32px); } @container (max-height: 640px) { .tall .lb-judge { display: none; } } /* ---------- bigger icons (owner: small on PC) and the phone in the header as a tag ---------- */ .hud-phone { position: relative; width: auto; height: auto; display: flex; align-items: center; gap: 6px; padding: 3px 12px 4px 6px; color: var(--ink); transform: rotate(-1.5deg); filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); } .hud-phone::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); box-shadow: inset 0 0 12px rgba(100,78,35,.3); clip-path: polygon(0 4%, 55% 0, 100% 3%, 99% 96%, 45% 100%, 1% 97%); } .hud-phone:hover { filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)) brightness(1.05); } .hud-phone:active { translate: 0 2px; } .hud-phone .icon { width: 38px; height: 38px; filter: none; } .hud-phone-label { font: 700 16px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; } .hud-phone em { right: -8px; top: -7px; min-width: 20px; height: 20px; font-size: 15px; } /* The stash and the phone right after the free space, as if still in it: the header's gap taken back. */ .hud-kit { flex: none; display: flex; align-items: center; margin-left: -12px; padding-right: 6px; } .short .hud-phone-label { display: none; } .short .hud-phone { padding: 3px 8px 4px 6px; } /* ---------- day tasks: a tear-off calendar ---------- A tear-off calendar sheet on a nail (system 12): a cardboard with a nail hole, a sheet with perforation along the top; on the left a stamp — the month in red, a big number, day of the week, sunrise and sunset; on the right in blue pen — the jobs, done ones crossed out, the reward circled in red pen; at the bottom in small print the tip of the day, under the sheet — a stack of the next ones. All done with markup. */ .win.kalendar { max-width: 760px; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; filter: drop-shadow(0 14px 20px rgba(0,0,0,.65)); } .win.kalendar > .win-x { position: absolute; right: -14px; top: 6px; z-index: 5; } .win.kalendar .win-body { padding: 14px 4px 4px; overflow: visible; } .kal { position: relative; transform: rotate(-.6deg); } .kal-nail { position: absolute; left: 50%; top: -9px; z-index: 3; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e2e2e2, #777 55%, #2c2c2c); box-shadow: 0 3px 3px rgba(0,0,0,.6); } .kal-pad { position: relative; padding: 16px 9px 0; border-radius: 3px; background: linear-gradient(#6d4b2f, #573b24); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 6px rgba(0,0,0,.35); } .kal-pad::before { content: ""; position: absolute; left: 50%; top: 3px; width: 18px; height: 9px; margin-left: -9px; border-radius: 9px; background: #1e140c; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); } .kal-sheet { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 14px; padding: 10px 14px 8px; color: var(--ink); background: #f4f0e3 linear-gradient(180deg, rgba(90,70,30,.08), transparent 14%); box-shadow: inset 0 0 18px rgba(100,78,35,.18); /* the sheet's top — perforation: that is where it will be torn off tomorrow */ -webkit-mask: radial-gradient(circle 2.6px at 50% 0, transparent 96%, #000) 0 0 / 10px 100% repeat-x; mask: radial-gradient(circle 2.6px at 50% 0, transparent 96%, #000) 0 0 / 10px 100% repeat-x; } .kal-print { display: flex; flex-direction: column; align-items: center; text-align: center; padding-right: 12px; border-right: 1px dashed rgba(29,27,23,.25); } .kal-month { display: flex; align-items: center; gap: 7px; font: 700 15px/1 var(--f-print); letter-spacing: 3px; text-transform: uppercase; color: var(--pen-red); } .kal-month i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .kal-day { margin-top: 1px; font: 700 100px/.92 var(--f-print); letter-spacing: -3px; color: #1d1b17; } .kal-day.red, .kal-wday.red { color: var(--pen-red); } .kal-wday { font: 700 16px/1 var(--f-print); letter-spacing: 2.5px; text-transform: uppercase; } .kal-sun { margin-top: 5px; font: 12.5px/1.1 var(--f-text); color: var(--ink-soft); white-space: nowrap; } .kal-sun + .kal-sun { margin-top: 2px; } .kal-hand { --pen: #22408f; min-width: 0; padding-top: 1px; color: var(--pen); transform: rotate(-.8deg); } .kal-title { font: 700 26px/1 var(--f-hand); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } .kal-title::first-letter { text-transform: uppercase; } .kal-list { margin: 6px 0 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 3px; } .kal-task { font: 700 18px/1.06 var(--f-hand); transform: rotate(var(--tilt, 0deg)); } .kal-task::marker { font: 700 19px var(--f-hand); color: var(--pen); } .kal-task.done .kal-text { color: rgba(34,64,143,.62); text-decoration: line-through; text-decoration-color: rgba(34,64,143,.9); text-decoration-thickness: 2px; } .kal-count, .kal-tick { margin-left: 8px; white-space: nowrap; font: 700 18px/1 var(--f-hand); color: #6f6c66; } .kal-tick { font-size: 22px; color: #1f6b2a; } .kal-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 4px 0 2px; } .kal-note { font: 700 17px/1 var(--f-hand); color: var(--pen-red); } .kal-note.took { margin-left: 8px; color: #1f6b2a; } .kal-act { position: relative; padding: 3px 11px 5px; font: 700 20px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-2deg); } .kal-act.small { margin-left: 8px; padding: 1px 9px 3px; font-size: 16px; } .kal-act::after { content: ""; position: absolute; inset: -2px -6px; border: 2.5px solid rgba(184,36,26,.85); pointer-events: none; border-radius: 50% 46% 52% 48% / 58% 46% 54% 42%; transform: rotate(2.5deg); } .kal-act:hover { filter: brightness(1.25); } .kal-act:active { translate: 0 2px; } .kal-legend { margin-top: 6px; font: 700 15px/1.1 var(--f-hand); color: #6f6c66; } /* VIP's «Переписать дело» (decision 94): armed, the undone tasks are buttons underlined in red pen */ .kal-text.pick { padding: 0; font: inherit; color: inherit; text-align: left; text-decoration: underline 2px dashed rgba(184,36,26,.85); text-underline-offset: 4px; cursor: pointer; } .kal-redo-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; color: #7a5208; } /* the whole sheet and the week without a gap: one line in pen under the legend */ .kal-whole { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: 5px; padding-top: 5px; border-top: 1.5px solid rgba(34,64,143,.35); font: 700 17px/1 var(--f-hand); } .kal-all, .kal-week { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex: none; } .kal-whole b { font-weight: 700; color: var(--pen-red); } .kal-whole b.took { color: #1f6b2a; } .kal-all .kal-act.small { margin-left: 2px; } .kal-boxes { display: inline-flex; gap: 3px; } /* a box drawn by hand: uneven corners; a whole sheet crosses it out with two pen strokes */ .kal-boxes i { position: relative; width: 15px; height: 15px; border: 1.8px solid var(--pen); border-radius: 2px 3px 2px 4px; transform: rotate(var(--r, -3deg)); } .kal-boxes i:nth-child(2n) { --r: 2deg; } .kal-boxes i:nth-child(3n) { --r: -1deg; } .kal-boxes i.on::before, .kal-boxes i.on::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2.2px; margin-top: -1px; border-radius: 2px; background: var(--pen); transform: rotate(45deg); } .kal-boxes i.on::after { transform: rotate(-45deg); } .kal-tip { grid-column: 1 / -1; margin-top: 9px; padding-top: 5px; border-top: 1px solid rgba(29,27,23,.2); font: italic 12.5px/1.25 var(--f-news); color: #3d3a33; } /* landscape: the tip under the stamp, in the free space of the left column */ .kal-print .kal-tip { grid-column: auto; margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(29,27,23,.2); text-align: left; font-size: 11.5px; line-height: 1.22; white-space: normal; } .kal-print .kal-tip b { display: block; margin-bottom: 2px; } .kal-tip b { font: 700 11px/1 var(--f-print); letter-spacing: .6px; text-transform: uppercase; } /* a stack of the next sheets — edge-on under this one */ .kal-stack { height: 10px; margin: 0 -1px; border-radius: 0 0 2px 2px; background: repeating-linear-gradient(180deg, #ebe6d6 0 2px, #cbc3ad 2px 3px); } .task-news { color: #22408f; } .short .kal-day { font-size: 76px; } .short .kal-task { font-size: 17px; } .short .kal-list { gap: 2px; } /* a job from the calendar sheet in the newspaper — circled in red pen */ .job-today { justify-self: start; padding: 1px 8px 2px; font: 700 16px/1 var(--f-hand); color: var(--pen-red); white-space: nowrap; border: 2px solid rgba(184,36,26,.8); border-radius: 46% 54% 48% 52% / 60% 45% 55% 40%; transform: rotate(-1.5deg); } /* portrait: the sheet is narrow — the stamp above the jobs, as on a real tear-off calendar (app.js, kalPrintTall: sunrise and sunset at the sides of the number), jobs in pen full width; the cross — on the cardboard's corner, inside the screen; doesn't fit in height — the sheet scrolls inside the window */ .tall .win.kalendar { padding: 0; gap: 0; } .tall .win.kalendar > .win-x { right: -2px; top: -4px; } .tall .win.kalendar .win-body { padding: 18px 4px 4px; overflow-x: hidden; overflow-y: auto; } .tall .kal-sheet { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 8px; } .tall .kal-print { padding: 0 0 8px; border-right: 0; border-bottom: 1px dashed rgba(29,27,23,.25); } .tall .kal-face { display: flex; align-items: center; justify-content: center; gap: 10px; align-self: stretch; } .tall .kal-face .kal-sun { flex: 1 1 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 13px/1 var(--f-print); letter-spacing: 1.5px; text-transform: uppercase; } .tall .kal-face .kal-sun b { font: 700 21px/1 var(--f-print); letter-spacing: 0; color: var(--ink); } .tall .kal-day { font-size: 96px; } .tall .kal-sun { font-size: 14px; } .tall .kal-hand { padding-top: 10px; } .tall .kal-task { font-size: 21px; } .tall .kal-act { min-height: 36px; padding: 6px 12px 7px; } .tall .kal-act.small { padding: 5px 10px 6px; } .tall .kal-legend { font-size: 17px; } .tall .kal-whole { font-size: 18px; gap: 8px 18px; } .tall .kal-tip { font-size: 14px; } .tall .kal-tip b { font-size: 13px; } /* portrait on a low screen: on a phone the portrait scene is 420 wide, its height is 420 × screen height / width, so it is low exactly when the screen is no narrower than 21:41 (Telegram not fullscreen, a 16:9 phone; a tablet and a narrow PC window land here too — denser doesn't hurt them). There the sheet is denser — a smaller number, smaller gaps, — so that three long jobs, «забрать» and the tip of the day fit without scrolling. */ @media (min-aspect-ratio: 21/41) { .tall .win.kalendar .win-body { padding-top: 14px; } .tall .kal-pad { padding-top: 14px; } .tall .kal-sheet { padding: 9px 14px 6px; } .tall .kal-day { font-size: 80px; } .tall .kal-print { padding-bottom: 6px; } .tall .kal-hand { padding-top: 6px; } .tall .kal-list { margin-top: 5px; gap: 3px; } .tall .kal-pick { margin: 2px 0 0; } .tall .kal-legend { margin-top: 6px; } .tall .kal-tip { margin-top: 6px; padding-top: 4px; } } /* doesn't fit anyway (the window is very low) — the sheet's bottom fades at the window edge: you can see it goes on; scrolled to the end — the edge is sharp. This is an animation by the window's own scroll: while there is nothing to scroll, it isn't there. */ @supports (animation-timeline: scroll()) { .tall .win.kalendar .win-body { animation: kal-more linear both; animation-timeline: scroll(self); } } @keyframes kal-more { 0%, 96% { -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent); } 100% { -webkit-mask-image: none; mask-image: none; } } /* ---------- crew: HQ (owner's choice 2026-09-30 from three probes, docs/probes/besedka.html) ---------- The owner: «еле читаемый… сделать удобно-современно под игровой UI и при этом стильно в жаргоне игры». A dark panel, like the game header: everything that is read — light on dark and big. In landscape on the left — the panel (.cr-bar: crest with tag, respect and buzz meeting in masking tape, obshchak, tabs — tin plates, like the player window), on the right — the tab contents (.win-body). In portrait the panel falls apart (display: contents): header on top, tabs at the bottom, under the big thumb. Section headings — on a piece of tape, cards — slightly lighter than the panel, buttons — the game's tin plates (.btn), what is burning — a red circle. */ .win.shtab { max-width: 1060px; height: 100%; max-height: 660px; padding: 0; gap: 0; display: grid; grid-template-columns: 252px minmax(0, 1fr); color: #efe9dc; } .win.shtab > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.shtab .win-bar { margin: 0; } .win.shtab .win-bar + .win-body { margin-top: 0; } .win.shtab .win-body { container-type: inline-size; padding: 14px 18px 18px; gap: 12px; scrollbar-color: #6b655a transparent; } .win.shtab .win-body::-webkit-scrollbar-thumb { background: #6b655a; } .cr-bar { min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; background: rgba(0,0,0,.3); border-right: 2px solid #000; overflow-y: auto; scrollbar-width: none; } .cr-bar::-webkit-scrollbar { display: none; } .cr-top { display: flex; flex-direction: column; gap: 9px; } /* The crew name — on a blue enamel street sign, the tag — on a house-number plate next to it (from the «Беседка» probe): a white border inside, a glint, screws at the edges. Under the name in small print — level and slots: in landscape in two lines, in portrait in one. */ .cr-plates { display: flex; align-items: stretch; gap: 8px; min-width: 0; } .cr-sign, .cr-num { position: relative; border-radius: 7px; background: #1f4c96; color: #fff; box-shadow: inset 0 0 0 3px #1f4c96, inset 0 0 0 5px #f4f3ee, 0 3px 0 rgba(0,0,0,.5), 0 6px 12px rgba(0,0,0,.4); } .cr-sign::after, .cr-num::after { content: ""; position: absolute; inset: 0; border-radius: 7px; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.2), transparent 45%); } .cr-sign { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 7px 18px 8px; } .cr-sign-name { font: 700 19px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: 1px; overflow-wrap: break-word; } .cr-sign-sub { display: flex; flex-direction: column; font: 13px/1.15 var(--f-text); color: #d7e2f7; } /* a long name (up to 20 letters) in landscape — smaller: fits the panel in two lines, not three */ .cr-sign.long .cr-sign-name { font-size: 16px; } .tall .cr-sign.long .cr-sign-name { font-size: 18px; } .cr-num { flex: none; min-width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 10px; } .cr-num b { font: 700 20px/1 var(--f-print); letter-spacing: 1px; } .cr-num small { margin-top: 4px; font: 11px/1 var(--f-text); color: #d7e2f7; letter-spacing: .3px; } .cr-scw { position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2eee5, #938d80 55%, #4a463f); box-shadow: 0 1px 1px rgba(0,0,0,.5); } .cr-scw.l { left: 7px; } .cr-scw.r { right: 7px; } .cr-num .cr-scw { top: 8px; margin-top: 0; } /* the first letters of another crew in a list — a dark square */ .cr-initials { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 3px; transform: rotate(-2deg); font: 700 15px/1 var(--f-print); letter-spacing: 1px; color: #b3ab9c; background: #2a251d; box-shadow: inset 0 0 0 2px #3d3529, 0 3px 0 #000; } /* respect and buzz meeting — masking tape with a bar, as in the header */ .cr-stats { display: flex; flex-direction: column; gap: 8px; } .cr-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cr-stat-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 700 12.5px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; color: #b9b2a2; } .cr-stat-h b { font: 700 18px/1 var(--f-hand); color: #efe9dc; letter-spacing: 0; text-transform: none; white-space: nowrap; } .cr-stat-f { font: 13.5px/1.2 var(--f-text); color: #9a9486; } .cr-tape { position: relative; height: 18px; background: #d9cca6; clip-path: polygon(0 8%, 100% 0, 99% 92%, 1% 100%); } .cr-tape i { position: absolute; inset: 0 auto 0 0; opacity: .85; } .cr-tape.xp i { background: #6da6e8; } .cr-tape.buzz i { background: #e2533f; } .cr-tape span { position: relative; display: block; padding: 0 4px; text-align: center; color: #16130e; font: 700 16px/18px var(--f-hand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-segs { display: grid; gap: 5px; } /* obshchak — a tin, caption on top, the sum in marker and «Закинуть» under it; tap on the whole — put in */ .cr-bank { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; padding: 7px 8px 8px 6px; text-align: left; background: #221e18; border: 1px solid #0b0a08; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .cr-bank:hover { background: #29241d; } .cr-bank .icon { grid-row: 1 / span 2; width: 40px; height: 40px; } .cr-bank small { grid-column: 2 / span 2; font: 700 12.5px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; color: #b9b2a2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-bank b { grid-column: 2; min-width: 0; font: 700 25px/1 var(--f-hand); color: #efe9dc; white-space: nowrap; } .cr-bank em { grid-column: 3; padding: 5px 8px; font: normal 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; color: #17150f; background: #f2c230; border-radius: 2px; box-shadow: 0 2px 0 #8a6a0c; } /* tabs — tin plates, the selected one — yellow (as in the player window) */ /* Five plates since «Сундук бригады» (2026-11-03): a little lower each, so the panel stays as tall as it was with four. */ .cr-nav { display: flex; flex-direction: column; gap: 5px; margin-top: auto; } .cr-tab { position: relative; display: flex; align-items: center; gap: 10px; min-height: 28px; padding: 2px 12px 2px 8px; text-align: left; background: #1f2326; color: #d6d9d2; box-shadow: inset 0 0 0 2px #0f1112, 0 3px 0 #000; font: 700 16px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.3px; } .cr-tab:hover { color: #fff; } .cr-tab.on { background: #f2c230; color: #1a1a14; box-shadow: inset 0 0 0 2px #b58f16, 0 3px 0 #6d560d; } .cr-tab-art { flex: none; width: 26px; height: 26px; } .cr-tab em { margin-left: auto; font-style: normal; } .cr-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #000; } .cr-cnt { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 11px; background: var(--red); color: #fff; font: 700 14px/1 var(--f-text); letter-spacing: 0; box-shadow: 0 0 0 2px #000; } /* tab contents: two columns (the narrow one — one: container query below) */ .cr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 262px; gap: 18px; align-items: start; } .cr-cols.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cr-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; } .cr-head { display: flex; align-items: center; gap: 10px; min-height: 30px; } .cr-head-t { flex: none; padding: 4px 12px 5px; background: #d9cca6; color: #16130e; font: 700 16px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.5px; transform: rotate(-1deg); clip-path: polygon(1% 5%, 99% 0, 100% 50%, 98.5% 100%, 0 93%, .8% 50%); } .cr-head-s { min-width: 0; font: 15px/1.2 var(--f-text); color: #b9b2a2; } .cr-head .btn { margin-left: auto; } .cr-sub-h { font: 700 13px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: 1.3px; color: #b9b2a2; } .cr-card { display: flex; flex-direction: column; gap: 9px; padding: 12px 13px 13px; background: #211d17; border: 1px solid #0b0a08; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .cr-card.hot { border-color: #7d211c; box-shadow: inset 0 0 0 1px #7d211c; } .cr-card.invite { background: #2b2412; border-color: #6d560d; box-shadow: inset 0 0 0 1px #6d560d; } .cr-card-h { display: flex; align-items: center; gap: 8px; font: 700 15px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: 1.3px; color: #f2c230; } .cr-text { font: 15.5px/1.3 var(--f-text); color: #ddd7ca; } .cr-note { font: 14px/1.3 var(--f-text); color: #9f998b; } .cr-why { font: 700 18px/1.15 var(--f-hand); color: #ff8e7e; } .cr-btns { display: flex; flex-wrap: wrap; gap: 9px; } .cr-btns.col { flex-direction: column; align-items: stretch; } .cr-btns .btn.grow { flex: 1 1 0; } .cr-btn-n { opacity: .75; } .cr-more { align-self: flex-start; padding: 2px 0; font: 700 15px/1.2 var(--f-text); color: #f2c230; text-decoration: underline; text-underline-offset: 3px; } .btn.cr-danger { align-self: flex-start; background: transparent; color: #ff8e7e; box-shadow: inset 0 0 0 2px #7d211c, 0 3px 0 #000; } /* players as rows: a circle, nick, role and level, buzz, send a gift */ .cr-mems { display: flex; flex-direction: column; border-top: 1px solid #2d281f; } .cr-man { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 6px; border-bottom: 1px solid #2d281f; cursor: pointer; } @media (hover: hover) { .cr-man:hover { background: rgba(255,255,255,.035); } } .cr-man:active { background: rgba(255,255,255,.05); } .cr-man.me { background: rgba(242,194,48,.07); } .cr-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 19px/1 var(--f-print); text-transform: uppercase; color: #15120c; background: hsl(var(--hue, 40) 38% 64%); box-shadow: 0 0 0 2px #000, 0 0 0 3.5px #d9cca6; } .cr-ava.ghost { background: transparent; color: #8f897c; box-shadow: inset 0 0 0 2px #4a443a; font: 400 24px/1 var(--f-text); } .cr-man-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .cr-man-name { display: flex; align-items: baseline; gap: 7px; min-width: 0; font: 700 18px/1.1 var(--f-text); color: #f4efe4; } .cr-man-nick { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-you { flex: none; font: 700 16px/1 var(--f-hand); color: #ff8e7e; } .cr-man-sub { display: flex; align-items: center; gap: 7px; min-width: 0; font: 14.5px/1.15 var(--f-text); color: #aaa396; white-space: nowrap; overflow: hidden; } .cr-role { flex: none; padding: 2px 6px; border-radius: 2px; font: 700 11px/1.2 var(--f-print); text-transform: uppercase; letter-spacing: 1px; } .cr-role.leader { background: #d63c30; color: #fff; } .cr-role.right { background: #f2c230; color: #17140f; } .cr-man-stat { min-width: 52px; text-align: right; } .cr-man-stat b { display: block; font: 700 21px/1 var(--f-hand); } .cr-man-stat small { font: 11.5px/1 var(--f-text); color: #8f897c; text-transform: uppercase; letter-spacing: .8px; } .cr-gifts { display: flex; gap: 6px; min-width: 82px; justify-content: flex-end; } .cr-gift { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 4px; background: #2a251d; box-shadow: inset 0 0 0 1.5px #3d3529, 0 2px 0 #000; } .cr-gift .icon { width: 26px; height: 26px; } @media (hover: hover) { .cr-gift:hover { background: #342d23; } } .cr-gift:active { translate: 0 1px; } .cr-gift.done { background: transparent; box-shadow: inset 0 0 0 1.5px #2d281f; pointer-events: none; } .cr-gift.done .icon { opacity: .35; filter: grayscale(.6); } .cr-gift.done::after { content: ""; position: absolute; right: 3px; bottom: 6px; width: 11px; height: 6px; border: solid #4fb45a; border-width: 0 0 3px 3px; transform: rotate(-45deg); } .cr-man.free { cursor: pointer; } .cr-man.free .cr-man-name { color: #cfc8b9; } /* applications — right in the card: accept or decline */ .cr-app { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid #2d281f; } .cr-app-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cr-app-who b { font: 700 17px/1.1 var(--f-text); overflow-wrap: anywhere; } .cr-app-who span { font: 14px/1.1 var(--f-text); color: #aaa396; } /* perks: the obshchak on top, perk cards — in two columns */ .cr-bank-big { display: flex; align-items: center; gap: 12px; } .cr-bank-big .icon { width: 52px; height: 52px; } .cr-bank-big b { flex: 1; min-width: 0; font: 700 38px/1 var(--f-hand); } .cr-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cr-perk { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px 12px; background: #211d17; border: 1px solid #0b0a08; border-radius: 3px; } .cr-perk.ready { box-shadow: inset 0 0 0 1.5px #f2c230; } .cr-perk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cr-perk-name { min-width: 0; font: 700 17px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; } .cr-perk.on .cr-perk-name { color: #9fe0a2; } .cr-pips { display: flex; flex: none; gap: 4px; } .cr-pips i { width: 15px; height: 9px; transform: skewX(-14deg); background: #3a3428; } .cr-pips i.on { background: #6cc46f; } .cr-perk-got { flex: none; padding: 3px 6px; border-radius: 2px; font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: #17140f; background: #6cc46f; } .cr-perk-now { font: 15.5px/1.25 var(--f-text); color: #9fe0a2; } .cr-perk-next { font: 15.5px/1.25 var(--f-text); color: #ddd7ca; } .cr-perk-next em { font-style: normal; color: #9f998b; } .cr-perk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; min-height: 32px; } .cr-perk-lock { min-width: 0; font: 14.5px/1.2 var(--f-text); color: #a8a194; } .cr-perk-cost { flex: none; font: 700 19px/1 var(--f-hand); white-space: nowrap; } /* showdowns: the month's rating, points in the city, stenkas and capts as rows */ .cr-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cr-chip { padding: 3px 10px 4px; background: #221e18; border: 1px solid #0b0a08; border-radius: 2px; font: 700 15px/1.3 var(--f-text); } .cr-chip b { margin-right: 4px; font: 700 19px/1 var(--f-hand); color: #f2c230; } .cr-pts { display: flex; flex-wrap: wrap; gap: 6px; } .cr-pt { display: flex; align-items: center; gap: 6px; padding: 4px 10px 5px 6px; background: #221e18; border: 1px solid #0b0a08; border-radius: 2px; } .cr-pt b { font: 700 15.5px/1.1 var(--f-text); } .cr-pt small { font: 13.5px/1.1 var(--f-text); color: #aaa396; } .cr-flag { flex: none; width: 12px; height: 16px; background: #f2c230; clip-path: polygon(0 0, 100% 15%, 0 60%); box-shadow: inset 2px 0 0 #6d560d; } .cr-fight { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 13px; background: #211d17; border: 1px solid #0b0a08; border-radius: 3px; } .cr-fight.hot { background: #3d1612; border-color: #7d211c; } .cr-fight-when b { display: block; font: 700 29px/1 var(--f-hand); } .cr-fight-when small { font: 12.5px/1.2 var(--f-text); color: #aaa396; text-transform: uppercase; letter-spacing: .8px; } .cr-fight-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cr-fight-what { font: 700 18px/1.2 var(--f-text); overflow-wrap: anywhere; } .cr-fight-kind { display: inline-block; margin-right: 7px; padding: 2px 6px; border-radius: 2px; background: #d63c30; color: #fff; font: 700 11.5px/1.2 var(--f-print); letter-spacing: 1px; text-transform: uppercase; vertical-align: 2px; } .cr-fight-status { font: 15.5px/1.25 var(--f-text); color: #ddd7ca; } .cr-fight.hot .cr-fight-status { color: #ffb4a8; font-weight: 700; } .cr-fight-note { font: 14px/1.25 var(--f-text); color: #9f998b; overflow-wrap: anywhere; } .cr-fight-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } /* HQ: a memo */ .cr-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font: 15px/1.3 var(--f-text); color: #ddd7ca; } .cr-rules b { font: 700 17px/1 var(--f-hand); color: #f2c230; } /* no crew of your own: crews in the district as rows, search */ .cr-search { display: flex; gap: 8px; align-items: center; } .cr-search input { flex: 1; min-width: 0; padding: 7px 10px; font: 16px/1.2 var(--f-text); color: #efe9dc; background: #0f0d0a; border: 1.5px solid #3d3529; border-radius: 3px; outline: none; user-select: text; } .cr-search input:focus { border-color: #b58f16; } .cr-list { display: flex; flex-direction: column; border-top: 1px solid #2d281f; } .cr-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #2d281f; } .cr-row-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .cr-row-name { font: 700 18px/1.1 var(--f-text); overflow-wrap: anywhere; } .cr-row-chat { margin-left: 7px; padding: 1px 5px; border-radius: 2px; font: 700 11px/1.2 var(--f-print); text-transform: uppercase; letter-spacing: 1px; vertical-align: 2px; color: #17140f; background: #d9cca6; } .cr-row-meta { font: 14.5px/1.2 var(--f-text); color: #aaa396; } /* player card (on a sheet, like all cards): a circle and nick, three numbers as plates */ .cr-mc-head { display: flex; align-items: center; gap: 12px; } .cr-mc-head .cr-ava { width: 46px; height: 46px; font-size: 21px; box-shadow: 0 0 0 2px var(--ink); } .cr-mc-head .big-title, .tall .cr-mc-head .big-title { text-align: left; } .cr-mc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 4px; } .cr-mc-stats div { padding: 7px 8px 6px; border-radius: 2px; background: rgba(0,0,0,.06); box-shadow: inset 0 0 0 1px rgba(29,27,23,.25); } .cr-mc-stats b { display: block; font: 700 21px/1 var(--f-hand); white-space: nowrap; } .cr-mc-stats span.icon.inline { width: 1.15em; height: 1.15em; vertical-align: -0.2em; } .cr-mc-stats small { font: 12.5px/1.15 var(--f-text); color: var(--ink-soft); } /* narrow contents (tablet in landscape not fullscreen, portrait) — in one column */ @container (max-width: 460px) { div.ch-cols { grid-template-columns: minmax(0, 1fr); } /* div: the chest's own rule stands lower in the file */ } @container (max-width: 620px) { .cr-cols, .cr-cols.even { grid-template-columns: minmax(0, 1fr); } .cr-perks { grid-template-columns: minmax(0, 1fr); } } @container (max-width: 460px) { .cr-fight { grid-template-columns: 64px minmax(0, 1fr); } .cr-fight-act { grid-column: 1 / -1; justify-content: stretch; } .cr-fight-act .btn { flex: 1 1 0; } .cr-fight-when b { font-size: 25px; } } /* phone in landscape (low scene): the panel is denser, the obshchak — in the «Перки» tab */ .short .win.shtab { grid-template-columns: 228px minmax(0, 1fr); } .short .win.shtab > .win-x { right: -6px; top: -8px; } .short .cr-bar { gap: 8px; padding: 9px 10px 8px; } .short .cr-top { gap: 8px; } .short .cr-sign { padding: 6px 15px 7px; } .short .cr-sign-name { font-size: 16px; } .short .cr-sign-sub { display: none; } .short .cr-num { min-width: 54px; padding: 6px 8px; } .short .cr-num b { font-size: 16px; } .short .cr-stats { gap: 8px; } .short .cr-stat-f { display: none; } .short .cr-bank { display: none; } .short .cr-nav { gap: 3px; } .short .cr-tab { min-height: 28px; font-size: 14.5px; } .short .cr-tab-art { width: 24px; height: 24px; } /* «Сундук бригады» on a low landscape screen: a smaller chest, the rules' hint off (it is in «Твоё»'s words). */ .short .ch-big { width: 112px; height: 94px; } .short .ch-stage { padding: 4px 0 6px; } .short .ch-stage::after { top: 86px; width: 100px; height: 12px; margin-left: -50px; } .short .ch-step-art { width: 36px; height: 30px; } .short .ch-pile-art { width: 36px; height: 31px; } .short .ch-hint { display: none; } .short .ch-cols .cr-col, .short .ch-cols .cr-card { gap: 6px; } .short .win.shtab .win-body { padding: 10px 12px 12px; gap: 10px; } /* landscape, but a taller screen (tablet, a lower PC window): the obshchak and the buzz meeting note fit in the panel */ @media (min-height: 560px) { .short .cr-bank { display: grid; } .short .cr-stat-f { display: block; } } /* portrait: the panel falls apart — header (crest, respect and buzz meeting side by side, obshchak) on top, contents in the middle, tabs at the bottom under the big thumb. The obshchak on the «Перки» tab is not repeated — it is a card there. */ .tall .win.shtab { display: flex; flex-direction: column; max-height: none; padding: 0; gap: 0; } .tall .win.shtab > .win-x { right: -4px; top: -6px; } /* «Сундук бригады» (system 15, app.js crewChest): the chest to open next on the dark floor under a warm lamp, its name on a strip of tape, the bar on masking tape in the lamp's yellow, the week's seven looks in a row with five notches each (the one being filled outlined, those ahead dim). */ .ch-cols { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; align-items: start; } .ch-cols .cr-col { gap: 9px; } .ch-cols .cr-card { gap: 8px; } .ch-cols .cr-btns .btn { flex: 1 1 auto; } .cr-tape.chest i { background: #f2c230; } .cr-tape .tg-star, .cr-note .tg-star, .cr-text .tg-star { width: 1em; height: 1em; vertical-align: -0.14em; } /* The lamp over the chest warms with the look: dull over the dusty crate, gold over the last two (the owner: «от обычного который не светится весь в пыли до какого ни будь сияющего»). */ .ch-stage { --glow: rgba(242,194,48,.14); position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 8px; background: radial-gradient(ellipse 58% 62% at 50% 44%, var(--glow), rgba(242,194,48,0) 72%), linear-gradient(#18150f, #0e0c09); border: 1px solid #0b0a08; border-radius: 3px; } .ch-stage.l0 { --glow: rgba(200,190,160,.07); } .ch-stage.l4 { --glow: rgba(242,194,48,.22); } .ch-stage.l5 { --glow: rgba(255,200,60,.36); } .ch-stage.l6 { --glow: rgba(255,206,70,.52); } .ch-stage::after { content: ""; position: absolute; left: 50%; top: 128px; width: 130px; height: 16px; margin-left: -65px; border-radius: 50%; background: rgba(0,0,0,.55); } .ch-big { position: relative; z-index: 1; width: 150px; height: 130px; object-fit: contain; } .ch-stage .art.ph.ch-big { display: grid; place-items: center; } .ch-stage.full .ch-big { opacity: .5; } .ch-name { position: relative; z-index: 1; margin-top: 4px; padding: 4px 12px 5px; background: #d9cca6; color: #16130e; font: 700 17px/1.1 var(--f-hand); transform: rotate(-1.5deg); white-space: nowrap; } .ch-ladder { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; } .ch-step { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 2px 6px; background: #1a1712; border-radius: 3px; opacity: .5; } .ch-step.done { opacity: .9; } .ch-step.now { opacity: 1; box-shadow: inset 0 0 0 2px #f2c230; } .ch-step-art { width: 46px; height: 40px; object-fit: contain; } .ch-step .art.ph.ch-step-art .ph-label { display: none; } .ch-step .cr-pips { gap: 2px; } .ch-step .cr-pips i { width: 6px; height: 7px; } .ch-pile { display: flex; flex-wrap: wrap; gap: 6px 10px; } .ch-pile-box { display: flex; align-items: flex-end; gap: 1px; } .ch-pile-art { width: 44px; height: 38px; object-fit: contain; } .ch-pile .art.ph.ch-pile-art .ph-label { display: none; } .ch-pile-box b { font: 700 19px/1 var(--f-hand); color: #f2c230; white-space: nowrap; } /* «Кто сколько закинул»: the week's ledger as the yard keeps it, name, a dotted run, the deed in the hand; the clear leader's deed in the lamp's gold. The deed drops under the name when the line is short (portrait). «Не отображать своё имя»: a marker box ticked by hand. */ .ch-givers { margin-top: 6px; } .ch-ledger { display: flex; flex-direction: column; } .ch-giver { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 7px 6px 6px; border-bottom: 1px solid rgba(217,204,166,.08); } .ch-giver.me { background: rgba(242,194,48,.07); } .ch-giver-name { display: flex; align-items: baseline; gap: 7px; min-width: 0; max-width: 100%; font: 700 17px/1.15 var(--f-text); color: #f4efe4; } .ch-giver-nick { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-dots { flex: 1 1 24px; min-width: 24px; align-self: center; height: 0; border-bottom: 2px dotted rgba(217,204,166,.32); transform: translateY(5px); } .ch-deed { flex: none; margin-left: auto; font: 700 17px/1.15 var(--f-hand); color: #d9cca6; white-space: nowrap; } .ch-giver.top .ch-deed { color: #f2c230; } .ch-more { align-self: flex-start; } .ch-anon { display: flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px; padding: 0 4px; background: none; border: 0; font: 15px/1.2 var(--f-text); color: #d4cdbd; cursor: pointer; text-align: left; } .ch-box { flex: none; position: relative; width: 22px; height: 22px; border: 2px solid #d9cca6; border-radius: 2px; transform: rotate(-2deg); } .ch-anon.on .ch-box::after { content: ""; position: absolute; left: 6px; top: -3px; width: 7px; height: 15px; border: solid #f2c230; border-width: 0 3px 3px 0; transform: rotate(40deg); } .ch-anon:active .ch-box { background: rgba(217,204,166,.12); } .ch-anon:focus-visible { outline: 2px solid #f2c230; outline-offset: 2px; } .tall .cr-bar { display: contents; } .tall .cr-top { order: 0; gap: 10px; padding: 12px 12px 10px; background: rgba(0,0,0,.3); border-bottom: 2px solid #000; } .tall .cr-plates { padding-right: 40px; } .tall .cr-sign { padding: 8px 18px 9px; } .tall .cr-sign-sub { flex-direction: row; flex-wrap: wrap; } .tall .cr-sign-sub span + span::before { content: "·"; margin: 0 6px; } .tall .cr-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .tall .cr-stat-f { font-size: 12.5px; } .tall .cr-tape span { font-size: 15px; } .tall .cr-bar.tab-perks .cr-bank { display: none; } .tall .cr-bank { grid-template-columns: 36px auto minmax(0, 1fr) auto; padding: 5px 8px 5px 5px; } .tall .cr-bank .icon { grid-row: 1; width: 34px; height: 34px; } .tall .cr-bank small { grid-column: 2; } .tall .cr-bank b { grid-column: 3; font-size: 22px; text-align: right; padding-right: 4px; } .tall .cr-bank em { grid-column: 4; } .tall .cr-bank-big b { font-size: 32px; } .tall .win.shtab .win-body { order: 1; flex: 1; padding: 12px 12px 16px; } .tall .cr-nav { order: 2; flex-direction: row; gap: 4px; margin: 0; padding: 6px 6px 8px; background: #0f0d0a; border-top: 2px solid #000; } .tall .cr-tab { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; min-height: 62px; padding: 5px 2px 6px; text-align: center; font-size: 12.5px; letter-spacing: .5px; background: transparent; box-shadow: none; border-radius: 4px; } .tall .cr-tab.on { background: #f2c230; box-shadow: 0 3px 0 #6d560d; } .tall .cr-tab-art { width: 30px; height: 30px; } .tall .cr-tab em { position: absolute; top: 3px; left: calc(50% + 9px); margin: 0; } .tall .cr-bar.alone .cr-top { max-height: 46%; overflow-y: auto; } .tall .cr-man { gap: 8px; padding: 7px 2px; } .tall .cr-head-t { font-size: 15px; } .tall .ch-cols { grid-template-columns: minmax(0, 1fr); } .tall .ch-cols.mine-first > .cr-col:last-child { order: -1; } .tall .ch-big { width: 180px; height: 156px; } .tall .ch-stage { padding: 12px 0 10px; } .tall .ch-stage::after { top: 158px; width: 150px; margin-left: -75px; } .tall .ch-step-art { width: 38px; height: 33px; } .tall .ch-step .cr-pips i { width: 5px; } .tall .ch-giver-name { font-size: 16px; } .tall .ch-deed { font-size: 16px; } /* A card without a picture (crew, «точно?»): in one column. */ .modal-card:not(:has(.modal-art)) { grid-template-columns: 1fr; } .modal-card:not(:has(.modal-art)) > * { grid-column: 1; } /* A field on a card sheet (crew name, tag, chat guest, nickname) — marker on a dotted line. */ .bs-input { flex: 1; min-width: 0; width: 100%; margin: 4px 0; padding: 4px 8px; font: 700 24px/1.1 var(--f-hand); color: var(--ink); background: transparent; border: 0; border-bottom: 2px dashed rgba(29,27,23,.5); outline: none; user-select: text; } /* ---------- beer in the header: a bottle with a number — how many in the stash ---------- */ .hud-beer { position: relative; width: 32px; height: 38px; margin-right: 8px; display: grid; place-items: center; } /* The header's round capsule at the very right, like the sums: the gear of «Настройки» (app.js, initSetButton). */ .hud-full { width: 36px; height: 36px; margin-left: 2px; display: grid; place-items: center; color: var(--text); opacity: .9; border-radius: 50%; background: rgba(8,7,5,.74); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); } .hud-full svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #000); } .hud-full:hover { opacity: 1; color: var(--seeds); } .hud-full:active { translate: 0 2px; } /* Telegram Desktop window (tall by default, portrait layout): don't squeeze the name. In landscape in a narrow scene (a small window) there is no room at all: with the button the seeds went off the edge already at 987 thousand cash, without it the margin is 10 pixels. */ .tall .hud-full { width: 28px; height: 28px; margin-left: 0; grid-row: 1; grid-column: 5; } .tall .hud-full svg { width: 18px; height: 18px; } .narrow .hud-full { display: none; } /* The gear (owner 2026-10-25: «быструю кнопку настроек»): the last capsule, it opens the switchboard (winSettings); the fullscreen one (PC only, his «должна присутствовать для ПК всегда») stands left of it, in portrait its own column. */ .hud-set svg { stroke-width: 2; } .tall #hudSet { grid-column: 6; } /* The fullscreen capsule's twin over a window, PC only (tester 2026-10-18: «кнопка разворота игры пропадает»): in portrait the window covers the header, and a PC Telegram window left fullscreen is portrait, so the way back was closing every window; with the phone the header leaves the screen in landscape too. Only while the window covers the header's buttons (winhud, app.js paintFullTwin: a short window leaves the header in sight). Beside the window's cross, over the window (25); not in a fight (its own corner) and not over a card (it has its own buttons). The gear has no twin (owner 2026-10-28): it shows only with the header. */ .win-twins { display: none; position: absolute; top: 10px; right: 52px; z-index: 25; gap: 6px; } .win-twins.col { flex-direction: column; } /* in the rooms: a column under the cross (app.js paintFullTwin) */ .win-twins .hud-full { margin: 0; } .winhud #win:not([hidden]):not(.fp) ~ .win-twins { display: flex; } .stage:has(#modal:not([hidden])) #win ~ .win-twins { display: none; } .hud-beer .icon { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px #000); } .hud-beer.dry .icon { filter: grayscale(.7) brightness(.75) drop-shadow(0 1px 1px #000); } .hud-beer em { position: absolute; right: -8px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font: 700 14px/1 var(--f-hand); font-style: normal; color: #15130e; background: #e8a13a; border-radius: 3px; transform: rotate(-8deg); box-shadow: 0 1px 2px rgba(0,0,0,.6); } /* ---------- main screen: icons at the edges, the player in the middle ---------- The owner's decision 2026-09-25 (as in «Тюряга»): instead of buildings on the map — activity icons at the edges, the picture of the «Остановка» — the background. On the left — where to go in the yard, on the right — your own and daily, at bottom right big «Обход». The player — full height in the middle, grows with the scene (--me-h is set by app.js from the screen height). An icon — an object from the game world (icon/) and a caption on a paper slip; two columns of icons at each edge — in landscape, in portrait (later) — one. */ .map.hub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; padding: 10px 12px 8px; } .hub-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; } .hub-grid { display: grid; grid-template-columns: repeat(2, calc(var(--ico, 60px) + 34px)); gap: 6px 4px; align-content: start; } .hub-mid { display: flex; align-items: flex-end; justify-content: center; min-width: 0; } .hub-me { display: flex; flex-direction: column; align-items: center; gap: 2px; transition: filter .12s; } .hub-me .doll { height: var(--me-h, 260px); filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); } .handheld .hub-me .doll { filter: none; } .hub-me .doll .ph { border-radius: 14px; } .hub-me:hover { filter: brightness(1.08); } .hub-me:active { translate: 0 2px; } .hub-icon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0 0; } .hub-icon-art { width: var(--ico, 60px); height: var(--ico, 60px); filter: drop-shadow(0 4px 4px rgba(0,0,0,.7)); transition: transform .12s; } .hub-icon .ph { border-radius: 10px; } .hub-icon:hover .hub-icon-art { transform: translateY(-2px) scale(1.06); } .hub-icon:active .hub-icon-art { transform: translateY(1px) scale(.96); } /* caption — a paper slip with printed letters; a long crew name goes in two lines */ .hub-icon-name { max-width: 100%; padding: 2px 6px 3px; font: 700 13px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: .5px; text-align: center; color: var(--ink); background: rgba(236,226,196,.96); transform: rotate(-1.5deg); box-shadow: 0 2px 3px rgba(0,0,0,.5); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hub-icon:nth-child(2n) .hub-icon-name { transform: rotate(1.2deg); } /* lock in the caption of a closed icon — a bit smaller than in text: otherwise the slip is taller than the open ones' and cuts its edge */ .hub-icon-name span.icon.inline { width: 1.35em; height: 1.35em; vertical-align: -0.18em; margin: -0.15em .04em; } .hub-icon:hover .hub-icon-name { background: #f6eed6; } .hub-icon.locked .hub-icon-art { filter: grayscale(.85) brightness(.7) drop-shadow(0 4px 4px rgba(0,0,0,.7)); } .hub-icon.locked .hub-icon-name { color: #5e584e; } .hub-icon .corner-dot { right: 16px; top: 0; } .hub-icon .corner-tag { right: 6px; bottom: 16px; } /* «Обход» — the newcomer's main path: to districts with bosses. Big, in the bottom right corner, like a signpost */ .hub-icon.big { margin-top: auto; align-self: flex-end; } /* bottom left — «Мобила», above it the kiosk and crew; on the right — «Обход», above it the car: all pressed to the bottom (under the thumb), the big ones — to their own edge */ .hub-side { justify-content: flex-end; } .hub-side .hub-icon.big { margin-top: 0; } .hub-side.left .hub-icon.big { align-self: flex-start; } .hub-side .hub-icon:not(.big) { width: calc(var(--ico, 60px) * 1.45 + 20px); } .hub-side.right .hub-icon:not(.big) { align-self: flex-end; } .hub-icon.big .hub-icon-art { width: calc(var(--ico, 60px) * 1.45); height: calc(var(--ico, 60px) * 1.45); } .hub-icon.big .hub-icon-name { padding: 3px 14px 4px; font-size: 18px; letter-spacing: 1px; } .hub-icon.big .corner-dot { right: 10px; top: 6px; width: 14px; height: 14px; } .short .map.hub { padding: 6px 8px 4px; } .short .hub-grid { gap: 4px 2px; } .short .hub-icon-name { font-size: 12px; padding: 1px 5px 2px; } .short .hub-icon.big .hub-icon-name { font-size: 16px; } /* Кипиш у своих (app.js, kipishIcon; owner 2026-10-05): a megaphone top left — present while your own have somewhere to jump in, and swings like a pushed one: a jerk to the first swing, then swings slower and narrower (half-period grows, amplitude fades), 2 s, then 5 s standing — and again. Phase — by the common clock (--kp-delay is set by app.js): the yard is rebuilt often, the swing doesn't jerk. Swings around the handle; rotate and scale are separate properties, so «lifting» under the arm (transform) doesn't interfere. */ .hub-side .hub-icon.kipish { margin-bottom: auto; align-self: flex-start; } .hub-side .hub-icon.rating { margin-bottom: auto; } /* «Рейтинг»: the top of the right column (decision 93) */ .hub-icon.kipish .hub-icon-art { transform-origin: 34% 72%; animation: kipish 7s linear infinite; animation-delay: var(--kp-delay, 0s); } @keyframes kipish { 0% { rotate: 0deg; scale: 1; animation-timing-function: cubic-bezier(.2, .7, .4, 1); } 0.86% { rotate: 24deg; scale: 1.12; animation-timing-function: ease-in-out; } 2.43% { rotate: -19deg; animation-timing-function: ease-in-out; } 4.29% { rotate: 14.5deg; animation-timing-function: ease-in-out; } 6.5% { rotate: -10.5deg; scale: 1.04; animation-timing-function: ease-in-out; } 9.14% { rotate: 7.5deg; animation-timing-function: ease-in-out; } 12.29% { rotate: -5deg; animation-timing-function: ease-in-out; } 16% { rotate: 3deg; animation-timing-function: ease-in-out; } 20.43% { rotate: -1.6deg; animation-timing-function: ease-in-out; } 25.71% { rotate: .7deg; animation-timing-function: ease-in-out; } 28.57%, 100% { rotate: 0deg; scale: 1; } } @media (prefers-reduced-motion: reduce) { .hub-icon.kipish .hub-icon-art { animation: none; } } /* ---------- «Переезд»: postcards with views («Хата» backgrounds, system 20) ---------- The window — a dark table, like the header; on it postcards: a view in a white frame, a caption in print, what it gives — as icons, how to get it — in marker (app.js, winFons). Where you live — pinned with a red button and circled in red pen (penBox); closed by level — gray; for iron — a gold corner, from events — blue. A background card — the same postcard large (pz-modal). */ .win.pereezd { max-width: 1000px; } .pz-sum { padding: 8px 12px 9px; color: var(--ink); background: rgba(236,226,196,.96); transform: rotate(-.4deg); box-shadow: 0 3px 6px rgba(0,0,0,.5); } .pz-sum-line { font: 700 20px/1.15 var(--f-hand); } .pz-sum-note { margin-top: 2px; font: 14.5px/1.25 var(--f-text); color: var(--ink-soft); } .pz-sum-note.trial { color: #7a1d14; } .pz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 16px; padding: 10px 8px 12px; } .pz-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 7px 7px 8px; color: var(--ink); text-align: left; background: #f3efe4; transform: rotate(var(--tilt, 0deg)); box-shadow: 0 4px 9px rgba(0,0,0,.55); transition: transform .12s; touch-action: manipulation; } .pz-card:hover { transform: rotate(var(--tilt, 0deg)) translateY(-2px); } .pz-card:active { transform: rotate(var(--tilt, 0deg)) scale(.98); } .pz-photo { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #b9b3a6; } .pz-photo .art { width: 100%; height: 100%; object-fit: cover; } .pz-name { margin-top: 3px; font: 700 16px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: .5px; } .pz-bonus { font: 700 15px/1.1 var(--f-text); } .pz-bonus.none { font-weight: 400; color: var(--ink-soft); } .pz-way { font: 700 18px/1 var(--f-hand); color: var(--ink-soft); } .pz-way.can { color: #1f6b2a; } .pz-card.owned .pz-way { color: #1f6b2a; } .pz-card.here .pz-way { color: var(--pen-red); } .pz-card.here::after { content: ""; position: absolute; inset: -8px -7px; pointer-events: none; background: var(--pen-box) 0 0 / 100% 100% no-repeat; } .pz-pin { position: absolute; left: 50%; top: -9px; z-index: 1; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #ff8a7a, #b8241a 58%, #6e120c); box-shadow: 0 3px 3px rgba(0,0,0,.5); } .pz-card.shut.pz-shop .pz-photo .art { filter: grayscale(.8) brightness(.78); } /* postcard corner: for iron — gold, from events — blue electrical tape */ .pz-card.pz-iron:not(.owned) .pz-photo::after, .pz-card.pz-event:not(.owned) .pz-photo::after { content: ""; position: absolute; right: -22px; top: 8px; width: 84px; height: 16px; transform: rotate(38deg); box-shadow: 0 1px 2px rgba(0,0,0,.4); } .pz-card.pz-iron:not(.owned) .pz-photo::after { background: linear-gradient(90deg, #a67c1c, #f6dc85 45%, #c99a2e); } .pz-card.pz-event:not(.owned) .pz-photo::after { background: #2f62b8; } .pz-card.pz-iron:not(.owned) .pz-way { color: #8a6410; } .pz-card.pz-event:not(.owned) .pz-way { color: #2f62b8; } .modal-card.pz-modal { max-width: 660px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px 14px; background: #f3efe4; transform: rotate(-.4deg); } .pz-big { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #b9b3a6; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .pz-big > .art { position: absolute; inset: 0; } .pz-big .art { width: 100%; height: 100%; object-fit: cover; } .pz-big-here { position: absolute; right: 10px; bottom: 9px; padding: 2px 10px 3px; font: 700 21px/1 var(--f-hand); color: #fff; background: var(--pen-red); transform: rotate(-3deg); box-shadow: 0 2px 4px rgba(0,0,0,.45); } .modal-card.pz-modal .big-title { margin-top: 2px; } .pz-text { font: 16px/1.3 var(--f-text); } .pz-gives { display: flex; flex-wrap: wrap; gap: 3px 16px; font: 700 17px/1.2 var(--f-text); } .pz-gives .none { font-weight: 400; color: var(--ink-soft); } .pz-status { font: 700 19px/1.15 var(--f-hand); color: var(--ink-soft); } .pz-status.owned { color: #1f6b2a; } .pz-status.here { color: var(--pen-red); } .pz-status.lack { color: var(--pen-red); animation: pz-nudge .3s ease-in-out; } @keyframes pz-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .modal-card.pz-modal .row { margin-top: 4px; flex-wrap: wrap; } .btn.pz-poor { filter: saturate(.4) brightness(.92); } /* «Переезд» on PC: an open Soviet photo album (app.js, alBuild; 2026-10-26, the probe docs/probes/pereezd-albom/). Drawn at 940 × 372 and scaled to the window's body (alFit): a leatherette cover, two cardboard pages with the gutter's shade, the page stacks as layered shadows (alStacks). Photos with a scalloped edge (a mask, --al-deckle) in corner mounts that stay on the page while the print lifts over them (.hot); the corners' colour tells how to get it, as the postcards' tape did. The turning leaf and the tissue live in .al-flipper (3D), the pages lying still are flat for sharp text. The card: the big print and fonCard's note beside it. */ .win.pereezd.albom { max-width: none; height: 100%; } .win.pereezd.albom > .win-body { overflow: visible; padding: 0; } .al-fit { position: relative; flex: 1 1 auto; min-height: 0; } .al-album { position: absolute; left: 50%; top: 50%; width: 940px; height: 372px; margin: -186px 0 0 -470px; } .al-cover { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.2)), radial-gradient(120% 140% at 30% 20%, #2b4739, #1b2f25 60%, #13221b); box-shadow: 0 20px 34px rgba(0,0,0,.72), 0 4px 8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.12); } .al-book { position: absolute; left: 12px; top: 8px; width: 916px; height: 356px; touch-action: none; } .al-pg { position: absolute; top: 0; width: 458px; height: 356px; color: #ece6d4; background: radial-gradient(130% 100% at 50% 35%, #2f3032 0%, #27282a 62%, #1f2022 100%); } .al-pg.left { left: 0; border-radius: 3px 0 0 3px; } .al-pg.right { left: 458px; border-radius: 0 3px 3px 0; } .al-face > .al-pg { left: 0; } .al-pg.still { z-index: 1; } .al-pg.still.hot { z-index: 2; } .al-pg::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 3; width: 56px; pointer-events: none; } .al-pg.left::after { right: 0; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.18) 62%, rgba(0,0,0,.52)); } .al-pg.right::after { left: 0; background: linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px), linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,.14) 62%, rgba(0,0,0,.46)); } .al-cast { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .al-grid { position: absolute; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; place-items: center; } .al-pg.left .al-grid { inset: 6px 28px 16px 22px; } .al-pg.right .al-grid { inset: 6px 22px 16px 28px; } .al-ph { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)); } .al-ph:focus-visible { outline: 2px dashed rgba(236,230,212,.6); outline-offset: 8px; } .al-ph.hot { z-index: 5; } .al-box { position: relative; width: 180px; height: 108px; perspective: 520px; } .al-shadow { position: absolute; inset: 3px 3px 1px; background: rgba(0,0,0,.78); opacity: .55; filter: blur(2px); transform: translate(1px, 3px); pointer-events: none; } .al-lift { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .al-ph.hot .al-lift { z-index: 3; will-change: transform; } .al-print { position: absolute; inset: 0; padding: 8px; background: linear-gradient(160deg, #f7f2e6, #e6dec9); -webkit-mask: var(--al-deckle) 0 0 / 100% 100% no-repeat; mask: var(--al-deckle) 0 0 / 100% 100% no-repeat; } .al-print .art { display: block; width: 100%; height: 100%; object-fit: cover; } .al-glare { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: overlay; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.7), rgba(255,255,255,0) 58%); } .al-zone { position: absolute; inset: 0; z-index: 4; } .al-cn { position: absolute; z-index: 2; width: 18px; height: 18px; pointer-events: none; background: linear-gradient(135deg, #4a4b50 0%, #1c1d1f 52%, #0e0f10 100%); } .al-cn.tl { left: -4px; top: -4px; clip-path: polygon(0 0, 100% 0, 0 100%); } .al-cn.tr { right: -4px; top: -4px; clip-path: polygon(0 0, 100% 0, 100% 100%); } .al-cn.bl { left: -4px; bottom: -4px; clip-path: polygon(0 0, 100% 100%, 0 100%); } .al-cn.br { right: -4px; bottom: -4px; clip-path: polygon(100% 0, 100% 100%, 0 100%); } .al-iron:not(.owned) .al-cn, .al-swatch.gold .al-cn { background: linear-gradient(135deg, #fdeaa6 0%, #d4a743 46%, #8a6414 100%); } .al-event:not(.owned) .al-cn, .al-swatch.blue .al-cn { background: linear-gradient(135deg, #93b0f2 0%, #3358b8 50%, #1d3476 100%); } .al-ph.shut.al-shop .al-print .art, .al-big.shut .art { filter: grayscale(1) sepia(.28) contrast(.92) brightness(.9); } .al-ph.shut.al-shop .al-print { background: linear-gradient(160deg, #ebe3cf, #d6cbb2); } .al-ph.out .al-lift, .al-ph.out .al-shadow { visibility: hidden; } .al-pen { position: absolute; inset: -12px -16px -14px -16px; z-index: 0; pointer-events: none; background: 0 0 / 100% 100% no-repeat; } .al-cap { position: relative; z-index: 1; width: 180px; padding-left: 2px; display: flex; flex-direction: column; gap: 2px; } .al-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 21px/.95 var(--f-hand); color: #ece6d4; text-shadow: 0 1px 0 rgba(0,0,0,.4); } .al-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .al-bonus { flex: none; white-space: nowrap; font: 700 14px/1.1 var(--f-text); color: #aea998; } .al-bonus.none { font-weight: 400; } .al-bonus .icon, .al-way .icon { width: 1.15em; height: 1.15em; vertical-align: -.22em; } .al-way { flex: none; white-space: nowrap; font: 700 18px/1 var(--f-hand); color: #aea998; } .al-way.can, .al-ph.owned .al-way { color: #a8dc95; } .al-ph.here .al-way { color: #ff7a68; } .al-iron:not(.owned) .al-way { color: #ecc970; } .al-event:not(.owned) .al-way { color: #a3c0ff; } .al-ph.empty { cursor: default; } .al-hole { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font: 700 18px/1.05 var(--f-hand); color: rgba(236,230,212,.34); border: 1px dashed rgba(236,230,212,.14); } .al-ph.empty .al-cap { height: 40px; } .al-album.flipping .al-zone { pointer-events: none; } .al-album.dragging, .al-album.dragging * { cursor: grabbing !important; } /* the first page */ .al-first { position: absolute; inset: 22px 42px 18px 30px; display: flex; flex-direction: column; gap: 12px; } .al-head { font: 700 42px/1 var(--f-hand); transform: rotate(-2.5deg); transform-origin: 0 50%; } .al-note { position: relative; padding: 10px 14px 11px; transform: rotate(-.8deg); box-shadow: 0 3px 6px rgba(0,0,0,.55); } .al-note .tape.l { left: -12px; top: -7px; transform: rotate(-28deg); } .al-note .tape.r { right: -12px; top: -7px; left: auto; transform: rotate(24deg); } .al-note .pz-sum-line { font: 700 21px/1.12 var(--f-hand); } .al-note .pz-sum-note { margin-top: 3px; font: 15px/1.25 var(--f-text); color: var(--ink-soft); } .al-note .pz-sum-note.trial { color: #7a1d14; } .al-keys { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; padding-left: 4px; } .al-key { display: flex; align-items: center; gap: 13px; font: 700 19px/1 var(--f-hand); color: #aea998; } .al-key.here { color: #ff7a68; } .al-key.gold { color: #ecc970; } .al-key.blue { color: #a3c0ff; } .al-swatch { position: relative; flex: none; width: 36px; height: 23px; background: linear-gradient(135deg, #86aac2, #c9a46a); } .al-swatch .al-cn { width: 11px; height: 11px; } .al-swatch .al-cn.tl { left: -2px; top: -2px; } .al-swatch .al-cn.br { right: -2px; bottom: -2px; } .al-swatch.bw { background: linear-gradient(135deg, #c3bdb0, #6d6a63); } .al-swatch.here { background: none; } .al-swatch.here::before { content: ""; position: absolute; inset: 4px 6px; background: linear-gradient(135deg, #86aac2, #c9a46a); } .al-swatch.here i { position: absolute; inset: -3px; background: 0 0 / 100% 100% no-repeat; } /* the last page: the endpaper with the price label, as inside a real cover */ .al-pg.end { background: radial-gradient(circle at 50% 50%, rgba(233,226,204,.13) 0 2.6px, transparent 3.2px) 0 0 / 22px 22px, radial-gradient(circle at 50% 50%, rgba(233,226,204,.07) 0 6px, transparent 6.6px) 11px 11px / 22px 22px, repeating-linear-gradient(45deg, rgba(0,0,0,.1) 0 1px, transparent 1px 11px), repeating-linear-gradient(-45deg, rgba(0,0,0,.1) 0 1px, transparent 1px 11px), #2c4538; } .al-price { position: absolute; right: 30px; bottom: 26px; display: flex; flex-direction: column; padding: 6px 11px 7px; transform: rotate(-.6deg); background: #e9e2cc; color: #3b3328; box-shadow: 0 1px 2px rgba(0,0,0,.45); white-space: pre; font: 500 12px/1.3 var(--f-print); text-transform: uppercase; letter-spacing: .7px; } .al-price b { font-size: 15px; letter-spacing: 2px; } /* the turning leaf and the tissue sheet */ .al-flipper { position: absolute; inset: 0; z-index: 4; perspective: 2400px; perspective-origin: 50% 50%; pointer-events: none; } .al-leaf { position: absolute; left: 458px; top: 0; width: 458px; height: 356px; transform-origin: 0 50%; transform-style: preserve-3d; } .al-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .al-face.back { transform: rotateY(180deg); } .al-shade { position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none; } .al-face.front .al-shade { background: linear-gradient(90deg, rgba(0,0,0,.7), #000); } .al-face.back .al-shade { background: linear-gradient(270deg, rgba(0,0,0,.7), #000); } .al-tissue { position: absolute; left: 458px; top: 5px; width: 450px; height: 346px; opacity: 0; transform-origin: 0 50%; transform-style: preserve-3d; } .al-ts { position: absolute; top: 0; width: 151px; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; background: var(--al-web) 0 0 / 450px 346px no-repeat; } .al-ts.s1 { left: 0; } .al-ts.s2 { left: 150px; background-position: -150px 0; } .al-ts.s3 { left: 150px; background-position: -300px 0; box-shadow: inset -1px 0 0 rgba(255,255,255,.3); } /* the dog-eared corner: a tap turns the page, the mouse lifts it a little */ .al-peel { position: absolute; bottom: 0; z-index: 6; width: var(--pw, 30px); height: var(--pw, 30px); padding: 0; border: 0; cursor: pointer; transition: width .2s cubic-bezier(.2,.8,.2,1), height .2s cubic-bezier(.2,.8,.2,1); } .al-peel.next { right: 0; border-radius: 0 0 3px 0; filter: drop-shadow(-3px -3px 3px rgba(0,0,0,.42)); background: linear-gradient(to top left, #121314 0 50%, transparent 50%), linear-gradient(to bottom right, #5a5b5f, #37383b 62%, #2b2c2e); } .al-peel.prev { left: 0; border-radius: 0 0 0 3px; filter: drop-shadow(3px -3px 3px rgba(0,0,0,.42)); background: linear-gradient(to top right, #121314 0 50%, transparent 50%), linear-gradient(to bottom left, #5a5b5f, #37383b 62%, #2b2c2e); } .al-peel:hover { --pw: 50px; } .al-peel:focus-visible { outline: 2px solid #ece6d4; outline-offset: 2px; } .al-album.flipping .al-peel { visibility: hidden; } /* the card from the album: the print taken out and fonCard's note beside it */ .modal-card.pz-modal.al-card { width: auto; max-width: none; max-height: none; overflow: visible; display: flex; flex-direction: row; align-items: center; gap: 26px; padding: 0; background: none; box-shadow: none; transform: none; filter: none; animation: none; } .al-big { position: relative; flex: none; width: 560px; height: 328px; transform-origin: 0 0; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); } .al-big .al-print { padding: 0; transform: rotate(-1deg); -webkit-mask-image: var(--al-deckle-big); mask-image: var(--al-deckle-big); } .al-big .art { position: absolute; left: 13px; top: 13px; width: calc(100% - 26px); height: calc(100% - 26px); object-fit: cover; } .al-big .pz-big-here { z-index: 2; right: 22px; bottom: 22px; } .al-slip { position: relative; flex: none; width: 330px; padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 6px; transform: rotate(1.2deg); box-shadow: 0 10px 22px rgba(0,0,0,.55); } /* ---------- the passport's paper and stamps (owner 2026-10-14: «сделал бы в духе паспорт») ---------- Since 2026-10-28 another guy's profile is his room (app.js gs…, «В гостях» below) and the passport card is gone; its parts live on in his «Справка с района»: the security paper (a fine mesh and arcs), the printed heading, the photo in his VIP frame, the round violet seal, the data written in by a pen on printed lines, his signature, the stamps in four inks (blue: where he lives, slaps; violet: crew, «Стрелка»; gold: the title; red: sworn enemy). */ .ps-page { --arc: 50% 135%; position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; scrollbar-width: thin; scrollbar-color: #9a9385 transparent; background: repeating-radial-gradient(circle at var(--arc), transparent 0 7px, rgba(150,90,140,.1) 7px 8px), repeating-linear-gradient(58deg, transparent 0 7px, rgba(60,120,130,.07) 7px 8px), repeating-linear-gradient(-58deg, transparent 0 7px, rgba(60,120,130,.07) 7px 8px), #eee6d3; } .ps-head { flex: none; text-align: center; font: 700 14px/1 var(--f-news); text-transform: uppercase; letter-spacing: 2px; color: #7c1414; } .ps-photo { position: relative; width: 104px; height: 134px; overflow: hidden; background: linear-gradient(#e6e7e2, #c6cac6); box-shadow: 0 1px 3px rgba(0,0,0,.4); } .ps-photo .avatar { width: 100%; height: 100%; border-radius: 0; background: none; } /* The doll sits lower than in the round header avatar: his cap rises above the head (prikid.js, DRESS.cap). */ .ps-photo:not(.vip-in) .avatar > .doll { width: 214%; left: -57%; top: 23%; } .ps-photo.vip-in .avatar > .doll { top: 16%; } /* the square photo: his head and shoulders as on a document (the round frame keeps the avatar's head) */ .ps-photo:not(.vip-in) .avatar > .guy.hd { --hd-fill: .56; --hd-top: .1; } .ps-photo.vip-in { width: min(150px, calc(94px * var(--k))); height: min(150px, calc(94px * var(--k))); box-shadow: none; } .ps-photo.vip-in > .avatar { background: linear-gradient(#e6e7e2, #c6cac6); } /* The round seal: violet ink, never in the way of a tap; the «Справка» sets its place at its foot (.vg-foot .ps-seal). */ .ps-seal { position: absolute; right: -12px; bottom: -36px; z-index: 2; width: 68px; height: 68px; color: rgba(84,58,160,.7); transform: rotate(-14deg); pointer-events: none; } .ps-seal-rim { font: 700 10.5px var(--f-print); } .ps-seal-mid { font: 700 13px var(--f-print); } .ps-f { display: flex; flex-direction: column; min-width: 0; padding-bottom: 1px; border-bottom: 1px solid rgba(40,36,30,.32); } .ps-l { font: italic 11.5px/1.1 var(--f-news); color: #6b6253; white-space: nowrap; } .ps-v { font: 700 21px/1.08 var(--f-hand); color: #22306e; white-space: nowrap; } .ps-v .icon.inline { width: 18px; height: 18px; } .ps-sign { margin-top: auto; display: flex; align-items: flex-end; gap: 10px; padding-top: 6px; } .ps-sign .ps-l { flex: none; padding-bottom: 3px; } .ps-scrawl { flex: 1; min-width: 0; height: 30px; overflow: hidden; border-bottom: 1px solid rgba(40,36,30,.32); } .ps-scrawl i { display: inline-block; padding-left: 10px; font: 700 30px/30px var(--f-hand); color: #1d3f8f; white-space: nowrap; transform: rotate(-4deg) skewX(-14deg); transform-origin: 0 100%; } .ps-stamps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px 10px; padding: 2px 2px 4px; } .ps-stamp { --s: #2d4aa0; flex: 0 1 auto; display: flex; align-items: center; gap: 7px; max-width: 100%; padding: 2px 8px 3px; border: 3px double var(--s); border-radius: 5px; color: var(--s); opacity: .9; transform: rotate(var(--tilt, 0deg)); } .ps-stamp.violet { --s: #5b3a98; } .ps-stamp.red { --s: #a8261c; } .ps-stamp.gold { --s: #8a6410; } .ps-stamp-text { display: flex; flex-direction: column; min-width: 0; } .ps-stamp-text b { font: 700 10.5px/1.15 var(--f-print); text-transform: uppercase; letter-spacing: 1px; } .ps-stamp-main { font: 700 15.5px/1.12 var(--f-print); text-transform: uppercase; } .ps-stamp-main .icon.inline { width: 17px; height: 17px; } .ps-stamp-text > span:not(.ps-stamp-main) { font: 13.5px/1.1 var(--f-text); } .ps-home { flex: none; width: 48px; height: 36px; border: 1px solid var(--s); } .ps-home img, img.ps-home { object-fit: cover; } .ps-note { align-self: center; font: 700 19px/1 var(--f-hand); color: #6b6253; transform: rotate(-3deg); } /* ---------- stenka: a fight on the wasteland (system 10; visuals — 2026-09-29) ---------- Full screen, first person, like the boss fight and the capt duel (app.js, winStenka): a wasteland at dusk — SVG sized to the screen (skSceneSvg), on it the opponents as figures in two lines (the back one farther and smaller), at the bottom — dark backs of your own, bottom right — your hand. On top the score with the tug-of-war and the time, at the bottom health, breath, points, «Базар» and «Свалить». The horizon, the lamp and where the figures stand — variables at .sk (portrait — its own, at the end of the section); the wasteland takes the horizon and lamp from the same place. The world grows with the scene, captions — interface size. */ .sk { position: absolute; inset: 0; z-index: 0; overflow: hidden; color: var(--text); background: #14161d; --hz: 38%; --lamp: .58; /* horizon — a fraction of the height from the top, lamp — a fraction of the width */ --fx0: 7%; --fx1: 72%; /* opponents — from and to by width: the hand is further right */ --ff: 89%; --hf: 60%; --fb: 72%; --hb: 49%; /* feet and height of the front and back line — fractions of the height */ --mx0: 27%; --mx1: 69%; --mt: 72%; --mh: 50%; } /* your own: from and to, frame top, frame height (the back line is higher) */ .sk-world { position: absolute; inset: 0; z-index: 0; } .sk-scene { position: absolute; inset: 0; background: linear-gradient(#0f1422, #3d2b3b var(--hz), #2e2825 var(--hz), #100f0e) 0 0 / 100% 100% no-repeat; } /* The wasteland as a picture (app.js, pustyrFit): the picture's horizon — at --hz; the day is bright — the edges are dimmed so the figures read. */ .sk-scene.photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 75% at 50% 58%, transparent 45%, rgba(8,9,10,.5)), linear-gradient(rgba(8,9,10,.12), rgba(8,9,10,.22)); } .sk-field, .sk-crowd { position: absolute; inset: 0; pointer-events: none; transition: transform .9s cubic-bezier(.3,.7,.3,1), filter .6s; } /* Gathering: opponents farther off, your own — behind; go — they step toward each other. The result — opponents gray. */ .sk.gather .sk-field { transform: translateY(-3%) scale(.88); transform-origin: 50% var(--hz); } .sk.gather .sk-crowd { transform: translateY(9%); } .sk.over .sk-field { filter: saturate(.55) brightness(.72); } .sk-empty { position: absolute; left: calc((var(--fx0) + var(--fx1)) / 2); top: 62%; max-width: 70%; text-align: center; transform: translateX(-50%) rotate(-2deg); font: 700 26px/1.1 var(--f-hand); color: #e3dccb; text-shadow: 0 2px 3px #000, 0 0 10px #000; } .sk-empty:empty { display: none; } /* Figure: a button — a body column (62 % of the doll frame's 2:3 width), the doll — around it: a tap past the body passes to those behind. */ .sk-fig { position: absolute; padding: 0; border: 0; background: none; aspect-ratio: .4133; transform: translateX(-50%); transition: left .5s ease, top .5s ease, bottom .5s ease, height .5s ease, opacity .35s; } .sk-fig.foe { left: calc(var(--fx0) + (var(--fx1) - var(--fx0)) * var(--x, .5)); bottom: calc(100% - var(--ff)); height: calc(var(--hf) * var(--tall, 1)); z-index: 3; pointer-events: auto; cursor: crosshair; touch-action: manipulation; } .sk-fig.foe.back { bottom: calc(100% - var(--fb)); height: calc(var(--hb) * var(--tall, 1)); z-index: 2; } .sk-fig.gone { opacity: 0; pointer-events: none; } .sk-field[data-crowd="few"] { --ff: 90%; --hf: 66%; } .sk-field[data-crowd="many"] { --ff: 88%; --hf: 58%; --fb: 72%; --hb: 48%; } /* Shadow on the asphalt — at the feet, not the body: fell or stepped aside — the spot stays where he stood. */ .sk-fig.foe::before { content: ""; position: absolute; left: -40%; right: -40%; bottom: -2.5%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); } /* Figure bones: body — fell or stepped (classes), jolt — jerked or lunged (app.js, motion), idle — sways. */ .sk-body { position: absolute; left: -30.65%; width: 161.3%; top: 0; height: 100%; transform-origin: 50% 97%; transition: transform .5s cubic-bezier(.3,.7,.4,1), opacity .4s, filter .4s; } .sk-jolt, .sk-idle, .sk-doll { position: absolute; inset: 0; transform-origin: 50% 100%; } .sk-idle { animation: sk-idle 4.2s ease-in-out infinite; } @keyframes sk-idle { 0%, 100% { transform: none; } 50% { transform: translateY(.5%) rotate(-.7deg) scale(1.012); } } .sk-doll .layer { position: absolute; inset: 0; width: 100%; height: 100%; } .sk-doll .ph { border-radius: 40% 40% 8px 8px; } .sk-fig.flip .sk-doll { transform: scaleX(-1); } .sk-fig.foe .sk-doll { filter: drop-shadow(0 4px 6px rgba(0,0,0,.55)); } .sk-fig.foe:hover .sk-doll { filter: drop-shadow(0 4px 6px rgba(0,0,0,.55)) brightness(1.1); } /* Laid out — falls on his side and lies on the asphalt, gray, with a countdown (the body is flattened: lies rather than hangs in the air); came to — gets up (transition back). A mirrored doll falls the other way. */ .sk-fig.foe.down .sk-body { transform: translateY(3%) rotate(-80deg) scaleX(.62); filter: grayscale(.55) brightness(.72); transition: transform .45s cubic-bezier(.55,0,.9,.55), filter .45s; } .sk-fig.foe.down.flip .sk-body { transform: translateY(3%) rotate(80deg) scaleX(.62); } /* Aside — stepped back and paled: he isn't hit and isn't counted among the heads. */ .sk-fig.away .sk-body { transform: translateY(-4%) scale(.86); opacity: .4; filter: grayscale(.85); } .sk-fig.down, .sk-fig.away { cursor: not-allowed; } /* Above the head — a slip: name, how many he laid out, health. At the back line — higher: the slips don't overlap each other. */ .sk-tag { position: absolute; left: 50%; bottom: 98%; z-index: 1; display: flex; flex-direction: column; gap: 2px; width: max-content; min-width: 100%; max-width: 190%; padding: 2px 6px 3px; pointer-events: none; color: var(--ink); background: rgba(236,226,196,.93); box-shadow: 0 2px 3px rgba(0,0,0,.5); transform: translateX(-50%) rotate(-1.5deg); transition: bottom .45s, top .45s, opacity .45s; } .sk-fig:nth-child(2n) .sk-tag { transform: translateX(-50%) rotate(1.2deg); } .sk-fig.foe.back .sk-tag { bottom: calc(98% + 4px); } .sk-who { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; } .sk-who b { min-width: 0; font: 700 15px/1 var(--f-hand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sk-who em { flex: none; display: flex; align-items: center; font: 700 12.5px/1 var(--f-text); font-style: normal; color: var(--pen-red); } .sk-who em:empty { display: none; } .sk-life { display: block; height: 4px; background: rgba(0,0,0,.25); } .sk-life i { display: block; width: 100%; height: 100%; background: #c2372b; transition: width .25s ease-out; } /* Lying — a red plate with a countdown instead of health, aside — a dark one; the slip — where it was, above the head: those standing in front don't cover it there. Laid him out yourself — the «Лёг!» stamp. */ .sk-state { display: block; margin: 0 -3px -1px; padding: 1px 5px 2px; text-align: center; white-space: nowrap; font: 700 14px/1 var(--f-hand); color: #fff; background: rgba(163,36,28,.95); } .sk-state:empty { display: none; } .sk-fig.down .sk-life, .sk-fig.away .sk-life { display: none; } .sk-fig.away .sk-state { color: #e3dccb; background: rgba(30,30,30,.88); } .sk-fig.away .sk-tag { opacity: .7; } .sk-ko { position: absolute; left: 50%; top: 30%; z-index: 3; padding: 2px 8px 3px; border: 3px solid #d7261c; border-radius: 4px; font: 700 22px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; color: #d7261c; background: rgba(236,226,196,.18); pointer-events: none; transform: translate(-50%, -50%) rotate(-12deg); animation: sk-ko 1.5s ease-out forwards; } @keyframes sk-ko { 0% { opacity: 0; scale: 1.8; } 14% { opacity: 1; scale: 1; } 78% { opacity: 1; } 100% { opacity: 0; } } /* Your own — backs to you, against the light: dark silhouettes at the bottom, not tapped. Got hit — they jerk, laid out — they sag. */ .sk-fig.mate { left: calc(var(--mx0) + (var(--mx1) - var(--mx0)) * var(--x, .5)); top: var(--mt); height: calc(var(--mh) * var(--tall, 1)); z-index: 5; } .sk-fig.mate.back { top: calc(var(--mt) - 5%); height: calc(var(--mh) * .88 * var(--tall, 1)); z-index: 4; } .sk-fig.mate .sk-doll { filter: brightness(0) drop-shadow(0 -1.5px 0 rgba(255,190,120,.5)); opacity: .96; } .sk-fig.mate .sk-idle { animation-name: sk-sway; } @keyframes sk-sway { 0%, 100% { transform: none; } 50% { transform: translateX(1.5%) rotate(.8deg); } } .sk-fig.mate .sk-tag { bottom: auto; top: -14px; min-width: 64%; max-width: 150%; padding: 1px 5px 2px; background: rgba(236,226,196,.86); } .sk-fig.mate .sk-who b { font-size: 13px; } .sk-fig.mate .sk-life i { background: #2f8a3c; } /* Many of your own — only health over the heads: names overlap each other, and who is who — in «Кто кого». */ .sk-crowd[data-crowd="many"] .sk-fig.mate .sk-who { display: none; } .sk-crowd[data-crowd="many"] .sk-fig.mate .sk-tag { top: -9px; min-width: 50%; padding: 2px 3px; } .sk-fig.mate .sk-state { font-size: 12.5px; } .sk-fig.mate.down .sk-body { transform: translateY(34%) rotate(-7deg); } .sk-fig.mate.away .sk-body { opacity: .35; } /* The hand — the same as the boss's (fp-hand, app.js: armParts, swing): the fist is lowered bottom right so as not to cover the opponents; a tap — a swing toward whom you hit. Laid out — the hand falls, red in the eyes; came to — it rises. */ .sk .sk-hand { left: 84%; top: 71%; height: 128%; z-index: 6; transition: transform .6s ease-out; } .sk.dead .sk-hand { transform: translate(12%, 85%) rotate(16deg); transition: transform .7s cubic-bezier(.5,0,.9,.5); } /* You lie half a minute — the fight is visible anyway: red only at the edges, the wasteland faded. */ .sk.dead .fp-red { opacity: 1; transition: opacity .5s; background: radial-gradient(ellipse 72% 68% at 50% 45%, transparent 40%, rgba(150,0,0,.55) 78%, rgba(60,0,0,.88)); } .sk.dead .sk-world { filter: saturate(.45) brightness(.8); } #screen.shake .sk-world { animation: fp-shake .45s cubic-bezier(.36,.07,.19,.97); } #screen.haymaker .sk-world { animation: fp-shake-hard .65s cubic-bezier(.36,.07,.19,.97); } /* A smaller «Бац» — someone else's hit; numbers over your own — smaller; «нельзя» — in words over the figure. */ .bam.sk-far span { padding: calc(10px * var(--s)) calc(12px * var(--s)); font-size: calc(14px * var(--s)); -webkit-text-stroke: calc(.6px * var(--s)) #000; } .bam.sk-far.crit span { padding: calc(13px * var(--s)) calc(15px * var(--s)); font-size: calc(18px * var(--s)); } .fly.far { font-size: calc(18px * var(--s)); } .fly.note { font-size: calc(19px * var(--s)); color: #f3ecd9; } /* On top: crews with the score and heads in play, in the middle time and tug-of-war — whose it is. */ .sk-top { position: absolute; left: 10px; right: 250px; top: 8px; z-index: 5; display: grid; gap: 10px; align-items: start; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); pointer-events: none; } .sk-team { justify-self: start; display: flex; align-items: baseline; gap: 7px; min-width: 0; max-width: 100%; padding: 3px 10px 4px; color: var(--ink); background: rgba(236,226,196,.95); box-shadow: 0 2px 4px rgba(0,0,0,.5); transform: rotate(-1deg); } .sk-team.them { justify-self: end; transform: rotate(1deg); } .sk-team b { font: 700 18px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sk-team.us b { color: #2c6b35; } .sk-team.them b { color: #a3291f; } .sk-team small { flex: none; font: 12px/1 var(--f-text); color: var(--ink-soft); white-space: nowrap; } .sk-score { font: 700 24px/1 var(--f-hand); font-variant-numeric: tabular-nums; } .sk-tug { width: 132px; height: 10px; overflow: hidden; border: 2px solid #000; background: #b3342a; box-shadow: 0 2px 4px rgba(0,0,0,.5); } .sk-tug i { display: block; width: 50%; height: 100%; background: #2f8a3c; box-shadow: 2px 0 0 #000; transition: width .4s ease-out; } .sk-clock { flex: none; font: 700 26px/1 var(--f-print); letter-spacing: 1px; color: #f3ecd9; text-shadow: 0 2px 0 #000; } .sk-clock.hot { color: #ff6b61; } .sk-hp { display: block; height: 7px; overflow: hidden; border-radius: 2px; background: rgba(0,0,0,.28); } .sk-hp i { display: block; height: 100%; background: linear-gradient(90deg, #2f8a3c, var(--green)); transition: width .25s ease-out; } .sk-breath.sk-hit { animation: sk-shake .36s ease-out; } @keyframes sk-shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } } /* What's happening — a sheet in the middle of the wasteland (gathering, a side has nobody in play, result) or a strip of masking tape at the bottom, above the fight lines (fight start, lying). Fight lines — only about you, as plates at the bottom center, the fresh one at the bottom. */ .sk-say { position: absolute; left: calc((var(--fx0) + var(--fx1)) / 2); top: 46%; z-index: 5; max-width: min(560px, 74%); text-align: center; pointer-events: none; transform: translate(-50%, -50%) rotate(-1deg); } .sk-say:empty { display: none; } .sk-say.paper.big { padding: 9px 16px 10px; font: 700 22px/1.15 var(--f-hand); color: var(--ink); box-shadow: 0 6px 14px rgba(0,0,0,.55); } .sk-say.strip { left: 50%; top: auto; bottom: 72px; max-width: calc(100% - 20px); padding: 3px 12px 4px; white-space: nowrap; font: 700 17px/1 var(--f-hand); color: var(--ink); background: rgba(236,226,196,.93); transform: translateX(-50%) rotate(-1deg); clip-path: polygon(1% 5%, 99% 0, 100% 50%, 98.5% 100%, 0 93%, .8% 50%); } .sk-say.strip.bad { color: var(--pen-red); } .sk-caps { position: absolute; left: 50%; bottom: 10px; z-index: 5; width: min(420px, 40%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; transform: translateX(-50%); } .sk-cap { font-size: 14px; } .sk-cap.old { opacity: .75; font-size: 12.5px; } /* Bottom left: breath and points, under them your health — as with the boss, in the corner, so as not to cover your own. */ .sk-bottom { position: absolute; left: 10px; bottom: 8px; z-index: 5; width: max-content; min-width: 250px; max-width: 40%; display: flex; flex-direction: column; gap: 5px; padding: 6px 9px 7px; border-radius: 6px; background: rgba(0,0,0,.55); } .sk-bottom:empty { display: none; } .sk-stats { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .sk-stats .sk-mine { overflow: hidden; text-overflow: ellipsis; } .sk-bottom .bar { height: 22px; border: 2px solid #000; box-shadow: 0 2px 6px rgba(0,0,0,.5); } .sk-bottom .bar span { font-size: 13.5px; line-height: 18px; } /* «Базар» and «Свалить» — paper slips left of the cross, as on the capt. */ .sk-tools { position: absolute; right: 60px; top: 9px; z-index: 6; display: flex; align-items: center; gap: 12px; } /* «Бой 2.0»: the caps under the thumb, as at the boss; an enemy who holds his block shows it in his tag. */ .sk .mv-caps { right: 10px; bottom: 8px; } .sk-fig.guarded .sk-state { color: #9fd0ff; } .sk-tools:empty { display: none; } .sk .skc { z-index: 7; } .sk-breath { display: flex; align-items: center; gap: 4px; } .sk-breath span { margin-right: 4px; font: 12.5px/1 var(--f-text); color: #b9b2a2; } .sk-breath i { width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); } .sk-breath i.on { background: #8fd3ff; box-shadow: 0 0 6px rgba(143,211,255,.8); } .sk-breath i.half { background: linear-gradient(90deg, rgba(143,211,255,.8) 50%, rgba(255,255,255,.12) 50%); } .sk-me { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font: 13px/1 var(--f-text); color: #d8d2c4; } .sk-mine { font: 700 17px/1 var(--f-hand); color: var(--seeds); white-space: nowrap; } .sk-leave { flex: none; padding: 5px 12px 6px; font: 700 18px/1 var(--f-hand); color: var(--pen-red); transform: rotate(2deg); box-shadow: 0 2px 4px rgba(0,0,0,.5); } .sk-stamp { position: fixed; left: 50%; top: 45%; z-index: 26; pointer-events: none; padding: 6px 20px 8px; border: 5px solid; font: 700 calc(54px * var(--s))/1 var(--f-print); letter-spacing: 3px; text-transform: uppercase; color: #ddd; background: rgba(0,0,0,.35); transform: translate(-50%, -50%) rotate(-8deg); animation: sk-stamp 2.4s ease-out forwards; } .sk-stamp.win { color: var(--seeds); } .sk-stamp.lose { color: #ff6b61; } @keyframes sk-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2); } 14% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .sk-idle { animation: none; } .sk-fig, .sk-fig .sk-body, .sk-fig.foe.down .sk-body, .sk-field, .sk-crowd, .sk .sk-hand, .sk.dead .sk-hand { transition: none; } } .short .sk-team b { font-size: 16px; } .short .sk-score { font-size: 21px; } .short .sk-say.paper.big { font-size: 19px; } .short .sk-say.strip { font-size: 16px; } .short .sk-bottom { gap: 9px; padding: 5px 8px; } /* choice of whom and when to book a stenka (a card from the crew HQ, the «Разборки» tab) */ .sk-h { margin-top: 4px; font: 700 14px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); } .sk-pick { display: flex; flex-wrap: wrap; gap: 6px; } .sk-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 5px 9px 6px; border-radius: 4px; border: 2px solid rgba(0,0,0,.25); background: rgba(0,0,0,.05); color: var(--ink); font: 13px/1.1 var(--f-text); } .sk-chip b { font: 700 17px/1 var(--f-hand); } .sk-chip.on { border-color: var(--pen-red); background: rgba(184,36,26,.1); } .sk-chip.time { font: 700 15px/1 var(--f-print); letter-spacing: .5px; } .sk-chip:disabled { opacity: .4; text-decoration: line-through; } .sk-chip.off { opacity: .5; border-style: dashed; } .sk-note { margin-top: 2px; font: 700 17px/1.15 var(--f-hand); color: var(--pen-red); } .sk-days { display: flex; flex-direction: column; gap: 8px; } .sk-day { display: flex; flex-direction: column; gap: 4px; } .sk-day-name { font: 13px/1 var(--f-text); color: var(--ink-soft); } /* portrait: horizon higher, opponents — full width (five in a line), your own — under them left of the hand, bottom — in two lines full width */ .tall .sk { --hz: 27%; --lamp: .83; --fx0: 9%; --fx1: 91%; --ff: 62%; --hf: 31%; --fb: 50%; --hb: 25%; --mx0: 7%; --mx1: 63%; --mt: 68%; --mh: 34%; } .tall .sk-field[data-crowd="few"] { --ff: 63%; --hf: 37%; } .tall .sk-field[data-crowd="many"] { --ff: 61%; --hf: 29%; --fb: 49%; --hb: 24%; } .tall .sk-crowd[data-crowd="many"] { --mh: 32%; --mt: 69%; } .tall .win-body > .sk { container-type: size; } .tall .sk .sk-hand { left: 76%; top: 77%; width: 136%; width: min(136cqw, 84cqh); height: auto; } .tall .sk-top { left: 8px; right: 50px; gap: 6px; } .tall .sk-team { flex-wrap: wrap; justify-content: center; column-gap: 5px; row-gap: 1px; padding: 2px 7px 3px; } .tall .sk-team b { max-width: 100%; font-size: 14px; } .tall .sk-score { font-size: 20px; } .tall .sk-clock { font-size: 21px; } .tall .sk-tug { width: 88px; } .tall .sk-who b { font-size: 14px; } .tall .sk-fig.foe.back .sk-tag { bottom: calc(98% + 16px); } .tall .sk-say { left: 50%; top: 34%; max-width: calc(100% - 28px); } .tall .sk-empty { top: 50%; } .tall .sk-say.paper.big { font-size: 19px; } .tall .sk-say.strip { top: auto; bottom: 146px; font-size: 16px; } .tall .sk-bottom .sk-breath span { display: none; } .tall .sk-tag { min-width: 72%; max-width: 150%; } .tall .sk-field[data-crowd="many"] .sk-tag { max-width: 104%; } .tall .sk-field[data-crowd="many"] .sk-who b { font-size: 13px; } .tall .sk-caps { left: 50%; width: calc(100% - 24px); bottom: 84px; } .tall .sk .mv-caps { left: 8px; right: 8px; bottom: 74px; } .tall .sk.moves .sk-caps { bottom: 178px; } .tall .sk-bottom { left: 8px; right: 8px; width: auto; max-width: none; padding: 6px 8px 7px; } .tall .sk-bottom .sk-me { flex-basis: auto; } .tall .sk-tools { top: auto; right: 16px; bottom: 41px; gap: 10px; } .tall .sk-me { flex-basis: 100%; order: 3; } .tall .sk-mine { font-size: 15px; } .tall .sk-chip { padding: 7px 10px 8px; } .tall .sk .skc { bottom: 84px; } /* clock in the middle of the fight header */ .sk-center { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; } /* «Базар» — the fight chat: a slip in the bottom strip with a number of new ones; unfolded — a sheet with the tabs «Базар» and «Кто кого». In landscape the sheet is on the right over the stenkas, in portrait — at the bottom full width. The text — letters only (h(), no markup). */ .skc-open { position: relative; flex: none; padding: 5px 12px 6px; font: 700 18px/1 var(--f-hand); color: var(--ink); transform: rotate(-1.5deg); box-shadow: 0 2px 4px rgba(0,0,0,.5); } .skc-open.on { outline: 2px solid var(--pen-red); outline-offset: 1px; } .skc-open em { position: absolute; right: -8px; top: -9px; min-width: 20px; padding: 2px 5px; border-radius: 10px; font: 700 13px/1 var(--f-text); font-style: normal; color: #fff; background: var(--pen-red); box-shadow: 0 1px 3px rgba(0,0,0,.6); } .skc { position: absolute; z-index: 4; right: 10px; top: 58px; bottom: 62px; width: min(340px, 40%); display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; color: var(--ink); transform: rotate(-.4deg); box-shadow: 0 8px 20px rgba(0,0,0,.6); } .skc[hidden] { display: none; } .skc-tabs { display: flex; align-items: center; gap: 6px; } .skc-tab { padding: 4px 10px 5px; border: 0; border-bottom: 3px solid transparent; background: none; font: 700 19px/1 var(--f-hand); color: var(--ink-soft); cursor: pointer; } .skc-tab.on { color: var(--ink); border-bottom-color: var(--pen-red); } .skc-hide { margin-left: auto; padding: 4px 6px; border: 0; background: none; font: 700 16px/1 var(--f-hand); color: var(--ink-soft); cursor: pointer; } .skc-lines, .skc-tally { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 2px; overscroll-behavior: contain; } .skc-lines[hidden], .skc-tally[hidden], .skc-form[hidden] { display: none; } .skc-line { font: 15px/1.25 var(--f-text); overflow-wrap: anywhere; } .skc-line b { font-weight: 700; } .skc-line.ours b { color: #2c6b35; } .skc-line.theirs b { color: #a3291f; } .skc-note { margin: auto 0; text-align: center; font: 700 18px/1.2 var(--f-hand); color: var(--ink-soft); } .skc-form { display: flex; gap: 6px; } .skc-input { flex: 1; min-width: 0; padding: 6px 8px; border: 2px solid rgba(0,0,0,.3); border-radius: 3px; background: #fbf7ea; font: 16px/1.2 var(--f-text); color: var(--ink); } .skc-input:focus { outline: none; border-color: var(--pen-red); } .skc-send { flex: none; padding: 5px 12px; border: 2.5px solid var(--pen-red); border-radius: 52% 48% 55% 45% / 58% 45% 55% 42%; background: none; font: 700 19px/1 var(--f-hand); color: var(--pen-red); cursor: pointer; } .skc-h { margin-top: 4px; font: 700 13px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); } .skc-pair { padding: 3px 6px 4px; border-left: 3px solid rgba(0,0,0,.25); background: rgba(0,0,0,.04); } .skc-pair.ours { border-left-color: #3f8f4a; } .skc-pair.theirs { border-left-color: #c2372b; } .skc-who { font: 15px/1.2 var(--f-text); overflow-wrap: anywhere; } .skc-who small { color: var(--ink-soft); } .skc-nums { font: 13.5px/1.2 var(--f-text); color: var(--ink-soft); } .skc-hit { font: 13.5px/1.25 var(--f-text); } .skc-hit.ours { color: #2c6b35; } .skc-hit.theirs { color: #a3291f; } .tall .skc { left: 6px; right: 6px; width: auto; top: auto; bottom: 92px; height: 58%; transform: none; } .tall .skc-open { font-size: 16px; padding: 4px 10px 5px; } .short .skc { top: 50px; bottom: 54px; } /* ---------- capt the new way: a first-person duel and the board (system 10, decision 35) ---------- The duel — the boss fight frame (.fp, app.js: fightShell in capt mode): the opponent in the middle, the hand on the right, on the left name, health and a sheet with the crew breakdown. Capt's own: the turn timer — a big digit beside the opponent's head (owner: «цифру убери с головы куда-нибудь в сторону»), hits — two slips under the big thumb, breath as circles, the «с ноги» sole. The board — for those waiting to go out, knocked out or watching: crews with fighters and who fights whom. The wasteland is drawn by CSS, as with stenka. Portrait layout — at the end of the section. */ .kp { position: absolute; inset: 0; overflow: hidden; color: var(--text); background: radial-gradient(ellipse 55% 26% at 50% 50%, rgba(255,196,110,.20), transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px), linear-gradient(#18202c 0%, #332d3a 34%, #5d4235 47%, #2b2925 52%, #191816 100%); } .fly.good { color: var(--green); } /* The wasteland at the arena as a picture (as with stenka): in a duel — dimmed at the edges, on the board — darker, so crews and fighters read. */ .kp.photo { background: radial-gradient(ellipse 80% 75% at 50% 55%, transparent 40%, rgba(8,9,10,.55)), var(--pustyr) 50% 36% / cover no-repeat, #14161d; } .kp.photo:not(.duel) { background: linear-gradient(rgba(8,9,10,.62), rgba(8,9,10,.74)), var(--pustyr) 50% 36% / cover no-repeat, #14161d; } /* Opponent-player: the doll in full height, visible to the waist — its top is stretched to the boss's frame, the face where the boss's is (26 % of the height). */ .kp-figure { position: relative; width: 100%; height: 100%; overflow: hidden; filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); } /* The drawn guy (guy.js): cut only below (the legs), his punching fist flies past the sides and the top. */ .kp-figure.guyfig { overflow: visible; clip-path: inset(-200% -200% 0 -200%); } .kp-doll { position: absolute; left: 50%; top: 6%; height: 182%; aspect-ratio: 2 / 3; transform: translateX(-50%); } .kp-doll .layer { position: absolute; inset: 0; width: 100%; height: 100%; } .kp-doll .ph { border-radius: 14px 14px 0 0; } /* Turn timer: a digit beside the head, appears big, shrinks and fades. Chose a hit — dim: waiting for the opponent. */ .kp-count { position: absolute; left: calc(47% + 58px); top: 46px; z-index: 4; width: 100px; height: 124px; pointer-events: none; display: flex; align-items: center; justify-content: center; transition: opacity .15s, scale .15s; } .kp-count.dim { opacity: .4; scale: .62; } .kp-digit { font: 700 124px/1 var(--f-print); color: #fff7e0; text-shadow: 0 5px 0 #000, 0 0 26px rgba(0,0,0,.7); font-variant-numeric: tabular-nums; animation: kp-tick .98s ease-in forwards; } .kp-digit.hot { color: #ff6b61; } @keyframes kp-tick { 0% { transform: scale(1.15); opacity: 1; } 70% { opacity: .85; } 100% { transform: scale(.3); opacity: 0; } } /* «С ноги»: a sole flies from below into the opponent's chest (app.js, captKick); while it isn't flying — it isn't visible. */ .kp-boot { position: absolute; left: 50%; top: 50%; z-index: 3; width: 130px; height: 234px; opacity: 0; pointer-events: none; transform: translate(-40%, 140%); filter: drop-shadow(0 8px 10px rgba(0,0,0,.6)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 270'%3E%3Cpath d='M75 6C112 6 138 34 138 82C138 118 124 140 120 168C116 196 128 214 126 236C124 256 104 266 75 266C46 266 26 256 24 236C22 214 34 196 30 168C26 140 12 118 12 82C12 34 38 6 75 6Z' fill='%23f1ede2' stroke='%2316130e' stroke-width='5'/%3E%3Cpath d='M75 20C104 20 124 44 124 82C124 112 112 132 108 162C105 188 114 210 112 232C110 246 96 252 75 252C54 252 40 246 38 232C36 210 45 188 42 162C38 132 26 112 26 82C26 44 46 20 75 20Z' fill='%2326282d'/%3E%3Cg stroke='%2347494f' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M44 60H106M40 82H110M42 104H108M50 126H100M52 196H98M50 216H100M54 236H96'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; } .handheld .kp-boot { filter: none; } /* phones: no filter on a moving layer */ /* Hits — slips at bottom right, under the big thumb; the chosen one — yellow. */ .kp-fight .fp-side { bottom: 72px; } .kp-fight .fp-hint:empty, .kp-fight .fp-log:empty { display: none; } .kp-fight .fp-ladder { right: 250px; gap: 5px; } .kp-tag { min-width: 0; max-width: 100%; padding: 2px 8px 3px; font: 700 13px/1.1 var(--f-text); color: #f3ecd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(0,0,0,.55); } .kp-tag.hot { color: #ff8a7e; } /* A neighboring duel: a narrow chip — our guy's nick, his health over his opponent's (the board's colors); four stand in one row. A duel of two other sides is grey. */ .kp-pair { flex: none; display: flex; flex-direction: column; gap: 2px; width: 66px; padding: 2px 6px 4px; background: rgba(0,0,0,.55); } .kp-pair b { font: 700 15px/1.05 var(--f-hand); color: #d8d2c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kp-pair.ours b { color: #c3e6ab; } .kp-pair .sk-hp { height: 5px; background: rgba(255,255,255,.14); } .kp-pair .sk-hp i { background: #cfc8b8; } .kp-pair.ours .sk-hp i { background: linear-gradient(90deg, #2f8a3c, var(--green)); } .kp-pair.ours .sk-hp.them i { background: linear-gradient(90deg, #9c2a23, var(--red)); } /* ---- «Бой 2.0» (system 21): the moves are bottle caps by the thumb ---- Each move is a beer cap: tin with a crimped rim, the move drawn in ink in the middle (art move/, until then an SVG), its breath cost as notches across the top of the cap that light up blue as breath comes, the name under it in marker. A cap not paid for yet is pale; the chosen one (capt) has a gold ring; the one the moment asks for (the block against an announced swing) blinks red three times. Over the boss — what he is about to do, on a red scrap: «Замахивается!»; gold when he is open. */ .mv-caps { position: absolute; right: 10px; bottom: 8px; z-index: 6; display: flex; align-items: flex-end; gap: 4px; } .mv-caps:empty, .mv-breath:empty { display: none; } .mv-cap { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 62px; padding: 0; border: 0; background: none; color: inherit; touch-action: none; -webkit-tap-highlight-color: transparent; } .mv-tin { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; isolation: isolate; background: repeating-conic-gradient(from 4deg, #7d735f 0 9deg, #d6ccb4 9deg 17deg); /* the crimped rim: teeth of tin */ box-shadow: 0 3px 5px rgba(0,0,0,.6); } /* the cap's face inside the rim (the cap not paid for yet is .dry: the stage's own .short is another thing) */ .mv-tin::before { content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fffaf0 0 14%, #e3dac4 40%, #b9ae95 75%, #8d836e 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.35), inset 0 -2px 3px rgba(0,0,0,.25); } /* The weapon's cooldown (app.js, weaponCool): the caps go dark as a blow leaves, the light comes back round them like a clock hand. */ @property --cool-done { syntax: ""; inherits: false; initial-value: 0deg; } .fp.spent .mv-tin::after, .fp.cooling .mv-tin::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none; background: conic-gradient(transparent var(--cool-done), rgba(14,11,8,.74) 0); } .fp.cooling .mv-tin::after { animation: mv-cool var(--cool, 1.5s) linear both; } @keyframes mv-cool { from { --cool-done: 0deg; } to { --cool-done: 360deg; } } .mv-pic { display: grid; place-items: center; width: 38px; height: 38px; } .mv-pic.art { object-fit: contain; } .mv-ink { width: 100%; height: 100%; fill: #f4ecd8; stroke: #2a241d; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .mv-cost { position: absolute; top: 5px; left: 50%; display: flex; gap: 3px; transform: translateX(-50%); } .mv-cost i { width: 6px; height: 6px; border-radius: 50%; background: rgba(42,36,29,.45); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); } .mv-cost i.on { background: #6cc4ff; box-shadow: 0 0 4px rgba(108,196,255,.9); } .mv-cap b { font: 700 14px/1 var(--f-hand); color: #f6efdc; white-space: nowrap; text-shadow: 0 1px 0 #000, 0 0 3px #000, 1px 0 2px #000, -1px 0 2px #000; } .mv-cap.dry .mv-tin { background: repeating-conic-gradient(from 4deg, #4e4a43 0 9deg, #8f897d 9deg 17deg); } .mv-cap.dry .mv-tin::before { background: radial-gradient(circle at 36% 30%, #d9d4ca 0 14%, #aaa497 40%, #7c776c 75%, #57534b 100%); } .mv-cap.dry .mv-ink { fill: #c9c2b2; stroke: #3a352e; } .mv-cap.dry b { color: #b9b2a2; } .mv-cap:disabled { opacity: .45; } .mv-cap:not(:disabled):active .mv-tin { translate: 0 2px; box-shadow: 0 1px 2px rgba(0,0,0,.6), inset 0 -2px 3px rgba(0,0,0,.25); } .mv-cap:focus-visible { outline: none; } .mv-cap:focus-visible .mv-tin { box-shadow: 0 0 0 3px #fff, 0 3px 5px rgba(0,0,0,.6); } .mv-cap.picked .mv-tin { box-shadow: 0 0 0 3px var(--seeds), 0 0 12px rgba(242,194,48,.7), 0 3px 5px rgba(0,0,0,.6); } .mv-cap.picked b { color: var(--seeds); } .mv-cap.hint .mv-tin { animation: mv-hint .45s ease-in-out 6 alternate; } @keyframes mv-hint { from { box-shadow: 0 3px 5px rgba(0,0,0,.6); } to { box-shadow: 0 0 0 4px #e2533f, 0 0 14px rgba(226,83,63,.8), 0 3px 5px rgba(0,0,0,.6); } } .mv-breath { position: absolute; right: 12px; bottom: 90px; z-index: 6; padding: 3px 8px 4px; border-radius: 4px; background: rgba(0,0,0,.55); } .mv-breath i { width: 13px; height: 13px; } .fp.moves .fp-fishka { bottom: 122px; } /* The caps take the bottom right corner and the sheet the left: the hint (the tape) stands in the middle right above the caps row, the fight lines above it — one column clear of both, and a hint in two lines still does not reach the lines. */ .fp.moves .fp-hint { left: calc(50% + 10px); bottom: 84px; max-width: min(360px, calc(100% - 460px)); white-space: normal; line-height: 1.05; text-align: center; } .fp.moves .fp-log { left: calc(50% + 10px); bottom: 134px; width: min(340px, calc(100% - 440px)); } .fp-tell { position: absolute; left: 47%; top: 21%; z-index: 4; transform: translateX(-50%) rotate(-5deg); pointer-events: none; padding: 3px 14px 6px; font: 700 27px/1 var(--f-hand); color: #fff; letter-spacing: .5px; text-shadow: 0 2px 0 rgba(0,0,0,.35); background: #c0392b; clip-path: polygon(0 8%, 6% 0, 94% 3%, 100% 14%, 97% 90%, 90% 100%, 4% 96%, 1% 86%); } .fp-tell:empty { display: none; } .fp-tell.open { background: var(--seeds); color: #2b2000; text-shadow: none; transform: translateX(-50%) rotate(3deg); } /* The angry boss («Бой 2.0», step 3): his guard — cold slate; a trick — sand; a series — sand with the swing's red under it. */ .fp-tell.guard { background: #5d6d7e; transform: translateX(-50%) rotate(2deg); } .fp-tell.trick { background: #c9a25a; color: #2e2108; text-shadow: none; transform: translateX(-50%) rotate(-3deg); } .fp-tell.series { background: #c9a25a; color: #2e2108; text-shadow: none; box-shadow: inset 0 -5px 0 #c0392b; } /* He leans back into his guard while «Прикрылся» hangs over him (transform only: no filters on phones). */ .fp-boss-artbox { transition: transform .2s ease-out; transform-origin: 50% 100%; } .fp-boss-artbox.covering { transform: translateY(2%) scale(.96); } /* His trick landed: a handful of sand flies into your face. */ .sand-puff { position: fixed; z-index: 26; width: 0; height: 0; pointer-events: none; } .sand-puff i { position: absolute; width: calc(5px * var(--s)); height: calc(5px * var(--s)); margin: calc(-2.5px * var(--s)); border-radius: 50%; background: #c9a25a; animation: sand-puff .65s ease-out forwards; } .sand-puff i:nth-child(3n) { background: #8d6b2f; } @keyframes sand-puff { from { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateX(calc(var(--d) * var(--s))) scale(2.6); opacity: 0; } } .fp-tell.pop { animation: fp-tell-pop .4s cubic-bezier(.2,1.6,.4,1); } @keyframes fp-tell-pop { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } } /* The capt: breath sits over its health, as before; the turn digit and «Базар» make room for the caps. */ .kp-fight .mv-breath { left: 10px; right: auto; bottom: 40px; } .short .mv-caps { gap: 2px; } .short .mv-cap { width: 58px; } .short .mv-tin { width: 50px; height: 50px; } .short .mv-pic { width: 34px; height: 34px; } /* «Бой 2.0», step 4: the tracksuit's pockets with fight supplies, left of the caps on the same line. Navy fabric, a white stitch, the zipper on top with a pull (green — a heal, orange — a chem); inside — the supply's picture and a tape with how many are in the stash. Spent this fight — turned out (pale lining, «пусто»; a chem still working — orange, its time left); nothing put in — «пусто» in chalk. */ .fp-pockets { position: absolute; right: calc(10px + 326px + 14px); bottom: 8px; z-index: 6; display: flex; align-items: flex-end; gap: 6px; } .fp-pockets:empty { display: none; } .fp-pockets.off .kr { opacity: .55; } /* «Первые шаги»: the кореш's аптечка in the training capt, lit up while it hurts. */ .fp-pockets.tut-lent .kr.heal:not(.spent) .kr-bag { outline: 3px solid #e2533f; outline-offset: 2px; animation: tutLent .7s ease-in-out infinite alternate; } @keyframes tutLent { to { transform: scale(1.08); } } .kr { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0; border: 0; background: none; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .kr b { font: 700 14px/1 var(--f-hand); color: #f6efdc; white-space: nowrap; text-shadow: 0 1px 0 #000, 0 0 3px #000, 1px 0 2px #000, -1px 0 2px #000; } .kr-bag { position: relative; display: grid; place-items: center; width: 52px; height: 56px; border-radius: 4px 4px 9px 9px; background: linear-gradient(#26355a, #1b2744); box-shadow: inset 0 0 0 3px #1b2744, inset 0 0 0 4px rgba(232,226,204,.85), 0 3px 5px rgba(0,0,0,.55); color: #ece5cf; } /* the stitch: a dashed seam inside the edge */ .kr-bag::before { content: ""; position: absolute; inset: 6px 5px 5px; border: 1.5px dashed rgba(232,226,204,.55); border-radius: 2px 2px 6px 6px; pointer-events: none; } .kr-zip { position: absolute; left: 6px; right: 6px; top: 4px; height: 5px; border-radius: 2px; background: repeating-linear-gradient(90deg, #b9b2a0 0 2px, #4a4a4a 2px 4px); } .kr-zip::after { content: ""; position: absolute; right: -3px; top: -2px; width: 7px; height: 12px; border-radius: 2px; background: #c9c2ae; box-shadow: 0 1px 2px rgba(0,0,0,.6); } .kr.heal .kr-zip::after { background: #6fbf4a; } .kr.chem .kr-zip::after { background: #e8892a; } .kr-pic { display: grid; place-items: center; width: 36px; height: 36px; margin-top: 6px; } .kr-pic.art { object-fit: contain; } .kr .sp-ink { fill: #3c4f7a; stroke: #f1ead6; } .kr-none { margin-top: 6px; font: 700 14px/1 var(--f-hand); color: rgba(236,229,207,.7); white-space: nowrap; } .kr-count { position: absolute; right: -5px; bottom: -4px; min-width: 20px; padding: 1px 4px 2px; transform: rotate(-4deg); font: 700 14px/1 var(--f-hand); color: #1d1a16; text-align: center; white-space: nowrap; background: #f4ecd4; box-shadow: 0 1px 2px rgba(0,0,0,.5); } .kr.spent .kr-bag { background: linear-gradient(#ddd3bb, #c9bea3); box-shadow: inset 0 0 0 3px #c9bea3, inset 0 0 0 4px rgba(74,64,48,.5), 0 3px 5px rgba(0,0,0,.45); } .kr.spent .kr-bag::before { border-color: rgba(74,64,48,.45); } .kr.spent b, .kr.empty b { color: #b9b2a2; } .kr.spent .kr-none { color: #6c604a; } .kr.out .kr-pic { opacity: .4; } .kr.out .kr-count { background: #c9bea3; color: #7a2a20; } .kr:not(.spent):active .kr-bag { translate: 0 2px; box-shadow: inset 0 0 0 3px #1b2744, inset 0 0 0 4px rgba(232,226,204,.85), 0 1px 2px rgba(0,0,0,.55); } .kr:focus-visible { outline: none; } .kr:focus-visible .kr-bag { outline: 3px solid #fff; outline-offset: 2px; } /* a spent chem still working: its lining is warm orange and says how long */ .kr.spent.lasts .kr-bag { background: linear-gradient(#f3c27a, #e39b3c); } .kr.spent.lasts .kr-none { color: #3b1d00; font-size: 12px; white-space: normal; text-align: center; line-height: .95; padding: 0 3px; } /* a chem still working whose pocket was refilled: a small orange tape beside the pockets */ .kr-stray { align-self: center; max-width: 64px; padding: 2px 5px 3px; font: 700 12px/1 var(--f-hand); color: #2b1600; background: #f0a23a; transform: rotate(-3deg); box-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none; } .kr-stray:empty { display: none; } .mv-breath i.more, .sk-breath i.more { box-shadow: 0 0 0 1.5px #f0a23a; } .fly.chem { color: #f0a23a; } /* Breath caught against a boss (breathFly): the number in the notches' blue, the notches swell once. */ .fly.breath { color: #8fd3ff; } .mv-breath.sk-gain { animation: mv-gain .6s ease-out; } @keyframes mv-gain { 30% { scale: 1.18; box-shadow: 0 0 12px rgba(143,211,255,.75); } } .short .fp-pockets { right: calc(10px + 298px + 12px); } .short .kr-bag { width: 48px; height: 52px; } .short .kr-pic { width: 32px; height: 32px; } /* the stenka has three caps */ .sk .fp-pockets { right: calc(10px + 194px + 14px); } .short .sk .fp-pockets { right: calc(10px + 178px + 12px); } .sk.kr-on .sk-caps { bottom: 88px; } /* the fight lines step over the pockets (three of them reach under the lines) */ .sk.kr-on .sk-say.strip { bottom: 150px; } /* and the start strip over the lines */ .short .sk.kr-on .sk-caps { bottom: 80px; } /* a narrow stage: the fight lines step over the pockets */ .short .sk.kr-on .sk-say.strip { bottom: 140px; } /* the kiosk notice and the stash: the same picture drawn in ink on paper */ .sp-pic { display: grid; place-items: center; width: 100%; height: 100%; } .sp-ink { width: 100%; height: 100%; fill: #f4ecd8; stroke: #2a241d; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .good.supply.heal .sp-ink { fill: #dcefc9; } .good.supply.chem .sp-ink { fill: #f8dcb6; } /* a chem works only in a fight, for a few turns: a pen note on the notice and on the card */ .good-only, .sp-only { font: 700 16px/1.05 var(--f-hand); color: #a8480c; text-align: center; } .sp-only { font-size: 19px; text-align: left; } .sp-buys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: auto; } .sp-buys .buy { margin-top: 0; padding: 6px 9px; } .modal-art .sp-pic.big { width: 110px; height: 110px; margin: auto; } .vs-sheet.brew .sp-ink { fill: #e6e0cf; } /* «Базар» and «Свалить» — slips left of the cross; the bazaar sheet — as with stenka. */ .kp-tools { position: absolute; right: 60px; top: 9px; z-index: 6; display: flex; align-items: center; gap: 12px; } .kp-tools:empty { display: none; } .kp .skc { z-index: 7; bottom: 78px; } /* In a duel the bazaar sheet yields to the turn timer: it doesn't cover the digit beside the opponent's head. */ .kp.duel .skc { width: min(340px, calc(53% - 176px)); } /* Crews and fighters: on the duel sheet — on paper, on the board — on dark. */ .kp-crew { display: flex; flex-direction: column; gap: 3px; } .kp-crew + .kp-crew { margin-top: 5px; } .kp-crew.out { opacity: .6; } .kp-crew-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .kp-crew-head b { min-width: 0; font: 700 18px/1 var(--f-hand); color: #a3291f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kp-crew.mine .kp-crew-head b { color: #2c6b35; } .kp-crew-head span { flex: none; font: 12px/1 var(--f-text); color: var(--ink-soft); } .kp-crew-head em { flex: none; margin-left: auto; font: 700 11.5px/1 var(--f-print); font-style: normal; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-soft); } .kp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 3px; } .kp-chip { position: relative; min-width: 0; padding: 2px 5px 3px; color: var(--ink); background: rgba(255,255,255,.4); border-top: 3px solid #c2372b; } .kp-crew.mine .kp-chip { border-top-color: #3f8f4a; } .kp-chip b { display: block; font: 700 14.5px/1 var(--f-hand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kp-chip em { position: absolute; right: 3px; top: 1px; font: 700 11px/1 var(--f-text); font-style: normal; color: var(--pen-red); } .kp-chip i { display: block; height: 4px; margin-top: 2px; background: rgba(0,0,0,.25); } .kp-chip u { display: block; height: 100%; background: #a3291f; transition: width .25s ease-out; } .kp-crew.mine .kp-chip u { background: #2f8a3c; } .kp-chip small { display: block; margin-top: 1px; font: 11px/1 var(--f-text); color: var(--ink-soft); } .kp-chip.fight { box-shadow: 0 0 0 2px var(--seeds); } .kp-chip.me b { color: var(--pen-red); } .kp-chip.out, .kp-chip.left { opacity: .5; filter: grayscale(1); } .kp-chip.out b, .kp-chip.left b { text-decoration: line-through; } .kp-sheet .h2 { margin-bottom: 2px; } /* Board: on top the point and clock, what's happening, who fights whom and the crews; at the bottom — your health and breath. */ .kp-board { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 10px; overflow: hidden; } .kp-head { display: flex; align-items: center; gap: 6px 14px; min-height: 40px; padding-right: 250px; } .kp-title { display: flex; flex-direction: column; gap: 1px; padding: 3px 12px 4px; color: var(--ink); transform: rotate(-1deg); box-shadow: 0 2px 4px rgba(0,0,0,.5); } .kp-title b { font: 700 19px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; } .kp-title small { font: 700 14px/1 var(--f-hand); color: var(--ink-soft); } .kp-rage { font: 700 17px/1 var(--f-hand); color: #ff8a7e; text-shadow: 0 1px 2px #000; } .kp-msg { align-self: center; max-width: 640px; text-align: center; font: 700 20px/1.15 var(--f-hand); color: #f3ecd9; text-shadow: 0 2px 2px #000; } .kp-msg:empty { display: none; } .kp-rules { align-self: center; max-width: 640px; text-align: center; font: 14px/1.3 var(--f-text); color: #d8d2c4; text-shadow: 0 1px 2px #000; } .kp-msg.paper.big { margin: auto; padding: 8px 16px 9px; font-size: 22px; color: var(--ink); text-shadow: none; transform: rotate(-1deg); box-shadow: 0 6px 14px rgba(0,0,0,.5); } .kp-head ~ .kp-msg.paper.big { margin: 0; } .kp-cols { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: start; align-content: start; scrollbar-width: none; } .kp-cols::-webkit-scrollbar { display: none; } .kp-cols > :only-child { grid-column: 1 / -1; } .kp-h { font: 700 13px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; color: #b9b2a2; } .kp-duels { display: flex; flex-direction: column; gap: 6px; } .kp-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 3px 8px; padding: 5px 8px 6px; border-left: 4px solid rgba(255,255,255,.2); background: rgba(0,0,0,.45); } .kp-duel.mine { border-left-color: var(--seeds); } .kp-duel em { font: 12px/1 var(--f-text); font-style: normal; color: #b9b2a2; } .kp-side { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kp-side b { font: 700 18px/1 var(--f-hand); color: #ffb8ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kp-side.ours b { color: #c3e6ab; } .kp-side .sk-hp i { background: linear-gradient(90deg, #9c2a23, var(--red)); } .kp-side.ours .sk-hp i { background: linear-gradient(90deg, #2f8a3c, var(--green)); } .kp-duel-note { grid-column: 1 / -1; font: 13px/1.2 var(--f-text); color: #d8d2c4; } .kp-roster { display: flex; flex-direction: column; gap: 8px; } .kp-board .kp-crew + .kp-crew { margin-top: 0; } .kp-board .kp-crew-head b { font-size: 20px; color: #ffb8ad; } .kp-board .kp-crew.mine .kp-crew-head b { color: #c3e6ab; } .kp-board .kp-crew-head span, .kp-board .kp-crew-head em { color: #b9b2a2; } .kp-board .kp-chips { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 5px; } .kp-board .kp-chip { padding: 3px 7px 4px; background: rgba(236,226,196,.94); box-shadow: 0 2px 4px rgba(0,0,0,.5); } .kp-board .kp-chip b { font-size: 16.5px; } .kp-board .kp-chip.fight { box-shadow: 0 0 0 2px var(--seeds), 0 2px 4px rgba(0,0,0,.5); } .kp-mine { display: flex; align-items: center; gap: 14px; padding: 6px 12px; border-radius: 6px; background: rgba(0,0,0,.5); } .short .kp-digit { font-size: 108px; } .short .kp-board { gap: 5px; padding: 6px 10px 8px; } .short .kp-msg { font-size: 18px; } /* Five pairs at once («Бой 2.0»): on a landscape phone the duel rows are tighter, so that all five fit under «Сейчас дерутся». */ .short .kp-duel { gap: 2px 8px; padding: 3px 8px 4px; } .short .kp-side b { font-size: 15.5px; } .short .kp-duel-note { font-size: 11.5px; line-height: 1.05; } @media (prefers-reduced-motion: reduce) { .kp-digit { animation: none; opacity: .85; } } /* portrait: timer — right of the head, under the column with the name; hits — full width above your health, above them breath and slips; the board — one column */ .tall .kp-count { left: auto; right: 8px; top: calc(var(--fp-top, 220px) + 2px); width: 108px; height: 118px; } .tall .fp-tell { top: calc(var(--fp-top, 220px) + 18px); left: 50%; } .tall .mv-caps { left: 8px; right: 8px; bottom: 38px; justify-content: space-between; gap: 0; } .tall .mv-cap { width: 19%; } .tall .mv-breath { left: 8px; right: auto; bottom: 124px; } .tall .fp.moves .fp-hint { bottom: 126px; left: auto; right: 8px; max-width: calc(100% - 156px); transform: none; white-space: normal; text-align: right; line-height: 1.05; } .tall .fp.moves .fp-low { bottom: 172px; } /* above a hint in two lines */ .tall .fp.moves .fp-log { bottom: 172px; } .tall .fp.moves .fp-low > .fp-log { width: 100%; } .tall .kp-fight.moves .fp-hint { bottom: 156px; } .tall .kp-fight.moves .fp-low { bottom: 202px; } /* the pockets standing: above the breath at the left; the fight lines and the slipper's tag step up over them */ .tall .fp-pockets { left: 8px; right: auto; bottom: 150px; } .tall .fp.moves.kr-on .fp-low, .tall .fp.moves.kr-on .fp-log { bottom: 228px; } .tall .kp-fight.moves.kr-on .fp-low { bottom: 244px; } .tall .fp.moves.kr-on .fp-hint, .tall .kp-fight.moves.kr-on .fp-hint { max-width: calc(100% - 210px); } /* three pockets end at 184 */ .tall .sk.kr-on .sk-caps { bottom: 232px; } .tall .sk.kr-on .sk-say.strip { bottom: 300px; } .tall .kp-digit { font-size: 112px; } .tall .kp.duel .kp-tools { top: auto; right: 8px; bottom: 110px; } .tall .kp-fight .fp-side { bottom: auto; } .tall .kp-fight .fp-side > .fp-ladder { flex-wrap: wrap; row-gap: 4px; padding: 2px 0 0; } .tall .kp-fight .fp-low > .fp-log { min-height: 0; } .tall .kp-tag { font-size: 13.5px; } .tall .kp-pair { width: 60px; } .tall .kp .skc { bottom: 150px; height: 52%; } .tall .kp.duel .skc { width: auto; height: auto; top: min(calc(var(--fp-top, 220px) + 128px), calc(100% - 350px)); } .tall .kp-tools { top: auto; right: 8px; bottom: 9px; } .tall .kp-board { gap: 6px; padding: 8px 8px 52px; } .tall .kp-head { flex-wrap: wrap; padding-right: 46px; } .tall .kp-title b { font-size: 17px; } .tall .kp-msg { font-size: 18px; } .tall .kp-msg.paper.big { font-size: 20px; } .tall .kp-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; } .tall .kp-mine { flex-wrap: wrap; gap: 6px 10px; padding: 6px 8px; } .tall .kp-mine .sk-me { flex-basis: 100%; order: 3; } /* ---------- city: a live 3D map full screen (system 10) ---------- The canvas — webapp/city.js (its own label style — inside the module, under .cty); here — the header (a black strip, like the game's), the note «едем», the list of points (if 3D didn't start) and the zone sheet — paper on tape at the bottom. */ .cty-win { position: absolute; inset: 0; overflow: hidden; background: #dfe4e7; color: var(--ink); } .cty-map, .cty-host { position: absolute; inset: 0; } .cty-map[hidden] { display: none; } .cty-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 56px 7px 10px; color: #eceae4; background: #17140f repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px); box-shadow: 0 3px 0 #000, 0 6px 14px rgba(0,0,0,.35); } .cty-title { display: flex; flex-direction: column; gap: 1px; padding: 3px 10px 4px; transform: rotate(-1deg); color: var(--ink); } .cty-title b { font: 700 20px/1 var(--f-print); letter-spacing: 2px; text-transform: uppercase; } .cty-title small { font: 700 14px/1.05 var(--f-hand); color: var(--ink-soft); } .cty-crews { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; } .cty-crew { display: flex; align-items: center; gap: 5px; font: 700 18px/1 var(--f-hand); white-space: nowrap; } .cty-crew i { width: 12px; height: 16px; flex: none; background: var(--c); clip-path: polygon(0 0, 100% 12%, 70% 38%, 100% 64%, 0 70%); } .cty-crew em { font: 13px/1 var(--f-text); font-style: normal; color: #b9b2a2; } .cty-crew.mine b { box-shadow: inset 0 -3px 0 var(--c); } .cty-crew.none { font: 15px/1.1 var(--f-text); color: #b9b2a2; } .cty-btns { margin-left: auto; flex: none; display: flex; align-items: center; gap: 9px; } .cty-mode { position: relative; flex: none; padding: 4px 11px 5px; font: 700 17px/1 var(--f-hand); color: var(--ink); transform: rotate(1.5deg); box-shadow: 0 2px 3px rgba(0,0,0,.5); } .cty-mode:first-child { transform: rotate(-1.2deg); } .cty-mode.on { box-shadow: 0 0 0 2px var(--pen-red), 0 2px 3px rgba(0,0,0,.5); } .cty-hot { position: absolute; right: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #17140f; } .cty-note { position: absolute; left: 50%; top: 50%; z-index: 6; max-width: calc(100% - 32px); padding: 10px 18px 12px; text-align: center; font: 700 23px/1.15 var(--f-hand); transform: translate(-50%, -50%) rotate(-1deg); box-shadow: 0 8px 20px rgba(0,0,0,.35); } .cty-note[hidden] { display: none; } .cty-list { position: absolute; left: 0; right: 0; top: 60px; bottom: 0; z-index: 4; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; align-content: start; padding: 12px; background: linear-gradient(#2a2e34, #1c1f23); } .cty-list[hidden] { display: none; } .cty-broken { grid-column: 1 / -1; font: 700 18px/1.2 var(--f-hand); color: #f3ecd9; } .cty-row { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 10px 9px; text-align: left; border-left: 7px solid var(--c, #8a8f96); color: var(--ink); box-shadow: 0 3px 6px rgba(0,0,0,.45); cursor: pointer; } .cty-row:nth-child(2n) { transform: rotate(.5deg); } .cty-row.sel { outline: 2.5px solid var(--pen-red); outline-offset: 1px; } .cty-row b { font: 700 19px/1.05 var(--f-hand); } .cty-row span { font: 14px/1.15 var(--f-text); color: var(--ink-soft); } .cty-row em { font: 700 14px/1 var(--f-print); font-style: normal; letter-spacing: .5px; text-transform: uppercase; color: var(--pen-red); } .cty-row em.soon { color: var(--ink-soft); } .cty-card { position: absolute; z-index: 7; left: 12px; bottom: 12px; width: min(400px, calc(100% - 24px)); max-height: calc(100% - 84px); overflow-y: auto; padding: 14px 16px 14px; transform: rotate(-.4deg); box-shadow: 0 10px 22px rgba(0,0,0,.35); overscroll-behavior: contain; } .cty-card[hidden] { display: none; } .cty-card h2 { margin: 0 34px 6px 0; font: 700 21px/1.05 var(--f-print); letter-spacing: 1.2px; text-transform: uppercase; text-wrap: balance; } .cty-card p { margin: 6px 0 0; font: 15.5px/1.3 var(--f-text); } .cty-card .row { margin-top: 10px; } .cty-x { position: absolute; right: 6px; top: 4px; width: 34px; height: 34px; border: 0; background: none; cursor: pointer; font: 700 28px/1 var(--f-hand); color: var(--ink); } .cty-who { display: flex; align-items: center; gap: 7px; font: 700 20px/1.1 var(--f-hand); } .cty-flag { width: 14px; height: 19px; flex: none; background: var(--c); clip-path: polygon(0 0, 100% 12%, 70% 38%, 100% 64%, 0 70%); } .cty-flavor { font-style: italic; color: var(--ink-soft); } .cty-guard { color: var(--pen-red); font: 700 18px/1.15 var(--f-hand) !important; } .cty-capt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; padding: 5px 8px 6px; border-left: 4px solid rgba(0,0,0,.25); background: rgba(0,0,0,.04); font: 14.5px/1.2 var(--f-text); } .cty-capt.hot { border-left-color: var(--pen-red); background: rgba(184,36,26,.08); } .cty-capt b { font: 700 17px/1.05 var(--f-hand); color: var(--pen-red); } .cty-h { margin-top: 10px; font: 700 14px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); } /* layout: capts of the city (tap — to the point) and crews with a flag of their color */ .cty-go { width: 100%; text-align: left; color: var(--ink); cursor: pointer; } .cty-go.mine { box-shadow: inset -4px 0 0 var(--seeds); } .cty-brow { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 8px; margin-top: 8px; padding: 6px 8px 7px; border-left: 4px solid var(--c); background: rgba(0,0,0,.04); font: 14.5px/1.2 var(--f-text); } .cty-brow > * { grid-column: 2; } .cty-brow > .cty-flag { grid-column: 1; grid-row: 1; margin-top: 2px; } .cty-brow.mine { background: rgba(184,36,26,.07); } .cty-bname em.master { color: #8a6a00; } /* The week in the city (decision 72): place, crew, days on points — a line each, like a score sheet. */ .cty-stand { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: baseline; gap: 6px; margin-top: 4px; padding: 2px 6px; font: 17px/1.15 var(--f-hand); color: var(--ink); } .cty-stand b { color: var(--pen-red); } .cty-stand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cty-stand em { font: 13.5px/1 var(--f-text); font-style: normal; color: var(--ink-soft); } .cty-stand.mine { background: rgba(184,36,26,.07); } .cty-bname { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .cty-bname b { font: 700 20px/1.05 var(--f-hand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cty-bname em { flex: none; font: 700 13px/1 var(--f-print); font-style: normal; letter-spacing: .5px; text-transform: uppercase; color: var(--pen-red); } .cty-bmeta { font-size: 13.5px; color: var(--ink-soft); } .cty-can { font-weight: 700; color: #2c6b35; } .cty-full { color: var(--ink-soft); } .cty-rules { font-size: 13.5px !important; color: var(--ink-soft); } .tall .cty-hud { gap: 5px 10px; padding: 6px 50px 6px 8px; } .tall .cty-title b { font-size: 17px; } .tall .cty-crew { font-size: 16px; } .tall .cty-list { top: 84px; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; } .tall .cty-card { left: 6px; right: 6px; bottom: 6px; width: auto; max-height: 60%; transform: none; } /* ---------- portrait: a scene 420 logical pixels wide and taller to fit the window (app.js, fitStage — class tall) ---------- The owner's decision 2026-09-25: phone in portrait — vertical, PC and phone in landscape — as it was. Header — in two lines: avatar, name with authority, beer with the phone and cash on top, energy, vigor and seeds below. Each window has its portrait layout — next to its section (.tall …); here — scene, header, «Остановка», buddy, card and the common window frame. */ .tall { --hud-h: 94px; border-radius: 0; } /* Three rows beside the porthole: the nick with the phone and cash; the authority bar across with the percent tag; понты with seeds and iron. hud-who, hud-name and hud-money dissolve (display: contents) so the grid places their children. The first column is the porthole: with a frame it is wider and the rows give way. The VIP plate stands under the porthole. */ .tall .hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto auto auto; gap: 4px 8px; align-items: center; padding: 5px 10px 6px 8px; } .tall .hud-money { display: contents; } /* The plates in portrait: the nick and the authority bar each on its own, fading to the right. */ .tall #hudName, .tall .hud-auth { padding: 3px 10px 3px 8px; margin-left: -4px; border-radius: 4px 14px 14px 4px; background: linear-gradient(90deg, rgba(8,7,5,.8), rgba(8,7,5,.62) 72%, rgba(8,7,5,0)); } .tall .hud-me { --av: 46px; --cap: 80px; grid-row: 1 / span 3; grid-column: 1; align-self: start; margin-top: 10px; } .tall .hud-who, .tall .hud-name { display: contents; } .tall .hud-name { font-size: 20px; } .tall #hudName { grid-row: 1; grid-column: 2; min-width: 0; align-self: stretch; align-items: center; } /* The last resort for a long nick in the narrow column (app.js, fitHudName): two lines of small letters, the row grows a little. */ .tall #hudName.wrap { white-space: normal; } .tall #hudName.wrap .nick { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.02; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tall .hud-free { grid-row: 1; grid-column: 3; flex: none; } /* The stash and the phone leave the nick's row for the right column under the gear (owner 2026-10-28, his red lines: «пустое место куда может влезть иконка телефона и предметов вертикально… что даст больше места для ника»): the phone by the authority bar, the stash by the iron; a little smaller so the rows keep their height. */ .tall .hud-kit { display: contents; } .tall .hud-phone { grid-row: 2; grid-column: 6; justify-self: center; } .tall .hud-beer { grid-row: 3; grid-column: 6; justify-self: center; margin-right: 0; } .tall #hudSet { justify-self: center; } .tall .money.cash { grid-row: 1; grid-column: 4; justify-self: end; } .tall .hud-auth { grid-row: 2; grid-column: 2 / span 3; } .tall .hud .bar em { display: block; } /* The VIP plate on top of the porthole, between the energy and vigor icons (owner 2026-10-13, on his phone: «Предлагаю перенести вип в левый верхний угол»): the third row keeps only понты, so seeds and iron no longer cover their number. hud-sub dissolves, its plate goes to понты; the guy's red dot leaves the porthole's top for the level tag's corner. */ .tall .hud-sub { display: contents; } .tall .hud-blat { grid-row: 1; grid-column: 1; justify-self: center; align-self: start; z-index: 3; } .tall #hudPonty { grid-row: 3; grid-column: 2; justify-self: start; padding: 2px 12px 2px 8px; margin-left: -4px; border-radius: 4px 12px 12px 4px; background: rgba(8,7,5,.7); } .tall .hud-me em { top: auto; bottom: 10px; margin-left: 7px; z-index: 3; } /* Seeds and iron span the nick's column too (owner 2026-10-28: the nick wrapped beside the empty room the phone had left): held to the cash's columns they made them as wide as themselves, and the nick's column got only what was left. */ .tall .hud-money-row { grid-row: 3; grid-column: 2 / span 3; justify-self: end; gap: 8px; } /* понты and the capsules met beside a wide VIP frame (app.js, fitHudMoney): smaller letters and icons in the row */ .tall .hud.tight .hud-money-row { gap: 5px; } .tall .hud.tight .hud-money-row .money { gap: 3px; font-size: 17px; padding-right: 7px; } .tall .hud.tight .hud-money-row .money.iron { padding-right: 2px; } .tall .hud.tight .hud-money-row .money .icon { width: 20px; height: 20px; } .tall .hud.tight #hudPonty { padding-right: 8px; font-size: 13px; } .tall .hud.tight #hudPonty b { font-size: 16px; } .tall .money { font-size: 20px; } .tall .money .icon { width: 24px; height: 24px; } .tall .hud-phone-label { display: none; } /* In the right column (.tall .hud-kit) they stand beside rows lower than themselves: smaller, and their spill over the row is taken back, so the header keeps the height it had with them in the nick's row. */ .tall .hud-phone { padding: 1px 5px 2px 4px; margin-block: -4px; } .tall .hud-phone .icon { width: 28px; height: 28px; } .tall .hud-beer { height: 30px; margin-block: -3px; } .tall .hud-beer .icon { width: 26px; height: 26px; } .tall .hud-blat .vip-badge { font-size: 16px; } /* Small phones (owner 2026-10-14, his screenshot: «значки… какие-то крупные и всё слитно особенно на уровне випки»): the VIP plate stands above the porthole instead of between the icons, the porthole steps down by its height; the icons are a fifth smaller (the same painted-area ratio, see .hud-gauge .icon) and keep the porthole's top corners, below the plate. */ .tall .hud.has-blat .hud-me { margin-top: 22px; } .tall .hud-gauge.energy .icon { left: -8px; top: -5px; width: 30px; height: 30px; } .tall .hud-gauge.vigor .icon { right: -7px; top: -5px; width: 24px; height: 24px; } /* «Остановка» in portrait: one column of icons at each edge, the player in the middle — as tall as the height gives. His picture is wider than the figure: the icon columns lie over it so that the doll's transparent edge doesn't eat a tap on an icon. */ .tall .map.hub { padding: 10px 8px 8px; column-gap: 2px; } .tall .hub-side { position: relative; z-index: 1; } /* «Рейтинг» a little lower in portrait: right under the header its cup touched the iron plate (owner 2026-10-18: «там рейтинг чуть ниже опустить нужно»). */ .tall .hub-side .hub-icon.rating { margin-top: 14px; } /* Columns — one; on a low screen the icons on the left don't all fit — app.js sets two (--cols). */ .tall .hub-grid { grid-template-columns: repeat(var(--cols, 1), calc(var(--ico, 60px) + 26px)); gap: 10px; } .tall .hub-icon-name { font-size: 12px; padding: 1px 5px 2px; } .tall .hub-icon.big .hub-icon-name { font-size: 16px; padding: 2px 10px 3px; } /* The number — on the picture, not on the caption: «На сегодня» in a narrow column goes into two lines. */ .tall .hub-icon .corner-tag { bottom: auto; top: calc(var(--ico, 60px) - 16px); } /* The buddy in portrait — smaller, the bubble by text and not to the right edge: bottom right «Обход» and «Дела», at the top — the window cross. He sits farther from the finger (say(), class atop — to the top, under the header): the bubble takes the tap, while taps go in a row — newspaper notes, obshchak buttons and gym (owner 2026-09-25: the buddy interfered with quickly tapping jobs). A case on a job (pinned) — full width: there they choose. */ .tall .say { left: 4px; right: 6px; bottom: 8px; } .tall .say-art { width: 92px; } .tall .say-art::after { bottom: 30px; } .tall .say-bubble { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 196px); margin-bottom: 16px; padding: 8px 11px; font-size: 14.5px; } .tall .say.atop { top: calc(var(--hud-h) + 6px); bottom: auto; } .tall .say.atop .say-bubble { max-width: calc(100% - 136px); } .tall .say.pinned .say-bubble { flex: 1 1 auto; max-width: none; } /* In a fight and in the phone (the stage without the header, nohud) the right edge holds nothing the bubble must spare, so it runs to the edge by its text (owner 2026-10-16, a fight result on his phone: «почему не до конца направо по всей ширине экрана… корявый перенос строки»); on top it still leaves the fight's cross alone. */ .tall.nohud .say:not(.atop) .say-bubble { max-width: none; } /* Crew HQ: the buddy doesn't cover the tabs — in portrait he stands above them (the bottom of the HQ), in landscape he sits right of the tab panel. */ .tall .say.over-tabs:not(.atop) { bottom: 104px; } .tall .say-phrase { font-size: 17px; } /* Portrait: one option a row, the label and its chips side by side, the notes a size smaller: the card stays a third of the screen, not the whole of it (owner 2026-10-18: «порой они слишком огромные что на весь экран разворачиваются»). */ .tall .case-opts { flex-direction: column; gap: 7px; } .tall .case-opt { min-height: 44px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; padding: 7px 12px 8px; } .tall .case-law, .tall .case-perk, .tall .case-fishka { font-size: 15px; line-height: 1.1; } /* «Переезд» in portrait: postcards in two columns, captions smaller. */ .tall .pz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; padding: 8px 4px 10px; } .tall .pz-name { font-size: 14px; } .tall .pz-bonus { font-size: 14px; } .tall .pz-way { font-size: 16px; } .tall .pz-sum-line { font-size: 18px; } .tall .modal-card.pz-modal { padding: 10px 10px 12px; } /* ---------- Лохотрон: a folding table by the market (system 13) ---------- Green cloth on a wooden rim, a cardboard sign in marker on top, two d20 drawn in code (app.js, lohoDie), the price list on a piece of cardboard leaning on the table from the right. In portrait the cardboard goes under the table and the window scrolls. */ .win.lohotron { max-width: 960px; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .win.lohotron > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.lohotron .win-body { padding: 4px 10px 8px 4px; overflow-y: auto; scrollbar-width: none; } .win.lohotron .win-body::-webkit-scrollbar { display: none; } .lh { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; } .lh-table { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 18px 14px; border: 12px solid #5b3a20; border-radius: 7px; outline: 2px solid #24160b; background: radial-gradient(ellipse at 42% 32%, rgba(255,255,255,.13), transparent 62%), repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px), #1d5936; box-shadow: inset 0 0 44px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.45), 0 14px 26px rgba(0,0,0,.7); } /* The sign: a torn-off piece of a box, the name in black marker, the call in red. The torn cardboard is ::before: a clip on the element itself would cut off its own shadow. */ .lh-sign { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 26px 8px; transform: rotate(-2deg); color: #1c1a17; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); } .lh-sign::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 18% 30%, rgba(96,62,24,.28), transparent 38%), radial-gradient(circle at 82% 70%, rgba(96,62,24,.22), transparent 34%), #c99d63; clip-path: polygon(1% 5%, 30% 0, 66% 4%, 99% 1%, 100% 52%, 98% 97%, 60% 100%, 28% 95%, 0 99%, 2% 48%); } .lh-sign b { font: 700 34px/1 var(--f-hand); letter-spacing: 2px; text-transform: uppercase; } .lh-sign span { font: 700 19px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-1deg); } .lh-intro { max-width: 430px; text-align: center; font: 16px/1.2 var(--f-text); color: #d6e5d3; text-shadow: 0 1px 0 rgba(0,0,0,.5); } .lh-dice { display: flex; gap: 26px; justify-content: center; padding: 6px 0 2px; } .lh-die { width: 104px; height: 104px; overflow: visible; filter: drop-shadow(0 7px 5px rgba(0,0,0,.55)); } .lh-die.bone { --die: #efe6cf; --edge: #7a6e55; --ink: #2a2219; } .lh-die.red { --die: #b8261d; --edge: #4f0d09; --ink: #fff2dc; } .lh-face { fill: var(--die); stroke: var(--edge); stroke-width: 1.2; stroke-linejoin: round; } .lh-shade { stroke: none; pointer-events: none; } .lh-shade.lit { fill: #fff; fill-opacity: .3; } .lh-shade.lit2 { fill: #fff; fill-opacity: .18; } .lh-shade.mid { fill: #000; fill-opacity: .08; } .lh-shade.dim { fill: #000; fill-opacity: .2; } .lh-shade.dark { fill: #000; fill-opacity: .32; } .lh-num { font: 700 31px/1 var(--f-print); fill: var(--ink); text-anchor: middle; dominant-baseline: central; } .lh-side { font: 700 10px/1 var(--f-print); fill: var(--ink); fill-opacity: .5; text-anchor: middle; dominant-baseline: central; } /* In the air: the dice shake and spin over the cloth, each at its own pace; landed: they drop and settle. */ .lh-dice.rolling .lh-die { animation: lh-tumble .5s linear infinite; } .lh-dice.rolling .lh-die.red { animation-duration: .42s; animation-direction: reverse; } @keyframes lh-tumble { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(7px, -16px) rotate(90deg); } 50% { transform: translate(-4px, -5px) rotate(180deg); } 75% { transform: translate(-8px, -13px) rotate(270deg); } 100% { transform: translate(0, 0) rotate(360deg); } } .lh-dice.landed .lh-die { animation: lh-land .45s cubic-bezier(.2, 1.6, .4, 1); } .lh-dice.landed .lh-die.red { animation-delay: .07s; animation-fill-mode: backwards; } @keyframes lh-land { 0% { transform: scale(1.35) rotate(-16deg); } 100% { transform: scale(1) rotate(0); } } .lh-dice.jackpot .lh-die { filter: drop-shadow(0 0 14px rgba(242,194,48,.95)) drop-shadow(0 7px 5px rgba(0,0,0,.55)); } .lh-dice.jinx .lh-die { filter: grayscale(.7) brightness(.8) drop-shadow(0 0 10px #000); } /* The button — a yellow tin plate, as everywhere; no seeds and the free roll is used — gray, a tap: the buddy says why. */ .lh-ctl, .lh-notes { display: flex; flex-direction: column; align-items: center; gap: 4px; } .lh-go { min-width: 230px; min-height: 48px; padding: 8px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 22px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: #17150f; background: #f2c230; border-radius: 3px; box-shadow: 0 4px 0 #8a6a0c, 0 6px 12px rgba(0,0,0,.45); transform: rotate(-1deg); transition: transform .06s, box-shadow .06s, filter .1s; } .lh-go .icon { width: 24px; height: 24px; } .lh-go:hover { filter: brightness(1.08); } .lh-go:active { transform: rotate(-1deg) translateY(3px); box-shadow: 0 1px 0 #8a6a0c; } .lh-go[disabled] { opacity: .6; pointer-events: none; } .lh-go.broke { background: #9a958a; box-shadow: 0 4px 0 #4d4a42, 0 6px 12px rgba(0,0,0,.45); } .lh-note { font: 700 18px/1.1 var(--f-hand); color: #f3edd8; text-align: center; } .lh-note .icon.inline, .lh-week .icon.inline { width: 18px; height: 18px; } .lh-week { font: 15px/1.2 var(--f-text); color: #ffd98a; text-align: center; } .lh-last { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; margin-top: 2px; font: 14px/1 var(--f-text); color: #c7dbc3; } .lh-pair { padding: 2px 6px; border-radius: 3px; background: rgba(0,0,0,.32); font: 700 15px/1.2 var(--f-print); color: #efe6cf; } .lh-pair.r-small, .lh-pair.r-decent { color: #bfe8b6; } .lh-pair.r-double, .lh-pair.r-item { color: #ffd98a; } .lh-pair.r-jackpot { background: #f2c230; color: #17150f; } .lh-pair.r-jinx { background: #000; color: #ff8d84; } /* The price list: a piece of cardboard leaning on the table, marker, the row the last roll fell on is lit. */ .lh-board { position: relative; isolation: isolate; margin: 6px 0 6px -16px; padding: 12px 16px 12px 26px; transform: rotate(1.6deg); color: #1c1a17; filter: drop-shadow(0 10px 12px rgba(0,0,0,.6)); } .lh-board::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 70% 18%, rgba(96,62,24,.22), transparent 30%), radial-gradient(circle at 20% 85%, rgba(96,62,24,.2), transparent 34%), repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 4px), #caa067; clip-path: polygon(0 2%, 24% 0, 52% 2%, 78% 0, 100% 3%, 99% 34%, 100% 70%, 98% 100%, 70% 98%, 40% 100%, 12% 98%, 1% 100%, 2% 66%, 0 30%); } .lh-board-h { font: 700 30px/1 var(--f-hand); text-transform: uppercase; letter-spacing: 1px; text-decoration: underline; text-underline-offset: 4px; margin-bottom: 4px; transform: rotate(-1deg); } .lh-rows { display: flex; flex-direction: column; } .lh-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) 54px; gap: 8px; align-items: baseline; padding: 3px 4px; border-bottom: 2px dashed rgba(28,26,23,.25); font: 700 17px/1.1 var(--f-hand); } .lh-roll { font-size: 19px; white-space: nowrap; } .lh-odds { text-align: right; color: #5b4a2e; white-space: nowrap; } .lh-row.r-jackpot .lh-roll, .lh-row.r-jackpot .lh-what { color: var(--pen-red); } .lh-row.r-jinx .lh-roll { color: #3a3a3a; } .lh-row.hit { background: rgba(242,194,48,.6); outline: 2px solid #1c1a17; outline-offset: -1px; animation: lh-hit .8s ease-out; } @keyframes lh-hit { 0% { transform: scale(1.05); } 100% { transform: none; } } .lh-foot { margin-top: 6px; font: 14.5px/1.2 var(--f-text); color: #4a3d28; } /* «Ниже ещё»: a round chalk arrow sticks to the bottom of the window and bobs while something is below the edge; it takes no room (negative margin), and with nothing below it is gone. */ .lh-more { position: sticky; bottom: 6px; align-self: flex-end; width: 38px; height: 38px; margin: -38px 6px 0 0; z-index: 3; border-radius: 50%; background: rgba(22,20,16,.88); box-shadow: 0 2px 8px rgba(0,0,0,.6), inset 0 0 0 2px rgba(242,194,48,.55); opacity: 0; pointer-events: none; transition: opacity .2s; } .lh-more::before { content: ""; position: absolute; left: 50%; top: 42%; width: 11px; height: 11px; border: solid #f2c230; border-width: 0 3px 3px 0; transform: translate(-50%, -50%) rotate(45deg); } .lh-more.on { opacity: 1; pointer-events: auto; animation: lh-bob 1.3s ease-in-out infinite; } @keyframes lh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* For those made queasy by motion: the dice do not spin and jump, the faces do not flicker (app.js, lohoStart): they wait half-shaded. */ @media (prefers-reduced-motion: reduce) { .lh-dice.rolling .lh-die, .lh-dice.landed .lh-die, .lh-row.hit, .lh-more.on { animation: none !important; } .lh-dice.rolling .lh-die { opacity: .55; } } /* The buddy's bubble: the dice in small print over what fell out. */ .say .lh-said { font: 700 14px/1 var(--f-print); letter-spacing: 1px; color: var(--ink-soft); } .lh-burst .levelup-num { font-size: calc(64px * var(--s)); } /* A phone in landscape: no intro, the dice smaller — the button is in view without scrolling. */ .short .lh { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } .short .lh-intro { display: none; } .short .lh-die { width: 82px; height: 82px; } .short .lh-sign b { font-size: 28px; } .short .lh-board { padding: 8px 12px 8px 24px; } .short .lh-board-h { font-size: 22px; margin-bottom: 2px; } .short .lh-row { grid-template-columns: 74px minmax(0, 1fr) 48px; font-size: 15.5px; padding: 2px 4px; } .short .lh-roll { font-size: 16px; } .short .lh-foot { margin-top: 3px; font-size: 13px; } /* Portrait: the table on top, the cardboard under it; compact, so that on a phone in Telegram (not fullscreen) and on a small one everything is on the screen without scrolling (owner 2026-10-06): no intro, smaller dice and sign, a row of the price list in one line. Whatever still does not fit (the notes grew) — the arrow «ниже ещё». */ .tall .win.lohotron { height: 100%; } .tall .win.lohotron > .win-x { right: -4px; top: -6px; } .tall .win.lohotron .win-body { padding: 4px 4px 8px; } .tall .lh { grid-template-columns: minmax(0, 1fr); align-items: stretch; } .tall .lh-intro { display: none; } .tall .lh-table { gap: 5px; padding: 8px 10px 10px; border-width: 9px; } .tall .lh-ctl, .tall .lh-notes { gap: 2px; } .tall .lh-sign { padding: 4px 22px 6px; } .tall .lh-sign b { font-size: 28px; } .tall .lh-sign span { font-size: 16px; } .tall .lh-dice { gap: 24px; padding: 2px 0 0; } .tall .lh-die { width: 84px; height: 84px; } .tall .lh-go { min-width: 200px; min-height: 44px; font-size: 20px; } .tall .lh-note { font-size: 16px; } .tall .lh-week { font-size: 14px; } .tall .lh-board { margin: -8px 4px 4px; padding: 10px 10px 8px 14px; transform: rotate(-.8deg); } .tall .lh-board-h { font-size: 24px; margin-bottom: 2px; } .tall .lh-row { grid-template-columns: 64px minmax(0, 1fr) 42px; gap: 5px; padding: 2px; font-size: 15px; } .tall .lh-roll { font-size: 15px; } .tall .lh-odds { font-size: 13px; } .tall .lh-foot { margin-top: 4px; font-size: 12.5px; } /* ---------- support: «Книга жалоб и предложений» (system 17) ---------- The complaints book from a shop counter, opened: a dark green cloth cover, two pages at the spine. On the left the title stamped in print and the player's entries: his own in blue pen, the developers' answers in red pen with a margin line, a status stamp on each entry; on the right a fresh lined page to write on, «по оплате» as a box to tick, the send button circled in red pen (kal-act, as on the calendar sheet). All done with markup. Portrait: one page, the form above the entries, the window scrolls. */ .win.zhaloby { max-width: 900px; height: 100%; max-height: 404px; padding: 9px; gap: 0; border: 0; border-radius: 7px; background: #24402f repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px); box-shadow: 0 14px 26px rgba(0,0,0,.7), inset 0 0 0 2px rgba(0,0,0,.35), inset 0 0 24px rgba(0,0,0,.45); } .win.zhaloby > .win-x { position: absolute; right: -12px; top: -12px; z-index: 5; } .win.zhaloby .win-body { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; } .zb { display: flex; height: 100%; } .zb-page { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 11px 16px 10px; color: var(--ink); background: #f3eedc linear-gradient(180deg, rgba(110,90,40,.07), transparent 18%); } .zb-page.left { border-radius: 4px 0 0 4px; box-shadow: inset -16px 0 18px -14px rgba(0,0,0,.45); } .zb-page.right { border-radius: 0 4px 4px 0; box-shadow: inset 16px 0 18px -14px rgba(0,0,0,.45); } .zb-head { text-align: center; padding-bottom: 6px; border-bottom: 2px solid rgba(29,27,23,.75); } .zb-title { font: 700 17px/1.05 var(--f-print); letter-spacing: 2.4px; text-transform: uppercase; } .zb-sub { margin-top: 3px; font: italic 13px/1.2 var(--f-news); color: var(--ink-soft); } .zb-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 2px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(29,27,23,.35) transparent; } .zb-entry { padding: 7px 0 8px; border-bottom: 1px dashed rgba(29,27,23,.28); } .zb-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font: 700 12px/1.1 var(--f-print); letter-spacing: .8px; text-transform: uppercase; color: var(--ink-soft); } .zb-entry-head b { color: var(--ink); } .zb-tag { padding: 1px 5px; border-radius: 2px; color: #f3eedc; background: #6b5a2e; } .zb-stamp { margin-left: auto; padding: 1px 6px 2px; border: 2px solid currentColor; border-radius: 3px; font-size: 11px; transform: rotate(-3deg); opacity: .85; } .zb-stamp.zb-open { color: #7a7468; } .zb-stamp.zb-answered { color: #1f6b2a; } .zb-stamp.zb-closed { color: var(--pen-red); } .zb-line { margin-top: 4px; font: 700 19px/1.1 var(--f-hand); color: #22408f; white-space: pre-wrap; overflow-wrap: anywhere; } .zb-line.dev { margin-left: 4px; padding-left: 9px; color: var(--pen-red); border-left: 2px solid rgba(184,36,26,.55); } .zb-who { margin-right: 6px; font: 700 12px/1 var(--f-print); letter-spacing: .7px; text-transform: uppercase; } .zb-clip { font: 13px/1 var(--f-text); color: var(--ink-soft); } .zb-empty { margin-top: 14px; font: italic 14px/1.35 var(--f-news); color: var(--ink-soft); } .zb-form-title { font: 700 15px/1 var(--f-print); letter-spacing: 1.8px; text-transform: uppercase; } /* the page is ruled like the book's: the lines scroll with the text (local), the pen sits on them */ .zb-text { flex: 1 1 auto; min-height: 104px; width: 100%; margin-top: 6px; padding: 0 4px; box-sizing: border-box; resize: none; border: 0; outline: 0; border-radius: 0; color: #22408f; font: 700 20px/26px var(--f-hand); background: transparent repeating-linear-gradient(180deg, transparent 0 25px, rgba(60,90,160,.32) 25px 26px) local; border-left: 2px solid rgba(184,36,26,.45); } .zb-text::placeholder { color: rgba(34,64,143,.42); } .zb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 9px; } .zb-pay { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; font: 700 19px/1 var(--f-hand); color: #22408f; } .zb-pay::before { content: ""; width: 15px; height: 15px; border: 2px solid #22408f; border-radius: 2px; transform: rotate(-3deg); font: 700 18px/14px var(--f-hand); text-align: center; color: var(--pen-red); } .zb-pay.on::before { content: "✓"; } .zb-count { font: 12px/1 var(--f-text); color: var(--ink-soft); } .zb-send { margin-left: auto; } .zb-wait { min-height: 0; margin-top: 4px; font: 700 16px/1.1 var(--f-hand); color: var(--pen-red); } .zb-wait:empty { display: none; } .zb-note { margin-top: 6px; font: 12.5px/1.25 var(--f-text); color: var(--ink-soft); } /* portrait: one page; the form first (to write is why one comes), the entries below it; the window scrolls, not the log */ .tall .win.zhaloby { height: 100%; max-height: none; padding: 7px; } .tall .win.zhaloby > .win-x { right: -4px; top: -6px; } .tall .win.zhaloby .win-body { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; } .tall .win.zhaloby .win-body::-webkit-scrollbar { display: none; } .tall .zb { height: auto; min-height: 100%; } .tall .zb-page { border-radius: 4px; padding: 12px 14px 12px; } .tall .zb-title { font-size: 18px; letter-spacing: 2px; } .tall .zb-form-title { margin-top: 12px; } .tall .zb-text { flex: none; min-height: 156px; } .tall .zb-log { flex: none; overflow: visible; margin-top: 12px; padding-right: 0; border-top: 2px solid rgba(29,27,23,.75); } .tall .zb-line { font-size: 20px; } /* ---------- «Разбор боя»: the crew's fight register (2026-10-13) ---------- A school class register lifted from the teachers' room: a maroon cloth hardcover around two pages ruled like a register (pale blue lines, a printed heavy rule under the heading), headings in print ink, entries in blue ballpoint, the teacher's remarks in red pen next to the nick — the one loud thing. The left page lists the month's fights, the right one holds the chosen fight's table. In the штаб the way in is the register itself lying on the table (jr-cover). Portrait: one page, the list or the fight, the window scrolls. Palette: cover #5a1d22, paper #f2efe4, ruling #bccbdf, print ink #27456f, ballpoint #22408f, red pen var(--pen-red), pencil #6f6b62. */ .win.zhurnal { max-width: 1000px; height: 100%; max-height: 520px; padding: 9px 9px 9px 15px; gap: 0; border: 0; border-radius: 4px 7px 7px 4px; background: #5a1d22 repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px); box-shadow: 0 14px 26px rgba(0,0,0,.7), inset 6px 0 0 rgba(0,0,0,.28), inset 0 0 0 2px rgba(0,0,0,.35), inset 0 0 24px rgba(0,0,0,.45); } .win.zhurnal > .win-x { position: absolute; right: -12px; top: -12px; z-index: 5; } .win.zhurnal .win-body { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; } .jr { display: flex; height: 100%; } .jr-page { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 9px 14px 7px; color: #22408f; background: #f2efe4 linear-gradient(180deg, rgba(60,80,120,.05), transparent 20%); } .jr-page.left { flex: 0 0 31%; border-radius: 3px 0 0 3px; box-shadow: inset -16px 0 18px -14px rgba(0,0,0,.45); } .jr-page.right { flex: 1 1 0; border-radius: 0 3px 3px 0; box-shadow: inset 16px 0 18px -14px rgba(0,0,0,.45); } .jr-head { padding-bottom: 5px; border-bottom: 2px solid #27456f; } .jr-title { font: 700 17px/1.05 var(--f-print); color: #27456f; letter-spacing: .4px; } .jr-sub { margin-top: 2px; font: 13px/1.15 var(--f-text); color: #6f6b62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jr-empty { margin: 14px 2px; font: 700 20px/1.2 var(--f-hand); color: #6f6b62; } .jr-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 3px; scrollbar-width: thin; scrollbar-color: #9fb2cc transparent; } .jr-entry { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 6px; width: 100%; min-height: 48px; padding: 4px 4px 4px 2px; border-bottom: 1px solid #bccbdf; } .jr-entry:active { background: rgba(34,64,143,.08); } /* The chosen fight: ringed in red pen, a little crooked. */ .jr-entry.on::before { content: ""; position: absolute; inset: 2px -3px 2px -3px; border: 2px solid rgba(184,36,26,.72); border-radius: 16px 9px 14px 10px / 12px 14px 9px 13px; transform: rotate(-.6deg); pointer-events: none; } .jr-date { display: flex; flex-direction: column; align-items: flex-start; } .jr-date b { font: 700 21px/1 var(--f-hand); white-space: nowrap; } .jr-date small { font: 12px/1.1 var(--f-text); color: #6f6b62; white-space: nowrap; } .jr-what { min-width: 0; display: flex; flex-direction: column; } .jr-kind { font: 600 11.5px/1.1 var(--f-print); color: #27456f; } /* A long place or rivals' line takes a second line rather than lose its end (owner 2026-10-13: «Пивзавод» lost its «д»). */ .jr-name { font: 700 19px/1.05 var(--f-hand); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .jr-vs { font: 12px/1.15 var(--f-text); color: #6f6b62; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jr-res { flex: none; display: flex; flex-direction: column; align-items: flex-end; } .jr-res b { font: 700 19px/1 var(--f-hand); color: var(--pen-red); white-space: nowrap; transform: rotate(-3deg); } .jr-res small { font: 12px/1.2 var(--f-text); color: #6f6b62; white-space: nowrap; } .jr-sheet-head { display: flex; align-items: flex-start; gap: 10px; padding: 0 30px 4px 0; } /* the cross sits on the corner */ .jr-sheet-what { flex: 1 1 auto; min-width: 0; } .jr-sheet-title { font: 700 17px/1.1 var(--f-print); color: #27456f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jr-sheet-when { font: 13px/1.2 var(--f-text); color: #6f6b62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jr-verdict { flex: none; margin: 0 6px 0 0; padding: 0 4px; font: 700 26px/1 var(--f-hand); color: var(--pen-red); white-space: nowrap; transform: rotate(-4deg); border-bottom: 2px solid rgba(184,36,26,.75); } .jr-rivals { font: 700 18px/1.1 var(--f-hand); padding-bottom: 4px; } .jr-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-top: 2px solid #27456f; } .jr-row { display: grid; align-items: center; min-height: 29px; border-bottom: 1px solid #bccbdf; } .jr-row > span { min-width: 0; padding: 0 5px; } .jr-row > .jr-c { border-left: 1px solid #d3dcea; } .jr-thead { min-height: 22px; border-bottom: 1px solid #27456f; font: 600 11.5px/1.1 var(--f-print); color: #27456f; } .jr-thead > span { white-space: nowrap; overflow: hidden; text-overflow: clip; } .jr-row.jr-thead > .jr-c { font: 600 11.5px/1.1 var(--f-print); color: #27456f; } .jr-thead .num { text-align: right; } .jr-rows { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #9fb2cc transparent; } .jr-n { font: 11.5px/1 var(--f-print); color: #6f6b62; text-align: right; } .jr-row > .jr-n { padding: 0 3px 0 0; } .jr-thead .jr-n { color: #27456f; } .jr-who { display: flex; flex-direction: column; } .jr-who-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; font: 700 20px/1.1 var(--f-hand); } .jr-who-top .vip-badge { font-family: var(--f-text); } .jr-who-top .nick-rest { padding-right: .2em; } /* the handwritten nick's last letter keeps its tail */ /* Under the nick (a narrow spread, portrait): the remark first, then in pencil what did not fit into the columns. */ .jr-who-sub { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin-top: -1px; font: 12px/1.2 var(--f-text); color: #6f6b62; white-space: nowrap; overflow: hidden; } .jr-who-sub .jr-mark { font-size: 16px; transform: rotate(-2deg); } .jr-facts { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .jr-gone { flex: none; font: 12px/1 var(--f-text); color: #6f6b62; } .jr-mark { flex: none; font: 700 18px/1 var(--f-hand); font-style: normal; color: var(--pen-red); white-space: nowrap; transform: rotate(-3deg); transform-origin: 0 60%; } .jr-mark.carry { padding: 0 3px 1px; border: 2px solid rgba(184,36,26,.7); border-radius: 12px 7px 11px 8px / 9px 11px 8px 10px; } /* «уравнял шансы» (a draw): the same ring; «пытался тащить» (a loss): dashed — carried, but the fight was not won. */ .jr-mark.even { padding: 0 3px 1px; border: 2px solid rgba(184,36,26,.7); border-radius: 12px 7px 11px 8px / 9px 11px 8px 10px; } .jr-mark.tried { padding: 0 3px 1px; border: 2px dashed rgba(184,36,26,.6); border-radius: 12px 7px 11px 8px / 9px 11px 8px 10px; } /* A grey pencil note, no blame (owner: «"Свалил без драки" оставь серым»). */ .jr-mark.note { color: #77746d; transform: none; } .jr-row.me .jr-who-top .nick { text-decoration: underline; text-decoration-color: rgba(34,64,143,.45); text-underline-offset: 3px; } /* A line whose diary opens (his own, one of the crew who opened it): a tap anywhere on it, a pencil «дневник ›» says so. Every line takes the tap (a closed diary: the кореш says so). */ .jr-rows .jr-row { cursor: pointer; } .jr-row.diary { min-height: 44px; } .jr-rows .jr-row:active { background: rgba(34,64,143,.08); } .jr-mine { flex: none; font: 12px/1 var(--f-text); color: #6f6b62; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .jr-c.num { font: 700 19px/1 var(--f-hand); text-align: right; white-space: nowrap; } /* A narrow spread (a small window sideways): the pencil line under the nick wraps rather than cut the numbers; the list's result goes under the place, so the place keeps the width. */ .jr.s-narrow .jr-who-sub { flex-wrap: wrap; row-gap: 0; white-space: normal; } .jr.s-narrow .jr-facts { overflow: visible; } .jr.s-narrow .jr-entry { grid-template-columns: 44px minmax(0, 1fr); } .jr.s-narrow .jr-res { grid-column: 2; flex-direction: row; align-items: baseline; gap: 8px; } .jr-c.out { font: 700 17px/1 var(--f-hand); color: #4a5a80; white-space: nowrap; } .jr-pks { display: flex; align-items: center; gap: 3px; } .jr-pk { position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; } .jr-pk-pic { display: grid; place-items: center; width: 22px; height: 22px; } .jr-pk-pic.art { object-fit: contain; } .jr-pk .sp-ink { fill: #e9eef7; stroke: #22408f; stroke-width: 3; } .jr-pk.empty { width: 20px; height: 20px; margin: 1px; border: 1.5px dashed #8a8576; border-radius: 50%; } .jr-pk.none { font: 700 18px/1 var(--f-hand); color: #8a8576; } /* Drunk: a red-pen tick over the supply. */ .jr-pk.drunk::after { content: ""; position: absolute; left: 7px; top: 1px; width: 8px; height: 15px; border: solid var(--pen-red); border-width: 0 3px 3px 0; transform: rotate(40deg); border-radius: 0 0 2px 0; } .jr-note { margin-top: 4px; padding-top: 3px; border-top: 1px solid #d3dcea; font: 11.5px/1.25 var(--f-text); color: #6f6b62; } /* The page flip under the month's fights: «‹ сентябрь» to the page before, «ноябрь ›» to the one after. */ .jr-flips { flex: none; display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; border-top: 1px solid #bccbdf; } .jr-flip { min-height: 44px; padding: 0 4px; font: 700 20px/1 var(--f-hand); color: #22408f; white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; } .jr-flip:active { color: var(--pen-red); } .jr-more { flex: none; padding: 3px 0 0; font: 12px/1.2 var(--f-text); color: #6f6b62; } .jr-back { align-self: flex-start; min-height: 44px; padding: 0 6px 0 0; font: 700 20px/1 var(--f-hand); color: #22408f; text-decoration: underline; text-underline-offset: 4px; } .jr-back:active { color: var(--pen-red); transform: translateX(-2px); } /* The way in, in the штаб's «Разборки»: the register itself — maroon cloth, a white label, the spine on the left. */ .jr-cover { align-self: flex-start; width: min(100%, 520px); display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px 8px 16px; text-align: left; border-radius: 3px 6px 6px 3px; color: #f1dcd6; background: #5a1d22 repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); box-shadow: inset 7px 0 0 rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.4), 0 3px 7px rgba(0,0,0,.55); transform: rotate(-.5deg); } .jr-cover:active { transform: rotate(-.5deg) scale(.98); } .jr-cover-label { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 12px 6px; color: #27456f; background: #f2efe4; border: 1px solid #c8c0aa; box-shadow: inset 0 0 0 3px #f2efe4, inset 0 0 0 4px #27456f; } .jr-cover-label b { font: 700 15px/1 var(--f-print); letter-spacing: .5px; } .jr-cover-label small { font: 600 11px/1 var(--f-print); } .jr-cover-text { min-width: 0; font: 15px/1.2 var(--f-text); } /* Short landscape stage: smaller paddings, the rows a little lower. */ .short .jr-page { padding: 7px 11px 5px; } .short .jr-row { min-height: 26px; } .short .jr-row.diary { min-height: 44px; } .short .jr-entry { min-height: 44px; } .short .jr-who-top { font-size: 18px; } .short .jr-mark { font-size: 16px; } .short .jr-res b { font-size: 16px; } /* a 760 stage: the verdict fits beside the place */ .short .jr-note { line-height: 1.15; } /* two short lines: the remarks' key is read whole */ /* Portrait: one page — the list or the fight — the window scrolls as a whole; the rows hold a pencil line of what did not fit. */ .tall .win.zhurnal { height: 100%; max-height: none; padding: 7px 7px 7px 11px; } .tall .win.zhurnal > .win-x { right: -4px; top: -6px; } .tall .win.zhurnal .win-body { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; } .tall .win.zhurnal .win-body::-webkit-scrollbar { display: none; } .tall .jr { height: auto; min-height: 100%; } .tall .jr-page { flex: 1 1 auto; border-radius: 3px; box-shadow: none; padding: 10px 12px 10px; } .tall .jr-list, .tall .jr-rows { flex: none; overflow: visible; } .tall .jr-table { flex: none; } .tall .jr-head { padding-right: 34px; } .tall .jr-title { font-size: 19px; } .tall .jr-entry { min-height: 52px; grid-template-columns: 50px minmax(0, 1fr) auto; } .tall .jr-back { margin: -6px 0 2px; } .tall .jr-row { min-height: 46px; } .tall .jr-row > span { padding: 0 4px; } .tall .jr-sheet-head { padding-right: 34px; } .tall .jr-verdict { font-size: 23px; } .tall .jr-sheet-when { white-space: normal; } /* Portrait has the height: the pencil line under the nick wraps to a second line rather than cut the evidence (pieces keep together: «в деле 2 мин»). */ .tall .jr-who-sub { flex-wrap: wrap; row-gap: 0; white-space: normal; } .tall .jr-pks { flex-wrap: wrap; max-width: 53px; row-gap: 2px; } .tall .jr-who-sub .jr-mark { white-space: normal; } .tall .jr-facts { overflow: visible; } /* ---------- «не прёт» in the header: a black cat with how much is left ---------- */ .hud-jinx { position: relative; width: 32px; height: 38px; margin-right: 8px; display: grid; place-items: center; } .hud-jinx .icon { width: 30px; height: 30px; } .jinx-cat { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.5px rgba(255,236,190,.8)) drop-shadow(0 1px 1px #000); } .jinx-cat .cat-body { fill: #0b0b0b; } .jinx-cat .cat-tail { fill: none; stroke: #0b0b0b; stroke-width: 2.2; stroke-linecap: round; } .jinx-cat .cat-eye { fill: #f5c928; } .hud-jinx em { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(-4deg); padding: 0 4px; font: 700 13px/1.2 var(--f-hand); font-style: normal; color: #f3edd8; background: #3a1512; border-radius: 3px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.6); } /* A narrow header (portrait, a small landscape window): the cat is smaller and closer, the nick and the seeds keep their room. */ .tall .hud-jinx, .narrow .hud-jinx { width: 24px; margin-right: 4px; } .tall .hud-jinx .icon, .narrow .hud-jinx .icon { width: 24px; height: 24px; } .tall .hud-jinx em, .narrow .hud-jinx em { font-size: 12px; padding: 0 3px; } /* Card in portrait: the picture on top, text under it. The whole screen, the header under the card's shade (owner 2026-10-16: «это меню с телефона … можно на весь экран развернуть»; until then it stood below the header). */ .tall .modal { padding: 10px; } .tall .modal-card { grid-template-columns: 1fr; padding: 14px 14px 12px; max-height: 100%; overflow-y: auto; } .tall .modal-card > :not(.modal-art) { grid-column: 1; } .tall .modal-art { grid-row: auto; justify-self: center; width: 120px; height: 120px; } .tall .modal-card .big-title { text-align: center; } /* One button in the last row («Понял», «Закрыть») — full width, under the finger. */ .tall .modal-card > .row:last-child > .btn:only-child { flex: 1; min-height: 42px; } /* The common window frame in portrait: the window full width and the whole height, over the header (owner 2026-10-16: «это меню с телефона … можно на весь экран развернуть»), the title smaller. */ .tall .win-layer { padding: 8px 6px 8px; } .tall .win.phone .mb-x { left: auto; right: 10px; top: 10px; } /* the handset fills the screen: the layer's corner, as before */ .tall .win { padding: 10px 10px; gap: 8px; } .tall .win.board { padding: 0 2px 4px; border-width: 18px; } .tall .win-head { gap: 8px; } .tall .win-photo .art { width: 46px; height: 56px; border-width: 3px 3px 9px; } .tall .win-strip { margin-top: 2px; } .tall .strip { padding: 5px 20px 6px 12px; } .tall .win-title { font-size: 21px; } .tall .win-sub { font-size: 14px; } .tall .win-x { width: 42px; height: 42px; } .tall .win-body.paper { padding: 10px 10px; } /* ---------- donation: iron and VIP (system 15) ---------- The gold «VIP 7» after a nick (owner's pick from his game's references) and the avatar frame by VIP level. The header's iron and badge are in the header section, «VIP +100» on daily tabs — in the daily section. */ .vip-badge { flex: none; display: inline-flex; align-items: baseline; gap: .14em; font: italic 700 1em/1.05 "PT Serif", Georgia, serif; letter-spacing: .02em; vertical-align: baseline; color: #f2c94c; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(180deg, #fff6c4 0%, #f7d35c 36%, #b8820f 66%, #f4d773 100%); filter: drop-shadow(0 1px 0 #3a2500) drop-shadow(0 0 1.5px rgba(0,0,0,.85)); } .vip-badge b { font-weight: 700; font-size: .8em; } .vip-badge i { font-style: italic; } .vip-badge.t3 { filter: drop-shadow(0 1px 0 #3a2500) drop-shadow(0 0 1.5px rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(255,200,60,.6)); } .vip-badge.t4 { background-image: linear-gradient(180deg, #ffffff 0%, #ffe27a 30%, #e3a51c 62%, #fff0a8 100%); filter: drop-shadow(0 1px 0 #3a2500) drop-shadow(0 0 1.5px rgba(0,0,0,.85)) drop-shadow(0 0 6px rgba(255,210,80,.85)); } .vip-badge.t0 { background-image: linear-gradient(180deg, #d9d9d9, #8a8a8a); filter: none; opacity: .75; } .vip-badge.in-nick { margin-left: .35em; } .vip-badge.big { font-size: 34px; } .vip-badge.huge { font-size: 68px; } .nick-cut .vip-badge { flex: none; } .cr-man-sub .vip-badge { font-size: 15px; margin-right: 5px; } /* Avatar frames (frames.json, decision 78): a drawn ring, the opening in the centre; --k — how many times the picture is bigger than the avatar (from the frame's data). «out» — around an avatar of a fixed size --av (the header, the booklet); «in» (.vip-in) — inside a photo box: the ring fills the box, the avatar shrinks round into the opening (the profile, the honour board). */ .vip-frame-art { position: absolute; left: 50%; top: 50%; width: calc(var(--av) * var(--k)); height: calc(var(--av) * var(--k)); max-width: none; transform: translate(-50%, -50%); pointer-events: none; } .hud-me .vip-frame-art { z-index: 1; } .hud-me .avatar.framed { box-shadow: none; } .hud-me .hud-level, .hud-me em { z-index: 2; } .vip-in { position: relative; overflow: visible !important; background: none !important; } .vip-in > .vip-frame-art { width: 100%; height: 100%; } .vip-in > .avatar, .vip-in > .art:not(.vip-frame-art) { position: absolute; left: 50%; top: 50%; width: calc(100% / var(--k)) !important; height: calc(100% / var(--k)) !important; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; background: #cfc9b8; } /* The booklet: the look buttons and the frame picker. */ .bl-look { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; } .bl-look-btn { padding: 3px 9px 4px; border: 1.5px dashed rgba(43,38,32,.55); border-radius: 4px; font: 15px/1.2 var(--f-text); color: #4a453c; } .bl-look-btn b { color: var(--ink); } .fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 8px 0; } .fr-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border: 2px solid rgba(43,38,32,.35); border-radius: 6px; background: rgba(255,255,255,.4); text-align: center; } .fr-tile.on { border-color: #c7962c; background: rgba(247,220,122,.35); } .fr-tile.locked { opacity: .5; } .fr-pic { display: grid; place-items: center; width: 74px; height: 74px; } .fr-art { width: 74px; height: 74px; } .fr-none { font: 700 18px/1 var(--f-hand); color: #6c665a; } .fr-name { font: 700 16px/1.05 var(--f-hand); } .fr-sub { font: 12.5px/1.1 var(--f-text); color: #6c665a; } /* The booth (zhelezo, decision 121): a rusty corrugated wall; on top what you have, a hand-painted sign on a white sheet of tin and the intro. Under it the booth's two sides: «Купить за звёзды», cardboard tags taped to the tin (the name, the plate, how much iron and how much is thrown in, the price in stars on a dark plate); «Принимаем железо», the scrap yard's price list on a whitewashed sheet with two bolts: cash and seeds apart, a dotted leader from the iron to the sum, «+N сверху» in red, a red stamp «Сдать» or what is missing. The blat strip at the bottom. On PC it all fits without scrolling: the window is as high as its content up to the screen (no 640 px cap since the talons' ladder, 2026-11-04: «займёт пустое место с ПК»); in portrait the sides go one under the other, the tags four in a row. */ .win.zhelezo { max-width: 1000px; height: auto; padding: 0; gap: 0; border: 3px solid #1a0d05; border-radius: 3px; background: radial-gradient(ellipse at 18% 24%, rgba(120,50,10,.55), transparent 40%), radial-gradient(ellipse at 82% 70%, rgba(90,36,8,.6), transparent 44%), radial-gradient(ellipse at 60% 12%, rgba(160,80,30,.35), transparent 30%), repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 3px, rgba(255,255,255,.07) 3px 6px, rgba(0,0,0,.12) 6px 22px, rgba(255,255,255,.05) 22px 26px), linear-gradient(180deg, #8a5a3a, #6d4128 60%, #5a321c); box-shadow: 0 12px 26px rgba(0,0,0,.7), inset 0 0 40px rgba(0,0,0,.55); } .win.zhelezo > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.zhelezo .win-body { padding: 10px 14px 12px; overflow-y: auto; scrollbar-width: none; } .win.zhelezo .win-body::-webkit-scrollbar { display: none; } .ir { display: flex; flex-direction: column; gap: 8px; } .ir-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 0 4px; } .ir-sign { padding: 4px 22px 5px; transform: rotate(-1deg); text-align: center; background: linear-gradient(175deg, #f3efe2, #ddd6c2); border: 3px solid #2b2620; border-radius: 3px; box-shadow: 0 4px 8px rgba(0,0,0,.55), inset 0 0 18px rgba(120,80,40,.25); } .ir-sign-title { font: 700 32px/1 var(--f-hand); color: #b3201a; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } .ir-sign-sub { margin-top: 2px; font: 700 15px/1.1 var(--f-hand); color: #2b2620; } .ir-have { justify-self: start; display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 4px; background: rgba(15,8,3,.72); color: #f6e8d2; font: 700 26px/1 var(--f-hand); white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .ir-have .ir-have-art { width: 34px; height: 34px; } .ir-have span { font: 14px/1.1 var(--f-text); color: #d9c3a3; max-width: 70px; white-space: normal; } /* The window's cross sits over the intro's top right. */ .ir-intro { margin: 0; padding-right: 36px; font: 13px/1.2 var(--f-text); color: #fbefdc; text-shadow: 0 1px 2px rgba(0,0,0,.8); } .ir-sides { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; padding: 0 4px; } .ir-sides.solo { grid-template-columns: minmax(0, 1fr); } .ir-buy { display: flex; flex-direction: column; gap: 2px; } .ir-h { font: 700 26px/1 var(--f-hand); color: #fbefdc; text-shadow: 0 2px 3px rgba(0,0,0,.8); } .ir-packs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; padding: 4px 2px; } .ir-pack { position: relative; flex: 0 0 calc(25% - 8px); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 7px; transform: rotate(var(--r, 0deg)); color: var(--ink); box-shadow: 0 5px 10px rgba(0,0,0,.55); transition: transform .12s; } .ir-pack:hover { transform: rotate(0deg) translateY(-2px); } .ir-pack:active { transform: scale(.96); } .ir-pack-name { font: 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: #5a554b; } .ir-pack .ir-pack-art { width: 34px; height: 34px; } .ir-pack-iron { font: 700 26px/1 var(--f-hand); white-space: nowrap; } .ir-pack-extra { min-height: 14px; font: 700 14px/1 var(--f-hand); color: var(--pen-red); white-space: nowrap; transform: rotate(-3deg); } .ir-price { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px 10px 4px 7px; border-radius: 4px; white-space: nowrap; background: #1c2733; color: #fff; font: 700 16px/1 var(--f-print); box-shadow: 0 2px 0 #0b1118; } .tg-star { width: 17px; height: 17px; fill: #ffc531; stroke: #b07800; stroke-width: 1; } /* «Первая покупка ×2» (decision 147): the head's note in red marker; a tag still doubled shows its whole sum in red and one red stamp «В первый раз» under it, in the bonus line's place between the sum and the price (the owner: «между ценой и железякой»; a double frame on the tag's paper, like the rarity stamp), kept low so the window still fits a PC screen without a scroll. */ .ir-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; } .ir-h-first { font: 700 17px/1 var(--f-hand); color: #ffb39a; transform: rotate(-2deg); } .ir-pack.first .ir-pack-iron { color: var(--pen-red); } .ir-first { margin: 1px 0 -1px; padding: 3px 6px 2px; white-space: nowrap; transform: rotate(-4deg); border: 2px solid #c1261c; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--tint, #f3efe2), inset 0 0 0 2.5px #c1261c; color: #c1261c; font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: .4px; mix-blend-mode: multiply; } .tall .ir-first, .short .ir-first { margin: 1px 0 2px; padding: 2px 4px 1px; font-size: 9.5px; letter-spacing: .1px; } .tall .ir-h-first { font-size: 15px; } .ir-sell { position: relative; padding: 8px 16px; transform: rotate(.5deg); color: #1d1a16; border: 3px solid #2b2620; border-radius: 3px; background: radial-gradient(circle at 12px 12px, #6b6258 0 3px, #2b2620 3.5px 4.5px, transparent 5px), radial-gradient(circle at calc(100% - 12px) 12px, #6b6258 0 3px, #2b2620 3.5px 4.5px, transparent 5px), radial-gradient(ellipse at 85% 95%, rgba(140,70,20,.32), transparent 30%), radial-gradient(ellipse at 6% 70%, rgba(140,70,20,.22), transparent 22%), linear-gradient(176deg, #f1ead8, #ded2b6); box-shadow: 0 6px 12px rgba(0,0,0,.6), inset 0 0 20px rgba(120,80,40,.25); } .ir-sell-h { padding-bottom: 3px; margin-bottom: 4px; border-bottom: 3px solid #1d1a16; text-align: center; font: 700 25px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: #b3201a; } .ir-ladder + .ir-ladder { margin-top: 4px; } .ir-ladder-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; white-space: nowrap; } .ir-ladder-h b { display: inline-flex; align-items: center; gap: 5px; font: 700 17px/1 var(--f-print); text-transform: uppercase; letter-spacing: .5px; } .ir-ladder-h .icon { width: 22px; height: 22px; align-self: center; } .ir-ladder-h > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 13.5px/1.15 var(--f-text); color: #5e5444; } .ir-ladder-h > span .icon { width: 15px; height: 15px; vertical-align: -2px; } .ir-swap { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 2px; text-align: left; white-space: nowrap; font: 700 22px/1 var(--f-hand); color: #1d1a16; transition: transform .1s; } .ir-swap:active { transform: scale(.98); } .ir-swap .icon { width: 22px; height: 22px; } .ir-swap-give, .ir-swap-get { flex: none; display: inline-flex; align-items: center; gap: 4px; } .ir-swap-give { min-width: 64px; } .ir-swap-to { flex: 1; min-width: 14px; align-self: center; margin-top: 8px; border-bottom: 3px dotted rgba(29,26,22,.45); } .ir-swap-extra { flex: none; width: 104px; font-size: 16px; color: var(--pen-red); transform: rotate(-3deg); } .ir-swap-go, .ir-swap-lack { flex: none; margin-left: auto; } .ir-swap-go { padding: 3px 8px; border: 2px solid #b3201a; border-radius: 3px; transform: rotate(-4deg); font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: .5px; color: #b3201a; } .ir-swap:hover .ir-swap-go { background: rgba(179,32,26,.1); } .ir-swap-lack { font: 13.5px/1 var(--f-text); color: #6d634f; } .ir-swap-lack b { font-weight: 400; white-space: nowrap; } /* A swap he can't take, faded by colour: WebKit clips the marker's overhanging strokes inside an opacity layer (the last digit cut). */ .ir-swap.poor { color: rgba(29,26,22,.38); } .ir-swap.poor .ir-swap-extra { color: rgba(184,36,26,.4); } .ir-swap.poor .icon, .ir-swap.poor .ir-swap-to { opacity: .38; } .ir-swap.poor .ir-swap-lack .icon { opacity: 1; } .ir-blat { display: flex; align-items: center; gap: 10px; margin: 8px 2px 0; padding: 8px 12px; border-radius: 4px; background: rgba(15,8,3,.72); color: #f6e8d2; text-align: left; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .ir-blat .vip-badge { font-size: 24px; } .ir-blat-text { flex: 1; font: 15px/1.2 var(--f-text); } .ir-blat-more { flex: none; font: 700 18px/1 var(--f-hand); color: #ffd27a; } /* A low PC stage (class low, app.js fitStage: a landscape scene under LOW_H, a 1366×768 or 1280×800 screen): the tags, the VIP strip and the price list's three ladders fit its height a size denser (the talons' ladder, 2026-11-04); the window is content-high and needs no scroll. */ .low .win.zhelezo .win-body { padding-top: 6px; padding-bottom: 6px; } .low .ir-h { font-size: 22px; } .low .ir-packs { gap: 8px 10px; } .low .ir-pack { padding: 6px 4px 5px; } .low .ir-blat { margin-top: 6px; padding: 5px 10px; } .low .ir-blat .vip-badge { font-size: 20px; } .low .ir-blat-text { font-size: 13px; } .low .ir-sell { padding-top: 5px; padding-bottom: 4px; } .low .ir-sell-h { margin-bottom: 2px; font-size: 22px; } .low .ir-swap { min-height: 23px; padding: 1px 2px; font-size: 20px; } .low .ir-swap .icon { width: 20px; height: 20px; } /* A landscape phone (a narrower stage): the head's note under the head, the lines a size smaller. */ .short .ir-ladder-h { flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; } .short .ir-swap { gap: 6px; font-size: 19px; } .short .ir-swap-give { min-width: 54px; } .short .ir-swap-extra { width: 80px; font-size: 13px; } .short .ir-swap-lack { font-size: 12.5px; } .short .ir-sell { padding: 8px 12px; } /* Portrait: the sign over what he has and the intro, the sides one under the other, the tags four in a row, a price line in two rows (the extra under the sum). */ .tall .win.zhelezo { height: 100%; max-height: none; } .tall .win.zhelezo > .win-x { right: -4px; top: -6px; } .tall .win.zhelezo .win-body { padding: 10px 8px 12px; } .tall .ir-top { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "sign sign" "have intro"; gap: 6px 10px; padding: 0 2px; } .tall .ir-sign { grid-area: sign; justify-self: center; } .tall .ir-have { grid-area: have; flex-direction: column; gap: 2px; padding: 6px 8px; text-align: center; } .tall .ir-have span { max-width: 64px; font-size: 12.5px; } .tall .ir-intro { grid-area: intro; padding-right: 0; font-size: 12.5px; } .tall .ir-sides { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; } .tall .ir-packs { gap: 10px 6px; } .tall .ir-pack { flex: 0 0 calc(25% - 5px); } .tall .ir-pack-name { font-size: 11.5px; letter-spacing: .5px; } .tall .ir-pack-extra { font-size: 13px; } .tall .ir-price { padding: 3px 7px 4px 5px; font-size: 15px; } .tall .ir-sell { padding: 8px 12px; transform: none; } .tall .ir-ladder-h { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; } .tall .ir-swap { display: grid; grid-template-columns: max-content minmax(18px, 1fr) max-content auto; grid-template-areas: "give to get act" "give . extra act"; align-items: center; column-gap: 8px; min-height: 44px; font-size: 21px; } .tall .ir-swap-give { grid-area: give; min-width: 0; } .tall .ir-swap-to { grid-area: to; } .tall .ir-swap-get { grid-area: get; } .tall .ir-swap-extra { grid-area: extra; justify-self: end; width: auto; margin-top: 1px; font-size: 14px; transform: none; } .tall .ir-swap-extra:empty { display: none; } .tall .ir-swap-go, .tall .ir-swap-lack { grid-area: act; } .tall .ir-swap-lack { max-width: 78px; white-space: normal; text-align: right; line-height: 1.15; } .tall .ir-blat { flex-wrap: wrap; } /* Blat window (korochka): an open red ID booklet. The left page: the photo, the nick, the plate and a round stamp; the right one: the progress, what blat gives, where points come from, the ladder. In portrait the pages go one under the other and the window scrolls. */ .win.korochka { max-width: 960px; height: 100%; max-height: 620px; padding: 12px; gap: 0; border: 0; border-radius: 10px; background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.12), transparent 50%), repeating-linear-gradient(35deg, rgba(0,0,0,.08) 0 1px, transparent 1px 4px), #7c1414; box-shadow: 0 14px 28px rgba(0,0,0,.75), inset 0 0 0 2px #4a0808, inset 0 0 24px rgba(0,0,0,.5); } .win.korochka > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.korochka .win-body { padding: 0; overflow-y: auto; scrollbar-width: none; } .win.korochka .win-body::-webkit-scrollbar { display: none; } .bl { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); min-height: 100%; } .bl-page { position: relative; padding: 14px 16px; background: #efe9d8 repeating-linear-gradient(0deg, transparent 0 22px, rgba(120,140,170,.18) 22px 23px); color: var(--ink); } .bl-left { display: flex; flex-direction: column; align-items: center; gap: 8px; border-right: 2px solid #c9bfa6; box-shadow: inset -12px 0 18px -12px rgba(0,0,0,.35); text-align: center; } .bl-right { display: flex; flex-direction: column; gap: 8px; box-shadow: inset 12px 0 18px -12px rgba(0,0,0,.35); } .bl-crest { font: 700 20px/1 var(--f-print); letter-spacing: 4px; text-transform: uppercase; color: #7c1414; } .bl-photo { width: 120px; height: 140px; border: 4px solid #fbfaf5; background: #c9c3b2; box-shadow: 0 2px 5px rgba(0,0,0,.35); overflow: hidden; display: flex; align-items: center; justify-content: center; } .bl-photo .avatar { width: 110px; height: 110px; border-radius: 0; background: none; } .bl-medal:not(.framed) .bl-photo .avatar > .guy.hd { --hd-fill: .62; --hd-top: .1; } /* the square photo: head and shoulders */ /* The medallion: the photo round, the frame around it reaches --av × (--k − 1) / 2 past it — that much room above and below, so the ring does not climb onto the crest. --bot: the share of the frame's picture left empty under its drawing (the alpha box of frame/*.webp), not reserved: the crown's laurels end a tenth above the picture's edge, and VIP 15 pushed the page's last lines out of the window (2026-10-18). */ .bl-medal { --bot: 0; position: relative; display: grid; place-items: center; margin: calc(var(--av) * (var(--k) - 1) / 2 + 4px) 0 calc(var(--av) * (var(--k) - 1) / 2 - var(--av) * var(--k) * var(--bot) + 2px); } .bl-medal[data-ring="vip_zoloto"] { --bot: .035; } .bl-medal[data-ring="vip_korona"] { --bot: .104; } .bl-who { display: flex; flex-direction: column; align-items: center; gap: 8px; } .bl-medal.framed .bl-photo { width: var(--av); height: var(--av); border: 0; border-radius: 50%; } .bl-medal.framed .bl-photo .avatar { width: var(--av); height: var(--av); } .bl-name { font: 700 24px/1.05 var(--f-hand); } .bl-none { font: 700 20px/1 var(--f-hand); color: #6c665a; } .bl-stamp { margin-top: auto; align-self: center; padding: 8px 12px; border: 3px double rgba(30,60,150,.75); border-radius: 50%; transform: rotate(-8deg); font: 700 15px/1.05 var(--f-print); text-transform: uppercase; color: rgba(30,60,150,.8); max-width: 180px; } .bl-progress-cap { font: 700 20px/1.1 var(--f-hand); } .bl-bar { position: relative; height: 18px; margin-top: 3px; border: 2px solid #2b2620; border-radius: 3px; background: #ddd5c0; overflow: hidden; } .bl-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #c7962c; } .bl-bar span { position: relative; display: block; text-align: center; font: 700 14px/14px var(--f-print); color: #1d1b17; } .bl-how { font: 14px/1.3 var(--f-text); color: #4a453c; text-align: center; } .bl-progress { align-self: stretch; } .bl-bar-row { display: flex; align-items: center; gap: 6px; } .bl-bar-row .bl-bar { flex: 1; margin-top: 3px; } .bl-plus { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #5c3f05; color: #2a1b00; background: radial-gradient(circle at 40% 35%, #fff2b0, #e2ac2c 70%); font: 700 22px/22px var(--f-print); box-shadow: 0 2px 3px rgba(0,0,0,.35); } .bl-plus:active { transform: scale(.92); } .vp-head { display: flex; align-items: center; justify-content: center; gap: 12px; } .vp-arrow { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: #2b2620; box-shadow: 0 2px 4px rgba(0,0,0,.4), inset 0 0 0 2px rgba(242,201,76,.35); } .vp-chevron { width: 22px; height: 22px; fill: none; stroke: #f2c94c; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .vp-arrow:active { transform: scale(.92); } /* The drawn brass arrow (ui/strelka) instead of the dark circle; the left one is the same picture mirrored. */ .vp-arrow.drawn { width: 58px; height: 58px; background: none; box-shadow: none; } .vp-arrow.drawn .art { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); } .vp-arrow.drawn.left .art { transform: scaleX(-1); } .vp-arrow:disabled { opacity: .22; } .vp-big { min-width: 180px; text-align: center; } .vp-need { text-align: center; font: 700 17px/1.1 var(--f-hand); color: #5a554b; margin-top: -4px; } .vp-h { font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; padding-bottom: 4px; border-bottom: 2px solid #2b2620; } /* the money, the stats and the badge run the whole width (.wide), the perks go in two columns (decision 94: fifteen lines must not push the packs off the page) */ .vp-gives { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; } .vp-give { position: relative; padding-left: 18px; font: 15px/1.3 var(--f-text); color: #6c665a; } .vp-give.wide { grid-column: 1 / -1; } .vp-give::before { content: "◆"; position: absolute; left: 1px; top: 1px; font-size: 11px; color: #a69a85; } .vp-give.fresh { color: var(--ink); font-weight: 700; } .vp-give.fresh::before { color: #c7962c; } .vp-give .vip-badge { font-size: 16px; } .vp-give .chip { margin: 0 2px; } .vp-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; } .vp-pack { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 6px 10px; border: 2px solid #2b2620; border-radius: 4px; background: rgba(255,255,255,.5); text-align: center; } .vp-pack.prem { border-color: #7a5208; background: linear-gradient(180deg, rgba(247,220,122,.45), rgba(255,255,255,.5)); } .vp-pack-h { font: 700 21px/1 var(--f-hand); } .vp-pack-art { width: 78px; height: 104px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); } .vp-pack-sub { font: 13px/1 var(--f-text); color: #6c665a; } .vp-pack .chips { justify-content: center; } .vp-pack-state { font: 700 16px/1.1 var(--f-hand); color: #5a554b; } .vp-pack-state.lock { color: #8b8070; } .vp-take { min-width: 120px; } .vp-intro { margin: 4px 0 0; font: 14px/1.3 var(--f-text); color: #5a554b; } /* Landscape: the right page fits without scrolling (owner 2026-10-11): a smaller level title and arrows, smaller pack pictures; the description lives on the left page, under the points. */ .bl-left .vp-intro { margin: 0; font-size: 13px; text-align: center; color: #6c665a; } .stage:not(.tall) .vp-big .vip-badge.huge { font-size: 56px; } .stage:not(.tall) .vp-arrow.drawn { width: 48px; height: 48px; } .stage:not(.tall) .vp-pack { gap: 3px; padding: 6px 6px 8px; } .stage:not(.tall) .vp-pack-art { width: 60px; height: 70px; } /* Landscape with the VIP perks (decision 94): the list is longer, so a pack lies on its side, the picture to the left of its words, and the perks are a size smaller; the page still fits without scrolling. */ .stage:not(.tall) .vp-pack { display: grid; grid-template-columns: auto 1fr; align-items: center; justify-items: start; column-gap: 8px; row-gap: 2px; padding: 5px 8px 6px; text-align: left; } .stage:not(.tall) .vp-pack > .vp-pack-art { grid-row: 1 / span 4; width: 46px; height: 58px; } .stage:not(.tall) .vp-pack .chips { justify-content: flex-start; } .stage:not(.tall) .vp-pack-h { font-size: 19px; } .stage:not(.tall) .vp-gives { gap: 2px 14px; } .stage:not(.tall) .vp-give { font-size: 14px; line-height: 1.25; } .stage:not(.tall) .bl-right { gap: 6px; } /* Landscape: the stamp is pressed beside the photo, not at the bottom of the page (the page stays short); the nick and the plate share a line, a long Telegram name breaks into two lines beside the plate. The left page is no taller than the right one: with the VIP 15 crown it fits a 1280 × 720 window without scrolling. */ .stage:not(.tall) .bl-left { gap: 4px; } .stage:not(.tall) .bl-who { flex-direction: row; justify-content: center; gap: 2px 10px; max-width: 100%; } .stage:not(.tall) .bl-who > .bl-name { min-width: 0; overflow-wrap: break-word; } .stage:not(.tall) .bl-who > :not(.bl-name) { flex: none; } /* A phone sideways (short): the window scrolls there anyway (the right page is longer), so a long nick keeps its words whole and pushes the plate under it. */ .stage.short .bl-who { flex-wrap: wrap; } .stage:not(.tall) .bl-stamp { position: absolute; right: 10px; top: 56px; margin: 0; max-width: 120px; padding: 6px 9px; font-size: 12px; transform: rotate(-12deg); } /* «Расходники» (decision 78): the stash list from the header. */ .st-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(43,38,32,.3); } .st-row.empty { opacity: .6; } .st-pic { flex: none; width: 48px; height: 48px; } .st-pic .art { width: 48px; height: 48px; } .st-body { flex: 1; display: flex; flex-direction: column; gap: 2px; font: 15px/1.2 var(--f-text); } .st-body b { font: 700 19px/1.1 var(--f-hand); } /* The pockets on top of the stash («Бой 2.0», step 4): the same tracksuit pockets, bigger; a tap on a filled one takes it out. The card is a column: the title, the pockets and the buttons stay, the list between them scrolls (owner 2026-10-14: «Закрыть» always in view). */ .modal-card.stash-modal { max-height: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 5px; overflow: hidden; } .modal-card.stash-modal > * { flex: none; } .modal-card.stash-modal > .st-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(43,38,32,.4) transparent; } .st-list > .muted { padding-top: 6px; } /* Too low for a list of its own (suppliesFit): the whole card scrolls, the buttons stick to its bottom edge on the same paper. */ .modal-card.stash-modal.whole { overflow-y: auto; overscroll-behavior: contain; } .modal-card.stash-modal.whole > .st-list { flex: none; overflow: visible; } .modal-card.stash-modal.whole > .st-foot { position: sticky; bottom: -14px; z-index: 1; margin: 0 -16px -14px; padding: 8px 16px 14px; background: inherit; box-shadow: 0 -6px 10px -8px rgba(0,0,0,.35); } .tall .modal-card.stash-modal.whole > .st-foot { bottom: -12px; margin: 0 -14px -12px; padding: 8px 14px 12px; } .st-pockets { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 8px; border-bottom: 1px dashed rgba(43,38,32,.3); } .st-pockets-h { font: 700 19px/1.1 var(--f-hand); } .st-pocket-row { display: flex; justify-content: center; gap: 14px; padding: 4px 0; } .kr.kr-big .kr-bag { width: 72px; height: 84px; } .kr.kr-big b { display: none; } .kr.kr-big .kr-pic { width: 50px; height: 50px; } .kr.kr-big .kr-none { font-size: 17px; } .vp-take s { margin-right: 4px; font-weight: 400; opacity: .55; } .tall .win.korochka { max-height: none; padding: 8px; } .tall .win.korochka > .win-x { right: -4px; top: -6px; } .tall .bl { grid-template-columns: 1fr; } .tall .bl-left { border-right: 0; border-bottom: 2px solid #c9bfa6; box-shadow: inset 0 -12px 18px -12px rgba(0,0,0,.35); } .tall .bl-photo { width: 96px; height: 112px; } .tall .bl-photo .avatar { width: 88px; height: 88px; } .tall .vp-gives { grid-template-columns: 1fr; } .tall .bl-stamp { margin-top: 4px; } /* ---------- Яма: a pothole by the stop (system 15, decision 64) ---------- The pit (yama): the pothole picture bg/yama fills the left part, a yellow road works sign on it, the season's item over the pit as a dark silhouette with a glow (in colour once it is yours) on a paper card, the feed bar at the bottom on a dark plate. The right part is plywood: a cardboard plate with rumours written in marker, the feeders' plaque (it opens «Рейтинг», decision 93) and the history on notepad sheets. In landscape the window itself never scrolls (owner 2026-10-14): both halves are as tall as the window, the history list scrolls inside its sheet (.ym-list) once it is long; the cross sticks out over the corner, so the window does not clip (the body does). In portrait everything goes one under the other and the window scrolls. */ .win.yama { max-width: 1000px; height: 100%; max-height: 640px; padding: 0; gap: 0; border: 3px solid #141210; border-radius: 3px; background: #34312d; box-shadow: 0 12px 26px rgba(0,0,0,.7); } .win.yama > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.yama .win-body { padding: 0; overflow: hidden; scrollbar-width: none; } .win.yama .win-body::-webkit-scrollbar { display: none; } .r-yama { color: #c2611f; } .paper .r-yama, .say .r-yama { color: #9a4510; } .tile.r-yama { border-color: rgba(178,82,20,.8); } .ym { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .ym-wait { margin: 60px auto; padding: 14px 20px; font: 700 22px/1.2 var(--f-hand); } .ym-pit { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow: hidden; min-height: 0; } .ym-pit > .ym-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; z-index: 0; filter: brightness(.9) saturate(.95); } .ym-pit > .ym-bg.ph { display: grid; place-items: center; background: repeating-radial-gradient(circle at 50% 70%, #2a2724 0 18px, #3b3732 18px 40px); } .ym-pit > :not(.ym-bg) { position: relative; z-index: 1; } .ym-sign { align-self: flex-start; display: flex; flex-direction: column; padding: 5px 14px 6px; transform: rotate(-1.5deg); background: #f2c230; color: #111; border: 5px solid transparent; border-image: repeating-linear-gradient(45deg, #111 0 9px, #f2c230 9px 18px) 6; box-shadow: 0 5px 10px rgba(0,0,0,.55); } .ym-sign b { font: 700 22px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.5px; } .ym-sign span { font: 700 14px/1.15 var(--f-text); } .ym-prize { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 0; } .ym-prize-pic { flex: none; width: 132px; height: 132px; display: grid; place-items: center; } .ym-prize-art { width: 132px; height: 132px; } .ym-prize:not(.mine) .ym-prize-art { filter: brightness(0) drop-shadow(0 0 2px #ffd27a) drop-shadow(0 0 12px rgba(255,170,50,.75)); animation: ym-hover 3.4s ease-in-out infinite; } .ym-prize.mine .ym-prize-art { filter: drop-shadow(0 0 10px rgba(255,200,90,.85)); } @keyframes ym-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .ym-prize:not(.mine) .ym-prize-art { animation: none; } } .ym-prize-body { max-width: 300px; padding: 8px 11px 9px; transform: rotate(-1deg); display: flex; flex-direction: column; gap: 3px; box-shadow: 0 5px 12px rgba(0,0,0,.55); } .ym-kicker { font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.5px; color: #7a5208; } .ym-prize-name { font: 700 27px/1 var(--f-hand); } .ym-prize-text { font: 13.5px/1.25 var(--f-text); color: #4a453c; } .ym-prize-body .chips { margin: 2px 0; } .ym-grow { font: 13px/1.2 var(--f-text); color: #5a554b; } .ym-left { font: 700 18px/1.1 var(--f-hand); color: var(--pen-red); } .ym-closed { align-self: center; margin: auto; max-width: 320px; padding: 12px 14px; font: 700 20px/1.2 var(--f-hand); transform: rotate(1deg); } .ym-feed { padding: 8px 10px 9px; border-radius: 4px; background: rgba(14,10,6,.84); color: #f6e8d2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .ym-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: 14px/1.2 var(--f-text); } .ym-have { display: inline-flex; align-items: center; gap: 4px; font: 700 26px/1 var(--f-hand); } .ym-have .ym-iron { width: 30px; height: 30px; } .ym-title { font: 700 17px/1.1 var(--f-hand); color: #ffd27a; } .ym-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .ym-btn { padding: 5px 10px 6px; border: 2px solid #f2c230; border-radius: 4px; background: #3a2c18; color: #fff; font: 700 18px/1 var(--f-print); white-space: nowrap; box-shadow: 0 2px 0 #120c05; } .ym-btn .icon { width: 18px; height: 18px; } .ym-btn:active { transform: translateY(1px) scale(.97); } .ym-btn.poor { opacity: .45; } /* A plate of iron flying into the pit (yamaPour): over everything, in screen coordinates, as big as the stage scale says. */ .ym-plate-fly { position: fixed; z-index: 80; width: calc(26px * var(--s, 1)); height: calc(26px * var(--s, 1)); pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); will-change: transform, opacity; } .ym-more { padding: 4px 6px; font: 700 18px/1 var(--f-hand); color: #ffd27a; border-bottom: 2px dashed rgba(255,210,122,.6); } .ym-note { margin-top: 6px; font: 700 18px/1.15 var(--f-hand); color: #ffd27a; } .ym-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 10px 12px 12px; overflow-y: auto; scrollbar-width: none; background: repeating-linear-gradient(92deg, rgba(90,60,30,.12) 0 3px, transparent 3px 11px), radial-gradient(ellipse at 30% 20%, rgba(255,240,210,.25), transparent 60%), linear-gradient(180deg, #c8a678, #b08957); } .ym-side::-webkit-scrollbar { display: none; } .ym-plate { flex: none; padding: 8px 11px 10px; transform: rotate(.7deg); background: #ead9b6; border: 2px solid #6b5236; border-radius: 2px; box-shadow: 0 4px 9px rgba(0,0,0,.4), inset 0 0 22px rgba(120,80,40,.25); } .ym-plate-h { font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.5px; color: #6b5236; margin-bottom: 4px; } .ym-legend { position: relative; padding-left: 13px; margin-top: 3px; font: 700 16px/1.12 var(--f-hand); color: #2b2620; } .ym-legend::before { content: "•"; position: absolute; left: 1px; top: 0; } .ym-legend.real { color: #8a1c12; } .ym-board, .ym-album { padding: 7px 10px 9px; background: #f4efe2 repeating-linear-gradient(0deg, transparent 0 23px, rgba(120,140,170,.2) 23px 24px); border-radius: 2px; box-shadow: 0 4px 9px rgba(0,0,0,.35); transform: rotate(-.4deg); color: var(--ink); } /* The board gives way first (two rows at least, then the side scrolls), the history is capped; their lists scroll inside. */ .ym-album { flex: none; max-height: 30%; min-height: 0; display: flex; flex-direction: column; } .ym-board-h { flex: none; font: 700 22px/1.05 var(--f-hand); margin-bottom: 2px; } .ym-list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(43,38,32,.4) transparent; } .ym-page { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .ym-page-art { flex: none; width: 42px; height: 42px; } .ym-page-body { min-width: 0; font: 14px/1.2 var(--f-text); } .ym-page-body b { font: 700 17px/1.1 var(--f-hand); } .ym-owners { color: #4a453c; } .ym-burst .levelup-num { font-size: calc(64px * var(--s)); } .tall .win.yama { max-height: none; } .tall .win.yama > .win-x { right: -4px; top: -6px; } .tall .ym { grid-template-columns: 1fr; } .tall .ym-pit { min-height: 560px; } .tall .ym-prize { flex-direction: column; justify-content: center; text-align: center; } .tall .ym-prize-body { align-items: center; } .tall .ym-prize-body .chips { justify-content: center; } .tall .win.yama .win-body { overflow-y: auto; } .tall .ym { flex: none; grid-template-rows: none; } .tall .ym-side, .tall .ym-list { overflow: visible; } .tall .ym-album { max-height: none; } .tall .ym-legend { font-size: 17px; } .tall .ym-btn { font-size: 17px; padding: 5px 8px 6px; } .ym-plate { margin-right: 16px; } .tall .ym-plate { margin-right: 0; } .short .ym-pit { gap: 5px; padding: 7px 8px; } .short .ym-sign { padding: 3px 10px 4px; } .short .ym-sign b { font-size: 17px; } .short .ym-sign span { font-size: 12.5px; } .short .ym-prize-pic, .short .ym-prize-art { width: 84px; height: 84px; } .short .ym-prize-body { padding: 6px 9px 7px; gap: 2px; } .short .ym-prize-name { font-size: 22px; } .short .ym-prize-text { display: none; } .short .ym-feed { padding: 6px 8px 7px; } .short .ym-have { font-size: 21px; } .short .ym-btns { margin-top: 5px; gap: 5px; } .short .ym-btn { font-size: 15px; padding: 4px 7px 5px; } .short .ym-legend { font-size: 15.5px; } /* A phone sideways: no room for a list in a list, the whole side scrolls (the pit with the buttons stays). */ .short .ym-list { overflow: visible; } .short .ym-album { max-height: none; } /* ---------- «Обход» as a list (system 3; owner 2026-10-11, probe docs/probes/obhod.html, variant А) ---------- A dark panel like the crew's штаб: the list on the left (a tape label «Обход», groups, rows with a picture, the level range on a paper tag, beaten bosses and roofs, a progress bar), the chosen district on the right over its picture: the plaque, the next boss with the ladder of faces, what calls for action, the buttons. */ /* On a PC the stage runs to 1428×789 units (scale 1.4): the window takes the room instead of scrolling (the owner 2026-11-02: «С ПК оно маленькое и есть место на расширение вместо того что б скроллить»); on a phone sideways the layer is lower than any cap anyway. */ .win.obhod { max-width: 1240px; height: 100%; max-height: 100%; padding: 0; gap: 0; border: 2px solid #000; border-radius: 8px; background: #1b1813; box-shadow: 0 0 0 1px #3a3229 inset, 0 12px 28px rgba(0,0,0,.7); } /* The cross sticks out of the corner like on the other windows, so the window itself never clips: the body rounds its own corners. */ .win.obhod > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; } .win.obhod .win-body { display: grid; grid-template-columns: 330px minmax(0, 1fr); padding: 0; overflow: hidden; min-height: 0; border-radius: 6px; } .ob-list { display: flex; flex-direction: column; min-height: 0; overflow: auto; scrollbar-width: thin; border-right: 1px solid #000; box-shadow: 1px 0 0 #2a251e; background: #16130f; } .ob-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 9px 12px 6px; background: #16130f; box-shadow: 0 6px 8px -4px rgba(0,0,0,.7); } .ob-head small { color: #b9b2a2; font-size: 15px; } .ob-tape { font: 700 20px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink); background: var(--seeds); padding: 4px 12px 5px; transform: rotate(-1.5deg); clip-path: polygon(0 6%, 100% 0, 99% 94%, 1% 100%); } .ob-grp { display: flex; align-items: center; gap: 8px; padding: 4px 12px 1px; font: 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; color: #8a8273; } .ob-grp::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #3a3229, transparent); } .ob-row { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 0 10px; align-items: center; padding: 4px 12px 4px 8px; border-left: 4px solid transparent; width: 100%; } .ob-row + .ob-row { border-top: 1px solid rgba(255,255,255,.04); } .ob-row:hover { background: rgba(255,255,255,.04); } .ob-row.sel { background: linear-gradient(90deg, rgba(242,194,48,.14), rgba(242,194,48,.03)); border-left-color: var(--seeds); } .ob-row.zalr { background: linear-gradient(90deg, rgba(224,72,63,.12), transparent 70%); } .ob-row.soon { cursor: default; } .ob-pic { display: block; width: 58px; height: 38px; border-radius: 4px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px #000, 0 1px 0 #3a3229; } .ob-pic .art { width: 100%; height: 100%; object-fit: cover; } .ob-pic.dim .art, .ob-row.lock .ob-pic .art { filter: grayscale(1) brightness(.5); } .ob-t { min-width: 0; } .ob-n { font: 700 21px/1.05 var(--f-hand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ob-row.lock .ob-n, .ob-row.soon .ob-n { color: #9a9387; } .ob-s { display: flex; gap: 10px; margin-top: 2px; font: 13.5px/1.1 var(--f-text); color: #b9b2a2; white-space: nowrap; } .ob-s b { color: var(--text); font-weight: 400; } .ob-s i { font-style: normal; display: inline-flex; align-items: center; gap: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ob-s .icon, .ob-s .icon .art { width: 14px; height: 14px; } .ob-lv { font: 700 15px/1 var(--f-hand); color: var(--ink); background: var(--paper); padding: 3px 7px; border-radius: 2px; transform: rotate(3deg); clip-path: polygon(0 8%, 100% 0, 99% 92%, 1% 100%); white-space: nowrap; } .ob-row.lock .ob-lv { background: #4a443b; color: #d9cca6; } .ob-bar { height: 5px; margin-top: 4px; background: #000; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px #2a251e; } .ob-bar i { display: block; height: 100%; background: var(--seeds); } .ob-row.done .ob-bar i { background: var(--green); } /* «Дела 2.0»: the week under the district's name: the event, then the branch's step (yellow when the final waits, green once taken) and the «Всем двором» tally. */ .ob-ev { display: block; min-width: 0; margin-top: 1px; } .ob-ev-t { display: block; font: 700 14px/1.15 var(--f-text); color: #e8dfc7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ob-ev-s { display: flex; gap: 8px; font: 13px/1.15 var(--f-text); color: #b9b2a2; white-space: nowrap; overflow: hidden; } .ob-ev-b { flex: none; } .ob-ev-b.hot { color: var(--seeds); font-weight: 700; } .ob-ev-b.done { color: var(--green); } .ob-ev-x { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ob-dot { position: absolute; right: 8px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #000; } .ob-zal { position: absolute; right: 6px; top: 3px; font: 700 11px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #fff; background: var(--red); padding: 2px 6px; transform: rotate(2deg); box-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; animation: obZal 1.6s ease-in-out infinite; } @keyframes obZal { 50% { filter: brightness(1.25); } } /* the right part */ .ob-prev { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .ob-shot { position: absolute; inset: 0; background: #000; } .ob-shot .art { width: 100%; height: 100%; object-fit: cover; } .ob-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,7,.1), rgba(10,9,7,.15) 55%, rgba(10,9,7,.92)); } .ob-shot:disabled .art { filter: grayscale(.8) brightness(.6); } .ob-top { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; pointer-events: none; } .ob-plaque { font: 700 24px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: var(--ink); background: var(--paper); padding: 7px 16px 8px; transform: rotate(-1deg); clip-path: polygon(0 5%, 100% 0, 99% 95%, 1% 100%); box-shadow: 0 3px 6px rgba(0,0,0,.5); max-width: 100%; } .ob-plaque small { display: block; font: 15px/1.1 var(--f-hand); text-transform: none; letter-spacing: 0; color: #5a554b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ob-bottom { position: relative; margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; padding: 10px 14px 12px; } .ob-zal-card { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--red); background: linear-gradient(90deg, rgba(90,14,10,.9), rgba(40,8,6,.85)); box-shadow: 0 3px 8px rgba(0,0,0,.5); } .ob-zal-t { min-width: 0; } .ob-zal-card .ob-k { color: #ffb3aa; } .ob-m { font: 13px/1.15 var(--f-text); color: #e8dfc7; margin-top: 2px; } .ob-hit { margin-left: auto; flex: none; min-height: 38px; padding: 7px 16px; font-size: 16px; } .ob-boss { display: flex; align-items: center; gap: 10px; min-width: 0; } .ob-face { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 1.5px #000; flex: none; } .ob-face .art { position: absolute; width: var(--face-w, 160%); height: auto; left: var(--face-x, -30%); top: var(--face-y, -4%); max-width: none; } /* the fight ladder's crop: head and shoulders */ .ob-face.b { filter: grayscale(1) brightness(.6); } .ob-face.next { box-shadow: 0 0 0 1.5px #000, 0 0 0 3px var(--seeds); } .ob-face.big { width: 64px; height: 64px; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--red); } .ob-face.big.beaten { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--green); } .ob-who { min-width: 0; } .ob-k { font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: #b9b2a2; } .ob-nm { font: 700 20px/1.1 var(--f-hand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ob-hp { display: flex; gap: 10px; margin-top: 3px; font: 13.5px/1 var(--f-text); color: #b9b2a2; } .ob-hp b { color: var(--text); font-weight: 400; } .ob-cost { display: inline-flex; align-items: center; gap: 3px; } .ob-cost .icon, .ob-cost .icon .art { width: 18px; height: 18px; } .ob-faces { display: flex; gap: 3px; margin-top: 5px; } /* What calls for action, as stickers you press (owner 2026-10-16: «кликабельные штуки… сделать более видимыми»): the affordable roof opens the points' notebook, the brawl opens the fight; a yellow one is a chance, a red one a fight. */ .ob-calls { display: flex; gap: 8px 10px; flex-wrap: wrap; margin-top: 8px; } .ob-call { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px 6px 8px; border-radius: 4px; border: 1px solid #000; background: var(--seeds); color: var(--ink); font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; box-shadow: 0 3px 0 #8a6a0c, 0 4px 8px rgba(0,0,0,.35); transform: rotate(-1deg); } .ob-call:active { transform: rotate(-1deg) translateY(2px); box-shadow: 0 1px 0 #8a6a0c; } .ob-call.hot { background: var(--red); color: #fff; box-shadow: 0 3px 0 #7d211c, 0 4px 8px rgba(0,0,0,.35); transform: rotate(1deg); } .ob-call.hot:active { transform: rotate(1deg) translateY(2px); box-shadow: 0 1px 0 #7d211c; } .ob-call .icon, .ob-call .icon .art { width: 20px; height: 20px; } .ob-zames b { font: 700 16px/1 var(--f-hand); margin-left: 2px; } .ob-acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; } .ob-act { background: #2a251e; color: var(--text); border: 1px solid #000; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.07); } .ob-go { position: relative; background: var(--seeds); color: var(--ink); transform: rotate(-1deg); } .ob-go:disabled { background: #4a443b; color: #d9cca6; transform: none; } /* The entry price sits on the button and sticks out of its corner (owner: «цену прямо на кнопку, x3 кулак, выпирает»). */ .ob-price { position: absolute; right: -12px; top: -14px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 5px 2px 7px; border-radius: 12px; background: #e2533f; color: #fff; font: 700 15px/1 var(--f-hand); font-style: normal; border: 2px solid #000; box-shadow: 0 2px 3px rgba(0,0,0,.6); transform: rotate(6deg); white-space: nowrap; } .ob-price .icon, .ob-price .icon .art { width: 22px; height: 22px; } .ob-price .icon { margin: -4px -2px -4px 0; } /* Portrait: the list on top shows three districts and scrolls (owner: «на телефоне уменьшить до 3-х отображаемых районов»), a shade at its foot says there is more; the chosen district is the card under it. */ /* The window never exceeds the layer (a Telegram that is not fullscreen gives a short stage): the list gives way to a third of the height, the card shrinks to its bottom block (owner 2026-10-11: «с телефона интерфейс наезжает друг на друга сверху»). */ /* Portrait («полка», owner 2026-10-16 after the probe docs/probes/zona-okno.html, А): the head, a strip of picture tiles, the panel in the rest of the window with one scroll (before: the list on top with its own scroll, the panel under it with another). A tile: the picture, the name on a plate (yellow and lifted when chosen), a paper tag with the count on the picture's foot, «ты тут» at the top left, the drifter's red tag or the dot at the top right; a closed district grey. The strip scrolls sideways when the districts grow. */ .tall .win.obhod { max-height: 100%; } .tall .win.obhod > .win-x { top: 0; right: 0; } /* inside the window: above it is the header */ .tall .win.obhod .win-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); } .tall .win.obhod .ob-head { position: static; padding: 8px 54px 4px 12px; box-shadow: none; } .tall .win.obhod .ob-head small { min-width: 0; line-height: 1.2; } .tall .win.obhod .ob-head small > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ob-strip { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 4px; padding: 2px 6px 6px; overflow-x: auto; scrollbar-width: none; background: #16130f; border-bottom: 1px solid #000; box-shadow: 0 1px 0 #2a251e, 0 6px 8px -4px rgba(0,0,0,.7); } .ob-strip::-webkit-scrollbar { display: none; } .ob-tile { position: relative; flex: 1 0 72px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 2px; } .ob-tile.photo { flex-basis: 92px; } .ob-tile.soon { cursor: default; } .ob-tpic { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 8px; overflow: hidden; background: #0c0a08; box-shadow: 0 0 0 1px #000, 0 1px 0 #3a3229; transition: transform .12s; } .ob-tpic .art { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; } .ob-tpic .ph { width: 100%; height: 100%; } .ob-tile.photo .ob-tpic { width: 84px; height: 52px; border-radius: 5px; } .ob-tile.photo .ob-tpic .art { object-fit: cover; padding: 0; } .ob-tile:active .ob-tpic { transform: scale(.96); } .ob-tnm { max-width: 100%; padding: 2px 5px 3px; font: 700 11.5px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: .4px; color: #b9b2a2; text-align: center; overflow-wrap: anywhere; } .ob-tile.sel .ob-tpic { transform: translateY(-3px); box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--seeds), 0 6px 10px rgba(0,0,0,.6); } .ob-tile.sel .ob-tnm { color: var(--ink); background: var(--seeds); transform: rotate(-2deg); clip-path: polygon(0 8%, 100% 0, 99% 92%, 1% 100%); } .ob-tile.lock .ob-tpic .art, .ob-tile.soon .ob-tpic .art { filter: grayscale(1) brightness(.5); } .ob-tile.lock .ob-tnm, .ob-tile.soon .ob-tnm { color: #7a7368; } .ob-ttag { position: absolute; right: 4px; top: 50px; padding: 1px 5px 2px; font: 700 12px/1 var(--f-hand); color: var(--ink); background: var(--paper); transform: rotate(4deg); box-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; } .ob-tile.photo .ob-ttag { top: 44px; } .ob-tile.lock .ob-ttag { background: #4a443b; color: #d9cca6; } .ob-ttag span.icon.inline { width: 1.15em; height: 1.15em; vertical-align: -0.15em; margin: 0; } .ob-tile .ob-dot { right: 6px; top: 2px; } .ob-tile .ob-zal { right: -2px; top: 2px; font-size: 10px; padding: 2px 4px; } /* the week on a tile: the event in two lines at most, the step and the tally one under another */ .ob-ev.in-tile { width: 100%; margin-top: -1px; text-align: center; } .ob-ev.in-tile .ob-ev-t { font-size: 11px; line-height: 1.1; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .ob-ev.in-tile .ob-ev-s { flex-direction: column; align-items: center; gap: 0; font-size: 10.5px; line-height: 1.15; } .ob-ev.in-tile .ob-ev-x { max-width: 100%; } .tall .ob-prev { min-height: 0; } .tall .ob-plaque { font-size: 22px; } .ob-plaque small i { font-style: normal; } .ob-plaque small b { font-weight: 400; } .ob-plaque small span.icon.inline { width: 1.15em; height: 1.15em; vertical-align: -0.15em; margin: 0 .04em; } .tall .ob-bottom { grid-template-columns: minmax(0, 1fr); } .tall .ob-acts { flex-direction: row; } .tall .ob-acts .btn { flex: 1; } /* ---------- «Зона» (system 22, decision 87): the cell instead of the hub, the sectors instead of «Обход» ---------- The cell is the hub's layout with a colder shade: the guy with the mugshot board «до воли» in his hands (the chalk is SVG text inside the guy, guy.js guyChalk: nothing to style here), the Zone's kiosk and the crew on the left, the «Цех» and the big «Зона» sign on the right. The sectors window reuses the dark «Обход» list; its panel is a dark cell with a big grey sector icon behind the text. The art is a placeholder until drawn (icon/kamera…, npc/sokamernik, ui/chay). */ .map.cell .hub-mid { flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; } /* The ticket «прописка» on the big sign sits on the picture's foot, not on the name. */ .map.cell .hub-icon.big .corner-tag { bottom: auto; top: calc(var(--ico, 60px) * 1.45 - 10px); right: 2px; } .map.cell .hub-me { margin-top: auto; } /* The kipish megaphone stands in the top left corner (.cell-top, renderCellMap), out of the columns so the guy stays centred and takes the whole height (owner 2026-10-16: «пацан … карлик, есть куда увеличить»); the «до воли» paper slip stood here until the board in the guy's hands took the countdown (the owner's sketch, 2026-10-16). It starts 44 px below the header's edge: the porthole's level tag and the «понты» tag hang up to 37 px below it (measured with the owner's VIP frame). */ .map.cell .cell-top { position: absolute; left: 12px; top: 44px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } /* The guy fills the cell, so the icons stand in front of his legs (owner 2026-10-16: «если иконки спереди него стоят ничего страшного, добавь шейдер замыливания фону на уровне иконок», then about a blurred dark plate: «слишком жирная и квадратная обводка, можно обводку сделать по иконке и слияние с текстом»): no plate, a paper outline follows the picture's own shape and runs into the paper slip of the caption, like a sticker, with one soft dark shadow under both. Four shifted copies make the outline (a drop-shadow without blur is a copy), five small static passes per icon: no backdrop blur over the breathing guy, so a phone is fine with it. */ .map.cell .hub-icon { gap: 0; } .map.cell .hub-icon-art { filter: drop-shadow(1.5px 0 0 #ece2c4) drop-shadow(-1.5px 0 0 #ece2c4) drop-shadow(0 1.5px 0 #ece2c4) drop-shadow(0 -1.5px 0 #ece2c4) drop-shadow(0 3px 4px rgba(0,0,0,.65)); } .map.cell .hub-icon-name { margin-top: -3px; box-shadow: 0 3px 4px rgba(0,0,0,.65); } /* The Zone's window on a PC stands as tall as its content, 560 units at least and the layer at most (the owner 2026-11-02: «окно можно сделать поменьше но всё ещё без скролла если на ПК есть место»); «Обход» keeps the full height (the district's picture fills its panel). */ .win.obhod.zona { height: auto; min-height: min(560px, 100%); } .tall .win.obhod.zona { height: 100%; } .win.obhod.zona .zn-tape { background: var(--red); color: #fff; } .zn-pic { background: #0c0a08; } .zn-pic .art { object-fit: contain; padding: 3px; box-sizing: border-box; } .zn-pic .ph { width: 100%; height: 100%; } .zn-rank { margin: 2px 12px 10px; padding: 7px 10px; border: 1px dashed #4a443b; border-radius: 6px; color: #b9b2a2; font: 13.5px/1.25 var(--f-text); } .zn-rank b { display: block; font: 700 19px/1.05 var(--f-hand); color: var(--seeds); } .zn-rank span { display: block; } .zn-rank .icon, .zn-rank .icon .art { width: 15px; height: 15px; } .zn-rank span.icon.inline { display: inline-block; } .zn-rank-line b { font: 700 15px/1 var(--f-hand); color: var(--seeds); } .zn-rank-line span.icon.inline { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.15em; margin: 0 .04em; } .zn-prev { background: #0f0d0b; container-type: inline-size; container-name: zn; } /* a sector's panel lays out by its own width (@container zn) */ .zn-shot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #2a251e, #0f0d0b 70%); } .zn-shot .art { width: 46%; max-width: 240px; height: auto; opacity: .16; filter: grayscale(1); } .zn-shot .ph { aspect-ratio: 1; } /* From the top: on a PC the panel is taller than most sectors' content and «margin-top: auto» left the top empty (the owner 2026-11-02: «сверху полно места в окне но всё равно всё сдвинулось вниз»); the sector's faint picture stays behind. */ .zn-body { position: relative; margin-top: 0; display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 12px; overflow: auto; min-height: 0; scrollbar-width: thin; font: 15px/1.25 var(--f-text); } .zn-body .muted { font-size: 13.5px; } .zn-mate { display: flex; align-items: center; gap: 10px; } /* The round portrait of the cellmate (and the tattooist): a full-height npc picture (900×1200, the face at a quarter of the height) zoomed to the face inside a clipped circle, like the phone's faces (.mb-face-art); the placeholder fills the circle as it is. */ .zn-mate-pic { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--red); } .zn-mate-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(2.1); transform-origin: 50% 24%; } .zn-mate-art.ph { width: 100%; height: 100%; transform: none; } .zn-mate-t { min-width: 0; } .zn-q { font: 700 19px/1.2 var(--f-hand); color: var(--text); } .zn-q-mark { color: var(--seeds); } .zn-text { flex: none; min-height: 64px; margin-top: 0; padding: 6px 8px; border-radius: 4px; background: #f3ecd6; color: var(--ink); font: 15px/1.25 var(--f-text); } .zn-text::placeholder { color: #8a8273; } .zn-body .zb-tools { display: flex; align-items: center; gap: 10px; } .zn-body .zb-count { color: #8a8273; } .zn-say { margin-left: auto; } .zn-or { margin-top: 2px; } .zn-btns { display: flex; gap: 6px; flex-wrap: wrap; } .zn-btn { flex: 1 1 100px; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 0; } .zn-btn .chip { font-size: 12px; } .zn-btn.liked { box-shadow: inset 0 0 0 2px var(--seeds), 0 3px 0 #000; } .zn-line { padding: 8px 10px; border-left: 3px solid var(--seeds); background: rgba(242,194,48,.08); } /* Talents by rank (step 6): a short list under the cell and in the talents tab; a locked one is dimmed, a learnt one carries a check. */ .zt { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.18); } .zt-title { margin-bottom: -2px; } .zt-hint { font-size: 12.5px; } .zt-row { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-left: 3px solid rgba(255,255,255,.25); background: rgba(255,255,255,.04); } .zt-row.have { border-left-color: #6fcf6f; } .zt-row.open { border-left-color: var(--seeds); } .zt-row.lock { opacity: .62; } .zt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .zt-name { font: 700 15px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .4px; } .zt-row.have .zt-name::after { content: " ✓"; color: #6fcf6f; } .zt-rank { margin-left: auto; font-size: 12px; color: #b9b2a2; } .zt-text { font-size: 13.5px; line-height: 1.25; } .zt-foot { display: flex; align-items: center; gap: 8px; } .tn-page .zt { color: #2a241a; border-top-color: rgba(60,50,30,.3); } .tn-page .zt-row { background: rgba(60,50,30,.06); border-left-color: rgba(60,50,30,.35); } .tn-page .zt-rank, .tn-page .zt-title { color: #6b6255; } .zn-term b { font: 700 24px/1 var(--f-print); text-transform: uppercase; color: var(--seeds); } .zn-term .chips { margin-top: 6px; } .zn-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .zn-job { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 10px; border: 1px solid #000; border-radius: 6px; background: #2a251e; color: var(--text); box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.07); font: 700 16px/1.1 var(--f-hand); text-align: left; } .zn-job:hover { background: #342e26; } .zn-job:active { translate: 0 2px; box-shadow: 0 0 0 #000; } .zn-job:disabled { opacity: .5; pointer-events: none; } .zn-job-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zn-good { display: flex; align-items: center; gap: 10px; } .zn-good-pic { flex: none; width: 44px; height: 44px; border-radius: 6px; background: #000; overflow: hidden; box-shadow: 0 0 0 1px #3a3229; } .zn-good-pic .art { width: 100%; height: 100%; object-fit: contain; } .zn-good-t { min-width: 0; flex: 1; } .zn-good .btn { flex: none; white-space: nowrap; } .zn-have { color: var(--seeds); font-weight: 700; } .zn-gives { font-size: 13px; } .zn-tea b { color: var(--seeds); } .zn-soon b { display: block; font: 700 20px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: var(--seeds); margin-bottom: 4px; } /* «Боссы сезона» (step 4): the ladder of medallions (the same as over a district fight), the chosen sitter's card, his story so far as lines on a prison notebook page, the «Вломить» button. */ .zn-ladder { display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 4px 6px 10px; justify-content: flex-start; } .zn-ladder .medallion { width: 46px; } .zn-sitter { display: flex; flex-direction: column; gap: 8px; } .zn-sitter-head { display: flex; align-items: center; gap: 10px; } .zn-sitter-pic { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--red); } .zn-sitter-pic img.art { position: absolute; width: var(--face-w, 160%); height: auto; left: var(--face-x, -30%); top: var(--face-y, -4%); max-width: none; } /* BOSS_FACE */ .zn-sitter-pic .ph { width: 100%; height: 100%; } .zn-sitter-t { min-width: 0; } .zn-sitter .fp-prize { color: var(--text); } .zn-sitter .fp-prize b { color: #b9b2a2; } .zn-story { padding: 8px 10px 6px; border-radius: 3px; color: var(--ink); font: 15px/1.3 var(--f-hand); background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(60,90,160,.28) 21px 22px), #efe8d2; box-shadow: 0 2px 0 #000; } .zn-story .ob-k { color: #6b1d16; margin-bottom: 2px; } .zn-piece { padding: 1px 0 3px; } .zn-piece + .zn-piece { border-top: 1px dashed rgba(40,36,30,.3); } .zn-fight-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .zn-fight { padding: 8px 22px; font-size: 17px; } .zn-story-said { padding: 6px 10px; border-left: 3px solid var(--seeds); background: rgba(242,194,48,.08); font-style: italic; } .zn-story-said b { font-style: normal; } /* The sitters 2.0: the ladder's round as a red stamp («2-й круг»), the sitter's manner and the кореш's word in the card and on the sheet. */ .zn-round-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 0 4px; } .zn-round { display: inline-block; padding: 2px 8px 1px; border: 2px solid var(--red); border-radius: 3px; transform: rotate(-3deg); font: 700 14px/1.2 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: var(--red); } .paper .zn-round { border-color: var(--pen-red); color: var(--pen-red); } .zn-manner, .zn-tip { font-size: 15px; line-height: 1.3; } .zn-manner b { color: #b9b2a2; font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; } .paper .zn-manner b, .paper .zn-tip b { color: #6b1d16; } .zn-tip { font-family: var(--f-hand); font-size: 16px; } .zn-tip b { font-family: var(--f-print); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: #b9b2a2; } .chip.on { background: var(--red); border-color: var(--red); color: #fff; } /* The crew list and the kenty: the one who sits (owner: «пометка "сидит на зоне"»). */ .cr-zone { margin-left: 4px; padding: 0 5px 1px; border-radius: 3px; background: var(--red); color: #fff; font: 700 11px/1.3 var(--f-print); text-transform: uppercase; letter-spacing: .6px; } /* Portrait: the list on top (three sectors), the panel under it; the shift buttons in one column, the mate smaller. */ .tall .zn-jobs { grid-template-columns: 1fr; } /* «Геннадий-расконвойник» (decision 133): leave slips of grey office paper beside the man himself; the red stamp lies on the slip while he is out. */ .zr { display: grid; grid-template-columns: minmax(104px, 27%) minmax(0, 1fr); gap: 10px; align-items: end; } .zr-man { align-self: stretch; position: relative; min-height: 0; overflow: hidden; } .zr-art { position: absolute; left: 50%; top: 0; width: 150%; max-width: 230px; height: auto; margin-top: -12%; transform: translateX(-50%); filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); } .zr-art.ph { width: 100%; height: 100%; } .zr-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .zr-say { font-size: 17px; line-height: 1.15; } .zr-slip { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 5px 8px 5px 16px; color: var(--ink); background: #e7dcc0; background-image: radial-gradient(circle at 7px 50%, #0f0d0b 3.5px, transparent 4px); box-shadow: 0 2px 4px rgba(0,0,0,.55); } .zr-slip:nth-of-type(odd) { rotate: -.5deg; } .zr-slip:nth-of-type(even) { rotate: .4deg; } .zr-slip.off { filter: saturate(.3) brightness(.72); } .zr-t { min-width: 0; flex: 1; } .zr-days { font: 700 16px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .4px; } .zr-hint { font: 13px/1.15 var(--f-text); color: #4a463d; } .zr-slip .btn { flex: none; white-space: nowrap; min-height: 38px; } .zr-away { display: block; overflow: hidden; min-height: 92px; padding: 8px 10px 8px 16px; } .zr-left { font: 700 22px/1.1 var(--f-hand); color: #1d3f8f; } .zr-stamp { position: absolute; right: 8px; top: 8px; padding: 3px 8px; border: 3px solid var(--pen-red); border-radius: 4px; color: var(--pen-red); opacity: .82; font: 700 17px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; rotate: -9deg; } /* The trip's map: a pencil line from stop to stop, red where he has been, his round face where he is now; the first and last names keep inside the slip. */ .zr-way { padding: 16px 16px 8px 10px; } .zr-line { position: relative; height: 18px; border-top: 2px dashed #8d8470; } .zr-line > i { position: absolute; left: 0; top: -2px; height: 2px; background: var(--pen-red); } .zr-stop { position: absolute; top: -6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #e7dcc0; box-shadow: inset 0 0 0 2px #6e6655; } .zr-stop.past { background: var(--pen-red); box-shadow: inset 0 0 0 2px #7a1d16; } .zr-stop small { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); font: 700 12px/1 var(--f-print); white-space: nowrap; color: #4a463d; } .zr-stop:first-of-type small { left: 0; transform: none; } .zr-stop:nth-last-of-type(2) small { left: auto; right: 0; transform: none; } .zr-mark { position: absolute; top: -15px; z-index: 1; margin-left: -13px; } .zr-face { display: block; flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 2px #2a2620; } .zr-face .art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(2.4); transform-origin: 57% 29.5%; } .say .zr-way { margin: 2px 0 8px; } .say .zr-stop:not(.now) small { display: none; } /* the bubble is narrow: only the stop he is at keeps its name */ /* The note on the «Хата» while he is out: the same office paper tied over the yard, gone when he lands. */ .zr-note { position: absolute; left: 50%; top: 8px; z-index: 3; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 8px; transform: translateX(-50%) rotate(-1deg); color: var(--ink); text-align: left; background: #e7dcc0; box-shadow: 0 2px 5px rgba(0,0,0,.55); cursor: pointer; white-space: nowrap; } .zr-note:active { transform: translateX(-50%) rotate(-1deg) translateY(1px); } .zr-note .zr-face { width: 34px; height: 34px; } .zr-note-t { display: flex; flex-direction: column; gap: 1px; } .zr-note-t b { font: 700 15px/1.05 var(--f-print); } .zr-note-t span { font: 700 15px/1.05 var(--f-hand); color: #1d3f8f; } /* A wide panel (a PC): Геннадий whole, not a bust cut at the slips' height (the owner 2026-11-02: «Геннадий выглядит обрезанным»); the slips start at the top beside him. */ @container zn (min-width: 820px) { .zr { grid-template-columns: minmax(104px, 30%) minmax(0, 1fr); align-items: start; column-gap: 20px; } .zr-man { min-height: 420px; } .zr-art { max-width: 310px; margin-top: -6%; } .zr-col { padding-top: 14px; } } .tall .zr-note { top: 34px; } .short .zr-say { display: none; } /* a phone sideways: the plaque says who he is, the slips must fit */ .short .zr-slip { min-height: 42px; padding-top: 3px; padding-bottom: 3px; } .short .zr-away { min-height: 76px; } /* Portrait: Геннадий in full height at the left, his words in a bubble at his side, the slips under them across (the owner 2026-11-02: «с телефона можно тоже показать во весь рост», then «слишком низко … более интересное UI решение» on him under the slips). */ .tall .zr { grid-template-columns: 46% minmax(0, 1fr); column-gap: 8px; row-gap: 8px; } .tall .zr-man { grid-column: 1; grid-row: 1; height: 264px; align-self: end; overflow: visible; } /* the figure may hang a little over the column's edges */ .tall .zr-art { width: auto; height: 100%; max-width: none; left: 48%; margin-top: 0; } .tall .zr-col { display: contents; } .tall .zr-say { grid-column: 2; grid-row: 1; align-self: center; position: relative; margin: 0 0 0 6px; padding: 10px 12px; font-size: 16px; border-radius: 12px; background: rgba(231,220,192,.1); box-shadow: inset 0 0 0 1px rgba(231,220,192,.14); } .tall .zr-say::before { content: ""; position: absolute; left: -9px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 0; border-right-color: rgba(231,220,192,.14); } /* the bubble's tail toward him */ .tall .zr-slip, .tall .zr > .zr-col > .zn-tea { grid-column: 1 / -1; } .tall .zn-body { margin-top: 0; padding: 6px 10px 10px; } /* the panel is the whole window: the body reads from the top, not from the foot */ .tall .zn-shot .art { width: 34%; } .tall .zn-q { font-size: 18px; } .tall .zn-btn { flex-basis: 30%; } /* A sitter's fight in portrait: the shelf is four pockets, not two or three — narrower bags, the hint keeps its room beside them. */ .tall .fp.zona .fp-pockets { gap: 4px; } .tall .fp.zona .kr-bag { width: 44px; height: 48px; } .tall .fp.zona .kr b { font-size: 12px; } .tall .fp.zona.moves.kr-on .fp-hint { max-width: calc(100% - 218px); } .tall .zn-ladder { gap: 8px 9px; padding: 2px 2px 8px; } .tall .zn-round { font-size: 13px; } .tall .zn-ladder .medallion { width: 40px; } .tall .zn-sitter-pic { width: 56px; height: 56px; } .tall .zn-story { font-size: 14.5px; } /* «Рейтинг» on the Zone (2026-10-16; the owner: «добавь там кнопку "рейтинг" кто сделал больше всех кругов»): the button on the sitters' panel is a dark plate with a bunch of chalk tallies; it opens the «Рейтинг» window on «Круги на Зоне» (decision 93). */ .zn-top-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 13px 4px 10px; flex: none; border: 1px solid #000; border-radius: 5px; background: #2f3b35; color: #eeeadf; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.08); font: 700 15px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; cursor: pointer; } .zn-top-btn:hover { background: #38463f; } .zn-top-btn:active { translate: 0 2px; box-shadow: 0 0 0 #000; } .zn-top-tally { height: 18px; } .tally { display: block; flex: none; height: 20px; } .tally line { stroke: #eeeadf; stroke-width: 1.9; stroke-linecap: round; opacity: .92; } /* A short stage (a phone sideways): the prize scrap would leave the list two rows, so the whole body scrolls and the list with it; the cross stays on the card's corner. On a landscape stage the button keeps to the round line. */ .zn-round-line .muted { flex: 1 1 0; min-width: 0; } /* The fight screen of a closed sitter: the way to the chain's next one under the lock line. */ .fp-lockmsg .zn-next { min-height: 44px; margin-top: 8px; padding: 0 16px; pointer-events: auto; font: 700 15px/1 var(--f-print); text-shadow: none; } .tall .zn-top-btn { min-height: 44px; font-size: 14px; } .tall .zn-round-line .muted { order: 3; flex-basis: 100%; } /* the stamp and the button on one line, the words under them */ /* «Кольщик» (step 5): the guy with the five places marked (the kept figure of guy.js), the season's designs as rows, the chosen one's card with «Набить»; the tab «Татухи» in the guy's window is the same on paper with «Свести». The marks on the guy are the drawn tattoos (tattoo/) or, until drawn, a pricked star (guy.js, guyInkMark; the same star in the rows: .ink-mark). */ .ink-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .ink-head b { font: 700 19px/1.1 var(--f-hand); color: var(--seeds); } .ink-head .zn-tea { flex: none; white-space: nowrap; } .ink-wrap { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; align-items: start; } .ink-body { position: relative; width: 100%; aspect-ratio: 2 / 3; } .ink-body > .guy, .ink-body > .doll { position: absolute; inset: 0; width: 100%; height: 100%; } .ink-body > .guy > svg { overflow: hidden; } .ink-spot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border: 2px solid #f6eed6; border-radius: 50%; background: rgba(20,16,12,.55); box-shadow: 0 0 0 2px #000, 0 2px 4px rgba(0,0,0,.5); cursor: pointer; transition: transform .12s; } .ink-spot i { position: absolute; inset: 5px; border-radius: 50%; } .ink-spot.inked i { background: var(--seeds); } .ink-spot.faded i { background: #8a8273; } .ink-spot.on { border-color: var(--seeds); transform: scale(1.2); } .ink-spot:active { transform: scale(.94); } .ink-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ink-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px dashed #4a443b; border-radius: 6px; } .ink-card .chips { margin-top: 2px; } .ink-card .btn { align-self: flex-start; } .ink-lock { color: var(--seeds); } .ink-list { display: flex; flex-direction: column; gap: 4px; } .ink-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 8px; border: 1px solid #000; border-radius: 6px; background: #2a251e; color: var(--text); text-align: left; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.07); } .ink-row:hover { background: #342e26; } .ink-row.on { box-shadow: inset 0 0 0 2px var(--seeds), 0 2px 0 #000; } .ink-row.locked { opacity: .62; } .ink-row.have .ink-row-r { color: var(--seeds); } .ink-row-pic { width: 36px; height: 36px; border-radius: 6px; background: #e9dfc3; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ink-row-pic .art { width: 100%; height: 100%; object-fit: contain; } .ink-row-t { min-width: 0; display: flex; flex-direction: column; } .ink-row-t b { font: 700 15px/1.1 var(--f-hand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ink-row-t small { font-size: 12px; color: #b9b2a2; } .ink-row-r { font: 700 14px/1 var(--f-print); white-space: nowrap; } .ink-mark { display: block; width: 62%; height: 62%; background: #22304a; opacity: .85; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .ink-ask { display: flex; gap: 6px; flex-wrap: wrap; } .ink-word-pic { display: block; width: 100%; text-align: center; font: 400 11px/1 "Russo One", "Arial Black", sans-serif; color: #22304a; letter-spacing: 1px; } /* The parlour's tools and the place's panel: what is inked there, the design's card with its масть and meaning, the приколы, the past. */ .ink-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ink-tools .zn-tea { margin-right: auto; } .ink-note { font-size: 13px; } .ink-now { padding: 6px 10px; border-left: 3px solid var(--seeds); background: rgba(242,194,48,.08); font-size: 14px; } .ink-now.faded { border-left-color: #8a8273; color: #b9b2a2; } .ink-now b { color: var(--seeds); } .ink-crooked { color: #ef7a5f; } .ink-card-head { display: flex; align-items: center; gap: 10px; } .ink-card-head .ink-row-pic { flex: none; width: 44px; height: 44px; } .ink-meaning { font: 700 15px/1.2 var(--f-hand); color: var(--seeds); } .pk-sheet.ink .ink-meaning { color: #1d3f8f; } .ink-row.prikol, .ink-row.past { cursor: default; } .ink-row.past { opacity: .5; } .ink-row.past .ink-row-r { font-size: 12px; color: #b9b2a2; } .ink-row.prikol .btn { flex: none; } .ink-wall { display: flex; flex-direction: column; gap: 10px; } .ink-mast-h { display: flex; align-items: baseline; gap: 8px; padding-bottom: 3px; border-bottom: 1px dashed #4a443b; } .ink-mast-h b { font: 700 16px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: var(--seeds); } .ink-mast-h small { color: #b9b2a2; } .ink-mast .ink-list { margin-top: 5px; } .fp-ink.crooked { opacity: .65; } /* The needle window: the gym's frame (gs-*) on the skin's dark room. */ .fp.gs.nk { background: #17120f; } .tall .ink-tools .btn { flex: 1 1 40%; } /* The tab «Татухи»: the same parts on paper. */ .pk-sheet.ink .ink-page { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; } .pk-sheet.ink .ink-card { border-color: rgba(40,36,30,.4); } .pk-sheet.ink .ink-gives { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px dashed rgba(40,36,30,.4); border-radius: 6px; } .pk-sheet.ink .ink-give { font: 700 16px/1.15 var(--f-hand); color: #1d3f8f; } .pk-sheet.ink .ink-set { font: 700 16px/1.15 var(--f-hand); color: var(--pen-red); } .pk-sheet.ink .ob-k { color: #6b1d16; } .ink-when { font: 14px/1.2 var(--f-text); color: #b9b2a2; } .pk-sheet.ink .ink-when { color: #4a463d; } .pk-sheet.ink .muted { color: #5a554b; } /* The ink on the arm in a fight: the knuckle word as SVG text over the fist (it swings with the fist bone), the art layer on a bare forearm. */ .fp-bone > .art.fp-ink-layer { z-index: 1; } .fp-bone > .art.fp-ink-layer.crooked { opacity: .65; } /* The knuckle word's cells at the parlour: four knuckles, a letter each. */ .ink-cells { display: flex; flex-direction: column; gap: 6px; } .ink-knuckles { display: flex; gap: 6px; cursor: text; } .ink-knuckles b { width: 40px; height: 44px; display: flex; align-items: center; justify-content: center; border: 2px solid #4a443b; border-radius: 8px 8px 12px 12px; background: #e9c9a8; color: #22304a; font: 400 24px/1 "Russo One", "Arial Black", sans-serif; } .ink-knuckles b.on { border-color: var(--seeds); } .ink-word { width: 120px; padding: 5px 8px; border: 1px solid #4a443b; border-radius: 4px; background: #f3ecd6; color: var(--ink); font: 400 18px/1.2 "Russo One", "Arial Black", sans-serif; letter-spacing: 4px; text-transform: uppercase; } .ink-lift { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ink-body.bare::after { content: ""; } /* Portrait: the guy narrower, the rows beside him; on the tab the guy over the card. */ .tall .ink-wrap { grid-template-columns: 112px minmax(0, 1fr); gap: 8px; } .tall .ink-spot { width: 22px; height: 22px; margin: -11px 0 0 -11px; } .tall .ink-spot i { inset: 4px; } .tall .pk-sheet.ink .ink-page { grid-template-columns: 150px minmax(0, 1fr); gap: 10px; } /* «Крысятник»: the rat fights (decision 133). The two rats as chalk-framed cards side by side (a tap picks the one for the chip), the timer line, the chips as on a sitter's stake, then the last fight: the clip in a dark frame (or the chalk still), the totals, the player's own line. Dark cell colours as the rest of the Zone's panels. */ .zk-intro { font-size: 13.5px; } .zk-timer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 10px; border-left: 3px solid var(--seeds); background: rgba(242,194,48,.08); } .zk-when { font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #b9b2a2; } .zk-left { font: 700 20px/1 var(--f-hand); color: var(--seeds); } .zk-pool { font: 700 14px/1 var(--f-print); color: #e8dfc8; } .zk-tea { margin-left: auto; font-size: 13.5px; color: #b9b2a2; } .zk-tea span.icon.inline, .zk-pool span.icon.inline, .zk-rat-mine span.icon.inline, .zk-totals span.icon.inline, .zk-mine span.icon.inline { width: 1.1em; height: 1.1em; vertical-align: -0.15em; margin: 0 .04em; } .zk-rats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .zk-rat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 0; padding: 8px 8px 10px; border: 1px solid #000; border-radius: 8px; background: #221e18; color: var(--text); box-shadow: 0 2px 0 #000, inset 0 0 0 1px #3a3229; text-align: center; cursor: pointer; transition: transform .12s, box-shadow .12s; } .zk-rat:hover { background: #2a251e; } .zk-rat.on { transform: translateY(-2px); box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--seeds), 0 6px 10px rgba(0,0,0,.6); } .zk-rat.locked { opacity: .55; } .zk-rat.locked .zk-rat-pic { filter: grayscale(1); } .zk-rat-pic { display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; border-radius: 50%; overflow: hidden; background: #0c0a08; box-shadow: 0 0 0 2px #000, 0 0 0 4px #3a3229; } .zk-rat.grey .zk-rat-pic { background: radial-gradient(circle at 50% 40%, #4a4a4a, #0c0a08 72%); } .zk-rat.black .zk-rat-pic { background: radial-gradient(circle at 50% 40%, #2a2420, #000 72%); } .zk-rat-pic .art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .zk-rat-pic .ph { width: 100%; height: 100%; } .zk-rat-pic .ph .ph-emoji { font-size: 44px; } .zk-rat-pic .ph .ph-label { display: none; } .zk-rat-k { font: 700 11px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: #b9b2a2; } .zk-rat-nm { font: 700 18px/1.05 var(--f-hand); color: var(--seeds); } .zk-rat-t { font-size: 12.5px; line-height: 1.2; color: #b9b2a2; } .zk-rat-mine { margin-top: 3px; padding: 2px 8px 3px; border-radius: 3px; background: var(--red); color: #fff; font: 700 13px/1.1 var(--f-hand); transform: rotate(-2deg); } .zk-stake { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .zk-bet { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .zk-last { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.18); min-width: 0; } /* A wide panel (a PC: the window up to 1240 units, the panel about 900): the bet on the left, the last fight with its clip on the right, so the whole sector stands without a scroll (the owner 2026-11-02). */ @container zn (min-width: 820px) { .zn-body.zn-krysy { flex: 1 1 auto; flex-direction: row; align-items: stretch; gap: 0; } /* the body takes the panel's height, the columns stretch to it */ .zn-body.zn-krysy .zk-bet { flex: 0 0 38%; padding-right: 16px; } .zn-body.zn-krysy .zk-last { flex: 1 1 0; margin-top: 0; padding: 0 0 0 16px; border-top: 0; border-left: 1px dashed rgba(255,255,255,.18); } .zn-body.zn-krysy .zk-film { --zk-h: 460px; } /* the clip by the column's width, 16:9 whole */ } /* The clip whole at 16:9: the box is capped by height (--zk-h) and gets narrower, centred, never cropped (the owner 2026-11-02: «видео обрезано на половину» on a PC, where the panel is wide). A phone sideways (the stage «short») keeps the old 240. */ .zk-film { position: relative; aspect-ratio: 16 / 9; width: min(100%, calc(var(--zk-h, 340px) * 16 / 9)); margin: 0 auto; border: 2px solid #000; border-radius: 6px; overflow: hidden; background: #0c0a08; box-shadow: 0 0 0 1px #3a3229, 0 6px 12px rgba(0,0,0,.6); cursor: pointer; } .zk-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; } .zk-film.has-film .zk-video { display: block; } .zk-film.has-film .zk-still { display: none; } .zk-still { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at 50% 60%, #3a3129, #0c0a08 72%); } .zk-still-rat { font-size: 54px; line-height: 1; filter: grayscale(1) brightness(.45); transition: transform .3s; } .zk-still-rat.black { filter: grayscale(1) brightness(.2); } .zk-still-rat.grey { transform: scaleX(-1); } .zk-still-rat.won { filter: none; transform: scale(1.25); } .zk-still-rat.grey.won { transform: scaleX(-1) scale(1.25); } .zk-still-vs { font: 700 26px/1 var(--f-hand); color: var(--pen-red); } .zk-still-cap { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 700 17px/1 var(--f-hand); color: #eeeadf; text-shadow: 0 1px 0 #000, 0 0 6px #000; } .zk-result { font: 700 17px/1.2 var(--f-hand); } .zk-result b { color: var(--seeds); } .zk-totals { display: flex; flex-wrap: wrap; gap: 6px; } .zk-mine { padding: 6px 10px; border-left: 3px solid #b9b2a2; background: rgba(255,255,255,.05); font-size: 14px; } .zk-mine.won { border-left-color: #6fcf6f; color: #d9f0d9; } .zk-replay { align-self: flex-start; } /* the tile's name «Крысятник» is one long word: tighter, so it does not break in two on the strip */ .tall .ob-tile[data-sector="krysy"] .ob-tnm { letter-spacing: 0; font-size: 10.5px; padding-left: 2px; padding-right: 2px; } .tall .zk-rat-pic { width: 72px; height: 72px; } .tall .zk-rat-nm { font-size: 16px; } .tall .zk-rat-t { font-size: 12px; } .short .zk-film { --zk-h: 240px; } .tall .zk-film { --zk-h: 220px; } /* ---------- «Прикид» (2026-10-11): the guy at his carpet, the wardrobe, the item label ---------- A corner of the «Хата»: the wall with the carpet (drawn by code, prikid.js: every guy has his own) and the painted floor, the guy in what he wears, the worn slots at his sides; the wardrobe of dark varnished wood with the shelves; the label of the chosen item like a sewn-in clothes label. Sizes come from the window itself (container units): the same layout on a phone sideways, a big PC screen and, stacked, a phone held upright. */ .win.prikid { max-width: 1260px; height: 100%; max-height: 780px; padding: 0; gap: 0; border: 2px solid #000; border-radius: 8px; background: #23160e linear-gradient(180deg, rgba(255,214,160,.07), transparent 30%); box-shadow: 0 12px 26px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,220,170,.08); } .win.prikid > .win-x { position: absolute; right: -12px; top: -14px; z-index: 6; } .win.prikid .win-body { padding: 0; gap: 0; overflow: hidden; min-height: 0; } /* Landscape: the row keeps to the right, the header porthole hangs over the window's left corner. */ .pk-top { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 7px 50px 7px 10px; min-width: 0; } .pk-name { flex: 0 1 auto; min-width: 0; transform: rotate(-1deg); filter: drop-shadow(0 2px 1px rgba(0,0,0,.5)); } .pk-name > span { display: block; padding: 4px 16px 5px 12px; background: var(--paper); color: var(--ink); font: 700 19px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; clip-path: polygon(0 6%, 30% 0, 64% 5%, 100% 1%, 99% 52%, 100% 97%, 62% 100%, 28% 95%, 1% 100%, 0 50%); } .pk-tabs { flex: none; gap: 6px; flex-wrap: nowrap; } .pk-tabs button { padding: 6px 11px; font-size: 13px; } .pk-sheet { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 8px 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border-radius: 3px; scrollbar-width: thin; } .pk-sheet > * { flex-shrink: 0; } /* ---------- «Очки»: the notebook spread («Бой 2.0», step 5) ---------- A squared school notebook opened in two over the guy's window: the left page — the stats, the right — the talents in blue ballpoint, three branch columns, ranks as circles, pencil lines between the tiers, a crown on top of each column, a yellow sticky note, a pink eraser. */ .pk-sheet.tn { --pen: #22408f; --pencil: #77746d; --tn-paper: #f3f1e8; flex-direction: row; gap: 0; padding: 0; overflow: hidden; background: none; box-shadow: 0 6px 12px rgba(0,0,0,.45); } .tn-page { position: relative; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); background: repeating-linear-gradient(0deg, rgba(80,130,200,.18) 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, rgba(80,130,200,.18) 0 1px, transparent 1px 16px), var(--tn-paper); } .tn-left { flex: 0 0 38%; border-radius: 3px 0 0 3px; box-shadow: inset -14px 0 14px -10px rgba(60,50,30,.35); } /* the fold on the spine side */ .tn-left > * { flex-shrink: 0; } .tn-right { flex: 1; border-radius: 0 3px 3px 0; color: var(--pen); padding-bottom: 0; box-shadow: inset 14px 0 14px -10px rgba(60,50,30,.35); } .tn-right > * { flex-shrink: 0; } .tn-head { display: flex; align-items: baseline; gap: 10px; } .tn-title { font: 700 26px/1 var(--f-hand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; transform: rotate(-1.5deg); } .tn-free { font: 700 18px/1 var(--f-hand); color: var(--pencil); white-space: nowrap; } .tn-free.has { color: var(--pen-red); } .tn-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; } .tn-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .tn-branch { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding: 0 2px 2px; border-bottom: 2px solid var(--pen); font: 700 20px/1 var(--f-hand); } .tn-branch span { font-size: 16px; color: var(--pencil); flex: none; } .tn-btext { padding: 0 2px 3px; font: 15px/1.1 var(--f-hand); color: var(--pencil); } .tn-col.bull .tn-branch b { transform: rotate(-2deg); } .tn-col.sly .tn-branch b { transform: rotate(1.5deg); } .tn-tier { margin: 3px 0 1px; padding-top: 1px; border-top: 1px dashed var(--pencil); font: 700 13px/1.05 var(--f-hand); color: var(--pencil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tn-tier.open { color: var(--pen); border-top-style: solid; border-top-color: rgba(34,64,143,.5); } .tn-t, .tn-crown { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 21px; width: 100%; padding: 1px 3px; border: 0; border-radius: 3px; background: none; color: inherit; text-align: left; cursor: pointer; font: 700 15px/1 var(--f-hand); } .tn-t:active, .tn-crown:active { background: rgba(34,64,143,.12); } .tn-t.sel, .tn-crown.sel { background: rgba(242,194,48,.35); box-shadow: inset 0 0 0 1.5px rgba(184,36,26,.55); } .tn-t.lock { color: var(--pencil); } .tn-t.taken { color: var(--pencil); } /* the group's other talent is learned: struck out in pencil */ .tn-t.taken .tn-name { text-decoration: line-through; text-decoration-thickness: 1.5px; } .tn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tn-dots { display: flex; gap: 3px; flex: none; } .tn-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px dotted var(--pencil); } .tn-t:not(.lock) .tn-dots i { border: 1.5px solid var(--pen); } .tn-dots i.on { background: var(--pen); border-color: var(--pen); } .tn-dots i.can { border-color: var(--pen-red); box-shadow: 0 0 0 1.5px rgba(184,36,26,.3); } .tn-crown { margin: 3px 0 2px; color: var(--pencil); justify-content: flex-start; } .tn-crown-pic { flex: none; width: 22px; height: 15px; background: currentColor; opacity: .55; clip-path: polygon(0 100%, 0 20%, 22% 62%, 50% 0, 78% 62%, 100% 20%, 100% 100%); } .tn-crown.open { color: var(--pen); } .tn-crown.open .tn-crown-pic { opacity: 1; } .tn-crown.worn { color: #8a5a00; } .tn-crown.worn .tn-crown-pic { opacity: 1; background: #d9a213; filter: drop-shadow(0 0 1px #6b4a00); } /* the sticky note: on top of the left page over the stats (landscape), after the columns (portrait) */ .tn-note { position: relative; z-index: 2; margin: 8px 0 6px; width: 100%; max-width: 420px; padding: 7px 10px 8px; background: #fbe98f; color: var(--ink); border-radius: 1px; font: 400 14px/1.2 var(--f-text); transform: rotate(-.6deg); box-shadow: 0 3px 8px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .tn-note b { font: 700 19px/1 var(--f-hand); } .tn-note b small { font: 700 15px/1 var(--f-hand); color: var(--ink-soft); } .tn-note.hint { position: static; width: auto; margin: 6px 0 4px; background: none; box-shadow: none; transform: none; color: var(--pencil); font: 700 15px/1.15 var(--f-hand); } .tn-steps { display: flex; flex-wrap: wrap; gap: 4px 8px; font: 700 15px/1 var(--f-hand); color: var(--ink-soft); } .tn-steps span { white-space: nowrap; } .tn-steps span.on { color: var(--pen); text-decoration: underline; } .tn-where { color: var(--ink-soft); font-size: 13px; } .tn-why { font: 700 15px/1.1 var(--f-hand); color: var(--pen-red); } .tn-eraser { margin-left: auto; min-height: 36px; padding: 5px 14px 6px; border: 0; border-radius: 4px; cursor: pointer; flex: none; background: linear-gradient(90deg, #e9a6ad 0 72%, #6a7fb0 72% 100%); color: #5b1d24; font: 700 16px/1 var(--f-hand); transform: rotate(-4deg); box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.08); white-space: nowrap; } .tn-eraser:active { transform: rotate(-4deg) translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.25); } .tn-eraser.sel { box-shadow: 0 0 0 2px var(--pen-red), 0 2px 0 rgba(0,0,0,.25); } .tn-eraser:disabled { opacity: .45; cursor: default; } .tn-hint { font: 700 18px/1.2 var(--f-hand); color: var(--pencil); } .tn-note .btn { min-height: 40px; } /* the stats page is narrow: the numbers go under the name */ .tn-left .stat-row { flex-wrap: wrap; gap: 2px 8px; } .tn-left .stat-row .grow { flex: 1 1 100%; } /* the capt's «Нюх»: the hint itself, loud */ .fp-hint.sniff { background: #fbe98f; color: var(--pen-red); font-weight: 700; box-shadow: 0 0 0 2px var(--pen-red); } .tall .pk-sheet.tn { flex-direction: column; overflow-y: auto; } .tall .tn-page { overflow: visible; flex: none; } .tall .tn-left { border-radius: 3px 3px 0 0; box-shadow: inset 0 -14px 14px -10px rgba(60,50,30,.35); } .tall .tn-right { border-radius: 0 0 3px 3px; box-shadow: inset 0 14px 14px -10px rgba(60,50,30,.35); padding: 10px 8px 6px; } .tall .tn-cols { gap: 0 6px; } .tall .tn-t, .tall .tn-crown { min-height: 34px; font-size: 14px; } .tall .tn-note { max-width: none; } .tall .tn-name { white-space: normal; line-height: .95; } .tall .tn-branch { font-size: 18px; } .tall .tn-tier { white-space: normal; } /* ---------- «Дневник боёв»: the guy's own school diary (2026-10-13) ---------- The personal counterpart of the crew's class register: a school diary in a dark teal leatherette cover around cream pages printed in teal (the day headings, the column heads and rules), the fights in blue ballpoint, the teacher's red-pen remark in the «Оценка» column — the loud thing, the same remark the register gives. Left page: this month by days; right page: the month so far in a «табель» of big numbers and the past months as summaries. Portrait: one column, the month's numbers first. Palette: cover #1d3b38, paper #f5f2e8, print #2b6461, rules #b7d0cc, ballpoint #22408f, red pen var(--pen-red), pencil #6f6b62. */ .pk-sheet.dn { --dn-print: #2b6461; --dn-rule: #b7d0cc; --dn-pen: #22408f; --dn-pencil: #6f6b62; flex-direction: row; gap: 0; padding: 5px; overflow: hidden; border-radius: 5px; background: #1d3b38 repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); box-shadow: 0 6px 12px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.45), inset 0 0 14px rgba(0,0,0,.35); } .dn-page { position: relative; min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9fbfba transparent; padding: 9px 14px 10px; display: flex; flex-direction: column; gap: 3px; color: var(--dn-pen); background: #f5f2e8 linear-gradient(180deg, rgba(43,100,97,.06), transparent 22%); } .dn-page > * { flex-shrink: 0; } .dn-days { flex: 0 0 60%; border-radius: 2px 0 0 2px; box-shadow: inset -14px 0 14px -10px rgba(30,50,45,.35); } .dn-sum { flex: 1 1 0; border-radius: 0 2px 2px 0; box-shadow: inset 14px 0 14px -10px rgba(30,50,45,.35); } .dn-page.solo { flex: 1 1 auto; border-radius: 2px; box-shadow: none; } /* still reading, or the network failed: one page */ .dn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; padding-bottom: 4px; border-bottom: 2px solid var(--dn-print); } .dn-title { flex: none; font: 700 18px/1.05 var(--f-print); color: var(--dn-print); letter-spacing: .4px; white-space: nowrap; } .dn-sub { min-width: 0; font: 13px/1.15 var(--f-text); color: var(--dn-pencil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dn-hint { margin: 10px 2px; font: 700 20px/1.2 var(--f-hand); color: var(--dn-pencil); } /* The share toggle at the head's right: who reads it in pencil, the button a paper bookmark stuck in the diary. */ .dn-share { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; } .dn-share small { font: 12px/1.1 var(--f-text); color: var(--dn-pencil); white-space: nowrap; } .dn-share.open small { color: var(--dn-print); font-weight: 700; } .dn-share-btn { min-height: 44px; padding: 0 12px; font: 700 18px/1 var(--f-hand); color: var(--dn-pen); white-space: nowrap; background: #fbe98f; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.35); transform: rotate(-2deg); } .dn-share.open .dn-share-btn { background: #e9e4d4; color: var(--dn-pencil); } .dn-share-btn:active { transform: rotate(-2deg) translateY(1px); box-shadow: 0 0 1px rgba(0,0,0,.35); } /* Another's diary in its own window: the same corner of the room as the guy's own window, his name on a tape, the diary under it. */ .win.dnevnik { max-width: 1000px; height: 100%; max-height: 560px; padding: 0; gap: 0; border: 2px solid #000; border-radius: 8px; background: #23160e linear-gradient(180deg, rgba(255,214,160,.07), transparent 30%); box-shadow: 0 12px 26px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,220,170,.08); } .win.dnevnik > .win-x { position: absolute; right: -12px; top: -14px; z-index: 6; } .win.dnevnik .win-body { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; } .pk-sheet.dn.book { flex: 1 1 auto; } body.busy .dn-share-btn { pointer-events: none; opacity: .6; } /* The printed column heads of a diary page; every line keeps their grid. */ .dn-cols, .dn-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 148px; gap: 0 8px; } .dn-cols { padding: 4px 0 2px; border-bottom: 1px solid var(--dn-print); font: 600 11.5px/1.1 var(--f-print); color: var(--dn-print); } .dn-cols > span { white-space: nowrap; overflow: hidden; } .dn-cols > span:last-child { padding-left: 8px; } .dn-day-h { margin-top: 6px; padding: 2px 0 2px; font: 600 12.5px/1.1 var(--f-print); color: var(--dn-print); border-bottom: 1.5px solid var(--dn-print); } .dn-day-h::first-letter { text-transform: uppercase; } .dn-row { align-items: start; width: 100%; min-height: 44px; padding: 5px 0 5px; text-align: left; color: var(--dn-pen); border-bottom: 1px solid var(--dn-rule); } .dn-row.tap { cursor: pointer; } .dn-row.tap:active { background: rgba(34,64,143,.08); } .dn-time { font: 700 18px/1.1 var(--f-hand); white-space: nowrap; } .dn-what { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .dn-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .dn-name .jr-kind { flex: none; } .dn-name b { min-width: 0; font: 700 20px/1.05 var(--f-hand); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .dn-vs { font: 12px/1.15 var(--f-text); color: var(--dn-pencil); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dn-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 11px; margin-top: 1px; } .dn-f { flex: none; display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; } .dn-f small { font: 12px/1 var(--f-text); color: var(--dn-pencil); } .dn-f b { font: 700 18px/1 var(--f-hand); } .dn-out { font: 700 17px/1 var(--f-hand); color: #4a5a80; } .dn-drank { align-items: center; } .dn-drank .jr-pks { gap: 2px; } /* «Оценка»: our result in pen, the teacher's remark in red under it. */ .dn-grade { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding-left: 8px; border-left: 1px solid var(--dn-rule); } .dn-res { font: 700 18px/1 var(--f-hand); white-space: nowrap; } /* A long remark («пытался тащить», «свалил без драки») wraps inside its ring rather than leave the column. */ .dn-grade .jr-mark { max-width: 100%; white-space: normal; font-size: 17px; line-height: 1.05; } .dn-row.r-lose .dn-res, .dn-row.r-draw .dn-res { color: #4a5a80; } .dn-open { margin-top: auto; font: 12px/1 var(--f-text); color: var(--dn-pencil); text-decoration: underline; text-underline-offset: 2px; } .dn-now { padding: 2px 0 4px; } .dn-month-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 2px 0 3px; } .dn-month-h b { font: 700 24px/1.05 var(--f-hand); white-space: nowrap; } .dn-month-h small { font: 13px/1.2 var(--f-text); color: var(--dn-pencil); } /* The «табель»: a ruled grid of cells, the word printed, the number in pen. */ .dn-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--dn-print); border-left: 1px solid var(--dn-rule); } .dn-grid.big { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dn-cell { display: flex; flex-direction: column; min-width: 0; padding: 2px 6px 3px; border-right: 1px solid var(--dn-rule); border-bottom: 1px solid var(--dn-rule); } .dn-cell small { font: 600 11px/1.15 var(--f-print); color: var(--dn-print); white-space: nowrap; overflow: hidden; } .dn-cell b { font: 700 19px/1.05 var(--f-hand); white-space: nowrap; } .dn-grid.big .dn-cell b { font-size: 28px; } .dn-tally { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 0 2px; } .dn-tally > span { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; } .dn-tally b { font: 700 17px/1 var(--f-hand); color: var(--dn-pen); } .dn-sec { margin-top: 8px; padding-bottom: 2px; font: 600 12.5px/1.1 var(--f-print); color: var(--dn-print); border-bottom: 2px solid var(--dn-print); } .dn-month { padding: 5px 0 6px; border-bottom: 1px solid var(--dn-rule); } .dn-month .dn-month-h b { font-size: 20px; } /* A phone sideways: a little tighter. */ .short .dn-page { padding: 7px 11px 8px; } .short .dn-cols, .short .dn-row { grid-template-columns: 44px minmax(0, 1fr) 128px; } .short .dn-name b { font-size: 18px; } .short .dn-grid.big .dn-cell b { font-size: 24px; } /* Portrait: one column that scrolls as a whole — the month's numbers and its days, then the past months. */ .tall .pk-sheet.dn { flex-direction: column; overflow-y: auto; padding: 4px; } .tall .dn-page { flex: none; overflow: visible; padding: 9px 10px 10px; } .tall .dn-page:last-child { flex: 1 0 auto; } /* the paper reaches the cover's bottom edge */ .tall .dn-days { border-radius: 2px 2px 0 0; box-shadow: none; } .tall .dn-sum { border-radius: 0 0 2px 2px; box-shadow: inset 0 14px 14px -10px rgba(30,50,45,.35); } .tall .dn-cols, .tall .dn-row { grid-template-columns: 42px minmax(0, 1fr) 106px; gap: 0 6px; } .tall .dn-grade { padding-left: 6px; } .tall .dn-now { margin-top: 2px; } .tall .win.dnevnik { max-height: 100%; } .tall .win.dnevnik > .win-x { top: 0; right: 0; } /* ---- the fitting room (decision 107): the tab takes the whole stage, the header gone (renderWin: the layer «dress», nohud) ---- The guy in his room at night (prikid/ by Codex) before his own carpet; the slot plates beside him with a dashed line to their place; the camera is the world layer's transform (app.js pkMove), so nothing big or moving carries a filter, the light is a static gradient. */ .win-layer.dress { padding: 0; } .win-layer.dress::before { display: none; } /* The way between the street and the fitting rooms (app.js, transit…): the window being left and the flying guy over the windows, under the cards and the кореш's bubble; it takes no taps, so the new screen under it plays at once. The guy is a canvas moved by a transform from his corner, nothing with a filter. */ .tr-layer, .tr-layer * { pointer-events: none !important; } .tr-layer::before { display: none; } .tr-layer.tr-keep::before { display: block; animation: none; } /* a held window keeps the shade it had (the street's blur under it) */ .tr-wait, .tr-wait * { pointer-events: none !important; } /* a room waiting hidden for its guy takes no taps (inert too) */ .tr-guy { position: absolute; z-index: 22; display: block; transform-origin: 0 0; } .tr-guy.in-room { z-index: auto; } /* flying inside a room: over its world, under its shade and plates */ .win-layer.dress .win.prikid { max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: #0f0c0a; animation: none; } /* it comes in by the way from the street (app.js, transit…), never the window's «pop» */ .win-layer.dress .win.prikid > .win-x { right: 8px; top: 8px; } .win-layer.dress .win.prikid .win-body { position: relative; flex: 1; } .win-layer.dress .pk-top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; justify-content: flex-start; padding: 9px 66px 0 12px; pointer-events: none; } .win-layer.dress .pk-top > * { pointer-events: auto; } .win.pk-zoom .pk-top { display: none; } .pk { position: absolute; inset: 0; overflow: hidden; background: #0f0c0a; touch-action: manipulation; } .pk-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; } /* no will-change: on a phone the promoted world ran out of tile memory (2026-10-29) */ .pk-set, .pk-set > * { position: absolute; left: 0; top: 0; } /* the room baked into one canvas (app.js roomBake: its picture, its dusk, the carpet with its light, the foot's shadow); the camera only scales it. The carpet's veil darkens it under a slot's camera */ .pk-set > canvas { pointer-events: none; } .pk-rugveil { opacity: 0; transition: opacity .5s; } /* the carpets' slot (2026-10-28, app.js kv…): the carpet lit and the guy faded while it is open, its plate, its cards, the tap on the wall */ .pk.kv-open .pk-rugveil { opacity: 0; } .pk-body { transition: opacity .35s; } .pk.kv-open .pk-body { opacity: .16; } .pk-hot .kv-hot { border-radius: 2px; } .pk-plate.kv .pk-pic { inset: 6% 20%; width: 60%; height: 88%; } .kv-card.pk-card:not(.bk-card) .pk-pic { left: 18px; top: 6px; width: calc(100% - 36px); height: calc(100% - 22px); } .kv-card.locked .pk-pic { opacity: .55; } .bk-card.kv-card .pk-pic { left: 14px; top: 42px; width: 64px; height: 96px; } .pk.zoom .pk-rugveil { opacity: 1; } .pk-shot, .pk-face { position: absolute; display: block; pointer-events: none; } /* he breathes as on the hub (hd-breath: 0.4 % of his height), about the point under his feet in wear/'s frame units (PK_FEET) */ .pk-body { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 511px 1728px; animation: hd-breath 3.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .pk-body { animation: none; } } .pk-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 58% at 50% 42%, rgba(255,214,140,.07) 0, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%); } /* zoomed in, the edges go darker: the eye stays on the part of him the camera came to */ .pk-shade::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .5s; background: radial-gradient(ellipse 58% 52% at 50% 38%, rgba(0,0,0,0) 45%, rgba(0,0,0,.42) 100%); } .pk.zoom .pk-shade::after { opacity: 1; } .pk-hot { position: absolute; inset: 0; } .pk-hot button { position: absolute; border-radius: 40%; } .pk.zoom .pk-hot { pointer-events: none; } .pk-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; transition: opacity .25s; } .pk-lines path { fill: none; stroke: rgba(236,230,212,.32); stroke-width: 1.4; stroke-dasharray: 4 4; } .pk-lines circle { fill: rgba(242,194,48,.85); } .pk.zoom .pk-lines { opacity: 0; } /* the plates: beside him at the height of their place; with a slot open, a rail at the left to jump between slots */ .pk-plates { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .pk-plate { position: absolute; left: 0; top: 0; width: var(--sz); height: var(--sz); pointer-events: auto; border-radius: 8px; transition: transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1); } .pk-plate-box { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: rgba(18,15,12,.88); border: 1.5px solid rgba(236,230,212,.22); box-shadow: 0 4px 10px rgba(0,0,0,.55); } .pk-plate-box::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rc, transparent); } .pk-plate.r-common { --rc: var(--common); } .pk-plate.r-choice { --rc: #3f7fe0; } .pk-plate.r-rare { --rc: var(--red); } .pk-plate.r-legend, .pk-plate.r-yama { --rc: var(--legend); } .pk-plate.r-craft { --rc: #c26a2a; } .pk-plate .pk-pic { position: absolute; inset: 9%; width: 82%; height: 82%; } .pk-plate .pk-pic.ghost { opacity: .22; filter: grayscale(1) brightness(1.6); } .pk-plate-name { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); white-space: nowrap; transition: opacity .2s; font: 700 11px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; color: #e6dcc2; text-shadow: 0 1px 2px #000, 0 0 6px #000; } .pk.zoom .pk-plate-name { opacity: 0; } .pk-plate.on .pk-plate-box { border-color: var(--seeds); box-shadow: 0 0 0 2px rgba(242,194,48,.35), 0 4px 12px rgba(0,0,0,.6); } .pk-plate.can::after { content: ""; position: absolute; left: 5px; top: 7px; width: 8px; height: 8px; border-radius: 50%; z-index: 2; background: var(--red); box-shadow: 0 0 0 2px rgba(255,255,255,.75); } .pk-plate:active { translate: 0 2px; } /* the numbers: a strip under him in portrait, a column at the right in landscape; the whole card a tap away */ .pk-numbers { position: absolute; z-index: 3; right: 16px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 8px; min-width: 190px; padding: 14px 16px 15px; border-radius: 6px; background: rgba(16,13,11,.86); border: 1px solid rgba(255,255,255,.08); color: #cfc6b4; text-align: left; transition: opacity .25s, transform .35s; } .pk-numbers-p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed rgba(236,230,212,.2); font: 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: .5px; color: #d9cca6; } .pk-numbers-p b { font: 700 34px/1 var(--f-hand); color: var(--seeds); letter-spacing: 0; white-space: nowrap; } .pk-numbers-s { display: flex; justify-content: space-between; gap: 18px; font: 17px/1 var(--f-text); } .pk-numbers-s b { color: #fff; white-space: nowrap; } .pk-numbers-hp { margin-top: 2px; font: 700 18px/1.05 var(--f-hand); } .pk-numbers-g { font: 14px/1.1 var(--f-text); color: #d9cca6; opacity: .85; } /* «шмот +N, весь шкаф» (2026-10-25) */ .pk.zoom .pk-numbers { opacity: 0; transform: translateY(16px); pointer-events: none; } /* the wallet (both rooms, app.js pkWallet): «Прикид»'s top row holds the name and the tabs, so the wallet stands under the window's cross, over the numbers; with a slot open the row is free and it goes up beside the cross (where «Барахолка» keeps it) */ .pk-wallet { position: absolute; z-index: 6; right: 60px; top: 70px; display: flex; align-items: center; gap: 4px; transition: translate .35s cubic-bezier(.2,.8,.2,1); } .pk.zoom:not(.bk) .pk-wallet { translate: -48px -56px; } .short .pk-wallet { top: 56px; } /* the cross is smaller on a phone sideways */ .short .pk.zoom:not(.bk) .pk-wallet { translate: -48px -42px; } .pk-wallet .chip.coin { margin: 0; padding: 3px 9px 3px 6px; background: rgba(16,13,11,.86); border-color: rgba(255,255,255,.12); color: #f1e7cf; font-size: 15px; white-space: nowrap; } .pk-iron { position: relative; display: flex; align-items: center; } .pk-iron > i { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; background: var(--seeds); color: var(--ink); font: 700 17px/1 var(--f-print); font-style: normal; box-shadow: 0 0 0 2px rgba(16,13,11,.86); } @media (prefers-reduced-motion: reduce) { .pk-wallet { transition: none; } } /* the dock: the price tag over the row of the slot's items, up from below with a slot open */ .pk-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding-bottom: 10px; transform: translateY(calc(100% + 260px)); transition: transform .42s cubic-bezier(.2,.8,.2,1); pointer-events: none; background: linear-gradient(180deg, rgba(10,8,6,0) 0, rgba(10,8,6,.86) 34%, #0c0907 100%); } .pk.zoom .pk-dock { transform: none; } .pk.zoom .pk-dock > * { pointer-events: auto; } .pk-shelf { position: relative; } .pk-shelf > i { position: absolute; left: 0; right: 0; bottom: -6px; height: 16px; pointer-events: none; background: linear-gradient(180deg, #4a3423 0, #3a281a 40%, #22170f 100%); box-shadow: 0 -2px 0 rgba(255,220,170,.08) inset, 0 6px 10px rgba(0,0,0,.5); } .pk-row { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 132px; padding: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; } .pk-row::-webkit-scrollbar { display: none; } /* the room for the first and the last card to reach the centre: spacers, not the row's padding (WebKit 26 gives a flex row's end padding no scroll while the cards themselves fit: an iPhone tester with one bought item could not swipe to it, 2026-10-27) */ .pk-row::before, .pk-row::after { content: ""; flex: none; align-self: stretch; width: calc(50% - 51px); } .pk-row.drag { scroll-snap-type: none; cursor: grabbing; } .pk-card { position: relative; flex: none; width: 82px; height: 96px; margin-bottom: 14px; border-radius: 8px; scroll-snap-align: center; transform-origin: 50% 100%; isolation: isolate; background: #1e1915; border: 1.5px solid rgba(236,230,212,.16); box-shadow: 0 5px 0 rgba(0,0,0,.45); } .pk-card .pk-pic { position: absolute; inset: 10px 8px 14px; width: auto; height: auto; } /* only the centred card's glow and foil move: eight cards breathing at once cost a phone 26 ms of style a second (CPU ×4) */ .pk-card:not(.mid) .card-glow, .pk-card:not(.mid) .card-glow::before, .pk-card:not(.mid) .card-glow::after, .pk-card:not(.mid) .rar-foil { animation-play-state: paused; } .pk-card.low .pk-pic { opacity: .45; } .pk-card.mid { border-color: var(--seeds); background: #2a221b; box-shadow: 0 0 0 2px rgba(242,194,48,.3), 0 0 22px rgba(242,194,48,.25), 0 6px 0 rgba(0,0,0,.5); } .pk-card .up-badge { font-size: 16px; } .pk-card .pk-lock { position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; z-index: 3; } .pk-card.can::after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; z-index: 3; background: var(--red); box-shadow: 0 0 0 2px rgba(255,255,255,.75); } .pk-worn { position: absolute; left: 50%; bottom: 4px; z-index: 3; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; pointer-events: none; padding: 1px 5px 2px; border-radius: 2px; background: #2e7d3b; color: #fff; font: 700 12px/1 var(--f-hand); } .pk-card .pk-bare { position: absolute; inset: 18px 10px 22px; width: calc(100% - 20px); height: calc(100% - 40px); } .pk-bare path { fill: none; stroke: #bdb3a0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* a card with several styles: a dot per style, the one it shows filled, a locked one hollow red */ .pk-dots { position: absolute; left: 0; right: 0; top: 7px; z-index: 3; display: flex; justify-content: center; gap: 4px; pointer-events: none; } .pk-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(236,230,212,.35); box-shadow: 0 0 0 1px rgba(0,0,0,.4); } .pk-dots i.on { background: var(--seeds); } .pk-dots i.lk { background: none; box-shadow: inset 0 0 0 1.5px var(--red); } .pk-dots i.lk.on { background: var(--red); } .pk-dots b { font: 700 10px/6px var(--f-print); color: #e6dcc2; } /* the price tag of the centred item: a market tag on masking tape */ .pk-price { position: absolute; right: 14px; bottom: calc(100% - 6px); width: 316px; padding: 12px 14px; border-radius: 3px; color: var(--ink); background: var(--paper); box-shadow: 0 6px 16px rgba(0,0,0,.55); clip-path: polygon(0 2%, 100% 0, 100% 97%, 0 100%); } .pk-price::before { content: ""; position: absolute; left: 50%; top: -6px; width: 74px; height: 16px; margin-left: -37px; background: rgba(226,214,168,.85); transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .pkt-in { animation: pkt-in .18s ease-out; } @keyframes pkt-in { from { opacity: .3; transform: translateY(5px); } } .pkt-head { display: flex; align-items: flex-start; gap: 10px; } .pkt-name { flex: 1 1 auto; min-width: 0; font: 700 21px/1.05 var(--f-print); } .pkt-name.r-common { color: var(--ink); } .pkt-name.r-choice { color: #1d449b; } .pkt-name.r-rare { color: #a8231b; } .pkt-name.r-legend, .pkt-name.r-yama { color: #8a5a00; } .pkt-name.r-craft { color: #a04e12; } .pkt-count { flex: none; margin-top: 3px; white-space: nowrap; font: 700 13px/1 var(--f-print); letter-spacing: .5px; opacity: .55; } .pkt-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 6px; } .pkt-kind { margin-right: 4px; font: 15px/1.1 var(--f-text); color: var(--ink-soft); white-space: nowrap; } .pkt-line .chip.good { color: #1f6b2a; border-color: rgba(31,107,42,.45); background: rgba(31,107,42,.08); white-space: nowrap; } .pkt-looks { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-width: 0; } .pkt-strip { display: flex; gap: 6px; min-width: 0; padding: 3px; margin: -3px; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; } .pkt-strip::-webkit-scrollbar { display: none; } .pkt-look { position: relative; flex: none; width: 46px; height: 46px; border-radius: 7px; background: rgba(29,27,23,.07); border: 1.5px solid rgba(29,27,23,.22); } .pkt-look.on { background: #fff8e2; border-color: var(--ink); box-shadow: 0 0 0 2px var(--seeds); } .pkt-look .pkt-thumb { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; } .pkt-look .pkt-lk { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; } .pkt-look:active { transform: translateY(1px); } .pkt-lookname { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pkt-lookname span { font: 700 11px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; opacity: .6; } .pkt-lookname b { font: 700 15px/1.1 var(--f-text); } .pkt-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .pkt-stamp { flex: none; white-space: nowrap; padding: 3px 8px 4px; border: 2.5px solid currentColor; border-radius: 4px; transform: rotate(-4deg); font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; } .pkt-stamp.on { color: #2e7d3b; } .pkt-stamp.low { color: var(--pen-red); } .pkt-soon { min-width: 0; font: 700 18px/1 var(--f-hand); color: var(--ink-soft); } .pkt-more { position: relative; margin-left: auto; flex: none; padding: 7px 10px 6px; border-radius: 4px; background: var(--ink); color: var(--paper); font: 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; } .pkt-more.can::after { content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--paper); } /* the way back from a slot: «‹ Обувь» at the top left (the cross at the right goes back too) */ .pk-back { position: absolute; z-index: 6; left: 12px; top: 8px; display: none; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 10px; border-radius: 6px; background: rgba(236,230,212,.95); color: var(--ink); font: 700 18px/1 var(--f-print); text-transform: uppercase; box-shadow: 0 3px 0 rgba(0,0,0,.45); } .pk-back .vp-chevron { flex: none; width: 18px; height: 18px; stroke: currentColor; stroke-width: 3.4; } .pk.zoom .pk-back { display: flex; } .pk-back:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.45); } .short .pk-row { height: 108px; } .short .pk-card { width: 70px; height: 80px; margin-bottom: 12px; } .short .pk-price { width: 286px; } @media (prefers-reduced-motion: reduce) { .pkt-in { animation: none; } } /* ---- portrait: the plates down the sides, the numbers a strip under him, the tag over the row ---- */ .tall .win-layer.dress .pk-top { flex-wrap: wrap; row-gap: 8px; padding: 10px 62px 0 12px; } .tall .pk-numbers { left: 50%; right: auto; top: auto; bottom: 16px; translate: -50% 0; flex-direction: row; align-items: center; gap: 12px; min-width: 0; max-width: calc(100% - 24px); padding: 8px 30px 9px 14px; white-space: nowrap; } .tall .pk-numbers .pk-sum-p { font: 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: .5px; color: #d9cca6; } .tall .pk-numbers .pk-sum-p b { margin-left: 6px; font: 700 26px/1 var(--f-hand); color: var(--seeds); letter-spacing: 0; } .tall .pk-numbers .pk-sum-s { font: 15px/1 var(--f-text); overflow: hidden; text-overflow: ellipsis; } /* «шмот +N, весь шкаф» on its own line under the numbers (2026-10-25): the row wraps, the chevron stays at the right */ .tall .pk-numbers { flex-wrap: wrap; row-gap: 3px; } .tall .pk-numbers .pk-sum-g { flex-basis: 100%; font: 13px/1 var(--f-text); color: #d9cca6; opacity: .85; } .tall .pk-numbers i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 700 24px/1 var(--f-print); font-style: normal; opacity: .6; } /* the wallet under the tabs, over his headroom; with a slot open under the cross («‹ Аксессуар» keeps the row), as in «Барахолка» */ .tall .pk-wallet { right: 46px; top: 86px; } /* left of the twins' column under the cross */ .tall .pk.zoom:not(.bk) .pk-wallet { translate: 0 -24px; } .tall .pk-wallet .chip.coin { padding: 2px 7px 2px 5px; font-size: 14px; } .tall .pk-price { position: relative; right: auto; bottom: auto; width: auto; height: 190px; margin: 0 12px 4px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .tall .pkt-name { font-size: 20px; } /* the guy's numbers on the card (pkSummary) */ .pk-ponty { display: flex; align-items: baseline; gap: 10px; } .pk-ponty span { font: 700 15px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; color: #6b1d16; } .pk-ponty b { font: 700 40px/1 var(--f-hand); color: var(--ink); white-space: nowrap; } .pk-stats { display: flex; flex-direction: column; gap: 3px; } .pk-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px dashed rgba(90,70,40,.3); } .pk-stat span { font: 700 14px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; } .pk-stat b { font: 700 22px/1 var(--f-hand); white-space: nowrap; } .pk-stat small { grid-column: 1 / -1; font: 13px/1.1 var(--f-text); color: var(--ink-soft); } .pk-hp { font: 14px/1.2 var(--f-text); color: var(--ink-soft); } .pk-note { font: 13.5px/1.25 var(--f-text); color: var(--ink-soft); } .tall .win.prikid { max-height: 100%; } .tall .win.prikid > .win-x { top: 0; right: 0; } .tall .pk-top { flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; padding: 6px 48px 6px 8px; } .tall .pk-tabs { order: 2; width: 100%; } .tall .pk-tabs button { flex: 1; padding: 8px 4px; } /* Phone sideways (short stage): smaller head row and shelf tabs, names only on the chosen shelf. */ .short .pk-top { padding-top: 5px; padding-bottom: 5px; } .short .pk-name > span { font-size: 16px; } .short .pk-tabs button { padding: 5px 9px; font-size: 12px; } .short .pk-ponty b { font-size: 32px; } /* ---- the sheet of the centred item (app.js pkx…, the owner 2026-10-28; probe docs/probes/prikid-shtorka/) ---- It grows out of the tag's «Качать» like a drop of water, frosted glass over the room: the room under it is a snapshot blurred once into a small canvas (no backdrop-filter: iPhone painted the scene black for seconds under one, 2026-10-11). Anchored at its bottom: the upgrade buttons stand on the same spot for every item, the result keeps its two lines, nothing moves under a fast finger. */ .pkx { position: absolute; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; --gx-r: 24px; --gx-fg: #f4ecda; --gx-mu: #c9bea8; --gx-line: rgba(255,240,214,.14); --gx-btn: rgba(255,248,232,.1); --gx-btn-b: rgba(255,240,214,.24); } .pkx.open { pointer-events: auto; } .pkx-glass { position: absolute; inset: 0; border-radius: var(--gx-r); overflow: hidden; transform-origin: 100% 100%; } .pkx-blur { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .pkx-tint { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,244,222,.13), rgba(0,0,0,0) 34%), rgba(24,18,13,.5); box-shadow: inset 0 1px 0 rgba(255,250,236,.42), inset 0 0 0 1px rgba(255,240,214,.2), inset 0 -18px 30px rgba(0,0,0,.12); } .pkx-shine { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(120% 70% at var(--sx, 80%) 100%, rgba(255,250,236,.3), rgba(255,250,236,.08) 55%, rgba(255,250,236,0) 80%); } /* past the room's height only the top part scrolls (a phone sideways): the upgrade part stays whole and still */ .pkx-in { position: relative; display: flex; flex-direction: column; gap: 10px; max-height: 100%; min-height: 0; padding: 8px 14px 14px; color: var(--gx-fg); } .pkx-grab { flex: none; align-self: center; width: 38px; height: 5px; margin-bottom: -2px; border-radius: 3px; background: var(--gx-line); } .pkx-top { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .pkx-top::-webkit-scrollbar { display: none; } .pkx-top.more { -webkit-mask: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask: linear-gradient(180deg, #000 calc(100% - 26px), transparent); } .pkx-top > * { flex-shrink: 0; } .pkx-head { display: flex; align-items: flex-start; gap: 10px; } .pkx-name { flex: 1 1 auto; min-width: 0; font: 700 22px/1.05 var(--f-print); } .pkx-name.r-common { color: #ece6d4; } .pkx-name.r-choice { color: #8db6ff; } .pkx-name.r-rare { color: #ff8f7e; } .pkx-name.r-legend, .pkx-name.r-yama { color: var(--seeds); } .pkx-name.r-craft { color: #ec9f63; } .pkx-count { flex: none; margin-top: 4px; font: 700 13px/1 var(--f-print); letter-spacing: .5px; color: var(--gx-mu); white-space: nowrap; } .pkx-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; } .pkx-kind > span:first-child { margin-right: 3px; font: 15px/1.1 var(--f-text); color: var(--gx-mu); white-space: nowrap; } .pkx .chip.good { margin: 0; color: #93e29d; border-color: rgba(147,226,157,.38); background: rgba(147,226,157,.08); white-space: nowrap; } .pkx-text { font: 15px/1.25 var(--f-text); color: var(--gx-mu); } .pkx .it-perk { margin: 0; padding: 7px 10px 8px; border-radius: 10px; color: var(--gx-fg); transform: none; background: linear-gradient(135deg, rgba(242,194,48,.2), rgba(242,194,48,.06)); box-shadow: inset 0 0 0 1px rgba(242,194,48,.38); } .pkx .it-perk b { color: var(--seeds); letter-spacing: .5px; } .pkx .it-perk span { font: 15px/1.2 var(--f-text); } .pkx .it-perk small { color: var(--gx-mu); } .pkx .kt-link { font-size: 17px; color: #9ec3ff; } /* the upgrade: one block of fixed height (the head, the ticks, the result's two lines, the buttons or what stands in their place) */ .pkx-up { flex-shrink: 0; display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid var(--gx-line); } .pkx-uph { display: flex; align-items: baseline; gap: 8px; font: 15px/1 var(--f-text); color: var(--gx-mu); white-space: nowrap; } .pkx-uph b { font: 700 15px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; color: var(--gx-fg); } .pkx-uph em { font: 700 22px/1 var(--f-hand); font-style: normal; color: var(--gx-fg); } .pkx-uph span:last-child { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pkx-ticks { display: flex; gap: 3px; height: 9px; } .pkx-ticks i { flex: 1 1 0; border-radius: 2px; background: rgba(255,240,214,.16); } .pkx-ticks i.on { background: var(--seeds); box-shadow: 0 0 6px rgba(242,194,48,.45); } .pkx-ticks i.lk { background: rgba(255,240,214,.05); box-shadow: inset 0 0 0 1px var(--gx-line); } /* the result: always two lines high, the words change, the box never does */ .pkx-news { height: 2.5em; overflow: hidden; font: 15px/1.25 var(--f-text); color: var(--gx-mu); } .pkx-news.ok { color: #93e29d; } .pkx-news.miss { color: #ff9d8c; } .pkx-news .icon { width: 18px; height: 18px; } .pkx-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; height: 62px; } .pkx-buy { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 14px; text-align: center; color: var(--gx-fg); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 55%), var(--gx-btn); box-shadow: inset 0 0 0 1px var(--gx-btn-b), inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 rgba(0,0,0,.35); touch-action: manipulation; } .pkx-buy .pkx-amt { display: flex; align-items: center; gap: 5px; font: 700 20px/1 var(--f-print); letter-spacing: .3px; white-space: nowrap; } .pkx-buy small { font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; opacity: .78; white-space: nowrap; } .pkx-buy.cash { color: #17150f; background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%), #f2c230; box-shadow: inset 0 0 0 1px rgba(255,236,170,.6), 0 3px 0 #8a6a0c; } .pkx-buy.iron { --gx-btn: rgba(150,184,220,.16); --gx-btn-b: rgba(170,205,240,.38); } .pkx-buy:active { translate: 0 2px; box-shadow: inset 0 0 0 1px var(--gx-btn-b), 0 1px 0 rgba(0,0,0,.35); } .pkx-buy.cash:active { box-shadow: inset 0 0 0 1px rgba(255,236,170,.6), 0 1px 0 #8a6a0c; } .pkx-buy[disabled] { opacity: .4; pointer-events: none; } .pkx-buy.short { opacity: .62; } /* «Барахолка»: the tag's deal as one wide button (the buy, the style for iron, «Надеть») */ .pkx-buy.wide { grid-column: 1 / -1; flex-direction: row; gap: 14px; } .pkx-buy.wide small { font-size: 17px; opacity: 1; } .pkx-buy.wide .pkx-amt:empty { display: none; } /* what stands in the buttons' place (the lock, the top, the workbench, Yama): the same height */ .pkx-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 4px; font: 15px/1.2 var(--f-text); color: var(--gx-mu); } .pkx-note > span { flex: 1 1 auto; min-width: 0; } .pkx-note .pkx-go { flex: none; height: 44px; padding: 0 16px; border-radius: 12px; font: 700 15px/1 var(--f-print); text-transform: uppercase; letter-spacing: .5px; color: #17150f; background: #f2c230; box-shadow: 0 3px 0 #8a6a0c; } .pkx-note .pkx-go:active { translate: 0 2px; box-shadow: 0 1px 0 #8a6a0c; } .pkx-note .pkx-lock { flex: none; width: 30px; height: 30px; } /* the tag steps aside while the sheet stands in its place */ .pk-price { transition: opacity .16s ease-out; } .pkx-on .pk-price { opacity: 0; pointer-events: none; } .tall .pkx-name { font-size: 21px; } /* a phone sideways: the room is low, the sheet tighter */ .short .pkx-in { gap: 7px; padding: 6px 12px 10px; } .short .pkx-name { font-size: 19px; } .short .pkx-up { gap: 5px; padding-top: 7px; } .short .pkx-acts { height: 52px; } .short .pkx-buy .pkx-amt { font-size: 18px; } /* ---- «Барахолка» (decision 108): «Прикид»'s room in the market's corner (.pk.bk) ---- The slots in chalk on the container's wall with how many goods each has, the packs on a cardboard sign on a nail, the goods on wire hangers on a pipe (they swing with the swipe: app.js bkCardLook), a cardboard price tag on each hanger's neck and as the centred one's tag; a pack's card is a cardboard box lid. The wallet stays at the top in a slot too. Portrait under .tall at the end. */ .win.prikid.bk .pk-top { padding-right: 300px; } .pk.bk .pk-shade { background: radial-gradient(ellipse 70% 62% at 50% 42%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%); } /* the wallet (pkWallet): top right, left of the window's cross */ .pk.bk .pk-wallet { right: 64px; top: 14px; } /* beside the cross; the twins stand under the cross */ /* the chalk words and arrows (the whole view) */ .bk-chalks { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .bk-chalk { position: absolute; pointer-events: auto; white-space: nowrap; padding: 4px 6px; font: 700 21px/1 var(--f-hand); color: rgba(244,240,228,.9); text-shadow: 0 0 1px rgba(255,255,255,.4); transition: opacity .25s; } .bk-chalk::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 1px; height: 2px; background: rgba(244,240,228,.55); border-radius: 2px; transform: rotate(-1deg); } .bk-chalk sup { margin-left: 3px; font: 700 15px/1 var(--f-print); color: var(--seeds); vertical-align: 7px; } .bk-chalk.gone { opacity: .38; pointer-events: none; } .bk-chalk.gone::before { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 2.5px; background: rgba(244,240,228,.85); border-radius: 2px; transform: rotate(-6deg); } .bk-chalk.gone::after { display: none; } .pk.bk.zoom .bk-chalks { opacity: 0; pointer-events: none; } .pk.bk .pk-lines path.bk-arrow { stroke: rgba(244,240,228,.78); stroke-width: 2.2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; } /* the plates: only the rail in a slot (the chalk does the whole view), each with its count; a slot with nothing left greyed */ .pk.bk:not(.zoom) .pk-plate { opacity: 0; pointer-events: none; } .pk.bk .pk-plate { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .25s; } .pk.bk .pk-plate-box { background: rgba(236,230,212,.94); border: 0; } .pk.bk .pk-plate.on .pk-plate-box { box-shadow: 0 0 0 3px var(--seeds), 0 4px 12px rgba(0,0,0,.6); } /* only on the rail: the whole view hides every plate (a sold-out slot's showed as a ghost by the face, 2026-10-25) */ .pk.bk.zoom .pk-plate.none { opacity: .35; pointer-events: none; } .bk-n { position: absolute; right: -5px; top: -5px; z-index: 3; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--seeds); color: var(--ink); font: 700 12px/18px var(--f-print); text-align: center; pointer-events: none; } .bk-n:empty { display: none; } .bk-pk-word { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 700 9.5px/1.05 var(--f-print); text-transform: uppercase; color: var(--ink); } /* the packs' sign: cardboard on a string from a nail */ .bk-sign { position: absolute; z-index: 3; width: 118px; padding: 14px 8px 9px; text-align: center; color: var(--ink); border-radius: 3px; transform: rotate(4deg); transform-origin: 50% -16px; background: linear-gradient(180deg, #d6b07a, #c39a62); box-shadow: 0 6px 12px rgba(0,0,0,.5); transition: opacity .25s; animation: bk-sway 4.5s ease-in-out infinite; } .bk-sign::before { content: ""; position: absolute; left: 50%; top: -18px; width: 44px; height: 22px; margin-left: -22px; border: 2px solid rgba(40,30,20,.75); border-bottom: 0; border-radius: 22px 22px 0 0; } .bk-nail { position: absolute; left: 50%; top: -22px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #9aa1a6; box-shadow: 0 1px 2px #000; } .bk-sign-t { display: block; font: 700 17px/1 var(--f-print); text-transform: uppercase; letter-spacing: .4px; } .bk-sign-s { display: inline-block; margin-top: 5px; padding: 2px 7px 3px; background: var(--pen-red); color: #fff; font: 700 17px/1 var(--f-hand); transform: rotate(-3deg); } .pk.bk.zoom .bk-sign { opacity: 0; pointer-events: none; } @keyframes bk-sway { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(1.5deg); } } /* the hint where «Прикид» has its numbers */ .pk.bk .bk-hint { position: absolute; z-index: 3; right: 16px; top: 50%; translate: 0 -50%; width: 190px; padding: 10px 14px 11px; border-radius: 6px; text-align: center; background: rgba(16,13,11,.86); border: 1px solid rgba(255,255,255,.08); font: 700 19px/1.1 var(--f-hand); color: #e9dfc7; transition: opacity .25s, transform .35s; } .pk.bk.zoom .bk-hint { opacity: 0; transform: translateY(16px); pointer-events: none; } /* the dock: the pipe and the hangers */ .pk.bk .pk-dock { background: linear-gradient(180deg, rgba(20,16,12,0) 0, rgba(20,16,12,.8) 40%, #17130f 100%); padding-bottom: 6px; } .pk.bk .pk-shelf > i { top: 9px; bottom: auto; left: -10px; right: -10px; height: 8px; border-radius: 5px; z-index: 0; background: linear-gradient(180deg, #d9dde0 0, #9aa1a6 45%, #5d6368 100%); box-shadow: 0 3px 4px rgba(0,0,0,.5); } .pk.bk .pk-row { height: 156px; gap: 4px; align-items: flex-end; } .pk.bk .pk-row::before, .pk.bk .pk-row::after { width: calc(50% - 50px); } .bk-card.pk-card { width: 92px; height: 150px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform-origin: 50% 7px; z-index: 1; } .bk-card.pk-card.mid { background: none; box-shadow: none; } .bk-card .bk-hanger { position: absolute; left: 0; top: 6px; width: 92px; height: 60px; overflow: visible; pointer-events: none; z-index: 1; } .bk-hanger path { fill: none; stroke: #c9ced2; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .bk-hanger path.clip { fill: #8d949a; stroke: #5d6368; stroke-width: 1.2; } .bk-card .pk-pic { position: absolute; inset: auto; left: 4px; top: 50px; width: 84px; height: 84px; } .bk-card.hs .pk-pic { top: 44px; z-index: 2; } .bk-card .card-glow, .bk-card .rar-stamp { display: none; } .bk-card.low .pk-pic { opacity: .5; } .bk-card .pk-lock { left: 8px; right: auto; top: 48px; } .bk-card .pk-worn { bottom: 14px; } .bk-card .pk-worn.boss { background: #6a4b2a; } .bk-card .pk-dots { top: auto; bottom: 4px; } .bk-card.sold .pk-pic { opacity: .35; } .bk-card.sold::after { content: "куплено"; position: absolute; left: 50%; top: 78px; z-index: 4; padding: 1px 6px 2px; border: 2.5px solid #2e7d3b; border-radius: 4px; transform: translateX(-50%) rotate(-12deg); color: #3aa04c; font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: .5px; } /* a hanger's cardboard price tag on its neck */ .bk-tag { position: absolute; right: 2px; top: 22px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 3px 6px 3px 9px; border-radius: 2px 5px 5px 2px; background: #d9b98a; color: var(--ink); transform: rotate(9deg); transform-origin: 0 50%; box-shadow: 0 2px 4px rgba(0,0,0,.45); font: 700 13px/1 var(--f-print); white-space: nowrap; pointer-events: none; } .bk-tag:empty { display: none; } .bk-tag::before { content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #3a2c1c; } .bk-tag small { font: 700 10px/1 var(--f-text); opacity: .75; } .bk-tag .icon img { width: 13px; height: 13px; } .bk-card.low .bk-tag { background: #b7a68c; color: var(--pen-red); } /* a pack on its hanger: a clear bag with its styles inside */ .bk-bag { position: absolute; left: 10px; top: 44px; z-index: 2; width: 72px; height: 86px; border-radius: 6px 6px 12px 12px; background: linear-gradient(160deg, rgba(255,255,255,.34), rgba(220,230,240,.12) 45%, rgba(255,255,255,.22)); border: 1.5px solid rgba(255,255,255,.45); box-shadow: inset 0 0 12px rgba(255,255,255,.15), 0 4px 8px rgba(0,0,0,.35); } .bk-bag-in { position: absolute; inset: 8px 4px 22px; } .bk-bag-in img { position: absolute; width: 44px; height: 44px; object-fit: contain; } .bk-bag-in img:nth-child(1) { left: 0; top: 0; transform: rotate(-12deg); } .bk-bag-in img:nth-child(2) { right: 0; bottom: 0; transform: rotate(10deg); } .bk-bag-in img:nth-child(3) { left: 14px; top: 10px; } .bk-bag-name { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 2px 0; border-radius: 2px; background: #d9b98a; color: var(--ink); text-align: center; font: 700 15px/1 var(--f-hand); transform: rotate(-3deg); } /* the centred one's cardboard tag with the buys */ .pk.bk .pk-price { width: 340px; padding: 12px 14px 12px 34px; border-radius: 4px 10px 10px 4px; clip-path: none; color: var(--ink); background: linear-gradient(180deg, #d2ad79, #c49c66); box-shadow: 0 6px 14px rgba(0,0,0,.5); } .pk.bk .pk-price::before { left: 12px; top: 50%; width: 11px; height: 11px; margin: -6px 0 0; border-radius: 50%; background: #17130f; transform: none; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); } .pk.bk .pkt-name { font: 700 25px/1 var(--f-hand); } .pk.bk .pkt-kind { color: #4e3b25; } .pk.bk .pkt-line .chip.good { background: none; border: 0; padding: 0 2px; font: 700 19px/1 var(--f-hand); color: var(--ink); } .pk.bk .pkt-look { overflow: visible; background: rgba(255,255,255,.22); border-color: rgba(29,27,23,.3); } .pk.bk .pkt-look.on { background: rgba(255,250,235,.7); border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); } .pk.bk .pkt-looks { padding-bottom: 6px; } .pk.bk .pkt-strip { padding: 6px 3px 9px; margin: -6px -3px -9px; } .pk.bk .pkt-lookname b { font: 700 20px/1 var(--f-hand); } .pk.bk .pkt-row { flex-wrap: wrap; row-gap: 6px; } .bk-ok { position: absolute; right: -5px; top: -5px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #2e7d3b; color: #fff; font: 700 11px/1 var(--f-print); font-style: normal; pointer-events: none; } .bk-why { margin-top: 5px; font: 700 17px/1.05 var(--f-hand); color: #4e3b25; } .bk-buys { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; } .bk-buy { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px 0 12px; border-radius: 5px; background: var(--ink); color: #f6ecd2; font: 700 15px/1 var(--f-print); text-transform: uppercase; letter-spacing: .4px; box-shadow: 0 3px 0 rgba(0,0,0,.4); white-space: nowrap; } .bk-buy .bk-amt { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 3px; background: rgba(255,255,255,.12); font-size: 16px; letter-spacing: 0; } .bk-buy .icon img { width: 16px; height: 16px; } .bk-buy.iron { background: #3b4650; } .bk-buy.wear { background: #2e7d3b; } .bk-buy[disabled] { opacity: .45; } .bk-buy:not([disabled]):active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.4); } .bk-buy.big { height: 44px; padding: 0 10px 0 12px; font-size: 16px; } .bk-look-only { font: 700 19px/1.05 var(--f-hand); color: #4e3b25; } /* a pack centred: its tag */ .bk-pk-text { margin-top: 4px; font: 15px/1.15 var(--f-text); color: #3d2d1b; } .bk-pk-mini { display: flex; align-items: center; gap: 6px; margin-top: 7px; } .bk-pk-th { position: relative; width: 40px; height: 40px; border-radius: 6px; background: rgba(255,255,255,.22); border: 1.5px solid rgba(29,27,23,.3); } .bk-pk-th img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; } .bk-was { display: inline-flex; align-items: center; gap: 2px; font: 700 16px/1 var(--f-print); color: #6b5638; text-decoration: line-through; text-decoration-thickness: 2px; white-space: nowrap; } .bk-now { display: inline-flex; align-items: center; gap: 3px; font: 700 24px/1 var(--f-print); white-space: nowrap; } .bk-was .icon img, .bk-now .icon img { width: 1em; height: 1em; } /* a pack's card: a cardboard box lid; landscape a panel at the right, portrait up from below over the row */ .bk-pack { position: absolute; z-index: 5; right: 14px; top: 64px; bottom: 12px; width: 370px; pointer-events: none; } .bk-pack:empty { display: none; } .pk.bk.pk-open .pk-dock { transform: translateY(calc(100% + 320px)); } .pk.bk.pk-open .pk-plate { opacity: 0; pointer-events: none; } .pk.bk.pk-peek .bk-pack { top: auto; height: 84px; } .bk-box, .bk-peek { pointer-events: auto; color: var(--ink); background: linear-gradient(180deg, #d4ac74, #c39a62 60%, #b98f57); box-shadow: 0 10px 28px rgba(0,0,0,.6); animation: bk-box .32s cubic-bezier(.2,.8,.2,1); } @keyframes bk-box { from { transform: translateY(40px); opacity: 0; } } .bk-box { position: relative; display: flex; flex-direction: column; height: 100%; padding: 16px 16px 14px; border-radius: 8px 8px 4px 4px; } .bk-box::before { content: ""; position: absolute; left: 50%; top: -8px; width: 120px; height: 18px; margin-left: -60px; background: rgba(214,200,150,.85); transform: rotate(-1.5deg); box-shadow: 0 1px 2px rgba(0,0,0,.25); } .bk-box-head { display: flex; align-items: flex-start; gap: 10px; } .bk-box-head > div { flex: 1; min-width: 0; } .bk-box-head small { display: block; font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #5d4529; } .bk-box-head b { display: block; margin-top: 2px; font: 700 34px/.95 var(--f-hand); } .bk-close { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; background: rgba(29,27,23,.85); color: #f0e2c4; font: 700 24px/1 var(--f-print); } .bk-box-text { margin-top: 6px; font: 15.5px/1.2 var(--f-text); color: #3d2d1b; } .bk-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .bk-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 6px; background: rgba(255,248,230,.32); border: 1px solid rgba(29,27,23,.16); } .bk-row-th { position: relative; flex: none; width: 52px; height: 52px; border-radius: 6px; background: rgba(255,255,255,.4); border: 1.5px solid rgba(29,27,23,.25); } .bk-row-th img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; } .bk-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .bk-row-t b { font: 700 16px/1.05 var(--f-text); } .bk-row-t span { font: 700 18px/1 var(--f-hand); color: #4e3b25; } .bk-row-t em { font: italic 13px/1.1 var(--f-text); color: #7a3a22; } .bk-row-p { flex: none; display: inline-flex; align-items: center; gap: 2px; font: 700 15px/1 var(--f-print); white-space: nowrap; } .bk-row-p .icon img { width: 15px; height: 15px; } .bk-row-got { flex: none; padding: 2px 6px 3px; border: 2px solid #2e7d3b; border-radius: 4px; color: #2e7d3b; font: 700 12px/1 var(--f-print); text-transform: uppercase; transform: rotate(-4deg); white-space: nowrap; } .bk-row.got .bk-row-th { opacity: .75; } .bk-eye { flex: none; height: 32px; padding: 0 10px; border-radius: 5px; background: rgba(29,27,23,.85); color: #f0e2c4; font: 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: .4px; } .bk-box-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 10px; } .bk-save { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bk-save s { display: inline-flex; align-items: center; gap: 2px; font: 700 16px/1 var(--f-print); color: #6b5638; text-decoration-thickness: 2px; } .bk-save s .icon img { width: 16px; height: 16px; } .bk-save span { align-self: flex-start; padding: 2px 7px 3px; background: var(--pen-red); color: #fff; font: 700 17px/1 var(--f-hand); transform: rotate(-3deg); } .bk-part { flex-basis: 100%; font: 13px/1.15 var(--f-text); color: #4e3b25; } .bk-done { font: 700 26px/1 var(--f-hand); color: #2e7d3b; } /* folded to a strip while one of its items is looked at alone */ .bk-peek { display: flex; align-items: center; gap: 8px; height: 100%; padding: 8px 10px; border-radius: 8px; } .bk-peek .bk-arrow { flex: none; display: grid; place-items: center; width: 40px; height: 52px; border-radius: 6px; background: rgba(29,27,23,.85); color: #f0e2c4; } .bk-peek .bk-arrow .vp-chevron { width: 22px; height: 22px; stroke: currentColor; } .bk-peek .bk-arrow[disabled] { opacity: .3; } .bk-peek-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .bk-peek-t small { font: 700 11px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; color: #5d4529; } .bk-peek-t b { font: 700 16px/1.05 var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-peek-t span { font: 700 19px/1 var(--f-hand); color: #4e3b25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .2em; } .bk-all { flex: none; height: 52px; padding: 0 10px; border-radius: 6px; background: var(--ink); color: #f6ecd2; font: 700 12px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .3px; } .short .pk.bk .pk-row { height: 128px; } .short .pk.bk .pk-price { width: 300px; } @media (prefers-reduced-motion: reduce) { .bk-sign, .bk-box, .bk-peek { animation: none; } } /* portrait: the wallet beside the name, the tag over the row, the card up from below */ .tall .win.prikid.bk .pk-top { padding-right: 62px; } .tall .pk.bk .pk-wallet { right: 46px; top: 62px; } /* under the top row: the name and «‹ Комплекты» keep their room */ .tall .pk.bk .bk-hint { top: auto; bottom: 14px; right: auto; left: 50%; translate: -50% 0; width: max-content; max-width: calc(100% - 24px); font-size: 17px; } .tall .pk.bk .pk-price { width: auto; height: 214px; margin: 0 12px 4px; } .tall .bk-pack { left: 10px; right: 10px; top: auto; bottom: 8px; width: auto; height: 350px; } .tall .pk.bk.pk-peek .bk-pack { height: 96px; } .tall .bk-box { padding: 14px 14px 12px; } .tall .bk-box-head b { font-size: 30px; } .tall .bk-list { margin-top: 8px; gap: 6px; } /* ---------- «В гостях»: another guy's room (owner 2026-10-28; app.js gs…) ---------- «Прикид»'s room read only (.pk.vg: the same world, shot, plates and lines) and, taped to his wall at the right, the «Справка с района» on the passport's security paper (.ps-page): his photo in his frame under a paper clip, the numbers written in by hand, the passport's stamps, his signature and the round seal at the bottom; the buttons on the wall under the sheet (the owner took this look, «А», of the probe's two). Portrait (the end of the section): the sheet is a drawer over the room's bottom, its tape the handle, the buttons under it. */ .vg-wait { display: grid; place-items: center; } .vg-knock { font: 700 28px/1 var(--f-hand); color: #e6dcc2; } .vg-name { position: absolute; z-index: 5; left: 12px; top: 10px; max-width: calc(100% - 90px); pointer-events: none; } .vg-name small { font: inherit; font-size: 14px; letter-spacing: .4px; opacity: .65; } .vg .pk-plate .up-badge { right: 2px; top: 5px; font-size: 15px; } .vg-sheet { position: absolute; z-index: 4; right: 22px; top: 66px; bottom: 10px; width: clamp(440px, 51%, 640px); display: flex; flex-direction: column; align-items: stretch; gap: 8px; pointer-events: none; } .short .vg-sheet { top: 54px; } .winhud .vg-sheet { top: 60px; right: 64px; } /* PC: clear of the fullscreen twin under the cross */ .vg-sheet > * { pointer-events: auto; } /* masking tape over the sheet's top edge (in portrait the drawer's handle) */ .vg-tab { position: absolute; z-index: 2; left: 50%; top: -12px; width: 96px; height: 24px; padding: 0; translate: -50% 0; rotate: -3deg; background: rgba(226,214,170,.82); box-shadow: 0 1px 2px rgba(0,0,0,.25); pointer-events: none; clip-path: polygon(0 8%, 6% 0, 12% 10%, 20% 2%, 100% 0, 96% 50%, 100% 100%, 8% 96%, 3% 100%, 0 52%); } .vg-sheet > .vg-tab { pointer-events: none; } .vg-paper { flex: 0 1 auto; padding: 11px 14px 8px; gap: 7px; border-radius: 3px; color: var(--ink); rotate: .6deg; box-shadow: 0 12px 26px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.18); } .vg-top { display: flex; gap: 12px; align-items: flex-start; } .vg-photo-slot { position: relative; flex: none; rotate: -3deg; margin: 2px 0 0 2px; } .vg-photo-slot.round { rotate: none; } /* a round frame tilted only tilted the guy in it (the owner 2026-10-28: «в сторону наклонён») */ .vg-photo-slot .ps-photo:not(.vip-in) { width: 70px; height: 90px; } .vg-photo-slot .ps-photo.vip-in { width: min(92px, calc(64px * var(--k))); height: min(92px, calc(64px * var(--k))); } .short .vg-photo-slot .ps-photo:not(.vip-in) { width: 54px; height: 70px; } .short .vg-photo-slot .ps-photo.vip-in { width: min(72px, calc(50px * var(--k))); height: min(72px, calc(50px * var(--k))); } /* the paper clip over the photo's top edge, drawn by its border */ .vg-clip { position: absolute; z-index: 3; left: 14px; top: -10px; width: 13px; height: 38px; border: 2.5px solid #8d949b; border-radius: 7px; box-shadow: 1px 1px 1px rgba(0,0,0,.3); pointer-events: none; } .vg-clip::after { content: ""; position: absolute; left: 2px; top: 6px; width: 4px; height: 20px; border: 2px solid #a3aab1; border-bottom: 0; border-radius: 4px 4px 0 0; } .vg-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .vg-title .ps-head { text-align: left; } .vg-given { font: 14px/1.3 var(--f-news); color: #3b362d; } .vg-given .nick { font: 700 22px/1.05 var(--f-hand); color: #22306e; } .vg-given .vip-badge { font-size: 15px; } .vg-four { flex: none; width: 41%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px 12px; } .vg-four .ps-v { font-size: 20px; } .vg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 8px; padding: 5px 0 4px; border-top: 1px dashed rgba(40,36,30,.35); } .vg-stat { display: flex; flex-direction: column; min-width: 0; } .vg-stat .ps-v { font-size: 20px; } .vg-adds { grid-column: 1 / -1; font: 13px/1.2 var(--f-text); color: #6b6253; } /* only the stamps scroll (the owner 2026-10-28: «у игрока будет очень много их. Но только штампы, другое остаётся фиксированным»): the sheet keeps its head, numbers and signature; a little room inside for the stamps' tilt */ .vg-paper { overflow: hidden; } .vg-paper .ps-stamps { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: flex-start; gap: 7px 8px; margin: -3px -5px 0; padding: 4px 5px 3px; scrollbar-width: thin; scrollbar-color: #9a9385 transparent; } .vg-paper .ps-stamp { padding: 1px 7px 2px; } .vg-paper .ps-stamp-main { font-size: 14px; } .vg-paper .ps-stamp-text > span:not(.ps-stamp-main) { font-size: 12.5px; } .vg-paper .ps-home { width: 40px; height: 30px; } .vg-foot { position: relative; display: flex; align-items: flex-end; gap: 14px; padding-right: 66px; } .vg-foot .ps-sign { flex: 1; min-width: 0; padding-top: 0; } .vg-since { flex: none; padding-bottom: 3px; font: italic 12.5px/1.2 var(--f-news); color: #6b6253; white-space: nowrap; } .vg-foot .ps-seal { right: -4px; bottom: 2px; width: 60px; height: 60px; } /* inside the sheet: past its edge it made a scroll */ .vg-acts { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .vg-acts .btn.small { min-height: 40px; padding: 6px 14px; font-size: 14px; } .short .vg-acts { gap: 6px; } .short .vg-acts .btn.small { min-height: 34px; padding: 4px 10px; font-size: 13px; } .short .vg-mark { font-size: 17px; } .vg-mark.wait { margin-right: 0; color: #e6dcc2; } .vg-mark { margin-right: auto; padding: 3px 10px 4px; border-radius: 4px; background: rgba(16,13,11,.86); font: 700 19px/1 var(--f-hand); color: #a7d98f; white-space: nowrap; } .modal-art.vg-kv-art { height: 190px; } .modal-art.vg-kv-art img { width: auto; height: 100%; object-fit: contain; } /* portrait: the drawer. Closed: the paper as tall as its top row (--gs-peek, app.js gsPeek); open: as tall as it needs, up to the screen (--gs-open), its stamps scrolled inside when there are many. The tape is the handle: wider, a marker chevron on it, a tap or a swipe. */ .tall .vg-name { top: 12px; } .tall .vg-sheet { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; } .tall .vg-paper { flex: none; height: var(--gs-peek, auto); overflow: hidden; rotate: -.5deg; padding: 12px 13px 10px; /* the passport's portrait rule unstretched */ transition: height .34s cubic-bezier(.2,.8,.2,1); } .tall .vg.vg-open .vg-paper { height: var(--gs-open, auto); } .tall .vg-sheet > .vg-tab { pointer-events: auto; top: -20px; width: 120px; height: 34px; touch-action: none; } /* a swipe, not the page's scroll */ .tall .vg-tab::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; translate: -50% -25%; rotate: 45deg; border-left: 3px solid #4b4334; border-top: 3px solid #4b4334; transition: rotate .3s, translate .3s; } .tall .vg.vg-open .vg-tab::after { rotate: 225deg; translate: -50% -75%; } @media (prefers-reduced-motion: reduce) { .tall .vg-paper { transition: none; } } .tall .vg-top { flex-wrap: wrap; row-gap: 8px; } .tall .vg-four { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); } .tall .vg-foot { flex-wrap: wrap; row-gap: 0; } .tall .vg-since { order: -1; flex-basis: 100%; } .tall .vg-acts { justify-content: center; } /* The handwritten font (--f-hand) draws its last letter past its own box (a tail of «д», «я», «й»): a label that clips its overflow (overflow: hidden, an ellipsis) cut it off — «Пивзавоо» in the diary (owner 2026-10-13). A fifth of a letter of room on the right. */ .sk-who .nick-rest, .kp-pair b, .kp-crew-head b, .kp-chip b, .kp-side .nick-rest, .cty-bname b, .jr-name, .ob-n, .ob-plaque small, .ob-nm, .dn-name b, .tn-name { padding-right: .2em; } /* ---------- «Настройки»: the stairwell switchboard («щиток», owner 2026-10-25; app.js winSettings) ---------- A steel box with a dark board inside; every setting is a tumbler on the board with its label on masking tape in marker; the volume is a row of fuses; the doors to the other places are stickers on the bottom strip. Landscape: two columns, nothing scrolls on PC; portrait (at the end of the section): one column that scrolls. */ .win.shchitok { max-width: 940px; max-height: 100%; padding: 10px 12px 12px; gap: 0; border: 0; border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 28%), radial-gradient(ellipse at 70% 110%, rgba(0,0,0,.25), transparent 60%), repeating-linear-gradient(90deg, rgba(0,0,0,.045) 0 2px, transparent 2px 7px), #5e676d; box-shadow: 0 14px 28px rgba(0,0,0,.75), inset 0 0 0 2px #2d3336, inset 0 0 0 4px #7f888d, inset 0 0 24px rgba(0,0,0,.4); } .win.shchitok > .win-x { position: absolute; right: -12px; top: -12px; z-index: 5; } .win.shchitok .win-body { padding: 0; gap: 0; overflow-y: auto; scrollbar-width: none; } .win.shchitok .win-body::-webkit-scrollbar { display: none; } /* the four screws of the panel door */ .win.shchitok::after { content: ""; position: absolute; inset: 6px; pointer-events: none; border-radius: 4px; background: radial-gradient(circle at 5px 5px, #2a2f32 2.6px, #8d969b 3px, transparent 4.2px) 0 0 / 100% 100% no-repeat, radial-gradient(circle at calc(100% - 5px) 5px, #2a2f32 2.6px, #8d969b 3px, transparent 4.2px) 0 0 / 100% 100% no-repeat, radial-gradient(circle at 5px calc(100% - 5px), #2a2f32 2.6px, #8d969b 3px, transparent 4.2px) 0 0 / 100% 100% no-repeat, radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #2a2f32 2.6px, #8d969b 3px, transparent 4.2px) 0 0 / 100% 100% no-repeat; } .sh { display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 2px; } .sh-head { display: flex; align-items: baseline; gap: 12px; padding: 0 2px; } .sh-head b { font: 700 22px/1 var(--f-print); text-transform: uppercase; letter-spacing: 3px; color: #ecefea; text-shadow: 0 1px 0 #000; } .sh-head span { font: 15px/1.2 var(--f-text); color: #c9cfcc; } .sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; } .sh-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* the dark board behind a group of tumblers */ .sh-box { display: flex; flex-direction: column; gap: 4px; padding: 7px 10px 8px; border-radius: 4px; background: #22262a; box-shadow: inset 0 0 0 1px #0d0f10, inset 0 2px 8px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08); } .sh-sec { font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: 2px; color: #9aa3a8; margin-bottom: 2px; } .sh-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 2px 0; text-align: left; color: var(--text); } .sh-row[disabled] { opacity: .45; } /* the label: masking tape in marker */ .sh-tape { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 3px 10px 4px 8px; background: #e8dfc3; color: var(--ink); clip-path: polygon(0 8%, 1.5% 0, 98.5% 3%, 100% 12%, 99.2% 90%, 97.5% 100%, 1% 97%, 0 88%); transform: rotate(-.4deg); } .sh-row:nth-child(even) .sh-tape { transform: rotate(.5deg); } .sh-tape b { font: 700 19px/1 var(--f-hand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .2em; } .sh-tape small { font: 13px/1.15 var(--f-text); color: #4a453c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the tumbler: a black handle in a steel socket; on, the handle goes right and the socket lights yellow */ .sh-tumbler { position: relative; flex: none; width: 56px; height: 28px; border-radius: 4px; background: #394044; box-shadow: inset 0 0 0 1px #0d0f10, inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06); } .sh-tumbler i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 22px; border-radius: 3px; background: linear-gradient(180deg, #2c3033, #0f1113); box-shadow: 0 1px 2px #000, inset 0 1px 0 rgba(255,255,255,.14); transition: left .15s, background .15s; } .sh-tumbler em { position: absolute; right: 7px; top: 50%; translate: 0 -50%; font: 700 9px/1 var(--f-print); font-style: normal; letter-spacing: .6px; text-transform: uppercase; color: #767f84; } .sh-row.on .sh-tumbler { background: #5c4a10; box-shadow: inset 0 0 0 1px #0d0f10, inset 0 2px 4px rgba(0,0,0,.5), 0 0 10px rgba(242,194,48,.28); } .sh-row.on .sh-tumbler i { left: 31px; background: linear-gradient(180deg, #f7d55e, #c8952a); box-shadow: 0 1px 2px #000, inset 0 1px 0 rgba(255,255,255,.4); } .sh-row.on .sh-tumbler em { right: auto; left: 7px; color: #f2c230; } .sh-row:active:not([disabled]) .sh-tumbler i { scale: .94; } /* two tumblers side by side: the music and the fight voice */ .sh-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } /* the volume: five fuses in a row, lit up to the level */ .sh-fuses { display: flex; align-items: center; gap: 10px; min-height: 36px; } .sh-fuses .sh-tape { flex: 1; } .sh-fuse-row { flex: none; display: flex; gap: 8px; padding-right: 6px; } .sh-fuse { width: 26px; height: 26px; border-radius: 50%; background: #2a2f33; box-shadow: inset 0 0 0 2px #0d0f10, inset 0 0 0 4px #454d52; } .sh-fuse:hover:not([disabled]) { box-shadow: inset 0 0 0 2px #0d0f10, inset 0 0 0 4px #6b757a; } .sh-fuse.on { background: #f2c230; box-shadow: inset 0 0 0 2px #7a5c0a, inset 0 0 0 4px #ffe27a, 0 0 8px rgba(242,194,48,.5); } .sh-fuse[disabled] { opacity: .35; } .sh-fuse:active:not([disabled]) { scale: .92; } /* the nickname: the name on a wide tape, «Сменить» beside it, the line under */ .sh-name { display: flex; align-items: center; gap: 10px; } .sh-name-tape { flex: 1; min-width: 0; padding: 5px 12px 6px 10px; font: 700 24px/1.05 var(--f-hand); } .sh-name-tape .nick { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .2em; } .sh-name .btn.small { flex: none; } .sh-line { font: 14px/1.25 var(--f-text); color: #c9cfcc; } /* the doors: stickers on the bottom strip, each a little askew */ .sh-doors-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .sh-door { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; border-radius: 3px; background: #e8dfc3; color: var(--ink); transform: rotate(var(--t, -1deg)); box-shadow: 0 2px 3px rgba(0,0,0,.45); text-align: center; } .sh-door:hover { background: #f1e9cf; } .sh-door:active { transform: rotate(var(--t, -1deg)) scale(.96); } .sh-door-art { width: 36px; height: 36px; object-fit: contain; } .sh-door b { font: 700 17px/1 var(--f-hand); white-space: nowrap; } .sh-door small { font: 11px/1.1 var(--f-text); color: #4a453c; } .short .sh-row { min-height: 36px; } /* portrait: one column, the window the whole screen, the doors two by two */ .tall .win.shchitok { padding: 8px 8px 10px; } .tall .win.shchitok > .win-x { right: -4px; top: -6px; } .tall .sh-grid { grid-template-columns: 1fr; } .tall .sh-pair { grid-template-columns: minmax(0, 1fr); gap: 4px; } .tall .sh-head { flex-direction: column; gap: 2px; } .tall .sh-doors-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tall .sh-door { flex-direction: row; gap: 8px; padding: 6px 10px; text-align: left; } .tall .sh-door small { flex: 1; } /* ---------- the scheduled restart (system 17): the plate under the header and the curtain ---------- The plate is a tin sign with a hazard stripe: «Рестарт сервера 12:34», from 30 minutes; above every window (a portrait window covers the header), under the кореш's bubble and the curtain. The curtain: the server is going down, a card on the dark. */ .rs-plate { position: absolute; left: 50%; top: 52px; z-index: 28; transform: translateX(-50%) rotate(-1.2deg); display: flex; align-items: center; gap: 8px; padding: 3px 12px 4px; white-space: nowrap; pointer-events: none; color: #ffd84a; background: #26282c; border: 2px solid #111; box-shadow: inset 0 0 0 2px #ffd84a, 0 4px 8px rgba(0,0,0,.6); animation: fade .3s ease-out; } .rs-plate::before { content: ""; position: absolute; left: -2px; right: -2px; top: -8px; height: 6px; background: repeating-linear-gradient(-45deg, #ffd84a 0 8px, #141414 8px 16px); border: 1px solid #111; } .rs-plate b { font: 700 15px/1 var(--f-print); letter-spacing: 2px; text-transform: uppercase; } .rs-plate em { font: 700 22px/1 var(--f-print); font-style: normal; color: #fff; letter-spacing: 1px; font-variant-numeric: tabular-nums; } .rs-plate.soon em { color: #ff6b57; animation: rs-blink 1s steps(2, end) infinite; } @keyframes rs-blink { 50% { opacity: .35; } } .rs-veil { position: fixed; inset: 0; z-index: 32; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8,9,11,.86); animation: fade .35s ease-out; } .rs-card { position: relative; width: 100%; max-width: 360px; padding: 16px 18px 14px; text-align: center; transform: rotate(-1.5deg); box-shadow: 0 14px 28px rgba(0,0,0,.7); clip-path: polygon(0 1.5%, 30% 0, 62% 1%, 100% 0, 99.4% 50%, 100% 100%, 0 100%, .6% 48%); } .rs-head { font: 700 30px/1 var(--f-print); letter-spacing: 5px; text-transform: uppercase; color: var(--ink); } .rs-text { margin-top: 10px; font: 19px/1.25 var(--f-hand); color: var(--ink); } .rs-dots { margin-top: 8px; font: 700 28px/1 var(--f-print); color: var(--pen-red); letter-spacing: 4px; min-height: 28px; } .tall .rs-plate { gap: 6px; padding: 2px 10px 3px; } .tall .rs-plate b { font-size: 13px; letter-spacing: 1px; } .tall .rs-plate em { font-size: 19px; }