*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:#1b0f0a;color:#fff;font-family:"Noto Sans TC","Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",sans-serif;overflow:hidden}
#app{position:fixed;inset:0}.page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;overflow:auto}
.hidden{display:none!important}
.btn{border:0;color:#5a1a0c;font:inherit;font-weight:700;font-size:18px;width:220px;height:56px;background:url(img/ui/按鈕.webp) center/100% 100% no-repeat;margin:6px;cursor:pointer}
.sbtn{background:#7a1f12cc;color:#fff;border:1px solid #e8c37a;border-radius:10px;padding:8px 12px;font:inherit;font-size:14px}
.top{position:absolute;top:10px;left:10px;z-index:20}
.start{background:url(img/ui/bg_ai.webp) center/cover;justify-content:center}
.start .title{width:56%;max-width:260px}.start .logo{width:80px;margin:8px}
.start .menu{display:flex;flex-direction:column;align-items:center;margin-top:12px}
.social{display:flex;gap:14px;margin-top:10px}.social img{width:36px}
#msg{position:fixed;inset:0;background:#0008;z-index:99;display:flex;align-items:center;justify-content:center}
.win{background:url(img/ui/視窗.webp) center/100% 100%,#3b1a0e;color:#4a1a0a;border-radius:12px;padding:30px 24px;width:86%;max-width:360px;text-align:center;font-size:17px}
.win button{margin-top:16px}.win p{white-space:pre-line}
#mapview{position:absolute;inset:0;overflow:hidden;touch-action:none;background:#fff}
#mapinner{position:absolute;left:0;top:0;transform-origin:0 0}#mapinner img{display:block}
#player{position:absolute;width:22px;height:22px;margin:-11px;border-radius:50%;background:#1e7cff;border:3px solid #fff;box-shadow:0 0 0 6px #1e7cff55}
.stall{position:absolute;border:2px dashed #ffd24a;border-radius:50%;background:#ffd24a22}
.hud{position:absolute;left:0;right:0;bottom:0;z-index:10;background:#000a;padding:8px 10px;font-size:14px}
.hud .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
#zoom{position:absolute;right:8px;top:70px;height:160px;writing-mode:vertical-lr;direction:rtl;z-index:10}
.book{background:#2a140b;padding:60px 14px 20px}.stamps{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:420px}
.stamp{background:#f6ecd6;border-radius:12px;padding:10px;text-align:center;color:#5a1a0c}
.stamp img{width:100%;max-width:150px}.stamp.off img{filter:grayscale(1);opacity:.25}.stamp small{display:block;color:#8a5a3a}
.nine{background:url(img/nine/bg_temple_stairs.webp) center/cover;padding:60px 10px 10px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:400px}
.card{aspect-ratio:3/4;perspective:600px;border:0;background:none}.card .in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.card.flip .in{transform:rotateY(180deg)}.card .f,.card .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:8px;background-size:cover;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;text-shadow:0 0 4px #000}
.card .b{background-image:url(img/nine/card_back_lion.webp)}.card .f{background-image:url(img/nine/card_front_temple.webp);transform:rotateY(180deg)}
.qv{position:fixed;inset:0;background:#000b;z-index:50;display:flex;align-items:center;justify-content:center}
.qp{background:#f6ecd6;color:#3a1a0a;border-radius:12px;padding:16px;width:92%;max-width:420px;max-height:90%;overflow:auto}
.qp h3{font-size:17px;margin-bottom:10px}.qp .ans{display:block;width:100%;text-align:left;margin:6px 0;padding:10px;border-radius:8px;border:1px solid #b88a4a;background:#fff8e8;font:inherit;font-size:15px}
.hint{margin-top:8px;font-size:14px;color:#7a1f12}.hint img{width:100%}
.beads{background:radial-gradient(#5a2a12,#1b0f0a);justify-content:center}#wheel{width:70vmin;height:70vmin;max-width:360px;max-height:360px;cursor:pointer}
.ph{background:#2a140b;justify-content:center;text-align:center;padding:20px}.ph h2{font-size:28px;margin:10px}
#ar{position:absolute;inset:0}#arui{position:absolute;left:0;right:0;bottom:0;z-index:30;padding:10px;background:#000a;font-size:14px;text-align:center}
.small{font-size:12px;color:#ddd}
