/* ========================================
   ARCHIVE GALLERY — 3D card rail (Archive.exe)
   Lives inside an XP window; the scene owns the whole content area.
   Only transform / opacity / filter are animated.
   ======================================== */

.archive-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #06070f;
    perspective: 1050px;
    perspective-origin: 50% 46%;
    cursor: grab;
    /* the stage owns the gesture: without this a drag scrolls the page and
       a tap can trigger double-tap zoom instead of picking a card */
    touch-action: none;
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.archive-stage.dragging { cursor: grabbing; }

/* ---- depth environment: a floor that fades into the dark ---- */
.archive-env { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.archive-env .sky {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 34%, rgba(60,90,180,.20), transparent 70%),
        radial-gradient(ellipse 40% 30% at 18% 22%, rgba(150,60,190,.13), transparent 70%),
        linear-gradient(180deg, #06070f 0%, #090c1c 46%, #05060c 100%);
}
.archive-env .floor {
    position: absolute; left: -60%; right: -60%; bottom: -8%; height: 58%;
    background-image:
        repeating-linear-gradient(90deg, transparent 0 84px, rgba(96,132,224,.34) 84px 86px),
        repeating-linear-gradient(0deg,  transparent 0 52px, rgba(96,132,224,.20) 52px 54px);
    transform: perspective(340px) rotateX(72deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 0, rgba(0,0,0,.75) 26%, transparent 92%);
            mask-image: linear-gradient(to top, #000 0, rgba(0,0,0,.75) 26%, transparent 92%);
}
.archive-env .horizon {
    position: absolute; left: 0; right: 0; bottom: 58%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120,160,255,.45) 22%, rgba(120,160,255,.45) 78%, transparent);
}
.archive-env .haze {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 76% 74% at 50% 46%, transparent 44%, rgba(3,4,10,.86) 100%);
}

/* ---- the dealer board: felt, lane slots and the deck tray.
       Lives inside the rail so it shares the cards' 3D space and parallaxes
       with them. Slot positions are computed once and used for BOTH the
       outline you see and the target a dealt card flies to. ---- */
.archive-board {
    position: absolute; left: 0; top: 0; width: 0; height: 0;
    transform-style: preserve-3d; pointer-events: none;
    opacity: 0;
}
.archive-felt {
    position: absolute; left: 0; top: 0;
    background:
        radial-gradient(ellipse 60% 70% at 50% 40%, rgba(40,90,170,.30), transparent 72%),
        linear-gradient(180deg, rgba(14,30,64,.55), rgba(6,12,30,.75));
    box-shadow: 0 0 90px rgba(60,130,240,.18) inset;
    border-radius: 10px;
}
.archive-felt::after {
    content: ''; position: absolute; inset: 0; border-radius: 10px;
    background-image:
        repeating-linear-gradient(90deg, transparent 0 78px, rgba(96,170,255,.28) 78px 80px),
        repeating-linear-gradient(0deg,  transparent 0 62px, rgba(70,235,200,.20) 62px 64px);
    -webkit-mask-image: radial-gradient(ellipse 62% 74% at 50% 46%, #000 30%, transparent 92%);
            mask-image: radial-gradient(ellipse 62% 74% at 50% 46%, #000 30%, transparent 92%);
}
.archive-board-logo {
    position: absolute; left: 0; top: 0;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    opacity: 0;
    filter: drop-shadow(0 0 22px rgba(90,180,255,.35));
}
.archive-slot {
    position: absolute; left: 0; top: 0;
    border: 2px solid rgba(120,200,255,.30);
    border-radius: 5px;
    background: rgba(70,140,240,.06);
    box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
    opacity: 0;
}
.archive-slot i {
    position: absolute; width: 9px; height: 9px;
    border: 2px solid rgba(140,215,255,.55);
}
.archive-slot i:nth-child(1) { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.archive-slot i:nth-child(2) { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.archive-slot i:nth-child(3) { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.archive-slot i:nth-child(4) { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.archive-tray {
    position: absolute; left: 0; top: 0;
    border: 2px solid rgba(160,225,255,.45);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(80,160,255,.16), rgba(20,50,110,.30));
    box-shadow: 0 0 26px rgba(90,180,255,.30), 0 0 0 1px rgba(0,0,0,.4) inset;
    opacity: 0;
}
.archive-lane-tag {
    position: absolute; left: 0; top: 0;
    font: 700 9px/1 Tahoma, 'Segoe UI', sans-serif; letter-spacing: .22em;
    color: rgba(150,215,255,.75); text-shadow: 0 1px 4px #000;
    white-space: nowrap; opacity: 0;
}

/* ---- the rail holds every card in one 3D space ---- */
.archive-rail {
    position: absolute;
    touch-action: none;
    left: 50%; top: 46%;
    width: 0; height: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

.archive-card {
    position: absolute;
    left: 0; top: 0;
    touch-action: none;                 /* the gesture belongs to the rail */
    -webkit-touch-callout: none;        /* long-press on the art must not open iOS' sheet */
    -webkit-user-select: none; user-select: none;
    width: var(--acw, 230px);
    height: var(--ach, 345px);
    margin-left: calc(var(--acw, 230px) / -2);
    margin-top:  calc(var(--ach, 345px) / -2);
    transform-style: preserve-3d;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.archive-card .plate {
    position: absolute; inset: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #0a0b18;
    box-shadow:
        0 18px 40px rgba(0,0,0,.6),
        0 0 0 1px rgba(255,255,255,.07);
    transition: box-shadow .35s ease;
}
.archive-card .plate img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;               /* the card handles the touch, not the picture */
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
}
/* the reflection strip that sells "physical card on a surface" */
.archive-card .sheen {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.15) 48%, transparent 58%);
    opacity: 0; transition: opacity .35s ease;
}
.archive-card.is-focus .plate {
    box-shadow:
        0 26px 60px rgba(0,0,0,.7),
        0 0 0 1px rgba(255,255,255,.16),
        0 0 34px rgba(120,170,255,.32);
}
@media (hover: hover) and (pointer: fine) {
    .archive-card.is-hover .plate {
        box-shadow:
            0 30px 70px rgba(0,0,0,.72),
            0 0 0 1px rgba(255,255,255,.30),
            0 0 52px rgba(150,190,255,.5);
    }
    .archive-card.is-hover .sheen { opacity: 1; }
}
/* touch equivalent: a tap selects and lifts, no sticky hover state */
.archive-card.is-tap .plate {
    box-shadow:
        0 24px 56px rgba(0,0,0,.7),
        0 0 0 1px rgba(255,255,255,.26),
        0 0 44px rgba(150,190,255,.45);
}

/* caption rides under the focused card only */
.archive-card .cap {
    position: absolute;
    left: 0; right: 0; bottom: -30px;
    text-align: center;
    font-family: Tahoma, 'Segoe UI', sans-serif;
    font-size: 11px; letter-spacing: .14em;
    color: #cfe0ff;
    text-shadow: 0 2px 6px rgba(0,0,0,.9);
    opacity: 0; transition: opacity .3s ease;
    pointer-events: none;
    white-space: nowrap;
}
.archive-card.is-focus .cap { opacity: .92; }

/* ---- motion trail clones (created and destroyed by JS) ---- */
.archive-trail {
    position: absolute;
    left: 0; top: 0;
    width: var(--acw, 230px);
    height: var(--ach, 345px);
    margin-left: calc(var(--acw, 230px) / -2);
    margin-top:  calc(var(--ach, 345px) / -2);
    border-radius: 6px;
    overflow: hidden;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    box-shadow: 0 0 0 1px rgba(160,200,255,.10);
}
.archive-trail img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* pull the whole card stage up: on a phone the rail's 46% left a band of empty
   black above the cards. 38% lifts them ~62px without touching card size. */
.archive-stage.is-mobile .archive-rail { top: 38%; }

/* ---- mobile-only chrome: the title, id and pagination live under the card
       instead of being buried inside it ---- */
.archive-mob { display: none; }
.archive-stage.is-mobile .archive-mob {
    position: absolute; left: 0; right: 0; z-index: 7;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0 16px; pointer-events: none; text-align: center;
    opacity: 0;                       /* JS raises it once a card has landed */
    transition: opacity .17s ease;
}
.archive-stage.is-mobile .archive-hud .status,
.archive-stage.is-mobile .archive-hud .count { transition: opacity .17s ease; }
.archive-mob .m-title {
    font-family: Tahoma, 'Segoe UI', sans-serif; font-weight: 700;
    font-size: clamp(18px, 5vw, 24px); line-height: 1.15; letter-spacing: .02em;
    color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.9);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.archive-mob .m-id {
    font-family: 'Press Start 2P', 'Share Tech Mono', monospace; font-size: 9px;
    letter-spacing: .12em; color: rgba(170,205,255,.85); text-shadow: 0 2px 6px #000;
}
.archive-mob .m-dots { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; justify-content: center; }
.archive-mob .m-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.28); transition: background .2s, transform .2s;
}
.archive-mob .m-dots i.on { background: #fff; transform: scale(1.5); }

.archive-stage.is-mobile .archive-hint {
    left: 50%; transform: translateX(-50%); text-align: center;
    top: calc(30px + env(safe-area-inset-top, 0px));   /* sits just above the card */
    font-size: 12px; font-weight: 600; letter-spacing: 1px;
    color: rgba(214,230,255,.65); text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
/* the hint is the only affordance on touch, so it stays put */
.archive-stage.is-mobile .archive-hint.gone { opacity: 1; }

/* bottom bar: thumb-sized on a phone */
.archive-stage.is-mobile .archive-hud {
    min-height: 58px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
}
.archive-stage.is-mobile .archive-hud .grp { flex: none; }
.archive-stage.is-mobile .archive-hud .status {
    flex: 1; min-width: 0; text-align: center; font-size: 13px; font-weight: 700;
    padding: 8px 8px; letter-spacing: .04em;
}
.archive-stage.is-mobile .archive-hud .count {
    padding: 8px 10px; font-size: 13px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.archive-stage.is-mobile .xpbtn {
    min-width: 52px; min-height: 46px;          /* comfortably past the 44px floor */
    font-size: 19px; line-height: 1; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
}
.archive-stage.is-mobile .archive-hud [data-act="replay"],
.archive-stage.is-mobile .archive-hud [data-act="file"] { display: none; }
/* the title lives under the card on mobile, so the in-card caption is noise */
.archive-stage.is-mobile .archive-card .cap { display: none; }
/* bottom bar reads as   <  FILE_020  >   */
.archive-stage.is-mobile .archive-hud .st-title { display: none; }
.archive-stage.is-mobile .archive-hud .st-id { font-size: 12px; letter-spacing: .06em; }

/* ---- XP-flavoured chrome sitting on top of the scene ---- */
.archive-hud {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px;
    background: linear-gradient(180deg, #ece9d8 0%, #e2ddc8 100%);
    border-top: 1px solid #fff;
    box-shadow: inset 0 1px 0 #fff;
    font-family: Tahoma, 'Segoe UI', sans-serif; font-size: 11px; color: #2b2b2b;
    z-index: 6;
}
.archive-hud .grp { display: flex; align-items: center; gap: 6px; }
.archive-hud .spacer { flex: 1; }
.archive-hud .status {
    padding: 2px 8px;
    border: 1px solid; border-color: #808080 #fff #fff #808080;
    background: #f4f2e6; min-width: 190px;
}
.archive-hud .status b { font-weight: 700; }
.archive-hud .count { padding: 2px 8px; border: 1px solid; border-color: #808080 #fff #fff #808080; background: #f4f2e6; }
.xpbtn {
    font: 11px Tahoma, 'Segoe UI', sans-serif; color: #000;
    padding: 3px 11px;
    background: linear-gradient(180deg, #fdfdfd 0%, #eceade 46%, #dedbc8 100%);
    border: 1px solid #8f8f7a; border-radius: 3px;
    box-shadow: inset 0 1px 0 #fff; cursor: pointer;
}
.xpbtn:hover { background: linear-gradient(180deg, #fff 0%, #f4f2e4 46%, #e6e3d0 100%); border-color: #4a7fd4; }
.xpbtn:active { background: #d8d5c2; box-shadow: inset 1px 1px 2px rgba(0,0,0,.28); }
.xpbtn:disabled { color: #909090; text-shadow: 1px 1px 0 #fff; cursor: default; background: #eceade; border-color: #b3b3a0; }

/* dev-only stage readout: which beat of the intro is on screen */
.archive-debug {
    position: absolute; top: 8px; right: 10px; z-index: 30;
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px;
    background: rgba(0,0,0,.72); border: 1px solid rgba(120,200,255,.5);
    border-radius: 3px;
    font: 700 11px/1 Tahoma, 'Segoe UI', sans-serif; letter-spacing: .16em;
    color: #7fd4ff; text-shadow: 0 1px 3px #000;
    pointer-events: none;
}
.archive-debug .t { color: #fff; opacity: .55; font-weight: 400; letter-spacing: .06em; }
.archive-debug.done { display: none; }

.archive-hint {
    position: absolute; top: 10px; left: 12px; z-index: 6;
    font-family: Tahoma, 'Segoe UI', sans-serif; font-size: 10px; letter-spacing: .1em;
    color: rgba(190,212,255,.5); text-shadow: 0 1px 4px #000;
    pointer-events: none; transition: opacity .5s ease;
}
.archive-hint.gone { opacity: 0; }

/* ---- detail view: the "content" a card opens into ---- */
.archive-detail {
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    padding: 26px 26px 52px;
    background: rgba(4,6,14,.9);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.archive-detail.on { opacity: 1; pointer-events: auto; }
.archive-detail .frame {
    position: relative;
    max-width: 100%; max-height: 100%; min-height: 0;
    display: flex; flex-direction: column;
    background: #ece9d8;
    border: 2px solid; border-color: #fff #808080 #808080 #fff;
    box-shadow: 6px 6px 20px rgba(0,0,0,.6);
    transform: scale(.94); transition: transform .3s cubic-bezier(.2,.9,.25,1);
}
.archive-detail.on .frame { transform: scale(1); }
.archive-detail .bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 3px 4px 3px 8px;
    background: linear-gradient(180deg, #0058e6 0%, #3a80f0 8%, #2a6ad8 20%, #1a50b8 80%, #0a3a90 100%);
    color: #fff; font: 700 12px Tahoma, 'Segoe UI', sans-serif;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
.archive-detail .bar button {
    width: 20px; height: 18px; line-height: 1;
    font: 700 12px Tahoma, sans-serif; color: #fff;
    background: linear-gradient(180deg, #e8705a 0%, #d4402a 50%, #b02818 100%);
    border: 1px solid #7a1c10; border-radius: 3px; cursor: pointer;
}
.archive-detail .bar button:hover { background: linear-gradient(180deg, #f08a72 0%, #e05038 50%, #c03020 100%); }
.archive-detail .body {
    padding: 10px; background: #ece9d8;
    overflow: hidden; min-height: 0;
    display: flex; align-items: center; justify-content: center;
}
/* max-width / max-height are set in px by sizeDetail(): a percentage here
   resolves against an auto-height parent, which is no constraint at all, so
   the picture would open at its natural 1024x1536 and blow the panel apart. */
.archive-detail img {
    display: block;
    width: auto; height: auto;
    border: 1px solid #808080; background: #000;
}
.archive-detail .meta {
    padding: 5px 9px; background: #ece9d8; border-top: 1px solid #b6b3a0;
    font: 11px Tahoma, 'Segoe UI', sans-serif; color: #3a3a3a;
    display: flex; justify-content: space-between; gap: 14px;
}

/* ---- mobile viewport: dvh so the address bar cannot crop the scene.
       Scoped to the archive window so no other XP window is affected. ---- */
@media (max-width: 768px) {
    .window[data-window-id="archive"].maximized {
        height: calc(100vh - 40px) !important;
        height: calc(100dvh - 40px) !important;
    }
    .archive-stage { overflow: hidden; overscroll-behavior: contain; }
    /* fewer expensive shadows on a phone */
    .archive-card .plate { box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07); }
    .archive-card.is-focus .plate {
        box-shadow: 0 16px 36px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.18),
                    0 0 26px rgba(120,170,255,.3);
    }
    .archive-board-logo { display: none; }
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
    .archive-stage { perspective: 950px; }
}
@media (max-width: 768px) {
    .archive-detail { padding: 4vw 4vw calc(4vw + 58px); }
    .archive-detail .frame { width: 92vw; max-width: 92vw; }
    .archive-detail .bar { padding: 6px 6px 6px 10px; font-size: 13px; }
    .archive-detail .bar button {
        width: 44px; height: 44px;              /* real tap target */
        font-size: 18px; border-radius: 4px;
    }
    .archive-detail .body { padding: 8px; }
    .archive-detail .meta { padding: 8px 10px; font-size: 12px; }
}

@media (max-width: 640px) {
    .archive-stage { perspective: 820px; perspective-origin: 50% 44%; }
    .archive-hud { gap: 6px; padding: 5px 7px; font-size: 10px; }
    .archive-hud .status { min-width: 0; flex: 1; overflow: hidden;
                           white-space: nowrap; text-overflow: ellipsis; padding: 2px 6px; }
    .archive-hud .count { padding: 2px 6px; }
    .archive-hud .lbl { display: none; }
    .archive-hud .grp { gap: 4px; }
    .xpbtn { padding: 6px 10px; }            /* thumb-sized targets */
    .archive-hint { font-size: 9px; top: 6px; left: 8px; }
    .archive-detail { padding: 12px 12px 44px; }
    .archive-detail .meta .d-hint { display: none; }
    .archive-board-logo { opacity: 0; }      /* keep the small stage uncluttered */
}

/* ---- 8. On a phone there is no room to move a toast out of the way -- lifting
       it just parked it over the card. While the gallery is open on mobile the
       toasts are suppressed instead; everywhere else on the site they behave
       exactly as before. ---- */
@media (max-width: 768px) {
    body.archive-mobile-open .msn-notify-container {
        display: none !important;
    }
}

/* ---- reduced motion: no cinematics, just a readable gallery ---- */
@media (prefers-reduced-motion: reduce) {
    .archive-card .plate,
    .archive-card .sheen,
    .archive-card .cap,
    .archive-detail,
    .archive-detail .frame { transition-duration: .01ms !important; }
}