@import "tailwindcss";
@plugin "daisyui" {
themes: night;
}
@theme {
--color-neon-cyan: #00f0ff;
--color-neon-magenta: #ff00e6;
}
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;
}
.btn:hover:not(:disabled) {
box-shadow: 0 0 12px #00f0ff40;
}
.btn:active:not(:disabled) {
box-shadow: 0 0 18px #00f0ff60;
}
.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;
}
.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 {
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;
}
.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);
}