:root { --bg:#bfe6ff; --panel:rgba(255,251,243,.92); --card:#fffaf0; --line:rgba(120,90,140,.24); --tx:#4a3a5c; --acc:#ffb02e; --acc-tx:#3a2a1a; --shadow:rgba(90,60,40,.28); --intro-g:rgba(255,196,120,.38); --title:#ff8a3d; }
body.night { --bg:#0e1331; --panel:rgba(22,26,52,.82); --card:#1a1e3c; --line:rgba(255,255,255,.18); --tx:#f4f1e8; --acc:#ffd23a; --acc-tx:#1b1424; --shadow:rgba(0,0,0,.5); --intro-g:rgba(8,10,24,.7); --title:#ffd23a; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--tx); overflow:hidden; overscroll-behavior:none; touch-action:none;
  font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC","Noto Sans CJK TC",system-ui,sans-serif; user-select:none; -webkit-user-select:none; }
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
[hidden] { display:none !important; }
button { font:inherit; color:var(--tx); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; backdrop-filter:blur(6px); box-shadow:0 2px 8px var(--shadow); }
button:hover { border-color:var(--acc); }
button:active { transform:translateY(1px); }

#labels { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.pill { position:absolute; left:0; top:0; display:flex; align-items:center; gap:6px; white-space:nowrap; padding:4px 12px 4px 8px; border-radius:999px; background:#fffaf0; color:#3a2f4a;
  font-size:14px; font-weight:600; box-shadow:0 2px 8px var(--shadow); pointer-events:auto; cursor:pointer; will-change:transform; transition:opacity .2s; }
.pill b { font-size:11px; color:#c8433a; font-weight:800; letter-spacing:.02em; }
.pill { transition:scale .18s cubic-bezier(.34,1.56,.64,1), opacity .2s, background .15s; }
.pill:hover { background:var(--acc); scale:1.14; }
.pill.pop { animation:pillpop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes pillpop { 0% { scale:1; } 35% { scale:1.3; } 100% { scale:1; } }
.pill.mini { font-size:12px; padding:2px 9px; background:rgba(255,255,255,.88); }
.pill.court { font-size:13px; padding:3px 10px 3px 7px; }
.pill.off { opacity:0; pointer-events:none; }

#prompt { position:fixed; left:0; top:0; transform:translate(-50%,-100%); padding:6px 14px; background:var(--panel); border:1px solid var(--acc); border-radius:12px; text-align:center; pointer-events:none; will-change:transform; }
#prompt b { color:var(--acc); display:block; font-size:15px; }
#prompt small { display:block; font-size:12px; opacity:.85; }
#toast { position:fixed; left:50%; top:76px; transform:translateX(-50%); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 18px; pointer-events:none; z-index:6; max-width:90vw; text-align:center; }

#hud { position:fixed; inset:0; pointer-events:none; }
#hud > * { pointer-events:auto; }
#topbar { position:absolute; right:12px; top:calc(10px + env(safe-area-inset-top)); display:flex; gap:8px; }
#minimap { position:absolute; left:12px; top:calc(10px + env(safe-area-inset-top)); width:200px; border-radius:12px; overflow:hidden; background:var(--panel); border:1px solid var(--line); cursor:pointer; }
#minimap canvas { display:block; width:100%; height:auto; }
#help { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); font-size:12px; opacity:.75; background:var(--panel); padding:5px 12px; border-radius:999px; pointer-events:none; white-space:nowrap; }
#joy, #act { display:none; }
body.touch #joy { display:block; position:absolute; left:calc(18px + env(safe-area-inset-left)); bottom:calc(26px + env(safe-area-inset-bottom)); width:124px; height:124px; border-radius:50%; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.35); touch-action:none; }
#joy i { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:rgba(255,255,255,.55); }
body.touch #act { display:block; position:absolute; right:calc(22px + env(safe-area-inset-right)); bottom:calc(40px + env(safe-area-inset-bottom)); width:92px; height:92px; border-radius:50%; font-size:20px; font-weight:700; background:rgba(255,210,58,.28); border:2px solid rgba(255,210,58,.7); touch-action:none; }
body.touch #act.ready { background:var(--acc); color:var(--acc-tx); animation:pulse 1s infinite; }
body.touch #help { display:none; }
@keyframes pulse { 50% { transform:scale(1.08); } }

#modal { position:fixed; inset:0; background:rgba(40,30,60,.4); display:flex; align-items:center; justify-content:center; z-index:8; }
.card { width:min(420px, 88vw); background:var(--card); border:1px solid var(--line); border-top:4px solid var(--acc); border-radius:16px; padding:20px 22px; box-shadow:0 12px 40px var(--shadow); }
.card h2 { margin:0 0 10px; font-size:22px; }
.card p { margin:0 0 10px; line-height:1.6; }
.card .soon { color:var(--acc); font-size:13px; }
.card button { margin-top:6px; width:100%; border-radius:10px; }

#intro { position:fixed; inset:0; z-index:9; pointer-events:none; display:flex; align-items:flex-end; justify-content:center; padding-bottom:12vh; background:linear-gradient(transparent 55%, var(--intro-g)); transition:opacity .8s; }
#intro.done { opacity:0; }
.intro-box { text-align:center; pointer-events:auto; }
.intro-sub { letter-spacing:.4em; font-size:14px; opacity:.95; color:var(--tx); text-shadow:0 1px 6px rgba(255,255,255,.8); margin-bottom:6px; }
#intro h1 { margin:0 0 16px; font-size:clamp(30px, 7vw, 56px); color:var(--title); -webkit-text-stroke:2px #fff; paint-order:stroke fill; text-shadow:0 4px 16px var(--shadow); opacity:0; transition:opacity 1s; }
#intro.lit h1 { opacity:1; }
#btnEnter { font-size:22px; padding:12px 44px; background:var(--acc); color:var(--acc-tx); border-color:var(--acc); font-weight:800; letter-spacing:.2em; }
.intro-load { font-size:13px; opacity:.7; }
#btnSkip { position:fixed; right:14px; top:calc(10px + env(safe-area-inset-top)); pointer-events:auto; font-size:13px; opacity:.8; }

@media (max-width:700px) {
  .pill { font-size:12px; padding:3px 9px 3px 6px; }
  .pill.court .n { display:none; }
  #minimap { width:118px; }
  #topbar { gap:5px; } #topbar button { padding:6px 10px; font-size:13px; }
}

/* ---- 頭上名牌 */
#nameplate { position:fixed; left:0; top:0; pointer-events:none; text-align:center; will-change:transform; z-index:3; }
#nameplate .ti { display:inline-block; font-size:11px; font-weight:800; color:#fff; padding:1px 8px; border-radius:999px; margin-bottom:2px; text-shadow:0 1px 2px rgba(0,0,0,.3); }
#nameplate .nm { display:block; font-size:13px; font-weight:700; color:var(--tx); background:var(--panel); border-radius:999px; padding:1px 10px; box-shadow:0 2px 6px var(--shadow); }

/* ---- 捏角色 */
#creator { position:fixed; inset:0; z-index:12; pointer-events:none; }
#creator .cr-panel { position:absolute; left:16px; top:16px; bottom:16px; width:min(410px, 46vw); display:flex; flex-direction:column; gap:10px; padding:16px 16px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:24px; box-shadow:0 10px 36px var(--shadow); backdrop-filter:blur(8px); pointer-events:auto; touch-action:pan-y; }
.cr-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cr-head h2 { margin:0; font-size:22px; color:var(--title); }
.cr-head small { display:block; font-size:12px; opacity:.7; }
.cr-name { display:flex; flex-direction:column; gap:3px; }
.cr-name label { font-size:12px; font-weight:700; opacity:.8; }
.cr-name input { font:inherit; font-size:16px; padding:8px 14px; border-radius:14px; border:2px solid var(--line); background:#fff; color:#4a3a5c; outline:none; user-select:text; -webkit-user-select:text; }
.cr-name input:focus { border-color:var(--acc); }
.cr-name input:disabled { background:#f3ece0; opacity:.85; }
.cr-name small { font-size:12px; min-height:16px; opacity:.8; }
.cr-name small.bad { color:#d8433a; opacity:1; }
.cr-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.cr-tabs button { padding:5px 11px; font-size:13px; border-radius:999px; background:#fff; color:#4a3a5c; }
.cr-tabs button.on { background:var(--acc); color:var(--acc-tx); border-color:var(--acc); font-weight:800; }
.cr-opts { flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(82px, 1fr)); gap:8px; align-content:start; padding:2px; touch-action:pan-y; }
.cr-opt { display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 6px; border-radius:16px; font-size:13px; font-weight:600; background:#fff; color:#4a3a5c; border:2px solid var(--line); line-height:1.2; text-align:center;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1); }
.cr-opt i { width:18px; height:18px; border-radius:50%; border:2px solid rgba(0,0,0,.12); flex:none; }
.cr-opt.sw { flex-direction:column; gap:4px; } .cr-opt.sw i { width:30px; height:30px; }
.cr-opt:hover { transform:scale(1.06); }
.cr-opt.on { border-color:var(--acc); background:#fff3d8; box-shadow:0 0 0 2px var(--acc) inset; }
.cr-reg { font-size:12px; display:flex; gap:6px; align-items:flex-start; line-height:1.4; opacity:.9; }
.cr-msg { font-size:12px; min-height:16px; color:#d8433a; }
.cr-actions { display:flex; gap:8px; }
.cr-actions button { flex:1; border-radius:16px; padding:11px 8px; font-weight:800; font-size:16px; background:#fff; color:#4a3a5c; }
.cr-actions button.primary { flex:2; background:var(--acc); color:var(--acc-tx); border-color:var(--acc); }
.cr-actions button:disabled { opacity:.45; cursor:not-allowed; }
#crRandom { white-space:nowrap; background:#fff; color:#4a3a5c; font-weight:700; }
.cr-hint { position:absolute; right:24px; bottom:18px; font-size:12px; opacity:.75; background:var(--panel); padding:4px 12px; border-radius:999px; }

@media (max-width:760px), (orientation:portrait) {
  #creator .cr-panel { left:8px; right:8px; top:auto; bottom:8px; width:auto; height:min(56vh, 470px); padding:12px 12px 10px; gap:7px; border-radius:22px; }
  .cr-head h2 { font-size:18px; }
  .cr-name input { padding:6px 12px; font-size:16px; }
  .cr-name small { min-height:14px; }
  .cr-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; touch-action:pan-x; flex:none; } .cr-tabs button { flex:none; }
  .cr-opts { grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:6px; }
  .cr-opt { padding:7px 4px; font-size:12px; }
  .cr-actions button { padding:9px 6px; font-size:15px; }
  .cr-hint { display:none; }
}

/* ---- 第 3 輪：線上社交 ---- */
#rlayer { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
.rtag, #nameplate { --bub-bg:#fff; }
.rtag { position:absolute; left:0; top:0; text-align:center; will-change:transform; }
.rtag .ti { display:inline-block; font-size:10px; font-weight:800; color:#fff; padding:0 7px; border-radius:999px; margin-bottom:1px; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.rtag .nm { display:block; font-size:12px; font-weight:700; color:var(--tx); background:var(--panel); border-radius:999px; padding:0 9px; box-shadow:0 2px 6px var(--shadow); white-space:nowrap; }
.rbub { position:absolute; left:50%; bottom:100%; margin-bottom:8px; transform:translateX(-50%); max-width:220px; white-space:nowrap; background:#fff; color:#3a2f4a; border:2px solid #3a2f4a; border-radius:14px;
  padding:3px 11px; font-size:14px; font-weight:800; box-shadow:0 3px 10px var(--shadow); }
.rbub::after { content:''; position:absolute; left:50%; top:100%; margin-left:-6px; border:6px solid transparent; border-top-color:#3a2f4a; }
.rbub.emote { padding:2px 6px; line-height:0; }
.rbub canvas { width:36px; height:36px; image-rendering:pixelated; }
.rbub.big { font-size:20px; padding:5px 15px; border-color:#ff8a3d; background:#fff8e6; }
.rbub.big::after { border-top-color:#ff8a3d; }
.rbub.big canvas { width:54px; height:54px; }
.rbub.pop { animation:bubpop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes bubpop { 0% { transform:translateX(-50%) scale(.3); } 100% { transform:translateX(-50%) scale(1); } }
#nameplate .rbub { margin-bottom:6px; }

#netstat { position:absolute; left:12px; top:calc(10px + 160px + env(safe-area-inset-top)); font-size:12px; padding:3px 10px; border-radius:999px; background:var(--panel); border:1px solid var(--line); pointer-events:none; }
#netstat.online::before { content:''; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:#3ecf6a; }
#netstat.reconnecting::before, #netstat.offline::before, #netstat.off::before { content:''; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:#e0903a; }
@media (max-width:700px) { #netstat { top:calc(10px + 90px + env(safe-area-inset-top)); } }

#social { position:absolute; left:50%; bottom:46px; transform:translateX(-50%); display:flex; gap:8px; }
#social button { position:relative; font-weight:700; padding:9px 18px; font-size:15px; }
#social button.on { background:var(--acc); color:var(--acc-tx); border-color:var(--acc); }
#frBadge { position:absolute; right:-4px; top:-6px; min-width:20px; height:20px; border-radius:10px; background:#e8443a; color:#fff; font-style:normal; font-size:12px; line-height:20px; text-align:center; }
body.touch #social { left:auto; right:calc(14px + env(safe-area-inset-right)); bottom:calc(150px + env(safe-area-inset-bottom)); transform:none; flex-direction:column; gap:6px; }
body.touch #social button { padding:8px 14px; font-size:14px; }

#pop { position:absolute; left:50%; bottom:92px; transform:translateX(-50%); width:min(360px, calc(100vw - 24px)); max-height:min(56vh, 460px); overflow-y:auto; background:var(--card); border:1px solid var(--line); border-top:4px solid var(--acc);
  border-radius:16px; padding:10px 12px 12px; box-shadow:0 10px 32px var(--shadow); touch-action:pan-y; }
body.touch #pop { left:auto; right:calc(12px + env(safe-area-inset-right)); transform:none; bottom:calc(150px + env(safe-area-inset-bottom)); width:min(300px, calc(100vw - 150px)); }
#pop h3 { margin:2px 0 6px; font-size:14px; } #pop h3 small { font-weight:400; opacity:.75; }
#pop .grid { display:grid; gap:6px; margin-bottom:8px; }
#pop .grid.ph { grid-template-columns:repeat(3, 1fr); } #pop .grid.em { grid-template-columns:repeat(6, 1fr); } #pop .grid.sg { grid-template-columns:repeat(2, 1fr); }
#pop .grid button { border-radius:12px; padding:6px 4px; font-size:13px; font-weight:700; background:#fff; color:#4a3a5c; line-height:1.2; }
#pop .grid.em button { padding:3px; line-height:0; } #pop .grid.em canvas { width:30px; height:30px; image-rendering:pixelated; }
#pop .grid.sg button { background:var(--c); color:#fff; border-color:transparent; font-size:15px; padding:10px 4px; text-shadow:0 1px 2px rgba(0,0,0,.3); }
#pop .grid.sg button.on { outline:3px solid #3a2f4a; }
#pop .wide { width:100%; border-radius:12px; margin-top:4px; }
#pop small { display:block; opacity:.7; font-size:12px; margin-top:4px; }
#pop .note { margin:4px 0 8px; font-size:13px; line-height:1.6; }
#pop .sub { font-size:12px; font-weight:700; opacity:.75; margin:8px 0 4px; }
.row { display:flex; align-items:center; gap:6px; padding:5px 2px; border-bottom:1px dashed var(--line); }
.row .nm { flex:1; font-weight:700; font-size:14px; word-break:break-all; } .row .nm small { display:block; font-weight:400; opacity:.75; font-size:12px; margin:0; }
.row button { padding:4px 10px; font-size:13px; border-radius:10px; flex:none; } .row button.ok, .pc-btns button.ok { background:var(--acc); color:var(--acc-tx); border-color:var(--acc); font-weight:800; }
.row .dot { width:10px; height:10px; border-radius:50%; background:#b9b2c6; flex:none; } .row.on .dot { background:#3ecf6a; } .row.off { opacity:.62; }

#sheet { position:fixed; inset:0; background:rgba(40,30,60,.32); display:flex; align-items:center; justify-content:center; z-index:8; touch-action:none; }
#sheet .card { width:min(340px, 90vw); }
.pc-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; } .pc-head b { font-size:20px; }
.pc-head .ti { font-size:11px; font-weight:800; color:#fff; padding:1px 9px; border-radius:999px; } .pc-head em { font-style:normal; font-size:12px; padding:1px 8px; border-radius:999px; background:#eee3ff; color:#6b4fb0; }
.pc-sign { font-size:22px; font-weight:900; text-align:center; color:#fff; background:var(--c); border:4px solid #fffaf0; outline:2px solid var(--c); border-radius:14px; padding:8px; margin:4px 4px 10px; text-shadow:0 2px 3px rgba(0,0,0,.3); }
.pc-sign.big { font-size:34px; padding:18px 8px; } .pc-none { text-align:center; opacity:.6; padding:10px 0 12px; font-size:14px; }
.pc-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px; }
.pc-btns button, .pc-btns .btn { border-radius:12px; padding:10px 6px; font-weight:700; text-align:center; text-decoration:none; color:var(--tx); background:var(--panel); border:1px solid var(--line); margin:0; width:auto; }
.pc-btns button:disabled { opacity:.45; cursor:not-allowed; }
#sheet .card .note { font-size:14px; } #sheet .row button { width:auto; margin:0; }
.card-pc .close { margin-top:4px; }

#courtbar { position:absolute; left:50%; top:calc(60px + env(safe-area-inset-top)); transform:translateX(-50%); display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; max-width:calc(100vw - 20px);
  background:var(--card); border:2px solid #f4c75a; border-radius:999px; padding:6px 10px 6px 16px; box-shadow:0 6px 20px var(--shadow); font-size:14px; }
#courtbar b { font-size:16px; color:#c8433a; } #courtbar .st { font-weight:800; color:#2e8f5d; } #courtbar .md { padding:1px 8px; border-radius:999px; background:#eee3ff; color:#6b4fb0; font-size:12px; font-weight:700; }
#courtbar button { padding:4px 12px; font-size:13px; } #courtbar small { opacity:.7; }
.pill .st { font-style:normal; font-size:11px; font-weight:800; padding:0 7px; border-radius:999px; background:#e7f5ea; color:#2e8f5d; } .pill .st.s1 { background:#fff0c9; color:#b8741a; } .pill .st.s2 { background:#ffd9d9; color:#c0392b; }

#tablebox { position:absolute; left:12px; bottom:calc(150px + env(safe-area-inset-bottom)); width:min(300px, calc(100vw - 24px)); background:var(--card); border:1px solid var(--line); border-top:4px solid #ff8a3d; border-radius:14px; padding:8px 10px; box-shadow:0 8px 24px var(--shadow); }
body:not(.touch) #tablebox { bottom:100px; }
#tablebox .th { display:flex; gap:8px; align-items:baseline; margin-bottom:4px; } #tablebox .th b { color:#ff8a3d; } #tablebox .th span { font-size:12px; opacity:.8; }
#tablebox .tlog { min-height:48px; font-size:13px; line-height:1.5; background:rgba(255,200,120,.16); border-radius:10px; padding:4px 8px; margin-bottom:6px; } #tablebox .tlog b { margin-right:6px; } #tablebox .tlog .dim { opacity:.6; } #tablebox canvas.e { width:24px; height:24px; vertical-align:middle; image-rendering:pixelated; }
#tablebox .tq { display:flex; flex-wrap:wrap; gap:5px; } #tablebox .tq button { padding:4px 9px; font-size:12px; border-radius:10px; } #tablebox .tq button canvas { width:22px; height:22px; display:block; image-rendering:pixelated; } #tablebox .tq button:has(canvas) { padding:2px 5px; line-height:0; }

#dlg { position:absolute; left:50%; top:calc(110px + env(safe-area-inset-top)); transform:translateX(-50%); background:var(--card); border:2px solid var(--acc); border-radius:16px; padding:10px 16px; box-shadow:0 8px 28px var(--shadow); text-align:center; z-index:7; font-size:15px; }
#dlg > div { display:flex; gap:8px; justify-content:center; margin-top:8px; } #dlg button { padding:6px 18px; } #dlg button.ok { background:var(--acc); color:var(--acc-tx); border-color:var(--acc); font-weight:800; }

body.touch #pop .grid.em { grid-template-columns:repeat(4, 1fr); } body.touch #pop .grid.ph { grid-template-columns:repeat(2, 1fr); }
@media (max-width:420px) { #pop .grid.em { grid-template-columns:repeat(4, 1fr); } #pop .grid.ph { grid-template-columns:repeat(2, 1fr); } #tablebox { bottom:calc(206px + env(safe-area-inset-bottom)); width:min(250px, calc(100vw - 150px)); } }
#pop, #courtbar, #tablebox, #dlg, #netstat { z-index:5; }

/* ---- 告示牌牆：放大的分頁看板（第 5 輪） ---- */
#boardwin { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; padding:0 12px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(transparent 20%, rgba(70,40,10,.28)); }
#boardwin[hidden] { display:none; }
.bw-card { width:min(560px, 100%); max-height:72vh; display:flex; flex-direction:column; background:#fff8ea; border-radius:24px; box-shadow:0 10px 40px rgba(110,60,10,.35), inset 0 0 0 3px #fff; overflow:hidden; color:#5a3a22; animation:bwin .35s cubic-bezier(.2,1.3,.4,1); }
@keyframes bwin { from { transform:translateY(40px) scale(.96); opacity:0 } to { transform:none; opacity:1 } }
.bw-card header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px 4px; }
.bw-card h2 { margin:0; font-size:20px; color:#c0661a; }
.bw-x { width:34px; height:34px; border-radius:50%; border:0; background:#ffe0b8; color:#a85a10; font-size:16px; cursor:pointer; }
.bw-tabs { display:flex; gap:6px; padding:6px 12px; overflow-x:auto; scrollbar-width:none; }
.bw-tabs button { flex:none; border:0; border-radius:999px; padding:7px 13px; background:#ffe9c8; color:#a85a10; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.bw-tabs button.on { background:#ff6f8a; color:#fff; box-shadow:0 3px 8px rgba(255,111,138,.4); }
.bw-body { padding:6px 16px 10px; overflow-y:auto; min-height:210px; }
.bw-note { margin:2px 0 8px; font-size:12px; color:#a58468; }
.bw-rows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.bw-rows li { display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:14px; background:#fff; box-shadow:0 1px 0 #f2dcc0; }
.bw-rows li i { font-style:normal; width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%; background:#e6d2b8; color:#fff; font-weight:800; font-size:14px; flex:none; }
.bw-rows li.top1 i { background:#f2c14e; } .bw-rows li.top2 i { background:#b9c0cc; } .bw-rows li.top3 i { background:#d98a52; }
.bw-rows li .nm { flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bw-rows li b { color:#e0701c; font-size:15px; } .bw-rows li small { color:#a58468; font-size:11px; }
.bw-rows li.me { background:#fff1c9; box-shadow:0 0 0 2px #ffd23a; }
.bw-empty { text-align:center; color:#a58468; padding:40px 0; margin:0; }
.bw-daily { text-align:center; padding:10px 0; } .bw-daily b { color:#d44a72; } .bw-daily p { margin:6px 0; font-size:16px; }
.bw-go { display:inline-block; margin:12px 0 6px; padding:10px 22px; border-radius:999px; background:#ff6f8a; color:#fff; font-weight:800; text-decoration:none; box-shadow:0 4px 10px rgba(255,111,138,.4); }
.bw-daily small { display:block; color:#a58468; }
.bw-news { padding:10px 12px; margin-bottom:8px; border-radius:14px; background:#fff; } .bw-news b { color:#c0661a; } .bw-news small { margin-left:8px; color:#a58468; } .bw-news p { margin:4px 0 0; font-size:14px; line-height:1.45; }
.bw-card footer { display:flex; align-items:center; justify-content:space-between; padding:8px 14px 12px; }
.bw-card footer button { border:0; border-radius:999px; padding:8px 16px; background:#ffd23a; color:#7a4a00; font:inherit; font-weight:800; cursor:pointer; }
.bw-card footer button:disabled { opacity:.35; cursor:default; }
.bw-page { font-weight:700; color:#a58468; }

/* ---- 進場轉場：圓形收縮＋羽球彈跳（第 5 輪） ---- */
#wipe { position:fixed; inset:0; z-index:90; pointer-events:all; overflow:hidden; }
#wipe[hidden] { display:none; }
#wipe .wp-iris { position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; background:radial-gradient(circle, #ffd7e6, #ff9fbd 60%, #ff6f8a); transform:scale(0); }
#wipe.go .wp-iris { animation:wpiris .62s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes wpiris { to { transform:scale(120); } }
#wipe .wp-bird { position:absolute; left:50%; top:50%; width:70px; margin:-35px 0 0 -35px; opacity:0; transform:rotate(-30deg); }
#wipe.go .wp-bird { animation:wpbird .8s .12s ease-out forwards; }
@keyframes wpbird { 0% { opacity:0; transform:translate(-110px,60px) rotate(-60deg) scale(.5); } 30% { opacity:1; transform:translate(-30px,-60px) rotate(-20deg) scale(1.1); } 60% { transform:translate(30px,20px) rotate(10deg) scale(1); } 100% { opacity:1; transform:translate(0,-6px) rotate(0) scale(1.15); } }
#wipe .wp-txt { position:absolute; left:0; right:0; top:calc(50% + 46px); text-align:center; font-size:34px; font-weight:900; color:#fff; text-shadow:0 3px 0 #d44a72, 0 0 18px rgba(255,255,255,.6); opacity:0; }
#wipe .wp-txt small { display:block; font-size:16px; letter-spacing:4px; opacity:.9; }
#wipe.go .wp-txt { animation:wptxt .5s .3s ease-out forwards; }
@keyframes wptxt { from { opacity:0; transform:translateY(14px) scale(.8); } to { opacity:1; transform:none; } }
.pill em.st.spec { background:#ff6f8a !important; color:#fff !important; box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(255,111,138,.5); cursor:pointer; animation:specpulse 1.4s ease-in-out infinite; }
@keyframes specpulse { 50% { transform:scale(1.08); } }