/* ===================================================================== WARMATCH — shell styles 16-bit military action. Pixel/CRT aesthetic, stencilled metal chrome. No external assets, no external fonts. THE PALETTE ----------- Six ramps, mirroring js/pixel.js exactly so canvas art and DOM chrome never drift apart: OLIVE --olive-d --olive --olive-l materiel, plating, panels STEEL --steel-d --steel --steel-l --chrome AMBER --amber --amber-l --amber-hot every lit readout BLOOD --blood-d --blood --alert --flame SAND --earth-d --earth --sand --sand-l SIGNAL --signal-d --signal phosphor, radar, GO states The legacy names (--cyan, --pink, --yellow …) are kept as ALIASES onto the new ramps. Two thousand lines of shell CSS read them; re-pointing them re-skins all of it at once, and new rules use the ramp names. ===================================================================== */ :root { /* ---------- OLIVE: materiel ---------- */ --olive-d: #2c3d18; --olive: #4a6323; --olive-l: #6f8f34; /* ---------- STEEL: hardware ---------- */ --steel-d: #1c2228; --steel: #3c4650; --steel-l: #5a6774; --chrome: #8a97a3; /* ---------- AMBER: every lit readout. The hero colour. ---------- */ --amber: #ffb020; --amber-l: #ffe07a; --amber-hot: #ffee9e; /* ---------- BLOOD: alarms, fire, tracer ---------- */ --blood-d: #7a1410; --blood: #8f1d12; --alert: #e03a1c; --flame: #ff7a3d; --flame-l: #ff9a5c; /* ---------- SAND: brass, ammunition, dust, paper ---------- */ --earth-d: #3a2c18; --earth: #6b512c; --sand: #a8814a; --brass: #e6be6e; --sand-l: #f0dbae; /* ---------- SIGNAL: phosphor, radar, GO ---------- */ --signal-d: #14652a; --signal: #39ff6e; /* ---------- structure ---------- */ --deep: #070a08; --void: #0d1410; --panel: #141d16; --panel-2: #26331f; --ink: #05070a; --bone: #eef2ea; /* ---------- legacy aliases (do not use in new rules) ---------- */ --pink: var(--alert); --pink-l: var(--flame-l); --cyan: var(--amber); --cyan-l: var(--amber-l); --yellow: var(--brass); --orange: var(--flame); --green: var(--signal); --green-d: #123a1c; --lav: #8fa38a; --purple: var(--steel); --red: var(--blood); --grey: #7d867c; --font: "Lucida Console", "Consolas", "DejaVu Sans Mono", monospace; /* ---- PORTRAIT (ВЕРТИКАЛЬНА) STAGE (scale v5, див. scale.js) ---- Сцена має ФІКСОВАНУ пропорцію 440×900 (≈1:2); масштабується ЦІЛКОМ під в'юпорт (contain + letterbox). На телефонах scale ≈ 0.9…1.0, тож 1 stage-px ≈ 1 фізичний px — розміри «чесні». --vw = 1% ширини сцени, --vh = 1% висоти. Значення нижче — стартові; --stage-w/--vw/--vh/--scale перевизначає scale.js. */ --dh: 900px; --stage-w: 440px; --vw: 4.4px; /* = --stage-w / 100, оновлюється з JS */ --vh: 9px; /* = --dh / 100, оновлюється з JS */ --scale: 1; /* виставляється з JS (scale.js) під в'юпорт */ /* ---- ДИЗАЙН-ТОКЕНИ (stage-px ≈ фізичні px на телефоні) ---- Типографічна шкала: жоден текст не менший за --fs-micro. */ --fs-micro: 11px; /* мікропідписи: рейл, бейджі, мета — АБСОЛЮТНИЙ мінімум */ --fs-xs: 12px; /* вторинні лейбли */ --fs-sm: 13px; /* дрібний основний текст, кнопки-привиди */ --fs-md: 15px; /* ОСНОВНИЙ текст: діалоги, термінал, рядки списків */ --fs-lg: 18px; /* заголовки панелей/секцій */ --fs-xl: 24px; /* заголовки екранів */ --fs-2xl: 32px; /* великі неонові заголовки */ /* Тач-цілі та ритм */ --tap: 44px; /* мінімальна тач-ціль (Apple HIG) */ --tap-lg: 52px; /* первинні дії */ --row: 56px; /* висота рядка списку */ --hud-h: 48px; /* висота HUD-смуги */ --hud-chip: 38px; /* єдина висота HUD-чіпів: лічильники, кнопки, профіль */ /* Відступи */ --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; /* Safe-area (нотчі телефонів у landscape) */ --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --edge: max(12px, var(--safe-l)); --edge-r: max(12px, var(--safe-r)); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; /* letterbox around the stage: sheet metal, not flat black. The diagonal hatch reads as the inside of a vehicle once the stage is centred on it. */ background: repeating-linear-gradient(135deg, rgba(90,103,116,.05) 0 2px, rgba(0,0,0,0) 2px 8px), radial-gradient(120% 100% at 50% 50%, #0e130f 0%, #070a08 55%, #020403 100%); color: var(--amber-l); font-family: var(--font); overflow: hidden; user-select: none; -webkit-user-select: none; } /* the whole UI is a fixed-size stage, scaled uniformly to fit the viewport. position:fixed → не додає документного скролу навіть при scale>1 (десктоп). */ #app { position: fixed; top: 50%; left: 50%; width: var(--stage-w); height: var(--dh); transform: translate(-50%, -50%) scale(var(--scale)); transform-origin: center center; overflow: hidden; background: var(--deep); } /* ---------- landscape: rotate-to-PORTRAIT prompt ---------- */ #rotate { position: fixed; inset: 0; z-index: 12000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: radial-gradient(90% 80% at 50% 45%, #131a14 0%, #060a07 60%, #000 100%); text-align: center; padding: 24px; } :root.landscape #rotate { display: flex; } :root.landscape #app { visibility: hidden; } /* phone icon is now wide→tall to hint "turn to vertical" */ #rotate .rot-ico { width: 96px; height: 60px; border: 4px solid var(--cyan); border-radius: 12px; box-shadow: 0 0 0 4px var(--ink), 0 0 24px rgba(255,176,32, 0.5); animation: rotSpin 2.4s ease-in-out infinite; } @keyframes rotSpin { 0%,40% { transform: rotate(0); } 60%,100% { transform: rotate(90deg); } } #rotate .rot-title { color: var(--cyan-l); font-size: var(--fs-xl); letter-spacing: 3px; text-shadow: 0 0 10px var(--cyan); text-transform: uppercase; } #rotate .rot-sub { color: var(--yellow); font-size: var(--fs-sm); letter-spacing: 2px; } canvas { image-rendering: pixelated; image-rendering: crisp-edges; } /* ---------- screens ---------- */ .screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; } .screen.active { display: flex; } /* full-bleed background canvas for a screen */ .bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* content sits above the canvas */ .layer { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } @keyframes flick { 0% { opacity: 1; } 50% { opacity: 0.86; } 100% { opacity: 1; } } /* ---------- stencilled text ---------- Military lettering is SPRAYED THROUGH A PLATE, so the shadow is a hard 1px offset (paint bleed), not a soft blur. The blur is kept only as a faint second layer for the things that are genuinely lit — readouts, lamps, tracer — so "lit" and "painted" stay visually distinct. */ .px-text { font-family: var(--font); letter-spacing: 2px; text-transform: uppercase; line-height: 1.5; } .glow-c { color: var(--amber-l); text-shadow: 1px 1px 0 var(--ink), 0 0 8px rgba(255,176,32,.55); } .glow-p { color: var(--flame-l); text-shadow: 1px 1px 0 var(--ink), 0 0 10px rgba(224,58,28,.6); } .glow-g { color: var(--signal); text-shadow: 1px 1px 0 var(--ink), 0 0 10px rgba(57,255,110,.45); } .glow-y { color: var(--brass); text-shadow: 1px 1px 0 var(--ink), 0 0 8px rgba(255,122,61,.5); } /* Paint stencilled onto metal: no glow at all, just bleed and a lit top edge. */ .stencil { color: var(--sand-l); text-shadow: 1px 1px 0 var(--ink), 2px 2px 0 rgba(5,7,10,.55), 0 -1px 0 rgba(240,219,174,.25); letter-spacing: 3px; } /* ---------- stamped-plate button ---------- A WarMatch button is a piece of painted steel bolted to the panel. Anatomy, from the outside in: · a hard black bed (the bolt shadow) offset DOWN — the plate stands proud of the surface, so pressing it must move it down into the bed; · the plate itself, a vertical bevel: lit along the top, dark at the bottom, because the light in this game comes from above; · a 2px ink outline so it survives on any backdrop; · corner rivets, drawn with a repeating radial-gradient. Pressing recoils it 4px and swaps the bevel — the plate is pushed in. */ .px-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-lg); box-sizing: border-box; font-family: var(--font); font-size: var(--fs-md); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--bone); text-shadow: 1px 1px 0 rgba(5,7,10,.85); background: linear-gradient(180deg, rgba(255,255,255,.16) 0 34%, rgba(0,0,0,0) 34% 62%, rgba(0,0,0,.30) 62% 100%), var(--olive); border: 0; padding: 12px 24px; cursor: pointer; image-rendering: pixelated; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(5,7,10,.55), 0 6px 0 0 rgba(5,7,10,.75); transition: transform .05s steps(1), background-color .1s linear; } /* rivets: one plate, four heads */ .px-btn::before { content: ""; position: absolute; inset: 4px; pointer-events: none; background: radial-gradient(circle at 3px 3px, rgba(255,255,255,.45) 0 1px, rgba(0,0,0,0) 1.5px), radial-gradient(circle at calc(100% - 3px) 3px, rgba(255,255,255,.30) 0 1px, rgba(0,0,0,0) 1.5px), radial-gradient(circle at 3px calc(100% - 3px), rgba(0,0,0,.5) 0 1px, rgba(0,0,0,0) 1.5px), radial-gradient(circle at calc(100% - 3px) calc(100% - 3px), rgba(0,0,0,.5) 0 1px, rgba(0,0,0,0) 1.5px); } .px-btn:hover { background-color: var(--olive-l); } .px-btn:active { transform: translateY(4px); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(5,7,10,.55), 0 2px 0 0 rgba(5,7,10,.75); background-image: linear-gradient(180deg, rgba(0,0,0,.35) 0 40%, rgba(0,0,0,0) 40% 70%, rgba(255,255,255,.12) 70% 100%); } /* PRIMARY — amber, the one thing on screen that is genuinely lit. */ .px-btn.cyan { background-color: var(--amber); color: var(--ink); text-shadow: 0 1px 0 rgba(255,238,158,.6); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(5,7,10,.55), 0 6px 0 0 rgba(5,7,10,.75), 0 0 22px rgba(255,176,32,.35); } .px-btn.cyan:hover { background-color: var(--amber-l); } /* GO — signal green, for confirmations. */ .px-btn.green { background-color: var(--signal); color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.4); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(5,7,10,.55), 0 6px 0 0 rgba(5,7,10,.75), 0 0 22px rgba(57,255,110,.3); } /* DANGER — blood red. */ .px-btn.danger { background-color: var(--alert); color: var(--bone); } /* GHOST — an unpainted bracket, for secondary and back actions. */ .px-btn.ghost { background: rgba(13,20,16,.72); color: var(--amber-l); clip-path: none; box-shadow: 0 0 0 2px var(--amber) inset, 0 0 0 2px var(--ink); padding: 8px 14px; font-size: var(--fs-sm); min-height: var(--tap); letter-spacing: 1.5px; text-shadow: 1px 1px 0 var(--ink); } .px-btn.ghost::before { display: none; } .px-btn.ghost:hover, .px-btn.ghost:active { color: var(--amber-hot); background: rgba(255,176,32,.16); } .px-btn.ghost:active { transform: translateY(2px); } .px-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.8); } .px-btn:disabled::before { display: none; } /* gear settings button (lobby): a square HUD chip, unified with the counters */ .px-btn.gear-btn { width: var(--hud-chip); height: var(--hud-chip); min-width: var(--hud-chip); min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; letter-spacing: 0; box-shadow: none; border: 2px solid var(--cyan); background: rgba(10,16,11, 0.7); color: var(--cyan-l); } .px-btn.gear-btn:hover, .px-btn.gear-btn:active { color: #fff; background: rgba(255,176,32, 0.14); } /* shop button (lobby HUD): same chip shape as the gear button, icon fitted to size */ .px-btn.gear-btn.shop-btn canvas { display: block; image-rendering: pixelated; } .px-btn.gear-btn.shop-btn .new-badge { position: absolute; left: -10px; top: -10px; z-index: 3; background: var(--pink); color: #fff; font-size: var(--fs-micro); letter-spacing: 0.5px; padding: 2px 4px; box-shadow: 0 0 0 2px var(--ink); animation: bob 0.8s steps(2) infinite; } /* ---------- armour plate / dialog ---------- Panels are welded plate: a dark olive field under a fine diagonal mill finish, an amber weld seam, and a black bed. The corner marks are BRACKETS rather than dots — the same corner language as the HUD. */ .px-panel { position: relative; background: repeating-linear-gradient(135deg, rgba(138,151,163,.045) 0 1px, rgba(0,0,0,0) 1px 6px), linear-gradient(180deg, rgba(111,143,52,.14) 0%, rgba(0,0,0,0) 38%), rgba(13, 20, 16, 0.95); box-shadow: 0 0 0 2px var(--amber), 0 0 0 5px var(--ink), 0 0 30px rgba(255,176,32, 0.20), inset 0 1px 0 rgba(255,224,122,.22), inset 0 -2px 0 rgba(5,7,10,.6); padding: 16px 18px; } .px-panel.pink { box-shadow: 0 0 0 2px var(--alert), 0 0 0 5px var(--ink), 0 0 30px rgba(224,58,28, 0.24), inset 0 1px 0 rgba(255,154,92,.22), inset 0 -2px 0 rgba(5,7,10,.6); } /* corner brackets — top-left and bottom-right, mirrored on the pseudo pair */ .px-panel::before, .px-panel::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; } .px-panel::before { left: 3px; top: 3px; border-left: 2px solid var(--amber); border-top: 2px solid var(--amber); } .px-panel::after { right: 3px; bottom: 3px; border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber); } .px-panel.pink::before { border-color: var(--alert); } .px-panel.pink::after { border-color: var(--alert); } /* ---------- typewriter caret ---------- */ .caret::after { content: "\2588"; animation: blink 0.7s steps(1) infinite; margin-left: 2px; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ===================================================================== CUTSCENE ===================================================================== */ #cutscene { background: #000; } /* the hand-drawn frame — CONTAIN so nothing is cropped; letterbox bars fill the rest of the portrait screen (top & bottom) */ #cutImg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; transform-origin: center; } /* slow push-in; restarted per beat by toggling the class */ #cutImg.kb { animation: kenburns 9s linear both; } @keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.07); } } /* transparent fx layer stacked over the frame */ #cutscene .cut-stage { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; background: transparent; } /* PORTRAIT: text spans the FULL width across the bottom (over the letterbox bar) */ #cutscene .cut-text { position: absolute; left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-width: 100%; height: fit-content; min-height: 0; white-space: normal; padding: 12px calc(14px + var(--edge-r)) calc(14px + var(--safe-l)) calc(14px + var(--edge)); text-align: center; z-index: 3; font-size: var(--fs-md); line-height: 1.35; color: var(--cyan-l); text-shadow: 0 0 8px rgba(255,176,32, 0.55); background: linear-gradient(0deg, rgba(7,10,8, 0.96) 70%, rgba(7,10,8, 0)); border-top: 3px solid var(--cyan); text-transform: none; letter-spacing: 0.5px; } #cutscene .cut-text .who { display: block; color: var(--pink-l); font-size: var(--fs-sm); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 2px; line-height: 1.15; text-shadow: 0 0 8px var(--pink); } #cutscene .skip { position: absolute; right: var(--edge-r); top: 14px; z-index: 4; } #cutscene .prompt-next { position: absolute; right: max(16px, var(--edge-r)); bottom: 96px; z-index: 4; color: var(--yellow); font-size: var(--fs-sm); letter-spacing: 1px; background: rgba(7,10,8, 0.8); padding: 4px 8px; animation: bob 0.9s steps(2) infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* ===================================================================== MENU ===================================================================== */ #menu .layer { justify-content: space-between; padding: calc(4 * var(--vh)) 0; } #menu .title-wrap { text-align: center; flex: 0 0 auto; } #menu .t1 { font-size: clamp(26px, calc(4.4 * var(--vw)), 52px); font-weight: 700; letter-spacing: 5px; color: #fff; text-shadow: 0 0 0 #000, 3px 3px 0 var(--pink), -3px -3px 0 var(--cyan), 0 0 26px rgba(224,58,28, 0.7); animation: hover1 3.4s ease-in-out infinite; } @keyframes hover1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } #menu .menu-bottom { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; } /* ===================================================================== CRT TERMINAL (green screen) ===================================================================== */ #crt { background: radial-gradient(90% 80% at 50% 40%, #131a14 0%, #060a07 60%, #000 100%); } /* WIDESCREEN fullscreen terminal: the phosphor screen fills the whole stage. #crt keeps a Zoras column on the right (only while she speaks); .hacked-os fills edge to edge. */ #crt .crt-stage, .hacked-os .crt-stage { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--sp2); padding: 8px var(--edge-r) 8px var(--edge); } /* the "case" is now just a full-size container — the beige micro chrome is gone so the green screen goes edge to edge (widescreen, not a square tube). */ .pc-case { flex: 1 1 auto; min-width: 0; width: auto; height: 100%; background: none; padding: 0; box-shadow: none; display: flex; flex-direction: column; } .pc-top, .pc-chin { display: none; } /* hide the beige microcomputer chrome */ .pc-bezel { flex: 1 1 auto; min-height: 0; background: none; padding: 0; box-shadow: none; display: flex; } .pc-brand, .pc-led, .pc-vents, .pc-drive { display: none; } #crt .monitor, .hacked-os .monitor { position: relative; width: 100%; height: 100%; background: #05170b; box-shadow: inset 0 0 120px rgba(57,255,110, 0.10), 0 0 0 2px rgba(57,255,110,.35), 0 0 40px rgba(57,255,110, 0.18); border-radius: 4px; padding: 12px 18px; overflow: hidden; display: flex; flex-direction: column; } .crt-baud { font-size: var(--fs-micro); letter-spacing: 1px; opacity: 0.6; } /* Zoras — BOTTOM row beneath the fullscreen screen, shown once she has something to say. When hidden, the terminal expands to the full height. */ #crt .crt-zoras { display: none; flex: 0 0 auto; width: 100%; padding: 0; flex-direction: row; align-items: flex-end; justify-content: center; gap: var(--sp2); } #crt .crt-zoras.show { display: flex; } #crt .crt-zoras .zoras-frame { flex: 0 0 auto; } #crt .crt-zoras .zoras-frame img, #crt .crt-zoras .zoras-frame video { height: clamp(96px, 14 * var(--vh), 128px); width: auto; } #crt .crt-zoras .zoras-box { flex: 1 1 auto; min-height: 60px; max-height: 130px; font-size: 13px; line-height: 1.45; padding: 10px 18px 14px 12px; } #crt .crt-zoras .zoras-box .who { font-size: 11px; margin-bottom: 5px; } #crt .monitor::after, .hacked-os .monitor::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.3) 3px 4px); } /* ---- CX-64 monitor content: DENSE. The phosphor screen is a small "screen-within-a-screen", so its type & controls are much smaller than the full-screen UI — several messages fit at once and buttons don't dominate. ---- */ #crt .crt-head, .hacked-os .crt-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp2); color: var(--green); font-size: 12px; letter-spacing: 1px; border-bottom: 2px solid rgba(57,255,110, 0.35); padding-bottom: 8px; margin-bottom: 10px; flex: 0 0 auto; } /* leave room at top-left for the case exit (door) icon overlaid fixed */ #crt .crt-head { padding-left: 46px; } /* compact icon-only buttons (skip ⏭ etc.) */ .px-btn.icon-only { font-size: 18px; line-height: 1; letter-spacing: 0; min-width: 0; padding: 6px 10px; } #crt .crt-head .px-btn.icon-only, .hacked-os .crt-head .px-btn.icon-only { font-size: 18px; min-height: 30px; padding: 3px 10px; } #crt .crt-body, .hacked-os .crt-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; color: var(--green); font-size: 14px; line-height: 1.5; text-shadow: 0 0 6px rgba(57,255,110, 0.65); padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--green) transparent; } #crt .crt-body::-webkit-scrollbar { width: 6px; } #crt .crt-body::-webkit-scrollbar-thumb { background: rgba(57,255,110,.4); } #crt .crt-foot, .hacked-os .crt-foot { flex: 0 0 auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: var(--sp2); } /* terminal buttons (ДАЛІ / ПРОПУСТИТИ / ВІДКЛЮЧИТИСЬ / os-back) — readable now */ #crt .crt-head .px-btn, #crt .crt-foot .px-btn, .hacked-os .crt-head .px-btn, .hacked-os .crt-foot .px-btn { min-height: 30px; font-size: 11px; padding: 6px 12px; letter-spacing: 1px; } .crt-baud { font-size: 10px; } .crt-line { white-space: pre-wrap; word-break: break-word; } .crt-line.dim { color: rgba(57,255,110, 0.55); } .crt-line.warn { color: var(--yellow); text-shadow: 0 0 6px var(--orange); } .crt-line.alert { color: #ff5b3a; text-shadow: 0 0 8px var(--red); } .crt-line.sp { height: 10px; } .crt-line.zoras-recall { color: rgba(255,140,80, 0.72); font-style: italic; } /* ---- client profile scan (offer intro) ---- */ .profile-scan { position: relative; border: 1px solid rgba(255,176,32,.4); background: rgba(0,40,50,.28); border-radius: 6px; padding: 10px 12px; margin: 8px 0; overflow: hidden; } .profile-scan .ps-head { font-size: .82em; letter-spacing: 1px; color: var(--cyan-l); margin-bottom: 8px; } .profile-scan.scanning { min-height: 64px; } .ps-scanline { position: absolute; left: 0; right: 0; height: 26px; top: 0; background: linear-gradient(180deg, transparent, rgba(255,176,32,.22), transparent); animation: psScan 1s linear infinite; } @keyframes psScan { 0%{ transform: translateY(0);} 100%{ transform: translateY(64px);} } .ps-row { display: flex; gap: 12px; align-items: flex-start; } .ps-photo-fr { flex: 0 0 auto; border: 2px solid rgba(255,176,32,.5); border-radius: 4px; padding: 2px; background: #0a1410; } .ps-photo { display: block; width: 88px; height: 88px; object-fit: cover; image-rendering: auto; border-radius: 2px; cursor: pointer; } .ps-fields { display: flex; flex-direction: column; gap: 4px; font-size: .92em; } .ps-field { display: flex; gap: 6px; } .ps-field .ps-k { color: rgba(255,176,32,.7); min-width: 96px; } .ps-field .ps-v { color: #d8ffe4; } /* ---- case board: culprit box (dark), split + accusable ---- */ .slot.culprit { z-index: 3; } .slot.culprit .culprit-q, .slot.culprit .culprit-split { width: clamp(84px, calc(11 * var(--vw)), 116px); height: clamp(84px, calc(11 * var(--vw)), 116px); border: 2px solid #6b7266; background: repeating-linear-gradient(45deg, #121810, #121810 6px, #171f18 6px, #171f18 12px); box-shadow: inset 0 0 24px rgba(0,0,0,.6); } .slot.culprit .culprit-q { display: flex; align-items: center; justify-content: center; font-size: 44px; color: #8b937f; font-weight: 700; } .culprit-split { display: flex; overflow: hidden; } .culprit-split .cs-half { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; position: relative; } .culprit-split .cs-half.left { background: linear-gradient(180deg, rgba(74,99,35,.22), rgba(28,34,40,.45)); border-right: 1px dashed rgba(200,40,28,.6); } .culprit-split .cs-half.right { background: linear-gradient(180deg, rgba(170,60,30,.18), rgba(70,26,14,.35)); } .culprit-split .cs-name { font-size: clamp(9px, calc(1 * var(--vw)), 12px); color: #e6ecdf; text-align: center; text-shadow: 0 1px 2px #000; } .slot.culprit.accusable { cursor: pointer; } .slot.culprit.accusable .culprit-split { border-color: var(--red); box-shadow: 0 0 16px rgba(200,40,28,.7), inset 0 0 20px rgba(200,40,28,.25); animation: culpritPulse 1.3s ease-in-out infinite; } @keyframes culpritPulse { 0%,100%{ box-shadow: 0 0 12px rgba(200,40,28,.5), inset 0 0 20px rgba(200,40,28,.2);} 50%{ box-shadow: 0 0 22px rgba(200,40,28,.95), inset 0 0 24px rgba(200,40,28,.35);} } .slot.culprit.accusable .cap { color: #ff8a6a; text-shadow: 0 0 6px var(--red); } /* ---- HackedOS photo ---- */ .osr-photo { display: block; max-width: 100%; max-height: 320px; margin-top: 8px; border: 1px solid rgba(57,255,110,.4); border-radius: 4px; cursor: pointer; } .fc-photo { display: block; max-width: 100%; max-height: 260px; margin-top: 6px; border: 1px solid rgba(57,255,110,.4); border-radius: 4px; cursor: pointer; } /* ---- media viewer (fullscreen photo/video) ---- */ .media-viewer { position: fixed; inset: 0; z-index: 9990; display: none; align-items: center; justify-content: center; background: rgba(4,6,5,.94); } .media-viewer.show { display: flex; } .media-viewer .mv-close { position: absolute; top: 16px; right: 20px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.5); color: #fff; font-size: 20px; cursor: pointer; } .mv-stage { max-width: calc(94 * var(--vw)); max-height: calc(92 * var(--vh)); display: flex; align-items: center; justify-content: center; } .mv-img { max-width: calc(94 * var(--vw)); max-height: calc(92 * var(--vh)); object-fit: contain; } .mv-video { max-width: calc(94 * var(--vw)); max-height: calc(92 * var(--vh)); } /* ---- reward fly overlay (over the lobby): tap → icons fly to the counters ---- */ .reward-fly { position: fixed; inset: 0; z-index: 9995; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, rgba(12,5,34,.66), rgba(4,6,5,.93)); opacity: 0; transition: opacity .35s; pointer-events: none; } .reward-fly.show { opacity: 1; pointer-events: auto; } .rf-panel { display: flex; flex-direction: column; align-items: center; gap: 16px; transform: scale(.88); transition: transform .35s cubic-bezier(.3,1.4,.5,1); } .reward-fly.show .rf-panel { transform: scale(1); } .rf-title { font-family: var(--font); font-size: 20px; letter-spacing: 5px; color: var(--yellow); text-shadow: 0 0 14px var(--orange); } .rf-chips { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .rf-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 20px; background: rgba(9,14,10,.9); box-shadow: 0 0 0 2px currentColor, 0 0 26px rgba(0,0,0,.55); will-change: transform, opacity; } .rf-chip.k-hack { color: var(--green); } .rf-chip.k-credits { color: var(--pink); } .rf-chip.k-xp { color: var(--cyan); } .rf-ic { font-size: 34px; line-height: 1; text-shadow: 0 0 16px currentColor; } .rf-amt { font-family: var(--font); font-size: 22px; font-weight: 700; color: #fff; } .rf-lab { font-family: var(--font); font-size: 10px; letter-spacing: 1.5px; color: var(--cyan-l); } .rf-hint { font-family: var(--font); font-size: 12px; letter-spacing: 2px; color: var(--cyan-l); opacity: .85; margin-top: 4px; animation: rfBlink 1.1s steps(2) infinite; } .reward-fly.go .rf-hint, .reward-fly.go .rf-title { opacity: 0; transition: opacity .2s; } @keyframes rfBlink { 50% { opacity: .3; } } .counter-pop { display: inline-block; animation: counterPop .34s ease; } @keyframes counterPop { 0%,100% { transform: scale(1); } 45% { transform: scale(1.55); filter: brightness(1.7); } } /* ---- gallery grid ---- */ .gallery-screen { position: fixed; inset: 0; z-index: 55; display: none; flex-direction: column; background: #070b08; } .gallery-screen.show { display: flex; } .gal-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid rgba(255,140,80,.3); } .gal-title { color: var(--pink); letter-spacing: 2px; font-size: 1.1em; } /* fixed column + row tracks (was minmax 1fr + aspect-ratio: the auto row track didn't grow to the aspect-ratio height, so rows overlapped the next row) */ .gal-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, 160px); grid-auto-rows: 160px; gap: 12px; padding: 18px; align-content: start; justify-content: center; } .gal-empty { grid-column: 1/-1; text-align: center; color: rgba(255,255,255,.5); padding: 40px; } .gal-cell { position: relative; border: 1px solid rgba(255,176,32,.3); border-radius: 6px; overflow: hidden; background: #0c110d; cursor: pointer; padding: 0; width: 100%; height: 100%; } .gal-cell .gal-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .gal-cell .gal-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff; text-shadow: 0 2px 8px #000; pointer-events: none; } .gal-cell .gal-cap { position: absolute; left: 0; right: 0; bottom: 0; font-size: .72em; color: #e6ecdf; background: rgba(0,0,0,.6); padding: 3px 5px; text-align: left; } /* ---- COLLECTIONS HUB (fullscreen category chooser: photo / video / music) ---- */ #collections { position: fixed; inset: 0; z-index: 54; display: none; flex-direction: column; background: radial-gradient(130% 100% at 50% 20%, #131b14 0%, #080d09 55%, #030604 100%); } #collections.show { display: flex; } #collections::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.17) 3px 4px); } .col-topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px max(16px, env(safe-area-inset-right,0px)) 12px max(16px, env(safe-area-inset-left,0px)); border-bottom: 2px solid rgba(255,176,32,.22); position: relative; z-index: 2; } .col-title { font-size: 22px; letter-spacing: 4px; } .col-grid { flex: 1 1 auto; min-height: 0; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 18px; padding: 20px max(18px, env(safe-area-inset-right,0px)) 28px max(18px, env(safe-area-inset-left,0px)); } .col-card { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 128px; padding: 22px 18px; cursor: pointer; font-family: var(--font); color: var(--cyan-l); background: rgba(12,18,13, 0.9); box-shadow: 0 0 0 3px var(--cyan), 0 0 0 6px var(--ink), 0 0 26px rgba(255,176,32, 0.22); transition: transform 0.08s steps(1), filter 0.12s; } .col-card:hover, .col-card:active { transform: translateY(-3px); filter: brightness(1.15); } .col-card.video { box-shadow: 0 0 0 3px var(--pink), 0 0 0 6px var(--ink), 0 0 26px rgba(224,58,28, 0.28); color: var(--pink-l); } .col-card .col-ic { font-size: 44px; line-height: 1; text-shadow: 0 0 16px currentColor; } .col-card .col-name { font-size: 22px; letter-spacing: 4px; color: #fff; } .col-card .col-sub { font-size: 11px; letter-spacing: 2px; color: var(--grey); } /* ---- LEADERBOARD (fullscreen: per-game boards + one combined overall board) ---- */ #leaderboard { position: fixed; inset: 0; z-index: 54; display: none; flex-direction: column; background: radial-gradient(130% 100% at 50% 20%, #131b14 0%, #080d09 55%, #030604 100%); } #leaderboard.show { display: flex; } .lb-tabs { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 16px 0; } .lb-tab { flex: 1 1 auto; padding: 11px 6px; font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #cbd2c4; background: rgba(12,18,13, 0.9); line-height: 1.25; box-shadow: 0 0 0 2px rgba(255,176,32, 0.35), 0 0 0 4px var(--ink); cursor: pointer; } .lb-tab.active { color: #fff; box-shadow: 0 0 0 2px var(--cyan), 0 0 0 4px var(--ink), 0 0 16px rgba(255,176,32, 0.35); } .lb-gamepicker { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; } .lb-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 11px; background: rgba(12,18,13, 0.9); color: #cbd2c4; cursor: pointer; box-shadow: 0 0 0 2px rgba(255,176,32, 0.25), 0 0 0 4px var(--ink); } .lb-chip.active { color: #fff; box-shadow: 0 0 0 2px var(--cyan), 0 0 0 4px var(--ink), 0 0 14px rgba(255,176,32, 0.3); } .lb-chip-ic { width: 28px; height: 28px; image-rendering: pixelated; } .lb-chip-name { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; } .lb-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px 24px; } .lb-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin-bottom: 4px; background: rgba(19,27,20, 0.65); font-size: 13px; color: var(--ink-l, #f2f0e4); } .lb-row .lb-rank { flex: 0 0 30px; color: var(--grey); font-weight: 700; text-align: center; } .lb-row .lb-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-row .lb-score { flex: 0 0 auto; color: var(--yellow); font-weight: 700; font-variant-numeric: tabular-nums; } .lb-row.top1 { box-shadow: 0 0 0 2px var(--yellow), 0 0 14px rgba(230,190,110, 0.35); } .lb-row.top2 { box-shadow: 0 0 0 2px #cbd3c6, 0 0 12px rgba(203,211,198, 0.3); } .lb-row.top3 { box-shadow: 0 0 0 2px var(--orange), 0 0 12px rgba(255,122,61, 0.3); } .lb-row.me { box-shadow: 0 0 0 2px var(--pink), 0 0 16px rgba(224,58,28, 0.35); background: rgba(44,20,10, 0.75); } .lb-row.me .lb-name { color: var(--pink-l); font-weight: 700; } .lb-sep { text-align: center; color: var(--grey); padding: 4px 0; letter-spacing: 4px; } /* ---- SHOP (fullscreen storefront: currency / xp / hack-point packs) ---- */ #shop { position: fixed; inset: 0; z-index: 54; display: none; flex-direction: column; background: radial-gradient(130% 100% at 50% 20%, #131b14 0%, #080d09 55%, #030604 100%); } #shop.show { display: flex; } #shop::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.17) 3px 4px); } .shop-balance { flex: 0 0 auto; text-align: center; padding: 12px 16px; font-size: 14px; letter-spacing: 1px; color: #d6dbd0; position: relative; z-index: 2; } .shop-balance b { color: #fff; font-size: 17px; font-weight: 800; } .shop-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 10px max(16px, env(safe-area-inset-right,0px)) 28px max(16px, env(safe-area-inset-left,0px)); align-content: start; } .shop-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 22px 12px 16px; background: rgba(12,18,13, 0.92); color: #fff; font-family: var(--font); box-shadow: 0 0 0 3px var(--cyan), 0 0 0 6px var(--ink), 0 0 22px rgba(255,176,32, 0.2); } .shop-card.gold { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 6px var(--ink), 0 0 22px rgba(230,190,110, 0.25); } .shop-card.pink { box-shadow: 0 0 0 3px var(--pink), 0 0 0 6px var(--ink), 0 0 22px rgba(224,58,28, 0.25); } .shop-card.bought { opacity: 0.55; filter: grayscale(0.4); } .shop-card .sc-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--pink); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; padding: 4px 10px; box-shadow: 0 0 0 2px var(--ink); z-index: 2; } .shop-card.gold .sc-tag { background: var(--yellow); color: #1a1004; } .shop-card .sc-unit { font-size: 26px; line-height: 1; margin-top: 6px; text-shadow: 0 0 10px currentColor; } .shop-card .sc-amount { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; } .shop-card .sc-bonus { font-size: 11px; color: #7dffa6; font-weight: 700; letter-spacing: 0.3px; text-align: center; } .shop-card .sc-buy { margin-top: 10px; width: 100%; border: 0; padding: 12px 6px; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: 1px; color: #05070a; background: var(--green); cursor: pointer; box-shadow: 0 0 0 2px var(--green) inset, 0 0 0 4px var(--ink), 0 4px 0 rgba(0,0,0,.4); } .shop-card .sc-buy:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--green) inset, 0 0 0 4px var(--ink); } .shop-card .sc-buy[disabled] { background: var(--grey); box-shadow: 0 0 0 2px var(--grey) inset, 0 0 0 4px var(--ink); cursor: default; } /* ---- SHOP: КОМПЛЕКСИ (combo bundle cards — full-width, all 3 resources listed) ---- */ .bundle-grid { grid-template-columns: 1fr; gap: 16px; } .shop-card.bundle { grid-column: 1 / -1; box-shadow: 0 0 0 3px var(--yellow), 0 0 0 6px var(--ink), 0 0 26px rgba(230,190,110, 0.22); padding: 24px 20px 18px; align-items: stretch; } .bn-title { text-align: center; font-size: 12px; letter-spacing: 3px; color: var(--yellow); font-weight: 800; margin-bottom: 4px; } .bn-rows { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; } .bn-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,0.04); } .bn-row .bn-ic { font-size: 20px; line-height: 1; text-shadow: 0 0 8px currentColor; flex: 0 0 auto; } .bn-row .bn-num { font-size: 20px; font-weight: 900; color: #fff; flex: 0 0 auto; font-variant-numeric: tabular-nums; } .bn-row .bn-lbl { font-size: 12px; color: #bcc2b3; letter-spacing: 0.5px; } .bn-row.gold .bn-ic { color: var(--yellow); } .bn-row.cyan .bn-ic { color: var(--cyan); } .bn-row.pink .bn-ic { color: var(--pink); } .bn-bonus { text-align: center; font-size: 11px; color: #7dffa6; font-weight: 700; letter-spacing: 0.5px; margin-top: 2px; } /* ---- SHOP: БУСТЕРИ ІГОР (named booster chips so the pack means something) ---- */ .shop-card.boost { padding-top: 26px; } .bo-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 2px; } .bo-chip { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: #ffe0a8; background: rgba(255,176,32, 0.12); padding: 4px 9px; box-shadow: 0 0 0 1px rgba(255,176,32, 0.4); } /* ---- SHOP: subscription tab (single hero card, green-terminal x neon) ---- */ .lb-tab.sub-tab.active { box-shadow: 0 0 0 2px var(--yellow), 0 0 0 4px var(--ink), 0 0 16px rgba(230,190,110, 0.35); } .sub-grid { grid-template-columns: 1fr; } .sub-card { grid-column: 1 / -1; background: #05170b; color: var(--green); box-shadow: inset 0 0 60px rgba(57,255,110, 0.1), 0 0 0 3px var(--pink), 0 0 0 6px var(--ink), 0 0 30px rgba(224,58,28, 0.25); padding: 26px 20px; text-align: center; font-family: var(--font8, var(--font)); display: flex; flex-direction: column; align-items: center; gap: 10px; } .sub-card-title { font-size: 20px; letter-spacing: 3px; color: #fff; text-shadow: 0 0 10px var(--green); } .sub-card-price { font-size: 13px; letter-spacing: 1px; color: var(--yellow); text-shadow: 0 0 8px var(--orange); } .sub-card-list { list-style: none; text-align: left; font-size: 13px; line-height: 1.9; color: var(--green); text-shadow: 0 0 6px rgba(57,255,110,.5); } .sub-card .sc-buy { max-width: 280px; } /* ---- SUBSCRIPTION PROMO (boot-time takeover: old-PC terminal + retrowave) ---- */ #subPromo { position: fixed; inset: 0; z-index: 9800; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,6,5, 0); transition: background 0.25s; font-family: var(--font8, var(--font)); } #subPromo.show { background: rgba(4,6,5, 0.86); } .sp-crt { width: 100%; max-width: 340px; background: #05170b; color: var(--green); box-shadow: inset 0 0 80px rgba(57,255,110, 0.12), 0 0 0 3px var(--cyan), 0 0 0 6px var(--ink), 0 0 40px rgba(255,176,32, 0.3); transform: scale(0.92) translateY(10px); opacity: 0; transition: transform 0.25s, opacity 0.25s; position: relative; overflow: hidden; } #subPromo.show .sp-crt { transform: scale(1) translateY(0); opacity: 1; } .sp-crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.22) 3px 4px); } .sp-head { font-size: 10px; letter-spacing: 2px; padding: 8px 14px; color: var(--green); border-bottom: 1px solid rgba(57,255,110, 0.3); text-transform: uppercase; } .sp-blink { color: var(--pink); animation: sp-blink 1s steps(1) infinite; } @keyframes sp-blink { 50% { opacity: 0; } } .sp-body { padding: 20px 20px 22px; text-align: center; position: relative; z-index: 1; } .sp-title { font-size: 22px; letter-spacing: 3px; color: #fff; text-shadow: 0 0 12px var(--cyan); margin-bottom: 8px; } .sp-price { font-size: 12px; letter-spacing: 1px; color: var(--yellow); text-shadow: 0 0 8px var(--orange); margin-bottom: 16px; } .sp-list { list-style: none; text-align: left; font-size: 13px; line-height: 2; color: var(--green); text-shadow: 0 0 6px rgba(57,255,110,.5); margin-bottom: 18px; } .sp-cta { display: block; width: 100%; border: 0; padding: 12px 10px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #05070a; background: var(--pink); box-shadow: 0 0 0 2px var(--pink) inset, 0 0 0 4px var(--ink), 0 6px 0 rgba(0,0,0,.4); cursor: pointer; } .sp-cta:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--pink) inset, 0 0 0 4px var(--ink); } .sp-cta[disabled] { background: var(--grey); box-shadow: 0 0 0 2px var(--grey) inset, 0 0 0 4px var(--ink); } .sp-skip { display: block; width: 100%; margin-top: 10px; border: 0; background: transparent; cursor: pointer; color: var(--grey); font-family: inherit; font-size: 11px; letter-spacing: 1px; padding: 6px; } .sp-skip:hover, .sp-skip:active { color: #fff; } /* ---- Zoras overlay dock: comments OVER the current screen (board, etc.) ---- */ .zoras-overlay { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9700; display: none; padding: 0 16px 14px; pointer-events: none; } .zoras-overlay.show { display: block; } .zoras-overlay .zoras-dock { pointer-events: auto; max-width: 940px; margin: 0; padding: 0 14px 12px; gap: 12px; } /* компактний банер, щоб не перекривати дошку під час коментаря */ .zoras-overlay .zoras-frame img, .zoras-overlay .zoras-frame video { height: 132px; } .zoras-overlay .zoras-box { min-height: 0; padding: 12px 16px 30px; font-size: 15px; } /* ---- accusation popup ---- */ .accuse-overlay { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(6,9,7,.86); backdrop-filter: blur(3px); } .accuse-overlay.show { display: flex; } .acc-card { width: min(920px, calc(94 * var(--vw))); max-height: calc(92 * var(--vh)); overflow: auto; background: #0c110d; border: 2px solid var(--red); border-radius: 10px; padding: 18px; box-shadow: 0 0 40px rgba(200,40,28,.4); } .acc-title { text-align: center; color: #ff8a6a; letter-spacing: 2px; margin-bottom: 14px; text-shadow: 0 0 8px var(--red); } .acc-grid { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .acc-susp { flex: 1 1 340px; max-width: 420px; background: rgba(18,24,16,.7); border: 1px solid rgba(255,140,80,.35); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .acc-face { width: 100%; height: 150px; object-fit: cover; border-radius: 5px; border: 1px solid rgba(255,176,32,.3); } .acc-name { font-size: var(--fs-lg); color: var(--cyan-l); letter-spacing: 1px; } .acc-doss { font-size: var(--fs-md); line-height: 1.4; color: #d6dccb; flex: 1; } .acc-btn { align-self: stretch; } /* ---- cutscene overlay (image frames) ---- */ .cutscene-overlay { position: fixed; inset: 0; z-index: 65; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #030604; padding: calc(3 * var(--vh)) calc(4 * var(--vw)); } .cutscene-overlay.show { display: flex; } .cut-img { max-width: min(1100px, calc(92 * var(--vw))); max-height: calc(62 * var(--vh)); object-fit: contain; border: 2px solid rgba(255,176,32,.35); border-radius: 6px; box-shadow: 0 0 40px rgba(0,0,0,.7); } .cut-text { max-width: min(900px, calc(90 * var(--vw))); min-height: 3.2em; color: #e6ecdf; font-size: clamp(14px, calc(1.8 * var(--vw)), 18px); line-height: 1.5; text-align: center; white-space: pre-wrap; } .cut-next { min-width: 160px; } /* ---- standalone photo sent in the thread ---- */ .th-image { margin: 8px 0; max-width: 320px; } .th-image .thi-img { display: block; width: 100%; max-width: 320px; border: 2px solid rgba(255,140,80,.45); border-radius: 4px; cursor: pointer; image-rendering: auto; } .th-image .thi-cap { font-size: .82em; color: rgba(255,140,80,.8); margin-top: 3px; } /* chat log inside the terminal — portraits are tinted to the phosphor */ .chat { margin: 6px 0; padding-left: 7px; border-left: 3px solid rgba(57,255,110,.35); display: flex; gap: 8px; align-items: flex-start; } .chat .face { width: 38px; height: 38px; flex: 0 0 auto; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 2px rgba(57,255,110,.6); filter: grayscale(1) sepia(1) hue-rotate(58deg) saturate(3.4) brightness(1.15) contrast(1.1); } .chat.b .face { box-shadow: 0 0 0 2px rgba(255,224,122,.6); } .chat .chat-text { flex: 1 1 auto; min-width: 0; } .chat .nick { color: var(--cyan-l); text-shadow: 0 0 6px var(--cyan); } .chat.b .nick { color: var(--pink-l); text-shadow: 0 0 6px var(--pink); } .chat .msg { color: var(--green); } /* video attachment inside a chat line */ .chat-video { display: inline-block; margin-top: 8px; font-family: var(--font); font-size: 11px; letter-spacing: 1px; color: var(--cyan-l); background: rgba(255,176,32, 0.08); border: 0; padding: 8px 12px; cursor: pointer; box-shadow: 0 0 0 2px var(--cyan), 0 0 0 4px var(--ink); text-shadow: 0 0 6px var(--cyan); } .chat-video:hover { background: rgba(255,176,32, 0.2); color: #fff; } /* case-file caller portrait */ .crt-portrait { display: flex; justify-content: center; margin: 3px 0 8px; } .crt-portrait img { width: 72px; height: auto; image-rendering: pixelated; box-shadow: 0 0 0 3px rgba(57,255,110, 0.7), 0 0 20px rgba(57,255,110, 0.25); filter: grayscale(1) sepia(1) hue-rotate(58deg) saturate(3) brightness(1.1); } /* hack progress bar */ .hackbar { width: 100%; height: 22px; background: #06210d; box-shadow: inset 0 0 0 2px rgba(57,255,110,.5); position: relative; } .hackbar > i { display: block; height: 100%; width: 0%; background: var(--green); box-shadow: 0 0 12px var(--green); transition: width .25s steps(8); } /* percent stays legible over BOTH the dark track and the green fill: white text with a dark outline, not dark-on-dark */ .hackbar > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-xs); color: #eafff0; letter-spacing: 2px; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 4px #000, 1px 1px 0 #05170b; } /* ===================================================================== LOBBY (PORTRAIT): HUD → Zoras (top) → game tiles → feature rail (bottom). Ordered with flex `order` so the DOM stays intact but Zoras rides at the top. ===================================================================== */ #lobby .layer { flex-direction: column; justify-content: flex-start; padding: 0; gap: 2px; } /* HUD: compact top band. Meter (tutorial) / currency (free-roam) on the left, icon buttons on the right; nothing overlaps, safe-area padded. */ .lobby-top { order: 0; flex: 0 0 auto; width: 100%; padding: 10px var(--edge-r) 8px var(--edge); display: flex; align-items: center; justify-content: space-between; gap: var(--sp2); z-index: 3; min-height: var(--hud-h); } #btnAudio, #devReset { flex: 0 0 auto; } .hack-meter { flex: 1 1 auto; max-width: 560px; } .hack-meter .hm-label { font-size: var(--fs-sm); letter-spacing: 2px; color: var(--cyan-l); margin-bottom: 5px; display: flex; justify-content: space-between; text-shadow: 0 0 8px rgba(255,176,32, 0.4); } .hack-meter .hm-label #hmNum { color: var(--yellow); font-size: 1.1em; text-shadow: 0 0 8px var(--orange); } .hack-meter .hm-bar { height: 22px; background: rgba(6,9,7, 0.85); box-shadow: 0 0 0 3px var(--cyan), 0 0 0 6px var(--ink); position: relative; overflow: hidden; } .hack-meter .hm-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--pink), var(--cyan)); box-shadow: 0 0 14px var(--cyan); transition: width 0.45s steps(12); } .hack-meter .hm-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 6px); } .lobby-mid { order: 2; flex: 1 1 auto; min-height: 0; width: 100%; z-index: 3; display: flex; align-items: stretch; justify-content: center; padding: 4px var(--edge) 4px var(--edge); } /* the decryption nodes: a GRID that scales to N games — real nodes first, then dashed "coming soon" placeholders so the capacity for more is visible */ .zone { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,176,32,.4) transparent; padding-bottom: 10px; } .zone::-webkit-scrollbar { width: 6px; } .zone::-webkit-scrollbar-thumb { background: rgba(255,176,32,.4); border-radius: 3px; } .zone-title { font-size: var(--fs-sm); font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan-l); opacity: 0.85; text-shadow: 0 0 8px rgba(255,176,32, 0.5); flex: 0 0 auto; } .zone-nodes { flex: 0 0 auto; min-height: 0; width: 100%; max-width: 384px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp4) var(--sp2); align-content: start; justify-items: center; overflow: visible; padding: 8px 4px 10px; } .zone-title-rebuses { margin-top: 6px; color: var(--yellow); } /* placeholder slot for a future game/feature — dashed icon-sized box */ .node.placeholder { cursor: default; width: 68px; height: 68px; min-height: 68px; padding: 0; background: rgba(12,18,13, 0.35); box-shadow: none; border: 2px dashed rgba(255,176,32, 0.28); align-items: center; justify-content: center; } .node.placeholder:hover, .node.placeholder:active { transform: none; } .node.placeholder .ph-mark { font-size: 32px; color: rgba(255,176,32, 0.4); line-height: 1; } .node.placeholder .ph-txt { display: none; } /* ---------- bottom nav bar: primary features (inbox / board / collections…) ---- A fixed row along the bottom of the portrait stage; scrolls horizontally if it ever overflows so every visible feature stays reachable. ---------- */ .side-rail { order: 3; flex: 0 0 auto; width: 100%; z-index: 4; display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: var(--sp2); overflow-x: auto; overflow-y: hidden; padding: 6px var(--edge) calc(6px + var(--safe-l)) var(--edge); background: linear-gradient(0deg, rgba(7,11,8,0.92), rgba(7,11,8,0.0)); border-top: 2px solid rgba(255,176,32, 0.18); scrollbar-width: none; } .side-rail::-webkit-scrollbar { height: 0; width: 0; } .rail-node { position: relative; flex: 0 0 auto; /* never squish in the scrolling row */ width: 74px; min-height: var(--tap); padding: 5px 4px; background: rgba(12,18,13, 0.9); box-shadow: 0 0 0 2px var(--cyan), 0 0 0 4px var(--ink), 0 0 16px rgba(255,176,32, 0.15); border: 0; cursor: pointer; font-family: var(--font); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: transform 0.08s steps(1); } .rail-node:hover, .rail-node:active { transform: translateY(-4px); } .rail-node canvas { width: 30px; height: 30px; } .rail-node .rn-name { font-size: 9px; letter-spacing: 0.2px; line-height: 1.12; text-align: center; color: var(--cyan-l); text-transform: uppercase; /* long target labels (e.g. a case name) must never spill past the tile */ max-width: 100%; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rail-node.hot { box-shadow: 0 0 0 2px var(--pink), 0 0 0 4px var(--ink), 0 0 22px rgba(224,58,28, 0.6); animation: pulseHot 1.1s steps(2) infinite; } .rail-node.locked { cursor: not-allowed; box-shadow: 0 0 0 2px #333a30, 0 0 0 4px var(--ink); } .rail-node.locked canvas { filter: grayscale(1) brightness(0.6); } /* dim the label with a VISIBLE colour, not a darkening filter (was near-black, invisible on the dark background) */ .rail-node.locked .rn-name { color: rgba(255,224,122, 0.5); } .rail-node.locked::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.45) 0 6px, rgba(0,0,0,.15) 6px 12px); } .rail-node .lock-badge { position: absolute; right: 3px; top: 3px; z-index: 2; } .rail-node .new-badge { position: absolute; left: -6px; top: -7px; z-index: 3; animation: bob 0.8s steps(2) infinite; } /* icon-ONLY tiles: no frame, no caption — just the pixel-art picture, compact, so 2–3 rows of them fit and the grid scales to more games */ .node { position: relative; width: 100%; max-width: 92px; min-height: 0; background: none; box-shadow: none; padding: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.08s steps(1); } .node:hover, .node:active { transform: translateY(-3px); } .node canvas, .node img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; } /* portrait: show a compact label under the game tile (like a level card) */ .node .node-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; max-width: 100%; font-size: 9px; letter-spacing: 0.4px; line-height: 1.1; text-align: center; color: var(--cyan-l); text-transform: uppercase; text-shadow: 0 0 6px rgba(255,176,32,.4); } .node .node-sub { display: none; } /* icon-only: state is shown on the picture itself (no frame) */ .node.locked { cursor: not-allowed; } .node.locked canvas, .node.locked img { filter: grayscale(1) brightness(0.6); } .node.locked::after { content: ""; position: absolute; inset: 4px; background: repeating-linear-gradient(45deg, rgba(0,0,0,.45) 0 6px, rgba(0,0,0,.15) 6px 12px); } .node.locked .lock-badge { position: absolute; right: 2px; top: 2px; z-index: 2; } /* available game: soft neon glow on the icon + gentle pulse, no boxy frame */ .node.hot canvas, .node.hot img { filter: drop-shadow(0 0 8px rgba(224,58,28, 0.7)); } .node.hot { animation: pulseHot 1.4s steps(2) infinite; } @keyframes pulseHot { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.22); } } .node .new-badge { position: absolute; left: -8px; top: -10px; z-index: 3; background: var(--pink); color: #fff; font-size: var(--fs-micro); letter-spacing: 1px; padding: 3px 6px; box-shadow: 0 0 0 2px var(--ink); animation: bob 0.8s steps(2) infinite; } /* AI assistant dock — shared by the hub and the terminal. Compact: fits within ~30% of the 400-tall stage, no overflow. */ .zoras-dock { flex: 0 0 auto; width: 100%; display: flex; align-items: flex-end; gap: var(--sp3); z-index: 3; padding: 0 var(--edge-r) 10px var(--edge); } /* лоббі (ВЕРТИКАЛЬНЕ): док Зори — ЗВЕРХУ, одразу під HUD (order:1). FLEX row: компактний портрет ліворуч + бокс праворуч. */ #lobby .zoras-dock, #btPandaHost .zoras-dock{ position: relative; order: 1; left: auto; right: auto; bottom: auto; width: 100%; flex: 0 0 auto; display: flex; flex-direction: row; align-items: stretch; gap: var(--sp2); padding: 2px var(--edge-r) 4px var(--edge); z-index: 5; } #lobby .zoras-frame, #btPandaHost .zoras-frame{ position: relative; flex: 0 0 auto; z-index: 6; align-self: flex-end; } #lobby .zoras-frame img, #btPandaHost .zoras-frame img, #lobby .zoras-frame video, #btPandaHost .zoras-frame video{ display: block; height: 128px; width: auto; max-width: 116px; object-fit: contain; object-position: bottom; } #lobby .zoras-box, #btPandaHost .zoras-box{ flex: 1 1 auto; min-width: 0; margin-left: 0; align-self: center; max-height: 128px; } /* idle: hide the box, keep the big portrait (tap it to bring Zoras back) */ #lobby .zoras-dock.idle, #btPandaHost .zoras-dock.idle{ pointer-events: none; } #lobby .zoras-dock.idle .zoras-box, #btPandaHost .zoras-dock.idle .zoras-box{ display: none; } #lobby .zoras-dock.idle .zoras-frame, #btPandaHost .zoras-dock.idle .zoras-frame{ pointer-events: auto; cursor: pointer; } /* Сержант Булочка — жива істота, а не голограма: ніякого сканлайн-серпанку й ніякої рамки. Ролик іде з альфа-каналом (VP9), тож фону за ним немає взагалі, і на екрані стоїть сам персонаж. Тінь під ним — drop-shadow по силуету, тому вона повторює контур, а не коробку. */ .zoras-frame { position: relative; flex: 0 0 auto; } .zoras-frame img, .zoras-frame video { display: block; height: 104px; width: auto; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 5px 9px rgba(0,0,0,.6)); } /* «говорить» — легке дихання силуету, синхронно з друком тексту */ .zoras-frame.talking img, .zoras-frame.talking video { animation: zTalk 1.1s ease-in-out infinite; } @keyframes zTalk { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.015); } } /* Хмарка. Це реально хмарка, а не панель інтерфейсу: вона належить персонажеві, тому має хвостик у його бік (див. css/base.css) і з'являється/зникає разом із ним. */ .zoras-box { position: relative; flex: 1 1 auto; min-height: 78px; max-height: 118px; overflow-y: auto; max-width: 1100px; background: rgba(7,10,8, 0.94); box-shadow: 0 0 0 2px var(--amber), 0 0 0 4px var(--ink), 0 6px 18px rgba(0,0,0,.55); padding: 11px 22px 14px 16px; font-size: var(--fs-md); line-height: 1.5; color: var(--sand-l); text-shadow: 1px 1px 0 rgba(0,0,0,.6); cursor: pointer; } .zoras-box .who { display: block; color: var(--amber); font-size: var(--fs-xs); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; text-shadow: 1px 1px 0 var(--ink); } /* tap-to-continue affordance (bubble is tappable; the ДАЛІ button is gone) */ .zoras-box::after { content: "▸"; position: absolute; right: 7px; bottom: 4px; z-index: 2; color: var(--yellow); font-size: 13px; text-shadow: 0 0 8px var(--orange); animation: bob 0.9s steps(2) infinite; pointer-events: none; } /* "ДАЛІ" button removed — the whole speech bubble is tappable to advance/skip. (kept hidden so old markup/JS that toggles it does nothing.) */ .dlg-next, .dlg-next.show { display: none !important; } /* pointing hand hint */ #hand { position: absolute; z-index: 50; width: 42px; height: 48px; pointer-events: none; display: none; filter: drop-shadow(0 0 8px rgba(230,190,110, 0.9)); animation: tapHint 1.05s steps(3) infinite; } #hand.show { display: block; } @keyframes tapHint { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, 12px); } } /* floating "+100" */ .float-pts { position: absolute; z-index: 60; pointer-events: none; font-size: 20px; letter-spacing: 2px; color: var(--green); text-shadow: 0 0 10px var(--green); animation: floatUp 1.2s ease-out forwards; } @keyframes floatUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-70px); opacity: 0; } } /* romance: floating heart gain/loss, centered over the terminal */ .float-pts.heart-fx { font-size: 34px; font-weight: 900; letter-spacing: 0; animation: heartFx 1.3s ease-out forwards; } .float-pts.heart-fx.gain { color: var(--pink); text-shadow: 0 0 16px var(--pink); } .float-pts.heart-fx.loss { color: #9aa392; text-shadow: 0 0 10px rgba(143,163,138,.6); } @keyframes heartFx { 0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; } 18% { transform: translate(-50%, -10px) scale(1.25); opacity: 1; } 35% { transform: translate(-50%, -14px) scale(1); opacity: 1; } 100% { transform: translate(-50%, -90px) scale(1); opacity: 0; } } /* toast */ #toast { position: fixed; left: 50%; top: 12%; transform: translate(-50%, -14px); z-index: 8000; padding: 10px 16px; font-size: 12px; letter-spacing: 1px; background: rgba(7,10,8, 0.95); color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow), 0 0 0 6px var(--ink); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; } #toast.show { opacity: 1; transform: translate(-50%, 0); } /* ===================================================================== PUZZLE HOST (iframe) ===================================================================== */ /* #puzzle lives OUTSIDE #app at the real viewport (not the scaled stage), so the mini-games get the full device size. Sized in vh/vw units (there is no --scale here) so the slim host bar stays proportional on any screen. */ #puzzle { position: fixed; inset: 0; z-index: 10000; background: #050806; } #puzzle.screen { display: none; } #puzzle.screen.active { display: block; } /* children are absolute; skip flex-centering */ /* slim "cartridge shell" bar; the game runs in the screen BELOW it */ #puzzle .puz-head { position: absolute; top: 0; left: 0; right: 0; height: max(44px, 7vh); z-index: 5; display: flex; align-items: center; justify-content: flex-start; gap: max(8px, 1.6vw); padding: 0 max(12px, 2vw) 0 max(12px, env(safe-area-inset-left, 0px) + 2vw); background: rgba(7,10,8, 0.96); border-bottom: 2px solid rgba(255,176,32, 0.25); } /* header buttons scale with the viewport (no stage transform out here) */ #puzzle .puz-head .px-btn { min-height: max(40px, 6vh); font-size: max(12px, 2.1vh); letter-spacing: 1.5px; padding: 0 max(12px, 1.4vw); } /* ONE exit, and it lives out here. This used to read "the embedded game provides its own back button, so the host bar hides its own". Only five of the thirteen games actually do: games/common/floramenta-skin.css hides #backBtn / #shellExit in the other eight, on the matching assumption that the HOST draws the exit. Both sides deferring meant neither drew one, and the only way out was the "← ЛОБІ" in the injected SYS bar — which is precisely the duplicated chrome that bar was removed for. So the host owns it. #puzBack sits outside the iframe, so it is in the same place, at the same size, for every game, and it cannot be covered by one. The games' own exits are hidden while embedded — see games/common/shell-chrome.css. */ #puzBack { display: inline-flex; } /* ---- живий статус зміни ---- Був `display:none` — заголовок нікому не був потрібен, бо кожна гра малювала власну шапку. Тепер тут висить статус ЄДИНОЇ гри: локація, рахунок і ланцюг. Це зняло три рядки з верхньої смуги всередині гри й віддало їх ігровому полю (плитка виросла з 65-80 px до 98-120 px). min-width:0 обов'язковий: без нього flex-елемент не дає собі зменшитись, і на вузькому телефоні кнопки поряд виїжджають за екран. */ #puzTitle { display: flex; align-items: center; gap: max(8px, 1.4vw); flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font-size: max(11px, 1.9vh); letter-spacing: 2px; } #puzTitle .pt-loc { overflow: hidden; text-overflow: ellipsis; color: var(--sand-l, #e6be6e); } #puzTitle .pt-score { color: var(--amber, #ffb020); font-weight: 700; } #puzTitle .pt-combo { padding: 2px 6px; font-weight: 700; color: #14100a; background: var(--amber-l, #ffe07a); } /* ---- the hint chip ---- Same ghost frame as its two neighbours so the bar reads as one unified strip, but keyed yellow: it is the only control here that SPENDS something, and the little tag says what it will cost before it is tapped — a number while the player has hints banked, "AD" when the next one comes from a rewarded ad. */ #puzHint { position: relative; margin-left: auto; } #puzHint .ph-tag { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; letter-spacing: .5px; color: #05070a; background: var(--green, #39ff6e); box-shadow: 0 0 0 2px var(--ink, #05070a); } #puzHint .ph-tag.ad { color: #fff; background: var(--pink, #e03a1c); } #puzHint[disabled] { opacity: .45; } /* dev-only auto-solve: hidden in production, shown when */ #puzDev { display: none; } body.dev #puzDev { display: inline-flex; } /* explicit height — an