:root{
  --paper:#f4ecd8; --paper2:#ebe0c6; --ink:#2b2420; --ink2:#5d5348;
  --red:#b23a2e; --red2:#8e2b21; --green:#3d6b4f; --line:#cbbd9c;
  --serif:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","Source Han Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;color:var(--ink);font-family:var(--sans);font-size:18px}
.hidden{display:none!important}
.paper{background:var(--paper);background-image:radial-gradient(rgba(120,90,40,.06) 1px,transparent 1px);background-size:6px 6px}
.screen{position:fixed;inset:0;z-index:20;overflow-y:auto;padding:28px 20px 40px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.screen>*{max-width:640px;width:100%;flex-shrink:0}
h1,h2{font-family:var(--serif);margin:.2em 0;letter-spacing:.06em}
h1{font-size:2.2rem} h2{font-size:1.6rem}
.sub{margin:0;color:var(--ink2)}
.seal{width:84px;height:84px;border:3px solid var(--red);color:var(--red);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.3rem;line-height:1.15;transform:rotate(-6deg);background:rgba(178,58,46,.06)}
.field{display:flex;flex-direction:column;gap:8px;text-align:left;font-weight:600}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr)}
.pick button{flex:1 1 auto;min-height:52px;border:2px solid var(--line);background:#fffaf0;border-radius:10px;font-size:1.05rem;color:var(--ink);font-family:inherit}
.pick button.on{border-color:var(--red);background:var(--red);color:#fff}
input[type=text],textarea{width:100%;font-size:1.1rem;padding:12px;border:2px solid var(--line);border-radius:10px;background:#fffaf0;font-family:inherit;color:var(--ink)}
textarea{min-height:64px;resize:vertical}
.btn{min-height:52px;padding:10px 18px;border-radius:12px;border:2px solid var(--ink);background:transparent;font-size:1.05rem;font-family:inherit;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.btn.primary:active{background:var(--red2)}
.btn.big{min-height:64px;font-size:1.3rem;width:100%}
.btn.ghost{background:rgba(255,250,240,.92)}
.tiny{font-size:.85rem;color:var(--ink2);margin:0}
.tiny a{color:var(--ink2)}
.story{font-family:var(--serif);font-size:1.15rem;line-height:1.7;text-align:left}
.safety,.cluebox{border-radius:12px;padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:4px;line-height:1.6}
.safety{background:#fbe6c8;border-left:6px solid #d08a2c}
.cluebox{background:#fffaf0;border:2px dashed var(--red)}
.cluebox b,.safety b{font-size:.9rem;color:var(--red)}
.safety b{color:#9a5a10}
.center{text-align:center;align-items:center}
.big{font-size:1.3rem;font-weight:700}

/* 開始、簡介 */
.pick.col{flex-direction:column}
.pick.col button{display:flex;flex-direction:column;align-items:flex-start;padding:10px 14px;text-align:left;gap:2px}
.pick.col button small{font-size:.85rem;opacity:.85}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.rules span{background:#fffaf0;border:2px solid var(--line);border-radius:10px;padding:8px 10px;text-align:left;font-size:.9rem;line-height:1.4;display:flex;flex-direction:column}
.rules span b{color:var(--red);font-size:1.05rem}
.rules span:empty{display:none}
.mapThumb{border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff}
.mapThumb img,.mapThumb svg{display:block;width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.85rem;color:var(--ink2);justify-content:center}
.legend span{display:inline-flex;align-items:center;gap:5px}
.lg{display:inline-block;width:18px;height:14px;border-radius:3px}
.lg.tri{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:15px solid #c8279a;border-radius:0}
.lg.ctl{width:16px;height:16px;border:3px solid #c8279a;border-radius:50%}
.lg.fin{width:16px;height:16px;border:3px double #c8279a;border-radius:50%}
.lg.yel{background:#ffd75e}.lg.gry{background:#9a9a9a;border:1px solid #222}
.lg.oob{background:repeating-linear-gradient(45deg,#a03c96 0 3px,#f4e6f2 3px 7px)}

/* 頂部、底部列 */
.bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;background:rgba(43,36,32,.9);color:#fff;font-size:.95rem}
.bar.clear{background:rgba(43,36,32,.7)}
.bar .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.35rem;background:rgba(255,255,255,.12);border-radius:8px;padding:2px 10px}
.timer.warn{background:#d08a2c}
.timer.over{background:var(--red);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.6}}
.score{font-weight:700}
.bottom{position:absolute;bottom:0;left:0;right:0;z-index:5;display:flex;gap:10px;padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(244,236,216,.96)}
.bottom .btn{flex:1}
.bottom #scanBtn{flex:2;font-size:1.2rem}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>.btn{flex:1}
.row.wrap>.btn{flex:1 1 100%}
.btn.sm{min-height:42px;font-size:.95rem;padding:6px 12px}
.toast{position:absolute;z-index:8;left:50%;top:84px;transform:translateX(-50%);background:rgba(43,36,32,.94);color:#fff;padding:12px 18px;border-radius:12px;width:max-content;max-width:90vw;text-align:center;line-height:1.5}

/* 地圖 */
#play{position:fixed;inset:0;z-index:10;background:#f3efe4}
#mapWrap{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}
#mapRot{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .15s linear}
#mapStage{position:absolute;left:0;top:0;transform-origin:0 0}
#mapStage img,#mapStage svg{position:absolute;left:0;top:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
#mapOver .ctl{cursor:pointer}
.mapTools{position:absolute;right:12px;top:72px;z-index:6;display:flex;flex-direction:column;gap:8px}
.round{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:#fffaf0;font-size:1.3rem;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.round.on{background:var(--red);border-color:var(--red);color:#fff}
.compassMini{position:absolute;left:12px;top:72px;z-index:6;width:48px;height:48px;border-radius:50%;background:#fffaf0;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
.compassMini i{position:absolute;inset:6px;background:linear-gradient(var(--red) 50%,#888 50%);clip-path:polygon(50% 0,62% 50%,50% 100%,38% 50%);transition:transform .15s linear}
.compassMini span{position:absolute;top:-18px;font-size:.75rem;font-weight:800}
.frags{position:absolute;left:12px;bottom:92px;z-index:6;background:rgba(255,250,240,.95);border:2px solid var(--red);border-radius:10px;padding:6px 10px;font-size:.85rem;display:flex;gap:4px;align-items:center}
.frags i{font-style:normal;font-family:var(--serif);font-weight:800;background:var(--red);color:#fff;border-radius:6px;padding:0 6px;font-size:1.05rem}
.ctlInfo{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:7;background:#fffaf0;border:2px solid #c8279a;border-radius:12px;padding:10px 16px;line-height:1.5;width:max-content;max-width:90vw}

/* 掃描 */
#scan{position:fixed;inset:0;z-index:10;pointer-events:none}
#scan .bar,#scan .bottom{pointer-events:auto}
#scan .bottom{background:rgba(244,236,216,.9)}
.scanHint{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);text-align:center;color:#fff;text-shadow:0 1px 3px #000}
.scanHint .frame{width:62vmin;height:62vmin;border:4px solid rgba(255,255,255,.85);border-radius:18px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.94);opacity:.6}}

/* 疊圖 */
#ovl{position:fixed;inset:0;z-index:12}
#ovlImg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.ovlCtl{position:absolute;left:0;right:0;bottom:0;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:rgba(244,236,216,.92);display:flex;flex-direction:column;gap:8px;text-align:center}
.ovlCtl p{margin:0}
.ovlCtl input{width:100%}

/* Sheets */
.sheet{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center}
.sheetInner{width:100%;max-width:720px;max-height:92vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;animation:up .3s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.cardHead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.host{background:var(--red);color:#fff;border-radius:999px;padding:4px 14px;font-weight:700}
.place{color:var(--ink2);font-size:.9rem}
.question{font-weight:700;font-size:1.2rem;line-height:1.6;border-top:2px solid var(--line);padding-top:12px;margin:0}
.obs{display:flex;flex-direction:column;gap:6px;text-align:left}
.obs span{font-size:.95rem;color:var(--ink2)}
.opts{display:flex;flex-direction:column;gap:8px}
.opts button{min-height:52px;text-align:left;padding:10px 14px;border:2px solid var(--line);background:#fffaf0;border-radius:10px;font-size:1.05rem;font-family:inherit;color:var(--ink)}
.opts button.on{border-color:var(--red);background:#f6d9d3}
.feedback{min-height:1.4em;margin:0;font-weight:700;color:var(--red)}
.feedback.ok{color:var(--green)}
.hint{background:#fff3c4;border-radius:10px;padding:10px 12px;margin:0;line-height:1.6}
.cnum{background:#fff;border:3px solid #c8279a;color:#c8279a;border-radius:50%;min-width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem}
.compass{display:flex;flex-direction:column;align-items:center;gap:6px}
.compass .dial{position:relative;width:180px;height:180px;border-radius:50%;border:4px solid var(--ink);background:#fffaf0;transition:transform .15s linear}
.compass .dial b{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-weight:800}
.compass .dial .target{position:absolute;inset:0;transform-origin:50% 50%}
.compass .dial .target::before{content:"";position:absolute;left:50%;top:-14px;transform:translateX(-50%);border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:26px solid var(--red)}
.compass .dial .needle{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--ink)}
.compass p{margin:0;font-weight:700;text-align:center}
.compass.ok .dial{border-color:var(--green);box-shadow:0 0 0 6px rgba(61,107,79,.25)}
.compass.ok p{color:var(--green)}
.lock{display:flex;gap:10px;justify-content:center}
.wheel{display:flex;flex-direction:column;align-items:center;background:#2b2420;border-radius:12px;padding:6px}
.wheel b{font-size:2.4rem;color:#ffd75e;font-variant-numeric:tabular-nums;width:56px;text-align:center;font-family:var(--serif)}
.wheel button{width:56px;height:44px;border:none;border-radius:8px;background:#5d5348;color:#fff;font-size:1.1rem}
.fragGot{font-size:1.1rem;display:flex;align-items:center;gap:10px}
.fragGot b{font-family:var(--serif);font-size:2.4rem;background:var(--red);color:#fff;border-radius:12px;padding:0 14px}
.note{color:var(--ink2);margin:0;line-height:1.6}
.tiles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tiles button{font-family:var(--serif);font-size:2rem;font-weight:800;width:64px;height:64px;border-radius:12px;border:3px solid var(--red);background:#fffaf0;color:var(--red2)}
.tiles button:disabled{opacity:.3}
.scoreBox{display:flex;flex-direction:column;align-items:center;gap:6px}
.scoreBox .total{font-size:3.4rem;font-weight:800;color:var(--red);font-family:var(--serif)}
.scoreBox .total small{font-size:1.2rem;margin-left:4px}
.scoreBox .parts{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.scoreBox .parts span{background:#fffaf0;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.9rem}
.scoreBox .parts .neg{color:var(--red);border-color:var(--red)}
.tablewrap{overflow-x:auto}
.splits{border-collapse:collapse;width:100%;font-size:.9rem;background:#fffaf0}
.splits th,.splits td{border:1px solid var(--line);padding:5px 6px;text-align:center}
.splits th{background:#efe2c8}
.badge{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#e0a93a);border:5px solid var(--red);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--red2);padding:10px;text-align:center;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.2) rotate(-30deg)}}
.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.badges span{border:2px solid var(--red);color:var(--red2);border-radius:999px;padding:6px 12px;background:#fff3c4;font-weight:700}
.log{white-space:pre-wrap;text-align:left;background:#fffaf0;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:.85rem;max-height:220px;overflow:auto}

/* MindAR 影像 */
#arRoot{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000}
#arRoot a-scene{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.mindar-ui-overlay{display:none!important}

/* 說明表 */
.descWrap{display:flex;flex-direction:column;gap:6px;text-align:left}
.descWrap b{color:var(--red)}
.descWrap small{color:var(--ink2);line-height:1.5}
table.desc{border-collapse:collapse;width:100%;background:#fffaf0;font-size:1rem}
table.desc th,table.desc td{border:1.5px solid var(--ink);padding:6px 8px;text-align:center}
table.desc th{background:#efe2c8;font-size:.9rem}
table.desc td.code{font-weight:800;color:#c8279a;font-size:1.15rem}
table.desc td.l{text-align:left}
.lg.nl{width:4px;height:16px;background:#1f6fd1;border-radius:0}