/* on-screen-keyboard.css — Touch-kiosk virtuelt tastatur (spiller-shell).
   Kun aktivt i kioskmodus (se on-screen-keyboard.js). Matcher shellens mørke
   glassmorphism-tema (Inter, rød aksent). Additivt — påvirker ingenting når
   #osk-root ikke finnes. */

#osk-root.osk-root {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2147483000;            /* over login-overlay (10000) + alle paneler */
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(28,12,12,0.96) 0%, rgba(16,6,6,0.985) 100%);
  border-top: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -12px 40px rgba(0,0,0,0.55);
  /* Ingen backdrop-filter: forbudt av lint-blink-hazards (GPU blur-shader per
     Pixi-frame → flimmer). Bakgrunnen er ~opak (alpha >= 0.96) så blur trengs ikke. */
  transform: translateY(110%);
  transition: transform 0.18s ease;
  touch-action: manipulation;
  user-select: none;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
#osk-root.osk-root.is-visible { transform: translateY(0); }

.osk-board { margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.osk-board--text, .osk-board--symbols { max-width: 920px; }
.osk-board--numeric { max-width: 360px; }

.osk-row { display: flex; gap: 8px; justify-content: center; }

.osk-key {
  flex: 1 1 0; min-width: 0;
  height: 60px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  color: #f4f6fb;
  font-family: inherit;
  font-size: 22px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.08s ease, transform 0.04s ease;
}
.osk-board--numeric .osk-key { height: 64px; font-size: 26px; }
.osk-key:active { background: rgba(255,255,255,0.22); transform: translateY(1px); }

.osk-key--func {
  background: rgba(255,255,255,0.06);
  font-size: 20px;
  color: rgba(255,255,255,0.85);
}
.osk-key--func.is-active {
  background: rgba(229,57,53,0.35);
  border-color: rgba(229,57,53,0.6);
  color: #fff;
}
.osk-key--space { flex: 6 1 0; font-size: 15px; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); }
.osk-key--close { flex: 1.4 1 0; font-size: 16px; font-weight: 700; }
.osk-key--numeric, .osk-key--text, .osk-key--symbols { flex: 1.4 1 0; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }
.osk-key--action {
  flex: 2 1 0;
  background: linear-gradient(180deg, #e53935, #c62828);
  border-color: rgba(0,0,0,0.2);
  color: #fff; font-weight: 800;
}
.osk-key--action:active { background: linear-gradient(180deg, #c62828, #a31f1f); }

@media (max-width: 560px) {
  .osk-key { height: 52px; font-size: 19px; }
  .osk-board--numeric .osk-key { height: 56px; font-size: 22px; }
}