:root{--red:#9e1b1b;--red2:#6e1010;--gold:#e8bd4e;--gold2:#b8862a;--ink:#2a1a12;--paper:#fbf5e8;--panel:rgba(22,12,8,.78);}
.visit-hud{position:fixed;left:16px;top:16px;max-width:min(360px,70vw);z-index:15;background:rgba(25,36,31,.9);border:1px solid #dfbe72;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;color:#fff0cd}.visit-hud strong{font-size:19px}.visit-hud small{line-height:1.6}.visit-hud .btn{font-size:14px;padding:7px 16px}body.interior #tasks,body.interior #pins,body.interior [data-top="map"],body.interior [data-top="pins"],body.interior [data-top="reset"]{display:none!important}@media(max-width:600px){.visit-hud{max-width:64vw;font-size:13px;left:8px;top:8px}.visit-hud strong{font-size:16px}}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:"Noto Serif TC","PMingLiU",serif;color:#fff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#app canvas{display:block;touch-action:none}
.hidden{display:none!important}
.panel{background:var(--panel);border:1px solid rgba(232,189,78,.55);border-radius:10px;backdrop-filter:blur(4px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
#tasks{position:fixed;left:14px;top:14px;width:280px;padding:10px 12px;font-size:14px;z-index:10}
.panel-title{display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-weight:900;font-size:16px;letter-spacing:2px;cursor:pointer}
#taskList{margin:8px 0 0;padding:0;list-style:none}
#taskList li{padding:3px 0 3px 24px;position:relative;line-height:1.45;color:#d9cfc4;cursor:pointer;border-radius:4px}
#taskList li:hover{background:rgba(232,189,78,.15)}
#taskList li::before{content:'';position:absolute;left:3px;top:7px;width:12px;height:12px;border:1.5px solid #a08a70;border-radius:50%}
#taskList li.done{color:#8f8579;text-decoration:line-through}
#taskList li.done::before{background:#5aa469;border-color:#5aa469}
#taskList li.current{color:#fff;font-weight:700}
#taskList li.current::before{border-color:var(--gold);box-shadow:0 0 6px var(--gold);background:rgba(232,189,78,.4)}
#inventory{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(232,189,78,.35);font-size:13px;color:#f1e4c8;line-height:1.6}
#tasks.collapsed #taskList,#tasks.collapsed #inventory{display:none}
#topBtns{position:fixed;right:14px;top:14px;display:flex;gap:8px;z-index:10}
#menuItems{display:flex;gap:8px}
#menuToggle,.menu-head{display:none}
#lockHint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9;pointer-events:none;background:rgba(20,10,8,.62);color:#f3e6c8;font:700 13px "Noto Serif TC",serif;padding:6px 14px;border-radius:999px;border:1px solid rgba(232,189,78,.45);white-space:nowrap}
#lockHint kbd{background:#f3e6c8;color:#5a1d1d;border-radius:4px;padding:0 6px;margin:0 2px;font:700 12px sans-serif}
/* 螢幕較窄時：右上按鈕收進「操作選單」下拉選單 */
@media (max-width:1000px){
  #menuToggle{display:block}
  #menuItems{display:none;position:absolute;right:0;top:calc(100% + 6px);flex-direction:column;gap:6px;min-width:190px;background:var(--panel);border:1px solid rgba(232,189,78,.6);border-radius:10px;padding:8px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
  #topBtns.open #menuItems{display:flex}
  .menu-head{display:block;color:var(--gold);font:900 15px "Noto Serif TC",serif;letter-spacing:2px;padding:2px 4px 6px;border-bottom:1px solid rgba(232,189,78,.35)}
  #menuItems .tbtn{width:100%;text-align:left}
  #menuItems .tbtn .lbl{display:inline}
}
.tbtn{background:var(--panel);color:var(--gold);border:1px solid rgba(232,189,78,.6);border-radius:8px;padding:8px 12px;font:700 14px "Noto Serif TC",serif;cursor:pointer}
.tbtn:hover{background:rgba(110,16,16,.85)}
#crosshair{position:fixed;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 0 2px rgba(0,0,0,.35);z-index:5;pointer-events:none;transition:transform .15s,background .15s}
#crosshair.active{transform:scale(1.9);background:var(--gold)}
#prompt{position:fixed;left:50%;bottom:15%;transform:translateX(-50%);z-index:10;padding:10px 20px;font:700 16px "Noto Serif TC",serif;color:#fff;background:var(--panel);border:1px solid var(--gold);border-radius:999px;cursor:pointer;white-space:nowrap}
#prompt kbd{display:inline-block;margin-left:10px;padding:0 8px;border-radius:4px;background:var(--gold);color:var(--ink);font-family:inherit}
#toasts{position:fixed;left:50%;top:72px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:45;pointer-events:none;width:min(92vw,560px)}
.toast{background:rgba(110,16,16,.93);border:1px solid var(--gold);color:#fff;padding:10px 16px;border-radius:10px;font-size:15px;line-height:1.55;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.4);animation:tin .3s ease-out}
.toast.ok{background:rgba(30,82,46,.93)}
.toast.out{opacity:0;transition:opacity .5s}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#joystick{position:fixed;left:22px;bottom:26px;width:130px;height:130px;border-radius:50%;background:rgba(0,0,0,.25);border:2px solid rgba(232,189,78,.5);z-index:10;pointer-events:none}
#stick{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(232,189,78,.65)}
#actBtn{position:fixed;right:22px;bottom:36px;width:88px;height:88px;border-radius:50%;border:3px solid var(--gold);background:rgba(158,27,27,.88);color:#fff;font:900 18px "Noto Serif TC",serif;z-index:10}
#actBtn:disabled{opacity:.35}
#resume{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.35);z-index:20;font-size:24px;font-weight:900;color:var(--gold);cursor:pointer;text-shadow:0 2px 6px #000;gap:8px}
#resume small{font-size:14px;color:#eee;font-weight:400}
#intro{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(70,14,14,.72),rgba(0,0,0,.9));padding:16px}
.intro-card{max-width:620px;width:100%;max-height:94vh;overflow:auto;text-align:center;padding:26px 24px;background:rgba(25,10,6,.88);border:2px solid var(--gold2);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.intro-card h1{margin:0;font-size:46px;letter-spacing:12px;color:var(--gold);text-shadow:0 3px 10px #000}
.intro-card .sub{color:#e9dcc6;margin:6px 0 16px;letter-spacing:3px}
.intro-card .ctl{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;font-size:14px;color:#eadfcb;margin:14px 0}
.intro-card .ctl div{background:rgba(255,255,255,.06);border:1px solid rgba(232,189,78,.3);border-radius:8px;padding:10px 12px;line-height:1.7}
.intro-card .ctl b{color:var(--gold)}
.intro-card .note{font-size:12px;color:#b8ab98;margin-top:12px}
.btn{cursor:pointer;border:none;border-radius:999px;padding:10px 24px;font:700 16px "Noto Serif TC",serif;transition:transform .15s,background .15s}
.btn:active{transform:scale(.96)}
.btn-red{background:var(--red);color:#fff;border:2px solid var(--gold)}
.btn-red:hover{background:var(--red2)}
.btn-light{background:#fff;color:var(--ink);border:1px solid #c9b79c}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:40;padding:12px;animation:tin .2s}
.modal-back.bottom{background:transparent;align-items:flex-end;padding-bottom:4vh;pointer-events:none}
.modal-back.bottom .modal{pointer-events:auto}
.modal{background:var(--paper);color:var(--ink);width:min(520px,100%);max-height:90vh;display:flex;flex-direction:column;border-radius:12px;border:3px solid var(--gold2);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.modal.wide{width:min(960px,100%)}
.modal-head{background:linear-gradient(#a51e1e,#7a1212);color:var(--gold);padding:11px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--gold2)}
.modal-head h3{margin:0;font-size:20px;letter-spacing:2px}
.modal-head .x{background:none;border:none;color:var(--gold);font-size:20px;cursor:pointer;padding:0 4px}
.modal-body{padding:16px;overflow:auto;line-height:1.7;-webkit-user-select:text;user-select:text}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.menu-list{display:flex;flex-direction:column;gap:10px}
.menu-item{display:flex;align-items:center;gap:12px;text-align:left;padding:11px 14px;border-radius:10px;border:1px solid #d9c6a5;background:#fff;cursor:pointer;font:inherit;color:inherit;width:100%}
.menu-item:hover:not([disabled]){border-color:var(--red);background:#fff5f0}
.menu-item[disabled]{opacity:.5;cursor:not-allowed}
.menu-item b{display:block;font-size:16px}
.menu-item .ic{font-size:26px;width:34px;text-align:center}
.menu-item small{color:#7a6a5a}
.offer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.offer{background:#fff;border:2px solid #e5d8c0;border-radius:10px;padding:10px;text-align:center;cursor:pointer;position:relative}
.offer.sel{border-color:var(--red);background:#fff1ee}
.offer.sel::after{content:'✓';position:absolute;top:6px;right:8px;background:var(--red);color:#fff;border-radius:50%;width:20px;height:20px;font-size:12px;line-height:20px}
.offer .em{font-size:34px}
.offer .nm{font-weight:700;font-size:14px}
.offer .ds{font-size:12px;color:#7a6a5a;border-top:1px solid #eee;margin-top:4px;padding-top:4px}
.tips{background:#fff6d8;border:1px solid #e8c766;border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:14px}
.tips ul{margin:4px 0 0;padding-left:18px;display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.guide{background:#fff;border:1px solid #d9c6a5;border-radius:10px;padding:10px 12px;cursor:pointer}
.guide b{color:var(--red);font-size:16px}
.guide p{margin:6px 0 0;font-size:13px;color:#5a4a3a;display:none}
.guide.open{background:#fffaf0;border-color:var(--gold2)}
.guide.open p{display:block}
.form label{display:block;font-weight:700;font-size:14px;margin:10px 0 4px}
.form input,.form select,.form textarea{width:100%;padding:8px 10px;border:1px solid #c9b79c;border-radius:6px;font:inherit;background:#fff;color:var(--ink)}
.form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.exam{background:#eef5ff;border:1px solid #bcd3f5;border-radius:8px;padding:2px 10px 10px;margin-top:10px}
.review p{margin:4px 0}
.review .wishbox{background:#f3ede2;border-radius:6px;padding:8px 10px;white-space:pre-wrap}
.wish-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.wish-tabs button{border:1px solid #c9b79c;background:#fff;border-radius:999px;padding:5px 12px;font:inherit;cursor:pointer;color:var(--ink)}
.wish-tabs button.on{background:var(--red);color:#fff;border-color:var(--red)}
.wish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.wish{background:#b3202a;color:#ffe08a;border-top:4px solid var(--gold);border-radius:4px;padding:10px;cursor:pointer;font-size:14px;word-break:break-all}
.wish small{display:block;color:#f6d6a8;margin-top:6px}
.result-big{font-size:30px;font-weight:900;color:var(--red);text-align:center;margin:0}
.center{text-align:center}
.done-list{list-style:none;padding:0;margin:10px 0;font-size:15px}
.tpl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 6px;font-size:13px;color:#7a6a5a}
.chip{border:1px solid #d9b77a;background:#fff8e6;color:#7a4a10;border-radius:999px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer}
.chip:hover{background:#ffefc2;border-color:var(--gold2)}
@media (max-width:768px){
  #tasks{width:230px;font-size:14px;left:8px;top:8px;padding:9px}
  .panel-title{font-size:16px}
  .tbtn{padding:7px 10px;font-size:14px}
  #menuItems .tbtn{font-size:15px;padding:9px 12px}
  .menu-head{font-size:16px}
  .modal-body{font-size:15.5px}
  .toast{font-size:15.5px}
  #lockHint{font-size:14px}
  .tbtn .lbl{display:none}
  #topBtns{right:8px;top:8px;gap:5px}
  .intro-card h1{font-size:32px;letter-spacing:6px}
  .intro-card .ctl{grid-template-columns:1fr}
  #prompt{bottom:auto;top:60%;font-size:16px}
  .tips ul{grid-template-columns:1fr}
}
.info{background:#fff;border:1px solid #e6d3ad;border-left:4px solid var(--gold2);border-radius:0 8px 8px 0;padding:10px 14px;margin:0 0 12px;font-size:14.5px;line-height:1.75}
.info p{margin:0 0 6px}.info p:last-child{margin-bottom:0}
.info ul{margin:2px 0 6px;padding-left:20px}
.info-h{font-weight:900;color:var(--red);margin-bottom:4px;letter-spacing:1px}

/* 俯瞰：設施標籤、縮放鈕、視角切換 */
#pins{position:fixed;inset:0;pointer-events:none;z-index:6}
#pins.off{visibility:hidden}
.pin{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border:none;border-radius:999px;background:rgba(255,255,255,.93);color:#22302a;font:700 13px "Noto Sans TC","Microsoft JhengHei",sans-serif;box-shadow:0 2px 6px rgba(0,0,0,.18);cursor:pointer;white-space:nowrap}
.pin b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1f4d3a;color:#fff;font-size:12px}
.pin:hover{background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.pin.compact{font-size:12px;padding:2px 8px 2px 2px}
.pin.compact b{width:19px;height:19px;font-size:11px}
#zoomBtns{position:fixed;right:14px;bottom:140px;display:flex;flex-direction:column;gap:6px;z-index:10}
#zoomBtns button{width:40px;height:40px;border-radius:10px;border:1px solid rgba(232,189,78,.6);background:var(--panel);color:var(--gold);font:900 22px/1 "Noto Serif TC",serif;cursor:pointer}
body.fp .ov-only{display:none!important}
body:not(.fp) #crosshair{display:none}
body.fp #pins{display:none}
@media (max-width:768px){#zoomBtns{bottom:140px;right:8px}.pin{font-size:12.5px}}

.visit-levels{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.visit-levels .btn{font-size:12px;padding:7px 9px}.visit-levels button[aria-pressed="true"]{background:#d2b66e;color:#263a31;opacity:1}.visit-hud [data-floor-status]{display:block;color:#f5da91;margin-top:9px}

.room-reading details{border-bottom:1px solid #d4c5a5;padding:10px 0}.room-reading summary{cursor:pointer;color:#70402e;font-weight:700}.room-reading p{white-space:pre-wrap;line-height:1.8}.room-reading small{display:block;margin-top:16px;color:#685f50}

/* 室內參觀與閱讀：白底黑字，提高對比。 */
.visit-hud{background:#fff;border-color:#b7b7b7;color:#000;box-shadow:0 3px 14px #0002}
.visit-hud strong,.visit-hud small,.visit-hud [data-floor-status]{color:#000}
.visit-hud .btn{background:#fff;color:#000;border:1px solid #aaa}
.visit-hud .btn:hover,.visit-levels button[aria-pressed="true"]{background:#f1f1f1;color:#000;border-color:#333}
.reading-modal,.reading-modal .modal-head{background:#fff;color:#000}
.reading-modal .modal-head .x,.room-reading summary,.room-reading p,.room-reading small{color:#000}
.room-reading details{border-bottom-color:#bbb}

/* 室內左上選單：可折疊 */
.visit-hud-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.visit-hud .visit-hud-fold{flex:none;font:inherit;font-size:13px;line-height:1;padding:6px 10px;border:1px solid #aaa;border-radius:999px;background:#fff;color:#000;cursor:pointer}
.visit-hud .visit-hud-fold:hover{background:#f1f1f1;border-color:#333}
.visit-hud.folded{padding:8px 10px;gap:0}
.visit-hud.folded>:not(.visit-hud-head){display:none!important}
.visit-hud.folded strong{font-size:16px}
