/* latin-ext */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/roboto-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/roboto-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg-color: #000000;
  --text-color: #ffffff;
  --sparkle-color: #ffffff;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Roboto Mono', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  position: relative;
}

#canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 80ms;
}

#canvas.flicker { opacity: 0.15; }

#vignette {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 999;
  box-shadow: inset 0 0 120px 20px #DA7756;
  opacity: 0;
  transition: opacity 800ms ease;
}

body.game-active #vignette {
  opacity: 0.18;
}

.status-container {
  display: flex;
  align-items: center;
  font-size: 3vw; /* Large, responsive size */
  font-weight: 500;
}

/* ── Screensaver mode ───────────────────────────────────────── */

body.screensaver #bottom-right,
body.screensaver #gem-counter,
body.screensaver #catch-panel,
body.screensaver #achievement-toast,
body.screensaver #modal-overlay,
body.screensaver .floatingchat-container-wrap,
body.screensaver .floatingchat-container-wrap-mobi { display: none !important; }

body.screensaver .status-container { font-size: 5vw; }

/* Fallback for very small screens */
@media (max-width: 600px) {
  .status-container {
    font-size: 1.5rem;
  }

  /* Catch panel above game toggle */
  #catch-panel {
    bottom: 8rem;
  }

  /* Gem counter smaller gap */
  #gem-counter {
    gap: 0.8rem;
    font-size: 0.7rem;
  }

  /* Modal full-width with less padding */
  #session-modal {
    padding: 1.5rem;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Touch targets for modal buttons */
  #modal-close-btn {
    padding: 0.75rem;
    margin: -0.75rem;
  }
}



.status-text {
  /* Fast fade for word swap delay */
  transition: opacity 100ms ease-out;
}

.status-text.fade-out {
  opacity: 0;
}

.cursor {
  display: inline-block;
  min-width: 1ch;
  background-color: var(--text-color);
  color: var(--bg-color);
  /* Duration: 530ms per "blink" (approx. 1.06s for a full on/off cycle). Hard step animation */
  animation: blink 1.06s step-end infinite;
  vertical-align: bottom;
  transition: background-color 400ms;
}

body.game-active .cursor { background-color: #DA7756; }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hide {
  display: none !important;
}

/* ── Corner buttons ──────────────────────────────────────── */

#game-toggle,
#screensaver-btn,
#donate-btn {
  position: fixed;
  bottom: 1.5rem;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-color);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.15;
  transition: opacity 200ms;
  letter-spacing: 0.05em;
  padding: 0.75rem;
  margin: -0.75rem;
  text-decoration: none;
  white-space: nowrap;
}

#bottom-right {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

#game-toggle,
#screensaver-btn         { position: static; opacity: 0; transition: opacity 600ms ease; }
#game-toggle.visible,
#screensaver-btn.visible { opacity: 0.4; }
#game-toggle:hover,
#screensaver-btn:hover   { opacity: 1.0; }
#game-toggle.active      { opacity: 0.4; }


.floatingchat-container-wrap,
.floatingchat-container-wrap-mobi {
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms;
}

body.support-visible .floatingchat-container-wrap,
body.support-visible .floatingchat-container-wrap-mobi {
  opacity: 0.4;
  pointer-events: all;
}

body.support-visible .floatingchat-container-wrap:hover,
body.support-visible .floatingchat-container-wrap-mobi:hover { opacity: 1.0; }


/* ── Gem counter ─────────────────────────────────────────── */

#gem-counter {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  display: flex;
  gap: 1.2rem;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
}

#gem-counter.visible {
  opacity: 0.4;
  pointer-events: all;
}

#gem-counter.active { opacity: 1.0; }
#gem-counter:hover  { opacity: 1.0; }

#gem-counter .gem.legendary { color: #FFD700; }
#gem-counter .gem.rare      { color: #f5a623; }
#gem-counter .gem.uncommon  { color: #e8e0d0; }

/* ── Achievement toast ───────────────────────────────────── */

#achievement-toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-3rem);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-color);
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
  white-space: nowrap;
  pointer-events: none;
}

#achievement-toast.show {
  opacity: 0.7;
  transform: translateX(-50%) translateY(0);
}

/* ── Catch panel ─────────────────────────────────────────── */

#catch-panel {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
}

#catch-panel.visible {
  opacity: 1;
  pointer-events: all;
}

#rarity-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 400ms;
}

#rarity-label.show        { opacity: 1; }
#rarity-label.uncommon    { color: #e8e0d0; }
#rarity-label.rare        { color: #f5a623; }
#rarity-label.legendary   { color: #FFD700; }

#catch-count {
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 300ms;
}

#catch-count.show { opacity: 0.5; }

#share-btn {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--bg-color);
  background: var(--text-color);
  border: none;
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms, background 200ms;
}

#share-btn.show       { opacity: 1; pointer-events: all; }
#share-btn:hover      { background: #ccc; }

/* ── Rarity text colors ──────────────────────────────────── */

.status-text.uncommon { color: #e8e0d0; }

.status-text.rare {
  color: #f5a623;
  text-shadow: 0 0 20px rgba(245, 166, 35, 0.4);
}

.status-text.legendary {
  color: #FFD700;
  animation: legendary-pulse 2s ease-in-out infinite;
}

@keyframes legendary-pulse {
  0%, 100% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }
  50%       { text-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }
}

/* ── Session modal ───────────────────────────────────────── */

#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms;
  z-index: 100;
}

#modal-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

#session-modal {
  font-family: 'Roboto Mono', monospace;
  color: var(--text-color);
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2rem 2.5rem;
  width: min(480px, calc(100vw - 3rem));
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-header {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  opacity: 0.3;
  margin-bottom: 0.4rem;
}

.modal-subtitle {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.2rem;
}

.modal-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 1rem 0;
}

.modal-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 0.3rem 0;
  opacity: 0.5;
  letter-spacing: 0.04em;
}

.modal-row.legendary { color: #FFD700; opacity: 1; }
.modal-row.rare      { color: #f5a623; opacity: 1; }
.modal-row.uncommon  { color: #e8e0d0; opacity: 0.8; }

.modal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.badge {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.25rem 0.5rem;
}

.modal-empty {
  font-size: 0.7rem;
  opacity: 0.3;
  letter-spacing: 0.05em;
  margin: 0.5rem 0;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.modal-actions button {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 0;
  opacity: 0.5;
  transition: opacity 200ms;
}

#modal-share-btn {
  color: var(--bg-color) !important;
  background: var(--text-color) !important;
  padding: 0.4rem 0.8rem !important;
  opacity: 1 !important;
  position: relative;
}

#modal-share-btn::after {
  content: 'image will download — attach it to your post';
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  transform: none;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  color: var(--text-color);
  background: var(--bg-color);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}

#modal-share-btn:hover::after { opacity: 0.7; }

/* Hide tooltip on touch devices */
@media (hover: none) {
  #modal-share-btn::after { display: none; }
}

#modal-share-btn:hover  { background: #ccc !important; }
#modal-share-btn:disabled { opacity: 0.4 !important; cursor: default; }
#modal-close-btn:hover  { opacity: 1; }

#modal-donate {
  display: block;
  margin-top: 1.25rem;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--text-color);
  text-decoration: none;
  opacity: 0.25;
  transition: opacity 200ms;
}

#modal-donate:hover { opacity: 0.7; }