/* ===== Magic16 room CSS =====
Two parts: the SPACE STARFIELD, then the WINDOWS-98 CONTAINERS.
Edit the CONFIG blocks (the colours) to reskin things. ===== */


/* ===================== SPACE STARFIELD ===================== */

/* black backdrop (no flash) + let the page background show the space through */
html.m16-has-stars      { background: #000 !important; }
html.m16-has-stars body { background: transparent !important; }

/* the tiled animated star gif, parallaxed by the script */
.m16-stars-bg { position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background: #000 url("https://magic16.com/public/textures/stars-bg.gif") repeat;
background-position: 0 0;
image-rendering: auto;
will-change: background-position;
}

/* the hand-drawn stars on top */
.m16-starcanvas { position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
display: block;
image-rendering: auto;
}


/* ===================== WINDOWS-98 CONTAINERS ===================== */
/* Wrap stuff in these for the chunky grey 3D window look. Example markup -

<div class="w98-window">
<div class="w98-title">My Window <span class="spacer"></span>
<span class="w98-caps"><b>_</b><b>▢</b><b>✕</b></span>
</div>
<div class="w98-body"> ...your stuff... </div>
</div>
*/

/* ---------- CONFIG: change these colours to reskin every window ---------- */
:root { --w98-face: #c0c0c0;
--w98-face-hover: #d4d0c8;
--w98-hilite: #ffffff;
--w98-light: #dfdfdf;
--w98-shadow: #808080;
--w98-dkshadow: #404040;
--w98-title-a: #ff00ff;
--w98-title-b: #00ffff;
--w98-title-text: #ffffff;
--w98-ink: #000000;
--w98-font: Tahoma, Verdana, "Segoe UI", sans-serif;
}

/* ---------- the window frame (raised 3D bevel) ---------- */
.w98-window { background: var(--w98-face);
color: var(--w98-ink);
font-family: var(--w98-font);
border: 2px solid;
border-color: var(--w98-hilite) var(--w98-dkshadow) var(--w98-dkshadow) var(--w98-hilite);
box-shadow: inset 1px 1px 0 var(--w98-light), inset -1px -1px 0 var(--w98-shadow), 3px 3px 8px rgba(0,0,0,.55);
padding: 3px;
margin: 14px auto;
max-width: 600px;
}

/* ---------- the title bar (Magic16 neon gradient) ---------- */
.w98-title { display: flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 3px 0 7px;
background: linear-gradient(90deg, var(--w98-title-a), var(--w98-title-b));
color: var(--w98-title-text);
font-family: var(--w98-font);
font-weight: 700;
font-size: 13px;
text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.w98-title .spacer { flex: 1 1 auto; }

/* ---------- caption buttons (minimise / maximise / close) ---------- */
.w98-caps { display: flex;
gap: 2px;
}
.w98-caps b { width: 22px;
height: 20px;
display: grid;
place-items: center;
background: var(--w98-face);
color: var(--w98-ink);
border: 1px solid;
border-color: var(--w98-hilite) var(--w98-dkshadow) var(--w98-dkshadow) var(--w98-hilite);
box-shadow: inset 1px 1px 0 var(--w98-light);
font: 700 12px var(--w98-font);
cursor: pointer;
}
.w98-caps b:active { border-color: var(--w98-dkshadow) var(--w98-hilite) var(--w98-hilite) var(--w98-dkshadow);
box-shadow: inset 1px 1px 0 var(--w98-shadow);
}

/* ---------- the body (sunken content well) ---------- */
.w98-body { background: var(--w98-face);
color: var(--w98-ink);
font-family: var(--w98-font);
border: 2px solid;
border-color: var(--w98-shadow) var(--w98-hilite) var(--w98-hilite) var(--w98-shadow);
margin-top: 3px;
padding: 14px;
line-height: 1.5;
}

/* ---------- a reusable grey push-button ---------- */
.w98-btn { display: inline-block;
padding: 4px 14px;
background: var(--w98-face);
color: var(--w98-ink);
font: 700 13px var(--w98-font);
border: 2px solid;
border-color: var(--w98-hilite) var(--w98-dkshadow) var(--w98-dkshadow) var(--w98-hilite);
box-shadow: inset 1px 1px 0 var(--w98-light);
cursor: pointer;
text-decoration: none;
}
.w98-btn:hover   { background: var(--w98-face-hover); }
.w98-btn:active  { border-color: var(--w98-dkshadow) var(--w98-hilite) var(--w98-hilite) var(--w98-dkshadow);
box-shadow: inset 1px 1px 0 var(--w98-shadow);
}