/* ---------- fonts ---------- */
@font-face{
  font-family:'TahomaCustom';
  src:url('fonts/Tahoma Regular font.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
html,body {
  height:100%; margin:0;
  background: url('img/background.png') center/cover no-repeat fixed #111;
  font-family: 'TahomaCustom', Tahoma, sans-serif;
  color:#111;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

body{ font-family:'TahomaCustom', Tahoma, sans-serif; }

/* background behind the monitor (visible!) */
#page-bg{
  position:fixed; inset:0; z-index:0;
  background:url('img/background.png') center/cover no-repeat;
}

/* centered wrapper + monitor */
#xp-wrapper{ position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:20px; }
#xp-screen{
  width:1280px; height:720px; position:relative; overflow:visible;
  background:url('img/bliss.jpg') center/cover no-repeat;
  box-shadow:0 30px 80px rgba(0,0,0,0.7);
  display:flex; flex-direction:column;
}

/* layers */
.screen-layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.hidden{ display:none !important; }

/* login */
#login-screen{ background:rgba(0,0,0,0.45); flex-direction: column;    /* подсказка под кнопкой */
  gap: 8px;}
#enter-btn{ width:130px; height:auto; cursor:pointer; user-select:none; }

/* loading — XP green bar */
#loading-screen{ background:rgba(0,0,0,0.55); }
.loader-card{
  width:420px; background:rgba(255,255,255,0.88); border:1px solid #d9d9d9;
  border-radius:10px; padding:24px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.loader-progress{ width:100%; height:18px; border:1px solid #2a7d2e; border-radius:4px; background:#eaf3ea; overflow:hidden; }
.loader-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg,#1ca11c,#39bf39,#1ca11c);
  background-size:200% 100%; animation:stripe 2.2s linear infinite;
}
@keyframes stripe{ 0%{background-position:0 0} 100%{background-position:200% 0} }
.loader-sub{ margin-top:10px; font-size:12px; color:#333 }

/* desktop icons */
#desktop{ padding:24px; }
#icons{ position:absolute; left:24px; top:24px; display:flex; flex-direction:column; gap:18px; }
.icon{ width:96px; text-align:center; cursor:pointer; user-select:none; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.5); }
.icon img{ width:64px; height:64px; display:block; margin:0 auto 6px; pointer-events:none; }
.ic-label{ font-size:13px; }

:root{
  --win-header-h: 44px;  /* было 36px, делаем повыше */
}
@media (max-width: 820px){
  :root{ --win-header-h: 50px; }  /* на телефоне ещё больше hit-area */
}

/* windows */
.window{
  width:560px; height:360px; background:#f7f7f7; border:4px solid #8aa7d8; position:absolute;
  box-shadow:0 10px 30px rgba(0,0,0,0.4); z-index:10; overflow:hidden;
}
.window-header{
  height: var(--win-header-h);
  background:linear-gradient(#2b5fb0,#1e4aa2);
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; cursor:move;
}
.window-body{
  padding:12px;
  height: calc(100% - var(--win-header-h));
  overflow:auto; background:#fff; color:#111;
}




/* About: растягиваем только изображение в BODY, не трогая иконку закрытия */
#about-window .window-body{
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
#about-window .window-body > img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* About window: квадратное и больше по умолчанию */
#about-window.window {
  width: 700px;   /* ширина */
  height: 700px;  /* высота */
}





/* reel 9:16 */
.reel-frame{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.reel-frame iframe{ width:100%; height:100%; }

/* forms / notes */
.small-note{ font-size:12px; color:#666; margin-top:8px; }
.btn{ background:#e9ecef; color:#111; border:1px solid #cfd4da; padding:8px 12px; border-radius:6px; cursor:pointer }
.btn:hover{ filter:brightness(0.96) }
.btn.primary{ background:#1877f2; color:#fff; border:0 }
.btn.primary:hover{ filter:brightness(0.95) }

/* Freepack IG gate */
.ig-gate{ background:#ffffffcc; border:1px solid #e0e0e0; padding:12px; border-radius:8px; margin-bottom:10px; color:#111; }
.ig-gate-title{ font-weight:700; margin:0 0 6px }
.ck-wrap{ position:relative }
.ck-wrap.is-locked{ filter:grayscale(1) opacity(0.6); pointer-events:none }
.ck-wrap.is-locked::after{
  content:"Step 2 will unlock after clicking Follow";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#111; font-weight:700; background:rgba(255,255,255,0.6);
}
.pack-desc pre{
  background:#fff; color:#111; border:1px solid #ddd; border-radius:8px;
  padding:10px; margin-top:10px; white-space:pre-wrap; line-height:1.3;
}

/* gallery */
#gallery{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#gallery img{ width:120px; height:80px; object-fit:cover; cursor:pointer; border:2px solid #ddd; }

/* projects */
.proj-topbar{ display:flex; gap:8px; margin-bottom:10px }
#proj-search{ flex:1; padding:8px; border:1px solid #ccc; }
#proj-filter{ padding:8px; border:1px solid #ccc; }
#admin-panel .admin-row{ display:flex; gap:8px; margin-bottom:8px }
#proj-title{ flex:1; padding:8px; border:1px solid #ccc; }
#proj-body{ width:100%; padding:8px; border:1px solid #ccc; }
#projects-list .project{ border:1px dashed #bbb; padding:8px; margin-bottom:8px; background:#fff; }
#projects-list .project .meta{ font-size:12px; color:#666; margin:4px 0 6px }

/* public board list inside Contact */
.public-scroll{
  max-height:220px; overflow:auto; padding-right:6px;
  background:#fafafa; border:1px solid #e8e8e8; border-radius:6px; padding:8px;
}
.pub-msg{ background:#fff; color:#111; border:1px solid #e2e2e2; border-radius:8px; padding:8px; margin:8px 0 }
.pub-msg .meta{ font-size:12px; color:#555; margin-bottom:4px }

/* taskbar */
#taskbar{
  position:absolute; left:0; right:0; bottom:0; height:46px;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg,#0b60d1,#2975e5);
  border-top:2px solid rgba(0,0,0,0.6); padding:6px 12px;
}
#taskbar-left{ display:flex; align-items:center; gap:8px; position:relative; }
#start-button { width:70px; height:30px; cursor:pointer; } /* шире на ~20% по горизонтали */
#start-menu{
  position:absolute; left:12px; bottom:52px; background:#fff; color:#111; padding:8px; border:1px solid #ccc;
  box-shadow:0 5px 20px rgba(0,0,0,0.3); min-width:200px; z-index:50;
}
.start-item{ display:block; padding:8px 10px; color:#111; text-decoration:none }
.start-item:hover{ background:#f0f0f0 }

/* center socials */
#taskbar-center{ display:flex; gap:12px; align-items:center; justify-content:center; flex:1 }
#taskbar-center .social img{ width:22px; height:22px; display:block; }

/* right time */
#taskbar-right{ display:flex; align-items:center; gap:12px; }
#taskbar-time{ color:#fff; font-weight:700; font-size:13px; }

/* yellow sticky — bigger, taped, like a real sticker, slightly rotated */
#ad-sticky{
  position:absolute;
  bottom:-6px;               /* чуть ниже нижней кромки монитора */
  right:20%;
  transform: translateY(16px) rotate(-2.5deg) scaleY(1.6); /* +60% по вертикали */
  background:#fffda6;
  color:#111;
  border:1px solid #e0d86a;
  border-radius:4px;
  padding:10px 14px;
  font-weight:700;
  font-size:12px;            /* текст уменьшен ~в 1.5 раза */
  line-height:1.15;
  box-shadow:0 8px 20px rgba(0,0,0,0.28);
  z-index:50;                /* поверх таскбара и окон */
}
#ad-sticky::before{
  content:"";
  position:absolute;
  top:-12px; left:18%;
  width:64px; height:18px;
  background:rgba(255,255,0,0.35);
  border:1px solid rgba(220,210,90,0.8);
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transform:rotate(4deg);
  border-radius:3px;
}

/* Contact window: размер под форму CK */
#contact-window.window { width: 720px; height: 520px; }
#contact-ck-wrap { padding-right: 4px; }

/* responsive scale */
@media (max-width:1300px){ #xp-screen{ transform:scale(0.9); transform-origin:center } }
@media (max-width:1100px){ #xp-screen{ transform:scale(0.75) } }

/* телефоны: чуть меньше внешних отступов "монитора" */
@media (max-width: 820px){
  #xp-wrapper{ padding:8px; }
  #xp-screen{ transform:scale(0.65); transform-origin:center top; }
  /* фикс, чтобы "Contact" не упирался вниз */
  #contact-window{ top:80px !important; }
}

/* очень узкие (старые iPhone/Android) */
@media (max-width: 430px){
  #xp-wrapper{ padding:4px; }
  #xp-screen{ transform:scale(0.55); }
  /* не даём окнам выходить за экран по высоте */
  .window{ max-height: calc(100vh - 80px); }
  .window .window-body{ max-height: calc(100vh - 36px - 80px); }
}

/* высокая "книжная" ориентация — поднять всё чуть выше */
@media (max-height: 680px){
  #xp-screen{ transform-origin:center top; }
  #contact-window{ top:70px !important; }
}

/* рилз: ограничение высоты, чтобы не ломал раскладку на телефонах */
@media (max-width: 820px){
  #reel-window{ width:300px !important; height:520px !important; top:50px !important; right:12px !important; }
}

/* --- Mobile (узкие экраны) — переопределяем инлайновые размеры окон --- */
@media (max-width: 820px){
  /* общий размер и позиция для всех окон */
  .window{
    width: 92vw !important;
    height: 72vh !important;
    left: 4vw !important;
    top: 10vh !important;
  }

/* make Instagram embed stretch to window size nicely */
.reel-frame { overflow:hidden; }
.reel-frame blockquote.instagram-media{
  margin:0!important;
  max-width:unset!important;
  width:100%!important;
}





  /* Reel: делаем чуть ниже по высоте */
  #reel-window{
    width: 92vw !important;
    height: 60vh !important;
    right: auto !important;  /* отключаем прижатие вправо */
  }

  /* Контакт — чтобы точно не уезжал вниз */
  #contact-window{
    top: 6vh !important;
  }

  /* Внутренности растягиваются на новую высоту */
  .window-body,
  .window-body iframe { height: 100% !important; }


  /* Сам экран без дополнительного масштабирования, пусть занимает весь вьюпорт */
  #xp-screen{
    transform: none !important;
    width: 100vw !important;
    height: 100vh !important;
  }
}

/* --- toast notifications --- */
#toast-container{
  position:absolute;       /* внутри #xp-screen */
  top:12px; right:12px;
  display:flex; flex-direction:column; gap:8px;
  z-index:9999;
  pointer-events:none;     /* клики не блокируем */
}
.toast{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.96);
  border:1px solid #dcdcdc; border-radius:10px;
  padding:10px 12px; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,0.28);
  animation:toastIn .18s ease-out;
  pointer-events:auto;     /* можно нажать/выделить текст */
}
.toast img{ width:20px; height:20px; display:block; }
@keyframes toastIn { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }


/* hint под Enter */
#enter-hint{
  margin-top: 10px;
  color: #fff;
  font-weight: 700;
  letter-spacing: .4px;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  opacity: .9;
  animation: hintPulse 1.4s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100% { transform: translateY(0); opacity: .75; }
  50%     { transform: translateY(2px); opacity: 1; }
}


/* Крупный крестик по умолчанию на всех окнах */
.win-close{
  width: 22px;            /* «картинка-иконка» */
  height: 22px;
  flex: 0 0 auto;         /* не ужимать и не растягивать */
  cursor: pointer;

  
  
}

/* На мобильных — ещё крупнее + увеличим кликабельную зону за счёт паддинга */
@media (max-width: 820px){
  .win-close{
    width: 34px;          /* сам визуальный крестик */
    height: 34px;
    /* хит-зона больше */
  padding: 12px;  
  box-sizing: content-box; /* чтобы padding не уменьшал крестик */
  }
}

/* Убираем кнопку "Close" внутри окна Reels */
#reel-window .window-body button,
#reel-window .window-body .btn-close,
#reel-window .window-body input[type="button"][value="Close"] {
  display: none !important;
}

/* Beats: плеер на всю область окна */
#beat-window .window-body{
  padding: 0;           /* убираем внутренние отступы только в Beats */
  overflow: hidden;     /* без полос прокрутки вокруг iframe */
}
#beat-window .window-body iframe{
  display: block;       /* убирает возможный "просвет" как у inline-элемента */
  width: 100%;
  height: 100%;
  border: 0;
}

/* хедер всегда поверх body (важно для Android/iframe) */
.window-header{ position: relative; z-index: 2; }
.window-body{ position: relative; z-index: 1; }

/* большая прозрачная hit-area в правом верхнем углу хедера */
.win-close-hit{
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;   /* увеличенная зона тапа */
  height: 56px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  touch-action: none;   /* не переводить тап в drag */
}

/* на телефонах — ещё больше */
@media (max-width: 820px){
  .win-close-hit{ width: 72px; height: 72px; }
}