:root {
  --tw: #e94b3c;
  --dw: #f7a1a1;
  --tl: #2f6690;
  --dl: #a8d0e6;
  --tile-bg: #f0dcb0;
  --tile-border: #c8a565;
  --board-bg: #0f5c4a;
  --board-line: #0a3d31;
  font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #143d2b;
  color: #f4f4f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 12px 60px;
}

header {
  text-align: center;
  margin-bottom: 16px;
}

header h1 {
  margin: 0;
  letter-spacing: 2px;
}

.subtitle {
  margin: 4px 0 0;
  opacity: 0.8;
  font-size: 0.95rem;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#board {
  display: grid;
  grid-template-columns: repeat(15, minmax(20px, 34px));
  grid-template-rows: repeat(15, minmax(20px, 34px));
  gap: 2px;
  background: var(--board-line);
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.cell {
  background: var(--board-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.75);
  position: relative;
  border-radius: 2px;
}

.cell.tw { background: var(--tw); }
.cell.dw { background: var(--dw); color: #5a1a1a; }
.cell.tl { background: var(--tl); }
.cell.dl { background: var(--dl); color: #123; }
.cell.center { background: var(--dw); }
.cell.center::after {
  content: "★";
  font-size: 1rem;
  color: #5a1a1a;
}

.cell.open {
  outline: 2px dashed rgba(255,255,255,0.5);
  outline-offset: -2px;
}

.cell.open.dragover {
  outline-color: #ffe58a;
  background: rgba(255,229,138,0.25);
}

.tile {
  width: 88%;
  height: 88%;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #2a1d0d;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.4);
  font-size: 0.95rem;
}

.tile .value {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 0.5rem;
  font-weight: 600;
}

.tile.locked {
  cursor: default;
}

.tile.rack-tile {
  cursor: grab;
  width: 42px;
  height: 42px;
  font-size: 1.2rem;
}

.tile.rack-tile:active {
  cursor: grabbing;
}

#rack-area {
  text-align: center;
}

.rack-label {
  margin: 0 0 8px;
  opacity: 0.8;
  font-size: 0.9rem;
}

#rack {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
}

#feedback {
  min-height: 1.4em;
  font-size: 0.95rem;
  color: #ffb4b4;
  transition: opacity 0.2s;
}

.shake {
  animation: shake 0.4s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

#win-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 20, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#win-overlay.hidden {
  display: none;
}

#cascade-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#win-message {
  position: relative;
  z-index: 2;
  text-align: center;
  background: rgba(0,0,0,0.35);
  padding: 32px 48px;
  border-radius: 12px;
  backdrop-filter: blur(2px);
}

#win-title {
  font-size: 1.8rem;
  margin: 0 0 16px;
}

#play-again {
  font-size: 1rem;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  background: #f0dcb0;
  color: #2a1d0d;
  font-weight: 700;
  cursor: pointer;
}

#play-again:hover {
  background: #ffe9bf;
}