/* --- Base (leave your existing rules above this line) --- */

/* --- Mobile Optimierung --- */
:root{
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* Besseres Scrolling/Rendering auf Mobilgeräten */
html,body{ height:100%; -webkit-text-size-adjust:100%; }
body{ padding-bottom: calc(8px + var(--safe-bottom)); }

/* Buttons & Inputs: größere Touch-Ziele */
button,input{
  min-height: 48px;
  font-size: 16px;                 /* vermeidet iOS-Zoom */
  border-radius: 12px;
}

/* Kartenbrett – mobile-friendly Raster */
.board{
  grid-template-rows: auto auto 1fr;
  gap: 10px;
}

/* Gegnerzeile kann umbrechen und wischen */
.opponents{
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Stapel/Karten: kleiner auf kleinen Bildschirmen */
@media (max-width: 480px){
  .pile,.discard{ width:140px; height:200px; }
  .deck-card{ width:110px; height:170px; font-size:24px; }
  .card-uno{ width:96px; height:150px; }
  .card-inner{ inset:5px; font-size:34px; }
  .corner{ font-size:16px; }
}

/* Hand: sticky am Bildschirmrand, bessere Bedienung */
.hand{
  position: sticky;
  bottom: 0;
  padding-bottom: calc(8px + var(--safe-bottom));
  background: linear-gradient(#0f1422, rgba(15,20,34,.9));
}
.hand-list{
  gap: 10px;
  padding: 8px 6px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Dragging: flüssiger auf Mobilgeräten */
.card-draggable{
  will-change: transform;
  touch-action: none;
}

/* Drop-Zone deutlicher, wenn aktiv */
.discard.highlight-drop{
  outline: 4px solid #7c3aed;
  outline-offset: 3px;
}

/* Topbar fixieren (mit Notch-Safe-Area) */
.topbar{
  position: sticky;
  top: var(--safe-top);
  background: #0b0f19cc;
  backdrop-filter: blur(6px);
  z-index: 5;
  padding-top: calc(6px + var(--safe-top));
}

/* Größere Klickflächen für zentrale Aktionen */
.controls button{
  min-width: 140px;
  font-weight: 600;
}

/* Leichte Karte-Anhebung beim Hovern (auch touch) */
.card-uno{ transform: translateZ(0); }
.card-uno:active{ transform: translateZ(0) scale(1.02); }