:root { --ink:#16120c; --paper:#f4ead7; --gold:#c6a15b; --muted:#8a7d68; --panel:rgba(12,10,8,0.9); }
    * { box-sizing: border-box; }
    html, body { margin:0; height:100%; overflow:hidden; background:#0c0a08; color:var(--paper);
      font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif; -webkit-user-select:none; user-select:none; }
    canvas { display:block; touch-action:none; }
    button { font-family:inherit; cursor:pointer; }
    .serif { font-family:"Cormorant Garamond",serif; }

    /* ---------- 封面 ---------- */
    #cover { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
      background:radial-gradient(ellipse at 50% 35%, rgba(40,32,22,0.72), rgba(8,7,5,0.94)); transition:opacity .6s; }
    #cover.hide { opacity:0; pointer-events:none; }
    .card { text-align:center; max-width:640px; padding:24px; max-height:100vh; overflow:auto; }
    .crest { width:62px; height:62px; margin:0 auto 16px; border:1px solid var(--gold); border-radius:50%;
      display:grid; place-items:center; color:var(--gold); font-family:"Cormorant Garamond",serif; font-size:22px; letter-spacing:.08em; }
    .card h1 { font-family:"Cormorant Garamond",serif; font-weight:500; font-size:clamp(27px,6vw,48px); letter-spacing:.07em; margin:0; color:#f6ecd8; }
    .virtual-gallery-label { font-family:"Jost",sans-serif; font-size:18px; letter-spacing:.12em; color:var(--gold); margin:12px 0; }
    .card h2 { font-weight:400; font-size:15px; letter-spacing:.5em; margin:6px 0 18px; color:var(--gold); }
    .card p { color:#b9ab93; font-size:14px; line-height:1.8; margin:0 0 18px; }
    .btn { appearance:none; border:1px solid var(--gold); background:transparent; color:var(--gold); letter-spacing:.2em;
      padding:12px 24px; margin:6px; font-size:14px; }
    .btn:hover { background:var(--gold); color:#1a140c; }
    .btn.solid { background:var(--gold); color:#1a140c; }
    .keys { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; margin-top:18px; font-size:12px; color:var(--muted); }
    .keys b { color:var(--paper); font-weight:500; border:1px solid #4a4133; padding:1px 6px; margin-right:4px; }
    #load-msg { font-size:12px; color:var(--muted); letter-spacing:.06em; min-height:1.5em; margin-top:12px; line-height:1.6; }
    #load-msg.warn { color:#e0a070; }
    .sub-row { display:flex; justify-content:center; flex-wrap:wrap; gap:0; }
    .file-btn { position:relative; display:inline-block; cursor:pointer; }
    .file-btn input { display:none; }
    .busy.wait { opacity:.45; pointer-events:none; }
    .dir-row { display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 6px; }
    .dir-lab { font-family:"Cormorant Garamond","Microsoft JhengHei",serif; font-size:15px; color:var(--gold); letter-spacing:.2em; margin-right:2px; }
    .dir-slot { display:inline-flex; align-items:stretch; border:1px solid rgba(198,161,91,.6); }
    .dir-slot.empty { border-style:dashed; opacity:.75; }
    .dir-slot.on { border-color:#f0d48c; box-shadow:0 0 0 1px #f0d48c, 0 0 12px rgba(240,212,140,.3); }
    .dir-main { background:transparent; border:0; color:var(--paper); padding:7px 10px; font-size:13px; display:inline-flex; gap:6px; align-items:center; max-width:190px; }
    .dir-main i { font-style:normal; width:18px; height:18px; border-radius:50%; border:1px solid var(--gold); color:var(--gold); display:grid; place-items:center; font-size:11px; flex:none; }
    .dir-main span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dir-slot.empty .dir-main span { color:var(--muted); }
    .dir-x { background:transparent; border:0; border-left:1px solid rgba(198,161,91,.35); color:var(--muted); padding:0 8px; font-size:14px; }
    .dir-x:hover { color:#f0d48c; }
    .dir-slot.empty:not(.extra) .dir-x { visibility:hidden; }
    .dir-add { background:transparent; border:1px dashed rgba(198,161,91,.6); color:#f0d48c; width:34px; height:32px; font-size:18px; }
    .dir-add[hidden] { display:none; }

    /* ---------- HUD ---------- */
    #hud { position:fixed; inset:0; pointer-events:none; z-index:10; }
    .brand { position:absolute; left:18px; top:14px; padding:8px 14px; background:rgba(12,10,8,.55); border-left:2px solid var(--gold);
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
    .brand strong { font-family:"Cormorant Garamond",serif; font-size:22px; font-weight:500; letter-spacing:.12em; display:block; }
    .brand span { font-size:12px; color:#c9b98f; letter-spacing:.2em; }
    #floor { position:absolute; left:18px; bottom:18px; padding:8px 14px; background:rgba(12,10,8,.55); font-size:13px; letter-spacing:.25em;
      border-left:2px solid var(--gold); }
    #tools { position:absolute; right:14px; top:14px; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; pointer-events:auto; max-width:70vw; }
    #tools button { background:rgba(12,10,8,.62); color:var(--paper); border:1px solid rgba(198,161,91,.55); padding:8px 12px; font-size:13px; letter-spacing:.12em;
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
    #tools button:hover, #tools button.on { background:var(--gold); color:#1a140c; }
    #hint { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); font-size:12px; color:#d8ccb4; letter-spacing:.12em;
      background:rgba(12,10,8,.45); padding:6px 14px; white-space:nowrap; transition:opacity 1s; }
    #cross { position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:rgba(255,255,255,.55); transition:all .15s; }
    #cross.hot { width:22px; height:22px; margin:-11px 0 0 -11px; background:transparent; border:2px solid #f0d48c; box-shadow:0 0 10px rgba(240,212,140,.6); }
    #aim { position:absolute; left:50%; top:50%; transform:translate(-50%, 22px); font-size:13px; letter-spacing:.12em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.9);
      opacity:0; transition:opacity .2s; white-space:nowrap; }
    #aim.show { opacity:1; }
    #resume { position:absolute; left:50%; top:62%; transform:translateX(-50%); font-size:13px; letter-spacing:.14em; color:#f4ead7; background:rgba(12,10,8,.55);
      border:1px solid rgba(198,161,91,.55); padding:7px 16px; opacity:0; transition:opacity .4s; white-space:nowrap; }
    #resume.show { opacity:.9; }
    #caption { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); text-align:center; opacity:0; transition:opacity .8s;
      font-family:"Cormorant Garamond","Microsoft JhengHei",serif; font-size:22px; letter-spacing:.14em; color:#fff; white-space:nowrap;
      text-shadow:0 1px 3px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.85); padding:4px 18px 2px; }
    #caption small { display:block; font-size:12px; letter-spacing:.3em; color:#e8d7b0; margin-top:1px; }
    #cross.off, #aim.off { display:none; }
    #bark { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); font-family:"Microsoft JhengHei","PingFang TC",sans-serif; font-size:38px; font-weight:700;
      color:#fff4d8; letter-spacing:.12em; text-shadow:0 2px 4px rgba(0,0,0,.6), 0 4px 18px rgba(0,0,0,.55); opacity:0; pointer-events:none; white-space:nowrap; }
    #bark.pop { animation:barkpop 1s ease-out; }
    @keyframes barkpop { 0% { opacity:0; transform:translate(-50%,-25%) scale(.55); } 14% { opacity:1; transform:translate(-50%,-50%) scale(1.1); }
      28% { transform:translate(-50%,-50%) scale(1); } 70% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-85%) scale(1); } }
    #pup-hint { position:absolute; left:50%; top:72%; transform:translateX(-50%); font-size:13px; letter-spacing:.12em; color:#f4ead7; background:rgba(12,10,8,.58);
      border:1px solid rgba(198,161,91,.55); padding:7px 16px; opacity:0; transition:opacity .4s; white-space:nowrap; pointer-events:none; }
    #pup-hint.show { opacity:.95; }
    #caption.show { opacity:1; }
    #toast { position:absolute; left:50%; top:70px; transform:translateX(-50%); background:rgba(12,10,8,.8); border:1px solid var(--gold);
      padding:8px 16px; font-size:13px; letter-spacing:.1em; opacity:0; transition:opacity .4s; }
    #toast.show { opacity:1; }
    #joy { position:absolute; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
      background:rgba(0,0,0,.18); display:none; }
    #joy.mobile-stick { position:fixed; left:max(24px, env(safe-area-inset-left)); bottom:max(30px, env(safe-area-inset-bottom)); top:auto; margin:0; width:140px; height:140px; border:2px solid rgba(198,161,91,.85); background:rgba(20,18,14,.35); pointer-events:auto; touch-action:none; z-index:12; }
    #joy.mobile-stick::after { content:"走動"; position:absolute; bottom:10px; left:0; width:100%; text-align:center; font-size:12px; color:#f4dfaf; pointer-events:none; }
    #joy.mobile-stick i { background:rgba(198,161,91,.9); width:54px; height:54px; margin:-27px 0 0 -27px; pointer-events:none; }
    @media (max-height:450px) { #joy.mobile-stick { width:110px; height:110px; bottom:max(16px, env(safe-area-inset-bottom)); } }
    #joy i { position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:rgba(255,255,255,.4); }
    #drop { position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center; background:rgba(12,10,8,.55);
      font-size:18px; letter-spacing:.2em; color:var(--gold); pointer-events:none; }

    /* ---------- 看畫 ---------- */
    #viewer { position:fixed; inset:0; z-index:20; display:none; background:rgba(8,7,5,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
    #viewer.open { display:flex; }
    .v-img { flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:40px; min-width:0; }
    .v-img img { max-width:100%; max-height:86vh; box-shadow:0 0 0 10px #1c1812, 0 20px 60px rgba(0,0,0,.6); }
    .v-info { width:340px; flex:0 0 340px; background:var(--panel); border-left:1px solid #3a3226; padding:28px 24px; overflow:auto; }
    .v-info label { display:block; font-size:11px; color:var(--muted); letter-spacing:.25em; margin:14px 0 4px; }
    .v-info input, .v-info textarea { width:100%; background:#18140f; border:1px solid #3a3226; color:var(--paper); padding:8px 10px; font:inherit; font-size:14px; -webkit-user-select:text; user-select:text; }
    .v-info input#v-title { font-family:"Cormorant Garamond","Microsoft JhengHei",serif; font-size:22px; }
    .v-info textarea { height:110px; resize:vertical; line-height:1.6; }
    .v-info .row { display:flex; gap:6px; flex-wrap:wrap; }
    .v-info .row button { flex:1; background:transparent; color:var(--paper); border:1px solid #4a4133; padding:7px 0; font-size:13px; }
    .v-info .row button.on { border-color:var(--gold); color:var(--gold); }
    .v-info .where { font-size:12px; color:var(--gold); letter-spacing:.2em; }
    .v-info .btn { width:100%; margin:16px 0 0; }
    .v-info .ro input, .v-info .ro textarea { pointer-events:none; }
    .btn.share { background:#141c33; color:#e9dcc0; border-color:rgba(198,161,91,.6); letter-spacing:.12em; }
    .btn.share:hover { background:var(--gold); color:#1a140c; }
    body.share .edit-only { display:none !important; }
    /* ---------- 控制台 ---------- */
    #panel { position:absolute; right:12px; top:12px; width:250px; pointer-events:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
    body.oncover #panel { visibility:hidden; }
    #p-toggle { background:rgba(12,10,8,.7); color:var(--paper); border:1px solid rgba(198,161,91,.55); padding:6px 12px; font-size:13px; letter-spacing:.12em;
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:inline-flex; gap:8px; align-items:center; }
    #p-toggle:hover { background:var(--gold); color:#1a140c; }
    #p-body { width:100%; max-height:calc(100vh - 110px); overflow:auto; overscroll-behavior:contain; background:rgba(12,10,8,.74); border:1px solid rgba(198,161,91,.45);
      backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:8px 9px 10px; display:flex; flex-direction:column; gap:4px; }
    #panel.hid #p-body { display:none; }
    #p-body button { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; background:transparent; color:var(--paper);
      border:1px solid rgba(198,161,91,.28); padding:6px 9px; font-size:13px; letter-spacing:.06em; text-align:left; }
    #p-body button:hover, #p-body button.on { background:var(--gold); color:#1a140c; border-color:var(--gold); }
    #p-body button:disabled { opacity:.35; pointer-events:none; }
    #p-body .lb { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    kbd { font-family:"Jost","Microsoft JhengHei",sans-serif; font-size:11px; line-height:1.5; border:1px solid currentColor; opacity:.72; padding:0 5px; border-radius:3px; white-space:nowrap; flex:none; }
    .btn kbd { margin-left:8px; letter-spacing:0; font-size:10px; vertical-align:2px; }
    .p-row { display:flex; gap:4px; } .p-row button { flex:1; min-width:0; }
    .p-sec { font-size:11px; color:var(--gold); letter-spacing:.3em; margin:7px 2px 1px; display:flex; justify-content:space-between; }
    .p-sec:first-child { margin-top:0; }
    .p-mem { display:flex; flex-wrap:wrap; gap:4px; }
    #p-body .p-mem button { width:auto; flex:1 0 30px; justify-content:center; padding:5px 0; }
    #p-body .p-mem button.empty { border-style:dashed; color:var(--muted); }
    .p-help { font-size:11px; color:#a99c85; line-height:1.75; margin-top:2px; }
    .p-help kbd { font-size:10px; margin-right:3px; }
    @media (max-width: 760px) { #panel { width:210px; } }
    .pano-hz { display:inline-flex; gap:4px; margin-left:4px; }
    .pano-hz[hidden] { display:none; }
    .pano-hz button { width:30px; font-size:12px; }
    body.share .v-info input, body.share .v-info textarea { pointer-events:none; background:transparent; border-color:transparent; padding-left:0; }
    @media (max-width: 760px) {
      #viewer.open { flex-direction:column; }
      .v-info { width:auto; flex:0 0 auto; max-height:46vh; border-left:0; border-top:1px solid #3a3226; }
      .v-img { padding:16px; }
      .card h1 { font-size:40px; }
      #hint { display:none; }
    }

    #gallery-plan { width:min(1100px,96vw); max-height:94dvh; padding:0; border:1px solid #716044; border-radius:12px; background:#151a1e; color:#f4ead7; box-shadow:0 20px 90px #0009; }
    #gallery-plan::backdrop { background:#000b; backdrop-filter:blur(5px); }
    .plan-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid #3b4247; }
    .plan-header h2 { margin:0; font-size:20px; font-weight:500; }
    .plan-close { border:1px solid #677078; border-radius:6px; padding:8px 14px; background:transparent; color:inherit; font-size:14px; }
    .plan-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; }
    .plan-map { padding:12px; min-width:0; overflow:auto; }
    #plan-svg { width:100%; min-width:700px; height:auto; display:block; background:#101519; border-radius:8px; }
    #plan-svg .plan-art { cursor:pointer; outline:none; }
    #plan-svg .plan-art circle { fill:#25313a; stroke:#d1ad6a; stroke-width:.055; }
    #plan-svg .plan-art:hover circle,#plan-svg .plan-art:focus circle,#plan-svg .plan-art.selected circle { fill:#d1ad6a; stroke:#fff1d4; stroke-width:.1; }
    #plan-svg .plan-art text { fill:#f9eed8; font-size:.74px; font-family:Arial,sans-serif; font-weight:600; text-anchor:middle; dominant-baseline:central; pointer-events:none; }
    #plan-svg .plan-art.selected text { fill:#111; }
    .plan-legend { margin:12px 6px 4px; font-size:14px; line-height:1.7; color:#c1c8cd; }
    .plan-details { padding:18px; border-left:1px solid #3b4247; min-width:0; }
    .plan-details label { display:block; font-size:14px; margin-bottom:8px; }
    #plan-art-select { width:100%; padding:10px; font-size:16px; color:inherit; background:#222a30; border:1px solid #677078; border-radius:6px; }
    #plan-preview { display:block; width:100%; height:145px; object-fit:contain; margin:18px 0 12px; background:#0c1013; }
    #plan-work-title { margin:0 0 8px; font-size:18px; overflow-wrap:anywhere; }
    #plan-work-meta { margin:0 0 18px; font-size:14px; color:#b7c0c8; }
    .plan-action { display:block; width:100%; margin-top:10px; padding:11px; border:1px solid #c6a15b; border-radius:6px; background:transparent; color:#f4ead7; font-size:16px; }
    .plan-action.primary { background:#c6a15b; color:#171a1d; }

    .layout-editor-controls{margin-bottom:20px;border-bottom:1px solid #455058;padding-bottom:16px;}
    .share .layout-editor-controls{display:none;}
    .layout-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}
    .layout-palette button{touch-action:none;background:#29353c;color:#e1e8ec;border:1px solid #516069;border-radius:8px;padding:12px 6px;font-size:15px;cursor:grab;}
    .layout-palette button.on{border-color:#f3cb81;background:#514839;}
    .layout-palette span{display:block;font-size:24px;margin-bottom:5px;}
    .layout-mark{touch-action:none;cursor:grab;}.layout-mark:focus{outline:none;filter:brightness(1.4);}
    .layout-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    .layout-fields input{box-sizing:border-box;width:100%;background:#17232a;color:white;border:1px solid #52636e;border-radius:5px;padding:8px;font-size:16px;}
    #layout-status{font-size:13px;color:#b7ccd8;line-height:1.6;min-height:42px;}
    .layout-history{display:flex;gap:6px;}.layout-history button{flex:1;}
    .layout-editor-controls [hidden]{display:none!important;} .plan-details{max-height:72vh;overflow:auto;}
    @media(max-width:650px){.plan-details{max-height:none;}}
    @media(max-width:650px){ .plan-layout{grid-template-columns:1fr;} .plan-details{border-left:0;border-top:1px solid #3b4247;} #plan-svg{max-height:none;} #plan-preview{height:100px;} .plan-header{padding:12px 14px;} }


    @media(min-width:651px){
      #gallery-plan{overflow:hidden;width:min(1320px,96vw);}
      .plan-layout{height:min(78dvh,840px);align-items:stretch;overflow:hidden;}
      .plan-map{display:flex;flex-direction:column;overflow:hidden;}
      #plan-svg{min-width:0;flex:1;min-height:0;width:100%;height:100%;}
      .plan-legend{flex:none;font-size:12px;}
      .plan-details{box-sizing:border-box;height:100%;max-height:none;overflow-y:auto;scrollbar-gutter:stable;}
    }
    .layout-snap{display:flex!important;align-items:center;gap:8px;color:#bdcdd7;}
    .layout-nudge{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0;}
    .layout-nudge button{padding:9px;background:#29353c;color:#e3e9ed;border:1px solid #56646f;border-radius:5px;font-size:18px;}
    #cover.has-snapshot{background-size:cover;background-position:center;}
    #cover.has-snapshot .card{background:rgba(12,15,18,.8);border:1px solid #726044;border-radius:12px;backdrop-filter:blur(8px);}
    #share-results[hidden]{display:none;}
    #share-results{margin:12px 0;padding:12px;border:1px solid #6d604a;border-radius:8px;font-size:13px;color:#c9bdab;}
    #share-results a{display:inline-block;color:#e7c781;padding:8px 12px;text-decoration:underline;}
    #scene-photos{padding:10px 0;margin:8px 0;border-top:1px solid #665738;border-bottom:1px solid #665738;}
    #scene-photo-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0;}
    #scene-photo-list button{padding:3px!important;display:block!important;width:100%;border:1px solid #726044;border-radius:5px;overflow:hidden;background:#171b1f;color:#cec3b0;font-size:11px;}
    #scene-photo-list button.selected{border:2px solid #f5d48c;box-shadow:0 0 0 1px #f5d48c;}
    #scene-photo-list img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;}
    #scene-photo-list .photo-empty{display:grid;place-items:center;aspect-ratio:16/9;border:1px dashed #625b50;border-radius:5px;color:#8f8b80;font-size:12px;}
    #scene-photo-status{color:#b6aea1;font-size:12px;line-height:1.5;margin:7px 2px;}
    .scene-photo-actions{display:flex;gap:6px;}.scene-photo-actions button{flex:1;min-width:0;padding:7px!important;font-size:12px!important;}
  
.share #gen-open,.share #gen-dialog{display:none!important}

#plan-svg .plan-art.plan-opto circle{fill:#f4c542;stroke:#d49b00} #plan-svg .plan-art.plan-opto text{fill:#302600}