/* === Dark UI + consistent scrollbars across the app === */

/* Tell the browser our UI is dark so built-in controls & scrollbars render dark */
html { color-scheme: dark; }

/* Baseline scrollbar palette */
:root {
  --scroll-track: #000;
  --scroll-thumb: #3a3a3a;
  --scroll-thumb-hover: #5a5a5a;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* Chromium/WebKit */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px;
  border: 2px solid var(--scroll-track);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

/* Make your common scrollers stable (no layout jump) & smooth on iOS */
.chat-body,
#menu-overlay,
#menu-panel,
.submenu-panel,
.emoji-submenu,
.emoji-submenu .submenu-panel,
.public-scroll-list,
#login-agreement {
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

:root {
  --vh: 1vh; /* fallback */
  --vw: 1vw;
}
.fullscreen-block {
  height: calc(var(--vh, 1vh) * 100);
  width: calc(var(--vw, 1vw) * 100);
}

/* ✅ Reset input range */
input[type="range"] {
  appearance: none;
  background: transparent !important;
  margin: 0;
  padding: 0;
  border: none;
}

/* ==== Full-viewport micro-wisps — desktop stormy, iOS breathe ==== */
#site-smoke{
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: transparent;
}

/* default (desktop/Android): drifting wisps */
#site-smoke .wisp{
  position:absolute; left:0; top:0;
  width: var(--size, 16vw); height: var(--size, 16vw);
  border-radius: 50%;
  mix-blend-mode: normal; /* JS upgrades to screen/plus-lighter when safe */
  transform: translate3d(
    calc(var(--x,0) + var(--windx, 0)),
    calc(var(--y,0) + var(--windy, 0)),
    0
  ) scale(var(--scale,1));
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: wisp-life var(--life, 14s) ease-in-out infinite;
  animation-delay: calc(var(--offset, 0s) * -1);
}
#site-smoke .wisp::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(closest-side,
    rgba(190,220,255, var(--alpha,.10)) 0%,
    rgba(255,255,255,0) 70%);
  filter: blur(var(--blur,6px));
  transform: translateZ(0);
  will-change: filter, opacity;
}

/* iOS mode: breathe-only (no movement), slightly brighter + sharper */
#site-smoke.ios-mode .wisp{
  transform: translate3d(var(--x,0), var(--y,0), 0) scale(var(--scale,1));
  animation: wisp-breathe var(--life, 16s) ease-in-out infinite;
}
#site-smoke.ios-mode .wisp::before{
  /* dim by default but let JS push alpha up for older iOS */
  background: radial-gradient(closest-side,
    rgba(190,220,255, var(--alpha,.08)) 0%,
    rgba(255,255,255,0) 70%);
  filter: blur(3.5px); /* bump for iOS so it reads better */
}

/* puffs (desktop only; hidden in iOS mode via rules below) */
#site-smoke .puff{
  position:absolute; left:0; top:0; pointer-events:none;
  width: var(--size, 22vw); height: var(--size, 22vw);
  border-radius: 50%;
  mix-blend-mode: normal;
  opacity: 0;
  animation: puff-burst var(--dur, 900ms) cubic-bezier(.2,.6,.2,1) 1 forwards;
  backface-visibility: hidden;
}
#site-smoke .puff::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(closest-side, rgba(190,220,255,.16) 0%, rgba(255,255,255,0) 70%);
  filter: blur(14px);
  transform: translateZ(0);
}

/* desktop/non-iOS blends (auto-added by JS when safe) */
#site-smoke.blend-screen .wisp,
#site-smoke.blend-screen .puff { mix-blend-mode: screen !important; }
#site-smoke.blend-plus   .wisp,
#site-smoke.blend-plus   .puff { mix-blend-mode: plus-lighter !important; }

/* lightning overlay (desktop/Android only; hidden in iOS mode) */
#site-smoke::after{
  content:"";
  position:absolute; inset: -6%;
  pointer-events:none; opacity: 0;
  background:
    radial-gradient(120% 120% at var(--fx,50%) var(--fy,62%),
      rgba(170,220,255,0) 0%,
      rgba(170,220,255,.08) 40%,
      rgba(170,220,255,0) 62%);
  mix-blend-mode: screen;
  filter: blur(2px);
}
#site-smoke.flash::after{ animation: lightning 1000ms ease-out 1; }

/* ---- Animations ------------------------------------------------------ */
/* generous hidden tails so reseeds are invisible (0–8%, 92–100%) */
@keyframes wisp-life{
  0%   { opacity: 0; transform: translate3d(calc(var(--x) + var(--windx,0)), calc(var(--y) + var(--windy,0) + 10px), 0) scale(calc(var(--scale)*.95)); }
  12%  { opacity: var(--op,.52); }
  60%  { opacity: var(--op,.52); transform: translate3d(calc(var(--x) + var(--windx,0) + var(--dx,9vw)), calc(var(--y) + var(--windy,0) - var(--dy,12vh)), 0) scale(calc(var(--scale)*1.05)); }
  92%  { opacity: 0; }
  100% { opacity: 0; }
}
/* iOS breathe-only (no movement) */
@keyframes wisp-breathe{
  0%   { opacity: 0; }
  18%  { opacity: var(--op,.44); }
  82%  { opacity: var(--op,.44); }
  100% { opacity: 0; }
}

@keyframes puff-burst{
  0%   { opacity: 0;   transform: translate3d(var(--x), var(--y), 0) scale(.85); }
  24%  { opacity: .75; transform: translate3d(calc(var(--x) + 1vw), calc(var(--y) - 1vh), 0) scale(1.05); }
  100% { opacity: 0;   transform: translate3d(calc(var(--x) + 3vw), calc(var(--y) - 4vh), 0) scale(1.12); }
}

@keyframes lightning{
  0%{ opacity: 0; } 8%{ opacity: 1; } 22%{ opacity: .25; } 34%{ opacity: .9; }
  56%{ opacity: 0; } 70%{ opacity: .5; } 100%{ opacity: 0; }
}

/* iOS mode: no puffs or lightning */
#site-smoke.ios-mode .puff{ display:none; }
#site-smoke.ios-mode::after{ display:none; }

@media (max-width: 480px){
  #site-smoke .wisp::before{ filter: blur(3.5px); }
}

@media (prefers-reduced-motion: reduce){
  #site-smoke .wisp{ animation: none; opacity: .18; transition: transform 20s linear, opacity .8s ease; }
  #site-smoke .puff{ display:none; }
  #site-smoke::after{ display:none; }
}

/* Optional intensity skins */
#site-smoke.calm .wisp{ animation-duration: calc(var(--life,8s) * 1.6); }
#site-smoke.calm .wisp::before{ filter: blur(calc(var(--blur,6px) * .9)); }

#site-smoke.storm .wisp{ animation-duration: calc(var(--life,8s) * .8); }
#site-smoke.storm .wisp::before{ filter: blur(calc(var(--blur,6px) * 1.15)); }

#site-smoke.storm .puff::before{ filter: blur(16px); }

.modal-confirm, .modal-cancel {
  margin: 0 6px;
  padding: 10px 16px;
  font-family: monospace;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 6px #007aff88;
  border: none;
}

.modal-confirm {
  background-color: #007aff;
  color: white;
}

.modal-cancel {
  background-color: #444;
  color: white;
}

.modal-confirm:hover {
  background-color: #005ecc;
}

.modal-cancel:hover {
  background-color: #666;
}

#custom-modal {
  position: fixed;
  inset: 0;
  z-index: 10000; /* ⬆️ one above submenu */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw; /* ✨ breathing room on mobile */
  pointer-events: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 0;
  pointer-events: auto;
}

.modal-box {
  position: relative;
  background: #111;
  color: #fff;
  padding: 24px 18px;
  border-radius: 12px;
  box-shadow: 0 0 16px #00f8ff80;
  z-index: 1;
  font-family: monospace;
  text-align: center;
  max-width: 480px;
  width: 100%;
  pointer-events: auto;
}

#custom-modal-message {
  font-size: 16px;
  margin-bottom: 16px;
}

#custom-modal-close {
  background-color: #007aff;
  border: none;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-family: monospace;
  cursor: pointer;
  box-shadow: 0 0 6px #007aff88;
  transition: background 0.2s;
}

#custom-modal-close:hover {
  background-color: #005ecc;
}

#emoji-lock {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
  padding-bottom: 4px;
  background: transparent !important;
}

/* Base glow animation (already present) */
@keyframes glowRun {
  0% {
    box-shadow: inset 0 0 1px #555, 0 0 4px #0af4;
    border-color: #444;
  }
  50% {
    box-shadow: inset 0 0 3px #0af, 0 0 12px #0af;
    border-color: #0af;
  }
  100% {
    box-shadow: inset 0 0 1px #555, 0 0 4px #0af4;
    border-color: #444;
  }
}

/* 🎛️ Staggered Glow Animations with Explicit Timing */
.col-glow-delay-0 {
  animation: glowRun 6s linear infinite;
  animation-delay: 1.6s;
}
.col-glow-delay-1 {
  animation: glowRun 6s linear infinite;
  animation-delay: 3.2s;
}
.col-glow-delay-2 {
  animation: glowRun 6s linear infinite;
  animation-delay: 1.2s;
}
.col-glow-delay-3 {
  animation: glowRun 6s linear infinite;
  animation-delay: 2.4s;
}

.col {
  display: flex;
  flex-direction: column;
  border: 1px solid #333;
  background: #222;
  position: relative;
  overflow: hidden;
}

.col-purple {
  display: flex;
  flex-direction: column;
  border: 1px solid #333;
  background: #222;
  position: relative;
  overflow: visible;
  animation: glowRunPurple 2.4s linear infinite; /* 💜 Add this */
}

//Link Tables

#linktables-menu.emoji-submenu {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  min-height: 100%; /* allows flex to center vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 0;
  overflow: auto;
}

#linktables-menu .submenu-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #222;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 170, 255, 0.4);
  width: auto;
  max-width: fit-content;
  height: auto;
  max-height: none;
  min-height: 0;            /* ✅ critical if inherited */
  overflow: visible;
  gap: 12px;
}

#linktables-content {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 0 !important;
  min-height: 0 !important;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  width: auto;
  max-width: 100%;
  align-self: center; /* ✅ keeps it centered in the panel */
}

.link-toggle {
  width: 48px;
  height: 48px;
  padding: 10px;
  box-sizing: border-box;

  background: #444 !important;
  border: 2px solid #0af !important;
  border-radius: 6px;
  color: #fff !important;
  font-size: 18px;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* ✅ Force-render if button has no content */
.link-toggle::before {
  content: " "; /* non-breaking space */
  display: inline-block;
  width: 1px;
  height: 1px;
}

/* 🔒 Fully disable hover/focus/active style changes */
.link-toggle:hover,
.link-toggle:focus,
.link-toggle:active {
  background: #444 !important;
  color: #fff !important;
  border: 2px solid #0af !important;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
}

/* ✅ Instant green response on activation */
.link-toggle.active {
  background: #0f0 !important;
  color: #000 !important;
  box-shadow: 0 0 8px #0f0, 0 0 16px #0f0 !important;
  animation: pulseGreen 2s infinite ease-in-out !important;
}

@keyframes pulseGreen {
  0%, 100% {
    box-shadow: 0 0 8px #0f0, 0 0 16px #0f0;
  }
  50% {
    box-shadow: 0 0 14px #0f0, 0 0 28px #0f0;
  }
}

.col-link {
  display: flex;
  flex-direction: column;
  border: 1px solid #333;
  background: #222;
  position: relative;
  overflow: visible;
  animation: glowRunLink 1.2s ease-in-out infinite alternate;
}

/* Better green glow for linked columns */
@keyframes glowRunLink {
  0% {
    box-shadow: inset 0 0 2px #444, 0 0 6px rgba(0, 255, 0, 0.4);
    border-color: #333;
  }
  50% {
    box-shadow: inset 0 0 6px #0f0, 0 0 18px rgba(0, 255, 0, 0.8);
    border-color: #0f0;
  }
  100% {
    box-shadow: inset 0 0 2px #444, 0 0 6px rgba(0, 255, 0, 0.4);
    border-color: #333;
  }
}

@keyframes glowRunPurple {
  0% {
    box-shadow: inset 0 0 1px #444, 0 0 2px rgba(160, 0, 255, 0.3);
    border-color: #333;
  }
  50% {
    box-shadow: inset 0 0 3px #a0f, 0 0 6px rgba(160, 0, 255, 0.5);
    border-color: #7a3dfc;
  }
  100% {
    box-shadow: inset 0 0 1px #444, 0 0 2px rgba(160, 0, 255, 0.3);
    border-color: #333;
  }
}

/* 🛸 Subtle fade-in for emoji columns */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 💡 Clean UI cell */
.ui-col .cell {
  background: transparent !important;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  box-sizing: border-box;
}

.cell {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font-size: 24px;
  user-select: none;
  position: relative;
  color: #fff;
  border: none;
  z-index: 0;
  transition: transform 0.3s ease;
  overflow: visible;
  background: transparent !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cell-default {
  background: #000;
}

.cell.selected {
  transform: rotate(90deg);
}

.button-tap {
  animation: buttonTap 0.25s ease-out;
}

.cell.wipe {
  animation: wipe 0.3s ease-out;
}

.cell.selected::before {
  content: "";
  position: absolute;
  inset: -8px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: radial-gradient(circle, lime 20%, transparent 70%);
  border: 2px solid transparent;
  border-left: 2px solid #0af;
  border-right: 2px solid #0af;
  z-index: 1;
  animation: shimmerGlow 1.3s ease-in-out infinite;
  border-radius: 12px;
}

.cell.selected::after {
  content: "";
  position: absolute;
  inset: -8px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: radial-gradient(circle, lime 20%, transparent 70%);
  border: 2px solid transparent;
  border-left: 2px solid #0af;
  border-right: 2px solid #0af;
  z-index: 1;
  animation: shimmerGlow 1.3s ease-in-out infinite;
  border-radius: 12px;
}

.cell.cell-transparent {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  pointer-events: none;
  z-index: 0;
}

@keyframes shimmerGlow {
  0% { opacity: 1; transform: scale(.8); }
  50% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1; transform: scale(.8); }
}

@keyframes wipe {
  0%   { background: rgba(0, 170, 255, 0.2); }
  50%  { background: rgba(0, 170, 255, 0.4); }
  100% { background: rgba(0, 170, 255, 0); }
}

@keyframes emojiVibrate {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(0.3px, -0.3px); }
  50%  { transform: translate(-0.3px, 0.3px); }
  75%  { transform: translate(0.3px, 0.3px); }
  100% { transform: translate(-0.3px, -0.3px); }
}

.emoji-wrapper.vibrating {
  animation: emojiVibrate 0.1s linear infinite;
  animation-delay: 0.25s; /* optional, play with this value */
}

#button-table {
  border-collapse: collapse;
  table-layout: fixed;
  margin-left: 12px;
  margin-bottom: 10px; /* Space at the bottom */
  background: transparent !important;
}

@keyframes buttonTap {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.92); }
  60%  { transform: scale(1.46); }
  100% { transform: scale(1); }
}

#menu-panel h2 {
  font-size: 16px;
  margin: 0;
  padding: 0;
  color: #0af;
  font-family: monospace;
  animation: typing 2s steps(30, end), blink 0.75s step-end infinite;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #0af;
  max-width: 100%;
  box-sizing: border-box;
}

#menu-panel button {
  margin: 4px 0;
  background: #0066ff;
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: box-shadow 0.2s ease, background 0.3s ease;
}

#menu-panel button:hover {
  box-shadow: 0 0 8px #0af;
  background: #0066ff;
}

#menu-panel input {
  padding: 6px;
  font-size: 14px;
  width: 100%;
  background: #000;
  color: #fff;
  border: 1px solid #0af;
  border-radius: 4px;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  50% { border-color: transparent; }
}

#login-button {
  overflow: visible;
  white-space: nowrap;
}

.flicker-char {
  animation: flickerChar 3s infinite;
  display: inline-block;
  font-style: italic;
}

.flicker-char:nth-child(odd) {
  animation-delay: 0.1s;
}
.flicker-char:nth-child(even) {
  animation-delay: 0.2s;
}
.flicker-char:nth-child(3n) {
  animation-delay: 0.4s;
}

@keyframes flickerChar {
  0%, 100% { opacity: 1; }
  48%      { opacity: 0.3; }
  50%      { opacity: 1; }
  52%      { opacity: 0.7; }
}

#ui-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;         /* 👈 force horizontal centering */
  justify-content: center;     /* 👈 vertical centering of column */
  gap: 12px;
  margin-left: 20px;
  padding-right: 10px;
}

body.landscape-mode #ui-button-wrapper {
  flex-direction: column;
  margin-top: 0;
  margin-left: 6px;
  justify-content: center;
}

#code-timestamp {
  font-size: 12px;
  color: #aaa;
  margin-top: 8px;
  text-align: center;
}

.round-button {
  width: 52px;
  height: 52px;
  font-size: 26px;
  background: #000;
  border: 2px solid #0af;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 4px #0af;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.round-button:active {
  transform: scale(0.9);
}

#menu-button.hold-rotate {
  animation: spinHold 0.8s cubic-bezier(0.5, 1.4, 0.5, 1) forwards;
}

@keyframes spinHold {
  from { transform: rotate(0deg); }
  to   { transform: rotate(540deg); } /* 1.5 spins for punch */
}

@keyframes pulseSuccessOnce {
  0%   { box-shadow: 0 0 4px #0f0; }
  50%  { box-shadow: 0 0 18px #0f0; }
  100% { box-shadow: 0 0 4px #0f0; }
}

@keyframes pulseFailOnce {
  0%   { box-shadow: 0 0 4px #f00; }
  50%  { box-shadow: 0 0 18px #f00; }
  100% { box-shadow: 0 0 4px #f00; }
}

.lock-pulse-success {
  animation: pulseSuccessOnce 0.4s ease-out 1;
  box-shadow: 0 0 14px #0f0;
  transition: box-shadow 0.1s ease-out;
}

.lock-pulse-fail {
  animation: pulseFailOnce 0.4s ease-in-out 1;
  box-shadow: 0 0 14px #0f0;
  transition: box-shadow 0.1s ease-out;
}

/* For the gear button */
#menu-button, #test-code-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  color: #fff;
  width: 52px;
  height: 52px;
  font-size: 26px;
  border: 2px solid #0af;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 4px #0af;
  transition: transform 0.2s ease-out, box-shadow 0.3s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, box-shadow;
}

/* For lock button (lock glow animation) */
#test-code-button {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  width: 52px;
  height: 52px;
  transition: transform 0.3s ease-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#menu-button.pressed,
#test-code-button.pressed {
  transform: scale(0.9);
  box-shadow: 0 0 12px #0af;
  background: rgba(0, 170, 255, 0.2);
}

#menu-button:active,
#test-code-button:active {
  transform: scale(0.9);
  box-shadow: 0 0 10px #0af;
}

.hidden {
  display: none !important;
}

#menu-overlay {
  animation: fadeIn 0.2s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;  /* Ensure the menu overlays on top */
  overflow: auto !important; /* ✅ scrollable only here */
  -webkit-overflow-scrolling: touch; /* smoother iOS feel */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#menu-panel > div:first-child {
  margin-bottom: 12px;
}

#menu-panel {
  overflow-x: hidden;
  overflow-y: auto;
  word-break: break-word;
  background: #222;
  padding: 30px 20px 20px;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 170, 255, 0.4);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
  min-width: 240px;
  max-width: 240px;
  max-height: 90vh;
  position: relative;
  animation: decloak 0.6s ease-out;
}

@keyframes decloak {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

.menu-heading {
  font-size: 16px;
  margin: 0;
  padding: 0;
  color: #0af;
  font-family: monospace;
  animation: typing 2s steps(30, end), blink 0.75s step-end infinite;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #0af;
  max-width: 100%;
  box-sizing: border-box;
}

#close-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #000;
  color: #fff;
  font-size: 16px;
  border: 1px solid #0af;
  border-radius: 6px;
  cursor: pointer;
  padding: 4px 8px;
  transition: background 0.2s ease;
}

#close-menu:hover {
  background: #0af;
  color: #000;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-touch-callout: none;
}

body {
  overflow-x: hidden;
  background: #111;
  color: #fff;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

.submenu-panel {
  width: auto;
  max-width: fit-content;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  word-break: break-word;
  background: #222;
  padding: 30px 20px 20px;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 170, 255, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;          /* ✅ ensures centered content like the grid */
  gap: 12px;
  color: #fff;
  min-width: 240px;
  max-width: none;              /* ✅ allow full width for inner grid */
  max-height: 90vh;
  position: relative;
  animation: decloak 0.6s ease-out;
}

.emoji-submenu {
  animation: fadeIn 0.2s ease-in-out;
  position: fixed;
  inset: 0; /* shorthand for top: 0; left: 0; right: 0; bottom: 0 */
  display: flex;
  justify-content: center;
  align-items: center;  /* ✅ vertical center */
  background: transparent;
  z-index: 9999;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0; /* 🔥 no padding, it was inflating height */
}

.emoji-submenu .submenu-panel {
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-word;
  background: #222;
  padding: 30px 20px 20px;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 170, 255, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  min-width: 240px;
  max-width: 90vw;
  max-height: 70vh;  /* ✅ no more weird 80vh math */
  height: auto;
  position: relative;
  animation: decloak 0.6s ease-out;
}

body.landscape-mode #sequencer-menu {
  max-height: 80vw; /* 💡 flip logic: horizontal screen height */
  max-width: 100vh;
  height: auto;
  width: auto;
  overflow-y: auto;
  padding: 12px;
  box-sizing: border-box;
}

body.landscape-mode #sequencer-menu {
  transform: rotate(90deg);   /* Or 270deg, depending */
  transform-origin: center center;
}

.emoji-submenu h2 {
  font-size: 16px;
  margin: 0;
  padding: 0;
  color: #0af;
  font-family: monospace;
  animation: typing 2s steps(30, end), blink 0.75s step-end infinite;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #0af;
  max-width: 100%;
  box-sizing: border-box;
}

.emoji-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* ✅ so clicks go to .cell, not the emoji */
  font-size: 24px; /* Adjust if needed */
}

body.landscape-mode #emoji-container {
  width: 100vh;   /* ⬅️ Flip width & height intentionally */
  height: 100vw;
  transform: scale(1) rotate(270deg);
  transform-origin: center center;
  overflow: visible;
  position: absolute;   /* ⬅️ Prevent normal flow-based cropping */
  top: 45%;
  left: 50%;
  translate: -50% -50%; /* ⬅️ Keep it centered */
  overflow: hidden;
  background: transparent !important;
}

#emoji-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  position: relative;
  transform: scale(0.97);  /* Zoom value */
  transform-origin: center top;
  padding-left: 8px;
  z-index: 1;  /* Keeps the emoji grid "on top" */
  background: transparent !important;
}

@supports (-webkit-touch-callout: none) {
  #emoji-container {
    transform: scale(1.02) translateY(-6.5%);
    transform-origin: center top;
  }
}

/* Generalize button + input styling to all panels */
.emoji-submenu button,
.submenu-panel button {
  background: #0066ff;
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: box-shadow 0.2s ease, background 0.3s ease;
}

.emoji-submenu button:hover,
.submenu-panel button:hover {
  box-shadow: 0 0 8px #0af;
  background: #0077ff;
}

.emoji-submenu input,
.submenu-panel input {
  padding: 6px;
  font-size: 14px;
  width: 100%;
  background: #000;
  color: #fff;
  border: 1px solid #0af;
  border-radius: 4px;
}

/* Generalize heading style */
.emoji-submenu h2,
.submenu-panel h2 {
  font-size: 16px;
  margin: 0;
  padding: 0;
  color: #0af;
  font-family: monospace;
  animation: typing 2s steps(30, end), blink 0.75s step-end infinite;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #0af;
  max-width: 100%;
  box-sizing: border-box;
}

.emoji-preview {
  font-size: 11px;
  line-height: 1.2;
  padding: 2px;
}

.emoji-submenu .submenu-panel > div:first-child {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -10px;
  margin-bottom: 12px;
}

.emoji-submenu.no-backdrop {
  background: transparent;
  backdrop-filter: none;
}

.emoji-submenu.no-backdrop .submenu-panel {
  box-shadow: 0 0 30px rgba(0, 170, 255, 0.4); /* keeps glow */
  background: #111; /* inner panel remains dark */
}

.submenu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

//Sequencer

#sequencer-menu {
  flex-grow: 1;
  overflow-y: auto;
}

.sequencer-grid {
  display: grid;
  grid-template-columns: repeat(4, 60px); /* match .sequencer-slot width */
  grid-template-rows: repeat(4, 60px);
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
}

.sequencer-slot {
  width: 60px;
  height: 60px;
  background: #444 !important;
  border: 2px solid #0af !important;
  border-radius: 6px;
  color: #fff !important;
  font-size: 12px;
  line-height: 1;  /* ✅ Prevent vertical stretching */
  padding: 0px;
  display: flex;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;  /* ✅ Prevent wrapping */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

/* 🔒 Lock in idle styling with no visual feedback on interaction */
.sequencer-slot:hover,
.sequencer-slot:focus,
.sequencer-slot:active {
  background: #444 !important;
  color: #fff !important;
  border: 2px solid #0af !important;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
}

/* ✅ Match .link-toggle active behavior exactly but use purple */
.sequencer-slot.active {
  background: #f0f !important;
  color: #000 !important;
  box-shadow: 0 0 8px #f0f, 0 0 16px #f0f !important;
  animation: pulsePurple 2s infinite ease-in-out !important;
}

.sequencer-grid-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.sequencer-grid-actions button,
.sequencer-grid-actions select {
  width: 100%;
  font-family: monospace;
  font-size: 14px;
  padding: 10px;
  white-space: nowrap;           /* 💡 Prevent vertical wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 6px #007aff99;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}

.sequencer-grid-actions button:hover {
  background-color: #005ecc;
}

#public-slot-details {
  border-top: 1px solid #222;
  padding-top: 10px;
  margin-top: 12px;
}

.heart-button {
  background: none;
  border: none;
  color: #ff6666;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 10px;
  transition: transform 0.2s ease;
}

.heart-button:hover {
  transform: scale(1.1);
  color: #ff9999;
}

.liker-fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.liker-fade.show {
  opacity: 1;
}

#like-toggle.liked {
  background-color: #d33;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}

#likers-list {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #222;
  font-size: 13px;
  color: #ddd;
  max-height: none; /* Let it grow infinitely */
}

.public-scroll-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  background: radial-gradient(circle at top left, #181818, #0e0e0e);
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.08);
  backdrop-filter: blur(2px);
  scrollbar-width: thin;
  scrollbar-color: #555 #111;
}

.public-slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid #222;
  transition: background 0.2s ease-in-out;
}

.public-slot-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s ease-in-out;
}

.public-slot-item:hover {
  background-color: #1a1a1a;
}

.public-slot-label {
  flex: 1;
  margin-left: 8px;
  color: #f1f1f1;
  font-weight: 600;
  font-size: 14px;
  text-shadow: 0 0 2px #000;
}

.public-slot-item.active {
  background-color: #0070f3;
  color: #fff;
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0, 112, 243, 0.6);
  border-left: 4px solid #0ff;
}

.emoji-preview-row {
  display: flex;
  gap: 2px;
  font-size: 10px;
  line-height: 1;
  justify-content: center;
  align-items: center;
}

.glow {
  background: #D62828 !important;
  color: #000 !important;
  box-shadow: 0 0 8px #D62828, 0 0 16px #D62828 !important;
  animation: pulseRed 2s infinite ease-in-out !important;
}
  
@keyframes pulsePurple {
  0%, 100% {
    box-shadow: 0 0 8px #f0f, 0 0 16px #f0f;
  }
  50% {
    box-shadow: 0 0 14px #f0f, 0 0 28px #f0f;
  }
}

@keyframes pulseRed {
  0%, 100% {
    box-shadow: 0 0 8px #D62828, 0 0 16px #D62828;
  }
  50% {
    box-shadow: 0 0 14px #D62828, 0 0 28px #D62828;
  }
}

@keyframes pulseGlow {
  0% {
    transform: scale(1);
    opacity: 0.9;
    border-color: lime;
    box-shadow: 0 0 6px 2px lime;
  }
  50% {
    transform: scale(1.25);
    opacity: 0.5;
    box-shadow: 0 0 12px 6px lime;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
    border-color: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
}

/* === Vertical range input (standards-based) ========================== */
/* Firefox UA cleanups */
input.vertical-slider::-moz-focus-inner,
input.vertical-slider::-moz-focus-outer,
input.vertical-slider::-moz-range-progress,
input.vertical-slider::-moz-range-track {
  background: transparent !important;
  border: 0;
}

input.vertical-slider{
  appearance: none;              /* reset UA styles */
  -webkit-appearance: none;      /* Safari needs this (NOT slider-vertical) */
  writing-mode: vertical-lr;     /* standard vertical */
  direction: rtl;                /* max at top, min at bottom */
  width: 28px;
  height: calc(40px * 7);
  background: transparent !important;
  margin: 0;
  padding: 0;
  border: none;
}

/* WebKit track/thumb */
input.vertical-slider::-webkit-slider-runnable-track{
  width: 4px; height: 100%;
  background: linear-gradient(to bottom, #0af, #00f);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,170,255,.4);
}
input.vertical-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid #0af;
  box-shadow: 0 0 4px #0af;
  margin-left: -6px;             /* centers thumb over 4px track */
  cursor: pointer; position: relative; z-index: 2;
}

/* Firefox track/thumb */
input.vertical-slider::-moz-range-track{
  width: 4px; height: 100%;
  background: linear-gradient(to bottom, #0af, #00f);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,170,255,.4);
}
input.vertical-slider::-moz-range-thumb{
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid #0af; box-shadow: 0 0 4px #0af;
}

/* focus/hover glow */
input.vertical-slider:focus::-webkit-slider-runnable-track,
input.vertical-slider:hover  ::-webkit-slider-runnable-track{
  animation: sliderPulse 2s infinite ease-in-out;
}
@keyframes sliderPulse{
  0%,100%{ box-shadow: 0 0 6px rgba(0,170,255,.3); }
  50%    { box-shadow: 0 0 12px rgba(0,170,255,.8); }
}

/* === Legacy fallback (older iOS Safari that ignores writing-mode) ==== */
/* Wrap your input in .vslider-wrap */
.vslider-wrap{
  position: relative;
  width: 28px;
  height: calc(40px * 7);
  overflow: visible;
}
.vslider-wrap > input.vertical-slider.vslider-fallback{
  /* render horizontal, then rotate into place */
  writing-mode: horizontal-tb;
  direction: ltr;
  position: absolute;
  left: 0; bottom: 0;            /* anchor to wrapper’s bottom */
  width: calc(40px * 7);
  height: 28px;
  transform-origin: left bottom; /* rotate from bottom-left corner */
  transform: rotate(-90deg);
}

/* ⚪ Thumb */
input.vertical-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #0af;
  margin-left: -6px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 4px #0af;
}

input.vertical-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #0af;
  cursor: pointer;
  box-shadow: 0 0 4px #0af;
}

/* 🔆 Animate track glow */
input.vertical-slider:focus::-webkit-slider-runnable-track,
input.vertical-slider:hover::-webkit-slider-runnable-track {
  animation: sliderPulse 2s infinite ease-in-out;
}

@keyframes sliderPulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(0, 170, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 12px rgba(0, 170, 255, 0.8);
  }
}

/* 🎛️ Custom scrollbar for the login agreement panel */
#login-agreement {
  overflow-y: auto;
  max-height: 180px; /* or whatever you set dynamically */
  padding-right: 6px; /* make room for scrollbar */
}

/* WebKit (Chrome, Edge, Safari) */
#login-agreement::-webkit-scrollbar {
  width: 4px;
}

#login-agreement::-webkit-scrollbar-track {
  background: transparent;
}

#login-agreement::-webkit-scrollbar-thumb {
  background: #0af;
  border-radius: 2px;
}

/* Firefox */
#login-agreement {
  scrollbar-width: thin;
  scrollbar-color: #0af transparent;
}

details summary {
  outline: none;
}

details summary:focus {
  outline: none;
  box-shadow: none;
}

details[open] summary {
  background: #0033cc; /* or your preferred color */
  box-shadow: 0 0 6px #0ff; /* optional, just for style */
}

.marquee-column {
  position: absolute;
  top: 0;
  left: -10px;              /* ⬅️ visually center 60px column in 40px grid */
  width: 60px;              /* ⬅️ widened to fit glyphs cleanly */
  height: 160px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  background: transparent;       /* avoid “off” background tinting */
}

.marquee-stream {
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;       /* avoid “off” background tinting */
}

.marquee-loop {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 160px;
  background: transparent;       /* avoid “off” background tinting */
}

@keyframes pulseTextGlow {
  0%, 100% {
    text-shadow: 0 0 3px #0af, 0 0 6px transparent;
    opacity: 0.85;
  }
  50% {
    text-shadow: 0 0 6px #0af, 0 0 12px #0af;
    opacity: 1;
  }
}

@keyframes sciFiWipe {
  0% {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
  }
  50% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(100% 0 0 0);
  }
}

@keyframes sciFiWipeSmooth {
  0% {
    opacity: 1;
    transform: translateX(45%);
  }
  50% {
    opacity: 0;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-45%);
  }
}

.marquee-line {
  height: 40px;
  min-height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  white-space: nowrap;
  overflow: visible;
  box-sizing: border-box;

  /* 🌟 Glow Formatting + Pulse */
  color: #0af;
  text-shadow: 0 0 3px #0af;
  font-family: "Segoe UI Emoji", "Noto Sans", sans-serif;
  opacity: 0.85;
  animation: pulseTextGlow 4s ease-in-out infinite;

  will-change: transform, opacity;
  animation: pulseTextGlow 4s ease-in-out infinite;
  transition: text-shadow 0.3s ease-in-out, opacity 0.3s ease-in-out;
  background: transparent;       /* avoid “off” background tinting */
}

.marquee-line.wipe-effect {
  animation: sciFiWipeSmooth 0.6s ease;
}

@keyframes pulsePurple {
  0%, 100% {
    box-shadow: 0 0 8px #f0f, 0 0 16px #f0f;
  }
  50% {
    box-shadow: 0 0 14px #f0f, 0 0 28px #f0f;
  }
}

@keyframes bannerFade {
  0% { opacity: 0; transform: translateY(20px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(20px); }
}

.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #222;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px #0af;
  text-align: center;
  color: white;
}

.modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: space-around;
  gap: 12px;
}

.modal-actions button {
  background: #0af;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
}

.modal-actions button:hover {
  background: #00c8ff;
}

/* 🔧 Emoji-lock: transparency + sweep fix (drop-in) */

/* limit transparency to containers; let skins/effects paint */
#emoji-lock,
#emoji-lock .col,
#emoji-lock .col-purple {
  background-color: transparent !important;
}

/* don't hard-block cell backgrounds so effects can render */
#emoji-lock .cell {
  background-color: transparent;                  /* no !important */
  border-color: transparent !important;           /* keep clean until selected */
}

/* keep your default black tile skin */
#emoji-lock .cell.cell-default {
  background-color: #000;                         /* preserves .cell-default { background:#000 } */
}

/* keep your existing fade color change (animation: wipe) AND add a real sweep bar */
#emoji-lock .cell.wipe{
  animation: wipe 0.3s ease-out;                  /* your original keyframes */
  position: relative;
  overflow: hidden;                               /* clip the sweep to the tile */
}

/* vertical sweep pass (under your selected glows which use z-index:1) */
#emoji-lock .cell.wipe::after{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  z-index: 0;                                     /* under ::before/::after glows (z:1) */
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(0,170,255,.55) 50%,
              transparent 100%);
  transform: translateX(-120%);                   /* start left off-tile */
  animation: cellSweep 380ms ease-out forwards;   /* pass through once */
}

@keyframes cellSweep{
  to { transform: translateX(120%); }             /* exit right off-tile */
}

/* when .paused is on <html>, freeze animations */
html.paused *{ animation-play-state: paused !important; }

:root{
  --sa-t: env(safe-area-inset-top);
  --sa-r: env(safe-area-inset-right);
  --sa-b: env(safe-area-inset-bottom);
  --sa-l: env(safe-area-inset-left);
}
#emoji-container{
  padding: max(0px,var(--sa-t)) max(0px,var(--sa-r)) max(6px,var(--sa-b)) max(0px,var(--sa-l));
  background: transparent !important;
}

.vslider-wrap{ touch-action: none; }

.marquee-line{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hide the default badge */
.grecaptcha-badge { visibility: hidden !important; }

/* reCAPTCHA disclosure — centered strip, themed, subtle, accessible */
.recaptcha-disclaimer{
  position: fixed;
  left: 14px;
  bottom: 14px;
  transform: translate(0, 0);            /* ← was translate(-50%,0) */
  z-index: 120;              /* below portal (140), above content */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: 6px 12px;
  max-width: calc(100% - 20px);   /* avoid overflow on narrow screens */
  white-space: nowrap;            /* keep as a single-line strip */

  border-radius: 10px;
  font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(230,230,230,.78);

  background: linear-gradient(135deg, rgba(20,20,24,.82), rgba(12,12,16,.68));
  border: 1px solid rgba(0,255,200,.18);
  box-shadow:
    0 8px 24px rgba(0,255,200,.16),
    inset 0 0 0 1px rgba(255,255,255,.04);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  user-select: none;
  opacity: .55;
  transition:
    opacity .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

/* centered strip */
.recaptcha-disclaimer.recaptcha-strip{
  left: 50%;
  right: auto;
  transform: translate(-50%, 0);
  justify-content: center;
  margin: 0;

  /* clamp to viewport including notches */
  max-width: min(
    820px,
    calc(96vw - env(safe-area-inset-left) - env(safe-area-inset-right))
  );
  white-space: nowrap;
}

/* brighten on hover/focus */
.recaptcha-disclaimer:hover,
.recaptcha-disclaimer:focus-within{
  opacity: .95;
  transform: translate(-50%, -1px); /* stay centered when lifting */
  border-color: rgba(0,255,200,.35);
  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    0 0 18px rgba(0,255,200,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* links */
.recaptcha-disclaimer a{
  color: #00e6cc;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,230,204,.4);
  padding-bottom: 1px;
  outline: none;
}
.recaptcha-disclaimer a:hover { border-bottom-style: solid; }

/* tiny aqua dot if you want an icon */
.recaptcha-disclaimer .rce-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #00e6cc;
  box-shadow: 0 0 8px #00e6cc;
  display: inline-block;
  margin-right: 6px;
}

/* keep it tidy on small screens */
@media (max-width: 420px){
  .recaptcha-disclaimer{
    bottom: 10px;
    padding: 5px 8px;
    font-size: 11px;
    max-width: calc(100% - 16px);
  }
}

/* ================================
   TONE NETWORK AUDIO WARNING TOAST
   ================================ */
.audio-warning{
  position: fixed;
  z-index: 99999;

  /* safe-area aware placement */
  left: calc(env(safe-area-inset-left, 0) + 12px);
  right: calc(env(safe-area-inset-right, 0) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0) + 12px);

  display: block;
  width: auto;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 14px;
  text-align: center;

  font: 14px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: #d8e7ec;

  /* techno witchcraft theme */
  background:
    radial-gradient(120% 140% at 50% 120%, rgba(0,255,255,.08), rgba(0,0,0,0) 60%),
    repeating-linear-gradient(to right, rgba(0,255,200,.06) 1px, transparent 10px),
    repeating-linear-gradient(to bottom, rgba(0,255,200,.05) 1px, transparent 10px),
    linear-gradient(135deg,#0c0f12,#14171a);
  border: 1px solid rgba(160,255,255,.22);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 18px rgba(0,255,200,.25),
    inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);

  user-select: none;
  pointer-events: auto; /* allow sparks tap */
  animation: audioWarningPulse 4s ease-in-out infinite,
             audioWarningFadeIn 0.4s ease forwards;
}

.audio-warning::before{
  content: ""; position:absolute; inset:-2px; border-radius:16px; pointer-events:none;
  background: conic-gradient(from 210deg at 50% 50%, rgba(0,255,255,0), rgba(0,255,255,.35), rgba(180,0,255,.25), rgba(0,255,255,0));
  filter: blur(8px) saturate(140%); opacity:.65; z-index:-1;
}

.audio-warning::after{
  content: " ✧ tap to dismiss ✦";
  margin-left: 6px;
  opacity: .6;
  font-size: .9em;
  color: #bff5ff;
}

/* Keep the audio toast visible and above overlays */
#audio-warning,
.audio-warning {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  z-index: 100000 !important; /* higher than 9999 overlays */
}

/* Neutralize any hide/transition classes that might get added */
.audio-warning.hidden,
.audio-warning.fade-out,
.audio-warning.fade-in {
  display: block !important;
  opacity: 1 !important;
  animation: none !important;
}

/* tighten a touch on very narrow phones */
@media (max-width: 380px){
  .audio-warning{ padding: 10px 14px; font-size: 13px; }
}

@keyframes audioWarningPulse {
  0%, 100% {
    box-shadow: 0 0 6px #0af;
    opacity: 0.9;
  }
  50% {
    box-shadow: 0 0 16px #0af;
    opacity: 1;
  }
}

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

/* if an overlay/menu is open and you want it hidden, you can toggle a class on <html> */
html.overlay-open .recaptcha-disclaimer{ visibility: hidden; }

/* Hide global overlays when not on Home or when an overlay is open */
html.mode-module .audio-warning,
html.mode-module .recaptcha-disclaimer,
html.mode-module [data-abuse-check],
html.overlay-open .audio-warning,
html.overlay-open .recaptcha-disclaimer,
html.overlay-open [data-abuse-check]{
  display:none !important; visibility:hidden !important; pointer-events:none !important;
  opacity:0 !important; z-index:0 !important;
}