/* ============================================================ КАББАФОН — Windows XP reimagined, modern edition ============================================================ */ :root { /* Core palette — XP Luna reinterpreted */ --xp-blue-900: #0a3d91; --xp-blue-800: #1551b5; --xp-blue-700: #2668d8; --xp-blue-600: #3f82ee; --xp-blue-400: #7eb5ff; --xp-blue-100: #dcebff; --xp-green-start: #3b8a2b; --xp-green-start-hover: #4da635; --xp-green-taskbar-1: #2b6823; --xp-green-taskbar-2: #55a645; --xp-orange: #f28e1c; --xp-red: #e04a3a; --xp-yellow: #f5c542; --xp-bliss-sky-1: #78b4ff; --xp-bliss-sky-2: #bcd9ff; --xp-bliss-hill-1: #5fa23a; --xp-bliss-hill-2: #7ec548; --xp-bliss-hill-3: #3b7d22; --ink-1: #0d1321; --ink-2: #1e293b; --ink-3: #475569; --ink-4: #94a3b8; --paper-1: #ffffff; --paper-2: #f7f9fc; --paper-3: #ece9d8; /* classic XP beige */ --win-border: #0054e3; --win-border-inactive: #7a96df; --win-title-grad-1: #0c49b8; --win-title-grad-2: #1863d8; --win-title-grad-3: #2680ee; --win-title-inactive-1: #6b8bd5; --win-title-inactive-2: #94aee4; --shadow-win: 0 20px 48px -12px rgba(8, 20, 58, 0.45), 0 4px 12px rgba(8, 20, 58, 0.2); --shadow-float: 0 8px 24px rgba(8, 20, 58, 0.25); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: 'Inter', -apple-system, system-ui, sans-serif; color: var(--ink-1); overflow: hidden; user-select: none; -webkit-font-smoothing: antialiased; } button { font-family: inherit; } /* ============================================================= DESKTOP BACKGROUND — Bliss wallpaper (default) + presets ============================================================= */ .desktop { position: fixed; inset: 0; overflow: hidden; background: url("../images/wallpaper.png") center/cover no-repeat, linear-gradient(180deg, #4a92ff 0%, #a6caff 55%, #6fa94a 100%); background-color: #4a92ff; } .desktop::before { content: ""; position: absolute; inset: 0; background: none; pointer-events: none; } .desktop::after { content: none; } /* Wallpaper presets — applied when [data-wallpaper] is set on . */ body[data-wallpaper="bliss"] .desktop { background: url("../images/wallpaper.png") center/cover no-repeat, linear-gradient(180deg, #4a92ff 0%, #a6caff 55%, #6fa94a 100%); background-color: #4a92ff; } body[data-wallpaper="sunset"] .desktop { background: radial-gradient(ellipse at 50% 78%, rgba(255,180,90,0.7) 0%, rgba(255,120,60,0) 60%), linear-gradient(180deg, #2b1e58 0%, #813a6b 30%, #d56a4a 60%, #f6b95a 85%, #fce28a 100%); background-color: #813a6b; } body[data-wallpaper="ocean"] .desktop { background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0) 50%), linear-gradient(180deg, #052e6b 0%, #0a4a99 40%, #1175c4 75%, #5cb1e7 100%); background-color: #0a4a99; } body[data-wallpaper="night"] .desktop { background: radial-gradient(1px 1px at 12% 24%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 38% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 62% 32%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 80% 18%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 22% 60%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 70% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 50%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 5% 80%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 50% 10%, #ffe7a3 50%, transparent 51%), linear-gradient(180deg, #04031a 0%, #0a0c33 50%, #1b1849 100%); background-color: #04031a; } body[data-wallpaper="winter"] .desktop { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%), radial-gradient(circle at 70% 65%, rgba(180,210,240,0.5) 0%, rgba(180,210,240,0) 55%), linear-gradient(180deg, #d8e9f3 0%, #b5d2e5 45%, #92b8d3 100%); background-color: #b5d2e5; } body[data-wallpaper="cabb"] .desktop { background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%), linear-gradient(135deg, #c1421a 0%, #d97a0c 35%, #f4b043 60%, #f5d670 100%); background-color: #d97a0c; } body[data-wallpaper="matrix"] .desktop { background: repeating-linear-gradient(90deg, rgba(0,255,80,0.05) 0 1px, transparent 1px 8px), repeating-linear-gradient(0deg, rgba(0,255,80,0.04) 0 1px, transparent 1px 6px), radial-gradient(ellipse at 50% 0%, #053818 0%, #021308 80%); background-color: #021308; } body[data-wallpaper="noise"] .desktop { background: repeating-linear-gradient(0deg, #1a1a1a 0 2px, #2c2c2c 2px 4px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), rgba(0,0,0,0.5) 80%); background-color: #1a1a1a; } body[data-wallpaper="cabb-secret"] .desktop { background: radial-gradient(ellipse at 50% 50%, rgba(40,0,0,0.6) 0%, rgba(0,0,0,0) 70%), repeating-linear-gradient(45deg, rgba(255,30,30,0.04) 0 4px, transparent 4px 14px), linear-gradient(180deg, #14060a 0%, #2b0810 100%); background-color: #14060a; } /* Image-based wallpapers — single rule. Body sets --wp-image-url and data-wallpaper-fit (cover|stretch|tile|center). applyWallpaper() in classicapps.jsx writes these. */ body[data-wallpaper^="cabbart-"] .desktop { background-image: var(--wp-image-url, none); background-color: #1a1a1a; } body[data-wallpaper^="cabbart-"][data-wallpaper-fit="cover"] .desktop { background-size: cover; background-position: center; background-repeat: no-repeat; } body[data-wallpaper^="cabbart-"][data-wallpaper-fit="stretch"] .desktop { background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } body[data-wallpaper^="cabbart-"][data-wallpaper-fit="center"] .desktop { background-size: auto; background-position: center; background-repeat: no-repeat; } body[data-wallpaper^="cabbart-"][data-wallpaper-fit="tile"] .desktop { background-size: 320px auto; background-position: top left; background-repeat: repeat; } /* ============================================================= THEMES — taskbar + window chrome accents Body sets data-theme=luna-blue|olive|silver|classic|high-contrast. Defaults below match Luna Blue. ============================================================= */ body[data-theme="olive"] .taskbar { background: linear-gradient(180deg,#7a8c4a 0%,#a3b569 30%,#5d6e35 100%) !important; } body[data-theme="olive"] .taskbar__start { background: linear-gradient(180deg,#5e8a3a 0%,#86b34d 60%,#3f6024 100%) !important; } body[data-theme="olive"] .win__titlebar { background: linear-gradient(180deg,#7a8c4a 0%,#a3b569 50%,#5d6e35 100%) !important; } body[data-theme="silver"] .taskbar { background: linear-gradient(180deg,#a0a8b8 0%,#cfd5e0 30%,#7a8595 100%) !important; } body[data-theme="silver"] .taskbar__start { background: linear-gradient(180deg,#7a8595 0%,#a0a8b8 60%,#5a6172 100%) !important; color: #1a1a1a !important; } body[data-theme="silver"] .win__titlebar { background: linear-gradient(180deg,#a0a8b8 0%,#cfd5e0 50%,#7a8595 100%) !important; color: #1a1a1a !important; } /* Royale (Luna Royale) — Media Center эстетика: чёрная панель + оранжевые акценты */ body[data-theme="royale"] .taskbar { background: linear-gradient(180deg,#1c1c1c 0%,#3a3a3a 30%,#0e0e0e 100%) !important; border-top: 1px solid #444 !important; } body[data-theme="royale"] .taskbar__start { background: linear-gradient(180deg,#c54900 0%,#ff7a1a 50%,#a03a00 100%) !important; color: #fff !important; } body[data-theme="royale"] .taskbar__app { background: linear-gradient(180deg,#2a2a2a,#0e0e0e) !important; color: #f4e4d0 !important; } body[data-theme="royale"] .taskbar__app.active { background: linear-gradient(180deg,#c54900,#7a2c00) !important; } body[data-theme="royale"] .win__titlebar { background: linear-gradient(180deg,#c54900 0%,#ff7a1a 50%,#a03a00 100%) !important; } body[data-theme="royale"] .win:not(.window--active) .win__titlebar { background: linear-gradient(180deg,#3a3a3a 0%,#5a5a5a 50%,#2a2a2a 100%) !important; color: #aaa !important; } body[data-theme="royale"] .start-menu__header { background: linear-gradient(180deg,#c54900,#7a2c00) !important; } body[data-theme="royale"] .xp-btn--accent { background: linear-gradient(180deg,#ff7a1a,#a03a00) !important; border-color: #5a1f00 !important; color: #fff !important; } body[data-theme="classic"] .taskbar { background: linear-gradient(180deg,#c0c0c0 0%,#bdbdbd 100%) !important; border-top: 1px solid #fff; } body[data-theme="classic"] .taskbar__start { background: #c0c0c0 !important; color: #000 !important; border: 2px outset #ddd !important; border-radius: 0 !important; } body[data-theme="classic"] .win__titlebar { background: linear-gradient(90deg,#0a246a 0%,#a6caf0 100%) !important; border-radius: 0 !important; } body[data-theme="classic"] .win { border-radius: 0 !important; } body[data-theme="high-contrast"] .desktop { background: #000 !important; } body[data-theme="high-contrast"] .taskbar, body[data-theme="high-contrast"] .taskbar__start, body[data-theme="high-contrast"] .win__titlebar { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; } body[data-theme="high-contrast"] .win { border: 1px solid #fff !important; } /* Font-size variable used by core text — shell.jsx wires --cabb-font-size. */ :root { --cabb-font-size: 13px; } /* ============================================================= SCREENSAVER OVERLAY — full-screen fade in over everything Triggered by classicapps.jsx after N minutes of idle. ============================================================= */ .screensaver { position: fixed; inset: 0; z-index: 999999; background: #000; cursor: none; overflow: hidden; animation: ssfade 800ms ease-out; } @keyframes ssfade { from { opacity: 0 } to { opacity: 1 } } .screensaver--pipes { background: repeating-linear-gradient(45deg,#0a3a0a 0 12px,#0e520e 12px 24px,#075207 24px 36px,#0a3a0a 36px 48px); } .screensaver--starfield { background: radial-gradient(1px 1px at 12% 24%, #fff, transparent 70%), radial-gradient(1.4px 1.4px at 38% 14%, #fff, transparent 70%), radial-gradient(1px 1px at 62% 32%, #fff, transparent 70%), radial-gradient(2px 2px at 80% 18%, #fff, transparent 70%), radial-gradient(1px 1px at 23% 67%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 70% 73%, #fff, transparent 70%), radial-gradient(1px 1px at 50% 90%, #fff, transparent 70%), #000; animation: ssfade 800ms ease-out, sszoom 6s linear infinite; } @keyframes sszoom { from { background-size: 100% } to { background-size: 130% } } .screensaver--bubbles { background: radial-gradient(circle at 30% 70%, rgba(110,170,240,0.5), transparent 30%), radial-gradient(circle at 70% 40%, rgba(110,240,210,0.45), transparent 28%), radial-gradient(circle at 50% 50%, rgba(255,255,160,0.35), transparent 26%), #001020; } .screensaver--mystify { background: conic-gradient(from 0deg at 50% 50%, #ff00aa, #00ffaa, #00aaff, #aa00ff, #ff00aa); filter: blur(40px) saturate(1.5); } .screensaver--marquee { display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; color: #00ff80; } .screensaver__text { font-size: 10vw; white-space: nowrap; animation: ssmarq 14s linear infinite; } @keyframes ssmarq { from { transform: translateX(100vw) } to { transform: translateX(-100%) } } .screensaver__hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 11px; font-family: Tahoma, sans-serif; letter-spacing: 1px; cursor: none; } /* ============================================================= DESKTOP ICONS ============================================================= */ .desktop-icons { position: absolute; inset: 0 0 40px 0; /* leave taskbar */ z-index: 0; overflow: hidden; } .desk-icon { position: absolute; width: 92px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; border-radius: 4px; border: 1px dashed transparent; transition: background 120ms, border-color 120ms; user-select: none; } .desk-icon:hover { background: rgba(40, 90, 200, 0.25); border-color: rgba(255,255,255,0.2); } .desk-icon.active { background: rgba(40, 90, 200, 0.45); border-color: rgba(255,255,255,0.35); } .desk-icon.selected { background: rgba(40, 90, 200, 0.35); border: 1px dashed rgba(255, 255, 255, 0.7); } .desk-icon.dragging { opacity: 0.6; cursor: grabbing; } .desk-icon__img { width: 46px; height: 46px; display: grid; place-items: center; filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.35)); pointer-events: none; } .desk-icon__label { font-size: 12px; color: #fff; text-align: center; line-height: 1.2; text-shadow: 1px 1px 0 rgba(0,0,0,0.9), -1px 1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.8); padding: 1px 4px; border-radius: 2px; max-width: 84px; /* Кириллица не должна разрываться посреди слова. break-word нестандартный и для русских слов даёт «Калькулято / р». Заменяем на нормальный wrap + обрезку до 2 строк с эллипсисом (как классический Win XP). */ word-break: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .desk-icon.active .desk-icon__label { background: var(--xp-blue-700); text-shadow: none; } .desk-icon.selected .desk-icon__label { background: var(--xp-blue-700); text-shadow: none; } .desk-icon__rename { width: 100%; display: flex; justify-content: center; } .desk-icon__rename input { width: 84px; font-size: 11px; font-family: 'Tahoma', 'Inter', sans-serif; background: #fff; color: var(--ink-1); border: 1px solid var(--xp-blue-700); outline: none; text-align: center; padding: 1px 2px; border-radius: 1px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } /* Rubber-band selection rectangle */ .rubber-band { position: absolute; background: rgba(64, 128, 255, 0.22); border: 1px solid #4a90ff; pointer-events: none; z-index: 3; } /* ============================================================= CONTEXT MENU — XP-style ============================================================= */ .context-menu { position: fixed; z-index: 5000; min-width: 180px; background: linear-gradient(180deg, #fdfdfd 0%, #ece9d8 100%); border: 1px solid #a0a0a0; padding: 2px; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.7); font-family: 'Tahoma', 'Inter', sans-serif; user-select: none; } .context-menu__item { height: 22px; padding: 2px 28px 2px 28px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); cursor: pointer; position: relative; border-radius: 2px; } .context-menu__item:hover:not(.disabled) { background: linear-gradient(180deg, #3f82ee, #1e5bc6); color: white; } .context-menu__item.disabled { color: #94a3b8; cursor: default; } .context-menu__icon { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; } .context-menu__icon svg { width: 16px; height: 16px; } .ctx-icon-16 { width: 16px; height: 16px; display: grid; place-items: center; } .ctx-icon-16 svg { width: 16px; height: 16px; } .context-menu__label { flex: 1; white-space: nowrap; } .context-menu__separator { border-top: 1px solid #d0d0d0; margin: 3px 2px; } /* Submenu chevron (▶) and flyout */ .context-menu__chev { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 9px; color: #4a4a4a; } .context-menu__item:hover:not(.disabled) .context-menu__chev, .context-menu__item.is-sub-open .context-menu__chev { color: #fff; } .context-menu__item.is-sub-open:not(.disabled) { background: linear-gradient(180deg, #3f82ee, #1e5bc6); color: white; } .context-menu--sub { position: absolute; z-index: 5001; /* Shift slightly up so the first sub-item aligns with the parent. */ margin-top: -3px; } /* ============================================================= EVENT WIDGET — bottom-right XP-style floating gadget (Luna title bar + beige body + sunken LCD display) ============================================================= */ /* ============================================================= EVENT WIDGET — XP Luna "Sidebar Gadget" style, draggable ============================================================= */ .event-widget { position: absolute; right: 18px; bottom: 50px; /* z-index: 2 — над иконками рабочего стола (z=0), но ниже окон (z=1+). Окна перекрывают виджет если открыты — это правильное поведение XP. */ z-index: 2; width: 268px; font-family: Tahoma, 'Trebuchet MS', 'Inter', sans-serif; color: #000; background: #ece9d8; border: 1px solid #003cb3; border-top: none; border-radius: 8px 8px 3px 3px; box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset, 0 10px 26px rgba(6,24,80,0.50), 0 2px 6px rgba(0,0,0,0.22); overflow: hidden; user-select: none; } .event-widget.is-dragged { bottom: auto; right: auto; } .event-widget__titlebar { height: 28px; padding: 0 4px 0 6px; display: flex; align-items: center; gap: 6px; color: #fff; background: linear-gradient(180deg, #0058e6 0%, #0553d6 3%, #0a5ee0 6%, #1368e8 28%, #2684f0 55%, #1f6ed0 90%, #1357b8 100%); position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.25), inset 1px 0 0 rgba(255,255,255,0.3), inset -1px 0 0 rgba(0,0,0,0.15); font-family: 'Trebuchet MS', Tahoma, sans-serif; cursor: grab; border-radius: 7px 7px 0 0; } .event-widget__titlebar:active { cursor: grabbing; } .event-widget__titlebar::before { content: ""; position: absolute; top: 1px; left: 2px; right: 2px; height: 10px; background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 100%); pointer-events: none; border-radius: 6px 6px 0 0; } .event-widget__tb-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3)); } .event-widget.is-running .event-widget__tb-icon { animation: evwXpBlink 1.4s ease-in-out infinite; } @keyframes evwXpBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .event-widget__tb-title { font-size: 12px; font-weight: 700; text-shadow: 1px 1px 0 rgba(0,0,0,0.38); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-widget__tb-badge { font-family: Tahoma, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 1px 6px 0; border-radius: 2px; border: 1px solid rgba(0,0,0,0.25); background: linear-gradient(180deg, #f5c542 0%, #c88b13 100%); color: #3a2400; text-shadow: 0 1px 0 rgba(255,255,255,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); line-height: 14px; } .event-widget.is-running .event-widget__tb-badge { background: linear-gradient(180deg, #ff6154 0%, #a81a0c 100%); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.3); } /* Title-bar window-controls (decorative, reproduce XP chrome) */ .event-widget__tb-controls { display: flex; gap: 2px; margin-left: 2px; } .event-widget__tb-ctl { width: 19px; height: 17px; display: flex; align-items: center; justify-content: center; font-family: 'Marlett', 'Tahoma', sans-serif; font-size: 10px; font-weight: 700; color: #002a80; background: linear-gradient(180deg, #eaf2ff 0%, #b9d6fb 50%, #a3c4ef 100%); border: 1px solid #003cb3; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.1); line-height: 15px; } .event-widget__tb-ctl--close { color: #fff; background: linear-gradient(180deg, #f5a19d 0%, #dc4940 48%, #b01c16 100%); border-color: #6a0e0a; } /* "Chrome" = sidebar + body together, mimicking an XP Sidebar gadget */ .event-widget__chrome { display: flex; background: linear-gradient(180deg, #f9f8f1 0%, #ebe7d5 100%); border-top: 1px solid #fff; border-bottom: 1px solid #aaa294; } .event-widget__sidebar { width: 34px; flex-shrink: 0; background: linear-gradient(180deg, #245edb 0%, #1e4fbf 40%, #173d96 100%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 0 6px; border-right: 1px solid #0a3070; box-shadow: inset -2px 0 4px rgba(0,0,0,0.25), inset 2px 0 0 rgba(255,255,255,0.12); font-family: 'Trebuchet MS', Tahoma, sans-serif; } .event-widget__sb-label { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); text-shadow: 0 1px 0 rgba(0,0,0,0.5); line-height: 1.2; } .event-widget__sb-logo { font-family: 'Impact', 'Arial Black', sans-serif; font-size: 26px; font-weight: 900; color: #f5c542; text-shadow: 0 1px 0 #8a5a00, 0 0 6px rgba(255,200,60,0.5); line-height: 1; margin-bottom: 2px; } .event-widget__body { flex: 1; padding: 8px 10px 10px; min-width: 0; } .event-widget__panel-title { display: flex; align-items: center; gap: 6px; font-family: Tahoma, sans-serif; font-size: 11px; font-weight: 700; color: #0a3070; margin: 0 0 6px; padding-bottom: 5px; border-bottom: 1px solid #c8c1ab; text-shadow: 0 1px 0 rgba(255,255,255,0.6); } .event-widget__led { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #aaa 0%, #666 60%, #333 100%); box-shadow: inset 0 1px 1px rgba(0,0,0,0.4); flex-shrink: 0; } .event-widget__led.on { background: radial-gradient(circle at 30% 30%, #aaff78 0%, #38b819 55%, #1a7009 100%); box-shadow: 0 0 6px rgba(80,220,50,0.85), inset 0 1px 1px rgba(255,255,255,0.4); animation: evwLedPulse 1.6s ease-in-out infinite; } .event-widget__led.sched { background: radial-gradient(circle at 30% 30%, #ffe278 0%, #f29a18 55%, #a85c04 100%); box-shadow: 0 0 6px rgba(255,180,40,0.85), inset 0 1px 1px rgba(255,255,255,0.4); animation: evwLedPulse 2.4s ease-in-out infinite; } /* Countdown LCD = тот же LCD но с янтарным оттенком вместо синего */ .event-widget__lcd--countdown { background: linear-gradient(180deg, #2a1a08 0%, #1f1305 100%); color: #ffd078; } .event-widget__lcd--countdown .event-widget__lcd-num { color: #fff2dc; text-shadow: 0 0 10px rgba(255,180,40,0.75), 0 0 2px rgba(255,255,255,0.95); } .event-widget__lcd--countdown .event-widget__lcd-lbl { color: #f3b865; text-shadow: 0 0 6px rgba(220,140,40,0.6); } .event-widget__lcd--countdown .event-widget__lcd-clock { color: #ffe1a8; text-shadow: 0 0 6px rgba(220,140,40,0.6); } @keyframes evwLedPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } /* Sunken "LCD" display — chiseled XP inset */ .event-widget__lcd { position: relative; background: linear-gradient(180deg, #0b1a3a 0%, #0a1027 100%); border: 1px solid; border-color: #606060 #dfdfdf #dfdfdf #606060; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.7), inset -1px -1px 0 rgba(0,0,0,0.3), 0 1px 0 #fff; border-radius: 2px; padding: 10px 10px 8px; color: #a9d2ff; text-align: center; font-family: 'JetBrains Mono', 'Consolas', 'Lucida Console', monospace; overflow: hidden; } .event-widget__lcd-days { display: flex; align-items: baseline; gap: 6px; justify-content: center; position: relative; z-index: 2; } .event-widget__lcd-num { font-size: 50px; font-weight: 700; line-height: 1; color: #eaf4ff; text-shadow: 0 0 10px rgba(110,180,255,0.75), 0 0 2px rgba(255,255,255,0.95); font-variant-numeric: tabular-nums; letter-spacing: 2px; } .event-widget__lcd-lbl { font-family: Tahoma, sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #7fb0ee; text-shadow: 0 0 6px rgba(80,140,220,0.6); } .event-widget__lcd-clock { margin-top: 4px; font-size: 18px; letter-spacing: 2px; color: #bcdbff; text-shadow: 0 0 6px rgba(110,180,255,0.6); font-variant-numeric: tabular-nums; position: relative; z-index: 2; } .event-widget__lcd-sep { animation: evwXpBlinkSep 1s step-end infinite; opacity: 0.9; } @keyframes evwXpBlinkSep { 50% { opacity: 0.3; } } .event-widget__lcd-idle { padding: 10px 4px 6px; font-family: 'Lucida Console', 'Consolas', monospace; font-size: 13px; color: #ffcb6b; text-align: center; text-shadow: 0 0 8px rgba(255,180,0,0.55); letter-spacing: 2px; position: relative; z-index: 2; } /* Subtle CRT-like horizontal scanlines over the LCD */ .event-widget__lcd-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px ); pointer-events: none; z-index: 1; } .event-widget__lcd-glare { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 100%); pointer-events: none; z-index: 1; } /* Key/value "property rows" — echoes XP info panes */ .event-widget__rows { margin-top: 8px; padding: 6px 8px; background: linear-gradient(180deg, #fff 0%, #f3f0e1 100%); border: 1px solid #c5bda4; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75); } .event-widget__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; line-height: 1.45; } .event-widget__row + .event-widget__row { border-top: 1px dotted #c5bda4; padding-top: 3px; margin-top: 3px; } .event-widget__row-k { color: #0a3070; font-weight: 700; flex-shrink: 0; } .event-widget__row-v { color: #333; text-align: right; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .event-widget__idle-sub { margin-top: 8px; font-family: Tahoma, sans-serif; font-size: 11px; line-height: 1.45; color: #454; background: #fff8cc; border: 1px solid #d8c15d; padding: 6px 8px; border-radius: 2px; } .event-widget__hint { margin-top: 10px; font-family: Tahoma, sans-serif; font-size: 11px; color: #555; font-style: italic; text-align: center; padding-top: 8px; border-top: 1px dotted #b5b0a0; } /* XP 3D buttons */ .event-widget__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid #b5b0a0; } .event-widget__btn { flex: 1; min-width: 80px; font-family: Tahoma, 'Trebuchet MS', sans-serif; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 3px; border: 1px solid #003c74; cursor: pointer; color: #000; background: linear-gradient(180deg, #fdfdfd 0%, #eceae0 47%, #d6d3c2 55%, #eeeadb 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 0 rgba(0,0,0,0.15); transition: filter 100ms; } .event-widget__btn:hover:not(:disabled) { border-color: #0066cc; filter: brightness(1.03); } .event-widget__btn:active:not(:disabled) { background: linear-gradient(180deg, #c4cbd8 0%, #e8ecf1 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,0.25); } .event-widget__btn:disabled { opacity: 0.55; cursor: wait; } .event-widget__btn:focus { outline: 1px dotted #000; outline-offset: -4px; } .event-widget__btn--start { color: #fff; border-color: #2a5f11; background: linear-gradient(180deg, #a0d472 0%, #70ad3c 40%, #4d8a1f 85%, #3f7c16 100%); text-shadow: 0 1px 0 rgba(0,0,0,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 0 rgba(0,0,0,0.2); font-weight: 800; letter-spacing: 0.5px; } .event-widget__btn--start:hover:not(:disabled) { filter: brightness(1.08); border-color: #18420a; } .event-widget__btn--start:active:not(:disabled) { background: linear-gradient(180deg, #4d8a1f 0%, #70ad3c 60%, #a0d472 100%); } .event-widget__btn--danger { color: #fff; border-color: #7a1a10; background: linear-gradient(180deg, #ed8272 0%, #d14628 45%, #a8230f 100%); text-shadow: 0 1px 0 rgba(0,0,0,0.3); } .event-widget__btn--danger:hover:not(:disabled) { filter: brightness(1.08); } /* Bottom status bar, echoing a Win9x/XP app's chrome */ .event-widget__statusbar { display: flex; height: 18px; background: linear-gradient(180deg, #f3f0e1 0%, #ddd7c2 100%); border-top: 1px solid #fff; font-family: Tahoma, sans-serif; font-size: 10px; color: #555; } .event-widget__sb-pane { padding: 2px 8px; border-right: 1px solid #aaa294; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8), inset -1px 0 0 #aaa294; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-widget__sb-pane--grip { flex: 0 0 18px; border-right: none; background: linear-gradient(135deg, transparent 50%, #aaa294 50%, #aaa294 55%, transparent 55%) 100% 100% / 5px 5px no-repeat, linear-gradient(135deg, transparent 50%, #aaa294 50%, #aaa294 55%, transparent 55%) 100% 100% / 9px 9px no-repeat, linear-gradient(180deg, #f3f0e1 0%, #ddd7c2 100%); cursor: grab; } .event-widget.is-dragged .event-widget__sb-pane--grip { cursor: grabbing; } /* ============================================================= WINDOWS — XP Luna-inspired, modernized ============================================================= */ .win { position: absolute; min-width: 320px; min-height: 200px; background: var(--paper-3); border: 1px solid #003cb3; border-top: none; border-radius: 8px 8px 2px 2px; box-shadow: var(--shadow-win); display: flex; flex-direction: column; overflow: hidden; outline: none; } .win.inactive { box-shadow: 0 10px 28px rgba(8,20,58,0.35); border-color: #7a96df; } .win__titlebar { height: 30px; background: linear-gradient(180deg, #0058e6 0%, #0553d6 3%, #0a5ee0 6%, #1368e8 40%, #2684f0 88%, #1f6ed0 96%, #1357b8 100%); display: flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; cursor: grab; border-top-left-radius: 8px; border-top-right-radius: 8px; color: #fff; position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.2); font-family: 'Trebuchet MS', 'Inter', sans-serif; } .win__titlebar::before { /* gloss highlight */ content: ""; position: absolute; top: 1px; left: 3px; right: 3px; height: 10px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 100%); pointer-events: none; } .win.inactive .win__titlebar { background: linear-gradient(180deg, #7190dd 0%, #82a2e4 30%, #94b4ea 100%); } .win__icon { width: 18px; height: 18px; flex-shrink: 0; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3)); } .win__icon svg { width: 18px; height: 18px; display: block; } .win__title { font-size: 13px; font-weight: 700; text-shadow: 1px 1px 0 rgba(0,0,0,0.35); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .win__controls { display: flex; gap: 2px; } .win__ctrl { width: 22px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.7); border-radius: 3px; background: linear-gradient(180deg, #5ea3f0 0%, #2876e0 45%, #1c5bc5 100%); color: white; cursor: pointer; font-size: 11px; padding: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 0 rgba(0,0,0,0.15); transition: filter 90ms; } .win__ctrl:hover { background: linear-gradient(180deg, #6fb0f6, #2b6bd3); } .win__ctrl--close { background: linear-gradient(180deg, #ed8272 0%, #d14628 45%, #a8230f 100%); border-color: rgba(255,255,255,0.7); } .win__ctrl--close:hover { background: linear-gradient(180deg, #f28670, #d8472d); } .win__menubar { background: linear-gradient(180deg, #f5f4ea 0%, #ece9d8 100%); border-bottom: 1px solid #acacac; padding: 2px 6px; display: flex; gap: 2px; font-size: 12px; color: var(--ink-2); position: relative; z-index: 5; } .win__menubar button, .win__menu-top { background: none; border: 1px solid transparent; padding: 2px 8px; border-radius: 2px; cursor: pointer; font-size: 12px; color: var(--ink-2); font-family: inherit; user-select: none; } .win__menu-top:hover, .win__menu-top.open { background: var(--xp-blue-100); border-color: var(--xp-blue-600); } .win__menu-top:disabled { color: #999; cursor: default; } .win__menu-top:disabled:hover { background: none; border-color: transparent; } .win__menu-wrap { position: relative; } .win__menu-dropdown { position: absolute; top: 100%; left: 0; min-width: 220px; background: #fdfdfd; border: 1px solid #6a6a4a; box-shadow: 3px 3px 8px rgba(0,0,0,0.25); padding: 2px; z-index: 10; font-size: 12px; } .win__menu-item { display: grid; grid-template-columns: 18px 1fr auto 14px; align-items: center; gap: 6px; padding: 3px 6px; cursor: pointer; position: relative; color: #1a1a1a; } .win__menu-item.disabled { color: #999; cursor: default; } .win__menu-item.hover:not(.disabled) { background: #316ac5; color: #fff; } .win__menu-item.hover.disabled { background: none; } .win__menu-check { font-size: 11px; text-align: center; line-height: 1; } .win__menu-label { white-space: nowrap; } .win__menu-accel { color: #888; font-size: 11px; padding-left: 16px; } .win__menu-item.hover:not(.disabled) .win__menu-accel { color: #d0e0ff; } .win__menu-arrow { font-size: 9px; } .win__menu-sep { height: 1px; background: #b8b4a4; margin: 3px 4px; } .win__menu-submenu { position: absolute; top: -3px; left: 100%; margin-left: 1px; } .win__body { flex: 1; background: var(--paper-1); overflow: auto; position: relative; } .win__statusbar { border-top: 1px solid #acacac; background: linear-gradient(180deg, #f5f4ea 0%, #ece9d8 100%); height: 22px; display: flex; align-items: center; padding: 0 8px; font-size: 11px; color: var(--ink-3); gap: 10px; } .win__statusbar .seg { height: 14px; border-left: 1px solid #aaa; padding-left: 8px; display: inline-flex; align-items: center; } .win__statusbar .seg:first-child { border-left: none; padding-left: 0; } /* ============================================================= Window resize handles ============================================================= */ .win__resize { position: absolute; z-index: 5; user-select: none; background: transparent; } .win__resize--n { top: 0; left: 6px; right: 6px; height: 4px; cursor: n-resize; } .win__resize--s { bottom: 0; left: 6px; right: 6px; height: 4px; cursor: s-resize; } .win__resize--e { top: 6px; right: 0; bottom: 6px; width: 4px; cursor: e-resize; } .win__resize--w { top: 6px; left: 0; bottom: 6px; width: 4px; cursor: w-resize; } .win__resize--ne { top: 0; right: 0; width: 10px; height: 10px; cursor: ne-resize; } .win__resize--nw { top: 0; left: 0; width: 10px; height: 10px; cursor: nw-resize; } .win__resize--se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: se-resize; } .win__resize--sw { bottom: 0; left: 0; width: 10px; height: 10px; cursor: sw-resize; } /* ============================================================= TASKBAR ============================================================= */ .taskbar { position: fixed; bottom: 0; left: 0; right: 0; height: 40px; z-index: 1000; display: flex; align-items: stretch; background: linear-gradient(180deg, #245edc 0%, #2d76e5 3%, #1451c6 12%, #1e63d0 40%, #2069d4 80%, #3981e5 100%); border-top: 1px solid #0a2d77; box-shadow: 0 -1px 0 rgba(255,255,255,0.5) inset, 0 2px 12px rgba(0,0,0,0.4); } .taskbar__start { position: relative; background: linear-gradient(180deg, #56a832 0%, #4a9528 12%, #3b8a22 50%, #4a9a2a 100%); border-right: 1px solid #2a5e18; padding: 0 24px 0 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; border-top-right-radius: 18px; border-bottom-right-radius: 18px; color: white; font-weight: 700; font-style: italic; font-size: 15px; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); min-width: 110px; transition: filter 120ms; } .taskbar__start::before { content: ""; position: absolute; top: 1px; left: 3px; right: 3px; height: 14px; border-radius: 16px 16px 0 0; background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 100%); } .taskbar__start:hover { filter: brightness(1.08); } .taskbar__start.active { filter: brightness(0.88); } .taskbar__start-logo { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0%, #f0f0f0 40%, #a0a0a0 100%); display: grid; place-items: center; font-size: 13px; color: var(--xp-blue-800); font-weight: 900; font-style: normal; box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2); } .taskbar__apps { flex: 1; display: flex; gap: 3px; padding: 3px 6px; overflow-x: auto; } .taskbar__app { min-width: 160px; max-width: 200px; height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 6px; background: linear-gradient(180deg, #3d83ec 0%, #1e5bc6 100%); border: 1px solid #0d3a99; border-radius: 3px; color: white; font-size: 12px; cursor: pointer; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 120ms; } .taskbar__app:hover { background: linear-gradient(180deg, #5094f0, #2d6ad5); } .taskbar__app.active { background: linear-gradient(180deg, #0c3d97 0%, #1e56b8 100%); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4); } .taskbar__app.minimized { opacity: 0.8; } .taskbar__app-name { overflow: hidden; text-overflow: ellipsis; flex: 1; } .taskbar__app svg { width: 16px; height: 16px; display: block; } .taskbar__tray { background: linear-gradient(180deg, #1a4ec0 0%, #1153b8 50%, #1858c1 100%); border-left: 1px solid #0a2d77; display: flex; align-items: center; padding: 0 10px; gap: 10px; color: white; font-size: 12px; box-shadow: inset 1px 0 0 rgba(255,255,255,0.2); } .taskbar__tray-icon { width: 18px; height: 18px; display: grid; place-items: center; opacity: 0.9; cursor: pointer; } .taskbar__tray-icon:hover { opacity: 1; } .taskbar__tray-clock { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding-left: 6px; border-left: 1px solid rgba(255,255,255,0.3); cursor: default; } .taskbar__tray-clock .time { font-weight: 600; font-size: 12px; } .taskbar__tray-clock .date { font-size: 10px; opacity: 0.9; } /* ============================================================= START MENU ============================================================= */ .start-menu { position: fixed; left: 0; bottom: 40px; width: 400px; max-height: calc(100vh - 50px); background: linear-gradient(180deg, #1e66d0 0%, #2b74d8 100%); border: 1px solid #0a2d77; border-radius: 8px 8px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,0.35); color: #fff; z-index: 999; overflow: hidden; display: flex; flex-direction: column; animation: start-menu-in 180ms ease-out; } @keyframes start-menu-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .start-menu__header { background: linear-gradient(180deg, #1051b8 0%, #1761d0 100%); padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #0a3d9a; } .start-menu__avatar { width: 48px; height: 48px; border-radius: 6px; background: linear-gradient(135deg, #f28e1c, #c76a0c); display: grid; place-items: center; color: white; font-weight: 800; font-size: 22px; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .start-menu__user { font-size: 18px; font-weight: 700; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); } .start-menu__sub { font-size: 11px; opacity: 0.8; } .start-menu__body { background: linear-gradient(180deg, #fbfbfb 0%, #e8e6d8 100%); color: var(--ink-1); display: grid; grid-template-columns: 1fr 1fr; min-height: 320px; flex: 1 1 auto; min-height: 0; /* allow flex children to shrink */ overflow: hidden; } .start-menu__col { padding: 8px 6px; overflow-y: auto; /* Slim XP-ish scrollbar */ scrollbar-width: thin; scrollbar-color: #8aa3c2 transparent; } .start-menu__col::-webkit-scrollbar { width: 8px; } .start-menu__col::-webkit-scrollbar-thumb { background: #8aa3c2; border-radius: 4px; } .start-menu__col::-webkit-scrollbar-track { background: transparent; } .start-menu__col--right { background: #d3e3fb; border-left: 1px solid #b7cdf0; } .start-menu__item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 3px; cursor: pointer; font-size: 13px; color: var(--ink-1); } .start-menu__item:hover { background: linear-gradient(180deg, #3f82ee, #1e5bc6); color: white; } .start-menu__item svg, .start-menu__item .emoji-icon { width: 28px; height: 28px; flex-shrink: 0; } .start-menu__item .muted { font-size: 11px; opacity: 0.7; } .start-menu__divider { margin: 4px 10px; border-top: 1px solid #c8c8b8; } .start-menu__footer { background: linear-gradient(180deg, #2574da 0%, #1153b8 100%); padding: 6px 10px; display: flex; justify-content: flex-end; gap: 10px; } .start-menu__footer button { background: none; border: none; color: white; font-size: 12px; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 8px; border-radius: 3px; } .start-menu__footer button:hover { background: rgba(255,255,255,0.15); } /* ============================================================= COMMON UI INSIDE WINDOWS ============================================================= */ /* XP-style button */ .xp-btn { background: linear-gradient(180deg, #fdfdfd 0%, #dfe4ed 45%, #c4cbd8 55%, #e8ecf1 100%); border: 1px solid #5f7aa8; border-radius: 4px; padding: 5px 14px; font-size: 12px; color: var(--ink-1); cursor: pointer; font-weight: 500; min-height: 26px; transition: filter 100ms; } .xp-btn:hover { filter: brightness(1.03); border-color: var(--xp-blue-600); } .xp-btn:active { background: linear-gradient(180deg, #c4cbd8, #e8ecf1); } .xp-btn:focus { outline: 1px dotted var(--ink-3); outline-offset: -3px; } .xp-btn--primary { background: linear-gradient(180deg, #6fb0f6 0%, #2d76e5 50%, #1e5bc6 100%); color: white; border-color: #0a3d99; font-weight: 600; text-shadow: 0 1px 0 rgba(0,0,0,0.2); } .xp-btn--primary:hover { filter: brightness(1.08); } .xp-btn--accent { background: linear-gradient(180deg, #f4b043 0%, #d97a0c 50%, #b96104 100%); color: white; border-color: #8f4700; font-weight: 600; text-shadow: 0 1px 0 rgba(0,0,0,0.25); } .xp-btn--danger { background: linear-gradient(180deg, #f07868 0%, #c63b22 50%, #9e2810 100%); color: white; border-color: #7c1d08; } .xp-btn--success { background: linear-gradient(180deg, #78d14d 0%, #3b8a2b 50%, #2a6820 100%); color: white; border-color: #24541b; } /* XP-style input */ .xp-input { border: 1px solid #7f9db9; background: white; padding: 4px 8px; font-size: 12px; font-family: inherit; border-radius: 2px; color: var(--ink-1); min-height: 24px; } .xp-input:focus { outline: 1px solid var(--xp-blue-600); border-color: var(--xp-blue-600); } .xp-select { border: 1px solid #7f9db9; background: white; padding: 4px 8px; font-size: 12px; font-family: inherit; border-radius: 2px; color: var(--ink-1); min-height: 24px; } /* ============================================================= HOME — "Об ивенте" window ============================================================= */ .home { padding: 0; display: grid; grid-template-columns: 1.1fr 1fr; height: 100%; min-height: 520px; } .home__hero { background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.25), transparent 60%), linear-gradient(160deg, #1152c9 0%, #0a3a94 60%, #082a6c 100%); color: white; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .home__hero::before { content: ""; position: absolute; top: -40px; right: -40px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(242,142,28,0.35), transparent 70%); filter: blur(20px); } .home__kicker { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; margin-bottom: 8px; } .home__title { font-family: 'Geist', 'Inter', sans-serif; font-size: 64px; line-height: 0.9; font-weight: 800; letter-spacing: -0.03em; margin: 0; } .home__title em { font-style: normal; color: var(--xp-yellow); } .home__lede { font-size: 16px; line-height: 1.55; opacity: 0.9; margin-top: 20px; max-width: 440px; } .home__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; } .home__stat { border-left: 2px solid var(--xp-yellow); padding-left: 12px; } .home__stat-val { font-size: 28px; font-weight: 800; line-height: 1; font-family: 'Geist', sans-serif; } .home__stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-top: 4px; } .home__panel { padding: 28px; display: flex; flex-direction: column; gap: 18px; background: var(--paper-2); } .home__panel h3 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); } .home__rules { background: white; border: 1px solid #d0d7e2; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .home__rule { display: flex; gap: 12px; font-size: 13px; line-height: 1.5; align-items: flex-start; color: var(--ink-2); } .home__rule-num { flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; background: var(--xp-blue-700); color: white; font-weight: 700; border-radius: 4px; font-size: 12px; } .home__cta { display: flex; gap: 10px; } /* ============================================================= GAMES — file-explorer listview ============================================================= */ .explorer { display: grid; grid-template-columns: 200px 1fr; height: 100%; min-height: 440px; } .explorer__side { background: linear-gradient(180deg, #c5dcfa 0%, #a9c6f2 100%); border-right: 1px solid #89a7d6; padding: 10px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; } .explorer__side h4 { margin: 8px 6px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--xp-blue-900); font-weight: 700; } .explorer__side-item { padding: 4px 8px; border-radius: 3px; cursor: pointer; color: var(--xp-blue-900); display: flex; align-items: center; gap: 6px; } .explorer__side-item.active, .explorer__side-item:hover { background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4)); font-weight: 600; } .explorer__main { display: flex; flex-direction: column; background: white; } .explorer__toolbar { padding: 8px 10px; border-bottom: 1px solid #d7dbe3; display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, #fbfcfe, #e8edf5); flex-wrap: wrap; } .explorer__chips { display: flex; gap: 4px; } .chip { padding: 4px 10px; background: white; border: 1px solid #b8c3d4; border-radius: 3px; font-size: 12px; cursor: pointer; color: var(--ink-2); } .chip.active { background: linear-gradient(180deg, #3f82ee, #1e5bc6); color: white; border-color: #0a3d99; font-weight: 600; } .games-table { flex: 1; overflow: auto; font-size: 13px; } .games-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .games-table thead th { position: sticky; top: 0; background: linear-gradient(180deg, #fbfbfb, #dde3ed); border: 1px solid #c6cedd; border-top: none; padding: 6px 10px; text-align: left; font-weight: 600; color: var(--ink-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; z-index: 1; } .games-table tbody td { padding: 8px 10px; border-bottom: 1px solid #eef0f4; vertical-align: middle; } .games-table tbody tr:hover { background: #f4f7ff; } .games-table tbody tr.selected { background: var(--xp-blue-700); color: white; } .games-table tbody tr.selected td { color: white; } .game-name { display: flex; align-items: center; gap: 8px; } .game-name__icon { width: 24px; height: 24px; border-radius: 4px; background: linear-gradient(135deg, #4a8bf0, #1e5bc6); display: grid; place-items: center; color: white; font-size: 11px; font-weight: 700; flex-shrink: 0; } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; border-radius: 10px; font-weight: 600; border: 1px solid transparent; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge--done { background: #e3f5d9; color: #2d7a1a; border-color: #9dd07e; } .badge--progress { background: #fff5d4; color: #8a5a0a; border-color: #f0cf77; } .badge--drop { background: #ffe1dc; color: #a42a19; border-color: #f0a092; } .badge--new { background: #e2ecff; color: #1852b8; border-color: #a3bff3; } .badge--reroll { background: #ece0ff; color: #5a2db8; border-color: #c3a5f0; } .diff { display: inline-flex; gap: 2px; align-items: center; } .diff span { width: 8px; height: 12px; border-radius: 1px; background: #d6d9e0; } .diff span.on { background: linear-gradient(180deg, #f5c542, #e07410); } .diff.hard span.on { background: linear-gradient(180deg, #f07868, #c02814); } /* ============================================================= RULES — WordPad vibe ============================================================= */ .rules-doc { padding: 0; display: flex; flex-direction: column; height: 100%; } /* Текст правил и тело документа — полностью выделяемы (Ctrl+A / Ctrl+C). body { user-select: none } перебиваем через !important. */ .rules-doc__page, .rules-doc__page * { user-select: text !important; -webkit-user-select: text !important; cursor: text; } .rules-doc__ribbon, .rules-doc__ribbon * { user-select: none !important; cursor: default; } .rules-doc__ribbon { padding: 6px 10px; background: linear-gradient(180deg, #f5f4ea 0%, #ece9d8 100%); border-bottom: 1px solid #acacac; display: flex; gap: 14px; font-size: 11px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; } .rules-doc__ribbon span { display: inline-flex; align-items: center; gap: 4px; } .rules-doc__ribbon strong { color: var(--ink-1); font-weight: 600; } .rules-doc__page { flex: 1; overflow: auto; padding: 32px 48px 40px; background: repeating-linear-gradient(180deg, #fcfcf8 0 28px, #f7f6ee 28px 29px); color: var(--ink-1); line-height: 1.6; font-size: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .rules-doc__section h2 { font-family: 'Geist', 'Inter', sans-serif; font-size: 26px; font-weight: 800; margin: 0 0 16px; color: var(--xp-blue-800); letter-spacing: -0.02em; position: relative; padding-bottom: 6px; } .rules-doc__section h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: var(--xp-orange); border-radius: 2px; } .rules-doc__rule { display: grid; grid-template-columns: 32px 1fr; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dotted #c5c1a8; align-items: start; } .rules-doc__rule:last-child { border-bottom: none; } .rules-doc__num { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--xp-orange); padding-top: 2px; } /* ============================================================= WHEEL (modifiers) — widget layout ============================================================= */ /* ── Wheel shell: tabs сверху + content под ними ─────────────────────── */ .wheel-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--paper-2); } .wheel-shell.is-virus { background: linear-gradient(180deg, #1a0606 0%, #2a0a0a 100%); } .wheel-shell.is-pain { background: linear-gradient(180deg, #2a0a14 0%, #1a0a14 100%); } /* ── Tabs ─────────────────────────────────────────────────────────────── */ .wheel-tabs { display: flex; flex-shrink: 0; background: linear-gradient(180deg, #ece9d8 0%, #d9d4be 100%); border-bottom: 1px solid #b0a777; padding: 0 8px; gap: 2px; } .wheel-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px 8px; font-size: 12.5px; font-family: 'Inter', Tahoma, sans-serif; font-weight: 600; color: #6b6149; background: transparent; border: none; border-top: 2px solid transparent; border-bottom: 2px solid transparent; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; position: relative; margin-top: 4px; border-radius: 4px 4px 0 0; } .wheel-tab:hover { background: rgba(255, 255, 255, 0.5); color: #3a3220; } .wheel-tab.active { background: var(--paper-2); color: #5a3a10; border-top-color: #f5c542; font-weight: 700; /* Активная вкладка визуально «слита» с content area */ margin-bottom: -1px; border-bottom-color: var(--paper-2); box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.06); } .wheel-tab__icon { font-size: 14px; line-height: 1; } /* ── Tooltip ──────────────────────────────────────────────────────────── */ .wheel-tooltip { max-width: 300px; z-index: 99999; background: linear-gradient(180deg, #fffce0 0%, #fef5c4 100%); border: 1px solid #c2a648; border-radius: 5px; padding: 10px 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.15); font-family: 'Inter', Tahoma, sans-serif; font-size: 12px; color: #2a1c08; pointer-events: none; animation: wheel-tooltip-pop 0.15s ease; } @keyframes wheel-tooltip-pop { 0% { opacity: 0; transform: translateY(4px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .wheel-tooltip__title { font-weight: 700; font-size: 13px; color: #5a3a10; margin-bottom: 5px; letter-spacing: 0.01em; } .wheel-tooltip__body { line-height: 1.45; color: #3a2810; } /* ── Rules tab ────────────────────────────────────────────────────────── */ .wheel-rules-tab { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 36px 32px; background: linear-gradient(180deg, #fefefa 0%, #f6f0d8 100%); } .wheel-rules-tab__title { font-family: 'Geist', 'Inter', sans-serif; font-size: 24px; color: #1a3f8b; margin: 0 0 12px; letter-spacing: -0.01em; } .wheel-rules-tab__intro { font-size: 13.5px; color: #4a3a20; line-height: 1.6; margin-bottom: 24px; max-width: 720px; padding: 12px 16px; background: rgba(245, 197, 66, 0.08); border-left: 3px solid #f5c542; border-radius: 3px; } .wheel-rules-tab__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 22px; } .wheel-rules-tab__card { display: flex; gap: 12px; background: #fff; border: 1px solid #d4c89c; border-left: 4px solid #f5c542; border-radius: 5px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); transition: box-shadow 0.15s ease, transform 0.15s ease; } .wheel-rules-tab__card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10); transform: translateY(-1px); } .wheel-rules-tab__num { flex-shrink: 0; width: 36px; height: 36px; background: linear-gradient(135deg, #f5c542 0%, #e8a52a 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Geist', 'Inter', sans-serif; font-weight: 800; font-size: 14px; color: #5a3a10; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .wheel-rules-tab__hd { font-weight: 700; font-size: 14.5px; color: #5a3a10; margin-bottom: 6px; font-family: 'Geist', 'Inter', sans-serif; } .wheel-rules-tab__txt { font-size: 13px; color: #2a2010; line-height: 1.55; } .wheel-rules-tab__hint { margin-top: 18px; padding: 12px 16px; background: linear-gradient(180deg, #fff6c8 0%, #ffe88a 100%); border: 1px dashed #c2a648; border-radius: 5px; color: #5a4a10; font-size: 12.5px; line-height: 1.5; max-width: 720px; } /* ── Mods tab: 2-column grid, размещается в .wheel-shell ──────────────── */ .wheel-app { flex: 1; display: grid; grid-template-columns: minmax(280px, 1.05fr) minmax(0, 1.25fr); min-height: 0; /* Container queries позволяют адаптировать раскладку под фактическую ширину окна, а не под viewport (окна XP-десктопа меньше viewport'а). */ container-type: inline-size; container-name: wheelapp; } .wheel-app__side { padding: 22px; background: var(--paper-2); border-right: 1px solid #d0d7e2; overflow: auto; min-width: 0; } .wheel-app__side h3 { margin: 0 0 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-3); } .wheel-app__main { padding: 22px 22px 28px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; background: linear-gradient(180deg, #e8f0ff 0%, #c9dbf8 100%); position: relative; overflow: auto; min-width: 0; } .wheel-app__main::before { content: ""; position: absolute; inset: -40% -20% auto -20%; height: 240px; background: radial-gradient(ellipse, rgba(255,255,255,0.8), transparent 70%); pointer-events: none; } .mod-filter { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; } .mod-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .mod-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: white; border: 1px solid #d7dbe3; border-radius: 4px; font-size: 13px; cursor: pointer; transition: background 100ms, border-color 100ms; } .mod-item:hover { border-color: var(--xp-blue-600); background: var(--xp-blue-100); } .mod-item.disabled { opacity: 0.5; background: #f6f7fa; } .mod-item__check { width: 18px; height: 18px; border: 1px solid #8094b5; border-radius: 3px; display: grid; place-items: center; background: linear-gradient(180deg, #ffffff, #e3e8f0); flex-shrink: 0; } .mod-item__check.on { background: linear-gradient(180deg, #3f82ee, #1152b8); border-color: #0a3d99; } .mod-item__check.on::after { content: "✓"; color: white; font-weight: 700; font-size: 12px; } .mod-item__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .mod-item__dot.easy { background: linear-gradient(135deg, #78d14d, #3b8a2b); } .mod-item__dot.hard { background: linear-gradient(135deg, #f07868, #c02814); } .mod-item__name { flex: 1; } .wheel-canvas-wrap { position: relative; width: min(var(--wheel-max, 380px), 100%); aspect-ratio: 1 / 1; height: auto; max-width: 100%; flex: 0 0 auto; /* Тень-сияние под колесом */ filter: drop-shadow(0 8px 28px rgba(91, 120, 255, 0.45)); } /* Pulse-эффект на стрелку-указатель когда колесо неактивно */ .wheel-pointer { animation: wheelPointerPulse 1.5s ease-in-out infinite; } @keyframes wheelPointerPulse { 0%, 100% { transform: translateY(-50%) scale(1); filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4)); } 50% { transform: translateY(-50%) scale(1.08); filter: drop-shadow(2px 2px 8px rgba(255,91,110,0.6)); } } /* Результат — анимированное появление + glow */ .wheel-result { animation: wheelResultPop 0.4s ease-out; } @keyframes wheelResultPop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .wheel-result__value { background: linear-gradient(90deg, #1a3f8b, #5b78ff, #1a3f8b); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: wheelResultShimmer 3s linear infinite; } @keyframes wheelResultShimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } .wheel-canvas-wrap canvas { display: block; /* Растягиваем 380×380 битмап на CSS-размер обёртки, чтобы колесо оставалось круглым при любом размере окна. */ width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 12px 36px rgba(8,20,58,0.3), inset 0 0 0 6px rgba(255,255,255,0.9), inset 0 0 0 8px #1152b8; } .wheel-pointer { position: absolute; top: 50%; right: -18px; width: 46px; height: 46px; transform: translateY(-50%); filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4)); z-index: 3; } /* Кнопка «Крутить колесо» — единый стиль для обоих колёс. */ .wheel-spin-btn { align-self: center; padding: 10px 28px; font-size: 14px; font-weight: 700; min-width: 200px; max-width: 100%; box-sizing: border-box; flex: 0 0 auto; white-space: nowrap; } .wheel-result { background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%); border: 1px solid #b8c3d4; border-radius: 10px; padding: 14px 22px 16px; text-align: center; width: 100%; max-width: min(380px, 100%); box-sizing: border-box; box-shadow: 0 4px 14px rgba(8,20,58,0.12), inset 0 1px 0 rgba(255,255,255,0.9); /* Не даём блоку сжаться по высоте и предотвращаем «налипание» соседних элементов сверху/снизу. */ flex: 0 0 auto; margin: 6px auto 10px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; overflow: hidden; } .wheel-result__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-3); margin: 0; line-height: 1.2; } .wheel-result__value { font-size: 20px; font-weight: 800; color: var(--xp-blue-800); font-family: 'Geist', 'Tahoma', sans-serif; line-height: 1.15; word-break: break-word; padding: 2px 0 4px; margin: 0; } .wheel-result__msg { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin: 6px 0 0; padding-top: 8px; border-top: 1px dashed rgba(120,140,180,0.4); word-wrap: break-word; } /* ============================================================= DIFFICULTY WHEEL ============================================================= */ .diff-wheel { padding: 18px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; height: 100%; box-sizing: border-box; background: linear-gradient(180deg, #eef3ff 0%, #cddbf3 100%); overflow-y: auto; overflow-x: hidden; container-type: inline-size; container-name: diffwheel; } .diff-wheel__intro { color: #475569; font-size: 13px; margin-top: -4px; text-align: center; max-width: 480px; width: 100%; } .diff-wheel h2 { margin: 0; font-family: 'Geist', sans-serif; font-weight: 800; font-size: 24px; color: var(--xp-blue-900); letter-spacing: -0.02em; } .diff-wheel__legend { display: grid; /* auto-fit с минимумом 100px: при широком окне получается ровно 4 колонки, при узком — плитки автоматически перетекают в 2 ряда. */ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; width: 100%; max-width: 560px; /* Дополнительный отступ сверху, чтобы белый блок результата не лип к легенде. wheel-result уже даёт margin-bottom: 10px, добавляем сверху для надёжности. */ margin-top: 10px; /* Гарантия, что плитки не вылезают за нижний край */ flex: 0 0 auto; } /* Цветные «кнопки-плитки» в духе XP (вместо плоских белых карточек) */ .diff-wheel__chip { --chip-color: #6b7280; position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--chip-color) 92%, white) 0%, var(--chip-color) 55%, color-mix(in srgb, var(--chip-color) 80%, black) 100%); border: 1px solid color-mix(in srgb, var(--chip-color) 70%, black); border-radius: 8px; padding: 10px 8px 8px; text-align: center; font-size: 11px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.18); overflow: hidden; min-width: 0; } .diff-wheel__chip::before { content: ''; position: absolute; inset: 1px 1px auto 1px; height: 45%; background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0)); border-radius: 7px 7px 0 0; pointer-events: none; } .diff-wheel__chip .pct { font-weight: 800; font-size: 20px; line-height: 1; display: block; color: #fff; font-family: 'Geist', 'Tahoma', sans-serif; position: relative; text-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 0 6px rgba(0,0,0,0.2); } .diff-wheel__chip .lbl { display: block; color: rgba(255,255,255,0.95); margin-top: 4px; font-weight: 600; font-size: 11px; letter-spacing: 0.3px; position: relative; text-shadow: 0 1px 0 rgba(0,0,0,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================= ОТЗЫВЧИВЫЕ ПРАВКИ ДЛЯ КОЛЁС ============================================================= */ /* WheelApp: при ширине окна меньше 720px переходим в одноколоночную раскладку, чтобы канвас и боковой список не давили друг друга. */ @container wheelapp (max-width: 720px) { .wheel-app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .wheel-app__side { border-right: none; border-bottom: 1px solid #d0d7e2; max-height: 240px; padding: 14px 16px; } .wheel-app__side h3 { margin-bottom: 10px; } .wheel-app__main { padding: 16px 14px 22px; gap: 14px; } } /* Совсем узкое окно — уменьшаем колесо и подгоняем кнопку. */ @container wheelapp (max-width: 420px) { .wheel-app__main { --wheel-max: 260px; } .wheel-spin-btn { min-width: 0; padding: 8px 18px; font-size: 13px; } } /* DiffWheel: на узком окне ужимаем заголовок и подсказку. */ @container diffwheel (max-width: 460px) { .diff-wheel { padding: 12px 14px 18px; gap: 10px; } .diff-wheel h2 { font-size: 18px; } .diff-wheel__intro { font-size: 12px; } } /* DiffWheel: совсем узкое окно — даём колесу адаптироваться и уменьшаем кнопку. */ @container diffwheel (max-width: 380px) { .diff-wheel { --wheel-max: 240px; } .wheel-spin-btn { min-width: 0; padding: 8px 18px; font-size: 13px; } .diff-wheel__legend { gap: 6px; } .diff-wheel__chip { padding: 8px 6px 6px; } .diff-wheel__chip .pct { font-size: 17px; } } /* ============================================================= GENRES ============================================================= */ .genres { padding: 22px; display: grid; grid-template-columns: 1fr 80px 1fr; gap: 20px; height: 100%; background: var(--paper-2); align-items: start; } .genres__col { background: white; border: 1px solid #d0d7e2; border-radius: 8px; padding: 16px; } .genres__col h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); display: flex; align-items: center; gap: 8px; } .genres__col h3 .count { background: var(--xp-blue-100); color: var(--xp-blue-800); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; } .genre-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e4e8ef; border-radius: 6px; margin-bottom: 6px; background: var(--paper-2); font-size: 13px; cursor: pointer; transition: background 100ms, border-color 100ms, transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms; position: relative; } .genre-item:hover { border-color: var(--xp-blue-600); background: white; } .genre-item.is-flying-right { transform: translateX(180%) scale(0.85); opacity: 0; } .genre-item.is-flying-left { transform: translateX(-180%) scale(0.85); opacity: 0; } .genre-item.is-just-moved { animation: genreLanding 0.7s ease-out; background: linear-gradient(90deg, rgba(255, 224, 138, 0.6), transparent); } @keyframes genreLanding { 0% { transform: scale(0.7) translateX(-30px); opacity: 0; background: rgba(255, 224, 138, 0.9); } 60% { transform: scale(1.06) translateX(0); opacity: 1; background: rgba(255, 224, 138, 0.6); } 100% { transform: scale(1) translateX(0); opacity: 1; background: var(--paper-2); } } .genre-item__action { transition: transform 120ms; } .genre-item__action:hover { transform: scale(1.08); } .genre-item__action:disabled { opacity: 0.4; cursor: default; transform: none; } .genre-item__dot { width: 8px; height: 8px; background: var(--xp-orange); border-radius: 50%; } .genre-item.done .genre-item__dot { background: #3b8a2b; } .genre-item__name { flex: 1; } .genre-item__action { background: none; border: none; color: var(--xp-blue-700); cursor: pointer; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 3px; } .genre-item__action:hover { background: var(--xp-blue-100); } .genres__divider { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding-top: 60px; color: var(--ink-4); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; } .genres__divider-arrow { font-size: 32px; color: var(--xp-blue-600); } /* ============================================================= SCROLLBARS — XP style ============================================================= */ .win__body::-webkit-scrollbar, .explorer__side::-webkit-scrollbar, .games-table::-webkit-scrollbar, .rules-doc__page::-webkit-scrollbar, .wheel-app__side::-webkit-scrollbar, .diff-wheel::-webkit-scrollbar { width: 16px; height: 16px; } .win__body::-webkit-scrollbar-track, .explorer__side::-webkit-scrollbar-track, .games-table::-webkit-scrollbar-track, .rules-doc__page::-webkit-scrollbar-track, .wheel-app__side::-webkit-scrollbar-track, .diff-wheel::-webkit-scrollbar-track { background: #eef2f8; border-left: 1px solid #d0d7e2; } .win__body::-webkit-scrollbar-thumb, .explorer__side::-webkit-scrollbar-thumb, .games-table::-webkit-scrollbar-thumb, .rules-doc__page::-webkit-scrollbar-thumb, .wheel-app__side::-webkit-scrollbar-thumb, .diff-wheel::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #fdfdfd, #b8c3d4); border: 1px solid #7f9db9; border-radius: 3px; } .win__body::-webkit-scrollbar-thumb:hover, .explorer__side::-webkit-scrollbar-thumb:hover, .games-table::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #fff, #7fb3ff); } /* ============================================================= Window transitions ============================================================= */ .win.opening { animation: win-open 180ms ease-out; } .win.closing { animation: win-close 140ms ease-in forwards; pointer-events: none; } @keyframes win-open { from { transform: scale(0.9) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } @keyframes win-close { from { transform: scale(1); opacity: 1; } to { transform: scale(0.9) translateY(6px); opacity: 0; } } .win.minimizing { animation: win-minimize 220ms ease-in forwards; pointer-events: none; } @keyframes win-minimize { to { transform: scale(0.1) translateY(120vh); opacity: 0; } } /* ============================================================= UTILS ============================================================= */ .flex { display: flex; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .mono { font-family: 'JetBrains Mono', monospace; } .muted { color: var(--ink-3); } .small { font-size: 11px; } /* Tooltip for taskbar apps */ .tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #ffffd1; border: 1px solid #6a6a33; color: #2a2a10; font-size: 11px; padding: 3px 6px; border-radius: 2px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 120ms 500ms; } .taskbar__app:hover .tooltip, .taskbar__tray-icon:hover .tooltip { opacity: 1; } /* ============================================================= BOOT / LOGON SCREEN ============================================================= */ .boot { position: fixed; inset: 0; z-index: 9999; background: linear-gradient(180deg, #000 0%, #0a0a14 100%); color: #e7eaf2; display: grid; place-items: center; font-family: 'Inter', sans-serif; animation: boot-fade 800ms ease-in forwards; animation-delay: 2.6s; } @keyframes boot-fade { to { opacity: 0; pointer-events: none; } } .boot__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; } .boot__logo { font-family: 'Geist', 'Inter', sans-serif; font-size: 54px; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(135deg, #ffd96a, #f28e1c 50%, #c63b22); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .boot__sub { font-size: 13px; opacity: 0.6; letter-spacing: 0.18em; text-transform: uppercase; } .boot__bar { width: 240px; height: 12px; background: #0d0d18; border: 1px solid #1e2134; border-radius: 2px; overflow: hidden; position: relative; } .boot__bar::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 46px; background: linear-gradient(90deg, transparent, #3f82ee 40%, #78d14d 80%, transparent); animation: boot-slide 1.2s linear infinite; } @keyframes boot-slide { from { left: -46px; } to { left: 240px; } } .boot__copy { font-size: 11px; opacity: 0.45; margin-top: 14px; font-family: 'JetBrains Mono', monospace; } /* ============================================================= SOUND TOGGLE ============================================================= */ .sound-toggle { position: relative; display: flex; align-items: center; gap: 4px; color: white; padding: 2px 4px; cursor: pointer; border-radius: 3px; } .sound-toggle:hover { background: rgba(255,255,255,0.12); } /* ============================================================= NOTEPAD / CALCULATOR / MEDIA PLAYER ============================================================= */ .notepad { height: 100%; display: flex; flex-direction: column; background: white; } .notepad textarea { flex: 1; border: none; outline: none; padding: 12px 16px; font-family: 'Lucida Console', 'Courier New', monospace; font-size: 13px; line-height: 1.55; resize: none; background: white; color: var(--ink-1); } .calc { padding: 14px; display: flex; flex-direction: column; gap: 10px; height: 100%; background: linear-gradient(180deg, #e8ecf3 0%, #cdd4df 100%); } .calc__display { background: #d5e3b5; border: 1px solid #7a8a5a; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.25); padding: 10px 14px; font-family: 'Lucida Console', monospace; font-size: 24px; text-align: right; color: #0d2a00; min-height: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 1; } .calc__key { background: linear-gradient(180deg, #fdfdfd, #c4cbd8); border: 1px solid #5f7aa8; border-radius: 3px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--ink-1); } .calc__key:active { background: linear-gradient(180deg, #c4cbd8, #fdfdfd); } .calc__key.op { color: #1e5bc6; } .calc__key.eq { background: linear-gradient(180deg, #f4b043, #b96104); color: white; border-color: #8f4700; } .calc__key.clr { background: linear-gradient(180deg, #f07868, #9e2810); color: white; border-color: #7c1d08; } .calc__key.wide { grid-column: span 2; } /* ============================================================ Windows Media Player 9 — Cabbafon edition ============================================================ */ .wmp { height: 100%; display: flex; flex-direction: column; background: linear-gradient(180deg, #0b1a3d 0%, #0a1230 45%, #070a1d 100%); color: #d7e3ff; font-family: 'Tahoma', 'Segoe UI', sans-serif; position: relative; overflow: hidden; } .wmp::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 20% 0%, rgba(79, 130, 238, 0.35), transparent 70%), radial-gradient(ellipse 60% 40% at 90% 100%, rgba(242, 142, 28, 0.18), transparent 70%); pointer-events: none; } .wmp__body { flex: 1; display: grid; grid-template-columns: 1fr 260px; min-height: 0; position: relative; z-index: 1; } .wmp__main { display: flex; flex-direction: column; min-height: 0; padding: 10px 12px 12px; gap: 10px; border-right: 1px solid rgba(255,255,255,0.08); } .wmp__screen { position: relative; flex: 1; min-height: 180px; background: #000; border: 1px solid #0a1230; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 2px 10px rgba(0,0,0,0.45); overflow: hidden; border-radius: 2px; } .wmp__iframe, .wmp__iframe iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; } .wmp__overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.55); color: #b8c6e8; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; } .wmp__now { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 2px; border-bottom: 1px solid rgba(255,255,255,0.06); } .wmp__now-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: #89a3d9; } .wmp__now-title { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wmp__now-artist { font-size: 11px; color: #9bb1dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wmp__seek { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; } .wmp__time { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 11px; color: #b8c6e8; min-width: 40px; text-align: center; } .wmp__seekbar, .wmp__volbar { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: transparent; cursor: pointer; } .wmp__seekbar::-webkit-slider-runnable-track, .wmp__volbar::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(180deg, #0b1938 0%, #1c3261 100%); border: 1px solid #000; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .wmp__seekbar::-moz-range-track, .wmp__volbar::-moz-range-track { height: 4px; background: linear-gradient(180deg, #0b1938 0%, #1c3261 100%); border: 1px solid #000; border-radius: 2px; } .wmp__seekbar::-webkit-slider-thumb, .wmp__volbar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 14px; background: linear-gradient(180deg, #e7f1ff 0%, #8faedd 60%, #3d69b2 100%); border: 1px solid #0a1942; border-radius: 2px; margin-top: -6px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); } .wmp__seekbar::-moz-range-thumb, .wmp__volbar::-moz-range-thumb { width: 10px; height: 14px; background: linear-gradient(180deg, #e7f1ff 0%, #8faedd 60%, #3d69b2 100%); border: 1px solid #0a1942; border-radius: 2px; } .wmp__seekbar:disabled { opacity: 0.5; cursor: not-allowed; } .wmp__transport { display: flex; align-items: center; gap: 4px; padding: 6px; background: linear-gradient(180deg, #1c3261 0%, #0c1a3c 100%); border: 1px solid #000; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } .wmp__btn { width: 30px; height: 30px; display: grid; place-items: center; background: linear-gradient(180deg, #3f6ec0 0%, #1f3e87 50%, #152d68 100%); color: #fff; border: 1px solid #000; border-radius: 2px; cursor: pointer; font-size: 13px; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); transition: filter 0.08s ease; padding: 0; } .wmp__btn:hover { filter: brightness(1.15); } .wmp__btn:active { filter: brightness(0.9); box-shadow: inset 0 1px 2px rgba(0,0,0,0.4); } .wmp__btn.on { background: linear-gradient(180deg, #f4d36a 0%, #d89b1a 50%, #8f6208 100%); border-color: #3a2805; } .wmp__btn--play { width: 42px; height: 42px; font-size: 16px; background: linear-gradient(180deg, #8fd86a 0%, #3b8a2b 50%, #265a1c 100%); border-color: #0a2a04; } .wmp__btn--sm { width: 24px; height: 24px; font-size: 11px; } .wmp__vol { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 120px; } .wmp__vol .wmp__volbar { flex: 1; } /* Playlist pane */ .wmp__playlist { display: flex; flex-direction: column; min-height: 0; background: linear-gradient(180deg, #0e1c42 0%, #0a1433 100%); color: #cfdcf6; font-size: 12px; } .wmp__playlist-head { padding: 8px 10px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: #fff; background: linear-gradient(180deg, #2a4b93 0%, #14306e 100%); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .wmp__playlist-body { flex: 1; overflow-y: auto; padding: 4px 0; } .wmp__plrow { display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: center; padding: 6px 10px; cursor: pointer; border-left: 2px solid transparent; user-select: none; } .wmp__plrow:hover { background: rgba(63, 130, 238, 0.14); } .wmp__plrow.active { background: rgba(63, 130, 238, 0.35); border-left-color: #f4b043; } .wmp__plnum { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 11px; color: #8faedd; text-align: center; } .wmp__plrow.active .wmp__plnum { color: #f4b043; } .wmp__plrow--ext .wmp__pltitle { color: #d8e2f5; font-weight: 500; } .wmp__plrow--ext .wmp__plartist { color: #6f8cba; font-style: italic; } .wmp__plrow--ext .wmp__plnum { color: #6f8cba; font-size: 13px; } .wmp__plrow--ext:hover .wmp__plnum { color: #f4b043; } .wmp__plinfo { min-width: 0; } .wmp__pltitle { font-size: 12px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wmp__plartist { font-size: 10.5px; color: #8faedd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wmp__playlist-foot { padding: 6px 10px; font-size: 10px; color: #8faedd; text-transform: uppercase; letter-spacing: 0.15em; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.25); } /* ============================================================ XP Welcome screen — user picker + login ============================================================ */ .xp-welcome { position: fixed; inset: 0; background: radial-gradient(ellipse 120% 80% at 50% 110%, rgba(0,0,0,0.35) 0%, transparent 60%), radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255,255,255,0.08) 0%, transparent 60%), linear-gradient(180deg, #1a4f8e 0%, #245fa5 40%, #2a6cb8 60%, #3a85d4 100%); color: #fff; display: grid; grid-template-rows: auto auto 1fr auto auto; padding: 0; z-index: 2000; font-family: 'Inter', sans-serif; overflow: hidden; animation: xpw-fade 450ms ease-out; } @keyframes xpw-fade { from { opacity: 0; } to { opacity: 1; } } .xp-welcome__header { padding: 34px 56px 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } .xp-welcome__brand { display: flex; align-items: center; gap: 14px; } .xp-welcome__brand-logo { width: 52px; height: 52px; border-radius: 8px; background: linear-gradient(135deg, #f4b043, #b96104); color: #fff; display: grid; place-items: center; font-family: 'Geist', 'Inter', sans-serif; font-weight: 800; font-size: 30px; box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3); } .xp-welcome__brand-title { font-family: 'Geist', 'Inter', sans-serif; font-size: 30px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); letter-spacing: -0.01em; } .xp-welcome__brand-title sup { font-size: 12px; opacity: 0.7; vertical-align: top; } .xp-welcome__brand-sub { font-size: 12px; color: rgba(255,255,255,0.75); font-family: 'JetBrains Mono', monospace; margin-top: 2px; } .xp-welcome__hint { font-size: 14px; color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.3); max-width: 280px; text-align: right; line-height: 1.4; } .xp-welcome__divider { height: 2px; margin: 0 56px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 15%, rgba(255,255,255,0.5) 85%, transparent 100%); box-shadow: 0 1px 0 rgba(0,0,0,0.3); } .xp-welcome__users { padding: 40px 56px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; overflow: auto; } .xp-welcome__user { display: flex; align-items: flex-start; gap: 16px; padding: 14px 22px; min-width: 420px; max-width: 520px; width: 100%; border-radius: 4px; cursor: pointer; transition: background 120ms, opacity 180ms, transform 180ms; border: 1px solid transparent; } .xp-welcome__user:hover { background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.18), rgba(255,255,255,0.08)); border-color: rgba(255,255,255,0.2); } .xp-welcome__user.active { background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.25), rgba(255,255,255,0.10)); border-color: rgba(255,255,255,0.35); } .xp-welcome__user.dim { opacity: 0.45; transform: scale(0.98); } .xp-welcome__avatar { width: 54px; height: 54px; border: 2px solid #fff; border-radius: 3px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.15); overflow: hidden; display: grid; place-items: center; } .xp-welcome__avatar--guest { background: #f0f4ff; } .xp-welcome__avatar--cabbakid { background: #f4b043; } .xp-welcome__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; } .xp-welcome__user-name { font-family: 'Geist', 'Inter', sans-serif; font-size: 22px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); letter-spacing: -0.01em; line-height: 1.1; } .xp-welcome__user-hint { font-size: 12px; color: rgba(255,255,255,0.75); font-family: 'JetBrains Mono', monospace; } .xp-welcome__pwd { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; animation: xpw-pwd-in 240ms cubic-bezier(.2, 1.2, .4, 1); } @keyframes xpw-pwd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .xp-welcome__pwd.shake { animation: xpw-shake 360ms; } @keyframes xpw-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .xp-welcome__pwd-row { display: flex; align-items: center; gap: 6px; } .xp-welcome__pwd input { flex: 1; padding: 6px 10px; background: #fff; border: 1px solid #7f9db9; border-radius: 2px; font-size: 13px; color: var(--ink-1); font-family: inherit; box-shadow: inset 0 1px 2px rgba(0,0,0,0.08); } .xp-welcome__pwd input:focus { outline: 1px solid var(--xp-blue-600); border-color: var(--xp-blue-600); } .xp-welcome__pwd input:disabled { opacity: 0.6; } .xp-welcome__pwd-go, .xp-welcome__pwd-cancel { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(0,0,0,0.3); cursor: pointer; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.35); transition: transform 100ms, filter 100ms; } .xp-welcome__pwd-go { background: linear-gradient(180deg, #4fa841 0%, #2f7a23 100%); } .xp-welcome__pwd-go:hover:not(:disabled) { filter: brightness(1.1); transform: scale(1.05); } .xp-welcome__pwd-go:disabled { opacity: 0.5; cursor: default; } .xp-welcome__pwd-cancel { background: linear-gradient(180deg, #d1524c 0%, #962d29 100%); } .xp-welcome__pwd-cancel:hover { filter: brightness(1.1); transform: scale(1.05); } .xp-welcome__pwd-err { background: rgba(255, 200, 180, 0.15); border: 1px solid rgba(255, 120, 100, 0.5); color: #ffe1dc; font-size: 12px; padding: 5px 8px; border-radius: 3px; } .xp-welcome__pwd-tip { font-size: 11px; color: rgba(255,255,255,0.55); font-style: italic; } /* django-axes lockout countdown */ .xp-welcome__pwd.locked input, .xp-welcome__pwd.locked .xp-welcome__pwd-go { filter: grayscale(0.6) opacity(0.5); cursor: not-allowed; } .xp-welcome__pwd-lock { background: linear-gradient(180deg, rgba(255, 80, 60, 0.18) 0%, rgba(180, 30, 30, 0.22) 100%); border: 1px solid rgba(255, 80, 60, 0.55); border-radius: 4px; padding: 7px 10px; display: flex; flex-direction: column; gap: 4px; box-shadow: inset 0 0 8px rgba(255, 60, 40, 0.15); animation: xp-welcome-lock-pulse 2.4s ease-in-out infinite; } @keyframes xp-welcome-lock-pulse { 0%, 100% { box-shadow: inset 0 0 8px rgba(255, 60, 40, 0.15); } 50% { box-shadow: inset 0 0 14px rgba(255, 60, 40, 0.32); } } .xp-welcome__pwd-lock-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #ffe1dc; font-weight: 600; } .xp-welcome__pwd-lock-label { flex: 1; letter-spacing: 0.2px; } .xp-welcome__pwd-lock-clock { font-family: 'Consolas', 'Courier New', monospace; font-size: 14px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.35); padding: 2px 8px; border-radius: 3px; border: 1px solid rgba(255, 100, 80, 0.4); letter-spacing: 1px; text-shadow: 0 0 6px rgba(255, 80, 50, 0.6); } .xp-welcome__pwd-lock-hint { font-size: 10.5px; color: rgba(255, 220, 215, 0.75); font-style: italic; line-height: 1.35; } .xp-welcome__footer { padding: 16px 56px 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .xp-welcome__footer-left { display: flex; align-items: center; gap: 10px; } .xp-welcome__footer-right { display: flex; gap: 8px; } .xp-welcome__footer-btn { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 6px 12px; font-size: 12px; border-radius: 3px; cursor: pointer; font-family: inherit; transition: background 120ms; } .xp-welcome__footer-btn:hover { background: rgba(255,255,255,0.2); } /* Compact layout on small screens */ @media (max-width: 720px) { .xp-welcome__header, .xp-welcome__footer { padding-left: 20px; padding-right: 20px; } .xp-welcome__divider { margin: 0 20px; } .xp-welcome__users { padding: 20px; } .xp-welcome__user { min-width: 0; } .xp-welcome__hint { display: none; } } /* ============================================================= MODAL DIALOG — XP Luna-flavored ============================================================= */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: grid; place-items: center; z-index: 2000; } .modal-dialog { width: min(460px, calc(100vw - 32px)); min-width: 420px; max-width: 480px; background: #ffffff; border: 1px solid #0a2d77; border-radius: 6px 6px 4px 4px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; overflow: hidden; font-family: 'Tahoma', 'Inter', sans-serif; } .modal-dialog__title { height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg, #0c5ae0 0%, #1a66e0 50%, #0c4cc8 100%); color: #ffffff; font-size: 12px; font-weight: 700; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); border-top-left-radius: 6px; border-top-right-radius: 6px; font-family: 'Trebuchet MS', 'Tahoma', 'Inter', sans-serif; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.18); } .modal-dialog__title-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modal-dialog__close { margin-left: auto; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 3px; background: linear-gradient(180deg, #ed8272 0%, #d14628 45%, #a8230f 100%); color: #ffffff; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 0 rgba(0, 0, 0, 0.15); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); transition: filter 90ms; } .modal-dialog__close:hover { filter: brightness(1.08); } .modal-dialog__close:active { filter: brightness(0.95); } .modal-dialog__close:focus { outline: 1px dotted rgba(255, 255, 255, 0.85); outline-offset: -3px; } .modal-dialog__body { padding: 16px 18px; max-height: 70vh; overflow-y: auto; background: #ECE9D8; color: var(--ink-1); } .modal-form { display: grid; gap: 10px; } .modal-form__row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; } .modal-form__row label { font-size: 12px; color: #0a3d91; font-weight: 600; } .modal-form__row--full { grid-column: 1 / -1; } .modal-form .xp-input, .modal-form .xp-select { width: 100%; } .modal-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid #bdbdbd; background: #ECE9D8; } .modal-error { color: #b91c1c; font-size: 12px; margin-top: 4px; } .modal-hint { color: #475569; font-size: 11px; margin-top: 2px; } .modal-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 120px; overflow-y: auto; padding: 4px; background: #fff; border: 1px solid #7a96df; border-radius: 3px; } .modal-chip { font-family: inherit; font-size: 11px; padding: 3px 8px; border-radius: 10px; border: 1px solid #a0b4d6; background: linear-gradient(180deg, #fafbfd, #e6ecf4); color: var(--ink-2); cursor: pointer; transition: filter 120ms; } .modal-chip:hover { filter: brightness(1.04); } .modal-chip.active { background: linear-gradient(180deg, #3f82ee, #1e5bc6); color: #fff; border-color: #0c3d97; } .modal-dialog--confirm { max-width: 380px; } .confirm-message { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; font-size: 13px; color: var(--ink-2); padding: 8px 0 4px; line-height: 1.45; } .confirm-message__icon { font-size: 32px; line-height: 1; text-align: center; color: var(--xp-orange); filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15)); } .confirm-message strong { color: var(--xp-blue-900); } /* =================================================================== TOTAL COMMANDER =================================================================== */ .tcmd { display: flex; flex-direction: column; height: 100%; background: #d4d0c8; font-family: 'Lucida Console', 'Consolas', 'Courier New', monospace; font-size: 12px; color: #111; } .tcmd__menubar { background: #d4d0c8; padding: 2px 6px; border-bottom: 1px solid #888; display: flex; gap: 14px; font-family: Tahoma, Inter, sans-serif; font-size: 11px; } .tcmd__menubar span { cursor: default; padding: 1px 4px; } .tcmd__menubar span:hover { background: #0a246a; color: #fff; } .tcmd__drives { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #808080; padding: 2px; } .tcmd__drivebar { background: #d4d0c8; display: flex; gap: 1px; padding: 2px; } .tcmd__drivebtn { width: 22px; height: 20px; font-family: inherit; font-size: 11px; background: #d4d0c8; border: 1px solid #888; border-top-color: #fff; border-left-color: #fff; border-bottom-color: #404040; border-right-color: #404040; color: #111; cursor: pointer; } .tcmd__drivebtn:hover { background: #e0dcc8; } .tcmd__drivebtn.active { background: #fff4b5; border-top-color: #404040; border-left-color: #404040; border-bottom-color: #fff; border-right-color: #fff; } .tcmd__panes { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; background: #808080; } .tcmd__pane { background: #000080; color: #c0c0c0; display: flex; flex-direction: column; min-height: 0; border: 1px solid #000; } .tcmd__pane.focused { outline: 2px solid #ffd700; outline-offset: -2px; } .tcmd__pane-head { background: #c0c0c0; color: #000; padding: 2px 6px; font-size: 11px; border-bottom: 1px solid #808080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tcmd__pane-cols { display: grid; grid-template-columns: 1fr 60px 90px; background: #c0c0c0; color: #000; font-weight: 700; border-bottom: 1px solid #808080; } .tcmd__col { padding: 2px 6px; border-right: 1px solid #808080; font-size: 11px; } .tcmd__col:last-child { border-right: none; } .tcmd__pane-body { flex: 1; overflow-y: auto; background: #000080; color: #c0c0c0; } .tcmd__row { display: grid; grid-template-columns: 1fr 60px 90px; cursor: pointer; font-size: 12px; line-height: 1.5; } .tcmd__row:hover { background: #1a1aa0; } .tcmd__row.selected { background: #c0c0c0; color: #000; } .tcmd__row.is-dir { color: #ffffff; font-weight: 600; } .tcmd__row.is-dir.selected { color: #000080; } .tcmd__row.tcmd__row--up { color: #ffff00; } .tcmd__cell { padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tcmd__cell--size { text-align: right; } .tcmd__empty { padding: 14px; color: #a0a0a0; font-style: italic; text-align: center; } .tcmd__pane-foot { background: #c0c0c0; color: #000; padding: 2px 6px; font-size: 11px; border-top: 1px solid #808080; } .tcmd__cmdline { background: #000080; color: #c0c0c0; padding: 4px 8px; border-top: 1px solid #000; font-family: inherit; font-size: 12px; display: flex; gap: 4px; } .tcmd__cmdcursor { animation: tcmd-blink 1s steps(2) infinite; } @keyframes tcmd-blink { 50% { opacity: 0; } } .tcmd__fkeys { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 2px; background: #808080; } .tcmd__fkey { background: #d4d0c8; border: 1px solid #888; border-top-color: #fff; border-left-color: #fff; border-bottom-color: #404040; border-right-color: #404040; padding: 4px 2px; font-family: Tahoma, Inter, sans-serif; font-size: 11px; color: #111; cursor: pointer; } .tcmd__fkey:hover { background: #e0dcc8; } .tcmd__fkey:active { border-top-color: #404040; border-left-color: #404040; border-bottom-color: #fff; border-right-color: #fff; } .tcmd__fkey b { color: #c00; } /* =================================================================== MINESWEEPER =================================================================== */ .mines { display: flex; flex-direction: column; padding: 8px; background: #c0c0c0; height: 100%; font-family: Tahoma, Inter, sans-serif; gap: 6px; overflow: auto; } .mines__menu { display: flex; gap: 6px; align-items: center; background: #c0c0c0; padding: 4px; border: 2px solid; border-color: #808080 #fff #fff #808080; } .mines__menu select, .mines__menu button { font-family: inherit; font-size: 11px; background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff; padding: 2px 6px; cursor: pointer; } .mines__menu button:active { border-color: #808080 #fff #fff #808080; } .mines__hud { display: flex; justify-content: space-between; align-items: center; background: #c0c0c0; padding: 5px 8px; border: 2px solid; border-color: #808080 #fff #fff #808080; } .mines__counter { background: #000; color: #f00; font-family: 'DS-Digital', 'Courier New', monospace; font-weight: 800; font-size: 22px; padding: 2px 6px; border: 1px solid #808080; min-width: 44px; text-align: center; letter-spacing: 2px; } .mines__face { width: 28px; height: 28px; background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff; font-size: 18px; line-height: 1; padding: 0; cursor: pointer; } .mines__face:active { border-color: #808080 #fff #fff #808080; } .mines__grid { display: grid; background: #c0c0c0; padding: 4px; border: 2px solid; border-color: #808080 #fff #fff #808080; align-self: flex-start; } .mines__cell { width: 20px; height: 20px; display: grid; place-items: center; font-family: Tahoma, Inter, sans-serif; font-size: 13px; font-weight: 800; user-select: none; line-height: 1; } .mines__cell.closed { background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff; cursor: pointer; } .mines__cell.closed:hover { background: #d0d0d0; } .mines__cell.open { background: #bdbdbd; border: 1px solid #808080; } .mines__cell.open.mine { background: #e04a3a; font-size: 15px; } .mines__cell.open.mine.hit { background: #ff2a2a; } .mines__cell.flag { font-size: 13px; } .mines__foot { font-size: 11px; color: #333; text-align: center; padding: 2px; } /* =================================================================== SOLITAIRE (Косынка) =================================================================== */ .sol { display: flex; flex-direction: column; padding: 10px; background: #006c3a; height: 100%; gap: 10px; font-family: Tahoma, Inter, sans-serif; overflow: auto; } .sol__menu { display: flex; gap: 10px; align-items: center; color: #fff; font-size: 12px; } .sol__menu button { background: #d4d0c8; border: 2px solid; border-color: #fff #808080 #808080 #fff; padding: 3px 10px; font-size: 11px; cursor: pointer; } .sol__menu button:active { border-color: #808080 #fff #fff #808080; } .sol__stat { color: #fff; font-size: 12px; } .sol__stat--win { color: #ffd700; font-weight: 800; font-size: 14px; } .sol__top { display: flex; justify-content: space-between; padding: 0 4px; } .sol__stock-area { display: flex; gap: 6px; } .sol__foundations { display: flex; gap: 6px; } .sol__card { width: 60px; height: 84px; border-radius: 4px; background: #fff; border: 1px solid #222; box-shadow: 0 1px 2px rgba(0,0,0,0.3); position: relative; cursor: pointer; flex-shrink: 0; transition: transform 100ms; } .sol__card.selected { outline: 3px solid #ffd700; transform: translateY(-3px); z-index: 2; } .sol__card.empty { background: transparent; border: 1px dashed rgba(255,255,255,0.4); color: rgba(255,255,255,0.35); font-size: 24px; display: grid; place-items: center; } .sol__card.red { color: #c91d1d; } .sol__card.black { color: #111; } .sol__card-corner { position: absolute; font-size: 11px; line-height: 1.05; font-weight: 800; font-family: Georgia, serif; text-align: center; } .sol__card-corner.tl { top: 3px; left: 4px; } .sol__card-corner.br { bottom: 3px; right: 4px; transform: rotate(180deg); } .sol__card-center { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; font-family: Georgia, serif; } .sol__card-back { position: absolute; inset: 2px; background: repeating-linear-gradient(45deg, #0d3a8a 0 6px, #1e5bc6 6px 12px); border: 1px solid #fff; border-radius: 2px; } .sol__found-slot { position: relative; } .sol__tableau { display: grid; grid-template-columns: repeat(7, 60px); gap: 12px; justify-content: center; flex: 1; min-height: 300px; } .sol__col { min-height: 84px; display: flex; flex-direction: column; position: relative; padding: 2px; border-radius: 4px; transition: box-shadow 100ms, background 100ms; } .sol__hint { margin-left: auto; color: rgba(255,255,255,0.75); font-size: 11px; font-style: italic; letter-spacing: 0.2px; } .sol__card.dragging { opacity: 0.35; } .sol__ghost { position: fixed; z-index: 9999; pointer-events: none; display: flex; flex-direction: column; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55)); transform: rotate(-1.5deg); } .sol__ghost .sol__card { cursor: grabbing; box-shadow: 0 2px 4px rgba(0,0,0,0.4); } .sol__col.drop-over { background: rgba(255, 215, 0, 0.12); box-shadow: inset 0 0 0 2px #ffd700; } .sol__found-slot.drop-over { box-shadow: 0 0 0 2px #ffd700, 0 0 12px rgba(255,215,0,0.5); border-radius: 4px; } .sol__card[data-sol-drop] { cursor: grab; } .sol__card:active { cursor: grabbing; } /* =================================================================== DOOM =================================================================== */ .doom { display: flex; flex-direction: column; height: 100%; background: #000; } .doom__chrome { background: #000; color: #c0c0c0; font-family: 'Courier New', monospace; font-size: 12px; padding: 4px 8px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; } .doom__chrome-right { display: flex; gap: 6px; } .doom__chrome-btn { background: #2a0000; color: #f5c542; border: 1px solid #8a0000; font-family: 'Courier New', monospace; font-size: 11px; padding: 2px 10px; cursor: pointer; } .doom__chrome-btn:hover { background: #4a0000; } .doom__badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .doom__badge { background: rgba(245,197,66,0.12); border: 1px solid rgba(245,197,66,0.4); color: #f5c542; font-family: Tahoma, sans-serif; font-size: 11px; padding: 3px 10px; border-radius: 12px; letter-spacing: 0.3px; } /* js-dos real emulator container */ .doom__jsdos { position: absolute; inset: 0; background: #000; width: 100%; height: 100%; } .doom__jsdos > * { width: 100% !important; height: 100% !important; } .doom__jsdos canvas { background: #000; } /* Loading screen while js-dos bootstraps */ .doom__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(ellipse at center, #2a0000 0%, #000 70%); pointer-events: none; z-index: 4; } .doom__loading-logo { font-family: 'Impact', 'Arial Black', sans-serif; font-size: 52px; letter-spacing: 10px; color: #f5c542; text-shadow: 0 0 18px #ff3300, 0 4px 0 #8a0000; animation: doomLoadingPulse 1.4s ease-in-out infinite; } @keyframes doomLoadingPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .doom__loading-spinner { display: flex; gap: 6px; } .doom__loading-spinner span { width: 10px; height: 10px; border-radius: 50%; background: #ff6600; box-shadow: 0 0 8px #ff6600; animation: doomDot 900ms ease-in-out infinite; } .doom__loading-spinner span:nth-child(2) { animation-delay: 150ms; } .doom__loading-spinner span:nth-child(3) { animation-delay: 300ms; } @keyframes doomDot { 0%, 100% { transform: scale(0.6); opacity: 0.4; } 50% { transform: scale(1); opacity: 1; } } .doom__loading-txt { font-family: Tahoma, Inter, sans-serif; font-size: 12px; color: #c0c0c0; text-align: center; line-height: 1.5; } .doom__error-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #1a0000; color: #f5c542; font-family: Tahoma, sans-serif; padding: 24px; text-align: center; z-index: 5; } .doom__error-title { font-family: 'Impact', sans-serif; font-size: 22px; letter-spacing: 2px; color: #ff4a3d; } .doom__error-msg { font-family: 'Courier New', monospace; font-size: 12px; color: #f5c542; max-width: 420px; word-break: break-word; } .doom__error-hint { font-size: 12px; color: #a08060; } .doom__error-hint code { background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 2px; color: #ffb366; } .doom__focus-btn { background: linear-gradient(180deg, #e60000 0%, #8a0000 100%); color: #fff; border: 2px solid #f5c542; padding: 8px 20px; font-family: 'Impact', 'Arial Black', sans-serif; font-size: 16px; letter-spacing: 2px; cursor: pointer; text-shadow: 0 2px 0 #000; box-shadow: 0 0 14px rgba(255,102,0,0.55); } .doom__focus-btn:hover { filter: brightness(1.15); } .doom__screen { flex: 1; background: #000; position: relative; overflow: hidden; } .doom__screen iframe { width: 100%; height: 100%; border: none; display: block; background: #000; } .doom__splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #3a0000 0%, #000 70%); color: #f5c542; font-family: 'Impact', 'Arial Black', sans-serif; gap: 16px; text-align: center; padding: 20px; } .doom__logo { font-size: 72px; font-weight: 900; letter-spacing: 12px; color: #f5c542; text-shadow: 0 0 20px #ff6600, 0 4px 0 #8a0000, 0 8px 20px rgba(138,0,0,0.8); } .doom__tag { font-family: 'Courier New', monospace; color: #ff6600; font-size: 14px; letter-spacing: 2px; } .doom__help { color: #c0c0c0; font-family: Tahoma, Inter, sans-serif; font-size: 12px; max-width: 400px; line-height: 1.5; } .doom__go { background: linear-gradient(180deg, #c00 0%, #8a0000 100%); color: #fff; border: 2px solid #f5c542; padding: 12px 32px; font-family: 'Impact', 'Arial Black', sans-serif; font-size: 22px; letter-spacing: 3px; cursor: pointer; box-shadow: 0 0 20px rgba(255,102,0,0.6); text-shadow: 0 2px 0 #000; } .doom__go:hover { filter: brightness(1.15); } .doom__small { font-family: Tahoma, Inter, sans-serif; font-size: 10px; color: #666; } /* =================================================================== INTERNET EXPLORER =================================================================== */ .ie { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, Inter, sans-serif; font-size: 11px; } /* === Tab bar === */ .ie__tabs { display: flex; align-items: flex-end; gap: 1px; padding: 4px 6px 0; background: linear-gradient(180deg, #cdd9ec, #a6b6d6); border-bottom: 1px solid #5b78ff; overflow-x: auto; } .ie__tab { display: flex; align-items: center; gap: 6px; padding: 5px 24px 5px 10px; position: relative; background: linear-gradient(180deg, #d4dcec, #a6b6d6); border: 1px solid #5b78ff; border-bottom: none; border-radius: 5px 5px 0 0; cursor: pointer; font-size: 11.5px; color: #1e293b; max-width: 220px; min-width: 80px; transition: background 100ms; } .ie__tab:hover { background: linear-gradient(180deg, #e0e8f8, #b6c6e6); } .ie__tab.is-active { background: linear-gradient(180deg, #fff, #ece9d8); font-weight: 700; color: #0a3d91; z-index: 1; margin-bottom: -1px; padding-bottom: 6px; } .ie__tab-icon { flex-shrink: 0; font-size: 12px; } .ie__tab-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ie__tab-close { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; display: grid; place-items: center; font-size: 14px; color: #5a5240; border-radius: 50%; cursor: pointer; font-weight: 700; line-height: 1; } .ie__tab-close:hover { background: #c91d1d; color: #fff; } .ie__tab-add { width: 26px; height: 26px; display: grid; place-items: center; background: linear-gradient(180deg, #d4dcec, #a6b6d6); border: 1px solid #5b78ff; border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; font-size: 16px; font-weight: 700; color: #1a3f8b; margin-left: 4px; align-self: center; } .ie__tab-add:hover { background: linear-gradient(180deg, #fff, #d4dcec); } /* === Google search page === */ .ie__google { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px 20px; height: 100%; background: #fff; font-family: arial, sans-serif; overflow: auto; } .ie__google-logo { font-family: arial, sans-serif; font-size: 72px; font-weight: 400; letter-spacing: -2px; display: flex; text-shadow: 1px 2px 4px rgba(0,0,0,0.1); } .ie__google-form { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 580px; } .ie__google-input { width: 100%; padding: 12px 16px; font-size: 15px; border: 1px solid #dfe1e5; border-radius: 24px; outline: none; box-shadow: 0 1px 6px rgba(32,33,36,0.08); transition: box-shadow 120ms; } .ie__google-input:focus { box-shadow: 0 1px 6px rgba(32,33,36,0.28); border-color: rgba(223,225,229,0); } .ie__google-buttons { display: flex; gap: 10px; } .ie__google-btn { background: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 4px; color: #3c4043; font-family: arial, sans-serif; font-size: 13px; padding: 0 16px; height: 36px; cursor: pointer; } .ie__google-btn:hover { border-color: #dadce0; background: #f8f9fa; box-shadow: 0 1px 1px rgba(0,0,0,0.1); color: #202124; } .ie__google-hint { font-size: 11.5px; color: #70757a; text-align: center; line-height: 1.5; font-style: italic; } .ie__google-shortcuts { display: flex; gap: 28px; margin-top: 8px; } .ie__google-shortcut { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: #3c4043; } .ie__google-shortcut:hover { color: #1a73e8; } .ie__google-shortcut-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: transform 120ms; } .ie__google-shortcut:hover .ie__google-shortcut-icon { transform: translateY(-2px) scale(1.05); } .ie__google-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; text-align: center; font-size: 11px; color: #70757a; background: #f2f2f2; border-top: 1px solid #ebebeb; } /* ===================================================================== POINTAUC EMBEDDED — iframe с настоящим PointAuc через серверный прокси. Сверху тулбар с кнопками управления, снизу подсказка. ===================================================================== */ .ie__pa-embed { position: absolute; inset: 0; display: flex; flex-direction: column; background: #1a1a26; overflow: hidden; } .ie__pa-toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: linear-gradient(180deg, #2a1f1a 0%, #1a1410 100%); border-bottom: 2px solid #f28e1c; flex-shrink: 0; font-family: 'Geist', 'Tahoma', sans-serif; } .ie__pa-tb-btn { background: rgba(255,255,255,0.08); color: #f4f2e6; border: 1px solid rgba(242,142,28,0.35); padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-family: inherit; font-weight: 600; transition: background 120ms, border-color 120ms; white-space: nowrap; } .ie__pa-tb-btn:hover { background: rgba(242,142,28,0.18); border-color: #f28e1c; } .ie__pa-tb-btn--accent { background: linear-gradient(180deg, #f28e1c, #c96a10); color: #fff; border-color: #8a4810; font-weight: 700; } .ie__pa-tb-btn--accent:hover { background: linear-gradient(180deg, #ffa840, #e07c14); } .ie__pa-tb-status { font-size: 11px; margin-left: 6px; padding: 4px 8px; border-radius: 3px; background: rgba(0,0,0,0.3); font-family: 'Geist', monospace; } .ie__pa-tb-ok { color: #5dff8a; } .ie__pa-tb-load { color: #ffd0a0; animation: paLoadBlink 1s ease-in-out infinite; } @keyframes paLoadBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .ie__pa-stuck { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.85); color: #ffd0a0; padding: 12px 18px; border-radius: 6px; border: 1px solid #f28e1c; z-index: 5; text-align: center; max-width: 400px; font-family: 'Geist', sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,0.5); } .ie__pa-stuck-title { font-weight: 700; font-size: 13px; color: #f28e1c; margin-bottom: 4px; } .ie__pa-stuck-text { font-size: 11px; margin-bottom: 8px; line-height: 1.4; } .ie__pa-frame-wrap { flex: 1 1 auto; position: relative; background: #fff; min-height: 0; } .ie__pa-frame { display: block; width: 100%; height: 100%; border: none; background: #fff; } .ie__pa-hint { flex-shrink: 0; padding: 5px 12px; background: #2a1f1a; color: #c98a4a; font-size: 11px; display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(242,142,28,0.2); } .ie__pa-hint-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid #c98a4a; border-radius: 50%; font-size: 10px; font-weight: 700; flex-shrink: 0; } .ie__pa-hint b { color: #ffd0a0; } /* ===================================================================== FAKE POINTAUC — (legacy) стилизованная копия. Пока не используется, но оставлена на случай если потребуется fallback без сервера-прокси. ===================================================================== */ .ie__pointauc { position: absolute; inset: 0; background: linear-gradient(180deg, #1a1a26 0%, #2a1f1a 100%); color: #f4f2e6; font-family: 'Geist', 'Tahoma', sans-serif; display: flex; flex-direction: column; overflow: hidden; } .ie__pointauc-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: linear-gradient(180deg, #2a1f1a 0%, #1a1410 100%); border-bottom: 2px solid #f28e1c; flex-shrink: 0; } .ie__pointauc-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; } .ie__pointauc-logo-icon { font-size: 22px; } .ie__pointauc-logo-text { font-size: 22px; background: linear-gradient(90deg, #ffb74d, #f28e1c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.02em; } .ie__pointauc-sub { font-size: 12px; color: #c98a4a; font-weight: 500; margin-left: 4px; } .ie__pointauc-stats { display: flex; gap: 16px; align-items: center; } .ie__pointauc-stat { text-align: right; } .ie__pointauc-stat-k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.15em; color: #8a6a4a; } .ie__pointauc-stat-v { font-size: 18px; font-weight: 800; color: #fff; font-family: 'Geist', monospace; } .ie__pointauc-pause-btn { background: rgba(242,142,28,0.2); border: 1px solid #f28e1c; color: #ffb74d; font-size: 16px; width: 34px; height: 34px; border-radius: 4px; cursor: pointer; font-family: inherit; display: grid; place-items: center; } .ie__pointauc-pause-btn:hover { background: rgba(242,142,28,0.35); } .ie__pointauc-leader { background: linear-gradient(180deg, #4a2a10 0%, #2a1810 100%); padding: 12px 20px; text-align: center; border-bottom: 1px solid rgba(242,142,28,0.3); flex-shrink: 0; position: relative; overflow: hidden; } .ie__pointauc-leader::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(242,142,28,0.18), transparent 60%); pointer-events: none; } .ie__pointauc-leader-label { font-size: 10px; letter-spacing: 0.25em; color: #f28e1c; text-transform: uppercase; font-weight: 700; position: relative; } .ie__pointauc-leader-name { font-size: 28px; font-weight: 900; margin: 4px 0; letter-spacing: -0.02em; text-shadow: 0 2px 8px rgba(0,0,0,0.5); position: relative; } .ie__pointauc-leader-points { font-size: 14px; color: #ffd0a0; font-family: 'Geist', monospace; font-weight: 600; position: relative; } .ie__pointauc-body { flex: 1 1 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; min-height: 0; } .ie__pointauc-lots { padding: 14px 16px; overflow-y: auto; border-right: 1px solid rgba(242,142,28,0.2); } .ie__pointauc-lots-title, .ie__pointauc-feed-title { font-size: 11px; letter-spacing: 0.2em; color: #f28e1c; text-transform: uppercase; margin-bottom: 12px; font-weight: 700; } .ie__pointauc-lot { display: flex; gap: 10px; align-items: stretch; padding: 8px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; margin-bottom: 6px; transition: background 200ms, border-color 200ms; } .ie__pointauc-lot.is-leader { background: linear-gradient(90deg, rgba(242,142,28,0.18), rgba(242,142,28,0.04)); border-color: rgba(242,142,28,0.5); box-shadow: 0 0 12px rgba(242,142,28,0.15); } .ie__pointauc-lot.is-bumped { animation: paLotBump 0.7s ease-out; } @keyframes paLotBump { 0% { transform: translateX(0); background-color: rgba(255,255,255,0.04); } 20% { transform: translateX(4px); background-color: rgba(93,255,138,0.18); } 100% { transform: translateX(0); } } .ie__pointauc-lot-rank { font-size: 22px; width: 32px; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; color: #c98a4a; } .ie__pointauc-lot.is-leader .ie__pointauc-lot-rank { font-size: 26px; filter: drop-shadow(0 0 4px gold); } .ie__pointauc-lot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .ie__pointauc-lot-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ie__pointauc-lot-name { font-size: 13px; font-weight: 600; color: #f4f2e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ie__pointauc-lot-pts { font-size: 14px; font-weight: 800; font-family: 'Geist', monospace; flex-shrink: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .ie__pointauc-lot-bar { height: 6px; background: rgba(0,0,0,0.4); border-radius: 3px; overflow: hidden; } .ie__pointauc-lot-bar-fill { height: 100%; border-radius: 3px; transition: width 600ms cubic-bezier(.4,1.6,.5,1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); } .ie__pointauc-feed { padding: 14px 16px; background: rgba(0,0,0,0.2); display: flex; flex-direction: column; min-height: 0; } .ie__pointauc-feed-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; } .ie__pointauc-feed-empty { color: #8a6a4a; font-style: italic; padding: 20px 0; text-align: center; } .ie__pointauc-feed-row { background: rgba(242,142,28,0.06); border-left: 3px solid #f28e1c; padding: 6px 10px; border-radius: 0 4px 4px 0; font-size: 12px; animation: paFeedSlide 0.4s ease-out; } @keyframes paFeedSlide { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .ie__pointauc-feed-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .ie__pointauc-feed-who { font-weight: 700; color: #ffd0a0; } .ie__pointauc-feed-amt { color: #5dff8a; font-weight: 800; font-family: 'Geist', monospace; } .ie__pointauc-feed-lot { font-size: 11px; color: #c98a4a; margin-top: 2px; } .ie__pointauc-feed-msg { font-size: 11px; color: #c0b8a0; font-style: italic; margin-top: 2px; } .ie__pointauc-footer { padding: 8px 18px; background: #1a1410; border-top: 1px solid rgba(242,142,28,0.2); display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #8a6a4a; flex-shrink: 0; } .ie__pointauc-open-real { background: linear-gradient(180deg, #f28e1c, #c96a10); color: #fff; border: 1px solid #8a4810; padding: 5px 14px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; } .ie__pointauc-open-real:hover { background: linear-gradient(180deg, #ffa840, #e07c14); } /* Узкое окно — сворачиваем в одну колонку */ @media (max-width: 700px) { .ie__pointauc-body { grid-template-columns: 1fr; } .ie__pointauc-feed { border-top: 1px solid rgba(242,142,28,0.2); } .ie__pointauc-leader-name { font-size: 20px; } } /* === Google search results (внутренняя страница) === */ .ie__gres { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; font-family: arial, sans-serif; overflow-y: auto; } .ie__gres-header { display: flex; align-items: center; gap: 18px; padding: 14px 22px; border-bottom: 1px solid #ebebeb; } .ie__gres-logo { font-size: 28px; font-weight: 500; font-family: 'Product Sans', arial, sans-serif; letter-spacing: -1px; flex-shrink: 0; } .ie__gres-querybar { flex: 1; display: flex; border: 1px solid #dfe1e5; border-radius: 24px; padding: 4px 6px; background: #fff; box-shadow: 0 1px 3px rgba(32, 33, 36, 0.1); } .ie__gres-querybar-input { flex: 1; border: none; outline: none; padding: 6px 12px; font-size: 14px; font-family: arial, sans-serif; background: transparent; } .ie__gres-querybar-btn { width: 24px; height: 24px; background: transparent; border: none; color: #5f6368; cursor: pointer; font-size: 16px; border-radius: 50%; } .ie__gres-querybar-btn:hover { background: #f1f3f4; } .ie__gres-stats { padding: 10px 22px; font-size: 12px; color: #70757a; border-bottom: 1px solid #f0f0f0; } .ie__gres-loading { text-align: center; padding: 40px; color: #70757a; font-size: 14px; } .ie__gres-list { padding: 14px 22px; display: flex; flex-direction: column; gap: 22px; flex: 1; } .ie__gres-item { max-width: 600px; } .ie__gres-item.is-external { padding-top: 12px; border-top: 2px dashed #e0e0e0; margin-top: 12px; opacity: 0.85; } .ie__gres-title { display: block; color: #1a0dab; font-size: 18px; text-decoration: none; cursor: pointer; line-height: 1.3; } .ie__gres-title:hover { text-decoration: underline; } .ie__gres-item.is-external .ie__gres-title { color: #1a73e8; font-weight: 600; } .ie__gres-url { color: #006621; font-size: 13px; margin: 2px 0 4px; } .ie__gres-snippet { color: #4d5156; font-size: 13px; line-height: 1.5; } .ie__gres-footer { text-align: center; padding: 18px; font-size: 11px; color: #999; border-top: 1px solid #f0f0f0; background: #f8f9fa; } /* === iframe fallback === */ .ie__iframe-fallback { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px; text-align: center; font-family: Tahoma, sans-serif; } .ie__iframe-fallback-title { font-size: 16px; font-weight: 700; color: #c91d1d; } .ie__iframe-fallback-sub { font-size: 12px; color: #5a5240; line-height: 1.6; } .ie__iframe-fallback-sub code { background: #f4f2e6; padding: 1px 6px; border-radius: 2px; font-family: 'Courier New', monospace; font-size: 11px; } .ie__toolbar { background: linear-gradient(180deg, #f6f5ec 0%, #ece9d8 100%); padding: 4px 6px; display: flex; gap: 4px; border-bottom: 1px solid #ada899; } .ie__tb-btn { display: flex; flex-direction: column; align-items: center; background: transparent; border: 1px solid transparent; padding: 4px 8px; cursor: pointer; font-family: inherit; font-size: 10px; color: #111; min-width: 50px; gap: 2px; } .ie__tb-btn:not(:disabled):hover { background: #ffedad; border-color: #ffa500; } .ie__tb-btn:disabled { color: #999; cursor: default; opacity: 0.55; } .ie__tb-btn span:first-child { font-size: 16px; line-height: 1; color: #1152b8; } .ie__addrbar { display: flex; align-items: center; background: #ece9d8; padding: 3px 6px; gap: 6px; border-bottom: 1px solid #ada899; } .ie__addr-label { font-size: 11px; color: #333; padding: 0 4px; } .ie__addr-form { flex: 1; display: flex; gap: 4px; } .ie__addr-input { flex: 1; padding: 3px 6px; border: 1px solid #7f9db9; font-family: inherit; font-size: 12px; background: #fff; min-width: 0; } .ie__addr-input:focus { outline: 1px solid #3f82ee; } .ie__addr-go { background: linear-gradient(180deg, #fff 0%, #d4dae0 100%); border: 1px solid #7f9db9; padding: 3px 10px; font-family: inherit; font-size: 11px; cursor: pointer; } .ie__addr-go:hover { background: linear-gradient(180deg, #ffedad 0%, #f5c542 100%); } .ie__view { flex: 1; background: #fff; overflow: auto; position: relative; } .ie__view iframe { width: 100%; height: 100%; border: none; display: block; } .ie__status { background: #ece9d8; padding: 3px 8px; border-top: 1px solid #ada899; display: flex; justify-content: space-between; font-size: 11px; color: #555; } .ie__home { padding: 22px 30px; background: #fff; color: #111; font-family: 'Times New Roman', Times, serif; min-height: 100%; } .ie__home-hero { display: flex; gap: 16px; align-items: center; border-bottom: 2px solid #0a3a94; padding-bottom: 12px; margin-bottom: 18px; } .ie__home-logo { width: 60px; height: 60px; background: linear-gradient(135deg, #f4b043, #b96104); color: #fff; font-family: Geist, sans-serif; font-weight: 800; font-size: 36px; display: grid; place-items: center; border-radius: 8px; } .ie__home-title { font-size: 28px; font-weight: 700; color: #0a3a94; font-family: 'Times New Roman', Times, serif; } .ie__home-sub { font-size: 12px; color: #666; font-family: Tahoma, sans-serif; } .ie__home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; } .ie__home-card { display: flex; gap: 12px; align-items: center; background: #f5f9ff; border: 1px solid #8ba9d5; padding: 10px 14px; cursor: pointer; font-family: Tahoma, Inter, sans-serif; font-size: 12px; color: #111; } .ie__home-card:hover { background: #e0ebff; border-color: #0a3a94; } .ie__home-card-ico { width: 40px; height: 40px; color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; border-radius: 4px; flex-shrink: 0; } .ie__home-card-sub { color: #666; font-size: 11px; margin-top: 2px; } .ie__home-news { background: #fffbe5; border: 1px solid #d4b35a; padding: 10px 14px; font-family: Tahoma, Inter, sans-serif; font-size: 12px; color: #111; } .ie__home-news ul { margin: 6px 0 0 20px; padding: 0; } .ie__home-news li { margin-bottom: 4px; } .ie__error { padding: 30px; background: #fff; font-family: Tahoma, Inter, sans-serif; color: #111; } .ie__error-title { font-size: 22px; color: #0a3a94; font-weight: 700; border-bottom: 2px solid #0a3a94; padding-bottom: 6px; margin-bottom: 12px; } .ie__error-sub { font-size: 13px; margin-bottom: 14px; } .ie__error ul { font-size: 12px; line-height: 1.7; } .ie__error code { background: #f0f0f0; padding: 1px 4px; border: 1px solid #ccc; font-family: 'Courier New', monospace; } .ie__error a { color: #1152b8; text-decoration: underline; cursor: pointer; } .ie__error-small { font-size: 10px; color: #999; margin-top: 20px; } .ie__external { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 280px; gap: 10px; padding: 30px; text-align: center; background: #f5f9ff; font-family: Tahoma, Inter, sans-serif; } .ie__external-ico { width: 64px; height: 64px; color: #fff; font-weight: 800; font-size: 22px; display: grid; place-items: center; border-radius: 10px; } .ie__external-title { font-size: 18px; font-weight: 700; color: #0a3a94; } .ie__external-sub { font-size: 12px; color: #333; max-width: 400px; } .ie__external-btn { margin-top: 6px; background: linear-gradient(180deg, #3f82ee, #1e5bc6); color: #fff; border: 1px solid #0c3d97; padding: 8px 18px; font-family: inherit; font-size: 12px; cursor: pointer; border-radius: 3px; } .ie__external-btn:hover { filter: brightness(1.08); } /* =================================================================== DOOM — slim hint bar over canvas (replaces js-dos' blocking nag) =================================================================== */ .doom__hint { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(245, 197, 66, 0.45); color: #f5c542; font-family: Tahoma, Inter, sans-serif; font-size: 11px; padding: 4px 12px; border-radius: 12px; z-index: 6; pointer-events: none; backdrop-filter: blur(2px); animation: doomHintFade 6s ease-out forwards; } .doom__hint-sep { opacity: 0.5; } @keyframes doomHintFade { 0% { opacity: 0; transform: translate(-50%, -6px); } 10% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0.25; transform: translate(-50%, 0); } } .doom__jsdos:hover ~ .doom__hint, .doom__screen:hover .doom__hint { opacity: 1 !important; animation: none; } /* =================================================================== ICQ WIDGET — bottom-left retro chat gadget (XP + ICQ 99 vibe) =================================================================== */ .icq-widget { position: fixed; right: 16px; top: 16px; width: 280px; max-height: calc(100vh - 80px); font-family: Tahoma, 'MS Sans Serif', Inter, sans-serif; font-size: 11px; color: #000; background: #ece9d8; border: 1px solid #0a3a94; border-top-color: #3f82ee; border-left-color: #3f82ee; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35), inset 0 0 0 1px #fff; /* z-index: 3 — над иконками (z=0) и event-widget'ом (z=2), но ниже окон. Открытое окно теперь перекрывает ICQ — как настоящий XP. */ z-index: 3; display: flex; flex-direction: column; user-select: none; } .icq-widget.is-minimized { max-height: none; } /* XP-Luna title bar — identical feel to EventWidget */ .icq-widget__titlebar { position: relative; height: 24px; padding: 0 4px 0 6px; display: flex; align-items: center; gap: 6px; background: linear-gradient(180deg, #0058e6 0%, #0050cb 48%, #0a4bbf 100%); color: #fff; border-bottom: 1px solid #00348a; cursor: grab; } .icq-widget__titlebar:active { cursor: grabbing; } .icq-widget.is-dragged { top: auto; right: auto; } .icq-widget__titlebar::before { content: ''; position: absolute; top: 1px; left: 3px; right: 3px; height: 9px; background: linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0)); border-radius: 3px 3px 0 0; pointer-events: none; } .icq-widget__flower { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25)); } .icq-widget__tb-title { flex: 1; font-weight: 700; font-size: 11px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.2px; } .icq-widget__tb-badge { background: #ffd800; color: #7a3e00; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; border: 1px solid #c58a00; text-shadow: none; box-shadow: 0 0 6px rgba(255, 216, 0, 0.55); animation: icqBadgePulse 1.6s ease-in-out infinite; } @keyframes icqBadgePulse { 0%, 100% { box-shadow: 0 0 4px rgba(255, 216, 0, 0.4); } 50% { box-shadow: 0 0 10px rgba(255, 216, 0, 0.9); } } .icq-widget__tb-btn { width: 20px; height: 18px; display: inline-grid; place-items: center; background: linear-gradient(180deg, #ecebd8 0%, #cfcbad 100%); border: 1px solid #0a3a94; border-top-color: #fff; border-left-color: #fff; color: #000; font-size: 11px; line-height: 1; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px #dcd8b8; } .icq-widget__tb-btn:hover { filter: brightness(1.06); } .icq-widget__tb-btn:active { transform: translateY(1px); } /* Body — XP beige panel */ .icq-widget__body { padding: 6px 6px 8px 6px; background: #ece9d8; display: flex; flex-direction: column; gap: 6px; overflow: hidden; } .icq-widget__header { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, #f7f6ec 0%, #ddd8b8 100%); border: 1px solid #808080; border-bottom-color: #fff; border-right-color: #fff; padding: 3px 6px; font-size: 10px; } .icq-widget__day-badge { background: #0058e6; color: #fff; font-weight: 700; padding: 1px 6px; border-radius: 2px; letter-spacing: 0.3px; } .icq-widget__header-hint { color: #555; font-size: 10px; } /* Offline state */ .icq-widget__offline { padding: 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 1px solid #808080; border-top-color: #fff; border-left-color: #fff; text-align: center; } .icq-widget__offline-icon { font-size: 28px; filter: grayscale(0.3); animation: icqFlowerSpin 8s linear infinite; } @keyframes icqFlowerSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .icq-widget__offline-title { font-weight: 700; color: #555; } .icq-widget__offline-sub { font-size: 10px; color: #777; line-height: 1.4; } .icq-widget__empty { padding: 14px; background: #fff; border: 1px solid #808080; border-top-color: #fff; border-left-color: #fff; text-align: center; color: #666; line-height: 1.5; } /* Contact list — sunken frame */ .icq-widget__list { background: #fff; border: 1px solid #808080; border-top-color: #5a5a5a; border-left-color: #5a5a5a; border-right-color: #fff; border-bottom-color: #fff; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; } .icq-widget__list::-webkit-scrollbar { width: 14px; } .icq-widget__list::-webkit-scrollbar-track { background: #dad8b8; border-left: 1px solid #808080; } .icq-widget__list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #cdcaa8, #b5b193); border: 1px solid #808080; border-right-color: #fff; border-bottom-color: #fff; } /* Contact row */ .icq-contact { border-bottom: 1px dotted #c8c5aa; } .icq-contact:last-child { border-bottom: none; } .icq-contact.is-expanded { background: #f5f3e3; } .icq-contact__row { width: 100%; display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: none; background: transparent; cursor: pointer; text-align: left; font-family: inherit; font-size: 11px; } .icq-contact__row:hover { background: #0058e6; color: #fff; } .icq-contact.is-expanded .icq-contact__row { background: #d4e1f7; color: #000; } .icq-contact__row:hover .icq-contact__sub, .icq-contact__row:hover .icq-contact__uin { color: #d8e4ff; } .icq-contact__avatar { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 4px; font-size: 15px; line-height: 1; border: 1px solid rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(0, 0, 0, 0.1); flex-shrink: 0; } .icq-contact__meta { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; } .icq-contact__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icq-contact__sub { font-size: 10px; color: #666; display: flex; align-items: center; gap: 4px; } .icq-contact__uin { color: #888; font-family: 'Courier New', monospace; font-size: 9px; } .icq-contact__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0, 0, 0, 0.25); } .icq-contact__dot--online { background: #7bd12c; box-shadow: 0 0 4px #7bd12c; } .icq-contact__dot--away { background: #f5c542; } .icq-contact__dot--busy { background: #e04a3a; } .icq-contact__dot--invisible { background: #b0b0b0; } .icq-contact__badge { font-size: 10px; color: #e04a3a; font-weight: 700; animation: icqUnreadBlink 1.1s ease-in-out infinite; } @keyframes icqUnreadBlink { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } } .icq-contact__chevron { font-size: 10px; color: #888; margin-left: auto; } .icq-contact__row:hover .icq-contact__chevron { color: #fff; } /* Expanded chat pane */ .icq-contact__chat { background: #fff; border-top: 1px solid #b5b193; padding: 6px; display: flex; flex-direction: column; gap: 5px; animation: icqExpand 180ms ease-out; } @keyframes icqExpand { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 600px; } } .icq-contact__chat-bar { display: flex; justify-content: space-between; font-size: 10px; padding: 3px 6px; background: linear-gradient(180deg, #f7f6ec, #dad7b5); border: 1px solid #808080; border-right-color: #fff; border-bottom-color: #fff; font-family: 'Courier New', monospace; color: #333; } .icq-contact__chat-day { color: #888; } .icq-contact__messages { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; padding: 2px; } .icq-contact__messages::-webkit-scrollbar { width: 12px; } .icq-contact__messages::-webkit-scrollbar-track { background: #ece9d8; } .icq-contact__messages::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c9c5a5, #ada88e); border: 1px solid #808080; } .icq-thread { display: flex; flex-direction: column; gap: 4px; } /* Message bubbles */ .icq-msg { padding: 4px 6px 5px 6px; border: 1px solid #c8c5aa; background: #fffdf2; font-size: 11px; line-height: 1.35; position: relative; max-width: 94%; } .icq-msg--them { align-self: flex-start; background: #fffdf2; border-color: #d5cfa7; } .icq-msg--me { align-self: flex-end; background: #e3efff; border-color: #9fb8e0; text-align: right; } .icq-msg__head { display: flex; gap: 6px; justify-content: space-between; font-size: 9px; color: #666; font-weight: 700; padding-bottom: 2px; border-bottom: 1px dotted #d8d4b5; margin-bottom: 3px; } .icq-msg__author { color: #0058e6; font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: 0.2px; } .icq-msg--me .icq-msg__author { color: #1e5bc6; } .icq-msg__day { color: #a0a0a0; font-family: 'Courier New', monospace; font-size: 9px; } .icq-msg__body { white-space: pre-wrap; word-wrap: break-word; color: #1a1a1a; } /* Reply options */ .icq-choices { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; padding: 3px 2px 2px 2px; border-top: 1px dashed #c8c5aa; } .icq-choice { text-align: left; background: linear-gradient(180deg, #f7f6ec 0%, #d6d2b3 100%); border: 1px solid #808080; border-top-color: #fff; border-left-color: #fff; padding: 4px 7px; font-family: inherit; font-size: 11px; cursor: pointer; color: #0a3a94; font-weight: 600; transition: background 80ms; } .icq-choice:hover { background: linear-gradient(180deg, #fff8e0 0%, #f0dc90 100%); color: #7a3e00; } .icq-choice:active { border-top-color: #808080; border-left-color: #808080; border-right-color: #fff; border-bottom-color: #fff; transform: translateY(1px); } /* Responsive fallback: very small viewport collapses widget */ @media (max-height: 520px) { .icq-widget { max-height: calc(100vh - 60px); } .icq-widget__list { max-height: 240px; } .icq-contact__messages { max-height: 180px; } } /* ============================================================= PAINT ============================================================= */ .paint { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: 1fr 74px; grid-template-areas: "tools canvas" "tools palette"; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; } .paint__toolbox { grid-area: tools; background: linear-gradient(180deg, #f4f2e6 0%, #d9d2b4 100%); border-right: 1px solid #a5a093; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; } .paint__tool { width: 40px; height: 30px; font-size: 14px; border: 1px solid transparent; background: transparent; cursor: pointer; border-radius: 2px; } .paint__tool:hover { background: #f0e9c6; border-color: #a5a093; } .paint__tool.active { background: #dcd4b3; border-color: #7a7057; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.25); } .paint__tool-sep { width: 40px; height: 1px; background: #a5a093; margin: 4px 0; } .paint__size-group { display: flex; flex-direction: column; gap: 2px; } .paint__size { width: 40px; height: 18px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #a5a093; cursor: pointer; border-radius: 2px; } .paint__size.active { background: #dcd4b3; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.25); } .paint__canvaswrap { grid-area: canvas; background: #808080; padding: 8px; overflow: auto; } .paint__canvas { background: #fff; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, 0 0 0 1px #000; cursor: crosshair; image-rendering: pixelated; max-width: 100%; height: auto; } .paint__palette { grid-area: palette; background: linear-gradient(180deg, #f4f2e6 0%, #d9d2b4 100%); border-top: 1px solid #a5a093; padding: 6px 10px; display: flex; align-items: center; gap: 10px; } .paint__palette-current { position: relative; width: 40px; height: 40px; } .paint__swatch-cur { position: absolute; width: 26px; height: 26px; border: 1px solid #000; box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5); top: 0; left: 0; } .paint__swatch-cur--alt { top: 12px; left: 12px; background: #fff; z-index: -1; } .paint__palette-grid { display: grid; grid-template-columns: repeat(10, 20px); grid-template-rows: repeat(2, 20px); gap: 1px; } .paint__swatch { width: 20px; height: 20px; border: 1px solid #555; cursor: pointer; padding: 0; } .paint__swatch.active { outline: 2px solid #003cb3; outline-offset: -3px; } /* ============================================================= TASK MANAGER ============================================================= */ .taskmgr { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 11px; } .taskmgr__tabs { display: flex; padding: 4px 4px 0; background: #ece9d8; border-bottom: 1px solid #7a7057; } .taskmgr__tab { padding: 4px 14px; background: linear-gradient(180deg, #f5f2e0 0%, #d6d0b4 100%); border: 1px solid #7a7057; border-bottom: none; border-radius: 3px 3px 0 0; cursor: pointer; font-size: 11px; margin-right: 2px; position: relative; top: 1px; } .taskmgr__tab.active { background: #f5f2e0; padding-bottom: 5px; font-weight: 700; z-index: 2; } .taskmgr__body { flex: 1; display: flex; flex-direction: column; background: #f5f2e0; padding: 8px; border: 1px solid #7a7057; border-top: none; margin: 0 4px; overflow: hidden; } .taskmgr__table { flex: 1; background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; overflow: hidden; display: flex; flex-direction: column; } .taskmgr__thead { display: grid; grid-template-columns: 2fr 1.2fr 0.7fr 1fr 0.8fr; gap: 0; background: linear-gradient(180deg, #f5f2e0 0%, #d6d0b4 100%); border-bottom: 1px solid #808080; font-weight: 700; padding: 3px 6px; } .taskmgr__thead > * { padding: 0 4px; border-right: 1px solid #aaa294; } .taskmgr__thead > *:last-child { border-right: none; } .taskmgr__tbody { flex: 1; overflow-y: auto; font-family: 'Tahoma', 'Segoe UI', sans-serif; } .taskmgr__row { display: grid; grid-template-columns: 2fr 1.2fr 0.7fr 1fr 0.8fr; padding: 2px 10px; border-bottom: 1px dotted #d4cfa8; font-variant-numeric: tabular-nums; } .taskmgr__row.hot { background: #ffecec; color: #7a1a10; font-weight: 700; } .taskmgr__row:hover { background: #d4e0f7; } .taskmgr__kill { font-size: 10px; padding: 1px 6px; border: 1px solid #003c74; background: linear-gradient(180deg, #fdfdfd 0%, #d6d3c2 100%); cursor: pointer; border-radius: 2px; } .taskmgr__kill:hover { filter: brightness(1.05); } .taskmgr__footer { margin-top: 6px; padding: 4px 6px; background: linear-gradient(180deg, #f5f2e0 0%, #d6d0b4 100%); border: 1px solid; border-color: #fff #808080 #808080 #fff; font-size: 11px; } .taskmgr__perf { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #f5f2e0; border: 1px solid #7a7057; border-top: none; margin: 0 4px; } .taskmgr__gauge { display: grid; grid-template-columns: 1fr 2fr 120px; gap: 10px; align-items: center; } .taskmgr__gauge-head { font-weight: 700; color: #0a3d91; } .taskmgr__gauge-bar { height: 14px; background: #0d1a33; border: 1px solid; border-color: #555 #fff #fff #555; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.6); overflow: hidden; position: relative; } .taskmgr__gauge-fill { height: 100%; background: linear-gradient(180deg, #66ff87 0%, #22b14c 100%); box-shadow: 0 0 6px rgba(50,220,100,0.6); transition: width 300ms ease-out; } .taskmgr__gauge-fill--mem { background: linear-gradient(180deg, #ffd478 0%, #e04a3a 100%); box-shadow: 0 0 6px rgba(230,80,50,0.6); } .taskmgr__gauge-val { font-family: 'Consolas', monospace; text-align: right; } .taskmgr__perf-note { margin-top: 10px; padding: 8px 10px; background: #fff8cc; border: 1px solid #d8c15d; border-radius: 2px; } .taskmgr__perf-note code { font-family: 'Consolas', monospace; background: #fff; padding: 1px 4px; border: 1px solid #d4cfa8; } .taskmgr__apps, .taskmgr__apps-note, .taskmgr__apps-hint { padding: 16px; } .taskmgr__apps-note { color: #0a3d91; font-weight: 700; } .taskmgr__apps-hint { color: #888; font-style: italic; } /* ============================================================= RECYCLE BIN ============================================================= */ .recycle { display: grid; grid-template-columns: 200px 1fr; height: 100%; font-family: Tahoma, sans-serif; font-size: 12px; background: #ece9d8; } .recycle__side { background: linear-gradient(180deg, #7ba9f7 0%, #4474c7 60%, #2e58a6 100%); color: #fff; padding: 10px 8px; border-right: 1px solid #1a3a7a; overflow-y: auto; } .recycle__side h4 { font-size: 11px; margin: 0 0 4px; padding: 2px 6px; background: rgba(255,255,255,0.1); border-radius: 2px; } .recycle__action { padding: 4px 8px; cursor: pointer; border-radius: 2px; font-size: 11px; } .recycle__action:hover { background: rgba(255,255,255,0.18); text-decoration: underline; } .recycle__action.disabled { opacity: 0.5; pointer-events: none; } .recycle__details { padding: 4px 8px; font-size: 11px; line-height: 1.5; } .recycle__main { background: #fff; overflow: auto; padding: 2px; } .recycle__empty { display: grid; place-items: center; height: 100%; text-align: center; color: #888; font-size: 13px; } .recycle__table { width: 100%; border-collapse: collapse; font-size: 11px; } .recycle__table th { background: linear-gradient(180deg, #f5f2e0 0%, #d6d0b4 100%); border: 1px solid #7a7057; padding: 4px 8px; text-align: left; font-weight: 700; } .recycle__table td { padding: 3px 8px; border-bottom: 1px dotted #d4cfa8; } .recycle__table tr { cursor: pointer; } .recycle__table tr:hover { background: #d4e0f7; } .recycle__table tr.selected { background: #316ac5; color: #fff; } .recycle__table tr.recycle__row--danger td { color: #a40000; font-weight: 600; } .recycle__table tr.recycle__row--danger.selected td { color: #ffe0e0; } /* ============================================================= CHARACTER MAP ============================================================= */ .charmap { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 12px; } .charmap__toolbar { padding: 6px 8px; background: linear-gradient(180deg, #f5f2e0 0%, #d6d0b4 100%); border-bottom: 1px solid #7a7057; display: flex; align-items: center; gap: 12px; font-size: 11px; } .charmap__copied { background: #3b8a2b; color: #fff; padding: 2px 8px; border-radius: 2px; font-size: 11px; animation: charmapCopiedFade 800ms ease-out; } @keyframes charmapCopiedFade { 0% { opacity: 0; transform: translateY(-3px); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } } .charmap__grid { flex: 1; overflow-y: auto; background: #fff; padding: 4px; display: grid; grid-template-columns: repeat(20, 1fr); gap: 1px; border: 1px solid #7a7057; margin: 6px; } .charmap__cell { aspect-ratio: 1; background: #fff; border: 1px solid #d4cfa8; font-size: 16px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .charmap__cell:hover { background: #ffe; border-color: #0a3d91; } .charmap__cell:active { background: #d4e0f7; } .charmap__status { padding: 3px 10px; border-top: 1px solid #7a7057; background: linear-gradient(180deg, #f5f2e0 0%, #d6d0b4 100%); font-size: 10px; color: #555; } /* ========================================================= IMAGE VIEWER (Windows Picture and Fax Viewer — XP) ========================================================= */ .imgview { display: grid; grid-template-rows: 28px 1fr 20px; height: 100%; background: #ece9d8; font-family: Tahoma, 'MS Sans Serif', sans-serif; font-size: 11px; } .imgview__bar { display: flex; align-items: center; gap: 3px; padding: 3px 6px; background: linear-gradient(180deg, #f7f5e9 0%, #dcd6bb 100%); border-bottom: 1px solid #a39778; } .imgview__btn { width: 22px; height: 22px; padding: 0; background: linear-gradient(180deg, #fff 0%, #e3e0cd 100%); border: 1px solid #8a7f63; border-radius: 2px; cursor: pointer; font-size: 11px; color: #1a1a1a; line-height: 1; } .imgview__btn:hover:not(:disabled) { background: linear-gradient(180deg, #fff 0%, #ffe08a 100%); } .imgview__btn:active:not(:disabled) { background: linear-gradient(180deg, #d3cfb3 0%, #e8e4c9 100%); } .imgview__btn:disabled { cursor: default; color: #9a9a8a; background: linear-gradient(180deg, #f5f3e6 0%, #e3e0cd 100%); border-color: #b6ad93; opacity: 0.7; } .imgview__sep { width: 1px; background: #8a7f63; height: 18px; margin: 0 3px; } .imgview__canvas { display: grid; place-items: center; background: #3e4a5c; overflow: auto; padding: 14px; } .imgview__frame { width: min(480px, 90%); aspect-ratio: 4 / 3; box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(0,0,0,0.6); display: grid; place-items: center; position: relative; overflow: hidden; } .imgview__emoji { font-size: 96px; text-shadow: 0 3px 10px rgba(0,0,0,0.35); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); } .imgview__stamp { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; background: rgba(0,0,0,0.55); color: #fff; font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 0.5px; border-radius: 2px; } .imgview__status { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; background: linear-gradient(180deg, #f7f5e9 0%, #dcd6bb 100%); border-top: 1px solid #a39778; font-size: 10px; color: #3a3a3a; } /* ========================================================= DOC VIEW (WordPad-like) ========================================================= */ .docview { display: grid; grid-template-rows: 28px 10px 1fr 20px; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 11px; } .docview__toolbar { display: flex; align-items: center; gap: 4px; padding: 3px 6px; background: linear-gradient(180deg, #f7f5e9 0%, #dcd6bb 100%); border-bottom: 1px solid #a39778; } .docview__fontfam, .docview__fontsize { font-size: 11px; padding: 1px 3px; border: 1px solid #8a7f63; background: #fff; height: 20px; } .docview__fontfam { width: 140px; } .docview__fontsize { width: 46px; } .docview__sep { width: 1px; height: 16px; background: #8a7f63; margin: 0 3px; } .docview__btn { width: 22px; height: 22px; padding: 0; border: 1px solid #8a7f63; background: linear-gradient(180deg, #fff 0%, #e3e0cd 100%); border-radius: 2px; cursor: pointer; font-size: 12px; } .docview__ruler { background: linear-gradient(90deg, #fff 0 1px, transparent 1px 10px); background-size: 10px 100%; border-bottom: 1px solid #a39778; } .docview__page { background: #fff; margin: 10px; padding: 24px 30px; overflow: auto; box-shadow: inset 0 0 0 1px #a39778, 0 2px 6px rgba(0,0,0,0.1); font-family: 'Times New Roman', serif; font-size: 14px; line-height: 1.45; color: #1a1a1a; } .docview__doc-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px solid #aaa; } .docview__body { font-family: 'Times New Roman', serif; font-size: 14px; white-space: pre-wrap; margin: 0; color: #1a1a1a; } .docview__status { display: flex; align-items: center; padding: 2px 8px; background: linear-gradient(180deg, #f7f5e9 0%, #dcd6bb 100%); border-top: 1px solid #a39778; font-size: 10px; color: #3a3a3a; } /* ========================================================= MEDIA STUB (audio / video) ========================================================= */ .mediastub { display: grid; grid-template-rows: 1fr 48px; height: 100%; background: linear-gradient(180deg, #2c3e73 0%, #0d1a3a 100%); font-family: Tahoma, sans-serif; color: #dbe7ff; } .mediastub__screen { display: grid; place-items: center; padding: 20px; gap: 8px; background: linear-gradient(180deg, #16214a 0%, #050a1e 100%); border-bottom: 1px solid #000; position: relative; overflow: hidden; } .mediastub__screen--video { background: linear-gradient(180deg, #0a0e1e 0%, #000 100%); } .mediastub__vis { display: flex; align-items: flex-end; gap: 3px; height: 64px; padding: 0 10px; } .mediastub__vis span { display: block; width: 6px; background: linear-gradient(180deg, #ffd76a 0%, #ff8a2a 55%, #e43a3a 100%); animation: mediastub-bar 900ms infinite alternate ease-in-out; } @keyframes mediastub-bar { from { height: 10%; } to { height: 95%; } } .mediastub__videobars { display: grid; grid-template-columns: repeat(16, 1fr); gap: 0; width: 80%; aspect-ratio: 16 / 6; } .mediastub__videobars span { background: hsl(var(--h, 200), 80%, 50%); } .mediastub__videobars span:nth-child(1) { background: #c33; } .mediastub__videobars span:nth-child(2) { background: #e96; } .mediastub__videobars span:nth-child(3) { background: #fc6; } .mediastub__videobars span:nth-child(4) { background: #fd8; } .mediastub__videobars span:nth-child(5) { background: #cd6; } .mediastub__videobars span:nth-child(6) { background: #9c5; } .mediastub__videobars span:nth-child(7) { background: #6b9; } .mediastub__videobars span:nth-child(8) { background: #4a9; } .mediastub__videobars span:nth-child(9) { background: #399; } .mediastub__videobars span:nth-child(10) { background: #378; } .mediastub__videobars span:nth-child(11) { background: #358; } .mediastub__videobars span:nth-child(12) { background: #356; } .mediastub__videobars span:nth-child(13) { background: #434; } .mediastub__videobars span:nth-child(14) { background: #533; } .mediastub__videobars span:nth-child(15) { background: #733; } .mediastub__videobars span:nth-child(16) { background: #933; } .mediastub__title { font-size: 14px; font-weight: 700; color: #ffc94a; text-shadow: 0 1px 2px rgba(0,0,0,0.6); text-align: center; } .mediastub__meta { font-size: 11px; color: #9cb5e3; } .mediastub__controls { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: linear-gradient(180deg, #6c8fd6 0%, #2851a3 100%); border-top: 1px solid #102a5a; } .mediastub__controls button { width: 30px; height: 30px; border: 1px solid #0a1e52; background: radial-gradient(circle at 30% 25%, #cfe2ff, #4c7edb 55%, #18367a 100%); color: #fff; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.45); } .mediastub__controls button:hover { background: radial-gradient(circle at 30% 25%, #ffeab0, #e9b23c 55%, #7a5100 100%); } .mediastub__seek { flex: 1; height: 10px; background: #0c1b3d; border: 1px solid #000; border-radius: 5px; overflow: hidden; } .mediastub__seekfill { height: 100%; width: 42%; background: linear-gradient(180deg, #9ec1ff 0%, #2b5db8 100%); } .mediastub__time { font-family: 'Courier New', monospace; font-size: 11px; color: #fff; min-width: 100px; text-align: right; } /* ========================================================= ARCHIVE VIEW (WinRAR-like) ========================================================= */ .archview { display: grid; grid-template-rows: 30px 22px 22px 1fr 20px; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 11px; } .archview__bar { display: flex; gap: 3px; padding: 4px 6px; background: linear-gradient(180deg, #f7f5e9 0%, #dcd6bb 100%); border-bottom: 1px solid #a39778; } .archview__bar button { padding: 2px 10px; font-size: 11px; border: 1px solid #8a7f63; background: linear-gradient(180deg, #fff 0%, #e3e0cd 100%); cursor: pointer; } .archview__bar button:hover { background: linear-gradient(180deg, #fff 0%, #ffe08a 100%); } .archview__path { padding: 3px 8px; background: #fff; border-bottom: 1px solid #a39778; font-family: 'Courier New', monospace; color: #333; } .archview__cols, .archview__row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; font-size: 11px; } .archview__cols { background: linear-gradient(180deg, #f0edd8 0%, #d6d0b4 100%); border-bottom: 1px solid #a39778; } .archview__cols > div { padding: 3px 8px; border-right: 1px solid #a39778; font-weight: 600; color: #1a1a1a; } .archview__rows { overflow: auto; background: #fff; } .archview__row { border-bottom: 1px solid #e8e4d1; } .archview__row:hover { background: #eaf0fb; } .archview__row > div { padding: 3px 8px; color: #1a1a1a; border-right: 1px solid #eee; } .archview__status { display: flex; align-items: center; padding: 2px 8px; background: linear-gradient(180deg, #f7f5e9 0%, #dcd6bb 100%); border-top: 1px solid #a39778; font-size: 10px; color: #3a3a3a; } /* ========================================================= EXE STUB / UNKNOWN FILE DIALOG ========================================================= */ /* ============================================================= DEBUG MODE — закрытая dev-панель в Display Properties ============================================================= */ .debug-mode { display: flex; flex-direction: column; gap: 14px; padding: 12px; font-family: Tahoma, sans-serif; font-size: 11.5px; } .debug-mode__lock { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px; text-align: center; background: #f4f2e6; border: 2px dashed #b6ad93; border-radius: 6px; } .debug-mode__lock-icon { font-size: 56px; } .debug-mode__lock-title { font-size: 16px; font-weight: 800; color: #c91d1d; } .debug-mode__lock-desc { font-size: 12px; color: #5a5240; line-height: 1.6; } .debug-mode__lock-input { display: flex; gap: 6px; } .debug-mode__lock-err { color: #c91d1d; font-weight: 700; font-size: 12px; padding: 6px 12px; background: #ffeded; border: 1px solid #c91d1d; border-radius: 3px; } .debug-mode__lock-hint { font-size: 10.5px; color: #94a3b8; font-style: italic; margin-top: 12px; } .debug-mode__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(180deg, #ff5b6e, #c91d1d); color: #fff; border-radius: 4px; border: 1px solid #6a1010; } .debug-mode__head-icon { font-size: 24px; } .debug-mode__head-title { font-size: 14px; font-weight: 800; } .debug-mode__sections { display: flex; flex-direction: column; gap: 10px; overflow: auto; } .debug-mode__section { background: #fff; border: 1px solid #b6ad93; border-radius: 4px; padding: 10px 12px; } .debug-mode__section--danger { background: #fff5f5; border-color: #c91d1d; } .debug-mode__section--repair { background: #fffaeb; border-color: #f5a623; } .debug-mode__section--repair .debug-mode__section-title { color: #8a5a0a; border-bottom-color: #fcd9a5; } /* === Live log viewer === */ .debug-mode__section--logger { background: #0a0a0a; border-color: #5a5a5a; } .debug-mode__section--logger .debug-mode__section-title { color: #5dff8a; border-bottom-color: #2a4a2a; } .debug-log__controls { background: rgba(0, 0, 0, 0.3); padding: 6px 8px; border-radius: 3px; margin-bottom: 6px; } .debug-log__select, .debug-log__search { background: #1a1a1a; color: #5dff8a; border: 1px solid #5a5a5a; padding: 3px 6px; font-size: 11px; font-family: 'Courier New', monospace; } .debug-log__select { min-width: 130px; } .debug-log__search { flex: 1; min-width: 100px; } .debug-log__viewer { background: #050505; color: #c8c8c8; font-family: 'Courier New', 'Consolas', monospace; font-size: 10px; line-height: 1.45; border: 1px solid #2a2a2a; padding: 6px 8px; height: 240px; overflow-y: auto; border-radius: 3px; } .debug-log__viewer::-webkit-scrollbar { width: 10px; } .debug-log__viewer::-webkit-scrollbar-track { background: #1a1a1a; } .debug-log__viewer::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 5px; } .debug-log__empty { color: #5a5a5a; text-align: center; padding: 20px; font-style: italic; } .debug-log__row { display: grid; grid-template-columns: 80px 50px 90px 1fr; gap: 8px; padding: 1px 0; white-space: nowrap; overflow: hidden; } .debug-log__row--error { background: rgba(255, 64, 64, 0.08); } .debug-log__row--warn { background: rgba(255, 200, 0, 0.06); } .debug-log__time { color: #5a5a5a; } .debug-log__level { font-weight: 700; text-transform: uppercase; text-align: center; border-radius: 2px; padding: 0 4px; } .debug-log__level--trace { color: #5a5a5a; } .debug-log__level--debug { color: #6080a0; } .debug-log__level--info { color: #5dff8a; } .debug-log__level--warn { color: #ffcb6a; } .debug-log__level--error { color: #ff6060; background: rgba(255, 64, 64, 0.18); } .debug-log__cat { color: #b46af0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .debug-log__msg { color: #c8c8c8; overflow: hidden; text-overflow: ellipsis; } .debug-mode__section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #5a5240; font-weight: 700; margin-bottom: 8px; border-bottom: 1px dashed #d3cdb5; padding-bottom: 4px; } .debug-mode__section--danger .debug-mode__section-title { color: #c91d1d; border-bottom-color: #fca5a5; } .debug-mode__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; } .debug-mode__row-lbl { font-size: 11px; color: #5a5240; font-weight: 600; min-width: 180px; } .debug-mode__btn-day { min-width: 36px; } /* «Сбросить всё» — большая ярко-красная кнопка для полного wipe */ .debug-mode__btn-nuke { flex: 1; font-size: 14px; font-weight: 700; padding: 10px 18px; background: linear-gradient(180deg, #e3413a 0%, #962d29 100%); color: #fff; border: 1px solid #6b1f1c; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); letter-spacing: 0.3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(150, 45, 41, 0.4); transition: filter 0.1s ease; } .debug-mode__btn-nuke:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 10px rgba(150, 45, 41, 0.6); } .debug-mode__btn-nuke:active { filter: brightness(0.92); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); } .debug-mode__hint { font-size: 11px; color: #6b3d3d; font-style: italic; background: rgba(255, 240, 240, 0.7); border-left: 3px solid #c91d1d; padding: 6px 10px; margin-top: 6px; line-height: 1.4; } .debug-mode__log { max-height: 180px; overflow: auto; background: #1a1a2e; color: #5dff8a; font-family: 'Courier New', monospace; font-size: 11px; padding: 6px 8px; border-radius: 3px; } .debug-mode__log-empty { color: #555; font-style: italic; text-align: center; padding: 14px; } .debug-mode__log-row { display: flex; gap: 8px; padding: 1px 0; } .debug-mode__log-ts { color: #888; min-width: 60px; } .debug-mode__log-msg { color: #5dff8a; } /* «Открыть с помощью» — настоящий XP Open With диалог */ .openwith { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 12px; padding: 14px 16px 12px; gap: 10px; } .openwith__head { display: flex; align-items: center; gap: 14px; padding-bottom: 8px; border-bottom: 1px dashed #b6ad93; } .openwith__head-icon { font-size: 36px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); } .openwith__head-title { font-size: 13px; font-weight: 700; color: #0a3d91; } .openwith__head-sub { font-size: 11px; color: #5a5240; margin-top: 4px; } .openwith__intro { font-size: 11.5px; color: #1a1a1a; line-height: 1.5; } .openwith__radios { display: flex; flex-direction: column; gap: 4px; } .openwith__radio { display: flex; align-items: center; gap: 6px; font-size: 11.5px; cursor: pointer; } .openwith__list { flex: 1; background: #fff; border: 1px inset #888; display: flex; flex-direction: column; min-height: 100px; } .openwith__list-title { padding: 4px 8px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-bottom: 1px solid #a39778; font-size: 10.5px; color: #5a5240; font-weight: 700; } .openwith__list-body { flex: 1; overflow: auto; padding: 4px 0; } .openwith__item { display: flex; align-items: center; gap: 10px; padding: 4px 12px; cursor: pointer; font-size: 12px; } .openwith__item:hover { background: #f0eee0; } .openwith__item.is-selected { background: linear-gradient(180deg, #2c5cb6, #1a3f8b); color: #fff; } .openwith__item-icon { font-size: 18px; } .openwith__check { display: flex; align-items: center; gap: 6px; font-size: 11px; cursor: pointer; color: #5a5240; } .openwith__buttons { display: flex; justify-content: flex-end; gap: 6px; padding-top: 4px; border-top: 1px solid #b6ad93; margin-top: 4px; } .exestub { display: grid; grid-template-rows: auto auto 1fr auto; align-items: center; justify-items: center; gap: 12px; padding: 22px 28px; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; text-align: center; } .exestub__icon { font-size: 52px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); } .exestub__title { font-size: 13px; font-weight: 700; color: #0a3d91; } .exestub__text { font-size: 11px; color: #1a1a1a; line-height: 1.55; } .exestub__actions { display: flex; gap: 8px; margin-top: 6px; } .exestub__actions button { min-width: 80px; padding: 3px 12px; font-size: 11px; border: 1px solid #707070; background: linear-gradient(180deg, #fff 0%, #d5d1bc 100%); cursor: pointer; border-radius: 2px; } .exestub__actions button:hover { background: linear-gradient(180deg, #fff 0%, #ffdc6b 100%); } /* ============================================================================ ICQ — engine-driven chat view (.icq-chat / .icq-bubble) ============================================================================ */ .icq-chat { display: flex; flex-direction: column; background: #fff; border-top: 1px solid #b5b193; animation: icqExpand 180ms ease-out; min-height: 360px; } .icq-chat__bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: linear-gradient(180deg, #f7f6ec, #dad7b5); border: 1px solid #808080; border-right-color: #fff; border-bottom-color: #fff; font-family: 'Courier New', monospace; } .icq-chat__back { background: linear-gradient(180deg, #fff 0%, #d5d1bc 100%); border: 1px solid #707070; border-right-color: #f5f3e0; border-bottom-color: #f5f3e0; font-size: 11px; cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; } .icq-chat__back:hover { background: linear-gradient(180deg, #fff 0%, #ffdc6b 100%); } .icq-chat__avatar { width: 28px; height: 28px; display: grid; place-items: center; font-size: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 1px 0 rgba(0,0,0,0.2); } .icq-chat__who { display: flex; flex-direction: column; flex: 1; min-width: 0; } .icq-chat__name { font-size: 11px; font-weight: 700; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icq-chat__uin { font-size: 9px; color: #666; font-family: 'Courier New', monospace; } .icq-chat__log { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; overflow-y: auto; max-height: 340px; background: linear-gradient(180deg, #fffdf5 0%, #f5f1e2 100%); } .icq-chat__log::-webkit-scrollbar { width: 12px; } .icq-chat__log::-webkit-scrollbar-track { background: #ece9d8; } .icq-chat__log::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c9c5a5, #ada88e); border: 1px solid #808080; } .icq-chat__empty { text-align: center; color: #888; font-size: 10px; font-style: italic; padding: 18px 6px; } .icq-bubble { padding: 5px 8px 6px 8px; border: 1px solid #c8c5aa; font-size: 11px; line-height: 1.4; max-width: 88%; border-radius: 2px; box-shadow: 0 1px 0 rgba(0,0,0,0.03); animation: icqBubbleIn 180ms ease-out; } @keyframes icqBubbleIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } .icq-bubble--them { align-self: flex-start; background: #fffdf2; border-color: #d5cfa7; } .icq-bubble--me { align-self: flex-end; background: #e3efff; border-color: #9fb8e0; } .icq-bubble__head { font-size: 9px; font-weight: 700; padding-bottom: 2px; border-bottom: 1px dotted #d8d4b5; margin-bottom: 3px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .icq-bubble__author { font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: 0.2px; color: #0058e6; } .icq-bubble__time { font-size: 9px; color: #8a8475; font-weight: 400; font-family: 'Courier New', monospace; } .icq-bubble--me .icq-bubble__author { color: #1e5bc6; } .icq-bubble__body { white-space: pre-wrap; word-wrap: break-word; color: #1a1a1a; } .icq-bubble__attach { margin-top: 4px; padding: 3px 5px; background: #fff7d1; border: 1px dashed #c8a53b; font-family: 'Courier New', monospace; font-size: 10px; color: #5a4100; } /* Voice-message: круглая play-кнопка + 24-бар waveform + длительность */ .icq-voice { margin-top: 5px; padding: 5px 8px; background: linear-gradient(180deg, #fff8e0 0%, #ffe8a3 100%); border: 1px solid #c8a53b; border-radius: 16px; display: flex; align-items: center; gap: 8px; } .icq-voice__btn { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #ffba33 0%, #c98a10 100%); border: 1px solid #8a5a10; color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; cursor: pointer; text-shadow: 0 1px 0 #5a3a08; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.3); font-family: 'Courier New', monospace; } .icq-voice__btn:hover { background: linear-gradient(180deg, #ffd066 0%, #e09a18 100%); } .icq-voice__btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); } .icq-voice__wave { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; height: 24px; min-width: 100px; } .icq-voice__bar { display: inline-block; width: 3px; background: #b48a3a; border-radius: 2px; transition: background 100ms; flex-shrink: 0; } .icq-voice__bar.is-active { background: #c91d1d; box-shadow: 0 0 4px rgba(201, 29, 29, 0.6); } .icq-voice__time { font-family: 'Courier New', monospace; font-size: 10px; color: #5a4100; min-width: 32px; text-align: right; } /* Inline-цитата (для «me»-ответов): тонкий бар + усечённый исходный текст */ .icq-bubble__quote { display: flex; gap: 6px; align-items: stretch; background: rgba(0, 88, 230, 0.06); padding: 3px 5px; margin-bottom: 4px; border-radius: 2px; font-size: 10px; color: #5a5a6a; font-style: italic; } .icq-bubble__quote-bar { display: block; width: 3px; background: #5b78ff; border-radius: 2px; flex-shrink: 0; } .icq-bubble__quote-text { flex: 1; white-space: pre-wrap; overflow: hidden; } /* Кнопка «ПЕРЕВЕСТИ» — для шифрованных сообщений Кота */ .icq-bubble__translate-btn { display: inline-block; margin-top: 4px; padding: 2px 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; font-family: 'Courier New', monospace; background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%); color: #5dff8a; border: 1px solid #2a4a2a; border-radius: 2px; cursor: pointer; text-transform: uppercase; user-select: none; transition: background 100ms, transform 80ms; } .icq-bubble__translate-btn:hover { background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%); border-color: #5dff8a; transform: translateY(-1px); } .icq-bubble__translate-btn:active { transform: translateY(0); } .icq-bubble__translate-btn.is-active { background: linear-gradient(180deg, #2a4a2a 0%, #1a3a1a 100%); color: #aaffba; border-color: #5dff8a; } /* Body когда показан перевод — лёгкая зелёная подсветка */ .icq-bubble__body.is-translated { color: #4a4a4a; font-style: italic; background: rgba(93, 255, 138, 0.08); padding: 2px 4px; border-left: 2px solid #5dff8a; border-radius: 0 2px 2px 0; } /* Read receipt (правый-нижний угол) */ .icq-bubble__receipt { text-align: right; font-size: 11px; color: #4a78c8; margin-top: 2px; font-family: 'Courier New', monospace; letter-spacing: -1px; user-select: none; } /* Typing-индикатор (внизу чата) */ .icq-chat__typing { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 10px; color: #777; font-style: italic; align-self: flex-start; } .icq-chat__typing-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #777; animation: icqTypingDot 1s ease-in-out infinite; } .icq-chat__typing-dot:nth-child(2) { animation-delay: 0.15s; } .icq-chat__typing-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes icqTypingDot { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.85); } 30% { opacity: 1; transform: scale(1.1); } } .icq-chat__typing-text { margin-left: 4px; } .icq-choice:disabled { opacity: 0.45; cursor: not-allowed; } .icq-choice--skip { opacity: 0.6; font-style: italic; border-style: dotted; color: #8a7440; } .icq-choice--skip:hover { opacity: 0.95; } /* ----- ICQ choice expansion v2 — emoji / drag / input / reveal ------------ */ .icq-choices__emoji-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0; justify-content: center; } .icq-choice--emoji { width: 44px; height: 44px; font-size: 22px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #fff8d4 0%, #f5d770 100%); border: 2px outset #c8a93a; border-radius: 8px; cursor: pointer; transition: transform 0.08s ease; } .icq-choice--emoji:hover { transform: scale(1.08); } .icq-choice--emoji:active { transform: scale(0.94); border-style: inset; } .icq-choice--reveal { background: linear-gradient(180deg, #f5e4b8 0%, #d6a847 100%); color: #3a2a05; font-weight: bold; border: 2px outset #b88823; letter-spacing: 0.5px; text-shadow: 0 1px 0 rgba(255,255,255,0.6); animation: icq-reveal-pulse 1.6s ease-in-out infinite; } @keyframes icq-reveal-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 160, 60, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(212, 160, 60, 0); } } .icq-choice--input { border: 2px dashed #8a7440; background: linear-gradient(180deg, #fff8e0 0%, #ffe9a8 100%); color: #4a3d10; font-style: italic; } .icq-choice-input-row { display: flex; gap: 4px; align-items: center; margin: 2px 0; } .icq-choice-input { flex: 1; min-width: 0; height: 26px; padding: 2px 6px; border: 2px inset #8a7440; background: #fffef0; font-family: 'Tahoma', 'MS Sans Serif', sans-serif; font-size: 12px; color: #1a1a1a; } .icq-choice-input:focus { outline: 1px dotted #d68a28; outline-offset: -3px; } .icq-choice-input__send, .icq-choice-input__cancel { width: 26px; height: 26px; border: 2px outset #c8a93a; background: linear-gradient(180deg, #fff8d4 0%, #f5d770 100%); cursor: pointer; font-size: 12px; padding: 0; flex: 0 0 26px; } .icq-choice-input__send:active, .icq-choice-input__cancel:active { border-style: inset; } .icq-choice-input__cancel { color: #a83a3a; } /* ----- DRAG cards + Trash drop zone --------------------------------------- */ .icq-choices__drag-zone { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; border-top: 1px dotted #8a7440; border-bottom: 1px dotted #8a7440; margin: 4px 0; } .icq-choices__drag-cards { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .icq-choice--drag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 2px outset #c8a93a; background: linear-gradient(180deg, #fff8d4 0%, #f5e0a3 100%); border-radius: 4px; cursor: grab; user-select: none; font-family: 'Tahoma', sans-serif; font-size: 11px; color: #3a2a05; max-width: 200px; } .icq-choice--drag:active { cursor: grabbing; } .icq-choice--drag.is-dragging { opacity: 0.35; } .icq-choice--drag.is-disabled { opacity: 0.5; pointer-events: none; } .icq-choice__drag-icon { font-size: 16px; } .icq-choice__drag-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .icq-drop-trash { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 20px; border: 2px dashed #a83a3a; background: rgba(200, 50, 50, 0.08); color: #6a1a1a; border-radius: 6px; font-size: 11px; pointer-events: auto; } .icq-drop-trash.is-over { background: rgba(200, 50, 50, 0.25); border-color: #ff3a3a; border-style: solid; transform: scale(1.05); transition: transform 0.1s ease; } .icq-drop-trash__icon { font-size: 22px; } .icq-drop-trash__label { font-weight: bold; letter-spacing: 0.5px; } /* Floating ghost while dragging */ .icq-drag-ghost { position: fixed; pointer-events: none; z-index: 199999; transform: translate(-50%, -50%); padding: 4px 10px; border: 2px outset #c8a93a; background: rgba(255, 248, 212, 0.95); font-family: 'Tahoma', sans-serif; font-size: 11px; color: #3a2a05; border-radius: 4px; box-shadow: 2px 4px 8px rgba(0,0,0,0.25); white-space: nowrap; } .icq-choice--escape { font-style: italic; opacity: 0.85; } /* ============================================================================ ICQ DEBUG PANEL — dev-only overlay (Alt+I) ============================================================================ */ .icq-debug { position: fixed; top: 60px; right: 20px; width: 360px; max-height: calc(100vh - 100px); overflow-y: auto; z-index: 99999; background: #1a1a1a; color: #0f0; font-family: 'Courier New', monospace; font-size: 11px; border: 2px solid #444; box-shadow: 0 8px 30px rgba(0,0,0,0.8); padding: 8px 10px; border-radius: 4px; } .icq-debug__head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #0f0; padding-bottom: 4px; margin-bottom: 6px; } .icq-debug__head b { color: #0f0; font-size: 12px; letter-spacing: 1px; } .icq-debug__head button { background: #330; color: #f55; border: 1px solid #722; cursor: pointer; width: 22px; height: 22px; font-size: 14px; font-weight: 700; } .icq-debug__row { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .icq-debug__row > span { font-size: 10px; color: #9f9; } .icq-debug__row button, .icq-debug__row input { background: #222; color: #0f0; border: 1px solid #0f0; font-family: inherit; font-size: 10px; padding: 3px 6px; cursor: pointer; } .icq-debug__row button:hover { background: #060; color: #fff; } .icq-debug__row input { cursor: text; } .icq-debug__block { margin-top: 6px; padding: 4px 6px; border: 1px solid #333; background: #0a0a0a; } .icq-debug__block.is-ok { border-color: #0a0; background: #001a00; } .icq-debug__block.is-fail { border-color: #a00; background: #1a0000; color: #f99; } .icq-debug__block ul { list-style: none; padding: 4px 0 0 0; margin: 0; } .icq-debug__block li { font-size: 10px; padding: 1px 0; word-wrap: break-word; } .icq-debug__block li.ok { color: #6f6; } .icq-debug__block li.fail { color: #f66; } .icq-debug__block li code { font-size: 9px; color: #fc6; background: #222; padding: 0 3px; } /* ============================================================================ TOAST NOTIFICATIONS — bottom-right popup stack ============================================================================ */ .toast-host { position: fixed; bottom: 50px; /* above taskbar */ right: 16px; display: flex; flex-direction: column-reverse; /* newest on bottom (closest to bar) */ gap: 8px; z-index: 99000; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 320px; padding: 10px 12px; background: linear-gradient(180deg, #ffffff 0%, #f0f6ff 100%); border: 1px solid #5b8dc8; border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 30, 80, 0.25), inset 0 1px 0 rgba(255,255,255,0.6); font-family: 'Inter', sans-serif; font-size: 12px; color: #1a2238; animation: toast-slide 220ms ease-out; } @keyframes toast-slide { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .toast.is-clickable { cursor: pointer; } .toast.is-clickable:hover { background: linear-gradient(180deg, #fbfdff 0%, #e1ecff 100%); } .toast__icon { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; font-size: 18px; border-radius: 4px; background: #ffffff; border: 1px solid #c5d3e8; } .toast__body { flex: 1; min-width: 0; } .toast__title { font-weight: 700; font-size: 11px; color: #0a3a8a; margin-bottom: 2px; text-transform: none; } .toast__msg { font-size: 12px; line-height: 1.35; color: #1a2238; word-break: break-word; } .toast__close { background: transparent; border: 0; font-size: 16px; line-height: 1; cursor: pointer; color: #5a6b85; padding: 0 4px; align-self: flex-start; } .toast__close:hover { color: #c0392b; } /* type variants */ .toast--success { border-color: #4a9d3b; } .toast--success .toast__title { color: #2c6f1f; } .toast--warn { border-color: #d49a1a; background: linear-gradient(180deg, #fffbe6 0%, #fff4cc 100%); } .toast--warn .toast__title { color: #7a5500; } .toast--error { border-color: #c0392b; background: linear-gradient(180deg, #fff0ee 0%, #ffe0db 100%); } .toast--error .toast__title { color: #8a2218; } .toast--icq { border-color: #f5c542; background: linear-gradient(180deg, #fffceb 0%, #fff5d0 100%); } .toast--icq .toast__title { color: #9a6f00; } /* ============================================================================ RUN DIALOG — XP-style program launcher ============================================================================ */ .run-dialog__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.18); z-index: 98000; display: grid; place-items: center; animation: fade-in 150ms ease-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .run-dialog { width: 460px; background: #ece9d8; border: 1px solid #4870b8; border-radius: 6px 6px 0 0; box-shadow: 0 8px 32px rgba(0,0,0,0.4); font-family: 'Inter', sans-serif; overflow: hidden; } .run-dialog__title { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 10px; background: linear-gradient(90deg, #0a3a92 0%, #2c5fb8 50%, #0a3a92 100%); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.3px; } .run-dialog__title button { width: 22px; height: 22px; background: linear-gradient(180deg, #d83a2a 0%, #a01a10 100%); border: 1px solid #6a0a06; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 3px; } .run-dialog__body { display: flex; gap: 14px; padding: 16px 16px 12px 16px; } .run-dialog__icon { flex-shrink: 0; } .run-dialog__form { flex: 1; display: flex; flex-direction: column; gap: 8px; } .run-dialog__hint { font-size: 12px; line-height: 1.4; color: #2a2a2a; } .run-dialog__row { display: flex; align-items: center; gap: 8px; } .run-dialog__row label { font-size: 12px; color: #1a1a1a; min-width: 60px; } .run-dialog__row input { flex: 1; padding: 4px 6px; font-family: 'Courier New', monospace; font-size: 13px; border: 1px solid #7d99c2; border-top-color: #4a6a96; border-left-color: #4a6a96; background: #fff; outline: none; } .run-dialog__row input:focus { border-color: #2a5a96; box-shadow: 0 0 0 2px rgba(74,138,210,0.3); } .run-dialog__error { font-size: 11px; color: #a02020; background: #ffeaea; border: 1px solid #d8a0a0; padding: 3px 6px; border-radius: 3px; } .run-dialog__actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; } .run-dialog__btn { padding: 4px 16px; min-width: 70px; background: linear-gradient(180deg, #f9f9f5 0%, #d7d4c5 100%); border: 1px solid #8a8a7a; border-radius: 3px; font-size: 12px; cursor: pointer; font-family: inherit; } .run-dialog__btn:hover { background: linear-gradient(180deg, #ffffff 0%, #e0dccc 100%); } .run-dialog__btn:active { background: #c8c5b6; } .run-dialog__btn--primary { border-color: #2a5a96; font-weight: 700; } /* ============================================================================ START MENU SEARCH — filter input above the apps list ============================================================================ */ .start-menu__search { position: relative; padding: 8px 10px; background: #fafafa; border-bottom: 1px solid #d8d8d8; display: flex; align-items: center; gap: 6px; } .start-menu__search-icon { font-size: 13px; opacity: 0.6; flex-shrink: 0; } .start-menu__search input { flex: 1; padding: 4px 6px; font-size: 12px; font-family: 'Inter', sans-serif; border: 1px solid #b0b0b0; border-radius: 3px; background: #fff; outline: none; } .start-menu__search input:focus { border-color: #4a8ad0; box-shadow: 0 0 0 2px rgba(74,138,210,0.15); } .start-menu__search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 0; background: transparent; font-size: 14px; color: #888; cursor: pointer; border-radius: 3px; } .start-menu__search-clear:hover { background: #ddd; color: #c0392b; } .start-menu__empty { padding: 20px 12px; text-align: center; font-size: 12px; color: #555; line-height: 1.6; } .start-menu__empty .muted { font-size: 10px; color: #999; } /* ============================================================================ MATRIX MODE — green glow over body, triggered by /run matrix ============================================================================ */ body.cf-matrix-mode { filter: hue-rotate(80deg) saturate(2) contrast(1.05); animation: matrix-flicker 8s linear; } @keyframes matrix-flicker { 0%, 100% { filter: hue-rotate(80deg) saturate(2) contrast(1.05); } 50% { filter: hue-rotate(120deg) saturate(2.5) contrast(1.15); } } /* ============================================================================ BSOD OVERLAY — triggered by /run bsod ============================================================================ */ .bsod-overlay { position: fixed; inset: 0; background: #0058a8; color: #fff; font-family: 'Courier New', monospace; font-size: 14px; z-index: 999999; padding: 80px 60px; cursor: pointer; animation: fade-in 180ms ease-out; } .bsod-overlay pre { white-space: pre-wrap; margin: 0; font-family: inherit; line-height: 1.5; } /* ============================================================================ SOUND POPOVER — volume mixer above the tray ============================================================================ */ .sound-toggle__wrap { position: relative; display: inline-flex; } .sound-popover { position: absolute; bottom: calc(100% + 6px); right: -6px; width: 240px; padding: 10px 12px 8px; background: linear-gradient(180deg, #f4f7fc 0%, #d8e2f2 100%); border: 1px solid #5b7aa8; border-radius: 6px 6px 4px 4px; box-shadow: 0 6px 18px rgba(10, 30, 80, 0.35); font-family: 'Inter', sans-serif; font-size: 11px; color: #1a2238; z-index: 80; animation: pop-in 140ms ease-out; } @keyframes pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .sound-popover::after { content: ''; position: absolute; bottom: -7px; right: 14px; width: 12px; height: 12px; background: #d8e2f2; border-right: 1px solid #5b7aa8; border-bottom: 1px solid #5b7aa8; transform: rotate(45deg); } .sound-popover__row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .sound-popover__mute { width: 28px; height: 28px; border: 1px solid #5b7aa8; background: #fff; border-radius: 4px; cursor: pointer; font-size: 14px; padding: 0; display: grid; place-items: center; } .sound-popover__mute:hover { background: #fff8d6; } .sound-popover__slider { flex: 1; height: 18px; cursor: pointer; accent-color: #2a5a96; } .sound-popover__slider:disabled { opacity: 0.4; cursor: not-allowed; } .sound-popover__pct { min-width: 38px; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #2a3a5a; } .sound-popover__presets { gap: 4px; margin-bottom: 4px; } .sound-popover__presets button { flex: 1; padding: 3px 6px; font-size: 10px; background: #fff; border: 1px solid #8aa3c2; border-radius: 3px; cursor: pointer; color: #1a2238; } .sound-popover__presets button:hover { background: #fff8d6; border-color: #d49a1a; } .sound-popover__hint { font-size: 9px; color: #6a7488; text-align: center; border-top: 1px dashed #b0b8c8; padding-top: 4px; margin-top: 2px; } .sound-popover__hint code { font-family: 'Courier New', monospace; font-size: 9px; background: #fff; border: 1px solid #c0c8d8; padding: 0 3px; border-radius: 2px; color: #2a5a96; } /* ============================================================================ ACHIEVEMENTS APP — list of unlocks across the 21-day event ============================================================================ */ .ach { display: flex; height: 100%; font-family: 'Inter', sans-serif; background: #f4f0e1; } .ach__side { width: 220px; padding: 12px 10px; background: linear-gradient(180deg, #e8f0fc 0%, #c8d7ee 100%); border-right: 1px solid #5b7aa8; font-size: 11px; color: #1a2238; display: flex; flex-direction: column; gap: 8px; } .ach__title { font-weight: 700; font-size: 13px; color: #0a3a8a; margin: 0 0 4px 0; } .ach__progress { background: #fff; border: 1px solid #8aa3c2; border-radius: 3px; height: 16px; position: relative; overflow: hidden; } .ach__progress-bar { height: 100%; background: linear-gradient(90deg, #4a8ad0 0%, #2a5a96 100%); transition: width 240ms ease; } .ach__progress-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #1a1a1a; text-shadow: 0 0 2px #fff; } /* SIDNI «Журнал» — мини-прогресс на боковой панели Achievements */ .ach__sidni { margin-top: 8px; background: linear-gradient(180deg, #fff5e8 0%, #ffe9c4 100%); border: 1px solid #d4a93a; border-radius: 3px; padding: 5px 7px; } .ach__sidni-head { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; color: #6b4a10; margin-bottom: 3px; } .ach__sidni-num { font-family: 'Consolas', monospace; background: rgba(0, 0, 0, 0.08); padding: 1px 5px; border-radius: 2px; } .ach__sidni-bar { background: rgba(255, 255, 255, 0.6); border: 1px solid #c89020; border-radius: 2px; height: 8px; overflow: hidden; } .ach__sidni-bar-fill { height: 100%; background: linear-gradient(90deg, #f3a017 0%, #c5670a 100%); transition: width 300ms ease; } .ach__filter { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; } .ach__filter button { text-align: left; padding: 4px 8px; background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-size: 11px; color: #1a2238; font-family: inherit; } .ach__filter button:hover { background: #fff; } .ach__filter button.active { background: #fff; border-color: #5b7aa8; font-weight: 700; } .ach__filter button .count { float: right; opacity: 0.6; } .ach__main { flex: 1; padding: 12px; overflow-y: auto; } .ach__list { display: grid; grid-template-columns: 1fr; gap: 6px; } .ach__card { display: flex; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid #c8c0a0; border-radius: 5px; font-size: 12px; color: #1a1a1a; position: relative; } .ach__card.locked { opacity: 0.55; filter: grayscale(0.8); background: #ece9d8; } .ach__card.locked .ach__icon { filter: grayscale(1); } .ach__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 6px; background: linear-gradient(180deg, #ffd966 0%, #d49a1a 100%); display: grid; place-items: center; font-size: 26px; border: 1px solid #a87a10; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .ach__card.locked .ach__icon { background: linear-gradient(180deg, #ccc 0%, #888 100%); border-color: #555; } .ach__body { flex: 1; min-width: 0; } .ach__name { font-weight: 700; font-size: 13px; color: #1a2238; } .ach__desc { font-size: 11px; color: #4a5468; margin-top: 2px; line-height: 1.4; } .ach__hint { font-size: 10px; color: #8a7440; margin-top: 4px; font-style: italic; } .ach__date { position: absolute; top: 6px; right: 8px; font-size: 9px; font-family: 'JetBrains Mono', monospace; color: #6a7488; } .ach__rare { display: inline-block; padding: 1px 5px; border-radius: 2px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; vertical-align: middle; } .ach__rare--common { background: #a8b8c8; color: #fff; } .ach__rare--rare { background: #4a8ad0; color: #fff; } .ach__rare--epic { background: #9a4ad0; color: #fff; } .ach__rare--secret { background: #2a2a2a; color: #f5c542; border: 1px solid #d49a1a; } .ach__empty { text-align: center; padding: 40px; color: #8a8a8a; font-style: italic; } /* ============================================================================ BARSIK CAT — pixel cat that walks across the desktop ============================================================================ */ .barsik { position: fixed; bottom: 36px; z-index: 95; pointer-events: auto; cursor: pointer; user-select: none; font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); transition: transform 80ms steps(2); will-change: left, transform; } .barsik:hover { transform: scale(1.18) rotate(-4deg); } .barsik__bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #d49a1a; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-family: 'Inter', sans-serif; color: #1a1a1a; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.18); margin-bottom: 6px; pointer-events: none; } .barsik__bubble::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: #fff; border-right: 1px solid #d49a1a; border-bottom: 1px solid #d49a1a; } /* ============================================================= DISPLAY PROPERTIES DIALOG (Свойства экрана) ============================================================= */ .disp-props { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-size: 12px; } .disp-props__tabs { display: flex; flex-wrap: wrap; gap: 0 0; row-gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid #aca899; background: #ece9d8; /* Гарантируем что вкладки не вылезают за окно — переносим на новую строку, если не помещаются. */ min-width: 0; } .disp-props__tab { padding: 4px 12px; background: linear-gradient(180deg, #f5f4ea 0%, #d8d3bc 100%); border: 1px solid #aca899; border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; color: #1a1a1a; margin-right: 2px; user-select: none; white-space: nowrap; flex: 0 0 auto; } .disp-props__tab.active { background: linear-gradient(180deg, #ffffff 0%, #ece9d8 100%); border-color: #aca899; font-weight: 600; position: relative; z-index: 2; margin-bottom: -1px; padding-bottom: 5px; } .disp-props__tab[disabled], .disp-props__tab.disabled { color: #999; cursor: not-allowed; } .disp-props__panel { flex: 1 1 auto; min-height: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, #fdfdfd 0%, #ece9d8 100%); overflow: auto; } .disp-props__monitor { align-self: center; flex: 0 0 auto; /* ← фикс: не сплющивается флекс-контейнером */ box-sizing: border-box; width: 220px; height: 168px; padding: 12px 12px 22px; background: linear-gradient(180deg, #c4c0a8 0%, #aaa590 100%); border-radius: 14px 14px 18px 18px; border: 1px solid #888368; box-shadow: 0 4px 12px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.4); position: relative; } .disp-props__monitor::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 70px; height: 8px; background: linear-gradient(180deg, #aaa590 0%, #7a7560 100%); border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .disp-props__screen { box-sizing: border-box; width: 100%; height: 100%; min-height: 100px; /* ← страховка против схлопывания */ border: 2px solid #2a2a1a; background: #4a92ff; background-size: cover !important; background-position: center !important; position: relative; overflow: hidden; } .disp-props__screen::after { content: ""; position: absolute; left: 6%; bottom: 4%; width: 38%; height: 4px; background: rgba(255,255,255,0.5); border-radius: 2px; } .disp-props__row { display: flex; gap: 12px; align-items: flex-start; } .disp-props__col { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; } .disp-props__label { font-size: 11px; color: #1a1a1a; } .disp-props__list { height: 130px; background: #fff; border: 1px solid #7f9db9; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.08); overflow-y: auto; padding: 0; } .disp-props__list-item { display: flex; align-items: center; gap: 8px; padding: 3px 8px; cursor: pointer; font-size: 12px; color: #1a1a1a; user-select: none; } .disp-props__list-item:hover { background: #f0f4ff; } .disp-props__list-item.selected { background: #316ac5; color: #fff; } .disp-props__list-item.locked { color: #888; font-style: italic; } .disp-props__list-swatch { width: 22px; height: 16px; border: 1px solid #555; flex: 0 0 auto; background-size: cover !important; background-position: center !important; } .disp-props__select, .disp-props__select select { background: #fff; border: 1px solid #7f9db9; padding: 2px 4px; font-size: 12px; font-family: inherit; width: 100%; cursor: pointer; } .disp-props__buttons { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px; background: #ece9d8; border-top: 1px solid #aca899; } .disp-props__btn { min-width: 78px; padding: 3px 12px; background: linear-gradient(180deg, #fdfdfd 0%, #d3d0bc 100%); border: 1px solid #6a6a4a; border-radius: 3px; cursor: pointer; font-size: 12px; color: #1a1a1a; } .disp-props__btn:hover { background: linear-gradient(180deg, #ffffe6 0%, #dcd9c5 100%); } .disp-props__btn:disabled { color: #888; cursor: not-allowed; background: linear-gradient(180deg, #f0eee0 0%, #d3d0bc 100%); } .disp-props__btn--primary { font-weight: 600; border-color: #2a4d8e; } .disp-props__stub { display: grid; place-items: center; height: 100%; color: #555; font-size: 12px; line-height: 1.6; text-align: center; padding: 20px; } .disp-props__stub-icon { font-size: 38px; opacity: 0.4; margin-bottom: 8px; } /* --- Extended Settings v2 (themes / screensaver / appearance / settings) --- */ .disp-props__list--tall { height: 178px; } .disp-props__hint { font-size: 11px; color: #475569; background: rgba(255,255,255,0.5); border: 1px solid #d3d0bc; padding: 6px 8px; border-radius: 3px; line-height: 1.5; } .disp-props__theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; } .disp-props__theme-card { border: 1px solid #aca899; background: #fff; border-radius: 3px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color 80ms, box-shadow 80ms; } .disp-props__theme-card:hover { border-color: #316ac5; } .disp-props__theme-card.selected { border-color: #316ac5; box-shadow: 0 0 0 2px #b8d0f5 inset; } .disp-props__theme-swatch { height: 32px; border: 1px solid #888; border-radius: 2px; } .disp-props__theme-name { font-size: 11px; color: #1a1a1a; text-align: center; line-height: 1.2; } .disp-props__preview-titlebar { position: absolute; top: 4px; left: 4px; right: 4px; height: 14px; color: #fff; font-size: 9px; padding: 0 4px; display: flex; align-items: center; border-radius: 2px 2px 0 0; text-shadow: 0 1px 0 rgba(0,0,0,0.4); } .disp-props__preview-taskbar { position: absolute; bottom: 0; left: 0; right: 0; height: 12px; } .disp-props__preview-body { position: absolute; top: 22px; left: 4px; right: 4px; bottom: 16px; background: rgba(255,255,255,0.85); color: #111; display: grid; place-items: center; font-family: Tahoma, sans-serif; } /* ============================================================= TRAY CALENDAR POPUP ============================================================= */ .taskbar__tray-clock { cursor: pointer; } .taskbar__tray-clock:hover { background: rgba(255,255,255,0.08); } .tray-cal { position: fixed; bottom: 46px; right: 6px; width: 232px; background: #ece9d8; border: 1px solid #4a6ea5; box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.4) inset; border-radius: 4px; z-index: 9000; font-size: 12px; color: #1a1a1a; user-select: none; overflow: hidden; } .tray-cal__header { background: linear-gradient(180deg, #245edc 0%, #1e4fbf 60%, #173d96 100%); color: #fff; padding: 5px 8px; font-weight: 600; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); display: flex; justify-content: space-between; align-items: center; } .tray-cal__day { background: rgba(245, 197, 66, 0.2); border-bottom: 1px solid #d4cfa8; padding: 6px 8px; font-size: 11px; color: #6a3300; } .tray-cal__day b { color: #c1421a; } .tray-cal__day .hint { color: #6a3300; opacity: 0.8; display: block; margin-top: 2px; font-size: 10px; } .tray-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 6px; gap: 1px; } .tray-cal__wd { text-align: center; font-size: 10px; color: #555; font-weight: 600; padding: 2px 0; } .tray-cal__cell { text-align: center; font-size: 11px; padding: 3px 0; border-radius: 2px; cursor: default; } .tray-cal__cell.dim { color: #b8b3a0; } .tray-cal__cell.today { background: #c1421a; color: #fff; font-weight: 700; border-radius: 50%; width: 22px; height: 22px; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 0; } .tray-cal__cell.weekend { color: #c1421a; } .tray-cal__cell.dim.weekend { color: #d8a89c; } .tray-cal__footer { border-top: 1px solid #d4cfa8; padding: 6px 8px; background: linear-gradient(180deg, #f5f4ea 0%, #ece9d8 100%); font-size: 10px; color: #475569; display: flex; justify-content: space-between; } .tray-cal__footer a { color: #0a3d91; text-decoration: none; cursor: pointer; } .tray-cal__footer a:hover { text-decoration: underline; } /* =================================================================== Quake (DOSBox via js-dos) — overrides on top of .doom__* shared styles. QuakeApp uses className="doom quake" so it inherits all .doom__* layout. These overrides only re-skin the splash, logo and accent colour. =================================================================== */ .doom.quake .doom__chrome { background: linear-gradient(180deg, #2a1505 0%, #150a02 100%); } .doom.quake .doom__chrome-btn { background: #4a2510; color: #d4a64a; border: 1px solid #7a4a10; } .doom.quake .doom__chrome-btn:hover { background: #6a3818; } .doom.quake .doom__badge { background: #5a3010; color: #d4a64a; border-color: #7a4a10; } .doom.quake .doom__splash { background: radial-gradient(ellipse at center, #3a2510 0%, #0a0502 75%); color: #d4a64a; } .doom.quake .doom__logo { color: #d4a64a; text-shadow: 0 0 18px #a82a0e, 0 4px 0 #5a1a05, 0 8px 22px rgba(168,42,14,0.7); letter-spacing: 14px; } .doom.quake .doom__tag { color: #a82a0e; } .doom.quake .doom__go { background: linear-gradient(180deg, #8a2010 0%, #4a1005 100%); border-color: #d4a64a; box-shadow: 0 0 18px rgba(168,42,14,0.55); } /* Loading & error screens take the brown/orange palette too. The JSX reuses .doom__loading, .doom__error-screen, etc. — these selectors nest under .doom.quake so the doom variant stays untouched. */ .doom.quake .doom__loading { background: radial-gradient(ellipse at center, #2a1505 0%, #0a0502 75%); } .doom.quake .doom__loading-logo { color: #d4a64a; text-shadow: 0 0 14px #a82a0e, 0 4px 0 #5a1a05; } .doom.quake .doom__loading-spinner span { background: #d4a64a; } .doom.quake .doom__loading-txt { color: #c9b888; } .doom.quake .doom__error-screen { background: radial-gradient(ellipse at center, #2a1505 0%, #0a0502 75%); color: #e8d8b8; } .doom.quake .doom__error-title { color: #d4a64a; } .doom.quake .doom__error-msg { color: #c9b888; } .doom.quake .doom__error-hint { color: #8a7050; } .doom.quake .doom__error-hint code, .doom.quake .doom__error-msg code { background: #1a0e05; border: 1px solid #5a3010; color: #f5c542; } .doom.quake .doom__focus-btn { background: linear-gradient(180deg, #8a2010 0%, #4a1005 100%); border: 1px solid #d4a64a; color: #fff; } /* =================================================================== Warcraft: Orcs & Humans (DOSBox via js-dos) — overrides on top of .doom__* shared styles. Uses className="doom warcraft" so it inherits layout, only re-skinned with green/gold human-knight palette. =================================================================== */ .doom.warcraft .doom__chrome { background: linear-gradient(180deg, #1f3a18 0%, #0e1f08 100%); } .doom.warcraft .doom__chrome-btn { background: #2a4a20; color: #f5e2a4; border: 1px solid #5a7a30; } .doom.warcraft .doom__chrome-btn:hover { background: #3a6a30; } .doom.warcraft .doom__badge { background: #2a4a20; color: #f5e2a4; border-color: #5a7a30; } .doom.warcraft .doom__splash { background: radial-gradient(ellipse at center, #1a3a14 0%, #0a1a05 75%); color: #f5e2a4; } .doom.warcraft .doom__logo { color: #f5e2a4; text-shadow: 0 0 18px #d6b54a, 0 4px 0 #5a3a10, 0 8px 22px rgba(214,181,74,0.55); letter-spacing: 10px; font-family: Georgia, "Times New Roman", serif; } .doom.warcraft .doom__tag { color: #d6b54a; letter-spacing: 2px; } .doom.warcraft .doom__go { background: linear-gradient(180deg, #5a7a30 0%, #2a4a18 100%); border-color: #d6b54a; color: #fff5d8; box-shadow: 0 0 18px rgba(214,181,74,0.45); } .doom.warcraft .doom__loading { background: radial-gradient(ellipse at center, #1a3a14 0%, #0a1a05 75%); } .doom.warcraft .doom__loading-logo { color: #f5e2a4; text-shadow: 0 0 14px #d6b54a, 0 4px 0 #5a3a10; font-family: Georgia, "Times New Roman", serif; } .doom.warcraft .doom__loading-spinner span { background: #d6b54a; } .doom.warcraft .doom__loading-txt { color: #c8d8a8; } .doom.warcraft .doom__error-screen { background: radial-gradient(ellipse at center, #1a3a14 0%, #0a1a05 75%); color: #e8d8b8; } .doom.warcraft .doom__error-title { color: #f5e2a4; } .doom.warcraft .doom__error-msg { color: #c8d8a8; } .doom.warcraft .doom__error-hint { color: #8a9070; } .doom.warcraft .doom__error-hint code, .doom.warcraft .doom__error-msg code { background: #0e1f08; border: 1px solid #2a4a20; color: #f5e2a4; } .doom.warcraft .doom__focus-btn { background: linear-gradient(180deg, #5a7a30 0%, #2a4a18 100%); border: 1px solid #d6b54a; color: #fff5d8; } /* =================================================================== Warcraft II: Tides of Darkness (DOSBox via js-dos) — overrides on top of .doom__* shared styles. Uses className="doom wc2" with an orcish red/iron palette: hot-iron oranges and bloody reds. =================================================================== */ .doom.wc2 .doom__chrome { background: linear-gradient(180deg, #2a0a05 0%, #150302 100%); } .doom.wc2 .doom__chrome-btn { background: #4a0e08; color: #f0c878; border: 1px solid #7a2010; } .doom.wc2 .doom__chrome-btn:hover { background: #6a1810; } .doom.wc2 .doom__badge { background: #4a0e08; color: #f0c878; border-color: #7a2010; } .doom.wc2 .doom__splash { background: radial-gradient(ellipse at center, #3a0e08 0%, #0a0202 75%); color: #f0c878; } .doom.wc2 .doom__logo { color: #f0c878; text-shadow: 0 0 18px #c83018, 0 4px 0 #5a1005, 0 8px 22px rgba(200,48,24,0.7); letter-spacing: 10px; font-family: Georgia, "Times New Roman", serif; } .doom.wc2 .doom__tag { color: #c83018; letter-spacing: 2px; } .doom.wc2 .doom__go { background: linear-gradient(180deg, #a82010 0%, #5a0a05 100%); border-color: #f0c878; color: #fff5d8; box-shadow: 0 0 18px rgba(200,48,24,0.55); } .doom.wc2 .doom__loading { background: radial-gradient(ellipse at center, #3a0e08 0%, #0a0202 75%); } .doom.wc2 .doom__loading-logo { color: #f0c878; text-shadow: 0 0 14px #c83018, 0 4px 0 #5a1005; font-family: Georgia, "Times New Roman", serif; } .doom.wc2 .doom__loading-spinner span { background: #f0c878; } .doom.wc2 .doom__loading-txt { color: #d8b888; } .doom.wc2 .doom__error-screen { background: radial-gradient(ellipse at center, #3a0e08 0%, #0a0202 75%); color: #e8c8a8; } .doom.wc2 .doom__error-title { color: #f0c878; } .doom.wc2 .doom__error-msg { color: #d8b888; } .doom.wc2 .doom__error-hint { color: #9a7050; } .doom.wc2 .doom__error-hint code, .doom.wc2 .doom__error-msg code { background: #150302; border: 1px solid #5a1005; color: #f0c878; } .doom.wc2 .doom__focus-btn { background: linear-gradient(180deg, #a82010 0%, #5a0a05 100%); border: 1px solid #f0c878; color: #fff; } /* ===================================================================== ANONTALK FORUM — 2ch-style image board (Internet Explorer home page) ===================================================================== */ .forum { font-family: Tahoma, Verdana, "MS Sans Serif", sans-serif; background: #ffffee; color: #800000; width: 100%; min-height: 100%; padding: 12px 16px 28px 16px; box-sizing: border-box; overflow-y: auto; font-size: 12px; } .forum--err { padding: 32px; text-align: center; } .forum--err h2 { color: #800000; margin: 12px 0; } .forum--err a { color: #0000ee; } /* === Masthead (forum home) === */ .forum__masthead { text-align: center; border-bottom: 1px solid #800000; padding-bottom: 8px; margin-bottom: 16px; } .forum__logo { font-family: "Times New Roman", Times, serif; font-size: 38px; font-weight: bold; color: #800000; letter-spacing: -1px; line-height: 1; } .forum__logo span { font-size: 28px; font-weight: normal; color: #800000; margin-left: 2px; } .forum__tagline { font-size: 11px; color: #707070; margin-top: 2px; } .forum__day { display: inline-block; margin-top: 6px; background: #fff8d8; border: 1px solid #d8b888; padding: 2px 10px; font-size: 11px; color: #604030; border-radius: 2px; } .forum__day--scheduled { background: linear-gradient(180deg, #fff3d0 0%, #fde8a8 100%); border-color: #d4a93a; color: #6b4a10; font-weight: 700; } /* === Empty-state баннер «ивент еще не начался» на главной форума === */ .forum__sched-banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin: 12px 0 16px; background: linear-gradient(180deg, #fff8e8 0%, #fff3d0 100%); border: 1px dashed #d4a93a; border-radius: 4px; color: #5a4a20; } .forum__sched-icon { font-size: 36px; line-height: 1; flex-shrink: 0; opacity: 0.85; } .forum__sched-text { flex: 1; } .forum__sched-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: #4a3810; } .forum__sched-sub { font-size: 12px; margin-bottom: 4px; line-height: 1.4; } .forum__sched-hint { font-size: 11px; color: #7a6840; font-style: italic; } /* === Board cards on home === */ .forum__boards-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .forum__board-card { background: #f8efdc; border: 1px solid #d8b888; padding: 10px 12px; cursor: pointer; transition: background 0.1s; } .forum__board-card:hover { background: #fff5d8; border-color: #800000; } .forum__board-name { font-weight: bold; color: #117743; font-size: 16px; font-family: "Courier New", monospace; } .forum__board-fullname { font-size: 13px; font-weight: bold; color: #800000; margin-top: 2px; } .forum__board-tagline { font-size: 11px; color: #707070; margin-top: 4px; } /* === Recent threads list (home page) === */ .forum__recent { background: #f8efdc; border: 1px solid #d8b888; padding: 8px 10px; margin-bottom: 12px; } .forum__recent-h { font-weight: bold; color: #800000; margin-bottom: 6px; font-size: 13px; } .forum__recent-empty { color: #707070; font-style: italic; padding: 8px 0; } .forum__recent-row { padding: 3px 4px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; border-bottom: 1px dotted #d8b888; font-size: 12px; } .forum__recent-row:last-child { border-bottom: none; } .forum__recent-row:hover { background: #fff5d8; } .forum__recent-board { color: #117743; font-family: "Courier New", monospace; font-weight: bold; min-width: 32px; } .forum__recent-title { color: #0000ee; flex: 1; text-decoration: underline; } .forum__recent-row:hover .forum__recent-title { color: #ee0000; } .forum__recent-count { color: #707070; font-size: 11px; } .forum__recent-new { background: #cc0000; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 2px; font-weight: bold; } /* === Board head + thread cards === */ .forum__board-head { border-bottom: 1px solid #800000; padding-bottom: 6px; margin-bottom: 12px; } .forum__board-head a { color: #0000ee; font-size: 11px; text-decoration: underline; cursor: pointer; } .forum__board-head h2 { color: #800000; font-size: 22px; margin: 4px 0 2px 0; font-family: "Times New Roman", Times, serif; } .forum__threads { display: flex; flex-direction: column; gap: 6px; } .forum__threads-empty { padding: 32px; text-align: center; color: #707070; font-style: italic; } .forum__thread-card { background: #f8efdc; border: 1px solid #d8b888; padding: 8px 10px; cursor: pointer; } .forum__thread-card:hover { background: #fff5d8; border-color: #800000; } .forum__thread-card-head { display: flex; gap: 8px; align-items: baseline; font-size: 11px; margin-bottom: 4px; flex-wrap: wrap; } .forum__thread-card-title { font-weight: bold; color: #cc0000; font-size: 14px; margin: 4px 0 4px 0; } .forum__thread-card-preview { color: #404040; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; } .forum__thread-card-footer { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 4px; border-top: 1px dotted #d8b888; font-size: 11px; color: #707070; } /* === Posts (OP + replies) === */ .forum__thread { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .forum__post { background: #f0e0d6; border: 1px solid #d8b888; padding: 6px 10px; font-size: 12px; line-height: 1.5; } .forum__post--op { background: #fff5d8; border-left: 3px solid #cc0000; } .forum__post--user { background: #e8f5e8; border-left: 3px solid #117743; } .forum__post--scripted { background: #f8efdc; } .forum__post-head { display: flex; gap: 8px; align-items: baseline; font-size: 11px; margin-bottom: 4px; flex-wrap: wrap; } .forum__post-name { color: #117743; font-weight: bold; } .forum__post-trip { color: #aa00aa; font-family: "Courier New", monospace; font-size: 10px; } .forum__post-date { color: #707070; } .forum__post-num { color: #cc0000; font-family: "Courier New", monospace; font-size: 11px; } .forum__post-tag { font-size: 10px; padding: 0 4px; border-radius: 2px; } .forum__post-tag--user { background: #117743; color: #fff; font-weight: bold; } .forum__post-tag--sage { background: #6a4a1a; color: #ffd9a3; font-weight: bold; font-family: "Courier New", monospace; letter-spacing: 1px; } .forum__post--sage { opacity: 0.85; border-left: 3px solid #c98a4a; } .forum__post--highlight { animation: forumHighlight 1.6s ease-out; } @keyframes forumHighlight { 0% { background: #fff36b; box-shadow: 0 0 16px rgba(255, 200, 0, 0.6); } 100% { background: transparent; box-shadow: none; } } .forum__post-text { color: #303030; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; font-size: 12px; } .forum__green { color: #789922; } /* Clickable >>NN reference */ .forum__quote-ref { color: #cc0000; text-decoration: underline; cursor: pointer; font-weight: 600; padding: 0 1px; } .forum__quote-ref:hover { background: #ffe48a; color: #800000; } /* === Inline POLL widget === */ .forum__poll { margin: 6px 0 10px; background: linear-gradient(180deg, #fff8e3 0%, #f0e3b3 100%); border: 1px solid #c8a53b; border-left: 4px solid #b8830f; padding: 10px 12px; font-size: 12px; } .forum__poll-q { font-weight: 700; color: #5a3a08; margin-bottom: 8px; font-size: 13px; } .forum__poll-opts { display: flex; flex-direction: column; gap: 4px; } .forum__poll-opt { position: relative; padding: 4px 8px; border: 1px solid #c8a53b; background: #fffbef; border-radius: 3px; overflow: hidden; transition: background 120ms; } .forum__poll-opt.is-clickable { cursor: pointer; } .forum__poll-opt.is-clickable:hover { background: #ffe9a3; } .forum__poll-opt.is-mine { border-color: #800000; box-shadow: 0 0 0 1px rgba(128,0,0,0.3); } .forum__poll-bar { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(184, 131, 15, 0.45), rgba(184, 131, 15, 0.20)); z-index: 0; transition: width 600ms cubic-bezier(.4, 1.6, .5, 1); } .forum__poll-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; } .forum__poll-marker { font-size: 14px; color: #800000; width: 14px; text-align: center; flex-shrink: 0; } .forum__poll-label { flex: 1; font-weight: 600; color: #1a1a1a; } .forum__poll-pct { font-family: "Courier New", monospace; font-weight: 700; color: #800000; font-size: 12px; } .forum__poll-count { font-family: "Courier New", monospace; font-size: 10px; color: #6a4a1a; } .forum__poll-foot { margin-top: 8px; font-size: 11px; color: #6a4a1a; font-style: italic; text-align: right; } /* === Captcha & sage row in reply form === */ .forum__reply-form-row--captcha { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; } .forum__captcha { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #c8a53b; padding: 2px 4px; border-radius: 3px; } .forum__captcha-img { width: 110px; height: 40px; display: flex; align-items: center; justify-content: center; background: #f7f4e7; border-right: 1px solid #d8c89a; cursor: pointer; user-select: none; } .forum__captcha-img svg { display: block; } .forum__captcha-input { width: 70px; padding: 4px 6px; border: 1px solid #c8a53b; font-family: "Courier New", monospace; font-size: 14px; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; text-align: center; } .forum__captcha-refresh { width: 26px; height: 26px; border: 1px solid #c8a53b; background: #fff8e3; cursor: pointer; font-size: 14px; font-weight: 700; color: #800000; border-radius: 3px; } .forum__captcha-refresh:hover { background: #ffe48a; } .forum__captcha-err { color: #c91d1d; font-size: 11px; font-weight: 700; margin: 2px 0 4px; } .forum__sage { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #5a3a08; cursor: pointer; user-select: none; } .forum__sage input { cursor: pointer; } /* === Reply form === */ .forum__reply-form { background: #f8efdc; border: 1px solid #d8b888; border-top: 2px solid #800000; padding: 8px 10px; margin-top: 12px; } .forum__reply-form-h { font-weight: bold; color: #800000; font-size: 12px; margin-bottom: 6px; } .forum__reply-textarea { width: 100%; background: #fff; border: 1px solid #a08868; padding: 6px 8px; font-family: Tahoma, Verdana, sans-serif; font-size: 12px; color: #202020; box-sizing: border-box; resize: vertical; min-height: 60px; } .forum__reply-textarea:focus { outline: 1px solid #800000; border-color: #800000; } .forum__reply-form-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; } .forum__reply-form-tag { font-size: 11px; color: #707070; font-family: "Courier New", monospace; } .forum__reply-form-btn { background: linear-gradient(180deg, #fff5d8 0%, #d8b888 100%); border: 1px solid #800000; padding: 4px 16px; cursor: pointer; font-weight: bold; color: #800000; font-size: 12px; font-family: Tahoma, sans-serif; } .forum__reply-form-btn:hover:not(:disabled) { background: linear-gradient(180deg, #d8b888 0%, #fff5d8 100%); } .forum__reply-form-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* === Footer === */ .forum__footer { text-align: center; font-size: 10px; color: #909090; margin-top: 24px; padding-top: 8px; border-top: 1px dotted #d8b888; } /* ===================================================================== FORUM NOTIFICATION — unmissable modal blocker ===================================================================== */ .forum-notif-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; pointer-events: auto; animation: forum-notif-fade-in 0.18s ease-out; } @keyframes forum-notif-fade-in { from { background: rgba(0, 0, 0, 0); } to { background: rgba(0, 0, 0, 0.45); } } .forum-notif { background: #ece9d8; border: 2px solid #003c74; border-radius: 8px; width: 460px; max-width: 92vw; font-family: Tahoma, Verdana, sans-serif; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); overflow: hidden; } .forum-notif--shake { animation: forum-notif-shake 0.5s ease-in-out; } @keyframes forum-notif-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); } 20%, 40%, 60%, 80% { transform: translateX(6px); } } .forum-notif__title-bar { background: linear-gradient(180deg, #0a4c9c 0%, #003c74 100%); color: #fff; font-weight: bold; font-size: 12px; padding: 4px 10px; display: flex; justify-content: space-between; align-items: center; } .forum-notif__title { letter-spacing: 0.2px; } .forum-notif__count { background: #cc0000; color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 9px; font-weight: bold; } .forum-notif__body { display: flex; gap: 12px; padding: 16px 16px 12px 16px; align-items: flex-start; } .forum-notif__icon { width: 38px; height: 38px; background: linear-gradient(180deg, #ffd000 0%, #c89000 100%); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: bold; font-family: Georgia, serif; flex-shrink: 0; box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.2); } .forum-notif__content { flex: 1; min-width: 0; } .forum-notif__thread { font-weight: bold; color: #003c74; font-size: 13px; margin-bottom: 6px; word-wrap: break-word; } .forum-notif__preview { font-size: 12px; color: #303030; background: #fff; border: 1px solid #c0c0c0; padding: 6px 8px; border-radius: 2px; word-wrap: break-word; } .forum-notif__preview-name { color: #117743; font-weight: bold; } .forum-notif__preview-text { color: #303030; } .forum-notif__buttons { display: flex; gap: 8px; padding: 0 16px 14px 16px; justify-content: flex-end; } .forum-notif__btn { background: linear-gradient(180deg, #f4f4f0 0%, #d4d0c8 100%); border: 1px solid #707070; border-radius: 3px; padding: 5px 14px; cursor: pointer; font-family: Tahoma, sans-serif; font-size: 12px; color: #202020; min-width: 96px; } .forum-notif__btn:hover { background: linear-gradient(180deg, #ffffff 0%, #e0dcd0 100%); border-color: #404040; } .forum-notif__btn--primary { background: linear-gradient(180deg, #4080d4 0%, #003c74 100%); border: 1px solid #003c74; color: #fff; font-weight: bold; } .forum-notif__btn--primary:hover { background: linear-gradient(180deg, #5090e4 0%, #1050a0 100%); } /* ===================================================================== P.L.E.S.H v2 — Low-poly endless runner (dino-style with minoxidil) Windows XP "Luna" aesthetic: gradient titlebar, beige panels, sunken HUD cells, glossy 3D buttons. ===================================================================== */ .plesh2 { position: relative; display: flex; align-items: stretch; justify-content: center; width: 100%; height: 100%; padding: 0; box-sizing: border-box; background: radial-gradient(circle at 50% 30%, #5a86c2 0%, #1f5fa8 60%, #0e3a78 100%); font-family: Tahoma, 'MS Sans Serif', sans-serif; color: #1a1a1a; overflow: hidden; user-select: none; } /* The XP-style window frame around the whole game ------------------------- */ .plesh2__frame { display: flex; flex-direction: column; width: 100%; height: 100%; max-width: none; margin: 0; background: #ece9d8; border: none; border-radius: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.55) inset; overflow: hidden; } /* Luna titlebar */ .plesh2__title-row { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 8px; background: linear-gradient( to bottom, #0a4ec0 0%, #2168de 8%, #1c5ed6 36%, #1955c4 50%, #0d49b5 88%, #0c4ab8 100%); color: #fff; font-weight: bold; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); border-radius: 6px 6px 0 0; } .plesh2__title-icon { font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.45)); } .plesh2__title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.2px; } .plesh2__title-spacer { flex: 1; } .plesh2__title-tag { font-size: 10px; padding: 1px 7px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.45); border-radius: 3px; text-shadow: none; font-weight: 600; letter-spacing: 0.5px; } /* HUD strip with three cells: Score / Record / Hairbar -------------------- */ .plesh2__hud { display: flex; gap: 8px; padding: 6px 8px; background: linear-gradient(180deg, #ece9d8 0%, #d4cfb5 100%); border-bottom: 1px solid #8b8568; box-shadow: inset 0 -1px 0 #fff8db, 0 1px 0 #6a6a4a; } .plesh2__hud-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; padding: 3px 10px; background: #fffbe5; border: 1px solid #8b8568; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b9b189; border-radius: 2px; } .plesh2__hud-cell--wide { flex: 1; align-items: stretch; padding: 4px 12px; } .plesh2__hud-k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; color: #6b6342; line-height: 1.2; text-align: center; } .plesh2__hud-v { font-family: 'Lucida Console', 'Consolas', monospace; font-size: 16px; font-weight: 700; color: #1f3868; line-height: 1.3; } .plesh2__hud-v--gold { color: #8c5a00; text-shadow: 0 1px 0 #fff; } /* Hair coverage bar (VU-meter style) */ .plesh2__hairbar { position: relative; margin-top: 3px; height: 16px; background: #1c1c1c; border: 1px solid #000; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.6); border-radius: 2px; overflow: hidden; } .plesh2__hairbar-fill { position: absolute; left: 0; top: 0; bottom: 0; transition: width 90ms linear, background 200ms linear; background: linear-gradient(180deg, #6dde6d 0%, #2a8a2a 100%); } .plesh2__hairbar-fill.is-ok { background: linear-gradient(180deg, #6dde6d 0%, #2a8a2a 100%); } .plesh2__hairbar-fill.is-warn { background: linear-gradient(180deg, #f4d83a 0%, #b08a08 100%); } .plesh2__hairbar-fill.is-bad { background: linear-gradient(180deg, #ff7a4a 0%, #b21a1a 100%); animation: plesh2Pulse 0.5s ease-in-out infinite alternate; } .plesh2__hairbar-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 11px/1 'Lucida Console', monospace; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.7); letter-spacing: 0.5px; } @keyframes plesh2Pulse { 0% { filter: brightness(0.95); } 100% { filter: brightness(1.25); } } /* Stage — the canvas area with sky behind it ----------------------------- */ .plesh2__stage { position: relative; display: flex; flex: 1 1 auto; min-height: 0; align-items: stretch; justify-content: stretch; padding: 6px; background: repeating-linear-gradient( 45deg, rgba(255,255,255,0.04) 0 8px, rgba(0,0,0,0.04) 8px 16px), linear-gradient(180deg, #2c5b9c 0%, #1c3a6a 100%); border-top: 1px solid #fff8db; cursor: pointer; overflow: hidden; } .plesh2__canvas { display: block; flex: 1 1 auto; width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: linear-gradient(180deg, #cfe5ff 0%, #f0e5b8 70%, #b89870 100%); border: 1px solid #003c74; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.35); /* убираем pixelated — на больших размерах он делает картинку «бритой» */ image-rendering: auto; object-fit: contain; } /* Overlay for menu / game-over screens ---------------------------------- */ .plesh2__overlay { position: absolute; inset: 6px; display: flex; align-items: center; justify-content: center; background: rgba(6, 16, 36, 0.55); border-radius: 3px; backdrop-filter: blur(2px); z-index: 10; } .plesh2__panel { width: 460px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto; background: #ece9d8; border: 1px solid #003c74; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset, 0 14px 40px rgba(0,0,0,0.55); padding: 22px 26px 18px; text-align: center; } .plesh2__logo { font-family: 'Trebuchet MS', Tahoma, sans-serif; font-weight: 800; font-size: 38px; letter-spacing: 3px; color: #0a3a94; text-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(10,58,148,0.25); line-height: 1.05; margin-top: 2px; } .plesh2__sub { font-size: 12px; font-style: italic; color: #5a5a3a; margin: -2px 0 12px 0; } .plesh2__rules { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 12px; line-height: 1.45; color: #1a1a1a; background: #fffbe5; border: 1px solid #b9b189; border-radius: 3px; padding: 10px 12px; margin-bottom: 12px; } .plesh2__rule { display: flex; align-items: center; gap: 10px; } .plesh2__rule-key { flex: 0 0 auto; display: inline-block; min-width: 56px; padding: 2px 6px; font-family: 'Lucida Console', monospace; font-size: 11px; font-weight: 700; color: #0a3a94; background: #fff; border: 1px solid #8b8568; border-bottom-width: 2px; border-radius: 2px; text-align: center; } .plesh2__rule-icon { flex: 0 0 auto; min-width: 56px; font-size: 16px; line-height: 1; text-align: center; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15)); } .plesh2__btn { display: inline-block; margin: 4px 6px 0 6px; padding: 7px 18px; font-family: Tahoma, sans-serif; font-size: 13px; color: #1a1a1a; background: linear-gradient(180deg, #fbfbfb 0%, #f2f2ec 45%, #dcd9c4 55%, #cfcab0 100%); border: 1px solid #707070; border-radius: 3px; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,0.08); cursor: pointer; transition: filter 100ms; } .plesh2__btn:hover { background: linear-gradient(180deg, #fffef4 0%, #fef5c8 45%, #f5da72 55%, #d8b04b 100%); } .plesh2__btn:active { background: linear-gradient(180deg, #cfcab0 0%, #dcd9c4 45%, #f2f2ec 55%, #fbfbfb 100%); box-shadow: inset 0 1px 0 rgba(0,0,0,0.12), inset 0 -1px 0 #fff; } .plesh2__btn--primary { padding: 9px 24px; font-weight: 700; font-size: 14px; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.35); background: linear-gradient(180deg, #6db4ff 0%, #2a76e5 50%, #0d4abf 100%); border: 1px solid #0a3a94; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.25), 0 3px 8px rgba(10,40,120,0.35); } .plesh2__btn--primary:hover { filter: brightness(1.1); background: linear-gradient(180deg, #6db4ff 0%, #2a76e5 50%, #0d4abf 100%); } .plesh2__btn--primary:active { filter: brightness(0.92); background: linear-gradient(180deg, #0d4abf 0%, #2a76e5 50%, #6db4ff 100%); } .plesh2__hs { margin-top: 12px; font-size: 12px; color: #0a3a94; } .plesh2__hs b { font-family: 'Lucida Console', monospace; font-size: 14px; color: #b25e00; } /* Game-over panel specifics --------------------------------------------- */ .plesh2__gameover { font-family: 'Trebuchet MS', Tahoma, sans-serif; font-size: 24px; font-weight: 800; color: #b21a1a; letter-spacing: 2px; margin: 4px 0 12px 0; text-shadow: 1px 1px 0 #fff; } .plesh2__finals { background: #fffbe5; border: 1px solid #b9b189; border-radius: 3px; padding: 10px 14px; margin-bottom: 12px; text-align: left; font-size: 13px; } .plesh2__final-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; } .plesh2__final-row + .plesh2__final-row { border-top: 1px dashed #d4cfa8; } .plesh2__final-row b { font-family: 'Lucida Console', monospace; color: #0a3a94; font-size: 14px; } .plesh2__final-row b.is-new { color: #b25e00; text-shadow: 0 0 4px rgba(255,200,80,0.7); } .plesh2__newrec { margin-top: 8px; padding: 4px 0; font-family: 'Trebuchet MS', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 1px; color: #fff; background: linear-gradient(180deg, #ffb84a 0%, #c47200 100%); border: 1px solid #8c5400; border-radius: 3px; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); animation: plesh2NewRec 1.2s ease-in-out infinite alternate; } @keyframes plesh2NewRec { 0% { filter: brightness(0.95); transform: scale(1); } 100% { filter: brightness(1.15); transform: scale(1.02); } } /* Footer hint strip ----------------------------------------------------- */ .plesh2__footer { display: flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; background: linear-gradient(180deg, #ece9d8 0%, #d4cfb5 100%); border-top: 1px solid #8b8568; } .plesh2__hint { font-size: 11px; color: #5a5a3a; } .plesh2__hint kbd { display: inline-block; padding: 1px 6px; margin: 0 2px; font-family: 'Lucida Console', monospace; font-size: 10px; font-weight: 700; color: #1f3868; background: #fff; border: 1px solid #888; border-bottom-width: 2px; border-radius: 2px; } /* Pause overlay (Round H) — softer scrim than the menu/over panels because the player is meant to glance back at the frozen frame. */ .plesh2__overlay--pause { background: rgba(12, 26, 56, 0.40); backdrop-filter: blur(1.5px); } .plesh2__panel--pause { width: 360px; padding: 22px 24px; } .plesh2__pausebig { font-family: 'Trebuchet MS', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: 2px; color: #fff; text-shadow: 2px 2px 0 #1c4374, 0 0 12px rgba(120, 180, 255, 0.6); margin-bottom: 6px; } /* ============================================================ * XP-style MessageBox * Replaces native browser alert(). Visually mimics the * classic Luna MessageBox: blue gradient title bar, Tahoma * body, info / warn / error round icon, single OK button. * ============================================================ */ .xp-msgbox__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.18); /* Above all in-shell UI (windows, taskbar, debug panel) but below the * full-screen screensaver overlay (999999). */ z-index: 200000; /* Soft shading lets the desktop bleed through, like XP. */ animation: xp-msgbox-fade 120ms ease-out; } @keyframes xp-msgbox-fade { from { opacity: 0; } to { opacity: 1; } } .xp-msgbox { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 320px; max-width: 460px; z-index: 200001; font-family: Tahoma, 'MS Sans Serif', sans-serif; font-size: 11px; color: #000; background: #ece9d8; /* XP Luna beige */ border: 1px solid #003c74; border-radius: 8px 8px 0 0; box-shadow: 0 0 0 1px #fff inset, 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.7); padding: 0; animation: xp-msgbox-pop 140ms cubic-bezier(0.2, 0.9, 0.3, 1.1); } @keyframes xp-msgbox-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .xp-msgbox__title { display: flex; align-items: center; height: 26px; padding: 0 4px 0 7px; background: linear-gradient( to bottom, #0a4ec0 0%, #2168de 8%, #1c5ed6 36%, #1955c4 50%, #0d49b5 88%, #0c4ab8 100% ); color: #fff; font-weight: bold; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); border-radius: 7px 7px 0 0; user-select: none; } .xp-msgbox__title-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; } .xp-msgbox__close { width: 22px; height: 21px; margin: 0; padding: 0; border: 1px solid #fff; border-radius: 3px; background: linear-gradient(to bottom, #e8625a 0%, #c64643 50%, #a8302c 51%, #ce4a47 100%); color: #fff; font: bold 14px/1 'Marlett', Tahoma, sans-serif; cursor: pointer; box-shadow: 0 0 1px #6b1a18; } .xp-msgbox__close:hover { filter: brightness(1.12); } .xp-msgbox__close:active { filter: brightness(0.92); } .xp-msgbox__body { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 16px 20px; background: #ece9d8; border-top: 1px solid #fff; } .xp-msgbox__icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: bold 26px/1 Georgia, 'Times New Roman', serif; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -2px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25); } .xp-msgbox__icon--info { background: radial-gradient(circle at 35% 30%, #bcdcff 0%, #5a9ee6 45%, #1f5fb3 100%); border: 1px solid #14467f; } .xp-msgbox__icon--warn { background: radial-gradient(circle at 35% 30%, #fff2a8 0%, #ffd03b 45%, #cf8a04 100%); border: 1px solid #8a5a00; color: #000; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); } .xp-msgbox__icon--error { background: radial-gradient(circle at 35% 30%, #ffb6b0 0%, #e44b3f 45%, #9d1c14 100%); border: 1px solid #6b1108; } .xp-msgbox__text { flex: 1; min-width: 0; padding-top: 6px; font-size: 11px; line-height: 1.55; color: #000; white-space: pre-wrap; word-wrap: break-word; } .xp-msgbox__buttons { display: flex; justify-content: center; gap: 8px; padding: 6px 16px 14px 16px; background: #ece9d8; border-radius: 0 0 0 0; } .xp-msgbox__btn { min-width: 80px; height: 23px; padding: 0 14px; font-family: Tahoma, 'MS Sans Serif', sans-serif; font-size: 11px; color: #000; background: linear-gradient( to bottom, #fbfbfb 0%, #f2f2ec 45%, #dcd9c4 55%, #cfcab0 100% ); border: 1px solid #003c74; border-radius: 3px; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.08); cursor: pointer; } .xp-msgbox__btn:hover { background: linear-gradient( to bottom, #fffef4 0%, #fef5c8 45%, #f5da72 55%, #d8b04b 100% ); border-color: #003c74; } .xp-msgbox__btn:active { background: linear-gradient( to bottom, #cfcab0 0%, #dcd9c4 45%, #f2f2ec 55%, #fbfbfb 100% ); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 0 #fff; } .xp-msgbox__btn--default:focus { outline: 1px dotted #000; outline-offset: -4px; } /* ============================================================= OUTLOOK EXPRESS — 3-pane mail client ============================================================= */ .oexp { display: grid; grid-template-rows: 32px 1fr 22px; height: 100%; background: #ece9d8; font-family: Tahoma, 'MS Sans Serif', sans-serif; font-size: 11px; color: #1a1a1a; } .oexp__toolbar { display: flex; align-items: center; gap: 4px; padding: 3px 6px; background: linear-gradient(180deg, #f7f5e9 0%, #dcd6bb 100%); border-bottom: 1px solid #a39778; } .oexp__tb-btn { height: 24px; padding: 0 10px; background: linear-gradient(180deg, #fff 0%, #e3e0cd 100%); border: 1px solid #8a7f63; border-radius: 2px; cursor: pointer; font-size: 11px; color: #1a1a1a; } .oexp__tb-btn:hover:not(:disabled) { background: linear-gradient(180deg, #fff 0%, #ffe08a 100%); } .oexp__tb-btn:disabled { cursor: default; color: #9a9a8a; background: linear-gradient(180deg, #f5f3e6 0%, #e3e0cd 100%); border-color: #b6ad93; opacity: 0.7; } .oexp__tb-spacer { flex: 1; } .oexp__tb-status { font-size: 10px; color: #44485a; padding: 0 6px; } .oexp__main { display: grid; grid-template-columns: 180px 320px 1fr; min-height: 0; border-top: 1px solid #fff; } .oexp__folders { background: #f4f2e6; border-right: 1px solid #a39778; padding: 8px 4px; display: flex; flex-direction: column; gap: 2px; overflow: auto; } .oexp__folders-title { margin: 0 6px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #5a5240; font-weight: 700; } .oexp__folders-foot { margin-top: auto; padding: 8px 6px 0; font-size: 10px; color: #7a7160; border-top: 1px dashed #c9bf9a; } .oexp__folder { display: flex; align-items: center; gap: 6px; padding: 5px 8px; cursor: pointer; border-radius: 2px; font-size: 11px; } .oexp__folder:hover { background: #e3dfc9; } .oexp__folder.is-active { background: linear-gradient(180deg, #2c5cb6, #1a3f8b); color: #fff; } .oexp__folder-icon { width: 16px; text-align: center; flex-shrink: 0; } .oexp__folder-label { flex: 1; } .oexp__folder-badge { font-size: 10px; padding: 1px 6px; background: rgba(255, 255, 255, 0.55); border-radius: 8px; color: #1a1a1a; } .oexp__folder.is-active .oexp__folder-badge { background: rgba(255, 255, 255, 0.85); color: #1a3f8b; } .oexp__folder-badge.is-bold { font-weight: 700; } .oexp__list { background: #fff; border-right: 1px solid #a39778; overflow: auto; display: flex; flex-direction: column; } .oexp__list-head { display: grid; grid-template-columns: 22px 110px 1fr 60px; padding: 4px 6px; background: linear-gradient(180deg, #f7f5e9 0%, #dcd6bb 100%); border-bottom: 1px solid #a39778; font-size: 10px; font-weight: 700; color: #5a5240; position: sticky; top: 0; z-index: 1; } .oexp__list-empty { padding: 22px; text-align: center; color: #7a7160; font-size: 11px; } .oexp__list-empty--scheduled { padding: 30px 22px; background: linear-gradient(180deg, #fff8e8 0%, #fff3d0 100%); border: 1px dashed #d4a93a; border-radius: 4px; margin: 8px; color: #5a4a20; } .oexp__sched-icon { font-size: 36px; line-height: 1; margin-bottom: 8px; opacity: 0.85; } .oexp__sched-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; color: #4a3810; } .oexp__sched-sub { font-size: 11px; color: #5a4a20; margin-bottom: 6px; line-height: 1.5; } .oexp__sched-hint { font-size: 10.5px; color: #7a6840; font-style: italic; } .oexp__listrow { display: grid; grid-template-columns: 22px 110px 1fr 60px; padding: 5px 6px; border-bottom: 1px solid #f0eee0; cursor: pointer; font-size: 11px; align-items: center; } .oexp__listrow:hover { background: #fff7d6; } .oexp__listrow.is-selected { background: linear-gradient(180deg, #2c5cb6, #1a3f8b); color: #fff; } .oexp__listrow.is-unread { font-weight: 700; background: #fefdf5; } .oexp__listrow.is-unread.is-selected { background: linear-gradient(180deg, #2c5cb6, #1a3f8b); color: #fff; } .oexp__listrow.is-spam .oexp__listrow-from { color: #b03020; } .oexp__listrow.is-spam.is-selected .oexp__listrow-from { color: #ffd5d0; } .oexp__listrow.is-important .oexp__listrow-flag { color: #c91d1d; } .oexp__listrow.is-starred { background: linear-gradient(90deg, #fff8d6 0%, #fffdf5 70%); } .oexp__listrow.is-starred.is-selected { background: linear-gradient(180deg, #c98a10, #8a5a08); } .oexp__listrow.is-dragging { opacity: 0.45; background: #fff5b8; } .oexp__listrow-star { font-size: 13px; color: #b8b8b8; cursor: pointer; transition: color 100ms, transform 100ms; } .oexp__listrow-star:hover { transform: scale(1.18); } .oexp__listrow-star.is-on { color: #f5b500; text-shadow: 0 0 4px rgba(245, 181, 0, 0.6); } .oexp__folder.is-droptarget { outline: 2px dashed #1a3f8b; outline-offset: -2px; background: #d4e1f7; } .oexp__folder.is-active.is-droptarget { outline-color: #fff; background: linear-gradient(180deg, #4080d0, #2050a0); } .oexp__tb-search { background: #fff; border: 1px solid #aca899; padding: 3px 8px; font-size: 11px; font-family: 'Tahoma', sans-serif; width: 180px; margin-right: 8px; } .oexp__tb-search:focus { outline: 2px solid #2c5cb6; outline-offset: -1px; } /* === Compose modal === */ .oexp__compose-modal { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); display: grid; place-items: center; z-index: 50; } .oexp__compose { width: min(560px, 92%); background: #ece9d8; border: 2px solid #1a3f8b; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; font-family: 'Tahoma', sans-serif; font-size: 12px; } .oexp__compose-head { background: linear-gradient(180deg, #2c5cb6, #1a3f8b); color: #fff; padding: 6px 10px; font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; align-items: center; } .oexp__compose-close { background: #c91d1d; color: #fff; border: 1px solid #800000; width: 22px; height: 18px; cursor: pointer; font-weight: 700; font-size: 14px; line-height: 1; border-radius: 2px; } .oexp__compose-close:hover { background: #e03020; } .oexp__compose-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #d8d3bc; } .oexp__compose-row label { width: 60px; font-weight: 700; color: #1a3f8b; } .oexp__compose-row input { flex: 1; border: 1px solid #aca899; padding: 4px 6px; font-size: 12px; font-family: inherit; } .oexp__compose-body { flex: 1; border: 1px solid #aca899; padding: 8px; font-size: 12px; font-family: 'Tahoma', sans-serif; margin: 8px 10px; resize: vertical; } .oexp__compose-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #d8d3bc; border-top: 1px solid #aca899; } .oexp__compose-hint { flex: 1; font-size: 10px; color: #5a5240; font-style: italic; } .oexp__listrow-from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; } .oexp__listrow-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oexp__listrow-day { font-size: 10px; color: #5a5240; text-align: right; } .oexp__listrow.is-selected .oexp__listrow-day { color: #cfe0ff; } .oexp__preview { background: #fff; display: grid; grid-template-rows: auto 1fr auto auto; min-height: 0; } .oexp__preview-empty { display: grid; place-items: center; background: #fafaf2; color: #7a7160; font-size: 13px; text-align: center; gap: 12px; padding: 22px; } .oexp__preview-empty-icon { font-size: 64px; opacity: 0.4; } .oexp__preview-head { padding: 10px 14px; background: linear-gradient(180deg, #f7f5e9 0%, #ece9d2 100%); border-bottom: 1px solid #a39778; } .oexp__preview-row { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; font-size: 11px; margin-bottom: 2px; } .oexp__preview-key { color: #5a5240; font-weight: 700; } .oexp__preview-val { color: #1a1a1a; word-break: break-word; } .oexp__preview-body { padding: 14px 18px; background: #fff; font-family: 'Trebuchet MS', Tahoma, sans-serif; font-size: 12.5px; color: #1a1a1a; line-height: 1.55; overflow: auto; } .oexp__preview-para { margin: 0 0 6px; white-space: pre-wrap; word-wrap: break-word; } .oexp__attach { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff7e0; border-top: 1px solid #d4c890; font-size: 11px; } .oexp__attach-icon { font-size: 14px; } .oexp__attach-name { font-weight: 700; } .oexp__attach-size { color: #5a5240; } .oexp__attach-warn { color: #c91d1d; } .oexp__choices { padding: 10px 14px; background: #f4f2e6; border-top: 1px solid #a39778; } .oexp__choices-head { font-size: 11px; font-weight: 700; color: #5a5240; margin-bottom: 6px; } .oexp__choices-list { display: flex; flex-wrap: wrap; gap: 6px; } .oexp__choice-btn { font-size: 11px !important; padding: 6px 14px !important; min-width: 0; } .oexp__replied { font-size: 11px; color: #1a1a1a; } .oexp__replied-hint { margin-top: 4px; font-size: 10px; color: #7a7160; } .oexp__status { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; background: linear-gradient(180deg, #f7f5e9 0%, #dcd6bb 100%); border-top: 1px solid #a39778; font-size: 10px; color: #3a3a3a; } /* Tray badge for unread Outlook */ .outlook-tray { position: relative; } .outlook-tray__badge { position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px; background: #e04a3a; color: #fff; font-family: Tahoma, sans-serif; font-size: 9px; font-weight: 700; line-height: 14px; text-align: center; border: 1px solid #6a1a10; border-radius: 8px; pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,0.4); } /* Адаптация под узкое окно */ @media (max-width: 900px) { .oexp__main { grid-template-columns: 140px 240px 1fr; } } @media (max-width: 720px) { .oexp__main { grid-template-columns: 120px 200px 1fr; } .oexp__folder-label { font-size: 10px; } } /* ============================================================= БАРСИК 2.0 — тамагочи ============================================================= */ .barsik2 { display: flex; flex-direction: column; gap: 12px; padding: 14px; height: 100%; background: linear-gradient(180deg, #f3eed8 0%, #d9d3b3 100%); font-family: Tahoma, sans-serif; font-size: 12px; color: #1a1a1a; } .barsik2__head { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #b6ad93; border-radius: 6px; padding: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .barsik2__face { /* Эмодзи имеют большой descender и нестабильную базовую линию между шрифтами систем. Решение: контейнер с фиксированным размером + flex- центровка на span внутри, на котором выставлен меньший font-size и поднят transform'ом для визуального центра круглого аватара. */ width: 70px; height: 70px; background: linear-gradient(180deg, #ffe9b8, #f3c270); border: 2px solid #c98e58; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .barsik2__face > span { display: inline-block; font-size: 40px; line-height: 1; /* Сдвиг компенсирует «опущенную» базовую линию у эмодзи */ transform: translateY(-3px); font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif; } /* Универсальный контейнер для эмодзи в taskbar / start-menu / окне. Размером соответствует 16×16 SVG-иконке, так что не ломает раскладку. */ .emoji-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 13px; line-height: 16px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif; vertical-align: middle; flex-shrink: 0; overflow: hidden; } .emoji-icon--lg { width: 22px; height: 22px; font-size: 17px; line-height: 22px; } .barsik2__name { font-family: 'Geist', Tahoma, sans-serif; font-size: 18px; font-weight: 800; color: #1a3f8b; } .barsik2__sub { font-size: 11px; color: #5a5240; margin-top: 2px; } .barsik2__warn { margin-top: 6px; padding: 4px 8px; background: #fff3d6; border: 1px solid #c98e58; border-radius: 3px; font-size: 11px; color: #6a3300; } .barsik2__stats { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #b6ad93; border-radius: 6px; padding: 10px 12px; } .barsik2__statrow { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; } .barsik2__statlbl { font-size: 11px; color: #5a5240; font-weight: 700; } .barsik2__bar { position: relative; height: 16px; background: #ece9d8; border: 1px solid #8a7f63; border-radius: 3px; overflow: hidden; } .barsik2__bar-fill { position: absolute; inset: 0 auto 0 0; transition: width 280ms ease; } .barsik2__bar-fill.is-ok { background: linear-gradient(180deg, #78d14d, #3b8a2b); } .barsik2__bar-fill.is-warn { background: linear-gradient(180deg, #f5c542, #d97a0c); } .barsik2__bar-fill.is-bad { background: linear-gradient(180deg, #f07868, #c02814); } .barsik2__bar-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #1a1a1a; text-shadow: 0 1px 0 rgba(255,255,255,0.5); } .barsik2__actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .barsik2__actions .xp-btn { font-size: 12px !important; padding: 8px 10px !important; min-height: 34px; } .barsik2__foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; } .barsik2__hint { font-size: 10px; color: #5a5240; line-height: 1.4; } /* ============================================================= ПАСХАЛКИ ============================================================= */ /* π-time tray pie */ .pie-tray { font-size: 14px !important; cursor: pointer; animation: pieWobble 1.6s ease-in-out infinite; } @keyframes pieWobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } } /* ============================================================= STICKY NOTES — жёлтые post-it на десктопе ============================================================= */ .sticky-note { position: absolute; width: 180px; min-height: 140px; /* z-index: 4 — над event-widget (2) и ICQ (3), но ниже окон. */ z-index: 4; font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 14px; color: #2a2a2a; box-shadow: 2px 4px 8px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.08); display: flex; flex-direction: column; /* Лёгкий «загнутый угол» через clip-path */ transition: transform 100ms; user-select: text; } .sticky-note:hover { /* На hover остаёмся ниже окон — просто чуть выше других виджетов */ z-index: 5; box-shadow: 3px 6px 12px rgba(0,0,0,0.3); } .sticky-note__bar { height: 18px; background: rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: space-between; padding: 0 6px; cursor: move; user-select: none; } .sticky-note__pin { font-size: 10px; } .sticky-note__close { cursor: pointer; font-size: 14px; font-weight: 700; color: rgba(0,0,0,0.5); width: 16px; height: 16px; display: grid; place-items: center; border-radius: 2px; } .sticky-note__close:hover { background: rgba(255,0,0,0.2); color: #c91d1d; } .sticky-note__text { flex: 1; padding: 8px 10px; outline: none; white-space: pre-wrap; word-wrap: break-word; cursor: text; line-height: 1.35; font-size: 14.5px; letter-spacing: 0.2px; } .sticky-note__text:focus { background: rgba(255,255,255,0.3); } /* ============================================================= ACTIVATION WIZARD ============================================================= */ .actwiz { display: grid; grid-template-rows: auto 1fr auto; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 12px; } .actwiz__head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-bottom: 1px solid #a39778; } .actwiz__head-icon { font-size: 32px; } .actwiz__head-title { font-size: 14px; font-weight: 700; color: #1a3f8b; } .actwiz__head-sub { font-size: 11px; color: #5a5240; margin-top: 2px; } .actwiz__body { padding: 18px 22px; background: #fff; overflow: auto; font-size: 12.5px; line-height: 1.5; } .actwiz__body p { margin: 0 0 10px; } .actwiz__radio { display: block; padding: 4px 0; cursor: pointer; } .actwiz__radio input[type="radio"] { margin-right: 6px; } .actwiz__radio input[disabled] + span { color: #94a3b8; } .actwiz__keyrow { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .actwiz__keyfield { font-family: 'Courier New', monospace; font-size: 14px; font-weight: 700; letter-spacing: 1px; padding: 5px 8px; border: 1px solid #888; background: #fffbe6; width: 140px; text-align: center; } .actwiz__keyhint { font-size: 11px; color: #5a5240; } .actwiz__progress { position: relative; height: 18px; background: #fff; border: 1px solid #888; border-radius: 2px; overflow: hidden; margin: 12px 0; } .actwiz__progress-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #5cd84d, #2a9119); transition: width 80ms linear; } .actwiz__progress-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; } .actwiz__success { font-size: 56px; color: #2a9119; text-align: center; margin: 8px 0; } .actwiz__buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-top: 1px solid #a39778; } /* ============================================================= INTERNET CONNECTION WIZARD ============================================================= */ .netwiz { display: grid; grid-template-rows: auto 1fr auto; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 12px; } .netwiz__head { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: linear-gradient(180deg, #2c5cb6, #1a3f8b); color: #fff; } .netwiz__head-icon { font-size: 28px; } .netwiz__head-title { font-size: 14px; font-weight: 700; } .netwiz__head-sub { font-size: 11px; color: #cdd9ec; margin-top: 2px; } .netwiz__body { padding: 14px 18px; background: #fff; overflow: auto; } .netwiz__providers { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; } .netwiz__provider { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; background: #f4f2e6; border: 1px solid #d3cdb5; border-radius: 4px; cursor: pointer; } .netwiz__provider.is-active { background: #dcebff; border-color: #1a3f8b; } .netwiz__provider input[type="radio"] { margin-top: 2px; } .netwiz__provider-name { font-weight: 700; color: #1a3f8b; } .netwiz__provider-meta { display: flex; gap: 12px; font-size: 11px; color: #5a5240; margin-top: 2px; } .netwiz__provider-desc { font-size: 11px; color: #5a5240; margin-top: 2px; } .netwiz__creds { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .netwiz__creds label { display: grid; grid-template-columns: 140px 1fr; align-items: center; font-size: 12px; } .netwiz__creds .xp-input { padding: 4px 6px; font-size: 12px; } .netwiz__dialing-icon { font-size: 64px; text-align: center; margin: 12px 0 8px; } .netwiz__dialing-status { text-align: center; font-size: 13px; font-weight: 700; color: #1a3f8b; margin: 8px 0; } .netwiz__progress { height: 18px; background: #fff; border: 1px solid #888; border-radius: 2px; overflow: hidden; margin: 8px 0; } .netwiz__progress-fill { height: 100%; background: linear-gradient(90deg, #5cd84d, #2a9119); transition: width 200ms linear; } .netwiz__hint { margin-top: 10px; padding: 8px 10px; background: #fffbe6; border: 1px solid #d4c890; border-radius: 3px; font-size: 11px; color: #5a5240; text-align: center; } .netwiz__success-msg { margin-top: 10px; padding: 10px; background: #e8f8e0; border: 1px solid #5cd84d; border-radius: 3px; font-size: 12px; color: #2a6020; text-align: center; } .netwiz__buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-top: 1px solid #a39778; } /* ============================================================= АНТИВИРУС КАСПЕРСКОГО ============================================================= */ .kav { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; } .kav__head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(180deg, #3b8a2b, #1a3a10); color: #fff; } .kav__logo { width: 42px; height: 42px; background: linear-gradient(135deg, #fff, #d4d4d4); color: #1a3a10; font-family: Arial Black, sans-serif; font-size: 28px; font-weight: 900; display: grid; place-items: center; border-radius: 6px; box-shadow: inset 0 0 0 2px #1a3a10, 0 2px 4px rgba(0,0,0,0.3); } .kav__title { font-size: 15px; font-weight: 700; } .kav__sub { font-size: 11px; color: #cae5c0; margin-top: 2px; } .kav__status { margin-left: auto; display: flex; align-items: center; gap: 8px; } .kav__shield { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 16px; } .kav__shield.is-ok { background: #2a9119; box-shadow: 0 0 8px rgba(92,216,77,0.6); } .kav__shield.is-warn { background: #c91d1d; box-shadow: 0 0 10px rgba(255,80,40,0.7); animation: kavBlink 1s infinite; } .kav__status-text { font-size: 11px; color: #fff; } @keyframes kavBlink { 0%,100% {opacity:1} 50% {opacity:0.5} } .kav__main { padding: 14px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; flex: 1; min-height: 0; } .kav__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px; background: #fff; border: 1px solid #b6ad93; border-radius: 4px; padding: 8px 12px; } .kav__stat { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; } .kav__stat-k { color: #5a5240; } .kav__stat-v { font-weight: 700; color: #1a3f8b; font-family: Tahoma; } .kav__scan { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 8px; } .kav__progress { position: relative; width: 100%; height: 18px; background: #fff; border: 1px solid #888; border-radius: 2px; overflow: hidden; } .kav__progress-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #5cd84d, #2a9119); } .kav__progress-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; } .kav__log { background: #fff; border: 1px solid #b6ad93; border-radius: 4px; display: flex; flex-direction: column; min-height: 0; } .kav__log-title { padding: 6px 10px; background: linear-gradient(180deg, #f4f2e6, #dcd6bb); border-bottom: 1px solid #b6ad93; font-size: 11px; font-weight: 700; color: #5a5240; } .kav__log-list { overflow: auto; padding: 4px 0; flex: 1; } .kav__log-row { display: grid; grid-template-columns: 80px 1fr; gap: 8px; padding: 4px 10px; font-size: 11.5px; border-bottom: 1px dashed #ece9d8; } .kav__log-time { color: #94a3b8; font-style: italic; } .kav__log-msg { color: #1a1a1a; } /* ============================================================= TASKBAR EXTENSIONS — Show Desktop + tray indicators ============================================================= */ .taskbar__show-desktop { width: 28px; align-self: stretch; display: grid; place-items: center; cursor: pointer; border-left: 1px solid rgba(255,255,255,0.15); border-right: 1px solid rgba(0,0,0,0.18); flex-shrink: 0; background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 50%, rgba(0,0,0,0.08) 100%); } .taskbar__show-desktop:hover { background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 100%); } .taskbar__show-desktop:active { background: rgba(0,0,0,0.20); } .battery-tray.is-bad svg rect:nth-child(3) { animation: batteryBlink 1s infinite; } @keyframes batteryBlink { 0%,100% {opacity: 1;} 50% {opacity: 0.3;} } /* ============================================================= HOURGLASS CURSOR — на время «загрузки» окна ============================================================= */ body.cabbafon-loading, body.cabbafon-loading * { cursor: wait !important; } /* ============================================================= REGEDIT ============================================================= */ .regedit { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 11px; } .regedit__menubar { padding: 4px 8px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-bottom: 1px solid #a39778; font-size: 11px; color: #3a3a3a; } .regedit__main { flex: 1; display: grid; grid-template-columns: 280px 1fr; min-height: 0; } .regedit__tree { background: #fff; border-right: 1px solid #a39778; overflow: auto; padding: 4px 0; } .regedit__node { display: flex; align-items: center; gap: 4px; padding: 3px 6px; cursor: pointer; font-size: 11.5px; white-space: nowrap; } .regedit__node:hover { background: #f0eee0; } .regedit__node.is-active { background: linear-gradient(180deg, #2c5cb6, #1a3f8b); color: #fff; } .regedit__chev { font-family: 'Courier New', monospace; font-weight: 700; font-size: 10px; width: 10px; text-align: center; color: #5a5240; } .regedit__node.is-active .regedit__chev { color: #fff; } .regedit__folder { font-size: 12px; } .regedit__detail { background: #fff; overflow: auto; } .regedit__table { width: 100%; border-collapse: collapse; font-size: 11.5px; } .regedit__table th { background: linear-gradient(180deg, #fff, #e8e6d0); border-bottom: 1px solid #a39778; border-right: 1px solid #a39778; padding: 4px 8px; text-align: left; font-weight: 700; color: #5a5240; position: sticky; top: 0; } .regedit__table td { padding: 4px 8px; border-bottom: 1px dashed #ece9d8; } .regedit__valicon { color: #c4a800; font-size: 10px; } .regedit__valdata { font-family: 'Courier New', monospace; color: #1a3f8b; } .regedit__empty { text-align: center; color: #94a3b8; font-style: italic; padding: 12px; } /* ============================================================= ADD/REMOVE PROGRAMS ============================================================= */ .arp { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 12px; } .arp__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-bottom: 1px solid #a39778; } .arp__head-icon { font-size: 32px; } .arp__head-title { font-size: 14px; font-weight: 700; color: #1a3f8b; } .arp__head-sub { font-size: 11px; color: #5a5240; margin-top: 2px; } .arp__list { flex: 1; overflow: auto; background: #fff; padding: 4px; } .arp__row { display: grid; grid-template-columns: 40px 1fr 200px; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px dashed #ece9d8; cursor: pointer; transition: background 80ms; } .arp__row:hover { background: #f0eee0; } .arp__row.is-selected { background: #dcebff; border-bottom-color: #1a3f8b; } .arp__row-icon { font-size: 24px; text-align: center; } .arp__row-name { font-weight: 700; color: #1a1a1a; } .arp__row-meta { font-size: 11px; color: #5a5240; text-align: right; } .arp__row-detail { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 10px 0 4px; border-top: 1px solid #cdd9ec; margin-top: 6px; } .arp__detail-text { font-size: 11.5px; color: #1a1a1a; line-height: 1.6; } .arp__empty { padding: 30px; text-align: center; color: #5a5240; font-size: 13px; } /* ============================================================= MAGNIFIER ============================================================= */ .magnifier { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; } .magnifier__bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-bottom: 1px solid #a39778; } .magnifier__pos { font-family: 'Courier New', monospace; font-size: 11px; color: #1a3f8b; } .magnifier__view { flex: 1; display: grid; background: #1a1a2e; position: relative; overflow: hidden; } .magnifier__pixel { border: 1px solid rgba(255,255,255,0.12); min-width: 0; min-height: 0; } .magnifier__crosshair { position: absolute; transform: translate(-50%, -50%); color: #ff5b6e; font-size: 32px; font-weight: 900; text-shadow: 0 0 6px #fff, 0 0 12px #ff5b6e; pointer-events: none; font-family: monospace; } /* Новая Magnifier: панель управления */ .magnifier-v2 { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 12px; } .magnifier-v2__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-bottom: 1px solid #a39778; } .magnifier-v2__head-icon { font-size: 28px; } .magnifier-v2__head-title { font-size: 14px; font-weight: 700; color: #1a3f8b; } .magnifier-v2__head-sub { font-size: 11px; color: #5a5240; margin-top: 2px; } .magnifier-v2__body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 14px; background: #fff; overflow: auto; } .magnifier-v2__toggle { background: #f4f2e6; border: 1px solid #b6ad93; border-radius: 4px; padding: 10px 12px; } .magnifier-v2__toggle-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; } .magnifier-v2__toggle-hint { margin-top: 8px; font-size: 11px; color: #5a5240; font-style: italic; } .magnifier-v2__zoom-label { font-size: 11px; color: #5a5240; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .magnifier-v2__zoom-row { display: flex; align-items: center; gap: 8px; } .magnifier-v2__zoom-val { font-family: 'Geist', Tahoma; font-size: 22px; font-weight: 800; color: #1a3f8b; min-width: 50px; text-align: center; } .magnifier-v2__hint { background: #fff7d6; border: 1px solid #d4c890; padding: 8px 10px; font-size: 11px; color: #5a5240; line-height: 1.5; border-radius: 3px; } /* ============================================================= КУРСОРНЫЕ СХЕМЫ — body[data-cursor="X"] ============================================================= */ /* 3D-Бронза — бронзовая стрелка */ body[data-cursor="bronze"], body[data-cursor="bronze"] * { cursor: url('data:image/svg+xml;utf8,') 2 2, default; } body[data-cursor="bronze"] a, body[data-cursor="bronze"] button, body[data-cursor="bronze"] [onclick], body[data-cursor="bronze"] .desk-icon, body[data-cursor="bronze"] .taskbar__app, body[data-cursor="bronze"] .start-menu__item { cursor: url('data:image/svg+xml;utf8,') 12 12, pointer; } /* Пикселит — блочный 8-битный курсор */ body[data-cursor="pixel"], body[data-cursor="pixel"] * { cursor: url('data:image/svg+xml;utf8,') 0 0, default; } /* Динозаврики — T-Rex emoji */ body[data-cursor="dino"], body[data-cursor="dino"] * { cursor: url('data:image/svg+xml;utf8,') 4 22, default; } body[data-cursor="dino"] a, body[data-cursor="dino"] button, body[data-cursor="dino"] [onclick], body[data-cursor="dino"] .desk-icon, body[data-cursor="dino"] .taskbar__app, body[data-cursor="dino"] .start-menu__item { cursor: url('data:image/svg+xml;utf8,') 14 14, pointer; } /* Цезарь — меч-указатель */ body[data-cursor="caesar"], body[data-cursor="caesar"] * { cursor: url('data:image/svg+xml;utf8,') 3 3, default; } /* Cursor scheme previews в Mouse Properties */ .mprops__scheme-preview { width: 36px; height: 36px; background: #fff; border: 1px solid #b6ad93; border-radius: 3px; display: grid; place-items: center; } .mprops__scheme-preview--default::after { content: '↖'; font-size: 22px; color: #1a1a1a; } .mprops__scheme-preview--bronze::after { content: '↖'; font-size: 22px; color: #c47b00; text-shadow: 1px 1px 0 #4a2c00; } .mprops__scheme-preview--pixel::after { content: '◤'; font-size: 18px; color: #000; image-rendering: pixelated; } .mprops__scheme-preview--dino::after { content: '🦖'; font-size: 22px; } .mprops__scheme-preview--caesar::after { content: '⚔'; font-size: 22px; color: #c0c0c0; } /* ============================================================= MOUSE PROPERTIES app ============================================================= */ .mprops { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 12px; } .mprops__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-bottom: 1px solid #a39778; } .mprops__head-icon { font-size: 28px; } .mprops__head-title { font-size: 14px; font-weight: 700; color: #1a3f8b; } .mprops__head-sub { font-size: 11px; color: #5a5240; margin-top: 2px; } .mprops__body { flex: 1; overflow: auto; padding: 12px 14px; background: #fff; } .mprops__section { margin-bottom: 18px; } .mprops__sec-title { font-size: 12px; font-weight: 700; color: #5a5240; margin-bottom: 8px; border-bottom: 1px dashed #b6ad93; padding-bottom: 4px; } .mprops__schemes { display: flex; flex-direction: column; gap: 4px; } .mprops__scheme { display: grid; grid-template-columns: 22px 1fr 40px; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid transparent; border-radius: 3px; cursor: pointer; } .mprops__scheme:hover { background: #f4f2e6; } .mprops__scheme.is-active { background: #dcebff; border-color: #1a3f8b; } .mprops__scheme-name { font-weight: 700; } .mprops__scheme-desc { font-size: 11px; color: #5a5240; } .mprops__row { display: grid; grid-template-columns: 200px 1fr 80px; align-items: center; gap: 12px; padding: 4px 0; font-size: 12px; } .mprops__range-val { font-size: 11px; color: #5a5240; } .mprops__checkrow { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 12px; } .mprops__buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-top: 1px solid #a39778; } /* ============================================================= DEVICE MANAGER ============================================================= */ .dm { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 11.5px; } .dm__menubar { padding: 4px 8px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-bottom: 1px solid #a39778; font-size: 11px; } .dm__main { flex: 1; display: grid; grid-template-columns: 380px 1fr; min-height: 0; } .dm__tree { background: #fff; border-right: 1px solid #a39778; overflow: auto; padding: 6px 0; } .dm__node { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; white-space: nowrap; } .dm__node:hover { background: #f0eee0; } .dm__node.is-active { background: linear-gradient(180deg, #2c5cb6, #1a3f8b); color: #fff; } .dm__node--root { font-weight: 700; } .dm__node--cat { padding-left: 18px; color: #5a5240; } .dm__node--dev { padding-left: 36px; } .dm__node--dev.is-disabled { color: #c91d1d; opacity: 0.65; text-decoration: line-through; } .dm__chev { width: 10px; text-align: center; font-size: 10px; } .dm__icon { font-size: 12px; } .dm__name { flex: 1; } .dm__badge { background: #c91d1d; color: #fff; font-size: 9px; padding: 1px 4px; border-radius: 2px; margin-left: 4px; } .dm__detail { background: #fff; padding: 14px 18px; overflow: auto; display: flex; flex-direction: column; gap: 12px; } .dm__detail-empty { color: #94a3b8; font-style: italic; padding: 30px; text-align: center; } .dm__detail-head { display: flex; gap: 12px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #cdd9ec; } .dm__detail-icon { font-size: 36px; } .dm__detail-name { font-weight: 700; font-size: 13px; color: #1a3f8b; } .dm__detail-cat { font-size: 11px; color: #5a5240; margin-top: 2px; } .dm__detail-block { display: flex; flex-direction: column; gap: 4px; } .dm__field { display: grid; grid-template-columns: 130px 1fr; font-size: 11.5px; padding: 2px 0; } .dm__field-k { color: #5a5240; } .dm__field-v { color: #1a1a1a; } .dm__detail-buttons { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid #cdd9ec; } /* ============================================================= FILE PROPERTIES DIALOG ============================================================= */ .fileprops-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.32); z-index: 8000; display: grid; place-items: center; } .fileprops { width: 460px; max-height: 90vh; background: #ece9d8; border: 1px solid #1a3f8b; box-shadow: 0 10px 30px rgba(0,0,0,0.4); font-family: Tahoma, sans-serif; font-size: 12px; display: flex; flex-direction: column; } .fileprops__bar { display: flex; align-items: center; background: linear-gradient(180deg, #2c5cb6, #1a3f8b); color: #fff; padding: 4px 8px; height: 26px; } .fileprops__title { flex: 1; font-weight: 700; } .fileprops__close { cursor: pointer; width: 18px; height: 18px; display: grid; place-items: center; background: #c91d1d; border-radius: 2px; font-weight: 700; font-size: 13px; } .fileprops__close:hover { background: #ff3a2a; } .fileprops__tabs { display: flex; background: #ece9d8; border-bottom: 1px solid #a39778; padding: 4px 4px 0; } .fileprops__tab { padding: 5px 14px 6px; border: 1px solid #a39778; border-bottom: none; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #f4f2e6, #d4cda6); font-size: 11px; cursor: pointer; margin-right: 1px; } .fileprops__tab.is-active { background: #fff; font-weight: 700; position: relative; margin-bottom: -1px; padding-bottom: 7px; z-index: 1; } .fileprops__content { background: #fff; padding: 12px 16px; overflow: auto; flex: 1; } .fileprops__head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed #cdd9ec; margin-bottom: 8px; } .fileprops__icon { font-size: 32px; } .fileprops__nameblock { flex: 1; } .fileprops__nameinput { width: 100%; padding: 4px 6px; border: 1px solid #888; font-family: Tahoma; font-size: 12px; } .fileprops__row { display: grid; grid-template-columns: 160px 1fr; padding: 3px 0; font-size: 11.5px; } .fileprops__k { color: #5a5240; } .fileprops__hr { border: none; border-top: 1px dashed #cdd9ec; margin: 8px 0; } .fileprops__attrs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fileprops__attrs label { display: flex; align-items: center; gap: 4px; font-size: 11.5px; } .fileprops__checkrow { display: flex; align-items: center; gap: 6px; padding: 4px 0; } .fileprops__seclist { border: 1px solid #b6ad93; background: #fafaf2; padding: 4px 0; margin-bottom: 8px; max-height: 110px; overflow: auto; } .fileprops__secrow { padding: 4px 8px; font-size: 11.5px; cursor: pointer; } .fileprops__secrow.is-selected { background: #dcebff; } .fileprops__perms { width: 100%; border-collapse: collapse; font-size: 11.5px; } .fileprops__perms th, .fileprops__perms td { padding: 3px 8px; border-bottom: 1px dashed #ece9d8; text-align: left; } .fileprops__sum { width: 100%; border-collapse: collapse; font-size: 11.5px; } .fileprops__sum td { padding: 3px 8px; border-bottom: 1px dashed #ece9d8; } .fileprops__sum td:first-child { color: #5a5240; width: 130px; } .fileprops__buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; background: #ece9d8; border-top: 1px solid #a39778; } /* ============================================================= BARSIK MINI-GAME ============================================================= */ .bgame { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; } .bgame__hud { display: flex; align-items: center; gap: 14px; padding: 8px 12px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-bottom: 1px solid #a39778; font-size: 12px; } .bgame__hud b { color: #1a3f8b; font-family: 'Geist', Tahoma, sans-serif; } .bgame__field { position: relative; flex: 1; background: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.04), transparent 50%), linear-gradient(180deg, #5fa23a 0%, #3b7d22 100%); cursor: crosshair; overflow: hidden; user-select: none; } .bgame__cat { position: absolute; width: 60px; height: 60px; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45)); transition: top 320ms ease-out, left 320ms ease-out; z-index: 5; } .bgame__cat--idle { animation: catBreathe 2.4s ease-in-out infinite; } .bgame__cat--chase { animation: catCrouch 0.6s ease-in-out infinite; } .bgame__cat--pounce { transition: top 100ms ease-out, left 100ms ease-out; animation: catPounce 0.2s ease-out; } .bgame__cat--success { animation: catWiggle 0.25s ease-out; } /* Старые эмодзи-стили (.bgame__cat-body / .bgame__cat-eyes / .bgame__eye / .bgame__pupil) удалены — используем inline SVG-кота с полным контролем зрачков. */ .bgame__cat svg { display: block; pointer-events: none; } .bgame__cat svg circle { transition: cx 80ms ease-out, cy 80ms ease-out; } .bgame__cat-victory { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 20px; animation: victoryPop 0.4s ease-out; } @keyframes catBreathe { 0%, 100% { transform: translate(-50%, -50%) scaleY(1) scaleX(var(--catFlip, 1)); } 50% { transform: translate(-50%, -50%) scaleY(1.04) scaleX(var(--catFlip, 1)); } } @keyframes catCrouch { 0%, 100% { transform: translate(-50%, -45%) scaleY(0.92) scaleX(var(--catFlip, 1)); } 50% { transform: translate(-50%, -50%) scaleY(1) scaleX(var(--catFlip, 1)); } } @keyframes catPounce { 0% { transform: translate(-50%, -50%) scale(1.4); } 100% { transform: translate(-50%, -50%) scale(1); } } @keyframes catWiggle { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 25% { transform: translate(-50%, -50%) rotate(-12deg); } 75% { transform: translate(-50%, -50%) rotate(12deg); } } @keyframes victoryPop { 0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.5); } 60% { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.2); } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(1); } } .bgame__mouse { position: absolute; font-size: 28px; pointer-events: none; transition: transform 60ms; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); z-index: 4; } .bgame__trail { position: absolute; width: 6px; height: 6px; background: rgba(255,255,255,0.4); border-radius: 50%; pointer-events: none; z-index: 1; } .bgame__paw { position: absolute; font-size: 32px; pointer-events: none; transform: translate(-50%, -50%); z-index: 6; animation: pawSwipe 0.35s ease-out forwards; filter: drop-shadow(0 0 6px rgba(255,255,255,0.6)); } .bgame__paw.is-hit { color: #f5c542; } .bgame__paw.is-miss { color: #c91d1d; font-weight: 900; font-size: 36px; } @keyframes pawSwipe { 0% { transform: translate(-50%, -50%) scale(0.3) rotate(-30deg); opacity: 0; } 30% { transform: translate(-50%, -50%) scale(1.4) rotate(15deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0; } } .bgame__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; text-align: center; font-family: 'Geist', Tahoma, sans-serif; z-index: 100; padding: 20px; } .bgame__overlay-card { background: linear-gradient(180deg, #ffe9b8 0%, #f3c270 100%); border: 3px solid #c98e58; border-radius: 8px; padding: 24px 32px; color: #1a1a1a; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 280px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); } .bgame__overlay-title { font-size: 24px; font-weight: 800; color: #6a3300; text-shadow: none; } .bgame__overlay-sub { font-size: 14px; color: #5a3300; line-height: 1.6; font-weight: 600; } .bgame__overlay-newrec { display: inline-block; background: linear-gradient(180deg, #ff5b6e, #c91d1d); color: #fff; font-weight: 900; letter-spacing: 1.5px; padding: 4px 14px; border-radius: 3px; margin: 6px 0; text-shadow: 1px 1px 0 #6a1010; animation: bgameNewRec 1s ease-in-out infinite; } @keyframes bgameNewRec { 0%,100% { transform: scale(1); box-shadow: 0 0 12px rgba(255,91,110,0.6); } 50% { transform: scale(1.06); box-shadow: 0 0 20px rgba(255,91,110,0.9); } } /* ============================================================= GAMES DASHBOARD — статистика проёмов и оценок ============================================================= */ .games-dash { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, #f5f9ff 0%, #e1ecf8 100%); font-family: 'Inter', Tahoma, sans-serif; } .games-dash__bigcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .games-dash__bigcard { border-radius: 8px; padding: 16px 18px; color: #fff; position: relative; box-shadow: 0 4px 12px rgba(8,20,58,0.15); overflow: hidden; } .games-dash__bigcard::before { content: ''; position: absolute; inset: 0 0 60% 0; background: rgba(255,255,255,0.18); pointer-events: none; } .games-dash__bigcard--green { background: linear-gradient(180deg, #6bd66e 0%, #2a9119 100%); } .games-dash__bigcard--red { background: linear-gradient(180deg, #ff5b6e 0%, #8a1010 100%); } .games-dash__bigcard--orange { background: linear-gradient(180deg, #ffba6a 0%, #c95810 100%); } .games-dash__bigcard--blue { background: linear-gradient(180deg, #5b78ff 0%, #1a3f8b 100%); } .games-dash__bigcard-num { font-family: 'Geist', Tahoma; font-size: 38px; font-weight: 900; line-height: 1; position: relative; z-index: 1; text-shadow: 0 2px 6px rgba(0,0,0,0.3); } .games-dash__bigcard-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 6px; position: relative; z-index: 1; font-weight: 700; } .games-dash__bigcard-sub { font-size: 11px; opacity: 0.85; margin-top: 2px; position: relative; z-index: 1; } .games-dash__panel { background: #fff; border: 1px solid #c8d6ec; border-radius: 6px; padding: 14px 18px; box-shadow: 0 1px 3px rgba(8,20,58,0.06); } .games-dash__panel-title { font-family: 'Geist', Tahoma; font-weight: 800; font-size: 14px; color: #0a3d91; margin-bottom: 12px; border-bottom: 2px solid #f28e1c; padding-bottom: 6px; } .games-dash__panel-desc { font-size: 12px; color: #475569; margin-top: 8px; font-style: italic; } .games-dash__empty { font-size: 12px; color: #94a3b8; font-style: italic; padding: 14px; text-align: center; } /* Survival score health bar */ .games-dash__health-bar { height: 24px; background: #ece9d8; border: 1px solid #888; border-radius: 3px; overflow: hidden; position: relative; } .games-dash__health-fill { height: 100%; display: flex; align-items: center; padding: 0 10px; transition: width 320ms; min-width: 60px; } .games-dash__health-text { font-family: 'Courier New', monospace; font-weight: 800; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); font-size: 12px; } /* Genre bars */ .games-dash__bars { display: flex; flex-direction: column; gap: 8px; } .games-dash__bar-row { display: grid; grid-template-columns: 130px 1fr 30px; align-items: center; gap: 12px; font-size: 12px; } .games-dash__bar-lbl { font-weight: 600; color: #1e293b; } .games-dash__bar-track { height: 16px; background: #f0f4fa; border-radius: 3px; overflow: hidden; border: 1px solid #d0d7e2; } .games-dash__bar-fill { height: 100%; background: linear-gradient(90deg, #5b78ff, #1a3f8b); transition: width 300ms; min-width: 4px; } .games-dash__bar-val { font-family: 'Geist', Tahoma; font-weight: 800; color: #0a3d91; text-align: right; } /* Split panels */ .games-dash__split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Difficulty grid */ .games-dash__diffgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .games-dash__diffcell { padding: 12px; border-radius: 4px; text-align: center; color: #fff; font-family: 'Geist', Tahoma; } .games-dash__diffcell--easy { background: linear-gradient(180deg, #6bd66e, #3b8a2b); } .games-dash__diffcell--normal { background: linear-gradient(180deg, #4dc8e6, #1e5bc6); } .games-dash__diffcell--hard { background: linear-gradient(180deg, #ffba6a, #c95810); } .games-dash__diffcell--vh { background: linear-gradient(180deg, #ff5b6e, #8a1010); } .games-dash__diffcell-num { font-size: 26px; font-weight: 800; line-height: 1; } .games-dash__diffcell-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; opacity: 0.9; font-weight: 700; } /* HLTB block */ .games-dash__hltb { text-align: center; padding: 8px; } .games-dash__hltb-num { font-family: 'Geist', Tahoma; font-size: 42px; font-weight: 900; color: #1a3f8b; line-height: 1; } .games-dash__hltb-desc { font-size: 13px; color: #1e293b; margin-top: 8px; font-weight: 600; } .games-dash__hltb-sub { font-size: 10.5px; color: #94a3b8; font-style: italic; margin-top: 4px; } /* Top-rated rows */ .games-dash__top { display: flex; flex-direction: column; gap: 4px; } .games-dash__top-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; background: #f5f9ff; border-radius: 3px; cursor: pointer; transition: background 100ms; font-size: 12px; } .games-dash__top-row:hover { background: #e0eaff; } .games-dash__top-row--bad { background: #fef2f2; } .games-dash__top-row--bad:hover { background: #fee2e2; } .games-dash__top-rank { width: 26px; height: 26px; display: grid; place-items: center; font-family: 'Geist', Tahoma; font-weight: 900; font-size: 14px; border-radius: 50%; color: #fff; background: #94a3b8; } .games-dash__top-rank--1 { background: linear-gradient(180deg, #f5c542, #b96104); box-shadow: 0 0 8px rgba(245,197,66,0.5); } .games-dash__top-rank--2 { background: linear-gradient(180deg, #cdd9ec, #7e8aa0); } .games-dash__top-rank--3 { background: linear-gradient(180deg, #d99656, #8a4a1a); } .games-dash__top-rank--bad { background: linear-gradient(180deg, #ff5b6e, #8a1010); } .games-dash__top-name { font-weight: 600; color: #1e293b; } .games-dash__top-score { font-family: 'Geist', Tahoma; font-weight: 800; color: #f28e1c; } /* Factoids row */ .games-dash__factoids { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .games-dash__factoid { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f5f9ff; border-left: 3px solid #5b78ff; border-radius: 3px; } .games-dash__factoid-icon { font-size: 24px; } .games-dash__factoid-k { font-size: 10.5px; color: #475569; text-transform: uppercase; letter-spacing: 0.05em; } .games-dash__factoid-v { font-size: 13px; font-weight: 700; color: #0a3d91; margin-top: 2px; } /* Адаптация под узкое окно */ @media (max-width: 840px) { .games-dash__bigcards { grid-template-columns: repeat(2, 1fr); } .games-dash__split { grid-template-columns: 1fr; } .games-dash__factoids { grid-template-columns: 1fr; } } /* ============================================================= HYPERTERMINAL — BBS клиент ============================================================= */ .hterm { display: flex; flex-direction: column; height: 100%; background: #000; font-family: 'Courier New', 'Consolas', monospace; color: #5dff8a; } .hterm__menubar { padding: 4px 8px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-bottom: 1px solid #a39778; font-family: Tahoma; font-size: 11px; color: #3a3a3a; } .hterm__statusbar { display: flex; gap: 8px; padding: 3px 10px; background: #1a1a1a; color: #aaa; font-size: 11px; border-bottom: 1px solid #333; } .hterm__screen { flex: 1; overflow: auto; padding: 10px 14px; background: #000; font-size: 13px; line-height: 1.35; text-shadow: 0 0 3px rgba(93, 255, 138, 0.6); } .hterm__line { white-space: pre-wrap; word-wrap: break-word; } .hterm__line--system { color: #5dff8a; opacity: 0.8; } .hterm__line--art { color: #5dff8a; } .hterm__line--prompt { color: #ffba6a; margin-top: 4px; } .hterm__line--option { color: #ffe08a; } .hterm__line--echo { color: #aaa; font-style: italic; } .hterm__line--error { color: #ff5b6e; } .hterm__line--progress { color: #5dff8a; font-family: monospace; } .hterm__cursor-line { display: flex; align-items: center; margin-top: 8px; border-top: 1px dashed rgba(93,255,138,0.3); padding-top: 6px; } .hterm__prompt { color: #5dff8a; font-weight: 700; margin-right: 6px; } .hterm__input { flex: 1; background: transparent; border: none; outline: none; color: #5dff8a; font-family: inherit; font-size: 13px; caret-color: #5dff8a; } .hterm__input::placeholder { color: rgba(93,255,138,0.3); font-style: italic; } /* ============================================================= SOUND RECORDER ============================================================= */ .srec { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; padding: 0; } .srec__head { padding: 10px 14px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-bottom: 1px solid #a39778; } .srec__title { font-size: 14px; font-weight: 700; color: #1a3f8b; } .srec__sub { font-size: 11px; color: #5a5240; margin-top: 2px; } .srec__display { background: #1a1a2e; margin: 14px; padding: 14px 18px; border-radius: 4px; border: 2px inset #888; display: flex; flex-direction: column; align-items: center; gap: 10px; } .srec__time { font-family: 'Courier New', monospace; font-size: 32px; font-weight: 800; color: #5dff8a; text-shadow: 0 0 8px rgba(93,255,138,0.5); letter-spacing: 2px; } .srec__vumeter { display: flex; gap: 2px; width: 100%; height: 18px; } .srec__bar { flex: 1; background: rgba(255,255,255,0.05); border-radius: 1px; transition: background 80ms; } .srec__bar.is-on { background: linear-gradient(180deg, #5dff8a, #2a9119); box-shadow: 0 0 4px #5dff8a; } .srec__bar:nth-child(n+18) { background: rgba(255,80,40,0.15); } .srec__bar:nth-child(n+18).is-on { background: linear-gradient(180deg, #ff5b6e, #c91d1d); box-shadow: 0 0 4px #ff5b6e; } .srec__bar:nth-child(n+22) { background: rgba(200,0,0,0.2); } .srec__transport { display: flex; justify-content: center; gap: 4px; padding: 0 14px 6px; } .srec__btn { width: 44px; height: 32px; display: grid; place-items: center; background: linear-gradient(180deg, #fafaf2 0%, #d4d0bd 100%); border: 1px solid #8a7f63; border-radius: 3px; cursor: pointer; padding: 0; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 rgba(0,0,0,0.15); } .srec__btn:hover:not(:disabled) { background: linear-gradient(180deg, #ffffff 0%, #ffe08a 100%); border-color: #c98e58; } .srec__btn:active:not(:disabled) { background: linear-gradient(180deg, #c4c0ad 0%, #e0dcc8 100%); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.25); } .srec__btn:disabled { background: linear-gradient(180deg, #f0eee0 0%, #d8d4c4 100%); border-color: #b6ad93; cursor: default; opacity: 0.55; } .srec__btn svg { display: block; } .srec__btn--rec { background: linear-gradient(180deg, #ffd0d0 0%, #f0a0a0 100%); border-color: #8a3030; } .srec__btn--rec:hover:not(:disabled) { background: linear-gradient(180deg, #ffe0e0 0%, #ff8060 100%); } .srec__btn--rec.is-active { background: linear-gradient(180deg, #ff5b6e, #c91d1d); border-color: #6a1010; animation: srecBlink 1s infinite; } .srec__btn--rec.is-active svg circle { fill: #ffffff; } .srec__transport-label { text-align: center; font-size: 11px; color: #5a5240; padding: 0 14px 12px; font-style: italic; min-height: 16px; } @keyframes srecBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } } .srec__playback { margin: 0 14px 14px; padding: 10px; background: #fff; border: 1px solid #b6ad93; border-radius: 4px; display: flex; flex-direction: column; gap: 8px; align-items: center; } .srec__playback audio { width: 100%; } .srec__error { margin: 0 14px 14px; padding: 8px 12px; background: #ffeded; border: 1px solid #c91d1d; color: #c91d1d; border-radius: 3px; font-size: 11.5px; } .srec__hint { margin: 0 14px 8px; padding: 6px 10px; background: #fff7d6; border: 1px solid #d4c890; font-size: 11.5px; color: #5a5240; text-align: center; } .srec__statusbar { margin-top: auto; padding: 4px 12px; background: linear-gradient(180deg, #f7f5e9, #dcd6bb); border-top: 1px solid #a39778; font-size: 10px; color: #3a3a3a; } /* ============================================================= CABLE TV ============================================================= */ .cabletv { display: grid; grid-template-rows: 1fr auto; height: 100%; background: #1a1a1a; font-family: Tahoma, sans-serif; } .cabletv__crt { background: #0a0a0a; padding: 12px; display: grid; place-items: center; } .cabletv__screen { position: relative; width: 100%; max-width: 560px; aspect-ratio: 4/3; background: #1a3f8b; border-radius: 12px; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.4); border: 4px solid #444; } .cabletv__crt-scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 1px, transparent 1px, transparent 3px); z-index: 5; } .cabletv__crt-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse, transparent 50%, rgba(0,0,0,0.5) 100%); z-index: 4; } .cabletv__channel-num { position: absolute; top: 12px; right: 14px; background: rgba(0,0,0,0.6); color: #ffba6a; font-family: 'Courier New', monospace; font-size: 14px; padding: 2px 8px; border-radius: 2px; z-index: 3; text-shadow: 0 0 4px #ffba6a; } .cabletv__logo { position: absolute; top: 12px; left: 14px; font-family: 'Geist', Tahoma; font-weight: 800; color: #fff; font-size: 18px; text-shadow: 0 2px 6px rgba(0,0,0,0.7); z-index: 3; } .cabletv__overlay { position: absolute; top: 50px; left: 14px; background: #c91d1d; color: #fff; font-family: 'Geist', Tahoma; font-weight: 800; font-size: 12px; padding: 2px 8px; z-index: 3; animation: tvLive 1.5s infinite; } @keyframes tvLive { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } } .cabletv__ticker { position: absolute; bottom: 14px; left: 0; right: 0; background: rgba(0,0,0,0.7); color: #ffba6a; font-family: 'Courier New', monospace; white-space: nowrap; font-size: 13px; padding: 4px 0; overflow: hidden; z-index: 3; animation: tvTicker 18s linear infinite; } @keyframes tvTicker { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .cabletv__bg { position: absolute; inset: 0; background: linear-gradient(45deg, #ff5b6e, #f5c542, #5dff8a, #5b78ff); background-size: 200% 200%; animation: tvBgShift 8s linear infinite; z-index: 0; opacity: 0.55; } @keyframes tvBgShift { 0% { background-position: 0% 0%; } 100% { background-position: 200% 200%; } } .cabletv__weather, .cabletv__news, .cabletv__ads { position: absolute; inset: 0; background: linear-gradient(180deg, #4a92ff, #1a3f8b); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 60px 30px 40px; font-family: 'Geist', Tahoma; } .cabletv__weather-temp { font-size: 64px; font-weight: 800; margin: 12px 0; } .cabletv__weather-sub { font-size: 13px; margin-bottom: 16px; } .cabletv__weather-table { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 14px; background: rgba(0,0,0,0.3); padding: 10px 14px; border-radius: 4px; font-size: 13px; } .cabletv__news { background: linear-gradient(180deg, #3a1a1a, #1a0a0a); padding-top: 56px; } .cabletv__headline { font-size: 14px; text-align: left; width: 100%; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,0.2); } .cabletv__ads { background: linear-gradient(45deg, #f5c542, #f28e1c, #ff5b6e, #f5c542); background-size: 200% 200%; animation: tvBgShift 6s linear infinite; } .cabletv__ad { font-size: 32px; font-weight: 900; text-shadow: 2px 2px 0 #c91d1d, 4px 4px 0 #1a1a1a; line-height: 1.2; font-family: 'Geist', sans-serif; } .cabletv__static { position: absolute; inset: 0; background: #1a1a1a; } .cabletv__noise { position: absolute; inset: 0; background-image: url('data:image/svg+xml;utf8,'); animation: tvNoise 0.2s steps(2) infinite; } @keyframes tvNoise { 0% { transform: translate(0, 0); } 50% { transform: translate(-2%, 2%); } 100% { transform: translate(0, 0); } } .cabletv__nosignal { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Geist', Tahoma; font-weight: 800; font-size: 28px; color: rgba(255,255,255,0.7); text-shadow: 2px 2px 0 #000; } .cabletv__panel { background: #ece9d8; padding: 10px 14px; border-top: 2px solid #444; } .cabletv__panel-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #5a5240; font-weight: 700; margin-bottom: 8px; } .cabletv__channels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .cabletv__btn { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 10px; background: linear-gradient(180deg, #fff, #ddd); border: 1px solid #888; cursor: pointer; border-radius: 3px; text-align: left; } .cabletv__btn:hover { background: linear-gradient(180deg, #fff, #ffe08a); } .cabletv__btn.is-active { background: linear-gradient(180deg, #5b78ff, #1a3f8b); color: #fff; border-color: #1a3f8b; } .cabletv__btn-num { font-family: 'Geist', Tahoma; font-weight: 800; font-size: 16px; } .cabletv__btn-name { font-size: 11.5px; font-weight: 700; } .cabletv__btn-desc { font-size: 10px; opacity: 0.8; } .cabletv__cabbafon1 { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-family: 'Geist', Tahoma; font-weight: 800; } /* ============================================================= OBS-FAKER ============================================================= */ .obs { display: grid; grid-template-rows: auto 1fr auto; height: 100%; background: #1a1a1a; font-family: Tahoma, sans-serif; color: #ddd; } .obs__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: linear-gradient(180deg, #2a2a2a, #1a1a1a); border-bottom: 1px solid #444; } .obs__title { font-size: 14px; font-weight: 700; color: #5dff8a; } .obs__live { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 3px; background: #444; color: #aaa; } .obs__live.is-live { background: #c91d1d; color: #fff; animation: srecBlink 1s infinite; } .obs__main { display: grid; grid-template-columns: 1fr 220px; gap: 10px; padding: 10px 14px; min-height: 0; } .obs__preview { display: flex; flex-direction: column; gap: 6px; min-height: 0; } .obs__preview-screen { flex: 1; background: #0a0a0a; border: 2px solid #444; display: grid; place-items: center; position: relative; font-family: 'Geist', Tahoma; text-align: center; min-height: 200px; } .obs__scene-name { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.6); color: #5dff8a; font-size: 11px; padding: 2px 8px; border-radius: 2px; } .obs__game { font-size: 24px; color: #fff; } .obs__brb { font-size: 28px; color: #ffba6a; line-height: 1.4; } .obs__menu { font-size: 32px; font-weight: 800; color: #5b78ff; } /* === DOOM scene === */ .obs__doom-scene { position: absolute; inset: 0; background: #0a0a0a; overflow: hidden; image-rendering: pixelated; } .obs__doom-wall { position: absolute; inset: 0 0 80px 0; background: repeating-linear-gradient(90deg, #4a2a1a 0px, #4a2a1a 24px, #2a1a0a 24px, #2a1a0a 26px), repeating-linear-gradient(0deg, #4a2a1a 0px, #4a2a1a 24px, #2a1a0a 24px, #2a1a0a 26px); background-blend-mode: multiply; /* перспективное сужение */ clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); filter: brightness(0.6); } .obs__doom-floor { position: absolute; bottom: 80px; left: 0; right: 0; height: 30%; background: repeating-linear-gradient(0deg, #3a1a0a 0px, #3a1a0a 16px, #1a0a05 16px, #1a0a05 18px); filter: brightness(0.5); } .obs__doom-demon { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 0 12px #ff5b00); animation: doomDemon 0.5s steps(2) infinite; } @keyframes doomDemon { 0%, 100% { transform: translateX(-50%) translateY(0) scaleX(1); } 50% { transform: translateX(-49%) translateY(-3px) scaleX(1.02); } } .obs__doom-spark { position: absolute; bottom: 90px; width: 4px; height: 4px; background: #ff5b00; border-radius: 50%; box-shadow: 0 0 6px #ff5b00, 0 0 12px #ff994a; animation: doomSpark 1.5s ease-out infinite; pointer-events: none; } @keyframes doomSpark { 0% { opacity: 0; transform: translateY(0) scale(1); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-100px) scale(0.5); } } .obs__doom-hud { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(180deg, #5a3a1a 0%, #2a1a0a 50%, #1a0a05 100%); border-top: 3px solid #2a1a0a; display: flex; align-items: center; justify-content: space-around; padding: 0 12px; font-family: 'Courier New', monospace; z-index: 3; } .obs__doom-hud-block { display: flex; flex-direction: column; align-items: center; color: #ff994a; } .obs__doom-hud-k { font-size: 9px; letter-spacing: 1px; color: #aa5a30; text-transform: uppercase; } .obs__doom-hud-v { font-size: 22px; font-weight: 900; color: #ff994a; text-shadow: 0 0 4px #ff5b00, 2px 2px 0 #1a0a05; line-height: 1; } .obs__doom-face { filter: drop-shadow(0 0 4px #ff5b00); } /* ===================================================================== VOXEL DOOM SCENE — новые красивые сцены с 3D-кубиками. Заменяет .obs__doom-* блоки. ===================================================================== */ .obs__vox-scene { position: absolute; inset: 0; background: #050208; overflow: hidden; display: block; image-rendering: pixelated; } .obs__vox-svg { position: absolute; inset: 0; width: 100%; height: calc(100% - 60px); filter: drop-shadow(0 0 8px rgba(255,91,0,0.18)); } .obs__vox-sparks { position: absolute; inset: 0 0 60px 0; pointer-events: none; z-index: 2; } .obs__vox-spark { position: absolute; bottom: 30%; width: 4px; height: 4px; background: #ff5b00; border-radius: 50%; box-shadow: 0 0 8px #ff5b00, 0 0 16px #ff994a; animation: voxSpark 1.8s ease-out infinite; } @keyframes voxSpark { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: 1; transform: translateY(-10px) scale(1); } 100% { opacity: 0; transform: translateY(-90px) scale(0.4); } } .obs__vox-hud { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, #6a3a1a 0%, #2a1408 60%, #0a0402 100%); border-top: 3px solid #1a0a05; display: flex; align-items: center; justify-content: space-around; padding: 0 10px; font-family: 'Courier New', monospace; z-index: 4; box-shadow: inset 0 4px 12px rgba(255,91,0,0.15); } .obs__vox-hud-block { display: flex; flex-direction: column; align-items: center; color: #ffcb8a; } .obs__vox-hud-k { font-size: 9px; letter-spacing: 1.5px; color: #c98a4a; text-transform: uppercase; } .obs__vox-hud-v { font-size: 22px; font-weight: 900; color: #ffd0a0; text-shadow: 0 0 6px #ff5b00, 2px 2px 0 #1a0a05; line-height: 1; } .obs__vox-hud-face { filter: drop-shadow(0 0 4px #ff5b00); } /* ===================================================================== VOXEL WEBCAM — рамка ТВ + воксельный портрет cabbakid. Позиционируется в правом-нижнем углу превью. ===================================================================== */ .obs__vox-webcam { position: absolute; right: 12px; bottom: 70px; width: 160px; height: 160px; z-index: 5; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.7)); pointer-events: none; } .obs__vox-webcam-svg { width: 100%; height: 100%; display: block; } .obs__vox-mic { position: absolute; bottom: 8px; left: 8px; display: flex; align-items: center; gap: 3px; background: rgba(0,0,0,0.6); padding: 2px 6px; border-radius: 8px; z-index: 6; } .obs__vox-mic-icon { font-size: 11px; line-height: 1; } .obs__vox-mic-wave { width: 2px; background: #5dff8a; border-radius: 1px; animation: voxMicWave 0.8s ease-in-out infinite; } .obs__vox-mic-wave:nth-child(2) { height: 6px; animation-delay: 0s; } .obs__vox-mic-wave:nth-child(3) { height: 9px; animation-delay: 0.15s; } .obs__vox-mic-wave:nth-child(4) { height: 5px; animation-delay: 0.3s; } @keyframes voxMicWave { 0%, 100% { transform: scaleY(0.3); opacity: 0.5; } 50% { transform: scaleY(1.2); opacity: 1; } } .obs__vox-cam-label { position: absolute; top: 6px; left: 6px; background: #c91d1d; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px; text-shadow: 1px 1px 0 #5a0808; box-shadow: 0 1px 4px rgba(0,0,0,0.5); z-index: 7; animation: voxCamLabelPulse 1.6s ease-in-out infinite; } @keyframes voxCamLabelPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } /* === BRB scene === */ .obs__brb-scene { position: absolute; inset: 0; background: linear-gradient(180deg, #2a1a0a 0%, #0a0405 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow: hidden; } .obs__brb-stars { position: absolute; inset: 0; pointer-events: none; } .obs__brb-star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; animation: brbStarTwinkle 3s ease-in-out infinite; } @keyframes brbStarTwinkle { 0%,100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 4px #fff; } } .obs__brb-cup-container { position: relative; animation: cupBob 2.4s ease-in-out infinite; } @keyframes cupBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .obs__brb-cup { display: block; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.5)); } .obs__brb-steam { position: absolute; top: -20px; font-family: 'Courier New', monospace; font-size: 24px; color: rgba(255,255,255,0.7); font-weight: 800; pointer-events: none; animation: steamRise 2.4s ease-out infinite; } .obs__brb-steam--1 { left: 25%; animation-delay: 0s; } .obs__brb-steam--2 { left: 45%; animation-delay: 0.8s; } .obs__brb-steam--3 { left: 65%; animation-delay: 1.6s; } @keyframes steamRise { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: 0.8; } 60% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-40px) translateX(8px) scale(1.4); } } .obs__brb-text { font-family: 'Courier New', monospace; font-size: 28px; color: #ffba6a; font-weight: 900; letter-spacing: 4px; text-shadow: 2px 2px 0 #c91d1d, 4px 4px 0 #1a1a1a; margin-top: 12px; animation: brbBlink 1.5s steps(2) infinite; } @keyframes brbBlink { 0%, 80%, 100% { opacity: 1; } 90% { opacity: 0.5; } } .obs__brb-sub { font-size: 12px; color: #aaa; font-family: 'Courier New', monospace; } .obs__brb-progress { width: 220px; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-top: 8px; } .obs__brb-progress-fill { height: 100%; background: linear-gradient(90deg, #ff994a, #ffba6a, #ff994a); background-size: 200% 100%; animation: brbProgress 3s linear infinite; width: 100%; } @keyframes brbProgress { 0% { background-position: 0% 0; transform: translateX(-100%); } 50% { transform: translateX(0%); } 100% { background-position: 200% 0; transform: translateX(100%); } } /* === MENU scene === */ .obs__menu-scene { position: absolute; inset: 0; background: linear-gradient(180deg, #1a3f8b 0%, #0a1530 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow: hidden; font-family: 'Geist', Tahoma, sans-serif; } .obs__menu-bg { position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(91, 120, 255, 0.4) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(245, 197, 66, 0.3) 0%, transparent 50%); animation: menuGlow 6s ease-in-out infinite alternate; } @keyframes menuGlow { 0% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1.2) rotate(8deg); } } .obs__menu-particle { position: absolute; width: 6px; height: 6px; border-radius: 1px; bottom: 0; animation: menuParticle 5s linear infinite; pointer-events: none; } @keyframes menuParticle { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; } } .obs__menu-logo { display: flex; gap: 4px; z-index: 2; } .obs__menu-pixel-letter { display: inline-block; font-family: 'Geist', Tahoma; font-size: 42px; font-weight: 900; color: #fff; text-shadow: 3px 3px 0 #1a3f8b, 6px 6px 0 #5b78ff, 9px 9px 12px rgba(0,0,0,0.5); letter-spacing: 2px; animation: menuLetter 2.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.1s); } .obs__menu-pixel-letter:nth-child(1) { animation-delay: 0s; } .obs__menu-pixel-letter:nth-child(2) { animation-delay: 0.1s; } .obs__menu-pixel-letter:nth-child(3) { animation-delay: 0.2s; } .obs__menu-pixel-letter:nth-child(4) { animation-delay: 0.3s; } .obs__menu-pixel-letter:nth-child(5) { animation-delay: 0.4s; } .obs__menu-pixel-letter:nth-child(6) { animation-delay: 0.5s; } .obs__menu-pixel-letter:nth-child(7) { animation-delay: 0.6s; } .obs__menu-pixel-letter:nth-child(8) { animation-delay: 0.7s; } .obs__menu-pixel-letter--accent { color: #f5c542; text-shadow: 3px 3px 0 #c98e58, 6px 6px 0 #f28e1c, 9px 9px 12px rgba(0,0,0,0.5); } @keyframes menuLetter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .obs__menu-day { font-family: 'Courier New', monospace; font-size: 18px; color: #f5c542; background: rgba(0,0,0,0.4); padding: 4px 14px; border: 1px solid #f5c542; border-radius: 3px; z-index: 2; text-shadow: 0 0 6px rgba(245, 197, 66, 0.6); } .obs__menu-tagline { font-size: 13px; color: #cdd9ec; font-style: italic; z-index: 2; } /* === END scene === */ .obs__end-scene { position: absolute; inset: 0; background: linear-gradient(180deg, #1a1a3a 0%, #0a0a1a 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow: hidden; font-family: 'Geist', Tahoma, sans-serif; } .obs__end-confetti { position: absolute; width: 8px; height: 14px; top: -20px; animation: endConfetti 4s linear infinite; pointer-events: none; } @keyframes endConfetti { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(120vh) rotate(720deg); opacity: 0; } } .obs__end-title { font-family: 'Geist', Tahoma; font-size: 48px; font-weight: 900; color: #ffba6a; text-shadow: 3px 3px 0 #c91d1d, 6px 6px 12px rgba(0,0,0,0.5); z-index: 2; } .obs__end-sub { font-size: 16px; color: #fff; z-index: 2; } .obs__end-icons { display: flex; gap: 14px; z-index: 2; margin-top: 10px; } .obs__end-icon { font-size: 32px; animation: endIconBob 1.5s ease-in-out infinite; } .obs__end-icon:nth-child(1) { animation-delay: 0s; } .obs__end-icon:nth-child(2) { animation-delay: 0.3s; } .obs__end-icon:nth-child(3) { animation-delay: 0.6s; } @keyframes endIconBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .obs__end-link { margin-top: 8px; font-family: 'Courier New', monospace; font-size: 13px; color: #5b78ff; z-index: 2; } /* === Webcam overlay === */ .obs__webcam { position: absolute; bottom: 88px; right: 12px; width: 110px; height: 110px; background: linear-gradient(180deg, #3b8a2b, #1a3a10); border: 3px solid #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-size: 11px; overflow: hidden; z-index: 5; box-shadow: 0 4px 12px rgba(0,0,0,0.5); } .obs__webcam-face { margin-top: -4px; } .obs__webcam-mic { position: absolute; bottom: 22px; display: flex; gap: 2px; align-items: flex-end; height: 16px; } .obs__webcam-wave { width: 3px; background: #5dff8a; box-shadow: 0 0 4px #5dff8a; animation: micWave 0.6s ease-in-out infinite; } .obs__webcam-wave:nth-child(1) { height: 6px; animation-delay: 0s; } .obs__webcam-wave:nth-child(2) { height: 12px; animation-delay: 0.2s; } .obs__webcam-wave:nth-child(3) { height: 6px; animation-delay: 0.4s; } @keyframes micWave { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1.4); } } .obs__webcam-label { position: absolute; bottom: 6px; font-family: 'Courier New', monospace; font-size: 10px; color: #fff; background: rgba(0,0,0,0.5); padding: 1px 6px; border-radius: 2px; } .obs__preview-meta { display: flex; gap: 14px; padding: 6px 8px; background: #2a2a2a; font-size: 11px; color: #aaa; } .obs__preview-meta b { color: #5dff8a; } .obs__sidebar { display: flex; flex-direction: column; gap: 8px; min-height: 0; } .obs__panel { background: #2a2a2a; border: 1px solid #444; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-height: 0; } .obs__panel-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #888; font-weight: 700; margin-bottom: 4px; } .obs__scene-row { padding: 5px 8px; cursor: pointer; background: #1a1a1a; border: 1px solid #333; font-size: 12px; color: #ddd; border-radius: 2px; } .obs__scene-row:hover { background: #333; } .obs__scene-row.is-active { background: #5dff8a; color: #1a1a1a; font-weight: 700; } .obs__stat { display: flex; justify-content: space-between; font-size: 11.5px; padding: 2px 0; } .obs__stat b { color: #5dff8a; } .obs__bottom { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; padding: 0 14px 14px; min-height: 160px; } .obs__chat-list, .obs__donates-list { flex: 1; overflow: auto; background: #0a0a0a; padding: 6px; border: 1px solid #333; font-size: 11.5px; } .obs__chat-empty { color: #555; font-style: italic; text-align: center; padding: 12px; } .obs__chat-row { padding: 2px 4px; } .obs__chat-who { color: #5b78ff; font-weight: 700; margin-right: 6px; } .obs__chat-text { color: #ddd; } .obs__donate-row { background: rgba(245, 197, 66, 0.15); border-left: 3px solid #f5c542; padding: 4px 8px; margin-bottom: 4px; } .obs__donate-who { color: #f5c542; font-weight: 700; } .obs__donate-amt { float: right; color: #5dff8a; font-weight: 700; } .obs__donate-msg { font-size: 10.5px; color: #aaa; margin-top: 2px; font-style: italic; } /* Cabbafon Mode (Konami) — rainbow tint on desktop icons */ body.cf-cabbafon-mode .desktop-icons .desk-icon { animation: cabbafonHue 6s linear infinite; } body.cf-cabbafon-mode .taskbar { background: linear-gradient(180deg, #ff5b6e 0%, #ff994a 14%, #f5d23d 28%, #6bd66e 42%, #4dc8e6 56%, #5b78ff 70%, #b46af0 84%, #ff5b6e 100%) !important; background-size: 400% 100% !important; animation: cabbafonStripe 9s linear infinite; } body.cf-cabbafon-mode .taskbar__start { filter: brightness(1.15) saturate(1.4); } @keyframes cabbafonHue { 0%, 100% { filter: hue-rotate(0deg) saturate(1.0); } 50% { filter: hue-rotate(180deg) saturate(1.4); } } @keyframes cabbafonStripe { 0% { background-position: 0% 0; } 100% { background-position: 400% 0; } } /* ============================================================= МИНИ-ИГРЫ ЭПОХИ (Tetris / Snake / Breakout / Pinball) общий каркас .xpgame ============================================================= */ .xpgame { display: grid; grid-template-columns: 1fr 180px; height: 100%; background: #1a1f2c; font-family: Tahoma, sans-serif; color: #cdd; } .xpgame__main { display: grid; place-items: center; background: linear-gradient(180deg, #1a1f2c 0%, #0a1530 100%); padding: 12px; overflow: auto; min-width: 0; } .xpgame__canvas { background: #0a1530; display: block; max-width: 100%; max-height: 100%; image-rendering: pixelated; border: 2px solid #2c3450; box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 0 0 1px #5b78ff; } .xpgame__sidebar { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: linear-gradient(180deg, #ece9d8 0%, #c9c4ad 100%); border-left: 1px solid #a39778; color: #1a1a1a; font-size: 11px; overflow: auto; } .xpgame__sidebar--narrow { padding: 10px; } .xpgame__panel { background: #fff; border: 1px solid #b6ad93; border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; } .xpgame__panel-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #5a5240; font-weight: 700; margin-bottom: 4px; } .xpgame__panel canvas { display: block; margin: 0 auto; background: #0a1530; border: 1px solid #2c3450; } .xpgame__row { display: flex; justify-content: space-between; font-size: 11px; color: #1a1a1a; } .xpgame__row strong { color: #1a3f8b; font-family: 'Geist', 'Tahoma', sans-serif; } .xpgame__hint { font-size: 10.5px; color: #5a5240; line-height: 1.55; background: #f4f2e6; border: 1px solid #b6ad93; border-radius: 3px; padding: 6px 8px; } /* Адаптация под узкое окно — сайдбар вниз */ @media (max-width: 540px) { .xpgame { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .xpgame__sidebar { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 8px; } .xpgame__panel { flex: 1; min-width: 100px; } .xpgame__hint { flex-basis: 100%; } } /* ============================================================= СИСТЕМНЫЕ ТУЛЫ — общий каркас ============================================================= */ .systool { display: flex; flex-direction: column; height: 100%; background: #ece9d8; font-family: Tahoma, sans-serif; font-size: 11px; color: #1a1a1a; } .systool__toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: linear-gradient(180deg, #f7f5e9 0%, #dcd6bb 100%); border-bottom: 1px solid #a39778; } .systool__spacer { flex: 1; } .systool__stat { font-size: 10.5px; color: #44485a; padding: 0 6px; } .systool__statusbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px; background: linear-gradient(180deg, #f7f5e9 0%, #dcd6bb 100%); border-top: 1px solid #a39778; font-size: 10px; color: #3a3a3a; min-height: 22px; } .systool__progressbar { position: relative; flex: 1; max-width: 280px; height: 14px; background: #fff; border: 1px solid #888; border-radius: 2px; overflow: hidden; } .systool__progressbar-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #5cd84d, #2a9119); transition: width 80ms linear; } .systool__progressbar-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #1a1a1a; } /* DEFRAG */ .defrag__grid { flex: 1; display: grid; grid-template-columns: repeat(32, 1fr); gap: 1px; padding: 12px; background: #1a1a1a; border-top: 1px solid #888; border-bottom: 1px solid #888; overflow: hidden; } .defrag__cell { aspect-ratio: 1 / 1; background: #e8e8e8; transition: background-color 100ms; } .defrag__cell--free { background: #e8e8e8; } .defrag__cell--used { background: #3b8a2b; } .defrag__cell--frag { background: #c91d1d; } .defrag__cell--system { background: #f5c542; } .defrag__cell--unmovable { background: #1a1a1a; border: 1px solid #444; } .defrag__legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 12px; background: #ece9d8; border-top: 1px solid #a39778; font-size: 10px; } .defrag__legend-item { display: flex; align-items: center; gap: 4px; color: #3a3a3a; } .defrag__sw { display: inline-block; width: 12px; height: 12px; } .xp-select { height: 22px; padding: 0 4px; border: 1px solid #888; background: #fff; font-family: Tahoma; font-size: 11px; } /* CLEANUP */ .cleanup { padding: 0; } .cleanup__calc, .cleanup__cleaning, .cleanup__done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex: 1; padding: 30px; text-align: center; } .cleanup__calc-title { font-size: 14px; font-weight: 700; } .cleanup__calc-hint { font-size: 10.5px; color: #5a5240; } .cleanup__done-icon { font-size: 56px; color: #2a9119; } .cleanup__done-title { font-size: 18px; font-weight: 800; color: #1a3f8b; } .cleanup__done-msg { font-size: 12px; color: #5a5240; max-width: 320px; } .cleanup__header { padding: 14px 16px; background: #fff; border-bottom: 1px solid #b6ad93; font-size: 12px; line-height: 1.5; } .cleanup__list { flex: 1; overflow: auto; padding: 8px 12px; background: #fff; } .cleanup__row { display: grid; grid-template-columns: 22px 1fr 80px 1.4fr; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px dashed #d3cdb5; cursor: pointer; font-size: 11px; } .cleanup__row:hover { background: #f8f6e9; } .cleanup__row-name { font-weight: 700; } .cleanup__row-size { text-align: right; color: #1a3f8b; font-weight: 700; } .cleanup__row-desc { color: #5a5240; font-size: 10.5px; } .cleanup__footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #ece9d8; border-top: 1px solid #a39778; font-size: 12px; } /* SYSINFO (msinfo32) */ .sysinfo__main { display: grid; grid-template-columns: 240px 1fr; flex: 1; min-height: 0; } .sysinfo__tree { background: #fff; border-right: 1px solid #a39778; padding: 6px 0; overflow: auto; } .sysinfo__node { display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer; font-size: 11.5px; } .sysinfo__node:hover { background: #f0eee0; } .sysinfo__node.is-active { background: linear-gradient(180deg, #2c5cb6, #1a3f8b); color: #fff; } .sysinfo__node--child { padding-left: 22px; font-size: 11px; color: #44485a; } .sysinfo__node--child.is-active { color: #fff; } .sysinfo__chev { width: 10px; text-align: center; font-size: 9px; color: #888; } .sysinfo__node.is-active .sysinfo__chev { color: #fff; } .sysinfo__detail { background: #fff; padding: 0; overflow: auto; display: flex; flex-direction: column; } .sysinfo__path { padding: 6px 12px; background: linear-gradient(180deg, #f7f5e9, #ece9d8); border-bottom: 1px solid #a39778; font-size: 11px; font-weight: 700; color: #5a5240; } .sysinfo__table { width: 100%; border-collapse: collapse; font-size: 11px; } .sysinfo__table th { background: linear-gradient(180deg, #fff, #e8e6d0); border-bottom: 1px solid #a39778; border-right: 1px solid #a39778; padding: 4px 8px; text-align: left; font-weight: 700; color: #5a5240; font-size: 10.5px; position: sticky; top: 0; } .sysinfo__table td { padding: 4px 8px; border-bottom: 1px dashed #ece9d8; border-right: 1px solid #f4f2e6; } .sysinfo__table tr:hover { background: #fafaf2; } /* DXDIAG */ .dxdiag__tabs { display: flex; gap: 0; background: #ece9d8; border-bottom: 1px solid #a39778; padding: 4px 4px 0; } .dxdiag__tab { padding: 5px 14px 6px; border: 1px solid #a39778; border-bottom: none; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #f4f2e6, #d4cda6); font-size: 11px; cursor: pointer; margin-right: 1px; } .dxdiag__tab:hover:not(.is-active) { background: linear-gradient(180deg, #fff, #f4f2e6); } .dxdiag__tab.is-active { background: #fff; font-weight: 700; position: relative; z-index: 1; margin-bottom: -1px; padding-bottom: 7px; } .dxdiag__content { flex: 1; background: #fff; padding: 12px 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; } .dxdiag__section-title { font-size: 13px; font-weight: 700; color: #1a3f8b; margin-bottom: 4px; } .dxdiag__notes { background: #f4f2e6; border: 1px solid #b6ad93; border-radius: 3px; padding: 8px 10px; margin-top: 4px; } .dxdiag__notes-title { font-weight: 700; font-size: 11px; color: #5a5240; margin-bottom: 4px; } .dxdiag__notes-body { font-size: 11px; color: #1a1a1a; line-height: 1.4; } /* ============================================================= FREECELL ============================================================= */ .freecell { display: flex; flex-direction: column; height: 100%; background: #1a5a55; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06), transparent 50%), radial-gradient(circle at 80% 80%, rgba(0,0,0,0.2), transparent 60%); font-family: Tahoma, sans-serif; color: #fff; position: relative; overflow: hidden; } .freecell__top { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(0,0,0,0.4); } .freecell__bar { display: flex; align-items: center; gap: 12px; font-size: 11px; } .freecell__moves { color: #cdd; } .freecell__cells { display: flex; align-items: center; gap: 6px; } .freecell__divider { width: 1px; height: 80px; background: rgba(255,255,255,0.3); margin: 0 6px; } .freecell__slot { width: 60px; height: 90px; background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.3); border-radius: 4px; display: grid; place-items: center; cursor: pointer; } .freecell__slot.is-selected, .freecell__cardwrap.is-selected .fccard { outline: 2px solid #ffe08a; box-shadow: 0 0 12px rgba(255, 224, 138, 0.7); } .freecell__placeholder { font-size: 10px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; } .freecell__placeholder--col { font-size: 11px; } .freecell__board { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; padding: 14px 12px; overflow: auto; } .freecell__col { position: relative; min-height: 220px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.15); border-radius: 4px; } .freecell__cardwrap { position: absolute; left: 50%; transform: translateX(-50%); cursor: pointer; } .fccard { width: 60px; height: 90px; background: #fff; border: 1px solid #1a1a1a; border-radius: 4px; position: relative; box-shadow: 1px 1px 4px rgba(0,0,0,0.4); font-family: Georgia, serif; user-select: none; } .fccard--red { color: #c91d1d; } .fccard--black { color: #1a1a1a; } .fccard__corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; } .fccard__corner--tl { top: 4px; left: 4px; } .fccard__corner--br { bottom: 4px; right: 4px; transform: rotate(180deg); } .fccard__rank { font-size: 13px; font-weight: 800; } .fccard__suit { font-size: 12px; } .fccard__center { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; } .freecell__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); display: grid; place-items: center; z-index: 100; } .freecell__won { background: linear-gradient(180deg, #ffe9b8, #f3c270); border: 3px solid #c98e58; border-radius: 8px; padding: 28px 36px; text-align: center; color: #1a1a1a; font-family: 'Geist', Tahoma, sans-serif; } .freecell__won-title { font-size: 22px; font-weight: 800; color: #6a3300; margin-bottom: 6px; } .freecell__won-sub { font-size: 13px; color: #5a5240; margin-bottom: 14px; } /* ============================================================= REVERSI ============================================================= */ .reversi { display: flex; flex-direction: column; height: 100%; background: linear-gradient(180deg, #2a5a3a 0%, #1a3a20 100%); padding: 10px; gap: 8px; font-family: Tahoma, sans-serif; color: #fff; } .reversi__top { display: flex; align-items: center; gap: 12px; padding: 6px 8px; background: rgba(0,0,0,0.25); border-radius: 4px; font-size: 12px; } .reversi__spacer { flex: 1; } .reversi__check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #cdd; cursor: pointer; } .reversi__count { font-family: 'Geist', Tahoma, sans-serif; font-weight: 800; font-size: 16px; color: #ffe08a; } .reversi__hint { font-size: 12px; color: #ffe08a; text-align: center; padding: 4px; background: rgba(0,0,0,0.2); border-radius: 4px; } .reversi__board { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 2px; padding: 6px; background: #1a3a10; border: 3px solid #5a3a10; border-radius: 4px; box-shadow: inset 0 0 12px rgba(0,0,0,0.4); aspect-ratio: 1 / 1; max-height: 100%; margin: 0 auto; width: min(420px, 100%); } .reversi__cell { background: linear-gradient(135deg, #3b8a2b 0%, #2a6020 100%); border-radius: 2px; display: grid; place-items: center; cursor: pointer; position: relative; } .reversi__cell:hover { background: linear-gradient(135deg, #5cb24d 0%, #3b8a2b 100%); } .reversi__cell.is-hint { background: linear-gradient(135deg, #6dd25e 0%, #4ca230 100%); } .reversi__disc { width: 78%; height: 78%; border-radius: 50%; box-shadow: inset -3px -4px 6px rgba(0,0,0,0.4), 1px 1px 4px rgba(0,0,0,0.5); animation: reversiFlip 240ms ease-out; } .reversi__disc--b { background: radial-gradient(circle at 35% 30%, #5a5a5a 0%, #1a1a1a 60%, #000 100%); } .reversi__disc--w { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #d4d4d4 60%, #a0a0a0 100%); } .reversi__hint-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 224, 138, 0.55); border: 2px solid #ffe08a; } @keyframes reversiFlip { 0% { transform: scaleX(0.1); } 100% { transform: scaleX(1); } } /* ===================================================================== WINLOCKER — школьный фулл-скрин «вирус» начала 2000-х. Поверх ВСЕГО (z-index 100000+), черно-красный, с шумом и сканлайнами. Кнопка «НЕТ» убегает (см. winlocker.jsx → WinlockerLogic). ===================================================================== */ .winlocker { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; font-family: 'Courier New', 'Lucida Console', monospace; color: #ffd6d6; user-select: none; cursor: not-allowed; overflow: hidden; } .winlocker__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #4a0606 0%, #1a0202 60%, #000 100%); animation: wlBgPulse 1.4s ease-in-out infinite; } @keyframes wlBgPulse { 0%, 100% { background-color: #1a0202; } 50% { background-color: #2a0404; } } .winlocker__scan { position: absolute; inset: 0; background: repeating-linear-gradient( 180deg, rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0) 2px, rgba(0,0,0,0.35) 2px, rgba(0,0,0,0.35) 3px ); pointer-events: none; mix-blend-mode: multiply; } .winlocker__noise { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,0,0,0.08) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 4px 4px, 7px 7px; background-position: 0 0, 2px 1px; pointer-events: none; animation: wlNoiseShift 0.4s steps(4) infinite; opacity: 0.6; } @keyframes wlNoiseShift { 0% { transform: translate(0, 0); } 25% { transform: translate(-1px, 2px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-2px, 1px); } 100% { transform: translate(0, 0); } } .winlocker__card { position: relative; z-index: 2; width: min(720px, 92vw); background: linear-gradient(180deg, #0a0000 0%, #1a0404 100%); border: 4px double #ff2020; box-shadow: 0 0 0 2px #000, 0 0 24px 4px rgba(255,32,32,0.6), 0 0 80px rgba(255,0,0,0.4); padding: 22px 28px 24px; animation: wlCardShake 0.8s ease-in-out infinite; } @keyframes wlCardShake { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-2px, 1px) rotate(-0.3deg); } 50% { transform: translate(1px, -2px) rotate(0.3deg); } 75% { transform: translate(-1px, 2px) rotate(-0.2deg); } } .winlocker__header { display: flex; align-items: center; gap: 12px; border-bottom: 2px dashed #ff5050; padding-bottom: 10px; margin-bottom: 14px; } .winlocker__skull { font-size: 36px; color: #ff4040; text-shadow: 0 0 12px #ff0000; animation: wlSkullPulse 0.6s ease-in-out infinite alternate; } @keyframes wlSkullPulse { from { transform: scale(1); } to { transform: scale(1.15) rotate(3deg); } } .winlocker__head-text { flex: 1; text-align: center; } .winlocker__title { font-size: 26px; font-weight: 900; color: #ff3030; letter-spacing: 2px; text-shadow: 2px 2px 0 #800000, 0 0 8px #ff0000; line-height: 1.1; } .winlocker__title.is-blink { color: #ffff60; text-shadow: 2px 2px 0 #800000, 0 0 12px #ffaa00; } .winlocker__sub { font-size: 11px; color: #ffaaaa; letter-spacing: 3px; margin-top: 4px; opacity: 0.8; } .winlocker__body { text-align: center; margin-bottom: 18px; } .winlocker__demand-line { font-size: 14px; color: #ffd6d6; margin: 0 0 10px; letter-spacing: 1px; } .winlocker__demand-box { background: rgba(0, 0, 0, 0.6); border: 1px solid #ff4040; border-radius: 2px; padding: 12px 16px; margin: 10px 0; text-align: left; font-size: 14px; } .winlocker__demand-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px dotted rgba(255, 64, 64, 0.3); } .winlocker__demand-row:last-child { border-bottom: none; } .winlocker__demand-k { color: #ff8080; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } .winlocker__demand-v { color: #ffe0a0; font-weight: 700; text-align: right; } .winlocker__demand-v--big { font-size: 18px; color: #ffff60; text-shadow: 0 0 8px #ffaa00; font-weight: 900; } .winlocker__demand-v--free { color: #5dff8a; text-shadow: 0 0 8px #00ff00; text-transform: uppercase; letter-spacing: 1px; } .winlocker__taunt { font-size: 16px; font-weight: 700; color: #ff6060; margin: 12px 0 8px; letter-spacing: 1px; text-shadow: 0 0 4px #ff0000; animation: wlTauntFlicker 0.3s steps(2) infinite; } @keyframes wlTauntFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .winlocker__warn { font-size: 11px; color: #ff9090; letter-spacing: 1px; margin-top: 6px; } .winlocker__counter { font-size: 14px; color: #ffff60; margin-top: 8px; font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 6px #ffaa00; } .winlocker__buttons { display: flex; justify-content: center; gap: 24px; } .winlocker__btn { font-family: 'Courier New', monospace; font-weight: 900; font-size: 18px; letter-spacing: 2px; padding: 14px 36px; border: 3px outset; cursor: pointer; text-transform: uppercase; transition: transform 100ms ease-out, box-shadow 100ms; /* Кнопка по умолчанию в потоке */ position: relative; } .winlocker__btn:active { border-style: inset; } .winlocker__btn--yes { background: linear-gradient(180deg, #4a8030, #2a5018); color: #fff; border-color: #5dff8a #205010 #205010 #5dff8a; box-shadow: 0 0 12px rgba(93,255,138,0.4); } .winlocker__btn--yes:hover { background: linear-gradient(180deg, #5da840, #3a6020); box-shadow: 0 0 18px rgba(93,255,138,0.7); transform: scale(1.05); } .winlocker__btn--no { background: linear-gradient(180deg, #802020, #501010); color: #ffe0e0; border-color: #ff5050 #400808 #400808 #ff5050; box-shadow: 0 0 12px rgba(255,64,64,0.4); /* Когда позиция явно задана — кнопка переходит в fixed */ } .winlocker__btn--no.is-fugitive { /* style уже выставлен inline; визуальный «полёт» через transition */ transition: left 240ms cubic-bezier(.5,1.8,.4,1), top 240ms cubic-bezier(.5,1.8,.4,1); box-shadow: 0 0 22px rgba(255,64,64,0.85); } .winlocker__btn--no:hover { /* hover теоретически не должен сработать (кнопка убегает), но на случай тач-устройств — стиль */ background: linear-gradient(180deg, #a02828, #601414); } /* ============================================================ ВОР ОРЕШКОВ — voxel 3D mini-game ============================================================ */ .nutthief { position: relative; width: 100%; height: 100%; background: #1a0f08; overflow: hidden; user-select: none; font-family: Tahoma, sans-serif; cursor: pointer; } .nutthief__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .nutthief__canvas canvas { display: block; width: 100% !important; height: 100% !important; } .nutthief__hud { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; pointer-events: none; z-index: 10; } .nutthief__hud-stats { display: flex; gap: 8px; flex-wrap: wrap; } .nutthief__hud-pill { background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(244, 200, 100, 0.4); color: #ffd078; font-family: 'Consolas', 'Courier New', monospace; font-weight: 700; font-size: 14px; padding: 5px 11px; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.5); letter-spacing: 0.5px; text-shadow: 0 0 6px rgba(255, 180, 80, 0.6); } .nutthief__hud-pill--hs { border-color: rgba(255, 240, 120, 0.7); color: #fff2a0; background: linear-gradient(180deg, rgba(80, 50, 0, 0.7), rgba(40, 25, 0, 0.7)); } .nutthief__overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(60, 30, 10, 0.85), rgba(10, 5, 0, 0.95)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; z-index: 20; text-align: center; padding: 24px; } .nutthief__title { font-family: 'Impact', 'Tahoma Bold', sans-serif; font-size: 56px; font-weight: 900; color: #ffce5a; text-shadow: 0 0 20px rgba(255, 180, 60, 0.8), 0 4px 0 #6a3818, 0 5px 0 #4a2008, 0 6px 12px rgba(0, 0, 0, 0.8); letter-spacing: 4px; margin-bottom: -8px; } .nutthief__title--over { color: #ff5e3a; text-shadow: 0 0 20px rgba(255, 80, 40, 0.8), 0 4px 0 #6a1818, 0 5px 0 #3a0808, 0 6px 12px rgba(0, 0, 0, 0.8); } .nutthief__subtitle { font-size: 14px; color: #c4a058; font-style: italic; letter-spacing: 2px; margin-bottom: 8px; } .nutthief__lore { max-width: 560px; color: #e8d4a8; font-size: 13px; line-height: 1.7; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(180, 130, 60, 0.4); padding: 14px 20px; border-radius: 6px; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5); } .nutthief__lore b { color: #ffd078; } .nutthief__lore i { color: #b08850; font-size: 12px; } .nutthief__btn { background: linear-gradient(180deg, #f5b041 0%, #c47010 100%); color: #fff; border: 2px solid #6a3818; font-family: 'Impact', sans-serif; font-size: 24px; letter-spacing: 3px; padding: 12px 36px; border-radius: 4px; cursor: pointer; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 0 #4a2008, 0 6px 16px rgba(0, 0, 0, 0.6); transition: transform 0.08s, box-shadow 0.08s, filter 0.1s; } .nutthief__btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 5px 0 #4a2008, 0 8px 22px rgba(0, 0, 0, 0.7); } .nutthief__btn:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 0 #4a2008; } .nutthief__hs { color: #ffce5a; font-size: 14px; font-weight: 700; letter-spacing: 1px; } .nutthief__hs b { color: #fff2a0; font-size: 18px; font-family: 'Consolas', monospace; } .nutthief__caught { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(120, 30, 20, 0.7), rgba(40, 10, 5, 0.9)); z-index: 15; pointer-events: none; animation: nutthief-shake 0.4s ease-out; } @keyframes nutthief-shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70% { transform: translateX(-8px); } 20%, 40%, 60%, 80% { transform: translateX(8px); } } .nutthief__caught-icon { font-size: 96px; filter: drop-shadow(0 0 20px rgba(255, 50, 30, 0.8)); margin-bottom: 6px; animation: nutthief-bounce 0.5s ease-out; } @keyframes nutthief-bounce { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } } .nutthief__caught-line { font-size: 22px; font-weight: 700; color: #fff; font-style: italic; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 14px rgba(255, 80, 40, 0.5); max-width: 80%; text-align: center; } .nutthief__caught-sub { margin-top: 10px; font-size: 12px; color: #ffc4a8; letter-spacing: 1px; } .nutthief__final { background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(180, 130, 60, 0.5); border-radius: 6px; padding: 16px 32px; color: #e8d4a8; font-size: 16px; line-height: 2; text-align: left; min-width: 280px; font-family: 'Consolas', monospace; } .nutthief__final b { color: #ffd078; font-size: 20px; } .nutthief__newhs { margin-top: 10px; text-align: center; font-family: 'Impact', sans-serif; font-size: 22px; color: #fff2a0; letter-spacing: 3px; text-shadow: 0 0 14px rgba(255, 240, 100, 0.8); animation: nutthief-pulse 0.8s ease-in-out infinite alternate; } @keyframes nutthief-pulse { from { transform: scale(1); } to { transform: scale(1.06); } } .nutthief__hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(244, 200, 100, 0.4); color: #ffd078; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: 1px; pointer-events: none; z-index: 10; animation: nutthief-hint-pulse 1.5s ease-in-out infinite alternate; } @keyframes nutthief-hint-pulse { from { opacity: 0.7; } to { opacity: 1; } } /* ============================================================ КАБЫЧ ПОД ДОНАТОМ — voxel stream-panic ============================================================ */ .fridge { position: relative; width: 100%; height: 100%; /* Запасной градиент в тон неба — виден только при загрузке canvas */ background: radial-gradient(circle at 48% 22%, rgba(255, 183, 88, 0.22), transparent 36%), linear-gradient(180deg, #342a1e 0%, #16110c 58%, #080706 100%); overflow: hidden; user-select: none; font-family: Tahoma, sans-serif; } .fridge__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .fridge__canvas canvas { display: block; width: 100% !important; height: 100% !important; } /* HUD-pills сверху — тёплый кремово-золотой стиль под комнату */ .fridge__hud-top { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; pointer-events: none; z-index: 10; flex-wrap: wrap; } .fridge__hud-pill { background: linear-gradient(180deg, rgba(48, 28, 14, 0.78), rgba(28, 16, 8, 0.82)); border: 1px solid rgba(220, 180, 110, 0.55); padding: 5px 12px; border-radius: 5px; color: #f4e6c2; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 2px 8px rgba(40, 20, 5, 0.35); } .fridge__hud-pill b { color: #fff5d0; } .fridge__hud-pill--hs { background: linear-gradient(180deg, rgba(110, 70, 18, 0.85), rgba(60, 35, 6, 0.88)); border-color: rgba(255, 220, 120, 0.85); color: #fff2a0; box-shadow: inset 0 1px 0 rgba(255, 235, 160, 0.4), 0 2px 10px rgba(255, 200, 80, 0.25), 0 2px 8px rgba(40, 20, 5, 0.35); } /* DONATION ALERT — большой блок с информацией */ .fridge__alert { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); width: min(640px, 90%); background: linear-gradient(180deg, rgba(36, 25, 16, 0.92), rgba(13, 10, 8, 0.94)), radial-gradient(circle at 50% 0%, rgba(255, 197, 105, 0.22), transparent 55%); border: 2px solid; border-radius: 8px; padding: 15px 24px; pointer-events: none; z-index: 12; text-align: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 12px 34px rgba(0, 0, 0, 0.72); animation: fridge-alert-in 0.35s cubic-bezier(.34,1.56,.64,1); } .fridge__alert.good { border-color: #5dff8a; box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 12px 34px rgba(0, 0, 0, 0.72), 0 0 24px rgba(93, 255, 138, 0.35); } .fridge__alert.evil { border-color: #ff4040; box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.55), 0 12px 34px rgba(0, 0, 0, 0.72), 0 0 32px rgba(255, 70, 70, 0.52); animation: fridge-alert-in 0.35s cubic-bezier(.34,1.56,.64,1), fridge-alert-shake 0.3s ease-in-out; } @keyframes fridge-alert-in { from { opacity: 0; transform: translate(-50%, -100%) scale(0.7); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } } @keyframes fridge-alert-shake { 0%, 100% { transform: translateX(-50%); } 25% { transform: translate(calc(-50% - 6px), 0); } 75% { transform: translate(calc(-50% + 6px), 0); } } .fridge__alert-head { font-size: 14px; color: #ffba6a; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 8px; } .fridge__alert-head b { color: #fff2a0; font-size: 18px; } .fridge__alert-body { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; font-style: italic; line-height: 1.4; } .fridge__alert-icon { font-size: 22px; margin-right: 8px; vertical-align: middle; } .fridge__alert-action { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #ffd078; margin-bottom: 8px; text-transform: uppercase; } .fridge__alert.evil .fridge__alert-action { color: #ff7060; } .fridge__alert-timer { position: relative; height: 14px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; overflow: hidden; } .fridge__alert-timer-fill { height: 100%; transition: width 100ms linear, background 200ms ease; } .fridge__alert-timer-text { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Consolas', monospace; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); } /* Feedback popup */ .fridge__feedback { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Impact', sans-serif; font-size: 64px; font-weight: 900; letter-spacing: 4px; text-shadow: 0 0 30px currentColor, 0 4px 0 rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 30; animation: fridge-feedback 1.0s ease-out forwards; } .fridge__feedback.good { color: #5dff8a; } .fridge__feedback.bad { color: #ff4040; } @keyframes fridge-feedback { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } } /* Overlay (start/win) */ .fridge__overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 22%, rgba(255, 188, 98, 0.24), transparent 34%), radial-gradient(ellipse at center, rgba(42, 29, 18, 0.95), rgba(9, 7, 5, 0.98)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 20; text-align: center; padding: 24px; box-shadow: inset 0 0 110px rgba(0, 0, 0, 0.7); } .fridge__title { font-family: 'Impact', 'Tahoma Bold', sans-serif; font-size: 48px; font-weight: 900; color: #ffba6a; text-shadow: 0 0 20px rgba(255, 180, 100, 0.8), 0 4px 0 #6a3818, 0 5px 0 #4a2008, 0 6px 12px rgba(0, 0, 0, 0.8); letter-spacing: 3px; } .fridge__subtitle { font-size: 13px; color: #c4a888; font-style: italic; letter-spacing: 1.5px; margin-top: -6px; } .fridge__lore { max-width: 580px; color: #e0d8c8; font-size: 13px; line-height: 1.7; background: linear-gradient(180deg, rgba(34, 22, 13, 0.82), rgba(12, 9, 6, 0.86)), radial-gradient(circle at 50% 0%, rgba(255, 197, 105, 0.18), transparent 58%); border: 1px solid rgba(218, 168, 88, 0.5); padding: 14px 22px; border-radius: 6px; text-align: left; box-shadow: inset 0 1px 0 rgba(255, 224, 158, 0.14), 0 12px 28px rgba(0, 0, 0, 0.45); } .fridge__lore b { color: #ffd078; } .fridge__lore i { color: #b08850; font-size: 12px; } .fridge__btn { background: linear-gradient(180deg, #f5b041 0%, #c47010 100%); color: #fff; border: 2px solid #6a3818; font-family: 'Impact', sans-serif; font-size: 22px; letter-spacing: 3px; padding: 12px 36px; border-radius: 4px; cursor: pointer; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 0 #4a2008, 0 6px 16px rgba(0, 0, 0, 0.6); transition: filter 0.1s, transform 0.08s; } .fridge__btn:hover { filter: brightness(1.15); transform: translateY(-1px); } .fridge__btn:active { transform: translateY(2px); } .fridge__hs-big { color: #ffba6a; font-size: 14px; font-weight: 700; } .fridge__hs-big b { color: #fff; font-size: 18px; font-family: 'Consolas', monospace; } .fridge__death-icon { font-size: 96px; filter: drop-shadow(0 0 24px rgba(255, 100, 70, 0.7)); animation: fridge-bounce 0.5s ease-out; } @keyframes fridge-bounce { 0% { transform: scale(0.5) rotate(-15deg); opacity: 0; } 60% { transform: scale(1.2) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } } .fridge__caught-line { font-size: 18px; font-weight: 700; color: #fff; font-style: italic; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); max-width: 80%; } .fridge__final { background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(180, 130, 60, 0.4); border-radius: 6px; padding: 14px 28px; color: #e0d8c8; font-size: 14px; line-height: 2; font-family: 'Consolas', monospace; text-align: left; min-width: 240px; } .fridge__final b { color: #ffd078; font-size: 18px; } .fridge__newhs { margin-top: 6px; text-align: center; font-family: 'Impact', sans-serif; font-size: 22px; color: #fff2a0; letter-spacing: 3px; text-shadow: 0 0 15px rgba(255, 242, 160, 0.6); animation: fridge-newhs 0.6s ease-in-out infinite alternate; } @keyframes fridge-newhs { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.05); filter: brightness(1.2); } } /* Tilt-shift / Bloom overlay for diorama feel */ /* Vignette overlay for diorama feel (removed blur for clarity) */ .fridge__tilt-shift { position: absolute; inset: 0; pointer-events: none; z-index: 5; /* Мягкое виньетирование для фокусировки внимания на центре */ background: radial-gradient( circle at center, transparent 35%, rgba(0, 0, 0, 0.1) 65%, rgba(0, 0, 0, 0.4) 100% ); box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.4); } /* ============================================================ КАББАКИД: СПб → ПЕТРОЗАВОДСК — voxel trial moto ============================================================ */ .bikeride { position: relative; width: 100%; height: 100%; background: radial-gradient(circle at 55% 22%, rgba(255, 184, 92, 0.20), transparent 36%), linear-gradient(180deg, #5f95c7 0%, #84b6dc 42%, #2c482f 100%); overflow: hidden; user-select: none; font-family: Tahoma, sans-serif; } .bikeride__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .bikeride__canvas canvas { display: block; width: 100% !important; height: 100% !important; } /* Top HUD */ .bikeride__hud-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; z-index: 10; gap: 12px; flex-wrap: wrap; } .bikeride__hud-stage { background: linear-gradient(180deg, rgba(24, 31, 34, 0.92), rgba(10, 14, 16, 0.88)), radial-gradient(circle at 30% 0%, rgba(255, 185, 96, 0.18), transparent 58%); border: 1px solid rgba(255, 205, 120, 0.58); padding: 8px 14px; border-radius: 6px; color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 238, 190, 0.18); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .bikeride__hud-stage-num { font-family: 'Consolas', monospace; font-size: 11px; color: #ffba6a; font-weight: 700; letter-spacing: 1px; } .bikeride__hud-stage-name { font-family: 'Impact', 'Tahoma Bold', sans-serif; font-size: 18px; font-weight: 900; letter-spacing: 1px; color: #fff; text-shadow: 0 0 8px rgba(255, 200, 100, 0.5); margin: 1px 0; } .bikeride__hud-stage-sub { font-size: 11px; color: #c8c0a8; font-style: italic; } .bikeride__hud-stats { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; } .bikeride__hud-pill { background: linear-gradient(180deg, rgba(28, 34, 38, 0.90), rgba(8, 11, 12, 0.88)); border: 1px solid rgba(190, 220, 235, 0.34); color: #f1ead9; font-family: 'Consolas', monospace; font-weight: 700; font-size: 13px; padding: 5px 11px; border-radius: 4px; letter-spacing: 0.5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.28); } .bikeride__controls-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(10, 13, 12, 0.66); border: 1px solid rgba(255, 220, 150, 0.26); color: #f1e5cd; font-size: 12px; padding: 5px 14px; border-radius: 5px; pointer-events: none; z-index: 10; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Feedback popup */ .bikeride__feedback { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Impact', sans-serif; font-size: 64px; font-weight: 900; letter-spacing: 4px; text-shadow: 0 0 30px currentColor, 0 4px 0 rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 30; animation: bikeride-feedback 1.5s ease-out forwards; } .bikeride__feedback.good { color: #5dff8a; } .bikeride__feedback.bad { color: #ff4040; } .bikeride__feedback.crash { color: #ff8030; font-size: 56px; } @keyframes bikeride-feedback { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } } /* Overlay */ .bikeride__overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, rgba(255, 151, 74, 0.24), transparent 34%), linear-gradient(180deg, rgba(14, 29, 43, 0.97), rgba(7, 11, 12, 0.98)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 20; text-align: center; padding: 24px; box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.68); } .bikeride__title { font-family: 'Impact', 'Tahoma Bold', sans-serif; font-size: 42px; font-weight: 900; color: #ff9050; text-shadow: 0 0 20px rgba(255, 130, 60, 0.8), 0 4px 0 #6a1818, 0 5px 0 #3a0808, 0 6px 12px rgba(0, 0, 0, 0.8); letter-spacing: 3px; line-height: 1.1; } .bikeride__subtitle { font-size: 13px; color: #c8a888; font-style: italic; letter-spacing: 1.5px; } .bikeride__lore { max-width: 540px; color: #e0d8c8; font-size: 13px; line-height: 1.7; background: linear-gradient(180deg, rgba(29, 34, 34, 0.82), rgba(9, 12, 11, 0.88)), radial-gradient(circle at 50% 0%, rgba(255, 144, 80, 0.18), transparent 58%); border: 1px solid rgba(255, 154, 86, 0.48); padding: 14px 22px; border-radius: 6px; text-align: left; box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.13), 0 14px 34px rgba(0, 0, 0, 0.42); } .bikeride__lore b { color: #ffba6a; } .bikeride__lore i { color: #c8a888; font-size: 12px; } .bikeride__btn { background: linear-gradient(180deg, #ff8030 0%, #b04010 100%); color: #fff; border: 2px solid #6a1810; font-family: 'Impact', sans-serif; font-size: 24px; letter-spacing: 3px; padding: 12px 36px; border-radius: 4px; cursor: pointer; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 0 #4a0c08, 0 6px 16px rgba(0, 0, 0, 0.6); transition: filter 0.1s, transform 0.08s; } .bikeride__btn:hover { filter: brightness(1.15); transform: translateY(-1px); } .bikeride__btn:active { transform: translateY(2px); } .bikeride__hs-big { color: #ff9050; font-size: 14px; font-weight: 700; } .bikeride__hs-big b { color: #fff; font-size: 18px; font-family: 'Consolas', monospace; } .bikeride__death-icon { font-size: 96px; filter: drop-shadow(0 0 24px rgba(255, 130, 60, 0.7)); animation: bikeride-bounce 0.5s ease-out; } @keyframes bikeride-bounce { 0% { transform: scale(0.5) rotate(-15deg); opacity: 0; } 60% { transform: scale(1.2) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } } .bikeride__caught-line { font-size: 18px; font-weight: 700; color: #fff; font-style: italic; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); max-width: 80%; } .bikeride__final { background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 130, 60, 0.4); border-radius: 6px; padding: 14px 28px; color: #e0d8c8; font-size: 14px; line-height: 2; font-family: 'Consolas', monospace; text-align: left; min-width: 240px; } .bikeride__final b { color: #ffba6a; font-size: 18px; } /* Tilt-shift overlay for diorama feel (blur removed for clarity) */ .bikeride__tilt-shift { position: absolute; inset: 0; pointer-events: none; z-index: 5; /* Мягкое виньетирование для фокусировки на центре */ background: radial-gradient( circle at center, transparent 35%, rgba(0, 0, 0, 0.1) 65%, rgba(0, 0, 0, 0.4) 100% ); box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.4); } /* ===================================================================== КАББАФОН 2 — EVENT-DAY СИСТЕМА (Sprint 1: Service Pack фаза, трей, setup-wizard оверлей). Все стили под префиксом .is-sp-* / .setup-wizard / .activation-tray / .rubles-tray, чтобы не конфликтовать с существующими. ===================================================================== */ /* Service Pack эволюция — body-class layer над текущим data-theme. Luna = ничего (дефолт). Royale (после WinLocker, день 14) — лёгкий тёмно-оранжевый тинт по краям. Vista beta (после смерти активации, день 20) — тёплая полупрозрачная плёнка. */ body.is-sp-luna { /* default — без изменений */ } body.is-sp-royale { /* Чуть тонируем десктоп оранжево-стальным (Royale Media Center) */ filter: hue-rotate(-8deg) saturate(0.92); } body.is-sp-royale .desktop::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( 180deg, rgba(197, 73, 0, 0.04) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(197, 73, 0, 0.06) 100% ); } body.is-sp-vista { /* Vista beta — стеклянный голубой оттенок + лёгкое размытие краёв */ filter: hue-rotate(6deg) saturate(1.05) brightness(1.03); } body.is-sp-vista .desktop::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(circle at top right, rgba(120, 200, 255, 0.10), transparent 55%), linear-gradient(180deg, rgba(180, 220, 255, 0.06) 0%, transparent 35%); } /* ===================================================================== ТРЕЙ — счётчик активации Windows (cabbafonActivation) ===================================================================== */ .taskbar__tray-icon.activation-tray { display: flex; align-items: center; gap: 4px; padding: 0 6px; font-family: Tahoma, sans-serif; font-size: 10px; color: #fff; cursor: pointer; } .activation-tray__shield { width: 14px; height: 14px; display: grid; place-items: center; } .activation-tray__days { font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; } .activation-tray.is-warn { background: rgba(245, 197, 66, 0.15); } .activation-tray.is-warn .activation-tray__days { color: #ffd96a; } .activation-tray.is-crit { background: rgba(224, 74, 58, 0.18); animation: activation-blink 1.4s ease-in-out infinite; } .activation-tray.is-crit .activation-tray__days { color: #ff8a7a; } @keyframes activation-blink { 0%, 70%, 100% { opacity: 1; } 35% { opacity: 0.55; } } /* ===================================================================== ТРЕЙ — счётчик виртуальных рублей (cabbafonRubles) ===================================================================== */ .taskbar__tray-icon.rubles-tray { display: flex; align-items: center; gap: 4px; padding: 0 6px; font-family: Tahoma, sans-serif; font-size: 10px; color: #fff; cursor: pointer; } .rubles-tray__icon { width: 14px; height: 14px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #ffd96a; } .rubles-tray__balance { font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; } .rubles-tray__popover { position: absolute; bottom: 30px; right: 0; min-width: 240px; background: linear-gradient(180deg, #f4f7fc 0%, #d8e1ee 100%); border: 1px solid #5a78a8; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); padding: 8px 10px; z-index: 80; color: #0e2356; font-family: Tahoma, sans-serif; font-size: 11px; } .rubles-tray__popover-title { font-weight: 700; margin-bottom: 6px; border-bottom: 1px solid #b3c0d4; padding-bottom: 4px; } .rubles-tray__log-entry { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dotted #d1d8e3; } .rubles-tray__log-entry:last-child { border-bottom: none; } .rubles-tray__log-delta--pos { color: #1d6b2c; font-weight: 700; } .rubles-tray__log-delta--neg { color: #b03020; font-weight: 700; } /* ===================================================================== SETUP WIZARD оверлей (день 2, день 12) ===================================================================== */ .setup-wizard { position: fixed; inset: 0; z-index: 100050; display: grid; place-items: center; pointer-events: auto; } .setup-wizard__bg { position: absolute; inset: 0; background: rgba(8, 18, 40, 0.7); backdrop-filter: blur(2px); } .setup-wizard__card { position: relative; width: min(520px, 92vw); background: linear-gradient(180deg, #f4f7fc 0%, #d8e1ee 100%); border: 1px solid #2856ad; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6); font-family: Tahoma, sans-serif; color: #0e2356; user-select: none; } .setup-wizard__title-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: linear-gradient(180deg, #0058ee 0%, #1c87f0 50%, #0058ee 100%); color: #fff; font-weight: 700; font-size: 12px; } .setup-wizard__title-icon { font-size: 14px; } .setup-wizard__title-text { flex: 1; } .setup-wizard__body { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; } .setup-wizard__product { display: flex; align-items: center; gap: 12px; padding: 6px 0 12px; border-bottom: 1px solid #b3c0d4; } .setup-wizard__product-icon { width: 40px; height: 40px; display: grid; place-items: center; font-size: 28px; background: #fff; border: 1px solid #5a78a8; } .setup-wizard__product-name { font-weight: 700; font-size: 13px; } .setup-wizard__product-sub { font-size: 11px; color: #4a5f88; margin-top: 2px; } .setup-wizard__bar { position: relative; height: 18px; background: #fff; border: 1px solid #5a78a8; overflow: hidden; } .setup-wizard__bar-fill { height: 100%; background: repeating-linear-gradient( 90deg, #2dad24 0 12px, #38c42a 12px 14px ); transition: width 0.12s ease-out; } .setup-wizard__pct { text-align: right; font-size: 11px; font-weight: 700; } .setup-wizard__file { font-family: 'Lucida Console', 'Courier New', monospace; font-size: 11px; color: #2a3f70; background: #eef3fb; padding: 4px 6px; border: 1px inset #b3c0d4; height: 22px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .setup-wizard__hint { font-size: 10px; color: #6b7a98; text-align: right; height: 14px; } /* ===================================================================== ACTIVATION WIZARD / ACTIVATION DEATH (день 1, день 20) ===================================================================== */ .activation { position: fixed; inset: 0; z-index: 100100; display: grid; place-items: center; pointer-events: auto; } .activation__bg { position: absolute; inset: 0; background: rgba(8, 18, 40, 0.85); } .activation--death .activation__bg { background: linear-gradient(135deg, #8a0a14 0%, #1a0506 50%, #320a14 100%); } .activation__card { position: relative; width: min(560px, 92vw); background: linear-gradient(180deg, #f4f7fc 0%, #d8e1ee 100%); border: 1px solid #2856ad; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7); font-family: Tahoma, sans-serif; color: #0e2356; } .activation--death .activation__card { border-color: #8a0a14; box-shadow: 0 0 36px rgba(255, 64, 64, 0.4); } .activation__title-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: linear-gradient(180deg, #0058ee 0%, #1c87f0 50%, #0058ee 100%); color: #fff; font-weight: 700; font-size: 12px; } .activation--death .activation__title-bar { background: linear-gradient(180deg, #8a0a14 0%, #c52030 50%, #8a0a14 100%); } .activation__title-icon { font-size: 14px; } .activation__body { padding: 22px 28px 20px; display: flex; flex-direction: column; gap: 12px; text-align: center; } .activation__body p { margin: 0; line-height: 1.4; } .activation__sigil { font-size: 56px; line-height: 1; margin: 4px auto 8px; } .activation__sigil--bad { color: #c52030; } .activation__sigil--ok { color: #2dad24; } .activation__h2 { margin: 0; font-size: 16px; font-weight: 700; } .activation__hint { font-size: 12px; color: #4a5f88; background: #eef3fb; padding: 6px 8px; border: 1px solid #b3c0d4; } .activation__hint--accent { background: #fff8e0; border-color: #f5c542; color: #5a4a10; font-weight: 600; } /* ===================================================================== ICQ-виджет (МАИН) всплывает над оверлеем Activation Wizard, чтобы стример мог прочитать серийник от мамы (UIN 890-111-000 для дня 1, подсветка "СЕРИЙНИК ЗДЕСЬ" висит ТОЛЬКО на главном ICQ-виджете (.icq-widget--main), потому что forum и outlook виджеты тоже используют .icq-widget класс (legacy reuse), но они тут ни при чём. z-index активации: 100100 → ICQ виджет ставим выше: 100150. ===================================================================== */ body.is-activation-wizard-open .icq-widget--main { z-index: 100150 !important; box-shadow: 0 0 0 2px #f5c542, 0 0 24px rgba(245, 197, 66, 0.7), 0 6px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 1px #fff !important; animation: act-widget-pulse 2s ease-in-out infinite; } body.is-activation-wizard-open .icq-widget--main::before { content: "👈 СЕРИЙНИК ЗДЕСЬ"; position: absolute; top: -22px; right: 0; background: #f5c542; color: #1a0a30; padding: 3px 8px; font-family: Tahoma, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; border: 1px solid #c98e58; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); white-space: nowrap; z-index: 1; } @keyframes act-widget-pulse { 0%, 100% { box-shadow: 0 0 0 2px #f5c542, 0 0 24px rgba(245, 197, 66, 0.7), 0 6px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 1px #fff; } 50% { box-shadow: 0 0 0 3px #ffd96a, 0 0 36px rgba(255, 217, 106, 0.9), 0 6px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 1px #fff; } } /* Само открытое окно ICQ-приложения тоже над оверлеем */ body.is-activation-wizard-open .window { z-index: 100160 !important; } .activation__input { width: 100%; padding: 8px 10px; font-family: 'Lucida Console', monospace; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; border: 1px solid #5a78a8; background: #fff; text-align: center; } .activation__input:focus { outline: 2px solid #4a92ff; outline-offset: 0; } .activation__error { color: #c52030; font-weight: 700; font-size: 12px; background: #fff0f0; border: 1px solid #c52030; padding: 6px 8px; } .activation__buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; } .activation__btn { padding: 6px 16px; border: 1px outset #b3c0d4; background: linear-gradient(180deg, #fafdff 0%, #d8e1ee 100%); font-family: Tahoma, sans-serif; font-size: 12px; cursor: pointer; min-width: 80px; } .activation__btn:active { border-style: inset; } .activation__btn:disabled { opacity: 0.5; cursor: not-allowed; } .activation__btn--primary { background: linear-gradient(180deg, #4a92ff 0%, #245edb 100%); color: #fff; font-weight: 700; } /* ===================================================================== ФСБ-БЛОКЕР (день 15) ===================================================================== */ .fsb-blocker { position: fixed; inset: 0; z-index: 100200; display: grid; place-items: center; pointer-events: auto; } .fsb-blocker__bg { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(60, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.98) 100%); } .fsb-blocker__noise { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px); opacity: 0.6; } .fsb-blocker__card { position: relative; width: min(720px, 94vw); background: linear-gradient(180deg, #1a0506 0%, #2a0a0c 100%); border: 2px solid #c52030; box-shadow: 0 0 40px rgba(255, 32, 48, 0.4); padding: 24px 28px; color: #ffe7e7; font-family: Tahoma, sans-serif; text-align: center; } .fsb-blocker__crest { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 22px; color: #ffd96a; letter-spacing: 4px; font-weight: 900; margin-bottom: 4px; } .fsb-blocker__star { font-size: 26px; } .fsb-blocker__title { font-size: 26px; font-weight: 900; letter-spacing: 1.5px; color: #ff5050; margin: 8px 0 2px; text-shadow: 0 0 10px rgba(255, 80, 80, 0.5); } .fsb-blocker__title.is-blink { color: #ffaaaa; } .fsb-blocker__sub { font-size: 12px; color: #ffb0b0; letter-spacing: 2px; margin-bottom: 14px; } .fsb-blocker__body { font-size: 13px; line-height: 1.5; text-align: left; background: rgba(0, 0, 0, 0.4); padding: 12px 16px; border: 1px dashed #c52030; } .fsb-blocker__body p { margin: 6px 0; } .fsb-blocker__warn { font-weight: 700; color: #ffd96a; margin-top: 10px !important; } .fsb-blocker__warn--strong { color: #ff8a7a; background: rgba(255, 0, 0, 0.15); padding: 6px 8px; } .fsb-blocker__counter { font-family: 'Lucida Console', monospace; text-align: center; font-size: 16px; letter-spacing: 1.5px; color: #ff5050; padding: 8px; margin-top: 8px; background: rgba(0, 0, 0, 0.5); border: 1px solid #5a0a0c; } .fsb-blocker__buttons { display: flex; justify-content: center; gap: 12px; margin: 18px 0 6px; } .fsb-blocker__btn { padding: 12px 36px; font-size: 15px; font-weight: 800; letter-spacing: 1px; cursor: pointer; border: 2px outset; font-family: Tahoma, sans-serif; } .fsb-blocker__btn--pay { background: linear-gradient(180deg, #ffd96a 0%, #c08820 100%); color: #1a0506; border-color: #ffd96a; } .fsb-blocker__btn--pay:hover { filter: brightness(1.1); } .fsb-blocker__btn:active { border-style: inset; } .fsb-blocker__hint { font-size: 11px; color: #ffb0b0; margin-top: 6px; font-style: italic; } /* ===================================================================== POP-UP RAIN (день 3 + день 7) ===================================================================== */ .popup-rain { position: fixed; inset: 0 0 40px 0; /* над таскбаром */ z-index: 100050; pointer-events: none; } .popup-rain__win { position: absolute; pointer-events: auto; background: linear-gradient(180deg, #f4f7fc 0%, #d8e1ee 100%); border: 1px solid #5a78a8; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); font-family: Tahoma, sans-serif; color: #0e2356; display: flex; flex-direction: column; animation: popup-rain-spawn 0.32s ease-out; } @keyframes popup-rain-spawn { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .popup-rain__win--million { border-color: #c54900; box-shadow: 0 0 24px rgba(255, 122, 26, 0.4); } .popup-rain__title-bar { display: flex; align-items: center; background: linear-gradient(180deg, #0058ee 0%, #1c87f0 50%, #0058ee 100%); color: #fff; padding: 4px 8px; font-size: 11px; font-weight: 700; } .popup-rain__win--million .popup-rain__title-bar { background: linear-gradient(180deg, #c54900 0%, #ff7a1a 50%, #c54900 100%); } .popup-rain__title-text { flex: 1; } .popup-rain__close { width: 18px; height: 16px; background: linear-gradient(180deg, #fafdff 0%, #d8e1ee 100%); border: 1px outset #b3c0d4; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 14px; color: #0e2356; } .popup-rain__close:active { border-style: inset; } .popup-rain__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .popup-rain__msg { font-size: 12px; line-height: 1.4; } .popup-rain__buttons { display: flex; gap: 6px; justify-content: flex-end; } .popup-rain__btn { padding: 4px 12px; border: 1px outset #b3c0d4; background: linear-gradient(180deg, #fafdff 0%, #d8e1ee 100%); font-family: Tahoma, sans-serif; font-size: 11px; cursor: pointer; } .popup-rain__btn:active { border-style: inset; } .popup-rain__btn--cta { background: linear-gradient(180deg, #5cd84d 0%, #2dad24 100%); color: #fff; font-weight: 700; } /* ===================================================================== PC DOCTOR 2003 — скам-антивирус (день 9) ===================================================================== */ .pc-doctor { position: fixed; inset: 0; z-index: 100150; display: grid; place-items: center; pointer-events: auto; } .pc-doctor__bg { position: absolute; inset: 0; background: rgba(20, 4, 4, 0.85); } .pc-doctor__card { position: relative; width: min(640px, 94vw); background: linear-gradient(180deg, #1a1a2a 0%, #2c2840 100%); border: 2px solid #ff3030; box-shadow: 0 0 32px rgba(255, 48, 48, 0.5); font-family: 'Trebuchet MS', sans-serif; color: #fff; overflow: hidden; } .pc-doctor__title-bar { display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg, #1c1c1c 0%, #3a3a3a 100%); padding: 7px 12px; font-size: 13px; font-weight: 700; color: #ffd96a; border-bottom: 1px solid #ff3030; } .pc-doctor__icon { font-size: 16px; } .pc-doctor__alert { text-align: center; padding: 18px 12px 10px; } .pc-doctor__alert-title { font-size: 24px; font-weight: 900; color: #ff3030; letter-spacing: 0.5px; text-shadow: 0 0 8px rgba(255, 48, 48, 0.5); } .pc-doctor__alert-title.is-blink { color: #ff7070; } .pc-doctor__alert-sub { font-size: 13px; color: #ffd96a; margin-top: 4px; } .pc-doctor__scan { background: #0a0a14; font-family: 'Lucida Console', monospace; padding: 8px 14px; border-top: 1px solid #5a0a0a; border-bottom: 1px solid #5a0a0a; font-size: 11px; } .pc-doctor__scan-row { display: flex; align-items: center; gap: 8px; } .pc-doctor__level { display: inline-block; padding: 2px 6px; font-size: 9px; font-weight: 900; border: 1px solid; } .pc-doctor__level--critical { color: #ff3030; border-color: #ff3030; } .pc-doctor__level--high { color: #ff9030; border-color: #ff9030; } .pc-doctor__level--medium { color: #ffd96a; border-color: #ffd96a; } .pc-doctor__threat-name { font-weight: 700; color: #fff; } .pc-doctor__scan-path { color: #7090c0; margin-top: 2px; } .pc-doctor__body { padding: 14px 18px; font-size: 13px; line-height: 1.5; } .pc-doctor__body p { margin: 0; } .pc-doctor__final { color: #ffd96a; font-style: italic; } .pc-doctor__buttons { display: flex; gap: 10px; justify-content: center; padding: 10px 14px 16px; } .pc-doctor__btn { padding: 10px 22px; border: 2px outset; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: 0.5px; } .pc-doctor__btn:active { border-style: inset; } .pc-doctor__btn--buy { background: linear-gradient(180deg, #ff3030 0%, #b01010 100%); color: #fff; border-color: #ff5050; animation: pcd-pulse 1.4s ease-in-out infinite; } @keyframes pcd-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(255, 48, 48, 0); } 50% { box-shadow: 0 0 16px rgba(255, 48, 48, 0.6); } } .pc-doctor__btn--close { background: linear-gradient(180deg, #fafdff 0%, #d8e1ee 100%); color: #0e2356; } /* ===================================================================== HACKER CONSOLE — Matrix-стиль (день 10) ===================================================================== */ .hacker-console { position: fixed; inset: 0; z-index: 100100; background: #000; font-family: 'Lucida Console', 'Courier New', monospace; color: #00ff41; overflow: hidden; padding: 24px 32px; pointer-events: auto; } .hacker-console__scan { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(0, 255, 65, 0.05) 0 1px, transparent 1px 3px); } .hacker-console__pre { position: relative; font-size: 13px; line-height: 1.4; white-space: pre; } .hacker-console__header { color: #00ff41; font-weight: 700; margin-bottom: 12px; text-shadow: 0 0 6px rgba(0, 255, 65, 0.5); } .hacker-console__line { color: #00d030; text-shadow: 0 0 4px rgba(0, 255, 65, 0.3); } .hacker-console__line.is-warn { color: #ffd96a; } .hacker-console__line.is-ok { color: #50ff80; } .hacker-console__cursor { display: inline-block; color: #00ff41; animation: hc-blink 0.6s steps(1) infinite; } @keyframes hc-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .hacker-console__hint { position: absolute; bottom: 12px; right: 24px; color: #007020; font-size: 11px; } /* ===================================================================== BSOD (день 11) — синий экран ===================================================================== */ .bsod { position: fixed; inset: 0; z-index: 100300; /* выше всех — это критическая ошибка */ font-family: 'Lucida Console', 'Courier New', monospace; pointer-events: auto; } .bsod--crash { background: #0a3a8a; color: #fff; padding: 36px 60px; font-size: 13px; line-height: 1.6; } .bsod__top { font-weight: 700; margin-bottom: 18px; } .bsod__reason { color: #fff; background: #0a3a8a; font-weight: 900; font-size: 16px; margin-bottom: 18px; padding: 4px 8px; border: 1px solid #fff; display: inline-block; } .bsod__detail { margin: 6px 0; white-space: pre-wrap; } .bsod--reboot { background: #000; color: #fff; } .bsod__reboot-text { position: absolute; top: 20px; left: 24px; font-size: 18px; animation: bsod-cursor 0.8s steps(1) infinite; } @keyframes bsod-cursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .bsod--splash { background: #000; color: #fff; display: grid; place-items: center; text-align: center; } .bsod__splash-logo { margin-bottom: 28px; font-size: 28px; } .bsod__splash-name { font-family: 'Trebuchet MS', sans-serif; font-size: 28px; margin-top: 8px; } .bsod__splash-edition { font-family: 'Trebuchet MS', sans-serif; font-size: 14px; color: #aab8d0; margin-top: 4px; } .bsod__splash-bar { width: 240px; height: 12px; background: #1a1a1a; border: 1px solid #555; margin: 28px auto 6px; position: relative; overflow: hidden; } .bsod__splash-bar-fill { height: 100%; background: linear-gradient(90deg, #4a92ff 0%, #1c87f0 100%); transition: width 0.28s linear; } .bsod__splash-copyright { font-family: 'Trebuchet MS', sans-serif; font-size: 11px; color: #888; margin-top: 80px; } /* ===================================================================== ШАНТАЖНЫЙ СКРИН (день 19) ===================================================================== */ .shantaj { position: fixed; inset: 0; z-index: 100200; pointer-events: auto; } .shantaj__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.92); } .shantaj__fake-desktop { position: absolute; inset: 0; filter: blur(1.5px) brightness(0.45); opacity: 0.6; } .shantaj__fake-window { position: absolute; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); } .shantaj__fake-titlebar { background: rgba(36, 94, 219, 0.6); color: #fff; font-family: Tahoma; font-size: 11px; padding: 3px 8px; } .shantaj__fake-body { padding: 12px 14px; font-family: Tahoma; font-size: 11px; color: rgba(255, 255, 255, 0.55); font-weight: 700; } .shantaj__overlay { position: relative; display: grid; place-items: center; height: 100vh; text-align: center; color: #ff3030; font-family: Impact, 'Arial Black', sans-serif; padding: 20px; } .shantaj__title { font-size: 64px; font-weight: 900; letter-spacing: 4px; text-shadow: 0 0 12px rgba(255, 48, 48, 0.7); margin-bottom: 12px; } .shantaj__title.is-blink { color: #ff8a8a; } .shantaj__sub { font-family: Tahoma, sans-serif; font-size: 14px; color: #ff7070; letter-spacing: 1.5px; margin-bottom: 22px; } .shantaj__demand { background: rgba(0, 0, 0, 0.7); border: 2px solid #ff3030; padding: 14px 22px; margin: 0 auto; max-width: 540px; font-family: Tahoma, sans-serif; } .shantaj__demand-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; color: #fff; border-bottom: 1px dashed rgba(255, 48, 48, 0.4); } .shantaj__demand-row:last-child { border-bottom: none; } .shantaj__demand-k { color: #ffd96a; font-weight: 700; } .shantaj__demand-v--mono { font-family: 'Lucida Console', monospace; font-size: 11px; color: #aaeaff; } .shantaj__anachronism { color: #ffd96a; font-style: italic; font-size: 11px; } .shantaj__signed { font-family: Tahoma, sans-serif; font-size: 12px; color: #ff7070; font-style: italic; margin-top: 18px; } .shantaj__hint { font-family: Tahoma, sans-serif; font-size: 11px; color: rgba(255, 200, 200, 0.5); margin-top: 10px; } /* ===================================================================== FINAL SCENE — финальная сцена с программистом (день 21) ===================================================================== */ .final-scene { position: fixed; inset: 0; z-index: 100250; display: grid; place-items: center; pointer-events: auto; } .final-scene__bg { position: absolute; inset: 0; background: linear-gradient(135deg, #0a1a3a 0%, #1a2856 50%, #2a3a8a 100%); } .final-scene__card { position: relative; width: min(640px, 94vw); background: rgba(10, 26, 58, 0.95); border: 2px solid #4a92ff; box-shadow: 0 0 36px rgba(74, 146, 255, 0.4); font-family: 'Lucida Console', monospace; color: #aaeaff; overflow: hidden; } .final-scene__title-bar { display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, #245edb 0%, #4a92ff 100%); padding: 8px 14px; color: #fff; font-family: Tahoma, sans-serif; font-size: 13px; font-weight: 700; } .final-scene__avatar { font-size: 18px; } .final-scene__title { flex: 1; } .final-scene__close { width: 22px; height: 22px; border: 1px outset #b3c0d4; background: linear-gradient(180deg, #fafdff 0%, #d8e1ee 100%); color: #0e2356; font-size: 14px; font-weight: 700; cursor: pointer; line-height: 1; padding: 0; display: grid; place-items: center; font-family: Tahoma, sans-serif; } .final-scene__close:hover { background: linear-gradient(180deg, #ffe8e8 0%, #f5b8b8 100%); color: #c52030; } .final-scene__close:active { border-style: inset; } .final-scene__body { padding: 22px 24px; min-height: 280px; font-size: 13px; line-height: 1.6; } .final-scene__line { margin: 4px 0; color: #80c8ff; text-shadow: 0 0 6px rgba(128, 200, 255, 0.4); animation: final-line-fade 0.4s ease-out; } .final-scene__line.is-last { color: #aaeaff; font-weight: 700; } @keyframes final-line-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .final-scene__cursor { display: inline-block; color: #80c8ff; animation: hc-blink 0.6s steps(1) infinite; } .final-scene__promo { background: linear-gradient(180deg, #4a92ff 0%, #245edb 100%); color: #fff; text-align: center; padding: 28px 14px 22px; border-top: 2px solid #80c8ff; font-family: 'Trebuchet MS', sans-serif; animation: final-line-fade 0.6s ease-out; } .final-scene__promo-title { font-size: 38px; font-weight: 900; letter-spacing: 5px; text-shadow: 0 0 14px rgba(255, 255, 255, 0.5); } .final-scene__promo-sub { font-size: 14px; letter-spacing: 3px; margin-top: 4px; opacity: 0.85; } .final-scene__promo-hint { font-size: 11px; margin-top: 16px; opacity: 0.7; } /* ===================================================================== BONZI BUDDY — фиолетовая обезьяна-ассистент в углу (день 12+) ===================================================================== */ .bonzi { position: fixed; right: 16px; bottom: 56px; /* над таскбаром */ z-index: 70; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; } .bonzi__monkey { pointer-events: auto; cursor: pointer; position: relative; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); animation: bonzi-bob 3s ease-in-out infinite; } @keyframes bonzi-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .bonzi__monkey:hover { filter: drop-shadow(0 6px 8px rgba(124, 95, 176, 0.6)); } .bonzi__close { position: absolute; top: 0; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid #7c5fb0; color: #7c5fb0; font-size: 14px; font-weight: 700; cursor: pointer; line-height: 1; padding: 0; display: grid; place-items: center; pointer-events: auto; } .bonzi__close:hover { background: #c5a0e0; } .bonzi__bubble { pointer-events: none; background: #fff; border: 2px solid #7c5fb0; border-radius: 14px; padding: 10px 14px; font-family: 'Comic Sans MS', cursive, sans-serif; font-size: 13px; color: #2a1040; max-width: 260px; margin-bottom: 6px; box-shadow: 0 4px 12px rgba(124, 95, 176, 0.3); position: relative; animation: bonzi-bubble-pop 0.4s ease-out; } @keyframes bonzi-bubble-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .bonzi__bubble::after { content: ''; position: absolute; bottom: -10px; right: 30px; width: 0; height: 0; border: 10px solid transparent; border-top-color: #7c5fb0; border-bottom: 0; } .bonzi__bubble::before { content: ''; position: absolute; bottom: -7px; right: 32px; width: 0; height: 0; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; z-index: 1; } /* Установочная панелька (короткая фаза при codec_pack.exe) */ .bonzi--installing { position: fixed; inset: 0; z-index: 100050; display: grid; place-items: center; background: rgba(20, 8, 40, 0.9); font-family: Tahoma, sans-serif; color: #fff; pointer-events: auto; } .bonzi__install-bar { width: 280px; height: 18px; border: 1px solid #7c5fb0; background: #1a0a30; position: relative; overflow: hidden; } .bonzi__install-fill { height: 100%; background: linear-gradient(90deg, #7c5fb0 0%, #c5a0e0 100%); animation: bonzi-install-fill 1.5s linear forwards; } @keyframes bonzi-install-fill { from { width: 0; } to { width: 100%; } } .bonzi__install-text { margin-top: 12px; font-size: 13px; color: #c5a0e0; } /* ===================================================================== КОЛЕСО — день-зависимые режимы (день 4 VIRUS, день 9 Казино, день 17 Боль) ===================================================================== */ .wheel-app.is-virus { background: linear-gradient(180deg, #1a0606 0%, #2a0a0a 100%); } .wheel-app.is-virus h3 { color: #ff7070; } .wheel-app.is-pain { background: linear-gradient(180deg, #2a0a14 0%, #1a0a14 100%); } .wheel-app.is-pain h3 { color: #ff8a7a; } .wheel-banner { text-align: center; padding: 8px 14px; margin-bottom: 8px; font-family: Tahoma, sans-serif; border-radius: 4px; animation: wheel-banner-pulse 1.6s ease-in-out infinite; } @keyframes wheel-banner-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 50% { box-shadow: 0 0 18px currentColor; } } .wheel-banner__text { font-size: 16px; font-weight: 900; letter-spacing: 1.2px; } .wheel-banner__sub { font-size: 12px; margin-top: 3px; opacity: 0.85; } .wheel-banner--virus { background: linear-gradient(180deg, #5a0a0a 0%, #7a0c0c 100%); color: #ff5050; border: 1px solid #c52030; } .wheel-banner--pain { background: linear-gradient(180deg, #4a0a14 0%, #6a0a18 100%); color: #ff8a7a; border: 1px solid #c54050; } .wheel-casino-trigger { margin-top: 12px; padding-top: 8px; border-top: 1px dashed #b3c0d4; } .wheel-casino { margin-top: 8px; padding: 10px; background: linear-gradient(180deg, #2a1040 0%, #1a0a30 100%); color: #ffd96a; border: 1px solid #7c5fb0; font-family: Tahoma, sans-serif; font-size: 12px; display: flex; flex-direction: column; gap: 6px; } .wheel-casino__title { font-weight: 700; font-size: 14px; text-align: center; margin-bottom: 4px; } .wheel-casino__fair { font-size: 10px; color: #5cd84d; font-weight: 400; } .wheel-casino__balance { text-align: center; font-size: 13px; color: #fff; } .wheel-casino__row { display: flex; align-items: center; gap: 8px; } .wheel-casino__row label { flex: 1; font-size: 11px; color: #c5a0e0; } .wheel-casino__row input { width: 80px; padding: 3px 6px; background: #1a0a30; color: #fff; border: 1px solid #7c5fb0; font-family: monospace; } .wheel-casino__result { margin-top: 4px; padding: 6px 8px; font-weight: 700; text-align: center; border: 1px solid; } .wheel-casino__result.is-win { background: rgba(92, 216, 77, 0.15); color: #5cd84d; border-color: #5cd84d; } .wheel-casino__result.is-lose { background: rgba(224, 74, 58, 0.15); color: #ff7070; border-color: #c52030; } .wheel-casino__hint { font-size: 10px; color: #c5a0e0; font-style: italic; text-align: center; }