/* Joculus Studios — wiki-tiefsee-tempel.css
   Nur für das Tiefsee-Tempel-Wiki: spielbares Brett, Ablage, Galerie, Kurve,
   Motiv- und Bewohnerraster. Zonenfarben aus godot/content/levels.json (palette). */

.tt-board, .tt-zone-1, .tt-z1 { --tt-top: #3fd1d8; --tt-bottom: #0e6b8c; --tt-accent: #ffd166; }
.tt-zone-2, .tt-z2 { --tt-top: #1f9f96; --tt-bottom: #0b4a5e; --tt-accent: #9fe870; }
.tt-zone-3, .tt-z3 { --tt-top: #173b7a; --tt-bottom: #06142e; --tt-accent: #8be9ff; }
.tt-zone-4, .tt-z4 { --tt-top: #0a1530; --tt-bottom: #020510; --tt-accent: #c77dff; }
.tt-zone-5, .tt-z5 { --tt-top: #1a1230; --tt-bottom: #050208; --tt-accent: #ffcf5a; }

/* ---------- Brett ---------- */
.tt-board { margin: 20px 0 30px; max-width: 560px; }
.tt-board-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 8px; font-size: 0.86rem; color: var(--text-faint); }
.tt-board-title { color: var(--text); font-weight: 600; margin-right: auto; }
.tt-chain { color: var(--tt-accent); font-variant-numeric: tabular-nums; }
.tt-board-stat { font-variant-numeric: tabular-nums; }
.tt-field {
  position: relative; padding: 18px 14px 14px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 70%), linear-gradient(180deg, var(--tt-top), var(--tt-bottom));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), var(--shadow-card);
}
.tt-field-inner { position: relative; width: 100%; margin: 0 auto; }
.tt-tile {
  position: absolute; padding: 0; border: 0; background: none; cursor: default;
  transition: left 0.4s ease, top 0.4s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tt-tile img { position: absolute; display: block; pointer-events: none; user-select: none; }
.tt-tile .tt-face { left: 0; top: 2%; width: 100%; height: 106%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.tt-tile .tt-motif { left: 14%; top: 12%; width: 72%; height: 72%; object-fit: contain; filter: brightness(0.5) saturate(0.6); }
.tt-tile:not(.frei) .tt-face { filter: brightness(0.62) saturate(0.8) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.tt-tile.frei { cursor: pointer; }
.tt-tile.frei .tt-motif { filter: none; }
.tt-tile.frei:hover .tt-face, .tt-tile.frei:focus-visible .tt-face { filter: brightness(1.12) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); }
.tt-tile:focus-visible { outline: none; }
.tt-tile::after {
  content: attr(data-mark); position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 clamp(14px, 3.4vw, 26px) var(--font-display); color: #234955; pointer-events: none;
}
.tt-tile.sonar .tt-face { filter: brightness(1.1) drop-shadow(0 0 7px #3fe6ff) drop-shadow(0 0 2px #3fe6ff); }
.tt-tile.blase::before {
  content: ""; position: absolute; right: -6%; top: -4%; width: 34%; height: 34%; z-index: 2;
  background: url("/assets/wiki/tiefsee-tempel/board/bubble.webp") center / contain no-repeat;
}
.tt-tile.siegel .tt-face { filter: sepia(0.6) saturate(1.6) drop-shadow(0 0 4px #ffcf5a); }
.tt-tile.strom::before {
  content: attr(data-dir); position: absolute; left: 0; right: 0; top: -22%; z-index: 2; text-align: center;
  font: 700 clamp(11px, 2.4vw, 16px) var(--font-body); color: #bff6ff; text-shadow: 0 0 4px #0e6b8c;
}
.tt-tile.tt-pop { animation: tt-pop 0.32s ease-out forwards; }
@keyframes tt-pop { to { transform: scale(1.35); opacity: 0; } }
.tt-ghost img { position: absolute; }
.tt-ghost .tt-face { left: 0; top: 2%; width: 100%; height: 106%; }
.tt-ghost .tt-motif { left: 14%; top: 12%; width: 72%; height: 72%; }

/* Kettenbanner (effects.gd: 0,9 s, Pop in den ersten 25 %) und Zittern ab ×4 (0,28 s) */
.tt-banner {
  position: absolute; left: 50%; top: 42%; z-index: 9999; padding: 6px 18px; border-radius: 999px; white-space: nowrap;
  background: rgba(10, 13, 24, 0.75); color: var(--tt-accent); font: 700 1.2rem var(--font-display);
  transform: translate(-50%, -50%); pointer-events: none; animation: tt-banner 0.9s ease-out forwards;
}
@keyframes tt-banner {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(1); opacity: 0; }
}
.tt-shake { animation: tt-shake 0.28s linear; }
@keyframes tt-shake { 25% { transform: translate(4px, -2px); } 50% { transform: translate(-4px, 2px); } 75% { transform: translate(2px, 1px); } }

/* Ablage: sieben Plätze, mit „Luft“ acht */
.tt-bar {
  display: grid; grid-template-columns: repeat(var(--slots, 7), minmax(0, 1fr)); gap: 4px;
  margin-top: 10px; padding: 8px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 107, 140, 0.55), rgba(6, 20, 46, 0.85)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.tt-slot { position: relative; aspect-ratio: 1 / 1.08; border-radius: 9px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.tt-slot.extra { box-shadow: inset 0 0 0 1px var(--tt-accent); }
.tt-slot img { position: absolute; }
.tt-slot .tt-face { inset: 0; width: 100%; height: 100%; }
.tt-slot .tt-motif { left: 14%; top: 12%; width: 72%; height: 72%; object-fit: contain; }
.tt-board-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tt-btn {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); cursor: pointer;
  background: var(--surface); color: var(--text); font: 600 0.88rem var(--font-body);
}
.tt-btn:hover:not(:disabled) { background: var(--surface-hover); }
.tt-btn:disabled { opacity: 0.45; cursor: default; }
.tt-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tt-btn-ghost { background: transparent; }
.tt-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tt-board-msg { min-height: 1.6em; margin: 10px 0 0 !important; font-size: 0.9rem; color: var(--text-faint); }
.tt-won .tt-field { box-shadow: inset 0 0 0 2px var(--tt-accent), 0 0 40px -6px var(--tt-accent); }
.tt-lost .tt-field-inner { filter: grayscale(0.6) brightness(0.8); }

/* ---------- Galerie ---------- */
.tt-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.tt-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tt-card {
  display: grid; gap: 4px; align-content: start; padding: 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-muted); font: 0.78rem/1.4 var(--font-body);
}
.tt-card:hover, .tt-card:focus-visible { border-color: var(--tt-accent); outline: none; }
.tt-card b { color: var(--text); font-size: 0.92rem; }
.tt-card-img { display: grid; place-items: center; height: 120px; margin-bottom: 4px; border-radius: 10px; background: linear-gradient(180deg, var(--tt-top), var(--tt-bottom)); }
.tt-card-img canvas { max-width: 86%; max-height: 104px; }
.tt-card-mech { color: var(--tt-accent); }
.tt-card[hidden] { display: none; }

/* ---------- Kurve ---------- */
.tt-chart svg { display: block; width: 100%; height: auto; }
.tt-chart-grid { stroke: var(--border); stroke-width: 1; }
.tt-chart-axis { fill: var(--text-faint); font-size: 12px; }
.tt-chart rect { cursor: pointer; }
.tt-chart rect:hover, .tt-chart rect:focus { opacity: 0.75; outline: none; }
.tt-bar-z1 { fill: #3fd1d8; } .tt-bar-z2 { fill: #9fe870; } .tt-bar-z3 { fill: #5a8fd6; } .tt-bar-z4 { fill: #c77dff; } .tt-bar-z5 { fill: #ffcf5a; }
.tt-chart-caption { font-size: 0.86rem; color: var(--text-faint); }
.tt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 0.82rem; }
.tt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }

/* ---------- Motive, Bewohner, Modi ---------- */
.tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 14px 0 26px; padding: 0; list-style: none; max-width: none !important; }
.tt-grid li { display: grid; justify-items: center; gap: 4px; margin: 0; padding: 10px 6px; border-radius: var(--radius-sm); text-align: center; font-size: 0.78rem; line-height: 1.3; color: var(--text-muted); background: linear-gradient(180deg, var(--tt-top), var(--tt-bottom)); }
.tt-grid li { min-width: 0; }
.tt-grid li b { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.tt-grid li span { color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.tt-grid img { width: 60px; height: 60px; object-fit: contain; }
.tt-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 16px 0 26px; }
.tt-mode { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); font-size: 0.88rem; line-height: 1.5; }
.tt-mode img { grid-row: span 2; width: 56px; height: 56px; object-fit: contain; }
.tt-mode b { color: var(--text); }
.tt-mode p { margin: 0 !important; }

@media (max-width: 600px) {
  .tt-field { padding: 14px 8px 10px; }
  .tt-bar { gap: 3px; padding: 6px; }
  .tt-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tt-tile { transition: none; }
  .tt-banner, .tt-shake, .tt-tile.tt-pop { animation-duration: 0.01s; }
}