.online-auth{background:rgba(21,18,28,.86);border:2px solid #7b665b;border-radius:10px;padding:10px;margin-bottom:10px;box-shadow:inset 0 0 0 2px #2b2024;color:#f5ead9}
.online-status{font:16px/1.25 'VT323',monospace;letter-spacing:.4px;min-height:20px}.online-status[data-kind="good"]{color:#90e58c}.online-status[data-kind="bad"]{color:#ff938d}
.online-auth-actions{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:7px}.online-auth .btn{font-size:11px;min-height:34px;padding:7px 10px}.online-auth .link-btn{color:#f5d693}
.btn:disabled{filter:grayscale(.7);opacity:.45;cursor:not-allowed}
.online-modal{width:min(540px,94vw);max-height:min(720px,88vh);padding:0!important;overflow:hidden;background:#171d29!important;color:#eef5ff;border-color:#4c6f91!important}
.online-board{display:flex;flex-direction:column;max-height:inherit}.online-board-head{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 10px;background:linear-gradient(135deg,#24364d,#17202f)}.online-board-head small{color:#67d8d3}.online-board-head h2{margin:2px 0 0}.online-board-head .pp-x{position:static;color:white}
.online-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px;background:#101621}.online-tabs button{border:1px solid #38516d;background:#222d3d;color:#b9c9db;border-radius:5px;padding:9px 4px;font-weight:800}.online-tabs button.on{background:#2474bd;color:white;border-color:#62b4fb}
.online-ranks{overflow:auto;padding:7px 10px 12px;min-height:270px}.rank-row{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:center;border-bottom:1px solid #314157;padding:9px 6px}.rank-row.me{background:#173b48;box-shadow:inset 3px 0 #64e0cb}.rank-pos{font-size:20px;color:#f4bd5c;text-align:center}.rank-row strong{display:block;color:white}.rank-row small{display:block;color:#91a4bb;margin-top:2px}.rank-row> b:last-child{color:#68dfc8}.online-loading{text-align:center;padding:70px 10px;color:#9db0c6}.online-loading.bad{color:#ff938d}
@media(max-width:540px){.online-auth-actions{display:grid}.online-auth .btn{width:100%}.online-modal{max-height:90vh}.rank-row{grid-template-columns:30px 1fr auto}.rank-row> b:last-child{font-size:12px}.bb-btn span{font-size:8px}}

/* Online account gate and production leaderboard */
.online-auth{background:linear-gradient(145deg,rgba(25,29,43,.97),rgba(14,17,27,.97));border-color:#6e829c;border-radius:12px;padding:12px;box-shadow:inset 0 0 0 2px #202b3a,0 7px 0 #18141b}.online-auth-title{display:flex;align-items:center;gap:9px;text-align:left;border-bottom:1px solid #34465c;padding-bottom:8px}.online-auth-title b{display:block;color:#fff;font:700 14px 'Be Vietnam Pro',sans-serif}.online-auth-title small{display:block;color:#8ea6bd;font-size:10px}.online-pulse{width:12px;height:12px;border-radius:50%;background:#62dfb4;box-shadow:0 0 0 4px #24594d,0 0 13px #62dfb4}.online-status{margin-top:7px}.online-auth-actions{align-items:center}.online-identity{display:flex;gap:8px;align-items:center;text-align:left;flex:1}.online-identity>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#257b62;color:#fff}.online-identity b,.online-identity small{display:block}.online-identity b{color:#fff;font-size:12px}.online-identity small{color:#7edabb;font-size:9px}.title-box.online-locked .title-btns>button:not(#online-google):not(#online-guest),.title-box.online-locked .save-info{display:none!important}.title-box.online-locked #online-auth{margin-bottom:0}
.online-modal{width:min(560px,94vw);max-height:min(740px,90vh)}.online-board-head{position:relative;padding:18px 18px 14px;background:linear-gradient(135deg,#273d5b,#152238 62%,#3c273c);border-bottom:2px solid #d09a42}.online-board-head small{font-weight:800;letter-spacing:.6px}.online-board-head h2{color:#fff;text-shadow:2px 2px #101622}.online-board-head .pp-x{position:absolute;right:10px;top:9px}.online-trophy{font-size:42px;margin-right:35px;filter:drop-shadow(0 3px 0 #8b5d24)}.online-ranks{min-height:310px;background:radial-gradient(circle at 50% 0,#263348,#121927 60%)}.rank-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-items:end;margin:6px 0 12px}.podium{min-width:0;text-align:center;border:1px solid #425775;border-radius:9px 9px 4px 4px;padding:10px 5px;background:linear-gradient(#27364b,#192334);box-shadow:0 4px 0 #0c111b}.podium.p1{order:2;padding-top:17px;border-color:#d7aa4b;background:linear-gradient(#5a4928,#2b2b2d)}.podium.p2{order:1}.podium.p3{order:3}.podium.me{box-shadow:0 0 0 2px #55d9bc,0 4px 0 #0c111b}.podium span{display:block;font-size:24px}.podium b,.podium strong,.podium small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium b{font-size:10px;color:#fff}.podium strong{font-size:13px;color:#76e3cd;margin:4px 0}.podium small{font-size:8px;color:#94a8be}.rank-list{border:1px solid #304159;border-radius:7px;overflow:hidden}.rank-row{grid-template-columns:44px 1fr auto;background:#192333}.rank-row em{font-style:normal;font-size:8px;background:#47bda2;color:#092820;border-radius:3px;padding:2px 4px;margin-left:4px}.online-settings-account{display:flex;align-items:center;gap:9px;background:#182838;border:1px solid #376376;border-radius:8px;padding:9px;margin:10px 0}.online-settings-account>span{color:#58d9af}.online-settings-account>div{flex:1}.online-settings-account b,.online-settings-account small{display:block}.online-settings-account small{color:#87a5b5}
@media(max-width:540px){.online-identity{justify-content:center}.online-modal{max-height:92vh}.online-board-head{padding:14px 12px}.online-trophy{font-size:32px}.online-board-head h2{font-size:18px}.rank-row{grid-template-columns:35px 1fr auto}.podium strong{font-size:10px}}
.title-box .logo{width:min(360px,100%);margin:0 auto 24px;padding:12px 14px 16px;border-radius:16px;box-sizing:border-box;box-shadow:0 5px 0 var(--ink),0 0 28px #ff3d8133}
#title-screen .logo-sub{font-size:18px;letter-spacing:2px}
#title-screen .logo-main{font-size:clamp(38px,9vw,52px);line-height:1.12;margin-top:5px}
#title-screen #t-save-info{display:none!important}
#title-screen .online-auth{padding:10px 12px;margin-bottom:7px;box-shadow:inset 0 0 0 2px #202b3a,0 4px 0 #18141b}
#title-screen .online-auth-title{padding-bottom:0;border-bottom:0;gap:9px}
#title-screen .online-auth-title b{font-size:12px}
#title-screen .online-pulse{width:9px;height:9px;flex-shrink:0;box-shadow:0 0 0 3px #24594d}
#title-screen .online-status{font-size:16px;line-height:1.2;min-height:0;margin-top:7px}
#title-screen .online-auth.signed-in .online-status[data-kind="good"]{display:none}
#title-screen .online-auth.signed-in .online-auth-actions{display:flex;flex-wrap:wrap;gap:7px 8px;margin-top:5px;justify-content:space-between}
#title-screen .online-identity{min-width:110px;justify-content:flex-start}
#title-screen .online-identity>span,#title-screen #online-account-kind{display:none}
#title-screen .online-identity>div{min-width:0}
#title-screen #online-account-name{font:18px/1.2 'VT323',monospace;overflow-wrap:anywhere;color:#92dfb8}
#title-screen #online-link-google{font-size:10px;min-height:38px;padding:6px 9px;flex-shrink:0}
#title-screen #online-logout{font:15px/1.2 'VT323',monospace;min-height:24px;flex:1 0 100%;max-width:none;text-align:right;padding:1px 2px}

.cloud-save-status{font:11px/1.2 'Be Vietnam Pro',sans-serif;border:1px solid #527066;background:#172d27;color:#b9f4d8;border-radius:7px;padding:7px 9px;cursor:pointer;max-width:125px;min-height:34px}.cloud-save-status[data-kind=bad]{color:#ffb6a6;border-color:#a55a49}.cloud-save-status[data-kind=pending]{color:#ffdc91}@media(max-width:600px){.cloud-save-status{font-size:9px;padding:4px;min-height:28px;max-width:94px}}
body.portrait{--top-h:calc(150px + env(safe-area-inset-top))}
.online-board.dishes .online-board-head{background:linear-gradient(135deg,#402b4d,#281f3d 65%,#623c38);border-bottom-color:#efc260}
.online-board.dishes .online-trophy{font-size:0}.online-board.dishes .online-trophy::after{content:'🍜';font-size:42px}
.online-board.dishes .podium{background:linear-gradient(#332848,#1e2437);border-color:#805b9d}
.online-board.dishes .podium.p1{background:linear-gradient(#664634,#34283a);border-color:#ffd170}
.online-board.dishes .podium small{white-space:normal;line-height:1.25;font-size:10px;min-height:38px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.online-board.dishes .podium strong,.online-board.dishes .rank-row>b:last-child{color:#ffe078}
.rank-dish-art{display:block;width:56px;height:56px;object-fit:contain;image-rendering:pixelated;margin:2px auto 5px}
.online-board.dishes .rank-row{grid-template-columns:32px 40px 1fr auto;gap:7px}
.online-board.dishes .rank-row .rank-dish-art{width:40px;height:40px;margin:0}
.online-board.dishes .rank-row small{max-width:250px;line-height:1.25}
@media(max-width:540px){.online-tabs button{font-size:10px;padding:8px 2px}.online-board.dishes .rank-row{grid-template-columns:25px 34px 1fr auto;gap:5px}.online-board.dishes .rank-row .rank-dish-art{width:34px;height:34px}.online-board.dishes .rank-row>b:last-child{font-size:11px}.online-board.dishes .podium small{font-size:9px}}
.online-board.likes .online-board-head{background:linear-gradient(135deg,#542b4a,#2b203b 62%,#753643);border-bottom-color:#ef7e9b}
.online-board.likes .online-trophy{font-size:0}.online-board.likes .online-trophy::after{content:'👍';font-size:38px;filter:drop-shadow(0 3px 0 #6c1f3b)}

#online-link-google{white-space:nowrap;background:linear-gradient(#fff,#e9f1ff);color:#244b87;border-color:#8db0df;box-shadow:0 3px 0 #496b9c}
.online-board.likes .podium{background:linear-gradient(#412d45,#202338);border-color:#8d4e77}.online-board.likes .podium.p1{background:linear-gradient(#704052,#38283d);border-color:#ff9eb4}
.online-board.likes .podium strong,.online-board.likes .rank-row>b:last-child{color:#ff91aa}
@media(max-width:540px){.online-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}.online-tabs button{font-size:9px;line-height:1.15;padding:7px 1px}}

/* ==========================================================================
 * BẢNG XẾP HẠNG (thiết kế mới) — tông kem/vàng của game, bục vinh quang top 3, 10 quán/trang
 * ========================================================================== */
.modal.lb-modal { width: min(560px, 100%); height: min(760px, calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); padding: 0; overflow: hidden; display: flex; flex-direction: column; background: #fff8ea; }
.lb { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lb-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; background: linear-gradient(#ffe777, #ffc62b); border-bottom: 3px solid var(--ink); }
.lb-trophy { flex: 0 0 auto; filter: drop-shadow(0 2px 0 #9a6a10); animation: lbBob 2.6s ease-in-out infinite; } .lb-trophy .pxi { height: 34px; }
@keyframes lbBob { 50% { transform: translateY(-3px) rotate(-4deg); } }
.lb-titles { flex: 1; min-width: 0; } .lb-titles small { display: block; font: 800 10px var(--display); letter-spacing: 1.4px; color: #8a5a10; }
.lb-title { margin: 0; font: 800 22px/1.1 var(--display); color: var(--ink); text-shadow: 0 1px 0 #fff6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; justify-content: flex-start; }
.lb-tabs { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; scrollbar-width: none; background: #fdefd2; border-bottom: 2px solid #e6d0a0; }
.lb-tabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 42px; padding: 0 10px; border-radius: 12px; border: 1.5px solid #d9bf8a; background: #fff; color: #5a4a3a; font: 800 12.5px var(--font); box-shadow: 0 3px 0 #d9bf8a; cursor: pointer; white-space: nowrap; }
.lb-tabs button .pxi { height: 16px; } .lb-tabs button.on { background: linear-gradient(#ffc04d, #ff9f1c); border-color: #c7600a; color: #fff; text-shadow: 0 1px 0 #0004; box-shadow: 0 3px 0 #a94f06; }
.lb-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 12px; overscroll-behavior: contain; background: radial-gradient(circle at 50% 0, #fff3c9, #fff8ea 60%); }

.lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; margin: 6px 0 14px; }
.lb-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.lb-pod b { max-width: 100%; font: 800 12.5px/1.2 var(--display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pod strong { font: 800 14px var(--display); color: #a5480a; } .lb-pod small { max-width: 100%; font-size: 10.5px; color: #7a6a5a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-crown .pxi { height: 26px; } .lb-pod.p1 .lb-crown .pxi { height: 34px; animation: lbGlow 1.6s ease-in-out infinite; }
@keyframes lbGlow { 50% { filter: drop-shadow(0 0 6px #ffd23a) drop-shadow(0 0 12px #ffb000); transform: translateY(-2px); } }
.lb-plinth { width: 100%; margin-top: 4px; display: grid; place-items: center; border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; font: 800 26px var(--display); color: #fff; text-shadow: 0 2px 0 #0005; }
.lb-pod.p1 .lb-plinth { height: 86px; background: linear-gradient(#ffe066, #e6a400); box-shadow: inset 0 4px 0 #fff6, 0 0 22px #ffcf33aa; }
.lb-pod.p2 .lb-plinth { height: 62px; background: linear-gradient(#eef2f7, #a9b4c2); color: #5b6573; text-shadow: 0 1px 0 #fff; }
.lb-pod.p3 .lb-plinth { height: 46px; background: linear-gradient(#f3c28f, #c77a3a); }
.lb-pod.me .lb-plinth { box-shadow: 0 0 0 3px #43a047, 0 0 18px #43a04788; }
.lb-you { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: #43a047; color: #fff; font: 800 9.5px/15px var(--font); font-style: normal; vertical-align: 1px; }
.lb-pod .lb-you { position: absolute; top: -6px; right: 4px; }
.lb-dish { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; } .lb-pod .lb-dish { width: 52px; height: 52px; }
.lb-dish.none { display: inline-grid; place-items: center; border-radius: 50%; background: #efe3c2; color: #a8997c; font: 800 18px var(--display); }

.lb-list { display: grid; gap: 6px; }
.lb-row { display: grid; grid-template-columns: 46px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 54px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid #e6d0a0; background: #fff; box-shadow: 0 2px 0 #e6d0a0; }
.lb-row:not(:has(.lb-dish)) { grid-template-columns: 46px minmax(0, 1fr) auto; }
.lb-row.me { background: #e6f7df; border-color: #43a047; box-shadow: 0 2px 0 #2f8034; }
.lb-pos { font: 800 18px var(--display); color: #b07f00; text-align: center; }
.lb-main { min-width: 0; } .lb-main strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-main small { display: block; font-size: 11px; color: #7a6a5a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font: 800 14px var(--display); color: #a5480a; white-space: nowrap; }
.lb-tier { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 6px; font: 800 9.5px/15px var(--font); color: #fff; }
.lb-tier.t1 { background: linear-gradient(90deg, #ff5f6d, #ffc371); } .lb-tier.t2 { background: #e6a400; } .lb-tier.t3 { background: #8a3fc9; } .lb-tier.t4 { background: #1f6fc4; } .lb-tier.t5 { background: #8a8f98; }
.lb-assets { display: block; margin: 10px auto 0; }
.lb-foot { flex: 0 0 auto; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: #fdefd2; border-top: 2px solid #e6d0a0; display: grid; gap: 8px; }
.lb-mine { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: #e6f7df; border: 1.5px solid #43a047; }
.lb-mine.none { display: block; background: #fff; border-color: #e6d0a0; font-size: 12.5px; color: #5a4a3a; }
.lb-mine-rank { font: 800 22px var(--display); color: #2f8034; min-width: 52px; text-align: center; } .lb-mine > div { flex: 1; min-width: 0; } .lb-mine b { display: block; font-size: 13.5px; } .lb-mine small { font-size: 11.5px; color: #3d5a2a; }
.lb-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .lb-pager .btn { min-height: 40px; min-width: 96px; } .lb-pager span { font-size: 13px; color: #5a4a3a; }
.lb-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 16px; text-align: center; color: #7a6a5a; } .lb-empty.bad { color: #c2352f; }
.lb-skel { display: grid; gap: 8px; } .lb-skel i { display: block; height: 52px; border-radius: 12px; background: linear-gradient(90deg, #f3e6c8, #fbf1d6, #f3e6c8); background-size: 200% 100%; animation: lbSk 1.2s linear infinite; }
@keyframes lbSk { to { background-position: -200% 0; } }
@media (max-width: 540px) {
  .modal.lb-modal { height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .lb-title { font-size: 19px; } .lb-tabs button span { display: none; } .lb-tabs button { flex: 1 0 44px; padding: 0 6px; } .lb-tabs button .pxi { height: 20px; }
  .lb-row { grid-template-columns: 38px auto minmax(0, 1fr) auto; gap: 6px; } .lb-row:not(:has(.lb-dish)) { grid-template-columns: 38px minmax(0, 1fr) auto; } .lb-score { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .lb-trophy, .lb-pod.p1 .lb-crown .pxi, .lb-skel i { animation: none; } }

/* Huy hiệu top 3: kim sắc, bạch ngân và đồng hỏa; dùng chung ở BXH, túi đồ và chat. */
.ttl.rank-title { --rt-light: #fff0a2; --rt-edge: #e5b33b; --rt-ink: #ffeb94; --rt-glow: #ffcc3c55; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; box-sizing: border-box; margin: 3px 2px; padding: 5px 8px 5px 6px; border: 1.5px solid var(--rt-edge); border-radius: 7px; background: linear-gradient(135deg, #443315, #1e1722 60%, #54401c); color: var(--rt-ink); box-shadow: inset 0 1px 0 #ffffff44, inset 0 -1px 0 #0008, 0 2px 0 #231521, 0 0 10px var(--rt-glow); font: 900 11.5px/1.3 var(--font, 'Be Vietnam Pro', sans-serif); text-shadow: 0 1px 1px #000; white-space: normal; overflow: hidden; vertical-align: middle; }
.ttl.rank-title.rt-2 { --rt-light: #f3ffff; --rt-edge: #9ee7f5; --rt-ink: #d7f8ff; --rt-glow: #76dcf044; background: linear-gradient(135deg, #304954, #172134 60%, #385363); }
.ttl.rank-title.rt-3 { --rt-light: #ffd5a8; --rt-edge: #eaa264; --rt-ink: #ffcf9c; --rt-glow: #ed843e44; background: linear-gradient(135deg, #5a3223, #271820 60%, #633d28); }
.ttl.rank-title::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 0; background: linear-gradient(110deg, transparent 32%, #ffffff25 48%, #ffffff66 50%, transparent 68%); transform: translateX(-130%); animation: rankTitleShimmer 5.8s ease-in-out infinite; }
.ttl.rank-title::after { content: ''; position: absolute; pointer-events: none; inset: 2px; border: 1px solid #ffffff18; border-radius: 4px; }
.rank-title .rank-title-emblem { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; color: var(--rt-light); filter: drop-shadow(0 0 3px var(--rt-glow)); }
.rank-title-emblem .pxi, .rank-title-emblem svg { width: 16px; height: auto; max-height: 16px; }
.rt-2 .rank-title-emblem .pxi { filter: grayscale(1) brightness(1.7) sepia(.25) hue-rotate(125deg); }
.rt-3 .rank-title-emblem .pxi { filter: sepia(.8) saturate(1.1) hue-rotate(335deg); }
.rank-title .rank-title-name { min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.rank-title .rank-title-position { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 14px; height: 16px; border-left: 1px solid #ffffff33; padding-left: 5px; font: 900 10px/1 var(--font, sans-serif); color: var(--rt-light); }
.ttl.rank-title.sm { padding: 3px 6px 3px 4px; gap: 4px; font-size: 10.5px; }
.ttl.rank-title.sm .rank-title-emblem { width: 14px; height: 14px; } .ttl.rank-title.sm .rank-title-emblem .pxi, .ttl.rank-title.sm .rank-title-emblem svg { width: 13px; max-height: 13px; }
@keyframes rankTitleShimmer { 0%, 68% { transform: translateX(-130%); } 91%, 100% { transform: translateX(130%); } }
.lb-pod .rank-title { width: 100%; min-height: 40px; margin: 5px 0 3px; padding: 5px; font-size: 10.5px; }
.lb-pod .rank-title-name { white-space: normal; } .lb-pod .rank-title-position { display: none; }
.lb-pod.p1 .rank-title { box-shadow: inset 0 1px 0 #fff9, 0 2px 0 #231521, 0 0 15px #e4a63077; }
.lb-main .rank-title { margin-left: 0; } .lb-mine .rank-title { margin-left: 0; } .lb-mine small { display: block; }
.lb-daily { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 8px; padding: 8px 12px; background: linear-gradient(100deg, #203b32, #142b29); border-bottom: 2px solid #d4ad4c; color: #fff0c1; }
.lb-daily[hidden] { display: none; } .lb-daily b, .lb-daily span { display: block; }
.lb-daily b { font: 800 11.5px/1.3 var(--font); } .lb-daily span { margin-top: 3px; font-size: 10.5px; color: #d2e9d6; }
.lb-daily small { grid-column: 1 / -1; font-size: 10px; color: #d2e9d6; }
.lb-countdown { min-width: 72px; padding: 6px 7px; border-radius: 7px; border: 1px solid #cfad55; background: #101f22; color: #ffe486; text-align: center; font: 800 14px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.lb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; }
.lb-tabs button { min-width: 0; min-height: 44px; padding: 2px 5px; white-space: normal; line-height: 1.25; }
.lb-tabs button:focus-visible { outline: 3px solid #2064a2; outline-offset: 2px; }
.lb-tabs button [aria-hidden] { flex-shrink: 0; }
@media (max-width: 540px) {
  .lb-tabs { gap: 5px; padding: 7px 9px; } .lb-tabs button { gap: 4px; font-size: 10.5px; }
  .lb-tabs button span { display: inline; } .lb-tabs button .pxi { height: 15px; }
  .lb-podium { gap: 6px; } .lb-pod .rank-title { min-height: 43px; padding: 4px 3px; gap: 3px; font-size: 9px; }
  .lb-pod .rank-title-emblem { width: 13px; height: 13px; } .lb-pod .rank-title-emblem .pxi { width: 12px; max-height: 12px; }
  .lb-pod strong { font-size: 12px; } .lb-daily { padding: 7px 10px; gap: 3px 6px; }
  .lb-daily b { font-size: 10.5px; } .lb-daily span { font-size: 9.5px; } .lb-countdown { min-width: 63px; padding: 6px 4px; font-size: 12px; }
}
@media (max-height: 450px) and (min-width: 541px) { .lb-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lb-tabs button { font-size: 10px; } .lb-daily { padding-top: 4px; padding-bottom: 4px; } }
@media (prefers-reduced-motion: reduce) { .ttl.rank-title::before { animation: none; transform: none; opacity: 0; } }
body.lowfx .ttl.rank-title::before { animation: none; opacity: 0; }
.rank-title .rank-title-countdown { flex: 0 0 auto; display: inline-block; border-left: 1px solid #ffffff44; padding-left: 5px; color: #ffe4b5; font-size: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rank-title.rank-title-grace { border-style: dashed; }

/* Keep the full heading and podium badges readable on short phone screens. */
@media (max-width: 540px) {
  .lb-head { gap: 7px; padding: 7px 9px; }
  .lb-titles small { font-size: 8px; letter-spacing: .7px; }
  .lb-title { font-size: clamp(15px, 4.2vw, 19px); line-height: 1.15; white-space: normal; overflow: visible; text-overflow: clip; }
  .lb-trophy .pxi { height: 27px; }
  .lb-daily { padding: 5px 9px; }
  .lb-daily b { font-size: 10px; } .lb-daily span { font-size: 9.5px; margin-top: 2px; }
  .lb-daily small { font-size: 9px; }
  .lb-body { padding: 7px 8px; }
  .lb-foot { padding: 6px 8px; gap: 5px; }
  .lb-mine { padding: 4px 7px; gap: 5px; }
  .lb-mine-rank { min-width: 35px; font-size: 19px; }
  .lb-mine b { font-size: 11px; } .lb-mine small { font-size: 10px; }
  .lb-mine .rank-title { font-size: 9px; padding: 2px 4px; margin: 1px 0; }
  .lb-pager .btn { min-width: 76px; min-height: 44px; }
}
@media (max-height: 600px) {
  .lb-podium { margin: 2px 0 8px; }
  .lb-crown .pxi { height: 20px; } .lb-pod.p1 .lb-crown .pxi { height: 24px; }
  .lb-pod .rank-title { min-height: 36px; margin-top: 2px; }
  .lb-pod .lb-dish { width: 28px; height: 28px; }
  .lb-pod.p1 .lb-plinth { height: 44px; } .lb-pod.p2 .lb-plinth { height: 32px; } .lb-pod.p3 .lb-plinth { height: 25px; }
}
@media (max-height: 450px) and (min-width: 541px) {
  .lb-head { padding: 4px 9px; }
  .lb-trophy .pxi { height: 25px; } .lb-title { font-size: 17px; }
  .lb-titles small { font-size: 8px; }
  .lb-tabs { padding: 4px 8px; gap: 4px; } .lb-tabs button { min-height: 44px; }
  .lb-daily { padding: 4px 10px; } .lb-daily small { display: none; }
  .lb-body { padding: 4px 8px; }
  .lb-foot { padding: 5px 8px; gap: 4px; }
  .lb-mine { padding: 4px 8px; gap: 5px; }
  .lb-mine > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .lb-mine b { font-size: 11px; } .lb-mine-rank { min-width: 38px; font-size: 18px; }
  .lb-mine .rank-title { margin: 0; padding: 2px 5px; font-size: 9px; }
  .lb-mine small { font-size: 10px; }
  .lb-pager .btn { min-height: 44px; }
  .lb-podium { align-items: start; }
  .lb-plinth { min-height: 0; flex: none; font-size: 18px; line-height: 1; }
  .lb-pod.p1 .lb-plinth { height: 28px; } .lb-pod.p2 .lb-plinth { height: 20px; } .lb-pod.p3 .lb-plinth { height: 17px; }
}

/* Optional guest-account linking; reuse the standard compact choice dialog. */
.account-link-reminder { width:min(480px,calc(100vw - 24px)); border-radius:4px; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.account-link-reminder h2 { font-size:22px; }
.account-link-reminder p { font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.account-link-reminder .account-link-milestone { margin:0 0 12px; color:var(--green-d); font-weight:800; }
.account-link-benefits { padding:8px 12px; border:2px solid var(--line); border-radius:4px; background:var(--paper-2); }
.account-link-benefits p { margin:4px 0 12px; }
.account-link-benefits p:last-child { margin-bottom:4px; }
.account-link-reminder .account-link-status { color:var(--ink-2); font-size:12px; }
.account-link-reminder .btn { min-height:44px; border-radius:4px; }
@media(max-width:420px) { .account-link-reminder .btn-row { flex-direction:column; } }