neser 1.2.0

@import "tailwindcss";
@plugin "daisyui" {
  themes: night;
}

/* Neon accent color overrides for DaisyUI night theme */
@theme {
  --color-neon-cyan: #00f0ff;
  --color-neon-magenta: #ff00e6;
}

/* ── Base styles ─────────────────────────────────────────── */

body {
  margin: 0;
  background: radial-gradient(circle at top, #1e1f24 0%, #0c0d10 60%, #070708 100%);
  color: #e6e6e6;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* ── Neon glow effects ───────────────────────────────────── */

.btn:hover:not(:disabled) {
  box-shadow: 0 0 12px #00f0ff40;
}

.btn:active:not(:disabled) {
  box-shadow: 0 0 18px #00f0ff60;
}

/* ── Screen / canvas ─────────────────────────────────────── */

.screen-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background: #0a0b0f;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 24px #00f0ff18;
}

/* ── Recording overlay ───────────────────────────────────── */

.rec-overlay {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.85rem;
  color: #fff;
  pointer-events: none;
  z-index: 10;
}

.rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e11d48;
  animation: rec-blink 1s step-end infinite;
}

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

.screen-wrap:fullscreen {
  padding: 0;
}

canvas {
  image-rendering: pixelated;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.55);
}

/* ── Status / controls ───────────────────────────────────── */

.status {
  font-size: 0.95rem;
  color: #8fe28f;
}

#autorun-status {
  color: #9bc2ff;
}

#controls,
#shortcut-reference {
  color: #c4c4c4;
  text-align: center;
  line-height: 1.4;
}

#controls {
  font-size: 0.9rem;
}

#shortcut-reference {
  font-size: 0.85rem;
}

/* ── Overlays ────────────────────────────────────────────── */

.shortcut-help-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  max-width: min(44%, 460px);
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(90, 90, 90, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  line-height: 1.25;
  white-space: pre-line;
  z-index: 11;
  pointer-events: none;
}

.neser-toast-container {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

.neser-toast {
  max-width: min(420px, calc(100vw - 32px));
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(10, 11, 15, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e6e6e6;
  font-size: 0.9rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* ── Touch controls (hidden by default, shown on touch devices) ── */

.touch-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.touch-dpad-area,
.touch-action-area {
  display: none;
}

.touch-hide {}

/* Show touch controls only when emulator is running on a touch device */
body.touch-running .touch-dpad-area,
body.touch-running .touch-action-area {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.touch-running .touch-action-area {
  flex-direction: column;
  gap: 8px;
}

body.touch-running .touch-hide {
  display: none;
}

/* ── Joystick styling ───────────────────────────────── */

.touch-joystick {
  position: relative;
  width: 132px;
  height: 132px;
  --touch-stick-x: 0px;
  --touch-stick-y: 0px;
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.touch-joystick-base,
.touch-joystick-knob {
  position: absolute;
  pointer-events: none;
}

.touch-joystick-base {
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5c5c5c 0%, #3a3a3a 58%, #262626 100%);
  border: 2px solid #5b5b5b;
  box-shadow: inset 0 8px 16px rgba(255, 255, 255, 0.08), inset 0 -10px 16px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.28);
}

.touch-joystick-knob {
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin-left: -29px;
  margin-top: -29px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #f7f7f7 0%, #cbcbcb 22%, #8a8a8a 62%, #5c5c5c 100%);
  border: 2px solid #4c4c4c;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.38), inset 0 2px 4px rgba(255, 255, 255, 0.18);
  transform: translate(var(--touch-stick-x), var(--touch-stick-y));
  transition: transform 60ms linear, box-shadow 80ms ease, background 80ms ease;
}

.touch-joystick.pressed .touch-joystick-base {
  border-color: #707070;
  box-shadow: inset 0 10px 18px rgba(255, 255, 255, 0.1), inset 0 -12px 18px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.32);
}

.touch-joystick.pressed .touch-joystick-knob {
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #dadada 20%, #989898 60%, #666666 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.34), inset 0 2px 4px rgba(255, 255, 255, 0.22);
}

/* ── Action buttons (A/B) ──────────────────────────── */

.touch-action-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.touch-meta-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.touch-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", monospace;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.touch-btn-a,
.touch-btn-b {
  background: #cc0000;
  border: 3px solid #990000;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.touch-btn-a.pressed,
.touch-btn-b.pressed {
  background: #990000;
  border-color: #770000;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  transform: scale(0.95);
}

/* B is slightly lower than A on a real NES controller */
.touch-btn-b {
  margin-top: 20px;
}

/* ── Start / Select meta buttons ───────────────────── */

.touch-meta-btn {
  width: 72px;
  height: 28px;
  border-radius: 14px;
  background: #4a4a4a;
  border: 2px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", monospace;
  font-size: 0.55rem;
  font-weight: bold;
  color: #ccc;
  letter-spacing: 0.05em;
  transform: rotate(-15deg);
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.touch-meta-btn.pressed {
  background: #333;
  border-color: #555;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ── Touch device header override (only while running, non-handheld) ── */

body.touch-running:not(.handheld) header {
  display: none !important;
}

/* ── Handheld: always hide zoom buttons ── */

/* Primary: JS class (works in both portrait and landscape) */
body.handheld #screen-minus,
body.handheld #screen-plus {
  display: none !important;
}

/* CSS fallback for portrait mode (hides buttons before JS class is applied) */
@media (pointer: coarse) and (max-width: 768px) {
  #screen-minus,
  #screen-plus {
    display: none !important;
  }
}

/* ── Handheld: constrain layout height and strip padding when running ── */

body.handheld.touch-running .drawer-content {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden;
}

body.handheld.touch-running main {
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
}

/* ── Handheld portrait layout (Game Boy-style) ── */

body.handheld.handheld-portrait.touch-running main {
  justify-content: flex-start;
}

body.handheld.handheld-portrait.touch-running .touch-controls {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "screen screen screen"
    "dpad   meta   actions";
  width: 100%;
  gap: 8px;
  align-items: center;
  justify-items: center;
  padding: 0;
}

body.handheld.handheld-portrait.touch-running .screen-wrap {
  grid-area: screen;
  width: 100%;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

body.handheld.handheld-portrait.touch-running .screen-wrap canvas {
  width: 100% !important;
  height: auto !important;
  border-radius: 0;
}

body.handheld.handheld-portrait.touch-running .touch-dpad-area {
  grid-area: dpad;
  justify-content: center;
}

/* Dissolve touch-action-area box so meta and action-buttons join the grid directly */
body.handheld.handheld-portrait.touch-running .touch-action-area {
  display: contents;
}

body.handheld.handheld-portrait.touch-running .touch-meta-buttons {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.handheld.handheld-portrait.touch-running .touch-action-buttons {
  grid-area: actions;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* In handheld portrait, B should be at the same height as A (no offset) */
body.handheld.handheld-portrait.touch-running .touch-btn-b {
  margin-top: 0;
}

/* ── Handheld landscape: fill available height ── */

body.handheld:not(.handheld-portrait).touch-running .touch-controls {
  height: 100%;
  align-items: stretch;
}

body.handheld:not(.handheld-portrait).touch-running .screen-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

body.handheld:not(.handheld-portrait).touch-running .screen-wrap canvas {
  height: 100% !important;
  width: auto !important;
}