* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
button {
  font: inherit;
}
body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  font-family: Tahoma, Arial, sans-serif;
}
.monitor {
  position: relative;
  width: min(1120px, calc(100vw - 24px), calc((100svh - 24px) * 1.5));
  aspect-ratio: 3/2;
  background: url("../assets/aim-monitor.png") center/100% 100% no-repeat;
  filter: drop-shadow(0 18px 25px #392d1f35);
}
.desktop {
  position: absolute;
  inset: 10.35% 12.7% 18.8%;
  overflow: hidden;
  background: #5b8ecc url("../assets/bliss.jpg") center/cover no-repeat;
  border-radius: 1.3%;
  box-shadow: inset 0 0 25px #001a3d99;
}
.desktop-shortcuts {
  position: absolute;
  z-index: 2;
  left: 17px;
  top: 16px;
  display: grid;
  gap: 10px;
}
.desktop-shortcuts a,
.desktop-shortcuts > button {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 65px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px #26313d;
  font-size: 10px;
  line-height: 1.2;
}
.shortcut-picture {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
}
.shortcut-picture img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.aim-picture img {
  filter: drop-shadow(1px 2px 1px #111);
}
.tom-picture {
  overflow: hidden;
  border: 2px solid #fff;
  background: #ccc;
  box-shadow: 1px 1px #111;
}
.tom-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.computer-picture {
  font-size: 29px;
  text-shadow: none;
}
.solitaire-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(1px 2px 1px #1118);
}
.mine-icon {
  display: grid;
  width: 36px;
  height: 36px;
  grid-template-columns: repeat(3, 1fr);
  transform: perspective(50px) rotateX(3deg) rotateY(-4deg);
  box-shadow: 2px 3px 4px #1119;
}
.mine-icon i {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid #888;
  background: #c0c0c0;
  color: #0000;
  font:
    700 11px "Courier New",
    monospace;
  text-shadow: none;
}
.mine-icon i:nth-child(1),
.mine-icon i:nth-child(5),
.mine-icon i:nth-child(7),
.mine-icon i:nth-child(8) {
  color: #0000;
  border-color: #fff #777 #777 #fff;
}
.mine-icon i:nth-child(1),
.mine-icon i:nth-child(5),
.mine-icon i:nth-child(7) {
  color: #0000;
}
.mine-icon i:nth-child(1)::after,
.mine-icon i:nth-child(5)::after,
.mine-icon i:nth-child(7)::after {
  content: "1";
  color: #00e;
  position: absolute;
}
.mine-icon i:nth-child(2)::after {
  content: "3";
  color: red;
  position: absolute;
}
.mine-icon i:nth-child(3)::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #050505;
  box-shadow:
    -4px 0 #050505,
    4px 0 #050505,
    0 -4px #050505,
    0 4px #050505;
}
.active-shortcut {
  cursor: default;
}
.game-window {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 48%;
  width: min(250px, calc(100% - 135px));
  padding: 3px;
  border: 2px solid;
  border-color: #fff #333 #333 #fff;
  background: #c0c0c0;
  box-shadow:
    1px 1px #000,
    6px 9px 20px #13263f77;
  transform: translate(-50%, -50%);
}
.game-window[data-level="intermediate"] {
  width: min(390px, calc(100% - 135px));
}
.game-window[data-level="expert"] {
  width: min(690px, calc(100% - 135px));
}
.titlebar {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 3px 2px 6px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.titlebar > span,
.task-name {
  display: flex;
  align-items: center;
  gap: 5px;
}
.titlebar a {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 2px outset #eee;
  background: #c0c0c0;
  color: #111;
  text-decoration: none;
  font: 700 17px/1 Arial;
}
.tiny-mine {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #080808;
  box-shadow:
    -5px 0 #080808,
    5px 0 #080808,
    0 -5px #080808,
    0 5px #080808;
  transform: scale(0.65);
}
.menubar {
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  border-bottom: 1px solid #888;
}
.menubar > button,
.menu-wrap > button {
  padding: 2px 7px;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 12px;
}
.menu-wrap {
  position: relative;
}
.game-menu {
  position: absolute;
  z-index: 9;
  left: 0;
  top: 22px;
  width: 145px;
  padding: 3px;
  border: 2px outset #eee;
  background: #c0c0c0;
  box-shadow: 2px 2px #111;
}
.game-menu button {
  position: relative;
  display: block;
  width: 100%;
  padding: 5px 7px 5px 24px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 11px;
}
.game-menu button:hover,
.game-menu button:focus {
  background: #000080;
  color: #fff;
}
.game-menu button.selected::before {
  content: "✓";
  position: absolute;
  left: 7px;
}
.game-menu hr {
  margin: 2px;
  border: 0;
  border-top: 1px solid #777;
  border-bottom: 1px solid #fff;
}
.game-menu kbd {
  float: right;
  font: inherit;
}
.game-shell {
  margin: 7px;
  padding: 6px;
  border: 3px solid;
  border-color: #777 #fff #fff #777;
  background: #c0c0c0;
}
.scorebar {
  height: 48px;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  margin-bottom: 7px;
  padding: 5px;
  border: 3px solid;
  border-color: #777 #fff #fff #777;
}
.scorebar output {
  display: grid;
  place-items: center;
  height: 32px;
  border: 2px inset #aaa;
  background: #160000;
  color: #f00;
  font:
    700 27px/1 "Courier New",
    monospace;
  letter-spacing: -3px;
  text-shadow: 0 0 5px #f00;
}
.scorebar output:last-child {
  justify-self: end;
  width: 60px;
}
.scorebar output:first-child {
  width: 60px;
}
.scorebar > button {
  justify-self: center;
  width: 32px;
  height: 32px;
  padding: 3px;
  border: 3px outset #eee;
  background: #c0c0c0;
}
.scorebar > button:active {
  border-style: inset;
}
.pixel-face {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #765e00;
  border-radius: 50%;
  background: #ffeb25;
  box-shadow: inset -2px -2px #dab900;
}
.face-eyes {
  position: absolute;
  inset: 0;
}
.face-eyes::before,
.face-eyes::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 3px;
  height: 4px;
  background: #111;
}
.face-eyes::after {
  left: 12px;
}
.face-mouth {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 4px;
  width: 9px;
  height: 4px;
  border-bottom: 2px solid #111;
  border-radius: 0 0 8px 8px;
}
#face[data-face="surprised"] .face-mouth {
  left: 8px;
  width: 4px;
  height: 4px;
  border: 1px solid #111;
  border-radius: 50%;
}
#face[data-face="dead"] .face-eyes::before,
#face[data-face="dead"] .face-eyes::after {
  top: 5px;
  width: 5px;
  height: 5px;
  background: linear-gradient(45deg, transparent 38%, #111 40% 60%, transparent 62%), linear-gradient(-45deg, transparent 38%, #111 40% 60%, transparent 62%);
}
#face[data-face="dead"] .face-eyes::before {
  left: 3px;
}
#face[data-face="dead"] .face-eyes::after {
  left: 12px;
}
#face[data-face="dead"] .face-mouth {
  bottom: 3px;
  border-top: 2px solid #111;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
#face[data-face="cool"] .face-eyes::before,
#face[data-face="cool"] .face-eyes::after {
  left: 3px;
  top: 5px;
  width: 6px;
  height: 4px;
  background: #111;
}
#face[data-face="cool"] .face-eyes::after {
  left: 11px;
}
#face[data-face="cool"] .face-eyes {
  background: linear-gradient(#111, #111) 8px 7px / 4px 2px no-repeat;
}
.board {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  border: 3px solid;
  border-color: #777 #fff #fff #777;
  background: #999;
  touch-action: manipulation;
}
.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 2px outset #eee;
  background: #c0c0c0;
  color: #111;
  font: 700 clamp(7px, 1.45vw, 17px) / 1 Arial;
  user-select: none;
}
.cell:active:not(.open) {
  border: 1px solid #999;
}
.cell.open {
  border: 1px solid #888;
  background: #c0c0c0;
}
.cell[data-count="1"] {
  color: #0000f5;
}
.cell[data-count="2"] {
  color: #087a08;
}
.cell[data-count="3"] {
  color: #f00000;
}
.cell[data-count="4"] {
  color: #00007d;
}
.cell[data-count="5"] {
  color: #7d0000;
}
.cell[data-count="6"] {
  color: #007d7d;
}
.cell[data-count="7"] {
  color: #111;
}
.cell[data-count="8"] {
  color: #777;
}
.cell.mine::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: #050505;
  box-shadow:
    -0.32em 0 #050505,
    0.32em 0 #050505,
    0 -0.32em #050505,
    0 0.32em #050505;
}
.cell.flagged::before {
  content: "";
  position: absolute;
  left: 48%;
  top: 22%;
  width: 3px;
  height: 56%;
  background: #111;
}
.cell.flagged::after {
  content: "";
  position: absolute;
  left: 26%;
  top: 18%;
  border-top: 6px solid transparent;
  border-right: 11px solid #e60000;
  border-bottom: 6px solid transparent;
}
.cell.wrong::after {
  content: "×";
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  color: #e00000;
  font-size: 18px;
}
.taskbar {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  box-shadow: inset 0 -1px #777;
  font-size: 12px;
}
.start {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 25px;
  padding: 2px 8px;
  color: #111;
  text-decoration: none;
  font-weight: 700;
  border: 2px outset #eee;
}
.start b {
  color: #167b30;
  font-size: 17px;
}
.task-name {
  padding: 5px 12px;
  border: 2px inset #eee;
}
.taskbar time {
  margin-left: auto;
  padding: 5px 8px;
  border: 2px inset #eee;
}
.glass {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    #fff1,
    transparent 28%,
    transparent 72%,
    #fff08
  );
  box-shadow: inset 0 0 25px #0008;
}
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  body { display: block; overflow: auto; }
  .monitor { width: 100%; min-height: 100svh; aspect-ratio: auto; background: none; filter: none; }
  .desktop { position: relative; inset: auto; min-height: 100svh; border-radius: 0; box-shadow: none; overflow: visible; padding: 8px 8px 56px; }
  .desktop-shortcuts { display: none; }
  .game-window { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; }
  .titlebar { height: 44px; font-size: 13px; padding: 2px 3px 2px 8px; }
  .titlebar a { width: 40px; height: 40px; font-size: 22px; }
  .menubar { height: 44px; font-size: 13px; }
  .menubar > button, .menu-wrap > button { min-height: 44px; padding: 4px 12px; font-size: 13px; }
  .game-menu { top: 42px; }
  .game-menu button { min-height: 44px; font-size: 13px; }
  .taskbar { position: fixed; height: 48px; font-size: 12px; }
  .start { height: 44px; }
  .glass { display: none; }

  .game-window, .game-window[data-level="intermediate"], .game-window[data-level="expert"] { width: min(100%, 470px); }
  .game-window[data-level="expert"] { width: 100%; }
  .game-shell { margin: 6px 0; padding: 4px; overflow: auto; }
  .board { min-width: calc(var(--columns) * 28px + 6px); grid-template-columns: repeat(var(--columns), minmax(28px, 1fr)); }
  .cell { font-size: 18px; }
  .scorebar { height: 56px; }
  .scorebar > button { width: 44px; height: 44px; display: grid; place-items: center; }
}

img[src$="solitaire-logo.png"] { clip-path: polygon(23% 18%, 29% 9%, 43% 6%, 69% 6%, 74% 10%, 74% 28%, 80% 34%, 78% 38%, 74% 38%, 74% 79%, 36% 88%, 27% 80%, 27% 40%, 21% 39%, 18% 35%, 26% 26%); }
#flag-mode { margin-left:auto; min-width:36px; font-size:19px; color:#a62218; }
#flag-mode[aria-pressed=true] { background:#e5d7a1; box-shadow:inset 1px 1px #777,inset -1px -1px #fff; }
.cell { background:linear-gradient(135deg,#d7d7d7,#b9b9b9); }
.cell.open { background:#c6c6c6; }
.cell:focus-visible { z-index:1; outline:2px solid #000080; outline-offset:-3px; }
.board.flag-mode { cursor:crosshair; }
.scorebar { background:linear-gradient(#b1b1b1,#c5c5c5); }
@media(hover:hover) { .cell:not(.open):hover { filter:brightness(1.1); } }
@media (max-height:500px) and (min-width:651px) {
  .desktop { padding-top:0; }
  .game-window { display:grid; grid-template-columns:145px 1fr; }
  .game-window > .titlebar,.game-window > .menubar { grid-column:1; }
  .game-shell { grid-column:2; grid-row:1 / span 3; max-height:calc(100dvh - 112px); margin:0; }
  .scorebar { position:sticky; top:0; z-index:2; }
}
@media (max-height:500px) and (min-width:651px) {
  .game-window .titlebar { font-size:11px; }
  .game-shell { max-height:calc(100dvh - 60px); }
  .board { min-width:calc(var(--columns) * 24px + 6px); grid-template-columns:repeat(var(--columns),24px); }
  .cell { width:24px; height:24px; }
}