/* ============================================================
   Besoffenen-Rechner — App-Shell-Styles
   Reine Mobile-Touch-App im Kannibalen-Board-Look.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #000;
  font-family: var(--font-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Die App lebt in einer Telefon-Spalte, mittig auf großen Screens */
#root {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background: #000;
}

.kb-app {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  position: relative;
  background:
    radial-gradient(125% 60% at 50% -8%, #211712 0%, var(--ink-900) 58%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* eigenes scrollendes Panel */
.kb-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kb-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* horizontale Tab-Leiste: nur seitlich scrollen, nicht wachsen */
.kb-xscroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.kb-xscroll::-webkit-scrollbar { width: 0; height: 0; }

/* Touch-Targets nie unter 44px */
.tap { -webkit-user-select: none; user-select: none; touch-action: manipulation; }

/* ── Reusable comic outline + harte Schatten kommen aus Tokens ── */

/* ── Animationen ── */
@keyframes kb-pop-in {
  0%   { transform: scale(.97) translateY(7px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes kb-sheet-up {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
@keyframes kb-scrim-in {
  0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes kb-flash {
  0%   { background: rgba(255,196,0,0.32); }
  100% { background: rgba(255,196,0,0); }
}
@keyframes kb-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes kb-wiggle {
  0%,100% { transform: rotate(-2.5deg); }
  50%     { transform: rotate(2.5deg); }
}

.anim-pop  { animation: kb-pop-in 240ms var(--ease-pop) both; }
.row-flash { animation: kb-flash 460ms var(--ease-out); }
.bump      { animation: kb-bump 260ms var(--ease-pop); }

@media (prefers-reduced-motion: reduce) {
  .anim-pop, .row-flash, .bump { animation: none !important; }
}

/* Press-into-shadow für unsere eigenen getippten Flächen */
.press { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.press:active { transform: translate(3px,3px); box-shadow: none !important; }