:root {
  --cream: #FFF4E3;
  --card: #FFFFFF;
  --line: #EBD9BF;
  --ink: #3B2416;
  --muted: #7A5A44;
  --brown: #A0582A;
  --brown-dk: #6E3615;
  --pink: #C93D63;
  --pink-dk: #8E2443;
  --grid: #2B2838;
  --easy: #3E8E5A;   --easy-dk: #2A6640;
  --normal: #B8691F; --normal-dk: #84480F;
  --hard: #6B4FB3;   --hard-dk: #4A3383;
  --extreme: #2E4A7A; --extreme-dk: #1C3054;
  --display: 'Baloo 2', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --body: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 700;
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; padding: 0; }
button:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
svg { display: block; }

#app { max-width: 520px; margin: 0 auto; min-height: 100%; }
.screen {
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 20px);
  display: flex; flex-direction: column; gap: 14px;
}
.screen[hidden] { display: none; }

/* top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; }
.topbar h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 26px; }
.round-btn, .spacer { width: 44px; height: 44px; flex: none; }
.round-btn { border-radius: 50%; background: var(--card); border: 2px solid var(--line); display: grid; place-items: center; }
.round-btn svg { width: 22px; height: 22px; }
.chip { display: flex; align-items: center; gap: 8px; background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 5px; font-weight: 800; font-size: 15px; min-height: 44px; }
.chip .av { width: 32px; height: 32px; }
.av { border-radius: 50%; background: #FFE2C4; display: grid; place-items: center; flex: none; }
.av svg { width: 88%; }
.av.bread svg { width: 72%; }
.pill { display: flex; align-items: center; gap: 4px; background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: 4px 10px; font-weight: 800; font-size: 15px; }
.pill svg { width: 20px; height: 20px; }

/* home */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-art { position: relative; width: 300px; height: 134px; }
.hero-dog { position: absolute; left: -6px; top: 0; width: 214px; }
.hero-bread { position: absolute; right: -4px; top: 30px; width: 84px; animation: bob 2.4s ease-in-out infinite; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 52px; line-height: 1; color: #8A4B22; letter-spacing: -.5px; }
.hero p { margin: 6px 0 0; font-size: 15px; color: var(--muted); }

.continue-btn { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 18px; border-radius: 20px; border: 2px dashed var(--brown); background: var(--card); text-align: left; }
.continue-btn b { font-family: var(--display); font-weight: 800; font-size: 19px; display: block; }
.continue-btn small { font-size: 13px; color: var(--muted); }
.continue-btn svg { width: 30px; height: 30px; }

.big-btn { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 0 18px; border-radius: 20px; color: #fff; text-align: left; transition: transform .08s; }
.big-btn:active, .tier:active, .lvl:active, .toolbar button:active, .card .primary:active { transform: translateY(3px); }
.big-btn .ico svg { width: 30px; height: 30px; }
.big-btn .txt { flex: 1; display: flex; flex-direction: column; }
.big-btn b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.1; }
.big-btn small { font-size: 13px; opacity: .92; }
.brown { background: var(--brown); box-shadow: 0 5px 0 var(--brown-dk); }
.pink { background: var(--pink); box-shadow: 0 5px 0 var(--pink-dk); }
.badge { background: #fff; color: var(--pink); font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.badge:empty { display: none; }

.label { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
.tier-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tier { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; border-radius: 16px; color: #fff; font-weight: 800; font-size: 14px; }
.tier small { font-size: 12px; opacity: .9; }
.t-easy { background: var(--easy); box-shadow: 0 4px 0 var(--easy-dk); }
.t-normal { background: var(--normal); box-shadow: 0 4px 0 var(--normal-dk); }
.t-hard { background: var(--hard); box-shadow: 0 4px 0 var(--hard-dk); }
.t-extreme { background: var(--extreme); box-shadow: 0 4px 0 var(--extreme-dk); }

.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.soft-btn { min-height: 50px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.soft-btn svg { width: 20px; height: 20px; }

/* adventure */
.worlds { display: flex; flex-direction: column; gap: 14px; }
.world { color: #fff; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.world.locked { opacity: .6; }
.world-head { display: flex; justify-content: space-between; align-items: center; }
.world-head b { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.1; display: block; }
.world-head small { font-size: 12px; letter-spacing: .5px; opacity: .88; }
.world-head span { font-size: 13px; font-weight: 800; }
.lvls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lvl { min-height: 52px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 800; font-size: 17px; background: var(--cream); color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.lvl .mini { display: flex; gap: 1px; }
.lvl .mini svg { width: 10px; height: 10px; }
.lvl.cur { background: #fff; color: var(--normal-dk); border: 3px solid #FFD98A; box-shadow: 0 0 0 3px rgba(255,217,138,.45); }
.lvl.cur small { font-size: 9px; letter-spacing: 1px; }
.lvl:disabled { background: rgba(255,255,255,.18); color: rgba(255,255,255,.75); border: 2px dashed rgba(255,255,255,.45); box-shadow: none; cursor: default; }

/* game */
.gtitle { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.gtitle b { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gtitle small { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.gtitle small.easy { color: var(--easy-dk); } .gtitle small.normal { color: var(--normal-dk); }
.gtitle small.hard { color: var(--hard-dk); } .gtitle small.extreme { color: var(--extreme-dk); }
.lives { display: flex; gap: 2px; }
.lives svg { width: 30px; height: 15px; transition: opacity .3s, filter .3s; }
.lives svg.gone { opacity: .25; filter: grayscale(1); }
.lives svg.pop { animation: pop .5s; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stats span { background: var(--card); border-radius: 14px; padding: 8px 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.stats svg { width: 18px; height: 18px; }

.board-card { background: #fff; border-radius: 20px; padding: 7px; box-shadow: 0 2px 10px rgba(40,38,52,.10); align-self: center; }
#board {
  --size: min(calc(100vw - 46px), calc(100dvh - 400px), 470px);
  width: var(--size); height: var(--size);
  display: grid; border: 3px solid var(--grid); border-radius: 12px; overflow: hidden; background: var(--grid);
  touch-action: none;
}
.cell { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; }
.cell .x { width: 36%; height: 36%; }
.cell .piece { display: block; width: 84%; animation: drop .25s cubic-bezier(.3,1.6,.6,1); }
.cell .piece.bread { width: 74%; }
.cell.bad { animation: shake .4s; }
.cell.nope { animation: shake .3s; }
.cell.given::after { content: ''; position: absolute; right: 6%; top: 6%; width: 22%; height: 22%; border-radius: 50%; background: #FFD166; box-shadow: 0 0 0 1.5px #fff; }
.cell.bad::after { content: ''; position: absolute; inset: 0; background: rgba(201,61,99,.45); animation: fade .7s forwards; }
.cell.hint::before { content: ''; position: absolute; width: 62%; height: 62%; border-radius: 50%; animation: glow 1.4s ease-in-out infinite; pointer-events: none; }

.mascot { display: flex; align-items: flex-end; gap: 10px; min-height: 70px; }
#mascotImg { width: 66px; flex: none; }
#mascotImg.wiggle { animation: wiggle .5s; }
#bubble { position: relative; flex: 1; margin: 0 0 12px; background: var(--card); border: 2px solid var(--line); border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-size: 15px; line-height: 1.35; }
#bubble b { font-family: var(--display); font-weight: 800; color: var(--pink); }

.toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.toolbar button { min-height: 64px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 800; font-size: 13px; }
.toolbar button em { font-style: normal; }
.toolbar svg { width: 22px; height: 22px; }
.toolbar .hint { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 4px 0 var(--pink-dk); }
.toolbar .hint:disabled { background: #E6D6BC; border-color: #E6D6BC; box-shadow: none; color: var(--muted); }
.toolbar [aria-pressed="true"] { border-color: var(--easy); background: #E3F4E8; color: #1F5A33; }

/* family */
.daily-card { background: var(--pink); color: #fff; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 5px 0 var(--pink-dk); }
.dc-head { display: flex; justify-content: space-between; align-items: center; }
.dc-head b { font-family: var(--display); font-weight: 800; font-size: 19px; }
.dc-head small { font-size: 13px; opacity: .9; }
#dailyRank { display: flex; flex-direction: column; gap: 6px; }
.rank { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.14); border-radius: 14px; padding: 8px 10px; }
.rank .pos { font-family: var(--display); font-weight: 800; font-size: 18px; width: 18px; }
.rank .nm { flex: 1; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .ls { display: flex; gap: 1px; } .rank .ls svg { width: 14px; height: 14px; }
.rank .tm { font-family: var(--display); font-weight: 800; font-size: 18px; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.rank.muted .tm { font-family: var(--body); font-size: 13px; opacity: .85; }
.white-btn { min-height: 44px; border-radius: 14px; background: #fff; color: var(--pink); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.white-btn svg { width: 18px; height: 18px; }
#bakerList { display: flex; flex-direction: column; gap: 10px; }
.baker { background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; }
.baker.me { border-color: var(--brown); }
.baker .av { width: 48px; height: 48px; }
.baker .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.baker .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.baker .top b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baker .top span { font-size: 14px; color: var(--normal-dk); white-space: nowrap; }
.bests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.bests div { background: var(--cream); border-radius: 8px; padding: 3px 0; display: flex; flex-direction: column; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.bests small { font-size: 10px; color: var(--muted); }
.dashed-btn { min-height: 50px; border-radius: 16px; border: 2px dashed var(--brown); color: #8A4B22; font-weight: 800; font-size: 15px; }

/* how */
.how { display: flex; flex-direction: column; gap: 10px; }
.rule { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border-radius: 16px; padding: 12px; }
.rule b { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brown); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 18px; }
.rule b svg { width: 22px; height: 22px; }
.rule b.bone-b, .rule b.loaf-b, .rule b.bread-b { background: #FFE2C4; }
.rule p { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 700; }
.ladder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ladder div { color: #fff; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; }
.ladder small { opacity: .9; font-size: 12px; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(59,36,22,.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; animation: fade-in .2s; }
.modal[hidden] { display: none; }
.card { width: 100%; max-width: 400px; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--cream); border-radius: 28px; padding: 22px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 8px 0 var(--brown-dk); animation: rise .3s cubic-bezier(.3,1.4,.6,1); text-align: center; }
.card h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; color: #8A4B22; }
.card h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 26px; }
.card p { margin: 0; font-size: 15px; color: var(--muted); }
.card .art { display: flex; align-items: flex-end; gap: 4px; }
.card .art .d { width: 190px; animation: hop .9s ease-in-out infinite; }
.card .art .b { width: 80px; animation: hop .9s ease-in-out .45s infinite; }
.card .loaves { display: flex; gap: 8px; align-items: flex-end; }
.card .loaves svg { width: 56px; height: 56px; }
.card .loaves svg:nth-child(2) { width: 70px; height: 70px; }
.card .loaves svg { animation: pop .5s backwards; }
.card .loaves svg:nth-child(2) { animation-delay: .15s; } .card .loaves svg:nth-child(3) { animation-delay: .3s; }
.card .baked { font-family: var(--display); font-weight: 800; font-size: 17px; color: #8A4B22; margin-top: -6px; }
.tiles { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tiles div { background: #fff; border-radius: 16px; padding: 10px 0; display: flex; flex-direction: column; align-items: center; }
.tiles small { font-size: 12px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
.tiles b { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.newbest { background: #FFD98A; color: var(--normal-dk); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 800; }
.card .primary { width: 100%; min-height: 58px; border-radius: 18px; background: var(--brown); color: #fff; font-family: var(--display); font-weight: 800; font-size: 21px; box-shadow: 0 5px 0 var(--brown-dk); display: flex; align-items: center; justify-content: center; gap: 10px; }
.card .primary svg { width: 20px; height: 20px; }
.card .row { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card .row.one { grid-template-columns: 1fr; }
.card .secondary { min-height: 50px; border-radius: 16px; border: 2px solid var(--line); background: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.card .secondary svg { width: 18px; height: 18px; }
.card .danger { color: var(--pink); }
.card label { align-self: stretch; text-align: left; font-size: 14px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.card input[type=text] { font: inherit; font-size: 18px; font-weight: 800; color: var(--ink); padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; -webkit-user-select: text; user-select: text; }
.card input[type=text]:focus { outline: none; border-color: var(--brown); }
.pick { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pick button { border: 3px solid var(--line); background: #fff; border-radius: 18px; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; }
.pick button[aria-pressed="true"] { border-color: var(--brown); background: #FFE2C4; }
.pick svg { height: 54px; width: auto; }
.plist { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.plist button { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 8px 12px; font-size: 17px; font-weight: 800; text-align: left; }
.plist button.me { border-color: var(--brown); background: #FFE2C4; }
.plist .av { width: 40px; height: 40px; }

/* loader + fx */
.loader { position: fixed; inset: 0; background: rgba(255,244,227,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 30; }
.loader[hidden] { display: none; }
.loader-bread { width: 90px; animation: hop .7s ease-in-out infinite; }
.loader p { color: var(--muted); }
#fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 25; }
.confetti { position: absolute; top: -20px; animation: fall linear forwards; }

/* bread celebrations */
.super-pop { position: fixed; left: 50%; top: 26%; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; animation: super-pop 1.7s cubic-bezier(.3,1.5,.5,1) forwards; }
.super-pop .sp-bread { width: 92px; display: block; animation: wiggle .5s .2s 2; }
.super-pop b { font-family: var(--display); font-weight: 800; font-size: 30px; color: #fff; background: var(--pink); padding: 4px 18px; border-radius: 999px; box-shadow: 0 4px 0 var(--pink-dk); white-space: nowrap; transform: rotate(-4deg); }
.crumb { position: fixed; border-radius: 40%; pointer-events: none; animation: crumb .8s ease-out forwards; }
.toaster-show { position: fixed; left: 50%; bottom: 18%; width: 200px; height: 300px; transform: translateX(-50%); pointer-events: none; }
.toaster-show .ts-toaster { position: absolute; left: 0; right: 0; bottom: 0; display: block; z-index: 2; animation: rise .3s ease-out; }
.toaster-show .ts-bread { position: absolute; left: 50px; bottom: 60px; width: 100px; display: block; z-index: 1; animation: toast-pop 1.1s cubic-bezier(.2,1.4,.5,1) .15s both; }
.toaster-show .ts-ding { position: absolute; right: -40px; bottom: 150px; font-family: var(--display); font-size: 34px; font-weight: 800; color: var(--pink); transform: rotate(12deg); animation: pop .4s .2s backwards; }
.toaster-show.out { animation: fade .45s forwards; }
.bread-drop { display: block; }
.bread-drop svg { width: 100%; height: auto; }
@keyframes super-pop { 0% { transform: translate(-50%, 30px) scale(.3); opacity: 0; } 18% { transform: translate(-50%, 0) scale(1.08); opacity: 1; } 30% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -40px) scale(.95); opacity: 0; } }
@keyframes crumb { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 20px)) rotate(200deg); opacity: 0; } }
@keyframes toast-pop { 0% { transform: translateY(70px); } 55% { transform: translateY(-150px) rotate(-10deg); } 75% { transform: translateY(-120px) rotate(6deg); } 100% { transform: translateY(-130px) rotate(0); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes hop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes drop { from { transform: scale(.3) translateY(-30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shake { 0%,100% { transform: none; } 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
@keyframes fade { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px) scale(.95); opacity: 0; } }
@keyframes pop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes glow { 0%,100% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pink); } 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 10px rgba(201,61,99,.45); } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* family sync */
.sync-card { display: flex; align-items: center; gap: 10px; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 10px 14px; font-size: 14px; }
.sync-card .st { flex: 1; }
.sync-card .dot { width: 10px; height: 10px; border-radius: 50%; background: #C9B79C; flex: none; }
.sync-card .dot.ok { background: var(--easy); }
.sync-card .dot.offline { background: var(--normal); }
.sync-card .dot.badcode { background: var(--pink); }
.link { color: var(--brown); font-weight: 800; text-decoration: underline; min-height: 44px; padding: 0 4px; }
#fMsg:empty { display: none; }
.adv-card { background: var(--brown); color: #fff; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 5px 0 var(--brown-dk); }
#advRank { display: flex; flex-direction: column; gap: 6px; }
.rank .av { width: 28px; height: 28px; }
.rank .lv { font-size: 12px; opacity: .85; }
.rank.mine { background: #fff; color: var(--ink); }
.rank.mine.muted { background: rgba(255,255,255,.75); }
.empty { margin: 0; font-size: 14px; opacity: .9; }
.card input.initials { text-transform: uppercase; letter-spacing: 6px; font-size: 28px; text-align: center; font-family: var(--display); }
.card .err { color: var(--pink); font-size: 14px; }
.card .err:empty { display: none; }
.topbar .left { display: flex; align-items: center; gap: 8px; min-width: 0; }