/* =============================================================================
   Pentomino Web-Play — Kid-friendly Theme
   Layout: 3-Zonen (Du | Pool/Board | KI) — gleich fuer Draft und Play.
   ============================================================================= */

:root {
  --bg:          #fff9f3;
  --surface:     #ffffff;
  --surface-alt: #f8fafc;
  --border:      #e2e8f0;
  --text:        #1e293b;
  --text-dim:    #64748b;

  --a:       #3b82f6;
  --a-dark:  #2563eb;
  --a-soft:  #dbeafe;
  --a-tray:  #eff6ff;

  --b:       #f97316;
  --b-dark:  #ea580c;
  --b-soft:  #ffedd5;
  --b-tray:  #fff7ed;

  --accent:  #facc15;
  --accent-d:#eab308;

  --ok:      #22c55e;
  --ok-dark: #15803d;
  --ok-soft: #dcfce7;

  --warn:      #ef4444;
  --warn-dark: #b91c1c;
  --warn-soft: rgba(239, 68, 68, 0.18);

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow:    0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);

  --font: 'Nunito', -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  /* dvh statt vh: in iPad-Safari verhindert das Layout-Shifts durch
     die dynamische URL-Bar. Fallback: 100vh fuer alte Browser. */
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Schwebender "Neues Spiel"-Button rechts oben */
.btn-new-float {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  padding: 10px 18px;
  min-height: 40px;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text-dim);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-new-float:hover {
  background: var(--surface);
  color: var(--a-dark);
  border-color: var(--a);
  box-shadow: var(--shadow);
}

/* ----- Buttons ----- */
button {
  background: var(--a);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  min-height: 48px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
}
button:hover {
  background: var(--a-dark);
  box-shadow: var(--shadow);
}
button:active { transform: translateY(1px); }
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
button:disabled {
  background: var(--border);
  color: var(--text-dim);
  cursor: not-allowed;
  box-shadow: none;
}

.hidden { display: none !important; }
.screen { padding: 0; }

/* ============================================================================
   3-Zonen-Layout (Du | Mitte | KI)
   Verwendet von Draft und Play.
   ============================================================================ */

.three-zones {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 20px;
  align-items: start;
}

.zone {
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow);
}
.zone-a { background: var(--a-tray); }
.zone-b { background: var(--b-tray); }
.zone-center { background: var(--surface); }

.zone h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.01em;
}
.zone-a h3       { color: var(--a-dark); }
.zone-b h3       { color: var(--b-dark); }
.zone-center h3  { color: var(--text-dim); }

/* Zone fuer das Board in der Play-Phase — enger gestaltet, damit das Board
   nicht durch einen weissen Rahmen fliesst.
   padding-top reserviert Raum fuer die Transform-Toolbar, die ueber dem
   Ghost-Stein schwebt und sonst am oberen Rand abgeschnitten wuerde,
   wenn der Stein in der obersten Boardzeile liegt. */
.zone-center-board {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 12px;
  padding-top: 76px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ----- Pieces-Grid (2x3 in Seitenzonen, 3x4 in Draft-Mitte) ----- */
.pieces-grid {
  display: grid;
  gap: 10px;
}
/* Kacheln sind quadratisch; Zeilenhoehe folgt aus aspect-ratio der Cells. */
.pieces-grid.grid-2x3 {
  grid-template-columns: repeat(2, 1fr);
}
.pieces-grid.grid-3x4 {
  grid-template-columns: repeat(3, 1fr);
}

/* ----- Piece-Cell: einheitliche Komponente fuer Draft-Pool, Draft-Side, Play-Tray ---- */
.piece-cell {
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  user-select: none;
  transition: transform 0.1s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
  overflow: hidden;
  aspect-ratio: 1;
}
.piece-cell svg {
  max-height: 70%;
  max-width: 85%;
  width: auto;
  height: auto;
  flex-shrink: 0;
}
.piece-cell .name {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
}
.piece-cell svg { display: block; }

.piece-cell.empty {
  background: transparent;
  border: 2px dashed var(--border);
  box-shadow: none;
}

/* Klickbar (Draft: verfuegbarer Pool-Stein, Play: eigener Tray-Stein wenn A dran) */
.piece-cell.clickable { cursor: pointer; }
.piece-cell.clickable:hover {
  transform: translateY(-2px);
  border-color: var(--a);
  background: var(--a-tray);
  box-shadow: var(--shadow);
}
/* Nicht klickbar waehrend Gegner am Zug */
.piece-cell.waiting {
  cursor: default;
  opacity: 0.75;
}
/* Spieler A hat diesen Stein gedraftet */
.piece-cell.owned-a {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.piece-cell.owned-a .name { color: var(--ok-dark); }
/* Spieler B (KI) hat diesen Stein gedraftet */
.piece-cell.owned-b {
  border-color: var(--b);
  background: var(--b-soft);
}
.piece-cell.owned-b .name { color: var(--b-dark); }
/* Play-Phase: aktuell ausgewaehlter eigener Stein */
.piece-cell.selected {
  border-color: var(--accent-d);
  background: #fffbea;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.25);
}

/* ----- Board (Play) ----- */
#board-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  /* touch-action: none verhindert, dass Safari waehrend des Drags scrollt. */
  touch-action: none;
}
#board {
  background: var(--surface);
  border-radius: var(--radius);
  display: block;
  cursor: pointer;
  touch-action: none;
}

/* ----- Ghost-Toolbar (4 Transform-Buttons) ------------------------------- */
/* Eine Reihe mit 4 Buttons (Rotate CCW / Flip vert / Flip horz / Rotate CW),
   zentriert ueber der horizontalen Mitte des Ghosts. Wird per JS positioniert. */
.ghost-toolbar {
  position: absolute;
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  z-index: 6;
  /* JS setzt left (= Ghost-Mitte) und top. Transform zentriert horizontal. */
  transform: translate(-50%, 0);
  transition: opacity 0.1s;
}
.ghost-toolbar.hidden { display: none; }

.ghost-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--a-dark);
  border: 2px solid var(--a);
  box-shadow: var(--shadow-sm);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.ghost-ctrl:hover {
  background: var(--a-tray);
  box-shadow: var(--shadow);
}
.ghost-ctrl:active { transform: scale(0.92); }
.ghost-ctrl:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--text-dim);
}

/* ----- Ghost-Drag-Handle (in Steinmitte, zum Verschieben) ---------------- */
.ghost-handle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 999px;
  background: var(--a);
  color: white;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  cursor: grab;
  touch-action: none;
  z-index: 7;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
}
.ghost-handle:hover {
  background: var(--a-dark);
  box-shadow: var(--shadow-lg);
}
.ghost-handle:active,
.ghost-handle.dragging {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: var(--shadow-lg);
}
.ghost-handle.hidden { display: none; }

/* ----- "Platzieren!"-Button unter dem Board ----------------------------- */
.btn-place {
  margin-top: 14px;
  min-height: 56px;
  padding: 14px 32px;
  font-size: 1.1rem;
  background: var(--ok);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: 800;
  box-shadow: var(--shadow);
  letter-spacing: 0.02em;
}
.btn-place:hover {
  background: var(--ok-dark);
  box-shadow: var(--shadow-lg);
}
.btn-place.hidden { display: none; }

/* ============================================================================
   Result-Banner (Spielende): bleibt unterhalb des Boards, Board bleibt
   permanent sichtbar, damit der User die Endstellung nachvollziehen kann.
   ============================================================================ */

.result-banner {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow);
  animation: resultFadeIn 0.3s ease-out;
  max-width: 100%;
}
.result-banner.hidden { display: none; }
.result-banner.win  { background: var(--ok-soft);  border: 2px solid var(--ok); }
.result-banner.lose { background: var(--b-soft);   border: 2px solid var(--b); }
.result-banner.draw { background: var(--surface); border: 2px solid var(--border); }

.result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-width: 0;
}
.result-text strong {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.result-banner.win  .result-text strong { color: var(--ok-dark); }
.result-banner.lose .result-text strong { color: var(--b-dark); }
.result-text span {
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 600;
}

.result-banner button {
  flex-shrink: 0;
  padding: 10px 18px;
  min-height: 44px;
  font-size: 0.95rem;
}

@keyframes resultFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   Modal (Spielstart-Ankuendigung)
   ============================================================================ */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modalFadeIn 0.2s ease-out;
}
.modal.hidden { display: none !important; }

.modal-panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
  max-width: 480px;
  width: calc(100% - 40px);
  text-align: center;
  animation: modalPop 0.25s ease-out;
}
.modal-panel h2 {
  margin: 0 0 16px;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--a-dark);
}
.modal-panel p {
  margin: 0 0 28px;
  font-size: 1.1rem;
  color: var(--text);
  line-height: 1.5;
}
.modal-panel button {
  font-size: 1.05rem;
  padding: 14px 32px;
  min-height: 52px;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalPop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ============================================================================
   Responsive
   ============================================================================
   - iPad Portrait (768-1024px): Board oben breit, Trays darunter nebeneinander
     (Du links, KI rechts). Fuer die Draft-Phase bleibt die 3-Zonen-Anordnung,
     aber mit Pool in der Mitte (breite Spalte) und gestackten Seitentrays.
   - Schmal (< 768px): alles einspaltig gestapelt.
*/

@media (max-width: 1024px) and (min-width: 768px) {
  /* Play-Phase: Board oben gross, darunter zwei Tray-Spalten. */
  #screen-play.three-zones {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "board board"
      "a     b";
    gap: 16px;
  }
  #screen-play .zone-center-board {
    grid-area: board;
  }
  #screen-play .zone-a { grid-area: a; }
  #screen-play .zone-b { grid-area: b; }
  #screen-play #board {
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
  }
  /* Draft-Phase: Pool mittig gross, Seitentrays kleiner drumherum.
     3 Spalten bleiben, aber insgesamt schlanker. */
  #screen-draft.three-zones {
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .three-zones {
    grid-template-columns: 1fr;
  }
  .pieces-grid.grid-2x3 { min-height: auto; }
  .pieces-grid.grid-3x4 { min-height: auto; }
  #board { width: 100%; height: auto; max-width: 480px; }
}