/* ==========================================================================
   WaifuHunter – Shop & Live / Display Break (Shop, Kasse, Online öffnen)
   Seit 3.6 hell; dunkel bleiben nur die Flächen, auf denen Kartenbilder
   wirken sollen (Öffnen, aufgedeckte Karte). Die Farben kamen bis 3.7 aus
   swipe.css und stehen seit dem Ende des Swipe-Stapels hier.
   ========================================================================== */

body.page-break {
    --sw-like: #22A55B;
    --sw-gold: #F2B71F;
    --sw-gold-ink: #8A5A00;     /* Gold als Schrift auf hellem Grund */
}

body.page-break .page > .container { max-width: 1080px; padding-inline: 16px; }
/* Wegfliegende Karten beim Öffnen dürfen die Seite nicht verbreitern */
body.page-break .page { padding: 16px 0 40px; overflow-x: hidden; overflow-x: clip; min-height: 0; }

.btn-break { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-break:hover { color: #fff; background: var(--brand-dark); }
.page-break [hidden] { display: none !important; }

.break-title {
    margin: 0 0 8px;
    font-family: var(--font-brand);
    font-size: clamp(2rem, 8vw, 3.2rem);
    line-height: 1.05;
    color: var(--ink);
}
.break-title--sm { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.break-lead { margin: 0 auto 16px; max-width: 34em; color: var(--ink-soft); font-size: 1.05rem; }
.break-back { margin: 0 0 12px; font-size: .9rem; }
.break-back a { color: var(--ink-muted); }

/* --------------------------------------------------------------- Hero */
.break-hero { text-align: center; padding: 8px 0 24px; }
.break-hero__packs { position: relative; height: 170px; margin: 0 auto 10px; max-width: 320px; }
.break-hero__pack {
    position: absolute; bottom: 0; width: 96px; height: auto;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
    animation: pack-schweben 4s ease-in-out infinite alternate;
}
.break-hero__pack--1 { left: 22px; transform: rotate(-12deg); }
.break-hero__pack--2 { left: 112px; bottom: 18px; width: 104px; z-index: 2; animation-delay: .6s; }
.break-hero__pack--3 { right: 22px; transform: rotate(12deg); animation-delay: 1.2s; }
@keyframes pack-schweben { from { translate: 0 0; } to { translate: 0 -8px; } }

.break-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.break-steps li {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
    color: var(--ink-soft); font-size: .88rem;
}
.break-steps span {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand-tief, #C721B9); color: #fff; font-weight: 800; font-size: .8rem;
}

/* --------------------------------------------------------------- Raster */
.break-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.break-tile {
    display: flex; flex-direction: column;
    border-radius: 18px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--ink); text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.break-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.break-tile.is-soldout { opacity: .6; }
.break-tile__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #FFFFFF, #ECEAF1); }
.break-tile__media img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(27, 26, 29, .22)); }
.break-tile__body { display: grid; gap: 4px; padding: 14px; }
.break-tile__name { font-family: var(--font-brand); font-size: 1.2rem; line-height: 1.2; color: var(--ink); }
.break-tile__meta { color: var(--ink-muted); font-size: .85rem; }
.break-tile__release, .break-detail__release { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); }
.break-tile__release { font-size: .85rem; }
.break-tile__release svg, .break-detail__release svg { flex-shrink: 0; color: var(--brand); }
.break-tile__price { color: var(--ink); font-weight: 800; font-size: 1.1rem; }
.break-tile__avail { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.break-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: var(--surface-alt); border: 1px solid var(--border-strong);
    color: var(--ink-soft); font-size: .75rem; font-weight: 700; margin: 0;
}
.break-badge--new { position: absolute; top: 10px; left: 10px; background: var(--sw-gold); border-color: var(--sw-gold); color: #1B1A1D; }
.break-badge--online { background: var(--brand-tint); border-color: var(--brand-light); color: var(--brand-dark); }
.break-badge--out { color: var(--ink-muted); }
.break-badge--live { background: #FDECEE; border-color: #F6B8C0; color: #A3162A; }
.break-badge--test { background: #3B82F6; border-color: #3B82F6; color: #fff; }
.break-tile .break-badge--test { position: absolute; top: 10px; left: 10px; }

.break-empty { text-align: center; padding: 40px 12px; }
.break-empty__icon { margin: 0; font-size: 2.6rem; color: var(--brand); }
.break-empty h2 { font-family: var(--font-brand); }

/* --------------------------------------------------------------- Detail */
.break-detail { display: grid; gap: 24px; }
@media (min-width: 900px) { .break-detail { grid-template-columns: 1fr 1fr; align-items: start; } }
.break-detail__media { border-radius: 20px; background: radial-gradient(circle at 50% 40%, #FFFFFF, #ECEAF1); padding: 16px; }
.break-gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
.break-gallery img { flex: 0 0 100%; width: 100%; aspect-ratio: 1; object-fit: contain; scroll-snap-align: center; }
.break-detail__pack { display: block; width: 60%; margin: 0 auto; }
.break-detail__meta { margin: 0 0 8px; color: var(--ink-muted); }
.break-detail__release { margin: -4px 0 10px; font-weight: 600; }
.break-detail__price { margin: 0 0 14px; color: var(--ink); font-weight: 800; font-size: 1.6rem; }
.break-detail__price span { color: var(--ink-muted); font-size: .8rem; font-weight: 400; }
.break-contents { display: grid; gap: 8px; margin-bottom: 16px; }
.break-contents__pack { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.break-contents__pack img { width: 30px; height: auto; }
.break-options { display: grid; gap: 12px; margin-bottom: 16px; }
.break-option { padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.break-option:first-child { border-color: var(--brand-light); box-shadow: var(--shadow-sm); }
.break-option.is-disabled { opacity: .65; box-shadow: none; }
.break-option h2 { margin: 0 0 6px; font-size: 1.15rem; }
.break-option p { color: var(--ink-soft); }
.break-bundle { padding: 10px 12px; border-radius: 12px; background: var(--brand-tint); border: 1px solid var(--brand-light); }
.break-desc { color: var(--ink-soft); margin-bottom: 12px; }
.break-shipping { margin-bottom: 12px; color: var(--ink-soft); }
.break-shipping summary { cursor: pointer; font-weight: 700; color: var(--ink); }

/* --------------------------------------------------------------- Kasse */
.break-checkout { display: grid; gap: 16px; max-width: 760px; }
.break-checkout .field-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.break-checkout .w-150 { max-width: 160px; }
.break-sum { width: 100%; border-collapse: collapse; }
.break-sum td { padding: 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.break-sum .num { text-align: right; white-space: nowrap; }
.break-sum__total td { font-weight: 800; font-size: 1.15rem; color: var(--ink); }

/* ======================================================== Online öffnen */
body.page-open .site-footer { display: none; }
.opening { position: relative; min-height: calc(100dvh - var(--header-height) - var(--bottom-nav-height) - 40px); text-align: center; }
.opening__head { margin-bottom: 10px; }
.opening__eyebrow { margin: 0; color: var(--ink-muted); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.opening__title { margin: 2px 0; font-family: var(--font-brand); font-size: clamp(1.4rem, 6vw, 2rem); color: var(--ink); }
.opening__progress { margin: 0 0 6px; color: var(--sw-gold-ink); font-weight: 700; }
.opening__vibrate { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-muted); font-size: .8rem; }
.opening__hint { color: var(--ink-soft); margin: 12px 0; }

/* Feld: Booster gefächert */
.opening__field {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0;
    padding: 20px 4px 8px; perspective: 900px;
}
.field-pack {
    position: relative; width: 74px; margin: 0 -6px;
    padding: 0; border: 0; background: none; cursor: pointer;
    transform: rotate(var(--tilt, 0deg));
    transition: transform .18s ease, filter .18s ease;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55));
}
.field-pack img { display: block; width: 100%; height: auto; pointer-events: none; }
.field-pack:hover, .field-pack:focus-visible { transform: rotate(var(--tilt, 0deg)) translateY(-10px) scale(1.06); z-index: 2; outline: none; }
.field-pack:focus-visible img { outline: 3px solid var(--sw-gold); outline-offset: 2px; border-radius: 6px; }
.field-pack.is-hitpack { width: 82px; filter: drop-shadow(0 0 14px rgba(242, 183, 31, .55)) drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.field-pack.is-opened { opacity: .45; filter: grayscale(.6); }
.field-pack__check {
    position: absolute; top: 40%; left: 50%; translate: -50% 0;
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--sw-like); color: #0A090C; font-weight: 800;
}
@media (min-width: 600px) { .field-pack { width: 96px; margin: 0 -4px; } .field-pack.is-hitpack { width: 106px; } }

/* Fallen und leicht abprallen */
.field-pack.is-dropping { animation: pack-fall .7s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--delay, 0ms); }
@keyframes pack-fall {
    0%   { opacity: 0; transform: translateY(-120vh) rotate(calc(var(--tilt, 0deg) * -2)); }
    70%  { opacity: 1; transform: translateY(8px) rotate(var(--tilt, 0deg)); }
    100% { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
}

/* Bühne: ausgewählter Booster */
.opening__stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; }
.pack {
    position: relative; width: min(62vw, 270px); aspect-ratio: 541 / 866;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .6));
}
.pack img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
/* Lasche: oberes Stück derselben Grafik, klappt beim Aufschneiden nach hinten */
.pack__top { clip-path: inset(0 0 89.5% 0); transform-origin: 50% 10.5%; transition: transform .55s cubic-bezier(.5, 0, .3, 1), opacity .55s ease; }
.pack__body { clip-path: inset(10.5% 0 0 0); }
.pack.is-cut .pack__top { transform: perspective(600px) rotateX(-120deg) translateY(-14%); opacity: 0; }
.pack.is-cut .pack__body { animation: pack-wackel .4s ease; }
@keyframes pack-wackel { 30% { transform: rotate(-2deg); } 60% { transform: rotate(2deg); } }

/* Griffzone großzügig (0–22 %), die gestrichelte Linie liegt auf der
   Siegelnaht der Grafik (sichtbar ab 5,9 %, Naht bei ca. 9,5 %) */
.pack__cutzone {
    position: absolute; left: -8%; right: -8%; top: 0; height: 22%;
    touch-action: none; cursor: crosshair; z-index: 2;
}
.pack__cutzone::before {
    content: ""; position: absolute; left: 0; right: 0; top: 43%;
    border-top: 2px dashed rgba(255, 255, 255, .45);
    animation: schnitt-hinweis 1.6s ease-in-out infinite;
}
.pack.is-cut .pack__cutzone { display: none; }
@keyframes schnitt-hinweis { 50% { border-top-color: rgba(242, 183, 31, .9); } }
.pack__cutline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pack__cutline polyline { fill: none; stroke: #FFF; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(242, 183, 31, .9)); vector-effect: non-scaling-stroke; }

/* Karten kommen heraus */
.opening__reveal { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; perspective: 1200px; }
.reveal-card { position: relative; width: min(70vw, 300px); aspect-ratio: 63 / 88; cursor: pointer; touch-action: pan-y; }
.reveal-card__inner {
    width: 100%; height: 100%; border-radius: 16px; overflow: hidden;
    background: #1B1822; box-shadow: 0 24px 50px rgba(0, 0, 0, .6);
    opacity: 0; transform: translateY(40%) scale(.6);
    transition: transform .45s cubic-bezier(.2, .9, .2, 1.05), opacity .3s ease;
}
.reveal-card.is-shown .reveal-card__inner { opacity: 1; transform: none; }
.reveal-card__img { width: 100%; height: 100%; object-fit: contain; background: #121016; }
.reveal-card.is-hit .reveal-card__inner { box-shadow: 0 0 0 3px var(--sw-gold), 0 0 50px rgba(242, 183, 31, .6), 0 24px 50px rgba(0, 0, 0, .6); }
.reveal-card.is-spinning .reveal-card__inner { animation: hit-dreh 1.1s cubic-bezier(.4, 0, .2, 1) .15s both; }
@keyframes hit-dreh {
    0%   { transform: rotateY(0) scale(1); }
    50%  { transform: rotateY(180deg) scale(1.12); }
    100% { transform: rotateY(360deg) scale(1); }
}
.reveal-card__hit {
    position: absolute; top: -14px; left: 50%; translate: -50% 0; z-index: 2;
    padding: 6px 16px; border-radius: 999px;
    background: var(--sw-gold); color: #1B1A1D;
    font-family: var(--font-brand); font-weight: 800; font-size: 1.1rem;
    box-shadow: 0 0 24px rgba(242, 183, 31, .7);
    animation: hit-puls 1s ease-in-out infinite alternate;
}
@keyframes hit-puls { to { box-shadow: 0 0 40px rgba(242, 183, 31, 1); } }
.opening__counter { margin: 0; color: var(--ink-muted); }

/* Abschluss */
.opening__done { text-align: center; }
.opening__summary { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin: 16px 0; text-align: left; }
.summary-card { position: relative; display: grid; gap: 4px; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-size: .78rem; color: var(--ink-soft); }
.summary-card input { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; accent-color: var(--brand); }
.summary-card img { width: 100%; aspect-ratio: 63 / 88; object-fit: contain; background: var(--surface-alt); border-radius: 8px; }
.summary-card.is-hit { border-color: var(--sw-gold); box-shadow: 0 0 16px rgba(242, 183, 31, .35); color: var(--sw-gold-ink); font-weight: 700; }
.summary-card.is-sold { opacity: .6; cursor: default; }
.summary-card:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(224, 64, 210, .5); }

/* Letzte Bestätigung */
.opening__confirm { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(5, 4, 8, .82); }
.opening__confirm-panel { max-width: 420px; padding: 22px; border-radius: 20px; background: var(--surface); box-shadow: 0 20px 60px rgba(27, 26, 29, .3); }
.opening__confirm-panel h2 { margin-top: 0; font-family: var(--font-brand); }
.opening__confirm-panel p { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
    .break-hero__pack, .field-pack.is-dropping, .pack__cutzone::before, .reveal-card__hit { animation: none !important; }
    .pack, .pack__top, .reveal-card__inner { transition: opacity .2s ease !important; }
    .pack.is-cut .pack__top { transform: none; }
    .reveal-card.is-spinning .reveal-card__inner { animation: none !important; }
}

/* WaifuHunter Live: Kategorien und normale Shopartikel */
.break-chips { margin: 0 0 18px; }
@media (max-width: 719px) {
    /* Auf dem Handy eine ruhige Zeile zum Wischen statt drei umbrochener Reihen */
    .break-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
    .break-chips::-webkit-scrollbar { display: none; }
    .break-chips .chip { flex: 0 0 auto; }
}
.break-section-title { margin: 28px 0 12px; font-family: var(--font-brand); font-size: 1.35rem; color: var(--ink); }
.break-grid--products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
@media (min-width: 720px) { .break-grid--products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.break-tile__media--photo img { width: 100%; height: 100%; object-fit: contain; filter: none; }
.break-tile--product .break-tile__name { font-size: 1rem; }
.cart-lines { display: grid; gap: 12px; }
.cart-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "img body sum" "img qty qty"; gap: 6px 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.cart-line:last-child { border-bottom: 0; padding-bottom: 0; }
.cart-line img { grid-area: img; width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--surface-alt); }
.cart-line__body { grid-area: body; display: grid; gap: 2px; min-width: 0; }
.cart-line__qty { grid-area: qty; display: flex; gap: 6px; align-items: center; }
.cart-line__qty .input { width: 76px; }
.cart-line__sum { grid-area: sum; font-weight: 700; white-space: nowrap; }
.cart-line.has-problem { border-color: rgba(248, 113, 113, .5); }
@media (min-width: 640px) { .cart-line { grid-template-columns: 64px minmax(0, 1fr) auto auto; grid-template-areas: "img body qty sum"; } }
.btn.is-disabled { opacity: .5; pointer-events: none; }

/* ------------------------------------------------ Shop & Live (/live-shop) */
.area-head { margin: 0 0 16px; }
.area-head__kicker { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.area-head__title { margin: 2px 0 6px; font-family: var(--font-brand); font-size: clamp(1.8rem, 6vw, 2.4rem); line-height: 1.1; }
.area-head__lead { margin: 0; max-width: 40em; color: var(--ink-soft); }

.shop-live { margin: 0 0 20px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.shop-live__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.shop-live__heading { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; }
.shop-live__heading svg { color: #E5243B; }
.shop-live__empty { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.shop-live__list { margin: 0; padding: 0; list-style: none; }
.shop-live__list li + li { border-top: 1px solid var(--border); }
.shop-live__list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; color: var(--ink); text-decoration: none; }
.shop-live__list a:hover .shop-live__name { color: var(--brand-dark); }
.shop-live__date { color: var(--ink-soft); font-size: .88rem; white-space: nowrap; }
.shop-live__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Läuft eine Show: ganze Zeile ist der Link */
.shop-live--now {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    border-color: #F6B8C0; background: #FFF7F8; color: var(--ink); text-decoration: none;
}
.shop-live--now:hover { text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.shop-live__img { width: 96px; height: 60px; border-radius: 10px; object-fit: cover; background: var(--surface-alt); }
.shop-live__img--icon { display: grid; place-items: center; color: #E5243B; }
.shop-live__text { display: grid; gap: 2px; min-width: 0; }
.shop-live__badge {
    justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
    border-radius: 999px; background: #E5243B; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
}
@media (prefers-reduced-motion: no-preference) { .shop-live__badge .live-dot-sm { animation: live-dot-blink 1.4s ease-in-out infinite; } }
.shop-live__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-live__meta { color: var(--ink-muted); font-size: .85rem; }
.shop-live__cta { font-weight: 700; color: #A3162A; white-space: nowrap; }
@media (max-width: 479px) { .shop-live__img { width: 64px; height: 44px; } .shop-live__cta { display: none; } }

.break-intro { margin: 0 0 18px; }
.break-intro__title { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.05rem; }
.break-intro__title svg { color: var(--brand); }
.break-intro__text { margin: 0 0 10px; color: var(--ink-soft); }
.break-intro .break-steps { justify-content: flex-start; }