body.mobile.gl {
  --gi-egg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c3.6 0 6.5 5.2 6.5 9.6a6.5 6.5 0 0 1-13 0C5.5 8.2 8.4 3 12 3z'/%3E%3Cpath d='M7.6 12.4l2.2 1.6 2.2-2.2 2.2 2.2 2.2-1.6'/%3E%3C/svg%3E");
  --gi-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5s-7.2-4.5-7.2-10A4.1 4.1 0 0 1 12 6.8a4.1 4.1 0 0 1 7.2 2.7c0 5.5-7.2 10-7.2 10z'/%3E%3C/svg%3E");
  --gi-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5v13M5.5 12h13' stroke-width='3.2'/%3E%3C/svg%3E");
  --gi-pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 12.5h4.4l2.2-5.6 3.4 10.6 2.3-5h6.1'/%3E%3C/svg%3E");
  --gi-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M12 7.6v8.8M14.3 9.8c0-1.1-1-1.7-2.3-1.7s-2.3.6-2.3 1.7c0 2.4 4.6 1.4 4.6 3.8 0 1.1-1 1.8-2.3 1.8s-2.3-.7-2.3-1.8'/%3E%3C/svg%3E");
  --gi-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.5h13l-3.2-3.2M19.5 15.5h-13l3.2 3.2'/%3E%3C/svg%3E");
  --gi-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h7.2l8.8 8.8-6.7 6.7L4.5 11.2z'/%3E%3Ccircle cx='8.5' cy='8.8' r='1.4'/%3E%3C/svg%3E");
  --gi-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3C/svg%3E");
  --gi-rack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.8' width='16' height='16.4' rx='2'/%3E%3Cpath d='M4 9.3h16M4 14.7h16'/%3E%3C/svg%3E");
  --gi-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/svg%3E");
  --gi-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5V6M6.2 11.3 12 5.5l5.8 5.8'/%3E%3C/svg%3E");
  --gi-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2 21 19.5H3z'/%3E%3Cpath d='M12 10.2v4.1M12 17.1v.4'/%3E%3C/svg%3E");
  --gi-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.2v11.6M15 6.2v11.6' stroke-width='3'/%3E%3C/svg%3E");
  --gi-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 12.6l4.4 4.4 9.2-9.6' stroke-width='2.8'/%3E%3C/svg%3E");
  --gi-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7.5h12l-1.5 12h-9z'/%3E%3Cpath d='M5 4.5h14v3H5z'/%3E%3C/svg%3E");
  --gi-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5' stroke-width='3'/%3E%3C/svg%3E");
  --gi-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 4.5h9v4.2a4.5 4.5 0 0 1-9 0z'/%3E%3Cpath d='M7.5 6.3H4.6a2.8 2.8 0 0 0 3.2 3.6M16.5 6.3h2.9a2.8 2.8 0 0 1-3.2 3.6M12 13.2v3.5M8.6 19.5h6.8'/%3E%3C/svg%3E");
  --gi-room: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 4l8 7.5V20a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  --gi-animals: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16c0-3 2.2-4.5 5-4.5s4.5-1 4.5-3S13.5 5.5 11 5.5'/%3E%3Cpath d='M6 16c0 2.2 1.8 3.5 4 3.5h5.5c1.9 0 3.5-1.4 3.5-3.2 0-1.9-1.5-3.3-3.4-3.3H11'/%3E%3C/svg%3E");
  --gi-breed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='10' r='4.5'/%3E%3Ccircle cx='15.5' cy='14' r='4.5'/%3E%3C/svg%3E");
  --gi-shop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9h15l-1.2 11H5.7z'/%3E%3Cpath d='M8.5 9V6.8a3.5 3.5 0 0 1 7 0V9'/%3E%3C/svg%3E");
  --gi-market: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 4.5h7.2l9.8 9.8-7.2 7.2-9.8-9.8z'/%3E%3Ccircle cx='7.8' cy='8.8' r='1.4'/%3E%3C/svg%3E");
  --gi-social: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.2'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E");
  --gi-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='18.5' cy='12' r='1.6'/%3E%3C/svg%3E");
  --gi-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='2'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E");
  --gi-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18l5-6 4 3 7-8'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E");
  --gi-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='1.5'/%3E%3Cpath d='M3.5 9h17M12 9v11M12 9c-1.5-3.5-5-4-5-1.5S12 9 12 9zM12 9c1.5-3.5 5-4 5-1.5S12 9 12 9z'/%3E%3C/svg%3E");
  --gi-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h10.5a3 3 0 0 1 3 3V20H8a3 3 0 0 1-3-3z'/%3E%3Cpath d='M5 17a3 3 0 0 1 3-3h10.5'/%3E%3C/svg%3E");
  --gi-bug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='7.5' width='8' height='12' rx='4'/%3E%3Cpath d='M12 11v8.5M8 12H4.5M19.5 12H16M8 16.5H5M19 16.5h-3M9.5 7.5 8 4.5M14.5 7.5 16 4.5'/%3E%3C/svg%3E");
  --gi-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.5v2.2M12 18.3v2.2M3.5 12h2.2M18.3 12h2.2M6 6l1.6 1.6M16.4 16.4 18 18M6 18l1.6-1.6M16.4 7.6 18 6'/%3E%3C/svg%3E");
  --gi-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20c.8-4 3.8-6 7.5-6s6.7 2 7.5 6'/%3E%3C/svg%3E");
  --gi-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5 16 12l-6.5 6.5' stroke-width='2.6'/%3E%3C/svg%3E");
}
/* Lock and Lay — the phone in the game look (#1348). One system for every phone screen, after the desktop's top bar (look A,
   #1077) and the cutting screen: the game's warm grey is the main colour, what you READ sits sunk in a dark well, what you
   PRESS is raised (a face, a thicker darker bottom edge, a faint top highlight), each section has its own colour, money is
   gold, go is green, final is red, and titles and big numbers are in the chunky display face (Lilita One, gems.css).
   Rarity has one colour ladder everywhere: Common grey, Uncommon green, Rare blue, Ultra rare purple, One of a kind gold.
   Loaded last on the phone and scoped to body.gl, so taking the class off the body brings the old look back whole.
   Both bars stay dark on either theme; the page between them follows the theme. */

/* ==== 0. Tokens ==== */
body.mobile.gl {
  --g-bg: #1c1a17; --g-face: #2d2a25; --g-face-2: #26231f; --g-edge: #0e0d0b; --g-line: #3a352e; --g-line-2: #4b453c;
  --g-well: #131210; --g-sink: inset 0 2px 5px rgba(0, 0, 0, .38); --g-hi: inset 0 1px 0 rgba(255, 255, 255, .06);
  --g-txt: #f4eddf; --g-txt-2: #c3b9a7; --g-txt-3: #8e8577;
  --g-gold: #ffd35c; --g-gold-1: #ffe089; --g-gold-2: #f0a51b; --g-gold-e: #8f5a00;
  --g-go1: #63c47d; --g-go2: #3f9c5a; --g-goe: #23653a; --g-no1: #f0654f; --g-no2: #d0442e; --g-noe: #7f220f;
  --c-room: #54b96e; --c-collection: #eba83e; --c-breeding: #e66b94; --c-shop: #f07447; --c-market: #9b84ec; --c-social: #4fa9df; --c-more: #a59b8b;
  --r-common: #8f8679; --r-uncommon: #5dbd74; --r-rare: #4d9ef2; --r-ultra: #b47af3; --r-unique: #ffc83c;
  --g-r: 16px; --g-font: var(--gmf, 'Lilita One', var(--sans));
  --sec: var(--c-room);
}
:root:not([data-theme="dark"]) body.mobile.gl {
  --g-bg: #ece5d7; --g-face: #fffcf5; --g-face-2: #f3eddf; --g-edge: #c2b59c; --g-line: #d8cdb9; --g-line-2: #c4b8a1;
  --g-well: #e0d7c5; --g-sink: inset 0 2px 4px rgba(80, 58, 22, .16); --g-hi: inset 0 1px 0 rgba(255, 255, 255, .8);
  --g-txt: #2a241c; --g-txt-2: #5f574b; --g-txt-3: #8b8274;
  --g-gold: #9a6500;
  --c-room: #3c9a56; --c-collection: #c98419; --c-breeding: #cf4c7a; --c-shop: #db5a2c; --c-market: #7b62d6; --c-social: #2f8dc6; --c-more: #8a7f6e;
  --r-common: #9d9384; --r-uncommon: #3fa05a; --r-rare: #2f82dc; --r-ultra: #9254dc; --r-unique: #e0a414;
}
body.mobile.gl #view[data-view="room"] { --sec: var(--c-room); }
body.mobile.gl #view[data-view="collection"] { --sec: var(--c-collection); }
body.mobile.gl #view[data-view="breeding"], body.mobile.gl #view[data-view="incubator"] { --sec: var(--c-breeding); }
body.mobile.gl #view[data-view="shop"] { --sec: var(--c-shop); }
body.mobile.gl #view[data-view="market"] { --sec: var(--c-market); }
body.mobile.gl #view[data-view="social"] { --sec: var(--c-social); }
body.mobile.gl #view:is([data-view="more"], [data-view="earn"], [data-view="goals"], [data-view="events"], [data-view="book"], [data-view="discoveries"]) { --sec: var(--c-more); }
body.mobile.gl, body.mobile.gl #view, body.mobile.gl .ph-stick { background: var(--g-bg); }

/* ==== 1. The top bar: the desktop's counters. What you have sits in a sunk well with a solid coin; what you press
   (the level, settings) is raised. No labels: the coins say which is which, the exact figure is a tap away. ==== */
body.mobile.gl #top { gap: 6px; padding: calc(7px + env(safe-area-inset-top)) 8px 8px; background: linear-gradient(180deg, #2c2924, #1b1916); border: 0; box-shadow: 0 1px 0 #000, 0 6px 16px rgba(0, 0, 0, .32); z-index: 5; }
body.mobile.gl #top .stat { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 9px 0 4px; gap: 5px; align-items: center; border: 1px solid #3a352e; border-radius: 999px; background: #121110; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); overflow: hidden; }
body.mobile.gl #top .stat .lbl { display: none; }
body.mobile.gl #top .stat > span { min-width: 0; }
body.mobile.gl #top .hi { width: 27px; height: 27px; flex: none; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .55); }
body.mobile.gl #top .hi svg { width: 16px; height: 16px; stroke-width: 2.3; }
body.mobile.gl #top .stat.cash .hi { background: linear-gradient(180deg, #ffe079, #dc9a18); } body.mobile.gl #top .stat.cash .hi svg { stroke: #4a3000; color: #4a3000; }
body.mobile.gl #top .stat.worth .hi { background: linear-gradient(180deg, #8fe0a3, #3d9456); } body.mobile.gl #top .stat.worth .hi svg { stroke: #08331a; color: #08331a; }
body.mobile.gl #top .stat.day .hi { background: linear-gradient(180deg, #a3d0ee, #4f8bb3); } body.mobile.gl #top .stat.day .hi svg { stroke: #0c2a3d; color: #0c2a3d; }
body.mobile.gl #top .stat b, body.mobile.gl #top .stat b.num, body.mobile.gl #top #hWorth, body.mobile.gl #top #hDate { font: 400 16px/1 var(--g-font) !important; letter-spacing: 0; color: #f6efe1 !important; white-space: nowrap; overflow: hidden; text-overflow: clip; }
body.mobile.gl #top .stat.cash b { color: #ffd65e !important; }
body.mobile.gl #top #hDate { font-size: 14px !important; }
body.mobile.gl #top .stat.day .hi { width: 22px; height: 22px; } body.mobile.gl #top .stat.day .hi svg { width: 14px; height: 14px; }
body.mobile.gl #top #hCash.up { color: #8ff0a4 !important; animation: gl-bump .45s ease-out; } body.mobile.gl #top #hCash.down { color: #ff9a86 !important; }
@keyframes gl-bump { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
body.mobile.gl #top .stat.cash-low { border-color: #e0a044; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 0 0 2px rgba(224, 160, 68, .3); }
body.mobile.gl #top .stat.cash, body.mobile.gl #top .stat.worth { flex: 1 0 auto; } body.mobile.gl #top .stat.day { flex: 0 1 auto; } /* cash and worth never shrink below their figure; the date gives way (#1557) */
body.mobile.gl #top #hDate { text-overflow: ellipsis; }
body.mobile.gl #top .lvl-pill, body.mobile.gl #top .gear { flex: none; width: 40px; height: 40px; min-height: 0; padding: 0; display: grid; place-items: center; border: 1px solid #4b453c; border-bottom: 3px solid #0b0a09; border-radius: 12px; background: linear-gradient(180deg, #3a352f, #2a2621); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
body.mobile.gl #top .lvl-pill:active, body.mobile.gl #top .gear:active { transform: translateY(2px); border-bottom-width: 1px; }
body.mobile.gl #top .gear svg { width: 21px; height: 21px; stroke: #e9e1d2; }
body.mobile.gl #top .lvl-pill .lv-txt, body.mobile.gl #top .lvl-pill .lv-rest, body.mobile.gl #top .lvl-pill .rested-tag { display: none; }
body.mobile.gl #top .lvl-pill .lv-ring { width: 32px; height: 32px; }
body.mobile.gl #dayBar { height: 3px; bottom: 0; background: rgba(255, 255, 255, .06); } body.mobile.gl #dayBar i { background: linear-gradient(90deg, #f0a51b, #ffd65e); }
@media (max-width: 400px) { body.mobile.gl #top .stat.day .hi { display: none; } body.mobile.gl #top .stat.day { padding-left: 9px; } }
@media (max-width: 370px) { body.mobile.gl #top { gap: 4px; padding-left: 6px; padding-right: 6px; } body.mobile.gl #top .stat { padding-right: 7px; gap: 5px; } body.mobile.gl #top .hi { width: 25px; height: 25px; } body.mobile.gl #top .stat b, body.mobile.gl #top .stat b.num, body.mobile.gl #top #hWorth { font-size: 15px !important; } body.mobile.gl #top #hDate { font-size: 13px !important; } body.mobile.gl #top .lvl-pill, body.mobile.gl #top .gear { width: 36px; } }

/* ==== 2. The tab bar: a game nav bar. Every section a raised tile in its colour; the open one wider, lifted and lit,
   its name in the display face. Count badges are red with a ring, and only ever red. ==== */
body.mobile.gl #tabs { gap: 4px; padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); border: 0; background: linear-gradient(180deg, #2a2722, #171512); box-shadow: 0 -1px 0 #000, inset 0 1px 0 rgba(255, 255, 255, .06), 0 -8px 18px rgba(0, 0, 0, .28); }
body.mobile.gl #tabs button[data-view="room"] { --tc: var(--c-room); } body.mobile.gl #tabs button[data-view="collection"] { --tc: var(--c-collection); } body.mobile.gl #tabs button[data-view="breeding"] { --tc: var(--c-breeding); }
body.mobile.gl #tabs button[data-view="shop"] { --tc: var(--c-shop); } body.mobile.gl #tabs button[data-view="market"] { --tc: var(--c-market); } body.mobile.gl #tabs button[data-view="social"] { --tc: var(--c-social); }
:root:not([data-theme="dark"]) body.mobile.gl #tabs button { --c-room: #54b96e; --c-collection: #eba83e; --c-breeding: #e66b94; --c-shop: #f07447; --c-market: #9b84ec; --c-social: #4fa9df; } /* the bar is dark on both themes: its colours stay the bright set */
body.mobile.gl #tabs button { flex: 1 1 0; min-width: 0; min-height: 0; padding: 0 0 1px; gap: 4px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: #9c9384; font: 600 10.5px/1 var(--sans); letter-spacing: .01em; transition: flex-grow .2s ease; }
body.mobile.gl #tabs button .tile { width: 44px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 30%, #34302a), color-mix(in srgb, var(--tc) 20%, #26231f)); border: 1px solid color-mix(in srgb, var(--tc) 30%, #3d3830); border-bottom: 3px solid #0b0a09; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .15s ease, width .2s ease; }
body.mobile.gl #tabs button .tile svg { width: 21px; height: 21px; stroke: color-mix(in srgb, var(--tc) 72%, #fff); stroke-width: 2.1; }
body.mobile.gl #tabs button.on { flex-grow: 1.45; color: #fff; font: 400 12.5px/1 var(--g-font); letter-spacing: .03em; }
body.mobile.gl #tabs button.on .tile { width: 100%; max-width: 62px; height: 40px; margin-top: -10px; border-radius: 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 72%, #fff), var(--tc) 58%); border-color: color-mix(in srgb, var(--tc) 80%, #000); border-bottom: 4px solid color-mix(in srgb, var(--tc) 45%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 12px color-mix(in srgb, var(--tc) 40%, transparent); transform: none; }
body.mobile.gl #tabs button.on .tile svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
body.mobile.gl #tabs button.on > span:not(.tile) { text-shadow: 0 1px 0 #000; }
body.mobile.gl #tabs button:active .tile { transform: translateY(2px); }
body.mobile.gl #tabs .badge { top: -6px; right: calc(50% - 30px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: linear-gradient(180deg, #ff6b57, #d93a24); color: #fff; font: 400 12px/20px var(--g-font); box-shadow: 0 0 0 2px #1c1a17, 0 2px 4px rgba(0, 0, 0, .4); }
body.mobile.gl #tabs button.on .badge { top: -14px; }

/* ==== 3. Page titles and sub-tabs: the display face with the section's coin; the one-line explainer goes (the coin
   and the tabs say where you are). Sub-tabs are one sunk track with the open tab raised in the section colour. ==== */
body.mobile.gl #view { --view-px: 12px; padding: 10px var(--view-px) 26px; } /* the full-bleed bars (.ph-stick, .coll-selbar-m) bleed by --view-px, so they stay 360 wide on a 360 screen (#1366) */
body.mobile.gl #view > h2, body.mobile.gl #view > .ln > h2, body.mobile.gl #view > div > h2:first-child { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font: 400 27px/1.05 var(--g-font); letter-spacing: .02em; text-transform: uppercase; color: var(--g-txt); }
body.mobile.gl #view > h2::before { content: ''; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--gi, none) center / 21px no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--sec) 70%, #fff), var(--sec) 60%); border-bottom: 3px solid color-mix(in srgb, var(--sec) 45%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 6px rgba(0, 0, 0, .25); }
body.mobile.gl #view[data-view="room"] { --gi: var(--gi-room); } body.mobile.gl #view[data-view="collection"] { --gi: var(--gi-animals); } body.mobile.gl #view:is([data-view="breeding"], [data-view="incubator"]) { --gi: var(--gi-breed); }
body.mobile.gl #view[data-view="shop"] { --gi: var(--gi-shop); } body.mobile.gl #view[data-view="market"] { --gi: var(--gi-market); } body.mobile.gl #view[data-view="social"] { --gi: var(--gi-social); }
body.mobile.gl #view[data-view="more"] { --gi: var(--gi-more); } body.mobile.gl #view[data-view="earn"] { --gi: var(--gi-coin); } body.mobile.gl #view[data-view="goals"] { --gi: var(--gi-star); } body.mobile.gl #view[data-view="events"] { --gi: var(--gi-trophy); } body.mobile.gl #view[data-view="book"] { --gi: var(--gi-book); } body.mobile.gl #view[data-view="discoveries"] { --gi: var(--gi-book); }
body.mobile.gl #view > h2 .meta { font: 400 20px/1 var(--g-font); letter-spacing: .02em; color: var(--g-txt-3); }
body.mobile.gl #view > h2 > button, body.mobile.gl #view > h2 .gm-pill { margin-left: auto; }
body.mobile.gl #view .ph-sub { display: none; }
body.mobile.gl #view > .tabs:not(.sc-bar), body.mobile.gl #view .ph-stick > .tabs:not(.sc-bar) { display: flex; gap: 3px; margin: 0 0 12px; padding: 4px; border: 1px solid var(--g-line); border-radius: 14px; background: var(--g-well); box-shadow: var(--g-sink); overflow-x: auto; scrollbar-width: none; }
body.mobile.gl .tabs::-webkit-scrollbar { display: none; }
body.mobile.gl #view .tabs:not(.sc-bar) > button { flex: 1 0 auto; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--g-txt-3); font: 400 15px/1 var(--g-font); letter-spacing: .02em; white-space: nowrap; }
body.mobile.gl #view .tabs:not(.sc-bar) > button.on { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--sec) 75%, #fff), var(--sec) 65%); border-bottom: 3px solid color-mix(in srgb, var(--sec) 45%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 5px rgba(0, 0, 0, .25); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
body.mobile.gl #view .tabs:not(.sc-bar) > button:active { transform: translateY(1px); }
/* section labels: the display face, small, over a short colour rule */
body.mobile.gl #view .section, body.mobile.gl #sheet .section { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font: 400 14px/1.1 var(--g-font); letter-spacing: .05em; text-transform: uppercase; color: var(--g-txt-2); }
body.mobile.gl #view .section::after, body.mobile.gl #sheet .section::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--sec) 55%, transparent), transparent 70%); }

/* ==== 4. Surfaces: cards are raised faces; lists you tap lift a little more. Numbers are the display face in a well. ==== */
body.mobile.gl :where(.rackbox, .specimen, .me-card, .ev-now, .goals, .restock, .expo-card, .row-card, .stats div, .sq-head.m, .pcard, .wad, .mk-lockrow) { border: 1px solid var(--g-line); border-bottom: 3px solid var(--g-edge); border-radius: var(--g-r); background: linear-gradient(180deg, var(--g-face), var(--g-face-2)); box-shadow: var(--g-hi); }
body.mobile.gl .row-card { margin-bottom: 9px; }
body.mobile.gl .row-card[data-snake]:active, body.mobile.gl .row-card[data-open]:active { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 11px; }
body.mobile.gl .row-card .t { font-weight: 700; color: var(--g-txt); }
body.mobile.gl .row-card .v, body.mobile.gl .price { font: 400 18px/1 var(--g-font); letter-spacing: .01em; color: var(--g-gold); }
body.mobile.gl .stats div { border-bottom-width: 1px; background: var(--g-well); box-shadow: var(--g-sink); }
body.mobile.gl .stats b { font: 400 17px/1.1 var(--g-font); letter-spacing: .01em; color: var(--g-txt); }
body.mobile.gl .stats .lbl { font: 700 9.5px/1.2 var(--sans); letter-spacing: .1em; color: var(--g-txt-3); }
body.mobile.gl input, body.mobile.gl select, body.mobile.gl textarea { border: 1px solid var(--g-line); border-radius: 12px; background: var(--g-well); color: var(--g-txt); box-shadow: var(--g-sink); }
body.mobile.gl select option, body.mobile.gl select optgroup { background: var(--g-well); color: var(--g-txt); } /* the open list reads on either theme (#1079) */
body.mobile.gl input:focus, body.mobile.gl select:focus, body.mobile.gl textarea:focus { outline: 2px solid color-mix(in srgb, var(--sec) 70%, transparent); outline-offset: 0; }
/* chips: raised pebbles; the one that is on takes the section colour */
body.mobile.gl .chip { min-height: 34px; border: 1px solid var(--g-line-2); border-bottom: 2px solid var(--g-edge); border-radius: 999px; background: linear-gradient(180deg, var(--g-face), var(--g-face-2)); color: var(--g-txt-2); font-weight: 600; box-shadow: var(--g-hi); }
body.mobile.gl .chip.on { border-color: color-mix(in srgb, var(--sec) 70%, #000); border-bottom-color: color-mix(in srgb, var(--sec) 40%, #000); background: linear-gradient(180deg, color-mix(in srgb, var(--sec) 75%, #fff), var(--sec) 70%); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
body.mobile.gl .chip.on span { color: #fff; opacity: .85; }
/* buttons: the slab sizes up a little, and money buttons are gold */
body.mobile.gl button.primary:where(:not(#auth *, #oauthConfirm *)), body.mobile.gl button.danger:where(:not(#auth *, #oauthConfirm *)) { font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
body.mobile.gl .bigcta { border: 1px solid var(--g-go2); border-bottom: 4px solid var(--g-goe); background: linear-gradient(180deg, var(--g-go1), var(--g-go2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); border-radius: 16px; }
body.mobile.gl .bigcta b { font: 400 20px/1.1 var(--g-font); letter-spacing: .02em; text-transform: uppercase; }
/* tags and pills: rounder, a touch bolder */
body.mobile.gl .tag { border-radius: 999px; font-weight: 700; }
/* empties: a friendly panel, not an italic line */
body.mobile.gl #view .empty { padding: 18px 16px; border: 2px dashed var(--g-line-2); border-radius: var(--g-r); background: transparent; color: var(--g-txt-3); font: 600 14px/1.4 var(--sans); font-style: normal; text-align: center; }

/* ==== 5. Room: a home screen. The room's banner, the most urgent job as one big tile you can't miss, the rest as
   quest tiles with an icon each, the first season as a progress track, racks as shelves of tub slots. ==== */
body.mobile.gl .rh-fold { margin: 2px 0 12px; border: 1px solid var(--g-line); border-bottom: 3px solid var(--g-edge); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-room) 18%, var(--g-face)), var(--g-face-2)); box-shadow: var(--g-hi); }
body.mobile.gl .rh-bar { min-height: 62px; padding: 10px 12px; gap: 11px; }
body.mobile.gl .rh-bar::before { content: ''; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--gi-room) center / 22px no-repeat, linear-gradient(180deg, #8ad79c, #3f9c5a); border-bottom: 3px solid #1f5a33; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
body.mobile.gl .rh-t b { font: 400 19px/1.05 var(--g-font); letter-spacing: .02em; color: var(--g-txt); }
body.mobile.gl .rh-t small { font-size: 12px; color: var(--g-txt-3); }
body.mobile.gl .rh-bar .rankchip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 5px; border: 1px solid #b07a12; border-bottom: 3px solid #6b4300; border-radius: 999px; background: linear-gradient(180deg, #ffe17e, #eaa21a); color: #3d2600; font: 400 13px/1 var(--g-font); letter-spacing: .02em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); white-space: nowrap; }
body.mobile.gl .rh-bar .rankchip::before { content: ''; width: 16px; height: 16px; background: #3d2600; -webkit-mask: var(--gi-trophy) center / contain no-repeat; mask: var(--gi-trophy) center / contain no-repeat; }
/* the jobs */
body.mobile.gl .today { gap: 9px; padding: 0 0 4px; }
body.mobile.gl .today .tcard { --k: #8e8577; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; min-height: 64px; padding: 10px 10px 10px 10px; border: 1px solid var(--g-line); border-bottom: 3px solid var(--g-edge); border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 16%, var(--g-face)), var(--g-face-2)); box-shadow: var(--g-hi); }
body.mobile.gl .today .tcard::before { content: ''; position: static; grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; background: var(--ic, var(--gi-check)) center / 20px no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--k) 65%, #fff), var(--k) 70%); border-bottom: 3px solid color-mix(in srgb, var(--k) 45%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
body.mobile.gl .today .tcard b { grid-column: 2; font: 400 15.5px/1.08 var(--g-font); letter-spacing: .015em; color: var(--g-txt); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body.mobile.gl .today .tcard span { grid-column: 2; font-size: 12px; color: var(--g-txt-2); }
body.mobile.gl .today .tcard:active { transform: translateY(2px); border-bottom-width: 1px; }
body.mobile.gl .today .tcard.hatch, body.mobile.gl .today .tcard.warn { --k: #e89a2a; } body.mobile.gl .today .tcard.good { --k: #4fae67; } body.mobile.gl .today .tcard:is(.bad, .dying) { --k: #df523b; }
body.mobile.gl .today .tcard.info { --k: #4b97d2; } body.mobile.gl .today .tcard.cash { --k: #d9a21e; } body.mobile.gl .today .tcard.sort { --k: #a07ae0; } body.mobile.gl .today .tcard.quiet { --k: #8e8577; }
body.mobile.gl .today .tcard[data-go="breeding:eggs"] { --ic: var(--gi-egg); } body.mobile.gl .today .tcard[data-go="breeding:pairs"] { --ic: var(--gi-heart); }
body.mobile.gl .today .tcard[data-go="collection:attention"] { --ic: var(--gi-plus); } body.mobile.gl .today .tcard[data-go="collection:dying"] { --ic: var(--gi-pulse); }
body.mobile.gl .today .tcard[data-go="market:sales"] { --ic: var(--gi-coin); } body.mobile.gl .today .tcard[data-go="market:trades"] { --ic: var(--gi-swap); }
body.mobile.gl .today .tcard[data-go="collection:undecided"] { --ic: var(--gi-tag); } body.mobile.gl .today .tcard[data-go="collection:proven"] { --ic: var(--gi-up); }
body.mobile.gl .today .tcard:is([data-go="collection:cups"], [data-go="shop:racks"]) { --ic: var(--gi-cup); } body.mobile.gl .today .tcard[data-go="earn"] { --ic: var(--gi-warn); }
body.mobile.gl .today .tcard[data-go="goals"] { --ic: var(--gi-star); } body.mobile.gl .today .tcard[data-go="more"] { --ic: var(--gi-pause); }
body.mobile.gl .today .tcard.info[data-go="collection:attention"] { --ic: var(--gi-eye); }
/* the first job is the big one: the whole width, a bigger coin and a GO slab */
body.mobile.gl .today .tcard:first-child { grid-column: 1 / -1; grid-template-columns: 50px minmax(0, 1fr) auto; min-height: 76px; padding: 12px 12px 12px 12px; column-gap: 12px; }
body.mobile.gl .today .tcard:first-child::before { width: 50px; height: 50px; background-size: 26px; }
body.mobile.gl .today .tcard:first-child b { font-size: 21px; -webkit-line-clamp: 1; }
body.mobile.gl .today .tcard:first-child span { font-size: 13px; }
body.mobile.gl .today .tcard:first-child::after { content: 'GO'; grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; height: 40px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--k) 70%, #000); border-bottom: 4px solid color-mix(in srgb, var(--k) 40%, #000); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 60%, #fff), var(--k) 70%); color: #fff; font: 400 18px/1 var(--g-font); letter-spacing: .04em; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
body.mobile.gl .today .tmore { color: var(--c-room); font: 400 15px/1 var(--g-font); letter-spacing: .03em; text-decoration: none; }
/* the first season: a track of five steps */
body.mobile.gl .goals { padding: 12px 14px 10px; }
body.mobile.gl .goals-head .lbl { font: 400 15px/1 var(--g-font); letter-spacing: .04em; color: var(--g-txt); }
body.mobile.gl .goals-head .meta { font: 400 15px/1 var(--g-font); color: var(--g-gold); }
body.mobile.gl .goal { padding: 8px 0; border-bottom: 1px solid var(--g-line); color: var(--g-txt); font-weight: 600; }
body.mobile.gl .goal:last-child { border-bottom: 0; }
body.mobile.gl .goal i { width: 24px; height: 24px; border: 2px solid var(--g-line-2); background: var(--g-well); box-shadow: var(--g-sink); }
body.mobile.gl .goal.done { text-decoration: none; color: var(--g-txt-3); }
body.mobile.gl .goal.done i { border-color: #2f7f48; background: linear-gradient(180deg, #7ad08f, #3f9c5a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); color: #fff; font-weight: 800; }
body.mobile.gl .goal:not(.done) { color: var(--g-txt); }
body.mobile.gl .goals .goal:not(.done) ~ .goal:not(.done) { color: var(--g-txt-2); font-weight: 500; }
/* racks: a header with the rack's number badge, the tubs in a sunk shelf */
body.mobile.gl .rackbox { margin-top: 12px; overflow: hidden; }
body.mobile.gl .rackbox > header { padding: 10px 12px; gap: 9px; border-bottom: 0; background: transparent; }
body.mobile.gl .rackbox > header b { font: 400 17px/1.1 var(--g-font); letter-spacing: .02em; color: var(--g-txt); }
body.mobile.gl .rackbox > header .meta { font-size: 12px; color: var(--g-txt-3); }
body.mobile.gl .rk-no { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(180deg, #7ad08f, #3f9c5a); border-bottom: 3px solid #1f5a33; color: #fff; font: 400 16px/1 var(--g-font); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
body.mobile.gl .rackbox.desk .rk-no { background: linear-gradient(180deg, #f5c066, #d58a1c); border-bottom-color: #7a4a00; }
body.mobile.gl .rackbox.inc .rk-no { background: linear-gradient(180deg, #f3a0bd, #d45a85); border-bottom-color: #7a2546; }
body.mobile.gl .rackbox .tubs { margin: 0 8px 8px; padding: 8px; gap: 7px; border: 1px solid var(--g-line); border-radius: 12px; background: var(--g-well); box-shadow: var(--g-sink); }
body.mobile.gl .tubbox, body.mobile.gl .eggbox { border: 1px solid var(--g-line-2); border-bottom: 3px solid var(--g-edge); border-radius: 12px; background: linear-gradient(180deg, var(--g-face), var(--g-face-2)); box-shadow: var(--g-hi); color: var(--g-txt); }
body.mobile.gl .tubbox:active, body.mobile.gl .eggbox:active { transform: translateY(2px); border-bottom-width: 1px; }
body.mobile.gl .tubbox.good { border-color: #3f9c5a; box-shadow: var(--g-hi), 0 0 0 1px #3f9c5a; } body.mobile.gl .tubbox.bad { border-color: #df523b; box-shadow: var(--g-hi), 0 0 0 1px #df523b; animation: gl-alarm 1.6s ease-in-out infinite; }
body.mobile.gl .tubbox.warn { border-color: #e89a2a; box-shadow: var(--g-hi), 0 0 0 1px #e89a2a; } body.mobile.gl .tubbox.info { border-color: #4b97d2; box-shadow: var(--g-hi), 0 0 0 1px #4b97d2; }
@keyframes gl-alarm { 50% { box-shadow: var(--g-hi), 0 0 0 3px rgba(223, 82, 59, .45); } }
body.mobile.gl .tubbox .tb-name { font-weight: 700; color: var(--g-txt); }
body.mobile.gl .tubbox .tb-flag { top: 0; left: 0; max-width: calc(100% - 10px); padding: 2px 7px 2px 6px; border-radius: 11px 0 9px 0; font: 400 11px/1.1 var(--g-font); letter-spacing: .04em; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
body.mobile.gl .tubbox .tb-flag.good { background: #3f9c5a; } body.mobile.gl .tubbox .tb-flag.bad { background: #d0442e; } body.mobile.gl .tubbox .tb-flag.warn { background: #e0921f; color: #fff; } body.mobile.gl .tubbox .tb-flag.info { background: #3f87c2; }
body.mobile.gl .tubbox .tb-bar { height: 4px; background: var(--g-well); } body.mobile.gl .tubbox .tb-bar i { background: linear-gradient(90deg, #3f9c5a, #8fe0a3); }
body.mobile.gl .tubbox.empty { border: 2px dashed var(--g-line-2); background: transparent; box-shadow: none; }
body.mobile.gl .tubbox.empty .plus { color: var(--c-room); font: 400 28px/1 var(--g-font); }
body.mobile.gl .eggbox.ready { border-color: #e8a21a; box-shadow: var(--g-hi), 0 0 0 1px #e8a21a; }
body.mobile.gl .eggbox.ready .tb-sub { color: var(--g-gold); font: 400 13px/1 var(--g-font); letter-spacing: .03em; }
body.mobile.gl .eggbox.free { border: 2px dashed var(--g-line-2); background: transparent; box-shadow: none; }
body.mobile.gl .spacebar { border: 1px solid var(--g-line); border-radius: 12px; background: var(--g-well); box-shadow: var(--g-sink); }
body.mobile.gl .spacebar .sp b { font: 400 20px/1 var(--g-font); color: var(--g-txt); }

/* ==== 6. Animals: a card per animal with its rarity on the left edge and round the picture, the value as a gold
   counter under it, the name in bold, then one line of facts and the chips. ==== */
body.mobile.gl .acard-m { --rc: var(--r-common); padding: 10px 12px 10px 12px; border-left: 5px solid var(--rc); }
body.mobile.gl .acard-m.rt-uncommon { --rc: var(--r-uncommon); } body.mobile.gl .acard-m.rt-rare { --rc: var(--r-rare); } body.mobile.gl .acard-m.rt-ultra { --rc: var(--r-ultra); } body.mobile.gl .acard-m.rt-unique { --rc: var(--r-unique); }
body.mobile.gl .row-card.acard-m canvas { border-radius: 12px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 75%, transparent), 0 3px 8px rgba(0, 0, 0, .3); }
body.mobile.gl .acard-m .ac-val { margin-top: 2px; padding: 4px 9px 4px 6px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-well); box-shadow: var(--g-sink); color: var(--g-gold); font: 400 15px/1 var(--g-font); letter-spacing: .01em; }
body.mobile.gl .acard-m .ac-val::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, #ffe079, #dc9a18); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); }
body.mobile.gl .row-card.acard-m .t { font-size: 16px; font-weight: 800; letter-spacing: -.005em; }
body.mobile.gl .acard-m .ac-rar { display: inline-block; margin: 0 0 3px; font: 400 11.5px/1 var(--g-font); letter-spacing: .06em; text-transform: uppercase; color: var(--rc); }
body.mobile.gl .acard-m.rt-common .ac-rar { display: none; }
body.mobile.gl .coll-stick-m .toolbar #cf, body.mobile.gl .coll-stick-m .nf-btn, body.mobile.gl .sort-m select { height: 44px; border-radius: 12px; }
body.mobile.gl .coll-stick-m .nf-btn { border: 1px solid var(--g-line-2); border-bottom: 3px solid var(--g-edge); background: linear-gradient(180deg, var(--g-face), var(--g-face-2)); color: var(--g-txt); font: 400 15px/1 var(--g-font); letter-spacing: .02em; }
body.mobile.gl .coll-stick-m .nf-btn.on { border-color: color-mix(in srgb, var(--sec) 70%, #000); background: linear-gradient(180deg, color-mix(in srgb, var(--sec) 75%, #fff), var(--sec) 70%); color: #fff; }

/* ==== 7. The animal card (sheet): a dark stage for the picture lit in the rarity colour, the name in the display face,
   the value as a big gold number, actions as slabs, facts in wells. ==== */
body.mobile.gl .sheet-box { border: 0; border-radius: 22px 22px 0 0; background: var(--g-bg); box-shadow: 0 -2px 0 rgba(255, 255, 255, .06), 0 -14px 34px rgba(0, 0, 0, .45); }
body.mobile.gl .grip { width: 48px; height: 5px; background: var(--g-line-2); }
body.mobile.gl #sheetClose, body.mobile.gl .sheet-x { width: 38px; height: 38px; min-height: 0; padding: 0; border: 1px solid var(--g-line-2); border-bottom: 3px solid var(--g-edge); border-radius: 50%; background: linear-gradient(180deg, var(--g-face), var(--g-face-2)); color: var(--g-txt); font: 400 22px/1 var(--g-font); }
body.mobile.gl .sh-head { --rc: var(--r-common); }
body.mobile.gl .sh-head.rt-uncommon { --rc: var(--r-uncommon); } body.mobile.gl .sh-head.rt-rare { --rc: var(--r-rare); } body.mobile.gl .sh-head.rt-ultra { --rc: var(--r-ultra); } body.mobile.gl .sh-head.rt-unique { --rc: var(--r-unique); }
body.mobile.gl .sh-head canvas.coilbig { border: 0; border-radius: 16px; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 45%, #8a8479) 0%, #6d675e 70%); box-shadow: 0 0 0 3px var(--rc), 0 6px 16px rgba(0, 0, 0, .35); }
body.mobile.gl .sh-head .b3d { border-radius: 999px; background: #121110; color: #fff; font: 400 12px/1 var(--g-font); letter-spacing: .04em; }
body.mobile.gl .sh-title .name { font: 400 19px/1.1 var(--g-font) !important; letter-spacing: .015em; color: var(--g-txt); overflow-wrap: anywhere; }
body.mobile.gl .sh-primary button { min-height: 48px; font-size: 15.5px; }
body.mobile.gl #sheet .sh-stats .sh-val { border-color: color-mix(in srgb, var(--g-gold-2) 45%, var(--g-line)); }
body.mobile.gl #sheet .sh-stats .sh-val b { font-size: 22px; color: var(--g-gold); }
body.mobile.gl .sh-sell button { min-height: 48px; }
body.mobile.gl .sh-grid button { min-height: 44px; }

/* the rarity pill everywhere: the ladder's colour */
body.mobile.gl .rar { border: 0; border-radius: 999px; padding: 2px 8px; font: 400 12px/1.2 var(--g-font); letter-spacing: .04em; color: #fff; background: var(--r-common); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
body.mobile.gl .rar.r-uncommon { background: var(--r-uncommon); } body.mobile.gl .rar.r-rare { background: var(--r-rare); } body.mobile.gl .rar.r-ultra { background: var(--r-ultra); } body.mobile.gl .rar.r-unique { background: var(--r-unique); color: #3d2600; text-shadow: none; }

/* ==== 8. One type system inside the game: the serif titles of the paper look (Events, Projects, Shop cards, empty
   notes) take the display face, which has one weight, so nothing is faux-bolded. The sign-in page keeps its own. ==== */
body.mobile.gl :is(#view, #sheet, #modal, #modal2) { --serif: var(--g-font); font-synthesis: none; }
body.mobile.gl :is(#view, #sheet) h3 { font: 400 19px/1.15 var(--g-font); letter-spacing: .02em; color: var(--g-txt); }
body.mobile.gl #view :is(h4, .nm) { letter-spacing: .01em; }
body.mobile.gl :is(#view, #sheet) .num { letter-spacing: 0; }
body.mobile.gl #view .ig-host, body.mobile.gl #view.ig-host { --serif: Fraunces, Georgia, serif; } /* Hatch keeps its own masthead */

/* ==== 9. More: your breeder as a profile card, every row a raised bar with its own coin and a chevron ==== */
body.mobile.gl .me-card { padding: 14px; gap: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-social) 16%, var(--g-face)), var(--g-face-2)); }
body.mobile.gl .me-av { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(180deg, #8fc6ef, #3d82b8); border-bottom: 4px solid #1c4b70; color: #fff; font: 400 26px/1 var(--g-font); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
body.mobile.gl .me-card b { font: 400 20px/1.1 var(--g-font); letter-spacing: .02em; }
body.mobile.gl .more-list { display: grid; gap: 8px; }
body.mobile.gl .more-list > button { --k: var(--c-more); margin: 0; min-height: 56px; padding: 8px 12px; justify-content: flex-start; gap: 12px; border: 1px solid var(--g-line); border-bottom: 3px solid var(--g-edge); border-radius: 14px; background: linear-gradient(180deg, var(--g-face), var(--g-face-2)); box-shadow: var(--g-hi); color: var(--g-txt); font: 700 15px/1.25 var(--sans); text-align: left; }
body.mobile.gl .more-list > button.danger { color: #ff8e7a; }
body.mobile.gl .more-list > button:active { transform: translateY(2px); border-bottom-width: 1px; }
body.mobile.gl .more-list > button[id]:not(.sup-row)::before { content: ''; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--ic, var(--gi-chev)) center / 20px no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--k) 65%, #fff), var(--k) 70%); border-bottom: 3px solid color-mix(in srgb, var(--k) 45%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
body.mobile.gl .more-list > #mEarn { --k: #d9a21e; --ic: var(--gi-coin); } body.mobile.gl .more-list > #mEvents { --k: #e0861f; --ic: var(--gi-trophy); }
body.mobile.gl .more-list > #mProjects { --k: var(--c-breeding); --ic: var(--gi-breed); } body.mobile.gl .more-list > #mGoals { --k: #4fae67; --ic: var(--gi-star); }
body.mobile.gl .more-list > #mBook { --k: #9b84ec; --ic: var(--gi-book); } body.mobile.gl .more-list > #mDisc { --k: #4b97d2; --ic: var(--gi-book); }
body.mobile.gl .more-list > #mTour { --k: #54b96e; --ic: var(--gi-arrow); } body.mobile.gl .more-list > #mBug { --k: #df523b; --ic: var(--gi-bug); }
body.mobile.gl .more-list > #mPass { --k: #e66b94; --ic: var(--gi-gift); }
body.mobile.gl .more-list > :is(#mUsage, #mEmail, #mExport, #mNotifs, #mSound, #mHealth, #mBuzz, #mTheme, #mQuality, #mModel) { --k: #6f675b; --ic: var(--gi-gear); }
body.mobile.gl .more-list > #mDelete { --k: #d0442e; --ic: var(--gi-warn); }
body.mobile.gl .more-list > button :is(.tag, .sw) { margin-left: auto; }
body.mobile.gl .more-list > button .tag ~ .tag { margin-left: 0; }
body.mobile.gl .more-list > :is(#mPause) { --k: #e0921f; --ic: var(--gi-pause); } body.mobile.gl .more-list > :is(#mName, #mLogout, #mLogoutAll, #mPw) { --k: #4b97d2; --ic: var(--gi-user); }
body.mobile.gl .more-list > button::after { flex: none; }

/* ==== 10. Market, Shop, Earn: prices are gold counters, the row's buttons slabs; stat wells read in the display face ==== */
body.mobile.gl .row-card[data-mrow] > .v, body.mobile.gl #view .price, body.mobile.gl #view .shop-price, body.mobile.gl #view .rk-price { font: 400 19px/1.1 var(--g-font); letter-spacing: .01em; color: var(--g-gold); }
body.mobile.gl .row-card[data-mrow] > .mk-acts { border-top: 1px solid var(--g-line); }
body.mobile.gl :is(.fin-card, .fin-kpi, .cz-head > div) b { font-family: var(--g-font); font-weight: 400; letter-spacing: .01em; }
body.mobile.gl .gm-pill, body.mobile.gl [data-gem-open] { flex: none; }

/* ==== 11. Windows: the sheet's and the dialog's tops in the same raised face; toasts as small game cards ==== */
body.mobile.gl #modalBox2 { border: 0; border-radius: 22px 22px 0 0; background: var(--g-bg); }
body.mobile.gl .modal { background: var(--g-bg); }
body.mobile.gl #modalClose, body.mobile.gl .modal-x { width: 40px; height: 40px; min-height: 0; padding: 0; border: 1px solid var(--g-line-2); border-bottom: 3px solid var(--g-edge); border-radius: 50%; background: linear-gradient(180deg, var(--g-face), var(--g-face-2)); color: var(--g-txt); font: 400 22px/1 var(--g-font); }
body.mobile.gl .toast { border: 1px solid var(--g-line); border-bottom: 3px solid var(--g-edge); border-radius: 14px; background: linear-gradient(180deg, var(--g-face), var(--g-face-2)); color: var(--g-txt); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
body.mobile.gl .ach-pop { border: 1px solid #b07a12; border-bottom: 4px solid #6b4300; border-radius: 16px; background: linear-gradient(180deg, #ffe17e, #eaa21a); color: #3d2600; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
body.mobile.gl .ach-pop b { font: 400 22px/1.1 var(--g-font); letter-spacing: .02em; } body.mobile.gl .ach-pop .lbl { color: #6b4300; }

/* ==== 12. The level in the top bar (#1484): an eight-point gold seal in flat colours, a darker gold rim round a gold
   face and a dark number, with the XP to the next level as a small flat gold bar under it ==== */
body.mobile.gl #top .lvl-pill .lv-ring { position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -3px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
body.mobile.gl #top .lvl-pill .lv-ring::before { display: block; content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0, 63% 12%, 80% 7%, 83% 24%, 99% 33%, 90% 50%, 99% 67%, 83% 76%, 80% 93%, 63% 88%, 50% 100%, 37% 88%, 20% 93%, 17% 76%, 1% 67%, 10% 50%, 1% 33%, 17% 24%, 20% 7%, 37% 12%); background: #a86c00; }
body.mobile.gl #top .lvl-pill .lv-n { position: relative; z-index: 1; width: 34px; height: 34px; clip-path: polygon(50% 0, 63% 12%, 80% 7%, 83% 24%, 99% 33%, 90% 50%, 99% 67%, 83% 76%, 80% 93%, 63% 88%, 50% 100%, 37% 88%, 20% 93%, 17% 76%, 1% 67%, 10% 50%, 1% 33%, 17% 24%, 20% 7%, 37% 12%); background: #f2b824; transform: scale(.84); }
body.mobile.gl #top .lvl-pill .lv-n text { fill: #3d2600; font-family: var(--g-font); font-weight: 400; stroke: none; }
body.mobile.gl #top .lvl-pill .lv-ring::after { display: block; content: ''; position: absolute; z-index: 2; left: 4px; right: 4px; bottom: -5px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #ffd65e calc(var(--p, 0) * 1%), #0d0c0b 0); box-shadow: 0 0 0 1px #000; } /* two flat colours with a hard stop: the fill and the rest */

/* ==== 13. The Shop's category bar: a raised tile per category with its coloured icon; the open one sits in its colour.
   The count is a small dark tag in the tile's corner, clear of the icon. ==== */
body.mobile.gl .shop-cats.m.sc-bar { gap: 8px; padding: 4px 2px 8px; margin: 0 0 4px; }
body.mobile.gl .shop-cats.m .sc { min-width: 78px; min-height: 70px; padding: 9px 8px 7px; gap: 6px; border: 1px solid var(--g-line); border-bottom: 3px solid var(--g-edge); border-radius: 14px; background: linear-gradient(180deg, var(--g-face), var(--g-face-2)); box-shadow: var(--g-hi); color: var(--g-txt-2); }
body.mobile.gl .shop-cats.m .sc b { font: 700 12px/1.1 var(--sans); letter-spacing: 0; }
body.mobile.gl .shop-cats.m .sc .sc-ic { width: 34px; height: 34px; border-radius: 10px; border-bottom: 3px solid rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
body.mobile.gl .shop-cats.m .sc em { top: -6px; right: -4px; min-width: 22px; padding: 0 6px; border: 0; border-radius: 9px; background: #121110; color: #e9e1d2; font: 400 11px/18px var(--g-font); box-shadow: 0 0 0 2px var(--g-bg); }
body.mobile.gl .shop-cats.m .sc.on { border-color: var(--sc); border-bottom-color: color-mix(in srgb, var(--sc) 45%, #000); background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 30%, var(--g-face)), color-mix(in srgb, var(--sc) 14%, var(--g-face-2))); color: var(--g-txt); box-shadow: var(--g-hi), 0 0 0 1px var(--sc), 0 4px 12px color-mix(in srgb, var(--sc) 28%, transparent); transform: none; }
body.mobile.gl .shop-cats.m .sc.on .sc-ic { transform: none; }
body.mobile.gl .shop-cats.m .sc.on em { background: var(--sc); color: #fff; }
body.mobile.gl .shop-cats.m .sc:active { transform: translateY(2px); border-bottom-width: 1px; }

/* ==== 14. More: the pages as a 2-up grid of tiles; the settings as folded groups, each a raised bar with its coin, its
   name and a line saying how it is set, opening onto its rows ==== */
body.mobile.gl .more-list.more-pages { grid-template-columns: 1fr 1fr; }
body.mobile.gl .more-pages > button { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; min-height: 96px; padding: 10px 12px 12px; font: 700 14px/1.2 var(--sans); }
body.mobile.gl .more-pages > button::after { display: none; }
body.mobile.gl .more-pages > button .tag { margin: 0; font-size: 11px; }
body.mobile.gl .more-pages > button .tag ~ .tag { margin-top: -4px; }
body.mobile.gl details.mset { margin: 0 0 8px; border: 1px solid var(--g-line); border-bottom: 3px solid var(--g-edge); border-radius: 16px; background: linear-gradient(180deg, var(--g-face), var(--g-face-2)); box-shadow: var(--g-hi); overflow: hidden; }
body.mobile.gl details.mset > summary { --k: var(--c-more); display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px 10px 12px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
body.mobile.gl details.mset > summary::-webkit-details-marker { display: none; }
body.mobile.gl details.mset > summary::after { content: ''; flex: none; width: 10px; height: 10px; margin: 0 4px 4px 0; border-right: 2.5px solid var(--g-txt-3); border-bottom: 2.5px solid var(--g-txt-3); transform: rotate(45deg); transition: transform .18s; }
body.mobile.gl details.mset[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
body.mobile.gl details.mset > summary:active { background: color-mix(in srgb, var(--g-txt) 5%, transparent); }
body.mobile.gl .mset .ms-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--ic, var(--gi-gear)) center / 21px no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--k) 65%, #fff), var(--k) 70%); border-bottom: 3px solid color-mix(in srgb, var(--k) 45%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
body.mobile.gl .mset .ms-t { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
body.mobile.gl .mset .ms-t b { font: 400 18px/1.1 var(--g-font); letter-spacing: .02em; color: var(--g-txt); }
body.mobile.gl .mset .ms-t small { font-size: 12.5px; line-height: 1.3; color: var(--g-txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile.gl .mset[data-mset="game"] > summary { --k: #54b96e; --ic: var(--gi-gear); } body.mobile.gl .mset[data-mset="sound"] > summary { --k: #4b97d2; --ic: var(--gi-pulse); }
body.mobile.gl .mset[data-mset="news"] > summary { --k: #e0861f; --ic: var(--gi-social); } body.mobile.gl .mset[data-mset="breed"] > summary { --k: #e66b94; --ic: var(--gi-breed); }
body.mobile.gl .mset[data-mset="gems"] > summary { --k: #3f86e0; --ic: var(--gi-star); } body.mobile.gl .mset[data-mset="account"] > summary { --k: #9b84ec; --ic: var(--gi-user); }
body.mobile.gl .mset[data-mset="data"] > summary { --k: #8f8679; --ic: var(--gi-book); } body.mobile.gl .mset[data-mset="help"] > summary { --k: #d9a21e; --ic: var(--gi-eye); }
body.mobile.gl .mset[open] > summary { border-bottom: 1px solid var(--g-line); }
body.mobile.gl .mset > .more-list, body.mobile.gl .mset > p, body.mobile.gl .mset > .yg, body.mobile.gl .mset > :not(summary) { margin: 0; padding: 10px 10px 4px; }
body.mobile.gl .mset > .more-list { display: grid; gap: 6px; padding-bottom: 10px; background: var(--g-well); box-shadow: var(--g-sink); }
body.mobile.gl .mset > p.meta { margin: 0; padding: 10px 14px 0; background: var(--g-well); }
body.mobile.gl .mset > p.mset-help { padding: 12px 14px 14px; font-size: 13.5px; line-height: 1.5; }
/* inside a group the rows are plain raised bars without coins: the group's coin says what they are */
body.mobile.gl .mset .more-list > button::before, body.mobile.gl .mset .more-list > button[id]:not(.sup-row)::before { display: none; }
body.mobile.gl .mset .more-list > button { min-height: 50px; padding: 8px 12px; border-radius: 12px; font-size: 14.5px; }
body.mobile.gl .mset .np-mrow { padding: 10px 12px; border: 1px solid var(--g-line); border-radius: 12px; background: var(--g-face); }
/* the supporter row: a gold bar with its rosette, on its own under the pages */
body.mobile.gl .more-list > button.sup-row { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 60px; border-color: #b07a12; border-bottom: 3px solid #6b4300; background: linear-gradient(180deg, #ffe17e, #eaa21a); color: #3d2600; font: 400 17px/1.15 var(--g-font); letter-spacing: .02em; text-align: left; }
body.mobile.gl .more-list > button.sup-row .sup-ros { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #3d2600; }
body.mobile.gl .more-list > button.sup-row .sup-ros svg { width: 24px; height: 24px; }
body.mobile.gl .more-list > button.sup-row::after { margin-left: auto; }