/* ==================================================================
   🌄 Góreczowa Wioseczka — style (clean rewrite)
   ================================================================== */

/* ═══════════════════════════════════════════════════════════
   1. RESET & BASE
   ═══════════════════════════════════════════════════════════ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #1a2a1f;
  color: #f0f0e8;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

button, .action-btn, .item-card {
  font-family: inherit;
}

svg { touch-action: manipulation; }

/* ═══════════════════════════════════════════════════════════
   2. APP CONTAINER
   ═══════════════════════════════════════════════════════════ */

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
  position: relative;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   3. LOADER
   ═══════════════════════════════════════════════════════════ */

#loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  background: #1a2a1f;
}
#loader .spin {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: #8bc34a;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   4. GAME CONTAINER
   ═══════════════════════════════════════════════════════════ */

#game-container {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════
   5. TOPBAR
   ═══════════════════════════════════════════════════════════ */

#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(20, 40, 20, 0.95);
  border-bottom: 2px solid #4a7a3a;
  flex-shrink: 0;
  min-height: 52px;
  flex-wrap: wrap;
  gap: 4px;
}

#topbar .title {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #8bc34a, #fdd835);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

#topbar .stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
}

#topbar .stat {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.08);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
#topbar .stat .label { opacity: 0.7; font-size: 11px; }
#topbar .stat .value { font-weight: 600; font-size: 15px; }
#topbar .stat .value.tokens { color: #fdd835; }

#btn-hub {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #f0f0e8;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s;
}
#btn-hub:active { transform: scale(0.95); }

/* ═══════════════════════════════════════════════════════════
   6. SVG BOARD
   ═══════════════════════════════════════════════════════════ */

#game-svg-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #2a4a2a;
  min-height: 0;
}

#game-svg-container svg {
  width: 100%;
  height: 100%;
  display: block;
  background: #2a4a2a;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   7. BOTTOM PANEL
   ═══════════════════════════════════════════════════════════ */

#bottom-panel {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px 8px;
  background: rgba(20, 40, 20, 0.95);
  border-top: 2px solid #4a7a3a;
  flex-shrink: 0;
  min-height: 56px;
  gap: 4px;
}

#bottom-panel button {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #f0f0e8;
  padding: 8px 14px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 42px;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.1s, background 0.15s;
}

#bottom-panel button:active {
  transform: scale(0.93);
  background: rgba(255,255,255,0.2);
}

#bottom-panel button.active {
  background: #4a8a3a;
  border-color: #6aaa5a;
}

/* ═══════════════════════════════════════════════════════════
   8. MODAL
   ═══════════════════════════════════════════════════════════ */

#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
#modal-overlay.open { display: flex; }

#modal {
  background: #1e3a1e;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  border-radius: 24px 24px 0 0;
  padding: 20px 16px 30px;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
  animation: slideUp 0.25s ease;
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
}

#modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 2px solid #4a7a3a;
}

#modal-header .close {
  background: none;
  border: none;
  color: #f0f0e8;
  font-size: 28px;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}

#modal-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#modal::-webkit-scrollbar { width: 6px; }
#modal::-webkit-scrollbar-track { background: transparent; }
#modal::-webkit-scrollbar-thumb { background: #4a7a3a; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════
   9. ITEM CARDS
   ═══════════════════════════════════════════════════════════ */

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.item-card {
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  touch-action: manipulation;
  border: 1px solid transparent;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item-card:active {
  transform: scale(0.94);
  background: rgba(255,255,255,0.12);
}

.item-card .emoji { font-size: 32px; line-height: 1.2; }
.item-card .name { font-size: 12px; font-weight: 600; margin-top: 2px; }
.item-card .detail { font-size: 11px; opacity: 0.7; }
.item-card .price { font-size: 12px; color: #fdd835; font-weight: 600; margin-top: 2px; }
.item-card .qty {
  font-size: 11px;
  background: rgba(255,255,255,0.1);
  padding: 1px 10px;
  border-radius: 12px;
  margin-top: 2px;
}

.item-card .action-btn {
  margin-top: 4px;
  background: #4a8a3a;
  border: none;
  color: #fff;
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 32px;
  transition: transform 0.1s;
}
.item-card .action-btn:active { transform: scale(0.92); }
.item-card .action-btn.sell { background: #8a4a3a; }

/* ═══════════════════════════════════════════════════════════
   10. TOOLTIP (desktop)
   ═══════════════════════════════════════════════════════════ */

#tooltip {
  position: fixed;
  pointer-events: none;
  background: rgba(10, 30, 10, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid #6aaa5a;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  max-width: 220px;
  z-index: 200;
  display: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  transition: opacity 0.12s;
  line-height: 1.4;
}

#tooltip .tt-title { font-weight: 700; font-size: 16px; }
#tooltip .tt-sub { opacity: 0.8; font-size: 13px; }

#tooltip .tt-progress {
  margin-top: 4px;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  overflow: hidden;
}
#tooltip .tt-progress .fill {
  height: 100%;
  background: #8bc34a;
  border-radius: 4px;
  transition: width 0.3s;
}

/* ═══════════════════════════════════════════════════════════
   11. MODE INDICATOR
   ═══════════════════════════════════════════════════════════ */

#mode-indicator {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 40, 20, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid #6aaa5a;
  border-radius: 24px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  animation: fadeIn 0.2s ease;
  max-width: 90%;
}
#mode-indicator.hidden { display: none; }

#mode-indicator #mode-text {
  font-size: 14px;
  color: #f0f0e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#mode-indicator button {
  background: rgba(255,80,80,0.2);
  border: 1px solid rgba(255,80,80,0.4);
  color: #ff9090;
  border-radius: 12px;
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  min-height: 32px;
}
#mode-indicator button:active { transform: scale(0.95); }

/* ═══════════════════════════════════════════════════════════
   12. ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideUpMobile {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   13. DESKTOP (min-width: 768px)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  #modal {
    border-radius: 24px;
    margin-bottom: 40px;
    max-height: 70vh;
  }
  #modal-overlay {
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   14. TABLET (max-width: 768px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #topbar {
    padding: 8px 10px;
    min-height: 48px;
  }
  #topbar .title { font-size: 15px; }
  #topbar .stats { font-size: 12px; gap: 6px; }
  #topbar .stat { padding: 3px 8px; }
  #topbar .stat .value { font-size: 13px; }

  #btn-hub { padding: 8px 12px; font-size: 12px; }

  #bottom-panel {
    padding: 8px 6px;
    min-height: 68px;
    gap: 6px;
  }
  #bottom-panel button {
    font-size: 13px;
    padding: 10px 14px;
    min-height: 48px;
    min-width: 48px;
    flex: 1 1 auto;
  }

  .item-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
  }
  .item-card {
    min-height: 100px;
    padding: 12px 8px;
  }
  .item-card .emoji { font-size: 36px; }
  .item-card .name { font-size: 13px; }
  .item-card .price { font-size: 13px; }
  .item-card .qty { font-size: 12px; }
  .item-card .action-btn {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 36px;
    min-width: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════
   15. PHONE (max-width: 480px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* ── TOPBAR ────────────────────────────────── */
  #topbar {
    padding: 6px 8px;
    gap: 6px;
    flex-wrap: wrap;
  }
  #topbar .title {
    font-size: 13px;
    order: 1;
  }
  #btn-hub {
    order: 2;
    padding: 6px 10px;
    font-size: 11px;
    margin-left: auto;
    min-height: 32px;
  }
  #topbar .stats {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 4px;
    margin-top: 4px;
  }
  #topbar .stat {
    padding: 3px 7px;
    font-size: 11px;
  }
  #topbar .stat .label { font-size: 10px; }
  #topbar .stat .value { font-size: 12px; }

  /* ── BOTTOM PANEL ──────────────────────────── */
  #bottom-panel {
    padding: 6px 4px;
    min-height: 64px;
    gap: 4px;
  }
  #bottom-panel button {
    font-size: 11px;
    padding: 8px 6px;
    min-height: 52px;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
    border-radius: 16px;
  }

  /* ── ITEM GRID ─────────────────────────────── */
  .item-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
  }
  .item-card {
    min-height: 110px;
    padding: 10px 6px;
  }
  .item-card .emoji { font-size: 32px; }
  .item-card .name { font-size: 11px; }
  .item-card .price { font-size: 11px; }
  .item-card .detail { font-size: 10px; }
  .item-card .qty { font-size: 11px; padding: 1px 8px; }
  .item-card .action-btn {
    padding: 8px 10px;
    font-size: 12px;
    min-height: 38px;
    border-radius: 12px;
  }

  /* ── MODAL jako bottom-sheet ───────────────── */
  #modal-overlay {
    align-items: flex-end;
  }
  #modal {
    max-width: 100%;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    padding: 16px 12px calc(24px + env(safe-area-inset-bottom));
  }
  #modal-header {
    font-size: 17px;
    margin-bottom: 12px;
  }
  #modal-header .close {
    font-size: 32px;
    padding: 4px 12px;
    min-width: 44px;
    min-height: 44px;
  }

  /* ── TOOLTIP jako bottom bar ───────────────── */
  #tooltip {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    max-width: none;
    width: auto;
    transform: none !important;
    font-size: 13px;
    padding: 10px 14px;
    text-align: left;
    border-radius: 14px;
    background: rgba(10, 30, 10, 0.96);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    animation: slideUpMobile 0.18s ease;
  }
  #tooltip .tt-title { font-size: 15px; }
  #tooltip .tt-sub { font-size: 12px; }

  /* ── MODE INDICATOR ────────────────────────── */
  #mode-indicator {
    bottom: 12px;
    left: 8px;
    right: 8px;
    transform: none;
    max-width: none;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13px;
  }
  #mode-indicator #mode-text { font-size: 13px; }
  #mode-indicator button {
    padding: 6px 14px;
    font-size: 12px;
    min-height: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════
   16. SMALL PHONE (max-width: 360px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 360px) {
  #topbar .title {
    font-size: 12px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #topbar .stat .value { font-size: 11px; }

  #bottom-panel button {
    font-size: 10px;
    padding: 6px 4px;
    min-height: 48px;
  }

  .item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════
   17. LANDSCAPE PHONE (max-height: 500px)
   ═══════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
  #topbar {
    min-height: 40px;
    padding: 4px 8px;
  }
  #topbar .title { font-size: 13px; }

  #bottom-panel {
    min-height: 48px;
    padding: 4px 6px;
  }
  #bottom-panel button {
    min-height: 38px;
    padding: 6px 10px;
    font-size: 12px;
    flex-direction: row;
  }

  #mode-indicator {
    bottom: 8px;
    padding: 8px 14px;
    font-size: 12px;
  }
  #mode-indicator #mode-text { font-size: 12px; }

  /* 📱 Tooltip jako bottom bar w landscape */
  #tooltip {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 56px !important;
    top: auto !important;
    max-width: none;
    width: auto;
    transform: none !important;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    animation: slideUpMobile 0.18s ease;
  }
  #tooltip .tt-title { font-size: 14px; }
  #tooltip .tt-sub { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════
   18. TOUCH / HOVER MODES
   ═══════════════════════════════════════════════════════════ */

/* Bez hovera na dotyku */
@media (hover: none) {
  .item-card:hover,
  .game-card:hover,
  .table-card:hover {
    transform: none;
    background: inherit;
  }
  .item-card:active {
    transform: scale(0.96);
    background: rgba(255,255,255,0.14);
  }
  #bottom-panel button:active {
    transform: scale(0.94);
  }
}

/* Większe pole dotknięcia */
@media (pointer: coarse) {
  button, .action-btn, .item-card, #modal-close {
    -webkit-tap-highlight-color: rgba(139, 195, 74, 0.2);
    cursor: pointer;
  }

  .item-card .action-btn {
    position: relative;
  }
  .item-card .action-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
  }

  #bottom-panel button,
  #mode-indicator button,
  #btn-hub {
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════
   19. REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}