/* 1025DEX Community v0.31.35 · css/ds-modals.css · ausgelagert aus index.html */
/* --- 10 · Fenster, Hinweise, Bewegung -------------------------------------- */

/* Blatt von unten: abgerundet, mit weichem Rand und echtem Verdunkeln */
.modal .bd{background:rgba(8,8,12,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal .sheetbox{
  max-height:90vh;
  border:0;border-top:1px solid var(--line-soft);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  background:var(--bg-elev);
  box-shadow:0 -12px 40px rgba(0,0,0,.18);
  padding:12px 16px calc(24px + env(safe-area-inset-bottom));
}
html[data-theme="dark"] .modal .sheetbox{background:var(--bg-elev);box-shadow:0 -12px 44px rgba(0,0,0,.6)}
.grab{width:38px;height:5px;border-radius:var(--r-full);background:var(--line-strong);margin:2px auto 14px;opacity:.6}
.modal.side .sheetbox{background:var(--bg);border-radius:0;box-shadow:none}
.modal.on .sheetbox{animation:sheetIn 420ms var(--ease-out) both}
.modal.closing .sheetbox{animation:sheetOut 240ms cubic-bezier(.4,0,1,1) both}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetOut{from{transform:none;opacity:1}to{transform:translateY(24px);opacity:0}}
.modal.side.on .sheetbox{animation:sideIn 380ms var(--ease-out) both}

.lightbox{background:rgba(4,4,8,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.lightbox img{border-radius:var(--r-md);box-shadow:0 18px 60px rgba(0,0,0,.6)}
.lbclose{
  border:0;border-radius:var(--r-full);
  width:34px;height:34px;padding:0;display:grid;place-items:center;
  background:rgba(255,255,255,.16);color:#fff;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:15px;font-weight:500;
}
.lbcap{font-size:13.5px;font-weight:450;text-shadow:none;color:rgba(255,255,255,.88)}

/* Hinweis unten: Glas-Pille */
.app-toast{
  bottom:calc(96px + env(safe-area-inset-bottom));
  border:1px solid var(--glass-line);
  border-radius:var(--r-full);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--ink);
  padding:11px 18px;
  font-size:14px;font-weight:540;letter-spacing:-.008em;
  box-shadow:var(--sh-3);
}
.app-toast .undo{
  border:0;border-radius:var(--r-full);
  background:var(--accent);color:#fff;
  font-size:12.5px;font-weight:600;padding:6px 12px;
}
.card-flight{border:0;border-radius:var(--r-xs);box-shadow:var(--sh-3)}

/* Ladeanzeige: schlichter Ring statt rotierendem Pokeball */
.spin{
  width:16px;height:16px;border:2px solid var(--line-strong);
  border-top-color:var(--accent);border-radius:50%;
  background:none!important;
  animation:spinRing .7s linear infinite;
}
.spin::after{display:none}
@keyframes spinRing{to{transform:rotate(360deg)}}

/* Ansichtswechsel: kuerzer, flacher, ohne Massstabssprung */
.view.flow-in{animation:viewIn 320ms var(--ease-out) both}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mainViewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mainViewOut{to{opacity:0;transform:translateY(-4px)}}
@keyframes schubRein{from{opacity:0;transform:translateX(5%)}to{opacity:1;transform:none}}
@keyframes schubReinR{from{opacity:0;transform:translateX(-5%)}to{opacity:1;transform:none}}
@keyframes schubRaus{to{opacity:0;transform:translateX(-4%)}}
@keyframes schubRausR{to{opacity:0;transform:translateX(4%)}}
@keyframes listItemIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes detailOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes countGlow{0%{transform:scale(.97)}55%{transform:scale(1.04);color:var(--owned)}100%{transform:scale(1);color:var(--ink)}}
@keyframes statusPop{0%{transform:scale(.5)}60%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes rowConfirm{0%,100%{background:var(--panel)}35%{background:var(--owned-soft)}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.res .item.motion-in{animation:listItemIn 300ms var(--ease-out) both}

/* Der Uebergang der Navigationsmarkierung entfaellt mit der Markierung. */
::view-transition-group(nav-pille){animation:none}

/* --- Feinheiten und Abschluss -------------------------------------------- */

/* Trennlinien in der Uebersicht waren 3px starke Balken. */
.herostats,.genbars,.kurve{border-top-width:1px;border-top-color:var(--line-soft)}

/* Dunkle Flaechen sollen im Dunkelmodus nicht zusaetzlich getoent werden. */
html[data-theme="dark"] body{
  background:var(--bg);
}
body{
  background:
    radial-gradient(1200px 420px at 50% -10%, color-mix(in srgb,var(--accent) 5%,transparent), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}

/* Grosse Bildschirme: der Inhalt bleibt in der Mitte und atmet mehr */
@media (min-width:760px){
  main{padding:20px 0 12px}
  .panel{padding:20px 22px 19px;border-radius:var(--r-2xl)}
}

/* Kleine Bildschirme */
@media (max-width:400px){
  :root{--pad:13px}
  .neo-wordmark b{font-size:17.5px!important}
  .neo-header .hbtn{padding:8px 11px;font-size:13px}
  nav.neo-nav button{font-size:10px}
  nav.neo-nav button svg{width:23px;height:23px}
  .pokeball{width:40px;height:40px}
}

/* Zeigegeraete bekommen einen Hauch Reaktion, Beruehrung nicht. */
@media (hover:hover) and (pointer:fine){
  .cell:hover,.setrow:hover,.genhead:hover,.res .item:hover,.person:hover{
    border-color:var(--line-strong);
  }
  .btn:hover:not(:disabled),.chip:hover,.wl-btn:hover{filter:brightness(.985)}
  html[data-theme="dark"] .btn:hover:not(:disabled){filter:brightness(1.1)}
}

@media (prefers-reduced-motion:reduce){
  .pokeball,nav.neo-nav button svg{transition:none}
}