/* style.css — the presentational authority. The engine emits only logical
   (layer,x,y); every pixel decision lives here. */

:root {
  /* ink (faces read these) */
  --mj-red: #b2362f; --mj-green: #2f7d4f; --mj-green-dark: #1f5a38;
  --mj-blue: #2d6e9b; --mj-black: #2c2c2c; --mj-gold: #c79a3b;
  /* surfaces */
  --felt: #35614a; --felt-deep: #2b5340;
  --ink: #21302a; --muted: #6b7d72;
  --tile-face: #f7f3e8; --tile-edge: #ebe3cc; --tile-side: #c9bb9b;
  --sel: #e0a92e; --sel-glow: rgba(224, 169, 46, .55);
  --hint: #f0852a; /* contrasts with felt + ivory; distinct from selection */
  /* tile geometry (the only knobs for board size) */
  --tile-w: 48px; --tile-h: 62px; --ldx: 6px; --ldy: 8px;
  --tile-tint: 25%; /* category tint strength for flowers/seasons */
}
[data-theme="dark"] {
  --mj-red: #e2776f; --mj-green: #5fb487; --mj-green-dark: #3f8c66;
  --mj-blue: #6aa9d6; --mj-black: #d8d8d8; --mj-gold: #d9b765;
  --felt: #14181a; --felt-deep: #0e1113;
  --ink: #e7ece9; --muted: #8a9a90;
  --tile-face: #2a2e33; --tile-edge: #33383e; --tile-side: #16191c;
  --sel: #e6b84a; --sel-glow: rgba(230, 184, 74, .5);
  --hint: #ff9f3d;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: radial-gradient(120% 100% at 50% 0%, var(--felt), var(--felt-deep));
  transition: background .3s, color .3s;
  -webkit-user-select: none; user-select: none;
}
#faces { position: absolute; width: 0; height: 0; overflow: hidden; }

#app { display: flex; flex-direction: column; height: 100dvh; }

/* HUD */
.hud {
  display: flex; gap: 18px; justify-content: center; align-items: baseline;
  padding: max(10px, env(safe-area-inset-top)) 14px 8px;
  font-size: .82rem; color: var(--muted); letter-spacing: .02em;
}
.hud .stat span { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; margin-left: 4px; }

/* play area */
.stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.board { position: absolute; top: 0; left: 0; transform-origin: 0 0; touch-action: manipulation; }

/* a tile body: ivory, bevelled, elevated — positioned purely from logical coords */
.tile {
  position: absolute;
  width: var(--tile-w); height: var(--tile-h);
  left: calc(var(--x) * (var(--tile-w) / 2) + var(--l) * var(--ldx));
  top:  calc(var(--y) * (var(--tile-h) / 2) - var(--l) * var(--ldy) + var(--oy));
  border-radius: calc(var(--tile-w) * .15);
  background: linear-gradient(157deg, var(--tile-face), var(--tile-edge));
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .6),
    inset 0 -3px 4px rgba(0, 0, 0, .12),
    0 2px 0 var(--tile-side),
    0 5px 7px rgba(0, 0, 0, .28);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease;
}
.face { position: absolute; inset: 9% 8%; width: 84%; height: 82%; display: block; pointer-events: none; }

/* subtle category tint for the group-matching bonus tiles (flowers green, seasons blue) */
.tile[data-id^="flower"] {
  background: linear-gradient(157deg,
    color-mix(in srgb, var(--tile-face) calc(100% - var(--tile-tint)), var(--mj-green)),
    color-mix(in srgb, var(--tile-edge) calc(100% - var(--tile-tint)), var(--mj-green)));
}
.tile[data-id^="season"] {
  background: linear-gradient(157deg,
    color-mix(in srgb, var(--tile-face) calc(100% - var(--tile-tint)), var(--mj-blue)),
    color-mix(in srgb, var(--tile-edge) calc(100% - var(--tile-tint)), var(--mj-blue)));
}

.tile.blocked { cursor: default; }
.tile.selected {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px var(--sel),
    0 0 14px 2px var(--sel-glow),
    0 7px 10px rgba(0, 0, 0, .35);
}
.tile.hint { animation: hintpulse .65s ease 2; }
.tile.shake { animation: shake .32s ease; }
.tile.restoring { animation: restore .22s ease; }

/* match burst particles */
.spark {
  position: absolute; width: 7px; height: 7px; border-radius: 2px;
  pointer-events: none; z-index: 10001;
  box-shadow: 0 0 4px rgba(255, 255, 255, .5);
}
/* collision shockwave */
.flash {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  pointer-events: none; z-index: 10000;
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,214,120,.35) 45%, transparent 70%);
}

@keyframes restore { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }
@keyframes hintpulse {
  0%,100% { box-shadow: inset 0 1.5px 1px rgba(255,255,255,.6), 0 2px 0 var(--tile-side), 0 5px 7px rgba(0,0,0,.28); }
  50% { box-shadow: 0 0 0 3px var(--hint), 0 0 18px 4px color-mix(in srgb, var(--hint) 60%, transparent), 0 5px 9px rgba(0,0,0,.3); }
}

/* info bar — explains the selected tile */
.info {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 3em; padding: 4px 14px 2px; text-align: center;
}
.info-row1 { display: flex; align-items: baseline; gap: 7px; }
.info-glyph { font-size: 1.05rem; font-weight: 600; color: var(--mj-blue); line-height: 1; }
.info-name { font-weight: 650; font-size: .9rem; color: var(--ink); }
.info-match { font-size: .76rem; color: var(--muted); line-height: 1.25; max-width: 42ch; }
.info.prompt .info-row1 { display: none; }

/* controls */
.controls {
  display: flex; gap: 8px; justify-content: center;
  padding: 8px 12px max(10px, env(safe-area-inset-bottom));
}
.controls button {
  flex: 1 1 0; max-width: 130px;
  font: inherit; font-weight: 600; font-size: .9rem;
  padding: .7rem .5rem; border-radius: 11px; cursor: pointer;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--tile-face) 24%, transparent);
  transition: transform .06s ease, background .15s ease;
}
.controls button:active { transform: translateY(1px); }
.controls button:disabled { opacity: .4; pointer-events: none; }

/* overlays */
.overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--felt-deep) 78%, transparent);
  backdrop-filter: blur(3px);
}
.overlay[hidden] { display: none; }
.overlay.start { background: color-mix(in srgb, var(--felt-deep) 40%, transparent); }
.card {
  background: linear-gradient(160deg, var(--tile-face), var(--tile-edge));
  color: var(--ink);
  border-radius: 18px; padding: 26px 28px; text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4); max-width: min(86vw, 340px);
}
.card h2 { margin: 0 0 6px; font-size: 1.4rem; }
.card p { margin: 4px 0; color: var(--muted); }
.card .big { font-size: 2rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.card .row { display: flex; gap: 10px; margin-top: 18px; }
.card button {
  flex: 1; font: inherit; font-weight: 650; cursor: pointer;
  padding: .7rem 1rem; border-radius: 11px; border: none;
  background: var(--mj-green); color: #fff;
}
.card button.alt { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }

@media (min-width: 700px) {
  :root { --tile-w: 56px; --tile-h: 72px; }
  .hud { font-size: .9rem; }
}