/* Declass game page. Ported from the Declass mockup (Field Telegram paper) and the Card Finishes
   mockup (frames, mats, sheens). One page, several screens. */
:root{
  /* Night Dispatch (29 Oct 2026): the page is a dark desk; envelopes, cards, and sheets stay paper (see the end of this file) */
  --paper:#17140f; --paper2:#2a241d; --env:#1c1814; --ink:#EDE4CF; --navy:#9fbbe8; --red:#D8644F; --olive:#9DAA62; --brass:#D9A93E; --violet:#a89be0;
  --mute:#b9ad92; --line:#6a5c4a; --copper:#9C5B2E;
  --display:'Oswald',Impact,'Arial Narrow',sans-serif; --type:'Special Elite','Courier New',monospace; --body:Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.4;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));padding-top:env(safe-area-inset-top,0px)}
.wrap{max-width:480px;margin:0 auto}
.screen{display:none}.screen.on{display:block}
a{color:var(--navy)}

/* header */
.top{display:flex;justify-content:space-between;align-items:flex-end;padding:16px 0 8px;border-bottom:3px double var(--red);gap:10px}
.wordmark{font-family:var(--display);font-weight:700;font-size:20px;line-height:1;letter-spacing:.04em}
.wordmark small{display:block;font-family:var(--type);font-weight:400;font-size:11px;color:var(--navy);margin-top:4px;letter-spacing:0}
.hdr-r{display:flex;align-items:flex-end;gap:12px}
.streak{font-family:var(--type);font-size:11px;color:var(--mute);text-align:right;line-height:1.25;max-width:104px}
.top .wordmark small{white-space:nowrap}
.streak b{font-family:var(--display);font-size:22px;color:var(--red);display:block;line-height:1}
.howbtn{white-space:nowrap;font-family:var(--display);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:var(--navy);background:transparent;border:1.5px solid var(--navy);border-radius:3px;padding:5px 8px;cursor:pointer;margin-bottom:2px}
.back{font-family:var(--display);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:13px;color:var(--red);background:none;border:0;padding:12px 0;cursor:pointer}
h1{font-family:var(--display);font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;text-align:center;margin:18px 0 4px;text-wrap:balance}
.sub{font-family:var(--type);font-size:12px;color:var(--mute);text-align:center;margin:0 0 16px}
h2{font-family:var(--display);font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;margin:22px 0 8px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
h2 small{font-family:var(--type);font-size:11px;color:var(--mute);text-transform:none;letter-spacing:0;text-align:right}
button:focus-visible,.env:focus-visible{outline:3px solid var(--brass);outline-offset:2px}

/* buttons */
.btn{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;background:var(--red);color:var(--paper);border:0;padding:12px 20px;cursor:pointer;border-radius:3px;margin:6px 4px 0}
.btn.alt{background:transparent;color:var(--red);border:2px solid var(--red)}
.btn.big{font-size:17px;padding:15px 26px;width:100%;max-width:400px}
.linkbtn{background:none;border:0;font-family:var(--type);font-size:12px;color:var(--navy);text-decoration:underline;cursor:pointer;margin:14px auto 0;display:block}
.gslot{display:flex;justify-content:center;min-height:44px;margin-top:10px}

/* today's files */
.slotbtn{display:block;width:100%;text-align:left;border:2px solid var(--line);background:var(--env);padding:14px 16px;margin:12px 0;cursor:pointer;font-family:var(--body);color:var(--ink);position:relative;border-radius:3px}
.slotbtn b,.slotbtn span{display:block;padding-right:118px}
.slotbtn b{font-family:var(--display);font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.slotbtn span{font-family:var(--type);font-size:12px;color:var(--mute)}
.slotbtn::after{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em}
.slotbtn.live{border-color:var(--red);background:#fff6e4}.slotbtn.live b{color:var(--red)}
.slotbtn.live::after{content:"OPEN IT ▸";color:var(--red)}
.slotbtn.done{opacity:.7;cursor:default}.slotbtn.done::after{content:"OPENED ✓";color:var(--olive)}
.slotbtn.wait{cursor:default}.slotbtn.wait::after{content:"SEALED";color:var(--brass)}
.slotbtn.locked b,.slotbtn.locked span{padding-right:150px}
.slotbtn.locked{border-color:var(--line);border-style:dashed;cursor:default;opacity:.75}
.slotbtn.locked::after{content:"TURN CARDS FIRST";font-size:12px;color:var(--mute)}
.slotbtn.prio{background:#D3B383;border-color:#a8261c}.slotbtn.prio b{color:#a8261c}.slotbtn.prio.live::after{color:#a8261c}
.slotbtn.starter{background:#eef0e2;border-color:#2f5a2a}.slotbtn.starter b{color:#2f5a2a}.slotbtn.starter.live::after{color:#2f5a2a}
.slotbtn.comm{background:#1d1a17;border:2px solid #b8902a;color:var(--paper)}.slotbtn.comm b{color:#e3c25e}.slotbtn.comm span{color:#c9b98f}.slotbtn.comm.live::after{color:#e3c25e}
.slotbtn.pend{border-color:var(--red);background:#fff6e4}.slotbtn.pend b{color:var(--red)}.slotbtn.pend::after{content:"TURN THEM ▸";color:var(--red)}
@media (prefers-reduced-motion:no-preference){.slotbtn.shake{animation:shakeb .3s}}
@keyframes shakeb{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.signbar{border:2px dashed var(--red);background:#fff6e4;padding:14px 16px;margin:12px 0;text-align:left}
.signbar b{display:block;font-family:var(--display);font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--red)}
.signbar span{display:block;font-family:var(--type);font-size:12px;color:var(--mute);margin:3px 0 4px}
.nextfile{font-family:var(--type);font-size:12px;color:var(--mute);text-align:center;margin:4px 0 0}

/* dossier tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{border:1px solid var(--line);background:var(--env);padding:10px 12px 10px 14px;cursor:pointer;text-align:left;font-family:var(--body);color:var(--ink);border-radius:3px;position:relative}
.tile b{display:block;font-family:var(--display);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.tile span{font-family:var(--type);font-size:11px;color:var(--mute)}
.tile>i{position:absolute;left:0;top:0;bottom:0;width:4px}
.tile:disabled{opacity:.55;cursor:default}
.tile.wide{grid-column:1/-1}
.tile.flash>i{background:linear-gradient(180deg,#d9a0a8,#e6d39a,#9fd9b8,#9dbbe3,#c9a2e0)}
.tile.flash .bar>i{background:linear-gradient(90deg,#d9a0a8,#e6d39a,#9fd9b8,#9dbbe3,#c9a2e0)}
#yearTiles{grid-template-columns:repeat(3,1fr)}
#yearTiles .tile{padding:9px 10px 9px 12px}
#yearTiles .tile b{font-size:14px;line-height:1.15}
#yearTiles .tile span{display:block;font-size:10px;line-height:1.35}
.bar{height:5px;background:var(--paper2);border:1px solid var(--line);margin-top:6px}.bar i{display:block;height:100%;background:var(--olive);width:0}
.allbtn{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:8px;border:1px solid var(--ink);background:var(--env);padding:12px 14px;cursor:pointer;font-family:var(--display);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);border-radius:3px}
.allbtn span{font-family:var(--type);font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--mute)}
.filters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:-6px 0 14px}
.filters button{font-family:var(--type);font-size:12px;border:1px solid var(--line);background:var(--env);color:var(--ink);padding:6px 10px;border-radius:14px;cursor:pointer}
.filters button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* grid of cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini{border:0;background:none;padding:0;cursor:pointer;text-align:left;font-family:var(--body);color:var(--ink);min-width:0}
.mini .thumb{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:3px solid var(--line);background:#d8ccb0}
.mini .thumb.f-copper{border-color:var(--copper)}
.mini .thumb.f-silver{border-color:#aab0b8}
.mini .thumb.f-gold{border-color:#c49a2a}
.mini .thumb.f-topsecret{border-color:#c7cfdb;outline:1px solid var(--red)}
.mini .no{display:block;font-family:var(--type);font-size:9px;color:var(--navy);margin-top:4px}
.mini .nm{display:block;font-family:var(--display);font-weight:500;font-size:12px;text-transform:uppercase;line-height:1.1;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini.sealed{cursor:default}
.mini.sealed .thumb{display:grid;place-items:center;border:1px dashed var(--line);background:repeating-linear-gradient(135deg,#efe6cf 0 10px,#e6dbbe 10px 20px);font-family:var(--display);font-weight:700;color:#c3b593;font-size:22px}
.fd{display:flex;gap:4px;align-items:center;margin-top:4px}
.fd i{width:10px;height:10px;border:1px solid var(--line);border-radius:1px}
.fd i.on.f-copper{background:var(--copper);border-color:transparent}
.fd i.on.f-silver{background:linear-gradient(135deg,#7e838c,#c9ced6,#7e838c);border-color:transparent}
.fd i.on.f-gold{background:linear-gradient(135deg,#a67c1e,#e9c45a,#a67c1e);border-color:transparent}
.fd i.on.f-topsecret{background:linear-gradient(135deg,#8e97a4,#f6f8fb,#aeb6c2);outline:1px solid var(--red);border-color:transparent}
.fd b{font-size:9px;line-height:1;color:var(--line);margin-left:3px;font-family:sans-serif}.fd b.on{color:var(--red)}
.recent{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

/* envelopes */
.stack{display:grid;gap:14px}
.env{position:relative;background:#E8DFC7;border:1px solid #cdbf9f;box-shadow:0 2px 0 #cbbd98,0 10px 22px rgba(26,22,18,.16);aspect-ratio:1.8;cursor:pointer;transition:transform .25s;user-select:none;-webkit-tap-highlight-color:transparent;overflow:hidden;border-radius:2px}
.env:hover{transform:translateY(-3px)}
.env .body{position:absolute;inset:0;width:100%;height:100%}
.env .flap{position:absolute;left:0;right:0;top:0;height:62%;background:linear-gradient(180deg,#ECE3CB 0%,#E8DFC7 70%,#E2D8BE 100%);clip-path:polygon(0 0,100% 0,96.5% 9%,50% 100%,3.5% 9%);transform-origin:top;z-index:3;filter:drop-shadow(0 2px 2px rgba(60,45,20,.25))}
.env .seal{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%) rotate(-6deg);width:21%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c95d50,#8e3a30 70%);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:clamp(9px,2.4vw,13px);letter-spacing:.1em;text-align:center;line-height:1.05;box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.18);z-index:4}
.env .lbl{position:absolute;left:5%;bottom:6%;max-width:34%;line-height:1.35;text-align:left;font-family:var(--type);font-size:11px;color:var(--red);letter-spacing:.08em;z-index:2}
.env .lbl b{display:block;white-space:nowrap;font-family:var(--display);font-size:14px;color:var(--ink);letter-spacing:.06em;font-weight:500}
.env .no{position:absolute;right:5%;top:6%;font-family:var(--type);font-size:11px;color:var(--navy);z-index:5}
.env .prio{position:absolute;left:5%;top:7%;z-index:5;font-family:var(--display);font-weight:700;letter-spacing:.18em;font-size:clamp(11px,3vw,15px);color:#a8261c;border:3px double #a8261c;padding:2px 9px;transform:rotate(-6deg);mix-blend-mode:multiply}
.env .prio.stpk{color:#2f5a2a;border-color:#2f5a2a}
.env .cstamp,.env .dstamp{position:absolute;right:5%;top:24%;z-index:5;font-family:var(--display);font-weight:700;letter-spacing:.16em;font-size:clamp(11px,3vw,15px);color:#a8261c;border:3px solid #a8261c;border-radius:3px;padding:1px 8px;transform:rotate(-8deg);mix-blend-mode:multiply;opacity:.85}
.env .dstamp{right:4%;top:34%;transform:rotate(6deg) scale(2.2);opacity:0;color:#1f3f6e;border-color:#1f3f6e;transition:transform .22s cubic-bezier(.2,1.6,.4,1),opacity .15s}
.env .edge{position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -2px 0 rgba(120,100,70,.18);pointer-events:none;z-index:5}
.env.priority{background:#C9A774;border-color:#9e7f4f}
.env.priority .flap{background:linear-gradient(180deg,#D3B383 0%,#C9A774 70%,#BC9966 100%)}
.env.priority .lbl{color:#7a2a20}
.env.commem{background:#1d1a17;border:2px solid #b8902a;box-shadow:0 0 0 1px #6e520f,0 10px 26px rgba(0,0,0,.4)}
.env.commem .flap{background:linear-gradient(180deg,#2b2621 0%,#1f1b17 70%,#171411 100%)}
.env.commem .seal{background:radial-gradient(circle at 35% 30%,#f3dc7f,#b8902a 55%,#7a560c);color:#2a1f08}
.env.commem .prio{color:#e3c25e;border-color:#e3c25e;mix-blend-mode:normal;font-size:clamp(9px,2.4vw,12px);letter-spacing:.1em;max-width:62%}
.env.commem .lbl{color:#c9b98f}.env.commem .lbl b{color:#e3c25e}
.env.commem .cstamp{color:#c95d50;border-color:#c95d50;mix-blend-mode:normal}
.env.commem .dstamp{color:#e3c25e;border-color:#e3c25e;mix-blend-mode:normal}
.env.commem .no{color:#c9b98f}

/* opening */
.theatre{display:grid;place-items:center;min-height:70vh}
.big{width:min(100%,420px);position:relative}
.big .env{aspect-ratio:1.6;cursor:default}.big .env:hover{transform:none}
.big .env .flap{transition:transform .9s cubic-bezier(.3,.9,.3,1)}.big .env .seal{transition:transform .35s,opacity .35s}
.big.stamp .env .dstamp{opacity:.9;transform:rotate(6deg) scale(1)}
.big.stamp .env .cstamp{text-decoration:line-through;text-decoration-thickness:3px}
.big.go .env .flap{transform:rotateX(-180deg);filter:none}.big.go .env .seal{transform:translate(-50%,-50%) rotate(28deg) scale(.5);opacity:0}
.big .cardsout{position:absolute;left:50%;bottom:16%;width:40%;aspect-ratio:4/5;transform:translate(-50%,10%);z-index:1;opacity:0;transition:transform 1s .6s ease-out,opacity .4s .6s}
.big.go .cardsout{opacity:1;transform:translate(-50%,-55%)}
.big .cardsout i{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#efe6cf 0 10px,#e6dbbe 10px 20px);border:1px solid #cbbd98;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.big .cardsout i:nth-child(2){transform:rotate(-6deg) translate(-6px,4px)}.big .cardsout i:nth-child(3){transform:rotate(6deg) translate(6px,8px)}
.big.fade{opacity:0;transition:opacity .4s 1.7s}
.tearing{font-family:var(--type);font-size:12px;color:var(--mute);text-align:center;margin-top:10px}
.tearing.goldt{color:#b8902a;font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* the card viewer */
.viewer{position:relative;touch-action:pan-y;margin:0 auto;max-width:340px}
.count{font-family:var(--type);font-size:12px;color:var(--mute);text-align:center;margin:0 0 10px}
.stage{position:relative;aspect-ratio:4/5;perspective:1000px}
.flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.8,.3,1),opacity .3s;cursor:pointer}
.flip.up{transform:rotateY(180deg)}.flip.out{transform:rotateY(180deg) translateX(-60px)}.flip.out:not(.up){transform:translateX(-60px)}.flip.in{transform:translateX(60px)}
/* The fade between cards lives on #stage, never on .flip (3 Nov 2026): opacity on a preserve-3d element flattens it, and
   while flattened the face turned away shows through, so the card back flashed mirrored on Next. */
#stage{transition:opacity .3s}#stage.fade{opacity:0}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.backf{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#efe6cf 0 10px,#e6dbbe 10px 20px);border:1px solid #cbbd98;box-shadow:0 8px 18px rgba(26,22,18,.16)}
.backf .badge{width:80px;height:80px;border-radius:50%;background:var(--red);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:22px;border:5px solid var(--paper);outline:2px solid var(--red)}
.backf small{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--type);font-size:11px;color:var(--mute)}
.frontf{transform:rotateY(180deg);display:flex;align-items:center}
.tag{position:absolute;top:-10px;right:-8px;color:var(--paper);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;padding:4px 8px;transform:rotate(8deg);z-index:6}
.tag.new{background:var(--olive)}.tag.dup{background:var(--mute)}.tag.slot{background:var(--brass)}.tag.live{background:var(--red)}
.hint{font-family:var(--type);font-size:12px;color:var(--mute);text-align:center;margin:12px 0 6px;min-height:18px}
.hint b{color:var(--ink)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.nav button{font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;background:transparent;border:2px solid var(--red);color:var(--red);padding:9px 14px;cursor:pointer;border-radius:3px}
.nav button:disabled{opacity:.3;cursor:default}
.dots{display:flex;gap:6px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.dots i.cur{background:var(--red)}
.nav button.fin:not(:disabled){background:var(--red);color:#fbf6ea}
#dots{display:none}
.tray{display:flex;justify-content:center;gap:12px;margin:20px auto 4px;max-width:420px}
.tray .tr{flex:0 1 96px;min-width:0;padding:0;border:0;background:none;cursor:pointer;transition:transform .2s}
.tray .tr img,.tray .tr.back span{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:3px solid var(--line);border-radius:3px;box-shadow:0 2px 6px rgba(26,22,18,.22);background:#d8ccb0}
.tray .tr img.f-copper{border-color:var(--copper)}.tray .tr img.f-silver{border-color:#aab0b8}.tray .tr img.f-gold{border-color:#c49a2a}.tray .tr img.f-topsecret,.tray .tr img.flash{border-color:#c7cfdb}
.tray .tr.back span{display:grid;place-items:center;container-type:inline-size;background:repeating-linear-gradient(135deg,#efe6cf 0 6px,#e6dbbe 6px 12px);border:1px solid #cbbd98}
.tray .tr.back i{width:44%;aspect-ratio:1;border-radius:50%;background:var(--red);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-style:normal;font-size:12cqw;line-height:1;border:2px solid var(--paper);outline:1px solid var(--red)}
.tray .tr.cur{transform:translateY(-5px)}
.tray .tr.cur img,.tray .tr.cur.back span{outline:3px solid var(--red);outline-offset:2px}
.tray .tr.lock{cursor:default;opacity:.6}
.summary{text-align:center;margin-top:18px}
.summary .recent{margin:0 auto 10px;max-width:340px}
#sCards.summ #viewer,#sCards.summ #count{display:none}
#sCards.summ .summary{margin-top:6px}
#sCards.summ .summary h2{font-size:30px;margin:8px 0 4px}
.summary .sumsub{font-family:var(--type);font-size:13px;color:#6b6152;margin:0 0 16px}
#sCards.summ .summary .recent{max-width:none;gap:12px}
#sCards.summ .summary .earn{font-size:15px;margin:14px 0 18px}
.sumbtns{display:flex;gap:12px;justify-content:center}.sumbtns .btn{flex:1;max-width:220px;margin:0}
.answer{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--violet);text-align:center;font-size:18px;margin:10px 0 0}
.ansst{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg) scale(2.4);opacity:0;font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:26px;color:var(--violet);border:3px solid var(--violet);border-radius:4px;padding:2px 12px;background:rgba(237,228,207,.92);pointer-events:none;z-index:5}
.ansst.hit{animation:anshit 1.2s ease-out forwards}
@keyframes anshit{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(2.4)}20%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}75%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}

/* finish frames (Card Finishes mockup). The printed card is never altered. */
.cf{position:relative;width:100%;container-type:inline-size}
.cf .frame{position:relative;box-shadow:0 10px 24px rgba(26,22,18,.22)}
.cf .card{position:relative;aspect-ratio:4/5;overflow:hidden;background:#d8ccb0}
.cf .card img,.cf .card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Pictures appear only once loaded (5 Nov 2026): the card shows a paper placeholder with DECLASSIFYING until then, and
   never the browser's broken image icon. Grid thumbnails just fade in. */
.cf .card img{opacity:0;transition:opacity .25s}.cf .card img.ok{opacity:1}
.cf .card::before{content:'DECLASSIFYING';position:absolute;inset:0;display:grid;place-items:center;font-family:'Special Elite',monospace;font-size:clamp(11px,4.2cqw,17px);letter-spacing:.18em;color:#8a7c63;background:repeating-linear-gradient(135deg,#e9dfc8 0 12px,#e2d6bb 12px 24px);animation:dcl 1.4s ease-in-out infinite}
.cf .card:has(img.ok)::before,.cf .card:has(video)::before{animation:none;content:''}
.cf .card:has(img.bad)::before{content:'PICTURE UNAVAILABLE';animation:none}
@keyframes dcl{50%{color:#b3a68b}}
@media (prefers-reduced-motion:reduce){.cf .card::before{animation:none}}
.picw img{opacity:0;transition:opacity .25s}.picw img.ok{opacity:1}
/* (class picw, not ph: .ph is the nowrap phrase in Today's files rows) The same DECLASSIFYING face on small pictures (dossier grids, the tray, the share picker), 5 Nov 2026 */
.picw{position:relative;display:block;container-type:inline-size}
.picw::before{content:'DECLASSIFYING';position:absolute;left:0;right:0;top:0;aspect-ratio:4/5;box-sizing:border-box;display:grid;place-items:center;font-family:'Special Elite',monospace;font-size:7.4cqw;letter-spacing:.08em;color:#8a7c63;border:3px solid #6a5c4a;background:repeating-linear-gradient(135deg,#e9dfc8 0 8px,#e2d6bb 8px 16px);animation:dcl 1.4s ease-in-out infinite;pointer-events:none}
.picw.fl::before{border:0;border-radius:6px}
.picw:has(img.ok)::before{content:none}
.picw:has(img.bad)::before{content:'UNAVAILABLE';animation:none}
@container (max-width:90px){.picw::before{content:'';animation:none}}
@media (prefers-reduced-motion:reduce){.picw::before{animation:none}}
.cf .sheen{position:absolute;inset:0;pointer-events:none;display:none;mix-blend-mode:screen;z-index:2}
.cf .badge{position:absolute;left:39%;top:4.4%;transform:rotate(-8deg);transform-origin:left center;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:2.4cqw;line-height:1.2;color:#b02a1f;border:2px solid #b02a1f;border-radius:3px;padding:1px 5px;opacity:.9;mix-blend-mode:multiply;display:none;z-index:3}
.cf .corner{position:absolute;width:7%;aspect-ratio:1;border:2px solid rgba(70,45,5,.7);display:none}
.cf .c1{left:1.6%;top:1.3%;border-right:0;border-bottom:0}.cf .c2{right:1.6%;top:1.3%;border-left:0;border-bottom:0}.cf .c3{left:1.6%;bottom:1.3%;border-right:0;border-top:0}.cf .c4{right:1.6%;bottom:1.3%;border-left:0;border-top:0}
.cf .serial{position:absolute;left:0;right:0;bottom:0;height:6cqw;display:none;align-items:center;justify-content:center;font-family:var(--type);font-size:2.9cqw;color:#8e2a20;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.6)}
/* Flash card: full art, borderless (take A, 25 Oct 2026). Rounded corners, a drop shadow, and a soft
   holographic shine that drifts with the light; no frame, rim, badge, or serial. */
.cf.flash .frame{padding:0;background:none;border-radius:3.4%/2.7%;box-shadow:0 10px 26px rgba(26,22,18,.38),0 2px 6px rgba(26,22,18,.25)}
.cf.flash .card{border-radius:3.4%/2.7%;background:#111}
.cf.flash .holo,.cf.flash .glare{position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit}
.cf.flash .holo{background:linear-gradient(var(--ang2,45deg),hsl(0 100% 70%),hsl(50 100% 70%),hsl(140 100% 70%),hsl(200 100% 70%),hsl(280 100% 72%),hsl(340 100% 70%),hsl(0 100% 70%));background-size:300% 300%;background-position:var(--pos,50% 50%);mix-blend-mode:soft-light;opacity:.5;-webkit-mask-image:radial-gradient(ellipse at var(--pos,50% 50%),#000 0,rgba(0,0,0,.25) 40%,transparent 70%);mask-image:radial-gradient(ellipse at var(--pos,50% 50%),#000 0,rgba(0,0,0,.25) 40%,transparent 70%)}
.cf.flash .glare{background:radial-gradient(circle at var(--pos,50% 50%),rgba(255,255,255,.5),rgba(255,255,255,.12) 25%,transparent 55%);mix-blend-mode:overlay;opacity:.8}
.mini .thumb.flash{border:0;border-radius:6px;box-shadow:0 3px 8px rgba(26,22,18,.35)}
.fd i.flash{border-radius:50%}
.fd i.flash.on{background:linear-gradient(135deg,#d9a0a8,#e6d39a,#9fd9b8,#9dbbe3,#c9a2e0);border-color:transparent}
.s4.flashnote{font-family:var(--type);font-size:10px;cursor:default}
.cf.f-copper .frame{padding:1.4%;background:#9C5B2E}
.cf.f-silver .frame{padding:3%;background:linear-gradient(135deg,#7f858e,#cfd4da 35%,#9ea4ad 50%,#dde1e6 65%,#7f858e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 10px 24px rgba(26,22,18,.22)}
.cf.f-silver .frame::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px);pointer-events:none}
.cf.f-silver .card{outline:1px solid rgba(40,44,50,.35);outline-offset:-1px}
.cf.f-silver .sheen{display:block;background:linear-gradient(118deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);opacity:.9}
.cf.f-gold .frame,.cf.f-topsecret .frame{padding:6%}
.cf.f-gold .frame{background:linear-gradient(135deg,#8f6612,#e8c65a 28%,#b8902a 46%,#f3dc7f 62%,#9a6f14 86%,#c9a23a)}
.cf.f-gold .frame::before{content:"";position:absolute;inset:1.6%;border:1px solid rgba(70,45,5,.55);box-shadow:inset 0 0 0 2px rgba(255,240,180,.55);pointer-events:none}
.cf.f-gold .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 44%,transparent 56%);pointer-events:none;mix-blend-mode:soft-light}
.cf.f-gold .sheen{display:block;background:linear-gradient(var(--gang,118deg),transparent 30%,rgba(255,228,150,.38) 45%,rgba(255,255,255,.22) 50%,rgba(255,228,150,.38) 55%,transparent 70%)}
.cf.f-gold .card{box-shadow:0 0 0 2.2cqw #EDE4CF,0 0 0 2.6cqw rgba(70,45,5,.55)}
.cf.f-gold .corner,.cf.f-topsecret .corner{display:block}
.cf.f-topsecret .corner{border-color:rgba(40,44,50,.6)}
.cf.f-topsecret .frame{background:linear-gradient(var(--ang,135deg),#8e97a4,#e9eef5 18%,#c7cfdb 30%,#f6f8fb 45%,#aeb6c2 58%,#e9eef5 72%,#8e97a4)}
.cf.f-topsecret .frame::before{content:"";position:absolute;inset:1.6%;border:1px solid rgba(40,44,50,.5);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);pointer-events:none}
.cf.f-topsecret .frame::after{content:"";position:absolute;inset:0;padding:6%;background:linear-gradient(var(--ang2,45deg),rgba(255,110,110,.5),rgba(255,225,110,.5),rgba(110,255,170,.5),rgba(110,170,255,.5),rgba(215,110,255,.5));mix-blend-mode:color;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.cf.f-topsecret .sheen{display:block;background:linear-gradient(var(--ang2,45deg),rgba(255,120,120,.28),rgba(255,235,120,.28),rgba(120,255,190,.28),rgba(120,190,255,.28),rgba(230,120,255,.28),rgba(255,120,120,.28));background-size:220% 220%;background-position:var(--pos,50% 50%)}
.cf.f-topsecret .sheen::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--ang,135deg),transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%)}
.cf.f-topsecret .card{box-shadow:0 0 0 2.2cqw #EDE4CF,0 0 0 2.6cqw rgba(40,44,50,.55)}
.cf.f-topsecret .badge{display:block}
.cf.f-topsecret .serial{display:flex}
.cf .spk{position:absolute;right:5.5%;bottom:13.4%;width:34px;height:34px;border-radius:50%;background:rgba(26,22,18,.72);color:#EDE4CF;border:0;display:grid;place-items:center;font-size:15px;cursor:pointer;z-index:4}
.cf .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(26,22,18,.7);color:#EDE4CF;border:0;font-size:24px;cursor:pointer;z-index:4}

/* card view */
.slots4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:340px;margin:14px auto 0}
.rowlbl{grid-column:1/-1;font-family:var(--type);font-size:10px;color:var(--mute);text-align:left;margin-top:4px}
.s4{border:1px solid var(--line);padding:6px 4px;text-align:center;font-family:var(--display);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--paper);border-radius:2px;cursor:pointer}
.s4.f-copper{background:var(--copper)}.s4.f-silver{background:linear-gradient(90deg,#7e838c,#b5bac2,#7e838c)}.s4.f-gold{background:linear-gradient(90deg,#a67c1e,#e2bb4b,#a67c1e)}
.s4.f-topsecret{background:linear-gradient(100deg,#9aa3b0,#e9eef5 35%,#c9d2dd 50%,#f4f7fb 65%,#9aa3b0);color:var(--red)}
.s4.off{background:transparent;color:var(--mute);border-style:dashed;font-size:14px;cursor:default}
.s4 small{display:block;font-family:var(--type);font-size:9px;font-weight:400;letter-spacing:0;text-transform:none;margin-top:2px}
.s4.cur{outline:2px solid var(--ink);outline-offset:2px}
.ctext{max-width:440px;margin:18px auto 0;text-align:left}
.ctext .kick{font-family:var(--type);font-size:10.5px;color:var(--navy)}
.ctext h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;line-height:1.1;margin:4px 0 10px}
.ctext .story p{font-family:Georgia,serif;font-size:15.5px;line-height:1.6;margin:0 0 12px}
.ctext .story.clip p:not(:first-child){display:none}
.ctext .more{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--red);background:none;border:0;padding:0;cursor:pointer;margin:0 0 6px}
.ctext h4{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--mute);margin:14px 0 3px}
.ctext .m{font-family:var(--type);font-size:11.5px;line-height:1.55;margin:0}
.ntclue{font-family:var(--type);font-size:13px;color:var(--violet);margin:4px 0 12px;padding:8px 10px;border:1px dashed var(--violet);border-radius:3px}
.prow{display:flex;align-items:center;gap:10px;margin-top:6px}
.prow span{font-family:var(--type);font-size:11px;color:var(--mute);width:34px}
.icons{display:flex;gap:8px;flex-wrap:wrap}
.icons a{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#f4ecd8;display:grid;place-items:center;color:var(--ink)}
.icons svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notyet{font-family:var(--type);font-size:10.5px;color:var(--red);margin:6px 0 0 44px}
.history{max-width:440px;margin:18px auto 0;font-family:var(--type);font-size:12px}
.history h3{font-family:var(--display);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px;color:var(--red)}
.history ul{list-style:none;margin:0;padding:0}.history li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dotted var(--line);gap:10px}
.history .fin{font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--paper);padding:2px 7px;border-radius:2px;white-space:nowrap;align-self:center}
.history .fin.f-copper{background:var(--copper)}.history .fin.f-silver{background:#8a8f99}.history .fin.f-gold{background:#b8902a}.history .fin.f-topsecret{background:#8e97a4;color:#fff}

/* landing and save */
.land{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:14px}
.landtop{display:flex;justify-content:space-between;align-items:center;width:100%}
.landfrom{font-family:var(--type);font-size:11px;color:var(--navy);letter-spacing:.08em}
.landname{font-family:var(--display);font-weight:700;font-size:clamp(56px,17vw,84px);line-height:.9;letter-spacing:.06em;margin:22px 0 2px}
.landtag{font-family:var(--type);font-size:13px;color:var(--red);margin:0 0 14px}
.landline{font-size:16px;max-width:34ch;margin:0 0 18px}
.landenv{width:100%;max-width:400px;margin:0 0 18px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.landenv .env:hover{transform:none}
@media (prefers-reduced-motion:no-preference){.landenv .env{animation:rattle 3.2s ease-in-out infinite;transform-origin:50% 60%}}
@keyframes rattle{0%,62%,100%{transform:rotate(0) translateY(0)}66%{transform:rotate(-2.2deg) translateY(-2px)}70%{transform:rotate(2deg) translateY(-3px)}74%{transform:rotate(-1.6deg) translateY(-1px)}78%{transform:rotate(1.2deg)}82%{transform:rotate(-.6deg)}86%{transform:rotate(0)}}
.landsmall{font-family:var(--type);font-size:12px;color:var(--mute);margin:10px 0 0}
.landrule{width:60%;border-top:1px solid var(--line);margin:22px 0 4px}
#sSave{text-align:center}
.savegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:6px 0 18px}
@media (max-width:420px){.savegrid{grid-template-columns:repeat(3,1fr)}}
.soon{text-align:center;padding-top:40px}

/* overlays */
.how{position:fixed;inset:0;z-index:60;background:rgba(26,22,18,.55);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:max(16px,env(safe-area-inset-top,0px)) 16px 24px}
.howcard{background:var(--paper);max-width:480px;width:100%;padding:18px 20px 22px;border:1px solid #cbbd98;box-shadow:0 14px 40px rgba(0,0,0,.35);margin:auto 0}
.howtop{display:flex;justify-content:space-between;align-items:center}
.howstamp{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--red);border:2px solid var(--red);padding:2px 8px;transform:rotate(-3deg)}
.howx{background:none;border:0;font-size:18px;color:var(--mute);cursor:pointer;padding:4px 8px}
.howcard h2{display:block;border:0;padding:0;margin:12px 0 6px;font-size:22px;font-weight:700;letter-spacing:.03em}
.howlead{font-size:15px;margin:0 0 6px}
.howcard h3{font-family:var(--display);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--red);margin:16px 0 4px}
.howcard ul{margin:0;padding-left:18px;font-size:14px}
.howcard li{margin:4px 0}
.howcard .btn{display:block;width:100%;margin-top:20px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);font-family:var(--type);font-size:13px;padding:10px 16px;border-radius:3px;z-index:70;box-shadow:0 6px 18px rgba(0,0,0,.3);max-width:calc(100% - 32px)}
.glow{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:50;background:radial-gradient(ellipse at center,var(--gc,transparent) 0%,transparent 70%)}
.glow.silver{--gc:rgba(255,255,255,.75);animation:glowa 1.2s ease-out}
.glow.gold{--gc:rgba(255,205,90,.85);animation:glowa 1.6s ease-out}
.glow.topsecret{background:conic-gradient(from 0deg,rgba(255,120,120,.7),rgba(255,230,120,.7),rgba(120,255,190,.7),rgba(120,190,255,.7),rgba(230,120,255,.7),rgba(255,120,120,.7));animation:glowb 2.2s ease-out}
@keyframes glowa{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes glowb{0%{opacity:0;transform:scale(.6) rotate(0deg)}15%{opacity:1}100%{opacity:0;transform:scale(1.4) rotate(40deg)}}
.foot{font-family:var(--type);font-size:11px;color:var(--mute);text-align:center;margin-top:22px;line-height:1.6}
.foot button{font:inherit;color:var(--navy);text-decoration:underline;background:none;border:0;cursor:pointer;padding:0}
.foot.co{margin-top:14px;padding-bottom:18px} /* company line at the very bottom (6 Nov 2026) */
@media (prefers-reduced-motion:reduce){*{transition:none!important}.glow{animation:none!important;opacity:0!important}}

/* session 5: sound toggles, share, sets, delete, file check, tilt */
.hdr-col{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sndbar{display:flex;gap:4px}
.sndbtn{width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:var(--navy);background:transparent;border:1.5px solid var(--navy);border-radius:3px;padding:4px 6px;cursor:pointer}
.sndbtn.off{color:#9b927f;border-color:#c4b99f;text-decoration:line-through}
.btn.danger{background:#8e2a20}
.btn.vshare{display:block;width:100%;max-width:340px;margin:12px auto 0}
.shui{position:fixed;inset:0;z-index:60;background:var(--paper);overflow-y:auto;padding:0 16px calc(24px + env(safe-area-inset-bottom,0px))}
.shpick{max-width:460px;margin:0 auto;padding-top:env(safe-area-inset-top,0px);display:flex;flex-direction:column;align-items:center}
.shpick .back{align-self:flex-start}
.shh{display:block;border:0;padding:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24px;margin:4px 0 12px}
.shrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.shpc{position:relative;background:none;border:0;padding:0;cursor:pointer;width:84px}
.shpc img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;transition:opacity .2s,transform .2s;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.shpc.off img{opacity:.35;transform:scale(.94)}
.shpc b{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font:700 13px/22px system-ui,sans-serif;text-align:center;border:2px solid var(--paper)}
.shpc.off b{background:#fff;color:transparent;border-color:#aaa}
.shpc small{display:block;font-family:var(--type);font-size:10px;color:var(--mute);margin-top:6px}
.shlbl{font-family:var(--type);font-size:11px;color:var(--mute);margin:10px 0 6px;text-align:center}
#shPv{width:min(82%,340px);box-shadow:0 10px 26px rgba(0,0,0,.35);border-radius:4px;margin:6px 0 10px}
.shline{font-family:var(--type);font-size:12px;color:var(--ink);text-align:center;margin:0 0 6px;max-width:340px}
#shGo{width:100%;max-width:340px}
.sets2 h2{font-size:11px;color:var(--mute);letter-spacing:.12em;margin:16px 0 6px}
.sshelf{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
.stp{width:100%;aspect-ratio:1;transform:rotate(-10deg);color:#7a5c2e}
.stp svg,.spin svg{width:100%;height:100%;display:block}
.srow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#f4ecd8;border:1px solid var(--line);border-left:5px solid var(--c);padding:8px 10px;margin-bottom:6px;color:var(--ink)}
.srow .nm{flex:1;min-width:0}
.srow b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px}
.srow small{font-family:var(--type);font-size:10.5px;color:var(--mute)}
.srow small.cc{color:#4f6b2f}.srow small.near{color:var(--red)}
.srow i{display:block;height:4px;background:#e2d6b8;margin-top:5px}.srow i em{display:block;height:100%;background:var(--c)}
.spins{display:flex;gap:3px}.spin{width:26px;height:26px}
.snote{font-family:var(--type);font-size:10.5px;color:var(--mute);margin:12px 0 0;line-height:1.5}
.filegood{font-family:var(--display);font-weight:700;letter-spacing:.14em;color:#1f3f6e;border:3px solid #1f3f6e;border-radius:3px;padding:2px 10px;display:inline-block;transform:rotate(-4deg);margin:0 0 8px}

/* one toolbar row: Sound, Music, How to play */
.toolbar{display:flex;justify-content:flex-start;gap:6px;padding-top:12px}
.land .toolbar{width:100%;padding-top:0;margin-bottom:10px}
.tbtn{display:inline-flex;align-items:center;gap:5px;height:30px;font-family:var(--display);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:11px;color:var(--navy);background:transparent;border:1.5px solid var(--navy);border-radius:3px;padding:0 9px;cursor:pointer;white-space:nowrap;margin:0;width:auto}
.tbtn svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tbtn.off{color:#8a8170;border-color:#b9ae94;border-style:dashed;text-decoration:none}
.top{padding-top:8px}

/* home header: a bigger DECLASS wordmark (24 Oct 2026 night) */
.top .wordmark{font-size:34px;letter-spacing:.05em}
.top .wordmark small{font-size:13px;margin-top:5px}
.top .streak{text-align:center}
.top .streak b{font-size:30px;margin-bottom:2px}
.files-sub{line-height:1.7;letter-spacing:.02em;margin-top:6px}
/* even space above (to the last envelope button) and below (to the divider) */
.nextfile{margin:0;padding-top:10px} /* padding, since margins next to the button collapse */
.slotbtn.wait{opacity:.6;border-style:dashed} /* not out yet: Arrives 5:00 PM */

/* How to play: tabs and the Field manual (25 Oct 2026) */
.howtabs{display:flex;gap:6px;margin:6px 0 10px;border-bottom:2px solid var(--line)}
.howtab{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--mute);background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:8px 10px;cursor:pointer}
.howtab.on{color:var(--red);border-bottom-color:var(--red)}
.howmore{font-size:14px;margin:16px 0 0}
.linkish{font:inherit;color:var(--navy);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.fmnav{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.fmnav button{font-family:var(--type);font-size:12px;border:1px solid var(--line);background:var(--env);color:var(--ink);padding:5px 9px;border-radius:14px;cursor:pointer}
#howManual section{scroll-margin-top:12px}
.fmenv{display:flex;gap:12px;align-items:flex-start;margin:10px 0;padding:8px;border-radius:3px}
.fmenv b{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px}
.fmenv p{margin:2px 0 0;font-size:14px;line-height:1.45}
.fmenv.flash{background:#fff3cf;transition:background 1.2s}
.mini-env{flex:0 0 52px;height:31px;position:relative;background:#E8DFC7;border:1px solid #cdbf9f;box-shadow:0 2px 5px rgba(0,0,0,.15);overflow:hidden;margin-top:2px}
.mini-env::before{content:"";position:absolute;left:0;right:0;top:0;height:62%;background:#ECE3CB;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 1px 1px rgba(60,45,20,.3))}
.mini-env::after{content:"";position:absolute;left:50%;top:62%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c95d50,#8e3a30 70%)}
.mini-env.deep{box-shadow:0 0 0 2px var(--navy),0 2px 5px rgba(0,0,0,.15)}
.mini-env.prio{background:#C9A774;border-color:#9e7f4f}.mini-env.prio::before{background:#D3B383}
.mini-env.comm{background:#1d1a17;border-color:#b8902a}.mini-env.comm::before{background:#2b2621}.mini-env.comm::after{background:radial-gradient(circle at 35% 30%,#f3dc7f,#b8902a 55%,#7a560c)}
.mini-env.starter{box-shadow:0 0 0 2px #2f5a2a,0 2px 5px rgba(0,0,0,.15)}
.mini-env.last{opacity:.85;border-style:dashed;border-color:var(--red)}
.fmnote{font-family:var(--type);font-size:12px;color:var(--mute);margin:6px 0 0}
.fmodds{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 8px}
.fmodds th{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--mute);text-align:left;border-bottom:1px solid var(--line);padding:4px}
.fmodds td{padding:5px 4px;border-bottom:1px dotted var(--line)}
.fmodds .sw{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;border-radius:1px}
.sw.f-copper{background:var(--copper)}.sw.f-silver{background:linear-gradient(135deg,#7e838c,#c9ced6,#7e838c)}.sw.f-gold{background:linear-gradient(135deg,#a67c1e,#e9c45a,#a67c1e)}.sw.f-topsecret{background:linear-gradient(135deg,#8e97a4,#f6f8fb,#aeb6c2);outline:1px solid var(--red)}
/* the small "what's this" hint on home rows */
.slotbtn .help{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:6px;border-radius:50%;border:1.5px solid currentColor;font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:12px;line-height:1;vertical-align:3px;opacity:.75;cursor:help}
.slotbtn b .help,.slotbtn.locked b .help{display:inline-grid;padding:0;width:20px;height:20px;box-sizing:border-box;color:inherit;font-size:12px;letter-spacing:0;text-transform:none}
.slotbtn span span.help,.slotbtn.locked span span.help{display:inline-grid;padding:0;width:18px;height:18px;margin:0 6px 0 0;box-sizing:border-box;font-size:11px;vertical-align:1px;color:var(--navy);border-color:var(--navy);opacity:1}
.slotbtn.comm span span.help{color:#e3c25e;border-color:#e3c25e}

/* Envelope layout, 25 Oct 2026 (uniform pass): every envelope type puts each piece in the same spot,
   all clear of the creases and the seal. Sizes are in container units so the choose screen and the
   opening screen envelopes match exactly (px first as a fallback).
   Left panel: the label. Top center (inside the flap): the type stamp on priority, starter, commemorative.
   Top right: No. x of 3. Right panel: CLASSIFIED, with DECLASS landing just below it. */
.env{container-type:inline-size}
.big .env{aspect-ratio:1.8}
.env .lbl{top:50%;left:3.5%;bottom:auto;z-index:5;letter-spacing:.05em;font-size:10px;font-size:2.8cqw;max-width:none;white-space:nowrap}
.env .lbl b{font-size:10.5px;font-size:2.93cqw;letter-spacing:.04em}
.env .no{right:auto;left:71%;top:5%;font-size:11px;font-size:3.07cqw}
.env .seal{font-size:9.4px;font-size:2.6cqw}
.env .prio{left:0;right:0;margin:0 auto;width:max-content;top:18%;font-size:11px;font-size:3.05cqw;letter-spacing:.14em}
.env.commem .prio{font-size:9px;font-size:2.5cqw;letter-spacing:.08em;max-width:none;white-space:nowrap;text-align:center;line-height:1.3;top:16%}
.env .cstamp,.env .dstamp{left:auto;right:3.5%;margin:0;width:max-content;font-size:9.8px;font-size:2.72cqw;letter-spacing:.12em;padding:1px 6px}
.env .cstamp{top:47%}
.env .dstamp{top:61%;right:5%}
/* Envelope looks match the Field manual drawings (25 Oct 2026) */
.env.deep{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy),0 2px 0 #cbbd98,0 10px 22px rgba(26,22,18,.16)}
.env.deep .lbl{color:var(--navy)}
.env.starter{border-color:#2f5a2a;box-shadow:0 0 0 3px #2f5a2a,0 2px 0 #cbbd98,0 10px 22px rgba(26,22,18,.16)}
.env.last{border:2px dashed var(--red);box-shadow:0 10px 22px rgba(26,22,18,.12)}
.env.last .body{opacity:.88}
.stack .env.deep,.stack .env.starter{margin:3px}
/* Top center stamps on the daily envelopes (25 Oct 2026) */
.env .prio.dayk,.env .prio.deepk{text-align:center;line-height:1.3;font-size:9.8px;font-size:2.72cqw;top:15%}
.env .prio.dayk{color:#5b4a2f;border-color:#5b4a2f}
.env .prio.deepk{color:var(--navy);border-color:var(--navy)}
/* The number and the top center stamp sit on the flap, so they leave with it when it opens
   and never show through the cards rising out (bug report 25 Oct 2026). */
.big .env .prio,.big .env .no,.big .env .edge{transition:opacity .35s}
.big.go .env .prio,.big.go .env .no,.big.go .env .edge{opacity:0}
.fmodds tr.tot td{font-family:var(--display);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);border-bottom:none;padding-top:7px}
.fmlead{margin:0 0 4px}
.fmodds tr.tot td{font-family:var(--display);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);border-bottom:none;padding-top:7px}
.fmlead{margin:0 0 4px}
/* iPhones draw ◀ and ▶ as blue emoji keys; the text selector in the markup plus this keeps them plain (25 Oct 2026) */
body{font-variant-emoji:text}
.srow.none{opacity:.55}
/* Subject filter in All cards */
.filters .subj{flex-basis:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}
.filters .subj span{font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.filters .subj select{font-family:var(--type);font-size:16px;color:var(--ink);background:var(--env);border:1px solid var(--line);border-radius:14px;padding:6px 28px 6px 12px;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat;max-width:100%}
.filters .subj.on select{background-color:var(--ink);color:var(--paper);border-color:var(--ink);background-image:linear-gradient(45deg,transparent 50%,var(--paper) 50%),linear-gradient(135deg,var(--paper) 50%,transparent 50%)}
.filters .subj select{width:min(250px,64vw);text-overflow:ellipsis}
/* Past monthly files fold by year */
.syear{margin-bottom:6px}
.syear summary{list-style:none;display:flex;align-items:baseline;gap:10px;cursor:pointer;background:#efe5cc;border:1px solid var(--line);border-left:5px solid #7a5c2e;padding:9px 10px;color:var(--ink)}
.syear summary::-webkit-details-marker{display:none}
.syear summary b{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px}
.syear summary small{flex:1;font-family:var(--type);font-size:10.5px;color:var(--mute)}
.syear summary::after{content:"▸\FE0E";font-size:13px;color:var(--mute);transition:transform .2s}
.syear[open] summary::after{transform:rotate(90deg)}
.syear[open] summary{margin-bottom:6px}
.syear .srow{margin-left:12px;width:calc(100% - 12px)}
.syear summary{display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:3px;align-items:center}
.syear summary b{grid-column:1;grid-row:1}.syear summary small{grid-column:1;grid-row:2}
.syear summary::after{grid-column:2;grid-row:1/3}
/* Sets rows open their cards */
.srow.go{cursor:pointer;position:relative;padding-right:26px}
.srow.go::after{content:"›";position:absolute;right:10px;top:50%;transform:translateY(-55%);font-size:22px;line-height:1;color:var(--mute)}
.srow.go:active{background:#efe4c8}
.stp.go{cursor:pointer}

/* Rank, streak, and Intel under the wordmark (25 Oct 2026). Streak stays centered and largest. */
.statrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;padding:8px 0 10px;border-bottom:3px double var(--red)}
.top{border-bottom:0;padding-bottom:0}
.stat{font-family:var(--type);font-size:11px;color:var(--mute);line-height:1.25;background:none;border:0;padding:0;min-width:0}
button.stat{cursor:pointer;color:var(--mute)}
.stat .sl{display:block;font-family:var(--display);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.stat b{display:block;font-family:var(--display);font-weight:700;color:var(--ink);white-space:nowrap;line-height:1.1}
.rankst{text-align:left;justify-self:start;max-width:100%}
.rankst b{font-size:14px;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis}
@media (max-width:374px){.rankst b{font-size:13px}}
.rbar{display:block;height:4px;background:#e2d6b8;border-radius:2px;margin-top:4px;width:96px;max-width:100%;overflow:hidden}
.rbar em{display:block;height:100%;background:var(--olive)}
.rbar.big{width:100%;height:8px;margin:6px 0 4px}
.statrow .streak{text-align:center;max-width:none}
.statrow .streak b{font-size:30px;color:var(--red);margin-bottom:2px}
.statrow .streak span{display:block;font-size:10px;max-width:100px;margin:0 auto;line-height:1.3}
.intelst{text-align:right;justify-self:end}
.intelst b{font-size:20px;color:var(--brass)}
.intelst span:last-child{display:block;font-size:10px;white-space:nowrap}
/* the earnings line after an envelope */
.earn{font-family:var(--type);font-size:13px;color:var(--brass);margin:2px 0 10px;min-height:1em}
/* sheets: rank, Intel, request, confirm */
.sheetcard h2{margin:6px 0 2px}
.sheettop{display:flex;justify-content:space-between;align-items:center}
.sheetline{font-family:var(--type);font-size:13px;margin:6px 0}
.sheetline.big{font-family:var(--display);font-weight:700;font-size:28px;color:var(--brass);margin:4px 0}
.sheetnote{font-size:14px;line-height:1.45;color:var(--mute);margin:8px 0}
.sheetcard .btn{display:block;width:100%;margin-top:10px}
.sheetcard .btn:disabled{opacity:.55;cursor:default}
.intelbig{font-family:var(--display);font-size:40px;color:var(--brass);margin:4px 0 0}
.intelbig small{font-size:16px;color:var(--mute)}
.intlog{list-style:none;padding:0;margin:4px 0}
.intlog li{display:flex;justify-content:space-between;gap:10px;font-family:var(--type);font-size:12px;padding:5px 0;border-bottom:1px dotted var(--line)}
.intlog b{font-family:var(--display);color:var(--olive)}.intlog b.neg{color:var(--red)}
.rankbig{text-align:center;color:var(--olive)}
.rbadge{width:84px;height:84px;display:block;margin:6px auto 0}
.reqopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.reqopt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--line);border-left:6px solid var(--c,var(--ink));background:var(--env);border-radius:3px;cursor:pointer;font-family:var(--display);text-align:left;color:var(--ink)}
.reqopt b{font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.reqopt span{font-family:var(--type);font-size:12px;color:var(--brass)}
.reqopt.short span{color:var(--mute)}
.reqopt.f-copper{--c:var(--copper)}.reqopt.f-silver{--c:#9ea4ad}.reqopt.f-gold{--c:#c9a23a}.reqopt.f-topsecret{--c:#8e97a4}
/* sealed cards that can be requested */
.mini.sealed.req{cursor:pointer}
.mini .reqline{display:block;font-family:var(--type);font-size:10px;color:var(--brass);margin-top:2px}
.s4.reqs{cursor:pointer;font-size:12px}
.s4.reqs small{color:var(--brass)}
.oneshort{grid-column:1/-1;font-family:var(--type);font-size:13px;margin:0 0 6px;padding:8px 10px;border:1px dashed var(--brass);border-radius:3px}
/* the small Requisition envelope */
.env.req{transform:scale(.82);transform-origin:center}
.big .env.req{transform:scale(.82)}
.env .prio.reqk{color:#4f6b2f;border-color:#4f6b2f}
/* the promotion moment */
.promo{position:fixed;inset:0;z-index:70;background:rgba(237,228,207,.96);display:flex;align-items:center;justify-content:center;padding:20px}
.promocard{text-align:center;max-width:340px}
.promostamp{color:var(--olive);width:170px;height:170px;margin:0 auto;animation:promoslam .6s cubic-bezier(.2,1.4,.4,1) both}
.promostamp .rbadge{width:100%;height:100%}
@keyframes promoslam{0%{transform:rotate(-10deg) scale(2.4);opacity:0}60%{opacity:1}100%{transform:rotate(-8deg) scale(1)}}
.promokick{font-family:var(--display);font-weight:700;letter-spacing:.3em;color:var(--red);margin:14px 0 0}
.promocard h2{display:block;border:0;font-size:32px;margin:2px 0 6px;text-transform:uppercase}
.promocard .btn{display:block;width:100%;margin-top:14px}
/* Header, option A (25 Oct 2026): wordmark and streak share the top row; rank and Intel on one slim line */
#sHome .toolbar{padding-top:8px}#sHome .tbtn{height:28px}
#sHome .top{align-items:center;padding-top:10px;padding-bottom:0;border-bottom:0}
#sHome .top .wordmark{font-size:32px}
#sHome .top .streak{text-align:center;max-width:124px;font-size:11px;line-height:1.25}
#sHome .top .streak b{font-size:34px;color:var(--red);margin-bottom:2px}
#sHome .top .streak span{display:block;font-size:10px;line-height:1.25}
.slimrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 0 9px;margin-top:8px;border-top:1px solid var(--line);border-bottom:3px double var(--red)}
.slimrow[hidden]{display:none}
.slimrow .stat{display:flex;align-items:baseline;gap:7px;text-align:left;cursor:pointer}
.slimrow .rankst{flex:1;min-width:0}
.slimrow .rankst .rbar{flex:1;max-width:110px;align-self:center;margin:0}
.slimrow .intelst{justify-self:auto}
.slimrow .intelst b{font-size:18px}
.slimrow .intelst span:last-child{font-size:10px;white-space:nowrap}
#sHome h1{margin-top:14px}#sHome .files-sub{margin-top:2px;line-height:1.4}
/* Streak block keeps to two lines: "Day Streak" then the hint on one line (25 Oct 2026) */
#sHome .top{gap:8px}
#sHome .top .wordmark{flex:0 1 auto;min-width:0}
#sHome .top .streak{max-width:none;flex:0 0 auto}
#sHome .top .streak span{white-space:nowrap}
/* Request button: the action on one line, the price beneath it */
.btn.reqgo{line-height:1.2;padding-top:10px;padding-bottom:9px}
.btn.reqgo small{display:block;margin-top:3px;font-size:11px;letter-spacing:.1em;opacity:.85}
/* Rank insignia (US Army, WW2 era) */
.slimrow .rkicon{height:22px;width:auto;max-width:40px;align-self:center;flex:0 0 auto}
.rankbig .rbadge{width:auto;height:90px;max-width:180px}
.promostamp{display:grid;place-items:center}
.promostamp .rbadge{width:auto;height:auto;max-width:100%;max-height:100%}
/* Intel from a duplicate: a brass tag, and a chip that pops, floats up, and fades */
.ichip{position:absolute;left:50%;top:44%;z-index:9;pointer-events:none;display:flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.08em;color:#fbf6ea;background:linear-gradient(135deg,#d9b24c,#a07a1c);border:1.5px solid #f3dc7f;border-radius:20px;padding:5px 13px 5px 7px;box-shadow:0 6px 16px rgba(80,55,0,.35);opacity:0;transform:translate(-50%,-50%) scale(.6);animation:ichip 1.05s .45s ease-out both}
.ichip i{width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#e3c25e 45%,#9a7416);border:1.5px solid #fbf0c8}
@keyframes ichip{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}55%{opacity:1;transform:translate(-50%,calc(-50% - 50px)) scale(1)}100%{opacity:0;transform:translate(-50%,calc(-50% - 120px)) scale(1)}}
@media (prefers-reduced-motion:reduce){.ichip{animation-duration:.01s;animation-delay:0s}}
/* The Intel token (25 Oct 2026) */
.itok{display:inline-block;width:1em;height:1em;vertical-align:-.14em;margin-right:.25em}
.slimrow .intelst .itok{width:18px;height:18px;align-self:center;margin:0}
.ichip .itok{width:18px;height:18px;margin:0}
.s4 small .itok{width:11px;height:11px;vertical-align:-1px;margin-right:3px}
.intelbig .itok{width:.85em;height:.85em;vertical-align:-.08em}
/* Rank and Intel line: icon, label, number, and "Today +N" all centered on one line (26 Oct 2026) */
.slimrow .stat{align-items:center}
.slimrow .stat .sl,.slimrow .intelst span:last-child{line-height:1}
.slimrow .stat b{line-height:1}
.slimrow .intelst .itok{transform:translateY(-.5px)}
.slimrow .intelst span:last-child{position:relative;top:1.5px}

/* tag for a duplicate that earned Intel (was class earn, which clashed with the summary line) */
.tag.dup.gain{background:linear-gradient(135deg,#d9b24c,#a07a1c);box-shadow:0 0 0 1.5px #f3dc7f inset}
.slimrow #rankT{overflow:hidden;text-overflow:ellipsis;min-width:0}
.slimrow .rankst .rbar{min-width:28px}
.slimrow #rankT.long{font-size:12px;letter-spacing:0}
.slimrow .rbar[hidden]{display:none}
.slimrow #intelN.long{font-size:15px}

/* First visit coaching (26 Oct 2026): hints in the first pack, a three stop home tour, first time notes */
.coachrow{text-align:center;margin:4px 0 14px}
.coachp{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--paper);font-family:var(--type);font-size:14px;line-height:1.2;padding:10px 15px;border-radius:20px;box-shadow:0 6px 18px rgba(26,22,18,.25);animation:coachIn .45s ease-out both}
.coachp i{width:8px;height:8px;border-radius:50%;background:var(--brass);flex:0 0 auto;animation:coachBlink 1.4s ease-in-out infinite}
.coachp .nudge{display:inline-block;animation:coachNudge 1.1s ease-in-out infinite}
.hint .coachp{font-size:14px}
.tourdim{position:fixed;inset:0;z-index:62;background:rgba(26,22,18,.58)}
.tourlit{position:relative;z-index:63;background:var(--paper);border-radius:6px;box-shadow:0 0 0 5px var(--paper),0 0 0 8px var(--red);pointer-events:none}
.tourbub{position:fixed;left:16px;right:16px;max-width:448px;margin:0 auto;z-index:64;background:var(--env);border:2px solid var(--ink);border-radius:8px;padding:16px 16px 10px;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:coachIn .3s ease-out both}
.tourbub h3{margin:0 0 6px;font-family:var(--display);font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.tourbub p{margin:0;font-size:15px;line-height:1.45}
.tourbub .arw{position:absolute;width:16px;height:16px;background:var(--env);transform:rotate(45deg);margin-left:-8px}
.tourbub .arw.up{top:-10px;border-left:2px solid var(--ink);border-top:2px solid var(--ink)}
.tourbub .arw.down{bottom:-10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.tourbub .tfoot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.tourbub .tstep{font-family:var(--type);font-size:12px;color:var(--mute)}
.tourbub .tskip{font-family:var(--type);font-size:13px;color:var(--mute);background:none;border:0;min-height:44px;padding:0 12px;cursor:pointer;text-decoration:underline}
.tourbub .btn{margin:0;min-height:44px}
.howbtn.pulse{animation:coachPulse 1.2s ease-in-out 5}
.fnote{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:448px;margin:0 auto;z-index:55;background:var(--ink);color:var(--paper);border-radius:10px;padding:13px 16px 12px;box-shadow:0 8px 22px rgba(26,22,18,.35);animation:coachIn .35s ease-out both}
.fnote .k{font-family:var(--type);font-size:11px;color:var(--brass);letter-spacing:.08em;display:flex;align-items:center;gap:7px}
.fnote .k i{width:7px;height:7px;border-radius:50%;background:var(--brass)}
.fnote p{margin:6px 0 0;font-size:15px;line-height:1.45}
.fnote button{margin-top:10px;font-family:var(--display);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--ink);background:var(--paper);border:0;border-radius:3px;min-height:40px;padding:0 14px;cursor:pointer}
.slotbtn.coached,.signbar.coached{box-shadow:0 0 0 3px var(--paper),0 0 0 5.5px var(--red)}
@keyframes coachIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes coachBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes coachNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
@keyframes coachPulse{0%,100%{box-shadow:0 0 0 0 rgba(176,74,62,.55)}50%{box-shadow:0 0 0 9px rgba(176,74,62,0)}}
@media (prefers-reduced-motion:reduce){.coachp,.coachp i,.coachp .nudge,.tourbub,.fnote,.howbtn.pulse{animation:none}}

/* Opening screen (26 Oct 2026): the envelope and its line sit together in the middle of the screen,
   with room above for the card backs rising out, instead of the line drifting far below on tall screens. */
#sOpen.on{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 24px);min-height:calc(100dvh - 24px)}
#sOpen .theatre{min-height:0;padding-top:clamp(90px,14vh,130px)}
#sOpen .tearing{margin-top:18px;font-size:14px}
.fnote.inline{position:static;margin:12px auto 4px;left:auto;right:auto;bottom:auto;box-shadow:0 4px 12px rgba(26,22,18,.25)}

/* ============ Night Dispatch theme (29 Oct 2026, visual pass step 2, option B "Darkroom") ============
   One theme only: the page is a dark desk under a warm red safelight, matching the share picture.
   Paper things stay paper: envelopes, cards and card backs, the How to play and info sheets, and the
   story panel in the card view. They take the old cream tokens back so their text stays dark ink. */
.env,.mini-env,.cf,.backf,.tray .tr.back,.big .cardsout,.howcard,.ctext{
  --paper:#EDE4CF;--paper2:#E3D8BE;--env:#F3EBD6;--ink:#1A1612;--navy:#3D5884;--red:#B04A3E;--olive:#5E6B3A;--brass:#B8862B;--violet:#5B4B8A;
  --mute:#5f5849;--line:#C9BC9E;color-scheme:light}
body{background-color:#17140f;background-attachment:fixed;
  background-image:radial-gradient(ellipse at 50% 46%,rgba(176,74,62,.19),rgba(0,0,0,0) 70%),repeating-linear-gradient(0deg,rgba(237,228,207,.035) 0 1px,transparent 1px 6px)}
.top,.statrow{border-bottom-color:#B04A3E}
/* buttons keep the brand red with cream lettering */
.btn{background:#B04A3E;color:#FFF4E2}.btn.alt{background:transparent;color:var(--red);border-color:var(--red)}
.btn.danger{background:#a8382c}
.nav button.fin:not(:disabled){background:#B04A3E}
/* today's files */
.slotbtn{background:#1c1814;border-color:#7a6b56}
.slotbtn.done{opacity:.85}
.slotbtn.live,.slotbtn.pend{background:linear-gradient(180deg,#2a1914,#211512);border-color:var(--red);box-shadow:0 0 0 1px rgba(216,100,79,.2),0 0 18px rgba(216,100,79,.14)}
.slotbtn.locked,.slotbtn.wait{background:transparent}
.slotbtn.prio{background:linear-gradient(180deg,#3a2c1a,#2e2214);border-color:#C9A774}.slotbtn.prio b,.slotbtn.prio.live::after{color:#E3C48E}
.slotbtn.starter{background:#18211a;border-color:#6f9a62}.slotbtn.starter b,.slotbtn.starter.live::after{color:#a9cf98}
.slotbtn.comm{background:#0e0c0a}
.signbar{background:#241713}
.icptile{background:#0b1220;border-color:#4d6ea3}
/* tiles, bars, rows */
.tile,.allbtn{background:#1c1814;border-color:#6a5c4a}.allbtn{border-color:#8a7a62}
.bar,.srow i{background:#4a4036;border:0;box-shadow:inset 0 0 0 1px rgba(237,228,207,.18)}
.rbar{background:#4a4036;box-shadow:inset 0 0 0 1px rgba(237,228,207,.18)}
.srow,.syear summary{background:#1c1814}.syear summary{border-left-color:#C99A55}.srow.go:active{background:#2a241d}
.srow small.cc{color:#a9c77a}
.stp{color:#d3b07a}
.filters button.on,.filters .subj.on select{background-color:#EDE4CF;color:#17140f;border-color:#EDE4CF}
/* Special Elite sits high in its line box (tall ascent, deep descent), so pills get a little more room on top to look centered */
.filters button,.fmnav button{line-height:1.2;padding:.62em .95em .38em}
.filters .subj select{line-height:1.2;padding-top:8px;padding-bottom:4px}
/* thumbnails sit on the desk; the better finishes give off a little light */
.mini .thumb,.tray .tr img{box-shadow:0 6px 16px rgba(0,0,0,.55)}
.mini .thumb.f-gold,.tray .tr img.f-gold{border-color:#d9ae3a;box-shadow:0 0 14px rgba(227,190,80,.35),0 6px 16px rgba(0,0,0,.55)}
.mini .thumb.f-silver,.tray .tr img.f-silver{border-color:#c3c8cf;box-shadow:0 0 12px rgba(220,225,232,.22),0 6px 16px rgba(0,0,0,.55)}
.mini .thumb.f-topsecret,.mini .thumb.flash,.tray .tr img.f-topsecret,.tray .tr img.flash{box-shadow:0 0 14px rgba(160,190,255,.3),0 6px 16px rgba(0,0,0,.55)}
.mini.sealed .thumb{background:repeating-linear-gradient(135deg,#1e1a16 0 10px,#191612 10px 20px);color:#4a4136}
.fd i{border-color:#7a6b56}.fd b{color:#5a4f41}
/* envelopes and cards cast deeper shadows on the dark desk */
.env{box-shadow:0 2px 0 #a99b78,0 16px 34px rgba(0,0,0,.6)}
.env.deep{box-shadow:0 0 0 3px var(--navy),0 2px 0 #a99b78,0 16px 34px rgba(0,0,0,.6)}
.env.starter{box-shadow:0 0 0 3px #2f5a2a,0 2px 0 #a99b78,0 16px 34px rgba(0,0,0,.6)}
.env.commem{box-shadow:0 0 0 1px #6e520f,0 0 30px rgba(227,194,94,.18),0 16px 34px rgba(0,0,0,.7)}
.env .seal{color:#EDE4CF}
.landenv .env{box-shadow:0 2px 0 #a99b78,0 18px 40px rgba(0,0,0,.7),0 0 60px rgba(216,100,79,.12)}
.backf{box-shadow:0 14px 30px rgba(0,0,0,.6)}
.cf .frame{box-shadow:0 14px 34px rgba(0,0,0,.7)}
.cf.f-gold .frame{box-shadow:0 0 0 1px rgba(255,220,120,.25),0 0 46px rgba(227,190,80,.28),0 14px 34px rgba(0,0,0,.7)}
.cf.f-topsecret .frame{box-shadow:0 0 0 1px rgba(200,215,255,.25),0 0 46px rgba(160,190,255,.22),0 14px 34px rgba(0,0,0,.7)}
.cf.flash .frame{box-shadow:0 0 40px rgba(200,170,255,.22),0 14px 34px rgba(0,0,0,.7)}
/* card view: finish slots, and the story on a paper panel */
.s4:not(.off){color:#FFF8EA}.s4.f-topsecret{color:#B04A3E}
.s4.off{border-color:#7a6b56}.s4.cur{outline-color:#EDE4CF}
.history .fin,.tag,.backf .badge,.tray .tr.back i{color:#FFF8EA}
.ctext{background:#EDE4CF;color:#1A1612;padding:18px 18px 16px;border-radius:3px;box-shadow:0 12px 30px rgba(0,0,0,.55)}
.icons a{background:#f4ecd8}
/* toolbar buttons that are switched off */
.tbtn.off,.sndbtn.off{color:#8f8573;border-color:#5a4f41}
/* overlays */
.how{background:rgba(8,6,5,.7)}
.howcard{color:#1A1612;border-color:#cbbd98;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.promo{background:rgba(18,15,12,.96)}
.toast,.coachp,.fnote{background:#EDE4CF;color:#1A1612}
.fnote button{background:#17140f;color:#EDE4CF}
.tourdim{background:rgba(8,6,5,.66)}
.tourlit{box-shadow:0 0 0 5px var(--paper),0 0 0 8px var(--red)}
.shpc.off b{background:#2a241d;border-color:#5a4f41}
.landsmall{color:#a99d83}

/* ============ Visual pass step 1 (29 Oct 2026): a type floor ============
   Nothing functional under 14px on a phone, body copy 16px or more. Envelope and card artwork
   (labels, stamps, seals, card faces) keep their sizes, since they are drawn to fit the envelope. */
.wordmark small,.top .wordmark small,.streak,#sHome .top .streak,#sHome .top .streak span,.statrow .streak span,
.sub,h2 small,.linkbtn,.slotbtn span,.signbar span,.nextfile,.tile span,#yearTiles .tile span,.allbtn span,.filters button,
.mini .no,.tearing,.count,.backf small,.hint,.summary .sumsub,.s4.flashnote,.rowlbl,.ctext .kick,.ctext .m,.ntclue,.prow span,.notyet,
.history,.landfrom,.landtag,.landsmall,.toast,.foot,.shpc small,.shlbl,.shline,.srow small,.snote,.fmnav button,.fmnote,
.syear summary small,.stat,.earn,.sheetline,.intlog li,.reqopt span,.mini .reqline,.oneshort,.tourbub .tstep,.tourbub .tskip,.fnote .k,
.icptile span{font-size:14px}
.s4 small{font-size:13px}
.slimrow .intelst span:last-child,.intelst span:last-child{font-size:14px}
/* display caps labels */
.back,.nav button,.ctext .more,.history h3,.howtab,.fnote button,.mini .nm,.slotbtn::after,.icptile::after{font-size:14px}
.slotbtn.locked::after{font-size:13px}
.howbtn,.tbtn{font-size:13px}
.tag,.s4,.ctext h4,.howstamp,.sets2 h2,.fmodds th,.fmodds tr.tot td,.filters .subj span,.btn.reqgo small,.stat .sl,.history .fin{font-size:13px}
.howcard h3{font-size:15px}
.btn{font-size:15px}
.fd b{font-size:12px}
/* body copy */
.ctext .story p,.howlead{font-size:17px}
.howcard ul,.howmore,.fmenv p,.fmodds,.tourbub p,.fnote p,.sheetnote,.coachp{font-size:16px}
/* the tighter spots: let long lines wrap instead of spilling */
.slotbtn b,.slotbtn span,.icptile b,.icptile span{padding-right:128px}
.slotbtn.locked b,.slotbtn.locked span{padding-right:150px}
.mini .no{margin-top:5px}
/* finish key under card grids (new players don't know what the squares mean) */
.fleg{margin:10px 0 14px;font-family:var(--type);font-size:14px;color:var(--mute)}
.fleg .fd{flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0}.fleg .fd+.fd{margin-top:6px}
.fleg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fleg i{width:13px;height:13px}
.fleg b{font-size:12px;margin:0;color:var(--red)}
#sectionLeg .fleg{margin-top:-8px}
/* desktop sign in: Google's iframe button sometimes shows its fallback text beside it; hide the fallback once the iframe is there */
@media (hover:hover) and (pointer:fine){.gslot div:has(> iframe) > :not(iframe){display:none!important}}
/* caps labels up to the floor too */
.tbtn,.howbtn,.tag,.s4,.s4 small,.ctext h4,.howstamp,.sets2 h2,.fmodds th,.fmodds tr.tot td,.filters .subj span,.btn.reqgo small,.history .fin,.slotbtn.locked::after{font-size:14px}
.slimrow .stat .sl,.slimrow .rankst b,.slimrow #rankT.long{font-size:14px}
.icptile span{font-size:14px}
/* narrow phones: header hint wraps under the streak, section headings let their note drop below */
#sHome .top .streak span{white-space:normal;max-width:150px;margin:0 auto}
h2{flex-wrap:wrap;row-gap:2px}
#icpSlot .icptile span{font-size:14px}
@media (max-width:400px){#yearTiles .tile span.rng{display:none}}
#yearTiles .tile{display:flex;flex-direction:column;justify-content:flex-start}#yearTiles .tile .bar{margin-top:auto;width:100%}#yearTiles .tile b{margin-bottom:2px}

/* card grids: every card starts at the top of its cell (a stretched button centers its content, which pushed
   held cards down beside a sealed card with a request line), and the request line stays on one line */
.grid,.recent,.savegrid{align-items:start}
.mini .reqline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini.today .reqline{color:var(--mute)} /* not yet requestable: quieter than Request card (4 Nov 2026) */

/* Home header, option C (29 Oct 2026): rank beside the DECLASS name; streak and Intel share one slim row below,
   both laid out the same way (big number with a small label, a short line underneath). The rank badge always
   sits right beside the rank name: they share one line that never wraps, and long names step down a size. */
#sHome .top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0 10px;border-bottom:1px solid var(--line)}
#sHome .top .wordmark{flex:0 0 auto}
.hrank{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);text-align:right}
.hl{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1}
.hv{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;max-width:100%}
.hrank .rkicon{height:22px;width:auto;max-width:40px;flex:0 0 auto}
.hrank #rankT{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hrank #rankT.long{font-size:15px;letter-spacing:0}
@media (max-width:374px){.hrank #rankT{font-size:16px}.hrank #rankT.long{font-size:14px}}
.hrank .rbar{display:block;width:120px;max-width:100%;height:6px;margin:0;border-radius:3px}
.hrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:3px double #B04A3E}
.hstat{display:flex;flex-direction:column;gap:3px;min-width:0;font-family:var(--body)}
.hintel{align-items:flex-end;text-align:right;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.hstat .hv{align-items:baseline}
.hstat .hv b{font-family:var(--display);font-weight:700;font-size:26px;line-height:1}
.hstreak .hv b{color:var(--red)}.hintel .hv b{color:var(--brass)}
.hintel .itok{width:20px;height:20px;align-self:center;margin:0;vertical-align:0}
.hintel #intelN.long{font-size:22px}
.hs{font-family:var(--type);font-size:14px;color:var(--mute);line-height:1.2}

/* Visual pass step 3 (29 Oct 2026): three real cards spill out of the starter envelope on the landing page.
   The intro line steps aside to make room; How to play still explains the game. */
#sLanding.fanned .landline{display:none}
#sLanding.fanned .landtag{margin-bottom:8px}
#sLanding.fanned .landenv{position:relative;margin-top:162px}
.landenv .env{position:relative;z-index:1}
.lfan{position:absolute;left:50%;top:-150px;width:0;height:0;z-index:2;pointer-events:none}
.lfan>div{position:absolute;width:132px;left:-66px;top:0;transform-origin:50% 100%}
.lfan .l{transform:translateX(-92px) translateY(26px) rotate(-13deg)}
.lfan .r{transform:translateX(92px) translateY(26px) rotate(13deg)}
.lfan .m{transform:translateY(-8px);z-index:2}
.lfan .cf .frame{box-shadow:0 12px 28px rgba(0,0,0,.65)}
.lfan .m .cf .frame{box-shadow:0 0 0 1px rgba(255,220,120,.25),0 0 40px rgba(227,190,80,.3),0 12px 28px rgba(0,0,0,.65)}
@media (max-width:400px){.lfan>div{width:118px;left:-59px}.lfan .l{transform:translateX(-80px) translateY(26px) rotate(-13deg)}.lfan .r{transform:translateX(80px) translateY(26px) rotate(13deg)}#sLanding.fanned .landenv{margin-top:148px}.lfan{top:-136px}}
@media (prefers-reduced-motion:no-preference){
  /* the cards shake with the envelope, and the Gold's sheen sweeps slowly across */
  #sLanding.fanned .landenv .env{animation:none}
  #sLanding.fanned .landenv{animation:rattle 3.2s ease-in-out infinite;transform-origin:50% 70%}
  .lfan .m .sheen{background-size:300% 100%;animation:lsheen 3.6s ease-in-out infinite}
  .lfan .m .frame::after{background-size:300% 100%;animation:lsheen 3.6s ease-in-out infinite}
}
@keyframes lsheen{0%{background-position:100% 0}55%,100%{background-position:0 0}}

/* Turning cards (29 Oct 2026, after Brian's iPhone check): Done and "Card 1 of 5" share one row, the tip sits
   above the card, and the card scales to the screen height so the tray of cards below is never cut off. */
#sCards.on{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px}
#sCards>*{grid-column:1/-1}
#sCards>#backCards{grid-column:1}
#sCards>#count{grid-column:2;text-align:right;margin:0}
#sCards.summ>#backCards{grid-column:1/-1}
#sCards .viewer{display:flex;flex-direction:column;width:100%;max-width:min(340px,calc((100vh - 215px) / 1.5));max-width:min(340px,calc((100svh - 215px) / 1.5))}
#sCards .viewer>.hint{order:-1}
#sCards .viewer>.hint{margin:0 0 10px;min-height:0}
#sCards .tray{margin-top:14px;width:100%;align-self:stretch}

/* Visual pass step 4 (29 Oct 2026): the opening. The flap swings up in 3D and stays visible above the
   envelope; then real card backs rise out from inside, clipped at the envelope's top edge so they look
   like they are being pulled out of it. */
.big .env{overflow:visible;perspective:800px}
.big .env .flap{transition:transform 1.3s cubic-bezier(.25,.8,.3,1),filter 1.3s}
.big.go .env .flap{z-index:0;filter:brightness(.92) drop-shadow(0 -2px 3px rgba(0,0,0,.3))}
.cardsclip{position:absolute;left:-20%;right:-20%;bottom:100%;height:240%;overflow:hidden;pointer-events:none;z-index:4}
.big .cardsclip .cardsout{left:50%;top:100%;bottom:auto;width:28.6%;transform:translate(-50%,4%);opacity:1;transition:transform 1s .8s cubic-bezier(.2,.8,.3,1)}
.big.go .cardsclip .cardsout{opacity:1;transform:translate(-50%,-78%)}
.big .cardsout i{display:grid;place-items:center;container-type:inline-size;border:1px solid #cbbd98;box-shadow:0 8px 18px rgba(0,0,0,.45)}
.big .cardsout i::after{content:"WW2";width:46%;aspect-ratio:1;border-radius:50%;background:#B04A3E;color:#FFF8EA;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-style:normal;font-size:13cqw;border:3.2cqw solid #EDE4CF;outline:1.3cqw solid #B04A3E;box-sizing:border-box}
.big.fade{opacity:0;transition:opacity .35s}
/* drag the seal to tear it open: the seal slides with the finger and the flap starts to lift */
.stack .env{perspective:700px}
.stack .env .seal{touch-action:none;cursor:grab}
.stack .env.tearing{transform:none}
.stack .env.tearing .seal{transition:none;transform:translate(calc(-50% + var(--tx,0px)),-50%) rotate(calc(-6deg + var(--p,0) * 24deg)) scale(calc(1 - var(--p,0) * .15))}
.stack .env.tearing .flap{transition:none;transform:rotateX(calc(var(--p,0) * -32deg))}
.stack .env.snap .seal,.stack .env.snap .flap{transition:transform .25s ease-out}

/* Visual pass step 5 (29 Oct 2026): the held reveal for a Gold, Top Secret, or Flash card, and for the best
   card of a starter pack. The card trembles while a glow builds behind it, then turns with a bigger glow and a
   sheen that sweeps once across the frame. */
#stage::before{content:"";position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,120,.95),rgba(255,180,80,.4) 60%,transparent 82%);opacity:0;pointer-events:none;transform:scale(.8)}
#stage.charging::before{animation:charge .8s ease-out forwards}
@keyframes charge{to{opacity:1;transform:scale(1.05)}}
@media (prefers-reduced-motion:no-preference){
  .flip.charge{animation:tremble .8s ease-in}
}
@keyframes tremble{0%{transform:none}20%{transform:translate(-1px,0) rotate(-.4deg)}35%{transform:translate(1px,-1px) rotate(.4deg)}50%{transform:translate(-2px,1px) rotate(-.7deg) scale(1.01)}65%{transform:translate(2px,-1px) rotate(.7deg) scale(1.015)}80%{transform:translate(-3px,0) rotate(-1deg) scale(1.02)}100%{transform:translate(0,-2px) scale(1.03)}}
.glow.held{animation-duration:2.6s}
.glow.silver.held{--gc:rgba(255,255,255,.95)}
.glow.gold.held{--gc:rgba(255,200,80,1)}
.cf.sweep .sheen{display:block;background-size:260% 100%;animation:sweep 1.2s .55s ease-out both}
.cf.f-gold.sweep .frame::after{background-size:260% 100%;animation:sweep 1.2s .55s ease-out both}
@keyframes sweep{from{background-position:120% 0}to{background-position:-20% 0}}

/* Premium pass (29 Oct 2026) */
/* 6 · screens fade in instead of snapping */
@media (prefers-reduced-motion:no-preference){.screen.on{animation:scrIn .24s ease-out}}
@keyframes scrIn{from{opacity:0}to{opacity:1}}
/* 9 · buttons press down under the finger */
button,.env,.slotbtn,.mini,.tile,.allbtn,.srow.go{transition:transform .09s ease-out}
button:not(.tr):not(.mini):active,.slotbtn:active,.tile:active,.allbtn:active,.srow.go:active{transform:scale(.97)}
.mini:active{transform:scale(.96)}
.stack .env:active:not(.tearing){transform:scale(.985)}
.btn:active{filter:brightness(.92)}
/* the loading screen: a DECLASS stamp thumps down while the files open */
#sLoading{text-align:center;padding-top:90px}
.loadstamp{display:inline-block;font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.2em;color:var(--red);border:4px double var(--red);padding:4px 14px 2px 18px;transform:rotate(-6deg);margin-bottom:18px;opacity:.9}
@media (prefers-reduced-motion:no-preference){.loadstamp{animation:lstamp 1.6s cubic-bezier(.2,1.4,.4,1) infinite}}
@keyframes lstamp{0%{transform:rotate(-6deg) scale(1.8);opacity:0}22%{transform:rotate(-6deg) scale(1);opacity:.95}80%{transform:rotate(-6deg) scale(1);opacity:.95}100%{transform:rotate(-6deg) scale(1);opacity:0}}
/* 1 · a card being turned by hand */
#stage{touch-action:pan-y}
#flip{will-change:transform}
#stage{user-select:none;-webkit-user-select:none}
/* 4 · duplicates become Intel you can see: a FILED stamp lands on the card, and its Intel flies into a live tally */
#sCards.on{grid-template-columns:auto 1fr auto}
#sCards>#cIntel{grid-column:2;justify-self:center}
#sCards>#count{grid-column:3}
#sCards.summ>#cIntel{display:none}
.cintel{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);color:var(--mute);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.cintel b{font-size:20px;color:var(--brass);letter-spacing:.02em}
.cintel .itok{width:18px;height:18px;margin:0}
.cintel.bump{animation:cbump .5s ease-out}
@keyframes cbump{30%{transform:scale(1.18)}100%{transform:scale(1)}}
.ichip.fly{position:fixed;z-index:80;animation:none;opacity:0;transform:translate(-50%,-50%)}
.frontf .filedst{position:absolute;left:50%;top:58%;z-index:7;transform:translate(-50%,-50%) rotate(-14deg) scale(1.9);opacity:0;pointer-events:none;
  font-family:var(--display);font-weight:700;font-size:44px;letter-spacing:.22em;color:#2f4f86;border:5px double #2f4f86;border-radius:4px;padding:2px 10px 0 18px;mix-blend-mode:multiply}
.frontf .filedst.set{opacity:.8;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}
.frontf .filedst.hit{animation:fslam .32s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes fslam{to{opacity:.8;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}
@media (max-width:400px){.frontf .filedst{font-size:36px}}
/* 5 · the finale: cards fan in one after another, the best one larger in the middle, the Intel counts up */
#summaryRow .mini{transform:scale(var(--sc,1));transform-origin:50% 60%}
#summaryRow .mini.best{--sc:1.1;z-index:2;position:relative}
@media (prefers-reduced-motion:no-preference){#summaryRow.fan .mini{animation:fanIn .55s var(--fd,0s) cubic-bezier(.2,.9,.3,1.15) both}}
@keyframes fanIn{from{opacity:0;transform:translateY(46px) rotate(var(--fr,0deg)) scale(.82)}to{opacity:1;transform:scale(var(--sc,1))}}
.earntot{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 0;font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.earntot b{font-size:34px;color:var(--brass);letter-spacing:.02em;font-weight:700}
.earntot .itok{width:26px;height:26px;margin:0}
#sCards.summ .summary .earntot+.earn{margin-top:4px}
/* 1 · a face down card hints at its finish */
.backf.hint-silver{box-shadow:0 0 0 2px rgba(225,232,242,.55),0 0 22px rgba(220,230,245,.35),0 14px 30px rgba(0,0,0,.6)}
.backf.hint-gold{box-shadow:0 0 0 2px rgba(232,196,90,.85),0 0 30px rgba(255,195,80,.55),0 14px 30px rgba(0,0,0,.6)}
.backf.hint-ts{box-shadow:0 0 0 2px rgba(255,255,255,.6),0 14px 30px rgba(0,0,0,.6)}
.backf.hint-ts::before{content:"";position:absolute;inset:-5px;z-index:-1;border-radius:3px;background:conic-gradient(from var(--ha,0deg),#ff7aa8,#ffd86a,#6ef0b0,#7ab0ff,#c98aff,#ff7aa8);filter:blur(7px);opacity:.85}
@property --ha{syntax:'<angle>';inherits:false;initial-value:0deg}
@media (prefers-reduced-motion:no-preference){
  .backf.hint-gold{animation:hgold 1.8s ease-in-out infinite}
  .backf.hint-ts::before{animation:hts 3s linear infinite}
}
@keyframes hgold{50%{box-shadow:0 0 0 2px rgba(240,205,100,1),0 0 44px rgba(255,200,85,.8),0 14px 30px rgba(0,0,0,.6)}}
@keyframes hts{to{--ha:360deg}}
/* 4 · set complete: the dated round stamp in brass */
.promostamp.setstamp{color:#D9A93E;width:190px;height:190px}

/* Declassified file (29 Oct 2026): the bar under the finish row, the unfolded panel, and the folder mark on Gold and Top Secret squares. */
.s4{position:relative}
.s4 .fold{position:absolute;right:5px;top:5px;width:13px;height:10px;pointer-events:none}
.s4 .fold::before{content:"";position:absolute;left:0;top:0;width:6px;height:3px;background:#c9a96b;border-radius:1px 1px 0 0}
.s4 .fold::after{content:"";position:absolute;left:0;top:2px;right:0;bottom:0;background:#c9a96b;border-radius:1px}
#dfile:empty{display:none}
.dbar{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 4px;padding:11px 14px;background:#d9bd85;border:0;border-radius:3px;box-shadow:0 6px 16px rgba(0,0,0,.45);color:#2a2117;text-align:left;cursor:pointer;font:inherit}
.dbar .dic{width:34px;height:26px;flex:none;position:relative}
.dbar .dic::before{content:"";position:absolute;left:0;top:0;width:14px;height:6px;background:#a8823f;border-radius:2px 2px 0 0}
.dbar .dic::after{content:"";position:absolute;left:0;top:4px;right:0;bottom:0;background:#b8904a;border-radius:1px 3px 3px 3px}
.dbar .dic i{position:absolute;z-index:2;left:50%;top:58%;transform:translate(-50%,-50%);font-style:normal;font-size:12px;line-height:1}
.dbar .dtx{min-width:0}
.dbar b{display:block;font-family:var(--display);font-weight:700;letter-spacing:.1em;font-size:15px;text-transform:uppercase}
.dbar small{display:block;font-family:var(--type);font-size:14px;color:#5a4a33;margin-top:1px}
.dbar .dst{margin-left:auto;flex:none;font-family:var(--display);font-weight:700;letter-spacing:.1em;font-size:12px;line-height:1.15;text-align:center;border:2px solid #b02a1f;color:#b02a1f;padding:3px 7px;transform:rotate(-6deg);border-radius:2px;max-width:64px}
.dbar .dchev{margin-left:auto;flex:none;font-family:var(--display);font-weight:700;color:#6a4212;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.dbar.unf{border-radius:3px 3px 0 0;box-shadow:none;margin-bottom:0}
.dpanel{background:#d9bd85;border-radius:0 0 3px 3px;padding:4px 14px 16px;box-shadow:0 10px 22px rgba(0,0,0,.5);color:#2a2117;margin-bottom:6px;animation:dunf .3s ease-out both}
@keyframes dunf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dpanel figure{margin:6px 0 12px;background:#f3ead4;padding:8px 8px 10px;box-shadow:0 3px 8px rgba(0,0,0,.25);transform:rotate(-1deg)}
.dpanel figure img{display:block;width:100%;filter:grayscale(1)}
.dpanel figcaption{font-family:var(--type);font-size:14px;color:#4a3d2c;margin-top:7px;line-height:1.35}
.dpanel figcaption span{display:block;font-size:12px;color:#6b5a40;margin-top:4px}
.dfact{background:#f3ead4;padding:12px 14px;font-family:var(--body);font-size:16px;line-height:1.5;color:#221a12}
.dfact b{display:block;font-family:var(--display);font-size:13px;letter-spacing:.14em;color:#b02a1f;margin-bottom:5px;text-transform:uppercase}
.dsrc{font-family:var(--type);font-size:13px;color:#4a3d2c;margin:9px 2px 0}
.dsrc a{color:#2d4f86}
.dvid{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;background:#1d1a17;color:#efe6cf;padding:9px 12px;border-radius:3px;border:0;cursor:pointer;text-align:left}
.dvid span{width:30px;height:30px;border-radius:50%;background:#b02a1f;display:grid;place-items:center;font-size:13px;flex:none}
.dvid b{font-family:var(--display);font-weight:700;letter-spacing:.06em;font-size:14px;text-transform:uppercase}
.dvideo{display:block;width:100%;max-height:70vh;margin-top:12px;background:#000;border-radius:3px}
.hint .fline{display:block;margin-top:4px;color:var(--brass);font-weight:700}

/* Every finish square the same size whatever it holds (29 Oct 2026). */
.slots4 .s4{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:54px;box-sizing:border-box;line-height:1.15}
.slots4 .s4 small{margin-top:3px}

/* Card view: which group you are paging through (29 Oct 2026). */
.vctx{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);text-align:center;margin:0 0 2px}
.vctx:empty{display:none}

/* Request picker: every price in the same ink; a finish you can't afford yet says how much more (29 Oct 2026). */
.reqopt span,.reqopt.short span{color:var(--ink)}
.reqopt em{font-style:normal;font-family:var(--type);font-size:12px;color:var(--mute)}

/* Living Card speaker (29 Oct 2026): tucked into the card's bottom right corner; red with waves while the sound plays. */
.cf .spk{right:2.2%;bottom:1.8%;width:30px;height:30px;padding:6px;background:rgba(26,22,18,.78);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.cf .spk svg{width:100%;height:100%;display:block}
.cf .spk.on{background:#B04A3E;color:#FFF8EA}
.cf .spk.silent{opacity:.7}

/* Full screen card with zoom (29 Oct 2026, on trial). */
.zoomer{position:fixed;inset:0;z-index:90;background:rgba(10,8,6,calc(.97 * var(--zfade,1)));opacity:0;transition:opacity .2s}
.zoomer.on{opacity:1}
.zstage{position:absolute;inset:0;display:grid;place-items:center;touch-action:none;overflow:hidden;cursor:zoom-in}
.zoomer.zoomed .zstage{cursor:grab}
#zcard{width:min(94vw,calc(88vh * .8));transform-origin:center;perspective:1000px} /* perspective here: #zcard carries the zoom transform, which flattened the one on #zstage (2 Nov 2026) */
#zcard .cf{width:100%;max-width:none;margin:0}
.zx{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(237,228,207,.5);background:rgba(26,22,18,.7);color:#EDE4CF;font-size:18px;cursor:pointer;z-index:2}
.zhint{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));text-align:center;font-family:var(--type);font-size:13px;color:rgba(237,228,207,.6);margin:0;pointer-events:none;transition:opacity .2s}
.zoomer.zoomed .zhint{opacity:0}
body.zopen{overflow:hidden}
html.ztrial #stage2{cursor:zoom-in}
.zoomer.zoomed .cf .sheen,.zoomer.zoomed .cf .holo,.zoomer.zoomed .cf .glare,.zoomer.zoomed .cf .pf,.zoomer.zoomed .cf .ps,.zoomer.zoomed .cf .ps2,.zoomer.zoomed .cf .pg{opacity:0;transition:opacity .2s}
.srow small .ph{white-space:nowrap}
/* Card view, tightened (29 Oct 2026): header rows closer, slimmer Prev and Next, finish row closer, card size unchanged. */
#sView #backView{padding:6px 0 2px}
#sView .vctx{margin:0;line-height:1.15}
#sView #viewCount{margin:2px 0 8px}
#sView .nav{margin-top:8px}
#sView .nav button{padding:5px 12px}
#sView .slots4{margin-top:8px}

/* Incoming Flash traffic (30 Oct 2026, slimmed the same day): one line on home, a calendar sheet on tap */
.fxline{display:flex;align-items:center;gap:10px;width:100%;margin:6px 0 4px;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(90deg,rgba(217,169,62,.08),transparent 60%);color:var(--ink);font-family:var(--type);font-size:14px;cursor:pointer;text-align:left}
.fxline .ft{flex:none;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;color:#1B1A17;background:#EFE3C4;padding:2px 7px;transform:rotate(-2deg)}
.fxline .fw{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fxline .fw b{font-family:var(--display);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.fxline .fa{color:var(--mute);font-size:18px;line-height:1}
.tile .fxnext{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fxcal{list-style:none;padding:0 !important;margin:8px 0 14px}
.fxcal li{display:grid;grid-template-columns:7.6em minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dotted currentColor;border-bottom-color:rgba(0,0,0,.25)}
.fxcal .fd{font-family:var(--type);font-size:13px;white-space:nowrap}
.fxcal b{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:15px;min-width:0}
.fxcal .fu{font-family:var(--type);font-size:12px;opacity:.75;white-space:nowrap}
.fxcal li.next b{color:#A8392E}

/* Today's files tidy up (30 Oct 2026): the coming up list of slim lines, and the gold Flash row in the final week. */
.cup{margin:2px 0 10px}
.cup:not(:has(.cupln)){display:none}
.cup .cupln{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-bottom:1px solid rgba(201,188,158,.22);padding:11px 2px;color:#d8cdb6;font-family:var(--type);font-size:14px;text-align:left;line-height:1.2}
.cup #flashNext .cupln,.cup>div:first-child:empty+div .cupln{border-top:1px solid rgba(201,188,158,.22)}
.cup button.cupln{cursor:pointer}
.cupln .tg{flex:none;width:84px;text-align:center;font-family:var(--display);font-weight:700;letter-spacing:.1em;font-size:11px;padding:3px 0;border-radius:2px}
.cupln .tg.fl{background:#EDE4CF;color:#1a1612}
.cupln .tg.ic{border:1.5px solid #8a97ad;color:#a9b6cc;padding:2px 0}
.cupln .cw{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cupln b{font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px;color:#EDE4CF}
.cupln .r{flex:none;margin-left:auto;color:#8f8573;font-size:13px}
.slotbtn.flashsoon{border-color:#e3c25e;background:linear-gradient(90deg,rgba(227,194,94,.10),rgba(227,194,94,0));cursor:pointer}
.slotbtn.flashsoon b{color:#e3c25e}
.slotbtn.flashsoon::after{content:attr(data-tag);color:#e3c25e}
/* Coming up lines as slim boxes (30 Oct 2026): same height as before, framed like buttons. */
.cup{margin:6px 0 12px}
.cup .cupln{border:1px solid #7a6b56;border-radius:3px;padding:9px 12px;margin:8px 0;background:rgba(255,248,234,.02)}
.cup #flashNext .cupln,.cup>div:first-child:empty+div .cupln{border-top:1px solid #7a6b56}
.cup #flashNext .cupln{background:linear-gradient(90deg,rgba(227,194,94,.09),rgba(227,194,94,0) 65%)}
.cup .cupln.icpsoon{border:1.5px dashed #5e6f8c;background:none}
.cup .cupln .r{font-size:14px}
.cup button.cupln:active{transform:translateY(1px)}
.cup .cupln.icpsoon{border:2px dashed #5e6f8c;padding:8px 11px} /* same width as the envelope rows, so the dashes match (30 Oct 2026) */
.slotbtn span.ph{display:inline;padding:0;white-space:nowrap;font:inherit;color:inherit}
/* The cards rise out of the envelope's V (30 Oct 2026): the opening runs from the top edge down to the
   point where the side flaps meet, so the clip follows that V and the inside of the envelope darkens
   once the flap is open. */
.big .cardsclip{bottom:0;height:340%;clip-path:polygon(0 0,100% 0,100% 70.588%,85.714% 70.588%,50% 89.118%,14.286% 70.588%,0 70.588%)}
.big .cardsclip .cardsout{transform:translate(-50%,-30%)}
.big.go .cardsclip .cardsout{transform:translate(-50%,-186%)}
.big .env::before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 63%);background:linear-gradient(180deg,rgba(40,28,14,.42),rgba(40,28,14,.12));opacity:0;transition:opacity .6s .4s;z-index:1;pointer-events:none}
.big.go .env::before{opacity:1}
.cup .cupln{align-items:baseline} /* tag text and the line share one baseline, so they read level (30 Oct 2026) */
.cup .cupln.icpsoon .r{font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:#8a97ad} /* same lettering as OPENED and SEALED (30 Oct 2026) */
/* Top Secret serial (31 Oct 2026): it sat on the frame's inner rule, which struck through it. It now sits
   between that rule and the card on a small pale label, readable over the holographic frame. */
.cf.f-topsecret .serial{left:50%;right:auto;transform:translateX(-50%);bottom:2.3cqw;height:3.4cqw;padding:0 1.8cqw;font-size:2.5cqw;line-height:1;background:rgba(246,248,251,.9);border-radius:.6cqw;box-shadow:0 0 0 1px rgba(40,44,50,.25)}

/* ============ The foil (31 Oct 2026): the Pocket system, built in the holo lab ============
   Silver, Gold, and Top Secret cards carry foil on the border (the frame and the cream bands above and below the
   photo; the photo box, 3.2% in and 11.6% to 88.3% down on every card, stays matte), a texture per finish, and a
   glare that moves against the tilt. The light drifts on its own; in the full screen view a finger turns the card
   in 3D (.rock), and a card rocks on its own as it lands face up in an envelope. Copper and Flash are untouched. */
:root{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='7.2' fill='%23ffd3e0' opacity='.4'/%3E%3Cpath d='M30 18 L32.4 27.6 L42 30 L32.4 32.4 L30 42 L27.6 32.4 L18 30 L27.6 27.6 Z' fill='%23fff'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='4.8' fill='%23cfe8ff' opacity='.4'/%3E%3Cpath d='M30 22 L31.6 28.4 L38 30 L31.6 31.6 L30 38 L28.4 31.6 L22 30 L28.4 28.4 Z' fill='%23fff6d6'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='3.0' fill='%23fff6c4' opacity='.4'/%3E%3Cpath d='M30 25 L31.0 29.0 L35 30 L31.0 31.0 L30 35 L29.0 31.0 L25 30 L29.0 29.0 Z' fill='%23ffffff'/%3E%3C/svg%3E");--star2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='5.4' fill='%23e6d4ff' opacity='.4'/%3E%3Cpath d='M30 21 L31.8 28.2 L39 30 L31.8 31.8 L30 39 L28.2 31.8 L21 30 L28.2 28.2 Z' fill='%23ffffff'/%3E%3C/svg%3E");--glint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='3.0' fill='%239fc4ff' opacity='.4'/%3E%3Cpath d='M30 25 L31.0 29.0 L35 30 L31.0 31.0 L30 35 L29.0 31.0 L25 30 L29.0 29.0 Z' fill='%23eaf2ff'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='2.4' fill='%23b9d4ff' opacity='.4'/%3E%3Cpath d='M30 26 L30.8 29.2 L34 30 L30.8 30.8 L30 34 L29.2 30.8 L26 30 L29.2 29.2 Z' fill='%23ffffff'/%3E%3C/svg%3E")}
.cf.f-silver .sheen,.cf.f-gold .sheen,.cf.f-topsecret .sheen{display:none}
.cf.f-gold .frame::after{display:none}
.cf .pf,.cf .ps,.cf .ps2,.cf .pg{position:absolute;inset:0;pointer-events:none;z-index:2}
.cf .pf{-webkit-mask:linear-gradient(#000 0 0),linear-gradient(#000 0 0) center/93.6% 76.7% no-repeat;-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0),linear-gradient(#000 0 0) center/93.6% 76.7% no-repeat;mask-composite:exclude}
.cf .pf{background:var(--streaks);background-size:260% 260%;background-position:calc(50% + var(--tx,0) * 45%) calc(50% + var(--ty,0) * 45%);mix-blend-mode:multiply;opacity:.95}
.cf .pf::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0%,transparent calc(var(--gx,50%) - 18%),rgba(255,255,255,.55) calc(var(--gx,50%) - 3%),rgba(255,255,255,.85) var(--gx,50%),rgba(255,255,255,.55) calc(var(--gx,50%) + 3%),transparent calc(var(--gx,50%) + 18%));mix-blend-mode:screen}
.cf.f-silver{--streaks:repeating-linear-gradient(118deg,#dfe7f0 0,#aebfd6 6%,#f3f6fa 11%,#c9b8d8 16%,#dfe7f0 22%)}
.cf.f-gold{--streaks:repeating-linear-gradient(118deg,#f7e3a8 0,#e2a93a 6%,#fff3c9 11%,#f2b56a 16%,#f7e3a8 22%)}
.cf.f-topsecret{--streaks:repeating-linear-gradient(118deg,#ffd6e0 0,#fff2c4 4%,#d4f7dc 8%,#cfe6ff 12%,#e6d4ff 16%,#ffd6e0 20%)}
.cf .ps,.cf .ps2{mix-blend-mode:screen;opacity:1}
.cf .ps{-webkit-mask:var(--winA),linear-gradient(#000 0 0) center/93.6% 76.7% no-repeat;-webkit-mask-composite:source-out;mask:var(--winA),linear-gradient(#000 0 0) center/93.6% 76.7% no-repeat;mask-composite:subtract}
.cf .ps2{-webkit-mask:var(--winB),linear-gradient(#000 0 0) center/93.6% 76.7% no-repeat;-webkit-mask-composite:source-out;mask:var(--winB),linear-gradient(#000 0 0) center/93.6% 76.7% no-repeat;mask-composite:subtract}
/* Silver: brushed metal lit by a narrow streak, and a few cool glints */
.cf.f-silver .ps{background:repeating-linear-gradient(0deg,rgba(255,255,255,.3) 0 1px,transparent 1px 3px);opacity:.75;--winA:linear-gradient(115deg,transparent calc(var(--gx,50%) - 14%),#000 calc(var(--gx,50%) - 2%),#000 calc(var(--gx,50%) + 2%),transparent calc(var(--gx,50%) + 14%))}
.cf.f-silver .ps2{background-image:var(--glint);background-size:96px 96px,131px 131px;background-position:11px 7px,53px 61px;opacity:.9;--winB:radial-gradient(circle at var(--sx,50%) var(--sy,50%),#000 0,rgba(0,0,0,.5) 10%,transparent 26%)}
/* Gold: fine glitter inside a broad warm window, two layers so it sparkles */
.cf.f-gold .ps{background:radial-gradient(circle,#fff8dc 0 .7px,rgba(255,215,120,.9) 1px,transparent 1.5px) 0 0/7px 7px,radial-gradient(circle,#ffe9a8 0 .6px,transparent 1.2px) 3px 4px/9px 9px;--winA:radial-gradient(ellipse 60% 50% at var(--sx,50%) var(--sy,50%),#000 0,rgba(0,0,0,.55) 30%,transparent 62%)}
.cf.f-gold .ps2{background:radial-gradient(circle,#fff 0 .8px,rgba(255,200,90,.9) 1.1px,transparent 1.7px) 2px 1px/11px 11px,radial-gradient(circle,#fff3c4 0 .6px,transparent 1.2px) 6px 7px/13px 13px;--winB:radial-gradient(ellipse 50% 42% at var(--sx2,50%) var(--sy2,50%),#000 0,rgba(0,0,0,.5) 28%,transparent 58%)}
/* Top Secret: the stars, with tinted halos, and tiny prismatic dots between them */
.cf.f-topsecret .ps{background-image:var(--star);background-size:52px 52px,74px 74px,38px 38px;background-position:3px 5px,27px 39px,9px 2px;--winA:radial-gradient(circle at var(--sx,50%) var(--sy,50%),#000 0,rgba(0,0,0,.65) 16%,transparent 38%)}
.cf.f-topsecret .ps2{background:var(--star2),radial-gradient(circle,#ffd3e0 0 .7px,transparent 1.3px) 0 0/13px 13px,radial-gradient(circle,#cfe8ff 0 .7px,transparent 1.3px) 5px 7px/17px 17px,radial-gradient(circle,#fff6c4 0 .6px,transparent 1.2px) 9px 3px/11px 11px;background-size:64px 64px,13px 13px,17px 17px,11px 11px;background-position:31px 25px,0 0,5px 7px,9px 3px;--winB:radial-gradient(circle at var(--sx2,50%) var(--sy2,50%),#000 0,rgba(0,0,0,.6) 16%,transparent 40%)}
.cf.f-topsecret .frame::before{border:2px solid transparent;border-image:conic-gradient(from calc(var(--tx,0) * 200deg + var(--ty,0) * 120deg + 20deg),#ff7a7a,#ffe27a,#8dffb5,#7ac8ff,#d38bff,#ff7ad1,#ff7a7a) 1;box-shadow:none}
/* glare per finish */
.cf .pg{background:radial-gradient(ellipse var(--gw,55%) var(--gh,45%) at var(--gx2,50%) var(--gy2,50%),var(--gc,rgba(255,255,255,.55)),var(--gc2,rgba(255,255,255,.18)) 35%,transparent 70%);mix-blend-mode:screen}
.cf.f-silver .pg{--gw:38%;--gh:34%;--gc:rgba(235,242,255,.5);--gc2:rgba(235,242,255,.12)}
.cf.f-gold .pg{--gw:64%;--gh:52%;--gc:rgba(255,238,190,.6);--gc2:rgba(255,225,150,.2)}
.cf.f-topsecret .pg{--gw:62%;--gh:50%;--gc:rgba(255,255,255,.7);--gc2:rgba(255,255,255,.22)}
/* the frame catches the edge light as the light moves */
.cf.f-silver .frame,.cf.f-gold .frame,.cf.f-topsecret .frame{background-size:220% 220%;background-position:calc(50% - var(--tx,0) * 40%) calc(50% - var(--ty,0) * 40%)}
.cf.f-topsecret .frame::after{background-size:220% 220%;background-position:calc(50% + var(--tx,0) * 40%) calc(50% + var(--ty,0) * 40%);opacity:1}
/* the 3D turn: under a finger in the full screen view, and the reveal rock */
.cf.rock{transform:rotateX(calc(var(--ry,0) * 1deg)) rotateY(calc(var(--rx,0) * 1deg));transform-style:preserve-3d;will-change:transform}
.cf.rock.rest{transition:transform 1.15s cubic-bezier(.22,1.25,.36,1)}
#zstage,#flip .frontf{perspective:900px}
.zoomer .zhint{transition:opacity .2s}
@media (prefers-reduced-motion:reduce){.cf.rock{transform:none}}

/* Living Cards (31 Oct 2026): iPhone Safari draws a playing video on its own layer, so blend modes over it are
   ignored and the multiply foil turned into a solid wash that hid the card's text. Over a film the foil uses plain
   see-through layers instead: a light tint, a soft glint, the textures, and a gentler glare. */
.cf.lv .pf{mix-blend-mode:normal;opacity:.22}
.cf.lv .pf::after{mix-blend-mode:normal;opacity:.35}
.cf.lv .ps,.cf.lv .ps2{mix-blend-mode:normal;opacity:.85}
.cf.lv.f-silver .ps{opacity:.45}
.cf.lv .pg{mix-blend-mode:normal;opacity:.45}
.setline{font-family:var(--type);font-size:14px;color:#a8c48a;text-align:center;margin:-8px 0 14px}.setline:empty{display:none}
.promostamp.pinstamp svg{width:70%;height:70%}

/* several honors at once (1 Nov 2026): side by side, slamming down one after another, a line each below */
.honors{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 auto 4px;min-height:130px}
.hon{animation:promoslam .6s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d,0s)}
.hon.hm{width:130px;height:130px;color:#D9A93E}
.hon.hp{width:78px;height:78px}
.hon svg{width:100%;height:100%;display:block}
.honlist{list-style:none;padding:0;margin:10px 0 4px;text-align:left}
.honlist li{display:flex;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid rgba(201,188,158,.25)}
.honlist b{font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:15px;color:#EDE4CF}
.honlist span{font-family:var(--type);font-size:14px;color:#cbbf9f;white-space:nowrap}

/* ============ Card finishes: Edge and Glow (2 Nov 2026, Card Design doc) ============
   Every tier wears the same slim metal edge, so every card is the same size and the card never shrinks as rarity
   climbs. The tier shows in the metal and in the light the card throws onto the desk. Light on the card face is
   white only, so the photo stays true. Gold and Top Secret carry gold leaf flecks in the paper (platinum on Top
   Secret), masked under the printed ink; Top Secret adds silver mirroring on the photo's edges, a point of light
   running around the edge, and its TOP SECRET stamp with the serial in the photo's top left corner. This block
   replaces the older frames, mats, corner brackets, badge, frame serial, and the Pocket foil. Flash is untouched. */
@property --run{syntax:'<angle>';inherits:false;initial-value:0deg}
.cf:not(.flash) .frame{padding:1.3cqw!important;border-radius:2cqw!important;background-size:100% 100%!important;background-position:0 0!important}
.cf:not(.flash) .card{border-radius:1cqw;box-shadow:none!important;outline:0!important}
.cf:not(.flash) .frame::before,.cf:not(.flash) .frame::after{content:""!important;position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:none;border:0!important;border-image:none!important;box-shadow:none!important;-webkit-mask:none;mask:none;padding:0;opacity:1;display:block!important;mix-blend-mode:normal;animation:none;z-index:0}
.cf .corner,.cf .serial,.cf .badge{display:none!important}
/* Copper: matte, no light. The darkest value on the desk. */
.cf.f-copper .frame{background:linear-gradient(140deg,#6e3b1d,#9a5c33 38%,#7f4726 62%,#5f321a)!important;box-shadow:0 14px 34px rgba(0,0,0,.7)!important}
/* Silver: brushed pewter, a mid value, a soft fixed gloss and a cool haze. */
.cf.f-silver .frame{background:linear-gradient(140deg,#5f656d,#9aa0a8 36%,#7a8088 54%,#a3a9b1 70%,#5c626a)!important;box-shadow:0 0 5cqw rgba(210,218,230,.2),0 14px 34px rgba(0,0,0,.7)!important}
.cf.f-silver .frame::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px)!important;box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.25)!important}
/* Gold: polished, a warm glow that slowly breathes, and a sweep of light across the metal. */
.cf.f-gold .frame{background:linear-gradient(140deg,#8a6110,#e2bf55 28%,#b38a26 46%,#f1d97c 62%,#946a12 86%,#c49d36)!important;box-shadow:0 0 9cqw rgba(232,190,80,.38),0 0 2cqw rgba(255,215,120,.35),0 14px 34px rgba(0,0,0,.7)!important;animation:edBreathe 4s ease-in-out infinite}
.cf.f-gold .frame::after{background:linear-gradient(var(--ang,120deg),transparent 35%,rgba(255,250,225,.8) 50%,transparent 65%)!important;background-size:260% 260%!important;background-position:var(--sx,50%) var(--sy,50%)!important;mix-blend-mode:soft-light}
@keyframes edBreathe{50%{box-shadow:0 0 12cqw rgba(232,190,80,.5),0 0 3cqw rgba(255,215,120,.45),0 14px 34px rgba(0,0,0,.7)}}
/* Top Secret: holographic platinum, the brightest, color in the edge only, and a point of light running round it. */
.cf.f-topsecret .frame{background:linear-gradient(140deg,#9aa2ae,#eef2f7 20%,#c5ccd6 34%,#f8fafc 48%,#b3bbc6 62%,#e9edf3 76%,#9aa2ae)!important;box-shadow:0 0 10cqw hsl(calc(200 + var(--tx,0) * 120) 90% 72% / .42),0 0 2.4cqw hsl(calc(200 + var(--tx,0) * 120) 90% 82% / .45),0 14px 34px rgba(0,0,0,.7)!important}
.cf.f-topsecret .frame::after,.cf.f-topsecret .frame::before{padding:1.3cqw;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;mask-composite:exclude!important}
.cf.f-topsecret .frame::after{background:linear-gradient(var(--ang,120deg),#ff8a8a,#ffe08a,#8affc0,#8ac2ff,#d98aff,#ff8a8a)!important;background-size:300% 300%!important;background-position:var(--sx,50%) var(--sy,50%)!important;mix-blend-mode:color;opacity:.75}
.cf.f-topsecret .frame::before{z-index:3;background:conic-gradient(from var(--run),transparent 0deg,transparent 300deg,rgba(255,255,255,.95) 340deg,transparent 360deg)!important;filter:blur(.3cqw);animation:edRun 3.2s linear infinite!important}
@keyframes edRun{to{--run:360deg}}
/* the white light on the card face */
.cf:not(.flash):not(.f-copper) .sheen{display:block!important;position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:screen;background:linear-gradient(var(--ang,120deg),transparent 38%,rgba(255,255,255,.16) 47%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.16) 53%,transparent 62%)!important;background-size:260% 260%!important;background-position:var(--sx,50%) var(--sy,50%)!important;opacity:.85}
.cf.f-silver .sheen{opacity:.45;background-position:35% 35%!important}
.cf.f-topsecret .sheen{opacity:1}
.cf.f-copper .sheen{display:none!important}
/* gold leaf flecks: the paper bands only (the photo box stays matte), under the printed ink */
.cf .bands{position:absolute;inset:0;pointer-events:none;z-index:1;-webkit-mask:linear-gradient(#000 0 0),linear-gradient(#000 0 0) center/93.6% 76.7% no-repeat;-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0),linear-gradient(#000 0 0) center/93.6% 76.7% no-repeat;mask-composite:exclude}
.cf .paper{position:absolute;inset:0;opacity:0;transition:opacity .4s;-webkit-mask:var(--pm) 0 0/100% 100%;mask:var(--pm) 0 0/100% 100%}
.cf.pm .paper{opacity:1}
.cf.nopm .paper{-webkit-mask:none;mask:none}
.cf .fk0,.cf .fk1{position:absolute;inset:0;background-size:100% 100%}
.cf.f-gold .fk0{background-image:var(--fkG0);mix-blend-mode:multiply;opacity:.8}
.cf.f-gold .fk1{background-image:var(--fkG1);mix-blend-mode:color-dodge}
.cf.f-topsecret .fk0{background-image:var(--fkT0);mix-blend-mode:multiply;opacity:.7}
.cf.f-topsecret .fk1{background-image:var(--fkT1);mix-blend-mode:color-dodge}
.cf .fk1{-webkit-mask-image:radial-gradient(ellipse 55% 45% at var(--sx,50%) var(--sy,50%),#000,rgba(0,0,0,.3) 55%,transparent 82%);mask-image:radial-gradient(ellipse 55% 45% at var(--sx,50%) var(--sy,50%),#000,rgba(0,0,0,.3) 55%,transparent 82%)}
.cf.f-topsecret .fk1::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--ang,120deg),#ff8a8a,#ffe08a,#8affc0,#8ac2ff,#d98aff,#ff8a8a);background-size:300% 300%;background-position:var(--sx,50%) var(--sy,50%);-webkit-mask-image:var(--fkT1);mask-image:var(--fkT1);-webkit-mask-size:100% 100%;mask-size:100% 100%;mix-blend-mode:color}
/* Top Secret: silver mirroring, the blue metallic sheen old silver prints show at their edges. Edges only. */
.cf .mir{position:absolute;left:3.2%;top:11.6%;width:93.6%;height:76.7%;pointer-events:none;z-index:2;mix-blend-mode:screen;
  background:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 58%,rgba(170,200,255,.55) 82%,rgba(230,215,255,.8) 100%);
  -webkit-mask-image:radial-gradient(circle at var(--sx,50%) var(--sy,50%),#000 0,rgba(0,0,0,.35) 35%,transparent 70%);mask-image:radial-gradient(circle at var(--sx,50%) var(--sy,50%),#000 0,rgba(0,0,0,.35) 35%,transparent 70%)}
/* Top Secret: one red rubber stamp in the photo's top left corner, TOP SECRET over the worldwide serial */
.cf .tsst{position:absolute;z-index:4;left:6%;top:14.2%;display:flex;flex-direction:column;align-items:flex-start;gap:.6cqw;color:#b3241a;transform:rotate(-6deg);transform-origin:left top;pointer-events:none}
.cf .tsc{font:700 3.6cqw/1.1 var(--display);letter-spacing:.1em;text-transform:uppercase;border:.6cqw solid currentColor;border-radius:.6cqw;padding:.3cqw 1.3cqw;background:rgba(240,232,214,.82)}
.cf .tsn{font:400 3.4cqw/1 var(--type);letter-spacing:.14em;padding:.4cqw 1cqw;background:rgba(240,232,214,.82);border-radius:.4cqw}
/* Living Cards: iPhone Safari ignores blend modes over a playing video, so the flecks and sheen go plain there */
.cf.lv .fk0{mix-blend-mode:normal;opacity:.45}
.cf.lv .fk1{mix-blend-mode:normal;opacity:.85}
.cf.lv .fk1::after{mix-blend-mode:normal;opacity:.4}
.cf.lv .sheen,.cf.lv .mir{mix-blend-mode:normal;opacity:.35}
/* Living Cards (2 Nov 2026): the general sheen rule above outranked the line before, so a Gold Living Card ran the full
   white sheen straight over the film (plain white on iPhone, which ignores blend modes over video). This one wins: the
   light stays on the paper border and only a faint fifth of it crosses the film window. */
.cf.lv:not(.flash):not(.f-copper) .sheen{mix-blend-mode:normal;opacity:.6;-webkit-mask:linear-gradient(#000 0 0),linear-gradient(rgba(0,0,0,.8) 0 0) center/92.9% 76.4% no-repeat;-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0),linear-gradient(rgba(0,0,0,.8) 0 0) center/92.9% 76.4% no-repeat;mask-composite:exclude}
.zoomer.zoomed .cf .fk1,.zoomer.zoomed .cf .mir{opacity:0;transition:opacity .2s}
@media (prefers-reduced-motion:reduce){.cf.f-gold .frame,.cf.f-topsecret .frame::before{animation:none!important}}

/* Trademark mark after the DECLASS title (10 Nov 2026, for the USPTO specimen). Never the registered mark until registered. */
.tm{font-size:.3em;vertical-align:super;line-height:0;letter-spacing:0;margin-left:.05em;font-weight:500}
/* Landing (9 Nov 2026): the ™ hangs off the word instead of counting toward its width, and the trailing letter
   spacing is balanced, so DECLASS sits truly centered over its subtitle. The subtitle is larger to read. */
.landname{position:relative;display:table;margin-left:auto;margin-right:auto;padding-left:.06em}
.landname .tm{position:absolute;left:100%;top:.12em;margin-left:-.02em;vertical-align:baseline;line-height:1}
#sLanding .landtag{font-size:17px}
.wordmark .tm{font-size:.42em}
/* On a computer screen the whole landing (title, envelope, Open your starter pack, and the company footer) fits in one
   window without scrolling (10 Nov 2026, for the USPTO specimen). Phones are unchanged. */
@media (min-width:900px) and (max-height:1000px){#sLanding{zoom:.92}}
@media (min-width:900px) and (max-height:880px){#sLanding{zoom:.8}}
@media (min-width:900px) and (max-height:770px){#sLanding{zoom:.72}}
@media (min-width:900px) and (max-height:690px){#sLanding{zoom:.66}}