/* === TI'ZOR Design System v2.0 — phygital treasure hunt (La Réunion) === */

/* ── Palette TI'ZOR (default · "lagon") ──
   Brand: teal/green gradient + coral accent + gold highlights.
   Existing semantic tokens (--bg/--ink/--canopy/--ember…) are remapped to
   TI'ZOR values so every legacy page adopts the new look automatically,
   while raw brand colors live under --tz-*. */
:root {
  /* Brand ramp */
  --tz-teal-d:  #0b4f5a;   /* deep teal (nav, headings) */
  --tz-teal:    #0c7a72;   /* primary teal */
  --tz-green:   #16a06a;   /* fresh green (success / publish) */
  --tz-coral:   #f2543d;   /* coral (primary CTA) */
  --tz-coral-d: #d8432d;
  --tz-gold:    #ffc53d;   /* gold (score / logo) */
  --tz-amber:   #e89622;   /* amber (partner "rencontre") */
  --tz-purple:  #7c4dd1;   /* purple (énigme) */
  --tz-sky:     #0ea5be;

  /* Surfaces */
  --bg:         #e9f5f0;
  --bg-soft:    #f1f7ec;
  --bg-card:    #ffffff;

  /* Ink / text */
  --ink:        #13343b;
  --ink-soft:   #37565c;
  --muted:      #5e7a80;
  --muted-2:    #90a4a8;

  /* Lines */
  --line:        #eef1ec;
  --line-strong: #cfe3dc;

  /* Semantic accents (legacy aliases) */
  --canopy:      #0c7a72;
  --canopy-soft: #e7f2ef;
  --ember:       #f2543d;
  --ember-soft:  #fdeeea;

  /* Typography */
  --font-sans:  'Nunito', system-ui, -apple-system, sans-serif;
  --font-serif: 'Fredoka', 'Nunito', system-ui, sans-serif;  /* display */
  --font-mono:  'Nunito', system-ui, sans-serif;             /* labels */

  /* Radii — TI'ZOR is very rounded */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;

  /* Elevation */
  --tz-shadow:    0 12px 28px -20px rgba(11,79,90,.4);
  --tz-shadow-lg: 0 18px 40px -18px rgba(11,79,90,.45);
  --tz-grad-brand: linear-gradient(110deg,#0b4f5a 0%,#0c7a72 55%,#16a06a 100%);
  --tz-grad-page:  linear-gradient(165deg,#e9f7f4 0%,#f3f8ed 45%,#fdf5e8 100%);
}

/* ── Palette Cirques (cooler / bluer accent) ── */
[data-palette="cirques"] {
  --bg:         #e7f1f6;
  --bg-soft:    #eef5f9;
  --canopy:     #0e6f86;
  --canopy-soft:#e4f0f5;
  --ember:      #0ea5be;
  --ember-soft: #e3f4f8;
  --tz-grad-page: linear-gradient(165deg,#e8f4f8 0%,#eef6f4 45%,#f3f8ed 100%);
}

/* ── Palette Volcan (warmer / coral accent) ── */
[data-palette="volcan"] {
  --bg:         #fbeee7;
  --bg-soft:    #fdf3ec;
  --canopy:     #c2541a;
  --canopy-soft:#fcefe2;
  --ember:      #f2543d;
  --ember-soft: #fdeeea;
  --tz-grad-page: linear-gradient(165deg,#fdf0e6 0%,#fef6ed 45%,#f3f8ed 100%);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; }

body {
  background: var(--tz-grad-page) fixed;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tz-teal) !important; }

/* ── Typography ──
   .display now renders Fredoka (rounded display). Legacy <em> emphasis is
   shown in teal rather than italic, since Fredoka has no true italic. */
.display {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: var(--tz-teal-d);
}
.display em { font-style: normal; color: var(--canopy); }

.mono {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hairline { background: var(--line); height: 1px; width: 100%; }

/* ── Responsive visibility ── */
.th-hide-desktop { display: none; }
.th-hide-mobile { display: initial; }
.th-brand-sub { display: inline; }
@media (max-width: 1180px) { .th-brand-sub { display: none; } }
@media (max-width: 1024px) { .th-conn-label { display: none; } }

/* ── Layout utilities ── */
.th-row-stack { display: grid; gap: 64px; align-items: end; }
.th-row-stack.cols-58 { grid-template-columns: 1.4fr 1fr; }
.th-row-stack.cols-eq { grid-template-columns: 1fr 1fr; }

.th-stats { display: grid; gap: 24px; }
.th-stats.cols-5 { grid-template-columns: repeat(5, 1fr); }
.th-stats.cols-4 { grid-template-columns: repeat(4, 1fr); }

.th-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.th-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 640px) { .th-grid-3 { grid-template-columns: 1fr; } }
.th-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.th-home-popular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .th-home-popular { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .th-home-popular { grid-template-columns: 1fr; } }
.th-play-split { display: grid; grid-template-columns: 440px 1fr; gap: 24px; flex: 1; min-height: 0; }
.th-editor-split { display: grid; grid-template-columns: 380px 1fr 320px; flex: 1; min-height: 0; }
.th-recap-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
.th-recap-bottom { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.th-pad-page { padding: 0 28px 80px; }

/* ── Fluid headline sizes ── */
.th-hero-headline { font-size: clamp(36px, 6.4vw, 64px); }
.th-detail-headline { font-size: clamp(32px, 5.5vw, 56px); }
.th-section-headline { font-size: clamp(26px, 3.6vw, 48px); }
.th-play-headline { font-size: clamp(26px, 3.6vw, 42px); }
.th-recap-headline { font-size: clamp(34px, 5.6vw, 64px); }

/* ── Shell row ── */
.th-shell-row {
  max-width: 1440px;
  margin: 0 auto;
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── Bottom nav mobile ── */
.th-bottombar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  background: color-mix(in oklch, var(--bg) 96%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
@media (max-width: 900px) { .th-bottombar { display: flex; } }

/* ── Tabbed editor mobile ── */
.th-editor-pane-map { min-height: 360px; }


@media (max-width: 900px) {
  .th-editor-split[data-active-tab="list"] .th-editor-pane-map,
  .th-editor-split[data-active-tab="list"] .th-editor-pane-inspect { display: none !important; }
  .th-editor-split[data-active-tab="map"] .th-editor-pane-list,
  .th-editor-split[data-active-tab="map"] .th-editor-pane-inspect { display: none !important; }
  .th-editor-split[data-active-tab="inspect"] .th-editor-pane-list,
  .th-editor-split[data-active-tab="inspect"] .th-editor-pane-map { display: none !important; }
  .th-editor-pane-list, .th-editor-pane-inspect { border: none !important; }
  .th-editor-pane-map { min-height: calc(100vh - 220px); }
}

/* ── Play sub-bar ── */
.th-play-subbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

/* ── Editor toolbar ── */
.th-editor-toolbar {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Editor tabs mobile ── */
.th-editor-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

/* ── Modal bottom-sheet mobile ── */
@media (max-width: 640px) {
  .th-modal-overlay { align-items: flex-end !important; }
  .th-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    animation: th-slide-up 0.22s ease-out;
  }
}

/* ── Animations ── */
@keyframes th-pulse {
  0%, 100% { transform: scale(1); opacity: 0.18; }
  50% { transform: scale(1.8); opacity: 0; }
}
@keyframes th-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes th-slide-up {
  from { transform: translateY(24px); opacity: 0.5; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(11,79,90,.22);
  border-radius: 9px;
}

/* ── Responsive breakpoints ── */
@media (max-width: 900px) {
  .th-row-stack.cols-58,
  .th-row-stack.cols-eq { grid-template-columns: 1fr; gap: 28px; }
  .th-stats.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .th-stats.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .th-grid-2,
  .th-play-split { grid-template-columns: 1fr; }
  .th-editor-split { grid-template-columns: 1fr; }
  .th-recap-grid { grid-template-columns: repeat(2, 1fr); }
  .th-recap-bottom { grid-template-columns: 1fr; }
  .th-pad-page { padding: 0 18px 96px; }
  .th-hide-mobile { display: none !important; }
  .th-hide-desktop { display: initial; }
}

@media (max-width: 640px) {
  .th-stats.cols-5,
  .th-stats.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .th-grid-cards { grid-template-columns: 1fr; gap: 16px; }
  .th-pad-page { padding: 0 14px 96px; }
}

/* ── Accessibility ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Legacy compat shim (form-control for InputText in auth pages) ── */
.form-control { width: 100%; }

/* ── Play page — mobile action bar (fixed au-dessus de la bottom nav) ── */
.th-play-action-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom));
  z-index: 50;
  background: color-mix(in oklch, var(--bg) 96%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  display: none;
  align-items: center;
  gap: 8px;
}
@media (max-width: 900px) {
  .th-play-action-bar { display: flex; }
  /* Espace en bas pour que le contenu ne soit pas masqué */
  .th-play-split { padding-bottom: 72px !important; }
}

/* ── Progress dots ── */
.th-play-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 10px 16px 6px;
}
.th-play-dot {
  height: 7px;
  border-radius: 4px;
  transition: background 0.2s, width 0.25s;
  flex-shrink: 0;
}
.th-play-dot-done   { background: var(--tz-green);    width: 7px; }
.th-play-dot-active { background: var(--ember);       width: 20px; }
.th-play-dot-locked { background: var(--line-strong); width: 7px; }

/* ── Map panel collapsible (mobile) ── */
.th-play-map-panel {
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.th-play-map-panel.collapsed { max-height: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════
   Parcours editor — TI'ZOR (assistant 2 étapes · desktop 3-pane · mobile)
   Step 1 « Le parcours » (identité + départ) → Step 2 « Les étapes »
   ══════════════════════════════════════════════════════════════════════ */

/* Shell */
.tz-ed-root {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--tz-grad-page);
}

/* Wizard top bar (shared by both steps) */
.tz-ed-bar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 10px clamp(13px, 3vw, 24px);
  background: var(--bg-card);
  border-bottom: 1.5px solid var(--line);
  box-shadow: 0 8px 22px -20px rgba(11,79,90,.65);
  flex-wrap: wrap;
}
.tz-ed-back {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px 8px 11px;
  background: var(--bg-soft);
  border: 1.5px solid var(--line-strong); border-radius: 999px;
  color: var(--tz-teal-d); font-weight: 800; font-size: 12.5px;
  cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.tz-ed-back:hover { background: var(--canopy-soft); transform: translateX(-2px); }
.tz-ed-titlewrap { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tz-ed-eyebrow {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
  display: inline-flex; align-items: center; gap: 5px;
}
.tz-ed-title {
  width: 100%;
  border: 1.5px solid transparent; background: transparent;
  border-radius: 11px; padding: 3px 9px; margin-left: -2px;
  font-family: var(--font-serif); font-weight: 600; font-size: 21px;
  color: var(--tz-teal-d); outline: none;
}
.tz-ed-title::placeholder { color: var(--muted-2); }
.tz-ed-title:hover { background: var(--bg-soft); }
.tz-ed-title:focus { background: var(--bg-soft); border-color: var(--line-strong); }
.tz-ed-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* Stepper */
.tz-stepper { display: inline-flex; align-items: center; gap: 8px; }
.tz-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 7px; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--bg-card);
  color: var(--ink-soft); font-weight: 800; font-size: 12.5px;
  cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.tz-step:hover:not(:disabled):not(.is-active) { background: var(--bg-soft); }
.tz-step:disabled { opacity: .5; cursor: not-allowed; }
.tz-step.is-active { background: var(--tz-teal); border-color: var(--tz-teal); color: #fff; box-shadow: 0 11px 22px -13px rgba(12,122,114,.85); }
.tz-step-num {
  width: 23px; height: 23px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  background: var(--canopy-soft); color: var(--tz-teal);
}
.tz-step.is-active .tz-step-num { background: rgba(255,255,255,.24); color: #fff; }
.tz-step.is-done .tz-step-num { background: #e7f7ee; color: var(--tz-green); }
.tz-step-sep { width: 22px; height: 2.5px; border-radius: 2px; background: var(--line-strong); }
@media (max-width: 760px) { .tz-step-label { display: none; } .tz-step { padding: 6px; } .tz-step-sep { width: 12px; } }

/* ── Step 1 — identité & point de départ ── */
.tz-ed-step1 { flex: 1; min-height: 0; overflow-y: auto; }
.tz-ed-step1-inner {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(16px,3vw,28px) clamp(14px,4vw,28px) 44px;
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 22px; align-items: start;
}
.tz-ed-panel { padding: clamp(16px,2vw,22px); }
.tz-ed-panel-map { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 480px; }
.tz-ed-panel-maphd { padding: 13px 16px; border-bottom: 1.5px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tz-ed-maptall { position: relative; flex: 1; min-height: 420px; }
@media (max-width: 1024px) { .tz-ed-step1-inner { grid-template-columns: 1fr; } .tz-ed-panel-map { min-height: 360px; } .tz-ed-maptall { min-height: 300px; } }

/* ── Step 2 — desktop 3-pane ── */
.tz-ed-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 344px minmax(0,1fr) 398px; gap: 0;
}
@media (max-width: 1180px) { .tz-ed-grid { grid-template-columns: 300px minmax(0,1fr) 360px; } }
.tz-ed-col { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.tz-ed-col-list { background: var(--bg-card); border-right: 1.5px solid var(--line); }
.tz-ed-col-map  { background: var(--bg-soft); position: relative; }
.tz-ed-col-insp { background: var(--bg-card); border-left: 1.5px solid var(--line); }
.tz-ed-listhead { flex-shrink: 0; padding: 16px 16px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tz-ed-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.tz-ed-row {
  display: flex; gap: 11px; align-items: center;
  padding: 11px 12px; width: 100%; text-align: left;
  background: var(--bg-card); border: 1.5px solid var(--line-strong); border-radius: var(--r);
  cursor: pointer; box-shadow: 0 8px 18px -17px rgba(11,79,90,.55);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.tz-ed-row:hover { background: var(--bg-soft); transform: translateY(-1px); }
.tz-ed-row.is-active { border-color: var(--tz-teal); background: var(--canopy-soft); }
.tz-ed-quickadd {
  padding: 13px; border: 1.5px dashed var(--line-strong); border-radius: var(--r);
  background: transparent; color: var(--tz-teal); font-weight: 800; font-size: 13px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  transition: background .15s ease;
}
.tz-ed-quickadd:hover { background: var(--canopy-soft); }

/* Map overlay pills */
.tz-ed-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px;
  background: var(--bg-card); border: 1.5px solid var(--line-strong);
  color: var(--tz-teal-d); font-weight: 800; font-size: 12px;
  cursor: pointer; box-shadow: var(--tz-shadow);
}
.tz-ed-pill:hover { background: var(--bg-soft); }
.tz-ed-pill.is-on-teal  { background: var(--tz-teal);  border-color: var(--tz-teal);  color: #fff; }
.tz-ed-pill.is-on-coral { background: var(--tz-coral); border-color: var(--tz-coral); color: #fff; }

/* Inspector (step 2 right pane / mobile step) */
.tz-ed-insp-head { flex-shrink: 0; padding: 15px 18px 13px; border-bottom: 1.5px solid var(--line); display: flex; align-items: center; gap: 12px; }
.tz-ed-insp-body { flex: 1; overflow-y: auto; min-height: 0; padding: 17px 18px 26px; display: flex; flex-direction: column; gap: 16px; }
.tz-ed-insp-foot { flex-shrink: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1.5px solid var(--line); background: var(--bg-card); display: flex; gap: 8px; align-items: center; }

/* Number pip */
.tz-pip {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px;
  background: var(--canopy-soft); color: var(--tz-teal);
}
.tz-pip.is-active { background: var(--tz-coral); color: #fff; }

/* Waypoint type selector chips */
.tz-wtype {
  height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; font-size: 12.5px; font-weight: 800; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--bg-card); color: var(--ink-soft);
  transition: all .14s ease;
}
.tz-wtype:hover { background: var(--bg-soft); }
.tz-wtype.is-active { border-color: var(--tz-teal); background: var(--tz-teal); color: #fff; }

/* Reorder buttons */
.tz-ed-ord {
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line-strong); background: var(--bg-card); color: var(--tz-teal-d);
}
.tz-ed-ord:disabled { opacity: .4; cursor: not-allowed; }
.tz-ed-ord:hover:not(:disabled) { background: var(--bg-soft); }

/* Inline message banner */
.tz-ed-msg { font-size: 12.5px; font-weight: 700; padding: 10px 13px; border-radius: 11px; }
.tz-ed-msg-ok  { background: #e7f7ee; color: #0b6b39; }
.tz-ed-msg-err { background: var(--ember-soft); color: var(--tz-coral-d); }

/* ── Mobile drill-down ── */
.tz-em-stage { position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); }
.tz-em-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: var(--tz-grad-page); overflow: hidden;
  transition: transform .3s cubic-bezier(.32,.72,.36,1), opacity .22s ease;
}
.tz-em-slide.is-active { transform: translateX(0); opacity: 1; pointer-events: auto; }
.tz-em-slide.out-left  { transform: translateX(-12%); opacity: 0; pointer-events: none; }
.tz-em-slide.out-right { transform: translateX(100%); opacity: 0; pointer-events: none; }
.tz-em-head {
  flex-shrink: 0; min-height: 56px; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border-bottom: 1.5px solid var(--line);
}
.tz-em-iconbtn {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft); border: 1.5px solid var(--line-strong); color: var(--tz-teal-d);
}
.tz-em-iconbtn:disabled { opacity: .4; cursor: not-allowed; }
.tz-em-card {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; width: 100%; text-align: left;
  background: var(--bg-card); border: 1.5px solid var(--line-strong); border-radius: var(--r);
  cursor: pointer; box-shadow: 0 8px 18px -17px rgba(11,79,90,.55);
}
@keyframes tz-em-sheet-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════════
   TI'ZOR — motion + reusable component layer
   ══════════════════════════════════════════════════════════════════════ */

@keyframes tz-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(242,84,61,.5); } 50% { box-shadow: 0 0 0 13px rgba(242,84,61,0); } }
@keyframes tz-pop   { from { transform: translateY(10px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tz-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes tz-bar   { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes tz-shine { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } }
@keyframes tz-fade  { from { opacity: 0; } to { opacity: 1; } }

.tz-pop   { animation: tz-pop .3s ease; }
.tz-fade  { animation: tz-fade .2s ease; }
.tz-float { animation: tz-float 3s ease-in-out infinite; }

/* Page shell */
.tz-page { max-width: 1180px; margin: 0 auto; padding: clamp(24px,4vw,44px) clamp(16px,4vw,40px) 54px; }
.tz-page-narrow { max-width: 860px; }

/* Display heading helper (Fredoka) */
.tz-display { font-family: var(--font-serif); font-weight: 600; line-height: 1.05; color: var(--tz-teal-d); letter-spacing: -0.005em; }

/* Card */
.tz-card {
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--tz-shadow);
}
.tz-card-sm { border-radius: var(--r-lg); }
.tz-hover-rise { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tz-hover-rise:hover { transform: translateY(-3px); box-shadow: var(--tz-shadow-lg); }

/* Pills / badges */
.tz-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  font-weight: 800; font-size: 12.5px; line-height: 1;
  white-space: nowrap;
}
.tz-pill-teal   { background: var(--canopy-soft); color: var(--tz-teal); }
.tz-pill-coral  { background: var(--ember-soft);  color: var(--tz-coral-d); }
.tz-pill-gold   { background: #fff3e0;            color: #c2641a; }
.tz-pill-green  { background: #e7f7ee;            color: #0b6b39; }
.tz-pill-purple { background: #f3f0fb;            color: #5b3aa0; }

/* Buttons */
.tz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer;
  font-family: var(--font-sans); font-weight: 800; font-size: 15px;
  padding: 14px 22px; border-radius: var(--r);
  transition: transform .15s ease, filter .15s ease, background .15s ease;
  white-space: nowrap; user-select: none;
}
.tz-btn:disabled { opacity: .5; cursor: not-allowed; }
.tz-btn-sm  { padding: 9px 15px; font-size: 13.5px; border-radius: 12px; }
.tz-btn-lg  { padding: 15px 26px; font-size: 15.5px; border-radius: var(--r-lg); }
.tz-btn-coral { background: var(--tz-coral); color: #fff; box-shadow: 0 12px 24px -12px rgba(242,84,61,.55); }
.tz-btn-coral:hover:not(:disabled) { transform: translateY(-2px); }
.tz-btn-teal  { background: var(--tz-teal); color: #fff; }
.tz-btn-teal:hover:not(:disabled)  { filter: brightness(1.06); }
.tz-btn-green { background: linear-gradient(135deg,#16a06a,#0c7a72); color: #fff; box-shadow: 0 8px 18px -8px rgba(22,160,106,.6); }
.tz-btn-green:hover:not(:disabled) { transform: translateY(-2px); }
.tz-btn-ghost { background: var(--bg-card); color: var(--tz-teal-d); border: 1.5px solid var(--line-strong); }
.tz-btn-ghost:hover:not(:disabled) { transform: translateY(-2px); }

/* Form controls */
.tz-label {
  display: block; font-weight: 800; font-size: 12.5px;
  color: var(--ink-soft); margin-bottom: 7px; letter-spacing: .2px;
}
.tz-input, .tz-select, .tz-textarea {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--line-strong); border-radius: var(--r);
  padding: 12px 14px; background: #fbfdfc;
  font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: var(--ink);
}
.tz-textarea { min-height: 74px; resize: vertical; line-height: 1.45; }

/* Faux map canvas (grid texture) used by player + editor */
.tz-map {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg,#bfe6df,#dcefcf);
  border: 1.5px solid var(--line-strong);
}
.tz-map::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.45) 0 1px, transparent 1px 28px);
}

/* Ghost button for use on the brand gradient (hero band, etc.) */
.tz-hero-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 24px;
  background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.45);
  border-radius: var(--r-lg); color: #fff;
  font-family: var(--font-sans); font-weight: 800; font-size: 15.5px;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.tz-hero-ghost:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.65); }

/* Brand logo tile */
.tz-logo {
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg,#ffc53d,#f2543d);
  box-shadow: 0 4px 12px rgba(242,84,61,.4);
  font-family: var(--font-serif); font-weight: 700; color: #fff;
  flex: none;
}