/*
 * Two alternative skins, switched with the buttons in the top bar.
 *   classic: Windows 98 style window, bevelled grey cells, red LED counters, smiley button
 *   sky:     bright sky-blue hero with a faint repeated wordmark, pale page, chunky rounded shapes
 * The default (modern) skin lives in style.css. Light and dark only apply to modern.
 */

/* ------------------------------------------------------------------ classic */

:root[data-skin="classic"] {
  --bg: #008080;
  --surface: #c0c0c0;
  --ink: #000000;
  --muted: #404040;
  --line: #808080;
  --pill: #c0c0c0;
  --pill-ink: #000000;
  --solid: #000080;
  --solid-ink: #ffffff;
  --focus: #000080;
  --cell-unknown: #c0c0c0;
  --cell-unknown-edge: #7b7b7b;
  --cell-open: #c0c0c0;
  --n1: #0000ff;
  --n2: #008000;
  --n3: #ff0000;
  --n4: #000080;
  --n5: #800000;
  --n6: #008080;
  --n7: #000000;
  --n8: #808080;
  --btn-h: 30px;
}

:root[data-skin="classic"] body { font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif; font-size: 14px; line-height: 1.5; }
:root[data-skin="classic"] a { color: #000080; }

/* raised and sunken bevels */
:root[data-skin="classic"] .pill,
:root[data-skin="classic"] button,
:root[data-skin="classic"] .win-buttons span {
  border-radius: 0; background: #c0c0c0; color: #000;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
/* pressed look for the palette tile */
:root[data-skin="classic"] .tile[aria-checked="true"] {
  background: #c0c0c0; color: #000; font-weight: 700;
  box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf;
  outline: 1px dotted #000; outline-offset: -5px;
}
:root[data-skin="classic"] button:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px #808080; }
:root[data-skin="classic"] button.primary { background: #c0c0c0; color: #000; font-weight: 700; padding: 0 26px; }
:root[data-skin="classic"] .pill { font-size: 13px; padding: 0 12px; }

:root[data-skin="classic"] .topbar .wrap { padding-top: 2px; }

:root[data-skin="classic"] h1 { color: #fff; font-size: 26px; font-weight: 700; letter-spacing: 0; margin: 20px 0 6px; text-shadow: 1px 1px #000; }
:root[data-skin="classic"] .lead { color: #fff; font-size: 15px; text-shadow: 1px 1px #000; }

/* the window */
:root[data-skin="classic"] .tool {
  border-radius: 0; padding: 3px 3px 10px; max-width: 760px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff, 4px 4px 0 rgba(0, 0, 0, 0.35);
}
:root[data-skin="classic"] .win-title {
  display: flex; align-items: center; justify-content: space-between; padding: 3px 4px; color: #fff; font-weight: 700;
  background: linear-gradient(90deg, #000080, #1084d0); font-size: 14px;
}
:root[data-skin="classic"] .win-name { display: inline-flex; align-items: center; gap: 6px; }
:root[data-skin="classic"] .win-icon {
  width: 14px; height: 14px; background: radial-gradient(circle, #fff 0 3px, #000 3.5px 5px, transparent 5.5px);
  border-radius: 50%; box-shadow: 0 0 0 1px #fff;
}
:root[data-skin="classic"] .win-buttons { display: inline-flex; gap: 3px; }
:root[data-skin="classic"] .win-buttons span { width: 18px; height: 16px; display: grid; place-items: center; font-size: 11px; line-height: 1; font-weight: 700; }
:root[data-skin="classic"] .win-menu { display: block; padding: 4px 8px 2px; }
:root[data-skin="classic"] .win-menu a { color: #000; text-decoration: none; padding: 2px 8px; }
:root[data-skin="classic"] .win-menu a:hover { background: #000080; color: #fff; }

:root[data-skin="classic"] .tool > .scan,
:root[data-skin="classic"] .tool > .scan-panel,
:root[data-skin="classic"] .tool > .controls,
:root[data-skin="classic"] .tool > .palette,
:root[data-skin="classic"] .tool > .hint,
:root[data-skin="classic"] .tool > .result,
:root[data-skin="classic"] .tool > .board-wrap { margin-left: 10px; margin-right: 10px; }

/* LED counters and the smiley */
:root[data-skin="classic"] .led-row {
  display: flex; align-items: center; justify-content: space-between; margin: 6px 10px 10px; padding: 8px 10px;
  box-shadow: inset 2px 2px #808080, inset -2px -2px #fff;
}
:root[data-skin="classic"] .led { display: inline-flex; gap: 2px; padding: 2px; background: #000; box-shadow: inset 1px 1px #808080, 1px 1px #fff; }
:root[data-skin="classic"] .led svg { width: 21px; height: 38px; display: block; }
:root[data-skin="classic"] .smiley { width: 44px; height: 44px; padding: 0; font-size: 26px; line-height: 1; display: grid; place-items: center; }

:root[data-skin="classic"] .controls { margin-bottom: 10px; }
:root[data-skin="classic"] .field { color: #000; font-size: 13px; }
:root[data-skin="classic"] .field input,
:root[data-skin="classic"] .field select {
  border-radius: 0; background: #fff; color: #000; height: 28px; font: 14px Tahoma, Verdana, sans-serif;
  box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf;
}
:root[data-skin="classic"] button { height: 30px; font-size: 14px; }
:root[data-skin="classic"] .palette .label { color: #000; }
:root[data-skin="classic"] .tile { width: 36px; height: 36px; border-radius: 0; font-size: 18px; }
:root[data-skin="classic"] .tile.t-unknown { background: #c0c0c0; }
:root[data-skin="classic"] .hint { color: #000; }

:root[data-skin="classic"] .board-wrap { border-radius: 0; background: #c0c0c0; padding: 4px; box-shadow: inset 3px 3px #808080, inset -3px -3px #fff; }
:root[data-skin="classic"] .board { gap: 0; }
:root[data-skin="classic"] .cell {
  border-radius: 0; background: #c0c0c0; font-family: Arial, Helvetica, sans-serif; font-weight: 900;
  box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #7b7b7b;
}
:root[data-skin="classic"] .cell.open { background: #c0c0c0; box-shadow: inset 1px 1px 0 #7b7b7b; }
:root[data-skin="classic"] .cell.flag::after,
:root[data-skin="classic"] .cell.res-mine::after {
  width: 74%; height: 74%;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 1.5L2.5 5 9 8.5z' fill='%23ff0000'/%3E%3Crect x='8.6' y='1.5' width='1.2' height='9.5' fill='%23000'/%3E%3Crect x='5.5' y='11' width='7.4' height='1.8' fill='%23000'/%3E%3Crect x='3.5' y='12.8' width='11.4' height='1.8' fill='%23000'/%3E%3C/svg%3E");
}
:root[data-skin="classic"] .cell.res-safe { background: #9be3ad; box-shadow: inset 0 0 0 2px #1a7f37; }
:root[data-skin="classic"] .cell.res-mine { background: #f3a3a3; box-shadow: inset 0 0 0 2px #c00; }
:root[data-skin="classic"] .cell.res-odds { color: #000; font-weight: 700; }

:root[data-skin="classic"] .actions { background: #c0c0c0; border-top: 0; margin: 10px -3px -10px; padding: 8px 12px; box-shadow: inset 0 2px #808080, inset 0 3px #fff; border-radius: 0; }
:root[data-skin="classic"] .status { color: #000; }
:root[data-skin="classic"] .result { border-radius: 0; background: #fff; color: #000; border-left-width: 6px; box-shadow: inset 1px 1px #808080; }
:root[data-skin="classic"] .result .headline { font-size: 16px; letter-spacing: 0; }
:root[data-skin="classic"] .legend { color: #000; }

/* long text sits in a white document panel so it stays readable on the teal desktop */
:root[data-skin="classic"] main > .prose {
  max-width: 760px; margin-top: 18px; padding: 6px 18px 18px; background: #fff; color: #000;
  box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf;
}
:root[data-skin="classic"] main > .prose h2 { font-size: 18px; color: #000080; margin-top: 26px; letter-spacing: 0; }
:root[data-skin="classic"] .site-footer { border-top: 0; color: #fff; }
:root[data-skin="classic"] .site-footer a { color: #fff; }
:root[data-skin="classic"] .wrap { max-width: 800px; }

/* ---------------------------------------------------------------------- sky */

:root[data-skin="sky"] {
  --bg: #eff9fb;
  --surface: #ffffff;
  --ink: #173344;
  --muted: #4a6b7c;
  --line: #d3ecf5;
  --pill: #ffffff;
  --pill-ink: #0a6fae;
  --solid: #0a6fae;
  --solid-ink: #ffffff;
  --focus: #0a6fae;
  --cell-unknown: #b9e3f8;
  --cell-unknown-edge: #8fcdee;
  --cell-open: #ffffff;
  --n1: #0a6fae;
  --n2: #178a52;
  --n3: #d83a4f;
  --n4: #5a4bd1;
  --n5: #c7650f;
  --n6: #0d8a98;
  --n7: #264653;
  --n8: #6b7f8c;
  --sky: #0f86d0;
  --btn-h: 44px;
}

:root[data-skin="sky"] body { font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Trebuchet MS", system-ui, sans-serif; }
:root[data-skin="sky"] a { color: #0a6fae; }

:root[data-skin="sky"] .topbar { background: var(--sky); padding-bottom: 6px; }
:root[data-skin="sky"] .pill { border-radius: 999px; background: #fff; color: #0a6fae; font-weight: 700; padding: 0 18px; }
:root[data-skin="sky"] .pill.brand { padding-left: 14px; }

/* full-width blue hero with a faint repeated wordmark behind the title */
:root[data-skin="sky"] .hero {
  background: var(--sky); box-shadow: 0 0 0 100vmax var(--sky); clip-path: inset(0 -100vmax); padding: 6px 0 40px; overflow: hidden;
}
:root[data-skin="sky"] .hero-bg {
  display: flex; flex-direction: column; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  user-select: none; -webkit-user-select: none;
  /* keep the pattern as a quiet ornament on the right; the title and lead on the left stay clean */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, #000 75%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, #000 75%);
}
:root[data-skin="sky"] .hero-bg span {
  display: block; white-space: nowrap; color: rgba(255, 255, 255, 0.15); font-weight: 800; text-transform: lowercase;
  font-size: clamp(56px, 11vw, 104px); line-height: 0.95; letter-spacing: -0.03em; margin-left: -4px;
}
:root[data-skin="sky"] h1 { position: relative; z-index: 1; color: #fff; font-weight: 800; letter-spacing: -0.03em; margin-top: 18px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); }
:root[data-skin="sky"] .lead { position: relative; z-index: 1; color: #fff; font-weight: 600; font-size: 19px; }

:root[data-skin="sky"] .tool { border-radius: 26px; margin-top: 26px; padding: 22px; box-shadow: 0 14px 34px rgba(15, 134, 208, 0.16); }
:root[data-skin="sky"] .field { color: #4a6b7c; }
:root[data-skin="sky"] .field input,
:root[data-skin="sky"] .field select { border-radius: 14px; background: #e6f5fc; color: #0a4e7a; font-weight: 600; height: 44px; }
:root[data-skin="sky"] button { border-radius: 999px; background: #e1f3fb; color: #0a6fae; font-weight: 700; height: 44px; padding: 0 18px; }
:root[data-skin="sky"] button.primary { background: #0a6fae; color: #fff; padding: 0 34px; box-shadow: 0 4px 0 #074e7b; }
:root[data-skin="sky"] button.primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #074e7b; }

:root[data-skin="sky"] .tile { width: 44px; height: 44px; border-radius: 14px; }
:root[data-skin="sky"] .tile[aria-checked="true"] { outline: 3px solid #0a6fae; outline-offset: 2px; }
:root[data-skin="sky"] .tile.t-unknown { background: var(--cell-unknown); box-shadow: inset 0 -4px 0 rgba(15, 134, 208, 0.25); }
:root[data-skin="sky"] .board-wrap { border-radius: 20px; background: #eaf7fd; padding: 10px; }
:root[data-skin="sky"] .board { gap: 3px; }
:root[data-skin="sky"] .cell {
  border-radius: 9px; background: var(--cell-unknown); box-shadow: inset 0 -4px 0 rgba(15, 134, 208, 0.25); font-weight: 800;
}
:root[data-skin="sky"] .cell.open { background: #fff; box-shadow: inset 0 0 0 2px #dff1fa; }
:root[data-skin="sky"] .cell.res-safe { background: var(--safe-bg); box-shadow: inset 0 0 0 3px var(--safe); }
:root[data-skin="sky"] .cell.res-mine { background: var(--mine-bg); box-shadow: inset 0 0 0 3px var(--mine); }
:root[data-skin="sky"] .cell.res-odds { color: #173344; }

:root[data-skin="sky"] .actions { border-radius: 0 0 26px 26px; border-top: 1px solid #e1f3fb; margin: 14px -22px -22px; padding: 12px 22px; }
:root[data-skin="sky"] .result { border-radius: 16px; background: #eaf7fd; border-left-width: 6px; }
:root[data-skin="sky"] .result .headline { color: #0a6fae; }

:root[data-skin="sky"] h2 { color: #0a6fae; font-weight: 800; letter-spacing: -0.02em; }
:root[data-skin="sky"] .prose { color: #173344; }
:root[data-skin="sky"] .site-footer { border-top-color: #d3ecf5; }

@media (max-width: 560px) {
  :root[data-skin="sky"] .tool { padding: 16px; border-radius: 22px; }
  :root[data-skin="sky"] .actions { margin: 14px -16px -16px; padding: 10px 16px; border-radius: 0 0 22px 22px; }
  :root[data-skin="sky"] .tile { width: 38px; height: 38px; }
  :root[data-skin="classic"] .led svg { width: 17px; height: 31px; }
}

/* sky: every text block gets its own full-width colour band, like the reference site.
   The shadow trick (same as the hero) paints edge to edge without adding sideways scroll. */
:root[data-skin="sky"] .prose { max-width: none; }
:root[data-skin="sky"] .band { padding: 44px 0; clip-path: inset(0 -100vmax); }
:root[data-skin="sky"] .band > * { max-width: 70ch; }
:root[data-skin="sky"] .band h2 { margin-top: 0; }
:root[data-skin="sky"] .band-1 { background: #b6c814; box-shadow: 0 0 0 100vmax #b6c814; color: #232a04; }
:root[data-skin="sky"] .band-2 { background: #f08a33; box-shadow: 0 0 0 100vmax #f08a33; color: #3b1604; }
:root[data-skin="sky"] .band-3 { background: #24c0fe; box-shadow: 0 0 0 100vmax #24c0fe; color: #06324a; }
:root[data-skin="sky"] .band-4 { background: #eff9fb; box-shadow: 0 0 0 100vmax #eff9fb; color: #173344; }
:root[data-skin="sky"] .band-1 h2, :root[data-skin="sky"] .band-1 h3, :root[data-skin="sky"] .band-1 a { color: #232a04; }
:root[data-skin="sky"] .band-2 h2, :root[data-skin="sky"] .band-2 h3, :root[data-skin="sky"] .band-2 a { color: #3b1604; }
:root[data-skin="sky"] .band-3 h2, :root[data-skin="sky"] .band-3 h3, :root[data-skin="sky"] .band-3 a { color: #06324a; }
:root[data-skin="sky"] .band-4 h2, :root[data-skin="sky"] .band-4 h3, :root[data-skin="sky"] .band-4 a { color: #0a6fae; }
:root[data-skin="sky"] .site-footer { margin-top: 0; border-top: 0; }

/* ---- style menu per skin ---- */
:root[data-skin="classic"] .style-trigger { padding: 0 12px; font-size: 13px; }
:root[data-skin="classic"] .style-pop {
  border-radius: 0; background: #c0c0c0; padding: 3px; min-width: 200px;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff, 3px 3px 0 rgba(0, 0, 0, 0.35);
}
:root[data-skin="classic"] .style-pop button { border-radius: 0; background: transparent; box-shadow: none; color: #000; font-size: 13px; }
:root[data-skin="classic"] .style-pop button:hover,
:root[data-skin="classic"] .style-pop button:focus-visible { background: #000080; color: #fff; outline: 0; }
:root[data-skin="classic"] .style-pop button[aria-checked="true"]::before { background: currentColor; border-radius: 0; width: 6px; height: 6px; margin-top: -3px; left: 12px; }
:root[data-skin="classic"] .style-sub { border-left-color: #808080; }

:root[data-skin="sky"] .style-trigger { border-radius: 999px; background: #fff; color: #0a6fae; font-weight: 700; padding: 0 18px; }
:root[data-skin="sky"] .style-pop { border-radius: 20px; padding: 8px; box-shadow: 0 14px 34px rgba(7, 78, 123, 0.28); }
:root[data-skin="sky"] .style-pop button { border-radius: 12px; background: transparent; color: #0a4e7a; font-weight: 700; padding-left: 32px; }
:root[data-skin="sky"] .style-pop button:hover,
:root[data-skin="sky"] .style-pop button:focus-visible { background: #e1f3fb; }
:root[data-skin="sky"] .style-pop button[aria-checked="true"]::before { background: #0a6fae; }
:root[data-skin="sky"] .style-sub { border-left-color: #cfeaf7; }

:root[data-skin="classic"] .scan-hint, :root[data-skin="classic"] .scan-note { color: #000; }
:root[data-skin="classic"] .scan-panel { border-radius: 0; background: #c0c0c0; box-shadow: inset 2px 2px #808080, inset -2px -2px #fff; }
:root[data-skin="sky"] .scan-panel { border-radius: 16px; background: #eaf7fd; }
:root[data-skin="sky"] .scan-panel canvas { border-radius: 10px; }