/* The IE-window frame. Lifted verbatim from the lottery-of-life hero (its
   inline <style>), with the .feat-browser family renamed to .sq-window so
   other pages can share it. The lottery page still carries its own copy and
   can adopt this file later. Win95 chrome is a deliberate skin, so its greys
   and the title-bar blue are fixed values, identical in both site themes. */

.win-bar{ display:flex; align-items:center; gap:5px; padding:2px 2px 2px 4px;
  background:linear-gradient(90deg,#000080,#1084d0); }
.win-bar b{ flex:1; font-size:.58rem; font-weight:700; color:#fff; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--mono,"Courier New",Courier,monospace); }
.win-btns{ display:flex; gap:2px; }
.win-btns button{ width:17px; height:15px; padding:0; font:inherit; font-size:.56rem; line-height:1;
  color:#000; background:#c0c0c0; cursor:default;
  border:1px solid; border-color:#fff #000 #000 #fff;
  box-shadow:inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080; }
.win-addr{ display:flex; align-items:center; gap:5px; padding:5px 4px 5px; font-size:.58rem;
  color:#000; font-family:var(--mono,"Courier New",Courier,monospace); margin:0; }
.win-addr .go{ display:flex; gap:2px; }
.win-addr .go i{ width:16px; height:14px; background:#c0c0c0; font-style:normal;
  border:1px solid; border-color:#fff #000 #000 #fff;
  display:flex; align-items:center; justify-content:center; font-size:.5rem; color:#000; }
.win-addr .fld{ flex:1; min-width:0; background:#fff; padding:2px 4px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; color:#000;
  border:1px solid; border-color:#808080 #fff #fff #808080; }
.sq-window{ position:relative; width:100%; max-width:100%; margin:10px 0 8px;
  font-family:var(--mono,"Courier New",Courier,monospace); background:#c0c0c0;
  border:2px solid; border-color:#dfdfdf #000 #000 #dfdfdf;
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, 5px 5px 0 rgba(4,6,15,.45);
  padding:3px; }
.sq-window-viewport{ position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid; border-color:#808080 #fff #fff #808080; background:#04050a; }
.feat-loop{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border:0; }
.sq-window-crt{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(rgba(190,220,255,.05),transparent 20%),
    repeating-linear-gradient(90deg,
      rgba(255,0,0,.03) 0 1px,rgba(0,255,0,.03) 1px 2px,rgba(0,0,255,.03) 2px 3px),
    repeating-linear-gradient(rgba(0,0,0,.14) 0 1px,transparent 1px 3px),
    radial-gradient(115% 100% at 50% 45%,transparent 55%,rgba(0,0,0,.32) 100%);
  box-shadow:inset 0 0 20px rgba(0,0,0,.45); }
@keyframes crtdrift{0%,100%{opacity:1}47%{opacity:.94}}
@media(prefers-reduced-motion:no-preference){ .sq-window-crt{ animation:crtdrift 6.5s ease-in-out infinite; } }

/* --fig: the viewport wraps an <img> or a board, so it takes the content's
   own height and carries no CRT overlay. */
.sq-window--fig .sq-window-viewport{ aspect-ratio:auto; overflow:visible; }
.sq-window--fig .sq-window-viewport > img{ display:block; width:100%; height:auto; }
.sq-window--fig .sq-window-crt{ display:none; }