/* ==========================================================================
   Preview-only shell — NICHT ins Zielprojekt kopieren
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #0d0f12;
    font-family: system-ui, -apple-system, sans-serif;
    overflow-x: hidden; /* Effekte dürfen den Viewport nicht verbreitern */
}

.mobile-container {
    width: 100%;
    max-width: 420px;
    min-height: 100vh;
    margin: 0 auto;
    background: #07080a;
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.6);
    overflow: clip; /* Loot-Effekte werden abgeschnitten ohne Scroll zu beeinflussen */
}

/* ==========================================================================
   Collect tray (sticky top bar for collected items + score)
   ========================================================================== */
.collect-tray {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    height: 0;
    opacity: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #12141a 0%, #0c0e14 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    transition: height 500ms cubic-bezier(0.3, 0.9, 0.3, 1), opacity 400ms ease;
}

.collect-tray.is-visible {
    height: 48px;
    opacity: 1;
}

.collect-tray-items {
    display: flex;
    gap: 6px;
    align-items: center;
    min-height: 32px;
}

.collect-tray-score {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: #ffd060;
    text-shadow: 0 0 6px rgba(255, 200, 80, 0.5);
    min-width: 40px;
    text-align: right;
}

/* --- mini collected item in the tray --- */
.collect-mini {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background: linear-gradient(155deg, #3b4047 0%, #1e2026 100%);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 5px;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    overflow: hidden;
    transform: scale(0);
}

@keyframes collect-mini-pop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   Feed — landet später im Zielprojekt
   ========================================================================== */
.mobile-feed {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 26px 18px 50px;
}

/* ==========================================================================
   Post — 4:3 Cyberdeck HUD block
   -------------------------------------------------------------------------
   .post                       (4:3, perspective, stacking ctx)
     ::before                  -> cast shadow disc (breathes with lift)
     .post-underglow           -> charge halo (blue / green), under the block
     .post-inner               -> preserve-3d, holds flip keyframes
       .post-face.post-front     -> graphite casing + inset screen
         ::before                -> moving sheen during animation
         .screen                 -> deep well
           .screen-bg            -> black base (or fallback gradient)
           .screen-bg-video      -> dynamic video layer
           .load-bar             -> tiny XHR progress
           .screen-vignette      -> CRT curvature fake (corner darken)
           .screen-text.explainor
           .screen-text.actioner
           ::before              -> scanlines
           ::after               -> static glass glare + iridescence
       .post-face.post-back      -> plain graphite back
   ========================================================================== */

.post {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    perspective: 1100px;
    cursor: pointer;
    z-index: 0;
    -webkit-tap-highlight-color: transparent;
}

.post.is-animating {
    z-index: 10; /* lift above neighbours while flipping */
}

/* ---------- cast shadow disc ---------- */
.post::before {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -6px;
    height: 28px;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0) 75%
    );
    filter: blur(9px);
    pointer-events: none;
    z-index: -1;
    transform-origin: center center;
}

.post.is-animating::before {
    animation: lift-shadow 1300ms linear;
}

/* ---------- charge underglow ---------- */
.post-underglow {
    position: absolute;
    left: -18%;
    right: -18%;
    bottom: -24px;
    height: 46px;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    filter: blur(18px);
    border-radius: 50%;
    transition: opacity 1200ms ease;
}

.post.is-charged-blue .post-underglow {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(80, 170, 255, 0.95) 0%,
        rgba(80, 170, 255, 0.55) 32%,
        rgba(80, 170, 255, 0)    72%);
    animation: charge-pulse 2.8s ease-in-out infinite;
}

.post.is-charged-green .post-underglow {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(110, 235, 150, 0.95) 0%,
        rgba(110, 235, 150, 0.55) 32%,
        rgba(110, 235, 150, 0)    72%);
    animation: charge-pulse 3.1s ease-in-out infinite;
}

@keyframes charge-pulse {
    0%, 100% { opacity: 0.78; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.08); }
}

/* ---------- inner (3D wrapper) ---------- */
.post-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

.post.is-flipped .post-inner {
    transform: rotateY(180deg);
}

/* ---------- casing (both faces) ---------- */
.post-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    /* bezel mit scharfem edge-highlight */
    padding: 7px 7px 8px;
    background:
        linear-gradient(158deg, #585e66 0%, #3a3e44 45%, #22252a 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        /* ambient glow */
        0 0 26px rgba(80, 200, 230, 0.06),
        /* near drop */
        0 2px 4px rgba(0, 0, 0, 0.65),
        /* far drop */
        0 14px 28px rgba(0, 0, 0, 0.6),
        /* top highlight — schärfer */
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        /* bottom shade */
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        /* left edge */
        inset 1px 0 0 rgba(255, 255, 255, 0.12),
        /* right edge */
        inset -1px 0 0 rgba(0, 0, 0, 0.45);
    transition: box-shadow 900ms ease;
}

/* charged-state ambient colorization */
.post.is-charged-blue .post-face {
    box-shadow:
        0 0 38px rgba(80, 170, 255, 0.32),
        0 2px 3px rgba(0, 0, 0, 0.55),
        0 16px 32px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        inset 1px 0 0 rgba(160, 200, 255, 0.12),
        inset -1px 0 0 rgba(0, 0, 0, 0.5);
}

.post.is-charged-green .post-face {
    box-shadow:
        0 0 38px rgba(110, 235, 150, 0.3),
        0 2px 3px rgba(0, 0, 0, 0.55),
        0 16px 32px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        inset 1px 0 0 rgba(170, 235, 190, 0.12),
        inset -1px 0 0 rgba(0, 0, 0, 0.5);
}

.post-back {
    transform: rotateY(180deg);
    background:
        linear-gradient(158deg, #4a4f56 0%, #2e3238 50%, #181b20 100%);
}

/* ---------- moving sheen (active during flip) ----------
   Zwei Layer:
     1. Haupt-Sweep: single clean peak, keine doppel-peaks mehr
     2. "Phase": rasier-dünne Linie (~2-3px), sitzt im gradient VOR dem Haupt-Peak
        → visuell läuft sie als nachgezogene Reflection hinter dem Hauptsweep her.
   no-repeat auf beiden Layern verhindert den Wrap-Around (das war das linkstotrechts
   Zweit-Fling kurz vor Schluss — ein tile-wrap des alten background-repeat defaults).
   Opacity wird jetzt innerhalb der keyframes gesteuert (0 → 1 → 0), damit beim
   Entfernen von .is-animating kein kurzer Snap-Artefakt entsteht.
   Duration exakt matched mit flip (1050ms), damit der Sheen nicht nachzieht. */
.post-face::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        /* 1) Haupt-Glosssweep — ein sauberer Peak */
        linear-gradient(108deg,
            transparent 40%,
            rgba(255, 255, 255, 0.14) 50%,
            transparent 60%) no-repeat,
        /* 2) Verzögerte "Phase" — 2-3px dünne Linie, trails hinterher */
        linear-gradient(108deg,
            transparent 35.85%,
            rgba(255, 255, 255, 0.32) 36%,
            transparent 36.15%) no-repeat;
    background-size: 260% 100%, 260% 100%;
    background-position: -130% 0, -130% 0;
    pointer-events: none;
    z-index: 12;
    mix-blend-mode: screen;
    opacity: 0;
}

.post.is-animating .post-face::before {
    animation: sheen-sweep 1050ms linear;
}

@keyframes sheen-sweep {
    0%   { opacity: 0; background-position: -130% 0, -130% 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; background-position:  130% 0,  130% 0; }
}

/* ---------- screen well ---------- */
.screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(0, 0, 0, 0.7);
    box-shadow:
        /* deep inset — sharper, more defined well */
        inset 0 2px 6px rgba(0, 0, 0, 0.95),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        /* chromatic aberration hint on side edges */
        inset 1px 0 0 rgba(255, 70, 130, 0.22),
        inset -1px 0 0 rgba(70, 220, 255, 0.22);
}

/* base bg layer */
.screen-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background:
        radial-gradient(ellipse at 30% 25%, #1a2830 0%, #050808 70%),
        linear-gradient(180deg, #0a0f13, #03060a);
}

.screen-bg-video {
    z-index: 2;
    opacity: 0;
    transition: opacity 550ms ease, transform 650ms cubic-bezier(0.7, 0, 0.2, 1);
}

.screen-bg-video.is-visible { opacity: 1; }

.screen-bg-video.is-leaving {
    transform: translateX(115%);
    opacity: 0;
}

/* scanlines — stärker sichtbar, mehr CRT-Textur */
.screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* primary scanlines */
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 0, 0, 0.22) 2px,
            rgba(0, 0, 0, 0) 3px
        ),
        /* subtle vertical noise grain */
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 3px,
            rgba(0, 0, 0, 0.04) 4px,
            rgba(0, 0, 0, 0) 5px
        );
    pointer-events: none;
    z-index: 3;
    opacity: 0.65;
}

/* CRT curvature vignette (corners darker) */
.screen-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
        radial-gradient(ellipse 130% 120% at center,
            transparent 40%,
            rgba(0, 0, 0, 0.28) 78%,
            rgba(0, 0, 0, 0.6)  100%);
}

/* static glass glare + iridescence
   NB: der diagonale linear-gradient (135deg) ist RAUSGEFLOGEN — der hat als
   stehender Glarestreifen nach jedem Flip wie ein zweiter Sweep gewirkt. */
.screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* top-left glare highlight */
        radial-gradient(ellipse 90% 40% at 30% 0%,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.05) 35%,
            rgba(255, 255, 255, 0)    70%),
        /* iridescent hue drift */
        linear-gradient(120deg,
            rgba(180, 220, 255, 0.06) 0%,
            rgba(255, 200, 230, 0.05) 35%,
            rgba(200, 255, 220, 0.05) 65%,
            rgba(255, 230, 180, 0.06) 100%);
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: screen;
}

/* ---------- screen text ---------- */
.screen-text {
    position: absolute;
    z-index: 6;
    font-family: 'Share Tech Mono', 'VT323', ui-monospace, monospace;
    pointer-events: none; /* Klicks gehen durch zum Card */
}

/* Explainor: now supports headline + subline via .explainor-title + .explainor-sub.
   Falls kein Split: einfach Text direkt im .explainor wie bisher. */
.explainor {
    top: 8px;
    right: 10px;
    max-width: 65%;
    text-align: right;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: #ffdd44;
    -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.7);
    paint-order: stroke fill;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 0 6px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(0, 0, 0, 0.7);
}

/* Title: orange-gelb, kein background-clip Gradient (der erzeugt schwarze
   Artefakte durch drop-shadow). Stattdessen solide Farbe + text-shadow Halo. */
.explainor-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 2px;
    padding: 2px 6px;
    color: #ff9922;
    -webkit-text-stroke: 0;
    text-shadow:
        0 0 3px rgba(0, 0, 0, 1),
        0 0 6px rgba(0, 0, 0, 1),
        0 0 12px rgba(0, 0, 0, 0.85),
        0 0 20px rgba(0, 0, 0, 0.6),
        0 1px 2px rgba(0, 0, 0, 1);
}

/* Subline: gelb + breiter dunkler Schatten */
.explainor-sub {
    display: block;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: #ffdd44;
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.6);
    paint-order: stroke fill;
    padding: 1px 6px;
    text-shadow:
        0 0 5px rgba(0, 0, 0, 1),
        0 0 10px rgba(0, 0, 0, 0.9),
        0 0 18px rgba(0, 0, 0, 0.7);
}

/* Actioner: weiß + schwarzer Balken.
   WICHTIG: kein position:relative hier — .screen-text setzt position:absolute,
   und das ::before muss relativ dazu positioniert werden. */
.actioner {
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #f0f0f0;
    -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.7);
    paint-order: stroke fill;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 0 6px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(0, 0, 0, 0.7);
    padding: 3px 0;
    /* position bleibt absolute (von .screen-text), ::before geht relativ dazu */
}

.actioner::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    z-index: -1;
}

/* ---------- actioner marquee ---------- */
.actioner-marquee {
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    /* mask edges so text fades at sides */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* no backdrop shadow on marquee — the mask handles readability */
.actioner-marquee::before {
    display: none !important;
}

.actioner-marquee-track {
    display: inline-block;
    animation: marquee-scroll 16s linear infinite;
}

.actioner-marquee-gap {
    display: inline-block;
    width: 20em; /* long pause gap */
}

@keyframes marquee-scroll {
    0%   { transform: translateX(5%); }
    100% { transform: translateX(-52%); }
}

/* ---------- load bar ---------- */
.load-bar {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 1.5px;
    background: rgba(255, 180, 90, 0.14);
    overflow: hidden;
    z-index: 7;
    transition: opacity 500ms ease;
}

.load-bar.is-done { opacity: 0; }

.load-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffb347 0%, #ffd488 100%);
    box-shadow: 0 0 5px rgba(255, 180, 80, 0.7);
    transition: width 120ms linear;
}

/* ---------- back label ---------- */
.back-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    color: rgba(255, 255, 255, 0.18);
    text-transform: uppercase;
}

/* ==========================================================================
   Flip choreography — "sarcophagus lid", smoothed + einrasten/ausrasten
   -------------------------------------------------------------------------
   Zwischen den dichten Keyframes wird linear interpoliert (glatter Mittelteil).
   An den Enden sitzen zwei scaleY-Kompressions-Keyframes:
     3%  scaleY(0.94)  → "slop" Wind-up vor dem Liftoff
     96% scaleY(0.94)  → "fmupf" Snap-in beim Landen
   Das liest sich wie ein gut gepasstes Mechanik-Teil.
   ========================================================================== */
.post.is-animating .post-inner {
    animation-duration: 1050ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.post.is-animating.is-flipping .post-inner {
    animation-name: lift-slide-flip;
}

.post.is-animating.is-unflipping .post-inner {
    animation-name: lift-slide-unflip;
}

/* Flip geht RECHTS raus, Unflip kommt LINKS rein */
@keyframes lift-slide-flip {
    0%   { transform: scaleY(1)    translateZ(0)      translateX(0)   rotateX(0deg)  rotateY(0deg); }
    3%   { transform: scaleY(0.94) translateZ(0)      translateX(0)   rotateX(0deg)  rotateY(0deg); }
    10%  { transform: scaleY(1)    translateZ(48px)   translateX(0)   rotateX(0deg)  rotateY(0deg); }
    20%  { transform: scaleY(1)    translateZ(90px)   translateX(5%)  rotateX(-1deg) rotateY(2deg); }
    30%  { transform: scaleY(1)    translateZ(106px)  translateX(17%) rotateX(-3deg) rotateY(12deg); }
    40%  { transform: scaleY(1)    translateZ(114px)  translateX(27%) rotateX(-6deg) rotateY(42deg); }
    50%  { transform: scaleY(1)    translateZ(116px)  translateX(30%) rotateX(-9deg) rotateY(90deg); }
    60%  { transform: scaleY(1)    translateZ(114px)  translateX(27%) rotateX(-6deg) rotateY(138deg); }
    70%  { transform: scaleY(1)    translateZ(106px)  translateX(17%) rotateX(-3deg) rotateY(168deg); }
    80%  { transform: scaleY(1)    translateZ(90px)   translateX(5%)  rotateX(-1deg) rotateY(178deg); }
    90%  { transform: scaleY(1)    translateZ(48px)   translateX(0)   rotateX(0deg)  rotateY(180deg); }
    96%  { transform: scaleY(0.94) translateZ(0)      translateX(0)   rotateX(0deg)  rotateY(180deg); }
    100% { transform: scaleY(1)    translateZ(0)      translateX(0)   rotateX(0deg)  rotateY(180deg); }
}

/* Unflip: slide LINKS + drehe auch über die LINKE Kante (negative rotateY Richtung) */
@keyframes lift-slide-unflip {
    0%   { transform: scaleY(1)    translateZ(0)      translateX(0)    rotateX(0deg)  rotateY(-180deg); }
    3%   { transform: scaleY(0.94) translateZ(0)      translateX(0)    rotateX(0deg)  rotateY(-180deg); }
    10%  { transform: scaleY(1)    translateZ(48px)   translateX(0)    rotateX(0deg)  rotateY(-180deg); }
    20%  { transform: scaleY(1)    translateZ(90px)   translateX(-5%)  rotateX(1deg)  rotateY(-178deg); }
    30%  { transform: scaleY(1)    translateZ(106px)  translateX(-17%) rotateX(3deg)  rotateY(-168deg); }
    40%  { transform: scaleY(1)    translateZ(114px)  translateX(-27%) rotateX(6deg)  rotateY(-138deg); }
    50%  { transform: scaleY(1)    translateZ(116px)  translateX(-30%) rotateX(9deg)  rotateY(-90deg); }
    60%  { transform: scaleY(1)    translateZ(114px)  translateX(-27%) rotateX(6deg)  rotateY(-42deg); }
    70%  { transform: scaleY(1)    translateZ(106px)  translateX(-17%) rotateX(3deg)  rotateY(-12deg); }
    80%  { transform: scaleY(1)    translateZ(90px)   translateX(-5%)  rotateX(1deg)  rotateY(-2deg); }
    90%  { transform: scaleY(1)    translateZ(48px)   translateX(0)    rotateX(0deg)  rotateY(0deg); }
    96%  { transform: scaleY(0.94) translateZ(0)      translateX(0)    rotateX(0deg)  rotateY(0deg); }
    100% { transform: scaleY(1)    translateZ(0)      translateX(0)    rotateX(0deg)  rotateY(0deg); }
}

@keyframes lift-shadow {
    0%   { transform: scaleX(1);    opacity: 0.95; }
    3%   { transform: scaleX(1.05); opacity: 0.88; }
    10%  { transform: scaleX(1.12); opacity: 0.8;  }
    20%  { transform: scaleX(1.24); opacity: 0.66; }
    30%  { transform: scaleX(1.34); opacity: 0.54; }
    50%  { transform: scaleX(1.5);  opacity: 0.38; }
    70%  { transform: scaleX(1.34); opacity: 0.54; }
    80%  { transform: scaleX(1.24); opacity: 0.66; }
    90%  { transform: scaleX(1.12); opacity: 0.8;  }
    96%  { transform: scaleX(1.05); opacity: 0.88; }
    100% { transform: scaleX(1);    opacity: 0.95; }
}

/* ==========================================================================
   360° panoramic video layer (post 2)
   ========================================================================== */
.screen-bg-360 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
    opacity: 0;
    transition: opacity 650ms ease;
    touch-action: none;
    cursor: grab;
}

.screen-bg-360:active {
    cursor: grabbing;
}

.screen-bg-360.is-visible {
    opacity: 1;
}

/* ==========================================================================
   Loot animation system — two phases
   -------------------------------------------------------------------------
   Phase 1 "Buildup":  JS-driven rAF loop. Block rises, shakes with growing
     intensity, golden underglow pulses, rays fade in + rotate slowly,
     counter dings up.  All via inline styles + .is-looting-buildup class.
   Phase 2 "Release":  CSS keyframes.  Block slams back with overshoot,
     light-rays burst + spin + scale out, radial flash, counter pops & fades.
   ========================================================================== */

/* --- golden glow aura (pure CSS box-shadow, behind card) --- */
.post-loot-rays {
    position: absolute;
    inset: -24px;
    border-radius: 18px;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center,
        rgba(255, 220, 80, 0.12) 0%,
        rgba(255, 180, 40, 0.06) 45%,
        transparent 72%);
    box-shadow:
        0 0 50px 8px   rgba(255, 220, 80, 0.45),
        0 0 100px 18px  rgba(255, 180, 40, 0.3),
        0 0 180px 40px  rgba(255, 150, 20, 0.15),
        0 0 300px 60px  rgba(255, 130, 10, 0.06);
}

/* --- spinning burst rays (conic, release only — "first version" brought back) --- */
.post-loot-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350%;
    height: 350%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    background: repeating-conic-gradient(
        from 0deg,
        transparent  0deg,
        rgba(255, 215, 80, 0.4) 2.5deg,
        transparent  5deg,
        transparent 15deg
    );
    filter: blur(3px);
    mix-blend-mode: screen;
}

.post.is-looting-release .post-loot-burst {
    animation: loot-burst-spin 1320ms ease-out forwards;
}

@keyframes loot-burst-spin {
    0%   { opacity: 0;   transform: translate(-50%, -50%) rotate(0deg)   scale(0.4); }
    8%   { opacity: 0.9; transform: translate(-50%, -50%) rotate(25deg)  scale(0.9); }
    25%  { opacity: 0.8; transform: translate(-50%, -50%) rotate(100deg) scale(1.6); }
    60%  { opacity: 0.4; transform: translate(-50%, -50%) rotate(260deg) scale(2.6); }
    100% { opacity: 0;   transform: translate(-50%, -50%) rotate(400deg) scale(3.5); }
}

/* green variant for ring-mode loot */
.post.is-loot-green .post-loot-burst {
    background: repeating-conic-gradient(
        from 0deg,
        transparent  0deg,
        rgba(76, 255, 142, 0.35) 2.5deg,
        transparent  5deg,
        transparent 15deg
    );
}

/* --- radial flash (on top of card) --- */
.post-loot-flash {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(255, 255, 220, 1) 0%,
        rgba(255, 220, 80, 0.65) 35%,
        transparent 70%);
    pointer-events: none;
    z-index: 15;
    opacity: 0;
}

/* --- point counter --- */
.loot-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    font-family: 'Share Tech Mono', monospace;
    font-size: 36px;
    font-weight: 400;
    color: #fff;
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.6);
    text-shadow:
        0 0 8px rgba(255, 220, 100, 0.95),
        0 0 24px rgba(255, 180, 50, 0.6),
        0 0 48px rgba(255, 150, 30, 0.3);
    z-index: 20;
    pointer-events: none;
    transition: transform 90ms ease-out;
}

/* --- buildup golden underglow override --- */
.post.is-looting .post-underglow {
    opacity: 1 !important;
    background: radial-gradient(ellipse at center,
        rgba(255, 200, 60, 1) 0%,
        rgba(255, 180, 40, 0.65) 32%,
        rgba(255, 160, 20, 0) 72%) !important;
    animation: loot-underglow-pulse 0.35s ease-in-out infinite !important;
}

@keyframes loot-underglow-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* during buildup, the card itself also gets a golden edge glow */
.post.is-looting-buildup .post-face {
    box-shadow:
        0 0 38px rgba(255, 200, 60, 0.4),
        0 2px 3px rgba(0, 0, 0, 0.55),
        0 16px 32px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        inset 1px 0 0 rgba(255, 220, 100, 0.15),
        inset -1px 0 0 rgba(0, 0, 0, 0.5) !important;
}

/* --- release: block slam with 360° whirl + bounce (1320ms = 120%) --- */
.post.is-looting-release .post-inner {
    animation: loot-release-block 1320ms cubic-bezier(0.22, 0.9, 0.3, 1) forwards !important;
}

@keyframes loot-release-block {
    0%   { transform: translateY(-28px) translateZ(95px)  rotateY(0deg)    scaleY(1);    filter: brightness(1.6); }
    6%   { transform: translateY(-40px) translateZ(120px) rotateY(-20deg)  scaleY(1);    filter: brightness(2.8); }
    30%  { transform: translateY(0)     translateZ(0)     rotateY(-360deg) scaleY(0.92); filter: brightness(1.7); }
    45%  { transform: translateY(6px)   translateZ(-6px)  rotateY(-360deg) scaleY(0.90); filter: brightness(1.3); }
    60%  { transform: translateY(-3px)  translateZ(0)     rotateY(-360deg) scaleY(1.02); filter: brightness(1.12); }
    /* Settle-Zittern statt letzte Drehung */
    70%  { transform: translateX(2px)  translateY(1px)  translateZ(0) rotateY(-360deg) scaleY(1);    filter: brightness(1.06); }
    78%  { transform: translateX(-2px) translateY(-1px) translateZ(0) rotateY(-360deg) scaleY(0.99); filter: brightness(1.03); }
    86%  { transform: translateX(1px)  translateY(0)    translateZ(0) rotateY(-360deg) scaleY(1.005); filter: brightness(1.02); }
    93%  { transform: translateX(-1px) translateY(0)    translateZ(0) rotateY(-360deg) scaleY(1);    filter: brightness(1.01); }
    100% { transform: translateX(0)    translateY(0)    translateZ(0) rotateY(-360deg) scaleY(1);    filter: brightness(1); }
}

/* --- release: glow burst expands + fades (1320ms = 120%) --- */
.post.is-looting-release .post-loot-rays {
    animation: loot-glow-burst 1320ms ease-out forwards !important;
}

@keyframes loot-glow-burst {
    0%   {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 80px 20px  rgba(255, 220, 80, 0.9),
            0 0 160px 40px rgba(255, 180, 40, 0.6),
            0 0 280px 60px rgba(255, 150, 20, 0.35),
            0 0 400px 80px rgba(255, 130, 10, 0.15);
    }
    20% {
        opacity: 0.9;
        transform: scale(1.6);
        box-shadow:
            0 0 120px 30px  rgba(255, 220, 80, 1),
            0 0 240px 60px  rgba(255, 180, 40, 0.7),
            0 0 400px 100px rgba(255, 150, 20, 0.4),
            0 0 600px 120px rgba(255, 130, 10, 0.2);
    }
    100% {
        opacity: 0;
        transform: scale(2.2);
        box-shadow:
            0 0 0 0 transparent,
            0 0 0 0 transparent,
            0 0 0 0 transparent,
            0 0 0 0 transparent;
    }
}

/* --- release: radial flash (1020ms = 120%) --- */
.post.is-looting-release .post-loot-flash {
    animation: loot-flash 1020ms ease-out forwards;
}

@keyframes loot-flash {
    0%   { width: 30%;  height: 30%;  opacity: 0; }
    6%   { width: 60%;  height: 60%;  opacity: 1; }
    18%  { width: 420%; height: 420%; opacity: 0.85; }
    45%  { width: 520%; height: 520%; opacity: 0.3; }
    100% { width: 580%; height: 580%; opacity: 0; }
}

/* --- release: counter pops large + fades (1080ms = 120%) --- */
.post.is-looting-release .loot-counter {
    animation: loot-counter-pop 1080ms ease-out forwards;
}

@keyframes loot-counter-pop {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
    12%  { transform: translate(-50%, -50%) scale(2.2); opacity: 1; }
    45%  { transform: translate(-50%, -50%) scale(2.6); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}

/* --- spark particles --- */
.loot-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffe680;
    box-shadow: 0 0 4px 1px #ffcc33, 0 0 10px 2px rgba(255, 180, 50, 0.6);
    pointer-events: none;
    z-index: 18;
    animation: loot-spark ease-out forwards;
}

.loot-particle.big {
    width: 5px;
    height: 5px;
    background: #fff8e0;
    box-shadow: 0 0 6px 2px #ffd644, 0 0 16px 4px rgba(255, 190, 60, 0.7);
}

.loot-particle.teal {
    background: #80ffe0;
    box-shadow: 0 0 4px 1px #4cddaa, 0 0 10px 2px rgba(80, 220, 180, 0.6);
}

.loot-particle.white {
    background: #ffffff;
    box-shadow: 0 0 4px 1px #ddd, 0 0 10px 2px rgba(255, 255, 255, 0.6);
}

.loot-particle.amber {
    background: #ffaa40;
    box-shadow: 0 0 4px 1px #ff8800, 0 0 10px 2px rgba(255, 140, 30, 0.6);
}

.loot-particle.green {
    background: #80ff99;
    box-shadow: 0 0 4px 1px #44dd66, 0 0 10px 2px rgba(76, 255, 142, 0.6);
}

.loot-particle.behind {
    z-index: 0;
}

/* ==========================================================================
   Green loot variant (ring mode)
   ========================================================================== */
.post.is-loot-green .post-loot-rays {
    background: radial-gradient(ellipse at center,
        rgba(76, 255, 142, 0.12) 0%,
        rgba(60, 220, 120, 0.06) 45%,
        transparent 72%);
    box-shadow:
        0 0 50px 8px   rgba(76, 255, 142, 0.45),
        0 0 100px 18px  rgba(60, 220, 120, 0.3),
        0 0 180px 40px  rgba(40, 180, 90, 0.15),
        0 0 300px 60px  rgba(20, 150, 60, 0.06);
}

.post.is-loot-green .post-loot-flash {
    background: radial-gradient(circle,
        rgba(220, 255, 240, 1) 0%,
        rgba(76, 255, 142, 0.65) 35%,
        transparent 70%);
}

.post.is-looting.is-loot-green .post-underglow {
    background: radial-gradient(ellipse at center,
        rgba(76, 255, 142, 1) 0%,
        rgba(60, 220, 120, 0.65) 32%,
        rgba(40, 180, 90, 0) 72%) !important;
}

.post.is-looting-buildup.is-loot-green .post-face {
    box-shadow:
        0 0 38px rgba(76, 255, 142, 0.35),
        0 2px 3px rgba(0, 0, 0, 0.55),
        0 16px 32px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 4px rgba(0, 0, 0, 0.45),
        inset 1px 0 0 rgba(140, 255, 190, 0.12),
        inset -1px 0 0 rgba(0, 0, 0, 0.5) !important;
}

/* --- circular loading ring --- */
.loot-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 86px;
    height: 86px;
    transform: translate(-50%, -50%) rotate(-90deg);
    z-index: 20;
    pointer-events: none;
}

.loot-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 5;
}

.loot-ring-fill {
    fill: none;
    /* dunkelgrün → cyan-grün via SVG stroke (single color, but glow adds the teal) */
    stroke: #3cefaa;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 245; /* 2πr = 2*3.14*39 ≈ 245 */
    stroke-dashoffset: 245;
    filter:
        drop-shadow(0 0 6px rgba(60, 240, 170, 0.85))
        drop-shadow(0 0 14px rgba(50, 200, 220, 0.5))
        drop-shadow(0 0 28px rgba(40, 180, 255, 0.25));
    transition: stroke-dashoffset 80ms linear;
}

.post.is-looting-release .loot-ring {
    animation: loot-ring-pop 1080ms ease-out forwards;
}

@keyframes loot-ring-pop {
    0%   { transform: translate(-50%, -50%) rotate(-90deg) scale(1);   opacity: 1;
           filter: drop-shadow(0 0 10px rgba(60,240,170,0.9)) drop-shadow(0 0 30px rgba(50,200,220,0.7)); }
    12%  { transform: translate(-50%, -50%) rotate(-90deg) scale(2);   opacity: 1; }
    45%  { transform: translate(-50%, -50%) rotate(-90deg) scale(2.4); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) rotate(-90deg) scale(3);   opacity: 0; filter: none; }
}

@keyframes loot-spark {
    0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
    60%  { opacity: 0.8; }
    100% { transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}

/* --- during loot, block stacks above neighbours --- */
.post.is-looting {
    z-index: 20;
}

/* --- gold underglow for cards that need action (starter, clickToLoot) --- */
.post.needs-action .post-underglow {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(255, 200, 60, 0.7) 0%,
        rgba(255, 180, 40, 0.4) 32%,
        rgba(255, 160, 20, 0) 72%);
    animation: action-underglow-pulse 2.4s ease-in-out infinite;
}

@keyframes action-underglow-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 0.8; transform: scale(1.06); }
}

/* --- thump press on child selection --- */
.post.is-thumping .post-inner {
    animation: thump-press 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes thump-press {
    0%   { transform: translateY(0) scaleY(1); }
    35%  { transform: translateY(8px) scaleY(0.94); }
    55%  { transform: translateY(6px) scaleY(0.96); }
    75%  { transform: translateY(1px) scaleY(1.01); }
    100% { transform: translateY(0) scaleY(1); }
}

/* --- parent loading overlay after choice --- */
.post-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 14px;
    pointer-events: none;
    border-radius: 8px;
    transition: background 800ms ease;
}

.post-loading-overlay.is-active {
    background: rgba(0, 0, 0, 0.85);
}

.post-loading-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0);
    transition: color 600ms ease 300ms;
}

.post-loading-overlay.is-active .post-loading-text {
    color: rgba(255, 255, 255, 0.5);
    animation: loading-blink 1.2s ease-in-out infinite;
}

@keyframes loading-blink {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* ==========================================================================
   Camera button (Photo Booth on 360° card)
   ========================================================================== */
.camera-btn {
    position: absolute;
    bottom: 36px;
    right: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: background 200ms, transform 120ms, box-shadow 200ms;
}

.camera-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
}

.camera-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.3);
}

.camera-btn.is-empty {
    opacity: 0.3;
    pointer-events: none;
}

.camera-icon {
    font-size: 18px;
    line-height: 1;
}

.camera-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    min-width: 10px;
    text-align: center;
}

/* Camera flash overlay */
.camera-flash {
    position: absolute;
    inset: 0;
    z-index: 15;
    background: rgba(255, 255, 255, 0.95);
    pointer-events: none;
    animation: camera-flash-anim 550ms ease-out forwards;
}

@keyframes camera-flash-anim {
    0%   { opacity: 1; }
    20%  { opacity: 0.9; }
    100% { opacity: 0; }
}

/* ==========================================================================
   Typewriter card (Day & Time)
   ========================================================================== */
.typewriter-content {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
}

.typewriter-line {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #d8d8d8;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    animation: typewriter-appear 800ms ease forwards;
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.3),
        0 0 12px rgba(120, 200, 255, 0.15);
}

@keyframes typewriter-appear {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

.typewriter-clock {
    font-family: 'Share Tech Mono', monospace;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2em;
    text-align: center;
    opacity: 0;
    animation: typewriter-appear 600ms ease forwards;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.5),
        0 0 18px rgba(120, 200, 255, 0.3),
        0 0 36px rgba(80, 160, 255, 0.15);
}

/* ==========================================================================
   Dice roll result overlay
   ========================================================================== */
.dice-result {
    font-family: 'Share Tech Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #ffffff;
    text-align: center;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.5),
        0 0 16px rgba(74, 168, 255, 0.4);
    opacity: 0;
    animation: dice-result-appear 500ms ease forwards;
}

@keyframes dice-result-appear {
    0%   { opacity: 0; transform: scale(0.7); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   Kormoran discovery photo — vibrates + golden glow
   ========================================================================== */
/* Gold glow applies to both faces */
.post.is-kormoran-photo .post-face {
    box-shadow:
        0 0 30px rgba(255, 200, 60, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.65),
        0 14px 28px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55) !important;
}

/* Vibrate ONLY on the front face (back has its own rotateY(180deg) transform) */
.post.is-kormoran-photo .post-front {
    animation: kormoran-vibrate 0.15s linear infinite;
}

/* After lootburst (is-loot-done), calm down — no more vibration */
.post.is-kormoran-photo.is-loot-done .post-front {
    animation: none;
}

.post.is-kormoran-photo .post-underglow {
    opacity: 1 !important;
    background: radial-gradient(ellipse at center,
        rgba(255, 200, 60, 0.85) 0%,
        rgba(255, 180, 40, 0.5) 32%,
        rgba(255, 160, 20, 0) 72%) !important;
    animation: action-underglow-pulse 1.2s ease-in-out infinite !important;
}

@keyframes kormoran-vibrate {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(1px, -1px); }
    50%  { transform: translate(-1px, 1px); }
    75%  { transform: translate(1px, 0); }
    100% { transform: translate(-1px, -1px); }
}

/* ==========================================================================
   Collectible creature card (3:5 ratio, image + multilingual names + taxonomy)
   ========================================================================== */
.post.is-collectible {
    aspect-ratio: 4 / 6;
    cursor: default;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    perspective: 1100px;
}

.creature-card,
.post.is-collectible * {
    box-sizing: border-box;
}

.post.is-collectible::before {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -6px;
    height: 28px;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0) 75%);
    filter: blur(9px);
    pointer-events: none;
    z-index: -1;
}

.creature-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 10px;
    background: linear-gradient(158deg, #585e66 0%, #3a3e44 45%, #22252a 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.65),
        0 14px 28px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

/* ----- Image section (top ~45%) ----- */
.creature-card-image {
    flex: 0 0 45%;
    background: linear-gradient(180deg, #0f1a22 0%, #050a0e 100%);
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.7);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.creature-card-image img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

/* ----- Name band (mid) ----- */
.creature-card-name-band {
    flex: 0 0 auto;
    padding: 6px 4px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.creature-name-en {
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #ff9922;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.creature-name-la {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    font-style: italic;
    color: #ddd;
    letter-spacing: 0.04em;
    margin-top: 2px;
    opacity: 0.85;
}

/* ----- Info section (bottom) ----- */
.creature-card-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    font-family: 'Share Tech Mono', monospace;
    color: #e0e0e0;
    font-size: 9px;
    line-height: 1.35;
}

.info-section {
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.info-label {
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffcc33;
    margin-bottom: 4px;
    opacity: 0.8;
}

.lang-row, .tax-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
}

.lang-item, .tax-item {
    display: flex;
    gap: 5px;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
}

.lang-code, .tax-key {
    font-size: 8px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: 0 0 auto;
}

.lang-val, .tax-val {
    color: #f0f0f0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.creature-description {
    font-size: 9px;
    color: #ccc;
    line-height: 1.4;
}

/* ----- Mini collectible card (floating bubble inside screen) ----- */
.creature-bubble {
    width: 120px;
    aspect-ratio: 4 / 6;
}

.creature-bubble .creature-card.is-mini {
    padding: 6px;
    gap: 4px;
    border-radius: 6px;
}

.creature-bubble .creature-card.is-mini .creature-card-image {
    flex: 0 0 60%;
}

.creature-bubble .creature-card.is-mini .creature-card-name-band {
    padding: 4px 2px;
}

.creature-bubble .creature-name-en {
    font-size: 9px;
    letter-spacing: 0.06em;
}

.creature-bubble .creature-name-la {
    font-size: 7px;
}

/* Override img border/shadow from .reward-bubble img since we render creature-card */
.creature-bubble > img {
    display: none;
}

/* --- card dissolve (story transition) --- */
.post.is-dissolving {
    pointer-events: none;
}

/* ==========================================================================
   Take! button
   ========================================================================== */
.take-btn {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    padding: 6px 22px;
    border-radius: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    background: rgba(76, 255, 142, 0.15);
    border: 1px solid rgba(76, 255, 142, 0.4);
    box-shadow:
        0 0 12px rgba(76, 255, 142, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 6px rgba(76, 255, 142, 0.6);
    transition: background 200ms, box-shadow 200ms, transform 120ms;
    -webkit-tap-highlight-color: transparent;
}

.take-btn:hover {
    background: rgba(76, 255, 142, 0.25);
    box-shadow:
        0 0 20px rgba(76, 255, 142, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.take-btn:active {
    transform: translateX(-50%) scale(0.94);
    background: rgba(76, 255, 142, 0.35);
}

/* ==========================================================================
   Collect / fly-to-tray animation
   ========================================================================== */
.collect-ghost {
    perspective: 1200px;
    transform-origin: center center;
}

/* ==========================================================================
   Horizontal scroll strip — real blocks as choices
   ========================================================================== */
/* Horizontal scroll strip: parent post + choice blocks side by side.
   Explicit height so flex items can respect their aspect-ratio. */
.choice-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.choice-strip::-webkit-scrollbar { display: none; }

/* All posts inside the strip get explicit height based on their width × 3/4.
   This forces 4:3 regardless of flex stretching. */
.choice-strip > .post {
    aspect-ratio: 4 / 3;
    height: auto;
    align-self: flex-start;
}

/* Parent post: full feed width */
.choice-strip > .post:first-child {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

/* Choice blocks: same full width as parent */
.choice-block {
    flex: 0 0 100%;
    scroll-snap-align: center;
    cursor: pointer;
}

.choice-block.post {
    width: auto;
}

/* "Deal from the ether" — ghost clones on document.body, fixed position,
   fly in from top-left of the VIEWPORT (not clipped by any container).
   Now clones of real rendered blocks — identical visual. */
/* Deal ghosts are now fully JS-transition-driven.
   No CSS animation needed — inline styles handle everything. */

/* Ghost screens: visible atmospheric gradient (video hasn't loaded yet in the clone) */
.deal-ghost .screen-bg {
    background:
        radial-gradient(ellipse at 35% 30%, #2a4a55 0%, #122028 50%, #080e12 80%),
        linear-gradient(160deg, #1a3040, #0a1418) !important;
    opacity: 1 !important;
}

/* Also make ghost screen slightly brighter so it's not just dark */
.deal-ghost .screen {
    background: #0a1418 !important;
}

/* --- pulsing swipe arrows — gold glow on parent slide --- */
.choice-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 54px;
    font-weight: 300;
    color: #ffc84a;
    text-shadow:
        0 0 6px rgba(255, 200, 74, 0.7),
        0 0 14px rgba(255, 180, 50, 0.4),
        0 0 4px rgba(0, 0, 0, 0.9);
    pointer-events: auto;
    cursor: pointer;
    z-index: 10; /* above scanlines, vignette, glare */
    -webkit-tap-highlight-color: transparent;
    animation: arrow-pulse-gold 1.6s ease-in-out infinite;
    user-select: none;
}

.choice-arrow-right { right: 10px; }
.choice-arrow-left  { left: 10px; }

.choice-arrow-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: -6px;
}

.choice-arrow:hover {
    color: #ffd870;
    text-shadow:
        0 0 10px rgba(255, 200, 74, 0.9),
        0 0 20px rgba(255, 180, 50, 0.5),
        0 0 4px rgba(0, 0, 0, 0.9);
}

/* Right arrow: gold pulsing + nudge right */
@keyframes arrow-pulse-gold {
    0%, 100% { opacity: 0.6;  transform: translateY(-50%) translateX(0);   text-shadow: 0 0 6px rgba(255,200,74,0.5), 0 0 14px rgba(255,180,50,0.2), 0 0 4px rgba(0,0,0,0.9); }
    50%      { opacity: 1;    transform: translateY(-50%) translateX(4px); text-shadow: 0 0 10px rgba(255,200,74,0.9), 0 0 22px rgba(255,180,50,0.5), 0 0 4px rgba(0,0,0,0.9); }
}

/* Left arrow: same gold but nudges left */
.choice-arrow-left {
    animation-name: arrow-pulse-gold-left;
}

@keyframes arrow-pulse-gold-left {
    0%, 100% { opacity: 0.6;  transform: translateY(-50%) translateX(0);    text-shadow: 0 0 6px rgba(255,200,74,0.5), 0 0 14px rgba(255,180,50,0.2), 0 0 4px rgba(0,0,0,0.9); }
    50%      { opacity: 1;    transform: translateY(-50%) translateX(-4px); text-shadow: 0 0 10px rgba(255,200,74,0.9), 0 0 22px rgba(255,180,50,0.5), 0 0 4px rgba(0,0,0,0.9); }
}

/* Child-block arrows: gold like parent but no pulse animation, no label */
.choice-arrow-static {
    animation: none !important;
}

/* --- selected flash --- */
/* (choice-flash removed — strip collapse handles the visual) */

/* ==========================================================================
   Reward bubble (floating collectible after loot)
   ========================================================================== */
/* Bubble appear: pure CSS transition (no animation conflict).
   Float: separate class added via JS 800ms later. */
.reward-bubble {
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 8;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: opacity 650ms ease, transform 650ms cubic-bezier(0.3, 1.5, 0.4, 1);
    filter:
        drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 10px rgba(255, 220, 80, 0.3));
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.reward-bubble.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.reward-bubble.is-floating {
    animation: float-bubble 9s ease-in-out infinite;
}

.reward-bubble img {
    width: 80px;
    height: auto;
    display: block;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.4),
        0 0 16px rgba(255, 220, 80, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.5);
}

.reward-bubble-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
    -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.8);
    paint-order: stroke fill;
    text-shadow:
        0 0 4px rgba(0, 0, 0, 1),
        0 0 8px rgba(0, 0, 0, 0.8),
        0 1px 2px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    pointer-events: none;
}

.reward-bubble:hover {
    filter:
        drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 20px rgba(255, 220, 80, 0.55))
        brightness(1.12);
}

.reward-bubble.is-collecting {
    animation: reward-collect 450ms ease-in forwards !important;
    pointer-events: none;
}

@keyframes float-bubble {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px)   rotate(0deg); }
    18%      { transform: translate(-50%, -50%) translate(14px, -16px)  rotate(3deg); }
    38%      { transform: translate(-50%, -50%) translate(-10px, -6px)  rotate(-2deg); }
    58%      { transform: translate(-50%, -50%) translate(18px, -22px)  rotate(4deg); }
    78%      { transform: translate(-50%, -50%) translate(-6px, -10px)  rotate(-1deg); }
}

@keyframes reward-collect {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
    30%  { transform: translate(-50%, -50%) scale(1.3);  opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(0);    opacity: 0; }
}

/* --- mini-item with image in tray --- */
.collect-mini.has-image {
    padding: 2px;
    background: linear-gradient(155deg, #3b4047 0%, #1e2026 100%);
}

.collect-mini.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
    display: block;
}

/* ==========================================================================
   Collect / fly-to-tray animation
   ========================================================================== */
@keyframes collect-fly {
    0% {
        transform: translate(0, 0) scale(1) rotateY(0deg);
        opacity: 1;
        border-radius: 0;
    }
    20% {
        transform: translate(calc(var(--dx) * 0.15), calc(var(--dy) * 0.05))
                   scale(0.6) rotateY(180deg);
        opacity: 0.9;
    }
    50% {
        transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.4))
                   scale(0.25) rotateY(480deg);
        opacity: 0.8;
    }
    80% {
        transform: translate(calc(var(--dx) * 0.9), calc(var(--dy) * 0.9))
                   scale(0.1) rotateY(660deg);
        opacity: 0.7;
    }
    100% {
        transform: translate(var(--dx), var(--dy))
                   scale(0.08) rotateY(720deg);
        opacity: 0;
    }
}