/* ── Intro Screen ─────────────────────────────────────────────────────────── */

.screen-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(108, 240, 143, .22), transparent 30rem),
    radial-gradient(circle at 84% 9%, rgba(246, 229, 141, .14), transparent 26rem),
    linear-gradient(160deg, var(--bg), var(--bg-2) 55%, var(--bg-3));
}

.intro-card {
  width: min(640px, 100%);
  text-align: center;
  padding: 52px 44px 44px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow);
}

.intro-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 22px;
}

.intro-title {
  font-size: clamp(36px, 7vw, 58px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 900;
  margin-bottom: 14px;
}

.intro-subtitle {
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 36px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.category-prompt {
  margin-bottom: 30px;
}

.category-label {
  font-size: 13px;
  color: var(--soft);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.category-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.category-btn {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
  min-height: 44px;
}

.category-btn:hover {
  background: var(--card-hover);
  border-color: var(--line-strong);
  color: var(--text);
}

.category-btn.selected {
  background: rgba(108, 240, 143, .12);
  border-color: rgba(108, 240, 143, .4);
  color: var(--green);
}

.intro-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--dim);
}

/* ── Game Screen ──────────────────────────────────────────────────────────── */

.screen-game {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  position: relative;
}

.screen-game::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--chaos-tint, transparent);
  pointer-events: none;
  z-index: 1;
  transition: background 2s ease;
}

/* Top bar */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(7, 20, 13, .7);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.top-bar-brand {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.02em;
  color: var(--text);
  flex-shrink: 0;
}

.top-bar-brand span {
  color: var(--green);
}

.top-bar-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  min-width: 80px;
  transition: border-color .2s ease;
}

.stat-pill:hover { border-color: var(--line-strong); }

.stat-pill-value {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--text);
}

.stat-pill-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--soft);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 1px;
}

.stat-pill-grass .stat-pill-value { color: var(--green); }

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Main game area */
.game-area {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  gap: 16px;
  padding: 16px;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Panels */
.panel {
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overflow-x: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(7,20,13,.8);
  backdrop-filter: blur(12px);
  z-index: 2;
}

.panel-header-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--soft);
}

.panel-left {
  grid-column: 1;
}

.panel-right-col {
  grid-column: 3;
}

.grass-col {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Notifications stack */
.notifications-stack {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 280px;
  pointer-events: none;
}

.notifications-stack > * {
  pointer-events: auto;
}

/* Achievements stack */
.achievements-stack {
  position: fixed;
  bottom: 20px;
  left: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 280px;
  pointer-events: none;
}

/* Milestone banner */
.milestone-banner {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 30;
  background: rgba(108, 240, 143, .12);
  border: 1px solid rgba(108, 240, 143, .3);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(16px);
  transition: transform .3s ease;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  text-align: center;
}

.milestone-banner.banner-show {
  transform: translateX(-50%) translateY(0);
}

/* Feedback pop */
.feedback-pop {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  background: rgba(13, 35, 21, .9);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: 320px;
  text-align: center;
}

.feedback-pop.pop-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Panel overlays */
.panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
}

.panel-overlay.hidden {
  display: none !important;
}

.panel-card {
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 32px;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.panel-card h3 {
  font-size: 20px;
  letter-spacing: -.03em;
  margin-bottom: 20px;
}

/* Mobile bottom bar */
.mobile-bottom-bar {
  display: none;
  position: sticky;
  bottom: 0;
  background: rgba(7, 20, 13, .9);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  z-index: 100;
}

/* Footer */
.game-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 24px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 13px;
  color: var(--dim);
}

.footer-link {
  color: var(--soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}

.footer-link:hover {
  color: var(--text);
  border-color: var(--green);
}

/* ── Coast screen ─────────────────────────────────────────────────────────── */

.screen-coast {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: #040a06; /* fallback before CSS art loads */
}

/* ── Full-viewport background layers ─────────────────────────────────────── */

.coast-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Stars layer — CSS box-shadow star field */
.coast-stars {
  position: absolute;
  top: 0; left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow:
    80px 45px rgba(255,255,255,.7),
    180px 20px rgba(255,255,255,.5),
    260px 80px rgba(255,255,255,.8),
    340px 15px rgba(255,255,255,.6),
    420px 60px rgba(255,255,255,.7),
    510px 30px rgba(255,255,255,.4),
    590px 75px rgba(255,255,255,.8),
    680px 12px rgba(255,255,255,.5),
    750px 55px rgba(255,255,255,.7),
    840px 35px rgba(255,255,255,.6),
    920px 70px rgba(255,255,255,.5),
    1010px 25px rgba(255,255,255,.8),
    1100px 50px rgba(255,255,255,.6),
    1180px 40px rgba(255,255,255,.7),
    1280px 18px rgba(255,255,255,.5),
    50px 120px rgba(255,255,255,.4),
    140px 140px rgba(255,255,255,.6),
    230px 100px rgba(255,255,255,.5),
    320px 130px rgba(255,255,255,.3),
    400px 110px rgba(255,255,255,.6),
    480px 145px rgba(255,255,255,.4),
    560px 95px rgba(255,255,255,.7),
    640px 125px rgba(255,255,255,.5),
    720px 105px rgba(255,255,255,.4),
    800px 135px rgba(255,255,255,.6),
    880px 90px rgba(255,255,255,.5),
    960px 120px rgba(255,255,255,.3),
    1040px 100px rgba(255,255,255,.6),
    1120px 140px rgba(255,255,255,.4),
    1200px 115px rgba(255,255,255,.7);
  animation: twinkle 5s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: .6; }
  to { opacity: 1; }
}

/* Sky gradient: pre-dawn purple → dark teal → golden horizon */
.coast-sky-grad {
  position: absolute;
  inset: 0 0 40%;
  background: linear-gradient(180deg,
    #04080f 0%,
    #070d1e 20%,
    #091828 40%,
    #0c2235 60%,
    #0f3045 75%,
    #1a4a3a 88%,
    #2a5e30 100%);
}

/* Horizon glow — golden pre-sunrise band */
.coast-horizon-glow {
  position: absolute;
  bottom: 38%;
  left: 0; right: 0;
  height: 12%;
  background: linear-gradient(180deg,
    transparent,
    rgba(246,190,60,.12) 30%,
    rgba(246,210,100,.22) 60%,
    rgba(246,220,120,.18) 80%,
    transparent);
  filter: blur(2px);
  animation: horizonPulse 6s ease-in-out infinite alternate;
}

@keyframes horizonPulse {
  from { opacity: .7; }
  to { opacity: 1; }
}

/* Rising sun / moon */
.coast-sun-moon {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,230,100,1) 0%,
    rgba(255,200,60,.9) 40%,
    rgba(246,150,40,.6) 70%,
    transparent 100%);
  bottom: 41%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow:
    0 0 40px rgba(255,210,80,.5),
    0 0 100px rgba(255,180,50,.25),
    0 0 200px rgba(255,160,40,.12);
  animation: sunRise 20s ease-out forwards, sunGlow 4s ease-in-out infinite alternate;
}

@keyframes sunRise {
  from { bottom: 38%; opacity: .6; }
  to { bottom: 44%; opacity: 1; }
}

@keyframes sunGlow {
  from { box-shadow: 0 0 40px rgba(255,210,80,.4), 0 0 100px rgba(255,180,50,.2); }
  to { box-shadow: 0 0 60px rgba(255,230,100,.6), 0 0 140px rgba(255,200,70,.3); }
}

/* Distant cliff/headland silhouettes */
.coast-cliff {
  position: absolute;
  bottom: 35%;
}

.coast-cliff-left {
  left: 0;
  width: 30%;
  height: 18%;
  background: #06130a;
  clip-path: polygon(0 100%, 0 40%, 25% 10%, 50% 25%, 75% 5%, 100% 30%, 100% 100%);
}

.coast-cliff-right {
  right: 0;
  width: 22%;
  height: 14%;
  background: #050f08;
  clip-path: polygon(0 30%, 20% 5%, 50% 20%, 75% 0%, 100% 35%, 100% 100%, 0 100%);
}

/* Very subtle bridge silhouette (distant) */
.coast-bridge {
  position: absolute;
  bottom: 39%;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 4%;
  opacity: .18;
  border-top: 2px solid rgba(255,220,100,.5);
}
.coast-bridge::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 200%;
  background: rgba(255,220,100,.15);
  clip-path: polygon(10% 0%, 10% 100%, 0% 100%, 0% 80%, 5% 0%, 95% 0%, 100% 80%, 100% 100%, 90% 100%, 90% 0%);
}

/* Ocean layers — multiple wave colors for depth */
.coast-ocean-layer {
  position: absolute;
  bottom: 20%;
  left: 0; right: 0;
  height: 18%;
  overflow: hidden;
}

.coast-wave {
  position: absolute;
  left: -20%;
  right: -20%;
  border-radius: 50% 50% 0 0 / 30px 30px 0 0;
}

.coast-wave-1 {
  bottom: 0;
  height: 100%;
  background: linear-gradient(180deg, #0d3d60, #052040);
  animation: waveRoll1 8s ease-in-out infinite;
}

.coast-wave-2 {
  bottom: 0;
  height: 80%;
  background: linear-gradient(180deg, rgba(20,80,100,.8), rgba(8,40,70,.6));
  animation: waveRoll2 6s ease-in-out infinite;
  animation-delay: -2s;
}

.coast-wave-3 {
  bottom: 60%;
  height: 40%;
  background: rgba(255,255,255,.04);
  animation: waveRoll3 4s ease-in-out infinite;
  animation-delay: -1s;
}

@keyframes waveRoll1 {
  0%, 100% { transform: translateX(-3%) translateY(0) scaleX(1.04); }
  50% { transform: translateX(3%) translateY(-8px) scaleX(1); }
}

@keyframes waveRoll2 {
  0%, 100% { transform: translateX(4%) translateY(4px) scaleX(1); }
  50% { transform: translateX(-4%) translateY(-4px) scaleX(1.06); }
}

@keyframes waveRoll3 {
  0%, 100% { transform: translateX(-5%) scaleX(1.1); opacity: .5; }
  50% { transform: translateX(5%) scaleX(.9); opacity: .8; }
}

/* Mist layer */
.coast-mist {
  position: absolute;
  bottom: 33%;
  left: 0; right: 0;
  height: 10%;
  background: linear-gradient(180deg,
    transparent,
    rgba(180,230,210,.04) 40%,
    rgba(160,220,200,.06) 60%,
    transparent);
  filter: blur(4px);
  animation: mistDrift 12s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes mistDrift {
  from { transform: translateX(-3%); opacity: .5; }
  to { transform: translateX(3%); opacity: .8; }
}

/* Shore / sand line */
.coast-shore-layer {
  position: absolute;
  bottom: 18%;
  left: 0; right: 0;
  height: 4%;
  background: linear-gradient(180deg,
    rgba(200,180,120,.15),
    rgba(180,160,100,.08));
  filter: blur(1px);
}

/* Foreground grass (uses same .blade CSS as main game) */
.coast-foreground-grass {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 22%;
  background: linear-gradient(180deg, #0d3a1a, #061a0b);
  overflow: hidden;
}

.coast-foreground-grass .blade {
  background: linear-gradient(180deg, #7ae896, #156e38 68%, #072d12);
  opacity: calc(var(--o) * .7);
}

/* ── Coast content overlay ────────────────────────────────────────────────── */

.coast-overlay {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 24px 60px;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.coast-text-block {
  background: rgba(4,14,8,.6);
  border: 1px solid rgba(108,240,143,.2);
  border-radius: var(--radius);
  padding: 32px 40px;
  backdrop-filter: blur(20px);
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  animation: coastTextIn 1.2s ease;
}

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

.coast-heading {
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: -.04em;
  line-height: 1.1;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--green), #c7ffd4 60%, var(--yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.coast-sub {
  font-size: 16px;
  color: var(--muted);
  margin: 0;
}

.coast-timer {
  width: 100%;
  max-width: 380px;
  background: rgba(4,14,8,.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  backdrop-filter: blur(12px);
}

.coast-timer-bar-wrap {
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.coast-timer-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--green-2), var(--green));
  border-radius: 3px;
  transition: width .1s linear;
}

.coast-timer-label {
  font-size: 12px;
  color: var(--soft);
  letter-spacing: .05em;
}

.coast-choice {
  animation: fadeIn .8s ease;
  background: rgba(4,14,8,.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 32px;
  backdrop-filter: blur(16px);
  width: 100%;
  max-width: 480px;
}

.coast-choice-q {
  font-size: 17px;
  color: var(--muted);
  margin: 0 0 20px;
}

.coast-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

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

/* ── Stats screen ──────────────────────────────────────────────────────────── */

.screen-stats {
  background: var(--bg);
}

.stats-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.stats-header h2 {
  font-size: 32px;
  letter-spacing: -.04em;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}

.stat-item {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.stat-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 6px;
}

.stat-value {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.025em;
}

.certificate-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}

.certificate-section h3 {
  font-size: 22px;
  letter-spacing: -.03em;
  margin-bottom: 18px;
}

.cert-name-input {
  width: 100%;
  max-width: 360px;
  padding: 10px 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  margin-bottom: 20px;
  display: block;
}

.cert-name-input:focus {
  outline: 2px solid rgba(108,240,143,.4);
  border-color: rgba(108,240,143,.4);
}

#certificate-canvas {
  display: block;
  max-width: 100%;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
}

.cert-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}