/* -------------------------------------------------------
   CROISSANT CLICKER  –  style.css
------------------------------------------------------- */

/* -- Variables -- */
:root {
  --wood-dark:    #1a0f06;
  --wood-mid:     #2d1a0a;
  --wood-plank:   #4a2e14;
  --blue-dark:    #0d1a2e;
  --blue-mid:     #122240;
  --blue-light:   #1a3358;
  --blue-bright:  #1e3d6b;
  --gold:         #f5c842;
  --gold-dark:    #c99a1a;
  --gold-glow:    #ffe98a;
  --cream:        #f0e6cc;
  --cream-dim:    #c8b896;
  --green:        #5dba72;
  --red:          #e05050;
  --border-col:   rgba(90,60,20,0.7);
  --font-title:   'Almendra', serif;
  --font-body:    'Crimson Pro', serif;
}

/* -- Reset -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: var(--font-body); }
* { scrollbar-width: thin; scrollbar-color: var(--gold-dark) transparent; }
*::-webkit-scrollbar { width: 6px; }
*::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }

/* -- Body background (wood grain) -- */
body {
  background-color: var(--blue-dark);
  background-image:
    repeating-linear-gradient(91deg,
      transparent 0px, transparent 20px,
      rgba(255,200,80,0.016) 20px, rgba(255,200,80,0.016) 21px),
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 44px,
      rgba(0,0,0,0.10) 44px, rgba(0,0,0,0.10) 46px);
}

/* --------------------------------------
   TOP BAR
-------------------------------------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 200;
  background: linear-gradient(180deg, var(--wood-plank), var(--wood-dark));
  border-bottom: 2px solid var(--gold-dark);
  display: flex; align-items: center;
  box-shadow: 0 3px 14px rgba(0,0,0,0.65);
}
#topbar-brand {
  padding: 0 18px; font-family: var(--font-title);
  font-size: 1.15rem; color: var(--gold); letter-spacing: 0.04em;
  white-space: nowrap; border-right: 1px solid var(--gold-dark);
  height: 100%; display: flex; align-items: center; gap: 8px;
}
#topbar-brand img { width: 26px; height: 26px; object-fit: contain; }
#news-ticker {
  flex: 1; overflow: hidden; padding: 0 16px;
  font-size: 0.88rem; color: var(--cream-dim); white-space: nowrap;
}
#news-inner { display: inline-block; animation: ticker 32s linear infinite; }
@keyframes ticker {
  0%   { transform: translateX(120vw); }
  100% { transform: translateX(-100%); }
}
#topbar-menu { display: flex; gap: 2px; padding: 0 8px; height: 100%; }
.top-btn {
  background: none; border: none; cursor: pointer;
  color: var(--cream-dim); font-family: var(--font-body);
  font-size: 0.82rem; padding: 0 14px; height: 100%;
  transition: background 0.2s, color 0.2s;
  border-left: 1px solid rgba(255,200,80,0.1);
}
.top-btn:hover { background: rgba(245,200,66,0.14); color: var(--gold); }

/* --------------------------------------
   LAYOUT – 3 Spalten
-------------------------------------- */
#layout {
  position: fixed; top: 44px; left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 340px 1fr 320px;
}

/* --------------------------------------
   LEFT PANEL
-------------------------------------- */
#left-panel {
  background: linear-gradient(160deg, var(--blue-mid) 0%, var(--blue-dark) 100%);
  border-right: 2px solid var(--border-col);
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 16px 14px; overflow: hidden; position: relative;
}

#bakery-name {
  font-family: var(--font-title); font-size: 1.05rem;
  color: var(--cream-dim); text-align: center; letter-spacing: 0.06em;
  margin-bottom: 3px;
}
#croissant-count {
  font-family: var(--font-title); font-size: 2.0rem; color: var(--cream);
  text-align: center; line-height: 1.1;
  text-shadow: 0 2px 14px rgba(245,200,66,0.45);
}
#cps-display {
  font-size: 0.9rem; color: var(--cream-dim);
  margin: 2px 0 4px; text-align: center; transition: color 0.4s;
}
#click-display {
  font-size: 0.86rem; color: var(--green);
  margin-bottom: 8px; text-align: center;
}

/* Croissant button */
#croissant-wrap {
  position: relative; cursor: pointer;
  width: 210px; height: 210px; margin: 6px 0;
  user-select: none; -webkit-user-select: none;
  transition: transform 0.09s ease;
  flex-shrink: 0;
}
#croissant-wrap:active { transform: scale(0.91); }
#croissant-img {
  width: 210px; height: 210px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 6px 22px rgba(245,200,66,0.38));
}
#croissant-emoji-fallback {
  font-size: 140px; line-height: 210px; text-align: center;
  width: 210px; display: none; pointer-events: none;
  filter: drop-shadow(0 6px 20px rgba(245,200,66,0.5));
}
#croissant-wrap::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(245,200,66,0); pointer-events: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#croissant-wrap:hover::after {
  border-color: rgba(245,200,66,0.45);
  box-shadow: 0 0 28px rgba(245,200,66,0.22);
}

/* Rausch-Bar (formerly Frenzy) */
#rausch-container {
  width: 100%; margin-top: 6px; display: none;
  flex-shrink: 0;
}
#rausch-title {
  font-family: var(--font-title); font-size: 1rem; color: var(--gold);
  text-align: center; margin-bottom: 4px;
  animation: rauschpulse 0.65s ease-in-out infinite alternate;
}
@keyframes rauschpulse {
  from { color: var(--gold); text-shadow: 0 0 8px var(--gold-dark); }
  to   { color: #fff; text-shadow: 0 0 20px var(--gold), 0 0 40px var(--gold-dark); }
}
#rausch-bar-bg {
  width: 100%; height: 15px; background: rgba(0,0,0,0.55);
  border: 1px solid var(--gold-dark); border-radius: 8px; overflow: hidden;
}
#rausch-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), #fff8a0);
  border-radius: 8px; box-shadow: 0 0 8px var(--gold);
  transition: width 0.4s linear;
}
#rausch-time { font-size: 0.78rem; color: var(--cream-dim); text-align: center; margin-top: 2px; }

/* Stats strip */
#stats-strip {
  width: 100%; margin-top: auto;
  border-top: 1px solid rgba(90,60,20,0.45); padding-top: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px;
  flex-shrink: 0;
}
.stat-item { font-size: 0.76rem; color: var(--cream-dim); }
.stat-item span { color: var(--cream); }

/* --------------------------------------
   MIDDLE PANEL
-------------------------------------- */
#mid-panel {
  background: linear-gradient(180deg, var(--blue-bright) 0%, var(--blue-dark) 100%);
  overflow-y: auto; padding: 14px 16px;
  border-right: 2px solid var(--border-col);
  display: flex; flex-direction: column; gap: 14px;
}
.section-title {
  font-family: var(--font-title); font-size: 0.95rem; color: var(--gold);
  letter-spacing: 0.08em; border-bottom: 1px solid var(--gold-dark);
  padding-bottom: 4px; margin-bottom: 8px;
}

/* Achievement grid */
#achievement-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ach-badge {
  width: 48px; height: 48px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; cursor: default;
  border: 1px solid rgba(90,60,20,0.5);
  position: relative; transition: transform 0.18s;
}
.ach-badge:hover { transform: scale(1.18); z-index: 10; }
.ach-badge.unlocked {
  background: linear-gradient(135deg, rgba(245,200,66,0.22), rgba(200,154,26,0.18));
  border-color: var(--gold-dark); box-shadow: 0 0 10px rgba(245,200,66,0.28);
}
.ach-badge.locked { background: rgba(0,0,0,0.5); filter: grayscale(1) brightness(0.35); }
.ach-badge .ach-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--wood-dark); color: var(--cream);
  border: 1px solid var(--gold-dark); font-size: 0.7rem;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 0.18s; z-index: 100;
  font-family: var(--font-body);
}
.ach-badge:hover .ach-tip { opacity: 1; }

/* Building overview table */
#building-stats { width: 100%; border-collapse: collapse; font-size: 0.81rem; }
#building-stats th {
  text-align: left; color: var(--gold-dark); font-family: var(--font-title);
  font-size: 0.75rem; padding: 3px 6px; border-bottom: 1px solid var(--gold-dark);
}
#building-stats td {
  padding: 4px 6px; color: var(--cream-dim);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
#building-stats td:nth-child(2) { color: var(--cream); text-align: right; }
#building-stats td:nth-child(3) { color: var(--green); text-align: right; }

/* Tip box */
#tip-text {
  font-size: 0.84rem; color: var(--cream-dim); line-height: 1.55;
  padding: 8px; background: rgba(0,0,0,0.2);
  border-left: 3px solid var(--gold-dark); border-radius: 0 4px 4px 0;
}

/* --------------------------------------
   RIGHT PANEL – SHOP
-------------------------------------- */
#right-panel {
  background: linear-gradient(160deg, var(--wood-mid) 0%, var(--wood-dark) 100%);
  border-left: 2px solid var(--border-col);
  display: flex; flex-direction: column; overflow: hidden;
}
#shop-header {
  background: linear-gradient(180deg, var(--wood-plank), var(--wood-mid));
  border-bottom: 2px solid var(--gold-dark);
  padding: 8px 12px; display: flex; flex-direction: column; gap: 5px;
  flex-shrink: 0;
}
#shop-title {
  font-family: var(--font-title); font-size: 1.25rem; color: var(--gold);
  text-align: center; letter-spacing: 0.06em;
}
#shop-tabs { display: flex; gap: 4px; }
.shop-tab {
  flex: 1; padding: 5px 4px; cursor: pointer;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(90,60,20,0.5);
  color: var(--cream-dim); font-family: var(--font-body);
  font-size: 0.8rem; border-radius: 4px; transition: all 0.15s;
  text-align: center; user-select: none;
}
.shop-tab.active { background: rgba(245,200,66,0.18); border-color: var(--gold-dark); color: var(--gold); }
.shop-tab:hover:not(.active) { background: rgba(255,255,255,0.07); }

#shop-scroll {
  flex: 1; overflow-y: auto; padding: 3px 0;
}

/* Shop item */
.shop-item {
  display: grid; grid-template-columns: 52px 1fr auto;
  align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(90,60,20,0.28);
  position: relative; cursor: pointer;
  transition: background 0.14s;
}
.shop-item:hover { background: rgba(30,55,100,0.85); }
.shop-item.can-afford { background: rgba(93,186,114,0.055); }
.shop-item.can-afford:hover { background: rgba(93,186,114,0.13); }
.shop-item.cannot-afford { opacity: 0.48; cursor: not-allowed; }
.shop-item.is-bought { background: rgba(93,186,114,0.09); cursor: default; }
.shop-item.is-bought:hover { background: rgba(93,186,114,0.09); }

.shop-icon {
  width: 44px; height: 44px; border-radius: 6px;
  background: rgba(0,0,0,0.38); border: 1px solid rgba(90,60,20,0.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; flex-shrink: 0; overflow: hidden;
}
.shop-icon img { width: 38px; height: 38px; object-fit: contain; }
.shop-info { overflow: hidden; min-width: 0; }
.shop-name {
  font-family: var(--font-title); font-size: 0.93rem; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-desc { font-size: 0.73rem; color: var(--cream-dim); line-height: 1.25; }
.shop-owned { font-size: 0.68rem; color: var(--green); margin-top: 1px; }

.shop-right { text-align: right; flex-shrink: 0; min-width: 70px; }
.shop-cost { font-family: var(--font-title); font-size: 0.88rem; color: var(--gold); }
.shop-cost.dim { color: var(--cream-dim); }
.shop-buy-btn {
  margin-top: 3px; padding: 3px 10px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  border: none; border-radius: 3px; cursor: pointer;
  color: var(--wood-dark); font-family: var(--font-title);
  font-size: 0.76rem; font-weight: 700;
  transition: filter 0.14s, transform 0.1s;
  display: block; width: 100%;
}
.shop-buy-btn:hover { filter: brightness(1.18); transform: translateY(-1px); }
.shop-buy-btn.btn-disabled {
  filter: grayscale(1) brightness(0.5); cursor: not-allowed; transform: none;
}

/* --------------------------------------
   GOLDEN CROISSANT OVERLAY
-------------------------------------- */
#golden-overlay {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 300; display: none;
}
#golden-btn {
  position: absolute; pointer-events: all; cursor: pointer;
  user-select: none; line-height: 1;
  animation: goldenWobble 0.55s ease-in-out infinite alternate,
             goldenAppear 0.35s ease;
  transition: filter 0.12s, transform 0.12s;
}
#golden-btn img { width: 80px; height: 80px; object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255,220,0,0.95))
          drop-shadow(0 0 40px rgba(255,180,0,0.6)); }
#golden-btn-emoji { font-size: 70px; display: none;
  filter: drop-shadow(0 0 18px rgba(255,220,0,0.95)); }
#golden-btn:hover img,
#golden-btn:hover #golden-btn-emoji { filter: brightness(1.2) drop-shadow(0 0 28px gold); }
@keyframes goldenWobble {
  from { transform: rotate(-14deg) scale(1.0); }
  to   { transform: rotate(14deg)  scale(1.06); }
}
@keyframes goldenAppear {
  from { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  to   { opacity: 1; }
}

/* --------------------------------------
   FLOATING TEXT
-------------------------------------- */
.float-text {
  position: fixed; pointer-events: none; z-index: 400;
  font-family: var(--font-title); font-weight: 700; font-size: 1.25rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  animation: floatUp 1.05s ease-out forwards;
  white-space: nowrap;
}
@keyframes floatUp {
  0%   { opacity: 1;   transform: translateY(0) scale(1); }
  60%  { opacity: 0.9; transform: translateY(-60px) scale(1.04); }
  100% { opacity: 0;   transform: translateY(-90px) scale(0.9); }
}

/* --------------------------------------
   ACHIEVEMENT TOAST
-------------------------------------- */
#ach-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(14px);
  z-index: 500; min-width: 300px;
  background: linear-gradient(135deg, var(--wood-dark), var(--blue-dark));
  border: 2px solid var(--gold); border-radius: 8px;
  padding: 10px 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 28px rgba(245,200,66,0.42);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
#ach-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#ach-toast-icon { font-size: 2rem; flex-shrink: 0; }
#ach-toast-text { flex: 1; }
#ach-toast-title { font-size: 0.72rem; color: var(--gold); font-family: var(--font-title); letter-spacing: 0.08em; }
#ach-toast-name  { font-size: 1.02rem; color: var(--cream); font-family: var(--font-title); }
#ach-toast-desc  { font-size: 0.76rem; color: var(--cream-dim); }

/* --------------------------------------
   SAVE TOAST
-------------------------------------- */
#save-toast {
  position: fixed; top: 52px; right: 12px; z-index: 500;
  background: var(--wood-dark); border: 1px solid var(--green);
  color: var(--green); font-family: var(--font-body);
  font-size: 0.8rem; padding: 5px 12px; border-radius: 4px;
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
#save-toast.visible { opacity: 1; }

/* --------------------------------------
   MODAL
-------------------------------------- */
#modal-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.78); display: none;
  align-items: center; justify-content: center;
}
#modal-overlay.open { display: flex; }
#modal-box {
  background: linear-gradient(160deg, var(--blue-mid), var(--blue-dark));
  border: 2px solid var(--gold-dark); border-radius: 10px;
  padding: 24px; width: 480px; max-height: 80vh; overflow-y: auto;
  color: var(--cream); font-family: var(--font-body);
}
#modal-box h2 { font-family: var(--font-title); color: var(--gold); margin-bottom: 16px; }
#modal-close {
  float: right; background: none; border: none;
  color: var(--cream-dim); font-size: 1.4rem; cursor: pointer; line-height: 1;
}
#modal-close:hover { color: var(--cream); }
.modal-btn {
  display: block; width: 100%; margin: 6px 0; padding: 10px;
  background: rgba(245,200,66,0.1); border: 1px solid var(--gold-dark);
  color: var(--cream); font-family: var(--font-title); font-size: 1rem;
  border-radius: 6px; cursor: pointer; transition: background 0.18s; text-align: left;
}
.modal-btn:hover { background: rgba(245,200,66,0.22); }
.modal-btn.danger { border-color: var(--red); color: var(--red); background: rgba(224,80,80,0.07); }
.modal-btn.danger:hover { background: rgba(224,80,80,0.18); }
.modal-textarea {
  width: 100%; height: 80px; background: var(--blue-dark);
  border: 1px solid var(--gold-dark); color: var(--cream);
  font-family: monospace; font-size: 0.7rem; padding: 6px;
  resize: none; border-radius: 4px; margin-top: 6px;
}
.modal-label { font-size: 0.82rem; color: var(--cream-dim); margin-top: 10px; display: block; }
hr.modal-hr { border: none; border-top: 1px solid rgba(90,60,20,0.4); margin: 14px 0; }
table.modal-stats { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.modal-stats td { padding: 5px 4px; }
table.modal-stats td:first-child { color: var(--cream-dim); }
table.modal-stats td:last-child { text-align: right; color: var(--cream); }