:root{color-scheme:dark;--gold:#ccb98b;--cream:#f4eee1;--ink:#183b32}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Arial,'PingFang SC',sans-serif;background:#102e29;color:var(--cream);-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;border:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}#table{height:100%;height:100svh;min-height:320px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 40%,#28504770,transparent 65%),radial-gradient(ellipse at 50% 110%,#061b19,transparent 60%)}#table:before{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.45' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header,footer{position:absolute;left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);display:flex;align-items:center;justify-content:space-between;z-index:2}header{top:max(24px,env(safe-area-inset-top));height:40px}.wordmark{font:italic 29px Georgia,serif;letter-spacing:-1.5px;color:var(--cream);text-decoration:none}.wordmark span{font-size:15px;margin-left:8px;color:var(--gold);vertical-align:top}.utility{width:44px;height:44px;background:transparent;color:#b4c5bc}.utility svg{width:19px;height:19px}#draw{position:absolute;inset:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:88px 24px 90px;gap:30px}.eyebrow{font-size:9px;letter-spacing:3px;color:#c6cbbb80}.scene{position:relative;perspective:1500px;width:min(82vw,340px,47svh);height:min(114.8vw,476px,65.8svh);flex-shrink:0;filter:drop-shadow(0 30px 25px #0005);margin:7px 0}.card,.under{position:absolute;inset:0;border-radius:15px}.card{transform-style:preserve-3d;transition:transform 360ms cubic-bezier(.3,.1,.15,1);will-change:transform}.under{background:#e0dacd;border:1px solid #a8a692;box-shadow:0 2px 2px #0003;transition:opacity .3s}.under-one{transform:rotate(-4deg) translate(-5px,4px)}.under-two{transform:rotate(5deg) translate(6px,6px)}.face{position:absolute;inset:0;border-radius:15px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.back{padding:12px;background:#eee6d5;border:1px solid #f9f2e6;box-shadow:inset 0 0 0 4px #e5ddcb}.back-border{height:100%;position:relative;border:1px solid #bda878;border-radius:6px;background:repeating-linear-gradient(45deg,transparent 0 7px,#c2aa7025 7px 8px),repeating-linear-gradient(-45deg,#153b33 0 7px,#c2aa7030 7px 8px);display:grid;place-items:center}.back-border:before{content:"";position:absolute;inset:7px;border:1px solid #c6b07e70;border-radius:100px 100px 100px 100px / 160px 160px 160px 160px}.emblem{width:116px;height:148px;background:#183e34;border:1px solid #c6b07e;outline:5px solid #183e34;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--gold);box-shadow:0 0 0 6px #bda87855}.emblem>span{font:75px Georgia;line-height:1}.emblem small{font:8px Georgia;letter-spacing:4px;padding-left:4px;margin-top:12px}.ornament{position:absolute;color:var(--gold);font-size:21px}.ornament.top{top:16px}.ornament.bottom{bottom:16px}.front{background:radial-gradient(ellipse at 30% 20%,#fffaf0,var(--cream));color:var(--ink);transform:rotateY(180deg);border:1px solid #fff5df;box-shadow:inset 0 0 0 7px #f0e8da}.corner{position:absolute;display:flex;align-items:center;flex-direction:column;gap:0}.corner b{font:37px Georgia;line-height:1}.corner span{font:21px Georgia}.top-corner{left:18px;top:19px}.bottom-corner{right:18px;bottom:19px;transform:rotate(180deg)}.pips{position:absolute;inset:58px 53px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,1fr);align-items:center;justify-items:center}.pip{font:43px Georgia;line-height:1}.pip.ace{font-size:120px;grid-column:1/3;grid-row:1/6;text-shadow:0 3px 0 #00000008}.caption{text-align:center;min-height:65px}h1{font-family:'Noto Serif SC',Georgia,serif;font-weight:400;font-size:21px;letter-spacing:3px;margin:0 0 13px}#hint{margin:0;font-size:12px;letter-spacing:2px;color:#b4c5bc}#hint span{margin-left:10px;color:var(--gold)}footer{bottom:max(25px,env(safe-area-inset-bottom));font-size:9px;letter-spacing:1.5px;color:#bac5b180;height:20px}#progress{display:flex;gap:6px;position:absolute;left:50%;transform:translateX(-50%)}.dot{width:3px;height:3px;border-radius:50%;background:#aab9a533;transition:background .2s,transform .2s}.dot.drawn{background:var(--gold)}.dot.current{transform:scale(1.6)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.shuffling .card{animation:shuffle .65s cubic-bezier(.4,0,.2,1)}.shuffling .under-one{animation:fan .65s ease}.shuffling .under-two{animation:fan .65s ease reverse}@keyframes shuffle{0%,100%{transform:rotateY(0)}30%{transform:translate(24px,-14px) rotate(12deg) rotateY(-22deg)}65%{transform:translate(-15px,2px) rotate(-9deg) rotateY(15deg)}}@keyframes fan{50%{transform:translate(-45px,10px) rotate(-17deg)}}@media(min-width:700px){#draw{gap:34px}.scene{width:280px;height:392px}h1{font-size:24px}.eyebrow{font-size:10px}}@media(max-height:690px){#draw{gap:18px;padding-top:75px;padding-bottom:65px}.scene{height:min(58svh,380px);width:min(41.4svh,271px)}.eyebrow{font-size:8px}h1{font-size:18px}.caption{min-height:50px}.pip{font-size:30px}.pip.ace{font-size:95px}.pips{inset:48px 40px}.corner b{font-size:29px}}@media(orientation:landscape) and (max-height:550px){#draw{flex-direction:row;gap:65px}.eyebrow{display:none}.scene{height:70svh;width:50svh}.caption{max-width:250px}.pips{inset:40px}.pip{font-size:25px}footer{bottom:15px}header{top:12px}}@media(prefers-reduced-motion:reduce){.card{transition-duration:1ms}.shuffling .card,.shuffling .under{animation:none}}
footer{pointer-events:none}
/* Camera-first layout: the card carries the number, suit and brand. */
header{top:max(10px,env(safe-area-inset-top));left:18px;right:14px;height:34px}
.wordmark{display:flex;align-items:center;gap:7px;font:600 13px Arial,sans-serif;letter-spacing:-.3px}
.wordmark>img{width:27px;height:27px;object-fit:contain}
.wordmark>span{font:inherit;margin:0;color:var(--cream);display:flex;align-items:baseline;gap:6px}
.wordmark small{font-size:8px;letter-spacing:1px;color:var(--gold)}
.utility{width:34px;height:34px}
#draw{padding:56px 10px 30px;gap:0}
.eyebrow,.caption{display:none}
.scene{width:min(91vw,59svh);height:min(133vw,86.2svh);margin:0;filter:drop-shadow(0 12px 13px #0005)}
.under-one{transform:rotate(-1.3deg) translate(-2px,2px)}
.under-two{transform:rotate(1.3deg) translate(2px,3px)}
.corner{gap:0}
.top-corner{left:7%;top:4%}
.bottom-corner{right:7%;bottom:4%}
.corner b{font:bold clamp(80px,24vw,160px)/.88 Georgia,serif;letter-spacing:-7px}
.corner span{font:clamp(64px,20vw,125px)/1 Georgia,serif;margin-top:8px}
.center-brand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;pointer-events:none}
.center-brand img{width:28%;height:auto;object-fit:contain}
.center-brand span{font:600 9px Arial,sans-serif;letter-spacing:2px;color:#496152}
.emblem>img{width:70px;height:70px;object-fit:contain}
.emblem small{font-size:7px;letter-spacing:1.5px}
footer{left:18px;right:18px;bottom:max(7px,env(safe-area-inset-bottom));height:15px;font-size:9px}
#status{font-size:0}
#status:after{content:'轻触翻牌';font-size:9px}
@media(min-width:700px) and (min-height:551px){.scene{width:min(55svh,460px);height:min(80.3svh,672px)}.corner b{font-size:min(18svh,155px)}.corner span{font-size:min(14svh,120px)}}
@media(orientation:landscape) and (max-height:550px){#draw{padding:10px 60px}.scene{width:62svh;height:90.5svh}.corner b{font-size:25svh;letter-spacing:-4px}.corner span{font-size:19svh;margin-top:3px}.center-brand span{font-size:6px;letter-spacing:1px}header{left:12px;right:10px}.wordmark>span{display:none}footer{left:12px;right:12px}#progress{display:none}}
/* Large central value stays readable when filmed from a distance. */
.top-corner{left:5%;top:3%}.bottom-corner{right:5%;bottom:3%}
.corner b{font-size:clamp(32px,10vw,58px);letter-spacing:-2px}
.corner span{font-size:clamp(24px,8vw,43px);margin-top:3px}
.hero-rank{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.hero-rank b{font:bold clamp(130px,49vw,270px)/.85 Georgia,serif;letter-spacing:-.07em;padding-right:.07em}
.hero-rank>span{font:clamp(100px,36vw,200px)/1 Georgia,serif}
.card-brand{position:absolute;left:5%;bottom:3%;display:flex;align-items:center;gap:4px;color:#43584c}
.card-brand img{width:19px;height:19px;object-fit:contain}
.card-brand span{font:600 9px Arial,sans-serif;letter-spacing:.2px}
@media(min-width:700px) and (min-height:551px){.hero-rank b{font-size:min(32svh,260px)}.hero-rank>span{font-size:min(23svh,185px)}}
@media(orientation:landscape) and (max-height:550px){.corner b{font-size:10svh}.corner span{font-size:7svh}.hero-rank b{font-size:36svh}.hero-rank>span{font-size:26svh}.card-brand img{width:14px;height:14px}.card-brand span{font-size:7px}}
@media(orientation:portrait){.scene{width:min(93vw,460px);height:calc(100svh - 90px);max-height:1000px}}
.about-link{color:#d6d5be;font:11px Arial,sans-serif;text-decoration:none;margin-left:auto;margin-right:12px;padding:10px 4px}
#fullscreen{display:flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:66px;height:40px;padding:0 10px;border:1px solid #ccb98b88;border-radius:7px;color:#f4eee1;background:#254b40;font-size:12px}
#fullscreen svg{width:15px;height:15px}
.about-link{min-height:40px;display:flex;align-items:center;padding:10px 8px;margin-right:7px}
#fullscreen-help{width:min(90vw,420px);border:1px solid #ccb98b88;border-radius:14px;padding:24px;background:#183b32;color:#f4eee1;font:14px/1.8 Arial,'PingFang SC',sans-serif}
#fullscreen-help::backdrop{background:#0009}
#fullscreen-help h2{font-size:20px;margin-top:0}
#fullscreen-help p{color:#d1ded5}
#fullscreen-help button{background:#eee5d3;color:#183b32;border-radius:7px;padding:12px 22px;width:100%;font-weight:600}

/* Visible page identity without reducing the camera-first card. */
.wordmark>span{flex-direction:column;align-items:flex-start;gap:2px}
.wordmark h1{display:block;font:500 10px/1.2 Arial,'PingFang SC',sans-serif;letter-spacing:.7px;color:#ccb98b;margin:0}
.no-script{position:fixed;inset:auto 20px 40px;z-index:5;padding:20px;background:#183b32;border:1px solid #ccb98b;border-radius:12px;color:#f4eee1}
.no-script h2{font-size:20px}.no-script a{color:#e6d09e}
@media(orientation:landscape) and (max-height:550px){.wordmark>span{display:flex}.wordmark{font-size:10px}.wordmark h1{font-size:8px}}
[hidden]{display:none!important}
header{gap:5px}
.toolbar-button{height:40px;padding:0 7px;background:transparent;color:#e8e5d2;font-size:11px;white-space:nowrap;border-radius:6px}
#series-open{margin-left:auto}
#status{font-size:9px;letter-spacing:.3px}
#status:after{content:none}
#series-dialog{width:min(92vw,460px);max-height:85svh;overflow:auto;border:1px solid #ccb98b77;border-radius:16px;background:#12372e;color:#f4eee1;padding:24px;font:14px/1.6 Arial,'PingFang SC',sans-serif}
#series-dialog::backdrop{background:#051b17bd;backdrop-filter:blur(5px)}
.dialog-heading{display:flex;justify-content:space-between;align-items:center}
.dialog-heading p{color:#ccb98b;font-size:9px;letter-spacing:2px;margin:0}
.dialog-heading h2{font-size:26px;margin:4px 0}
#series-close{width:40px;height:40px;border-radius:50%;background:#ffffff0c;font-size:25px}
.dialog-intro{color:#b9c9bf;margin:8px 0 20px;font-size:13px}
#series-list{display:grid;gap:10px}
.series-option{padding:16px 12px;background:#ffffff06;border:1px solid #b3c5ad33;border-radius:10px;text-align:left;display:flex;gap:15px;align-items:center}
.series-option[aria-pressed=true]{border-color:#ccb98b;background:#ccb98b10}
.series-icon{color:#ccb98b;font:28px Georgia;width:32px;text-align:center}
.series-option strong{display:block;font-size:16px;font-weight:500}
.series-option small{display:block;color:#b9c9bf;font-size:11px;margin-top:3px}
.series-help{display:inline-block;padding:18px 0 0;color:#e6d09e;font-size:12px;text-underline-offset:4px}
.topic-card{position:absolute;inset:14% 11%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:18px}
#topic-kicker{font:11px/1.5 Arial,sans-serif;letter-spacing:1px;color:#65725e;margin:0}
#topic-name{font:600 clamp(32px,10vw,52px)/1.12 Arial,'PingFang SC',sans-serif;letter-spacing:-1.8px;margin:0;overflow-wrap:anywhere}

@media(max-width:360px){header{left:12px;right:10px;gap:2px}.wordmark{font-size:11px;gap:4px}.wordmark>img{width:23px;height:23px}.wordmark h1{font-size:9px;letter-spacing:0}#fullscreen{min-width:58px;padding:0 6px}.toolbar-button{padding:0 5px;font-size:10px}#topic-kicker{font-size:10px}.topic-card{gap:18px}}
@media(orientation:landscape) and (max-height:550px){#topic-name{font-size:32px}.topic-card{inset:15% 10%;gap:12px}#topic-kicker{font-size:10px}.wordmark>span{display:none}}

.game-entry{text-decoration:none;margin-bottom:16px;border-color:#ccb98b88;background:#ccb98b10}.game-entry em{font:9px Arial,sans-serif;color:#ccb98b;font-style:normal;margin-left:7px;padding:3px 5px;border:1px solid #ccb98b55;border-radius:4px}