/* hacker.dad-look.com - Hacker terminal for r/masterhacker */
body { margin: 0; background: #050805; }
a { color: #33ff66; }
a:hover { color: #9dffb5; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #33ff66; outline-offset: 2px; }

.hk-page { box-sizing: border-box; min-height: 100vh; padding: 24px; display: flex; flex-direction: column; gap: 24px; max-width: 1100px; margin: 0 auto; color: #33ff66; font-family: "Courier New", Menlo, Consolas, monospace; }
.hk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }

/* Terminal window */
.hk-terminal { background: #000000; border: 1px solid #1c5c2c; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(51, 255, 102, 0.12); }
.hk-titlebar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #0c140e; border-bottom: 1px solid #1c5c2c; font-size: 13px; color: #8fd9a2; }
.hk-dots { display: flex; gap: 6px; }
.hk-dots span { width: 11px; height: 11px; border-radius: 50%; background: #1c5c2c; }
.hk-dots span:first-child { background: #ff5f56; }
.hk-screen { position: relative; height: 62vh; min-height: 380px; overflow-y: auto; padding: 16px 18px; font-size: 15px; line-height: 1.45; text-shadow: 0 0 6px rgba(51, 255, 102, 0.55); cursor: text; }

/* Output lines */
.hk-output { white-space: pre-wrap; word-break: break-word; }
.hk-line { min-height: 1.45em; }
.hk-dim { color: #1f9a3e; }
.hk-ok { color: #9dffb5; }
.hk-warn { color: #ffd84d; text-shadow: 0 0 6px rgba(255, 216, 77, 0.5); }
.hk-bad { color: #ff4d4d; text-shadow: 0 0 6px rgba(255, 77, 77, 0.6); }
.hk-cmd { color: #ffffff; }
.hk-big-error { margin: 10px 0; padding: 12px 14px; border: 2px solid #ff4d4d; color: #ff4d4d; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 0 10px rgba(255, 77, 77, 0.8); }
.hk-link-line a { display: inline-block; margin: 8px 0; padding: 10px 16px; border: 1px solid #33ff66; text-decoration: none; font-weight: 700; }
.hk-link-line a:hover { background: #33ff66; color: #000000; text-shadow: none; }

/* Prompt */
.hk-prompt { display: flex; align-items: baseline; gap: 10px; }
.hk-prompt[hidden] { display: none; }
.hk-prompt-label { color: #9dffb5; white-space: nowrap; }
.hk-input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 0; color: #ffffff; font: inherit; font-size: 16px; caret-color: #33ff66; text-shadow: inherit; }
.hk-input:focus { outline: none; }

/* Quick command buttons */
.hk-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid #1c5c2c; background: #070d08; }
.hk-shortcuts-label { font-size: 13px; color: #1f9a3e; margin-right: 4px; }
.hk-shortcuts button { background: transparent; color: #33ff66; border: 1px solid #1c5c2c; font: inherit; font-size: 14px; padding: 8px 12px; min-height: 40px; cursor: pointer; }
.hk-shortcuts button:hover { border-color: #33ff66; background: #0c2412; }
.hk-shortcuts button:disabled { opacity: 0.4; cursor: wait; }

/* Matrix rain */
.hk-matrix { position: fixed; inset: 0; z-index: 10; pointer-events: none; }

/* Call to action */
.hk-cta { border: 2px solid #33ff66; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; background: #000000; }
.hk-cta h2 { margin: 0; font-size: 34px; line-height: 1.1; text-transform: uppercase; text-shadow: 0 0 10px rgba(51, 255, 102, 0.6); }
.hk-cta p { margin: 0; font-size: 16px; color: #8fd9a2; }
.hk-cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; box-sizing: border-box; width: 100%; max-width: 640px; min-height: 84px; padding: 22px 32px; background: #33ff66; color: #000000; font-size: 28px; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.hk-cta-button:hover { background: #9dffb5; color: #000000; }
.hk-cta-button:focus-visible { outline-color: #9dffb5; outline-offset: 4px; }
.hk-cta-arrow { display: inline-block; }

/* Footer */
.hk-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: #1f9a3e; }

@media (max-width: 600px) {
	.hk-page { padding: 12px 16px 32px; gap: 16px; }
	.hk-screen { height: 58vh; min-height: 320px; font-size: 13px; padding: 12px; }
	.hk-big-error { font-size: 17px; }
	.hk-cta { padding: 28px 16px; }
	.hk-cta h2 { font-size: 24px; }
	.hk-cta-button { font-size: 20px; min-height: 72px; padding: 18px 20px; }
}

/* CRT effects - only when the visitor allows motion */
@media (prefers-reduced-motion: no-preference) {
	.hk-terminal { position: relative; }
	.hk-terminal::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.22) 2px 3px); animation: hk-flicker 4s infinite; }
	.hk-terminal { animation: hk-power-on 0.6s ease-out both; }
	.hk-terminal.is-glitching { animation: hk-glitch 0.5s steps(2) 2; }
	.hk-cta-button { animation: hk-glow 2.2s ease-in-out infinite; transition: transform 0.15s ease; }
	.hk-cta-button:hover { transform: scale(1.03); }
	.hk-cta-arrow { animation: hk-nudge 1.1s ease-in-out infinite; }
	.hk-big-error { animation: hk-glitch 0.4s steps(2) 3; }
}

@keyframes hk-power-on { 0% { opacity: 0; transform: scaleY(0.02); filter: brightness(3); } 60% { opacity: 1; transform: scaleY(1); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
@keyframes hk-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: 0.7; } 49% { opacity: 1; } 92% { opacity: 0.85; } 93% { opacity: 1; } }
@keyframes hk-glitch { 0% { transform: none; } 25% { transform: translate(-3px, 1px) skewX(-2deg); filter: hue-rotate(90deg); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-1px, 2px) skewX(2deg); filter: hue-rotate(-90deg); } 100% { transform: none; filter: none; } }
@keyframes hk-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(51, 255, 102, 0.55); } 50% { box-shadow: 0 0 0 12px rgba(51, 255, 102, 0); } }
@keyframes hk-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(8px); } }