/* 自動產生，請勿直接修改：原始檔在 src/css/ */
:root{
  color-scheme: dark;
  --glass:rgba(22,12,28,.58); --glass-strong:rgba(22,12,28,.78); --glass-you:rgba(255,236,242,.82);
  --ink:#FFF6FA; --muted:rgba(255,236,245,.72); --you-ink:#3A1E33; --line:rgba(255,255,255,.16);
  --glow:#FFB547; --glow-soft:rgba(255,181,71,.35); --rose:#E3769A; --danger:#FF9DB6;
  --sheet:#FFF8F3; --sheet-ink:#3A2533; --sheet-muted:#8A6F80; --sheet-line:#EEDCE3; --sheet-field:#FFFFFF;
  --round:"Zen Maru Gothic","PingFang HK","Hiragino Maru Gothic ProN","Noto Sans HK",system-ui,sans-serif;
  --body:-apple-system,"PingFang HK","Noto Sans HK","Hiragino Sans",system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sheet:#211823; --sheet-ink:#F6E9F0; --sheet-muted:#B39DAC; --sheet-line:#3A2B3C; --sheet-field:#2B2030;
  }
}
:root[data-theme="dark"]{
  --sheet:#211823; --sheet-ink:#F6E9F0; --sheet-muted:#B39DAC; --sheet-line:#3A2B3C; --sheet-field:#2B2030;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);background:#1A1020}
body{height:100%;margin:0;background:#1A1020;color:var(--ink);font:16px/1.6 var(--body);-webkit-text-size-adjust:100%;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--glow);outline-offset:2px}

/* living background */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#2A1830}
.bg video,.bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg img{animation:drift 26s ease-in-out infinite alternate;transform-origin:50% 35%}
@keyframes drift{0%{transform:scale(1.04) translate(0,0)}50%{transform:scale(1.09) translate(-1.2%,-.8%)}100%{transform:scale(1.05) translate(1%,.6%)}}
.ambient{position:absolute;inset:-20%;background:
  radial-gradient(40% 30% at 30% 30%,rgba(255,181,71,.55),transparent 70%),
  radial-gradient(35% 28% at 75% 55%,rgba(227,118,154,.55),transparent 70%),
  radial-gradient(45% 35% at 40% 85%,rgba(120,90,200,.5),transparent 70%),#24142C;
  filter:blur(10px);animation:float 18s ease-in-out infinite alternate}
@keyframes float{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(4%,-3%) rotate(8deg)}}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,5,14,.35) 0%,transparent 22%,transparent 45%,rgba(10,5,14,.55) 100%)}

.app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;max-width:640px;margin:0 auto}

header{display:flex;align-items:center;gap:12px;padding:10px 14px}
.lantern{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 34%,#FFF3D6 0%,var(--glow) 55%,#E98A3C 100%);
  box-shadow:0 0 0 0 var(--glow-soft);font:700 17px/1 var(--round);color:#6B3A12;transition:box-shadow .4s}
.lantern.speaking{animation:breathe 1.6s ease-in-out infinite}
.lantern.listening{box-shadow:0 0 0 6px var(--glow-soft)}
@keyframes breathe{0%,100%{box-shadow:0 0 0 2px var(--glow-soft)}50%{box-shadow:0 0 0 12px var(--glow-soft)}}
.who{flex:1;min-width:0;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.who h1{margin:0;font:700 19px/1.2 var(--round);letter-spacing:.03em}
.status{margin:0;font-size:13px;color:var(--muted)}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;place-items:center}
.icon-btn svg{width:21px;height:21px}

/* chat floats over the lower part, character stays visible above */
.spacer{flex:1;min-height:0}
.spacer[hidden]{display:none}
main{flex:none;height:38%;max-height:38vh;overflow-y:auto;padding:28px 14px 6px;display:flex;flex-direction:column;gap:8px;transition:opacity .3s;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 44px);mask-image:linear-gradient(180deg,transparent 0,#000 44px)}
body.hide-chat main{opacity:0;pointer-events:none}
.peek{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 6px);font-size:12px;color:var(--muted);text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none;white-space:nowrap}
main>:first-child{margin-top:auto}
.msg{max-width:80%;padding:7px 12px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.msg.akari{align-self:flex-start;background:var(--glass);border:1px solid var(--line);border-radius:4px 18px 18px 18px}
.msg.you{align-self:flex-end;background:var(--glass-you);color:var(--you-ink);border-radius:18px 4px 18px 18px}
.msg.akari.replay{cursor:pointer}
.note{align-self:center;text-align:center;font-size:13px;color:var(--ink);background:var(--glass-strong);border-radius:12px;padding:6px 12px;max-width:92%}
.note button{margin-left:6px;border:0;background:none;color:var(--glow);text-decoration:underline;padding:4px}
.typing{color:var(--muted)}

.composer{display:flex;align-items:center;gap:8px;padding:8px 12px 12px}
.field{flex:1;display:flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--line);border-radius:26px;padding:4px 4px 4px 16px;min-height:50px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.field input{flex:1;min-width:0;border:0;background:transparent;outline:none;padding:8px 0;font-size:16px}
.field input::placeholder{color:var(--muted)}
.mic{height:42px;border-radius:21px;border:0;flex:none;background:var(--glow);color:#5A2E0C;display:flex;align-items:center;gap:4px;padding:0 14px;font-weight:600;font-size:15px}
.mic svg{width:19px;height:19px}
.mic.on{background:var(--rose);color:#fff;animation:breathe 1.4s ease-in-out infinite}
.send{width:42px;height:42px;border-radius:50%;border:0;background:var(--rose);color:#fff;display:grid;place-items:center}
.send[hidden]{display:none}
.send svg{width:19px;height:19px}

.wake{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:16px;padding:24px 24px calc(48px + env(safe-area-inset-bottom,0px));text-align:center;background:linear-gradient(180deg,transparent 40%,rgba(10,5,14,.75))}
.wake h2{margin:0;font:700 34px/1.2 var(--round);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.wake p{margin:0;color:var(--muted);max-width:26em;font-size:15px}
.primary{border:0;border-radius:999px;background:var(--rose);color:#fff;padding:14px 32px;font-weight:600;font-size:17px}

dialog{border:0;padding:0;width:min(560px,100%);max-height:86vh;border-radius:22px 22px 0 0;margin:auto auto 0;background:var(--sheet);color:var(--sheet-ink)}
dialog::backdrop{background:rgba(10,5,14,.45)}
.sheet{padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:18px}
.sheet h2{margin:0;font:700 20px/1.3 var(--round)}
.sheet h3{margin:6px 0 0;font:700 16px/1.3 var(--round)}
.row{display:flex;flex-direction:column;gap:6px}
.row label{font-size:14px;color:var(--sheet-muted)}
.row select,.row input[type=text]{padding:10px 12px;border:1px solid var(--sheet-line);border-radius:12px;background:var(--sheet-field);color:var(--sheet-ink)}
.row input[type=range]{width:100%;accent-color:var(--rose)}
.check{display:flex;align-items:center;justify-content:space-between;gap:12px}
.check input{width:22px;height:22px;accent-color:var(--rose)}
.mem-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.mem-list li{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--sheet-field);border-radius:10px;padding:8px 10px;font-size:15px}
.mem-list button{border:0;background:none;color:#C2456E;font-size:14px;padding:4px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.ghost{border:1px solid var(--sheet-line);background:var(--sheet-field);color:var(--sheet-ink);border-radius:999px;padding:10px 18px}
.danger{color:#C2456E}
.hint{font-size:13px;color:var(--sheet-muted);margin:0}

.stage{position:absolute;inset:0;transform-origin:50% 30%;transition:transform 1.6s cubic-bezier(.3,.7,.2,1)}
.stage.near{transform:scale(1.2) translateY(4%)}
.stage.far{transform:scale(.86) translateY(-2%)}
.fxbox{position:absolute;inset:0;transition:filter .8s}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease-in-out;will-change:opacity}
.layer.on{opacity:1}
.tint{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s}
.fx-shy .tint{opacity:1;background:radial-gradient(55% 35% at 50% 32%,rgba(255,110,150,.38),transparent 75%)}
.fx-angry .tint{opacity:1;background:radial-gradient(70% 50% at 50% 40%,transparent 40%,rgba(200,30,40,.32))}
.fx-angry .fxbox{animation:shake .45s ease-in-out 2}
.fx-happy .fxbox{animation:hop .55s ease-out 2}
.fx-surprised .fxbox{animation:pop .5s cubic-bezier(.2,1.6,.4,1) 1}
.fx-sad .fxbox{filter:saturate(.55) brightness(.82)}
.fx-tease .fxbox{animation:wiggle .5s ease-in-out 2}
@keyframes wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-1.5deg) translateX(-1%)}70%{transform:rotate(1.5deg) translateX(1%)}}
.fx-thinking .fxbox{animation:ponder 5s ease-in-out infinite alternate}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.6%)}75%{transform:translateX(1.6%)}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-2.2%)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes ponder{0%{transform:rotate(0) translateX(0)}100%{transform:rotate(-1.2deg) translateX(-1.5%)}}
.clip-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.clip-list li{display:flex;align-items:center;gap:8px;background:var(--sheet-field);border-radius:12px;padding:8px 10px}
.clip-list .name{flex:1;font-weight:600}
.clip-list .state{font-size:13px;color:var(--sheet-muted)}
.clip-list button{border:1px solid var(--sheet-line);background:transparent;color:var(--sheet-ink);border-radius:999px;padding:6px 12px;font-size:14px}
.clip-list button.rm{border:0;color:#C2456E;padding:6px 4px}

.game{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:0 12px 12px}
.game[hidden],main[hidden],.composer[hidden]{display:none}
.say{align-self:flex-start;max-width:88%;background:var(--glass);border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:8px 14px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);min-height:44px}
.say:empty{visibility:hidden}
.board{--n:13;align-self:center;width:min(100%,460px);aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--n),1fr);padding:2.5%;border-radius:16px;
  background:linear-gradient(135deg,rgba(247,214,160,.94),rgba(232,186,120,.94));box-shadow:0 10px 30px rgba(20,8,24,.35)}
.cell{position:relative;border:0;background:none;padding:0;margin:0;aspect-ratio:1}
.cell::before,.cell::after{content:"";position:absolute;background:rgba(90,52,20,.55)}
.cell::before{left:0;right:0;top:50%;height:1px}
.cell::after{top:0;bottom:0;left:50%;width:1px}
.cell.l::before{left:50%}.cell.r::before{right:50%}.cell.t::after{top:50%}.cell.b::after{bottom:50%}
.stone{position:absolute;inset:8%;border-radius:50%;z-index:1;transform:scale(.4);opacity:0;transition:transform .18s ease-out,opacity .18s}
.stone.on{transform:scale(1);opacity:1}
.stone.p1{background:radial-gradient(circle at 35% 30%,#6b6b78,#15121a 70%);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.stone.p2{background:radial-gradient(circle at 35% 30%,#ffffff,#f2dfe6 60%,#d9b9c6);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.stone.last::after{content:"";position:absolute;inset:36%;border-radius:50%;background:var(--rose)}
.stone.win{box-shadow:0 0 0 3px var(--glow),0 0 12px var(--glow)}
.game-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.score{flex:1;font:700 16px/1.2 var(--round);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.gbtn{border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;padding:9px 14px;font-size:15px;min-height:42px}
.gbtn.hot{background:var(--rose);border-color:transparent;color:#fff}
.gbtn:disabled{opacity:.4}

.ripple{position:fixed;z-index:15;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:2px solid rgba(255,255,255,.9);pointer-events:none;animation:ripple .6s ease-out forwards}
@keyframes ripple{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
.floaty{position:fixed;z-index:16;max-width:70vw;background:var(--glass-strong);border:1px solid var(--line);border-radius:16px;padding:7px 12px;font-size:15px;pointer-events:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translate(-50%,-100%);animation:floatIn .25s ease-out;transition:opacity .4s}
@keyframes floatIn{from{opacity:0;transform:translate(-50%,-80%)}to{opacity:1;transform:translate(-50%,-100%)}}

.who h1 .en{font:500 13px/1 var(--body);color:var(--muted);letter-spacing:.04em;margin-left:4px}
.wake h2 .en{font:500 18px/1 var(--body);color:var(--muted);margin-left:6px}
.icon-btn{position:relative}
.dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 2px rgba(22,12,28,.8)}
.dot[hidden]{display:none}
.bond{background:var(--sheet-field);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.bond-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lv{font:700 17px/1.3 var(--round)}
.streak{font-size:14px;color:var(--sheet-muted)}
.bar{height:10px;border-radius:5px;background:var(--sheet-line);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#FFB547,#E3769A);border-radius:5px;transition:width .6s}
.timeline,.secrets{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.timeline li{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start;font-size:15px}
.timeline time{font:700 14px/1.5 var(--round);color:#C2456E}
.timeline .st{font-weight:600}
.timeline .sh{color:var(--sheet-muted);font-size:14px}
.timeline li.future{opacity:.5}
.secrets li{background:var(--sheet-field);border-radius:12px;padding:10px 12px;font-size:15px}
.secrets li.locked{color:var(--sheet-muted)}

.gpanel,.gplay{display:flex;flex-direction:column;gap:10px}
.gpanel[hidden],.gplay[hidden]{display:none}
.gtitle{margin:0;font:700 22px/1.2 var(--round);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.seg{display:flex;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:4px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.seg button{flex:1;border:0;background:none;border-radius:999px;padding:9px 0;font-weight:600;min-height:40px}
.seg button.on{background:var(--rose);color:#fff}
.gcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gcard{position:relative;display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:14px 14px 40px;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.gcard b{font:700 18px/1.3 var(--round)}
.gcard span{font-size:13px;color:var(--muted)}
.sizes{position:absolute;right:8px;bottom:8px;display:flex;gap:4px}
.sizes button{border:1px solid var(--line);background:rgba(255,255,255,.08);border-radius:8px;padding:3px 7px;font-size:12px;min-width:30px}
.sizes button.on{background:var(--rose);border-color:transparent;color:#fff}
.gcard-rules{position:absolute;left:10px;bottom:8px;border:1px solid var(--line);background:rgba(255,255,255,.08);border-radius:999px;padding:3px 10px;font-size:13px}
.boardwrap{align-self:center;width:min(100%,460px)}
.board{width:100%}
.cell.star::before{box-shadow:none}
.cell.star .stone:not(.on){opacity:1;transform:none;inset:42%;background:rgba(90,52,20,.65)}
.xq{position:relative;width:100%;aspect-ratio:9/10;border-radius:14px;background:linear-gradient(135deg,rgba(247,214,160,.95),rgba(232,186,120,.95));box-shadow:0 10px 30px rgba(20,8,24,.35)}
.xq svg{position:absolute;inset:0;width:100%;height:100%}
.river{position:absolute;left:0;right:0;top:45%;height:10%;display:flex;justify-content:space-around;align-items:center;font:700 16px/1 var(--round);color:rgba(90,52,20,.6);pointer-events:none}
.pt{position:absolute;width:11%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;background:none;padding:0;border-radius:50%}
.pc{position:absolute;inset:4%;border-radius:50%;display:grid;place-items:center;font:700 clamp(14px,4.6vw,22px)/1 var(--round);background:radial-gradient(circle at 40% 35%,#fff8ec,#f0dcbc);box-shadow:0 2px 3px rgba(0,0,0,.35),inset 0 0 0 2px currentColor}
.pc.red{color:#C0262D}.pc.blk{color:#1E1A22}
.pt.sel .pc{box-shadow:0 0 0 3px var(--glow),inset 0 0 0 2px currentColor}
.pt.last::after{content:"";position:absolute;inset:-2%;border-radius:50%;border:2px dashed rgba(227,118,154,.9);pointer-events:none}
.pt.dot::before{content:"";position:absolute;inset:36%;border-radius:50%;background:rgba(227,118,154,.85)}
.pt.hit .pc{box-shadow:0 0 0 3px #E3769A,inset 0 0 0 2px currentColor}
.cb{display:grid;grid-template-columns:repeat(8,1fr);width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(20,8,24,.35)}
.sq{position:relative;border:0;padding:0;display:grid;place-items:center;aspect-ratio:1}
.sq.lt{background:#F3E2C7}.sq.dk{background:#C79A6B}
.sq.last{box-shadow:inset 0 0 0 100px rgba(255,200,90,.38)}
.sq.sel{box-shadow:inset 0 0 0 3px var(--glow)}
.sq.dot::after{content:"";width:28%;aspect-ratio:1;border-radius:50%;background:rgba(194,69,110,.55)}
.sq.hit{box-shadow:inset 0 0 0 3px #C2456E}
.cp{font-size:clamp(24px,8.5vw,42px);line-height:1;font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",serif}
.cp.w{color:#FFFDF8;text-shadow:0 0 1px #2a1d14,0 0 1px #2a1d14,0 1px 2px rgba(0,0,0,.5);-webkit-text-stroke:1px #2a1d14}
.cp.b{color:#1E1A22;text-shadow:0 1px 1px rgba(255,255,255,.25)}
.rules-body{white-space:pre-line;font-size:15px;line-height:1.7}
.gplay .game-bar{justify-content:flex-end}
.gplay .score{font-size:14px}

.ico-txt{font:700 18px/1 var(--round)}
header{gap:8px}
.learn{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 12px 12px;position:relative}
.learn[hidden]{display:none}
.lhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ltitle{font:700 17px/1.3 var(--round);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.ltitle small{font:500 13px var(--body);color:var(--muted)}
.chip{font-size:12px;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.lscenes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lscene{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);background:var(--glass);border-radius:14px;padding:10px 4px;font-size:12px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.lscene i{font-style:normal;font-size:22px}
.lscene b{font-weight:600;line-height:1.25;text-align:center}
.gbtn.sm{padding:6px 12px;min-height:36px;font-size:14px}
.gbtn.off{opacity:.45}
.lcustom{padding-left:14px}
.llog{max-height:44vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-top:24px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30px);mask-image:linear-gradient(180deg,transparent 0,#000 30px)}
.lmsg{max-width:88%;padding:8px 12px;border-radius:16px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.lmsg.akari{align-self:flex-start;background:var(--glass);border:1px solid var(--line);border-top-left-radius:4px}
.lmsg.you{align-self:flex-end;background:var(--glass-you);color:var(--you-ink);border-top-right-radius:4px}
.lt{font-size:17px;line-height:1.45}
.lr{font-size:13px;color:var(--muted);margin-top:2px}
.lz{font-size:14px;color:var(--muted);margin-top:2px}
.lmsg.you .lr,.lmsg.you .lz{color:#7a5a6a}
.ltools{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ltools button{border:1px solid var(--line);background:rgba(255,255,255,.08);border-radius:999px;padding:3px 9px;font-size:13px;min-height:30px}
.lfb{margin-top:6px;border-radius:12px;padding:8px 10px;font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.55)}
.lfb b{font:700 15px var(--round)}
.lfb.good b{color:#1f8a4c}.lfb.mid b{color:#b07206}.lfb.bad b{color:#c2264e}
.lcor{font-weight:600;cursor:pointer}
.ltip{color:#6b5560}
.lhints{display:flex;flex-direction:column;gap:6px}
.lhints[hidden]{display:none}
.lhint{text-align:left;border:1px solid var(--line);background:var(--glass-strong);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column}
.lhint small{color:var(--muted)}
.lbar{display:flex;gap:6px;flex-wrap:wrap}
.ltoast{position:absolute;left:12px;right:12px;top:-8px;transform:translateY(-100%);background:var(--glass-strong);border:1px solid var(--line);border-radius:14px;padding:8px 12px;font-size:15px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ltoast[hidden]{display:none}
.shcard,.rcard,.gbox{background:var(--glass-strong);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:6px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.sht{font-size:22px;line-height:1.4;font-weight:600}
.shresult{display:flex;flex-direction:column;gap:4px}
.shresult b{font:700 18px var(--round)}
.shresult b.good{color:#7be0a2}.shresult b.mid{color:#ffd27a}.shresult b.bad{color:#ff9db6}
.shdiff{font-size:20px;letter-spacing:.02em}
.shdiff .miss{color:#ff8fab;text-decoration:underline wavy}
.hint2{font-size:12px;color:var(--muted);margin:0;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.rcard{align-items:center;text-align:center;min-height:170px;justify-content:center}
.rw{font-size:34px;font-weight:700}
.rm{font-size:17px}
.gbox ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px}
.stlangs li{display:flex;flex-direction:column}
.stlangs span{color:var(--muted);font-size:14px}

.lprac{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.lprac-row{display:flex;gap:6px}
.lprac input{flex:1;min-width:0;border:1px solid var(--line);background:rgba(255,255,255,.12);border-radius:999px;padding:8px 12px;font-size:16px;color:inherit;outline:none}
.lprac button{border:0;background:var(--rose);color:#fff;border-radius:999px;padding:6px 14px;font-size:14px}
.lmsg.you .lprac input{background:rgba(255,255,255,.7);border-color:rgba(58,30,51,.2)}
.lmsg.you .shresult b.good{color:#1f8a4c}.lmsg.you .shresult b.mid{color:#b07206}.lmsg.you .shresult b.bad{color:#c2264e}
.lmsg.you .shdiff .miss{color:#c2264e}

#lMenu{position:relative;z-index:3}
.lseg{background:var(--glass-strong);-webkit-backdrop-filter:none;backdrop-filter:none}
.lseg button,.lscene,.gbtn,.gcard,.seg button{touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}
.ltitle{cursor:pointer}

.lt ruby rt{font-size:.55em;color:var(--muted);font-weight:400}
.lmsg.you .lt ruby rt{color:#7a5a6a}
.llog.noread rt{visibility:hidden}
.lz{font-style:italic}
.ltools{gap:4px;margin-top:4px}
.ltools button{min-height:28px;min-width:30px;padding:2px 8px;font-size:12px}
.lbadge{display:inline-block;margin-top:6px;border:0;border-radius:999px;padding:3px 10px;font:700 13px var(--round);background:rgba(255,255,255,.6)}
.lbadge.good{color:#1f8a4c}.lbadge.mid{color:#b07206}.lbadge.bad{color:#c2264e}.lbadge.wait{color:#7a5a6a;font-weight:500}
.typing3{display:flex;gap:5px;align-items:center;padding:12px 14px}
.typing3 i{width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:.4;animation:blink 1s infinite}
.typing3 i:nth-child(2){animation-delay:.15s}.typing3 i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:.9}}
.lpcard{background:var(--sheet);color:var(--sheet-ink);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.lpcard .lz{color:var(--sheet-muted)}
.lpcard .lt ruby rt{color:var(--sheet-muted)}
.lphead{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--sheet-muted)}
.lplink{border:0;background:none;color:#C2456E;font-size:13px}
.lpbtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.lpbtns button{border:1px solid var(--sheet-line);background:var(--sheet-field);color:var(--sheet-ink);border-radius:999px;padding:8px 0;font-size:14px;font-weight:600}
.lpbtns button.hot{background:#8A4B2E;color:#fff;border-color:transparent}
.lpcard .lprac input{background:var(--sheet-field);color:var(--sheet-ink);border-color:var(--sheet-line)}
.lpcard .shresult b.good{color:#1f8a4c}.lpcard .shresult b.mid{color:#b07206}.lpcard .shresult b.bad{color:#c2264e}
.lpcard .shdiff .miss{color:#c2264e}
.gbtn.hotline{background:var(--glass-strong)}
@media (prefers-reduced-motion: reduce){.typing3 i{animation:none}}

@media (prefers-reduced-motion: reduce){
  .lantern.speaking,.mic.on,.bg img,.ambient,.fxbox{animation:none!important}
  .stage{transition:none}
}

.learn{overflow-y:auto;-webkit-overflow-scrolling:touch}
.gbtn.hot2{background:var(--glass-strong);font-weight:700;flex:1}
.ctiers{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.ctiers button{flex:none;border:1px solid var(--line);background:var(--glass-strong);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600}
.ctiers button.on{background:var(--rose);border-color:transparent;color:#fff}
.clist{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto}
.clesson{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;text-align:left;background:var(--sheet);color:var(--sheet-ink);border:0;border-radius:16px;padding:10px 12px}
.clesson i{font-style:normal;font-size:24px;text-align:center}
.clesson b{display:block;font:700 15px/1.3 var(--round)}
.clesson span{font-size:12px;color:var(--sheet-muted)}
.clesson em{font-style:normal;font:700 13px var(--round);color:#C2456E}
.cbar{height:5px;border-radius:3px;background:var(--sheet-line);margin-top:5px;overflow:hidden}
.cbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#FFB547,#E3769A);transition:width .5s}
.cbar.big{height:8px;background:rgba(255,255,255,.2)}
.lsbody{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;padding:2px}
.cword{display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px;align-items:center;background:var(--glass-strong);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.cword b{display:block;font-size:17px}.cword small{color:var(--muted);font-size:12px}.cword span{font-size:14px}
.cword button{border:1px solid var(--line);background:rgba(255,255,255,.08);border-radius:999px;min-width:34px;min-height:32px}
.csent{max-width:100%}
.cq{font-size:13px;color:var(--muted);text-shadow:0 1px 4px rgba(0,0,0,.5)}
.cqword{align-self:center;font-size:40px;font-weight:700;background:var(--glass-strong);border:1px solid var(--line);border-radius:18px;padding:14px 26px;min-width:140px;text-align:center;cursor:pointer}
.cqword.kq{font-size:64px;padding:10px 34px}
.copts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.copts button{border:1px solid var(--line);background:var(--glass-strong);border-radius:14px;padding:12px 8px;font-size:16px;font-weight:600;min-height:52px}
.copts button.ok{background:#2f9e63;color:#fff;border-color:transparent}
.copts button.ng{background:#c2264e;color:#fff;border-color:transparent}
.cquiz-end{font:700 22px/1.3 var(--round);text-align:center;padding:8px}
.kgrid{display:grid;gap:5px}
.kgrid.c5{grid-template-columns:repeat(5,1fr)}.kgrid.c3{grid-template-columns:repeat(3,1fr)}
.kcell{display:flex;flex-direction:column;align-items:center;border:0;border-radius:10px;padding:5px 0;background:rgba(255,248,240,.88);color:#3A2533}
.kcell b{font-size:21px;line-height:1.2}.kcell small{font-size:11px;color:#8A6F80}
.kcell.weak{background:#ffd3dc}.kcell.strong{background:#d2f1dc}
.kempty{display:block}
.kinfo{background:var(--sheet);color:var(--sheet-ink);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.kinfo[hidden]{display:none}
.kinfo .lz{color:var(--sheet-muted)}
.kinfo .lbar button{border:1px solid var(--sheet-line);background:var(--sheet-field);color:var(--sheet-ink);border-radius:999px;padding:5px 12px;font-size:14px}
.kbig{font-size:40px;font-weight:700;line-height:1.1}
.kro{font:700 18px var(--round);color:#C2456E}
.ktip{font-size:15px}
.kqsets{display:flex;gap:14px;font-size:15px}
.kqsets input{accent-color:var(--rose);width:18px;height:18px;vertical-align:-3px}
.kmodes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kmodes button{border:1px solid var(--line);background:rgba(255,255,255,.08);border-radius:12px;padding:10px 0;font-size:14px;font-weight:600}
.kqbody{display:flex;flex-direction:column;gap:10px}
.ktype{border:1px solid var(--line);background:var(--glass-strong);border-radius:14px;padding:12px 14px;font-size:20px;text-align:center;color:inherit;outline:none}
.kfb{text-align:center;font:700 18px var(--round)}.kfb.ok{color:#7be0a2}.kfb.ng{color:#ff9db6}
.kmatch{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kmatch button{border:1px solid var(--line);background:var(--glass-strong);border-radius:14px;min-height:64px;font-size:22px;font-weight:700;transition:transform .15s,background .2s}
.kmatch button.sel{background:var(--rose);color:#fff;transform:scale(1.04)}
.kmatch button.ok{background:#2f9e63;color:#fff;opacity:.55}
.kmatch button.ng{background:#c2264e;color:#fff}

.bg.night .fxbox{filter:brightness(.6) saturate(.78) hue-rotate(-8deg)}
.bg.night::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(55% 35% at 50% 32%,rgba(255,186,104,.16),transparent 70%),linear-gradient(180deg,rgba(18,22,70,.5),rgba(10,8,30,.32) 60%,rgba(10,8,30,.5))}
.bg.night.fx-sad .fxbox{filter:brightness(.5) saturate(.5)}

.cal{position:fixed;inset:0;z-index:40;cursor:crosshair}
.cal[hidden]{display:none}
body.calibrating .app{visibility:hidden}
.cal-panel{position:absolute;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top,0px));background:var(--sheet);color:var(--sheet-ink);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:default}
.cal-step{font:700 16px/1.4 var(--round)}
.cal-tip{font-size:13px;color:var(--sheet-muted)}
.cal-btns{display:flex;gap:6px;flex-wrap:wrap}
.cal-btns button{border:1px solid var(--sheet-line);background:var(--sheet-field);color:var(--sheet-ink);border-radius:999px;padding:7px 14px;font-size:14px}
.cal-btns button.hot{background:#C2456E;color:#fff;border-color:transparent}
.cal-btns button[hidden]{display:none}
.cal-btns button:disabled{opacity:.4}
.cal-dot{position:absolute;transform:translate(-50%,-50%);min-width:30px;height:30px;padding:0 6px;border-radius:15px;background:#E3769A;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(255,255,255,.8);pointer-events:none}
.cal-label{position:absolute;transform:translate(-50%,-130%);background:rgba(20,10,24,.85);color:#fff;border-radius:10px;padding:4px 10px;font-size:14px;font-weight:700;pointer-events:none;white-space:nowrap}

.cal-form{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));background:var(--sheet);color:var(--sheet-ink);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:default}
.cal-form[hidden]{display:none}
.cal-form input,.cal-form select,.cal-form textarea{border:1px solid var(--sheet-line);background:var(--sheet-field);color:var(--sheet-ink);border-radius:10px;padding:8px 10px;font-size:16px}
.cal-form textarea{resize:vertical}
.cu-row{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--sheet-muted)}
.cu-row select{flex:1}
.cu-ring{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:3px solid #E3769A;background:rgba(227,118,154,.25);box-shadow:0 0 0 2px rgba(255,255,255,.7);pointer-events:none}
.cal-banner{position:absolute;left:50%;top:calc(24px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:var(--sheet);color:var(--sheet-ink);border-radius:999px;padding:10px 18px;font:700 15px var(--round);box-shadow:0 6px 18px rgba(0,0,0,.3);white-space:nowrap}
.cal-panel[hidden]{display:none}

.lpersonal{display:flex;flex-direction:column;gap:6px;background:var(--glass-strong);border:1px solid var(--line);border-radius:16px;padding:10px 12px}
.lpersonal[hidden]{display:none}
.lpersonal b{font-size:13px}
.lpers{display:flex;gap:10px;align-items:center;text-align:left;border:0;border-radius:12px;padding:9px 12px;background:linear-gradient(90deg,rgba(255,181,71,.35),rgba(227,118,154,.35));font-weight:600}
.lpers small{font:700 12px var(--round);background:rgba(255,255,255,.25);border-radius:8px;padding:2px 6px}
.dtitle{display:flex;flex-direction:column;gap:2px;padding:4px 2px}
.dtitle b{font:700 19px/1.4 var(--round)}
.dtitle small{color:var(--muted)}
.dline{background:var(--glass-strong);border:1px solid var(--line);border-radius:14px;padding:8px 12px;transition:box-shadow .2s}
.dline .lt{cursor:pointer}
.dline.reading{box-shadow:0 0 0 2px var(--glow)}
.dq{font:700 17px/1.4 var(--round)}

.rblist{display:flex;flex-direction:column;gap:8px;max-height:48vh;overflow-y:auto}
.rbook{display:flex;gap:8px;align-items:stretch}
.rbinfo{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left;border:0;border-radius:16px;padding:12px 14px;background:var(--sheet);color:var(--sheet-ink)}
.rbinfo b{font:700 16px/1.3 var(--round)}
.rbinfo span{font-size:12px;color:var(--sheet-muted)}
.rbdel{border:1px solid var(--line);background:var(--glass-strong);border-radius:14px;padding:0 12px;font-size:13px;color:#ff9db6}
.rtools select,.rsel select{border:1px solid var(--line);background:var(--glass-strong);color:var(--ink);border-radius:10px;padding:7px 10px;font-size:14px;max-width:100%}
.rtools select{width:100%}
.rtext{max-height:36vh;overflow-y:auto;background:rgba(255,250,244,.93);color:#2f2128;border-radius:16px;padding:12px 16px;font-size:17px;line-height:1.85;scroll-behavior:smooth}
.rtext p{margin:0 0 .7em;border-radius:6px;padding:2px 4px;cursor:pointer;transition:background .25s}
.rtext p.on{background:rgba(255,181,71,.35)}
.rctrl{align-items:center}
.rsel{font-size:13px;display:flex;align-items:center;gap:4px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.rsel input{accent-color:var(--rose);width:18px;height:18px}
.rnote{background:var(--glass-strong);border:1px solid var(--line);border-radius:16px;padding:10px 14px;display:flex;flex-direction:column;gap:6px;max-height:26vh;overflow-y:auto;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.rnote[hidden]{display:none}
.rnbody,.rnline{white-space:pre-line;font-size:15px;line-height:1.65}
.rq{font-size:14px;color:var(--muted)}.ra{white-space:pre-line;font-size:15px;line-height:1.6}

.devswitch{margin-top:8px;padding-top:14px;border-top:1px solid var(--sheet-line);font-weight:600}
.devarea{display:flex;flex-direction:column;gap:14px;border:1px dashed var(--sheet-line);border-radius:16px;padding:12px 14px;background:var(--sheet-field)}
.devarea[hidden]{display:none}
.devtag{margin:0;font-size:13px;font-weight:700;color:#C2456E}

.gcard[hidden]{display:none}
.sizes button[hidden]{display:none}
.lsub{font:700 14px var(--round);text-shadow:0 1px 6px rgba(0,0,0,.5)}
.jlearn{background:var(--sheet-field);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.jlearn ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:14px}
.jlearn .stlangs span{color:var(--sheet-muted)}
#openReader[hidden]{display:none}

.uitag{position:fixed;z-index:60;transform:translate(-50%,-100%);background:#1d1222;color:#fff;border:2px solid #FFB547;border-radius:10px;padding:5px 10px;font:600 13px/1.3 var(--body);white-space:nowrap;pointer-events:none;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.uitag-hit{outline:3px dashed #FFB547 !important;outline-offset:2px}

/* 網頁版（PWA）新增：更新提示、版本號 */
.update-bar{position:fixed;z-index:80;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top,0px));display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;border-radius:16px;background:var(--glass-strong);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:15px}
.update-bar[hidden]{display:none}
.update-bar button{border:0;border-radius:999px;background:var(--rose);color:#fff;font-weight:700;padding:9px 16px;min-height:40px}
.update-bar button:disabled{opacity:.6}
.app-version{text-align:center;font-size:12px}