/* Clues' styles, out of index.html for the page budget (hub-cache), as
   quiz.js is. Loaded by a link in the head and precached in sw.js. */
/* Clues: a room. A screen bolted to the wall, a lamp over a felt table
   seen at an angle, and cards with a thickness and a shadow. The screen's
   green and the felt are their own colours, not the theme's, because they
   are things in the room. The textures are SVG noise as data: images
   (img-src allows data:), so nothing is fetched. */
/* HQ. One-point perspective: the back wall is the middle of the box, the
   ceiling, side walls and floor are trapezoids clipped to meet it, and the
   floor's tiles are tilted away. --side is how deep the side walls look,
   --fl how tall the floor is. */
.cl-home{--side:30px;--ceil:34px;--fl:170px;display:grid;justify-items:center;position:relative;overflow:hidden;border-radius:16px;margin:0 -4px;
  padding:var(--ceil) var(--side) 34px;background:#16130f;box-shadow:inset 0 0 0 1px #2a241d}
.cl-layer{position:absolute;pointer-events:none}
.cl-ceil{inset:0 0 auto;height:var(--ceil);clip-path:polygon(0 0,100% 0,calc(100% - var(--side)) 100%,var(--side) 100%);
  background:linear-gradient(90deg,transparent 30%,rgba(255,240,210,.9) 30% 70%,transparent 70%) 50% 55%/100% 3px no-repeat,linear-gradient(#0b0a08,#211c16)}
.cl-ceil::before{content:"";position:absolute;left:12%;width:16%;top:30%;height:6px;background:repeating-linear-gradient(90deg,#3a332a 0 2px,#16130f 2px 4px);box-shadow:calc(var(--side) * 0 + 250px) 0 0 0 #2a241d}
.cl-ceil::after{content:"";position:absolute;left:30%;right:30%;top:58%;height:30px;background:radial-gradient(ellipse at top,rgba(255,236,200,.35),transparent 70%)}
.cl-wl,.cl-wr{top:0;bottom:0;width:var(--side);background:repeating-linear-gradient(180deg,#1d1914 0 38px,#16120e 38px 40px),#1a1612}
.cl-wl::after,.cl-wr::after{content:"";position:absolute;bottom:calc(var(--fl) - 40px);width:70%;height:110px;background:repeating-linear-gradient(180deg,#3d4448 0 34px,#1d2124 34px 36px);box-shadow:inset 0 0 0 1px #121517}
.cl-wl::after{left:10%}.cl-wr::after{right:10%}
.cl-wl{left:0;clip-path:polygon(0 0,100% var(--ceil),100% calc(100% - var(--fl)),0 calc(100% - var(--fl) + 70px));box-shadow:inset -10px 0 20px rgba(0,0,0,.5);filter:brightness(.75)}
.cl-wr{right:0;clip-path:polygon(0 var(--ceil),100% 0,100% calc(100% - var(--fl) + 70px),0 calc(100% - var(--fl)));filter:brightness(.75)}
.cl-floor{left:0;right:0;bottom:0;height:var(--fl);overflow:hidden;clip-path:polygon(var(--side) 0,calc(100% - var(--side)) 0,100% 70px,100% 100%,0 100%,0 70px);
  background:linear-gradient(#0e0c0a,#241d16)}
.cl-floor::before{content:"";position:absolute;left:-60%;right:-60%;top:0;height:200%;transform:perspective(260px) rotateX(62deg);transform-origin:50% 0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px),linear-gradient(#2b231b,#3a2e22)}
.cl-floor::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.65),transparent 40%),radial-gradient(ellipse 60% 50% at 50% 60%,rgba(255,200,120,.14),transparent 70%)}
.cl-home>.cl-timeline,.cl-home>.cl-mount,.cl-home>.cl-desk{position:relative;z-index:1}
/* The back wall's own light, and the brass sconces at its edges. */
.cl-lamp{inset:var(--ceil) var(--side) var(--fl);box-shadow:inset 0 -8px 0 #0e0b08,inset 0 -9px 0 #3a2e22;background:radial-gradient(circle,rgba(110,230,170,.10) 1px,transparent 1.6px) 0 0/7px 7px,radial-gradient(ellipse 30% 40% at 0% 30%,rgba(255,200,120,.14),transparent 70%),radial-gradient(ellipse 30% 40% at 100% 30%,rgba(255,200,120,.14),transparent 70%),repeating-linear-gradient(90deg,#1b1713 0 46px,#17130f 46px 48px)}
.cl-lamp::before,.cl-lamp::after{content:"";position:absolute;top:24%;width:7px;height:20px;border-radius:2px 2px 6px 6px;background:linear-gradient(#ffe2a8,#c98d3a);box-shadow:0 0 16px 6px rgba(255,200,120,.35)}
.cl-lamp::before{left:3px}.cl-lamp::after{right:3px}
.cl-mount{width:100%;max-width:420px;perspective:900px;padding:4px 0 0}
/* The fortnight, a strip along the wall above the screen. */
/* The Bible timeline: a dark strip on the wall, a line through the middle,
   names above and below in turn. */
.cl-timeline{position:relative;width:92%;max-width:400px;height:54px;margin-top:2px;border-radius:4px;background:#050807;border:2px solid #121614;
  box-shadow:0 6px 12px rgba(0,0,0,.6),inset 0 0 14px rgba(110,230,170,.08);font-family:ui-monospace,Menlo,Consolas,monospace;color:#7ee8b0;box-sizing:border-box}
.cl-tl-line{position:absolute;left:4%;right:4%;top:50%;height:1px;background:rgba(110,230,170,.55);box-shadow:0 0 4px rgba(110,230,170,.5)}
.cl-tl-mark{position:absolute;top:50%;width:0;line-height:1;display:flex;flex-direction:column;align-items:center;white-space:nowrap}
.cl-tl-dot{position:absolute;top:50%;width:5px;height:5px;margin:-2px 0 0 -2.5px;border-radius:50%;background:#a6f5cb;box-shadow:0 0 5px #7ee8b0}
.cl-tl-mark b{font-weight:400;font-size:7.5px;letter-spacing:.04em;line-height:1}
.cl-tl-mark span{font-size:6.5px;opacity:.65;line-height:1.2}
.cl-tl-mark.high{transform:translateY(calc(-100% - 5px))}
.cl-tl-mark.low{transform:translateY(6px)}
/* The screen, compact enough that the desk shows on a phone. */
.cl-scr-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:9px;letter-spacing:.16em;opacity:.85}
.cl-agency{flex:1;text-align:center;white-space:nowrap}
.cl-class{font-size:8px;letter-spacing:.2em;color:#ff8a6a;border:1px solid rgba(255,138,106,.6);padding:1px 5px;text-shadow:0 0 6px rgba(255,138,106,.6)}
.cl-readout{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.cl-readout div,.cl-panel{border:1px solid rgba(110,230,170,.25);border-radius:3px;padding:4px 5px;min-width:0;background:rgba(110,230,170,.035)}
.cl-readout b{display:block;font-size:16px;font-weight:400;text-shadow:0 0 10px rgba(110,230,170,.6);font-variant-numeric:tabular-nums}
.cl-readout span,.cl-plab{display:block;font-size:7.5px;letter-spacing:.12em;opacity:.7;white-space:nowrap}
.cl-plab{margin-bottom:3px}
.cl-mid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.cl-kv{display:flex;justify-content:space-between;align-items:baseline;gap:4px;font-size:8px;letter-spacing:.08em;padding:1.5px 0;border-bottom:1px dashed rgba(110,230,170,.15)}
.cl-kv span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-kv b{font-size:12px;font-weight:400;text-shadow:0 0 8px rgba(110,230,170,.5);font-variant-numeric:tabular-nums}
.cl-bars{display:flex;align-items:flex-end;gap:3px;height:34px;border-bottom:1px solid rgba(110,230,170,.3);padding-bottom:1px}
.cl-bars i{flex:1;max-width:16px;background:linear-gradient(#a6f5cb,#4fbf86);border-radius:1px 1px 0 0;box-shadow:0 0 6px rgba(110,230,170,.5)}
.cl-bars i.miss{background:#e0755a;height:5px;box-shadow:0 0 6px rgba(224,117,90,.6)}
.cl-dist{display:flex;gap:3px;height:34px;align-items:stretch}
.cl-dist div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:1px;font-size:6.5px;opacity:.9;min-width:0}
.cl-dist em{font-style:normal;font-size:8px}
.cl-dist i{width:100%;min-height:1px;background:rgba(110,230,170,.75);box-shadow:0 0 6px rgba(110,230,170,.4)}
.cl-foot{display:grid;gap:1px}
.cl-foot p{margin:0;font-size:8.5px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-wanted{color:#ffb39e;text-shadow:0 0 6px rgba(255,138,106,.5)}
.cl-logl{opacity:.75}.cl-logl.miss{color:#ff9a80}
.cl-verdict{font-size:9.5px!important;letter-spacing:.05em;text-shadow:0 0 8px rgba(110,230,170,.5);margin-top:2px!important}
.cl-verdict::after{content:"_";animation:clBlink 1s steps(1) infinite}
.cl-screen{position:relative;transform:rotateX(5deg);transform-origin:50% 0;border-radius:10px;background:radial-gradient(ellipse at 50% 40%,#06150e,#020604 85%);
  border:8px solid #121614;box-shadow:0 0 0 1px #2a302d,0 1px 0 1px #3a423e inset,0 26px 40px -10px rgba(0,0,0,.85),0 0 70px rgba(110,230,170,.14),inset 0 0 60px rgba(110,230,170,.10);
  padding:7px;font-family:ui-monospace,Menlo,Consolas,monospace;color:#7ee8b0;overflow:hidden;display:grid;gap:5px}
.cl-screen::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.08),transparent 38%);pointer-events:none;z-index:2}
.cl-screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55));pointer-events:none;animation:clFlicker 6s infinite}
@keyframes clFlicker{0%,96%,100%{opacity:1}97%{opacity:.7}98%{opacity:1}99%{opacity:.85}}
.cl-mount::before{content:"";position:absolute;left:62%;bottom:-40px;width:3px;height:44px;background:#0b0c0b;border-radius:2px;z-index:-1}
.cl-mount{position:relative}
.cl-mount::after{content:"";display:block;width:30%;height:10px;margin:-2px auto 0;background:linear-gradient(#1a1e1c,#0b0d0c);border-radius:0 0 6px 6px;box-shadow:0 10px 18px rgba(0,0,0,.6)}
.cl-rec::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#e0755a;box-shadow:0 0 6px #e0755a;margin-right:5px;animation:clBlink 1.4s infinite}
@keyframes clBlink{50%{opacity:.2}}
.cl-stamp{position:absolute;left:50%;top:auto;bottom:19%;transform:translate(-50%,0) rotate(-14deg) scale(1);z-index:4;padding:6px 14px;border:3px double #2f6b4f;color:#2f6b4f;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;letter-spacing:.18em;font-weight:700;border-radius:4px;opacity:.85;mix-blend-mode:multiply;animation:clStamp .28s cubic-bezier(.2,1.6,.4,1) both}
.cl-stamp.miss{border-color:#a8321f;color:#a8321f}
@keyframes clStamp{from{transform:translate(-50%,0) rotate(-14deg) scale(2.2);opacity:0}}
.cl-card.dealt{animation:clDealIn .45s cubic-bezier(.2,.8,.3,1)}
@keyframes clDealIn{from{transform:translate(-40%,-30%) rotateX(9deg) rotateZ(-18deg);opacity:0}}
/* The desk: a top tilted away with a felt inlay, a front with two
   drawers, two legs, and its shadow on the floor. */
.cl-desk{width:100%;max-width:420px;margin-top:18px;perspective:640px;display:grid;justify-items:center}
.cl-deck{width:100%;box-sizing:border-box;transform:rotateX(46deg);transform-origin:50% 100%;border-radius:6px;padding:20px 22px 16px;display:flex;align-items:center;justify-content:center;gap:26px;position:relative;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 50% 30%,#2f6a4b,#17392a 65%,#0d2118);
  border:14px solid #6a3e24;border-image:linear-gradient(#8a5532,#5a3420) 1;box-shadow:inset 0 0 0 2px #2a170d,inset 0 10px 34px rgba(0,0,0,.55)}
.cl-desk-front{width:calc(100% - 2px);height:34px;margin-top:-1px;position:relative;display:flex;justify-content:space-around;align-items:center;
  background:linear-gradient(#5a3420,#3f2414);box-shadow:inset 0 2px 0 #7a4a2e,inset 0 -3px 6px rgba(0,0,0,.5),0 18px 26px rgba(0,0,0,.75)}
.cl-desk-front i{width:34%;height:20px;border:1px solid #2a170d;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  background:radial-gradient(circle,#d9b36a 0 2.5px,#6a4a1c 3px,transparent 3.5px) 50% 50%/10px 10px no-repeat,linear-gradient(#4f2e1b,#3a2213)}
.cl-desk-front::before,.cl-desk-front::after{content:"";position:absolute;top:100%;width:12px;height:30px;background:linear-gradient(90deg,#2a170d,#4a2a18,#2a170d)}
.cl-desk-front::before{left:6px}.cl-desk-front::after{right:6px}
.cl-folder{width:58px;height:74px;transform:rotate(-8deg);background:linear-gradient(160deg,#e3c98f,#c9a868);border-radius:2px 8px 2px 2px;box-shadow:0 6px 10px rgba(0,0,0,.5);
  font:700 7px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;color:#a8321f;display:grid;place-items:center;text-align:center;padding:4px}
.cl-mug{position:absolute;left:14px;bottom:12px;width:18px;height:20px;border-radius:2px 2px 5px 5px;background:linear-gradient(90deg,#c9c3b6,#f1ece2 40%,#a9a296);box-shadow:4px 0 0 -1px transparent,0 6px 8px rgba(0,0,0,.5)}
.cl-mug::after{content:"";position:absolute;right:-6px;top:4px;width:6px;height:9px;border:2px solid #d6d0c4;border-left:none;border-radius:0 5px 5px 0}
.cl-glass{position:absolute;right:20px;bottom:12px;width:22px;height:22px;border-radius:50%;border:3px solid #b08a3e;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.35),rgba(180,220,255,.08) 60%);transform:rotate(-30deg)}
.cl-glass::after{content:"";position:absolute;left:50%;top:100%;width:4px;height:16px;margin-left:-2px;background:#3a2213;border-radius:2px}
.cl-banker{position:absolute;right:16px;top:10px;width:46px;height:18px;border-radius:50% 50% 6px 6px / 90% 90% 6px 6px;background:linear-gradient(#2f7a52,#18452e);
  box-shadow:0 0 0 1px #0d2118,0 16px 24px rgba(255,230,150,.35)}
.cl-banker::after{content:"";position:absolute;left:4px;right:4px;bottom:-3px;height:3px;border-radius:2px;background:#fff1c4;box-shadow:0 0 12px 4px rgba(255,230,150,.6)}
.cl-stack{position:relative;width:62px;height:86px;transform:rotateX(-30deg);transform-origin:50% 100%}
.cl-stack[role=button]{cursor:pointer}
.cl-stack:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.cl-stack i{position:absolute;inset:0;border-radius:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),linear-gradient(160deg,#fbf6e9,#e9dfc6);border:1px solid #cdbd96;font-style:normal;display:grid;place-items:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;color:#231d14;box-shadow:0 1px 0 #bfae86}
.cl-stack i:nth-child(1){transform:translate(3px,8px) rotate(4deg);box-shadow:0 14px 16px rgba(0,0,0,.55)}
.cl-stack i:nth-child(2){transform:translate(-2px,6px) rotate(-3deg)}
.cl-stack i:nth-child(3){transform:translate(1px,4px) rotate(2deg)}
.cl-stack i:nth-child(4){transform:translate(-1px,2px) rotate(-1deg)}
.cl-stack i:last-child{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),linear-gradient(160deg,#fff9ec,#efe5cc);border-color:var(--gold)}
#qzScrim.cl-table .card.qz-sheet{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse 80% 60% at 50% 30%,#2f6a4b,#17392a 60%,#0b1d15);
  border:12px solid #5a3420;box-shadow:inset 0 0 0 2px #2a170d,inset 0 12px 50px rgba(0,0,0,.6),0 2px 0 #7a4a2e,0 40px 60px rgba(0,0,0,.8)}
#qzScrim.cl-table #qzSheetTitle{color:#cfe3d6;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.cl-pips{display:flex;gap:6px;margin:0 0 14px}
.cl-pips i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3d2a12,#1c1408);box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.cl-pips i.on{background:radial-gradient(circle at 35% 30%,#ffe7a8,#c9a24a 55%,#7a5a1c);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.cl-stage{perspective:1100px;padding:4px 6px 14px}
.cl-card{position:relative;aspect-ratio:5/7;max-height:46vh;margin:0 auto;transform-style:preserve-3d;transform:rotateX(9deg);transform-origin:50% 100%;transition:transform .7s cubic-bezier(.3,.7,.3,1)}
.cl-card.flip{transform:rotateX(9deg) rotateY(180deg)}
.cl-card::after{content:"";position:absolute;left:6%;right:6%;bottom:-14px;height:28px;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);transform:translateZ(-2px);filter:blur(2px)}
.cl-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),linear-gradient(165deg,#fffaf0 0%,#f3ecdb 45%,#e6dbc0 100%);color:#231d14;
  box-shadow:0 1px 0 #d6c6a0,0 2px 0 #cbb98f,0 3px 0 #bfac80,0 4px 0 #b39f73,0 22px 30px -6px rgba(0,0,0,.65);padding:18px;display:flex;flex-direction:column;border:1px solid #d8c9a3}
.cl-face::before{content:"";position:absolute;inset:7px;border:1px solid var(--gold);border-radius:9px;pointer-events:none}
.cl-face::after{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(115deg,rgba(255,255,255,.45),transparent 30%,transparent 70%,rgba(0,0,0,.06));pointer-events:none}
.cl-corner{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;line-height:1;color:var(--gold)}
.cl-corner.br{position:absolute;right:18px;bottom:14px;transform:rotate(180deg)}
.cl-who{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:30px;text-align:center;margin:2px 0 12px}
.cl-clues{margin:0;padding:0 4px 0 22px;display:grid;gap:9px;font-size:14.5px;line-height:1.4;overflow:auto;min-height:0;position:relative;z-index:1}
.cl-clues li{color:#6f6553}
.cl-clues li:last-child{color:#231d14;font-size:16px}
.cl-clues li::marker{color:var(--gold)}
.cl-back{transform:rotateY(180deg);justify-content:center;align-items:center;text-align:center;gap:8px}
.cl-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,9vw,44px);line-height:1.05;max-width:100%;overflow-wrap:anywhere}
.cl-took{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9a7a34}
.cl-acts-row .btn-s{flex:1;padding:13px;border-radius:999px;background:linear-gradient(#24382e,#15241d);color:#e9e4d6;border:1px solid #3a5446;box-shadow:0 3px 0 #0a120e,0 6px 10px rgba(0,0,0,.4)}
.cl-acts-row .btn-s.go{background:linear-gradient(#e2c27a,#b88f3e);color:#231d14;border-color:#8a6a2a;box-shadow:0 3px 0 #6a501e,0 6px 10px rgba(0,0,0,.4)}
#clStart{margin-top:22px;background:linear-gradient(#e2c27a,#b88f3e);color:#231d14;border:1px solid #8a6a2a;box-shadow:0 3px 0 #6a501e,0 8px 14px rgba(0,0,0,.5)}
#clStart:disabled{opacity:.45}
.cl-acts-row .btn-s:active{transform:translateY(2px);box-shadow:0 1px 0 #0a120e}
.cl-acts-row .btn-s:disabled{opacity:.4}
@media (prefers-reduced-motion:reduce){.cl-card{transition:none}.cl-card.dealt{animation:none}.cl-rec::before,.cl-screen::after,.cl-verdict::after,.cl-clues li.typing::after{animation:none}}
.cl-ctl{display:grid;justify-items:center;gap:6px;padding:10px 0 24px}
.cl-ctl-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.cl-modes{margin:0}
.cl-deal{min-width:120px;padding:11px 24px;border-radius:999px;background:linear-gradient(#e2c27a,#b88f3e);color:#231d14;border:1px solid #8a6a2a;box-shadow:0 3px 0 #6a501e,0 8px 14px rgba(0,0,0,.5)}
.cl-deal:disabled{opacity:.45}
.cl-answer{position:relative;margin:4px 0 12px}
.cl-answer input{width:100%;box-sizing:border-box;font:16px/1.2 inherit;font-family:inherit;padding:14px 16px 14px 46px;border-radius:14px;border:1px solid rgba(203,164,92,.45);
  background:rgba(5,10,8,.75);color:#f3ecdb;box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 4px rgba(203,164,92,.06);outline:none;-webkit-appearance:none;appearance:none}
.cl-answer input:focus{border-color:var(--gold);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 4px rgba(203,164,92,.18)}
.cl-answer-ico{position:absolute;left:14px;top:13px;font:600 12px ui-monospace,Menlo,Consolas,monospace;color:var(--gold);line-height:20px}
.cl-answer-ico.lens{width:11px;height:11px;border:2px solid var(--gold);border-radius:50%;top:16px;left:16px}
.cl-answer-ico.lens::after{content:"";position:absolute;width:2px;height:7px;background:var(--gold);right:-4px;bottom:-6px;transform:rotate(-45deg)}
.cl-hits{display:grid;gap:4px;margin-top:6px}
.cl-hit{text-align:left;font:inherit;padding:11px 14px;border-radius:10px;border:1px solid rgba(110,230,170,.2);background:rgba(10,24,18,.85);color:#e9e4d6;cursor:pointer}
.cl-hit:hover,.cl-hit:focus-visible{border-color:#7ee8b0;outline:none}
.cl-nohit{margin:4px 2px 0;font-size:12px;color:#9fb8aa}
.cl-wrongs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding-left:22px;position:relative;z-index:1}
.cl-wrongs s{font-size:12px;color:#a8321f;text-decoration-thickness:2px}
.cl-stamp.still{animation:none}
.cl-back .cl-stamp{animation-delay:.45s}
#clKinds .qz-chip.on,.cl-modes .qz-chip.on{background:var(--gold);color:#231d14;border-color:var(--gold)}
.cl-tablebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.cl-tablebar .cl-pips{margin:0}
.cl-timer{font:13px ui-monospace,Menlo,Consolas,monospace;color:#7ee8b0;background:#050807;border:1px solid #26332d;border-radius:4px;padding:2px 7px;text-shadow:0 0 6px rgba(110,230,170,.6);font-variant-numeric:tabular-nums}
.cl-scores{display:flex;gap:10px;margin-left:auto;font:10px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;color:#cfe3d6}
.cl-agent{opacity:.55}.cl-agent.up{opacity:1;color:#ffe7a8}
.cl-agent b{font-size:15px;font-weight:400}
.cl-caseno{position:absolute;top:16px;right:20px;font:9px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:#9a7a34}
.cl-back .cl-caseno{position:static}
.cl-clues li.typing::after{content:"▌";color:var(--gold);animation:clBlink .6s steps(1) infinite}
.cl-rno{font:11px ui-monospace,Menlo,Consolas,monospace;color:var(--grey)}
.cl-print{display:none}
@media print{
  body>*:not(#clPrint){display:none!important}
  .cl-print{display:block;color:#000;background:#fff;font-family:Georgia,serif}
  .cl-dossier{break-inside:avoid;page-break-inside:avoid;border:2px solid #000;padding:14mm 12mm;margin:0 0 8mm;min-height:120mm;position:relative}
  .cl-dhead{display:flex;justify-content:space-between;font:11pt ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;border-bottom:1px solid #000;padding-bottom:3mm}
  .cl-dclass{color:#a8321f;border:1px solid #a8321f;padding:0 2mm}
  .cl-dossier h3{font-style:italic;font-size:22pt;margin:6mm 0}
  .cl-dossier ol{font-size:13pt;line-height:1.5}
  .cl-dfold{border-top:1px dashed #000;margin-top:10mm;padding-top:1mm;font:8pt ui-monospace,Menlo,Consolas,monospace;color:#555;text-align:right}
  .cl-dans{font-size:20pt;transform:rotate(180deg);text-align:center;margin:6mm 0 0}
}
.cl-form .qz-sel{margin-bottom:4px}
.cl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.cl-racts{display:flex;gap:6px}

/* SATISFYING, 2026-10-20: "make sure the game has satisfying animations".
   Each effect is one-shot, set by what just happened and cleared on the next
   draw, and none of them runs under reduced motion. */
.cl-card.fx-wrong{animation:clShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes clShake{10%,90%{transform:rotateX(9deg) translateX(-2px)}20%,80%{transform:rotateX(9deg) translateX(4px)}30%,50%,70%{transform:rotateX(9deg) translateX(-7px)}40%,60%{transform:rotateX(9deg) translateX(7px)}}
.cl-card.fx-right .cl-face{box-shadow:0 0 0 2px #7ee8b0,0 0 34px 6px rgba(126,232,176,.55),0 22px 30px -6px rgba(0,0,0,.65);transition:box-shadow .3s}
.cl-card.fx-right,.cl-card.fx-lost{animation:clThump .5s ease-out .5s}
@keyframes clThump{0%{scale:1}30%{scale:.965}60%{scale:1.015}100%{scale:1}}
.cl-clues li.new{animation:clIn .45s cubic-bezier(.2,.8,.3,1)}
@keyframes clIn{from{opacity:0;transform:translateY(-8px)}}
.cl-pips i.pop{animation:clPop .4s cubic-bezier(.2,1.8,.4,1)}
@keyframes clPop{from{transform:scale(.2)}}
.cl-answer.bad input{animation:clBad .6s ease-out}
@keyframes clBad{0%{border-color:#e0755a;box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 6px rgba(224,117,90,.35)}100%{}}
.cl-wrongs s:last-child{animation:clIn .35s ease-out}
.cl-hit{transition:transform .12s,border-color .12s}
.cl-hit:active{transform:scale(.97)}
/* The rating, across the top of a turned card. */
.cl-rate{position:absolute;left:14px;right:14px;top:14px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;z-index:3}
.cl-rate-lab{flex-basis:100%;text-align:center;font:9px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:#9a7a34}
.cl-rate-b{font:11px/1 inherit;font-family:inherit;padding:7px 9px;border-radius:999px;border:1px solid #c9b98f;background:rgba(255,255,255,.5);color:#3a3022;cursor:pointer;transition:transform .12s,background .15s}
.cl-rate-b:active{transform:scale(.94)}
.cl-rate-b.on{background:#2f6b4f;border-color:#2f6b4f;color:#f3ecdb;animation:clPop .3s cubic-bezier(.2,1.8,.4,1)}
@media (prefers-reduced-motion:reduce){.cl-card.fx-wrong,.cl-card.fx-right,.cl-card.fx-lost,.cl-clues li.new,.cl-pips i.pop,.cl-answer.bad input,.cl-wrongs s:last-child,.cl-rate-b.on{animation:none}}
/* Sending a card back: a quiet flag on the table, a note box under the card. */
.cl-flag{margin-left:auto;font:11px/1 inherit;font-family:inherit;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,138,106,.45);background:rgba(10,16,13,.6);color:#ffb39e;cursor:pointer}
.cl-scores+.cl-flag,.cl-tablebar .cl-scores{margin-left:0}
.cl-report{margin:6px 0 12px;padding:12px;border-radius:12px;background:rgba(5,10,8,.75);border:1px solid rgba(255,138,106,.35);animation:clIn .3s ease-out}
.cl-report .qz-sel{width:100%;box-sizing:border-box}
.cl-sent{margin:0 0 10px;color:#cfe3d6}
.cl-row.held b{text-decoration:line-through;opacity:.6}
.cl-heldtag{margin-left:8px;font-size:11px;color:#e0755a;letter-spacing:.06em}
.cl-refs{position:absolute;left:18px;right:18px;bottom:12px;margin:0;font:8.5px/1.35 ui-monospace,Menlo,Consolas,monospace;color:#8a7a5a;text-align:center;z-index:2}
/* The riffle: the stack splits left and right, the halves interleave, and it
   squares up again. */
.cl-stack.riffle i:nth-child(odd){animation:clRiffL .62s cubic-bezier(.3,.7,.3,1)}
.cl-stack.riffle i:nth-child(even){animation:clRiffR .62s cubic-bezier(.3,.7,.3,1)}
.cl-stack.riffle i:last-child{animation:clRiffTop .62s cubic-bezier(.3,.7,.3,1)}
@keyframes clRiffL{30%{translate:-34px -6px;rotate:-14deg}60%{translate:-8px -12px;rotate:-4deg}}
@keyframes clRiffR{30%{translate:34px -6px;rotate:14deg}60%{translate:8px -14px;rotate:4deg}}
@keyframes clRiffTop{30%{translate:0 -22px;rotate:6deg}60%{translate:0 -8px;rotate:-3deg}}
.cl-mix{padding:10px 16px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.cl-stack.riffle i{animation:none}}
.cl-music-pick{display:block;width:100%;margin:4px 0 8px;font:inherit;color:var(--grey)}
.cl-songs{margin:10px 0;padding-left:22px;display:grid;gap:4px;font-size:14px;color:var(--grey);max-height:30vh;overflow:auto}