* {
  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: 13px;
  top: 11px;
  display: grid;
  gap: 4px;
}
.desktop-shortcuts a,
.desktop-shortcuts > button {
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 61px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px #26313d;
  font-size: 9px;
  line-height: 1.15;
}
.shortcut-picture {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
}
.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;
}
.solitaire-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(1px 2px 1px #1118);
}
.computer-picture {
  font-size: 27px;
  text-shadow: none;
}
.shortcut-mine {
  display: grid;
  width: 31px;
  height: 31px;
  grid-template-columns: repeat(3, 1fr);
  background: #999;
  box-shadow: 2px 3px 4px #1119;
  transform: perspective(50px) rotateX(3deg) rotateY(-4deg);
}
.shortcut-mine i {
  position: relative;
  border: 1px solid #888;
  background: #c0c0c0;
}
.shortcut-mine i:nth-child(1)::after,
.shortcut-mine i:nth-child(5)::after,
.shortcut-mine i:nth-child(7)::after {
  content: "1";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #0000ef;
  font:
    700 10px/1 "Courier New",
    monospace;
  text-shadow: none;
}
.shortcut-mine i:nth-child(2)::after {
  content: "3";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ef0000;
  font:
    700 10px/1 "Courier New",
    monospace;
  text-shadow: none;
}
.shortcut-mine i:nth-child(3)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #050505;
  box-shadow:
    -3px 0 #050505,
    3px 0 #050505,
    0 -3px #050505,
    0 3px #050505;
  transform: translate(-50%, -50%);
}
.active-shortcut {
  cursor: default;
}
.game-window {
  position: absolute;
  z-index: 4;
  left: 52%;
  top: 48%;
  width: min(690px, calc(100% - 95px));
  height: min(445px, calc(100% - 47px));
  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%);
}
.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 img,
.task-name img {
  width: 14px;
  height: 14px;
  object-fit: cover;
}
.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;
}
.menubar {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 5px;
  border-bottom: 1px solid #888;
  font-size: 12px;
}
.menu-wrap {
  position: relative;
}
.menu-wrap > button,
.menubar > span:not(.menu-wrap) {
  padding: 2px 7px;
  border: 0;
  background: transparent;
  color: #111;
}
.game-menu {
  position: absolute;
  z-index: 9;
  left: 0;
  top: 22px;
  width: 130px;
  padding: 3px;
  border: 2px outset #eee;
  background: #c0c0c0;
  box-shadow: 2px 2px #111;
}
.game-menu button {
  display: block;
  width: 100%;
  padding: 5px 7px 5px 20px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 11px;
}
.game-menu button:hover,
.game-menu button:focus {
  background: #000080;
  color: #fff;
}
.game-menu kbd {
  float: right;
  font: inherit;
}
.table {
  --card-width: clamp(42px, 7.1vw, 68px);
  position: relative;
  height: calc(100% - 75px);
  padding: 12px 14px;
  overflow: hidden;
  background: #008344;
  box-shadow: inset 0 0 22px #003d2166;
}
.top-row,
.tableau {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(4px, 1vw, 13px);
}
.top-row {
  height: calc(var(--card-width) * 1.38);
}
.top-gap {
  grid-column: span 1;
}
.pile {
  position: relative;
  width: var(--card-width);
  min-width: 0;
  aspect-ratio: 0.72;
  justify-self: center;
  border-radius: 3px;
}
.stock,
.foundation:empty {
  border: 1px solid #005b30;
  box-shadow: inset 1px 1px #00a958;
}
.stock {
  padding: 0;
  cursor: pointer;
}
.stock:not(.empty),
.card.face-down {
  border: 2px solid #fff;
  background-color: #1333a5;
  background-image:
    radial-gradient(#fff 0.7px, transparent 0.8px),
    radial-gradient(#ee2222 0.7px, transparent 0.8px);
  background-position:
    0 0,
    3px 3px;
  background-size: 6px 6px;
  box-shadow: 1px 1px 2px #002e18aa;
}
.stock.empty {
  background: transparent;
}
.foundation:empty::after {
  content: attr(data-suit);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #006b39;
  font:
    42px/1 Georgia,
    serif;
}
.tableau {
  height: calc(100% - var(--card-width) * 1.38);
  padding-top: 10px;
}
.tableau-pile {
  height: 100%;
}
.card {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  aspect-ratio: 0.72;
  padding: 0;
  border-radius: 3px;
  cursor: pointer;
}
.tableau-pile .card {
  top: var(--card-offset);
}
.card.face-up {
  border: 1px solid #333;
  background: #fff;
  box-shadow: 1px 1px 2px #003b22aa;
}
.card.selected {
  outline: 3px dotted #ffe900;
  outline-offset: -4px;
  filter: brightness(0.88);
}
.card.red {
  color: #df0000;
}
.card.black {
  color: #050505;
}
.corner {
  position: absolute;
  left: 4px;
  top: 3px;
  display: grid;
  justify-items: center;
  font:
    700 clamp(9px, 1.3vw, 15px) / 0.9 "Times New Roman",
    serif;
}
.corner i {
  font-style: normal;
}
.suit {
  position: absolute;
  left: 50%;
  top: 50%;
  font:
    clamp(22px, 3.2vw, 37px) / 1 Georgia,
    serif;
  transform: translate(-50%, -50%);
}
.royal {
  position: absolute;
  right: 5px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 44%;
  height: 52%;
  border: 1px solid currentColor;
  background: repeating-linear-gradient(45deg, #f0c832 0 3px, #fff 3px 6px);
  color: #111;
  font:
    700 clamp(13px, 2vw, 23px) / 1 Georgia,
    serif;
}
.statusbar {
  height: 23px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 3px 7px;
  border-top: 2px inset #eee;
  background: #fff;
  font:
    11px/1.3 "Courier New",
    monospace;
}
.win {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 52%;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 16px 24px;
  border: 3px outset #eee;
  background: #c0c0c0;
  color: #111;
  box-shadow: 5px 8px 18px #002d1dbb;
  transform: translate(-50%, -50%);
}
.win[hidden] {
  display: none;
}
.win button {
  padding: 4px 12px;
  border: 2px outset #eee;
  background: #c0c0c0;
}
.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 { width: 100%; height: max(560px, calc(100svh - 64px)); }
  .table { --card-width: calc((100vw - 56px) / 7); height: calc(100% - 114px); padding: 12px 6px; overflow: auto; }
  .top-row, .tableau { gap: 3px; }
  .tableau { min-height: 350px; }
  .corner { left: 2px; top: 3px; font-size: 12px; }
  .suit { font-size: 23px; }
  .royal { right: 2px; bottom: 3px; font-size: 14px; }
  .statusbar { height: 24px; font-size: 11px; }
}

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%); }
/* Worn green felt, ivory stock and clearer selected-card edges. */
.table { background-color:#087743; background-image:radial-gradient(ellipse at 45% 20%,#24a56b55,transparent 70%),repeating-linear-gradient(25deg,#ffffff04 0 1px,transparent 1px 3px); box-shadow:inset 0 0 40px #002d2680; }
.card.face-up { background:linear-gradient(120deg,#fffef6,#f3efe3); border-color:#d5d0bd; box-shadow:1px 2px 3px #003524aa; }
.card.selected { outline:2px solid #ffe5a0; outline-offset:2px; filter:brightness(1.05); box-shadow:0 0 0 4px #003d32,0 4px 9px #001e1bcc; }
.stock:not(.empty), .card.face-down { background-color:#163d7b; background-image:repeating-linear-gradient(45deg,#ffffff22 0 1px,transparent 1px 4px),repeating-linear-gradient(-45deg,#ffffff18 0 1px,transparent 1px 4px); }
.stock.empty::after { content:'↻'; color:#c7e6cb; font:32px Georgia; }
.statusbar { background:#c0c0c0; }
#undo { border:0; background:transparent; padding:2px 10px; }
#undo:disabled { color:#777; }
.card:focus-visible, .stock:focus-visible { outline:3px solid #ffe59a; outline-offset:1px; }
@media(max-width:700px), (max-width:950px) and (max-height:500px) { #undo { min-height:44px; font-size:13px; } }
@media (max-height:500px) and (min-width:651px) {
  .desktop { padding-top:0; }
  .game-window { height:calc(100dvh - 100px); min-height:260px; }
  .table { --card-width:48px; padding:5px 14px; }
  .top-row,.tableau { justify-content:space-between; }
  .tableau { min-height:160px; }
}
@media (max-height:500px) and (min-width:651px) {
  .game-window { height:calc(100dvh - 48px); }
  .table { --card-width:40px; }
  .tableau-pile .card { top:calc(var(--card-offset) * .55); }
}