/* 款待島｜共用樣式 */
:root{
  --page-bg:#bfe6f5;
  --ink:#4a3a2a;
  --ink-soft:#7a6652;
  --paper:#fffaf0;
  --paper-2:#fff3dc;
  --paper-edge:#ead7b4;
  --wood:#c08a5b;
  --wood-2:#a8733f;
  --wood-dark:#7d5230;
  --leaf:#63bf68;
  --leaf-dark:#3f9a52;
  --sky:#9ddcf6;
  --teal:#2aa89a;
  --teal-soft:#d6f3ee;
  --coral:#ff8766;
  --coral-soft:#ffe3da;
  --sun:#ffcd45;
  --sun-soft:#fff2c4;
  --plum:#9a6fd0;
  --blue:#4a90e2;
  --red:#e2574c;
  --hl:#fff09a;
  --shadow:rgba(74,52,30,.22);
  --hud-bg:rgba(255,250,240,.88);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --page-bg:#0d1b26; --hud-bg:rgba(255,250,240,.9); color-scheme:dark; }
}
:root[data-theme="dark"]{ --page-bg:#0d1b26; color-scheme:dark; }

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--page-bg);overflow:hidden;-webkit-text-size-adjust:100%}
body{font-family:'Huninn','Zen Maru Gothic','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;color:var(--ink)}
a{color:var(--teal)}

#viewport{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 16px}
#stageWrap{position:relative;flex:none}
#stage{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden;background:#000;border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.25);user-select:none}
#mirror{display:none;width:100%;max-width:720px;max-height:38vh;overflow:auto;background:var(--paper);border-radius:14px;padding:12px 14px;font-size:15px;line-height:1.6;box-shadow:0 6px 18px rgba(0,0,0,.15)}
#mirror .who{font-weight:700;margin-right:6px}
#mirror ul{margin:6px 0 0;padding-left:18px}
body.portrait #mirror{display:block}
body.portrait #viewport{justify-content:flex-start;padding-top:16px}

/* ---------- 場景 ---------- */
.scene{position:absolute;left:0;top:0;width:1280px;height:470px;overflow:hidden;background:var(--sky)}
.bg{position:absolute;left:-40px;top:-230px;width:1360px;height:765px;background-size:100% 100%;will-change:transform;transition:opacity .01s}
.bg.pan{animation:bgpan 40s ease-in-out infinite alternate}
@keyframes bgpan{from{transform:translate(0,0) scale(1)}to{transform:translate(-26px,-6px) scale(1.03)}}
.bg-fallback{position:absolute;inset:0}
.sky,.mid,.actors,.fg,.fx,.bubbles{position:absolute;left:0;top:0;width:1280px;height:470px;pointer-events:none}
.sky{z-index:2}
.mid{z-index:3}
.actors{z-index:4}
.fg{z-index:6}
.fx{z-index:7}
.bubbles{z-index:8}
.mid .prop, .mid .prop *{pointer-events:auto}

/* 前景：大而略糊，產生景深 */
.fgitem{position:absolute;transform-origin:50% 100%;filter:blur(.6px) saturate(1.05)}
.fgitem.sway{animation:sway 5s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.fgitem.drift{animation:drift 60s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-1500px)}}
.cloudfx{position:absolute;opacity:.9;animation:cloudmove 90s linear infinite}
@keyframes cloudmove{from{transform:translateX(1400px)}to{transform:translateX(-400px)}}

/* ---------- 角色 ---------- */
.actor{position:absolute;transform-origin:50% 100%;transition:left .9s cubic-bezier(.4,.1,.3,1), top .9s cubic-bezier(.4,.1,.3,1), opacity .5s}
.actor .body{position:relative;transform-origin:50% 100%;animation:idle 2.6s ease-in-out infinite}
.actor.float .body{animation:floaty 3.2s ease-in-out infinite}
.actor.talk .body{animation:talk .32s ease-in-out infinite alternate}
.actor.float.talk .body{animation:floaty 3.2s ease-in-out infinite, talk .32s ease-in-out infinite alternate}
.actor img{display:block;width:100%;height:auto;-webkit-user-drag:none}
.actor .shadow{position:absolute;left:50%;bottom:-6px;width:62%;height:16px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(40,30,20,.28),rgba(40,30,20,0) 70%);z-index:-1}
.actor.float .shadow{bottom:-26px;animation:shadowpulse 3.2s ease-in-out infinite}
.actor.flip .body{scale:-1 1}
.actor.dim{filter:saturate(.85) brightness(.96)}
.actor.enter{animation:hopin .7s cubic-bezier(.3,1.4,.5,1) both}
.actor.exit{opacity:0}
.actor.hop .body{animation:hop .5s ease-out}
@keyframes idle{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,.988)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes shadowpulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(.82)}}
@keyframes talk{from{transform:scale(1,1) translateY(0)}to{transform:scale(1.02,.975) translateY(-2px)}}
@keyframes hopin{0%{opacity:0;transform:translateY(40px) scale(.8)}60%{opacity:1;transform:translateY(-10px) scale(1.04)}100%{transform:none}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-22px)}}
.nametag{position:absolute;left:50%;top:-30px;transform:translateX(-50%);white-space:nowrap;background:var(--paper);border:3px solid var(--wood);border-radius:999px;padding:2px 12px;font-size:17px;font-weight:700;color:var(--ink);box-shadow:0 3px 0 var(--shadow);opacity:0;transition:opacity .3s}
.nametag.show{opacity:1}
.emote{position:absolute;left:62%;top:-8px;font-size:34px;font-weight:900;color:var(--coral);text-shadow:0 2px 0 #fff,0 0 6px #fff;animation:emote 1.4s ease-out forwards}
@keyframes emote{0%{opacity:0;transform:translateY(10px) scale(.6)}20%{opacity:1;transform:translateY(-6px) scale(1.15)}80%{opacity:1;transform:translateY(-12px) scale(1)}100%{opacity:0;transform:translateY(-18px)}}
.ph{width:100%;height:100%}

/* ---------- 對話泡泡 ---------- */
.bubble{position:absolute;max-width:450px;min-width:200px;background:var(--paper);border:4px solid var(--ink);border-radius:26px;padding:14px 20px 16px;font-size:23px;line-height:1.5;color:var(--ink);box-shadow:0 6px 0 var(--shadow);opacity:0;transform:scale(.85);transform-origin:var(--ox,20%) 100%;transition:opacity .18s, transform .22s cubic-bezier(.3,1.5,.5,1)}
.bubble.show{opacity:1;transform:scale(1)}
.bubble .tag{position:absolute;left:18px;top:-20px;background:var(--c,#e08a3c);color:#fff;font-size:17px;font-weight:700;padding:3px 14px 4px;border-radius:12px;border:3px solid var(--ink);letter-spacing:.04em;transform:rotate(-2deg)}
.bubble .tail{position:absolute;bottom:-22px;left:var(--tx,60px);width:30px;height:24px}
.bubble .tail::before{content:"";position:absolute;inset:0;background:var(--ink);clip-path:polygon(0 0,100% 0,30% 100%)}
.bubble .tail::after{content:"";position:absolute;left:5px;top:-1px;width:18px;height:16px;background:var(--paper);clip-path:polygon(0 0,100% 0,26% 100%)}
.bubble.narr{border-style:solid;border-color:var(--wood-dark);background:rgba(255,250,240,.96)}
.bubble.narr .tail{display:none}
.bubble .txt b{color:var(--coral);font-weight:700}
.bubble .more{position:absolute;right:14px;bottom:6px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:12px solid var(--coral);opacity:0;animation:blinkdown .9s ease-in-out infinite}
.bubble.done .more{opacity:1}
@keyframes blinkdown{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- 講義區（下方） ---------- */
.panel{position:absolute;left:0;top:470px;width:1280px;height:250px;background:var(--paper);border-top:6px solid var(--wood);z-index:10;display:grid;grid-template-columns:1fr 196px;overflow:hidden}
.panel::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0 33px,rgba(165,130,90,.10) 33px 34px);pointer-events:none}
.pmain{position:relative;padding:12px 18px 8px 26px;display:flex;flex-direction:column;min-width:0}
.phead{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.chip{flex:none;background:var(--teal);color:#fff;font-size:15px;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:.03em}
.chip.practice{background:var(--coral)}
.chip.discuss{background:var(--plum)}
.ptitle{font-size:24px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pitems{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;align-content:start;flex:1}
.pitems.one{grid-template-columns:1fr}
.pitems li{position:relative;padding-left:26px;font-size:18.5px;line-height:1.45;opacity:.0;transform:translateY(8px);transition:opacity .45s, transform .45s}
.pitems li.on{opacity:1;transform:none}
.pitems li::before{content:"";position:absolute;left:4px;top:.5em;width:12px;height:12px;border-radius:4px;background:var(--leaf);transform:rotate(45deg)}
.pitems li:nth-child(4n+2)::before{background:var(--sun)}
.pitems li:nth-child(4n+3)::before{background:var(--coral)}
.pitems li:nth-child(4n+4)::before{background:var(--blue)}
.pitems li b{background:linear-gradient(transparent 58%,var(--hl) 58%);font-weight:700}
.psrc{font-size:12.5px;color:var(--ink-soft);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.psrc a{color:var(--ink-soft);text-decoration:underline dotted}
.pside{position:relative;border-left:3px dashed var(--paper-edge);padding:12px 14px;display:flex;flex-direction:column;gap:8px;align-items:stretch;background:var(--paper-2)}
.clock{background:#fff;border:3px solid var(--wood);border-radius:14px;padding:6px 8px;text-align:center}
.clock .t{font-size:20px;font-weight:700;color:var(--wood-dark)}
.clock .s{font-size:13px;color:var(--ink-soft)}
.pnum{text-align:center;font-size:15px;color:var(--ink-soft)}
.pnum b{font-size:24px;color:var(--ink)}
.outline{font-size:13px;color:var(--ink-soft);text-align:center;line-height:1.4}
.leafbar{height:10px;border-radius:6px;background:#eadcc2;overflow:hidden}
.leafbar i{display:block;height:100%;background:linear-gradient(90deg,var(--leaf),var(--sun));border-radius:6px;transition:width .6s}

/* ---------- HUD ---------- */
.hud{position:absolute;right:14px;top:12px;z-index:30;display:flex;gap:8px;transition:opacity .4s}
.hud.idle{opacity:0}
.hud button,.btn{font:inherit;cursor:pointer;border:3px solid var(--wood);background:var(--hud-bg);color:var(--ink);border-radius:14px;height:42px;min-width:42px;padding:0 10px;font-size:17px;font-weight:700;box-shadow:0 3px 0 var(--shadow)}
.hud button:hover,.btn:hover{background:#fff}
.hud button.on{background:var(--sun-soft)}
.hud svg{width:20px;height:20px;vertical-align:-4px}
.sect{position:absolute;left:14px;top:12px;z-index:30;background:var(--hud-bg);border:3px solid var(--wood);border-radius:14px;padding:6px 14px;font-size:16px;font-weight:700;box-shadow:0 3px 0 var(--shadow);max-width:560px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sect small{font-weight:400;color:var(--ink-soft);margin-left:6px}
.progress{position:absolute;left:0;top:464px;height:6px;width:1280px;z-index:11;background:rgba(0,0,0,.08)}
.progress i{display:block;height:100%;width:0;background:var(--coral);transition:width .3s linear}
.toast{position:absolute;left:50%;top:18px;transform:translateX(-50%) translateY(-80px);z-index:60;background:var(--ink);color:#fff;padding:10px 18px;border-radius:14px;font-size:17px;transition:transform .35s}
.toast.show{transform:translateX(-50%) translateY(0)}
.pausebadge{position:absolute;left:50%;top:190px;transform:translateX(-50%);z-index:25;background:rgba(74,58,42,.82);color:#fff;border-radius:18px;padding:12px 26px;font-size:24px;font-weight:700;display:none;letter-spacing:.1em}
body.paused .pausebadge{display:block}

/* ---------- 轉場 ---------- */
.blackout{position:absolute;inset:0;z-index:50;background:#000;opacity:0;pointer-events:none;transition:opacity .38s ease}
.blackout.on{opacity:1;pointer-events:auto}
.blackout.slow{transition:opacity .9s ease}
.card{position:absolute;inset:0;z-index:51;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;opacity:0;pointer-events:none;transition:opacity .5s}
.card.on{opacity:1}
.card .k{font-size:22px;letter-spacing:.4em;color:var(--sun);margin-bottom:14px}
.card .t{font-size:52px;font-weight:700;letter-spacing:.08em;text-align:center;line-height:1.3}
.card .s{font-size:22px;margin-top:16px;color:#cfe;letter-spacing:.1em}
.card .dots{margin-top:26px;display:flex;gap:10px}
.card .dots i{width:12px;height:12px;border-radius:50%;background:#fff;opacity:.3;animation:dot 1.2s infinite}
.card .dots i:nth-child(2){animation-delay:.2s}.card .dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{50%{opacity:1}}

/* ---------- 開始畫面 ---------- */
.start{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
.start .st-sky{position:absolute;inset:0;background:linear-gradient(#8fd4f5 0%,#bfe9fa 55%,#fff4d6 100%)}
.start .bgimg{position:absolute;inset:0;background-size:cover;background-position:center}
.start .logo{position:relative;text-align:center;background:rgba(255,250,240,.93);border:6px solid var(--wood);border-radius:36px;padding:28px 46px 26px;box-shadow:0 10px 0 var(--shadow);max-width:1000px}
.start .logo .k{font-size:20px;letter-spacing:.3em;color:var(--teal);font-weight:700}
.start .logo h1{margin:10px 0 6px;font-size:46px;line-height:1.25;letter-spacing:.04em}
.start .logo .sub{font-size:20px;color:var(--ink-soft)}
.start .press{margin-top:22px;font-size:28px;font-weight:700;color:var(--coral);animation:blink 1.3s ease-in-out infinite;letter-spacing:.2em}
.start .note{margin-top:10px;font-size:15px;color:var(--ink-soft)}
.start .row{margin-top:14px;display:flex;gap:12px;justify-content:center}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- 選單 ---------- */
.menu{position:absolute;inset:0;z-index:80;background:rgba(40,30,20,.55);display:none;align-items:center;justify-content:center}
.menu.on{display:flex}
.menu .box{width:1040px;height:620px;background:var(--paper);border:6px solid var(--wood);border-radius:30px;padding:22px 26px;display:flex;flex-direction:column;box-shadow:0 10px 0 var(--shadow)}
.menu h2{margin:0 0 10px;font-size:28px}
.menu .cols{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.menu .col h3{font-size:18px;margin:0 0 6px;color:var(--teal)}
.menu .col button{display:block;width:100%;text-align:left;font:inherit;font-size:15px;background:#fff;border:2px solid var(--paper-edge);border-radius:10px;padding:6px 8px;margin-bottom:5px;cursor:pointer;color:var(--ink)}
.menu .col button:hover{border-color:var(--coral)}
.menu .col button.cur{background:var(--sun-soft);border-color:var(--sun)}
.menu .foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:12px;font-size:15px}
.menu label{display:flex;align-items:center;gap:8px;cursor:pointer}
.modal{position:absolute;inset:0;z-index:85;background:rgba(40,30,20,.55);display:none;align-items:center;justify-content:center}
.modal.on{display:flex}
.modal .box{width:900px;max-height:600px;background:var(--paper);border:6px solid var(--wood);border-radius:26px;padding:20px;display:flex;flex-direction:column;gap:10px}
.modal textarea{flex:1;min-height:380px;font:inherit;font-size:15px;line-height:1.55;border:2px solid var(--paper-edge);border-radius:12px;padding:12px;background:#fff;color:var(--ink);resize:none}

/* ---------- 道具（場景中的內容） ---------- */
.prop{position:absolute;opacity:0;transform:translateY(24px) scale(.96);transition:opacity .5s, transform .6s cubic-bezier(.3,1.3,.5,1)}
.prop.show{opacity:1;transform:none}
[data-s]{transition:opacity .45s, transform .45s, background-color .4s}
.hidden-s{opacity:0 !important;transform:translateY(10px)}
.hl-row{background:var(--hl) !important}
.pulse{animation:pulse 1.1s ease-in-out 2}
@keyframes pulse{50%{transform:scale(1.05)}}

/* 木製佈告欄 */
.board{position:absolute;inset:0}
.board .posts{position:absolute;left:8%;right:8%;bottom:-44px;height:80px;display:flex;justify-content:space-between}
.board .posts i{width:22px;height:100%;background:linear-gradient(90deg,var(--wood-dark),var(--wood-2) 50%,var(--wood-dark));border-radius:6px}
.board .frame{position:absolute;inset:0;background:linear-gradient(180deg,#c99562,#b07a47);border-radius:22px;border:6px solid var(--wood-dark);box-shadow:0 8px 0 rgba(0,0,0,.18), inset 0 0 0 4px rgba(255,255,255,.12)}
.board .roof{position:absolute;left:-18px;right:-18px;top:-26px;height:40px;background:linear-gradient(#e46f55,#c9533d);border-radius:14px 14px 8px 8px;border:5px solid #8e3a2a;box-shadow:0 5px 0 rgba(0,0,0,.15)}
.board .sheet{position:absolute;left:18px;right:18px;top:22px;bottom:18px;background:var(--paper);border-radius:12px;padding:14px 18px;overflow:hidden;box-shadow:inset 0 0 0 2px var(--paper-edge)}
.board.noroof .roof{display:none}
.board.noroof .sheet{top:18px}
.pin{position:absolute;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 15%,var(--coral) 20%);box-shadow:0 2px 0 rgba(0,0,0,.2);z-index:2}
/* 白板 */
.wb{position:absolute;inset:0}
.wb .frame{position:absolute;inset:0;background:#fdfefe;border:10px solid #cfd6dc;border-radius:16px;box-shadow:0 8px 0 rgba(0,0,0,.15)}
.wb .legs{position:absolute;left:12%;right:12%;bottom:-50px;height:60px;display:flex;justify-content:space-between}
.wb .legs i{width:10px;height:100%;background:#9aa6b1;border-radius:4px}
.wb .sheet{position:absolute;left:22px;right:22px;top:18px;bottom:18px;overflow:hidden}
/* 紙張 */
.paper{position:absolute;inset:0;background:var(--paper);border-radius:10px;box-shadow:0 8px 0 rgba(0,0,0,.12);padding:18px 22px}
.paper::before,.paper::after{content:"";position:absolute;top:-12px;width:90px;height:26px;background:rgba(255,220,120,.75);transform:rotate(-4deg)}
.paper::before{left:30px}.paper::after{right:30px;transform:rotate(5deg)}

.ptit{font-size:23px;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:10px}
.ptit .tagx{font-size:14px;background:var(--teal);color:#fff;border-radius:999px;padding:2px 10px}
.tbl{width:100%;border-collapse:separate;border-spacing:0 5px;font-size:16px;line-height:1.35}
.tbl th{font-size:14px;text-align:left;color:#fff;background:var(--wood-2);padding:6px 9px}
.tbl th:first-child{border-radius:9px 0 0 9px}.tbl th:last-child{border-radius:0 9px 9px 0}
.tbl td{background:#fff;padding:6px 9px;vertical-align:top;border-top:2px solid var(--paper-edge);border-bottom:2px solid var(--paper-edge)}
.tbl td:first-child{border-left:2px solid var(--paper-edge);border-radius:9px 0 0 9px;font-weight:700}
.tbl td:last-child{border-right:2px solid var(--paper-edge);border-radius:0 9px 9px 0}
.tbl.sm{font-size:14.5px}.tbl.sm td{padding:5px 8px}
.tbl.xs{font-size:13.5px;border-spacing:0 4px}.tbl.xs td{padding:4px 7px}.tbl.xs th{font-size:12.5px;padding:4px 7px}
.plist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.plist li{background:#fff;border:2px solid var(--paper-edge);border-radius:12px;padding:8px 12px 8px 44px;position:relative;font-size:17.5px;line-height:1.4}
.plist li .n{position:absolute;left:10px;top:8px;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.plist li b{color:var(--coral)}
.tagpill{display:inline-block;font-size:13px;font-weight:700;padding:1px 9px;border-radius:999px;color:#fff;vertical-align:1px}
.t-keep{background:var(--leaf-dark)}.t-hype{background:var(--red)}.t-polish{background:var(--sun);color:var(--ink)}.t-mid{background:var(--blue)}
.big{font-size:44px;font-weight:700;line-height:1}
.num{font-variant-numeric:tabular-nums}

/* 手機 */
.phone{position:absolute;inset:0;background:#2b2f3a;border-radius:38px;padding:16px 12px;box-shadow:0 10px 0 rgba(0,0,0,.2)}
.phone .scr{position:absolute;inset:16px 12px 16px;background:#eef4f8;border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.phone .bar{height:44px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:15px;font-weight:700;border-bottom:1px solid #dde}
.phone .bar i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#9fd8ff,#5ab0ea)}
.phone .chat{flex:1;padding:10px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;overflow:hidden}
.phone .m.hidden-s{display:none}
.phone .m{max-width:86%;padding:7px 10px;border-radius:14px;font-size:14px;line-height:1.4;flex:none}
.phone .m.me{align-self:flex-end;background:#c9f1c5;border-bottom-right-radius:4px}
.phone .m.ai{align-self:flex-start;background:#fff;border-bottom-left-radius:4px;box-shadow:0 1px 0 #dde}
.phone .m.sys{align-self:center;background:#ffe9c7;font-size:13px}
.phone .notch{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:70px;height:8px;border-radius:5px;background:#2b2f3a;z-index:2}

/* 名單比較 */
.lists{display:grid;gap:12px;height:100%}
.lists .col{background:#fff;border:3px solid var(--paper-edge);border-radius:14px;padding:8px 10px}
.lists .col h4{margin:0 0 6px;font-size:16px;color:var(--teal);text-align:center}
.lists .col ol{margin:0;padding-left:22px;font-size:15px;line-height:1.55}
.lists .col li.chg{background:var(--coral-soft);border-radius:6px;color:#b33c22;font-weight:700}

/* 長條 */
.bars{display:flex;flex-direction:column;gap:10px}
.bars .row{display:grid;grid-template-columns:var(--lw,180px) 1fr;align-items:center;gap:10px;font-size:16px}
.bars .track{position:relative;height:30px;background:#f1e6d2;border-radius:10px;overflow:visible}
.bars .fill{position:absolute;top:0;height:100%;border-radius:10px;background:var(--teal);width:0;transition:width 1.1s cubic-bezier(.3,1,.4,1)}
.bars .fill.neg{background:var(--red)}
.bars .val{position:absolute;top:3px;font-weight:700;font-size:16px;white-space:nowrap}
.bars .axis{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--ink-soft)}

/* 四格 */
.quad{display:grid;grid-template-columns:120px 1fr 1fr;grid-template-rows:40px 1fr 1fr;gap:8px;height:100%}
.quad .h{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:15px;color:var(--wood-dark);background:var(--paper-2);border-radius:10px;padding:4px}
.quad .c{background:#fff;border:3px solid var(--paper-edge);border-radius:14px;padding:9px 12px;font-size:15.5px;line-height:1.42}
.quad .c b{display:block;font-size:16.5px;margin-bottom:3px}
.quad .c.a{border-color:#b9e3b4}.quad .c.b{border-color:#ffd99a}.quad .c.c{border-color:#bcd7f5}.quad .c.d{border-color:#f6b7a8}

/* 數字徽章 */
.stats{display:grid;gap:12px}
.stat{background:#fff;border:3px solid var(--paper-edge);border-radius:18px;padding:10px 12px;text-align:center}
.stat .v{font-size:40px;font-weight:700;color:var(--teal);line-height:1.05}
.stat .v.bad{color:var(--red)}.stat .v.warn{color:#d88a00}
.stat .l{font-size:14.5px;color:var(--ink);margin-top:4px;line-height:1.35}

/* 卡片 */
.cards{display:grid;gap:10px}
.cardx{background:#fff;border:3px solid var(--paper-edge);border-radius:16px;padding:10px 12px;font-size:15px;line-height:1.42;position:relative}
.cardx h5{margin:0 0 5px;font-size:16.5px;color:var(--wood-dark)}
.cardx .ic{position:absolute;right:10px;top:8px;font-size:22px}
.cardx.accent{border-color:var(--sun);background:var(--sun-soft)}

/* 路徑石 */
.path{position:relative;height:100%}
.stone{position:absolute;width:150px;background:#fff;border:3px solid var(--paper-edge);border-radius:22px;padding:8px 10px;font-size:14px;line-height:1.35;box-shadow:0 5px 0 rgba(0,0,0,.08)}
.stone h5{margin:0 0 4px;font-size:17px;color:var(--teal)}
.stone.ai{border-color:#9fd3f3}
.stone.hotel{border-color:var(--sun)}

/* 流程 */
.flowsvg{width:100%;height:100%}
.flowsvg text{font-family:inherit}

/* 時間線 */
.tl{display:grid;gap:10px}
.tl .ph{background:#fff;border:3px solid var(--paper-edge);border-radius:16px;padding:9px 11px;font-size:14px;line-height:1.4;position:relative}
.tl .ph h5{margin:0 0 4px;font-size:16px;color:#fff;background:var(--teal);display:inline-block;padding:2px 10px;border-radius:999px}
.tl .ph .who{margin-top:5px;font-size:12.5px;color:var(--ink-soft)}

/* 實作卡（SVG） */
.promptcard{position:absolute;inset:0}
.promptcard svg{width:100%;height:100%;overflow:visible}
.promptcard foreignObject div{font-family:'Huninn','Noto Sans TC',sans-serif}
.pc-body{font-size:15px;line-height:1.55;color:var(--ink);white-space:pre-wrap;overflow:hidden;height:100%}
.pc-btn{cursor:pointer}
.pc-btn:hover rect{filter:brightness(1.06)}
.kitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kitfile{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--paper-edge);border-radius:12px;padding:6px 8px;font-size:13.5px;text-decoration:none;color:var(--ink);line-height:1.25}
.kitfile:hover{border-color:var(--coral)}
.kitfile .fi{flex:none;width:30px;height:36px}
.kitbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:700;border:2px solid var(--wood);background:var(--sun-soft);color:var(--ink);border-radius:10px;padding:4px 10px;cursor:pointer;text-decoration:none}
.kitbtn.copy{background:var(--teal-soft)}

/* 開場字幕 */
.lyric{position:absolute;left:0;right:0;bottom:22px;z-index:9;text-align:center;pointer-events:none}
.lyric .jp{display:inline-block;font-family:'Zen Maru Gothic','Huninn',sans-serif;font-size:34px;font-weight:700;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 12px rgba(0,0,0,.35);letter-spacing:.06em;opacity:0;transition:opacity .4s}
.lyric .zh{display:block;margin-top:6px;font-size:22px;color:#fff8d6;text-shadow:0 2px 0 rgba(0,0,0,.4),0 0 10px rgba(0,0,0,.35);opacity:0;transition:opacity .4s}
.lyric.on .jp,.lyric.on .zh{opacity:1}
.castintro{position:absolute;bottom:14px;background:var(--paper);border:3px solid var(--wood);border-radius:12px;padding:3px 10px;font-size:15px;font-weight:700;white-space:nowrap;transform:translateX(-50%)}
.titlesign{position:absolute;left:50%;top:60px;transform:translateX(-50%) scale(.6);opacity:0;background:var(--paper);border:6px solid var(--wood);border-radius:30px;padding:18px 36px;text-align:center;box-shadow:0 8px 0 var(--shadow);transition:all .8s cubic-bezier(.3,1.5,.5,1);z-index:9;width:980px}
.titlesign.on{opacity:1;transform:translateX(-50%) scale(1)}
.titlesign h1{margin:6px 0;font-size:44px;letter-spacing:.04em}
.titlesign .k{font-size:18px;color:var(--teal);letter-spacing:.3em;font-weight:700}
.titlesign .s{font-size:19px;color:var(--ink-soft)}

/* 片尾名單 */
.credits{position:absolute;inset:0;z-index:9;overflow:hidden;pointer-events:none}
.credits .roll{position:absolute;left:50%;width:760px;transform:translateX(-50%);text-align:center;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 10px rgba(0,0,0,.4)}
.credits h3{font-size:20px;letter-spacing:.3em;color:var(--sun);margin:34px 0 8px}
.credits p{margin:4px 0;font-size:18px;line-height:1.5}
.credits p small{font-size:14px;color:#dfe}
.credits .big{font-size:40px;margin:10px 0}
.gameover{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(20,20,40,.35),rgba(0,0,0,.85));color:#fff}
.gameover .g{font-size:86px;font-weight:700;letter-spacing:.14em;color:var(--sun);text-shadow:0 6px 0 #a3651c;animation:gbounce 1.6s ease-in-out infinite}
.gameover .m{font-size:24px;margin-top:10px;letter-spacing:.1em}
.gameover .opts{margin-top:30px;display:flex;gap:16px}
.gameover .opts button{font:inherit;font-size:22px;font-weight:700;padding:12px 26px;border-radius:18px;border:4px solid var(--wood);background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:0 5px 0 var(--shadow)}
.gameover .opts button:hover{background:var(--sun-soft)}
.gameover .opts button:focus-visible{outline:4px solid var(--coral)}
@keyframes gbounce{50%{transform:translateY(-10px)}}
.timerring{position:absolute;right:26px;top:22px;width:92px;height:92px}

.bars.compact{gap:6px}.bars.compact .track{height:24px}.bars.compact .row{font-size:15px}.bars.compact .val{top:1px;font-size:15px}
.cards.sm .cardx{font-size:13.5px;padding:8px 10px}.cards.sm .cardx h5{font-size:15px}
.tl.sm .ph{font-size:13px;padding:7px 9px}.tl.sm .ph h5{font-size:14px}
.bars .val.in{color:#fff}

.btn:focus-visible,.hud button:focus-visible,.pc-btn:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .bg.pan,.fgitem.sway,.cloudfx,.actor .body,.actor.float .shadow,.card .dots i,.start .press,.gameover .g{animation:none !important}
}
.stats.sm .stat{padding:7px 8px}.stats.sm .stat .v{font-size:29px}.stats.sm .stat .l{font-size:12.5px;line-height:1.3}