/* ============================================================
   Mingo — Windows 95 theme. Activates only under
   html[data-theme="win95"] (e.g. /app?theme=win95). Pure skin:
   no markup or JS changes, safe to ship alongside dark/light.
   ============================================================ */

html[data-theme="win95"]{
  --bg:#008080; --bg-grad:none;
  --surface:#c0c0c0; --surface-2:#c0c0c0; --surface-3:#bdbdbd;
  --border:#808080; --border-soft:#9c9c9c;
  --text:#000000; --muted:#222222; --faint:#555555;
  --accent:#000080; --accent-ink:#ffffff; --accent-weak:#00008022;
  --indigo:#000080; --gold:#808000; --rose:#aa0000; --green:#008000;
  --shadow:none;
  --radius:0px; --radius-sm:0px;
  --t1:#cc0000; --t2:#007700; --t3:#0000cc; --t4:#770077; --t5:#444444;

  /* classic bevels */
  --raised: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff,
            inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --sunken: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a,
            inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  --titlebar: linear-gradient(90deg,#000080,#1084d0);
}

html[data-theme="win95"] body{
  background:#008080; background-image:none;
  font-family:Tahoma,"MS Sans Serif","Pixelated MS Sans Serif",Geneva,sans-serif;
  font-size:12px;
  -webkit-font-smoothing:none;
}

/* square EVERYTHING */
html[data-theme="win95"] *{border-radius:0 !important;box-shadow:none;backdrop-filter:none;text-shadow:none}

/* ---------- top bar = title-less taskbar ---------- */
html[data-theme="win95"] .topbar{
  background:#c0c0c0;border-bottom:none;box-shadow:var(--raised);
  padding:8px 14px;position:static;
}
html[data-theme="win95"] .pill{
  background:#c0c0c0;border:none;box-shadow:var(--sunken);
  font-weight:400;font-size:11px;color:#000;padding:4px 10px;
}
html[data-theme="win95"] .pill .dot{border-radius:0 !important;width:9px;height:9px}
html[data-theme="win95"] .iconbtn{
  background:#c0c0c0;border:none;box-shadow:var(--raised);color:#000;
}
html[data-theme="win95"] .iconbtn:active{box-shadow:var(--sunken)}

/* ---------- cards = windows with title bars ---------- */
html[data-theme="win95"] .card{
  background:#c0c0c0;border:none;box-shadow:var(--raised);
  padding-top:30px;position:relative;overflow:visible;
}
html[data-theme="win95"] .card::before{
  content:"Mingo";
  position:absolute;top:3px;left:3px;right:3px;height:22px;
  background:var(--titlebar);color:#fff;
  font-weight:700;font-size:12px;line-height:22px;padding:0 8px;
  font-family:Tahoma,"MS Sans Serif",sans-serif;
}
html[data-theme="win95"] .card::after{
  content:"✕";
  position:absolute;top:6px;right:7px;width:16px;height:16px;
  background:#c0c0c0;box-shadow:var(--raised);
  color:#000;font-size:10px;font-weight:700;line-height:16px;text-align:center;
  pointer-events:none;
}
html[data-theme="win95"] .app > section.card::before{content:"EMERALD.EXE — running"}
html[data-theme="win95"] .study .card:has(#dialogue)::before{content:"dialogue.txt — Notepad"}
html[data-theme="win95"] .study .card:has(.tabs)::before{content:"vocab_deck.mdb"}
html[data-theme="win95"] .debug.card::before{content:"COMMAND.COM"}

/* ---------- game screen: sunken well ---------- */
html[data-theme="win95"] .screen-frame{
  background:#c0c0c0;box-shadow:var(--sunken);padding:8px;
}
html[data-theme="win95"] .boot-overlay{background:#c0c0c0}
html[data-theme="win95"] .hint{color:#222}
html[data-theme="win95"] .hint kbd{
  background:#c0c0c0;border:none;box-shadow:var(--sunken);font-size:10px;
}

/* the .seg container has a border + bg in base theme; flatten it for win95 */
html[data-theme="win95"] .seg{background:transparent;border:none}

/* ---------- buttons, chips, tools, tabs, pad ---------- */
html[data-theme="win95"] .btn,
html[data-theme="win95"] .chip,
html[data-theme="win95"] .tool,
html[data-theme="win95"] .tab,
html[data-theme="win95"] .seg button,
html[data-theme="win95"] .dpad button,
html[data-theme="win95"] .ab button,
html[data-theme="win95"] .startsel button,
html[data-theme="win95"] .shoulder button{
  background:#c0c0c0;border:none;box-shadow:var(--raised);
  color:#000;font-weight:400;transition:none;
}
html[data-theme="win95"] .btn:hover,
html[data-theme="win95"] .chip:hover,
html[data-theme="win95"] .tool:hover{color:#000;background:#c0c0c0}
html[data-theme="win95"] .btn:active,
html[data-theme="win95"] .chip:active,
html[data-theme="win95"] .tool:active,
html[data-theme="win95"] .tab:active,
html[data-theme="win95"] .dpad button:active,
html[data-theme="win95"] .ab button:active,
html[data-theme="win95"] .startsel button:active,
html[data-theme="win95"] .shoulder button:active{box-shadow:var(--sunken)}
html[data-theme="win95"] .btn.primary{
  background:#c0c0c0;color:#000;font-weight:700;
}
html[data-theme="win95"] .chip.active,
html[data-theme="win95"] .tool.active,
html[data-theme="win95"] .tab.active,
html[data-theme="win95"] .seg button.on{
  box-shadow:var(--sunken);background:#dfdfdf;color:#000;
  background-image:repeating-conic-gradient(#fff 0 25%, #dfdfdf 0 50%);
  background-size:2px 2px;
}
html[data-theme="win95"] .ab .b-a,html[data-theme="win95"] .ab .b-b{
  background:#c0c0c0;color:#000;
}
html[data-theme="win95"] .dpad .c{background:#bdbdbd;box-shadow:var(--sunken)}

/* ---------- dialogue area ---------- */
html[data-theme="win95"] #dialogue{
  background:#ffffff;box-shadow:var(--sunken);margin:0 14px;padding:14px;
}
html[data-theme="win95"] .dlg-empty{color:#444}
html[data-theme="win95"] .word:hover{background:#000080;}
html[data-theme="win95"] .word:hover .hz{color:#fff !important}
html[data-theme="win95"] .word:hover .py{color:#fff !important}
html[data-theme="win95"] .speaker{color:#000080;font-weight:700}
html[data-theme="win95"] .wordcard{
  background:#ffffe1;box-shadow:var(--sunken);border:1px solid #000;
  margin:12px 14px;color:#000;
}

/* ---------- lists, drawer, modals ---------- */
html[data-theme="win95"] .litem{border-bottom:1px dotted #808080}
html[data-theme="win95"] .litem:hover{background:#000080;color:#fff}
html[data-theme="win95"] .litem:hover *{color:#fff !important}
html[data-theme="win95"] .drawer,
html[data-theme="win95"] .rcard{
  background:#c0c0c0;border:none;box-shadow:var(--raised);
  padding-top:34px;
}
html[data-theme="win95"] .drawer::before,
html[data-theme="win95"] .rcard::before{
  content:"Properties";
  position:absolute;top:3px;left:3px;right:3px;height:22px;
  background:var(--titlebar);color:#fff;
  font-weight:700;font-size:12px;line-height:22px;padding:0 8px;
}
html[data-theme="win95"] .rcard::before{content:"Mingo — dialog"}
html[data-theme="win95"] .switch{box-shadow:var(--sunken);background:#fff;border:none}
html[data-theme="win95"] .switch.on{background:#000080}

/* ---------- scrollbars ---------- */
html[data-theme="win95"] ::-webkit-scrollbar{width:16px;height:16px}
html[data-theme="win95"] ::-webkit-scrollbar-thumb{
  background:#c0c0c0;border:none;box-shadow:var(--raised);background-clip:border-box;
}
html[data-theme="win95"] ::-webkit-scrollbar-track{
  background-image:repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%);
  background-size:2px 2px;
}

/* ---------- toasts ---------- */
html[data-theme="win95"] .toast{
  background:#c0c0c0;color:#000;box-shadow:var(--raised);border:none;font-size:11px;
}