/* SLOTHORITY ($SLOTH) — production site */
:root{
  --lime:#CCFF00; --ink:#1b1712; --paper:#F2E6C4; --thermal:#FBF7EC;
  --stamp:#C8281E; --brass:#C9A24A; --brass-d:#8a6a22; --stone:#857a64; --sage:#a9b9a6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--sage);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit}

/* ---------- stage ---------- */
#viewport{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;left:0;top:0;width:1536px;height:864px;transform-origin:0 0}
#shake{position:absolute;left:0;top:0;width:1536px;height:864px}
#plate{position:absolute;left:-384px;top:-172.8px;width:2304px;height:1036.8px;overflow:hidden;
  background:url(assets/L0_bleed_plate_lqip.jpg) 0 0/100% 100% no-repeat}
#plate img{width:100%;height:100%;display:block;opacity:0;transition:opacity .3s ease}
#plate img.loaded{opacity:1}
#motes{opacity:.35}
@media (prefers-reduced-motion: reduce){ #motes{display:none} }
.full{position:absolute;left:0;top:0;width:1536px;height:864px;pointer-events:none}
.abs{position:absolute}

/* reveal gating */
.prop,#sloth,#pile{opacity:0;transition:opacity .5s ease}
.prop.in{opacity:1}
body.slothReady #sloth,body.slothReady #pile{opacity:1}

/* ---------- frieze ---------- */
#frieze{left:390px;top:24px;width:756px;height:101px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
#frieze h1{margin:0;font:700 62px/1 Cinzel,serif;letter-spacing:.14em;color:#8b806a;padding-left:.14em;
  text-shadow:0 1.5px 0 rgba(255,251,238,.9),0 -1px 0 rgba(55,45,30,.55)}
#frieze p{margin:0;font:600 12.5px/1 Cinzel,serif;letter-spacing:.32em;color:#8b806a;
  text-shadow:0 1px 0 rgba(255,251,238,.9),0 -1px 0 rgba(55,45,30,.4)}

/* ---------- court seal ---------- */
#seal{left:638px;top:153px;width:256px;height:256px}
#seal .ring{animation:spin 600s linear infinite;transform-origin:128px 128px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- queue board ---------- */
#board{left:46px;top:0;width:340px;height:163px;transform-origin:50% 0}
.boardInner{display:block;position:relative;width:100%;height:100%;transform-origin:50% 0}
#board img{width:100%;height:100%}
#board .chain{position:absolute;top:-400px;width:5px;height:404px;
  background:repeating-linear-gradient(#3b3530 0 7px,#8d8478 7px 9px,#3b3530 9px 16px)}
#screen{position:absolute;left:4.9%;top:42.1%;width:90%;height:48%;display:flex;flex-direction:column;justify-content:center;
  padding:0 12px;font-family:Doto,monospace;color:var(--lime);text-shadow:0 0 6px rgba(204,255,0,.75),0 0 1px #fff;
  transition:opacity .06s linear}
#screen.flick{opacity:.82}
#screen .big{font-weight:900;font-size:19px;letter-spacing:.02em;display:flex;justify-content:space-between;white-space:nowrap}
#screen .small{font-weight:700;font-size:9.5px;letter-spacing:0;opacity:.9;margin-top:6px;display:flex;justify-content:space-between;gap:8px;white-space:nowrap}
#screen .bar{height:5px;margin-top:6px;background:rgba(204,255,0,.15);display:none}
#screen .bar i{display:block;height:100%;width:0;background:var(--lime)}
#screen .verdict{display:none;margin-top:5px;font-weight:700;font-size:8.5px;letter-spacing:.06em;opacity:.9;white-space:nowrap}

/* ---------- evidence tags ---------- */
.tag{width:150px;height:205px;display:block;text-decoration:none;color:inherit}
.tag img{width:100%;height:100%;display:block}
.tag .string{position:absolute;left:92%;top:-300px;width:1.5px;height:306px;background:#6b5a3e}
.tag .txt{position:absolute;left:9%;width:56%;top:47%;height:44%;transform:rotate(6deg);transform-origin:50% 0;
  text-align:center;color:var(--ink);font:400 13px/1.15 'Gochi Hand',cursive;letter-spacing:-.02em;overflow:hidden}
.tag .txt b{display:block;font:700 10px/1.2 Cinzel,serif;letter-spacing:.08em;margin-bottom:2px;color:#6b5328}
#tagA{left:1206px;top:4px;transform:rotate(-4deg)}
#tagB{left:1366px;top:36px;transform:rotate(4deg)}
.tagInner{display:block;position:relative;width:100%;height:100%;transition:transform .25s ease}
#tagA:hover .tagInner,#tagB:hover .tagInner{transform:translateY(-4px) scale(1.04)}

/* ---------- transcript tape ---------- */
#tape{left:176px;top:246px;width:150px;height:420px;background:
  repeating-linear-gradient(transparent 0 17px,rgba(120,90,40,.10) 17px 18px),var(--paper);
  box-shadow:inset -6px 0 10px rgba(90,60,20,.18),2px 2px 0 rgba(27,23,18,.25);border:2px solid var(--ink);border-bottom:none;
  border-radius:3px 3px 0 0;padding:10px 9px 78px;overflow:hidden;scrollbar-width:none;
  -webkit-mask:linear-gradient(transparent 0,#000 18%,#000 100%);mask:linear-gradient(transparent 0,#000 18%,#000 100%)}
#tape::-webkit-scrollbar{display:none}
#tape p{margin:0 0 6px;font:400 10.5px/1.3 'Courier Prime',monospace;color:var(--ink)}
#tape p b{font-weight:700}
#funnel{left:205px;top:622px;width:72px;height:22px;background:var(--paper);border-left:2px solid var(--ink);border-right:2px solid var(--ink);
  clip-path:polygon(0 0,100% 0,82% 100%,18% 100%)}
#steno{left:178px;top:600px;width:150px;height:283px}

/* ---------- lectern + controls ---------- */
#lectern{left:1140px;top:515px;width:235px;height:335px}
#approve{position:absolute;left:1180px;top:509px;width:156px;height:62px;border-radius:50%;border:3px solid var(--ink);cursor:pointer;
  background:radial-gradient(ellipse at 50% 35%,#efff8a 0,var(--lime) 45%,#9fc400 100%);
  box-shadow:0 7px 0 #5f7400,0 7px 0 3px var(--ink),0 0 26px rgba(204,255,0,.55);
  font:900 21px/1 Cinzel,serif;letter-spacing:.08em;color:var(--ink);display:flex;align-items:center;justify-content:center;
  transform:rotate(-2deg);transition:box-shadow .2s ease,transform .08s ease,font-size .2s ease}
#approve:hover{box-shadow:0 7px 0 #5f7400,0 7px 0 3px var(--ink),0 0 40px rgba(204,255,0,.75)}
#approve:active{transform:rotate(-2deg) translateY(5px);box-shadow:0 2px 0 #5f7400,0 2px 0 3px var(--ink),0 0 26px rgba(204,255,0,.55)}
#approve.reviewing{font-size:15px;filter:saturate(.35) brightness(.92)}
#approve:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.plate{background:linear-gradient(180deg,#e7c66d,var(--brass) 45%,#a9842f);border:2px solid var(--ink);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,245,200,.7),inset 0 -2px 0 rgba(90,60,10,.35);color:#2a1f0c;text-align:center;cursor:pointer}
#fee{left:1186px;top:620px;width:144px;height:76px;padding-top:9px;text-decoration:none;display:block;transition:filter .2s,transform .12s}
#fee:hover{filter:brightness(1.12);transform:translateY(-1px)}
#fee b{display:block;font:700 12px/1 Cinzel,serif;letter-spacing:.1em}
#fee span{display:block;font:700 14px/1.15 'Courier Prime',monospace;margin-top:6px}
#case{left:1196px;top:707px;width:124px;height:30px;font:700 11.5px/26px 'Courier Prime',monospace;padding:0;white-space:nowrap;overflow:hidden}
#case:hover{filter:brightness(1.12)}
#hint{left:1012px;top:452px;width:150px;font:400 19px/1.05 'Gochi Hand',cursive;color:var(--ink);transform:rotate(-4deg);text-align:right}
#hint svg{position:absolute;right:-26px;top:22px}
#hint.hide{display:none}

/* ---------- thought bubble ---------- */
#bubbleWrap{left:0;top:0;width:1536px;height:864px;pointer-events:none}
#bubble{position:absolute;left:902px;top:196px;width:252px;min-height:84px;padding:16px 18px;background:#FFFBEE;border:3px solid var(--ink);
  border-radius:52% 48% 50% 50%/56% 46% 54% 44%;font:400 25px/1.05 'Gochi Hand',cursive;color:var(--ink);
  display:flex;align-items:center;justify-content:center;text-align:center}
#bubbleText{display:inline-block;transition:opacity .1s linear}
#bubbleText.fade{opacity:0}
.dot{position:absolute;background:#FFFBEE;border:3px solid var(--ink);border-radius:50%}

/* ---------- character ---------- */
#sloth{position:absolute;left:0;top:0;width:1536px;height:864px;transform-origin:768px 758px}
#arm{transform-origin:695.88px 486.65px}
#lids{opacity:0}
#pile{left:546px;top:579px;width:118px;height:198.2px;transform-origin:50% 100%}
#pile img{width:100%;height:100%;display:block}
#slabs{position:absolute;left:0;top:0;width:100%;height:100%}
#slabs .slab{position:absolute;display:block;height:auto}

/* ---------- receipt ---------- */
#receipt{position:absolute;left:1176px;top:296px;width:176px;height:240px;background:var(--thermal);border:2px solid var(--ink);
  padding:12px 12px;font:400 11.5px/1.35 'Courier Prime',monospace;color:var(--ink);display:none;
  transform:translateY(250px);
  clip-path:polygon(0 6px,6% 0,12% 6px,18% 0,24% 6px,30% 0,36% 6px,42% 0,48% 6px,54% 0,60% 6px,66% 0,72% 6px,78% 0,84% 6px,90% 0,96% 6px,100% 0,100% 100%,0 100%)}
#receipt h3{margin:4px 0 6px;font:700 13px/1.1 'Courier Prime',monospace}
#receipt .st{display:inline-block;margin:4px 0;padding:1px 6px;border:2px solid var(--stamp);color:var(--stamp);font:900 13px/1.2 Cinzel,serif;transform:rotate(-4deg)}
#receipt .obj{margin-top:4px;color:#7a2a22}
#receipt .share{display:block;margin-top:10px;padding:6px 4px;border:2px solid var(--ink);background:var(--lime);text-align:center;
  font:700 11px/1.15 'Courier Prime',monospace;color:var(--ink);text-decoration:none;cursor:pointer}
#receipt .share:hover{filter:brightness(1.06)}

/* ---------- FX ---------- */
#dust{left:470px;top:500px;width:280px;height:155px;display:none;transform-origin:50% 50%}
.sheet{position:absolute;left:573px;top:545px;width:64px;height:69px;display:none;transform-origin:50% 50%;pointer-events:none}
#stamp{position:absolute;left:552px;top:362px;width:470px;height:148px;display:none;transform:rotate(-9deg);transform-origin:50% 50%;
  border:7px solid var(--stamp);outline:3px solid var(--stamp);outline-offset:5px;border-radius:10px;
  color:var(--stamp);font:900 96px/134px Cinzel,serif;letter-spacing:.06em;text-align:center;mix-blend-mode:multiply;opacity:.9;
  filter:url(#rough)}

/* ---------- objections ---------- */
.objfloat{position:absolute;left:1204px;top:470px;font:400 20px/1 'Gochi Hand',cursive;color:var(--ink);
  pointer-events:none;white-space:nowrap;text-shadow:0 1px 0 rgba(255,251,238,.9)}

/* ---------- toasts ---------- */
#toasts{position:absolute;left:0;top:0;width:1130px;height:800px;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:flex-end;gap:8px;pointer-events:none;padding-right:0}
.toast{padding:7px 12px;background:rgba(251,247,236,.94);border:2px solid var(--ink);border-radius:4px;
  font:700 12px/1.2 'Courier Prime',monospace;color:var(--ink);box-shadow:2px 2px 0 rgba(27,23,18,.25);
  opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;max-width:420px;text-align:right}

/* ---------- viewport HUD (fixed) ---------- */
#legal{position:absolute;left:350px;width:770px;bottom:4px;text-align:center;
  font:400 10.5px/1.3 'Courier Prime',monospace;color:rgba(27,23,18,.72);
  background:rgba(251,247,236,.6);border-radius:4px;padding:3px 8px;pointer-events:none}
#sound{position:fixed;right:18px;bottom:12px;padding:6px 12px;border:2px solid var(--ink);border-radius:999px;
  background:rgba(251,247,236,.85);font:700 12px/1 'Courier Prime',monospace;color:var(--ink);cursor:pointer;z-index:41}
#sound:focus-visible{outline:3px solid var(--lime);outline-offset:3px}