:root{
  --mat:#173229;
  --mat-line:rgba(255,255,255,.055);
  --ink:#e8e2d4;
  --stamp:#c8281e;
  --manila:#e8d9a8;
  --manila-dark:#cdb87e;
  --paper:#f2ecdd;
  --type:'Special Elite','Courier New',monospace;
  --hand:'Caveat',cursive;
  --doc-w:262px;--badge-w:206px;--memo-w:238px;--pol-w:216px;--surv-w:176px;
}
@media (max-width:820px){:root{--doc-w:184px;--badge-w:148px;--memo-w:178px;--pol-w:160px;--surv-w:128px}}
@media (max-width:520px){:root{--doc-w:150px;--badge-w:122px;--memo-w:158px;--pol-w:134px;--surv-w:104px}}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,230,170,.10), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.55), transparent 60%),
    repeating-linear-gradient(0deg, var(--mat-line) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, var(--mat-line) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 230px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 230px),
    var(--mat);
  font-family:var(--type);
  color:var(--ink);
  user-select:none;-webkit-user-select:none;
  touch-action:none;
}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 20px;pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.hdr-left{font-size:11px;letter-spacing:.16em;line-height:1.7;opacity:.85}
.hdr-left b{font-weight:400;color:#f4c95d}
.hdr-right{text-align:right;font-size:11px;letter-spacing:.14em;line-height:1.7;opacity:.85}
.hdr-right .red{color:#ff6a5e}

/* ---------- hint chip ---------- */
#hint{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  z-index:60;font-size:11.5px;letter-spacing:.18em;
  padding:9px 18px;border:1px dashed rgba(232,226,212,.4);border-radius:3px;
  background:rgba(10,22,18,.55);backdrop-filter:blur(3px);
  transition:opacity .5s;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  max-width:94vw;overflow:hidden;text-overflow:ellipsis;
}
#hint .hand{font-family:var(--hand);font-size:19px;letter-spacing:.02em;color:#f4c95d;vertical-align:-2px}

/* ---------- toolbar buttons ---------- */
.tool{
  font-family:var(--type);font-size:11px;letter-spacing:.2em;
  background:transparent;border-radius:4px;cursor:pointer;
  padding:8px 14px;opacity:0;pointer-events:none;
  transition:opacity .4s, transform .15s;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.tool.show{opacity:.92;pointer-events:auto}
.tool:active{transform:scale(.97)}
#closeFile{
  position:fixed;top:64px;right:20px;z-index:60;
  color:var(--stamp);border:2.5px solid var(--stamp);
  transform:rotate(4deg);mix-blend-mode:screen;
}
#closeFile:hover{transform:rotate(4deg) scale(1.06)}
#loupeBtn{
  position:fixed;top:118px;right:20px;z-index:60;
  color:#f4c95d;border:2px solid rgba(244,201,93,.75);
  transform:rotate(-2deg);
}
#loupeBtn:hover{transform:rotate(-2deg) scale(1.06)}
#loupeBtn.on{background:rgba(244,201,93,.16);box-shadow:0 0 14px rgba(244,201,93,.35)}

/* ---------- 3D scene ---------- */
#scene{position:fixed;inset:0;perspective:1700px;perspective-origin:50% 42%}
#tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}

/* ---------- folder assembly ---------- */
#folder{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
}
#openSpread{
  display:block;
  width:min(96vw, 1280px);
  height:auto;
  opacity:0;transform:scale(.94);
  transition:opacity .7s ease .25s, transform .9s cubic-bezier(.2,.8,.2,1) .25s;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.5));
  pointer-events:none;
}
body.open #openSpread{opacity:1;transform:scale(1);pointer-events:auto;cursor:zoom-in}
body.open.loupe-on #openSpread{cursor:none}

/* seal easter-egg hotspot */
#sealSpot{
  position:absolute;left:57.5%;top:34%;width:17%;height:30%;
  pointer-events:none;border-radius:50%;
}
body.open #sealSpot{pointer-events:auto}
#sealSpot.pop{animation:sealPop .35s ease}
@keyframes sealPop{
  0%{box-shadow:0 0 0 0 rgba(244,201,93,.0)}
  40%{box-shadow:0 0 0 10px rgba(244,201,93,.25)}
  100%{box-shadow:0 0 0 22px rgba(244,201,93,0)}
}

/* closed cover */
#coverWrap{
  position:absolute;left:50%;top:50%;
  width:min(64vw, 400px);
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  cursor:pointer;
  transition:opacity .35s ease .78s;
}
#cover{
  position:relative;width:100%;
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform 1.15s cubic-bezier(.55,.05,.25,1);
  will-change:transform;
  animation:idle 5s ease-in-out infinite;
}
@keyframes idle{0%,100%{transform:rotateX(0) translateY(0)}50%{transform:rotateX(2deg) translateY(-7px)}}
body.open #cover{animation:none;transform:rotateY(-165deg)}
body.opening #cover{animation:none}
#cover .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
#cover img{
  display:block;width:100%;height:auto;
  /* Hold the folder's shape even if the artwork fails to load, so a
     missing image shows an empty manila cover instead of collapsing
     to nothing and leaving a blank desk. */
  aspect-ratio:4/5;object-fit:contain;
  background: transparent;border-radius:6px;
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.55));
}
#cover .back{
  position:absolute;inset:4% 2% 3% 2%;
  transform:rotateY(180deg);
  background:radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.06), transparent 70%), var(--manila);
  border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--manila-dark), inset 0 0 60px rgba(120,90,30,.25);
  display:flex;align-items:center;justify-content:center;
}
#cover .back::after{
  content:"F B C";
  font-family:var(--type);font-size:34px;letter-spacing:.4em;
  color:rgba(60,50,90,.18);
  border:3px double rgba(60,50,90,.18);border-radius:50%;
  width:130px;height:130px;display:flex;align-items:center;justify-content:center;
  transform:rotate(-12deg);
}
body.open #coverWrap{pointer-events:none;opacity:0}

#tapHint{
  position:absolute;left:50%;top:calc(50% + min(35vw, 225px) + 46px);
  transform:translateX(-50%) rotate(-3deg);
  font-size:13px;letter-spacing:.28em;color:var(--stamp);
  border:2.5px solid var(--stamp);padding:8px 16px;border-radius:3px;
  opacity:.9;animation:pulse 1.8s ease-in-out infinite;
  pointer-events:none;white-space:nowrap;mix-blend-mode:screen;
}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
body.open #tapHint,body.opening #tapHint{display:none}

/* ---------- loose pages ---------- */
.page{
  position:absolute;left:0;top:0;
  will-change:transform;cursor:grab;opacity:0;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.45));
  transition:filter .25s;
}
body.loupe-on .page{cursor:none}
.page img{display:block;width:100%;height:auto;pointer-events:none;border-radius:3px}
.page.doc{width:var(--doc-w)}
.page.badge{width:var(--badge-w)}
.page.polaroid{width:var(--pol-w)}
.page.surv{width:var(--surv-w)}
.page.surv img{border:5px solid #f2efe6;border-bottom-width:7px;border-radius:2px}
.page.locked{display:none}
.page.dealt{transition:transform .85s cubic-bezier(.22,.9,.3,1.08), opacity .5s, filter .25s}
.page.grabbed{cursor:grabbing;filter:drop-shadow(0 26px 34px rgba(0,0,0,.6))}
.page.returning{transition:transform .7s cubic-bezier(.5,.05,.3,1), opacity .5s .3s}
.page .tag{
  position:absolute;top:-11px;left:12px;
  font-size:9px;letter-spacing:.22em;color:#1a1a1a;
  background:#f4c95d;padding:3px 9px 2px;border-radius:2px;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
  transform:rotate(-2deg);opacity:0;transition:opacity .3s;white-space:nowrap;
}
.page:hover .tag{opacity:1}
.page .tag.declass{background:var(--stamp);color:#fff}

/* ---------- contact memo card ---------- */
#p-memo{width:var(--memo-w)}
.memo{
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(120,90,30,.12) 26px 27px),
    var(--paper);
  border-radius:3px;
  padding:14px 14px 12px;
  color:#2a241a;
  box-shadow:inset 0 0 0 1px rgba(120,90,30,.25);
  position:relative;overflow:hidden;
}
.memo::before{
  content:"";position:absolute;top:0;left:0;right:0;height:7px;
  background:repeating-linear-gradient(45deg, var(--stamp) 0 10px, transparent 10px 20px);
  opacity:.75;
}
.memo h3{
  font-size:9.5px;letter-spacing:.2em;font-weight:400;
  margin:6px 0 8px;color:#4a4034;
}
.memo .stampline{
  position:absolute;top:22px;right:-8px;
  font-size:10px;letter-spacing:.24em;color:var(--stamp);
  border:2px solid var(--stamp);padding:4px 22px 3px 10px;border-radius:2px;
  transform:rotate(6deg);opacity:.85;
}
.memo .row{font-size:10px;letter-spacing:.1em;line-height:2.05;color:#3a332a;white-space:nowrap}
.memo .row b{font-weight:400;color:#8a7a56}
.memo a{
  color:#1f3a8a;text-decoration:none;border-bottom:1.5px dashed rgba(31,58,138,.5);
  cursor:pointer;
}
.memo a:hover{color:var(--stamp);border-color:var(--stamp)}
.memo hr{border:none;border-top:1px dashed rgba(120,90,30,.4);margin:7px 0}
.memo .sig{font-family:var(--hand);font-size:17px;color:#26417c;transform:rotate(-1.5deg);display:block;margin-top:5px;line-height:1.2}
@media (max-width:820px){
  .memo .row{font-size:9px}
  .memo .sig{font-size:14px}
  .memo .stampline{font-size:8px;padding:3px 16px 2px 8px}
}

/* ---------- field loupe ---------- */
#loupe{
  position:fixed;z-index:90;width:224px;height:224px;border-radius:50%;
  pointer-events:none;display:none;
  border:9px solid #c9a24a;
  box-shadow:
    0 0 0 3px #6e5118,
    0 0 0 6px rgba(0,0,0,.35),
    0 22px 38px rgba(0,0,0,.65),
    0 0 26px rgba(244,201,93,.35),
    inset 0 0 26px rgba(0,0,0,.35);
  background-color:#0e1c17;
  background-repeat:no-repeat;
}
#loupe::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.25), transparent 42%);
}
/* handle */
#loupe::before{
  content:"";position:absolute;
  width:26px;height:96px;border-radius:14px;
  right:-34px;bottom:-72px;
  transform:rotate(-45deg);
  background:linear-gradient(180deg,#c9a24a 0 26%, #3a2f1a 26% 100%);
  box-shadow:0 10px 18px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.25);
}
#loupeMsg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:26px;border-radius:50%;
  font-size:10px;letter-spacing:.2em;line-height:2;color:rgba(232,226,212,.75);
  opacity:0;transition:opacity .25s;
}
#loupe.empty #loupeMsg{opacity:1}
body.loupe-on #loupe{display:block}
@media (max-width:600px){
  #loupe{width:168px;height:168px}
  #loupe::before{width:20px;height:72px;right:-26px;bottom:-54px}
  #loupeMsg{font-size:8.5px;padding:18px}
}

/* first-time attention pulse on the loupe button */
#loupeBtn.pulse{animation:btnPulse 1.6s ease-in-out 3}
@keyframes btnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(244,201,93,0)}
  50%{box-shadow:0 0 0 10px rgba(244,201,93,.22)}
}

/* loupe coach card */
#loupeCoach{
  position:fixed;top:70px;left:50%;transform:translateX(-50%) rotate(-1deg);
  z-index:96;width:min(90vw,360px);
  background:
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(120,90,30,.10) 24px 25px),
    var(--paper);
  color:#2a241a;border-radius:3px;
  padding:16px 18px 14px;
  box-shadow:0 22px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(120,90,30,.25);
  opacity:0;pointer-events:none;
  transition:opacity .35s, transform .4s cubic-bezier(.2,.9,.3,1.15);
}
#loupeCoach.show{opacity:1;transform:translateX(-50%) rotate(-1deg) translateY(6px)}
#loupeCoach h4{
  font-size:11px;letter-spacing:.22em;font-weight:400;color:var(--stamp);
  border-bottom:1.5px dashed rgba(200,40,30,.4);padding-bottom:7px;margin-bottom:9px;
}
#loupeCoach p{font-size:10.5px;letter-spacing:.08em;line-height:1.95;color:#3a332a}
#loupeCoach b{font-weight:400;color:#1a1a1a;background:rgba(244,201,93,.5);padding:1px 5px;border-radius:2px;white-space:nowrap}

/* ---------- zoom lightbox ---------- */
#zoom{
  position:fixed;inset:0;z-index:100;
  background:rgba(6,12,10,.9);backdrop-filter:blur(4px);
  display:none;align-items:flex-start;justify-content:center;
  overflow:auto;padding:52px 16px 32px;
  touch-action:pan-y pinch-zoom;cursor:zoom-out;
}
#zoom.show{display:flex;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#zoom img{width:min(96vw, 880px);height:auto;border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.7);cursor:auto}
#zoom img.wide{width:min(96vw, 1500px)}
#zoomCap{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.24em;color:var(--ink);
  background:rgba(10,22,18,.7);padding:8px 16px;border:1px solid rgba(232,226,212,.25);border-radius:3px;
  white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;
}
#zoomClose{
  position:fixed;top:10px;right:14px;
  font-family:var(--type);font-size:20px;color:var(--ink);
  background:none;border:1px solid rgba(232,226,212,.4);border-radius:3px;
  width:38px;height:38px;cursor:pointer;
}

/* ---------- case-closed exit card ---------- */
#exitCard{
  position:fixed;left:50%;top:50%;z-index:95;
  transform:translate(-50%,-50%) rotate(-2deg) scale(.8);
  width:min(88vw, 380px);
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(120,90,30,.10) 26px 27px),
    var(--paper);
  color:#2a241a;border-radius:3px;
  padding:22px 22px 18px;
  box-shadow:0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(120,90,30,.25);
  opacity:0;pointer-events:none;
  transition:opacity .4s, transform .5s cubic-bezier(.2,.9,.3,1.15);
  text-align:center;
}
#exitCard.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) rotate(-2deg) scale(1)}
#exitCard .bigstamp{
  display:inline-block;font-size:20px;letter-spacing:.3em;color:var(--stamp);
  border:3px solid var(--stamp);padding:8px 18px 6px;border-radius:3px;
  transform:rotate(-4deg);margin-bottom:14px;opacity:.9;
}
#exitCard p{font-size:11px;letter-spacing:.14em;line-height:1.9;color:#4a4034;margin-bottom:16px}
#exitCard .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#exitCard a,#exitCard button{
  font-family:var(--type);font-size:11px;letter-spacing:.16em;
  padding:10px 16px;border-radius:3px;cursor:pointer;text-decoration:none;
}
#exitCard a.primary{background:#1a1a1a;color:#f4c95d;border:1px solid #1a1a1a}
#exitCard a.primary:hover{background:#000}
#exitCard button.ghost{background:transparent;color:#4a4034;border:1.5px dashed rgba(74,64,52,.5)}
#exitCard button.ghost:hover{border-color:#4a4034}
#exitCard .hand{font-family:var(--hand);font-size:18px;color:#26417c;display:block;margin-top:12px;transform:rotate(-1deg)}

#caseStrip{
  position:fixed;bottom:0;left:0;right:0;height:5px;z-index:59;
  background:repeating-linear-gradient(45deg, var(--stamp) 0 16px, #1a1a1a 16px 32px);
  opacity:.75;
}

@media (prefers-reduced-motion:reduce){
  #cover{animation:none !important;transition-duration:.2s}
  .page.dealt{transition-duration:.2s}
  #tapHint{animation:none}
}