/* ========== GETABOUTIT shared core ========== */
:root {
  --c-pink: #ff006e;
  --c-magenta: #d100d1;
  --c-purple: #8338ec;
  --c-deeppurple: #3a0ca3;
  --c-blue: #4361ee;
  --c-cyan: #00f5ff;
  --c-teal: #06ffa5;
  --c-yellow: #ffd60a;
  --c-orange: #ff9500;
  --c-red: #ef233c;
  --c-bg: #0a0a1e;
  --c-bg-deep: #05050f;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  height: 100dvh;
  background: var(--c-bg);
  color: #fff;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
button, input, textarea { font-family: inherit; }
button { cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ========== CRT atmosphere ========== */
#scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 91;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%);
}

/* ========== chromatic aberration ========== */
.chrom {
  display: inline-block;
  color: #fff;
  text-shadow:
    2px 0 0 var(--c-pink),
    -2px 0 0 var(--c-cyan),
    0 0 6px rgba(255,255,255,0.25);
}
.chrom-jitter { animation: chromJitter 3.3s steps(2, end) infinite; }
@keyframes chromJitter {
  0%, 100% { text-shadow: 2px 0 0 var(--c-pink), -2px 0 0 var(--c-cyan), 0 0 6px rgba(255,255,255,0.25); }
  50%      { text-shadow: 2.5px 0 0 var(--c-pink), -2.5px 0 0 var(--c-cyan), 0 0 8px rgba(255,255,255,0.3); }
}

/* ========== screens (splash, gameover, etc) ========== */
.screen {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding:
    calc(28px + env(safe-area-inset-top))
    calc(24px + env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
  gap: 22px;
  pointer-events: none;
}
.screen * { pointer-events: auto; }
.hidden { display: none !important; }

/* ========== arcade button ========== */
.arcade {
  display: inline-block;
  background: var(--c-pink);
  color: #fff;
  padding: 14px 22px;
  font-size: clamp(10px, 2vw, 13px);
  letter-spacing: 0.12em;
  border-radius: 0;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.4),
    inset 0 4px 0 rgba(255,255,255,0.2),
    0 0 0 3px var(--c-bg),
    0 0 0 5px var(--c-pink),
    0 0 18px rgba(255,0,110,0.6);
  transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.12s ease;
}
.arcade:active { transform: translateY(2px); }
.arcade:focus-visible { outline: 2px dashed #fff; outline-offset: 6px; }
.arcade.cyan {
  background: var(--c-cyan); color: var(--c-bg);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.35),
    inset 0 4px 0 rgba(255,255,255,0.35),
    0 0 0 3px var(--c-bg),
    0 0 0 5px var(--c-cyan),
    0 0 18px rgba(0,245,255,0.6);
}
.arcade.green {
  background: var(--c-teal); color: var(--c-bg);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.35),
    inset 0 4px 0 rgba(255,255,255,0.35),
    0 0 0 3px var(--c-bg),
    0 0 0 5px var(--c-teal),
    0 0 18px rgba(6,255,165,0.55);
}
.arcade.yellow {
  background: var(--c-yellow); color: var(--c-bg);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.35),
    inset 0 4px 0 rgba(255,255,255,0.35),
    0 0 0 3px var(--c-bg),
    0 0 0 5px var(--c-yellow),
    0 0 18px rgba(255,214,10,0.55);
}
.arcade.copied { background: var(--c-teal); color: var(--c-bg); }

/* ========== shell back + mute ========== */
.shell-btn {
  position: fixed; z-index: 95;
  background: rgba(10,10,30,0.7);
  border: 2px solid rgba(255,255,255,0.25);
  color: #fff;
  width: 38px; height: 38px;
  font-size: 14px;
  display: grid; place-items: center;
  border-radius: 6px;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  letter-spacing: 0;
}
.shell-btn:hover { border-color: rgba(255,255,255,0.5); }
.shell-btn:focus-visible { outline: 2px dashed #fff; outline-offset: 3px; }
.shell-back {
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  width: auto; padding: 0 10px;
}
.shell-mute {
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
}

/* ========== page-glitch transition ========== */
.page-glitch {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,0,110,0.18), rgba(0,245,255,0.18));
  mix-blend-mode: screen;
  animation: pageGlitch 0.22s steps(4, end) forwards;
}
@keyframes pageGlitch {
  0%   { opacity: 0; transform: translate(0,0); filter: hue-rotate(0); }
  25%  { opacity: 1; transform: translate(-6px,2px); filter: hue-rotate(40deg); }
  50%  { opacity: 1; transform: translate(6px,-2px); filter: hue-rotate(-30deg); }
  75%  { opacity: 1; transform: translate(-2px,1px); filter: hue-rotate(15deg); }
  100% { opacity: 0; transform: translate(0,0); filter: hue-rotate(0); }
}

/* ========== shared keyframes ========== */
@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.06); }
}
@keyframes glitch {
  0%   { transform: translate(0,0); filter: hue-rotate(0); }
  20%  { transform: translate(-3px,2px); filter: hue-rotate(20deg); }
  40%  { transform: translate(3px,-2px); filter: hue-rotate(-15deg); }
  60%  { transform: translate(-2px,-1px); filter: hue-rotate(10deg); }
  80%  { transform: translate(2px,1px); filter: hue-rotate(-5deg); }
  100% { transform: translate(0,0); filter: hue-rotate(0); }
}
@keyframes flameFlicker {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}

.glitch { animation: glitch 0.4s steps(4, end) 1; }
.pulse  { animation: pulse 1.1s ease-in-out infinite; }

/* ========== wordmark ========== */
.wordmark {
  font-size: clamp(28px, 11vw, 104px);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ========== rainbow mode (konami unlock) ========== */
body.rainbow .chrom {
  animation: rainbowHue 8s linear infinite;
}
@keyframes rainbowHue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ========== a11y media queries ========== */
@media (prefers-reduced-motion: reduce) {
  .pulse, .chrom-jitter, .glitch, body.rainbow .chrom { animation: none !important; }
  .page-glitch { animation: none; opacity: 0; }
  .arcade { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #scanlines, #vignette { display: none; }
  .shell-btn { backdrop-filter: none; background: rgba(10,10,30,0.95); }
}
@media (prefers-contrast: more) {
  .chrom { text-shadow: 2px 0 0 var(--c-pink), -2px 0 0 var(--c-cyan), 0 0 0 #000; }
  .shell-btn { border-color: #fff; }
}

/* ========== shared HUD / typography ========== */
.stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #150525 0%, #0a0a1e 60%, #05050f 100%);
}
.hud {
  position: fixed;
  top: calc(58px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px;
  font-size: clamp(9px, 1.8vw, 12px);
  letter-spacing: 0.14em;
  z-index: 20;
  pointer-events: none;
}
.hud b { color: var(--c-yellow); font-weight: normal; }
.big {
  font-size: clamp(20px, 6vw, 44px);
  letter-spacing: 0.06em;
  line-height: 1;
}
.sub {
  font-size: clamp(9px, 1.8vw, 13px);
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
}
.tap {
  font-size: clamp(10px, 2vw, 13px);
  letter-spacing: 0.18em;
  color: var(--c-cyan);
}
.stats {
  font-size: clamp(9px, 1.6vw, 11px);
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.75);
}
.stats b { color: var(--c-yellow); font-weight: normal; }
.score {
  font-size: clamp(36px, 12vw, 84px);
  letter-spacing: 0.06em;
  line-height: 1;
}

/* ========== shared shake ========== */
@keyframes gaiShake {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3px,2px); }
  40%  { transform: translate(3px,-2px); }
  60%  { transform: translate(-2px,-1px); }
  80%  { transform: translate(2px,1px); }
  100% { transform: translate(0,0); }
}
.shake { animation: gaiShake 0.32s steps(6, end) 1; }
@media (prefers-reduced-motion: reduce) {
  .shake { animation: none !important; }
}

/* ========== toast notifications ========== */
.gai-toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(10,10,30,0.92);
  border: 1px solid var(--c-cyan);
  color: #fff;
  padding: 10px 16px;
  font-size: 10px;
  letter-spacing: 0.18em;
  z-index: 9500;
  box-shadow: 0 0 0 2px rgba(0,245,255,0.2), 0 0 18px rgba(0,245,255,0.3);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.gai-toast.in { opacity: 1; transform: translateX(-50%) translateY(0); }
.gai-toast.out { opacity: 0; transform: translateX(-50%) translateY(-6px); }

/* ========== theme overrides ========== */
body.theme-deepnight #scanlines { opacity: 0.5; }
body.theme-deepnight #vignette { background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.65) 100%); }
body.theme-deepnight {
  --c-pink: #cf0058;
  --c-magenta: #a700a7;
  --c-purple: #6829bd;
  --c-deeppurple: #2e0a82;
  --c-blue: #3650c5;
  --c-cyan: #00c7d1;
  --c-teal: #05cf85;
  --c-yellow: #d1b008;
  --c-orange: #d17a00;
  --c-red: #c11c30;
}
body.theme-highcontrast #scanlines, body.theme-highcontrast #vignette { display: none; }
body.theme-highcontrast .chrom { text-shadow: 3px 0 0 var(--c-pink), -3px 0 0 var(--c-cyan); }
body.theme-highcontrast .tile,
body.theme-highcontrast .shell-btn,
body.theme-highcontrast .arcade { border-width: 2px !important; }
body.theme-highcontrast { font-weight: bold; }

/* ========== category tabs (home) ========== */
.tabs {
  display: flex;
  gap: 12px;
  margin: 22px auto 0;
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-purple) transparent;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-thumb { background: var(--c-purple); }
.tab {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  font-size: clamp(8px, 1.5vw, 10px);
  letter-spacing: 0.18em;
  padding: 10px 14px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.tab:hover { color: #fff; border-color: rgba(255,255,255,0.45); }
.tab:focus-visible { outline: 2px dashed #fff; outline-offset: 3px; }
.tab.active {
  color: #fff;
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 1px var(--c-cyan), 0 0 14px rgba(0,245,255,0.35);
  position: relative;
}
.tab.active::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-pink), var(--c-cyan));
}

/* tile category badge */
.tile .cat {
  position: absolute;
  bottom: 8px; left: 14px;
  font-size: 7px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.45);
}
.tile .today-badge {
  position: absolute;
  top: 18px; right: 16px;
  font-size: 7px;
  letter-spacing: 0.18em;
  color: var(--c-teal);
}

/* ========== flash overlay helper ========== */
.flash-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.flash-overlay.on { opacity: 1; }

/* ========== achievements modal ========== */
.ach-modal {
  position: fixed; inset: 0;
  background: rgba(5,5,15,0.92);
  z-index: 9700;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding:
    calc(32px + env(safe-area-inset-top))
    20px
    calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.ach-modal h3 {
  font-size: clamp(14px, 3vw, 22px);
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}
.ach-list {
  width: 100%;
  max-width: 460px;
  display: flex; flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.ach-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(10,10,30,0.7);
}
.ach-item.locked { opacity: 0.4; }
.ach-item .mark { font-size: 14px; color: var(--c-yellow); }
.ach-item .label {
  font-size: 10px;
  letter-spacing: 0.16em;
}
.ach-item .desc {
  font-size: 8px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.14em;
  margin-top: 4px;
}