/*###############################
###
###     base.component.scss
###     Produktion App
###     BASED ON: Angular  21.02.0, SCSS,
###     AUTHOR: Benjamin Bennewitz
###
###
###       ██████╗  ▀█
###       ██╔══██╗ █▄
###       ██████╦╝
###       ██╔══██╗
###       ██████╦╝
###       ╚═════╝
###
###
#################################*/

/* ==========================================================================
   INHALTSVERZEICHNIS

   01   Fonts
   02   Reset
   03   Dokument
   04   Interaktion
   05   Accessibility
   06   Reduced Motion
   ========================================================================== */

/* ==========================================================================
   01   Fonts
   ========================================================================== */

@font-face { font-family: 'Tiny5'; src: url('../assets/fonts/Tiny5-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: block; }

/* ==========================================================================
   02   Reset
   ========================================================================== */

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button, a, select { color: inherit; }
button, input, select, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* ==========================================================================
   03   Dokument
   ========================================================================== */

:root { color-scheme: dark; --surface: #20231ef5; --border: #727b61; --accent: #d3ea92; font-family: ui-monospace, 'Courier New', monospace; background: #252625; color: #ededdf; }
#experience { position: relative; width: 100%; max-width: 1920px; margin-inline: auto; height: 100svh; min-height: 360px; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #474940, #252625 75%); }
#loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 16px; text-align: center; font-size: clamp(28px, 6vw, 50px); background: #252625; z-index: 20; }
#loading span { font-size: 12px; letter-spacing: .08em; }
#error { position: absolute; inset: 15%; z-index: 30; padding: 24px; background: var(--surface); line-height: 1.8; overflow: auto; }

/* ==========================================================================
   04   Interaktion
   ========================================================================== */

button, select, .utility a { min-height: 44px; padding: 8px 12px; background: #20221de8; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
button:hover:not(:disabled), .utility a:hover { background: #3c4131; }
button:active:not(:disabled) { background: #4a5638; }
button:disabled, select:disabled { opacity: .42; cursor: not-allowed; }
html.keyboard-play, html.keyboard-play * { cursor: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
input[type=range] { width: 100%; min-height: 44px; accent-color: var(--accent); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }

/* ==========================================================================
   05   Accessibility
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (forced-colors: active) { button, select, .panel { border: 1px solid ButtonText; } }

/* ==========================================================================
   06   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }