@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@600;900&display=swap");

/* =========================================================
   不設限虛擬樂園 — 樣式
   ========================================================= */
: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{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}}