:root{
  --win-w:640px; --win-min-h:180px; --win-pad:14px;
  --win-gap:24px; --winbar-h:32px;
  --win-font:"GohuFont Powerline", monospace;
}
@media (max-width:1200px){:root{--win-w:560px; --win-gap:20px; --winbar-h:30px;}}
@media (max-width:960px){:root{--win-w:480px; --win-gap:16px; --winbar-h:28px;}}
@media (max-width:640px){:root{--win-w:92vw; --win-gap:10px; --winbar-h:26px;}}

.win{
  position:fixed; display:none; min-height:var(--win-min-h);
  background:#c0c0c0; border:1px solid #444;
  box-shadow:inset -1px -1px #fff,inset 1px 1px #777;
  z-index:10000; font-family:var(--win-font);
}
.win:target{display:block;} /* fallback */
.win__bar{
  height:var(--winbar-h); display:flex; justify-content:space-between;
  align-items:center; padding:0 8px; background:#02027a; color:#fff;
  cursor:grab; font-size:14px;
}
.win__btn{cursor:pointer; background:#fff; border-radius:2px; padding:0 4px;}
.win__body{padding:var(--win-pad); background:#c0c0c0;}
/* окна всегда поверх всего */
.win{
  z-index: 200000 !important;
  top: var(--win-gap);           /* чтобы видно было даже без JS */
  left: var(--win-gap);
  right: auto; bottom: auto;
}
/* на маленьких экранах ещё выше (если надо) */
@media (max-width:640px){
  .win{ z-index: 300000 !important; }
}