/* Data Clicker page. Colors, buttons, panels, messages and answer choices come from style.css and td.css */

body.clicker { display: flex; flex-direction: column; height: 100vh; }

.clicker-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
}
@media (max-width: 760px) {
  body.clicker { height: auto; min-height: 100vh; overflow: auto; }
  html:has(body.clicker) { overflow: auto; }
  .clicker-main { grid-template-columns: 1fr; }
  .play-area { min-height: 70vh; }
}

/* ---------- Play area ---------- */
.play-area {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 55%, rgba(46, 230, 255, 0.12), transparent 55%),
    linear-gradient(rgba(46, 230, 255, 0.04) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(46, 230, 255, 0.04) 1px, transparent 1px) 0 0 / 40px 40px;
  user-select: none;
}
.play-area.overdrive-on { background-color: rgba(255, 210, 63, 0.06); }

.bank { text-align: center; }
.bank-bytes { margin: 0; font-size: 1.1rem; color: var(--text-dim); }
.bank-bytes strong { display: block; font-family: var(--pixel); font-size: clamp(1.4rem, 4vw, 2.3rem); color: var(--gold); text-shadow: 0 0 18px rgba(255, 210, 63, 0.45); }
.bank-rate { margin: 0.4rem 0 0; color: var(--cyan); font-weight: 800; }

.big-shield {
  width: clamp(170px, 26vw, 250px);
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0 0 22px rgba(46, 230, 255, 0.6));
  transition: transform 0.12s ease, filter 0.2s ease;
  animation: float 3s ease-in-out infinite;
}
.big-shield svg { display: block; width: 100%; }
.big-shield:hover { filter: drop-shadow(0 0 32px rgba(46, 230, 255, 0.9)); }
.big-shield:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.big-shield.bump svg { animation: shield-bump 0.15s ease-out; }
@keyframes shield-bump { 50% { transform: scale(0.92); } }
.overdrive-on .big-shield { filter: drop-shadow(0 0 34px rgba(255, 210, 63, 0.95)); }

.click-hint { margin: 0; font-weight: 800; color: var(--text-dim); transition: opacity 0.5s ease; animation: hint-bob 1.6s ease-in-out infinite; }
.click-hint.gone { opacity: 0; }
@keyframes hint-bob { 50% { transform: translateY(-4px); } }

.float-text {
  position: absolute;
  z-index: 3;
  font-family: var(--pixel);
  font-size: 0.85rem;
  color: var(--gold);
  pointer-events: none;
  transform: translate(-50%, -50%);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  animation: float-up 0.9s ease-out forwards;
}
@keyframes float-up { to { opacity: 0; transform: translate(-50%, -150%); } }

.bit {
  position: absolute;
  z-index: 2;
  font-family: Consolas, monospace;
  font-weight: 700;
  color: var(--cyan);
  pointer-events: none;
  animation: bit-fly 0.7s ease-out forwards;
}
@keyframes bit-fly { to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(90deg); } }

.overdrive {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--pixel);
  font-size: 0.7rem;
  color: var(--gold);
  animation: boost-glow 1s ease-in-out infinite;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
}
.overdrive-bar { width: 140px; height: 10px; border-radius: 6px; background: #2a3570; overflow: hidden; }
.overdrive-bar span { display: block; height: 100%; background: var(--gold); transition: width 0.1s linear; }

/* ---------- Scam pop-up: looks like a little window ---------- */
.scam-popup {
  position: absolute;
  z-index: 5;
  width: min(340px, 90%);
  background: var(--panel);
  border: 2px solid var(--pink);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 61, 139, 0.35);
  overflow: hidden;
}
.scam-popup.pop { animation: popup-in 0.25s ease-out; }
@keyframes popup-in { from { opacity: 0; transform: scale(0.8); } }
.scam-bar {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 800;
  background: var(--pink);
  color: #fff;
}
.scam-body { padding: 0.6rem 0.8rem 0.8rem; }
.scam-ask { margin: 0; font-family: var(--pixel); font-size: 0.7rem; color: var(--gold); text-align: center; }
.scam-popup .message { margin: 0.5rem 0; padding: 0.6rem 0.8rem; font-size: 0.88rem; }
.scam-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.scam-buttons .choice.big { padding: 0.7rem; font-size: 0.7rem; }
.scam-popup .result { margin-top: 0.4rem; font-size: 0.88rem; }

/* ---------- Secret message bubble: small on purpose ---------- */
.secret-bubble {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 30px;
  height: 22px;
  padding: 0;
  background: var(--gold);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 210, 63, 0.7);
  animation: bubble-in 0.3s ease-out, bubble-bob 1.2s ease-in-out 0.3s infinite;
}
.secret-bubble::after {
  content: '';
  position: absolute;
  left: 5px;
  bottom: -6px;
  border: 4px solid transparent;
  border-top: 5px solid var(--gold);
  border-left: 4px solid var(--gold);
}
.secret-bubble span { width: 4px; height: 4px; border-radius: 50%; background: var(--bg); animation: typing 0.9s ease-in-out infinite; }
.secret-bubble span:nth-child(2) { animation-delay: 0.15s; }
.secret-bubble span:nth-child(3) { animation-delay: 0.3s; }
.secret-bubble.fading { animation: bubble-blink 0.25s steps(2) infinite; }
.secret-bubble:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes bubble-in { from { opacity: 0; transform: scale(0.3); } }
@keyframes bubble-bob { 50% { transform: translateY(-3px); } }
@keyframes typing { 50% { transform: translateY(-2px); } }
@keyframes bubble-blink { 50% { opacity: 0.35; } }

/* ---------- Shop ---------- */
.shop {
  overflow-y: auto;
  padding: 0.8rem 1rem 1rem;
  background: rgba(7, 11, 31, 0.9);
  border-left: 2px solid var(--cyan-dim);
}
.shop-title { margin: 0.4rem 0 0.6rem; font-family: var(--pixel); font-size: 0.75rem; color: var(--gold); }
.shop-empty { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--text-dim); }

.upgrades { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.upgrade {
  position: relative;
  width: 58px;
  height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0;
  font: inherit;
  color: var(--text);
  background: var(--bg-2);
  border: 2px solid var(--gold);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
  animation: popup-in 0.3s ease-out;
}
.upgrade.for-helper { border-color: var(--cyan); }
.upgrade-emoji { font-size: 1.4rem; line-height: 1; }
.upgrade-cost { font-size: 0.65rem; font-weight: 800; color: var(--gold); }
.upgrade-q {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 16px;
  color: var(--bg);
  background: var(--cyan);
  border-radius: 50%;
}
.upgrade:hover:not(.cant), .upgrade:focus-visible { transform: translateY(-2px); box-shadow: 0 0 12px rgba(255, 210, 63, 0.6); outline: none; }
.upgrade.cant { opacity: 0.4; cursor: not-allowed; }

.helpers { display: grid; gap: 0.45rem; }
.helper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: var(--bg-2);
  border: 2px solid var(--cyan-dim);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
  animation: popup-in 0.3s ease-out;
}
.helper:hover:not(.cant), .helper:focus-visible { border-color: var(--cyan); transform: translateX(-3px); box-shadow: 0 0 14px rgba(46, 230, 255, 0.4); outline: none; }
.helper.cant { opacity: 0.5; cursor: not-allowed; }
.helper.locked { border-style: dashed; }
.helper-emoji { font-size: 1.9rem; line-height: 1; }
.helper.locked .helper-emoji { filter: grayscale(0.8); }
.helper-info { display: flex; flex-direction: column; min-width: 0; }
.helper-name { font-weight: 800; }
.helper-habit { font-size: 0.78rem; color: var(--text-dim); line-height: 1.3; }
.helper-cost { margin-top: 0.2rem; font-size: 0.8rem; font-weight: 700; color: var(--gold); }
.helper.locked .helper-cost { color: var(--pink); }
.helper-owned { font-family: var(--pixel); font-size: 1.1rem; color: var(--cyan); opacity: 0.85; }
.helper.mystery { cursor: default; opacity: 0.45; border-style: dashed; }

/* ---------- Safety tip ticker ---------- */
.ticker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  background: rgba(7, 11, 31, 0.95);
  border-top: 2px solid var(--cyan-dim);
  white-space: nowrap;
  overflow: hidden;
}
.ticker-tag { flex: none; font-family: var(--pixel); font-size: 0.6rem; color: var(--bg); background: var(--cyan); padding: 0.25rem 0.5rem; border-radius: 4px; }
#ticker-text { overflow: hidden; text-overflow: ellipsis; }
#ticker-text.in { animation: tip-in 0.4s ease-out; }
@keyframes tip-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Help ---------- */

@media (prefers-reduced-motion: reduce) {
  .big-shield, .click-hint, .secret-bubble, .secret-bubble span, .overdrive, .upgrade, .helper { animation: none; }
}
.scam-popup .scam-dismiss { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-dim); text-align: center; }
.scam-popup:has(.scam-dismiss) { cursor: pointer; }