/* Windows XP Minesweeper-style embed */
html, body {
  background: transparent !important;
}

.msxp {
  --bg: #c0c0c0;
  --shadow: #808080;
  --highlight: #ffffff;
  --deep: #404040;
  font-family: Tahoma, Verdana, sans-serif;
  user-select: none;
}
.msxp * { box-sizing: border-box; }

.msxp .frame {
  display: inline-block;
  padding: 6px;
  background: var(--bg);
  border-top: 2px solid var(--highlight);
  border-left: 2px solid var(--highlight);
  border-right: 2px solid var(--shadow);
  border-bottom: 2px solid var(--shadow);
}

.msxp .topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  margin-bottom: 6px;
  background: var(--bg);
  border-top: 2px solid var(--shadow);
  border-left: 2px solid var(--shadow);
  border-right: 2px solid var(--highlight);
  border-bottom: 2px solid var(--highlight);
  gap: 8px;
}
.msxp .topbar { gap: 10px; }          /* Abstand zwischen links/face/rechts */
.msxp .digits { margin: 0 10px; }     /* optional: etwas mehr “XP spacing” */


.msxp .digits {
  display: flex;
  background: #000;
  padding: 2px;
  border-top: 2px solid var(--deep);
  border-left: 1px solid var(--deep);
  border-right: 1px solid #d0d0d0;
  border-bottom: 2px solid #d0d0d0;
}
.msxp .digit {
  width: 13px;
  height: 23px;
  background-image: url("./assets/bmp_420.png");
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.msxp .face {
  width: 26px;
  height: 26px;
  padding: 1px;
  background: var(--bg);
  border-top: 0px solid var(--highlight);
  border-left: 0px solid var(--highlight);
  border-right: 0px solid var(--shadow);
  border-bottom: 0px solid var(--shadow);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.msxp .face:active {
  border-top: 0px solid var(--shadow);
  border-left: 0px solid var(--shadow);
  border-right: 0px solid var(--highlight);
  border-bottom: 0px solid var(--highlight);
}
.msxp .face-sprite{
  width: 24px;
  height: 24px;
  background-image: url("/Minesweeper/assets/bmp_430.png");
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.msxp .board-wrap {
  padding: 6px;
  background: var(--bg);
  border-top: 2px solid var(--shadow);
  border-left: 2px solid var(--shadow);
  border-right: 2px solid var(--highlight);
  border-bottom: 2px solid var(--highlight);
  display: flex;
  justify-content: center;
}

.msxp .topbar,
.msxp .board-wrap{
  width: calc(var(--cols) * 16px + 12px); /* 12px = board-wrap padding links+rechts (6+6) */
}


.msxp .board {
  display: grid;
  gap: 0;
}

.msxp .cell {
  width: 16px;
  height: 16px;
  background-image: url("/Minesweeper/assets/tiles_strip.png");
  background-repeat: no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
}

/* Unopened is sprite index 0 */
.msxp .cell.unopened { background-position: 0px 0px; }

/* Pressed look (flat) */
.msxp .cell.pressed {
  background-image: none;
  background: #c0c0c0;
  border: 1px solid #808080;
}

/* Opened */
.msxp .cell.opened {
  background-image: none;
  background: #c0c0c0;
  border: 1px solid #808080;
  cursor: default;
}

/* Overlay sprites for flags, mines, numbers, etc. */
.msxp .cell.sprite {
  background-image: url("/Minesweeper/assets/tiles_strip.png");
}
.msxp .menu {
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:6px;
}
.msxp select {
  font: inherit;
  font-size: 15px;
  padding: 2px 1px;
}
.msxp .hint {
  font-size: 12px;
  color: #222;
  margin-top: 6px;
}
label {
  cursor: url("https://hirngespinst.neocities.org/Cursor/default.cur"), auto !important;
}

/* beam for all texty inputs (but not checkbox/radio) + textarea */
input:not([type="checkbox"]):not([type="radio"]),
textarea {
  cursor: url("https://hirngespinst.neocities.org/Cursor/beam.cur"), text !important;
}

/* checkbox should feel clickable */
label.inlineCheck { 
  cursor: url("https://hirngespinst.neocities.org/Cursor/hover.cur"), pointer !important; 
}
label.inlineCheck input { 
  cursor: url("https://hirngespinst.neocities.org/Cursor/default.cur"), auto !important; 
}
/* --- Custom cursors for Minesweeper --- */
.msxp, .msxp * {
  cursor: url("https://hirngespinst.neocities.org/Cursor/default.cur"), auto !important;
}

.msxp .cell,
.msxp .face,
.msxp select {
  cursor: url("https://hirngespinst.neocities.org/Cursor/hover.cur"), pointer !important;
}

/* wenn du für "geöffnete" Felder kein Pointer willst: */
.msxp .cell.opened {
  cursor: url("https://hirngespinst.neocities.org/Cursor/default.cur"), auto !important;
}
/* ===== WIN OVERLAY ===== */

.msxp .board-wrap{
  position: relative; /* wichtig für Overlay positioning */
}

.msxp .win-overlay{
  position: absolute;
  inset: 0;
  background: rgba(160,160,160,0.85);
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: Tahoma, Verdana, sans-serif;
  font-weight: bold;
  font-size: 28px;
  letter-spacing: 2px;
  color: #222;

  text-shadow: 1px 1px 0 #fff;

  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.msxp .win-overlay.show{
  opacity: 1;
}
/* ===== CONFETTI ===== */

.msxp .confetti-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index: 99999;
}

.msxp .confetti{
  position:absolute;
  width:6px;
  height:10px;
  opacity:.9;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall{
  0%{
    transform: translateY(-20px) rotate(0deg);
  }
  100%{
    transform: translateY(260px) rotate(720deg);
  }
}