@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Orbitron:wght@400;700&display=swap');

html { height: 100%; margin: 0;} 
body { font-family: 'Orbitron', sans-serif; background: #1a1a1a; color: #03567E; text-align: center; display: flex; flex-direction: column; height:100%; margin: 0;}
.wheel-container { margin: 50px auto; font-size: 1.5rem; letter-spacing: 5px; width: 95%; max-width: 1200px; overflow-x: auto; padding: 10px;}
.alphabet { font-family: 'VT323', monospace; font-size: 2rem; transform: scaleX(1.4); transform-origin: left; letter-spacing: 0px; display: block; margin: 10px 0; margin-left: 3%; padding: 10px; border: 1px solid #444; text-transform: uppercase; white-space: nowrap; width: fit-content;}
.needle { color: #E80115; font-weight: bold; text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; display: inline-block;}
.active-outer { text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; animation: pulse 2s infinite ease-in-out; display: inline-block;}
.label { color: #cccccc; font-weight: bold; margin-right: 10px;}
.btn-warn { border-color: #03567E; border: 1px solid #444; }
.btn-warn:hover { background: #4D0000; border-color: #E80115; color: #E80115;}
.content-wrapper { flex: 1 0 auto; }
.toggle-link {color: #E80115; cursor: pointer; text-decoration: none; font-weight: bold;}
.bottom-text { margin-bottom: 10px; font-size: 0.8rem; color: #666; }
.hidden { display: none !important;}
.vortan-input { background-color: #000; color: #fff; border: 1px solid #444; padding: 10px; font-family: 'VT323', monospace; font-size: 1.2rem; margin: 5px 0; text-transform: uppercase; outline: none; border-radius: 4px; box-sizing: border-box;}
.vortan-input:focus { border-color: #E80155; box-shadow: 0 0 10px #ff0000; }
.vortan-input::placeholder { color: #666; } 
#inner { color: #EBE209; transition: all 0.2s;}
#title { font-family: 'Press Start 2P', cursive; letter-spacing: 5px; color: #E80115; font-weight: bold; text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;}
button { font-family: 'Orbitron', sans-serif; display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 1rem; cursor: pointer; background: #333; color: white; border: none; margin: 5px; border-radius: 4px; transition: all 0.2s; min-width: 60px;}
button:hover { background: #555; }
button:last-child { margin-right: 0;}
footer { margin-top: 0; padding: 10px 0 20px 0; font-size: 0.7rem; color: #444; font-family: 'Orbitron', sans-serif; flex-shrink: 0;}
hr { border: 0; border-top: 1px solid #333; width: 70%; margin: 0 auto;}
@keyframes pulse {
  		0% { text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; }
  		50% { text-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000; }
  		100% { text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; }
}
textarea.vortan-input { width: 80%; min-height: 80px; resize: vertical; display: block; margin: 10px auto; }

	/* Accessibility mode */
body.high-contrast { background: #000 !important; color: #fff !important; }

body.high-contrast div, body.high-contrast .bottom-text, body.high-contrast footer, body.high-contrast label { color: #fff !important; }

body.high-contrast #title, body.high-contrast .needle, body.high-contrast .active-outer, body.high-contrast #inner { text-shadow: none !important; animation: none !important; color: #fff !important; }

body.high-contrast .needle, body.high-contrast .active-outer, body.high-contrast .toggle-link { text-decoration: underline !important; color: #fff !important; }

body.high-contrast button { background: #000; border: 2px solid #fff; color: #fff; }
body.high-contrast button:hover { background: #fff !important; border-color: #000 !important; color: #000 !important;}
body.high-contrast .btn-warn:hover { background: #fff !important; color: #000 !important; border-color: #000 !important; }
body.high-contrast hr { border-top: 1px solid #fff; }

body.high-contrast .vortan-input { border: 1px solid #fff; }

body.high-contrast .vortan-input:focus { box-shadow: 0 0 10px #fff !important; }


	/* Light mode (why??) */
body.light-mode { background: #e0e0e0 !important; color: #1a1a1a !important; }
body.light-mode .vortan-input { background: #fff; color: #000; border: 1px solid #999; }
body.light-mode .vortan-input:focus { box-shadow: 0 0 10px #000; }
body.light-mode .alphabet { background: #fff; border-color: #999; }
body.light-mode .label { color: #555; }
body.light-mode #inner { color: #000; }
body.light-mode #title { color: #000; text-shadow: none; animation: none;}
body.light-mode .needle, body.light-mode .active-outer, body.light-mode .toggle-link { 
  color: #000; 
  text-shadow: none !important; 
  animation: none;
  text-decoration: underline;
}
body.light-mode button { background: #fff; border: 2px solid #000; color: #000;}
body.light-mode button:hover { background: #000; border-color: #fff; color: #fff;}
body.light-mode .btn-warn:hover { background: #000; color: #fff; border-color: #fff;}
body.light-mode hr { border-top: 1px solid #999; }
body.light-mode .bottom-text { color: #333; }