@font-face{font-family:Avant;src:url('assets/fonts/ITCAvantGardePro-Bold.otf') format('opentype');font-weight:700;font-display:swap}*{box-sizing:border-box}html{background:#101213;color:#e4e4e4}body{margin:0;min-height:100svh;background:#101213 url('assets/background.png') center/cover fixed;font-family:Avant,"PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;font-synthesis:none}header{height:82px;display:flex;align-items:center;padding:0 3.1%;gap:30px}.brand{font-size:40px;letter-spacing:-2px;line-height:1;color:#e8e8e8;text-decoration:none;font-weight:700}.club{font-size:10px;letter-spacing:4px;border-left:1px solid #888;padding:7px 0 7px 30px}.edition{margin-left:auto;font-size:11px;letter-spacing:4px;color:#bfc0c1}main{max-width:1487px;margin:auto}h1{font-size:clamp(34px,5.55vw,83px);line-height:1.05;letter-spacing:-3px;text-align:center;margin:0 20px 12px;font-weight:700;color:#d9dada}.stage{position:relative;display:grid;grid-template-columns:1fr minmax(0,470px) 1fr;align-items:center;gap:0;width:100%;margin:auto}.card{height:min(62svh,632px);aspect-ratio:1170/1660;max-width:100%;position:relative;border:2px solid #dbdedd;border-radius:17px;overflow:hidden;box-shadow:0 0 2px #fff,0 18px 40px #0005;justify-self:center;background:#181a1b;width:auto}.card img{position:absolute;width:100%;height:100%;object-fit:contain;background:#121415}.card canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;background:url('assets/foil.png') center/cover}.cover-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(24px,3.3vw,48px);letter-spacing:-1px;color:#ddd;opacity:.7;text-shadow:0 2px 10px #000;transition:opacity .25s;pointer-events:none}.scratching .cover-title,.revealed .cover-title{opacity:0}.card.revealed canvas{visibility:hidden}.card.scratching canvas{background:none}.left-note{justify-self:end;margin-right:74px;font-family:Arial,sans-serif;font-size:16px;line-height:1.45;letter-spacing:1.5px;color:#c3c5c4}.left-note span{display:block;border-top:1px solid #9b9f9d;border-bottom:1px solid #9b9f9d;padding:48px 0}.right-note{justify-self:start;margin-left:100px;color:#b0b3b1;font-family:"PingFang SC",sans-serif;font-size:16px;letter-spacing:2px}.right-note p{margin:0 0 22px}.right-note:after{content:"";display:block;width:34px;border-bottom:1px solid #8f9490;margin-top:24px}#result-number{font-family:Avant,sans-serif;font-size:13px;color:#dafa50;letter-spacing:3px}.controls{width:min(450px,85vw);margin:22px auto 0;text-align:center}progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:6px;border:1px solid #515953;border-radius:12px;overflow:hidden;background:transparent}progress::-webkit-progress-bar{background:transparent}progress::-webkit-progress-value{background:#ddff58;border-radius:12px}progress::-moz-progress-bar{background:#ddff58;border-radius:12px}.status{min-height:18px;color:#bfc2bf;font-family:"PingFang SC",sans-serif;font-size:12px;letter-spacing:2px;margin:15px 0 24px}button{font:inherit;cursor:pointer}#draw{display:block;width:min(330px,100%);min-height:58px;border-radius:40px;border:1px solid #f0ffa6;background:#dfff54;color:#151a0b;font-size:18px;font-weight:700;letter-spacing:3px;box-shadow:0 0 30px #dfff541c;margin:auto;padding:14px 28px;transition:background .2s,transform .2s,box-shadow .2s}#draw:hover:enabled{background:#e9ff8b;box-shadow:0 0 35px #dfff5433;transform:translateY(-2px)}#draw:active:enabled{transform:translateY(1px)}#draw:disabled{cursor:wait}body.loading #draw{opacity:.55}.hint{font-size:12px;letter-spacing:1px;color:#9c9f9c;font-family:"PingFang SC",sans-serif;margin:12px 0 0}footer{text-align:center;padding:24px 16px 25px;font-family:"PingFang SC",sans-serif;font-size:12px;color:#c0c4bf;letter-spacing:2px}.retry{background:transparent;color:#dfff54;border:0;text-decoration:underline;padding:12px}[hidden]{display:none!important}:focus-visible{outline:3px solid #e5ff86;outline-offset:6px}@media(max-width:1100px){.stage{grid-template-columns:1fr minmax(0,430px) 1fr}.left-note{margin-right:35px}.right-note{margin-left:35px;font-size:14px}.card{height:min(60svh,590px)}h1{letter-spacing:-2px}}@media(max-width:700px){header{height:76px;padding:0 6%;gap:16px}.brand{font-size:31px}.club{font-size:8px;letter-spacing:2px;padding-left:16px}.edition{font-size:9px;letter-spacing:1px}h1{font-size:clamp(23px,6.7vw,46px);letter-spacing:-1px;margin:10px 12px 24px;white-space:nowrap}.stage{display:block}.card{height:min(54svh,600px);max-width:80vw;margin:auto;border-radius:12px}.left-note,.right-note{display:none}.controls{width:min(76vw,390px);margin-top:20px}.status{margin:13px 0 20px}#draw{min-height:52px;font-size:16px;width:85%}.cover-title{font-size:clamp(23px,7vw,38px)}footer{padding:24px 12px;font-size:11px}.hint{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Balance texture contrast and match the selected desktop composition. */
body{background-color:#777;background-blend-mode:multiply}h1{margin-bottom:0}.stage{grid-template-columns:1fr minmax(0,490px) 1fr}.card{height:min(62svh,656px)}.left-note span{border-top:0;border-bottom:0;position:relative}.left-note span:before,.left-note span:after{content:"";display:block;width:1px;height:60px;background:#929794;position:absolute;left:24px}.left-note span:before{top:-38px}.left-note span:after{bottom:-38px}@media(max-width:1100px){.stage{grid-template-columns:1fr minmax(0,430px) 1fr}.card{height:min(60svh,590px)}}@media(max-width:700px){h1{margin-bottom:24px}.stage{display:block}.card{height:min(54svh,600px)}}
.deck-shell{height:min(62svh,656px);width:100%;position:relative;perspective:1400px;justify-self:center}.deck-shell>.card{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:20;transition:transform 1s cubic-bezier(.2,.8,.25,1),opacity .45s;will-change:transform}.deck{position:absolute;inset:0;perspective:1200px}.deck-card{position:absolute;width:72%;height:85%;left:14%;top:8%;border:1px solid #c4c9c6;border-radius:15px;background:#25292a url('assets/foil.png') center/cover;box-shadow:0 12px 35px #0007;transform:translateX(calc(var(--offset)*25px)) translateY(calc(var(--offset)*var(--offset)*3px)) rotate(calc(var(--offset)*7deg));transform-origin:50% 110%;transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .65s;display:flex;align-items:center;justify-content:center;overflow:hidden}.deck-card span{font:700 40px Avant,sans-serif;letter-spacing:-2px;color:#e6e8e5;text-shadow:0 2px 15px #0008}.deck-card small{position:absolute;bottom:28px;font-size:9px;letter-spacing:3px;color:#d4d7d3}.waiting>.card,.shuffling>.card{opacity:0;transform:translateX(-50%) translateY(35px) scale(.82);pointer-events:none}.waiting .deck{animation:deck-float 5s ease-in-out infinite}.shuffling .deck-card{animation:shuffle 600ms ease-in-out 2;animation-delay:calc(var(--i)*-45ms)}.extracting .deck-card{transform:translateX(calc(var(--offset)*36px)) translateY(95px) rotate(calc(var(--offset)*10deg)) scale(.87);opacity:.36}.extracting>.card{opacity:1;animation:extract 1.1s cubic-bezier(.16,.8,.3,1) both}.focused .deck-card,.finished .deck-card{opacity:0;transform:translateY(100px) scale(.8);pointer-events:none}.finished>.card{transform:translateX(-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .22s ease;animation:land .65s ease-out}.card-glint{position:absolute;inset:-30%;pointer-events:none;background:url('assets/foil.png') center/cover;mix-blend-mode:screen;opacity:0;transform:translateX(-90%) rotate(-20deg)}.extracting .card-glint{animation:glint 1.1s ease-out}.finished .card-glint{animation:glint 1.4s ease-out}.finished .card:hover .card-glint{opacity:.065;transform:translateX(10%) rotate(-20deg);transition:transform .8s,opacity .8s}.card.revealed{box-shadow:0 0 2px #fff,0 15px 55px #dfff5414,0 25px 50px #0008}@keyframes deck-float{50%{transform:translateY(-9px) rotate(1deg)}}@keyframes shuffle{0%,100%{transform:translateX(calc(var(--offset)*25px)) translateY(calc(var(--offset)*var(--offset)*3px)) rotate(calc(var(--offset)*7deg))}50%{transform:translateX(calc(var(--offset)*44px)) translateY(calc(var(--i)*-7px)) rotate(calc(var(--offset)*11deg))}}@keyframes extract{0%{transform:translateX(-50%) translateY(45px) rotate(-12deg) scale(.8);opacity:.5}45%{transform:translateX(-50%) translateY(-45px) rotate(7deg) scale(1.06);opacity:1}100%{transform:translateX(-50%) translateY(0) rotate(0) scale(1)}}@keyframes land{0%{transform:translateX(-50%) scale(1.025)}100%{transform:translateX(-50%) scale(1)}}@keyframes glint{0%{opacity:0;transform:translateX(-90%) rotate(-20deg)}40%{opacity:.13}100%{opacity:0;transform:translateX(90%) rotate(-20deg)}}@media(max-width:1100px){.deck-shell{height:min(60svh,590px)}}@media(max-width:700px){.deck-shell{height:min(54svh,600px);width:80vw;margin:auto}.deck-shell>.card{max-width:100%}.deck-card{width:72%;left:14%;height:86%}.deck-card span{font-size:30px}.deck-card small{font-size:7px;letter-spacing:2px}.waiting .deck-card{transform:translateX(calc(var(--offset)*12px)) translateY(calc(var(--offset)*var(--offset)*2px)) rotate(calc(var(--offset)*5deg))}.shuffling .deck-card{animation-name:shuffle-mobile}@keyframes shuffle-mobile{50%{transform:translateX(calc(var(--offset)*17px)) translateY(calc(var(--i)*-4px)) rotate(calc(var(--offset)*7deg))}}.extracting .deck-card{transform:translateX(calc(var(--offset)*14px)) translateY(40px) rotate(calc(var(--offset)*5deg)) scale(.87)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.stage:has(.waiting) aside,.stage:has(.shuffling) aside,.stage:has(.extracting) aside{visibility:hidden}.deck-card{backface-visibility:hidden}.cover-title{pointer-events:none}@media(max-width:700px){body{overflow-x:hidden}.deck-card{height:78%;top:7%}.waiting .deck-card{transform:translateX(calc(var(--offset)*9px)) translateY(calc(var(--offset)*var(--offset)*2px)) rotate(calc(var(--offset)*4deg))}}

button.deck{border:0;padding:0;background:transparent;color:inherit;text-align:center;font:inherit;width:100%;height:100%;overflow:visible;cursor:pointer}button.deck:disabled{cursor:default}.waiting button.deck:hover .deck-card{filter:brightness(1.12)}.focused button.deck,.finished button.deck{visibility:hidden}.deck-card{pointer-events:none}.waiting button.deck:focus-visible{outline:2px solid #dfff54;outline-offset:18px;border-radius:16px}

/* Keep the pile available behind the revealed artwork. */
.finished button.deck{visibility:visible;cursor:pointer}
.finished .deck-card{opacity:.85;transform:translateX(calc(var(--offset)*21px)) translateY(26px) rotate(calc(var(--offset)*4deg)) scale(.88)}
.finished button.deck:hover .deck-card{filter:brightness(1.2)}
.finished button.deck:focus-visible{outline:2px solid #dfff54;outline-offset:14px;border-radius:16px}
@media(max-width:700px){.finished .deck-card{transform:translateX(calc(var(--offset)*10px)) translateY(22px) rotate(calc(var(--offset)*3deg)) scale(.9)}}

/* Latin interface copy uses an oblique rendering of the supplied Avant Garde Bold. */
.brand,.club,.edition,h1,.cover-title,.deck-card span,.deck-card small,.left-note,#result-number{font-style:oblique 12deg;font-synthesis:style}
.deck{border:0;background:transparent}.deck-card{color:#e6e8e5;font-family:inherit;cursor:pointer;pointer-events:auto;padding:0}.deck-card span,.deck-card small{pointer-events:none}.deck-card:disabled{cursor:default}.deck-card:focus-visible{outline:3px solid #dfff54;outline-offset:4px}.waiting .deck-card:hover:enabled,.selected-card{filter:brightness(1.3);border-color:#dfff54;box-shadow:0 0 18px #dfff5426,0 18px 35px #0008}.finished .deck{visibility:visible}.finished .deck-card{pointer-events:auto}.focused .deck{visibility:hidden}h1{padding-inline:12px;font-size:clamp(32px,5.2vw,79px)}
@keyframes extract{0%{transform:translateX(calc(-50% + var(--picked-x,0px))) translateY(45px) rotate(var(--picked-angle,-12deg)) scale(.8);opacity:.5}45%{transform:translateX(-50%) translateY(-45px) rotate(7deg) scale(1.06);opacity:1}100%{transform:translateX(-50%) translateY(0) rotate(0) scale(1)}}
@media(max-width:700px){h1{font-size:clamp(21px,6.2vw,43px);padding-inline:0}}

/* Reveal keeps only the selected artwork; shuffle restores the full pile. */
.finished .deck{visibility:hidden;pointer-events:none}.finished .deck-card{opacity:0;pointer-events:none;transform:translateY(100px) scale(.8)}

/* Transparent silver-white mark matches the existing foil backs. */
.deck-card .back-logo,.cover-title .back-logo{position:static;display:block;width:94%;height:auto;object-fit:contain;background:transparent;filter:brightness(0) invert(1);opacity:.88;pointer-events:none}.cover-title{opacity:1}

/* Header wordmark: frame the transparent asset to its visible bounds. */
header .brand{position:relative;display:block;flex:none;width:clamp(80px,11vw,150px);aspect-ratio:2069/296;overflow:hidden}
header .brand img{position:absolute;display:block;width:104.833%;max-width:none;height:auto;left:-3.142%;top:-70.27%;filter:brightness(0) invert(1);opacity:.88}
header .edition{display:block;white-space:nowrap}
@media(max-width:700px){header{gap:12px;padding-inline:5%}header .brand{width:clamp(70px,20vw,110px)}header .edition{font-size:8px;letter-spacing:1px}}
@media(max-width:360px){header .edition{font-size:7px;letter-spacing:.6px}header .brand{width:65px}}

/* Two-line bilingual identity beside the revealed card. */
.left-note{min-width:0;width:calc(100% - 40px);max-width:350px;margin:0 20px;font-style:normal;justify-self:center;text-align:left}
.left-note span{padding:0;border:0;position:static}.left-note span:before,.left-note span:after{content:none}
.character-name{position:relative;padding:30px 0}
.character-name:before,.character-name:after{content:"";position:absolute;left:24px;width:1px;height:48px;background:#929794}
.character-name:before{top:-42px}.character-name:after{bottom:-42px}
#character-zh{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:clamp(12px,1.25vw,19px);letter-spacing:.3px;white-space:nowrap;font-weight:500}
#character-en{margin-top:9px;font-family:Arial,sans-serif;font-size:clamp(8px,.85vw,12px);font-style:italic;letter-spacing:.1px;white-space:nowrap;color:#aeb5b0}
.stage:not(:has(.finished)) .left-note{visibility:hidden}
@media(max-width:700px){.stage:has(.finished) .left-note{display:block;visibility:visible;width:90%;max-width:none;margin:0 auto 18px;text-align:center}.character-name{padding:0}.character-name:before,.character-name:after{display:none}#character-zh{font-size:16px}#character-en{font-size:10px}}
.left-note{justify-self:end;text-align:right;margin-right:40px;width:calc(100% - 60px)}
.character-name:before,.character-name:after{left:auto;right:24px}
@media(max-width:700px){.stage:has(.finished) .left-note{text-align:center;margin:0 auto 18px}}

/* Reveal-only character quote, with readable wrapping on small screens. */
.stage:not(:has(.finished)) .right-note{visibility:hidden}
.right-note{min-width:0;max-width:260px;margin-right:24px}
#side-note{font-family:"PingFang SC","Microsoft YaHei",sans-serif;line-height:2;letter-spacing:1px;overflow-wrap:anywhere;text-wrap:pretty}
@media(max-width:1100px){.right-note{margin-right:16px}#side-note{font-size:14px}}
@media(max-width:700px){.stage:has(.finished) .right-note{display:block;visibility:visible;max-width:310px;width:84%;margin:26px auto 0;text-align:center}.right-note #side-note{font-size:15px;margin:0;line-height:1.9}.right-note #result-number{display:block;margin-top:12px;font-size:10px}}

#sound-test{display:block;margin:12px auto 0;padding:5px 12px;background:transparent;border:1px solid #747b75;border-radius:20px;color:#ccd0ca;font:12px "PingFang SC",sans-serif;cursor:pointer}#sound-status{max-width:360px;margin:8px auto 0;padding-inline:12px;font:12px/1.6 "PingFang SC",sans-serif;color:#aeb5b0}#sound-status:empty{display:none}