@charset "utf-8";
/* ==========================================================================
   maeli.net OS   -   system/system.css
   --------------------------------------------------------------------------
   Alles, was NICHT vom Window Manager abhaengt: Fenster-Struktur, Griffe,
   Menues, Statuszeilen und die Programme selbst.

   Der Look kommt aus Variablen (--ui-*), die jeder Window Manager in seiner
   eigenen wm.css setzt. Ein Programm braucht deshalb nie zu wissen, ob es
   gerade in einem 3.11-Desktop oder in einem modernen Mint-Desktop laeuft.
   ========================================================================== */

/* Fallback, falls ein WM eine Variable vergisst */
:root, #desktop{
  --ui-face:#c0c0c0;      --ui-face-2:#b0b0b0;
  --ui-light:#ffffff;     --ui-shadow:#808080;   --ui-dark:#000000;
  --ui-body:#ffffff;      --ui-text:#000000;     --ui-dim:#808080;
  --ui-sel-bg:#000080;    --ui-sel-fg:#ffffff;
  --ui-title-bg:#000080;  --ui-title-fg:#ffffff;
  --ui-title-bg-off:#808080; --ui-title-fg-off:#c0c0c0;
  --ui-radius:0px;        --ui-bevel:1px;        --ui-frame:1px;
  --ui-title-h:20px;      --ui-drop:none;
  --ui-font:"MS Sans Serif","Microsoft Sans Serif",Tahoma,Geneva,Verdana,"DejaVu Sans",sans-serif;
  --ui-fs:12px;
  --ui-icon-fg:#000000;   --ui-icon-shadow:rgba(255,255,255,.85);
  --ui-icon-bg-sel:#000080; --ui-icon-fg-sel:#ffffff;
  --mono:"Courier New","Nimbus Mono PS","Liberation Mono",ui-monospace,monospace;
}

/* ==========================================================================
   Open Props (usr/lib/open-props.css)
   --------------------------------------------------------------------------
   Die Bibliothek liefert nur Design-Tokens (Farben, Radien, Schatten,
   Abstaende, Zeiten, Verlaeufe) - keine Element-Styles. Wir leiten daraus
   eigene Namen (--ui-*) ab, damit die Programme nicht direkt an fremden
   Variablennamen haengen. Jede Zeile hat einen Rueckfall: fehlt die Datei
   einmal, sieht alles aus wie vorher.
   ========================================================================== */
:root{
  --ui-radius-s:  var(--radius-1, 4px);
  --ui-radius-m:  var(--radius-2, 8px);
  --ui-radius-l:  var(--radius-3, 16px);
  --ui-shadow-1:  var(--shadow-1, 0 1px 2px rgba(0,0,0,.22));
  --ui-shadow-3:  var(--shadow-3, 0 10px 28px rgba(0,0,0,.32));
  --ui-shadow-5:  var(--shadow-5, 0 24px 60px rgba(0,0,0,.50));
  --ui-ease:      var(--ease-2, cubic-bezier(.25,.46,.45,.94));
  --ui-ease-aus:  var(--ease-3, cubic-bezier(.215,.61,.355,1));
  --ui-font-ui:   var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
  --ui-space-1:   var(--size-1, 4px);
  --ui-space-2:   var(--size-2, 8px);
  --ui-space-3:   var(--size-3, 12px);
  --ui-space-4:   var(--size-4, 16px);
}

/* ------------------------------------------------------------ Fenster */
/* Gemeinsame Buehne der Arcade- und Brettspiele (Blocksturm, Tic-Tac-Toe,
   Minefeld): ein dunkler Verlauf, damit alle Spiele gleich aussehen. */
:root{
  --buehne-verlauf:radial-gradient(ellipse at 50% 32%,#172b39 0%,#08111b 58%,#04070c 100%);
}
#desktop{
  position:fixed;inset:0;display:none;overflow:hidden;user-select:none;
  font-family:var(--ui-font);font-size:var(--ui-fs);color:var(--ui-text);
}
#desktop.on{display:block}

.win{
  --win-radius:var(--ui-radius);
  position:absolute;display:flex;flex-direction:column;
  background:var(--ui-face);color:var(--ui-text);
  border:var(--ui-frame) solid var(--ui-dark);
  border-radius:var(--win-radius);
  padding:var(--ui-bevel);
  box-shadow:inset var(--ui-bevel) var(--ui-bevel) 0 var(--ui-light),
             inset calc(-1 * var(--ui-bevel)) calc(-1 * var(--ui-bevel)) 0 var(--ui-shadow),
             var(--ui-drop);
}
.win.max{ --win-radius:0px; }
.win .tbar{
  display:flex;align-items:center;gap:4px;height:var(--ui-title-h);padding:0 2px;
  background:var(--ui-title-bg);color:var(--ui-title-fg);
  cursor:move;
  border-top-left-radius:max(0px, calc(var(--win-radius) - var(--ui-frame)));
  border-top-right-radius:max(0px, calc(var(--win-radius) - var(--ui-frame)));
}
.win:not(.aktiv) .tbar{background:var(--ui-title-bg-off);color:var(--ui-title-fg-off)}
.win .tbar .ttl{flex:1;font-weight:bold;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.win .mbar{display:flex;gap:14px;padding:3px 6px;background:var(--ui-face);color:var(--ui-text)}
.win .mbar u{text-decoration:underline}
.win .mbar span{cursor:default}
.win .mbar span:hover{background:var(--ui-sel-bg);color:var(--ui-sel-fg)}
.win .body{position:relative;flex:1;overflow:auto;background:var(--ui-body);color:var(--ui-text);padding:6px}
.win .status{display:flex;gap:2px;margin-top:4px}
.win .status div{padding:2px 6px;border-radius:calc(var(--ui-radius) / 2);font-size:calc(var(--ui-fs) - 1px);background:var(--ui-face);
  border:1px solid var(--ui-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:inset var(--ui-bevel) var(--ui-bevel) 0 var(--ui-shadow), inset calc(-1 * var(--ui-bevel)) calc(-1 * var(--ui-bevel)) 0 var(--ui-light)}
.win .status .sl{flex:1}
.win .status .sr{flex:0 0 auto}
.win .status div:first-child{border-bottom-left-radius:max(0px, calc(var(--win-radius) - var(--ui-frame)))}
.win .status div:last-child{border-bottom-right-radius:max(0px, calc(var(--win-radius) - var(--ui-frame)))}
.win.min{display:none}

/* Groessengriffe (unsichtbar, nur der Cursor verraet sie) */
.rz{position:absolute;z-index:30}
.rz-n{left:0;right:0;top:-3px;height:7px;cursor:ns-resize}
.rz-s{left:0;right:0;bottom:-3px;height:7px;cursor:ns-resize}
.rz-w{top:0;bottom:0;left:-3px;width:7px;cursor:ew-resize}
.rz-e{top:0;bottom:0;right:-3px;width:7px;cursor:ew-resize}
.rz-nw{left:-3px;top:-3px;width:12px;height:12px;cursor:nwse-resize}
.rz-ne{right:-3px;top:-3px;width:12px;height:12px;cursor:nesw-resize}
.rz-sw{left:-3px;bottom:-3px;width:12px;height:12px;cursor:nesw-resize}
.rz-se{right:-3px;bottom:-3px;width:12px;height:12px;cursor:nwse-resize}
body.zieht, body.zieht *{cursor:inherit!important}

/* -------------------------------------------------------------- Menues */
.popup{
  position:absolute;z-index:9000;min-width:150px;padding:2px;
  background:var(--ui-face);color:var(--ui-text);
  font-family:var(--ui-font);font-size:var(--ui-fs);
  border:1px solid var(--ui-dark);border-radius:var(--ui-radius);
  box-shadow:inset var(--ui-bevel) var(--ui-bevel) 0 var(--ui-light), inset calc(-1 * var(--ui-bevel)) calc(-1 * var(--ui-bevel)) 0 var(--ui-shadow), var(--ui-drop);
}
.popup .pi{padding:4px 24px 4px 20px;white-space:nowrap;position:relative;cursor:default;
  border-radius:calc(var(--ui-radius) / 2)}
.popup .pi:hover{background:var(--ui-sel-bg);color:var(--ui-sel-fg)}
.popup .pi.aus{color:var(--ui-dim)}
.popup .pi.aus:hover{background:transparent;color:var(--ui-dim)}
.popup .pi .hk{position:absolute;right:8px;color:inherit}
.popup .trenner{height:1px;margin:3px 2px;background:var(--ui-shadow);
  box-shadow:0 1px 0 var(--ui-light)}

/* -------------------------------------------------------------- Dialoge */
.dlg{display:flex;gap:14px}
.dlg .dlgicon svg{width:48px;height:48px}
.dlg .dlgtext{flex:1;line-height:1.45}
.dlg .dlgtext .fett{font-weight:bold;font-size:calc(var(--ui-fs) + 1px)}
.dlg .dlgjoke{margin-top:10px;color:#800000;font-weight:bold;min-height:16px}
.dlgbtns{display:flex;justify-content:flex-end;margin-top:12px}
.btn3d{
  min-width:76px;padding:4px 10px;margin-left:6px;cursor:default;
  background:var(--ui-face);color:var(--ui-text);
  font-family:var(--ui-font);font-size:var(--ui-fs);
  border:1px solid var(--ui-dark);border-radius:var(--ui-radius);
  box-shadow:inset var(--ui-bevel) var(--ui-bevel) 0 var(--ui-light),
             inset calc(-1 * var(--ui-bevel)) calc(-1 * var(--ui-bevel)) 0 var(--ui-shadow);
}
.btn3d:active{box-shadow:inset var(--ui-bevel) var(--ui-bevel) 0 var(--ui-shadow),
  inset calc(-1 * var(--ui-bevel)) calc(-1 * var(--ui-bevel)) 0 var(--ui-light)}
.btn3d:focus-visible{outline:1px dotted var(--ui-dark);outline-offset:-4px}

/* --------------------------------------------------------------- Icons */
.ic{width:88px;padding:4px 2px;text-align:center;cursor:default;outline:none}
.ic .icimg,.dic .dicimg,.minic .miimg{height:34px;display:flex;align-items:center;justify-content:center}
.ic .icimg svg{width:32px;height:32px}
.ic .iclab{font-size:calc(var(--ui-fs) - 1px);line-height:1.2;padding:1px 3px;display:inline-block;
  white-space:nowrap}
.ic.sel .iclab{background:var(--ui-sel-bg);color:var(--ui-sel-fg)}
.ic:focus-visible .iclab{outline:1px dotted var(--ui-dark)}

/* ------------------------------------------------------------ Programme */
.calcdisp{background:var(--ui-body);border:1px solid var(--ui-dark);margin-bottom:8px;
  border-radius:calc(var(--ui-radius) / 2);
  box-shadow:inset var(--ui-bevel) var(--ui-bevel) 0 var(--ui-shadow);
  font-family:var(--mono);font-size:16px;text-align:right;padding:3px 6px;
  overflow:hidden;white-space:nowrap}
.calcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.cb{padding:7px 0;background:var(--ui-face);color:#000080;cursor:default;
  font-family:var(--ui-font);font-size:13px;font-weight:bold;
  border:1px solid var(--ui-dark);border-radius:var(--ui-radius);
  box-shadow:inset var(--ui-bevel) var(--ui-bevel) 0 var(--ui-light),
             inset calc(-1 * var(--ui-bevel)) calc(-1 * var(--ui-bevel)) 0 var(--ui-shadow)}
.cb:active{box-shadow:inset var(--ui-bevel) var(--ui-bevel) 0 var(--ui-shadow),
  inset calc(-1 * var(--ui-bevel)) calc(-1 * var(--ui-bevel)) 0 var(--ui-light)}
.cb.op{color:var(--ui-text)}
.cb.rot{color:#a00000}
.cb.breit{grid-column:span 2}

.clockface{display:block;margin:6px auto 0;border:1px solid var(--ui-dark);
  border-radius:var(--ui-radius);
  box-shadow:inset var(--ui-bevel) var(--ui-bevel) 0 var(--ui-shadow), inset calc(-1 * var(--ui-bevel)) calc(-1 * var(--ui-bevel)) 0 var(--ui-light)}

/* Minefeld: dunkle Buehne, Neonzahlen und stille Kacheln wie bei den
   Arcade-Spielen (Blocksturm, Tic-Tac-Toe). Die Groesse der Zellen setzt
   minefeld.js je Stufe. */
.mfbuehne{display:flex;flex-direction:column;box-sizing:border-box;
  padding:12px;min-height:100%;
  background:var(--buehne-verlauf,#04070c);
  color:#e8fbff;
  font-family:"DejaVu Sans Mono","Liberation Mono","Courier New",monospace}
.mfinnen{display:flex;flex-direction:column;gap:10px;width:max-content;
  max-width:100%;margin:0 auto}
.mfkopf{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;flex:0 0 auto}
.mfkachel{display:flex;flex-direction:column;gap:2px;padding:6px 12px;border-radius:10px;
  background:rgba(6,12,26,.72);border:1px solid rgba(96,214,255,.22)}
.mfkachel.rechts{align-items:flex-end}
.mflabel{font-size:9px;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:rgba(148,197,226,.75)}
.mfzahl{font-size:21px;line-height:1.1;font-weight:700;letter-spacing:.06em;
  color:#e8fbff;text-shadow:0 0 12px rgba(103,232,249,.35)}
.mfzahl.knapp{color:#ffd166;text-shadow:0 0 12px rgba(255,209,102,.4)}
.mfneu{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#9beaff;background:rgba(6,12,26,.72);
  border:1px solid rgba(96,214,255,.30);border-radius:50%;
  transition:background .15s,border-color .15s,color .15s}
.mfneu:hover{background:rgba(34,211,238,.14);border-color:rgba(103,232,249,.60);color:#e8fbff}
.mfneu:focus-visible{outline:2px solid #67e8f9;outline-offset:2px}
.mfneu svg{width:22px;height:22px;display:block}
.mfneu.verloren{color:#ff9db8;border-color:rgba(251,113,133,.55)}
.mfneu.gewonnen{color:#8ef7c8;border-color:rgba(74,222,128,.55)}
.mfstufe{flex:0 0 auto;text-align:center;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(148,197,226,.8)}
.mfgitter{display:grid;gap:2px;width:max-content;margin:0 auto;padding:8px;border-radius:12px;
  background:rgba(6,12,26,.72);border:1px solid rgba(96,214,255,.22);
  box-shadow:0 18px 44px rgba(0,0,0,.55), inset 0 0 40px rgba(34,211,238,.05)}
.mfz{display:flex;align-items:center;justify-content:center;cursor:pointer;
  border-radius:4px;border:1px solid rgba(96,214,255,.18);
  background:linear-gradient(180deg,rgba(34,64,88,.96),rgba(14,30,46,.96));
  color:#e8fbff;font-family:inherit;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.mfz:hover{border-color:rgba(103,232,249,.55);
  background:linear-gradient(180deg,rgba(38,68,90,.98),rgba(16,34,52,.98))}
.mfz.offen{cursor:default;background:rgba(3,8,14,.72);border-color:rgba(96,214,255,.06);
  box-shadow:inset 0 0 12px rgba(0,0,0,.55)}
.mfz.offen:hover{border-color:rgba(96,214,255,.07);background:rgba(4,10,18,.55)}
.mfz.mine{background:rgba(58,16,32,.85);border-color:rgba(251,113,133,.55)}
.mfz.getroffen{background:rgba(120,24,48,.95);border-color:#fb7185;
  box-shadow:0 0 14px rgba(251,113,133,.55)}
.mfz.falsch{background:rgba(58,16,32,.45);border-color:rgba(251,113,133,.35)}
.mfz svg{display:block}
.mfz.n1{color:#67e8f9}.mfz.n2{color:#8ef7c8}.mfz.n3{color:#ffd166}.mfz.n4{color:#c084fc}
.mfz.n5{color:#fb7185}.mfz.n6{color:#7dd3fc}.mfz.n7{color:#e8fbff}.mfz.n8{color:#94a3b8}
.mfz.n1,.mfz.n2,.mfz.n3,.mfz.n4,.mfz.n5,.mfz.n6,.mfz.n7,.mfz.n8{text-shadow:0 0 10px currentColor}

.runnerframe{display:block;width:100%;height:100%;border:0;background:#000}

/* ------------------------------------ Ionenbrecher, Blocksturm, Wildlauf */
.ibbox,.bsbox,.gsbox,.pwbox,.wlbox{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#04060d;min-height:0}
.ibcanvas,.bscanvas,.gscanvas,.pwcanvas,.wlcanvas{display:block;border-radius:10px;touch-action:none;
  box-shadow:0 0 0 1px rgba(96,214,255,.16),0 18px 48px rgba(0,0,0,.55)}
.wlcanvas{box-shadow:0 0 0 1px rgba(255,200,120,.18),0 20px 54px rgba(0,0,0,.60)}
.ibcanvas,.gscanvas,.pwcanvas{cursor:none}
.ibbox::after,.bsbox::after,.gsbox::after,.pwbox::after,.wlbox::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,rgba(0,0,0,0) 52%,rgba(0,0,0,.42) 100%)}
.ibbox::before,.bsbox::before,.gsbox::before,.pwbox::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.20;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.5) 2px 3px)}


/* -------------------------------------------------------------- Terminal */
.term{
  height:100%;overflow:auto;padding:6px 8px;background:#0b0b0d;color:#c8c8c8;
  font-family:var(--mono);font-size:13px;line-height:1.35;white-space:pre-wrap;
  word-break:break-word;border-radius:calc(var(--ui-radius) / 2);
}
.term .tOut b{color:#e6e6e6}
.term .tOut .ok{color:#55ff55}
.term .tOut .fehler{color:#ff8080}
.term .tOut .dim{color:#8a8a8a}
.term .tOut .weg{color:#7fb2ff}
.term .tZeile{display:flex;gap:6px}
.term .tPrompt{color:#55ff55}
.term input{
  flex:1;background:transparent;border:0;outline:none;color:#e6e6e6;
  font-family:var(--mono);font-size:13px;padding:0;
}
.term .cursor2{display:inline-block;width:1ch;background:#c8c8c8;
  animation:blink 1.06s steps(1,end) infinite;height:1.1em;vertical-align:-.15em}
@media (prefers-reduced-motion:reduce){ .term .cursor2{animation:none} }

.dic:focus-visible .diclab{outline:1px dotted currentColor}

/* ==========================================================================
   Startanimation (usr/lib/splash.js)
   ========================================================================== */
#splash{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;
  background:#11151a;color:#e8eaed;font-family:var(--ui-font);
  transition:opacity .35s ease;
}
#splash.weg{opacity:0}
#splash .box{text-align:center}
#splash .logo svg{width:104px;height:104px;image-rendering:pixelated}
#splash .name{font-size:21px;letter-spacing:.05em;margin-top:12px;font-weight:600}
#splash .name b{color:#2ec27e}
#splash .bar{margin:18px auto 0;width:280px;height:6px;border-radius:3px;
  background:#262c34;overflow:hidden}
#splash .bar i{display:block;height:100%;width:0;border-radius:3px;background:#2ec27e;
  animation:splashFuell 1.9s ease-out forwards}
@keyframes splashFuell{0%{width:0}45%{width:55%}100%{width:100%}}
#splash .text{margin-top:11px;font-size:12.5px;color:#94a0ab;min-height:17px}
#splash .text .r{font-family:var(--mono);color:#2ec27e}
@media (prefers-reduced-motion:reduce){ #splash .bar i{animation:none;width:100%} }

/* ------------------------------------------------- kurze Einblendung
   MaeliOS.hinweis('...') - z.B. wenn eine Rolle fuer ein Programm nicht
   reicht. Liegt ueber allem, unabhaengig vom Window Manager. */
.maeli-hinweis{
  position:fixed;right:18px;bottom:18px;z-index:9999;max-width:min(420px,80vw);
  padding:11px 14px;border-radius:10px;
  background:rgba(30,34,39,.94);color:#eef1f4;
  border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--ui-accent,#2ec27e);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  font:13px/1.4 "Inter","Segoe UI","Noto Sans",system-ui,sans-serif;
  transition:opacity .35s ease;
}
.maeli-hinweis.fehler{ border-left-color:#e0554c; }

/* ------------------------------------------------------------------- Chat */