/* Krillion Unlimited — ocean dive theme */
:root {
  --ink: #eaf6ff;
  --muted: rgba(234, 246, 255, 0.72);
  --card: rgba(8, 24, 44, 0.55);
  --accent: #4fd1ff;
  --accent2: #9d7bff;
  --good: #37d67a;
  --bad: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  transition: background 1.2s ease;
  background: linear-gradient(180deg, #0b3b66 0%, #082a4d 60%, #061f3a 100%);
}
/* 7 depth zones — background deepens as you dive */
body[data-depth="0"] { background: linear-gradient(180deg, #0b3b66 0%, #082a4d 60%, #061f3a 100%); }
body[data-depth="1"] { background: linear-gradient(180deg, #0a3260 0%, #072344 60%, #051a33 100%); }
body[data-depth="2"] { background: linear-gradient(180deg, #0a2a55 0%, #061c3c 60%, #041426 100%); }
body[data-depth="3"] { background: linear-gradient(180deg, #081f4a 0%, #051537 60%, #030e20 100%); }
body[data-depth="4"] { background: linear-gradient(180deg, #061740 0%, #04102c 60%, #020a18 100%); }
body[data-depth="5"] { background: linear-gradient(180deg, #050f31 0%, #030b22 60%, #010613 100%); }
body[data-depth="6"] { background: linear-gradient(180deg, #030a24 0%, #02061a 60%, #00040e 100%); }
body[data-depth="7"] { background: linear-gradient(180deg, #010512 0%, #010310 60%, #000108 100%); }

#bg-bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bubble {
  position: absolute; bottom: -40px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.05));
  animation: rise linear infinite;
}
@keyframes rise { to { transform: translateY(-110vh); } }

.site-header {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; max-width: 720px; margin: 0 auto;
}
.logo { font-weight: 800; font-size: 1.15rem; letter-spacing: .3px; }
.highscore-chip {
  background: var(--card); border: 1px solid rgba(255,255,255,.15);
  padding: 6px 12px; border-radius: 999px; font-size: .9rem; backdrop-filter: blur(6px);
}

main { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 18px 40px; }
h1 { font-size: 1.35rem; text-align: center; margin: 6px 0 18px; line-height: 1.35; }
.screen { display: none; }
.screen.active { display: block; animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tagline { text-align: center; color: var(--muted); line-height: 1.6; margin: 0 0 20px; }
.mode-select { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.mode-btn {
  background: var(--card); border: 2px solid rgba(255,255,255,.14); color: var(--ink);
  border-radius: 14px; padding: 14px 10px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; gap: 6px; backdrop-filter: blur(6px);
  transition: border-color .2s, transform .1s;
}
.mode-btn.selected { border-color: var(--accent); box-shadow: 0 0 18px rgba(79,209,255,.25); }
.mode-btn:active { transform: scale(.97); }
.mode-title { font-weight: 700; font-size: 1.02rem; }
.mode-desc { font-size: .8rem; color: var(--muted); }

.btn-primary {
  display: block; width: 100%; padding: 15px; font-size: 1.1rem; font-weight: 800;
  color: #04263e; background: linear-gradient(180deg, #6fe3ff, #38b6f6);
  border: none; border-radius: 14px; cursor: pointer; margin: 6px 0;
  box-shadow: 0 6px 24px rgba(56,182,246,.35);
}
.btn-primary:active { transform: scale(.98); }
.btn-secondary {
  display: block; width: 100%; padding: 13px; font-size: 1rem; font-weight: 700;
  color: var(--ink); background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25); border-radius: 14px; cursor: pointer; margin: 6px 0;
}
.hidden { display: none !important; }
.how-to {
  margin-top: 22px; background: var(--card); border-radius: 14px; padding: 14px 16px;
  font-size: .88rem; color: var(--muted); line-height: 2; backdrop-filter: blur(6px);
}
.tier-common { color: #7cc7ff; font-weight: 700; }
.tier-uncommon { color: #ffd76a; font-weight: 700; }
.tier-rare { color: #ff9d5c; font-weight: 700; }
.tier-epic { color: #c9a7ff; font-weight: 700; }

/* HUD */
.hud { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
.depth-label { font-size: 1.05rem; font-weight: 800; }
.round-label { font-size: .82rem; color: var(--muted); margin-top: 3px; }
.score-label { font-size: 1.3rem; font-weight: 800; color: var(--accent); }

.timer-wrap {
  position: relative; height: 26px; background: rgba(255,255,255,.1);
  border-radius: 999px; overflow: hidden; margin-bottom: 16px;
}
#timer-bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #37d67a, #4fd1ff);
  transition: width .2s linear;
}
#timer-bar.low { background: linear-gradient(90deg, #ff6b6b, #ff9d5c); }
#timer-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.prompt-card {
  background: var(--card); border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  padding: 22px 18px; margin-bottom: 14px; backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.prompt-category {
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--accent); background: rgba(79,209,255,.12);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.prompt-text { font-size: 1.25rem; font-weight: 700; line-height: 1.45; }

#answer-form { display: flex; gap: 8px; margin-bottom: 12px; }
#answer-input {
  flex: 1; padding: 14px 16px; font-size: 1.05rem; border-radius: 14px;
  border: 2px solid rgba(255,255,255,.2); background: rgba(0,0,0,.3); color: var(--ink);
  outline: none;
}
#answer-input:focus { border-color: var(--accent); }
.btn-dive { width: auto; padding: 14px 22px; margin: 0; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; margin-bottom: 8px; }
.chip {
  padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .92rem;
  animation: pop .3s ease; border: 1px solid rgba(255,255,255,.2);
}
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.chip.common { background: rgba(124,199,255,.18); color: #a8d8ff; }
.chip.uncommon { background: rgba(255,215,106,.16); color: #ffe08a; }
.chip.rare { background: rgba(255,157,92,.16); color: #ffb37e; }
.chip.epic { background: rgba(157,123,255,.2); color: #d3bdff; box-shadow: 0 0 14px rgba(157,123,255,.45); }
.chip.shake { animation: shake .3s ease; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.score-float {
  position: fixed; font-weight: 900; font-size: 1.4rem; pointer-events: none; z-index: 50;
  animation: floatup 1s ease forwards; text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
@keyframes floatup { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-70px); } }

.round-msg { min-height: 26px; text-align: center; color: var(--muted); font-size: .92rem; margin: 6px 0; }
.reveal { background: var(--card); border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-size: .88rem; line-height: 1.9; }
.reveal b { color: var(--ink); }

/* Results */
#screen-results h2 { text-align: center; }
.final-score { text-align: center; font-size: 3.4rem; font-weight: 900; color: var(--accent); margin: 8px 0; }
.final-score small { display: block; font-size: .95rem; color: var(--muted); font-weight: 400; }
.new-record { text-align: center; font-size: 1.1rem; font-weight: 800; color: #ffd76a; margin-bottom: 8px; animation: pop .4s ease; }
.depth-reached { text-align: center; color: var(--muted); margin-bottom: 16px; }
.results-grid { display: grid; gap: 8px; margin-bottom: 18px; }
.result-row {
  display: flex; align-items: center; gap: 10px; background: var(--card);
  border-radius: 12px; padding: 10px 14px; font-size: .9rem;
}
.result-row .r-emoji { font-size: 1.3rem; }
.result-row .r-prompt { flex: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-row .r-pts { font-weight: 800; }
.results-actions { display: grid; gap: 4px; }

/* FAQ */
#faq { margin-top: 46px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; }
#faq h2 { font-size: 1.15rem; }
#faq details {
  background: var(--card); border-radius: 12px; margin-bottom: 10px; padding: 4px 16px;
  backdrop-filter: blur(6px);
}
#faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::before { content: "▸ "; color: var(--accent); }
#faq details[open] summary::before { content: "▾ "; }
#faq p { color: var(--muted); line-height: 1.65; font-size: .93rem; margin: 0 0 14px; }

footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 18px; opacity: .7; }

@media (max-width: 480px) {
  h1 { font-size: 1.15rem; }
  .prompt-text { font-size: 1.1rem; }
  .final-score { font-size: 2.8rem; }
  #answer-form { flex-direction: column; }
  .btn-dive { width: 100%; }
}