/* =========================================================
   不設限虛擬樂園 — 樣式
   ========================================================= */
:root{
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --wood-d:#3B2414; --wood:#6B4425; --wood-l:#A9773F; --plank:#C9A06A;
  --red:#9B1F2E; --red-d:#6D1220; --gold:#D8B565; --gold-l:#F1DB9C;
  --paper:#FBF5E8; --paper-2:#F3E8D2; --ink:#2E1F14; --muted:#77634F; --line:#DCC9A7;
  --leaf:#3F7A2F; --sky:#9FD3F2;
  --topbar:64px;
  --u:12.8px;               /* 場景寬度的 1%，由 app.js 更新 */
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#1E140C;
  background-image:radial-gradient(ellipse at 50% 0,#3A2716 0,#1E140C 70%);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--red)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- Top bar：木頭招牌 ---------- */
.topbar{position:sticky;top:0;z-index:50;height:calc(var(--topbar) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 12px 0;display:flex;align-items:center;gap:12px;
  background:linear-gradient(#7A4E2A,#5A361C);border-bottom:3px solid #3B2414;
  box-shadow:0 4px 14px rgba(0,0,0,.45)}
.topbar::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;
  background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(0,0,0,.35) 9px 10px)}
/* Logo：吊掛招牌，略為垂到木條下方 */
.brand{position:relative;z-index:2;flex:none;display:block;align-self:flex-start;line-height:0;
  margin-top:calc(-1 * env(safe-area-inset-top,0px));height:calc(var(--topbar) + 34px);transition:transform .25s}
.brand img{height:100%;width:auto;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.brand:hover{transform:rotate(-2deg);transform-origin:50% 0}
.where{position:relative;color:#F4E3C4;font-size:14px;display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;min-width:0}
.where b{color:#fff}
.where .sep{opacity:.5}
.where button{background:none;border:0;padding:0;color:#F4E3C4;text-decoration:underline;text-underline-offset:3px}
.tools{position:relative;margin-left:auto;display:flex;gap:6px}
.tool{display:flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:10px;border:1.5px solid rgba(255,230,190,.35);
  background:rgba(40,22,10,.35);color:#FFF1D8;font-size:14px;font-weight:700;transition:background .2s,border-color .2s}
.tool:hover{background:rgba(40,22,10,.6);border-color:var(--gold)}
.tool[aria-pressed="true"]{background:var(--gold);color:var(--wood-d);border-color:var(--gold-l);box-shadow:0 0 18px rgba(255,214,120,.7)}
.tool-key{background:linear-gradient(#B02637,var(--red-d));border-color:var(--gold)}
.pts{background:var(--gold-l);color:var(--wood-d);border-radius:999px;padding:0 8px;font-size:12px;line-height:20px;font-variant-numeric:tabular-nums}
.ico{width:18px;height:18px;display:inline-block;background:currentColor;flex:none;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico-map{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E")}
.ico-lobby{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9H3z'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E")}
.ico-door{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 21V9a7 7 0 0 1 14 0v12z'/%3E%3Ccircle cx='15' cy='14' r='1' fill='%23000'/%3E%3C/svg%3E")}
.ico-bulb{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.9.7 1.5 1.7 1.5 2.6v.5h4v-.5c0-.9.6-1.9 1.5-2.6A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.ico-help{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14M12 17.5v.01'/%3E%3C/svg%3E")}
.ico-key{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M17 6l3 3M15 8l2 2'/%3E%3C/svg%3E")}
@media (max-width:980px){.tool .tl{display:none}.tool{padding:0 10px}.tool-key .tl{display:inline}}
@media (max-width:640px){.where{display:none}.tool-key .tl{display:none}.brand{height:calc(var(--topbar) + 14px)}}
@media (max-width:420px){.brand{height:var(--topbar)}.tools{gap:4px}.tool{padding:0 8px}}

/* ---------- 場景舞台（全螢幕） ---------- */
html.scene-page,html.scene-page body{height:100%;overflow:hidden;background:#140D07}
.theatre{position:fixed;inset:0;overflow:hidden;background:#140D07}
/* 背景：同一張場景圖模糊放大，填滿螢幕比例不同時的空白 */
.backdrop{position:absolute;inset:-40px;background:center/cover no-repeat;filter:blur(28px) brightness(.55) saturate(1.1);transform:scale(1.08);transition:background-image .6s}
.stage{position:absolute;left:0;top:0;width:100vw;height:64vw;overflow:hidden;background:#000;
  transition:top .8s cubic-bezier(.6,.05,.3,1),left .8s cubic-bezier(.6,.05,.3,1);box-shadow:0 0 60px rgba(0,0,0,.55)}
.stage.no-anim{transition:none}
.layer{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform,opacity}
.layer img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;transition:filter .6s}
.layer.anim{transition:transform .8s cubic-bezier(.6,.05,.3,1),opacity .8s ease,filter .8s}
.spots{position:absolute;left:0;right:0;display:none;flex-wrap:wrap;gap:8px;justify-content:center;align-content:flex-start;padding:0 12px;overflow:auto}
.spots.show{display:flex}
.spots button{min-height:42px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(216,181,101,.6);background:rgba(70,42,20,.75);color:#FFF1D8;font-size:14px;font-weight:700;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------- 浮動選單 ---------- */
.dock{position:fixed;z-index:50;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));
  display:flex;align-items:center;gap:6px;padding:6px;border-radius:16px;max-width:calc(100vw - 24px);
  background:rgba(58,34,16,.72);border:1.5px solid rgba(216,181,101,.45);box-shadow:0 10px 28px rgba(0,0,0,.4);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);transition:opacity .3s,transform .3s}
.dock .where{color:#F4E3C4;font-size:13px;padding:0 8px 0 6px;display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;min-width:0}
.dock .where b{color:#fff}
.dock .where button{background:none;border:0;padding:0;color:#F4E3C4;text-decoration:underline;text-underline-offset:3px}
.dock .tools{display:flex;gap:4px;margin:0}
.dock .tool{height:40px;background:rgba(30,16,6,.35);border-color:rgba(255,230,190,.25)}
.dock-toggle{width:34px;height:40px;border-radius:10px;border:1.5px solid rgba(255,230,190,.25);background:rgba(30,16,6,.35);color:#FFF1D8;display:grid;place-items:center}
.ico-chev{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
.ico-menu{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
.ico-full{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E")}
.ico-exit{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M20 9h-5V4M15 20v-5h5M4 15h5v5'/%3E%3C/svg%3E")}
/* 收合：只留一顆選單鈕 */
.dock.collapsed .where,.dock.collapsed .tools{display:none}
.dock.collapsed .dock-toggle{width:44px;height:44px}
.dock.idle{opacity:.35}
.dock.idle:hover,.dock.idle:focus-within{opacity:1}
@media (max-width:1180px){.dock .where{display:none}}
@media (max-width:980px){.dock .tool .tl{display:none}.dock .tool{padding:0 10px}.dock .tool-key .tl{display:inline}}
/* 手機：選單浮在底部中央 */
@media (max-width:760px){
  .dock{top:auto;right:auto;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%)}
  .dock .tool-key .tl{display:none}
  .dock .tool{padding:0 9px}
  .dock-toggle{display:none}
}
.hint{position:fixed;z-index:40;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;
  background:rgba(40,22,10,.75);color:#F7E7C8;font-size:14px;padding:8px 16px;border-radius:999px;border:1px solid rgba(216,181,101,.4);
  white-space:nowrap;pointer-events:none;transition:opacity .6s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hint.hide{opacity:0}
@media (max-width:760px){.hint{bottom:calc(76px + env(safe-area-inset-bottom,0px));font-size:13px;max-width:92vw;white-space:normal;text-align:center}}

/* 熱點 */
.hs{position:absolute;border:0;padding:0;background:transparent;border-radius:12px;cursor:pointer}
.hs::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .25s,box-shadow .25s;
  box-shadow:inset 0 0 0 2px rgba(255,236,170,.85),0 0 24px 4px rgba(255,214,120,.55);background:rgba(255,240,190,.12)}
.hs:hover::after,.hs:focus-visible::after{opacity:1}
.hs .lbl{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,4px);opacity:0;pointer-events:none;white-space:nowrap;
  background:linear-gradient(#8A5A30,#5E3A1C);color:#FFF4DC;border:1.5px solid var(--gold);border-radius:8px;
  font-size:max(12px,calc(var(--u) * 1.15));font-weight:700;padding:.25em .7em;box-shadow:0 4px 10px rgba(0,0,0,.4);transition:opacity .2s,transform .2s;z-index:3}
.hs.lbl-below .lbl{bottom:auto;top:calc(100% + 6px)}
.hs:hover .lbl,.hs:focus-visible .lbl{opacity:1;transform:translate(-50%,0)}
.hs:focus-visible{outline:none}
/* 開燈：照亮場景，顯示所有熱點 */
.stage.lit .layer.current img.bg{filter:brightness(1.12) saturate(1.08)}
.stage.lit .hs::after{opacity:1;animation:pulse 1.6s ease-in-out infinite}
.stage.lit .hs .lbl{opacity:1;transform:translate(-50%,0)}
.stage.dim .layer.current img.bg{filter:brightness(.8)}
@keyframes pulse{50%{box-shadow:inset 0 0 0 2px rgba(255,236,170,1),0 0 34px 8px rgba(255,214,120,.75)}}

/* 館外告示牌文字（覆蓋原圖的範例文字） */
.sign-text{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0 .6em;border-radius:6px;color:#3A1F0E;
  background:linear-gradient(180deg,#D6B482,#C9A26C 30%,#BE9660 55%,#CDA874 80%,#C49C66);
  box-shadow:inset 0 0 0 1px rgba(80,45,15,.25)}
.sign-text::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.25;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 calc(var(--u)*1.6),rgba(70,35,10,.6) calc(var(--u)*1.6) calc(var(--u)*1.7))}
.sign-text h2{position:relative;margin:0;font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*2.3);line-height:1.15;letter-spacing:.05em}
.sign-text p{position:relative;margin:.2em 0 0;font-size:calc(var(--u)*1.05);line-height:1.35;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 轉場遮罩 */
.flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(255,248,225,.0) 0,rgba(255,248,225,.95) 60%);transition:opacity .45s}
.flash.on{opacity:1}

/* 除錯模式：顯示熱點框與座標 */
.is-debug .hs::after{opacity:1;box-shadow:inset 0 0 0 2px #0ff}
.is-debug .hs .lbl{opacity:1}
.debug-box{position:absolute;border:2px dashed #f0f;background:rgba(255,0,255,.12);pointer-events:none}
.debug-out{position:fixed;left:10px;bottom:10px;z-index:99;background:#111;color:#0f0;font:13px/1.4 monospace;padding:8px 10px;border-radius:6px;max-width:90vw}

/* ---------- 側邊面板（木框公告欄） ---------- */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden}
.drawer.open{visibility:visible}
.drawer-shade{position:absolute;inset:0;background:rgba(20,10,4,.55);opacity:0;transition:opacity .3s}
.drawer.open .drawer-shade{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(560px,100%);display:flex;flex-direction:column;
  background:var(--paper);border-left:10px solid var(--wood);box-shadow:-10px 0 40px rgba(0,0,0,.5);
  transform:translateX(105%);transition:transform .38s cubic-bezier(.3,.9,.3,1);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;align-items:center;gap:8px;padding:12px 14px;background:linear-gradient(#A9773F,#8A5C2E);color:#FFF5E0;
  border-bottom:3px solid var(--wood-d)}
.drawer-head h2{flex:1;margin:0;font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-head .x,.drawer-head .back{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,240,210,.5);background:rgba(60,30,10,.25);color:#FFF5E0;font-size:24px;line-height:1}
.drawer-body{flex:1;overflow:auto;padding:18px 18px 40px;-webkit-overflow-scrolling:touch}

.intro{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.75;margin:0 0 14px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.tabs button{height:36px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:14px;font-weight:700}
.tabs button[aria-pressed="true"]{background:var(--wood);color:#fff;border-color:var(--wood)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 16px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:14px;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:var(--wood-l)}
.btn.primary{background:linear-gradient(#B02637,var(--red-d));color:#FFF3DC;border-color:var(--red-d)}
.btn.small{min-height:34px;padding:0 10px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.post-item button{width:100%;text-align:left;display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 14px;
  border-radius:12px;border:1px solid var(--line);background:#fff}
.post-item button:hover{border-color:var(--wood-l);box-shadow:0 4px 12px rgba(80,40,10,.12)}
.post-item h3{margin:0;font-size:16px;line-height:1.4}
.post-item .ex{grid-column:1/2;color:var(--muted);font-size:14px}
.post-item .meta{grid-column:1/-1;color:var(--muted);font-size:12px}
.post-item img{grid-row:1/3;grid-column:2;width:64px;height:64px;object-fit:cover;border-radius:8px}
.tag{display:inline-block;font-size:12px;font-weight:700;border-radius:6px;padding:0 6px;margin-right:6px;color:#fff;vertical-align:1px}
.tag-original{background:var(--red)} .tag-ask{background:#2F6E9B} .tag-share{background:var(--leaf)}
.empty{border:1.5px dashed var(--line);border-radius:12px;padding:20px;text-align:center;color:var(--muted)}
.pager{display:flex;justify-content:center;gap:8px;margin-top:14px}

.article h1{font-family:var(--serif);font-size:24px;line-height:1.35;margin:4px 0 6px}
.article .meta{color:var(--muted);font-size:13px;margin-bottom:12px}
.article .body{font-size:16px;line-height:1.85;white-space:pre-wrap;word-break:break-word}
.article .body a{word-break:break-all}
.article img.pic{max-width:100%;border-radius:10px;margin:8px 0}
.article .src{font-size:13px;color:var(--muted);margin-top:8px;word-break:break-all}
.replies{margin-top:22px;border-top:2px dashed var(--line);padding-top:14px}
.replies h3{font-family:var(--serif);font-size:18px;margin:0 0 10px}
.reply{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.reply .meta{font-size:12px;color:var(--muted)}
.reply .gift{display:inline-block;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:0 8px;font-size:13px;margin-top:4px}
.report-link{background:none;border:0;color:var(--muted);font-size:12px;text-decoration:underline;padding:0;margin-top:14px}

.form label{display:block;font-weight:700;font-size:14px;margin:12px 0 6px}
.form input[type=text],.form input[type=password],.form input[type=email],.form textarea,.form select{width:100%;padding:10px 12px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;font:inherit;color:var(--ink)}
.form textarea{min-height:140px;resize:vertical;line-height:1.7}
.form .help{font-size:13px;color:var(--muted);margin-top:6px}
.form .count{font-size:12px;color:var(--muted);text-align:right;margin-top:4px}
.form .count.warn{color:#B4541A;font-weight:700}
.form .row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.type-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.type-pick label{margin:0;border:1.5px solid var(--line);border-radius:10px;padding:8px;text-align:center;background:#fff;cursor:pointer;font-weight:700}
.type-pick label small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.type-pick input{position:absolute;opacity:0}
.type-pick input:checked + span{color:var(--red)}
.type-pick label:has(input:checked){border-color:var(--red);box-shadow:0 0 0 2px rgba(155,31,46,.15)}
.gift-pick{display:flex;flex-wrap:wrap;gap:6px}
.gift-pick label{margin:0;border:1.5px solid var(--line);border-radius:999px;padding:4px 10px;background:#fff;cursor:pointer;font-weight:500;font-size:14px}
.gift-pick input{position:absolute;opacity:0}
.gift-pick label:has(input:checked){border-color:var(--red);background:#FFF0EC}
.switch-tabs{display:flex;gap:8px;margin-bottom:12px}

/* 任意門 */
.portal-hall{margin-bottom:16px}
.portal-hall h3{font-family:var(--serif);font-size:17px;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.portal-hall h3 .badge{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:15px}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.portal-grid button{display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;border:1.5px solid var(--line);background:#fff;text-align:left;font-weight:700;font-size:14px;min-height:46px}
.portal-grid button:hover{border-color:var(--wood-l)}
.portal-grid .door{width:16px;height:22px;border-radius:8px 8px 2px 2px;flex:none;background:var(--hc,#8A5C2E)}
.hall-A{--hc:#2E5A8A}.hall-B{--hc:#9B2E3E}.hall-C{--hc:#C0841C}.hall-D{--hc:#4E8A47}.hall-E{--hc:#1F7A70}

/* 兌換機 */
.atm-screen{background:linear-gradient(#2C3E3A,#1A2624);color:#C9F7D9;border-radius:14px;padding:16px;border:6px solid #CFC6B4;margin-bottom:14px;font-variant-numeric:tabular-nums}
.atm-screen .big{font-size:40px;font-weight:700;line-height:1}
.atm-screen small{color:#8FC7A6}
.reward{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.reward p{margin:0;font-size:13px;color:var(--muted)}
.ledger{width:100%;border-collapse:collapse;font-size:14px}
.ledger td{padding:6px 4px;border-bottom:1px solid var(--line)}
.ledger td.d{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.ledger td.plus{color:var(--leaf)} .ledger td.minus{color:var(--red)}

/* 玩法 */
.guide h3{font-family:var(--serif);font-size:18px;margin:18px 0 8px}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.role b{font-family:var(--serif);font-size:16px}
.role p,.role ol{margin:6px 0 0;font-size:14px;line-height:1.7}
.role ol{padding-left:1.2em}
.rules{display:grid;gap:8px}
.rule{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.rule .n{font-family:var(--serif);font-weight:900;font-size:26px;color:var(--red);line-height:1;text-align:center}
.rule .n small{display:block;font-family:var(--sans);font-size:11px;color:var(--muted);font-weight:500;margin-top:4px}
.rule p{margin:2px 0 0;font-size:14px;color:var(--muted);line-height:1.6}
@media (max-width:480px){.roles{grid-template-columns:1fr}.type-pick{grid-template-columns:1fr}}

.news-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.news-item h3{margin:0;font-size:16px}
.news-item .meta{font-size:12px;color:var(--muted)}
.news-item p{margin:6px 0 0;font-size:14px;white-space:pre-wrap}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);opacity:0;z-index:90;
  background:#2E1F14;color:#FFF3DC;border:2px solid var(--gold);padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;
  transition:opacity .3s,transform .3s;pointer-events:none;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.noscript{position:fixed;inset:auto 0 0 0;background:var(--red);color:#fff;text-align:center;padding:12px}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}

/* =========================================================
   場景動畫（鐘擺、流水、樹葉、窗簾、音符、熱氣、燈光、飛鳥蝴蝶）
   ========================================================= */
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.no-fx .fx *{animation:none!important}
.no-fx .fx-sprite{filter:none!important}
.no-fx .fx-notes,.no-fx .fx-steam,.no-fx .fx-flyer,.no-fx .fx-shine,.no-fx .fx-shimmer{display:none}
.fx-sprite{position:absolute;background-repeat:no-repeat;will-change:filter}
.fx-sway{filter:url(#fx-leaves)}
.fx-water{filter:url(#fx-water)}
.fx-cloth{filter:url(#fx-cloth)}
/* 水面波光 */
.fx-shimmer{position:absolute;inset:0;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(ellipse 6px 1.5px at 30% 40%,rgba(255,255,255,.9),transparent),
             radial-gradient(ellipse 5px 1.2px at 75% 70%,rgba(255,255,255,.8),transparent),
             radial-gradient(ellipse 4px 1px at 55% 15%,rgba(255,255,255,.8),transparent);
  background-size:70px 26px,90px 34px,60px 22px;animation:fxShimmer 3.2s ease-in-out infinite}
@keyframes fxShimmer{0%{opacity:0;background-position:0 0,0 0,0 0}50%{opacity:.75}100%{opacity:0;background-position:24px 0,-18px 0,14px 0}}
/* 鐘擺 */
.fx-pendulum{transform-origin:50% 0;animation:fxSwing 1.5s ease-in-out infinite alternate;--amp:12deg}
@keyframes fxSwing{from{transform:rotate(calc(var(--amp) * -1))}to{transform:rotate(var(--amp))}}
/* 音符 */
.fx-notes{position:absolute;width:0;height:0}
.fx-notes i{position:absolute;left:0;top:0;font-style:normal;font-weight:700;line-height:1;opacity:0;
  font-size:calc(var(--u) * 1.6);color:#F2C14E;text-shadow:0 0 1px #5A3A10,0 0 2px #5A3A10,0 0 calc(var(--u)*.5) rgba(255,215,110,.85);
  animation:fxNote 4.8s ease-out infinite}
.fx-notes.big i{font-size:calc(var(--u) * 2.4)}
@keyframes fxNote{
  0%{opacity:0;transform:translate(0,0) rotate(-10deg) scale(.6)}
  15%{opacity:1}
  50%{transform:translate(calc(var(--dx) * var(--u)),calc(var(--u) * -4)) rotate(8deg) scale(1)}
  100%{opacity:0;transform:translate(calc(var(--dx) * var(--u) * 1.6),calc(var(--u) * -9)) rotate(-6deg) scale(1.1)}}
/* 熱氣 */
.fx-steam{position:absolute;width:0;height:0}
.fx-steam i{position:absolute;left:calc(var(--u) * -.5);top:0;width:calc(var(--u)*1);height:calc(var(--u)*2.6);border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,rgba(205,205,212,.75),rgba(225,225,230,0) 70%);filter:blur(calc(var(--u)*.25));
  opacity:0;animation:fxSteam 3.6s ease-out infinite}
.fx-steam i:nth-child(2){animation-delay:1.2s;left:calc(var(--u) * -.1)}
.fx-steam i:nth-child(3){animation-delay:2.4s;left:calc(var(--u) * -.8)}
@keyframes fxSteam{0%{opacity:0;transform:translateY(0) scaleX(.7)}25%{opacity:.8}100%{opacity:0;transform:translate(calc(var(--u)*.6),calc(var(--u)*-4)) scaleX(1.5)}}
/* 燈光呼吸 */
.fx-glow{position:absolute;width:calc(var(--u) * var(--r) * 2);height:calc(var(--u) * var(--r) * 2);margin:calc(var(--u) * var(--r) * -1) 0 0 calc(var(--u) * var(--r) * -1);
  border-radius:50%;background:radial-gradient(circle,rgba(255,236,170,.55),rgba(255,220,140,.18) 40%,rgba(255,220,140,0) 70%);
  mix-blend-mode:screen;animation:fxGlow 4.5s ease-in-out infinite}
@keyframes fxGlow{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
/* 飛鳥、蝴蝶、蜻蜓 */
.fx-fly{position:absolute}
.fx-flyer{position:absolute;left:0;top:0;width:calc(var(--u)*2.2);animation:fxPath0 12s linear infinite}
.fx-flyer svg{display:block;width:100%;height:auto;overflow:visible}
.fx-bird{width:calc(var(--u)*1.8)}
.fx-dragonfly{width:calc(var(--u)*2.4)}
.fx-flyer.path0{animation-name:fxPath0}.fx-flyer.path1{animation-name:fxPath1}.fx-flyer.path2{animation-name:fxPath2}
.fx-bird.path0,.fx-bird.path1,.fx-bird.path2{animation-name:fxBird;animation-timing-function:linear}
.fx-bird.path1{top:35%}.fx-bird.path2{top:65%}
@keyframes fxPath0{0%{left:5%;top:60%}20%{left:30%;top:20%}40%{left:60%;top:45%}60%{left:85%;top:15%}80%{left:50%;top:75%}100%{left:5%;top:60%}}
@keyframes fxPath1{0%{left:80%;top:30%}25%{left:55%;top:70%}50%{left:20%;top:35%}75%{left:45%;top:10%}100%{left:80%;top:30%}}
@keyframes fxPath2{0%{left:40%;top:80%}30%{left:75%;top:50%}55%{left:60%;top:5%}80%{left:15%;top:40%}100%{left:40%;top:80%}}
@keyframes fxBird{0%{left:-8%;transform:translateY(0)}50%{transform:translateY(calc(var(--u)*-1.2))}100%{left:105%;transform:translateY(0)}}
.fx-butterfly .wing-l,.fx-butterfly .wing-r,.fx-dragonfly .wing-l,.fx-dragonfly .wing-r{transform-box:fill-box;animation:fxFlap .28s ease-in-out infinite alternate}
.fx-butterfly .wing-l,.fx-dragonfly .wing-l{transform-origin:100% 50%}
.fx-butterfly .wing-r,.fx-dragonfly .wing-r{transform-origin:0 50%}
.fx-dragonfly .wing-l,.fx-dragonfly .wing-r{animation-duration:.08s}
@keyframes fxFlap{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
.fx-bird .wing{animation:fxBirdFlap .5s ease-in-out infinite alternate}
@keyframes fxBirdFlap{from{d:path("M2 12 Q11 2 20 11 Q29 2 38 12")}to{d:path("M2 8 Q11 16 20 11 Q29 16 38 8")}}
.ico-fx{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E")}
#fxBtn[aria-pressed="false"]{opacity:.6}
@media (prefers-reduced-motion:reduce){.fx *{animation:none!important}}

/* Logo 金屬閃光：以 logo.png 的外形當遮罩，讓光帶只掃過招牌本身 */
.fx-shine{position:absolute}
.fx-shine .sweep,.fx-shine::after,.logo-shine::after{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(../img/logo.png) center/100% 100% no-repeat;mask:url(../img/logo.png) center/100% 100% no-repeat;
  background:linear-gradient(110deg,transparent 0 46%,rgba(255,236,170,.35) 47.5%,rgba(255,252,235,.9) 49.6%,rgba(255,255,255,.95) 50%,rgba(255,240,190,.6) 51.2%,transparent 53% 100%);
  background-size:400% 100%;background-repeat:no-repeat;mix-blend-mode:screen;animation:fxSweep 5.5s cubic-bezier(.45,.05,.35,1) infinite}
.fx-shine::after{content:"";animation:none;opacity:0}
.fx-shine.flash-now::after{opacity:1;animation:fxSweepOnce .9s ease-out forwards}
@keyframes fxSweepOnce{from{background-position:76% 0}to{background-position:24% 0}}
@keyframes fxSweep{0%,60%{background-position:76% 0}84%,100%{background-position:24% 0}}
.fx-shine .glint{position:absolute;width:calc(var(--u)*1.6);height:calc(var(--u)*1.6);margin:calc(var(--u)*-.8) 0 0 calc(var(--u)*-.8);opacity:0;
  background:radial-gradient(circle,#fff 0 8%,rgba(255,255,255,0) 30%),
    linear-gradient(90deg,transparent 46%,rgba(255,255,240,.95) 50%,transparent 54%),
    linear-gradient(0deg,transparent 46%,rgba(255,255,240,.95) 50%,transparent 54%);
  filter:drop-shadow(0 0 3px rgba(255,230,150,.9));animation:fxGlint 4.6s ease-in-out infinite}
@keyframes fxGlint{0%,70%,100%{opacity:0;transform:scale(.2) rotate(0)}80%{opacity:1;transform:scale(1) rotate(45deg)}90%{opacity:0;transform:scale(.4) rotate(90deg)}}
/* 其他頁面（後台、特客專區、安裝頁）上的 Logo 圖片 */
.logo-shine{position:relative;display:inline-block;line-height:0}
.logo-shine img{display:block}
.logo-shine::after{content:""}


/* =========================================================
   白天／黃昏／夜晚
   ========================================================= */
.tint{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease,background 1.4s ease}
[data-phase="dawn"] .tint{opacity:1;mix-blend-mode:soft-light;background:linear-gradient(180deg,rgba(255,160,190,.55),rgba(255,214,170,.25))}
[data-when="dark"]{display:none}
.is-dark [data-when="dark"]{display:block}
.is-dark [data-when="light"]{display:none}
[data-phase="dusk"] .fx-stars,[data-phase="dusk"] .fx-moon{opacity:.45}
/* 星星、月亮、夜空 */
.fx-stars,.fx-nightsky{position:absolute;overflow:hidden}
.fx-stars i,.fx-nightsky i{position:absolute;width:calc(var(--u) * .24 * var(--s));height:calc(var(--u) * .24 * var(--s));border-radius:50%;
  background:#fff;box-shadow:0 0 calc(var(--u)*.35) rgba(255,255,255,.9);animation:fxTwinkle 3.2s ease-in-out infinite}
@keyframes fxTwinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
.fx-nightsky{background:linear-gradient(180deg,#0b1434,#1b2858 70%,#2a3466);opacity:.88;mix-blend-mode:multiply}
.fx-nightsky i{mix-blend-mode:normal}
.fx-moon{position:absolute;width:calc(var(--u) * var(--r) * 2);height:calc(var(--u) * var(--r) * 2);margin:calc(var(--u) * var(--r) * -1) 0 0 calc(var(--u) * var(--r) * -1);
  border-radius:50%;background:radial-gradient(circle at 38% 36%,#FFFDF0,#F6EBC0 55%,#E2CF8E);
  box-shadow:0 0 calc(var(--u)*2) rgba(255,244,200,.75),0 0 calc(var(--u)*5) rgba(255,240,190,.35)}
.fx-moon::before,.fx-moon::after{content:"";position:absolute;border-radius:50%;background:rgba(200,180,120,.35)}
.fx-moon::before{width:22%;height:22%;left:55%;top:30%}.fx-moon::after{width:14%;height:14%;left:30%;top:60%}
.fx-glow.warm{background:radial-gradient(circle,rgba(255,206,120,.95),rgba(255,170,70,.45) 35%,rgba(255,160,60,0) 70%)}
/* 螢火蟲 */
.fx-firefly{width:calc(var(--u)*.7)}
.fx-firefly .ff{display:block;width:100%;padding-top:100%;border-radius:50%;
  background:radial-gradient(circle,#FFFDC0 0 18%,rgba(214,255,110,.75) 32%,rgba(214,255,110,0) 70%);animation:fxBlink 2.4s ease-in-out infinite}
.fx-firefly:nth-child(2n) .ff{animation-delay:-1.1s}.fx-firefly:nth-child(3n) .ff{animation-delay:-.5s;animation-duration:3.1s}
@keyframes fxBlink{0%,100%{opacity:.15}50%{opacity:1}}
.ico-sun{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.ico-moon{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E")}
.ico-pass{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M9 16h6'/%3E%3C/svg%3E")}

/* =========================================================
   隱藏物件與藏寶
   ========================================================= */
.hs.secret::after,.stage.lit .hs.secret::after{display:none}
.is-debug .hs.secret::after{display:block;opacity:1;box-shadow:inset 0 0 0 2px #f0f}
.secret-bounce{transform-origin:50% 100%;animation:fxBoing .9s cubic-bezier(.3,1.6,.5,1);z-index:2;filter:drop-shadow(0 0 calc(var(--u)*.6) rgba(255,230,150,.9))}
@keyframes fxBoing{0%{transform:scale(1)}30%{transform:translateY(-8%) scale(1.14,1.1)}55%{transform:translateY(0) scale(.94,1.04)}75%{transform:scale(1.04,.97)}100%{transform:scale(1)}}
.say-bubble{position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 10px));pointer-events:none;white-space:nowrap;
  background:#FFFBEF;color:#3A2410;border:2px solid #C79A3E;border-radius:14px;padding:.35em .8em;font-weight:700;
  font-size:max(13px,calc(var(--u)*1.25));box-shadow:0 6px 16px rgba(0,0,0,.3);animation:bubbleIn .35s cubic-bezier(.3,1.6,.5,1)}
.say-bubble::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-8px;border:8px solid transparent;border-top-color:#C79A3E;border-bottom:0}
.say-bubble.below{transform:translate(-50%,10px)}
.say-bubble.below::after{bottom:auto;top:-9px;border-top:0;border-bottom:8px solid #C79A3E}
.say-bubble.out{opacity:0;transition:opacity .5s}
@keyframes bubbleIn{from{opacity:0;transform:translate(-50%,calc(-100% - 10px)) scale(.6)}}
.cuckoo{position:absolute;z-index:4;width:calc(var(--u)*3.2);filter:drop-shadow(0 0 3px rgba(255,255,255,.8));transform:translate(-50%,-50%);pointer-events:none;animation:cuckooPop 2.2s ease-in-out}
.cuckoo svg{display:block;width:100%;height:auto}
@keyframes cuckooPop{0%{transform:translate(-50%,-50%) scale(0)}15%,25%,45%,55%{transform:translate(-50%,-120%) scale(1) rotate(-8deg)}20%,50%{transform:translate(-50%,-130%) scale(1.05) rotate(6deg)}85%{transform:translate(-50%,-120%) scale(1)}100%{transform:translate(-50%,-50%) scale(0)}}
.treasure{position:absolute;z-index:3;width:calc(var(--u) * var(--sz));transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:pointer;
  filter:drop-shadow(0 0 calc(var(--u)*.4) rgba(255,230,140,.8));animation:treasureBob 2.6s ease-in-out infinite}
.treasure svg{display:block;width:100%;height:auto}
.treasure::after{content:"";position:absolute;right:-10%;top:-10%;width:40%;height:40%;
  background:radial-gradient(circle,#fff 0 10%,transparent 30%),linear-gradient(90deg,transparent 45%,#fff 50%,transparent 55%),linear-gradient(0deg,transparent 45%,#fff 50%,transparent 55%);animation:fxGlint 2.6s ease-in-out infinite}
.treasure.got{animation:treasureGot .9s ease-in forwards}
@keyframes treasureBob{0%,100%{transform:translate(-50%,-50%) rotate(-4deg)}50%{transform:translate(-50%,-62%) rotate(4deg)}}
@keyframes treasureGot{to{transform:translate(-50%,-160%) scale(1.8);opacity:0}}

/* =========================================================
   蓋章動畫
   ========================================================= */
.stamp-pop{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:rgba(20,10,4,.35);animation:fadeIn .25s}
.stamp-pop.out{opacity:0;transition:opacity .35s}
.stamp-card{background:var(--paper);border:6px solid var(--wood);border-radius:18px;padding:18px 26px 20px;text-align:center;min-width:240px;max-width:90vw;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.stamp-card small{display:block;font-weight:700;color:var(--muted);letter-spacing:.1em}
.stamp-ink{position:relative;width:150px;height:150px;margin:12px auto 6px;border-radius:50%;display:grid;place-items:center;color:#B3202E;
  border:5px double #B3202E;box-shadow:inset 0 0 0 6px rgba(179,32,46,.12);transform:rotate(-12deg);animation:stampSlam .55s cubic-bezier(.2,1.6,.4,1)}
.stamp-ink span{font-family:var(--serif);font-weight:900;font-size:22px;line-height:1.2;padding:0 18px}
.stamp-ink em{position:absolute;bottom:16px;font-style:normal;font-weight:900;font-size:13px;letter-spacing:.2em;opacity:.8}
.is-treasure .stamp-ink{color:#9A6B12;border-color:#C9962E;background:radial-gradient(circle,#FFF6D6,#F6DC8E)}
.stamp-card .gain{font-family:var(--serif);font-weight:900;font-size:26px;color:var(--red);margin:6px 0 0}
.stamp-card .bonus{margin:4px 0 0;font-weight:700;color:#2F7A2F}
.stamp-card .btn{margin-top:10px}
@keyframes stampSlam{0%{transform:rotate(-30deg) scale(2.6);opacity:0}60%{transform:rotate(-10deg) scale(.92);opacity:1}100%{transform:rotate(-12deg) scale(1)}}
@keyframes fadeIn{from{opacity:0}}

/* 連續入住卡 */
.streak-pop{position:fixed;inset:0;z-index:94;display:grid;place-items:center;background:rgba(20,10,4,.45);animation:fadeIn .3s}
.streak-pop.out{opacity:0;transition:opacity .35s}
.streak-card{background:var(--paper);border:6px solid var(--wood);border-radius:20px;padding:20px 24px;text-align:center;width:min(420px,92vw);
  box-shadow:0 24px 60px rgba(0,0,0,.5);animation:cardIn .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes cardIn{from{transform:translateY(30px) scale(.9);opacity:0}}
.streak-card small{font-weight:700;color:var(--muted);letter-spacing:.15em}
.streak-card h2{font-family:var(--serif);font-size:24px;margin:4px 0 12px}
.streak-card h2 strong{font-size:40px;color:var(--red)}
.week{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.week li{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:2px dashed var(--line);color:var(--muted);font-weight:700;font-size:14px}
.week li.done{background:#E9D6A8;border:2px solid #C79A3E;color:#5A3A10}
.week li.today{background:var(--red);border:2px solid var(--red-d);color:#fff;animation:todayPop .6s .3s cubic-bezier(.3,1.8,.5,1) both}
.week li.gift b{font-size:16px}
@keyframes todayPop{from{transform:scale(.3)}}
.streak-card .gain{font-family:var(--serif);font-weight:900;font-size:22px;color:var(--red);margin:0}
.streak-card .msg{margin:4px 0 0;font-weight:700}
.streak-card .best{margin:4px 0 0;font-size:13px;color:var(--muted)}
.streak-card .btn{margin-top:14px}

/* =========================================================
   樂園護照
   ========================================================= */
.passport-cover{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;margin-bottom:12px;color:#F6E2B0;
  background:linear-gradient(135deg,#7A1622,#4E0C16);border:3px solid #C79A3E;box-shadow:inset 0 0 0 2px rgba(255,220,150,.25)}
.passport-cover .logo-shine{width:120px;flex:none}
.passport-cover .logo-shine img{width:100%;height:auto}
.passport-cover b{display:block;font-family:var(--serif);font-weight:900;font-size:24px;letter-spacing:.15em;color:#F6D27A}
.passport-cover small{font-size:14px}
.pass-progress{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:700;font-size:14px}
.pass-progress .bar{flex:1;height:12px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.pass-progress .bar i{display:block;height:100%;background:linear-gradient(90deg,#C79A3E,#B3202E);border-radius:inherit}
.pass-streak{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;background:#FFF3D6;border:1px solid #E8CF8E;border-radius:12px;padding:10px 12px;margin-bottom:10px}
.pass-streak span{font-size:13px;color:var(--muted)}
.pass-treasure{display:flex;gap:12px;align-items:center;background:#fff;border:2px dashed #C79A3E;border-radius:12px;padding:10px 12px;margin-bottom:10px}
.pass-treasure .ti{width:46px;flex:none}
.pass-treasure .ti svg{width:100%;height:auto;display:block}
.pass-treasure p{margin:2px 0;font-size:14px}
.pass-treasure small{color:var(--muted);font-size:12px}
.pass-treasure.found{opacity:.7;border-style:solid}
.pass-page{margin-top:16px}
.pass-page h3{font-family:var(--serif);font-size:17px;margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--line);padding-bottom:4px}
.pass-page h3 span{font-family:var(--sans);font-size:13px;color:var(--muted)}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.stamp{aspect-ratio:1;border-radius:50%;border:2px dashed #CDBB98;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px;color:#A8957A;background:rgba(255,255,255,.5)}
.stamp .nm{font-weight:700;font-size:13px;line-height:1.25}
.stamp .hn{font-size:10.5px;line-height:1.25;margin-top:3px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stamp .dt{font-size:10.5px;margin-top:3px;letter-spacing:.03em}
.stamp.has{border:4px double #B3202E;color:#B3202E;background:rgba(179,32,46,.05);transform:rotate(var(--rot))}
.stamp.has .nm{font-family:var(--serif);font-weight:900;font-size:14px}
.stamp.secret.has{border-color:#9A6B12;color:#9A6B12;background:rgba(246,210,122,.18)}
.stamp.secret:not(.has) .nm{font-size:18px;letter-spacing:.1em}
.dock .tool[aria-pressed="true"]{background:var(--gold);color:var(--wood-d);border-color:var(--gold-l)}
.dock #fxBtn[aria-pressed="true"]{background:rgba(30,16,6,.35);color:#FFF1D8;border-color:rgba(255,230,190,.25);box-shadow:none}
.dock #fxBtn[aria-pressed="false"] .tl{text-decoration:line-through}
/* 手機：選單按鈕較多，隱藏次要按鈕，並允許橫向滑動 */
@media (max-width:760px){.dock .tools{overflow-x:auto;scrollbar-width:none}.dock .tools::-webkit-scrollbar{display:none}}

.backdrop{transition:filter 1.4s ease,background-image .6s}
[data-phase="dawn"] .backdrop{filter:blur(28px) brightness(.6) sepia(.25)}


/* =========================================================
   會互動的場景物件：風車、咕咕鐘、櫃檯小姐、留聲機
   ========================================================= */
.fx-windmill{position:absolute;pointer-events:none}
.fx-windmill svg{display:block;width:100%;height:100%;overflow:visible;transform:scaleX(.94)}
.fx-tower{position:absolute;pointer-events:none;display:block}
.cuckoo{animation:none}
@keyframes cuckooOut{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-125%) scale(1)}}
@keyframes cuckooCall{0%,100%{transform:translate(-50%,-125%) scale(1) rotate(0)}35%{transform:translate(-50%,-142%) scale(1.1) rotate(-12deg)}}
@keyframes cuckooIn{from{transform:translate(-50%,-125%) scale(1)}to{transform:translate(-50%,-50%) scale(0)}}
.nod{animation:fxNod 1.2s ease-in-out}
@keyframes fxNod{0%,100%{transform:translateY(0)}20%,60%{transform:translateY(2.5%) rotate(-1.5deg)}40%,80%{transform:translateY(0)}}
.say-bubble.has-btn{pointer-events:auto;white-space:normal;width:max-content;max-width:min(320px,40vw);text-align:center}
.say-bubble{white-space:normal;width:max-content;max-width:min(360px,46vw);text-align:center}
.say-bubble .btn{display:flex;margin:8px auto 0}
.music-on .fx-notes i{animation-duration:3s}
.music-on .fx-notes{filter:drop-shadow(0 0 4px rgba(255,220,120,.8))}
.music-chip{position:fixed;z-index:45;left:calc(14px + env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:8px;
  padding:6px 8px 6px 12px;border-radius:999px;background:rgba(58,34,16,.8);border:1.5px solid rgba(216,181,101,.5);color:#FFF1D8;font-size:13px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.music-chip[hidden]{display:none}
.music-chip b{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-chip button{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,230,190,.3);background:rgba(30,16,6,.4);color:#FFF1D8;font-size:13px;line-height:1}
.music-chip .eq{display:flex;align-items:flex-end;gap:2px;height:14px}
.music-chip .eq i{width:3px;background:#F6D27A;border-radius:2px;animation:eq 1s ease-in-out infinite}
.music-chip .eq i:nth-child(2){animation-delay:-.3s}.music-chip .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
@media (max-width:760px){.music-chip{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}


/* =========================================================
   選單：桌機一列；手機底部導覽列＋「更多」
   ========================================================= */
.more-panel{display:contents}
.tool-more{display:none}
.gift-badge{display:none;background:#F6D27A;color:#5A2A08;border-radius:999px;font-size:11px;font-weight:900;padding:0 6px;line-height:18px}
.is-guest .gift-badge{display:inline-block;animation:giftPulse 2.4s ease-in-out infinite}
@keyframes giftPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.official{display:inline-block;margin-left:5px;padding:0 6px;border-radius:5px;background:#2F6E5A;color:#fff;font-size:11px;font-weight:700;line-height:17px;vertical-align:1px}

@media (max-width:760px){
  .dock{left:8px;right:8px;transform:none;bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:4px;border-radius:18px;max-width:none}
  .dock .tools{width:100%;justify-content:space-between;overflow:visible;gap:2px}
  .dock .tool,.dock .tool-key{flex:1;flex-direction:column;justify-content:center;gap:2px;height:54px;padding:0 2px;min-width:0;border-radius:12px;border-color:transparent;background:transparent;font-size:11px;position:relative}
  .dock .tool .tl,.dock .tool-key .tl{display:block!important;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .dock .tool .ico{width:22px;height:22px}
  .dock .tool-key{background:linear-gradient(#B02637,var(--red-d))}
  .dock .tool-key .pts{position:absolute;top:2px;right:2px;font-size:10px;line-height:16px;padding:0 5px}
  .dock .tool-key .gift-badge{position:absolute;top:1px;right:1px;font-size:10px;line-height:16px}
  .tool-more{display:flex}
  .tool-more[aria-expanded="true"]{background:rgba(255,230,190,.15)!important}
  /* 「更多」面板：浮在導覽列上方 */
  .more-panel{display:none;position:absolute;right:4px;bottom:calc(100% + 8px);width:min(300px,calc(100vw - 24px));padding:8px;border-radius:16px;
    background:rgba(58,34,16,.94);border:1.5px solid rgba(216,181,101,.5);box-shadow:0 12px 30px rgba(0,0,0,.45);
    grid-template-columns:repeat(3,1fr);gap:6px}
  .dock.more-open .more-panel{display:grid}
  .more-panel .tool{height:64px;background:rgba(30,16,6,.35)!important;border:1px solid rgba(255,230,190,.2)!important}
  .more-panel .tool[aria-pressed="true"]#lightBtn{background:var(--gold)!important;color:var(--wood-d)}
  .dock #fxBtn,.dock #phaseBtn{display:flex}
  .hint{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .music-chip{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  /* 表單字級 16px，避免 iPhone 點輸入框時自動放大 */
  .form input[type=text],.form input[type=password],.form input[type=email],.form textarea,.form select{font-size:16px}
  /* 側邊面板改成由下往上的抽屜 */
  .drawer-panel{top:auto;bottom:0;width:100%;height:calc(100% - 28px - env(safe-area-inset-top,0px));border-left:0;border-top:6px solid var(--wood);
    border-radius:20px 20px 0 0;transform:translateY(105%)}
  .drawer-head{border-radius:14px 14px 0 0;position:relative}
  .drawer-head::before{content:"";position:absolute;left:50%;top:5px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:rgba(255,240,210,.5)}
  .drawer-body{padding:14px 14px 40px}
  .post-item button{padding:12px}
  .actions .btn{flex:1}
  .stamps{grid-template-columns:repeat(3,1fr);gap:8px}
  .say-bubble{max-width:72vw;font-size:13px}
}
/* 手機直式：場景可左右滑動 */
.pan-mode .stage{border-radius:0;touch-action:pan-y}
.pan-hint{position:absolute;z-index:3;width:34px;display:none;align-items:center;pointer-events:none}
.pan-hint.show{display:flex}
.pan-hint span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(40,22,10,.6);color:#FFF1D8;font-size:20px;line-height:1;animation:panNudge 1.6s ease-in-out infinite}
.pan-hint.l{left:2px;justify-content:flex-start}.pan-hint.r{right:2px;justify-content:flex-end}
.pan-hint.r span{animation-direction:reverse}
@keyframes panNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
.spots{gap:6px}
.spots-title{flex-basis:100%;text-align:center;color:#E9D6B4;font-size:12px;letter-spacing:.1em}

/* =========================================================
   註冊邀請、暫存小標籤、好處清單
   ========================================================= */
.stash-chip{position:fixed;z-index:46;top:calc(12px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px));display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;border:2px solid #F6D27A;background:linear-gradient(#B02637,var(--red-d));color:#FFF3DC;font-size:13px;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 0 0 rgba(246,210,122,.6);animation:chipGlow 2.2s ease-in-out infinite}
.stash-chip[hidden]{display:none}
.stash-chip b{background:#F6D27A;color:#5A2A08;border-radius:999px;padding:0 7px}
.stash-chip span{text-decoration:underline;text-underline-offset:3px}
@keyframes chipGlow{50%{box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 0 6px rgba(246,210,122,0)}}
@media (max-width:760px){.stash-chip{left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px}}
.signup-pop{position:fixed;inset:0;z-index:93;display:grid;place-items:center;background:rgba(20,10,4,.55);animation:fadeIn .3s;padding:16px}
.signup-pop.out{opacity:0;transition:opacity .3s}
.signup-card{background:var(--paper);border:6px solid var(--wood);border-radius:20px;padding:18px 22px 20px;width:min(420px,100%);text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5);animation:cardIn .5s cubic-bezier(.3,1.5,.5,1)}
.signup-card .logo-shine{width:170px;margin:0 auto}
.signup-card .logo-shine img{width:100%;height:auto}
.signup-card h2{font-family:var(--serif);font-size:22px;margin:8px 0 4px}
.signup-card .lead{margin:0 0 12px;color:var(--muted);font-size:14px}
.perks{list-style:none;margin:0 0 14px;padding:0;text-align:left;display:grid;gap:6px}
.perks li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:14px}
.perks b{display:inline-block;min-width:4.2em;color:var(--red);font-family:var(--serif);font-weight:900}
.signup-card .row{display:flex;gap:8px;justify-content:center}
.signup-card .row .btn{flex:1}
.perk-box{margin-top:16px;background:#FFF6DE;border:1px solid #E8CF8E;border-radius:12px;padding:12px 14px}
.perk-box b{font-family:var(--serif)}
.perk-box ul{margin:6px 0 0;padding-left:1.2em;font-size:14px;line-height:1.8}
.perk-box strong{color:var(--red)}

@media (max-width:760px){.hint{top:calc(54px + env(safe-area-inset-top,0px));bottom:auto}}
@media (min-width:761px){
  .stash-chip{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .music-chip{left:auto;right:calc(14px + env(safe-area-inset-right,0px))}
}


/* =========================================================
   開場畫面與轉場提示
   ========================================================= */
.splash{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:radial-gradient(ellipse at 50% 40%,#3A2716,#140D07 75%)}
.splash.show{display:grid}
.splash.out{opacity:0;transition:opacity .55s ease}
.splash-in{text-align:center;color:#F4E3C4;width:min(320px,80vw)}
.splash .logo-shine{width:min(260px,70vw);display:block;margin:0 auto 10px;animation:splashSwing 3s ease-in-out infinite;transform-origin:50% 0}
.splash .logo-shine img{width:100%;height:auto;display:block}
@keyframes splashSwing{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.splash p{margin:0 0 12px;font-weight:700;letter-spacing:.2em}
.splash .bar{height:10px;border-radius:999px;background:rgba(255,230,190,.15);border:1px solid rgba(216,181,101,.4);overflow:hidden}
.splash .bar i{display:block;height:100%;width:6%;border-radius:inherit;background:linear-gradient(90deg,#C79A3E,#F6D27A);transition:width .25s ease}
.splash .pct{display:block;margin-top:8px;font-size:13px;color:#C9B28E;font-variant-numeric:tabular-nums}
.scene-loader{position:fixed;z-index:70;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 22px 14px;border-radius:18px;background:rgba(40,22,10,.82);border:1.5px solid rgba(216,181,101,.5);color:#FFF1D8;font-weight:700;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scene-loader.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.scene-loader .pct{font-size:12px;color:#E9CF94;font-variant-numeric:tabular-nums;min-height:1em}
.door-spin{width:40px;height:52px;perspective:120px}
.door-spin i{display:block;width:100%;height:100%;border-radius:20px 20px 3px 3px;background:linear-gradient(90deg,#9B1F2E,#C0392B);border:2px solid #F6D27A;
  transform-origin:left center;animation:doorOpen 1.2s ease-in-out infinite;position:relative}
.door-spin i::after{content:"";position:absolute;right:6px;top:55%;width:5px;height:5px;border-radius:50%;background:#F6D27A}
@keyframes doorOpen{0%,100%{transform:rotateY(0)}50%{transform:rotateY(-70deg)}}


/* =========================================================
   搜尋、分享、粉絲頁
   ========================================================= */
.ico-search{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E")}
.search-in-more{display:none!important}
@media (max-width:760px){.dock .tool-search{display:none}.more-panel .search-in-more{display:flex!important}}
.search-box{display:flex;gap:8px;margin:0 0 12px}
.search-box input{flex:1;min-width:0;min-height:46px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.search-box input:focus{outline:none;border-color:var(--wood-l);box-shadow:0 0 0 3px rgba(216,181,101,.35)}
.search-box.mini input{min-height:38px;font-size:15px}
.chips-title{margin:6px 0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chips button{min-height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:14px;font-weight:700;color:var(--ink)}
.chips button:hover{border-color:var(--wood-l)}
.result-count{font-size:13px;color:var(--muted);margin:4px 0 8px}
.room-hits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.drawer mark{background:#FCE58A;color:inherit;border-radius:3px;padding:0 2px}
.share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0 6px;padding-top:12px;border-top:1px dashed var(--line)}
.share-bar > span{font-size:13px;font-weight:700;color:var(--muted);margin-right:4px}
.share{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:0;font-size:14px;font-weight:700;text-decoration:none;color:#fff;cursor:pointer}
.share.fb{background:#1877F2}.share.line{background:#06C755}.share.copy,.share.native{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.post-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.post-foot .report-link{margin-top:0}
.share-mini{margin-top:8px}
.share-mini .share{min-height:30px;font-size:13px;padding:0 12px}
.fan-block{margin-top:18px;padding:14px 16px;border-radius:14px;background:#EEF4FF;border:1px solid #C9D8F2}
.fan-block h3{margin:0 0 4px;font-family:var(--serif);font-size:17px}
.fan-block p{margin:0 0 10px;font-size:14px;color:var(--muted)}
.fan-links{display:flex;flex-wrap:wrap;gap:8px}
.fan-embed{margin-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fan-embed small{font-size:12px;color:var(--muted)}

/* =========================================================
   導覽圖：飄過的雲
   ========================================================= */
.fx-clouds{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cloud{--cloud:#fff;position:absolute;left:-40%;font-size:calc(var(--u) * var(--w) / 10);width:10em;height:3.4em;border-radius:999px;background:var(--cloud);transition:background-color 1.2s;
  filter:blur(.28em);animation:cloudDrift 120s linear infinite;will-change:left}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:var(--cloud)}
.cloud::before{width:4.6em;height:4.6em;left:1.6em;top:-2.3em}
.cloud::after{width:3.6em;height:3.6em;left:5.1em;top:-1.6em}
@keyframes cloudDrift{from{left:-40%}to{left:110%}}

/* =========================================================
   Check-out 確認與道別
   ========================================================= */
.co-pop{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:16px;background:rgba(20,10,4,.5);animation:fadeIn .25s}
.co-pop.out{opacity:0;transition:opacity .3s}
.co-card{position:relative;width:min(400px,100%);background:var(--paper);border:6px solid var(--wood);border-radius:20px;padding:22px 24px 20px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5);animation:cardIn .45s cubic-bezier(.3,1.5,.5,1)}
.co-card .suitcase{width:64px;height:auto;display:block;margin:0 auto 6px}
.co-card .suitcase.roll{animation:suitRoll 1.6s ease-in-out .2s both}
@keyframes suitRoll{0%{transform:translateX(-120px) rotate(-8deg);opacity:0}40%{opacity:1}70%{transform:translateX(10px) rotate(4deg)}100%{transform:translateX(0) rotate(0)}}
.co-card small{display:block;font-weight:700;color:#2F7A2F;letter-spacing:.12em}
.co-card h2{font-family:var(--serif);font-size:22px;margin:4px 0 8px}
.co-card p{margin:0 0 14px;color:var(--muted);font-size:15px;line-height:1.7}
.co-card .row{display:flex;gap:8px;justify-content:center}
.co-card .row .btn{flex:1}
.co-sum{list-style:none;margin:6px 0 10px;padding:0;text-align:left;display:grid;gap:6px}
.co-sum li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px}
.co-sum b{display:inline-block;min-width:4.6em;color:var(--red);font-family:var(--serif);font-weight:900}
.co-next{font-weight:700;color:var(--ink)!important}

/* =========================================================
   密碼欄位：顯示／隱藏、確認
   ========================================================= */
.pw-wrap{position:relative;display:flex}
.pw-wrap input{padding-right:84px!important}
.pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--paper-2);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer}
.pw-eye[aria-pressed="true"]{background:#FFF3D6;color:var(--ink);border-color:var(--wood-l)}
.pw-eye .ico{width:16px;height:16px}
.ico-eye{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.ico-eye-off{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 12s3.6-7 10-7c2 0 3.8.7 5.2 1.7M22 12s-3.6 7-10 7c-2 0-3.8-.7-5.2-1.7'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E")}
.pw-match{margin:6px 0 0;font-size:13px;font-weight:700;min-height:1.2em;color:var(--muted)}
.pw-match.ok{color:#2F7A2F}.pw-match.bad{color:#B4231A}.pw-match.warn{color:#B4541A}
.caps-warn{margin:6px 0 0;font-size:13px;font-weight:700;color:#B4541A}


/* =========================================================
   黃昏／夜晚：使用預先調色的場景圖
   ========================================================= */
.layer img.bg.fade-in{opacity:0;transition:opacity 1.2s ease}
.layer img.bg.fade-in.on{opacity:1}
.fx-stars.full{inset:0}
.fx-plaque{position:absolute;display:block;pointer-events:none}
[data-phase="dusk"] .fx-plaque{filter:brightness(.84) sepia(.12)}
[data-phase="night"] .fx-plaque{filter:brightness(.58) saturate(.9)}
[data-phase="dusk"] .fx-windmill{filter:brightness(.8) sepia(.25)}
[data-phase="night"] .fx-windmill{filter:brightness(.32) saturate(.6) hue-rotate(190deg)}

[data-phase="dusk"] .cloud{--cloud:#F2C7C2}
[data-phase="night"] .cloud{--cloud:#4C5684}
[data-phase="dawn"] .cloud{--cloud:#FFE6EC}
.sign-text{transition:filter 1.2s}
[data-phase="dusk"] .sign-text{filter:brightness(.85) sepia(.15)}
[data-phase="night"] .sign-text{filter:brightness(.55) saturate(.8)}

/* 網路中斷提示 */
.net-bar{position:fixed;z-index:99;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);padding:8px 16px;border-radius:999px;
  background:#7A1A1A;color:#fff;font-weight:700;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.net-bar.ok{background:#2F7A2F}
.net-bar[hidden]{display:none}

/* 時段替換時：會動的區塊先淡出，底圖換好後再淡入，避免出現色塊 */
.layer .fx-base .fx-sprite,.layer .fx-base .fx-tower,.layer .fx-base .fx-windmill{transition:opacity .35s ease}
.layer.swapping .fx-base .fx-sprite,.layer.swapping .fx-base .fx-tower,.layer.swapping .fx-base .fx-windmill{opacity:0}