/* 第 11 輪：線上名單、個人簡介、送禮、頭上標籤、說明頁、跳躍鈕 */
#r11tags { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:4; }
.r11tag { position:absolute; left:0; top:0; will-change:transform; white-space:nowrap; }
.r11tag.coin { font-weight:900; font-size:20px; color:#8a5a00; text-shadow:0 0 3px #fff, 0 0 6px #fff, 0 1px 2px rgba(0,0,0,.25); animation:r11rise 1.5s ease-out forwards; }
.r11tag.coin b { color:#e08a00; }
@keyframes r11rise { 0% { opacity:0; margin-top:10px; scale:.6; } 15% { opacity:1; margin-top:0; scale:1.25; } 100% { opacity:0; margin-top:-46px; scale:1; } }
.r11tag.treat .cup { display:inline-block; font-size:30px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); animation:r11cup 3.6s ease-in-out forwards; }
@keyframes r11cup { 0% { transform:translateY(14px) scale(.3); opacity:0; } 12% { transform:translateY(-4px) scale(1.2); opacity:1; } 25% { transform:translateY(0) scale(1); } 85% { transform:translateY(-3px); opacity:1; } 100% { transform:translateY(-14px); opacity:0; } }
.r11tag.gbox { font-size:30px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); animation:r11gbox 1.1s ease-in-out infinite; }
.r11tag.gbox.mine { pointer-events:auto; cursor:pointer; font-size:36px; }
.r11tag.gbox.burst { animation:r11burst .5s ease-out forwards; }
@keyframes r11gbox { 0%,100% { transform-origin:50% 100%; rotate:-6deg; } 50% { rotate:6deg; } }
@keyframes r11burst { 0% { scale:1; } 40% { scale:1.9; rotate:12deg; } 100% { scale:.1; opacity:0; } }
.r11conf { position:fixed; width:8px; height:12px; border-radius:2px; z-index:30; pointer-events:none; animation:r11conf 1.3s cubic-bezier(.2,.7,.3,1) forwards; }
.r11conf.fall { animation-duration:1.5s; }
@keyframes r11conf { 0% { transform:translate(0,0) rotate(0); opacity:1; } 100% { transform:translate(var(--dx),var(--dy)) rotate(var(--r)); opacity:0; } }

/* 線上名單 */
#r11roster { position:absolute; left:12px; top:calc(10px + 160px + 34px + env(safe-area-inset-top)); width:min(320px, calc(100vw - 24px)); max-height:calc(100dvh - 330px); display:flex; flex-direction:column; z-index:6;
  background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 24px var(--shadow); overflow:hidden; }
@media (max-width:700px) { #r11roster { top:calc(10px + 90px + 34px + env(safe-area-inset-top)); max-height:calc(100dvh - 250px); width:min(300px, calc(100vw - 24px)); } }
#r11roster .rp-h { display:flex; justify-content:space-between; align-items:center; padding:8px 10px 4px 14px; font-size:15px; }
#r11roster .rp-h button { padding:2px 9px; border-radius:999px; }
#r11roster .rp-t { display:flex; gap:6px; padding:2px 10px 8px; }
#r11roster .rp-t button { flex:1; padding:5px 4px; font-size:13px; border-radius:999px; box-shadow:none; }
#r11roster .rp-t button.on { background:var(--acc); color:var(--acc-tx); border-color:var(--acc); font-weight:800; }
#r11roster .rp-l { overflow-y:auto; padding:0 8px 8px; display:flex; flex-direction:column; gap:4px; touch-action:pan-y; }
#r11roster .rp-r { display:flex; align-items:center; gap:8px; width:100%; text-align:left; border-radius:12px; padding:5px 8px; box-shadow:none; background:#fff; color:#4a3a5c; }
body.night #r11roster .rp-r { background:rgba(255,255,255,.08); color:#f4f1e8; }
#r11roster .rp-r.me { outline:2px solid var(--acc); }
#r11roster .nm { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 4px; }
#r11roster .nm b { font-size:14px; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#r11roster .nm small { width:100%; font-size:12px; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#r11roster .nm em { font-style:normal; font-size:12px; } #r11roster .nm em.fr { color:#f2a20f; }
#r11roster .lv { font-size:11px; font-weight:800; background:#eee3ff; color:#6b4fb0; border-radius:999px; padding:1px 7px; }
#r11roster .rp-n { text-align:center; opacity:.65; padding:14px 0; font-size:13px; }
.sw { display:inline-block; flex:none; width:30px; height:30px; border-radius:9px; border:2px solid #fff; box-shadow:0 1px 3px var(--shadow); background:radial-gradient(circle at 50% 38%, var(--k) 0 26%, transparent 27%), linear-gradient(180deg, var(--h) 0 42%, var(--s) 43%); }
#netstat.online { pointer-events:auto; }
#netstat.online::after { content:' ▾'; opacity:.6; }

/* 共用視窗 */
#r11ov { position:fixed; inset:0; z-index:9; background:rgba(40,30,60,.38); display:flex; align-items:center; justify-content:center; padding:12px; }
.r11card { width:min(360px, 100%); max-height:calc(100dvh - 24px); overflow-y:auto; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 40px var(--shadow); padding:14px; touch-action:pan-y; }
.r11card.pf { width:min(520px, 100%); }
.pm-h { display:flex; align-items:center; gap:10px; margin-bottom:10px; } .pm-h b { font-size:18px; } .pm-h small { display:block; opacity:.75; font-size:12px; }
.lvb { font-size:11px; font-weight:800; background:#eee3ff; color:#6b4fb0; border-radius:999px; padding:1px 8px; vertical-align:middle; }
.pm-b { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.r11card button { border-radius:12px; padding:10px 6px; font-weight:700; box-shadow:none; }
.r11card button:disabled { opacity:.42; cursor:not-allowed; }
.r11card .ok { background:var(--acc); color:var(--acc-tx); border-color:var(--acc); }
.pm-c { width:100%; margin-top:8px; }
.pf-wrap { position:relative; border-radius:14px; padding:2px; }
.pf-wrap h2 { margin:2px 0 8px; font-size:20px; } .pf-wrap h4 { margin:12px 0 6px; font-size:13px; opacity:.8; }
.pf-x { position:absolute; right:0; top:0; padding:2px 10px !important; z-index:2; }
.pf-top { display:flex; gap:12px; align-items:flex-start; }
.pf-pv { width:132px; height:165px; border-radius:14px; background:#e4f3ff; flex:none; touch-action:none; cursor:grab; border:3px solid #fff; box-shadow:0 2px 8px var(--shadow); }
.pf-info { flex:1; min-width:0; } .pf-info h2 { padding-right:34px; word-break:break-all; } .pf-info .fr { color:#f2a20f; font-style:normal; }
.pf-bio { margin:0 0 8px; font-size:14px; line-height:1.5; word-break:break-all; } .pf-bio.empty { opacity:.55; }
.pf-tags, .pf-chips { display:flex; flex-wrap:wrap; gap:5px; }
.chip { font-size:12px; background:#fff; color:#4a3a5c; border:1px solid var(--line); border-radius:999px; padding:2px 9px; white-space:nowrap; }
.chip small { margin-left:4px; opacity:.6; }
body.night .chip { background:rgba(255,255,255,.1); color:#f4f1e8; }
.pf-st { margin-top:8px; display:grid; gap:3px; } .pf-st .st { display:grid; grid-template-columns:52px 1fr 26px; align-items:center; gap:6px; font-size:12px; }
.pf-st .bar { height:8px; border-radius:99px; background:rgba(0,0,0,.12); overflow:hidden; } .pf-st .bar i { display:block; height:100%; background:linear-gradient(90deg,#ffb02e,#ff7f9f); }
.pf-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pf-boss { list-style:none; margin:0; padding:0; font-size:13px; } .pf-boss li { display:flex; justify-content:space-between; padding:2px 0; }
.pf .big { font-size:28px; font-weight:900; margin:0; color:#e08a00; }
.plink { display:inline-block; margin:0 4px 4px 0; padding:2px 10px !important; font-size:12px; border-radius:999px !important; }
.dim { opacity:.6; font-size:12px; margin:2px 0; }
.pf-btns { display:flex; gap:8px; margin-top:12px; } .pf-btns button { flex:1; }
.pf-load { text-align:center; padding:30px 0; }
.err { color:#d6456a; min-height:1.2em; font-size:13px; margin:4px 0; }
.fl { display:block; margin:8px 0; font-size:13px; font-weight:700; }
.fl input[type=text], .fl > input { display:block; width:100%; margin-top:4px; font-size:16px; padding:8px; border-radius:10px; border:2px solid #f0b060; background:#fff; color:#3a2f4a; }
.fl small { float:right; font-weight:400; opacity:.6; }
.seg { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } .seg label { cursor:pointer; } .seg input { position:absolute; opacity:0; pointer-events:none; }
.seg span { display:inline-block; padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; color:#4a3a5c; font-size:13px; }
.seg input:checked + span { background:var(--acc); color:var(--acc-tx); border-color:var(--acc); font-weight:800; }
.seg select { padding:6px; border-radius:10px; font-size:15px; }
/* 簡介框：套穿戴的「介紹框」（items.json 的 fr 類別 → class fr-<id>）；沒有就一般框 */
.pf-wrap { border:3px solid rgba(120,90,140,.18); }

/* 送禮 */
.gf-list { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; max-height:34vh; overflow-y:auto; padding:2px; margin:6px 0; touch-action:pan-y; }
.gi { display:flex !important; flex-direction:column; align-items:center; gap:1px; padding:6px 2px !important; font-size:12px; background:#fff; color:#4a3a5c; }
.gi .ic { font-size:22px; } .gi b { font-size:12px; line-height:1.2; } .gi small { opacity:.7; } .gi.on { outline:3px solid var(--acc); background:#fff5d6; }
.gf-in .gr { display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; background:#fff; margin-bottom:6px; color:#4a3a5c; } .gf-in .gr > div { flex:1; } .gf-in q, .reveal q { display:block; font-size:13px; opacity:.85; }
.gf-in small { display:block; opacity:.6; } .ic.big { font-size:32px; }
.reveal { text-align:center; } .reveal h2 { font-size:22px; }
.gift-open { position:relative; height:90px; } .gift-open .lid { position:absolute; left:50%; top:10px; font-size:60px; transform:translateX(-50%); animation:r11lid .9s ease-out forwards; }
.gift-open .it { position:absolute; left:50%; top:20px; font-size:54px; transform:translateX(-50%) scale(0); animation:r11item .9s .25s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes r11lid { 0% { transform:translateX(-50%) scale(1); } 30% { transform:translateX(-50%) scale(1.25) rotate(-8deg); } 100% { transform:translateX(-50%) translateY(-40px) scale(.7) rotate(20deg); opacity:0; } }
@keyframes r11item { to { transform:translateX(-50%) scale(1); } }
.bday { font-style:normal; }
#pop .row .gift { margin-left:4px; padding:3px 8px; font-size:12px; border-radius:999px; }

/* 說明 */
#btnHelp.pulse { animation:r11pulse 1.2s infinite; border-color:var(--acc); }
@keyframes r11pulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,176,46,.7); } 50% { box-shadow:0 0 0 8px rgba(255,176,46,0); } }
#btnHelp .ic { font-weight:900; font-size:15px; }
#r11help { position:fixed; inset:0; z-index:10; background:rgba(40,30,60,.45); display:flex; align-items:center; justify-content:center; padding:10px; }
.hp-card { width:min(680px, 100%); max-height:calc(100dvh - 20px); display:flex; flex-direction:column; background:var(--card); border-radius:18px; border:1px solid var(--line); box-shadow:0 12px 40px var(--shadow); overflow:hidden; }
.hp-h { display:flex; justify-content:space-between; align-items:center; padding:10px 14px 4px; } .hp-h h2 { margin:0; font-size:20px; }
.hp-x { padding:3px 11px; }
.hp-tabs { display:flex; gap:6px; padding:6px 10px 8px; overflow-x:auto; flex:none; touch-action:pan-x; }
.hp-tabs button { flex:none; padding:6px 12px; font-size:13px; border-radius:999px; box-shadow:none; white-space:nowrap; }
.hp-tabs button.on { background:var(--acc); color:var(--acc-tx); border-color:var(--acc); font-weight:800; }
.hp-body { overflow-y:auto; padding:4px 12px 14px; touch-action:pan-y; }
.hp-rows { display:grid; gap:8px; }
.hp-r { display:flex; gap:10px; align-items:flex-start; background:#fff; color:#4a3a5c; border-radius:14px; padding:9px 11px; }
body.night .hp-r { background:rgba(255,255,255,.08); color:#f4f1e8; }
.hp-r > i { flex:none; min-width:40px; height:40px; border-radius:12px; background:#fff1d6; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:21px; font-weight:900; color:#c8433a; }
.hp-r b { font-size:15px; } .hp-r p { margin:2px 0 0; font-size:13px; line-height:1.55; }
.hp-r.ev { background:#fff3c4; color:#6a4a00; }
.hp-map { width:100%; height:auto; margin-bottom:8px; border-radius:14px; }

/* 跳 */
#r11jump { display:none; }
body.touch #r11jump { display:block; position:fixed; right:calc(30px + env(safe-area-inset-right)); bottom:calc(142px + env(safe-area-inset-bottom)); width:64px; height:64px; border-radius:50%; font-size:18px; font-weight:900; z-index:4; background:rgba(255,255,255,.85); }
body.touch #r11jump:active { background:var(--acc); }
body.touch #social { bottom:calc(214px + env(safe-area-inset-bottom)); }
body.touch #pop { bottom:calc(214px + env(safe-area-inset-bottom)); }
@media (max-width:420px) { .pf-top { flex-direction:column; align-items:center; } .pf-info { width:100%; } .pf-grid { grid-template-columns:1fr; } .gf-list { grid-template-columns:repeat(2,1fr); } }

/* 每日任務：更多／寶箱 */
.q-more { display:block; width:100%; margin:6px 0; padding:6px 10px; font-size:13px; border-radius:12px; box-shadow:none; }
.q-chest { display:flex; align-items:center; gap:10px; margin-top:8px; padding:9px 11px; border-radius:14px; background:#fff3c4; color:#6a4a00; border:2px dashed #f0b060; }
.q-chest .cx { font-size:34px; line-height:1; } .q-chest > div { flex:1; min-width:0; } .q-chest small { display:block; opacity:.8; font-size:12px; }
.q-chest.ready { border-style:solid; border-color:#ffb02e; animation:r11pulse 1.2s infinite; } .q-chest.ready .cx { animation:r11gbox 1s ease-in-out infinite; }
.q-chest.opened { opacity:.7; border-style:solid; }
.q-chest .q-bar { height:8px; border-radius:99px; background:rgba(0,0,0,.12); overflow:hidden; margin:3px 0; } .q-chest .q-bar i { display:block; height:100%; background:linear-gradient(90deg,#ffb02e,#ff7f9f); }
.q-chestfx { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:rgba(255,250,240,.92); border-radius:inherit; animation:r11fadein .25s ease-out, r11fadeout .4s 2.1s forwards; pointer-events:none; }
.q-chestfx .cb { position:relative; width:90px; height:80px; } .q-chestfx .lid { position:absolute; left:50%; top:8px; font-size:64px; transform:translateX(-50%); animation:r11lid 1s ease-out forwards; }
.q-chestfx .it { position:absolute; left:50%; top:14px; font-size:50px; transform:translateX(-50%) scale(0); animation:r11item 1s .3s cubic-bezier(.3,1.6,.5,1) forwards; }
.q-chestfx b { font-size:18px; color:#c8433a; text-align:center; padding:0 12px; }
@keyframes r11fadein { from { opacity:0; } } @keyframes r11fadeout { to { opacity:0; } }
.r6-card { position:relative; }
.pf-sports{margin:14px 0;padding:12px;border-radius:14px;background:rgba(255,255,255,.55)}.pf-sports .pf-sport-setting{display:flex;align-items:center;gap:10px;font-weight:800}.pf-sports select{font:inherit;max-width:160px;border-radius:8px;padding:5px 10px}.pf-sports .sport-profile{overflow-wrap:anywhere}.pf-sports h4{margin:8px 0}.pf-sports p,.pf-sports li{font-size:13px;line-height:1.6}.pf-sports ul{padding-left:22px}body.night .pf-sports{background:rgba(255,255,255,.06)}

/* 第 14 輪 G 線：每日任務 10 個（首頁 3 個、「全部任務」展開其餘 7 個）＋額外小獎說明 */
.q-list.q-all { margin-top:6px; } .q-list.q-all li { padding:6px 10px; gap:8px; } .q-list.q-all li b { font-size:13px; }
.q-extra { margin-top:8px; padding:7px 11px; border-radius:12px; background:rgba(255,255,255,.5); border:1px dashed var(--line); font-size:13px; }
.q-extra em { font-style:normal; font-weight:800; float:right; } .q-extra small { display:block; font-size:12px; opacity:.75; margin-top:2px; } .q-extra small.cap { color:#c8433a; opacity:1; }
body.night .q-extra { background:rgba(255,255,255,.07); }
@media (max-width:420px) { .q-extra { font-size:12px; } .q-list.q-all li b { font-size:12.5px; } }

/* 第 14 輪 G：委託人紀錄（限定稱號／外觀）與任務列的經驗 */
.q-rec { margin-top:8px; padding:7px 11px; border-radius:12px; background:rgba(255,255,255,.5); border:1px dashed var(--line); font-size:13px; }
.q-rec em { font-style:normal; font-weight:700; } .q-rec small { display:block; font-size:12px; opacity:.75; margin-top:3px; }
.q-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.q-chip { display:inline-flex; flex-direction:column; padding:3px 8px; border-radius:10px; background:rgba(0,0,0,.06); font-size:12px; font-weight:700; opacity:.55; }
.q-chip small { font-size:10px; font-weight:400; opacity:.9; margin:0; }
.q-chip.got { opacity:1; background:rgba(242,193,78,.28); }
body.night .q-rec { background:rgba(255,255,255,.07); }
.q-list small.xp, .q-list .xp { font-size:11px; opacity:.8; margin-left:3px; }