:root {
  --bg: #0b1020;
  --panel: #0f1733;
  --panel2: #0b132d;
  --text: #e7f0ff;
  --muted: #a3b2d6;
  --accent: #7cf7ff;
  --accent2: #b6ff6a;
  --danger: #ff5a7a;
  --warn: #ffd36a;
  --shadow: rgba(0, 0, 0, 0.35);
  --border: rgba(255, 255, 255, 0.12);
  --glowX: 50;
  --glowY: 25;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Press Start 2P", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(124, 247, 255, 0.16), transparent 65%),
    radial-gradient(900px 700px at 10% 10%, rgba(182, 255, 106, 0.12), transparent 55%),
    linear-gradient(180deg, #070a14, var(--bg));
  color: var(--text);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 100% 3px;
  mix-blend-mode: overlay;
  opacity: 0.55;
}

body::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(600px 420px at calc(var(--glowX) * 1%) calc(var(--glowY) * 1%), rgba(124, 247, 255, 0.12), transparent 60%),
    radial-gradient(520px 380px at calc(var(--glowX) * 1%) calc(var(--glowY) * 1%), rgba(182, 255, 106, 0.08), transparent 65%);
  filter: blur(2px);
  opacity: 0.9;
}

body.day {
  --bg: #0a1022;
}

body.glitch {
  animation: glitchShift 220ms steps(2, end) infinite;
}

@keyframes glitchShift {
  0% { filter: hue-rotate(0deg) contrast(1.1); }
  50% { filter: hue-rotate(14deg) contrast(1.3) saturate(1.25); }
  100% { filter: hue-rotate(0deg) contrast(1.1); }
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 14, 30, 0.78);
  backdrop-filter: blur(10px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}

.brandText {
  letter-spacing: 0.5px;
  font-size: 12px;
}

.logo {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
  background: #0b1020;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 10px 24px var(--shadow);
  position: relative;
}

.logo::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 4px;
  height: 4px;
  background: #ffd36a;
  box-shadow:
    4px 0 #ffd36a,
    8px 0 #ffd36a,
    0 4px #ffd36a,
    4px 4px #0b1020,
    8px 4px #ffd36a,
    0 8px #ffd36a,
    4px 8px #ffd36a,
    8px 8px #ffd36a,
    12px 8px #ffd36a,
    -4px 8px #ffd36a;
}

.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

body.casino .container {
  max-width: 1600px;
  width: min(1600px, calc(100vw - 32px));
  padding: 16px 16px 32px;
}

.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
  margin-top: 6px;
  align-items: start;
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
}

.heroSide {
  display: grid;
  gap: 16px;
}

.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 40px var(--shadow);
  padding: 14px;
}

.panelTitle {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--accent2);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; }
}

body.casino .grid {
  gap: 14px;
}

body.casinoBlackjack .bjScoreboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

body.casinoBlackjack .bjTotalBox {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  padding: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

body.casinoBlackjack .bjTotalLabel {
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 18px;
  color: var(--muted);
}

body.casinoBlackjack .bjTotalValue {
  font-family: "Press Start 2P", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
  margin-top: 6px;
}

body.casinoBlackjack.bjInRound .bjModePanel,
body.casinoBlackjack.bjInRound .bjPlayersPanel,
body.casinoBlackjack.bjInRound .bjRoomsPanel {
  opacity: 0.55;
  filter: saturate(0.85);
}

body.casinoBlackjack.bjFocus .bjModePanel,
body.casinoBlackjack.bjFocus .bjPlayersPanel,
body.casinoBlackjack.bjFocus .bjRoomsPanel {
  display: none;
}

body.casinoBlackjack.bjFocus .container {
  max-width: none;
  width: calc(100vw - 32px);
}

body.casinoBlackjack.bjFocus .grid {
  grid-template-columns: 1fr;
}

body.casinoBlackjack.bjFocus .bjTablePanel {
  min-height: calc(100vh - 120px);
}

@media (max-width: 980px) {
  body.casinoBlackjack.bjInRound .bjPlayersPanel,
  body.casinoBlackjack.bjInRound .bjRoomsPanel {
    display: none;
  }
}

@media (min-width: 1100px) {
  body.casinoBlackjack .grid {
    grid-template-columns: 340px 1fr 320px;
    grid-template-rows: auto 1fr;
    min-height: calc(100vh - 140px);
    align-items: start;
  }

  body.casinoBlackjack .bjTablePanel {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  body.casinoBlackjack .bjModePanel {
    grid-column: 1;
    grid-row: 1;
  }

  body.casinoBlackjack .bjPlayersPanel {
    grid-column: 3;
    grid-row: 1;
  }

  body.casinoBlackjack .bjRoomsPanel {
    grid-column: 1 / span 1;
    grid-row: 2;
  }
}

body.casinoBlackjack .bjHand {
  min-height: 96px;
}

body.casinoBlackjack.bjFocus .bjHand {
  min-height: 140px;
}

body.casinoBlackjack .bjPlayersPanel .mono,
body.casinoBlackjack .bjRoomsPanel .mono {
  white-space: pre-line;
}

@media (min-width: 1100px) {
  body.casinoBlackjack .bjPlayersPanel,
  body.casinoBlackjack .bjRoomsPanel {
    max-height: calc(100vh - 170px);
    overflow: auto;
  }
}

@media (min-width: 1100px) {
  body.casinoRoulette .grid {
    grid-template-columns: 1.25fr 0.95fr;
    grid-auto-rows: min-content;
    align-items: start;
  }

  body.casinoRoulette .rtWheelPanel {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 520px;
    display: grid;
    align-content: start;
  }

  body.casinoRoulette .rtBetPanel {
    grid-column: 2;
    grid-row: 1;
  }

  body.casinoRoulette .rtResultPanel {
    grid-column: 2;
    grid-row: 2;
  }
}

.terminal {
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 18px 40px var(--shadow);
}

.terminalHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid var(--border);
}

.terminalTitle {
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 20px;
  color: var(--muted);
  margin-left: 8px;
}

.terminalBody {
  margin: 0;
  padding: 14px;
  min-height: 260px;
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
  line-height: 1.35;
  background: rgba(0,0,0,0.35);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.dotRed { background: #ff5a7a; }
.dotYellow { background: #ffd36a; }
.dotGreen { background: #65ff9b; }

.btn {
  font-family: inherit;
  color: var(--text);
  background: linear-gradient(180deg, rgba(124,247,255,0.18), rgba(124,247,255,0.08));
  border: 1px solid rgba(124,247,255,0.38);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 12px 24px var(--shadow);
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.btn:hover {
  filter: brightness(1.12);
}

.btn:active {
  transform: translateY(1px);
  filter: brightness(1.08);
}

.btn:focus-visible {
  outline: none;
  border-color: rgba(124,247,255,0.55);
  box-shadow: 0 12px 24px var(--shadow), 0 0 0 3px rgba(124,247,255,0.12);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.btnSmall {
  padding: 8px 10px;
  font-size: 10px;
}

.mono {
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
  color: var(--muted);
}

body.casino .panel {
  padding: 16px;
}

body.casino .panelTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.casino .pageTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

body.casino .grid {
  grid-template-columns: 1.15fr 1fr 0.85fr;
}

@media (max-width: 980px) {
  body.casino .grid { grid-template-columns: 1fr; }
}

.quote {
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 12px;
}

.status {
  display: grid;
  gap: 10px;
}

.statusRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
}

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.pill.ok { background: rgba(101, 255, 155, 0.14); color: #a7ffd0; border-color: rgba(101, 255, 155, 0.35); }
.pill.no { background: rgba(255, 90, 122, 0.12); color: #ffb0c1; border-color: rgba(255, 90, 122, 0.35); }
.pill.warn { background: rgba(255, 211, 106, 0.12); color: #ffe0a0; border-color: rgba(255, 211, 106, 0.35); }

.quiz {
  display: grid;
  gap: 10px;
}

.quizQ {
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
  color: var(--text);
}

.quizA {
  display: grid;
  gap: 8px;
}

.choice {
  text-align: left;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
}

.choice:hover { filter: brightness(1.12); }

.achievements {
  display: grid;
  gap: 10px;
}

.ach {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}

.achName {
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
}

.achState {
  font-size: 10px;
  color: var(--muted);
}

.isHidden { display: none !important; }

.footerPanel {
  margin-top: 16px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(15, 23, 51, 0.92);
  border: 1px solid rgba(124,247,255,0.32);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 18px 50px var(--shadow);
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  min-width: 280px;
  text-align: center;
}

.toast.show {
  opacity: 1;
}

body.presenceCursorHidden,
body.presenceCursorHidden *,
body.presenceCursorHidden *:hover,
body.presenceCursorHidden button:hover,
body.presenceCursorHidden .btn:hover,
body.presenceCursorHidden .choice:hover,
body.presenceCursorHidden a:hover {
  cursor: none !important;
}

/* Ensure text inputs still show text cursor when presence is active */
body.presenceCursorHidden .textInput,
body.presenceCursorHidden input[type="text"],
body.presenceCursorHidden input[type="email"],
body.presenceCursorHidden input[type="password"],
body.presenceCursorHidden textarea {
  cursor: text !important;
}

.modalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: grid;
  place-items: center;
}

.modalCard {
  width: min(520px, calc(100vw - 32px));
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid rgba(124,247,255,0.35);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  padding: 14px;
}

.modalTitle {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--accent2);
}

.modalText {
  margin: 0 0 12px;
}

.modalRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 980px) {
  .modalRow { grid-template-columns: 1fr; }
}

.pageTitle {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--accent2);
}

.canvasWrap {
  display: grid;
  gap: 12px;
  justify-items: start;
}

canvas {
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 12px;
  image-rendering: pixelated;
}

.sliders {
  display: grid;
  gap: 12px;
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
}

.sliderRow {
  display: grid;
  grid-template-columns: 90px 1fr 50px;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

input[type="range"] {
  width: 100%;
}

.guestbook {
  display: grid;
  gap: 12px;
}

.guestbookForm {
  display: grid;
  grid-template-columns: 180px 1fr 100px;
  gap: 10px;
  align-items: center;
}

@media (max-width: 980px) {
  .guestbookForm {
    grid-template-columns: 1fr;
  }
}

.textInput {
  width: 100%;
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
  color: var(--text);
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
  outline: none;
}

.textInput:focus {
  border-color: rgba(124,247,255,0.5);
  box-shadow: 0 0 0 3px rgba(124,247,255,0.12);
}

.guestbookList {
  display: grid;
  gap: 10px;
}

.gbItem {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}

.gbMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 20px;
}

.gbMsg {
  color: var(--text);
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
}

 .bjHand {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 8px;
 }

 .bjCard {
   width: 62px;
   height: 86px;
   border-radius: 12px;
   border: 1px solid var(--border);
   background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
   box-shadow: 0 14px 34px rgba(0,0,0,0.45);
   display: grid;
   align-content: space-between;
   padding: 8px;
   position: relative;
   overflow: hidden;
 }

 .bjCard::after {
   content: "";
   position: absolute;
   inset: -40% -60%;
   background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12), transparent 55%);
   transform: rotate(-12deg);
   pointer-events: none;
 }

 .bjCardTop {
   font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 22px;
   line-height: 1;
 }

 .bjCardMid {
   font-family: "Press Start 2P", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
   font-size: 18px;
   line-height: 1;
   text-align: center;
 }

 .bjCardRed {
   color: #ff5a7a;
 }

 .bjCardBlack {
   color: #e7ecff;
 }

 .rouletteWrap {
   display: grid;
   place-items: center;
   padding: 10px 0;
 }

 .rouletteWheel {
   width: min(280px, 70vw);
   height: min(280px, 70vw);
   border-radius: 999px;
   border: 1px solid var(--border);
   background:
     radial-gradient(circle at 50% 50%, rgba(0,0,0,0.30), rgba(0,0,0,0.65)),
     conic-gradient(
       #2bd36a 0deg 9.73deg,
       #ff5a7a 9.73deg 19.46deg,
       #10131f 19.46deg 29.19deg,
       #ff5a7a 29.19deg 38.92deg,
       #10131f 38.92deg 48.65deg,
       #ff5a7a 48.65deg 58.38deg,
       #10131f 58.38deg 68.11deg,
       #ff5a7a 68.11deg 77.84deg,
       #10131f 77.84deg 87.57deg,
       #ff5a7a 87.57deg 97.30deg,
       #10131f 97.30deg 107.03deg,
       #ff5a7a 107.03deg 116.76deg,
       #10131f 116.76deg 126.49deg,
       #ff5a7a 126.49deg 136.22deg,
       #10131f 136.22deg 145.95deg,
       #ff5a7a 145.95deg 155.68deg,
       #10131f 155.68deg 165.41deg,
       #ff5a7a 165.41deg 175.14deg,
       #10131f 175.14deg 184.87deg,
       #ff5a7a 184.87deg 194.60deg,
       #10131f 194.60deg 204.33deg,
       #ff5a7a 204.33deg 214.06deg,
       #10131f 214.06deg 223.79deg,
       #ff5a7a 223.79deg 233.52deg,
       #10131f 233.52deg 243.25deg,
       #ff5a7a 243.25deg 252.98deg,
       #10131f 252.98deg 262.71deg,
       #ff5a7a 262.71deg 272.44deg,
       #10131f 272.44deg 282.17deg,
       #ff5a7a 282.17deg 291.90deg,
       #10131f 291.90deg 301.63deg,
       #ff5a7a 301.63deg 311.36deg,
       #10131f 311.36deg 321.09deg,
       #ff5a7a 321.09deg 330.82deg,
       #10131f 330.82deg 340.55deg,
       #ff5a7a 340.55deg 350.28deg,
       #10131f 350.28deg 360deg
     );
   box-shadow: 0 18px 60px rgba(0,0,0,0.55), inset 0 0 0 10px rgba(255,255,255,0.03);
   transform: rotate(0deg);
   position: relative;
 }

 .rouletteWheel::before {
   content: "";
   position: absolute;
   inset: 12px;
   border-radius: 999px;
   background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.14), transparent 55%);
   pointer-events: none;
 }

 .roulettePointer {
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 18px solid rgba(255,255,255,0.9);
   transform: translateY(calc(min(280px, 70vw) * -0.53));
   filter: drop-shadow(0 8px 14px rgba(0,0,0,0.5));
 }