:root{--bg: #0b0a14;--felt: #12101f;--gold: #d6b46e;--gold-dim: rgba(214, 180, 110, .45);--ink: #e9e2d0;--ink-dim: #9f9787;--serif-tc: "Noto Serif TC", "PingFang TC", serif;--display: "Cinzel", "Noto Serif TC", serif;--body: "Cormorant Garamond", "Noto Serif TC", serif}*{box-sizing:border-box}html{background:var(--bg)}html,body{margin:0;height:100%;color:var(--ink);font-family:var(--serif-tc);overflow:hidden}button,input{font:inherit;color:inherit}#app{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-rows:auto 1fr auto}.scene{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:url(/art/scene.webp) center / cover no-repeat var(--felt)}.scene:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 40%,#05040c4d,#05040cc7 80%)}.top,.table,.speech,.reader{position:relative;z-index:1}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.12;z-index:2;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.75 0 0 0 0 0.5 0 0 0 .5 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}.top{display:flex;justify-content:space-between;align-items:center;padding:18px 28px}.stall{font-family:var(--display);font-size:20px;letter-spacing:.35em;color:var(--gold)}.about-btn{border:1px solid var(--gold-dim);background:transparent;border-radius:999px;padding:7px 16px;font-size:14px;color:var(--ink-dim);cursor:pointer;letter-spacing:.1em}.about-btn:hover{color:var(--gold);border-color:var(--gold)}.table{position:relative;overflow:hidden;perspective:1600px}.card{position:absolute;left:0;top:0;cursor:default;transform-style:preserve-3d;will-change:transform}.table.fanned .card:not(.picked){cursor:pointer}.table.fanned .card:not(.picked):hover .inner{transform:translateY(-26px)}.card .inner{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,0,.2,1)}.card.flipped .inner{transform:rotateY(180deg)}.card.flipped.reversed .inner{transform:rotateY(180deg) rotate(180deg)}.card .back,.card .face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;backface-visibility:hidden;overflow:hidden;box-shadow:0 10px 30px #0000008c}.card .face{transform:rotateY(180deg);background:#efe6cf}.card .face img{width:100%;height:100%;object-fit:cover;display:block}.card .back{background:#151a3a url(/art/cardback.webp) center / cover no-repeat}.back-art{display:none}.slot-label{position:absolute;left:50%;top:-30px;transform:translate(-50%);font-size:13px;letter-spacing:.2em;color:var(--gold);white-space:nowrap;opacity:0;animation:fadein .6s .5s forwards}@keyframes fadein{to{opacity:1}}.reader{position:fixed;left:max(8px,calc(50% - 660px));bottom:0;width:min(300px,24vw);height:56vh;pointer-events:none;z-index:5;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}.reader img{position:absolute;left:0;bottom:0;width:100%;height:auto;opacity:0;transition:opacity .25s ease}.reader img.on{opacity:1}@media(max-width:900px){.reader{display:none}}.speech{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto;gap:6px 18px;align-items:start;margin:0 auto 26px;width:min(860px,calc(100% - 48px));padding:22px 28px 20px;border:1px solid var(--gold-dim);border-radius:14px;background:#0a0914d1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 60px #00000080}.who{grid-row:1 / span 2}.seal{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font-size:22px;font-weight:500}.seal.big{width:84px;height:84px;font-size:34px;margin:0 auto 14px}.say{font-size:20px;line-height:1.7;min-height:2.4em;white-space:pre-wrap}.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.actions:empty{display:none}.actions button,.btn{border:1px solid var(--gold);background:#d6b46e1f;color:var(--gold);border-radius:10px;padding:10px 18px;font-size:16px;cursor:pointer;text-decoration:none;letter-spacing:.06em;transition:background .15s;display:inline-flex;flex-direction:column;align-items:center;gap:2px}.actions button:hover,.btn:hover{background:#d6b46e3d}.actions button small{font-size:12px;color:var(--ink-dim);letter-spacing:.1em}.actions .ghost,button.ghost{border-color:#ffffff26;background:transparent;color:var(--ink-dim)}.ask{display:flex;gap:10px;width:100%;flex-wrap:wrap}.ask input{flex:1;min-width:200px;border:0;border-bottom:1px solid var(--gold-dim);background:transparent;padding:10px 4px;font-size:18px;outline:none}.ask input:focus{border-bottom-color:var(--gold)}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:50;transition:opacity .25s}.modal.hidden{opacity:0;pointer-events:none}.modal-card{width:min(520px,calc(100% - 40px));max-height:calc(100% - 40px);overflow:auto;padding:26px;border:1px solid var(--gold-dim);border-radius:16px;background:#0f0e1c;text-align:center}.share-img{width:100%;border-radius:8px;box-shadow:0 20px 50px #0009}.modal-card p{color:var(--ink-dim);font-size:15px}.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}.about h2{font-family:var(--display);color:var(--gold);letter-spacing:.2em;font-weight:400;font-size:18px;margin:0 0 12px}.about .intro{color:var(--ink);font-size:18px}.about p{text-align:left;line-height:1.8;font-size:16px}.about button.ghost{border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:8px 16px;cursor:pointer}@media(max-width:640px){.speech{grid-template-columns:1fr;padding:16px}.who{display:none}.say{font-size:17px}}