: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, 1fr);
  grid-template-rows: repeat(15, 1fr);
  gap: 2px;
  background: var(--board-line);
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  /* Width scales with the viewport but is capped at the old fixed size;
     aspect-ratio locks height to match width exactly so the board stays
     square instead of the grid rows and columns being sized independently
     (which is what stretched it into an oblong shape on narrow phone
     screens — columns would shrink to fit the width, but rows had no such
     constraint and kept their max size). */
  width: min(94vw, 510px);
  aspect-ratio: 1 / 1;
}

.cell {
  background: var(--board-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.4rem, 1.6vw, 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: clamp(0.6rem, 2.2vw, 0.95rem);
}

.tile .value {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: clamp(0.35rem, 1.2vw, 0.5rem);
  font-weight: 600;
}

.tile.locked {
  cursor: default;
}

.tile.rack-tile {
  cursor: grab;
  width: 42px;
  height: 42px;
  font-size: 1.2rem;
  /* Stops the browser from trying to scroll/pan the page when a finger
     starts moving on a rack tile — needed for the touch-drag fallback
     below, since HTML5 drag-and-drop doesn't fire on touchscreens at all. */
  touch-action: none;
}

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

.drag-ghost {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  width: 48px;
  height: 48px;
  opacity: 0.9;
  transform: translate(-50%, -50%);
}

#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;
}