/* 配色跟報名頁的識別證一致：灰銀、午夜藍、橘 */
/* 手機、平板連點不會放大畫面（畫畫板、拉桿另外設 none） */
html, body, * { touch-action: manipulation; }
/* 平板、手機往下拉不會整頁重新整理，捲到底也不會帶動後面的畫面 */
html, body { overscroll-behavior: none; }
.overlay, .modal-card, .draw-card { overscroll-behavior: contain; }
/* iPad／iPhone 的 Safari 點到字小於 16px 的輸入框會自動放大整個畫面，觸控裝置上的輸入框一律至少 16px */
@media (pointer: coarse) { #chat-input, .music-form input { font-size: 16px !important; } }
:root {
  --ground: #FAFAF7;
  --paper: #FFFFFF;
  --ink: #3A3A3C;
  --muted: #6E6E73;
  --line: #D9D9DD;
  --accent: #FF6A13;
  --accent-ink: #B84300;
  --navy: #131A28;
  --navy-fg: #F2F4F8;
  --navy-dim: #9AA3B5;
  --silver: #D6DAE1;
  /* 米白紙條：場景名牌、提示條共用的手繪框 */
  --note: #FBF6E9;
  --note-ink: #2B2A33;
  --note-radius: 14px 9px 16px 10px / 10px 15px 9px 14px;
  --note-shadow: 2px 3px 0 rgba(43,42,51,.28);
  --display: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--navy);
  font-family: var(--display); color: var(--ink); }
#game { position: fixed; inset: 0; }
[hidden] { display: none !important; }

/* 角色創建 */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(19, 26, 40, 0.6); backdrop-filter: blur(3px); z-index: 10; padding: 16px; overflow-y: auto; }
.card { background: var(--ground); border-top: 6px solid var(--accent); border-radius: 4px 4px 20px 20px;
  padding: 24px 28px 28px; max-width: 540px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.eyebrow { font: 700 12px/1 var(--mono); letter-spacing: 0.14em; color: var(--accent-ink); margin: 0 0 10px; }
h1 { margin: 0; font-size: 32px; font-weight: 900; letter-spacing: -0.02em; }
.sub { margin: 6px 0 20px; color: var(--muted); }
.create { display: flex; gap: 22px; align-items: flex-start; }
#preview { background: var(--silver); border-radius: 50%; flex-shrink: 0; width: 128px; height: 128px;
  object-fit: contain; border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--accent); }
.fields { flex: 1; min-width: 0; }
label, .label { display: block; font-weight: 700; font-size: 15px; }
.label { margin: 14px 0 8px; }
input { width: 100%; font: 500 17px var(--display); padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--paper); margin-top: 6px; outline: none; color: inherit; }
input:focus { border-color: var(--accent); }
/* 拉桿不要套到上面輸入框的 padding 跟邊框，不然圓點拉不到兩端 */
input[type=range] { height: 28px; padding: 0; border: 0; border-radius: 0; background: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font: 500 14px var(--display); border: 1.5px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; color: inherit; }
.chips button:hover { border-color: var(--accent); }
.chips button.on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
#faces button { padding: 2px; border-radius: 12px; border-width: 2px; }
#faces button.on { background: var(--paper); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
#faces canvas { width: 40px; height: 40px; display: block; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--paper);
  box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; }
.swatches button.on { box-shadow: 0 0 0 2.5px var(--accent); }
.primary { font: 700 16px var(--display); background: var(--accent); color: #fff; border: 2px solid var(--accent);
  border-radius: 999px; padding: 10px 24px; cursor: pointer; }
.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.primary:active { transform: translateY(1px); }
#join-form .primary { display: block; margin: 20px auto 0; font-size: 18px; padding: 12px 44px; }
.error { color: #C0391B; text-align: center; min-height: 1.2em; margin: 10px 0 0; font-size: 14px; }

/* 遊戲中介面 */
#hud > * { position: fixed; z-index: 5; }
#banner { top: 12px; left: 50%; transform: translateX(-50%); background: var(--note); color: var(--note-ink);
  border: 2.5px solid var(--note-ink); border-radius: var(--note-radius); padding: 7px 18px; font-weight: 700; white-space: nowrap; font-size: 14px;
  display: flex; gap: 14px; align-items: center; box-shadow: var(--note-shadow); }
#banner .hot { color: var(--accent); font: 700 13px var(--mono); letter-spacing: 0.06em; }
#banner .mono { font: 700 12px var(--mono); color: var(--muted); letter-spacing: 0.08em; }
#dg-panel { bottom: 56px; left: 50%; transform: translateX(-50%); background: var(--ground);
  border-top: 4px solid var(--accent); border-radius: 4px 4px 16px 16px; padding: 8px 10px 8px 16px;
  display: flex; gap: 12px; align-items: center; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
#dg-panel[hidden] { display: none; }
#dg-panel { border-top-color: #ffb020; z-index: 3; }
/* 平板和電腦：底下有聊天室和技能列，副本面板改放上面、在線條下面，提示往下讓一點 */
@media (min-width: 601px) {
  #dg-panel { bottom: auto; top: 68px; }
  body:has(#dg-panel:not([hidden])) #toasts { top: 136px; }
  body:has(#dg-panel.in:not([hidden])) #toasts { top: 168px; }
}
.dg-seq { display: inline-flex; gap: 5px; align-items: center; }
.dg-seq i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; }
.dg-seq i.on { box-shadow: 0 0 0 3px #ffd23f; }
.dg-seq i.on::after { content: '✓'; display: block; font: 900 10px/12px sans-serif; text-align: center; color: var(--ink); }
/* 進副本的台灣地圖過場 */
#tw-intro { position: fixed; inset: 0; z-index: 60; cursor: pointer; }
#tw-intro canvas { display: block; }
#inventory { top: 12px; right: 12px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(50vw - 230px); }
.inv-item { background: var(--ground); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 10px;
  font: 700 14px var(--mono); color: var(--ink); }
button.inv-item { cursor: pointer; }
button.inv-item:hover { border-color: var(--accent); }
#stats { top: 12px; left: 12px; background: var(--navy); color: var(--navy-fg); border-radius: 14px; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 4px; min-width: 190px; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.stat-row { display: flex; align-items: center; gap: 8px; }
.stat-k { font: 700 11px var(--mono); letter-spacing: 0.08em; color: var(--navy-dim); width: 28px; }
.stat-v { font: 700 12px var(--mono); }
.stat-bar { flex: 1; height: 10px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.stat-bar i { display: block; height: 100%; border-radius: 999px; transition: width .25s; }
.stat-bar .hp { background: var(--accent); }
.stat-bar .mp { background: #4f7cc2; }
#boss { top: 56px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100vw - 24px)); }
#boss.phase2 .boss-name { color: #ff8fab; }
#boss.phase2 .boss-bar { box-shadow: 0 0 0 2px #ff5a7a, 0 0 14px rgba(255,90,122,.7); }
.boss-name { color: #fff; font-weight: 900; font-size: 15px; text-shadow: 0 2px 0 #131a28, 0 0 6px #131a28; margin-bottom: 4px;
  display: flex; gap: 8px; align-items: baseline; }
.boss-lv { color: #ffd23f; font: 700 13px var(--mono); }
.boss-pct { margin-left: auto; font: 700 13px var(--mono); }
.boss-bar { height: 14px; background: #131a28; border: 2px solid #131a28; border-radius: 999px; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.boss-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; transition: width .2s;
  background: linear-gradient(#ff8a5c, #e8391b 60%, #b8250e); }
#toasts { top: 104px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px;
  align-items: center; pointer-events: none; z-index: 35; } /* 浮在彈出視窗（20）上面，視窗裡的提示才看得到 */
.toast { background: var(--note); color: var(--note-ink); border: 2.5px solid var(--note-ink); border-radius: var(--note-radius);
  box-shadow: var(--note-shadow); padding: 7px 16px; font-weight: 700; animation: toast 2.2s ease forwards; white-space: nowrap; }
#toasts .toast.tap { pointer-events: auto; cursor: pointer; } /* 副本提示點一下就關掉 */
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 同一句又按了一次：不疊新的，原本那張跳一下、重新計時 */
.toast.again { animation-name: toast-again; }
@keyframes toast-again { 0% { opacity: 1; transform: scale(1.08); } 6% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
/* 場景互動（敲箱子、點歌…）：技能列上面的小膠囊 */
/* 技能列：一排蠟筆風小方塊，角落標快捷鍵 */
#skillbar { right: 16px; bottom: 52px; display: flex; gap: 8px; align-items: flex-end; }
.sk-btn { position: relative; overflow: hidden; width: 54px; height: 54px; padding: 0; border-radius: 14px; cursor: pointer;
  background: #4f7cc2; color: #fff; border: 2.5px solid #131a28; box-shadow: 0 3px 0 #131a28, 0 6px 16px rgba(0,0,0,.25);
  font: 700 26px var(--display); display: flex; align-items: center; justify-content: center; transition: transform .08s, filter .2s; }
.sk-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #131a28; }
.sk-btn .sk-icon { position: relative; line-height: 1; }
.sk-btn kbd { position: absolute; right: 3px; bottom: 2px; font: 700 10px var(--mono); background: rgba(19,26,40,.75); color: #fff;
  border-radius: 4px; padding: 0 3px; line-height: 14px; }
.sk-btn .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(19,26,40,.55); pointer-events: none; }
.sk-btn.cooling { cursor: default; }
.sk-btn.low { filter: grayscale(.7) brightness(.8); }
#basic-btn { background: #ff6a13; width: 62px; height: 62px; font-size: 30px; }
#basic-btn:not(.ready) { filter: saturate(.35) brightness(.95); }
#skill2-btn { background: #8a5cd6; }
.sk-btn.plain { background: var(--ground); color: var(--ink); width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
#cake-btn { background: #ffd23f; }
#cake-btn small { position: absolute; left: 0; right: 0; bottom: 1px; font: 700 9px var(--mono); color: #131a28; }
/* 技能說明提示框 */
#sk-tip { position: fixed; z-index: 25; max-width: 240px; background: var(--navy); color: var(--navy-fg); border: 2px solid #131a28;
  border-radius: 12px; padding: 8px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.35); pointer-events: none; }
#sk-tip b { display: block; font-size: 14px; color: #ffd23f; }
#sk-tip small { display: block; font: 700 11px var(--mono); color: var(--navy-dim); margin-top: 2px; }
#sk-tip p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
/* 手繪 icon 和加了墨線外框的 emoji */
.hq-icon { width: 1.35em; height: 1.35em; vertical-align: -0.32em; object-fit: contain; }
.em-ol { display: inline-block; filter: drop-shadow(1.2px 0 0 #2b2a33) drop-shadow(-1.2px 0 0 #2b2a33) drop-shadow(0 1.2px 0 #2b2a33) drop-shadow(0 -1.2px 0 #2b2a33); }
.sk-btn .hq-icon { width: 76%; height: 76%; vertical-align: 0; position: relative; }
.sk-btn.plain .hq-icon { width: 82%; height: 82%; }
.modal-icon .hq-icon { width: 42px; height: 42px; vertical-align: 0; }
.stat-cls .hq-icon { width: 20px; height: 20px; vertical-align: -5px; }
.toast .hq-icon { width: 22px; height: 22px; vertical-align: -6px; }
.prof-line .hq-icon, .modal-info p .hq-icon, .gear-slot .hq-icon { width: 20px; height: 20px; vertical-align: -5px; }
.bag-n { display: inline-block; margin-left: 4px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent);
  color: #fff; font: 700 11px/18px var(--mono); text-align: center; }
.hud-btn { font: 700 14px var(--display); background: var(--ground); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 999px; padding: 8px 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.hud-btn:hover, .bag-btn:hover { border-color: var(--accent); }
.bag-btn { cursor: pointer; font-family: var(--display); }
/* 重新連線中的小提示 */
#net-badge { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 31; background: var(--navy); color: #ffd23f;
  border: 2px solid #131a28; border-radius: 999px; padding: 4px 12px; font-weight: 900; font-size: 13px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
@media (max-width: 600px) { #net-badge { top: 146px; left: auto; right: 12px; transform: none; font-size: 12px; } }
/* 更新公告 */
#notice-bar { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 30; background: #ffd23f; color: #131a28;
  border: 2px solid #131a28; border-radius: 999px; padding: 6px 16px; font-weight: 900; font-size: 14px; white-space: nowrap;
  max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
#notice-bar button { font: inherit; background: none; border: 0; padding: 0; color: #b23f00; text-decoration: underline; cursor: pointer; }
#update { z-index: 40; }
.update-card { max-width: 380px; text-align: center; }
.update-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
/* 更新紀錄：上版後的「總部更新了」紙卡 */
.release-box { min-width: min(320px, calc(100vw - 80px)); }
.release-ver { margin: 14px 0 6px; font: 700 12px var(--mono); color: var(--muted); letter-spacing: .06em; }
.release-ver:first-child { margin-top: 0; }
.release-notes { margin: 0; padding: 10px 14px 10px 30px; background: var(--note); color: var(--note-ink); border: 2px solid var(--note-ink);
  border-radius: var(--note-radius); box-shadow: var(--note-shadow); font-size: 15px; line-height: 1.6; }
.release-notes li + li { margin-top: 4px; }
.link-btn { font: inherit; background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; }
/* 有怪物血條的時候，預告條移到血條下面（手機版的血條在下方，不用移） */
@media (min-width: 601px) { body.boss-on #notice-bar { top: 108px; } }
@media (min-width: 601px) and (max-height: 520px) { body.boss-on #notice-bar { top: 92px; } }
/* 手機：預告條放在在線條下面、佔滿寬度，出現時把點唱機和提示往下推，才不會疊在角色資料上 */
@media (max-width: 600px) {
  #notice-bar { top: 184px; left: 12px; right: 12px; transform: none; max-width: none; font-size: 12px; white-space: normal; text-align: center; border-radius: 14px; }
}
.stat-cls { font-weight: 900; font-size: 14px; color: #ffd23f; }
.stat-v.lv { margin-left: auto; color: #ffd23f; }
.def-k { margin-left: 10px; }

/* 彈出視窗 */
#modal { z-index: 20; }
.modal-card { position: relative; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px 22px 22px; }
.modal-card h2 { margin: 0 0 14px; font-size: 22px; font-weight: 900; }
#modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink);
  background: var(--paper); font-size: 16px; cursor: pointer; color: var(--ink); }
#modal-x:hover { border-color: var(--accent); color: var(--accent); }
.modal-list { display: flex; flex-direction: column; gap: 10px; }
.modal-row { display: flex; gap: 12px; align-items: center; background: var(--paper); border: 2px solid var(--line);
  border-radius: 14px; padding: 10px 12px; }
.modal-row.on { border-color: var(--accent); }
.video-form { display: flex; gap: 8px; align-items: center; }
.video-form input { flex: 1; min-width: 0; margin: 0; }
/* 小樹屋語音 */
/* 工具列上的小樹屋膠囊：按鈕＋麥克風、視訊、分享螢幕 */
.tree-group { display: inline-flex; align-items: stretch; }
.tree-group.in { background: #fbf6e9; border: 2px solid #3c8a66; border-radius: 999px; overflow: hidden; }
.tree-group.in .tree-btn { border: 0; border-radius: 0; background: #e6f6ee; color: #23784a; }
.tree-group .tree-sw { border: 0; border-left: 1.5px solid #9fd3b7; background: none; padding: 1px 7px; line-height: 0; cursor: pointer; }
.tree-group .tree-sw .hq-icon { width: 22px; height: 22px; }
.tree-group .tree-sw.on { background: #c9efd9; }
.tree-group .tree-sw.off { background: #e4e6ea; }
.tree-group .tree-sw.off .hq-icon { opacity: .7; }
/* 卡片上那排有字的開關 */
.tree-ctrl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tree-ctrl .tree-sw { display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--display); border: 2px solid var(--line);
  background: var(--silver); color: var(--muted); border-radius: 999px; padding: 3px 12px 3px 6px; cursor: pointer; }
.tree-ctrl .tree-sw .hq-icon { width: 22px; height: 22px; }
.tree-ctrl .tree-sw.on { background: #dff4e8; border-color: #3c8a66; color: #23784a; }
.tree-ctrl .stage-sw { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.tree-ctrl .stage-sw:disabled { opacity: .45; cursor: default; }
.tree-list { display: flex; flex-direction: column; gap: 10px; }
.tree-empty { margin: 0; padding: 14px; text-align: center; color: var(--muted); background: var(--note); border-radius: var(--note-radius); }
.tree-card { background: var(--paper); border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.tree-card.here { border-color: #3c8a66; background: #f3fbf6; }
.tree-head { display: flex; gap: 10px; align-items: center; }
.tree-ic.hq-icon { width: 36px; height: 36px; flex-shrink: 0; }
.tree-inf { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tree-inf b { font-size: 16px; }
.tree-inf small { font-size: 12px; color: var(--muted); }
.tree-mems { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.tree-mem { display: flex; gap: 8px; align-items: center; min-width: 0; }
.tree-mem.me .tree-who b::after { content: '（你）'; font-weight: 400; color: var(--muted); }
.tree-face { position: relative; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--ink);
  background: var(--note); overflow: visible; transition: box-shadow .15s; }
.tree-face > img:first-child { width: 100%; height: 100%; border-radius: 50%; display: block; }
.tree-face .tree-muted { position: absolute; right: -7px; bottom: -7px; width: 22px; height: 22px; background: var(--paper); border-radius: 50%; border: 1.5px solid var(--ink); }
.tree-mem.talk .tree-face { box-shadow: 0 0 0 3px #7fd1a8, 0 0 10px 3px rgba(127,209,168,.8); }
.tree-who { min-width: 0; display: flex; flex-direction: column; }
.tree-who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-who small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-row.cls-head { background: var(--navy); color: var(--navy-fg); border-color: var(--navy); }
.modal-row.cls-head p { color: var(--navy-dim); }
.modal-icon { font-size: 30px; width: 44px; text-align: center; flex-shrink: 0; }
.modal-info { flex: 1; min-width: 0; }
.modal-info b { font-size: 16px; }
.modal-info p { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.modal-info .mono, .tag { font: 700 12px var(--mono); }
.tag { display: inline-block; margin-left: 8px; color: var(--accent-ink); }
.modal-info .tag:first-of-type:not(:nth-child(2)) { margin-left: 0; }
.modal-hint { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.mentor-say { margin: 0 0 4px; font-weight: 700; background: var(--silver); border-radius: 14px; padding: 10px 14px; }
.primary.small { font-size: 14px; padding: 7px 16px; flex-shrink: 0; }
.primary:disabled { background: var(--line); border-color: var(--line); color: var(--muted); cursor: default; }
.fw-form { display: flex; flex-direction: column; gap: 12px; }
.fw-form input { margin: 0; font-size: 22px; font-weight: 900; text-align: center; }
.fw-form .primary { align-self: center; padding: 12px 40px; font-size: 18px; }

#chat { left: 12px; bottom: 12px; width: min(360px, calc(100vw - 24px)); background: rgba(250,250,247,.95);
  border-top: 4px solid var(--accent); border-radius: 4px 4px 16px 16px; padding: 6px 10px 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); }
#chat-toggle { display: flex; justify-content: space-between; width: 100%; background: none; border: 0; padding: 2px 4px 6px;
  font: 700 12px var(--mono); letter-spacing: 0.12em; color: var(--accent-ink); cursor: pointer; }
#chat.collapsed #messages { display: none; }
#chat.collapsed #chat-toggle span { display: inline-block; transform: rotate(180deg); }
#messages { height: 170px; overflow-y: auto; font-size: 14px; line-height: 1.55; padding: 0 4px 6px; }
#messages .sys { color: var(--muted); }
#messages.no-sys .sys { display: none; }
#chat-sys { position: absolute; top: 3px; right: 30px; width: 26px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
#chat-sys img { width: 22px; height: 22px; display: block; margin: auto; }
#chat.collapsed #chat-sys { display: none; }
#messages b { color: var(--accent-ink); }
#chat-input { margin: 0; padding: 8px 12px; font-size: 15px; }
/* 表情按鈕：自己角色的臉；點開是 3x3 的表情選單，浮在聊天框上面 */
#chat-form { display: flex; gap: 6px; align-items: center; }
#emote-btn { flex: none; width: 38px; height: 38px; padding: 0; border: 2px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; }
#emote-btn:hover, #emote-btn[aria-expanded="true"] { border-color: var(--accent); }
#emote-btn canvas { width: 30px; height: 30px; display: block; margin: auto; }
#emote-menu { position: absolute; left: 0; bottom: calc(100% + 8px); display: grid; grid-template-columns: repeat(3, 64px); gap: 6px;
  padding: 8px; background: var(--ground); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
#emote-menu[hidden] { display: none; }
#emote-menu button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 5px; border: 0; border-radius: 10px;
  background: none; font: 700 11px var(--display); color: var(--ink); cursor: pointer; }
#emote-menu button:hover { background: var(--silver); }
#emote-menu canvas { width: 44px; height: 44px; }
#chat.collapsed #emote-menu { display: none; }
#help { right: 12px; bottom: 12px; background: var(--note); color: var(--note-ink); border: 2px solid var(--note-ink);
  border-radius: var(--note-radius); box-shadow: var(--note-shadow);
  padding: 6px 14px; font-size: 12px; }


/* 個人資料：跟報名頁同一張識別證（樣式從 index.html 搬過來，字級縮小放進視窗） */
#modal .vip { --navy-bg: #131A28; --navy-fg: #F2F4F8; --navy-dim: #9AA3B5; --navy-dot: rgba(255,255,255,0.08);
  --navy-line: rgba(255,255,255,0.14); --navy-perf: rgba(255,255,255,0.26); --navy-hot: #FF7A2F; --navy-face: #2A3244;
  --silver-bg: #D6DAE1; --silver-fg: #141923; --silver-dim: #4E5566; --silver-dot: rgba(20,25,35,0.10);
  --silver-line: rgba(20,25,35,0.16); --silver-perf: rgba(20,25,35,0.30); --silver-hot: #B23F00; --silver-face: #BFC4CD; }
/* 識別證 */
.vip {
  --c-bg: var(--navy-bg); --c-fg: var(--navy-fg); --c-dim: var(--navy-dim); --c-dot: var(--navy-dot);
  --c-line: var(--navy-line); --c-perf: var(--navy-perf); --c-hot: var(--navy-hot); --c-face: var(--navy-face);
  background-color: var(--c-bg);
  background-image: radial-gradient(var(--c-dot) 1px, transparent 1.3px);
  background-size: 16px 16px;
  color: var(--c-fg);
  border-radius: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  box-shadow: 0 28px 50px -28px rgba(19, 26, 40, 0.55);
  position: relative;
}
.vip.silver {
  --c-bg: var(--silver-bg); --c-fg: var(--silver-fg); --c-dim: var(--silver-dim); --c-dot: var(--silver-dot);
  --c-line: var(--silver-line); --c-perf: var(--silver-perf); --c-hot: var(--silver-hot); --c-face: var(--silver-face);
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.5) 44%, rgba(255, 255, 255, 0) 60%), radial-gradient(var(--c-dot) 1px, transparent 1.3px);
  background-size: 100% 100%, 16px 16px;
}
.vip-main { padding: clamp(22px, 4vw, 40px); display: flex; flex-direction: column; gap: 28px; min-width: 0; overflow: hidden; border-radius: 26px 0 0 26px; }
.vip-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vip-brand { font: 700 12px/1 var(--mono); letter-spacing: 0.18em; color: var(--c-hot); }
.vip-spark { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.vip-id { display: flex; align-items: center; gap: clamp(30px, 5vw, 52px); flex-wrap: wrap; padding: 12px 0 12px clamp(18px, 3vw, 28px); }
.vip-ava { position: relative; width: clamp(118px, 19vw, 168px); aspect-ratio: 1; max-width: 100%; flex-shrink: 0; }
.vip-ava svg { position: absolute; left: -18%; top: -18%; width: 136%; height: 136%; overflow: visible; }
.vip-ava img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--c-face); }
.vip-ava .orb-line { stroke: var(--c-fg); opacity: 0.45; }
.vip-ava .tw { stroke: var(--c-fg); }
.vip-who { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 220px; }
.vip-tier { align-self: flex-start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; border: 1.5px solid var(--c-hot); color: var(--c-hot); font: 700 14px/1.2 var(--display); padding: 7px 14px; border-radius: 999px; }
.vip-hq { font: 700 11px/1 var(--mono); font-family: 'Space Mono', 'Noto Sans TC', sans-serif; letter-spacing: 0.14em; opacity: 0.85; }
.vip-name { font-size: clamp(40px, 7.4vw, 84px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; overflow-wrap: anywhere; text-wrap: balance; }
.vip-sub { color: var(--c-dim); font-size: 15px; }
.vip-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; border-top: 1px solid var(--c-line); padding-top: 20px; }
.vip-fact { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vip-k { display: inline-flex; align-items: center; gap: 8px; font: 700 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--c-dim); }
.vip-k svg { width: 16px; height: 16px; color: var(--c-hot); flex-shrink: 0; }
.vip-v { font-size: clamp(18px, 2.4vw, 24px); font-weight: 900; overflow-wrap: anywhere; }
.vip-stub { border-left: 2px dashed var(--c-perf); padding: 32px 24px; display: flex; flex-direction: column; justify-content: center; gap: 12px; position: relative; min-width: 0; }
.vip-stub::before, .vip-stub::after { content: ""; position: absolute; left: -16px; width: 30px; height: 30px; border-radius: 50%; background: var(--ground); }
.vip-stub::before { top: -15px; }
.vip-stub::after { bottom: -15px; }
.vip-no { font: 700 clamp(44px, 6vw, 58px)/1 var(--mono); color: var(--c-hot); font-variant-numeric: tabular-nums; }
.vip-bar { display: flex; align-items: stretch; height: 52px; gap: 2px; margin-top: 6px; }
.vip-bar i { display: block; background: var(--c-fg); }

#modal.wide .modal-card { max-width: 760px; }
#modal .vip-name { font-size: clamp(30px, 5vw, 52px); }
#modal .vip-ava { width: clamp(96px, 15vw, 130px); }
#modal .vip-ava img { border: 3px solid var(--c-hot); }
#modal .vip-spark { font-size: 20px; line-height: 1; }
#modal .vip-stub::before, #modal .vip-stub::after { background: var(--ground); }
.prof-line { margin: 0; font: 700 13px var(--mono); color: var(--accent-ink); }
#ctx-menu { position: fixed; z-index: 15; background: var(--ground); border: 2px solid var(--ink); border-radius: 12px;
  padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.3); min-width: 150px; }
#ctx-menu .ctx-name { font-weight: 900; font-size: 13px; padding: 4px 8px; color: var(--muted); }
#ctx-menu button { display: block; width: 100%; text-align: left; font: 700 15px var(--display); background: none; border: 0;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); }
#ctx-menu button:hover { background: var(--silver); }
.stat-bar .exp { background: #ffd23f; }
.stat-bar.thin { height: 6px; }
@media (max-width: 640px) {
  #modal .vip { grid-template-columns: 1fr; }
  #modal .vip-main { border-radius: 26px 26px 0 0; }
  #modal .vip-stub { border-left: 0; border-top: 2px dashed var(--c-perf); flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 20px; }
  #modal .vip-stub::before { top: -16px; left: -15px; }
  #modal .vip-stub::after { top: -16px; bottom: auto; left: auto; right: -15px; }
  #modal .vip-bar { flex: 1 1 100%; }
  #modal .vip-facts { grid-template-columns: 1fr; }
}

/* 裝備欄 */
.hud-btn.tiny { font-size: 13px; padding: 4px 10px; box-shadow: none; }
.gear-top { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 6px; }
/* 人物圖高度 = 四個欄位（46px）加三個間距（8px），上下緣剛好對齊第一格和最後一格；寬度照人物圖比例 96x112 */
.gear-me { width: 178px; height: 208px; flex-shrink: 0; background: var(--silver); border-radius: 18px; }
.gear-me.r-SR { box-shadow: 0 0 0 3px #ffb020, 0 0 18px rgba(255,176,32,.6); }
.gear-me.r-SSR { animation: rainbow 4s linear infinite; }
.gear-slots { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gear-slot { display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: 46px; background: var(--paper); border: 2px solid var(--line); border-radius: 12px; padding: 6px 10px; }
.gear-slot b { flex: 1; font-size: 15px; }
.gear-slot-k { font: 700 12px var(--mono); color: var(--muted); width: 32px; }
.gear-h { margin: 14px 0 8px; font-size: 16px; }
.gear > .modal-hint { margin-bottom: 12px; }
.gear-intro { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.gear-info { flex: none; display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.gear-info .hq-icon { width: 22px; height: 22px; }
.gear-info.on { box-shadow: 0 0 0 2px var(--accent); }
.gear > .gear-more { margin-top: -4px; }
/* 照部位分頁：頭飾｜服裝｜披風｜武器｜套裝 */
.gear-tabs { flex-wrap: wrap; }
.gear-tabs button small { margin-left: 6px; font: 700 11px var(--mono); opacity: .7; }
.gear-h-name { font-weight: 900; }
.gear-h-count { font: 700 12px var(--mono); color: var(--muted); }
.gear-h-on { font-size: 12px; font-weight: 900; color: #fff; background: #ff6b9a; border-radius: 999px; padding: 1px 9px; }
.gear-h-desc { margin: 2px 0 10px; font-size: 13px; color: var(--muted); }
/* 套裝頁：一個系列一列，三欄 */
.gear-set { border-top: 2px dashed var(--line); padding: 12px 2px 14px; }
.gear-set:last-child { border-bottom: 2px dashed var(--line); }
.gear-set.set-on .gear-h-name { color: #e0457f; }
.gear-set-h { display: flex; align-items: baseline; gap: 10px; }
.gear-set-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gear-set-col { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 6px; min-width: 0; }
/* 套裝頁每格固定大小：有沒有拿到、有沒有「點一下穿上」那行都一樣大 */
.gear-set-col .gear-item { flex: 0 0 auto; box-sizing: border-box; width: min(104px, 100%); height: 124px; justify-content: flex-start; }
.gear-set-k { flex-basis: 100%; font: 700 12px var(--mono); color: var(--muted); text-align: center; }
.gear-set-none { flex: 0 0 auto; box-sizing: border-box; width: min(104px, 100%); height: 124px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--line); border-radius: 14px; font-size: 12px; color: var(--muted); }
.gear-set-col .gear-item .gear-ic { width: 44px; height: 44px; }
.gear-set-col .gear-item .gear-name { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gear-set-col .gear-item .gear-act { font-size: 11px; }
.gear-set-on { margin: 0; font-weight: 900; font-size: 14px; color: #e0457f; }
.gear-part { position: absolute; top: 6px; right: 6px; max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--muted); background: #fdf6e3; border-radius: 3px; padding: 1px 6px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.gear-item { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 8px;
  background: var(--paper); border: 2px solid var(--line); border-radius: 14px; cursor: pointer; font-family: var(--display); color: var(--ink); }
.gear-item:hover:not(:disabled) { border-color: var(--accent); }
.gear-item.on { border-color: var(--accent); background: #fff4ec; }
.gear-item.locked { cursor: default; }
.gear-item.locked .gear-name { color: var(--muted); }
.gear-item.gone { cursor: default; opacity: .55; filter: grayscale(.7); }
.gear-ic { width: 64px; height: 64px; margin-top: 16px; }
/* 沒拿到：灰色剪影 */
.gear-item.locked .gear-ic { filter: brightness(0); opacity: .16; }
.gear-name { font-weight: 900; font-size: 14px; }
.gear-act { font-size: 12px; color: var(--muted); }
.gear-rar { position: absolute; top: 6px; left: 6px; font: 700 11px var(--mono); padding: 1px 7px; border-radius: 999px; color: #fff; background: #7fb2e5; }
.r-SR .gear-rar { background: #ffb020; }
.r-SSR .gear-rar { background: linear-gradient(90deg, #ff9ad5, #ffd36e, #8ff0c8, #8ec5ff, #d6a6ff); color: var(--ink); }
.gear-item.r-SR:not(.locked) { border-color: #ffd27a; box-shadow: 0 0 10px rgba(255,176,32,.35); }
.gear-item.r-SSR:not(.locked) { border-color: #f2c4ff; animation: rainbow 4s linear infinite; }
.gear-slot.r-SR { border-color: #ffd27a; }
.gear-slot.r-SSR { border-color: #f2c4ff; }
/* SSR：外圈的光慢慢換顏色（只動外框，不改插畫本身的顏色） */
@keyframes rainbow {
  0%, 100% { box-shadow: 0 0 0 3px #ffc4e6, 0 0 16px rgba(255,154,213,.6); }
  25% { box-shadow: 0 0 0 3px #ffe7a8, 0 0 16px rgba(255,211,110,.6); }
  50% { box-shadow: 0 0 0 3px #c4f5e2, 0 0 16px rgba(143,240,200,.6); }
  75% { box-shadow: 0 0 0 3px #cfe3ff, 0 0 16px rgba(142,197,255,.6); }
}

/* 家具 */
.furn-item { cursor: default; }
.furn-pic { width: 72px; height: 96px; }
.furn-item .primary.small { margin-top: 4px; padding: 5px 12px; font-size: 13px; }

/* 你畫我猜 */
#games { z-index: 19; }
.draw-card { position: relative; max-width: 980px; padding: 16px 18px 18px; max-height: calc(100vh - 24px); overflow-y: auto; }
.draw-card h2 { margin: 0 0 4px; font-size: 22px; font-weight: 900; }
#games-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink);
  background: var(--paper); font-size: 16px; cursor: pointer; color: var(--ink); }
.draw-info { margin: 0 0 8px; font-weight: 700; color: var(--accent-ink); }
.draw-vote { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--navy); color: var(--navy-fg);
  border-radius: 12px; padding: 6px 8px 6px 14px; margin-bottom: 8px; font-weight: 700; }
.draw-main { display: flex; gap: 14px; align-items: stretch; }
.draw-board { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#draw-canvas { width: 100%; aspect-ratio: 4 / 3; background: #fff; border: 3px solid var(--ink); border-radius: 14px; touch-action: none; display: block; }
#draw-panel.is-host #draw-canvas { cursor: not-allowed; }
#draw-panel.can-paint #draw-canvas { cursor: var(--paint-cursor, crosshair); }
.game-panel:not(.is-host) .host-only { display: none; }
.draw-tools, .draw-start { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.draw-start input { flex: 1; margin: 0; min-width: 140px; }
.draw-colors, .draw-sizes { display: flex; gap: 5px; }
.draw-colors .sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; font-size: 13px; }
.draw-sizes .sz { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; }
.draw-shapes .tl { width: 32px; height: 30px; border-radius: 9px; border: 2px solid var(--line); background: var(--paper); cursor: pointer;
  padding: 0; font-size: 15px; line-height: 1; }
.draw-sizes .sz i { display: block; border-radius: 50%; background: var(--ink); }
.draw-colors .on, .draw-sizes .on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.draw-side { width: var(--game-side, 320px); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.draw-members { display: flex; flex-wrap: wrap; gap: 4px; }
.draw-members .chip { font-size: 12px; font-weight: 700; background: var(--silver); border-radius: 999px; padding: 2px 9px; }
.draw-members .chip.me { background: #ffe1cf; }
.draw-log { flex: 1; min-height: 160px; max-height: 360px; overflow-y: auto; background: var(--paper); border: 2px solid var(--line);
  border-radius: 12px; padding: 6px 10px; font-size: 14px; line-height: 1.55; }
.draw-log .dl-sys { color: var(--muted); }
.draw-log .dl-right { color: #2f8f4f; font-weight: 900; }
/* 金曲猜歌王：歌手和歌名都答對的那一行加底色 */
.draw-log .dl-both { color: #7a4a00; font-weight: 900; background: linear-gradient(90deg, #ffe58a, #fff4c9); border-left: 4px solid #ffb020;
  border-radius: 8px; padding: 4px 8px; margin: 3px 0; }
.draw-log .dl-answer { color: var(--accent-ink); font-weight: 900; }
.draw-guess { display: flex; gap: 6px; }
.draw-guess input { flex: 1; margin: 0; min-width: 0; }
/* 畫板和對話框中間的分隔線，左右拖曳調整對話框寬度 */
.draw-main { gap: 0; }
.game-split { flex: none; width: 14px; margin: 0 2px; cursor: col-resize; touch-action: none; position: relative; }
.game-split::before { content: ''; position: absolute; left: 5px; top: 40%; height: 20%; width: 4px; border-radius: 2px; background: var(--line); }
.game-split:hover::before, .game-split.dragging::before { background: var(--accent); }
.draw-log .dl-prize { color: #8a5cd6; font-weight: 700; }
.game-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.game-tabs button { font: 700 15px var(--display); padding: 7px 16px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); cursor: pointer; }
.game-tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 記分板：浮在畫板右上角的小窗，名單不擋滑鼠（主持人照樣可以畫到底下） */
.stage-wrap { position: relative; }
.draw-tip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-1.5deg); z-index: 3; max-width: 80%;
  background: var(--note); color: var(--note-ink); border: 2.5px solid var(--note-ink); border-radius: var(--note-radius);
  box-shadow: var(--note-shadow); padding: 10px 18px; font-weight: 700; font-size: 15px; line-height: 1.5; text-align: center; white-space: pre-line; cursor: pointer; }
.draw-tip[hidden] { display: none; }
.draw-tip.pop { animation: draw-tip .25s ease-out; }
@keyframes draw-tip { 0% { opacity: 0; transform: translate(-50%, -40%) rotate(-1.5deg) scale(.9); } 100% { opacity: 1; } }
#draw-answer.nudge { animation: draw-nudge .9s ease; }
@keyframes draw-nudge { 0%, 100% { box-shadow: none; } 20%, 60% { box-shadow: 0 0 0 4px #ffd23f; } 40%, 80% { box-shadow: 0 0 0 1px #ffd23f; } }
.game-scores { position: absolute; top: 8px; right: 8px; width: 190px; max-width: 45%; z-index: 2; background: rgba(251,251,248,.88);
  border: 2px solid var(--ink); border-radius: 12px; padding: 4px 8px 6px; box-shadow: 0 4px 12px rgba(0,0,0,.18); backdrop-filter: blur(3px); }
.game-scores .gs-head { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.game-scores .gs-toggle, .game-scores .gs-reset { font: 700 13px var(--display); background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--ink); }
.game-scores .gs-reset { font-size: 12px; color: var(--accent-ink); }
.game-scores .gs-toggle span { display: inline-block; transition: transform .2s; }
.game-scores.collapsed .gs-toggle span { transform: rotate(-90deg); }
.game-scores.collapsed ol { display: none; }
.game-scores ol { list-style: none; margin: 2px 0 0; padding: 0; font-size: 13px; pointer-events: none; }
.game-scores li { display: flex; align-items: center; gap: 5px; padding: 2px 4px; border-radius: 8px; line-height: 1.2; }
.game-scores li .rk { width: 1.4em; text-align: center; font-weight: 900; flex: none; }
.game-scores li img { width: 1.35em; height: 1.35em; border-radius: 50%; background: #e6e9ef; flex: none; object-fit: cover; }
.game-scores li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-scores li b { font-family: var(--mono); flex: none; }
.game-scores li.me { background: #ffe1cf; }
.game-scores li.gap { justify-content: center; color: var(--muted); padding: 0; }
.game-scores li .up { color: #2f8f4f; font-size: 11px; font-weight: 900; }
.game-scores li.rise { animation: gs-rise 1.2s ease; }
@keyframes gs-rise { 0%, 40% { background: #fff1a8; box-shadow: 0 0 0 2px #ffd23f; } 100% { box-shadow: none; } }
.game-scores .empty { color: var(--muted); font-size: 12px; justify-content: center; }
.song-stage { aspect-ratio: 4 / 3; border: 3px solid var(--ink); border-radius: 14px; background: linear-gradient(160deg, #2f3b55, #6b4fa8);
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; }
.song-disc { font-size: 64px; line-height: 1; }
.song-stage.playing .song-disc { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.song-slots { display: flex; flex-direction: column; gap: 8px; width: min(100%, 420px); }
.song-slot { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12); border-radius: 12px; padding: 8px 14px; }
.song-slot small { font-weight: 700; opacity: .85; white-space: nowrap; }
.song-slot b { font-size: 22px; letter-spacing: 4px; word-break: break-all; }
.song-slot.got { background: rgba(123,224,143,.35); }
.song-goal { margin: 0; font-weight: 900; color: #ffd23f; }
.song-tip { margin: 0; font-size: 13px; opacity: .8; max-width: 440px; }
.song-start .song-goal-in { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.song-start .song-goal-in input { width: 56px; min-width: 0; flex: none; margin: 0; }
.song-start .song-goal-in input.song-pts { width: 72px; }
@media (max-width: 760px) {
  .draw-main { flex-direction: column; gap: 14px; }
  .game-split { display: none; }
  .draw-side { width: auto; }
  .draw-log { min-height: 90px; max-height: 140px; }
}

@media (max-width: 600px) {
  .gear-top { flex-direction: column; align-items: center; }
  .gear-me { width: 144px; height: 168px; }
  .gear-grid { grid-template-columns: repeat(3, 1fr); }
  .gear-set-col .gear-item .gear-rar { display: none; }
  .gear-tabs { gap: 5px; }
  .gear-tabs button { font-size: 14px; padding: 6px 11px; }
  .gear-tabs button small { margin-left: 3px; }
  .gear-set-col .gear-item .gear-ic { margin-top: 4px; }
  .gear-set-col .gear-item, .gear-set-none { height: 104px; }
  .create { flex-direction: column; align-items: center; }
  #messages { height: 90px; font-size: 13px; }
  #help { display: none; }
  #banner { font-size: 12px; gap: 8px; top: 146px; left: 12px; transform: none; padding: 5px 12px; }
  /* 左邊由上往下：角色資料、在線條、點唱機，提示和視訊入口排在點唱機下面 */
  .toast { white-space: normal; max-width: calc(100vw - 40px); text-align: center; }
  #banner .hot { display: none; }
  #boss { top: auto; bottom: 150px; left: 12px; transform: none; width: calc(100vw - 90px); }
  #stats { min-width: 150px; padding: 6px 10px; }
  /* 手機直拿：右上角的道具和按鈕排成幾行，不要擠到畫面外面 */
  #inventory { top: 12px; right: 12px; max-width: calc(100vw - 190px); gap: 4px; }
  .inv-item { font-size: 12px; padding: 2px 7px; }
  /* 手機：技能欄改成右邊一排圓形按鈕 */
  /* 手機：技能列改成右邊直排，方塊做大一點比較好按 */
  #skillbar { bottom: 16px; right: 12px; flex-direction: column-reverse; align-items: flex-end; gap: 8px; }
  .sk-btn { width: 58px; height: 58px; }
  #basic-btn { width: 66px; height: 66px; }
  .sk-btn.plain { width: 46px; height: 46px; }
  #dg-panel { bottom: auto; top: 240px; left: 12px; transform: none; max-width: calc(100vw - 100px); flex-wrap: wrap;
    gap: 6px 8px; padding: 6px 10px; font-size: 13px; }
  #dg-panel .primary { padding: 8px 14px; font-size: 14px; }
  .modal-row { flex-wrap: wrap; }
  #chat { width: calc(100vw - 24px - 170px); min-width: 180px; }
  #chat:not(.collapsed) { width: calc(100vw - 24px); bottom: 12px; z-index: 6; }
}

/* 平板和手機橫拿：觸控裝置不需要鍵盤說明；颱風血條縮窄，不壓到左上和右上的面板 */
@media (pointer: coarse), (max-width: 1024px) {
  #help { display: none; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  #banner { font-size: 12px; gap: 8px; padding: 5px 12px; }
  #banner .hot { display: none; }
  #boss { width: calc(100vw - 500px); min-width: 220px; }
  #inventory { max-width: 214px; gap: 4px; }
  .inv-item { font-size: 12px; padding: 2px 8px; }
}
/* 手機橫拿（高度很矮）：面板縮小、聊天室預設收起來 */
@media (min-width: 601px) and (max-height: 520px) {
  #stats { transform: scale(.82); transform-origin: top left; min-width: 170px; }
  #banner { top: 8px; }
  #boss { top: 40px; }
  #toasts { top: 76px; }
  #inventory { top: 8px; }
  #messages { height: 80px; font-size: 13px; }
  #chat { width: 300px; bottom: 8px; }
  #chat-input { padding: 6px 10px; font-size: 14px; }
  #skillbar { bottom: 12px; }
  .sk-btn { width: 48px; height: 48px; font-size: 22px; }
  #basic-btn { width: 54px; height: 54px; }
  #dg-panel { bottom: auto; top: 76px; }
}
.acct-note { text-align: center; font-size: 13px; color: var(--muted, #6E6E73); margin: 12px 0 0; }
.acct-note a { color: var(--accent, #FF6A13); }
/* 沒登入：入口只留一句說明和登入連結 */
#join-form.need-login .create, #join-form.need-login button[type=submit] { display: none; }
#join-form.need-login #join-acct { font-size: 15px; margin: 22px 0 6px; }

/* 點唱機的迷你播放器：一台 DJ 唱盤（左上角數值面板下面） */
#music { top: 150px; left: 12px; width: 232px; background: var(--navy); color: var(--navy-fg); border-radius: 16px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.25); border-top: 4px solid #ffd23f; }
.dj-head { display: flex; align-items: center; gap: 8px; font: 700 12px var(--mono); color: var(--navy-dim); min-width: 0; }
.dj-head #music-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffd23f; }
.dj-live { background: #3a3a44; color: var(--navy-dim); border-radius: 4px; padding: 1px 6px; font-size: 10px; letter-spacing: .1em; flex-shrink: 0; }
#music.playing .dj-live { background: #e8391b; color: #fff; animation: live 1.2s ease-in-out infinite; }
@keyframes live { 50% { opacity: .55; } }
.dj-deck { position: relative; display: flex; gap: 10px; align-items: center; background: #0d1220; border-radius: 12px; padding: 8px; }
.vinyl { position: relative; width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, #1a1a1f 0 2px, #26262d 2px 4px); box-shadow: 0 0 0 2px #000, 0 2px 6px rgba(0,0,0,.6); }
.vinyl::after { content: ''; z-index: 1; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #0d1220; }
.vinyl img { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  object-fit: cover; background: #ff6a13; border: 2px solid #ff6a13; }
#music.playing .vinyl { animation: spin 2.4s linear infinite; }
/* 唱臂：播的時候放到唱片上，停的時候抬起來 */
.tonearm { position: absolute; left: 80px; top: 6px; width: 6px; height: 52px; background: linear-gradient(#cfd5e0, #8a93a6); border-radius: 3px;
  transform-origin: 3px 3px; transform: rotate(8deg); transition: transform .6s ease; }
.tonearm::before { content: ''; position: absolute; left: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #8a93a6; }
.tonearm::after { content: ''; position: absolute; left: -3px; bottom: -6px; width: 10px; height: 10px; border-radius: 2px; background: #ffd23f; }
#music.playing .tonearm { transform: rotate(32deg); }
.dj-side { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
#music .music-video { width: 112px; height: 63px; border-radius: 6px; overflow: hidden; background: #000; align-self: flex-end; }
#music .music-video iframe { display: block; width: 100%; height: 100%; pointer-events: none; }
.eq { display: flex; gap: 3px; align-items: flex-end; height: 16px; align-self: flex-end; }
.eq i { width: 4px; height: 3px; border-radius: 2px; background: #ffd23f; }
#music.playing .eq i { animation: eq .9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.3s !important; background: #ff8fab; }
.eq i:nth-child(3) { animation-delay: -.6s !important; background: #7fd1ff; }
.eq i:nth-child(4) { animation-delay: -.15s !important; }
.eq i:nth-child(5) { animation-delay: -.45s !important; background: #ff8fab; }
.eq i:nth-child(6) { animation-delay: -.75s !important; background: #7fd1ff; }
@keyframes eq { 0% { height: 3px; } 100% { height: 16px; } }
.music-info { display: flex; flex-direction: column; min-width: 0; }
.music-info b { font-size: 13px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.music-ctl { display: flex; align-items: center; gap: 6px; }
.music-ctl input { flex: 1; min-width: 0; accent-color: #ffd23f; }
.music-ctl button { background: none; border: 0; color: inherit; font-size: 16px; cursor: pointer; padding: 2px; }
#music-open { font: 700 12px var(--display) !important; border: 1.5px solid var(--navy-dim) !important; border-radius: 999px; padding: 2px 8px !important; }
/* 唱片箱：縮圖印在黑膠中間當標籤，外圈是唱片紋路和反光 */
.record { position: relative; width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 47%, rgba(255,255,255,.07) 48% 49%, transparent 50%),
    repeating-radial-gradient(circle, #18181d 0 1.5px, #24242b 1.5px 3px);
  box-shadow: 0 0 0 1.5px #000, 2px 2px 0 rgba(0,0,0,.25); }
.record::before, .vinyl::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 30deg, transparent 0 10%, rgba(255,255,255,.12) 14%, transparent 18% 60%, rgba(255,255,255,.1) 64%, transparent 68%); }
.record img, .record:empty::after { position: absolute; inset: 26%; width: 48%; height: 48%; border-radius: 50%; object-fit: cover;
  background: #ff6a13; box-shadow: 0 0 0 2px #ff6a13; }
.record:empty::after { content: ''; }
.record.spin { animation: spin 2.4s linear infinite; }
.music-queue, .music-results { margin: 0; padding: 2px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.music-queue { max-height: 30vh; overflow-y: auto; }
.music-queue li { display: flex; gap: 10px; align-items: center; }
.music-x { border: 0; background: none; cursor: pointer; color: #C0391B; font-size: 16px; }
.music-form { display: flex; gap: 8px; margin-top: 6px; }
.music-form input { flex: 1; min-width: 0; font: 500 15px var(--display); padding: 8px 12px; border: 2px solid var(--line, #D9D9DE); border-radius: 10px; }
@media (max-width: 600px) {
  #music { top: 184px; left: 12px; width: 196px; padding: 8px; }
  .vinyl { width: 64px; height: 64px; }
  .vinyl img { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .tonearm { left: 60px; height: 40px; }
  #music .music-video { width: 96px; height: 54px; }
}
@media (min-width: 601px) and (max-height: 520px) {
  #music { top: 120px; }
}
#music-fold { margin-left: auto; flex-shrink: 0; background: none; border: 0; color: var(--navy-dim); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 4px; }
#music-fold:hover { color: #ffd23f; }
/* 收起來：小黑膠＋歌名＋ON AIR 一行。影片框只是藏起來，不能拿掉，不然歌會停 */
#music.mini { flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; border-top-width: 3px; }
#music.mini .dj-deck { order: 0; background: none; padding: 0; }
#music.mini .vinyl { width: 30px; height: 30px; }
#music.mini .vinyl img { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-width: 1px; }
#music.mini .vinyl::after { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; }
#music.mini .tonearm, #music.mini .eq, #music.mini .music-ctl, #music.mini #music-by { display: none; }
#music.mini .dj-side { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
#music.mini .music-info { order: 1; flex: 1; }
#music.mini .music-info b { font-size: 12px; -webkit-line-clamp: 1; }
#music.mini .dj-head { order: 2; gap: 4px; }
#music.mini #music-fold { transform: rotate(-90deg); }
/* 收起來時「點一下開始聽」縮成標題旁一顆小 ▶，點了照樣開始播 */
#music.mini #music-start { order: 1; flex-shrink: 0; width: 26px; height: 26px; padding: 0 !important; border-radius: 50%; font-size: 11px; line-height: 1; }
#music.mini .music-start-txt { display: none; }
.music-results li { display: flex; gap: 10px; align-items: center; }
.music-r-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.music-r-info b { font-size: 14px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.music-r-info small { color: var(--muted, #6E6E73); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 許願池：一橫條一則的清單，點進去是一張米白紙條 */
.wish-head { display: flex; align-items: center; gap: 10px; }
.wish-head .modal-hint { flex: 1; margin: 0; }
.wish-modal .primary .hq-icon { width: 18px; height: 18px; margin-right: 4px; vertical-align: -4px; }
.wish-bar { display: flex; gap: 8px; }
.wish-bar input, .wish-bar select, .wish-form input, .wish-form textarea { font: 500 15px var(--display); padding: 8px 12px; border: 2px solid var(--line);
  border-radius: 10px; background: var(--paper); color: inherit; outline: none; margin: 0; min-width: 0; }
.wish-bar input { flex: 1; }
.wish-bar input:focus, .wish-form input:focus, .wish-form textarea:focus { border-color: var(--accent); }
.wish-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.wish-tab { font: 700 13px var(--display); border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; color: inherit; }
.wish-tab.on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.wish-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wish-row { display: flex; align-items: center; gap: 10px; background: var(--note); color: var(--note-ink); border: 1.5px solid var(--note-ink);
  border-radius: var(--note-radius); box-shadow: var(--note-shadow); padding: 8px 12px; cursor: pointer; }
.wish-row:hover, .wish-row:focus-visible { border-color: var(--accent); outline: none; }
/* 已完成：灰底、主題淡一點；不處理：灰底＋主題刪除線 */
.wish-row.done, .wish-row.no { background: #e6e6ea; }
.wish-row.done .wish-title { color: #6e6e73; }
.wish-row.no .wish-title { color: #8e8e93; text-decoration: line-through; }
.wish-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wish-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wish-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wish-row small { font-size: 11px; color: var(--muted); }
.wish-empty { color: var(--muted); font-size: 14px; padding: 14px 4px; }
.wish-cat, .wish-st { flex-shrink: 0; font: 700 11px var(--display); padding: 1px 8px; border-radius: 999px; white-space: nowrap; border: 1.5px solid transparent; }
.wish-cat.c-bug { background: #ffe0e3; color: #b3202f; border-color: #f2a5ad; }
.wish-cat.c-feature { background: #ffe8d6; color: #a34400; border-color: #ffbe8f; }
.wish-cat.c-improve { background: #dfeafc; color: #2c5596; border-color: #a9c3ea; }
.wish-cat.c-other { background: #ececef; color: #55555c; border-color: #cfcfd5; }
.wish-st { background: var(--paper); color: var(--muted); border-color: var(--line); }
.wish-st.s-review { color: #6b4f00; background: #ffefb8; border-color: #f0d27a; }
.wish-st.s-doing { color: #2c5596; background: #dfeafc; border-color: #a9c3ea; }
.wish-st.s-done { color: #1e6b35; background: #dcf3e2; border-color: #9fd6ae; }
.wish-likes { display: inline-flex; align-items: center; gap: 2px; font: 700 12px var(--mono); color: var(--muted); flex-shrink: 0; min-width: 36px; }
.wish-likes .hq-icon { width: 16px; height: 16px; vertical-align: 0; }
.wish-likes.on { color: #c22a3a; }
.wish-pager { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; color: var(--muted); }
.wish-pager button:disabled { opacity: .4; cursor: default; }
.wish-back { align-self: flex-start; font: 700 13px var(--display); border: none; background: none; color: var(--accent-ink); cursor: pointer; padding: 2px 0; }
.wish-paper { position: relative; background: var(--note); color: var(--note-ink); border: 1.5px solid var(--note-ink);
  border-radius: var(--note-radius); box-shadow: var(--note-shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.wish-h { margin: 4px 0 0; font-size: 18px; font-weight: 900; line-height: 1.4; word-break: break-word; }
.wish-paper.done .wish-h { padding-right: 40px; }
.wish-by { font-size: 12px; color: var(--muted); }
.wish-body { margin: 6px 0 0; font-size: 15px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow-y: auto; }
.wish-body.empty { color: var(--muted); font-size: 13px; }
.wish-acts { display: flex; align-items: center; gap: 8px; }
.wish-acts .wish-like { margin-right: auto; }
.wish-like { display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--display); border: 1.5px solid var(--line);
  background: var(--paper); border-radius: 999px; padding: 4px 12px 4px 7px; cursor: pointer; color: var(--ink); }
.wish-like .hq-icon { width: 20px; height: 20px; vertical-align: 0; }
.wish-like.on { border-color: #ef4b5c; color: #c22a3a; }
.wish-stamp { position: absolute; top: -14px; right: -12px; width: 62px; height: 62px; transform: rotate(-14deg); pointer-events: none; }
.wish-stamp .hq-icon { width: 100%; height: 100%; }
.wish-stamp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 900 12px var(--display); color: #d8323f; letter-spacing: .04em; }
.wish-form { display: flex; flex-direction: column; gap: 8px; }
.wish-form .label { margin: 4px 0 0; font-size: 14px; }
.wish-label { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.wish-form textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.wish-count { font-size: 12px; color: var(--muted); }
.wish-foot { display: flex; justify-content: flex-end; }
.wish-err { margin: 0; min-height: 1.2em; color: #c0391b; font-size: 14px; font-weight: 700; text-align: right; }
.wish-cats.bad .wish-tab { border-color: #e06a5a; }
/* 留言區：管理員的留言底色淡一點的藍，名字旁的小紙條標身分 */
.wish-cmts { display: flex; flex-direction: column; gap: 8px; border-top: 1.5px dashed var(--line); padding-top: 10px; }
.wish-cmts > .label { margin: 0; font-size: 14px; }
.wish-cmt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wish-cmt { background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.wish-cmt.admin { background: #eef4fd; border-color: #a9c3ea; }
.wish-cmt-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.wish-cmt-head small { color: var(--muted); font-size: 12px; }
.wish-cmt p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.wish-cmt.admin p { color: #1f2a3a; }
.wish-role { font: 700 11px var(--display); padding: 1px 7px; border-radius: 4px; border: 1.5px solid; transform: rotate(-2deg); white-space: nowrap; }
.wish-role.r-admin { background: #2c5596; color: #fff; border-color: #2c5596; }
.wish-role.r-author { background: #ffefb8; color: #6b4f00; border-color: #f0d27a; }
.wish-cmt-del { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.wish-cmt-form { display: flex; flex-direction: column; gap: 6px; }
.wish-cmt-form textarea { resize: vertical; min-height: 56px; line-height: 1.6; padding: 8px 10px; border-radius: 10px; }
.wish-cmt-form .wish-foot { align-items: center; gap: 10px; }
.wish-form .wish-tab.on.c-bug { background: #b3202f; border-color: #b3202f; }
.wish-form .wish-tab.on.c-feature { background: #d65a00; border-color: #d65a00; }
.wish-form .wish-tab.on.c-improve { background: #2c5596; border-color: #2c5596; }
@media (max-width: 600px) {
  .wish-head { flex-wrap: wrap; }
  .wish-row { flex-wrap: wrap; row-gap: 4px; }
  .wish-row-main { flex-basis: 100%; }
}
@media (pointer: coarse) { .wish-bar input, .wish-bar select, .wish-form input, .wish-form textarea { font-size: 16px; } }

/* ---------- 介面收合 ---------- */
/* 角色資料：收成一行（職業圖示、等級、血條＋細魔力條），點一下展開 */
#stats { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.stat-fold { width: 7px; height: 7px; border: solid var(--navy-dim); border-width: 0 2px 2px 0; transform: rotate(-135deg); margin: 3px 0 0 2px; flex-shrink: 0; }
.mini-bars { display: none; }
#stats.mini { min-width: 0; padding: 5px 10px; border-radius: 999px; }
#stats.mini .stat-row:not(.stat-top) { display: none; }
#stats.mini .cls-name { display: none; }
#stats.mini .stat-top { gap: 6px; }
#stats.mini .stat-v.lv { margin-left: 0; }
#stats.mini .mini-bars { display: flex; flex-direction: column; gap: 3px; width: 64px; }
.mini-bars i { display: block; height: 7px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.mini-bars i.thin { height: 4px; }
.mini-bars b { display: block; height: 100%; border-radius: 999px; transition: width .25s; }
.mini-bars .hp { background: var(--accent); }
.mini-bars .mp { background: #4f7cc2; }
#stats.mini .stat-fold { transform: rotate(45deg); margin: -3px 0 0 2px; }
@media (min-width: 601px) and (max-height: 520px) { #stats.mini { transform: none; } }

/* 工具包：背包、裝備、家具、點歌收在一顆按鈕裡；桌機一排、往左展開，手機往下展開 */
.kit-btn { order: 9; display: inline-flex; align-items: center; }
.kit-btn .kit-label { display: none; }
#inventory.folded > :not(.kit-btn):not(.tree-tool) { display: none; }
#inventory.folded .kit-btn .kit-label { display: inline; margin-left: 2px; }
#inventory:not(.folded) .kit-btn .bag-n { display: none; }
@media (max-width: 600px) {
  #inventory { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; max-width: none; }
  .kit-btn { order: -1; }
}

/* 技能欄摺頁：普攻旁邊一顆小圓鈕 */
#sk-fold { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid #131a28; background: var(--ground);
  box-shadow: 0 2px 0 #131a28; cursor: pointer; align-self: center; order: -1; display: flex; align-items: center; justify-content: center; }
#sk-fold::before { content: ''; width: 7px; height: 7px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(-45deg); margin-left: -3px; }
#skillbar.folded #sk-fold::before { transform: rotate(135deg); margin: 0 -3px 0 0; }
#skillbar.folded .sk-more { display: none; }
@media (max-width: 600px) {
  #sk-fold { order: 0; align-self: center; }
  #sk-fold::before { transform: rotate(45deg); margin: 0 0 -3px; }
  #skillbar.folded #sk-fold::before { transform: rotate(-135deg); margin: 3px 0 0; }
}

/* 聊天室收起來的小點和浮出來的最新一句 */
#chat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin: 0 auto 0 6px; align-self: center; }
#chat-dot[hidden] { display: none; }
#chat-peek { display: none; }

/* 手機直拿、橫拿：聊天室收起來只剩一顆 CHAT 膠囊，提示改到下面 */
@media (max-width: 600px), (max-height: 520px) {
  #chat.collapsed { width: auto; min-width: 0; padding: 3px 10px; border-top-width: 3px; border-radius: 999px; }
  #chat.collapsed #chat-form { display: none; }
  #chat.collapsed #chat-toggle { padding: 4px 2px; gap: 6px; justify-content: flex-start; }
  #chat.collapsed #chat-toggle > span { display: none; }
  #chat:not(.collapsed) #messages { height: 72px; }
  #chat-peek { display: block; position: absolute; left: calc(100% + 8px); bottom: 2px; max-width: calc(100vw - 210px);
    background: rgba(19,26,40,.78); color: #fff; font-size: 12px; line-height: 1.4; padding: 4px 10px; border-radius: 999px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; }
  #chat-peek.show { animation: peek 4.5s ease forwards; }
  #chat:not(.collapsed) #chat-peek { display: none; }
}
@keyframes peek { 0% { opacity: 0; transform: translateY(4px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 600px) {
  /* 提示紙條：放在畫面下方、聊天膠囊上面，不擋角色也不擋上面的面板 */
  #toasts { top: auto; bottom: 58px; left: 12px; right: 86px; transform: none; }
  body:has(#chat:not(.collapsed)) #toasts { bottom: 150px; }
  .toast { font-size: 13px; padding: 5px 12px; max-width: 100%; }
  #banner { top: 56px; }
  #music { top: 96px; }
  /* 副本：縮成計時膠囊，點一下展開 */
  #dg-panel { top: 96px; }
  #dg-panel.in:not(.open) { max-width: none; padding: 5px 12px; border-radius: 999px; border-top-width: 3px; cursor: pointer; }
  #dg-panel.in:not(.open) .dg-full, #dg-panel.in:not(.open) .dg-btns { display: none; }
  #dg-panel.in.open .dg-short { display: none; }
}
.dg-short { display: none; font: 700 13px var(--mono); }
@media (max-width: 600px) { #dg-panel.in .dg-short { display: inline; } #dg-panel.in.open .dg-short { display: none; } }
.dg-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* 這關的目標：面板最下面一行，手機上收成膠囊時藏起來 */
#dg-panel.in { flex-wrap: wrap; }
.dg-goal { flex: 1 0 100%; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.4; }
@media (max-width: 600px) { #dg-panel.in:not(.open) .dg-goal { display: none; } }
@media (max-width: 600px) { #dg-panel.in:not(.open) .dg-seq i { width: 12px; height: 12px; border-width: 1.5px; } }
/* 手機橫拿：提示縮小，放在颱風血條下面 */
@media (min-width: 601px) and (max-height: 520px) {
  #toasts { top: 76px; max-width: 50vw; }
  body.boss-on #toasts { top: 104px; }
  .toast { font-size: 13px; padding: 5px 12px; white-space: normal; text-align: center; }
}
/* 背包：5×5 小方格 */
.bag-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; max-width: 280px; margin: 0 auto; }
.bag-cell { position: relative; aspect-ratio: 1; padding: 0; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper);
  cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bag-cell .hq-icon, .bag-cell .em-ol { width: 72%; height: 72%; vertical-align: 0; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.bag-cell.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.bag-cell.empty { border: 2px dashed var(--line); background: transparent; cursor: default; }
.bag-cnt { position: absolute; right: 3px; bottom: 1px; font: 700 11px var(--mono); color: var(--ink); text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.bag-info { margin: 10px auto 0; max-width: 280px; min-height: 58px; background: var(--note); color: var(--note-ink); border: 2px solid var(--note-ink);
  border-radius: var(--note-radius); padding: 8px 12px; }
.bag-info b { font-size: 15px; }
.bag-info p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; }
.bag-slots { text-align: center; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
#modal-body .bag { min-width: min(320px, calc(100vw - 80px)); }
/* 背包分頁：補品｜雜物｜裝備，右邊小字是用了幾格 */
.bag-tabs { display: flex; gap: 6px; max-width: 280px; margin: 0 auto 10px; }
.bag-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0 4px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--paper); color: var(--ink); font: 700 14px var(--font, inherit); cursor: pointer; }
.bag-tab.on { background: var(--ink); color: var(--paper); }
.bag-tab-n { font-size: 10px; opacity: .75; }
.bag-cell { touch-action: none; user-select: none; -webkit-user-select: none; }
/* 裝備 60 格：格子區自己捲，露出 5 排半，看得出下面還有；手機上下滑是捲動，左右拖才是把東西拖出去 */
.bag-grid.tall { max-height: min(310px, 42vh); overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 2px; }
.bag-grid.tall .bag-cell { touch-action: pan-y; }
.bag-cell img { -webkit-user-drag: none; pointer-events: none; }
.bag-cell.r-SR { border-color: #ffb020; box-shadow: inset 0 0 0 1px #ffd27a; }
.bag-cell.r-SSR { border-color: #e46bd6; box-shadow: inset 0 0 0 1px #f2c4ff; }
.bag-cell.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.bag-cell.over { border-style: dotted; }
.bag-cell.lifted { opacity: .3; }
.bag-on { position: absolute; left: 2px; top: 2px; padding: 0 3px; border-radius: 4px; background: var(--accent); color: #fff; font: 700 9px/13px var(--mono); }
.bag-acts { display: flex; justify-content: flex-end; margin-top: 6px; }
.hud-btn.danger { background: #ef4b5c; border-color: #b8323f; color: #fff; }
/* 拖曳：背包變透明看得到地圖，手指下面跟著一個圖示 */
#modal.dragging { background: transparent; }
#modal.dragging .modal-card { opacity: .35; transition: opacity .15s; }
.bag-ghost { position: fixed; left: 0; top: 0; z-index: 40; width: 52px; height: 52px; pointer-events: none; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 0 6px 14px rgba(19,26,40,.35); }
.bag-ghost .hq-icon { width: 40px; height: 40px; }
.bag-ghost-tip { position: fixed; left: 0; top: 0; z-index: 40; width: 130px; text-align: center; pointer-events: none; font: 700 12px/1.6 var(--mono);
  color: var(--ink); background: var(--note); border: 1.5px solid var(--ink); border-radius: 8px; }
.bag-ghost-tip.out { background: var(--accent); color: #fff; }
.gear-item.gone { opacity: .55; filter: grayscale(.7); }
/* 記分板前三名：金銀銅小圓章 */
.game-scores li .rk.rk1, .game-scores li .rk.rk2, .game-scores li .rk.rk3 { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink);
  font: 900 11px/16px var(--mono); color: var(--ink); }
.rk.rk1 { background: #ffd23f; } .rk.rk2 { background: #dfe3ea; } .rk.rk3 { background: #e0a070; }
.draw-shapes .tl .hq-icon { width: 22px; height: 22px; vertical-align: middle; }
.draw-colors .hq-icon { width: 80%; height: 80%; vertical-align: middle; }
#music-mute .hq-icon { width: 20px; height: 20px; vertical-align: middle; }
#cake-ic .hq-icon { width: 34px; height: 34px; vertical-align: 0; }
.song-disc .hq-icon { width: 1em; height: 1em; }
/* 小樹屋音量條 */
.tree-master { display: flex; align-items: center; gap: 8px; background: var(--note); border-radius: var(--note-radius); padding: 8px 12px; }
.tree-master b { font-size: 14px; white-space: nowrap; }
.tree-vol-ic.hq-icon { width: 24px; height: 24px; }
.tree-master .tree-vol { flex: 1; }
.tree-vol { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tree-vol input { flex: 1; min-width: 60px; margin: 0; accent-color: #3c8a66; }
.tree-vol small { width: 36px; text-align: right; font-size: 11px; color: var(--muted); }
.tree-mem .tree-vol { flex: 1; }
.tree-mems:has(.tree-vol) { grid-template-columns: 1fr; }
.tree-mems:has(.tree-vol) .tree-who { width: 140px; flex-shrink: 0; }
/* 小樹屋：你跟這個人之間的連線狀態 */
.tree-st { margin-left: 6px; font: 700 10px var(--mono); padding: 1px 6px; border-radius: 999px; vertical-align: 1px; }
.tree-st.wait { background: var(--silver); color: var(--muted); }
.tree-st.ok { background: #dff4e8; color: #23784a; }
.tree-st.bad { background: #fde3e5; color: #c02a3a; }

/* 小樹屋視訊小窗 */
.tree-video { position: fixed; z-index: 6; top: 110px; right: 12px; width: 220px; background: var(--navy); color: var(--navy-fg);
  border: 2px solid #131a28; border-radius: 14px; padding: 6px; box-shadow: var(--note-shadow); }
.tree-video[hidden] { display: none; }
.tv-head { display: flex; align-items: center; gap: 6px; padding: 0 2px 6px; cursor: move; touch-action: none; user-select: none; }
.tv-head b { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-stage-btn { background: var(--note); color: var(--note-ink); border: 0; border-radius: 6px; font: 700 11px var(--display, inherit);
  padding: 2px 8px; cursor: pointer; }
.tree-video.stage { inset: 3vh 3vw !important; width: auto !important; z-index: 40; display: flex; flex-direction: column;
  box-shadow: 0 0 0 100vmax rgba(19,26,40,.55); }
.tree-video.stage .tv-head { cursor: default; }
.tree-video.stage .tv-head b { font-size: 14px; }
.tree-video.stage .tv-fold { display: none; }
.tree-video.stage .tv-grid { flex: 1; min-height: 0; max-height: none; overflow: hidden; }
.tree-video.stage .tv-tile { aspect-ratio: auto; min-height: 0; }
.tree-video.stage .tv-tile video { object-fit: contain; }
.tree-video.stage .tv-name { font-size: 13px; }
.tv-tile.face { display: flex; align-items: center; justify-content: center; background: #24304a; cursor: default; }
.tv-face { height: min(62%, 180px); max-width: 80%; aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.tv-face img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tv-face .hq-icon { width: 70%; height: 70%; }
.tv-fold { background: none; border: 0; color: inherit; font-size: 14px; cursor: pointer; padding: 0 4px; }
.tree-video.folded .tv-grid { display: none; }
.tree-video.folded .tv-head { padding-bottom: 0; }
.tv-grid { display: grid; grid-template-columns: 1fr; gap: 6px; max-height: calc(100vh - 180px); overflow-y: auto; }
.tv-tile { position: relative; background: #131a28; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; }
.tv-tile.screen { aspect-ratio: 16 / 10; }
.tv-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-tile.screen video { object-fit: contain; }
.tv-tile.mirror video { transform: scaleX(-1); }
.tv-tile.talk { box-shadow: inset 0 0 0 3px #7fd1a8; }
.tv-name { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); background: var(--note); color: var(--note-ink);
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-tile.big { position: fixed; z-index: 40; inset: 6vh 6vw; aspect-ratio: auto; cursor: zoom-out; border: 2px solid #131a28;
  box-shadow: 0 0 0 100vmax rgba(19,26,40,.6); }
.tv-tile.big video { object-fit: contain; }
.tree-face .tree-vid { position: absolute; left: -7px; bottom: -7px; width: 22px; height: 22px; background: var(--paper); border-radius: 50%; border: 1.5px solid var(--ink); }
@media (max-width: 600px) {
  .tree-video { top: 100px; left: 12px; right: auto; width: 140px; }
  .tv-tile.big { inset: 10vh 3vw; }
}

.tree-line { display: flex; align-items: center; gap: 3px; min-width: 0; }
.tree-line b { min-width: 0; }
.tree-flag.hq-icon { width: 18px; height: 18px; flex-shrink: 0; }
/* 補品快捷 Q／E：米色底的技能格，右上角剩幾個；空的格子是虛線加號 */
.sk-btn.quick { background: var(--paper); color: var(--ink); }
.sk-btn.quick.empty { border-style: dashed; box-shadow: none; }
.quick-n { position: absolute; left: 3px; top: 2px; font: 700 10px var(--mono); color: var(--ink); text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.quick-plus { font: 700 24px var(--mono); color: var(--muted); }
.bag-acts { gap: 6px; flex-wrap: wrap; }
.bag-acts .hud-btn.on { opacity: .6; }
#skillbar.folded.show-quick .quick { display: flex; }
#skillbar.show-quick { z-index: 25; }
/* 背包裡的寶石袋 */
.gem-bag { display: flex; align-items: center; gap: 6px; max-width: 280px; margin: 8px auto 0; padding: 5px 8px; border: 2px dashed var(--line); border-radius: 10px; }
.gem-bag-t { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: auto; }
.gem-bag .bag-cell { width: 44px; flex: 0 0 44px; }
/* 公共花園：花圃小卡片 */
.plot-card { min-width: min(300px, calc(100vw - 80px)); max-width: 340px; }
.plot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.plot-head .hq-icon { width: 64px; height: 64px; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; }
.plot-head b { font-size: 16px; }
.plot-line { margin: 4px 0; font-size: 14px; line-height: 1.5; }
.plot-line.muted, .plot-head .muted { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.plot-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.plot-seeds { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.plot-seed { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper);
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left; }
.plot-seed .hq-icon { width: 32px; height: 32px; }
.plot-seed:hover { border-color: var(--accent); }

/* 扭蛋機 */
.gacha-top { display: flex; gap: 18px; align-items: center; }
.gacha-machine { flex: 0 0 auto; width: 128px; height: 216px; }
.gacha-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gacha-tix { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.gacha-tix .hq-icon, .gacha-tix canvas { width: 34px; height: 34px; }
.gacha-pity { margin: 0; font-size: 13px; color: #b04aa6; font-weight: 700; }
.gacha-go { align-self: flex-start; font-size: 16px; padding: 10px 18px; }
.gacha-rates { margin: 0; font-size: 12px; color: var(--muted); }
.gacha-ex { display: flex; flex-wrap: wrap; gap: 6px; }
.gacha-ex .hud-btn { font-size: 12px; padding: 5px 10px; }
.gacha-hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.gacha-h { margin: 18px 0 8px; font-size: 15px; }
.gacha-pool { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gacha-pool .gear-item { cursor: default; }
.gacha-foot { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
/* 扭到的時候：整張卡片蓋一層，蛋在中間晃，打開後裝備跳出來 */
.gacha-stage { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: rgba(250,250,247,.94); border-radius: inherit; cursor: pointer; }
.gacha-stage.r-SSR { background: radial-gradient(circle at 50% 42%, rgba(255,210,245,.97), rgba(250,250,247,.96) 62%); }
.gacha-stage.r-SR { background: radial-gradient(circle at 50% 42%, rgba(255,236,190,.97), rgba(250,250,247,.96) 62%); }
.gacha-egg { width: 160px; height: 160px; }
.gacha-out { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 16px; cursor: default;
  animation: gacha-pop .45s cubic-bezier(.2,1.6,.4,1); }
.gacha-new { font: 700 12px var(--mono); padding: 2px 10px; border-radius: 999px; background: var(--ink); color: var(--ground); }
.r-SSR .gacha-new { background: #e46bd6; }
.r-SR .gacha-new { background: #ffb020; color: var(--ink); }
.gacha-out-ic { width: 120px; height: 120px; }
.gacha-out-name { font-size: 20px; }
.gacha-out-sub { font-size: 13px; color: var(--muted); }
.gacha-out-acts { display: flex; gap: 8px; margin-top: 8px; }
@keyframes gacha-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 600px) {
  .gacha-top { gap: 12px; align-items: flex-start; }
  .gacha-machine { width: 96px; height: 162px; }
  .gacha-go { font-size: 14px; padding: 8px 12px; }
  .gacha-pool { gap: 6px; }
  .gacha-pool .gear-item .gear-ic { width: 48px; height: 48px; }
  .gacha-pool .gear-name { font-size: 12px; }
}