/* Infoblatt (v510, infobook.js): Vollbild-Overlay über der Stage-Auswahl, Seiten zum Wischen, Komposition aus echten Spielausschnitten.
   Liegt über Blättern (.sheet 20) und Hinweis-Blasen (.tipbubble 40), unter Booster-Blatt (65) und Halte-Zoom (70). */
.infobook { position: fixed; inset: 0; z-index: 50; background: rgba(5, 6, 30, .72); display: flex; justify-content: center; animation: fadeIn var(--motion-normal) var(--motion-ease) both; }
.infobook.closing { animation: fadeOut var(--motion-normal) var(--motion-ease) both; pointer-events: none; }
.ibbook { position: relative; width: 100%; max-width: 480px; height: 100%; display: flex; flex-direction: column; color: #fff; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 70% at 50% -10%, #2F35A8 0%, #141860 45%, #0A0D3A 100%); animation: riseIn var(--motion-normal) var(--motion-ease) both; }
@media (min-width: 560px) { .infobook { align-items: center; } .ibbook { height: min(100%, 915px); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); } }
.ibtop { display: flex; align-items: center; gap: 10px; padding: calc(var(--sat) + 16px) 16px 6px; }
.ibeb { font: 700 11px/1 var(--font-body); letter-spacing: .2em; color: var(--brand-sky, #2FB4FF); text-transform: uppercase; }
.ibtop h4 { margin: 3px 0 0; font-size: 22px; line-height: 1; text-transform: uppercase; }
.ibcnt { margin-left: auto; font: 600 13px var(--font-body); color: rgba(255,255,255,.65); }
.ibclose { appearance: none; border: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; font: 600 18px/1 var(--font-body); cursor: pointer; }
.ibpages { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ibpages::-webkit-scrollbar { display: none; }
.ibpg { flex: 0 0 100%; scroll-snap-align: start; padding: 8px 16px 0; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.ibshot { position: relative; width: 100%; flex: 0 0 auto; border-radius: 14px; overflow: hidden; background: #0B0D2A; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.ibpg[data-id="p1"] .ibshot { width: min(100%, calc(60vh * 824 / 1200)); margin: 0 auto; } /* hohes Bild (beide Reihen): am Rechner schmaler, damit Text und Knöpfe Platz haben */
.ibpg.ibmenu .ibshot { width: min(100%, max(calc(30dvh * var(--ar, 1)), calc((100dvh - var(--ibres, 440px)) * var(--ar, 1)))); margin: 0 auto; } /* Menü-Blätter (info.json): hohe Ausschnitte schmaler, damit die Stichpunkte Platz haben */
.ibpg.ibtext { justify-content: center; padding-bottom: 8vh; }
.ibpg.ibtext .ibmascot { width: clamp(96px, 22vh, 168px); height: auto; align-self: center; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.ibcomp { position: absolute; inset: 0; }
.ibcomp > img.ibbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ibgrp { position: absolute; inset: 0; will-change: transform; }
.iblay { position: absolute; will-change: transform, opacity; }
.iblay > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.iblay.ibcard { border-radius: 7px; overflow: hidden; }
.iblay.ibshadow { box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.iblay.ibchip { border-radius: 999px; overflow: hidden; }
.iblay.ibrail, .iblay.ibpill { border-radius: 8px; overflow: hidden; }
.iblay.ibmon, .ibrot { border-radius: 8px; overflow: hidden; box-shadow: 0 8px 18px rgba(0,0,0,.55); }
.ibrot { position: absolute; inset: 0; will-change: transform; }
.ibrot > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ibfx { position: absolute; inset: 0; pointer-events: none; }
.ibhl { position: absolute; border: 2px solid rgba(255,255,255,.95); border-radius: 12px; pointer-events: none; z-index: 2; box-shadow: 0 0 0 100vmax rgba(5,8,40,.55), 0 0 0 3px rgba(47,180,255,.45), 0 0 22px 6px rgba(47,180,255,.7); } /* 100vmax statt 9999px und ohne will-change (2026-11-03, Menü-Tap): das Bild (.ibshot) ist nie größer als der Bildschirm und schneidet ab; vorher war die Hervorhebung eine eigene Ebene von ~20000 px Kante, die bei jedem Schritt neu gezeichnet wurde */
.iblinks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.ibsub { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; padding: 26px 12px 9px; min-height: 52px; display: flex; align-items: flex-end; justify-content: center; text-align: center; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(to top, rgba(5,8,40,.92), rgba(5,8,40,0)); font: 600 calc(14px * var(--text-k)) / 1.25 var(--font-body); text-shadow: 0 1px 2px #000; }
.ibsub.on { opacity: 1; }
.ibfinger { position: absolute; z-index: 8; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.75); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.ibtrail { position: absolute; z-index: 7; height: 12px; margin-top: -6px; border-radius: 6px; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.85)); opacity: 0; pointer-events: none; transform-origin: 0 50%; will-change: transform, opacity; }
.ibslash { position: absolute; z-index: 6; height: 10px; margin-top: -5px; border-radius: 5px; background: linear-gradient(to right, rgba(255,255,255,0), #fff 35%, #FF914D 60%, rgba(255,145,77,0)); opacity: 0; transform-origin: 0 50%; box-shadow: 0 0 14px rgba(255,180,80,.9); }
.ibflash { position: absolute; z-index: 5; border-radius: 8px; background: #fff; opacity: 0; mix-blend-mode: screen; }
.ibdmg { text-transform: uppercase; position: absolute; z-index: 7; font: italic 700 26px/1 var(--font-display); color: #FF3131; text-shadow: 0 0 6px #fff, 0 2px 4px #000; opacity: 0; transform: translate(-50%, -50%); }
.ibttl { display: flex; align-items: center; gap: 10px; font-size: 24px; line-height: 1; text-transform: uppercase; min-height: 30px; }
.ibttl img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.ibprose { margin: 0; font: 500 calc(14px * var(--text-k)) / 1.36 var(--font-body); color: #fff; }
.iblead { margin: 0 0 4px; font: 500 calc(14.5px * var(--text-k)) / 1.36 var(--font-body); color: rgba(255,255,255,.82); }
.ibprose b, .ibbul b, .iblead b { color: #BDF5FF; font-weight: 700; }
.ibbul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font: 500 calc(14.5px * var(--text-k)) / 1.3 var(--font-body); }
.ibbul li { position: relative; padding-left: 16px; }
.ibbul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 2px; background: var(--brand-sky, #2FB4FF); }
.ibfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px calc(var(--sab) + 18px); margin-top: auto; }
.ibdots { display: flex; gap: 6px; }
.ibdots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); }
.ibdots i.on { background: var(--brand-sky, #2FB4FF); }
.ibfoot .btn { min-width: 112px; width: auto; }
@media (prefers-reduced-motion: reduce) { .infobook, .infobook.closing, .ibbook { animation: none; } }
/* Ranked (v561): Szenen aus den Bausteinen des Ranked-Bildschirms (app.css .srseason, .srrow, .srstat, .rankhead) statt Aufnahmen, Hintergrund wie der Bildschirm */
.ibscene { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-sizing: border-box; padding: 14px 14px 56px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; text-align: left;
  background: radial-gradient(120% 80% at 50% 0%, var(--brand-indigo) 0%, var(--brand-indigoDeep) 70%); }
.ibscene .srsect, .ibscene .srlist { gap: 6px; }
.ibscene .srrow { min-height: 44px; will-change: transform, opacity; }
.ibscene .srrow .btn.srgo { pointer-events: none; }
.ibswap { position: relative; display: grid; justify-items: end; align-items: center; } .ibswap > * { grid-area: 1 / 1; }
.ibscene .ibtn.srready { width: 100%; height: 52px; min-height: 52px; margin-top: auto; pointer-events: none; }
.ibscene .srme .srstat .display.big { font-size: 30px; }
.ibscene .ibrank { margin-top: 4px; padding: 10px 12px; border-radius: 16px; background: var(--surface-panel); border: 1px solid var(--surface-line); }
.ibscene .ibrank .rankname { font-size: 20px; }
.ibscene .srrow.ibrw { grid-template-columns: minmax(0, 1fr) auto; padding-right: 12px; }
.ibamt { display: flex; align-items: center; gap: 6px; font-size: 18px; font-variant-numeric: tabular-nums; }
.ibscene .ibclaim { margin-top: 4px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 16px 16px; border-radius: 20px;
  background: var(--surface-panel); border: 1.5px solid var(--brand-sky); box-shadow: 0 10px 30px rgba(0,0,0,.45); opacity: 0; will-change: transform, opacity; }
.ibclaim .display.big { font-size: 30px; line-height: 1; } .ibclaim .coinsline { margin: 4px 0; } .ibclaim .cta { width: 100%; pointer-events: none; }
.ibpg[data-book="ranked"] .ibshot { width: min(100%, calc(47vh * 824 / 1000)); margin: 0 auto; } /* hohe Szene: auf niedrigen Bildschirmen schmaler, damit Text und Knöpfe Platz haben */
.ibpg { overflow-y: auto; scrollbar-width: none; } .ibpg::-webkit-scrollbar { display: none; }
.ibhl.solo { box-shadow: 0 0 0 3px rgba(47,180,255,.45), 0 0 22px 6px rgba(47,180,255,.7); } /* mehrere Hervorhebungen: Abdunkeln über .ibdim */
.ibdim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } .ibdim path { fill: rgba(5,8,40,.55); }