/* 扭蛋机 (docs/design/gashapon.md). Seen straight on, like every object on the home rail. Matte warm-white plastics,
   a pale-sage acrylic chamber; satin aluminium only on the crank; the one brick-red is the crank's grip.
   Depth comes from the chamber's side walls (the acrylic's thickness) and three layers of capsules tinted by it. */

/* ——— The machine: 1u = 1px at 300 wide, 440 tall ——— */
.gc{--u:1px;--tint:185 196 177;--turn:0deg;--mode:0;--sign:0;position:relative;width:calc(300*var(--u));height:calc(440*var(--u));flex:none}
.gc *{box-sizing:border-box}
.gc-shadow{position:absolute;left:4%;right:4%;bottom:calc(-8*var(--u));height:calc(30*var(--u));border-radius:50%;background:radial-gradient(closest-side,#3d3f2a33,#3d3f2a00);filter:blur(calc(4*var(--u)))}
.gc-lid,.gc-base{position:absolute;left:0;right:0;z-index:3;background:linear-gradient(172deg,#fbf9f3,var(--shell-warm-hi) 30%,var(--shell-warm) 78%,#e4dfd1);box-shadow:inset 0 calc(1.5*var(--u)) 0 #fff,inset calc(1.2*var(--u)) 0 0 #fffc,inset calc(-1.5*var(--u)) 0 0 #d6d0c0,inset 0 calc(-2*var(--u)) calc(3*var(--u)) #3d3f2a1a,0 calc(2*var(--u)) calc(3*var(--u)) #3d3f2a1f}
.gc-lid{top:0;height:calc(40*var(--u));border-radius:calc(22*var(--u)) calc(22*var(--u)) calc(9*var(--u)) calc(9*var(--u))}
.gc-base{top:calc(262*var(--u));bottom:calc(10*var(--u));border-radius:calc(9*var(--u)) calc(9*var(--u)) calc(26*var(--u)) calc(26*var(--u))}
.gc-foot{position:absolute;bottom:0;width:calc(46*var(--u));height:calc(14*var(--u));border-radius:0 0 calc(7*var(--u)) calc(7*var(--u));background:linear-gradient(#cfc8b6,#bdb5a1);z-index:2}
.gc-foot.l{left:calc(34*var(--u))}.gc-foot.r{right:calc(34*var(--u))}
/* The chamber */
.gc-chamber{position:absolute;left:calc(12*var(--u));right:calc(12*var(--u));top:calc(34*var(--u));height:calc(234*var(--u));overflow:hidden;z-index:1;border-radius:calc(4*var(--u))}
.gc-wall{position:absolute;inset:0;background:linear-gradient(rgb(var(--tint) / .95),rgb(var(--tint) / .7) 60%,rgb(var(--tint) / .85)),linear-gradient(#e9ece6,#d6dbd2)}
.gc-table{position:absolute;left:4%;right:4%;bottom:calc(4*var(--u));height:calc(22*var(--u));border-radius:50%;background:radial-gradient(ellipse at 40% 30%,#f2f0ea,#d7d4cb 60%,#b9b6ac);box-shadow:0 calc(2*var(--u)) 0 #a9a69c}
.gc-layer{position:absolute;inset:0}
.gc-layer.l0{filter:saturate(.7) brightness(.86)}.gc-layer.l1{filter:saturate(.85) brightness(.94)}
.gc-fog{position:absolute;inset:0;background:rgb(var(--tint) / .22)}
.gc-glass{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#ffffff38,#fff0 22%,#fff0 70%,#ffffff1a),rgb(var(--tint) / .16);box-shadow:inset 0 calc(1.5*var(--u)) 0 #ffffffcc,inset 0 calc(-1.5*var(--u)) 0 #ffffff80}
.gc-side{position:absolute;top:0;bottom:0;width:calc(11*var(--u));background:linear-gradient(90deg,rgb(var(--tint) / .9),rgb(var(--tint) / .55));box-shadow:inset calc(1.2*var(--u)) 0 0 #ffffffb3}
.gc-side.l{left:0}.gc-side.r{right:0;transform:scaleX(-1)}
/* Controls on the base */
.gc-zod{position:absolute;z-index:4;left:calc(26*var(--u));top:calc(296*var(--u));width:calc(40*var(--u));height:calc(40*var(--u))}
.gc-zod i{position:absolute;font:normal calc(6*var(--u))/1 "Apple Symbols","Segoe UI Symbol",sans-serif;font-style:normal;color:#6b7263;translate:-50% -50%}
.gc-knob{position:absolute;inset:28%;border-radius:50%;rotate:calc(var(--sign) * 30deg);transition:rotate .18s var(--ease,ease);background:radial-gradient(circle at 40% 32%,#fbf9f3,#ece8dc 60%,#d8d2c2);box-shadow:0 calc(1.5*var(--u)) calc(2*var(--u)) #3d3f2a40,0 0 0 .5px #3d3f2a26,inset 0 .6px 0 #fff}
.gc-knob:after{content:'';position:absolute;left:50%;top:10%;width:calc(1.3*var(--u));height:32%;margin-left:calc(-.65*var(--u));border-radius:1px;background:#3d4239}
.gc-crank{position:absolute;z-index:4;left:calc(112*var(--u));top:calc(280*var(--u));width:calc(76*var(--u));height:calc(76*var(--u));border-radius:50%;background:repeating-conic-gradient(#3d3f2a0f 0 .8deg,#fff0 .8deg 1.6deg),radial-gradient(circle at 38% 32%,#f6f4ee,#e0ddd4 46%,#cac7bd 76%,#b8b5ab);box-shadow:0 calc(3*var(--u)) calc(5*var(--u)) #3d3f2a38,0 0 0 .6px #8f8b7c80,inset 0 .8px 0 #fff}
.gc-face{position:absolute;inset:15%;border-radius:50%;background:repeating-radial-gradient(circle,#fff0 0 1.2px,#3d3f2a08 1.2px 1.8px),radial-gradient(circle at 40% 34%,#f2f0ea,#d7d4cb 70%,#c3c0b6);box-shadow:inset 0 .6px 0 #fff,0 0 0 .5px #7d7b7459}
/* The bar turns with --turn; its highlight stays put (satin, lit from the upper left), so only the shape moves. */
.gc-bar{position:absolute;left:50%;top:50%;width:118%;height:19%;translate:-50% -50%;rotate:calc(var(--turn) - 18deg);border-radius:calc(6*var(--u));background:linear-gradient(90deg,#b9b6ad,#e9e7e1 30%,#f4f3ef 48%,#dcdad3 62%,#b4b1a8);box-shadow:0 calc(2.5*var(--u)) calc(4*var(--u)) #3d3f2a40,inset 0 .6px 0 #fff,0 0 0 .5px #8f8b7c99}
.gc-grip{position:absolute;right:-3%;top:50%;height:150%;aspect-ratio:1;translate:0 -50%;border-radius:50%;background:radial-gradient(circle at 40% 36%,#c65a43,#b34934 58%,#9e3d2b);box-shadow:0 calc(2.4*var(--u)) 0 #85321f,0 calc(4*var(--u)) calc(5*var(--u)) #3d3f2a59,inset 0 .6px 0 #ffffff2e}
.gc-hub{position:absolute;inset:41%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#f4f3ef,#c8c6bf 45%,#8d8b84 80%,#6f6d67);box-shadow:0 .5px 1px #0006}
.gc-chute{position:absolute;z-index:4;left:calc(104*var(--u));top:calc(366*var(--u));width:calc(92*var(--u));height:calc(44*var(--u));border-radius:calc(12*var(--u)) calc(12*var(--u)) calc(8*var(--u)) calc(8*var(--u));background:linear-gradient(#e1dccf,#f1ede3);box-shadow:inset 0 calc(1.2*var(--u)) calc(1.5*var(--u)) #3d3f2a33,0 .8px 0 #fffc}
.gc-chute:before{content:'';position:absolute;inset:calc(4*var(--u));border-radius:calc(9*var(--u)) calc(9*var(--u)) calc(5*var(--u)) calc(5*var(--u));background:linear-gradient(#1b1d19,#2c2f29 55%,#4a4d44 82%,#8b8a7d);box-shadow:inset 0 calc(3*var(--u)) calc(4*var(--u)) #000b}
.gc-drop{position:absolute;inset:calc(4*var(--u));overflow:hidden;border-radius:calc(9*var(--u)) calc(9*var(--u)) calc(5*var(--u)) calc(5*var(--u))}
.gc-flap{position:absolute;left:calc(7*var(--u));right:calc(7*var(--u));top:calc(5*var(--u));height:60%;transform-origin:50% 0;border-radius:calc(7*var(--u)) calc(7*var(--u)) calc(2*var(--u)) calc(2*var(--u));background:linear-gradient(rgb(var(--tint) / .55),rgb(var(--tint) / .7));box-shadow:inset 0 calc(.8*var(--u)) 0 #ffffff40,0 calc(1.2*var(--u)) 0 #ffffff26}
/* The slider: the thumb peeks out of the right edge; two marks say what the positions are. */
.gc-thumb{position:absolute;z-index:2;right:calc(-5*var(--u));top:calc(var(--mode) * 18 * var(--u) + 292 * var(--u));width:calc(12*var(--u));height:calc(26*var(--u));border-radius:calc(4*var(--u));transition:top .16s;background:repeating-linear-gradient(#fff0 0 calc(2*var(--u)),#3d3f2a1f calc(2*var(--u)) calc(3*var(--u))),linear-gradient(90deg,#f7f4ec,#dcd6c6);box-shadow:0 calc(1.5*var(--u)) calc(2*var(--u)) #3d3f2a38}
/* the slider's hit area: the thumb and the two marks (upper half = 签, lower half = 游戏) */
.gc-switch{position:absolute;z-index:6;right:calc(-10*var(--u));top:calc(282*var(--u));width:calc(34*var(--u));height:calc(56*var(--u))}
.gc-mark{position:absolute;z-index:4;right:calc(12*var(--u));width:calc(9*var(--u));height:calc(9*var(--u));fill:none;stroke:#8a8e82;stroke-width:1.1}
.gc-mark circle{fill:#8a8e82;stroke:none}
.gc-mark.sign{top:calc(290*var(--u))}.gc-mark.game{top:calc(322*var(--u))}
/* the third mark and the warm-pink chamber: only once the hidden door is open */
.gc-mark.ours{top:calc(344*var(--u));opacity:0;stroke:#b98a80;transition:opacity .6s}
.gc.is-couple .gc-mark.ours{opacity:1}
.gc.is-couple{--tint:228 200 192}
.gc.is-blooming .gc-chamber{animation:gc-bloom 1.3s ease-in-out}
@keyframes gc-bloom{0%{filter:none}26%{filter:brightness(1.22) saturate(.5)}100%{filter:none}}
.gc-word{position:absolute;z-index:4;left:calc(22*var(--u));bottom:calc(26*var(--u));font:600 calc(12*var(--u)) var(--font-wordmark);letter-spacing:-.04em;color:#5b6353}

/* ——— Capsules: a clear dome, the shaded opening of the cup with the folded slip in it, the matte cup ——— */
.gc-egg{--s:40px;--body:#efe9dc;--body-lo:#cfc6b2;--inner:#d8cfbc;position:absolute;width:var(--s);height:var(--s);border-radius:50%;transform:translate(-50%,-50%) rotate(var(--r,0deg));
  background:radial-gradient(circle at 34% 26%,#fffffff2,#f7f5ef66 34%,#e9e6dc40 62%,#c9c5b866 100%);
  box-shadow:inset 0 0 0 .6px #3d3f2a2e,inset calc(var(--s)*-.04) calc(var(--s)*-.05) calc(var(--s)*.1) #3d3f2a1f,0 calc(var(--s)*.07) calc(var(--s)*.1) #3d3f2a33}
.gc-in{position:absolute;left:3%;right:3%;top:40%;height:20%;border-radius:50%;background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--inner) 70%,#3d3f2a),var(--inner) 70%)}
.gc-in:before{content:'';position:absolute;left:38%;width:22%;bottom:40%;height:130%;opacity:.85;border-radius:1px;background:linear-gradient(#fdfbf5,#efe9da);box-shadow:0 0 0 .5px #3d3f2a26;transform:rotate(-6deg)}
.gc-out{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 36% 34%,color-mix(in srgb,var(--body) 70%,#fff),var(--body) 42%,var(--body-lo) 86%,color-mix(in srgb,var(--body-lo) 80%,#3d3f2a));
  -webkit-mask:radial-gradient(ellipse 47% 10% at 50% 50%,#0000 97%,#000 100%),linear-gradient(#0000 50%,#000 50%);-webkit-mask-composite:source-in;mask:radial-gradient(ellipse 47% 10% at 50% 50%,#0000 97%,#000 100%),linear-gradient(#0000 50%,#000 50%);mask-composite:intersect}
.gc-lip{position:absolute;left:3%;right:3%;top:40%;height:20%;border-radius:50%;border-bottom:calc(var(--s)*.018) solid #ffffffb3}
.gc-egg:after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 46% 30% at 38% 22%,#ffffff8c,#fff0 70%);pointer-events:none}
/* varieties */
.gc-egg.sage{--body:#b3bcab;--body-lo:#8a9581;--inner:#9da896}
.gc-egg.stone{--body:#d2cec2;--body-lo:#aca799;--inner:#bdb8aa}
.gc-egg.ink{--body:#555a52;--body-lo:#393d36;--inner:#4a4f47}.gc-egg.ink .gc-lip{border-bottom-color:#ffffff59}
.gc-egg.tint{background:radial-gradient(circle at 34% 26%,#f4f7f2f0,#c9d2c2aa 40%,#9fac98bb 100%)}
.gc-egg.clear .gc-out{background:radial-gradient(circle at 36% 34%,#ffffff99,#e9ece6aa 50%,#c9cfc4cc);opacity:.75}
.gc-egg.clear .gc-in{background:radial-gradient(ellipse at 50% 20%,#c9cfc466,#e3e7df55 70%)}.gc-egg.clear .gc-in:before{display:none}
.gc-gem{position:absolute;left:34%;top:34%;width:32%;height:32%;border-radius:calc(var(--s)*.03);transform:rotate(45deg);background:linear-gradient(135deg,#f6d77e,#e0a93c 55%,#b9812a);box-shadow:0 0 calc(var(--s)*.12) #f2c31866}
.gc-egg.mark .gc-out:after{content:'Fred.';position:absolute;left:0;right:0;bottom:22%;text-align:center;font:600 calc(var(--s)*.15) var(--font-wordmark);letter-spacing:-.04em;color:#4f564a}
.gc-egg.dots .gc-out{background:radial-gradient(circle,#4f564a 0 16%,#0000 20%) 0 0/calc(var(--s)*.12) calc(var(--s)*.12),radial-gradient(circle at 36% 34%,#fbf9f3,var(--body) 42%,var(--body-lo) 86%)}
.gc-egg.stripe .gc-out{background:repeating-linear-gradient(90deg,#0000 0 calc(var(--s)*.06),#8e9a8666 calc(var(--s)*.06) calc(var(--s)*.09)),radial-gradient(circle at 36% 34%,#fbf9f3,var(--body) 42%,var(--body-lo) 86%)}
/* easter egg: pearl — warm white with a thin-film sheen */
.gc-egg.pearl{background:radial-gradient(circle at 34% 26%,#fff,#f5f0f3aa 34%,#e6eef0aa 62%,#d9d3e0aa)}
.gc-egg.pearl .gc-out:after{content:'';position:absolute;inset:0;background:conic-gradient(from 200deg,#f3d9e2,#d8e6ef,#e3efd6,#f6e8cc,#f3d9e2);opacity:.4}
.gc-gem.star{border-radius:1px;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);transform:none}
/* the special egg: frosted glass with a warm lamp inside, breathing */
.gc-egg.frost{background:radial-gradient(circle at 50% 50%,#fff2d4,#f7e6c6 28%,#efeae0 60%,#dcd7cc);box-shadow:0 0 calc(var(--s)*.18) calc(var(--s)*.02) #f6d79a55,inset 0 0 0 .6px #3d3f2a1f}
.gc-egg.frost .gc-out{background:radial-gradient(circle at 50% 30%,#fbf3e2cc,#e9e3d6cc 70%);opacity:.75}.gc-egg.frost .gc-in{opacity:0}
.gc-core{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(closest-side,#fffaf0,#f6d18a 55%,#f6d18a00);filter:blur(calc(var(--s)*.03));animation:gc-breathe 3.2s ease-in-out infinite}
@keyframes gc-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.gc-core{animation:none}}

/* ——— Home rail and menu: the machine fills its slot, centred from its own middle ——— */
.collectible--gacha{background:none!important;display:grid;place-items:center;container-type:size;overflow:visible;filter:none}
.collectible--gacha .gc{--u:calc(min(100cqw / 300, 100cqh / 440) * 1.02);position:absolute;left:50%;top:50%;translate:-50% -50%}
.module-thumbnail-image .collectible--gacha .gc{--u:min(100cqw / 300, 100cqh / 440)}
/* the machine you are turning: the grip is what you hold */
.collection-stage .collectible--gacha .gc{pointer-events:auto}
.collection-slot.is-selected .collectible--gacha .gc{cursor:grab}

/* ——— Inside: the machine and the desk ——— */
[data-module="gacha"] .gcr{position:relative;max-width:1180px;margin:0 auto;padding:10px 0 60px;display:grid;grid-template-columns:auto minmax(0,620px);justify-content:center;align-items:center;gap:clamp(40px,6vw,90px);user-select:none}
[data-module="gacha"] .gcr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-module="gacha"] .gcr-machine .gc{--u:min(1.5px,calc((100svh - 220px) / 440))}
[data-module="gacha"] .gc-crank{cursor:grab;touch-action:none}[data-module="gacha"] .gc-crank:active{cursor:grabbing}
[data-module="gacha"] .gc-zod{cursor:pointer;touch-action:none}
[data-module="gacha"] .gc-switch{cursor:pointer}
[data-module="gacha"] .gcr-desk{position:relative;height:min(660px,calc(100svh - 240px));min-height:380px;border-radius:18px;background:linear-gradient(170deg,#f1eee6,#e9e5da);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #d9d4c6;overflow:hidden}
[data-module="gacha"] .gcr-papers,[data-module="gacha"] .gcr-shells,[data-module="gacha"] .gcr-eggs{position:absolute;inset:0}
[data-module="gacha"] .gcr-shells,[data-module="gacha"] .gcr-papers,[data-module="gacha"] .gcr-eggs{pointer-events:none}
[data-module="gacha"] .gcr-egg{pointer-events:auto}
[data-module="gacha"] .gcr-shells{z-index:40}
[data-module="gacha"] .gcr-papers>*{pointer-events:auto}
/* a capsule waiting on the desk; twisting turns it and opens the seam */
[data-module="gacha"] .gcr-egg{position:absolute;width:var(--size);height:var(--size);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);padding:0;min-height:0;border:0;background:none;cursor:grab;touch-action:none;z-index:50;rotate:var(--twist,0deg);transition:rotate .25s,left .6s cubic-bezier(.3,.8,.2,1),top .6s cubic-bezier(.3,.8,.2,1)}
[data-module="gacha"] .gcr-egg:active{cursor:grabbing;transition:none}
[data-module="gacha"] .gcr-egg .gc-out,[data-module="gacha"] .gcr-egg .gc-lip,[data-module="gacha"] .gcr-egg .gc-in{translate:0 calc(var(--open,0) * 9%);transition:translate .25s}
[data-module="gacha"] .gcr-egg:active .gc-out,[data-module="gacha"] .gcr-egg:active .gc-lip,[data-module="gacha"] .gcr-egg:active .gc-in{transition:none}
:is([data-module="gacha"] .gcr-egg,[data-module="gacha"] .gcr-shell,.gcr-ghost) .gc{position:absolute;inset:0;width:auto;height:auto}
.gcr-ghost{position:fixed;z-index:200;pointer-events:none}
/* the halves, lying in the corner */
[data-module="gacha"] .gcr-shell{position:absolute;width:var(--size);height:var(--size);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2)}
[data-module="gacha"] .gcr-half{position:absolute;left:0;width:100%;height:50%;overflow:hidden}
[data-module="gacha"] .gcr-half.top{top:0;transform:translate(-62%,34%) rotate(-150deg)}
[data-module="gacha"] .gcr-half.bottom{top:50%}
/* papers lie on the desk, the newest on top; older ones settle back */
[data-module="gacha"] .gcr-slip,[data-module="gacha"] .gcr-card,[data-module="gacha"] .gcr-folded{position:absolute;left:50%;top:44%;transform:translate(calc(-50% + var(--ox,0px)),calc(-50% + var(--oy,0px))) rotate(var(--tilt,0deg)) scale(var(--k,1));transition:filter .4s,box-shadow .4s}
[data-module="gacha"] .is-under{filter:brightness(.97)}
/* behind the hidden door: a jewellery box and a sealed letter. The box is a rounded solid built from thin slices,
   seen from in front and a little above; its lid turns on the back edge. */
[data-module="gacha"] .gcr-box,[data-module="gacha"] .gcr-letter{position:absolute;left:50%;transform:translate(calc(-50% + var(--ox,0px)),calc(-50% + var(--oy,0px))) rotate(var(--tilt,0deg));cursor:pointer}
[data-module="gacha"] .gcr-box{--b:230px;top:70%;width:var(--b);height:var(--b);filter:none}
/* the scene the box opens in: the room goes dark, rays turn behind it, a halo breathes, dust drifts */
[data-module="gacha"] .gcr-stage{position:fixed;inset:0;z-index:210;overflow:hidden;cursor:pointer;background:radial-gradient(circle at 50% 58%,#3b3e30f2,#1d1f17fa 70%);opacity:0;transition:opacity .9s}
[data-module="gacha"] .gcr-stage[hidden]{display:none}
[data-module="gacha"] .gcr-stage.is-on{opacity:1}
[data-module="gacha"] .gcr-stage .gcr-box{left:50%;top:64%;transform:translate(-50%,-50%);transition:none}
.gcr-rays,.gcr-halo{position:absolute;left:50%;top:56%;border-radius:50%;translate:-50% -50%;opacity:0;pointer-events:none}
.gcr-rays{width:170vmax;height:170vmax;background:repeating-conic-gradient(from 0deg,#ffe7b000 0deg,#ffe7b000 7deg,#ffe7b038 10deg,#fff4d64d 11.5deg,#ffe7b000 15deg,#ffe7b000 24deg);-webkit-mask:radial-gradient(circle,#000 0,#000a 12%,#0000 46%);mask:radial-gradient(circle,#000 0,#000a 12%,#0000 46%);transition:opacity 2s;animation:gcr-rays 70s linear infinite}
.gcr-halo{width:120vmin;height:120vmin;background:radial-gradient(circle,#fff2cc66 0,#ffdf9a2e 30%,#ffdf9a00 62%);transition:opacity 1.6s}
.is-lit>.gcr-rays{opacity:1}.is-lit>.gcr-halo{opacity:1;animation:gcr-halo 4.5s 1.6s ease-in-out infinite}
@keyframes gcr-rays{to{rotate:360deg}}
@keyframes gcr-halo{50%{scale:1.08;opacity:.75}}
.gcr-dust{position:absolute;inset:0;opacity:0;transition:opacity 1.5s 1s;pointer-events:none}
.is-lit>.gcr-dust{opacity:1}
.gcr-dust .jb-mote{animation:gcr-dust linear infinite}
@keyframes gcr-dust{0%{translate:0 0;scale:.2;opacity:0}20%{opacity:.95;scale:1}80%{opacity:.6}100%{translate:14px -26vh;scale:.3;opacity:0}}
.jb-mote{position:absolute;pointer-events:none;background:radial-gradient(circle,#fff 0,#ffe9b0 35%,#f2c97a 100%);filter:drop-shadow(0 0 4px #ffe2a0);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.jb{--cam:44deg;--h:calc(var(--b) * .2);--l:calc(var(--b) * .13);--r:calc(var(--b) * .113);--wall:#465242;--top:#55624f;--trim:#cdbf98;position:absolute;inset:0;perspective:1500px;perspective-origin:50% 20%}
.jb-body{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--cam))}
.jb-body *{position:absolute}
.jb-shadow{inset:-4px -2px -10px;border-radius:var(--r);background:#3d3f2a;opacity:.34;filter:blur(13px);transform:translateY(14px)}
.jb-base,.jb-lid{inset:0;transform-style:preserve-3d}
.jb-slice{inset:0;border-radius:var(--r);background-color:var(--wall)}
.jb-base>.jb-slice{transform:translateZ(calc(var(--h) * var(--t)))}
.jb-lid>.jb-slice{transform:translateZ(calc(var(--l) * var(--t)))}
.jb-lid>.jb-slice.trim{background:var(--trim)}
.jb-rim{inset:0;border-radius:var(--r);background:var(--top);transform:translateZ(var(--h));transform-style:preserve-3d}
.jb-pad{inset:7%;border-radius:calc(var(--r) * .62);background:radial-gradient(120% 110% at 45% 30%,#fffefb,#f6f3ec 55%,#e9e5da);box-shadow:inset 0 5px 7px -2px #3d3f2a4d,inset 0 0 0 .5px #3d3f2a33,inset 0 -2px 3px #ffffffb3;transform-style:preserve-3d}
.jb-chain{inset:0;width:100%;height:100%;overflow:visible}
/* the pearl and the stone stand up to face you; their shadows stay on the cushion */
.jb-cast{left:50%;top:74.5%;width:calc(var(--b) * .23);height:calc(var(--b) * .15);margin:calc(var(--b) * -.05) 0 0 calc(var(--b) * -.08);border-radius:50%;background:radial-gradient(closest-side,#3f3a2c 0,#3f3a2c99 45%,#3f3a2c00);filter:blur(3px)}
.jb-pearl{left:50%;top:70%;width:calc(var(--b) * .23);height:calc(var(--b) * .23);margin:calc(var(--b) * -.115) 0 0 calc(var(--b) * -.115);transform:translateZ(calc(var(--b) * .094)) rotateX(calc(var(--cam) * -1))}
.jb-pearl svg,.jb-gem svg{inset:0;width:100%;height:100%;overflow:visible}
.jb-gem{left:50%;top:42%;width:calc(var(--b) * .07);height:calc(var(--b) * .07);margin:calc(var(--b) * -.035) 0 0 calc(var(--b) * -.035);transform:translateZ(calc(var(--b) * .03)) rotateX(calc(var(--cam) * -1))}
/* shut, the necklace is out of sight (it would stand through the lid); it shows as the lid lifts */
.jb-pearl,.jb-gem,.jb-cast{opacity:0;transition:opacity .15s}
.is-open .jb-pearl,.is-open .jb-gem,.is-open .jb-cast{opacity:1;transition:opacity .5s .45s}
.is-open .jb-cast{opacity:.5}
.is-open .jb-pearl{animation:jb-rise 1.5s .45s cubic-bezier(.2,.9,.25,1.25) both}
@keyframes jb-rise{0%{transform:translateZ(calc(var(--b) * .03)) rotateX(calc(var(--cam) * -1)) scale(.55)}100%{transform:translateZ(calc(var(--b) * .094)) rotateX(calc(var(--cam) * -1)) scale(1)}}
/* light from inside: it flares as the lid lifts, then stays as a soft glow on the cushion */
.jb-light{left:50%;top:60%;width:calc(var(--b) * 1.5);height:calc(var(--b) * 1.5);margin:calc(var(--b) * -.75) 0 0 calc(var(--b) * -.75);border-radius:50%;background:radial-gradient(circle,#fffaf0 0,#fff3d6cc 18%,#ffe9bd55 40%,#ffe9bd00 68%);opacity:0;transform:translateZ(1px);pointer-events:none}
.is-open .jb-light{animation:jb-light 3.4s .5s cubic-bezier(.3,.7,.3,1) both}
@keyframes jb-light{0%{opacity:0;scale:.3}40%{opacity:1;scale:1.25}100%{opacity:.5;scale:.9}}
.jb-glint{opacity:0}
.is-open .jb-glint{animation:jb-glint 1.6s 2.2s ease-in-out both}
@keyframes jb-glint{0%{opacity:0;translate:-70px 0}40%{opacity:.85}100%{opacity:0;translate:70px 0}}
.jb-twinkle{opacity:0;transform-box:fill-box;transform-origin:center}
.is-open .jb-twinkle{animation:jb-twinkle 3.4s 1.3s ease-in-out infinite}
@keyframes jb-twinkle{0%,60%,100%{opacity:0;transform:scale(.3) rotate(0deg)}74%{opacity:1;transform:scale(1) rotate(25deg)}88%{opacity:0;transform:scale(.3) rotate(50deg)}}
.jb-lid{transform-origin:50% 0;transform:translateZ(calc(var(--h) + .6px)) rotateX(0deg);transition:transform .7s cubic-bezier(.4,0,.3,1)}
.is-open .jb-lid{transition:transform 2.3s cubic-bezier(.5,0,.15,1)}
.is-open .jb-lid{transform:translateZ(calc(var(--h) + .6px)) rotateX(109deg)}
.jb-top{inset:0;border-radius:var(--r);background:radial-gradient(90% 70% at 35% 20%,#ffffff38,#fff0 60%),linear-gradient(180deg,#0000 55%,#00000026),var(--top);transform:translateZ(var(--l));box-shadow:inset 0 0 0 1px #ffffff14}
/* inside the lid: the same rim, then plain satin */
.jb-lining{inset:0;border-radius:var(--r);background:var(--top);transform:translateZ(-.4px) rotateX(180deg);backface-visibility:hidden}
.jb-satin{inset:7%;border-radius:calc(var(--r) * .62);background:linear-gradient(180deg,#0000001f,#0000 22%),radial-gradient(130% 90% at 50% 105%,#fffdf7,#f3efe5 55%,#e3ded0);box-shadow:inset 0 0 0 .5px #3d3f2a33,inset 0 6px 10px -4px #3d3f2a40}
.jb-clasp{left:50%;bottom:0;width:calc(var(--b) * .13);height:calc(var(--b) * .056);margin-left:calc(var(--b) * -.065);border-radius:2.5px 2.5px 4px 4px;transform-origin:50% 100%;transform:rotateX(-90deg) translateZ(1.2px) translateY(calc(var(--b) * .035));background:linear-gradient(180deg,#f7f1df,#d8cba6 45%,#b9a97f 55%,#e6dcc0);box-shadow:0 0 0 .5px #6b5f3d80,0 1px 2px #0004}
/* the letter: the flap lifts and the sheet draws out, then it is read in 手记 */
[data-module="gacha"] .gcr-letter{--w:270px;top:46%;width:var(--w);height:calc(var(--w) * .667)}
.env{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 0}
.env-body{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(14deg)}
.env-body>*{position:absolute}
.env-shadow{inset:2px 0 -8px;border-radius:6px;background:#3d3f2a;opacity:.3;filter:blur(11px);transform:translateY(12px)}
.env-back{inset:0;border-radius:5px;background:linear-gradient(175deg,#efe9dc,#e4dccb)}
.env-sheet{left:5%;right:5%;top:5%;height:92%;border-radius:2px;background:linear-gradient(178deg,#fffdf8,#f6f2e8);box-shadow:0 0 0 .5px #3d3f2a26,0 1px 3px #3d3f2a26;transform:translateZ(1px);transition:transform 1s .45s cubic-bezier(.3,.8,.3,1)}
.env-sheet::before{content:"";position:absolute;left:11%;right:11%;top:13%;height:44%;background:repeating-linear-gradient(180deg,#34383233 0 1px,#0000 1px 11px)}
.is-open .env-sheet{transform:translateZ(1px) translateY(-46%)}
.env-front{inset:0;border-radius:5px;background:linear-gradient(178deg,#fbf8f1,#efeadd);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);transform:translateZ(2px)}
.env-front::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,#0000 calc(50% - .6px),#3d3f2a24 50%,#0000 calc(50% + .6px)) 0 100%/50% 50% no-repeat,linear-gradient(to top left,#0000 calc(50% - .6px),#3d3f2a24 50%,#0000 calc(50% + .6px)) 100% 100%/50% 50% no-repeat}
.env-flap{inset:0;transform-origin:50% 0;transform-style:preserve-3d;transform:translateZ(3px) rotateX(0deg);transition:transform .9s cubic-bezier(.4,.1,.2,1)}
.is-open .env-flap{transform:translateZ(.5px) rotateX(178deg)}
.env-flap>*{position:absolute;backface-visibility:hidden}
.env-out,.env-in{inset:0}
.env-out i,.env-in{clip-path:polygon(0 0,100% 0,54% 60%,50% 62%,46% 60%)}
.env-out{filter:drop-shadow(0 2.5px 2.5px #3d3f2a47)}
.env-out i{position:absolute;inset:0;background:linear-gradient(180deg,#fdfbf5,#f3eee2 70%,#ece6d7)}
.env-in{background:linear-gradient(180deg,#e9c9c5,#f1d9d5);transform:rotateX(180deg)}
.env-seal{left:50%;top:60%;width:14%;aspect-ratio:1;translate:-50% -50%;border-radius:47% 53% 50% 50%/52% 48% 52% 48%;transform:translateZ(1.5px);background:radial-gradient(circle at 36% 28%,#d06a52,#b34934 55%,#97392a);box-shadow:0 1.5px 2px #3d3f2a66,inset 0 0 0 4px #b34934,inset 0 0 0 4.6px #ffffff2e,inset 0 -2px 3px #7d2d20}
.env-seal svg{position:absolute;inset:27%;width:46%;height:46%;fill:#8f3526;opacity:.8}
/* read already: the envelope lies to one side, so the box stays in view */
[data-module="gacha"] .gcr-letter.is-aside{left:22%;top:16%;scale:.6}
@media (prefers-reduced-motion:reduce){.jb-lid,.is-open .jb-lid,.env-flap,.env-sheet,[data-module="gacha"] .gcr-box{transition:none}.is-open .jb-twinkle,.is-open .jb-glint,.is-open .jb-pearl,.gcr-rays,.gcr-dust .jb-mote,.is-lit>.gcr-halo{animation:none}.is-open .jb-light{animation:none;opacity:.28}}
[data-module="gacha"] .gcr-papers{perspective:1800px}
[data-module="gacha"] .gcr-slip{width:400px;height:500px;cursor:pointer;perspective:1800px}
/* the slip turns over inside its own box, so where it lies on the desk never changes */
.gcr-turn{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.1,.2,1)}
.gcr-slip.is-flipped .gcr-turn{transform:rotateY(180deg)}
.gcr-face{position:absolute;inset:0;backface-visibility:hidden;background:linear-gradient(#fcfaf4,#f4efe2);box-shadow:0 0 0 .5px #3d3f2a1f,0 2px 3px #3d3f2a14,0 24px 40px -10px #3d3f2a33}
.gcr-face.back{transform:rotateY(180deg);background:linear-gradient(#f9f6ee,#f1ecdf)}
.gcr-face:before,.gcr-face:after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,#3d3f2a0d,#3d3f2a1f,#3d3f2a0d);box-shadow:0 1px 0 #ffffffb3;z-index:1}
.gcr-face:before{top:33.3%}.gcr-face:after{top:66.6%}
.gcr-slip-in{position:absolute;inset:0;padding:30px 24px 30px 20px;writing-mode:vertical-rl;font-family:var(--font-literary);color:#2c322b;text-align:start}
.gcr-slip-in>*{margin:0 0 0 13px}
.gcr-slip-in .head{font:400 11px/1.6 var(--font-literary);letter-spacing:.3em;color:#6b7263;margin-left:16px}
.gcr-slip-in .rank{font-size:30px;line-height:1.1;letter-spacing:.3em;margin-left:22px}
.gcr-slip-in .rank small{display:block;margin-top:12px;font-size:15px;letter-spacing:.4em;color:#4b5549}
.gcr-slip-in .poem{font-size:17px;line-height:1.85;letter-spacing:.34em;margin-left:16px}
.gcr-slip-in .jie{font-size:12px;line-height:1.8;letter-spacing:.24em;color:#4b5549;padding-right:12px;border-right:1px solid #3d3f2a26}
.gcr-slip-in .yi{font-size:12px;line-height:1.9;letter-spacing:.28em;color:#4b5549}
.gcr-slip-in .yi b{display:inline-block;margin-bottom:6px;padding:3px 4px;border:1px solid #4b5549;font-weight:400}
.gcr-slip-in .seal{position:absolute;left:24px;bottom:24px;width:40px;height:40px;margin:0;border:1.5px solid #4b5549;border-radius:3px;display:grid;place-items:center;writing-mode:horizontal-tb;font:400 11px/1.15 var(--font-literary);color:#4b5549;text-align:center;opacity:.8;transform:rotate(-3deg)}
/* the back: the reading, set horizontally */
.gcr-back-in{position:absolute;inset:0;z-index:2;padding:26px 28px 22px;font:13px/1.7 var(--font-ui);color:#3f463e;text-align:left;overflow:auto;scrollbar-width:none}
.gcr-back-in p{margin:0}
.gcr-back-in .k{margin:13px 0 5px;font:500 10px var(--font-mono);letter-spacing:.3em;color:#8e978c}
.gcr-back-in .k:first-child{margin-top:0}
.gcr-back-in .k b{font:400 15px var(--font-literary);letter-spacing:.3em;color:#2c322b}
.gcr-back-in .meaning{font:400 13.5px/1.7 var(--font-literary);color:#2c322b}
.gcr-back-in .jie{margin-top:4px;font:400 12px/1.7 var(--font-literary);letter-spacing:.06em;color:#6b7263}
.gcr-back-in .xj{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 10px;margin-top:8px;font-size:11.5px;line-height:1.7;color:#4f564a}
.gcr-back-in .xj em{font-style:normal;margin-right:6px;color:#8e978c}
.gcr-back-in .day .c{color:#8e978c}
.gcr-back-in .day{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px}
.gcr-back-in .day b{margin-right:6px;padding:0 3px;border:1px solid #4b5549;font:400 11px var(--font-literary)}
.gcr-back-in .luck{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.gcr-back-in .luck li{display:grid;grid-template-columns:34px 62px 1fr;gap:8px;align-items:baseline}
.gcr-back-in .luck .n{font:400 13px var(--font-literary);color:#2c322b}
.gcr-back-in .luck .s{font-size:10px;letter-spacing:1px;color:#c2994a}.gcr-back-in .luck .s i{font-style:normal;color:#ddd6c4}
.gcr-back-in .luck .t{font-size:11.5px;line-height:1.55;color:#4f564a}
.gcr-back-in .mock{position:absolute;right:10px;bottom:8px;font:500 9px var(--font-mono);letter-spacing:.3em;color:#b0b2aa;font-style:normal}
.gcr-slip-in .mock{position:absolute;right:10px;bottom:8px;margin:0;writing-mode:horizontal-tb;font:500 9px var(--font-mono);letter-spacing:.3em;color:#b0b2aa;font-style:normal}
[data-module="gacha"] .gcr-card{width:320px;padding:28px 30px 30px;border-radius:8px;background:linear-gradient(170deg,#fbf9f3,#f0ece1);box-shadow:0 0 0 .5px #3d3f2a1f,0 2px 3px #3d3f2a14,0 22px 36px -10px #3d3f2a33;color:#2c322b;text-align:left}
[data-module="gacha"] .gcr-card small{font:500 10px var(--font-mono);letter-spacing:.3em;color:#7c8576}
[data-module="gacha"] .gcr-card b{display:block;margin:14px 0 12px;font:400 30px var(--font-literary);letter-spacing:.2em}
[data-module="gacha"] .gcr-card p{margin:0;font:400 16px/1.8 var(--font-ui);color:#3f463e}
[data-module="gacha"] .gcr-card.special{background:radial-gradient(circle at 30% 20%,#fff6df,#f6ecd6 60%,#efe5cf);box-shadow:0 0 0 .5px #3d3f2a1f,0 0 30px #f6d79a66,0 22px 36px -10px #3d3f2a33}
[data-module="gacha"] .is-under.gcr-card,[data-module="gacha"] .is-under .gcr-face{box-shadow:0 0 0 .5px #3d3f2a1f,0 2px 3px #3d3f2a14}
/* the clear-desk icon, top right of the desk */
[data-module="gacha"] .gcr-clear{position:absolute;right:10px;top:10px;z-index:60;width:40px;height:40px;min-height:0;display:grid;place-items:center;border-radius:50%;color:#9a9d92;transition:color .2s,background .2s}
[data-module="gacha"] .gcr-clear:hover{color:#4f564a;background:#ffffff80}
[data-module="gacha"] .gcr-clear svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
/* phones: the slip lies folded; tap to read */
[data-module="gacha"] .gcr-folded{width:126px;height:64px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;background:linear-gradient(#fcfaf4,#efe9da);box-shadow:0 0 0 .5px #3d3f2a1f,0 6px 14px -4px #3d3f2a38;font-family:var(--font-literary);color:#2c322b}
[data-module="gacha"] .gcr-folded:before{content:'';position:absolute;left:33.3%;top:0;bottom:0;border-left:1px solid #3d3f2a14}
[data-module="gacha"] .gcr-folded b{font-size:18px;font-weight:400;letter-spacing:.2em}
[data-module="gacha"] .gcr-folded span{font:13px 'Apple Symbols',sans-serif;color:#6b7263}
[data-module="gacha"] .gcr-read{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#f8f7f4f2;backdrop-filter:blur(3px)}
[data-module="gacha"] .gcr-read[hidden]{display:none}
[data-module="gacha"] .gcr-read .gcr-slip{position:relative;left:auto;top:auto;transform:scale(var(--k,1));transform-origin:50% 50%}
@media (max-width:900px){
  [data-module="gacha"] .gcr{grid-template-columns:1fr;justify-items:center;gap:22px}
  [data-module="gacha"] .gcr-machine .gc{--u:min(.8px,calc((100vw - 60px) / 300))}
  [data-module="gacha"] .gcr-desk{width:100%;height:340px;min-height:0;border-radius:24px}
  [data-module="gacha"] .gcr-card{width:280px;padding:22px 24px;top:52%}
  [data-module="gacha"] .gcr-card b{font-size:24px;margin:10px 0 8px}
  [data-module="gacha"] .gcr-card p{font-size:15px}
  [data-module="gacha"] .gcr-folded{top:50%}
  [data-module="gacha"] .gcr-letter{--w:220px;top:52%}
  [data-module="gacha"] .gcr-box{top:69%}
  [data-module="gacha"] .gcr-letter.is-aside{left:22%;top:17%;scale:.5}
}