:root{
    /* burgundy pulled from the tote itself */
    --bordeaux:      #732832;
    --bordeaux-deep: #5A1E27;
    --bordeaux-dark: #46161E;
    --ink:           #1E0C10;
    --milk:          #FCF3E4;
    --lime:          #C6D92E;   /* the document folio */
    --lime-deep:     #9FB021;
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-inout:  cubic-bezier(0.77, 0, 0.175, 1);
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ height:100%; overflow:hidden; }
  body{
    font-family:'Instrument Sans', system-ui, sans-serif;
    color:var(--ink);
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.8), rgba(255,255,255,0) 55%),
      repeating-linear-gradient( 45deg, rgba(27,27,30,.03) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px),
      linear-gradient(180deg, #F0F0F2 0%, #E3E3E6 74%, #D7D7DB 100%);
    -webkit-font-smoothing:antialiased;
  }

  #stage{ position:fixed; inset:0; touch-action:none; overflow:hidden; cursor:default; }

  .floor{
    position:absolute; left:0; right:0; bottom:0;
    height:var(--floor-h, 84px);
    border-top:2.5px solid var(--ink);
    background:
      repeating-linear-gradient(90deg, rgba(27,27,30,.07) 0 2px, transparent 2px 26px),
      linear-gradient(180deg, rgba(27,27,30,.10), rgba(27,27,30,.20));
    pointer-events:none;
  }
  .floor span{
    position:absolute; right:20px; top:10px;
    font-family:'Bricolage Grotesque';
    font-weight:700; font-size:10px; letter-spacing:.22em;
    color:var(--milk); opacity:.5; text-transform:uppercase;
  }

  header{
    position:absolute; top:clamp(18px,3.4vh,34px); left:clamp(18px,3.6vw,48px);
    right:clamp(18px,3.6vw,48px);
    pointer-events:none; z-index:5;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-weight:600; font-size:clamp(10px,1.2vw,12px);
    letter-spacing:.24em; text-transform:uppercase;
    color:var(--ink);
  }
  .eyebrow::before{ content:""; width:26px; height:2.5px; background:var(--bordeaux); }
  .eyebrow em{ font-style:normal; color:var(--bordeaux); }
  h1{
    font-family:'Bricolage Grotesque';
    font-weight:800;
    font-size:clamp(2.4rem, 7.6vw, 5.6rem);
    line-height:.92;
    letter-spacing:-0.02em;
    text-transform:uppercase;
    text-wrap:balance;
    margin-top:10px;
    max-width:12ch;
    color:var(--ink);
  }
  h1 .flip{ color:var(--bordeaux); }
  .sub{
    margin-top:14px; max-width:44ch;
    font-size:clamp(13px,1.5vw,15.5px); line-height:1.5; font-weight:500;
    color:rgba(30,20,23,.85);
  }
  .sub b{ color:var(--bordeaux); }

  .chip{
    position:absolute; top:clamp(18px,3.4vh,34px); right:clamp(18px,3.6vw,48px);
    z-index:5;
    background:var(--ink); color:var(--milk);
    font-family:'Bricolage Grotesque'; font-weight:700;
    font-size:clamp(10px,1.1vw,12px); letter-spacing:.18em; text-transform:uppercase;
    padding:9px 14px; border-radius:999px;
    display:flex; align-items:center; gap:8px;
    box-shadow:0 4px 0 rgba(25,25,30,.22);
  }
  .chip i{ font-style:normal; background:var(--lime); color:var(--ink); border-radius:999px; padding:2px 8px; font-size:11px; }
  @media (max-width:680px){ .chip{ display:none; } }

  .hint{
    position:absolute; left:50%; bottom:calc(var(--floor-h,84px) + 16px);
    transform:translateX(-50%);
    z-index:5; pointer-events:none;
    font-weight:600; font-size:clamp(11px,1.3vw,13px);
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink);
    background:var(--lime);
    border:2px solid var(--ink);
    padding:8px 16px; border-radius:999px;
    transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
    white-space:nowrap;
    box-shadow:0 4px 0 rgba(25,25,30,.22);
  }
  .hint.hide{ opacity:0; transform:translateX(-50%) translateY(6px); }

  /* ---------- the tote ---------- */
  #bagWrap{
    position:absolute; z-index:8;
    left:50%; top:47%;
    width:clamp(340px, 46vw, 600px);
    transform:translate(-50%,-50%);
    transition:left .8s var(--ease-inout), top .8s var(--ease-inout), width .8s var(--ease-inout);
  }
  #bag{
    display:block; width:100%; background:none; border:none; padding:0;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    filter:drop-shadow(0 26px 26px rgba(25,25,30,.5));
    transition:filter .25s var(--ease-out), transform .18s var(--ease-out);
  }
  #bag:focus-visible{ outline:3px dashed var(--lime); outline-offset:10px; border-radius:20px; }
  #bag img{ display:block; width:100%; height:auto; pointer-events:none; -webkit-user-drag:none; user-select:none; }

  #bagWrap.idle #bag{ animation:sway 4.2s ease-in-out infinite; transform-origin:50% 6%; }
  @keyframes sway{
    0%,100%{ transform:rotate(-2.4deg); }
    50%    { transform:rotate(2.4deg); }
  }
  @media (hover:hover) and (pointer:fine){
    #bagWrap.idle #bag:hover{ animation-play-state:paused; transform:rotate(0) scale(1.03); }
  }
  #bag:active{ transform:scale(.97); }

  #bagWrap.dumping #bag{
    animation:dump 1.9s var(--ease-inout) forwards;
    transform-origin:50% 46%;
    cursor:default;
  }
  @keyframes dump{
    0%   { transform:rotate(0deg)    translateY(0); }
    22%  { transform:rotate(-14deg)  translateY(-3%); }
    46%  { transform:rotate(158deg)  translateY(-6%); }
    56%  { transform:rotate(147deg)  translateY(-3%); }
    64%  { transform:rotate(163deg)  translateY(-7%); }
    72%  { transform:rotate(149deg)  translateY(-2%); }
    80%  { transform:rotate(160deg)  translateY(-6%); }
    100% { transform:rotate(155deg)  translateY(-4%); }
  }

  #bagWrap.stowed{
    z-index:11;
    left:calc(100% - clamp(64px,7.4vw,98px));
    top:calc(100% - var(--floor-h,84px) - clamp(64px,8vh,88px));
    width:clamp(108px, 11vw, 150px);
  }
  #bagWrap.stowed #bag{ animation:none; transform:rotate(-4deg); }
  @media (hover:hover) and (pointer:fine){
    #bagWrap.stowed #bag:hover{ transform:rotate(0deg) scale(1.06); }
  }

  .bagTag{
    position:absolute; left:50%; bottom:-14px; transform:translateX(-50%) rotate(-3deg);
    background:var(--lime); color:var(--ink);
    font-family:'Bricolage Grotesque'; font-weight:800;
    font-size:clamp(10px,1.1vw,12px); letter-spacing:.16em; text-transform:uppercase;
    padding:8px 14px; border-radius:6px;
    border:2px solid var(--ink);
    box-shadow:3px 3px 0 var(--ink);
    pointer-events:none; white-space:nowrap;
    transition:opacity .2s var(--ease-out);
  }
  .bagTag::before{
    content:""; position:absolute; top:-10px; left:50%;
    width:2px; height:10px; background:var(--ink); transform:translateX(-50%);
  }
  #bagWrap.idle .bagTag{ animation:tagbob 4.2s ease-in-out infinite; }
  @keyframes tagbob{ 0%,100%{ transform:translateX(-50%) rotate(-5deg);} 50%{ transform:translateX(-50%) rotate(3deg);} }
  #bagWrap.dumping .bagTag{ opacity:0; }
  #bagWrap.stowed .bagTag{ font-size:9px; padding:6px 10px; bottom:-10px; }

  /* ---------- items ---------- */
  .item{
    position:absolute; left:0; top:0; z-index:6;
    will-change:transform;
    cursor:grab;
    -webkit-tap-highlight-color:transparent;
  }
  .item:focus-visible{ outline:none; }
  .item:focus-visible .art{ outline:3px dashed var(--lime); outline-offset:6px; border-radius:12px; }
  .item.grabbed{ cursor:grabbing; z-index:9; }
  .item .art{
    width:100%; height:100%;
    transition:transform .18s var(--ease-out), filter .18s var(--ease-out);
    filter:drop-shadow(0 12px 12px rgba(25,25,30,.5)) saturate(1.03);
  }
  @media (hover:hover) and (pointer:fine){
    .item:hover .art{ transform:scale(1.045); filter:drop-shadow(0 16px 16px rgba(25,25,30,.58)) saturate(1.08) brightness(1.04); }
  }
  .item.grabbed .art{ transform:scale(1.06); filter:drop-shadow(0 20px 22px rgba(25,25,30,.62)) saturate(1.08); }
  .item img{ display:block; width:100%; height:100%; pointer-events:none; -webkit-user-drag:none; user-select:none; }
  .item.out{ transition:opacity .28s var(--ease-out); opacity:0; }

  .item .pop{ animation:pop .45s var(--ease-out) both; }
  @keyframes pop{
    from{ transform:scale(.4); opacity:0; }
    to  { transform:scale(1);  opacity:1; }
  }

  /* ---------- luggage tag tooltip ---------- */
  #tag{
    position:fixed; z-index:20;
    width:min(272px, 74vw);
    background:var(--milk);
    color:var(--ink);
    border:2.5px solid var(--ink);
    border-radius:10px;
    padding:14px 16px 13px 16px;
    box-shadow:5px 6px 0 rgba(25,25,30,.9);
    transform:rotate(-1.6deg) scale(.94);
    opacity:0; pointer-events:none;
    transition:opacity .16s var(--ease-out), transform .16s var(--ease-out);
  }
  #tag.show{ opacity:1; transform:rotate(-1.6deg) scale(1); }
  #tag::before{
    content:""; position:absolute; top:10px; left:10px;
    width:9px; height:9px; border-radius:50%;
    background:var(--bordeaux); border:2px solid var(--ink);
  }
  #tag .no{
    font-family:'Bricolage Grotesque'; font-weight:700;
    font-size:10px; letter-spacing:.22em; color:var(--bordeaux);
    text-transform:uppercase; margin-left:20px;
  }
  #tag h3{
    font-family:'Bricolage Grotesque'; font-weight:800;
    font-size:17px; letter-spacing:.01em; text-transform:uppercase;
    margin:5px 0 6px; color:var(--ink);
  }
  #tag p{ font-size:13px; line-height:1.5; color:#4A3238; }

  .sig{
    position:absolute; left:clamp(18px,3.6vw,48px); bottom:calc(var(--floor-h,84px) + 14px);
    z-index:5; pointer-events:none;
    font-family:'Bricolage Grotesque'; font-weight:700;
    font-size:clamp(10px,1.1vw,12px); letter-spacing:.2em; text-transform:uppercase;
    color:rgba(30,20,23,.65);
  }
  .sig b{ color:var(--bordeaux); }
  @media (max-width:680px){ .sig{ display:none; } }

  /* ---------- flip card ---------- */
  .item .art{ perspective:900px; }
  .flip3d{
    position:relative; width:100%; height:100%;
    transform-style:preserve-3d;
    transition:transform .55s var(--ease-inout);
  }
  .item.flipped .flip3d{ transform:rotateY(180deg); }
  .flip3d .face{
    position:absolute; inset:0;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border-radius:7px; overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(25,25,30,.14);
  }
  .flip3d .face.back{ transform:rotateY(180deg); }
  .flip3d .face img{ width:100%; height:100%; object-fit:cover; }

  /* ---------- rare drop glow ---------- */
  .item.rare .art{
    animation:rareGlow 2.2s ease-in-out infinite;
  }
  @keyframes rareGlow{
    0%,100%{ filter:drop-shadow(0 0 10px rgba(255,196,64,.55)) drop-shadow(0 10px 12px rgba(25,25,30,.4)); }
    50%    { filter:drop-shadow(0 0 22px rgba(255,196,64,.9))  drop-shadow(0 10px 12px rgba(25,25,30,.4)); }
  }

  /* ---------- the receipt ---------- */
  #receipt{
    position:fixed; z-index:12;
    left:clamp(14px,3vw,44px);
    bottom:calc(var(--floor-h,84px) - 6px);
    width:min(236px, 62vw);
    max-height:min(56vh, 460px);
    overflow-y:auto;
    background:#FDFCF6;
    color:#26262A;
    font-family:ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;
    font-size:10.5px; line-height:1.55;
    padding:16px 14px 14px;
    box-shadow:0 10px 24px rgba(25,25,30,.28), 0 2px 6px rgba(25,25,30,.18);
    transform:translateY(112%) rotate(0deg);
    transition:transform .9s var(--ease-inout);
    cursor:pointer;
    scrollbar-width:thin;
  }
  #receipt.show{ transform:translateY(0) rotate(-1.6deg); }
  #receipt::before{ /* torn top edge */
    content:""; position:absolute; top:-7px; left:0; right:0; height:8px;
    background:
      linear-gradient(45deg, #FDFCF6 4px, transparent 0),
      linear-gradient(-45deg, #FDFCF6 4px, transparent 0);
    background-size:10px 8px;
    background-repeat:repeat-x;
  }
  #receipt h4{
    font-size:12px; letter-spacing:.14em; text-align:center;
    margin-bottom:2px; font-weight:700;
  }
  #receipt .rsub{ text-align:center; letter-spacing:.08em; opacity:.7; margin-bottom:8px; }
  #receipt .rdash{ border-top:1.5px dashed #26262A; opacity:.5; margin:7px 0; }
  #receipt .rl{ display:flex; justify-content:space-between; gap:8px; }
  #receipt .rl span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #receipt .rl.rare-line{ font-weight:700; }
  #receipt .rtotal{ display:flex; justify-content:space-between; font-weight:700; font-size:11.5px; margin-top:2px; }
  #receipt .rbar{
    height:26px; margin:10px 6px 6px;
    background:repeating-linear-gradient(90deg,
      #26262A 0 2px, transparent 2px 4px, #26262A 4px 5px, transparent 5px 9px,
      #26262A 9px 12px, transparent 12px 14px);
  }
  #receipt .rfoot{ text-align:center; letter-spacing:.1em; opacity:.6; font-size:9.5px; }
  @media (max-width:680px){ #receipt{ font-size:9.5px; width:min(200px,58vw); } }

  @media (prefers-reduced-motion: reduce){
    .flip3d{ transition:none; }
    .item.rare .art{ animation:none; filter:drop-shadow(0 0 16px rgba(255,196,64,.7)) drop-shadow(0 10px 12px rgba(25,25,30,.4)); }
    #receipt{ transition:opacity .3s ease; transform:translateY(0) rotate(-1.6deg); opacity:0; pointer-events:none; }
    #receipt.show{ opacity:1; pointer-events:auto; }
    #bagWrap.idle #bag, #bagWrap.idle .bagTag{ animation:none; }
    #bagWrap.dumping #bag{ animation:none; opacity:.9; }
    #bagWrap{ transition:opacity .3s ease; }
    .item .pop{ animation:fadein .3s ease both; }
    @keyframes fadein{ from{opacity:0;} to{opacity:1;} }
  }