:root{
    --primary:#594FBF;
    --dark:#2D1F7B;
    --light:#F7F6FA;
    --gold:#FFC94D;
    --muted:#8d85c9;
    --lav:#A79FE0;
    --line:rgba(247,246,250,.12);
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{min-height:100%}
  body{
    background:
      radial-gradient(ellipse at 20% -10%,rgba(122,111,227,.35),transparent 55%),
      radial-gradient(ellipse at 90% 110%,rgba(89,79,191,.3),transparent 50%),
      var(--dark);
    background-attachment:fixed;
    color:var(--light);
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  }
  .hidden{display:none !important}
  .muted{color:var(--muted);font-size:13px;font-weight:600;line-height:1.45}

  #dash{max-width:1060px;margin:0 auto;padding:18px 16px calc(28px + env(safe-area-inset-bottom));min-height:100dvh;display:flex;flex-direction:column}

  /* ---------- Header ---------- */
  header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
  .brandRow{display:flex;align-items:center;gap:10px}
  .logoPaw{width:40px;height:40px;border-radius:13px;flex:none;
    background:linear-gradient(150deg,#6c61de,var(--primary) 60%,#463c9e);
    display:flex;align-items:center;justify-content:center;font-size:20px;
    box-shadow:0 6px 16px rgba(20,12,60,.55),inset 0 1px 0 rgba(255,255,255,.25)}
  .brandName{font-size:11px;font-weight:800;letter-spacing:4px;color:#B9B2EC}
  .gameName{font-size:18px;font-weight:900;line-height:1.05;
    background:linear-gradient(180deg,#fff,#CFC9F5);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent}
  .hdrRight{display:flex;align-items:center;gap:12px}
  #whoami{font-size:12px;font-weight:700;color:var(--lav);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .playBtn{display:inline-block;cursor:pointer;text-decoration:none;
    font-family:inherit;font-weight:900;font-size:13px;letter-spacing:2px;color:var(--light);
    background:linear-gradient(180deg,#7A6FE3,var(--primary) 55%,#4a41a5);
    border:none;border-radius:999px;padding:10px 26px;
    box-shadow:0 8px 22px rgba(89,79,191,.45),inset 0 1px 0 rgba(255,255,255,.25);
    transition:transform .12s}
  .playBtn:hover{transform:translateY(-2px)}
  .playBtn:active{transform:translateY(1px) scale(.97)}
  .playBtn.big{margin-top:18px;font-size:15px;padding:13px 42px}

  /* ---------- Layout: sidebar + content ---------- */
  .layout{display:flex;gap:16px;align-items:flex-start;flex:1}
  #sidebar{flex:none;width:212px;display:flex;flex-direction:column;gap:6px;
    background:linear-gradient(150deg,#6c61de22,#4a41a522);
    border:1.5px solid rgba(247,246,250,.14);border-radius:22px;padding:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
  .navBtn{display:flex;align-items:center;gap:10px;cursor:pointer;font-family:inherit;
    font-weight:800;font-size:13px;letter-spacing:.6px;color:var(--lav);text-align:left;
    background:transparent;border:1px solid transparent;border-radius:14px;padding:11px 13px;
    transition:color .15s,background .15s,border-color .15s;white-space:nowrap}
  .navBtn .ico{font-size:16px;width:22px;text-align:center;flex:none}
  .navBtn:hover{background:rgba(247,246,250,.08)}
  .navBtn.sel{color:#FFE29A;background:rgba(255,211,92,.13);border-color:rgba(255,211,92,.4)}

  #content{flex:1;min-width:0}
  .panel{
    background:linear-gradient(150deg,#6c61de22,#4a41a522);
    border:1.5px solid rgba(247,246,250,.14);border-radius:22px;
    padding:22px 22px 20px;box-shadow:0 20px 60px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
  .panel h2{font-size:20px;font-weight:900;letter-spacing:.5px;margin-bottom:6px}
  .panel > .muted{margin-bottom:14px}
  .panelBody{margin-top:10px;font-size:13px;color:#CFC9F5;font-weight:600}
  .panelErr{padding:22px 0;color:#FF9D9D;font-weight:700;font-size:13px}
  .emptyNote{padding:22px 0;color:var(--muted);font-weight:600;font-size:13px}

  /* ---------- Overview stat cards ---------- */
  .statGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
  .statCard{background:rgba(247,246,250,.06);border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px}
  .statCard .k{font-size:10px;font-weight:900;letter-spacing:1.5px;color:var(--lav);margin-bottom:6px}
  .statCard .v{font-size:22px;font-weight:900;color:var(--light);font-variant-numeric:tabular-nums}
  .statCard .v .unit{font-size:12px;font-weight:800;color:var(--muted);margin-left:4px}
  .statCard .sub{margin-top:4px;font-size:11px;font-weight:700;color:var(--muted)}
  .statCard.gold .v{color:var(--gold)}

  /* ---------- Tables ---------- */
  .tableWrap{overflow-x:auto;border-radius:16px;border:1px solid rgba(247,246,250,.1)}
  table{width:100%;border-collapse:collapse;font-size:13.5px}
  thead th{font-size:10px;font-weight:900;letter-spacing:2px;color:var(--lav);text-align:left;
    padding:10px 12px;border-bottom:1px solid var(--line);background:rgba(247,246,250,.04);white-space:nowrap}
  tbody td{padding:9px 12px;border-bottom:1px solid rgba(247,246,250,.06);text-align:left;font-weight:700;color:#CFC9F5}
  tbody tr:last-child td{border-bottom:none}
  tbody tr:hover td{background:rgba(247,246,250,.04)}
  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  td.when{white-space:nowrap;color:var(--muted);font-size:12px}
  .amt.plus{color:#8FE3A5;font-weight:900}
  .amt.minus{color:#FF9D9D;font-weight:900}
  .catTag{display:inline-block;font-size:9px;font-weight:900;letter-spacing:.5px;color:var(--lav);
    background:rgba(247,246,250,.08);border:1px solid rgba(247,246,250,.2);
    border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:1px;white-space:nowrap}

  /* ---------- Pets tab ---------- */
  .petCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
  .petCard{background:rgba(247,246,250,.06);border:1px solid var(--line);border-radius:16px;padding:14px}
  .petCard.dead{opacity:.75}
  .petHead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .petEmoji{font-size:26px}
  .petName{font-size:15px;font-weight:900;color:var(--light)}
  .petSub{font-size:11px;font-weight:700;color:var(--muted)}
  .petStatus{margin-left:auto;font-size:10px;font-weight:900;letter-spacing:1px;border-radius:999px;padding:3px 9px;white-space:nowrap}
  .petStatus.alive{color:#8FE3A5;background:rgba(143,227,165,.12);border:1px solid rgba(143,227,165,.35)}
  .petStatus.dead{color:#D9D6EE;background:rgba(217,214,238,.1);border:1px solid rgba(217,214,238,.3)}
  .miniStats{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:8px}
  .miniStat{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted)}
  .miniMeter{flex:1;height:5px;border-radius:99px;background:rgba(247,246,250,.12);overflow:hidden}
  .miniMeter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7A6FE3,#9d92f0)}
  .miniMeter i.low{background:linear-gradient(90deg,#e36a6a,#f0928f)}
  .petFoot{margin-top:10px;font-size:11px;font-weight:700;color:var(--muted);line-height:1.5}

  /* ---------- Leaderboard tab (shared look with leaderboard.html) ---------- */
  .lbTabs{display:flex;gap:8px;margin-bottom:10px}
  .lbTab{flex:1;cursor:pointer;font-family:inherit;font-weight:800;font-size:11px;letter-spacing:1.2px;
    color:var(--lav);background:rgba(247,246,250,.07);border:1px solid rgba(247,246,250,.15);
    border-radius:999px;padding:8px 4px;transition:color .15s,background .15s,border-color .15s}
  .lbTab:hover{background:rgba(247,246,250,.12)}
  .lbTab.sel{color:#FFE29A;background:rgba(255,211,92,.13);border-color:rgba(255,211,92,.4)}
  .species{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
  .chip{cursor:pointer;font-family:inherit;font-size:15px;line-height:1;
    background:rgba(247,246,250,.07);border:1px solid rgba(247,246,250,.15);
    border-radius:999px;padding:7px 11px;transition:background .15s,border-color .15s}
  .chip:hover{background:rgba(247,246,250,.12)}
  .chip.sel{background:rgba(255,211,92,.16);border-color:rgba(255,211,92,.45)}
  .chip .lbl{font-size:10px;font-weight:900;letter-spacing:1px;color:var(--lav);margin-left:4px;vertical-align:2px}
  .chip.sel .lbl{color:#FFE29A}
  td.rank{width:44px;color:var(--lav);font-variant-numeric:tabular-nums;white-space:nowrap}
  tr.top1 td.rank{color:#FFD35C}
  tr.top2 td.rank{color:#D9D6EE}
  tr.top3 td.rank{color:#E2A05C}
  tr.top1 td{background:rgba(255,201,77,.10)}
  tr.top2 td{background:rgba(217,214,238,.08)}
  tr.top3 td{background:rgba(226,160,92,.08)}
  tr.me td{background:rgba(255,201,77,.18);border-top:1px solid rgba(255,201,77,.55);border-bottom:1px solid rgba(255,201,77,.55)}
  tr.me:hover td{background:rgba(255,201,77,.24)}
  td.pet{width:38px;font-size:17px;text-align:center}
  td.life{text-align:right;font-variant-numeric:tabular-nums;font-weight:900;color:var(--light);white-space:nowrap}
  th.life{text-align:right}
  .st{display:block;font-size:10px;font-weight:700;color:var(--muted)}
  .owner{display:block;font-size:11px;font-weight:700;color:var(--muted)}
  .mode{display:inline-block;margin-left:6px;font-size:9px;font-weight:900;letter-spacing:.5px;
    vertical-align:1px;color:var(--lav);background:rgba(247,246,250,.08);
    border:1px solid rgba(247,246,250,.2);border-radius:999px;padding:1px 7px;white-space:nowrap}
  .mode.hard{color:#FF9D9D;border-color:rgba(255,157,157,.4);background:rgba(255,157,157,.1)}
  .lbMeta{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--muted);min-height:15px}

  /* ---------- Achievements ---------- */
  .achCount{font-size:13px;font-weight:900;letter-spacing:.6px;color:#FFE29A;margin-bottom:12px}
  .badgeGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
  .badge{cursor:pointer;font-family:inherit;text-align:center;padding:16px 8px 13px;
    background:rgba(255,211,92,.10);border:1px solid rgba(255,211,92,.4);border-radius:16px;
    transition:transform .12s,background .15s}
  .badge:hover{transform:translateY(-2px);background:rgba(255,211,92,.16)}
  .badgeIco{font-size:32px;line-height:1;margin-bottom:8px;
    filter:drop-shadow(0 4px 10px rgba(255,201,77,.35))}
  .badgeName{font-size:11px;font-weight:900;letter-spacing:.4px;color:var(--light);line-height:1.3}
  .badge.locked{background:rgba(247,246,250,.05);border-color:var(--line)}
  .badge.locked:hover{background:rgba(247,246,250,.09)}
  .badge.locked .badgeIco{color:var(--muted);font-weight:900;font-size:28px;filter:none;opacity:.7}
  .badge.locked .badgeName{color:var(--muted)}

  .achModalWrap{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
    background:rgba(20,12,60,.6);backdrop-filter:blur(4px);padding:20px}
  .achModal{max-width:320px;width:100%;text-align:center;padding:26px 22px 20px;
    background:linear-gradient(150deg,#4d43ad,#332a7e);
    border:1.5px solid rgba(255,211,92,.45);border-radius:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.55)}
  .achModal.locked{border-color:rgba(247,246,250,.2)}
  .achModalIco{font-size:52px;line-height:1;margin-bottom:12px;
    filter:drop-shadow(0 6px 16px rgba(255,201,77,.4))}
  .achModal.locked .achModalIco{color:var(--muted);font-weight:900;filter:none;opacity:.7}
  .achModalName{font-size:18px;font-weight:900;letter-spacing:.6px;margin-bottom:8px;color:#FFE29A}
  .achModal.locked .achModalName{color:var(--light)}
  .achModal .muted{margin-bottom:12px}
  .achModalWhen{font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--lav);margin-bottom:16px}
  .achModalClose{cursor:pointer;font-family:inherit;font-weight:900;font-size:12px;letter-spacing:1.5px;
    color:var(--light);background:linear-gradient(180deg,#7A6FE3,var(--primary) 55%,#4a41a5);
    border:none;border-radius:999px;padding:9px 30px;
    box-shadow:0 8px 22px rgba(89,79,191,.45),inset 0 1px 0 rgba(255,255,255,.25)}
  .achModalClose:active{transform:translateY(1px) scale(.97)}

  /* ---------- Mobile: sidebar becomes top tabs ---------- */
  @media (max-width:760px){
    #dash{padding:14px 10px calc(22px + env(safe-area-inset-bottom))}
    .layout{flex-direction:column;gap:12px}
    #sidebar{width:100%;flex-direction:row;overflow-x:auto;padding:8px;border-radius:18px;
      scrollbar-width:none}
    #sidebar::-webkit-scrollbar{display:none}
    .navBtn{flex:none;padding:9px 12px;font-size:12px}
    .panel{padding:16px 14px 14px;border-radius:18px}
    #whoami{display:none}
  }