@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

    :root{
      --bg:#0b1020;
      --fg:#e8ecff;
      --muted:#8e96a8;
      --accent:#7da2ff;
      --edge:rgba(130,160,255,.28);
    
      --accent2:#9BFFB3;
      --danger:#ff7aa2;
      --panel:#0b1020;
      --panel2:#121a2b;
      --glass: rgba(255,255,255,.03);
      --shadow: 0 28px 70px rgba(0,0,0,.68);
      --ease: cubic-bezier(.2,.8,.2,1);
      --ease2: cubic-bezier(.16,1,.3,1);
      --dur1: 140ms;
      --dur2: 260ms;
}
    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    html,body{height:100%}
    body{
      margin:0;color:var(--fg);
      font:15px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,ui-monospace,sans-serif;
      overflow:hidden;display:grid;place-items:center;padding:32px;background:var(--bg);
    }

    canvas#bg{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.9}

    .panel{
      position:relative; z-index:2; width:min(620px,92vw);
      padding:32px 28px 24px; border-radius:20px;
      background:
        radial-gradient(200% 160% at 60% 10%, rgba(125,160,255,.22), transparent 70%),
        linear-gradient(180deg,#121a2b,#0b1020);
      border:1px solid var(--edge);
      box-shadow:0 0 18px rgba(125,160,255,.22), 0 28px 70px rgba(0,0,0,.68), inset 0 0 40px rgba(130,160,255,.05);
      overflow:hidden; transform-style:preserve-3d; transition:transform .15s ease;
    }
    .panel::before{
      content:""; position:absolute; inset:-30%;
      background:radial-gradient(600px 250px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.05), transparent 75%);
      mix-blend-mode:screen; pointer-events:none;
    }
    .panel::after{
      content:""; position:absolute; inset:0; border-radius:inherit;
      border:1px solid rgba(130,160,255,.5); opacity:.22; filter:blur(2.5px); pointer-events:none;
    }

    .titlebar{display:flex;align-items:center;gap:10px;margin-bottom:18px}
    .dots{display:flex;gap:6px}
    .dots span{width:10px;height:10px;border-radius:50%}
    .r{background:#ff5f56}.y{background:#ffbd2e}.g{background:#27c93f}
    .path{font:12px/1.2 "JetBrains Mono",Consolas,ui-monospace;opacity:.55;color:#aab4d2}

    h1{
      margin:0 0 12px;
      text-align:center;
      font:800 clamp(36px,6vw,50px)/1 "JetBrains Mono",Consolas,ui-monospace;
      color:#E9EEFF;
      letter-spacing:.7px;
      text-shadow: 0 0 10px rgba(110,140,255,.18), 0 0 22px rgba(0,0,0,.25);
    }

    .terminal{
      max-width:310px; margin:16px auto 22px;
      background:#0b0d14; border:1px solid var(--edge);
      border-radius:10px; padding:10px 12px;
      font:13px/1.4 "JetBrains Mono",Consolas,ui-monospace;
      color:#dbe6ff; letter-spacing:.5px; box-shadow:inset 0 0 22px rgba(130,160,255,.06);
      white-space:nowrap; cursor:pointer;
    }
    .terminal .caret{
      display:inline-block; width:8px; height:1.2em; background:#dbe6ff;
      vertical-align:-2px; margin-left:4px; animation:blink 1s steps(1,end) infinite
    }
    @keyframes blink{50%{opacity:0}}

    .links{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
    .tile{
      display:flex; align-items:center; gap:12px; padding:15px 18px; text-decoration:none; color:var(--fg);
      background:linear-gradient(180deg,#0d0f14,#090b10); border:1px solid rgba(130,160,255,.28);
      border-radius:12px; position:relative; overflow:hidden;
      font-family:Inter,system-ui; font-size:15px; font-weight:600; letter-spacing:.25px;
      transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, filter .2s ease;
    }
    .tile:hover{
      transform:translateY(-3px) scale(1.015); border-color:var(--accent);
      box-shadow:0 0 22px rgba(120,160,255,.28); color:#f5f8ff; filter:brightness(1.12);
    }
    .tile::after{
      content:""; position:absolute; inset:0;
      background:radial-gradient(350px 150px at var(--bx,50%) var(--by,50%), rgba(255,255,255,.08), transparent 75%);
      opacity:0; transition:opacity .2s ease; pointer-events:none;
    }
    .tile:hover::after{opacity:1}
    .brand{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 0 3px rgba(140,170,255,.18))}
    .label{font:600 15px/1.1 Inter,system-ui}

    footer{text-align:center;color:#80879e;font-size:12px;margin-top:20px}

    /* ---------- GAME OVERLAY (Minesweeper) ---------- */
    .gameOverlay{
      position:fixed; inset:0; z-index:20;  place-items:center;
      background:rgba(7,9,13,.75); backdrop-filter:blur(4px);
    }
    .gameBox{
      width:min(1100px,96vw);
      background:#0b0f15; border:1px solid rgba(130,160,255,.35);
      border-radius:16px; padding:14px; box-shadow:0 30px 80px rgba(0,0,0,.6);
    }
    .gameHead{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px;
      color:#bcd1ff; font:600 14px/1 Inter,system-ui;
    }
    .gameHint{color:#7f8aa5; font:12px/1.2 ui-monospace,Consolas}

    .difficultyRow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
    .select{
      appearance:none;
      padding:6px 10px;
      border-radius:10px;
      border:1px solid rgba(130,160,255,.28);
      background:rgba(255,255,255,.03);
      color:#e8ecff;
      font:600 12px/1 Inter,system-ui;
      cursor:pointer;
      outline:none;
    }
    .select:hover{border-color:rgba(125,160,255,.65)}
    .badge{
      font:600 12px/1 Inter,system-ui;
      color:#9fb3d5;
      opacity:.85;
    }

    /* Minesweeper board */
    .msWrap{
      background:#05070b;
      border-radius:12px;
      border:1px solid rgba(130,160,255,.20);
      box-shadow: inset 0 0 24px rgba(130,160,255,.06);
      padding:10px;
      overflow:auto;
      max-height: min(86vh, 980px);
    }
    .msTop{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding:8px 10px;
      border-radius:10px;
      border:1px solid rgba(130,160,255,.18);
      background: rgba(255,255,255,.03);
      margin-bottom:10px;
      font: 12px/1 ui-monospace,Consolas;
      color:#9fb3d5;
      position:sticky;
      top:0;
      z-index:2;
      backdrop-filter: blur(6px);
    }
    .msTop b{color:#e8ecff}

    .msGrid{
      display:grid;
      gap: var(--gap, 6px);
      user-select:none;
      margin:0 auto;
      width:max-content;
      --cell: 32px;
    }

    .cell{
      width: var(--cell);
      height: var(--cell);
      border-radius: calc(var(--cell) * 0.28);

      background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
      border: 1px solid rgba(130,160,255,.28);
      box-shadow:
        0 8px 20px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -10px 18px rgba(0,0,0,.35),
        0 0 0 1px rgba(125,160,255,.06) inset;

      display:grid;
      place-items:center;
      cursor:pointer;

      font: 800 calc(var(--cell) * 0.50)/1 "JetBrains Mono",Consolas,ui-monospace;
      color:#e8ecff;

      transition: transform .08s ease, border-color .15s ease, filter .15s ease, box-shadow .15s ease;
    }
    .cell:hover{
      transform: translateY(-1px);
      border-color: rgba(125,160,255,.60);
      filter: brightness(1.10);
    }
    .cell.revealed{
      cursor:default;
      background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72));
      border-color: rgba(130,160,255,.16);
      box-shadow:
        inset 0 2px 14px rgba(0,0,0,.65),
        inset 0 0 0 1px rgba(255,255,255,.03);
      transform:none;
      filter:none;
    }
    .cell.revealed:hover{transform:none;filter:none;}

    .cell.flagged{
      background: linear-gradient(180deg, rgba(125,160,255,.14), rgba(0,0,0,.55));
      border-color: rgba(125,160,255,.65);
      box-shadow:
        0 0 18px rgba(125,160,255,.18),
        inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .cell.mine{
      background: linear-gradient(180deg, rgba(255,122,162,.10), rgba(0,0,0,.70));
      border-color: rgba(255,120,160,.55);
      box-shadow:
        0 0 22px rgba(255,120,160,.18),
        inset 0 0 0 1px rgba(255,255,255,.03);
    }

    .n1{color:#7da2ff}
    .n2{color:#7cff9b}
    .n3{color:#ffd37a}
    .n4{color:#ff7aa2}
    .n5{color:#c99bff}
    .n6{color:#7cf7ff}
    .n7{color:#e8ecff}
    .n8{color:#8e96a8}

    .winGlow{
      color:#7cff9b !important;
      text-shadow: 0 0 10px rgba(124,255,155,.45), 0 0 22px rgba(124,255,155,.22);
    }
    .loseGlow{
      color:#ff7aa2 !important;
      text-shadow: 0 0 10px rgba(255,122,162,.45), 0 0 22px rgba(255,122,162,.22);
    }
    .pulse{ animation:pulsePop .55s ease both; }
    @keyframes pulsePop{
      0%{ transform:scale(1); }
      45%{ transform:scale(1.08); }
      100%{ transform:scale(1); }
    }
    .confetti{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:60;
    }

    .gameBtns{display:flex; gap:8px; margin-top:10px}
    .btn{
      padding:8px 10px; border-radius:10px;
      border:1px solid rgba(130,160,255,.28);
      background:#0c1118; color:#e8ecff;
      font:12px/1 Inter,system-ui; cursor:pointer;
    }
    .btn:hover{border-color:#7da2ff}

    /* ---------- TERM OVERLAY ---------- */
    .termOverlay{
      position:fixed; inset:0; z-index:50;
      
      background:#020806;
    }
    .termBox{
      width:100%; height:100%;
      background:#000;
      border:0;
      border-radius:0;
      padding:24px;
    }
    .termBody{
      max-height:calc(100vh - 120px);
      overflow:auto;
      padding:10px 0;
      font:22px/1.25 "VT323", ui-monospace, Consolas;
      color:#9BFFB3;
      text-shadow: 0 0 10px rgba(155,255,179,.45), 0 0 24px rgba(155,255,179,.18);
    }
    .termLine{margin:0 0 6px; white-space:pre-wrap}
    .termDim{opacity:.7}
    .termOk{color:#7CFF9B}
    .termWarn{color:#FFD37A}
    .termCmd{color:#9DFFB8}
    .termLink{color:#bcd1ff; text-decoration:underline; cursor:pointer}
    .termInputRow{display:flex;align-items:center;gap:10px;margin-top:6px;}
    .termPrompt{
      font:22px/1 "VT323", ui-monospace, Consolas;
      color:#9BFFB3;
      text-shadow:0 0 10px rgba(155,255,179,.35);
    }
    .termInput{
      flex:1; background:transparent; border:0; outline:0; color:#e8ecff;
      font:22px/1.1 "VT323", ui-monospace, Consolas;
      caret-color:#9BFFB3;
    }

    .termOverlay.open.crt::before{
      content:""; position:fixed; inset:0; pointer-events:none;
      background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.14) 3px);
      opacity:.55; mix-blend-mode:overlay;
    }
    .termOverlay.open.crt::after{
      content:""; position:fixed; inset:0; pointer-events:none;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, rgba(0,0,0,0) 1px 3px),
        radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
      opacity:.55;
      filter: blur(.25px);
      animation: noiseShift 2.2s steps(12,end) infinite;
    }
    @keyframes noiseShift{
      0%{ transform:translate3d(-1%, -1%, 0) }
      20%{ transform:translate3d(1%, 0, 0) }
      40%{ transform:translate3d(0, 1%, 0) }
      60%{ transform:translate3d(-1%, 1%, 0) }
      80%{ transform:translate3d(1%, -1%, 0) }
      100%{ transform:translate3d(0, 0, 0) }
    }

    .termOverlay.open.flicker{ animation: crtFlicker 4.6s infinite; }
    @keyframes crtFlicker{
      0%, 100% { filter:brightness(1) contrast(1.02); }
      92% { filter:brightness(1.02) contrast(1.06); }
      93% { filter:brightness(.92) contrast(1.12); }
      94% { filter:brightness(1.04) contrast(1.08); }
      97% { filter:brightness(.98) contrast(1.04); }
    }

    @media (prefers-reduced-motion: reduce){
      canvas#bg{display:none}
      .termOverlay.open.crt::after{animation:none}
      .termOverlay.open.flicker{animation:none}
      .panel{transition:none}
      .tile:hover{transform:none}
      .terminal .caret{animation:none}
    }

/* === Minesweeper Summary Overlay === */
.ms-summary{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  z-index: 50;
}

.ms-summary-card{
  width: min(520px, 92vw);
  border-radius: 16px;
  padding: 16px;
  background: rgba(15,18,26,.92);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.ms-summary-title{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.ms-srow{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
  opacity: .95;
}

.ms-sgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin: 10px 0 12px;
}

.ms-sitem .k{ opacity:.75; font-size:12px; margin-bottom:4px; }
.ms-sitem .v{ font-weight:700; font-size:14px; }

.ms-note{ opacity:.75; font-size:12px; margin-top: 6px; }

.ms-summary-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 10px;
}

.ms-btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
}

.ms-btn.secondary{
  background: transparent;
}
/* ===== RMKR CLEAN MINESWEEPER LAYOUT FIX ===== */

/* Overlay soll echten Platz geben */
#gameOverlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
}

/* GameBox darf wachsen */
.gameBox{
  max-height:92vh;
  display:flex;
  flex-direction:column;
}

/* Wrapper bekommt echten Platz -> wichtig für Scaling */
#msWrap{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:auto;
}

/* Grid immer mittig + kein zusammendrücken */
#msGrid{
  margin:0 auto;
  flex:0 0 auto;
}

/* verhindert ultra kleine Zellen */
.cell{
  min-width:18px;
  min-height:18px;
}


/* ===== RMKR PRO POLISH (global) ===== */
:focus-visible{outline:2px solid rgba(125,160,255,.75); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important;}
}

body{backdrop-filter:saturate(1.05)}
.panel{
  animation: panelIn 520ms var(--ease2) both;
}
@keyframes panelIn{
  from{opacity:0; transform:translateY(14px) scale(.985)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

/* nicer button micro-interactions */
.btn{
  transition: transform var(--dur1) var(--ease), border-color var(--dur1) var(--ease), filter var(--dur1) var(--ease);
}
.btn:active{transform: translateY(1px) scale(.99)}

/* Tile press feels better */
.tile:active{transform: translateY(-1px) scale(1.005)}

/* ===== Overlay animations (Terminal + Games) ===== */
/* Keep layout stable: overlays are always grid, visibility controls */
.termOverlay, .gameOverlay{
  display:grid;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: scale(.985);
  transition: opacity var(--dur2) var(--ease2), transform var(--dur2) var(--ease2), visibility 0s linear var(--dur2);
}
.termOverlay.is-open, .gameOverlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: scale(1);
  transition: opacity var(--dur2) var(--ease2), transform var(--dur2) var(--ease2), visibility 0s;
}

/* subtle close animation helpers */
.termOverlay.is-closing, .gameOverlay.is-closing{
  opacity:0;
  transform: scale(.985);
  visibility:visible;
  pointer-events:none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

/* Terminal: nicer background + vignette */
.termOverlay{
  place-items:stretch;
  background: radial-gradient(120% 120% at 50% 20%, rgba(0,20,10,.55), rgba(0,0,0,.92));
}
.termBox{
  animation: termFlick 4.4s steps(1,end) infinite;
}
@keyframes termFlick{
  0%,92%,100%{filter:none}
  93%{filter:brightness(1.03)}
  94%{filter:brightness(.98)}
  96%{filter:brightness(1.02)}
}

/* Minesweeper: give gameBox a bit of motion */
.gameBox{
  transition: transform var(--dur2) var(--ease2);
}
.gameOverlay.is-open .gameBox{ transform: translateY(0) }



/* ===== RMKR FIX: adaptive Minesweeper window sizing ===== */
.gameBox{ width: min(1160px, 96vw); height: min(980px, 92vh); }
#msWrap,.msWrap{ flex:1 1 auto; min-height:0; }

/* --- RMKR OS STYLE UPGRADE --- */

/* 1. Der blaue Rand (Outline) muss weg! */
.termInput, .termInput:focus, .termInput:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 2. CRT Scanlines (Alter Monitor Effekt) */
.termOverlay::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 99;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

/* 3. Text Glow (Leuchten) */
.termBody, .termInput, .termPrompt {
  text-shadow: 0 0 4px rgba(125, 255, 175, 0.6);
}

/* 4. Status Bar unten */
.termStatusBar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: #0b1020;
  border-top: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  font-family: "VT323", monospace;
  font-size: 18px;
  color: #7da2ff;
  z-index: 100;
}