/* Windows 95/98 Retro Styling */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;
  background: #c0c0c0;
  font-family: 'MS Sans Serif', sans-serif;
  font-size: 11px;
  overflow: hidden;
}

/* Window Frame */
.window-frame {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  background: #c0c0c0;
  border: 2px outset #c0c0c0;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.title-bar {
  background: linear-gradient(90deg, #0055cc 0%, #3d7bff 100%);
  color: white;
  padding: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 11px;
}

.window-title {
  padding-left: 4px;
}

.window-controls {
  display: flex;
  gap: 2px;
}

.window-control {
  width: 16px;
  height: 14px;
  background: #c0c0c0;
  border: 1px outset #c0c0c0;
  font-size: 8px;
  font-weight: bold;
  color: black;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.window-control:hover {
  background: #d4d0c8;
}

.window-control:active {
  border: 1px inset #c0c0c0;
}

.window-content {
  height: calc(100% - 22px);
  display: flex;
  flex-direction: column;
}

/* Menu Bar */
.menu-bar {
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
  padding: 2px;
  display: flex;
  gap: 8px;
  font-size: 11px;
  position: relative;
}

.menu-item {
  padding: 4px 8px;
  cursor: pointer;
  position: relative;
}

.menu-item:hover {
  background: #316ac5;
  color: white;
}

.menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #c0c0c0;
  border: 1px outset #c0c0c0;
  min-width: 140px;
  z-index: 1000;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.menu-option {
  padding: 4px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.menu-option:hover:not(.disabled) {
  background: #316ac5;
  color: white;
}

.menu-option.disabled {
  color: #808080;
  cursor: default;
}

.menu-dropdown hr {
  margin: 2px 0;
  border: none;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
}

/* Game Board */
.game-board {
  flex: 1;
  background: #008000;
  background-image: 
    radial-gradient(circle at 25% 25%, #008500 0%, #008000 50%),
    radial-gradient(circle at 75% 75%, #007500 0%, #008000 50%);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.top-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  height: 96px;
}

.card-area {
  width: 71px;
  height: 96px;
  position: relative;
}

.flex-1 {
  flex: 1;
}

/* Tableau */
.tableau {
  display: flex;
  gap: 16px;
  height: calc(100% - 120px);
}

.tableau-column {
  width: 71px;
  position: relative;
  height: 100%;
}

/* Cards */
.card {
  width: 71px;
  height: 96px;
  background: white;
  border: 1px solid #000;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s ease;
  position: relative;
  font-family: 'Times New Roman', serif;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.card.face-down {
  background: linear-gradient(45deg, #0066cc 0%, #4d9fff 25%, #0066cc 50%, #4d9fff 75%, #0066cc 100%);
  background-size: 8px 8px;
}

.card-back {
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="71" height="96" viewBox="0 0 71 96"><rect width="71" height="96" fill="%23006bb3"/><circle cx="35.5" cy="20" r="8" fill="%23ffeb3b"/><path d="M20 35 Q35 25 50 35 Q35 45 20 35" fill="%234caf50"/><path d="M15 50 L25 40 L35 50 L45 40 L55 50 L35 70 Z" fill="%23ff9800"/><rect x="10" y="75" width="50" height="15" rx="2" fill="%23795548"/></svg>') center/cover;
  border-radius: 3px;
}

.card.face-up .card-rank {
  position: absolute;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
}

.card.face-up .card-suit {
  position: absolute;
  font-size: 14px;
  line-height: 1;
}

.card.red {
  color: #cc0000;
}

.card.black {
  color: #000000;
}

.card-rank.top {
  top: 2px;
  left: 3px;
}

.card-suit.top {
  top: 12px;
  left: 3px;
}

.card-suit.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}

.card-rank.bottom {
  bottom: 2px;
  right: 3px;
  transform: rotate(180deg);
}

.card-suit.bottom {
  bottom: 12px;
  right: 3px;
  transform: rotate(180deg);
}

/* Card Slots */
.card-slot {
  width: 71px;
  height: 96px;
  border: 2px dashed #004400;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
}

.card-slot.empty.foundation-0:after,
.card-slot.empty.foundation-1:after,
.card-slot.empty.foundation-2:after,
.card-slot.empty.foundation-3:after {
  content: attr(data-suit);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: #004400;
  opacity: 0.3;
}

/* Status Bar */
.status-bar {
  background: #c0c0c0;
  border-top: 1px solid #ffffff;
  border-bottom: 1px inset #808080;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  height: 20px;
  align-items: center;
}

.status-item {
  border: 1px inset #c0c0c0;
  padding: 1px 6px;
  background: #ffffff;
  color: #000000;
}

/* Animations */
@keyframes cardFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}

.card.flipping {
  animation: cardFlip 0.3s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 820px) {
  body {
    padding: 10px;
  }
  
  .window-frame {
    width: 100%;
    height: calc(100vh - 20px);
    max-width: 800px;
  }
}

@media (max-width: 600px) {
  .tableau {
    gap: 8px;
  }
  
  .top-row {
    gap: 8px;
  }
  
  .card, .card-slot {
    transform: scale(0.8);
    transform-origin: top left;
  }
  
  .card-area {
    width: 57px;
    height: 77px;
  }
  
  .tableau-column {
    width: 57px;
  }
}