/* Joker's Tile Garden — garden visuals layered on the shared shell.
   The shell owns the top bar, menu, fullscreen and THEME COLORS. This file
   paints the garden itself: sky, plots, seed shelf, HUD, modals.

   THEME-REACTIVE (2026-10-04b): every color below reads from the shell's
   --g-* variables, so the garden follows the chosen theme (green / black /
   navy / purple) and its day/night variant. Plots are recessed soil wells
   mixed darker than the theme ground (warm loam by day, dark humus by night)
   with a single hairline rim — the old three-edge metal ring read as a thick
   brown border in daylight. Planted faces are bare glowing pips; no ivory
   card body anywhere. Derived shades use color-mix() off --g-bg / --g-accent,
   the same primitive shell.css uses. */

.tg-wrap {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 4px 18px;
  min-height: 100%;
  z-index: 1;
}

/* ---------- sky + particles (behind everything) ---------- */
.tg-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: background 1.6s ease, opacity 1.6s ease;
  /* base: the theme backdrop, top a touch lighter than the bed */
  background: linear-gradient(180deg, var(--g-bg2), var(--g-bg));
  opacity: .95;
}
/* Time-of-day phases keep their character but are tinted by the theme: morning
   and day lift gently toward white (a heavy lift turned the deep emerald into
   murky grey), dusk leans violet, night deepens toward black. */
.tg-sky.phase-morning { background: linear-gradient(180deg, color-mix(in srgb, var(--g-bg2) 84%, #fff 16%), color-mix(in srgb, var(--g-bg) 86%, #fff 14%)); }
.tg-sky.phase-day     { background: linear-gradient(180deg, color-mix(in srgb, var(--g-bg2) 78%, #fff 22%), color-mix(in srgb, var(--g-bg) 80%, #fff 20%)); }
.tg-sky.phase-dusk    { background: linear-gradient(180deg, color-mix(in srgb, var(--g-bg2) 70%, #5b4a7a 30%), color-mix(in srgb, var(--g-bg) 70%, #2a1f3a 30%)); }
.tg-sky.phase-night   { background: linear-gradient(180deg, color-mix(in srgb, var(--g-bg2) 78%, #000 22%), color-mix(in srgb, var(--g-bg) 72%, #000 28%)); }
/* Seasons tint the sky a touch without fighting the time-of-day base. */
.tg-sky.season-summer { filter: saturate(1.08) brightness(1.03); }
.tg-sky.season-autumn { filter: saturate(1.12) hue-rotate(-8deg); }
.tg-sky.season-winter { filter: brightness(1.08) saturate(.85); }

.tg-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---------- HUD ---------- */
.tg-hud {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 14px;
  border-radius: 16px;
  /* frosted panel tinted by the theme (dark on dark themes, light on light) */
  background: var(--g-glass);
  border: 1px solid var(--g-accent-edge);
  backdrop-filter: blur(4px);
  color: var(--g-fg);
  box-shadow: var(--g-shadow-sm);
}
.tg-stat { display: flex; flex-direction: column; line-height: 1.1; min-width: 58px; }
.tg-stat .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .62; }
.tg-stat .v { font-size: 18px; font-weight: 700; font-family: var(--serif, Georgia, serif); }
.tg-harmony { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 180px; }
.tg-harmony .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .62; }
.tg-harmony .v { font-size: 12px; font-weight: 700; opacity: .8; }
.tg-harmony-track { flex: 1; height: 10px; border-radius: 6px; background: var(--g-line); overflow: hidden; }
.tg-harmony-fill { height: 100%; width: 0%; border-radius: 6px;
  background: linear-gradient(90deg, var(--g-accent-lt), var(--g-accent-dk)); transition: width .4s ease; }

/* ---------- garden grid ---------- */
.tg-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin: 4px auto 0;
  padding: 16px;
  border-radius: 22px;
  /* Garden bed: the theme ground pressed one step deeper, with a faint accent
     wash from the top — soil sits on soil, not on a pale tray. */
  background:
    radial-gradient(120% 90% at 50% 0%, var(--g-accent-soft), rgba(0,0,0,0) 55%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--g-bg) 88%, #000 12%) 0%,
      color-mix(in srgb, var(--g-bg) 76%, #000 24%) 100%);
  box-shadow:
    inset 0 0 0 1px var(--g-line),
    inset 0 2px 12px rgba(0,0,0,.18),
    var(--g-shadow-md);
}
.tg-plot {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* Plot: a recessed soil well. The well is always mixed darker than the theme
     ground — parchment day turns warm loam, emerald night turns dark humus —
     so it reads as soil in every theme and never as a pale ball. Depth comes
     from a top inner shadow; the rim is one quiet accent hairline. The former
     1.5px accent ring + 6px dark bevel + outer filament read as a thick brown
     collar in daylight, which is what the screenshot flagged. */
  background: radial-gradient(circle at 50% 32%,
    color-mix(in srgb, var(--g-bg) 64%, #000 36%) 0%,
    color-mix(in srgb, var(--g-bg) 50%, #000 50%) 58%,
    color-mix(in srgb, var(--g-bg) 38%, #000 62%) 100%);
  box-shadow:
    inset 0 6px 14px rgba(0,0,0,.40),
    inset 0 -2px 5px rgba(255,255,255,.10),
    inset 0 0 0 1px color-mix(in srgb, var(--g-accent) 26%, transparent),
    0 2px 6px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease;
  outline: none;
}
.tg-plot:hover, .tg-plot.tg-dragover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 6px 14px rgba(0,0,0,.38),
    inset 0 -2px 5px rgba(255,255,255,.10),
    inset 0 0 0 1px color-mix(in srgb, var(--g-accent) 60%, transparent),
    0 0 0 2px color-mix(in srgb, var(--g-accent) 55%, transparent),
    0 6px 14px rgba(0,0,0,.28);
}
.tg-plot.tg-filled::after { display: none; }
/* Planted faces are bare glowing pips floating in the pot — the game's own
   renderer (game.js) draws dot geometry copied from the site's tile art, so
   there is no card body, numeral or bird to style around. */
.tg-plot .tl {
  position: relative;
  z-index: 1;
  display: block;
  height: 62%;
  width: auto;
  aspect-ratio: 58 / 79;
  background: none;
  transition: transform .18s ease;
}
.tg-plot .tl svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Every dot breathes on its own phase: a blurred halo behind the coin, dim
   by day, quietly alive on the dark soil at night. */
.pip-halo {
  filter: blur(3px);
  opacity: .38;
  animation: pipBreath 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pipBreath { 0%, 100% { opacity: .18; } 50% { opacity: .66; } }
/* Filled plots keep a faint accent halo behind the pips so they sit in light
   as well as in soil. */
.tg-plot.tg-filled {
  background:
    radial-gradient(circle at 50% 40%, var(--g-accent-soft), rgba(0,0,0,0) 62%),
    radial-gradient(circle at 50% 32%,
      color-mix(in srgb, var(--g-bg) 64%, #000 36%) 0%,
      color-mix(in srgb, var(--g-bg) 50%, #000 50%) 58%,
      color-mix(in srgb, var(--g-bg) 38%, #000 62%) 100%);
}
.tg-plot.tg-grow .tl { animation: tgPop .42s ease; }
/* player color cursor ring (pass & play) — thin line + soft glow, so four
   players' rings never turn into hard plastic collars around the pots */
.tg-plot[data-owner]::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--owner, #fff);
  box-shadow: 0 0 7px var(--owner, #fff);
  opacity: .8;
  z-index: 2;
  pointer-events: none;
}
@keyframes tgPop { 0% { transform: scale(.4) rotate(-8deg); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.tg-plot.tg-bloom { animation: tgBloom .8s ease; }
@keyframes tgBloom {
  0% { box-shadow: inset 0 3px 8px rgba(0,0,0,.3); }
  40% { box-shadow: 0 0 0 4px var(--g-accent), 0 0 26px 8px var(--g-accent-hi); transform: scale(1.06); }
  100% { box-shadow: inset 0 3px 8px rgba(0,0,0,.3); transform: scale(1); }
}

/* ---------- seed shelf ---------- */
.tg-shelf {
  position: relative;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--g-glass);
  border: 1px solid var(--g-accent-edge);
  backdrop-filter: blur(4px);
  box-shadow: var(--g-shadow-sm);
}
.tg-shelf-label { font-family: var(--serif, Georgia, 'Times New Roman', serif); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; margin-bottom: 6px; color: var(--g-muted); }
.tg-shelf-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; min-height: 70px; }
.tg-seed {
  position: relative;
  width: 54px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  border-radius: 12px;
  background: var(--g-card);
  border: 1px solid var(--g-line);
  box-shadow: var(--g-shadow-sm);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform .12s ease, box-shadow .15s ease;
}
.tg-seed:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-md); }
.tg-seed:active { cursor: grabbing; }
.tg-seed .tl { position: relative; display: block; width: 86%; aspect-ratio: 58 / 79; height: auto; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.28)); }
.tg-seed .tl svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tg-seed.tg-dragging { opacity: .35; }
.tg-seed.tg-spent { opacity: .3; pointer-events: none; filter: grayscale(.5); }
/* drag ghost */
.tg-ghost {
  position: fixed;
  z-index: 9999;
  width: 54px; height: 72px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.4));
  opacity: .95;
}
.tg-ghost .tl { position: relative; display: block; width: 86%; aspect-ratio: 58 / 79; height: auto; }
.tg-ghost .tl svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------- controls ---------- */
.tg-ctrl {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.tg-feed {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 13px;
  color: var(--g-muted);
  min-height: 18px;
  opacity: .85;
}

/* ---------- start screen ---------- */
.tg-start {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 10%, color-mix(in srgb, var(--g-bg2) 70%, transparent 30%), color-mix(in srgb, var(--g-bg) 80%, transparent 20%));
  backdrop-filter: blur(4px);
}
.tg-lamp { position: absolute; top: -40px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--g-accent-hi), rgba(0,0,0,0) 70%); filter: blur(2px); }
.tg-start-title { font-family: var(--serif, Georgia, serif); font-size: clamp(28px, 6vw, 46px); color: var(--g-fg); margin: 0; }
.tg-start-sub { max-width: 460px; color: var(--g-muted); margin: 0; }
.tg-players { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tg-players-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.tg-seg { display: flex; gap: 8px; }
.tg-pill {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--g-accent-edge);
  background: rgba(255,255,255,.08);
  color: var(--g-fg);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.tg-pill.is-sel { background: var(--g-accent); color: var(--g-on-accent, #1a1208); border-color: transparent; box-shadow: 0 4px 14px var(--g-accent-soft); }
.tg-enter { font-size: 17px; padding: 13px 30px; margin-top: 6px; }
.tg-start-note { max-width: 440px; font-size: 13px; color: var(--g-muted); opacity: .85; margin: 0; }

/* ---------- modals ---------- */
.tg-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: color-mix(in srgb, var(--g-bg) 55%, transparent 45%);
  backdrop-filter: blur(3px);
}
.tg-modal-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 86%;
  overflow: auto;
  background: #fbf8f1;
  color: #1f3a2c;
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.tg-modal-card h2 { font-family: var(--serif, Georgia, serif); margin: 0 0 4px; }
.tg-modal-sub { margin: 0 0 14px; opacity: .7; font-size: 14px; }
.tg-modal-x, .tg-help-x {
  position: absolute; top: 12px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(20,52,43,.1); color: #1f3a2c;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.tg-modal-x:hover, .tg-help-x:hover { background: rgba(20,52,43,.2); }

/* collection book */
.tg-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.tg-flower {
  border-radius: 14px;
  padding: 10px 6px 8px;
  text-align: center;
  background: linear-gradient(180deg, #fff, #f0ead9);
  border: 1px solid rgba(20,52,43,.12);
  box-shadow: 0 3px 8px rgba(20,52,43,.1);
}
.tg-flower.locked { opacity: .45; filter: grayscale(.7); }
.tg-flower .tg-flower-art { width: 46px; height: 46px; margin: 0 auto 4px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.18); }
.tg-flower .tg-flower-art .tl { position: relative; display: block; width: 84%; aspect-ratio: 58 / 79; height: auto; }
.tg-flower .tg-flower-art .tl svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tg-flower .tg-flower-name { font-size: 11px; line-height: 1.2; }
.tg-flower .tg-flower-rarity { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }

/* garden view stats + areas */
.tg-view-stats { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px; }
.tg-view-stats .vbox { display: flex; flex-direction: column; }
.tg-view-stats .vk { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.tg-view-stats .vv { font-size: 20px; font-weight: 700; font-family: var(--serif, Georgia, serif); }
.tg-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
.tg-area {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(180deg,#fff,#f0ead9);
  border: 1px solid rgba(20,52,43,.12);
}
.tg-area.locked { opacity: .4; }
.tg-area .tg-area-dot { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; }
.tg-area .tg-area-name { font-weight: 600; font-size: 14px; }
.tg-area .tg-area-req { font-size: 11px; opacity: .6; }

/* Keep the shell toast clear of the bottom control row (shell default bottom:36px). */
.mj-toast { bottom: 74px; }

/* settings */
.tg-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(20,52,43,.1); }
.tg-set-row span { font-size: 15px; }
/* Quiet destructive action: ghost style, no red-fill chrome — the old red
   gradient button clashed with the cream zen panels around it. */
.tg-set-danger .mj-btn { background: none; border-color: rgba(192,57,43,.55); color: #9c3a30; box-shadow: none; }
.tg-set-danger .mj-btn:hover { border-color: #c0392b; box-shadow: none; }
.tg-set-note { font-size: 12px; opacity: .65; margin-top: 12px; }
/* blessing input — lives inside the cream settings card, so it matches that
   panel (white field, dark ink) rather than the theme-reactive garden vars */
.tg-input {
  width: 60%; min-width: 180px; box-sizing: border-box;
  padding: 9px 11px; border-radius: 10px;
  border: 1px solid rgba(20,52,43,.25); background: #fff; color: #1f3a2c;
  font: 500 14px/1.3 var(--sans, system-ui, sans-serif);
}
.tg-input:focus { outline: none; border-color: #3e7d5b; box-shadow: 0 0 0 3px rgba(62,125,91,.18); }
.tg-input::placeholder { color: rgba(20,52,43,.4); }

/* quiet caption showing the player's garden wish, in the garden and on the
   start screen — uses the theme accent so it belongs to the current skin */
.tg-blessing-view {
  position: relative; z-index: 2;
  text-align: center; font-style: italic;
  font-family: var(--serif, Georgia, serif);
  color: var(--g-accent);
  font-size: 14.5px; line-height: 1.4;
  margin: 2px auto 0; max-width: 520px; opacity: .9;
}
.tg-blessing-view[hidden] { display: none; }

/* help */
.tg-help {
  position: fixed; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: color-mix(in srgb, var(--g-bg) 60%, transparent 40%); backdrop-filter: blur(3px);
}
.tg-help-card {
  position: relative; width: 100%; max-width: 620px; max-height: 88%; overflow: auto;
  background: #fbf8f1; color: #1f3a2c; border-radius: 20px; padding: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.tg-help-card h3 { font-family: var(--serif, Georgia, serif); margin: 18px 0 4px; }
.tg-help-lead { font-size: 15px; line-height: 1.5; }
.tg-help-card p { font-size: 14px; line-height: 1.55; }
.tg-help-note { font-size: 12px; opacity: .6; margin-top: 14px; border-top: 1px solid rgba(20,52,43,.12); padding-top: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  .tg-hud { gap: 8px 12px; padding: 8px 10px; }
  .tg-stat .v { font-size: 16px; }
  .tg-grid { gap: 7px; padding: 12px; max-width: 100%; }
  .tg-seed { width: 46px; height: 62px; }
  .tg-ghost { width: 46px; height: 62px; }
  .tg-ctrl .mj-btn { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 380px) {
  .tg-grid { gap: 5px; padding: 9px; }
  .tg-seed { width: 42px; height: 56px; }
}