/* Lock and Lay — mobile client. Builds on the notebook tokens in /css/style.css. */
:root { --thumb-hi: #aaa398; --thumb-mid: #8a8479; --thumb-lo: #736d64; --thumb-bg: radial-gradient(ellipse at 50% 58%, var(--thumb-hi) 0%, var(--thumb-mid) 62%, var(--thumb-lo) 100%); } /* the thumbnail backdrop, as on desktop (#608) */
:root[data-theme="dark"] { --thumb-hi: #9a9489; --thumb-mid: #7a756b; --thumb-lo: #645f57; }
html, body.mobile { height: 100%; overflow: hidden; background: var(--paper); }
body.mobile { display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; }
body.mobile .auth-card { width: min(460px, 100vw); min-height: 100%; padding: max(28px, env(safe-area-inset-top)) 24px 32px; box-shadow: none; border-top: 0; justify-content: center; }
body.mobile .overlay { align-items: stretch; }

#top { display: flex; align-items: stretch; background: var(--paper); background-image: var(--grain); border-bottom: 1px solid var(--ink); padding-top: env(safe-area-inset-top); flex: none; }
#top .stat { flex: 1; padding: 8px 10px; border-right: 1px solid var(--rule); line-height: 1.1; display: flex; flex-direction: column; }
#top .stat b { font-size: 15px; font-weight: 500; }
#top .stat.right { border-right: 0; text-align: right; align-items: flex-end; }

body.mobile #view { --view-px: 14px; position: static; inset: auto; flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px var(--view-px) 24px; background: var(--paper); background-image: var(--grain); }
#view h2 { font-size: 24px; margin: 6px 0 10px; }
#view h3 { font-size: 17px; margin: 14px 0 6px; }

#tabs { display: flex; flex: none; border-top: 1px solid var(--ink); background: var(--paper-2); padding-bottom: env(safe-area-inset-bottom); }
#tabs button { flex: 1; border: 0; border-radius: 0; background: transparent; padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; letter-spacing: .04em; color: var(--ink-3); position: relative; }
#tabs button:hover { background: transparent; color: var(--ink); }
#tabs button.on { color: var(--ink); box-shadow: inset 0 2px 0 var(--moss); }
#tabs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#tabs button.on svg { stroke: var(--moss); }
#tabs .badge { position: absolute; top: 4px; right: calc(50% - 18px); }

/* room scene */
.roomwrap { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--ink); background: #1a1815; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.roomwrap canvas { display: block; }
.tublist { margin: 6px 0 12px; } .tublist summary { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; padding: 6px 0; }
#modal2 { z-index: 55; align-items: flex-end; } #modalBox2 { max-height: 80vh; border-top: 1px solid var(--ink); }
.presets { display: flex; gap: 6px; margin: 4px 0 8px; flex-wrap: wrap; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.egg canvas { width: 100%; height: 100%; display: block; }
.egg { background: linear-gradient(#d8ccb0, #c3b592); }
.egg.open canvas { height: 68px; }
/* room */
.rack-card { background: #fff; border: 1px solid var(--rule-2); margin-bottom: 12px; box-shadow: 2px 2px 0 var(--paper-3); }
:root[data-theme="dark"] .rack-card { background: #15130f; box-shadow: 2px 2px 0 #0e0d0b; }
.rack-head { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.rack-head b { color: var(--moss); }
.tubgrid { display: grid; gap: 4px; padding: 8px; }
.tub { min-height: 42px; border: 1px solid var(--rule-2); border-radius: 3px; padding: 4px 6px; font-size: 11px; line-height: 1.2; display: flex; flex-direction: column; justify-content: center; background: var(--paper); position: relative; overflow: hidden; }
.tub.empty { color: var(--ink-3); border-style: dashed; background: transparent; justify-content: center; align-items: center; }
.tub .n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tub .w { color: var(--ink-3); font-family: var(--mono); font-size: 10px; }
.tub .dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; }
.dot.good { background: var(--moss); } .dot.bad { background: var(--brick); } .dot.warn { background: var(--amber); } .dot.info { background: var(--sky); }
.tub .idx { position: absolute; bottom: 2px; right: 5px; font-size: 9px; color: var(--ink-3); font-family: var(--mono); }

/* lists */
.row-card { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.row-card canvas { width: 78px; height: 45px; flex: none; border: 1px solid var(--rule); background: var(--thumb-bg); }
.row-card .body { flex: 1; min-width: 0; }
.row-card .t { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-card .m { font-size: 12px; color: var(--ink-2); }
.row-card .v { font-family: var(--mono); font-size: 13px; text-align: right; flex: none; }
.tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.tags .tag { margin: 0; font-size: 10px; padding: 0 5px; }
.toolbar { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.toolbar input, .toolbar select { flex: 1; min-width: 0; padding: 7px 9px; font-size: 14px; }
.tabs { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.tabs button { flex: none; }
.grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid { grid-template-columns: 1fr 1fr; } }
.specimen canvas { aspect-ratio: 52 / 26; }
.specimen dl { grid-template-columns: auto 1fr; }
select, input { font-size: 16px; } /* stops iOS zoom */

/* sheet */
#sheet { position: fixed; inset: 0; background: rgba(12, 10, 8, .55); z-index: 40; display: flex; align-items: flex-end; }
.sheet-box { width: 100%; max-height: 88vh; overflow: auto; background: var(--paper); background-image: var(--grain); border-top: 1px solid var(--ink); border-radius: 14px 14px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); }
.grip { width: 40px; height: 4px; border-radius: 2px; background: var(--rule-2); margin: 2px auto 10px; }
.sheet-box .name { font-family: var(--serif); font-size: 22px; }
.sheet-box canvas.big { width: 100%; aspect-ratio: 52 / 30; border: 1px solid var(--rule); background: var(--thumb-bg); margin: 8px 0; }
.sheet-box .actions button { flex: 1 1 45%; padding: 10px 8px; }
.sheet-box .stats { margin: 8px 0; }

/* modal + toasts on phone */
.modal { width: 100vw; max-height: 100vh; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); border: 0; }
.eggs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.egg { height: 130px; }
#toasts { left: 10px; right: 10px; bottom: calc(64px + env(safe-area-inset-bottom)); width: auto; }
.toast { font-size: 13px; }
.phone-nav-m { display: flex; border-bottom: 1px solid var(--rule-2); margin-bottom: 8px; }
.phone-nav-m button { flex: 1; border: 0; border-radius: 0; padding: 8px 0; font-size: 12px; color: var(--ink-3); position: relative; }
.phone-nav-m button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.post canvas { aspect-ratio: 52 / 26; }
.more-list button { display: block; width: 100%; text-align: left; padding: 12px; margin-bottom: 8px; }
.odds { font-size: 12px; }
.bar { margin-top: 3px; }

/* ---- game feel ---- */
#top { position: relative; }
#top .gear { flex: none; border: 0; border-left: 1px solid var(--rule); border-radius: 0; padding: 0 12px; background: transparent; min-height: 0; }
#top .gear svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; }
#dayBar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
#dayBar i { display: block; height: 100%; width: 0; background: var(--moss); transition: width .25s linear; }
#hCash.up { color: var(--moss); } #hCash.down { color: var(--brick); }
#tabs button { font-size: 10.5px; padding: 9px 0 8px; }
.roomhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rankchip { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--rule-2); border-radius: 12px; color: var(--ink-2); white-space: nowrap; }
.today { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.today::-webkit-scrollbar { display: none; }
.tcard { flex: none; width: 150px; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 0; border-left: 4px solid var(--ink); border-radius: 10px; background: var(--paper-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); min-height: 0; }
.tcard:hover { background: var(--paper-3); color: var(--ink); }
.tcard b { font-size: 14px; line-height: 1.2; } .tcard span { font-size: 11.5px; color: var(--ink-2); }
.tcard.hatch { border-color: var(--amber); } .tcard.good { border-color: var(--moss); } .tcard.bad { border-color: var(--brick); } .tcard.info { border-color: var(--sky); } .tcard.cash { border-color: #c99b3f; } .tcard.warn { border-color: var(--amber); } .tcard.quiet { border-color: var(--rule-2); }
.goals { margin: 8px 0 6px; padding: 10px 12px; border: 1px dashed var(--rule-2); border-radius: 10px; }
.goals-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.goal { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; padding: 6px 0; font-size: 13.5px; background: transparent; min-height: 0; border-radius: 0; }
.goal:hover { background: transparent; color: var(--ink); }
.goal i { width: 18px; height: 18px; border: 1.5px solid var(--rule-2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-style: normal; flex: none; }
.goal.done { color: var(--ink-3); text-decoration: line-through; } .goal.done i { background: var(--moss); border-color: var(--moss); color: #fff; }
.ach-pop { position: fixed; top: calc(70px + env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -30px); opacity: 0; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .3s; background: var(--paper); border: 1px solid var(--ink); border-left: 5px solid #c99b3f; padding: 10px 16px; z-index: 58; box-shadow: var(--shadow-6); text-align: center; min-width: 200px; }
.ach-pop.in { transform: translate(-50%, 0); opacity: 1; }
.ach-pop b { font-family: var(--serif); font-size: 18px; display: block; }
.search { width: 100%; margin: 4px 0 8px; border-radius: 10px; }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; max-height: 190px; overflow: auto; }
.pickc { border: 1px solid var(--rule); padding: 3px; display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; line-height: 1.2; text-align: left; border-radius: 6px; min-height: 0; background: transparent; }
.pickc.on { border-color: var(--moss); box-shadow: 0 0 0 2px var(--moss); }
.pickc canvas { width: 100%; aspect-ratio: 52 / 30; border-radius: 4px; }
.pickc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
canvas.shot { width: 100%; aspect-ratio: 52 / 30; display: block; border-radius: 10px; border: 1px solid var(--rule); }
.row-card { border-radius: 8px; }
.specimen { border-radius: 10px; overflow: hidden; }
button.primary { box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }

/* ---- polish ---- */
#top .stat { padding: 7px 10px 6px; }
#top .stat .lbl { font-size: 9.5px; }
#top .stat b { font-size: 14px; white-space: nowrap; }
#top .stat.right b { font-family: var(--mono); }
.pair-board.m { grid-template-columns: 1fr 1fr; gap: 8px; }
.pair-board.m .pcard { padding: 8px; gap: 4px; }
.pair-board.m .pcard .nm { font-size: 16px; }
.pair-board.m .pcard canvas { aspect-ratio: 52 / 30; }
.pair-board.m .pcard.empty { min-height: 190px; padding: 12px 8px; font-size: 13px; }
.pair-board.m .pcard.empty b { font-family: var(--serif); font-size: 16px; }
.pair-board.m .pc-actions { flex-wrap: wrap; }
.pair-cta { margin: 10px 0 6px; }
.ev { gap: 16px; } .ev b { font-size: 19px; }
.oddchip { min-width: 100px; font-size: 11.5px; }
.coming.m { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
.coming.m .meta { font-size: 12px; }
.steps { font-size: 11px; }
body.mobile .ig-top { padding-left: 6px; }
body.mobile .ig-tabs { bottom: 0; padding: 6px 0 4px; }
body.mobile .ig-logo { font-size: 22px; }
body.mobile .app-body { padding: 0; }
body.mobile #view.ig-host { padding: 0; }
body.mobile .chatform { padding: 8px 12px; }
body.mobile .chatlog { padding: 10px 12px; }
.row-card .steps { margin: 3px 0 2px; }
#bIntroAll { margin: 4px 0 8px; }

/* ---- online indicator ---- */
.dot.on { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ba55d; box-shadow: 0 0 0 2px rgba(59, 165, 93, .22); vertical-align: middle; }
.online-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-2); margin-top: 2px; }

.ev-now { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--ink); background: var(--paper-2); border-radius: 8px; margin: 6px 0 4px; }
.ev-ico { font-size: 34px; line-height: 1; }
.ev-ico .evi { width: 34px; height: 34px; }

/* ================= the board ================= */
.roomhead { align-items: flex-start; margin-bottom: 2px; }
.roomhead h2 { margin: 4px 0 2px; }
.roomhead-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.rackbox { margin: 12px 0 0; background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.rackbox > header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--rule); background: linear-gradient(rgba(0, 0, 0, .04), rgba(0, 0, 0, 0)); }
.rackbox > header b { font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rackbox > header .meta { font-size: 11.5px; white-space: nowrap; }
.rk-no { width: 22px; height: 22px; border-radius: 6px; background: var(--moss); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.rackbox.desk .rk-no { background: var(--amber); } .rackbox.inc .rk-no { background: var(--sky); }
.tubs { display: grid; gap: 6px; padding: 8px; }
.tubbox { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px 6px; min-height: 96px; border: 1.5px solid var(--rule-2); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 11px; line-height: 1.2; text-align: center; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06); transition: transform .08s ease; overflow: hidden; }
.tubbox:active { transform: scale(.96); }
.tubbox:hover { background: var(--paper); color: var(--ink); }
.tubbox canvas { width: 46px; height: 46px; display: block; }
.tubbox .tb-name { font-weight: 500; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tubbox .tb-sub { font-family: var(--mono); font-size: 10px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 3px; }
.tubbox .tb-sex { font-style: normal; display: inline-flex; margin-right: 3px; } .tubbox .tb-sex .sx { width: 11px; height: 11px; stroke-width: 2.8; } .tubbox .tb-sex.M { color: var(--sky); } .tubbox .tb-sex.F { color: #b04a7a; }
.tubbox .tb-flag { position: absolute; top: 4px; left: 4px; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 8px; background: var(--ink); color: var(--paper); max-width: calc(100% - 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tubbox .tb-flag.good { background: var(--moss); } .tubbox .tb-flag.bad { background: var(--brick); } .tubbox .tb-flag.warn { background: var(--amber); color: var(--ink); } .tubbox .tb-flag.info { background: var(--sky); }
.tubbox.good { border-color: var(--moss); } .tubbox.bad { border-color: var(--brick); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06), 0 0 0 2px rgba(139, 58, 43, .18); } .tubbox.warn { border-color: var(--amber); } .tubbox.info { border-color: var(--sky); }
.tubbox .tb-bar { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.tubbox .tb-bar i { display: block; height: 100%; background: var(--moss); }
.tubbox.empty { border-style: dashed; background: transparent; color: var(--ink-3); box-shadow: none; justify-content: center; }
.tubbox.empty .plus { font-size: 26px; line-height: 1; font-weight: 300; color: var(--ink-3); }
.tubbox.deli { background: rgba(58, 109, 140, .06); }
.tubbox.cupstack .tb-flag { left: auto; right: 4px; background: var(--sky); }
.tubbox.cupstack .cs-cups { position: absolute; left: 5px; bottom: 7px; display: flex; flex-direction: column-reverse; gap: 1px; }
.tubbox.cupstack .cs-cups i { display: block; width: 14px; height: 6px; border: 1px solid rgba(58, 109, 140, .55); border-top-width: 2px; border-radius: 1px 1px 3px 3px; background: rgba(255, 255, 255, .7); }
.tubbox.cupstack.more { justify-content: center; }
.tubbox.cupstack.more .plus { font-size: 22px; line-height: 1; font-weight: 500; color: var(--sky); }
.eggbox { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; min-height: 96px; border: 1.5px solid var(--rule-2); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 11px; line-height: 1.2; text-align: center; }
.eggbox .ring { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--sky) var(--p, 0%), var(--rule) 0); }
.eggbox .ring canvas { width: 34px; height: 34px; border-radius: 50%; background: var(--paper); }
.eggbox.ready { border-color: var(--amber); animation: eggpulse 1.2s ease-in-out infinite; } .eggbox.ready .ring { background: conic-gradient(var(--amber) 100%, var(--amber) 0); }
.eggbox.ready .tb-sub { color: var(--amber); font-weight: 700; }
@keyframes eggpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 115, 31, 0); } 50% { box-shadow: 0 0 0 5px rgba(184, 115, 31, .28); } }
.eggbox.free { border-style: dashed; background: transparent; color: var(--ink-3); } .eggbox.free .ring { background: var(--rule); opacity: .5; }
.bigcta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; margin: 12px 0 0; padding: 14px 16px; border: 1px solid var(--moss); border-radius: 12px; background: rgba(47, 93, 58, .08); color: var(--ink); }
.bigcta b { font-family: var(--serif); font-size: 18px; } .bigcta span { font-size: 12.5px; color: var(--ink-2); } .bigcta.slim { margin: 8px; width: auto; }
.today { padding: 8px 0 2px; }
.tcard { width: 138px; padding: 9px 11px; border-radius: 12px; }

/* sheet */
.sh-head { display: flex; gap: 12px; align-items: center; margin: 2px 0 10px; }
.sh-head canvas.coilbig { width: 116px; height: 116px; flex: none; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--paper), var(--paper-3)); border: 1px solid var(--rule); }
.sh-title { min-width: 0; flex: 1; } .sh-title .name { font-size: 22px; line-height: 1.1; }
.sh-primary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sh-primary button { flex: 1 1 40%; padding: 12px 10px; font-size: 15px; border-radius: 10px; }
.sh-primary button.quiet { flex: 0 0 auto; }
/* a mother on her eggs (#510): Move to incubator, or why not and a link to buy one */
.moveeggs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.moveeggs > button { flex: 1 1 auto; }
.linkish, .sh-primary button.linkish { flex: none; min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sh-primary > .meta { flex: 1 1 100%; }
.sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sh-grid button { padding: 11px 8px; border-radius: 10px; }
.growrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 12px; }
.growrow .bar { margin: 0; }
.sheet-box .loc { margin-top: 8px; }

/* more */
.me-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--paper-2); margin-bottom: 6px; }
.me-av { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--serif); font-size: 22px; display: grid; place-items: center; flex: none; }
.more-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 10px; margin-bottom: 6px; }
.sw { width: 38px; height: 22px; border-radius: 22px; background: var(--rule-2); position: relative; flex: none; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); transition: transform .15s; }
.sw.on { background: var(--moss); } .sw.on::after { transform: translateX(16px); }
.desk-link { text-decoration: none; display: block; padding: 12px; border: 1px dashed var(--rule-2); margin: 12px 0; font-size: 13px; color: var(--ink-2); }

/* tab bar */
#tabs button { padding: 8px 0 7px; gap: 2px; }
#tabs svg { width: 22px; height: 22px; }
#tabs button.on { box-shadow: none; }
#tabs button.on::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; border-radius: 0 0 3px 3px; background: var(--moss); }
.tubs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.tubbox.empty { min-height: 64px; }
.tubbox { min-height: 104px; }

/* ================= game skin ================= */
body.mobile { --gp: #f3eee4; --gp2: #ebe4d6; --gp3: #dfd5c3; --card: #fffdf8; --shadow-card: 0 2px 0 var(--gp3), 0 6px 14px rgba(40, 30, 15, .10); --r: 16px; --moss: #2f7a44; --moss-2: #3b9457; --sky: #2f6f9e; --amber: #d08a1f; --brick: #b7472f; }
:root[data-theme="dark"] body.mobile { --gp: #1f1d1a; --gp2: #27241f; --gp3: #12100e; --card: #2b2823; --shadow-card: 0 2px 0 #0e0d0b, 0 6px 14px rgba(0, 0, 0, .35); --moss: #4e9f62; --moss-2: #63b476; --sky: #6ca0c2; --amber: #e0a044; --brick: #d3624c; }
body.mobile, body.mobile #view { background: var(--gp); background-image: radial-gradient(circle at 20% -10%, rgba(255, 255, 255, .45), transparent 55%), var(--grain); }
body.mobile h1, body.mobile h2, body.mobile h3, body.mobile h4, body.mobile .name, body.mobile .sheet-box .name, body.mobile .tcard b, body.mobile .bigcta b, body.mobile .ev-now h3, body.mobile .rankchip { font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; font-style: normal; }
body.mobile #view h2 { font-size: 26px; margin: 6px 0 8px; }
body.mobile .lbl, body.mobile .section { font-family: var(--sans); font-weight: 700; letter-spacing: .06em; font-size: 11px; }
body.mobile .section::after { height: 2px; background: var(--gp3); border-radius: 2px; }
body.mobile .meta { font-size: 12.5px; }
body.mobile .empty { font-family: var(--sans); font-style: normal; font-weight: 500; color: var(--ink-3); }
/* buttons: pushable */
body.mobile button { border-radius: 12px; border: 0; background: var(--card); color: var(--ink); box-shadow: 0 3px 0 var(--gp3); font-weight: 600; min-height: 40px; padding: 8px 14px; transition: transform .06s ease, box-shadow .06s ease; }
body.mobile button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gp3); }
body.mobile button:hover { background: var(--card); color: var(--ink); }
body.mobile button.primary { background: linear-gradient(var(--moss-2), var(--moss)); color: #fff; box-shadow: 0 3px 0 #1f5230; }
body.mobile button.primary:hover { background: linear-gradient(var(--moss-2), var(--moss)); color: #fff; }
body.mobile button.danger { background: linear-gradient(#cf5a41, var(--brick)); color: #fff; box-shadow: 0 3px 0 #7a2b1c; }
body.mobile button.quiet { background: transparent; box-shadow: none; color: var(--ink-2); }
body.mobile button.small { min-height: 32px; padding: 5px 12px; font-size: 12.5px; border-radius: 10px; box-shadow: 0 2px 0 var(--gp3); }
body.mobile button.icon { box-shadow: none; background: transparent; min-height: 0; }
body.mobile .chip { border: 0; background: var(--gp2); box-shadow: 0 2px 0 var(--gp3); border-radius: 12px; padding: 5px 12px; font-weight: 600; min-height: 32px; }
body.mobile .chip.on { background: var(--ink); color: var(--paper); box-shadow: 0 2px 0 #000; }
body.mobile .chip.tiny { min-height: 26px; padding: 2px 9px; }
body.mobile .tabs button { background: transparent; box-shadow: none; border-radius: 0; font-weight: 600; min-height: 0; }
body.mobile .tabs button.on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--moss); }
/* header HUD */
body.mobile #top { background: var(--ink); color: var(--paper); border-bottom: 0; padding: 8px 10px 8px; gap: 6px; align-items: center; }
:root[data-theme="dark"] body.mobile #top { background: #15130f; }
body.mobile #top .stat { flex: 1; border: 0; padding: 5px 8px; display: flex; flex-direction: row; align-items: center; gap: 7px; background: rgba(255, 255, 255, .08); border-radius: 12px; line-height: 1; min-width: 0; }
body.mobile #top .stat > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.mobile #top .stat .lbl { color: rgba(243, 238, 228, .55); font-size: 9px; letter-spacing: .08em; }
body.mobile #top .stat b { color: var(--paper); font-size: 14px; font-weight: 700; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; }
body.mobile #top .stat.cash b { color: #ffd66b; }
body.mobile #top .stat.right { align-items: center; text-align: left; flex-direction: row; }
body.mobile #top .hi { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .12); }
body.mobile #top .hi svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: var(--paper); }
body.mobile #top .hi.coin { background: #ffd66b; } body.mobile #top .hi.coin svg { color: #5a3d06; }
body.mobile #top .online-pill { display: none; }
body.mobile #top .gear { border: 0; background: rgba(255, 255, 255, .1); border-radius: 12px; width: 40px; height: 40px; padding: 0; box-shadow: none; display: grid; place-items: center; }
body.mobile #top .gear svg { stroke: var(--paper); }
body.mobile #dayBar { bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); } body.mobile #dayBar i { background: #ffd66b; }
body.mobile #hCash.up { color: #9ff0a8 !important; } body.mobile #hCash.down { color: #ff9a86 !important; }
/* tab bar: colored tiles */
body.mobile #tabs { border-top: 0; background: var(--card); box-shadow: 0 -1px 0 var(--gp3), 0 -8px 20px rgba(40, 30, 15, .08); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
body.mobile #tabs button { border-radius: 12px; background: transparent; box-shadow: none; min-height: 0; padding: 4px 0 3px; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
body.mobile #tabs button .tile { width: 34px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--gp2); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); transition: transform .12s ease, background .12s ease; }
body.mobile #tabs button .tile svg { width: 19px; height: 19px; stroke: var(--ink-2); stroke-width: 1.9; }
body.mobile #tabs button.on { color: var(--ink); }
body.mobile #tabs button.on::before { display: none; }
body.mobile #tabs button.on .tile { background: var(--tc); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .18); transform: translateY(-2px); }
body.mobile #tabs button.on .tile svg { stroke: #fff; }
body.mobile #tabs .badge { top: 0; right: calc(50% - 22px); }
/* cards */
body.mobile .rackbox, body.mobile .specimen, body.mobile .me-card, body.mobile .ev-now, body.mobile .goals, body.mobile .restock, body.mobile .expo-card { background: var(--card); border: 0; border-radius: var(--r); box-shadow: var(--shadow-card); }
body.mobile .rackbox > header { background: transparent; border-bottom: 2px solid var(--gp2); padding: 10px 12px; }
body.mobile .rackbox > header b { font-weight: 700; }
body.mobile .rk-no { border-radius: 8px; width: 26px; height: 26px; font-size: 12px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
body.mobile .tubbox, body.mobile .eggbox { background: var(--gp); border: 0; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--gp3), 0 3px 0 var(--gp3); }
body.mobile .tubbox.good { box-shadow: inset 0 0 0 2px var(--moss), 0 3px 0 var(--gp3); } body.mobile .tubbox.bad { box-shadow: inset 0 0 0 2px var(--brick), 0 3px 0 var(--gp3); } body.mobile .tubbox.warn { box-shadow: inset 0 0 0 2px var(--amber), 0 3px 0 var(--gp3); } body.mobile .tubbox.info { box-shadow: inset 0 0 0 2px var(--sky), 0 3px 0 var(--gp3); }
body.mobile .tubbox:active, body.mobile .eggbox:active { transform: translateY(2px) scale(.98); box-shadow: inset 0 0 0 2px var(--gp3), 0 1px 0 var(--gp3); }
body.mobile .tubbox.empty { background: transparent; box-shadow: inset 0 0 0 2px var(--gp3); border: 0; } body.mobile .tubbox.empty .plus { color: var(--ink-3); }
body.mobile .tubbox .tb-name { font-weight: 700; font-size: 11.5px; }
body.mobile .tubbox .tb-flag { border-radius: 8px; font-weight: 700; }
body.mobile .eggbox.ready { box-shadow: inset 0 0 0 2px var(--amber), 0 3px 0 var(--gp3); }
body.mobile .row-card { background: var(--card); border: 0; border-radius: 14px; box-shadow: var(--shadow-card); padding: 10px; margin-bottom: 8px; }
body.mobile .row-card canvas { border: 0; border-radius: 10px; }
body.mobile .row-card .t { font-weight: 700; }
body.mobile .tcard { background: var(--card); border: 0; border-left: 0; box-shadow: var(--shadow-card); border-radius: 14px; padding: 10px 12px 10px 14px; position: relative; overflow: hidden; }
body.mobile .tcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ink); }
body.mobile .tcard.hatch::before, body.mobile .tcard.warn::before { background: var(--amber); } body.mobile .tcard.good::before { background: var(--moss); } body.mobile .tcard.bad::before { background: var(--brick); } body.mobile .tcard.info::before { background: var(--sky); } body.mobile .tcard.cash::before { background: #c99b3f; } body.mobile .tcard.quiet::before { background: var(--gp3); }
body.mobile .tcard b { font-size: 14.5px; }
body.mobile .goals { border: 0; }
body.mobile .goal i { border-width: 2px; }
body.mobile .rankchip { border: 0; background: var(--ink); color: var(--paper); border-radius: 10px; font-family: var(--mono); font-weight: 700; padding: 4px 9px; }
body.mobile .stats { gap: 6px; background: transparent; border: 0; }
body.mobile .stats div { background: var(--card); border-radius: 12px; box-shadow: var(--shadow-card); padding: 8px 10px; }
body.mobile .stats b { font-weight: 700; }
body.mobile .tag { border-radius: 8px; border-width: 1.5px; font-weight: 600; background: var(--card); }
body.mobile .tag.rare { background: #c99b3f; border-color: #a87a22; color: #fff; font-weight: 700; } /* rare hatches (#1012) */
body.mobile .pill { border-radius: 8px; }
body.mobile .gene { border-radius: 8px; border-width: 1.5px; font-weight: 600; }
/* sheet + modals */
body.mobile .sheet-box { border-top: 0; border-radius: 22px 22px 0 0; background: var(--gp); box-shadow: 0 -10px 30px rgba(0, 0, 0, .3); }
body.mobile .grip { background: var(--gp3); width: 44px; height: 5px; }
body.mobile .sh-head canvas.coilbig { border: 0; box-shadow: inset 0 0 0 3px var(--card), 0 3px 0 var(--gp3); background: var(--card); }
body.mobile .sh-primary button { font-size: 15px; font-weight: 700; }
body.mobile .modal { background: var(--gp); border-radius: 0; }
body.mobile .dialog { border-radius: 22px 22px 0 0; }
body.mobile #modalBox2 { border-top: 0; border-radius: 22px 22px 0 0; background: var(--gp); box-shadow: 0 -10px 30px rgba(0, 0, 0, .3); }
body.mobile input, body.mobile select, body.mobile textarea { border-radius: 12px; border: 2px solid var(--gp3); background: var(--card); padding: 9px 12px; }
body.mobile .toast { border-radius: 12px; border: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); font-weight: 600; }
body.mobile .bigcta { border: 0; background: linear-gradient(var(--moss-2), var(--moss)); color: #fff; box-shadow: 0 4px 0 #1f5230; border-radius: 16px; }
body.mobile .bigcta b, body.mobile .bigcta span { color: #fff; }
body.mobile .more-list button { box-shadow: var(--shadow-card); background: var(--card); border-radius: 14px; }
body.mobile .me-av { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3); }
body.mobile .badge { font-weight: 700; box-shadow: 0 0 0 2px var(--card); }
body.mobile .restock .rs-bar { height: 8px; border-radius: 4px; } body.mobile .restock .rs-bar i { border-radius: 4px; }
body.mobile .bar { height: 8px; border-radius: 4px; overflow: hidden; } body.mobile .bar i { border-radius: 4px; }
body.mobile .quick .chip span { color: inherit; opacity: .7; }
body.mobile .toolbar input { flex: 1; }
/* skin fixes: header fits at 375px, goal rows are not buttons */
body.mobile #top { padding: 8px 8px; gap: 5px; }
body.mobile #top .stat { padding: 5px 7px; gap: 6px; }
body.mobile #top .hi { width: 22px; height: 22px; border-radius: 7px; } body.mobile #top .hi svg { width: 14px; height: 14px; }
body.mobile #top .stat b { font-size: 12.5px; letter-spacing: -.02em; }
body.mobile #top .stat .lbl { font-size: 8.5px; }
body.mobile #top #hOnline, body.mobile #top .online-pill { display: none !important; }
body.mobile #top .gear { width: 36px; height: 36px; }
@media (max-width: 360px) { body.mobile #top .stat .lbl { display: none; } }
body.mobile .goal { box-shadow: none; background: transparent; border-radius: 0; min-height: 0; padding: 7px 0; font-weight: 500; }
body.mobile .goal:active { transform: none; }
body.mobile .tcard:active { transform: translateY(1px); }
body.mobile #top .stat b, body.mobile #top .stat b.num, body.mobile #top #hWorth, body.mobile #top #hDate { color: var(--paper) !important; opacity: 1 !important; }
body.mobile #top .stat.cash b { color: #ffd66b !important; }
body.mobile #top .stat.day .lbl { display: none; }
body.mobile #top .stat.day b { font-size: 12px; white-space: nowrap; overflow: visible; text-overflow: clip; }
body.mobile #top .stat { overflow: hidden; }
/* header text is always light: the bar is dark in both themes */
body.mobile #top { background: #1e1a15; }
body.mobile #top .stat b, body.mobile #top .stat b.num, body.mobile #top #hWorth, body.mobile #top #hDate { color: #f3eee4 !important; }
body.mobile #top .stat .lbl { color: rgba(243, 238, 228, .55) !important; }
body.mobile #top .hi svg, body.mobile #top .gear svg { stroke: #f3eee4; color: #f3eee4; }
body.mobile #top .hi.coin svg { stroke: #5a3d06; color: #5a3d06; }
body.mobile #top .stat.day b { letter-spacing: -.03em; }


.ln.m h2 { margin: 6px 0 2px; }
.ln-steps.m { display: flex; gap: 6px; margin: 4px 0 10px; }
.ln-steps.m .ln-step { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--card); box-shadow: var(--shadow-card); font-size: 12px; opacity: .55; }
.ln-steps.m .ln-step.on { opacity: 1; } .ln-steps.m .ln-step.done { opacity: .85; }
.ln-steps.m .ln-step i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gp3); font-style: normal; font-family: var(--mono); font-size: 11px; }
.ln-steps.m .ln-step.on i { background: var(--ink); color: var(--paper); } .ln-steps.m .ln-step.done i { background: var(--moss); color: #fff; }
.ln.m .row-card { cursor: pointer; } .ln.m .row-card.on { box-shadow: 0 0 0 2px var(--moss), var(--shadow-card); }
.ln-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; }
.ln-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.ln-summary { margin-top: 12px; padding: 12px; border-radius: 12px; background: rgba(47, 122, 68, .12); display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.ln-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .ln-foot span { flex: 1; }
/* ================= sign-in page (#706): the desktop landing, set for a phone ================= */
.pv { width: 20px; height: 20px; flex: none; }
body.mobile #auth.overlay { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; background: #f3eee4; backdrop-filter: none; }
.ml { --paper: #f3eee4; --paper-2: #e9e2d4; --paper-3: #ddd4c2; --ink: #1e1a15; --ink-2: #5d564c; --ink-3: #8d8578; --rule: #cfc6b3; --rule-2: #b9ae98; --moss: #2f5d3a; --moss-2: #3e7a4c; --brick: #8b3a2b;
  --thumb-bg: radial-gradient(ellipse at 50% 58%, #aaa398 0%, #8a8479 62%, #736d64 100%);
  min-height: 100%; color: var(--ink); background: var(--paper); background-image: var(--grain); font-family: var(--sans); }
body.mobile .ml h1, body.mobile .ml h2, body.mobile .ml h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
body.mobile #auth .ml button { min-height: 46px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink); box-shadow: none; font: 500 15px var(--sans); transform: none; }
body.mobile #auth .ml button:active { background: var(--ink); color: var(--paper); }
body.mobile #auth .ml button.primary { background: var(--moss); border-color: var(--moss); color: #fff; }
body.mobile #auth .ml button.primary:active { background: var(--moss-2); }
/* the title: dark, like the desktop's title screen with no showroom behind it */
.ml-title { --ink: #f3eee4; --ink-2: #d8d0c0; --ink-3: #a89f8f; --rule: rgba(243, 238, 228, .22); --rule-2: rgba(243, 238, 228, .4);
  color: var(--ink); background: linear-gradient(to bottom, #2b2723, #1c1a16); padding: max(20px, env(safe-area-inset-top)) 18px 18px; }
.ml-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ml-brand { font-family: var(--serif); font-size: clamp(46px, 14.5vw, 64px); line-height: .92; letter-spacing: -.035em; font-weight: 600; font-variation-settings: "opsz" 144; white-space: nowrap; }
.ml-brand i { font-style: italic; font-weight: 400; color: #8fc79c; }
.ml-desk { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
body.mobile .ml .ml-sub { margin: 10px 0 0; font: 400 10.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ml-showcase { margin: 22px 0 0; }
.ml-seg { display: inline-flex; margin-bottom: 10px; border: 1px solid var(--rule-2); }
body.mobile #auth .ml .ml-seg button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--ink-2); font: 500 13px var(--sans); }
body.mobile #auth .ml .ml-seg button.on { background: #f3eee4; color: #1e1a15; }
.ml-shots { display: flex; gap: 10px; margin: 0 -18px; padding: 0 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ml-shots::-webkit-scrollbar { display: none; }
.ml-shot { position: relative; flex: none; width: calc(100% - 22px); scroll-snap-align: start; display: block; line-height: 0; border: 1px solid var(--rule-2); background: #15130f; }
.ml-shot img { width: 100%; height: auto; display: block; }
.ml-shots.desktop .ml-shot img { aspect-ratio: 1440 / 900; }
/* the phone set: portrait shots, two to a screen, in a plain dark bezel */
.ml-shots.phone .ml-shot { width: calc(50% - 14px); border: 4px solid #0d0c0a; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--rule-2); }
.ml-shots.phone .ml-shot img { aspect-ratio: 780 / 1688; }
.ml-shots.phone .ml-ondesk { top: 10px; bottom: auto; font-size: 9.5px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.ml-ondesk { position: absolute; top: 8px; left: 8px; padding: 3px 8px; background: #f3eee4; color: #1e1a15; font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.ml-showcase figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 9px; }
#apShotCap { min-height: 2.6em; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.3; color: var(--ink); }
.ml-dots { display: inline-flex; gap: 5px; flex: none; } .ml-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-2); } .ml-dots i.on { background: #8fc79c; }
.ml-desknote { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.ml-fresh canvas { width: 100%; height: auto; aspect-ratio: 52 / 30; display: block; background: var(--thumb-bg); border: 1px solid var(--rule); }
.ml-h1 { margin: 18px 0 16px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 25px; line-height: 1.2; }
.ml-cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
body.mobile #auth .ml .ml-cta button.ml-go { min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #4f9a63; border: 0; border-bottom: 4px solid #2f6b40; border-radius: 3px; color: #fff; font: 600 19px/1.15 var(--sans); letter-spacing: .01em; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
body.mobile #auth .ml .ml-cta button.ml-go small { font: 400 12px/1.3 var(--sans); letter-spacing: .02em; color: rgba(255, 255, 255, .82); }
body.mobile #auth .ml .ml-cta button.ml-go:active { background: #448856; border-bottom-width: 2px; margin-top: 2px; }
.ml-or { margin: 0; text-align: center; font-size: 14px; color: var(--ink-2); }
body.mobile #auth .ml .ml-link { min-height: 40px; padding: 0 4px; border: 0; background: transparent; color: var(--ink); font: 500 14px var(--sans); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); }
body.mobile #auth .ml .ml-link:active { background: transparent; color: #8fc79c; }
body.mobile #auth .ml-title button { border-color: var(--rule-2); }
body.mobile #auth .ml-title button.primary { background: #3e7a4c; border-color: #3e7a4c; }
.ml-title .live { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 11.5px; flex-direction: column; gap: 3px; }
.ml-title .live .lbl::before { background: #8fc79c; }
/* the paper below */
.ml-paper { padding: 22px 18px calc(92px + env(safe-area-inset-bottom)); }
body.mobile .ml .auth-card { width: auto; min-height: 0; padding: 20px 18px 18px; gap: 12px; justify-content: flex-start; background: var(--paper-2); border: 1px solid var(--ink); border-top: 6px solid var(--moss); border-radius: 0; box-shadow: none; }
body.mobile .ml .auth-card h3 { font-size: 25px; font-weight: 500; }
.ml .auth-card > .meta { margin: -6px 0 0; font-size: 13px; line-height: 1.45; }
.ml .auth-tabs { display: flex; border-bottom: 1px solid var(--ink); }
body.mobile #auth .ml .auth-tabs button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--ink-3); font-size: 14px; }
body.mobile #auth .ml .auth-tabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.ml .auth-card label { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); gap: 6px; }
body.mobile #auth .ml input:not([type=checkbox]) { width: 100%; min-height: 46px; padding: 10px 12px; font-size: 16px; border: 1px solid var(--rule-2); border-radius: 2px; background: #fff; color: var(--ink); }
body.mobile #auth .ml input:not([type=checkbox]):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pw-wrap { position: relative; display: block; }
body.mobile #auth .ml .pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--ink-2); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
body.mobile #auth .ml .pw-eye:active { background: transparent; color: var(--ink); }
body.mobile #auth .ml #authPass { padding-right: 64px; }
body.mobile #auth .ml input[type=checkbox] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0 8px 0 0; flex: none; vertical-align: -4px; border: 1.5px solid var(--rule-2); border-radius: 3px; background: #fff; }
body.mobile #auth .ml input[type=checkbox]:checked { border-color: var(--moss); }
.ml .auth-card label.agree { display: block; text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
body.mobile #auth .ml #authBtn { min-height: 50px; font-size: 16px; }
.ml .auth-err:empty { display: none; }
.ml .forgot-link { background: none; border: 0; padding: 4px 0; margin: 0 0 6px; font-size: 13px; color: inherit; opacity: .8; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; } /* (#1357) */
.ml .oauth-btns { flex-direction: column; gap: 8px; }
body.mobile #auth .ml .oauth-btns a { min-height: 46px; border: 1px solid var(--rule-2); border-radius: 2px; background: #fff; color: var(--ink); font-size: 14.5px; }
body.mobile #auth .ml .oauth-btns a:active { border-color: var(--ink); }
.ml .captcha { grid-template-columns: 1fr; gap: 10px; padding: 12px; border: 1px solid var(--rule); background: var(--paper); }
.ml .captcha .cap-img { grid-row: auto; } .ml .captcha .cap-img img { width: 100%; height: auto; }
body.mobile #auth .ml #capNew { min-height: 38px; font-size: 13px; border-color: var(--rule-2); }
.ml .fine { font-size: 11.5px; }
/* roll the genes */
.ml-parents { position: relative; container-type: inline-size; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ml-parent { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.ml-parent canvas { width: 100%; height: auto; aspect-ratio: 52 / 30; display: block; background: var(--thumb-bg); border: 1px solid var(--rule); }
.ml-parent figcaption { flex: 1; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.ml-parent .pname { font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1.2; }
.ml-parent .pval { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
body.mobile #auth .ml .ml-reroll { min-height: 36px; margin-top: 8px; padding: 0 10px; font-size: 13px; border-color: var(--rule-2); }
.ml-cross { position: absolute; left: 50%; top: calc((50cqw - 6px) * 30 / 52 / 2); transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--rule-2); font: italic 400 18px/1 var(--serif); color: var(--ink-2); }
.ml-odds { margin: 16px 0 14px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.ml-odds:empty { display: none; }
.ml-odds-h { margin-bottom: 4px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-3); }
.ml-odd { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); }
.ml-odd:last-child { border-bottom: 1px solid var(--rule); }
.ml-odd i, .ml-odds b { font-style: normal; font-family: var(--mono); font-weight: 500; color: var(--ink); }
.ml-odd.more span { color: var(--ink-3); }
body.mobile #auth .ml .ml-pair { width: 100%; min-height: 48px; font-size: 16px; }
body.mobile #auth .ml button:disabled { opacity: .55; }
.ml-clutch:empty { display: none; }
.ml-clutch { margin-top: 14px; }
.ml-clutch .dcount { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--ink-2); margin-bottom: 10px; }
.ml-clutch .dcount b { font-weight: 500; color: var(--ink); }
.ml-eggs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ml .degg { width: auto; min-height: 132px; }
#auth .ml .degg.open { background: #fff; padding: 5px 5px 8px; gap: 4px; border-color: var(--rule-2); box-shadow: none; }
#auth .ml .degg.open.keep { border-color: var(--moss); box-shadow: inset 0 0 0 2px var(--moss); }
#auth .ml .degg.open.slug { background: var(--paper-2); justify-content: center; color: var(--ink-3); }
.ml-keep { position: absolute; top: 9px; left: 9px; z-index: 1; padding: 2px 7px; background: var(--moss); color: #fff; font: 500 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ml .degg.open canvas { width: 100%; height: auto; aspect-ratio: 52 / 30; display: block; background: var(--thumb-bg); border: 1px solid var(--rule); }
#auth .ml .degg .n { font-size: 12px; line-height: 1.25; padding: 0 4px; color: var(--ink); }
#auth .ml .degg .v { font-size: 11.5px; color: var(--ink-2); }
.ml-sx.F { color: #a2465e; } .ml-sx.M { color: #3a6d8c; }
.ml-demo + .auth-card { margin-top: 36px; }
.ml-sec { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--ink); }
.ml-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin-bottom: 14px; }
body.mobile .ml .ml-head h2 { margin: 0; font-size: 27px; line-height: 1.1; }
.ml-fresh { display: flex; gap: 12px; margin: 0 -18px; padding: 0 18px 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 0 18px; }
.ml-fresh::-webkit-scrollbar { display: none; }
.ml-fresh figure { flex: none; width: 156px; margin: 0; scroll-snap-align: start; }
.ml-fresh figcaption { margin-top: 5px; font-size: 12.5px; line-height: 1.3; }
.ml-fresh figcaption .meta { display: block; }
.ml-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.ml-step svg { width: 100%; aspect-ratio: 240 / 170; display: block; color: var(--ink); overflow: visible; }
.ml-step svg :is(path, rect, ellipse, circle, line, polyline) { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ml-step.on svg :is(path, rect, ellipse, circle, line, polyline) { animation: ink 1s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(var(--i, 0) * .12s); }
.ml-step svg text { opacity: 0; font: 500 13px var(--mono); fill: currentColor; }
.ml-step.on svg text { animation: fadein .5s forwards; animation-delay: calc(var(--i, 0) * .12s + .9s); }
.ml-step.on .pull { animation: pull 1s 1.4s cubic-bezier(.3, .7, .3, 1) forwards; }
.ml-step .tag { opacity: 0; } .ml-step.on .tag { animation: fadein .5s forwards; animation-delay: calc(var(--i, 0) * .5s + 1.8s); }
.ml-step .cap { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.ml-step .cap b { display: block; margin-bottom: 2px; font-family: var(--serif); font-size: 16.5px; font-weight: 500; color: var(--ink); }
.ml-step .num { float: left; margin-right: 5px; font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.ml-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.ml-row:last-child { border-bottom: 1px solid var(--rule); }
.ml-row .rank { font-family: var(--mono); color: var(--ink-3); }
.ml-row .ml-who { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-row .num { font-family: var(--mono); }
.ml-row .meta { grid-column: 2 / -1; font-size: 12px; }
.ml .land-faq { max-width: none; margin-top: 36px; }
.ml .land-faq summary { padding: 13px 28px 13px 0; font-size: 15px; }
.ml .land-faq details p { font-size: 14px; }
.ml-foot { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.ml-foot p { margin: 0; }
.ml-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.ml-foot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
body.mobile #auth .ml .ml-sticky button.primary { background: #4f9a63; border: 0; border-bottom: 3px solid #2f6b40; font-size: 16px; font-weight: 600; }
.ml-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1.9fr 1fr; gap: 8px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); background: var(--paper-2); border-top: 1px solid var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .ml-step svg :is(path, rect, ellipse, circle, line, polyline) { stroke-dashoffset: 0; animation: none !important; }
  .ml-step svg text, .ml-step .tag { opacity: 1; animation: none !important; }
  .ml-step.on .pull { animation: none; }
}

/* free tubs */
body.mobile .spacebar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; padding: 6px; margin: 8px 0 2px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-card); min-height: 0; }
body.mobile .spacebar:active { transform: translateY(1px); }
.spacebar .sp { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 10px; background: var(--gp); }
.spacebar .sp b { font-family: var(--mono); font-size: 20px; line-height: 1; color: var(--moss); }
.spacebar .sp i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); }
.spacebar .sp small { font-size: 10px; color: var(--ink-3); }
.spacebar .sp.full b { color: var(--brick); } .spacebar .sp.none { opacity: .5; } .spacebar .sp.none b { color: var(--ink-3); }
.space-warn { font-size: 12px; font-weight: 600; color: var(--amber); margin: 4px 2px 0; }

/* Hatch composer, game-styled for the phone */
body.mobile .pc-modes { background: var(--gp3); border-radius: 14px; padding: 4px; gap: 4px; }
body.mobile .pc-modes button { min-height: 36px; padding: 6px 4px; box-shadow: none; background: transparent; color: var(--ink-2); font-size: 13px; border-radius: 10px; }
body.mobile .pc-modes button.on, body.mobile .pc-modes button.on:hover { background: linear-gradient(var(--moss-2), var(--moss)); color: #fff; box-shadow: 0 2px 0 #1f5230; }
body.mobile .pc-scenes { gap: 8px; }
body.mobile .pc-scenes button { width: 76px; min-height: 0; padding: 4px; box-shadow: 0 2px 0 var(--gp3); font-size: 10.5px; }
body.mobile .pc-scenes button.on, body.mobile .pc-scenes button.on:hover { background: var(--card); box-shadow: 0 0 0 3px var(--moss-2); color: var(--ink); }
body.mobile .pc-filters { gap: 6px; }
body.mobile .pc-filters button { min-height: 32px; padding: 5px 13px; font-size: 13px; border-radius: 999px; box-shadow: 0 2px 0 var(--gp3); }
body.mobile .pc-filters button.on, body.mobile .pc-filters button.on:hover { background: var(--ink); color: var(--paper); }
body.mobile .pc-clutch { min-height: 0; padding: 10px 12px; box-shadow: 0 2px 0 var(--gp3); }
body.mobile .pc-clutch.on, body.mobile .pc-clutch.on:hover { box-shadow: 0 0 0 3px var(--moss-2); }

/* Mine: multi-select */
.selbar.m { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.row-card .mrow-check { width: 20px; height: 20px; flex: none; margin-right: 6px; }
.row-card.picked { box-shadow: 0 0 0 3px var(--moss-2); }
/* links in the More menu look like its buttons */
body.mobile .more-list a.button-link { display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: 12px; margin-bottom: 6px; border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); font-weight: 600; text-decoration: none; justify-content: flex-start; }

/* a close button every phone pop-up has, above whatever it shows */
#modalClose { display: none; }
body.mobile #modalClose { display: grid; place-items: center; position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 60; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; font-size: 26px; line-height: 1; background: var(--card); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
body.mobile #modalBox { padding-top: 58px; }

/* the animal card: a sticky top with the grip and a close button, and drag-down to close */
.sheet-top { position: sticky; top: -8px; z-index: 3; margin: -8px -16px 6px; padding: 8px 16px 2px; min-height: 48px; box-sizing: border-box; background: var(--paper); touch-action: none; }
body.mobile .sheet-top { background: var(--gp); border-radius: 22px 22px 0 0; }
.sheet-top .grip { margin: 4px auto 10px; }
.sheet-x { position: absolute; top: 8px; right: 12px; width: 36px; height: 36px; min-height: 0 !important; padding: 0 !important; border-radius: 50%; display: grid; place-items: center; font-size: 24px; line-height: 1; }
body.mobile .sheet-x { background: var(--card); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.25); }

/* the sales rep auto-accept */

/* Sales → Wanted on the phone: the desktop card (style.css .wad) stacked for a narrow screen */
body.mobile .wtools { margin-bottom: 6px; }
body.mobile .wfill { margin: 0 0 10px; }
body.mobile .wad { border-radius: 8px; padding: 8px 10px 4px; }
body.mobile .wad .m { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
body.mobile .wpick { flex-wrap: nowrap; font-size: 13px; line-height: 1.35; }
body.mobile .wpick button { flex: none; }
body.mobile .wrow { grid-template-columns: minmax(0, 1fr) 52px 64px auto; gap: 8px; padding: 6px 0; }
body.mobile .wrow .wgain { font-size: 11px; }
/* the scope line, each fit's role and project, the Undecided fold's two buttons (#664) */
body.mobile .wscope { margin: 0 0 6px; font-size: 12px; }
body.mobile .wfillnote { margin: 4px 0 2px; font-size: 11.5px; } /* (#1364) */
body.mobile .wfrom { margin: 3px 0 8px; font-size: 11.5px; text-align: center; }
body.mobile .wtags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0; }
body.mobile .wtags .pj-fit { margin: 0; font-size: 10.5px; }
body.mobile .wrow .wacts { display: flex; flex-direction: column; gap: 4px; }
body.mobile .wund-rows { border-top-style: dashed; }
body.mobile .dlg-check input { -webkit-appearance: checkbox; appearance: auto; width: 22px; height: 22px; padding: 0; border-radius: 4px; flex: none; }
/* Season board (#17) */
.sb-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; }
.sb-bar [data-sclear] { margin-left: auto; } /* Clear all plans (#310): its own line at the right on a narrow phone */
.sb-m { cursor: pointer; } .sb-m .m { margin-top: 3px; } .sb-m .tag.st { font-weight: 600; margin: 0; }
body.mobile .sb-bar .seg { border-radius: 10px; overflow: hidden; } body.mobile .sb-bar .seg button { min-height: 30px; padding: 0 10px; font-size: 12px; }
.mp-m { cursor: pointer; } .mp-m .tags { margin-top: 3px; } .mp-m .tags .tag { margin: 0 4px 0 0; }
.mp-m.on { box-shadow: inset 3px 0 0 var(--moss); padding-left: 8px; cursor: default; } .mp-m.off { opacity: .5; }
.mp-m .mp-load.warn { color: var(--amber); font-weight: 600; } /* near the plan cap (#804) */
.sb-m .v { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.sb-m { align-items: flex-start; }
.sb-m-pics { flex: none; display: flex; flex-direction: column; gap: 4px; }
.row-card .sb-m-pics canvas, .sb-m-slot { width: 60px; height: 35px; }
.sb-m-slot { display: block; border: 1px dashed var(--rule-2); border-radius: 10px; opacity: .7; }

/* a dying animal: the loudest card on the room screen */
.today .tcard.dying { background: #9e2a1f; border-color: #c0392b; color: #fff; animation: cashpulse 1.6s ease-in-out infinite; }
.today .tcard.dying b { color: #fff; }
.today .tcard.dying span { color: #ffd9d2; }
@media (prefers-reduced-motion: reduce) { .today .tcard.dying { animation: none; } }
/* the shop search on the phone */
.shop-search.m { margin: 4px 0 12px; border-radius: 12px; }
.shop-search.m input { width: auto; flex: 1; border: 0; background: transparent; box-shadow: none; padding: 12px 0; font-size: 16px; margin: 0; }
:root[data-theme="dark"] body.mobile .shop-search.m input { background: transparent; } /* the dark theme's field colour made a dark box inside the search (#930) */
/* expo: novice class "Why not?" list and the N on novice medals (style.css has the base .nov-mark) */
.why-not { margin: 4px 0 8px; font-size: 13px; }
.why-not summary { cursor: pointer; color: var(--ink-3); padding: 4px 0; }
.row-card .nov-mark { margin-top: 10px; margin-left: -8px; width: 13px; height: 13px; font-size: 8.5px; vertical-align: bottom; }
/* the goals card's round swap button, not a full phone button */
#view .dg-swap { width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; border: 1px solid var(--rule-2); transform: none; }
#view .dg-swap:active { background: var(--paper-2); }

/* ================= phone polish (#260): flatter surfaces, softer edges, quieter empties ================= */
/* buttons and chips: a soft border and a press, not a painted ledge */
body.mobile button, body.mobile .button-link { box-shadow: none; border: 1px solid var(--gp3); background: var(--card); transition: transform .08s ease, background .12s ease; }
body.mobile button:active { transform: scale(.97); box-shadow: none; }
body.mobile button.primary { background: var(--moss); border-color: var(--moss); box-shadow: 0 4px 12px color-mix(in srgb, var(--moss) 30%, transparent); }
body.mobile button.primary:hover { background: var(--moss); }
body.mobile button.danger { background: var(--brick); border-color: var(--brick); box-shadow: none; }
body.mobile button.quiet, body.mobile button.icon { border-color: transparent; background: transparent; }
body.mobile button.small { box-shadow: none; }
body.mobile .chip { box-shadow: none; border: 1px solid var(--gp3); background: var(--card); border-radius: 999px; }
body.mobile .chip.on { box-shadow: none; border-color: var(--ink); }
body.mobile .tabs button, body.mobile #tabs button { border: 0; }
:root[data-theme="dark"] body.mobile { --gp3: #3a352e; }
/* cards: one soft shadow */
body.mobile { --shadow-card: 0 1px 2px rgba(40, 30, 15, .08), 0 6px 18px rgba(40, 30, 15, .07); }
:root[data-theme="dark"] body.mobile { --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .25); }
body.mobile .rackbox, body.mobile .specimen, body.mobile .me-card, body.mobile .ev-now, body.mobile .goals, body.mobile .restock, body.mobile .expo-card, body.mobile .row-card, body.mobile .tcard, body.mobile .stats div { border: 1px solid var(--gp3); }
body.mobile .rk-no { box-shadow: none; }
/* section headings: a hairline, not a black bar */
body.mobile .section::after { height: 1px; background: var(--gp3); }
/* an empty list is one quiet line */
body.mobile #view .empty { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 4px 0 8px; border: 1px dashed var(--gp3); border-radius: 12px; font-size: 13.5px; font-weight: 500; line-height: 1.4; text-align: left; color: var(--ink-3); }
/* the top bar: numbers that fit */
body.mobile #top .stat b { font-size: 15px; letter-spacing: -.01em; }
/* the room: tubs flat, the empty ones a dashed tile */
body.mobile .tubbox, body.mobile .eggbox { box-shadow: inset 0 0 0 1.5px var(--gp3); }
body.mobile .tubbox.good { box-shadow: inset 0 0 0 2px var(--moss); } body.mobile .tubbox.bad { box-shadow: inset 0 0 0 2px var(--brick); } body.mobile .tubbox.warn { box-shadow: inset 0 0 0 2px var(--amber); } body.mobile .tubbox.info { box-shadow: inset 0 0 0 2px var(--sky); }
body.mobile .eggbox.ready { box-shadow: inset 0 0 0 2px var(--amber); }
body.mobile .tubbox:active, body.mobile .eggbox:active { transform: scale(.97); box-shadow: inset 0 0 0 1.5px var(--gp3); }
body.mobile .tubbox.empty { box-shadow: none; border: 1.5px dashed var(--gp3); min-height: 64px; }
body.mobile .tubbox.empty.more { border-color: color-mix(in srgb, var(--moss) 45%, var(--gp3)); }
body.mobile .tubbox.empty.more .plus { color: var(--moss); }
body.mobile .tubbox.empty.more .tb-sub { color: var(--ink-2); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
body.mobile .rackbox > header { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--gp3); }
body.mobile .rackbox > header .meta { margin-left: auto; white-space: nowrap; }
body.mobile .rackbox > header button { min-height: 30px; padding: 4px 10px; font-size: 12.5px; flex: none; }
body.mobile .rackbox > header .rk-sell { color: var(--brick); }
body.mobile .rackbox.idle .rk-no { background: var(--gp3); color: var(--ink-2); }
body.mobile .rk-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--gp2); }
body.mobile .rk-row:first-of-type { border-top: 0; }
body.mobile .rk-row > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
body.mobile .rk-row b { font-size: 14px; } body.mobile .rk-row .meta { font-size: 12px; }
body.mobile .rk-row .rk-n { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 700 12px var(--mono); background: var(--gp2); color: var(--ink-2); }
body.mobile .rk-row button { min-height: 32px; padding: 4px 11px; }
body.mobile .rk-row .rk-sell { color: var(--brick); }
/* breeding: the hide-listed switches as pills */
body.mobile .breed-listed { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
body.mobile .hl-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--gp3); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-2); cursor: pointer; }
body.mobile .hl-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body.mobile .hl-pill .hl-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--ink-3); display: grid; place-items: center; }
body.mobile .hl-pill.on, body.mobile .hl-pill:has(input:checked) { border-color: var(--moss); color: var(--ink); background: color-mix(in srgb, var(--moss) 10%, var(--card)); }
body.mobile .hl-pill:has(input:checked) .hl-box { background: var(--moss); border-color: var(--moss); }
body.mobile .hl-pill:has(input:checked) .hl-box::after { content: ''; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
/* the empty pairing slots */
body.mobile .pcard.empty { --sx: #6fa3c9; min-height: 180px; border: 1.5px dashed color-mix(in srgb, var(--sx) 45%, var(--gp3)); background: color-mix(in srgb, var(--sx) 6%, var(--card)); box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-style: normal; }
body.mobile .pcard.empty.f { --sx: #d98fb0; }
body.mobile .pcard.empty .pc-sym { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--sx); background: color-mix(in srgb, var(--sx) 15%, transparent); border: 1px solid color-mix(in srgb, var(--sx) 40%, transparent); }
body.mobile .pcard.empty .pc-sym svg { width: 26px; height: 26px; }
body.mobile .pcard.empty b { font-family: var(--sans); font-style: normal; font-size: 16px; }
body.mobile .pcard.empty .meta { font-size: 12px; }
/* eggs: the parents' looks, the rest in the title */
body.mobile .specimen h4 .x { font-style: normal; color: var(--ink-3); font-weight: 400; margin: 0 2px; }
/* More: every row the same, with a chevron where it opens something */
body.mobile .more-list { display: grid; gap: 8px; }
body.mobile .more-list > button, body.mobile .more-list > .button-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid var(--gp3); border-radius: 14px; background: var(--card); box-shadow: none; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; text-align: left; }
body.mobile .more-list > button:not(:has(.sw)):not(.danger)::after, body.mobile .more-list > .button-link::after { content: '›'; font-size: 20px; line-height: 1; color: var(--ink-3); margin-left: auto; }
body.mobile .more-list > button .tag { margin-left: auto; }
body.mobile .more-list > button.danger { background: transparent; color: var(--brick); border-color: color-mix(in srgb, var(--brick) 40%, var(--gp3)); }
/* Hatch: the For you / Following switch as a segmented pill */
body.mobile .ig-feedmode { display: inline-flex; gap: 0; padding: 3px; margin: 10px 12px; border-radius: 999px; background: var(--gp2); border: 1px solid var(--gp3); }
body.mobile .ig-feedmode button { min-height: 34px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--ink-2); font-size: 13.5px; }
body.mobile .ig-feedmode button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* market toolbar: search on its own line, then the sex filter and sort */
body.mobile .mk-bar.m { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
body.mobile .mk-bar.m input { grid-column: 1 / -1; }
/* the new notification toasts keep their own look */
body.mobile .toast { font-weight: 400; border: 1px solid var(--rule-2); }
/* rack header: the name, and its size under it, then the buttons */
body.mobile .rackbox > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "no name open sell" "no meta open sell"; column-gap: 10px; row-gap: 1px; align-items: center; }
body.mobile .rackbox > header .rk-no { grid-area: no; }
body.mobile .rackbox > header b { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mobile .rackbox > header .meta { grid-area: meta; margin-left: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
body.mobile .rackbox > header .rk-open { grid-area: open; } body.mobile .rackbox > header .rk-sell { grid-area: sell; }
body.mobile .rackbox.idle > header, body.mobile .rackbox.desk > header, body.mobile .rackbox.inc > header { grid-template-areas: "no name open sell" "no meta open sell"; }
/* the hide-listed pills lie flat */
body.mobile .breed-listed .hl-pill { flex-direction: row; min-height: 36px; height: auto; border-radius: 999px; }
/* Hatch keeps its bare icon buttons (the flat-button border is for real buttons) */
body.mobile .ig-actions button, body.mobile .ig-tabs button, body.mobile .ig-top button, body.mobile .ig-right button, body.mobile .ig-cform button, body.mobile .ig-more, body.mobile .ig-story, body.mobile .ig-cell { border: 0; box-shadow: none; }
body.mobile .ig-actions button, body.mobile .ig-tabs button, body.mobile .ig-top button { background: transparent; }
/* eggs: long morph names a size down */
body.mobile .specimen h4 { font-size: 16px; line-height: 1.3; }
body.mobile .mk-bar.m .seg { justify-self: start; width: auto; }
/* a cut egg grows to fit its baby: a long morph name used to push Keep / List / Sell out of the box (#264) */
.egg.open { height: auto; min-height: 130px; overflow: visible; justify-content: flex-start; padding: 6px 6px 8px; }
.egg.open .n { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.egg.open .eggacts { margin-top: auto; padding-top: 6px; }

/* ================= friendlier phone (#273) ================= */
/* the Today cards: a 2-up grid you can read at a glance, not a sideways strip that cuts them off */
.today { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; }
.today .tcard { min-width: 0; width: auto; }
.today .tcard b { font-size: 14px; } .today .tcard span { font-size: 12px; }
/* filter chips on one line you can swipe */
.quick { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; margin-right: -12px; padding-right: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.quick::-webkit-scrollbar { display: none; }
.quick .chip { flex: none; }
/* the animal sheet: stats in a compact 3-up grid so the actions come sooner */
#sheet .stats { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
body.mobile #sheet .stats div { padding: 7px 9px; border-radius: 10px; }
#sheet .stats .lbl { font-size: 9.5px; }
#sheet .stats b { font-size: 14px; }
/* Pair them stays on screen once a pair is picked */
#view .pair-ticket, #view .pair-cta { position: sticky; bottom: 10px; z-index: 6; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
#view .pair-board .pcard canvas { max-height: 120px; object-fit: contain; }
/* shop animals two to a row */
.snakegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.snakegrid .specimen canvas { aspect-ratio: 4 / 3; height: auto; }
.snakegrid .specimen .body { padding: 9px 10px 10px; gap: 5px; }
.snakegrid .specimen h4 { font-size: 13.5px; line-height: 1.25; }
.snakegrid .specimen dl { gap: 4px; } .snakegrid .specimen dl dt { display: none; } .snakegrid .specimen dl dd { font-size: 11px; padding: 2px 7px; }
.snakegrid .specimen .foot { padding-top: 8px; } .snakegrid .specimen .price { font-size: 15px; }
.snakegrid .specimen .foot button { min-height: 34px; padding: 4px 14px; }
/* bigger, easier taps on small controls */
body.mobile button.small, body.mobile .chip { min-height: 36px; }
body.mobile .toast .t-ign, body.mobile .toast .t-cfg, body.mobile .toast .t-x { min-height: 0; border: 0; background: transparent; box-shadow: none; }
body.mobile .cut-all { width: 100%; justify-content: center; height: 46px; font-size: 15px; border: 0; border-radius: 14px; background: var(--moss); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--moss) 35%, transparent); }
body.mobile .cut-all.done { background: transparent; color: var(--moss-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--moss) 55%, transparent); }
/* the week ahead as a swipeable strip (#298) */
.ev-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.ev-chip { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 116px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--gp3); scroll-snap-align: start; }
.ev-chip b { font-size: 13.5px; }
.ev-chip small { font-size: 12px; color: var(--ink-3); }
.ev-chip .evi { color: var(--amber); }
body.mobile .xp-hero { gap: 12px; }
body.mobile .xp-bill h3 { font-family: var(--serif); font-size: 28px; font-weight: 600; }
body.mobile .xp-purse { min-width: 0; width: 100%; }
body.mobile .xp-poster { padding: 30px 14px 14px; }
body.mobile .xp-tabs button { padding: 10px 12px; }
body.mobile .xp-tabs:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } /* with the Legacy class (#786) */
body.mobile .xp-tabs:has(> :nth-child(3)) button { padding: 8px 9px; } body.mobile .xp-tabs:has(> :nth-child(3)) button b { font-size: 15px; }
body.mobile .xp-top { gap: 6px; padding: 8px; }
body.mobile .xp-spot.open { min-height: 110px; }
body.mobile .xp-tent { padding: 5px 6px; font-size: 11.5px; }
body.mobile .xp-podium { gap: 6px; }
body.mobile .xp-col b { font-size: 11.5px; }
body.mobile .xp-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the breeder-name row in More: the name, then when it can change */
.more-list button.name-row small { display: block; font-weight: 400; margin-top: 2px; }
.more-list button.name-row[aria-disabled="true"] { opacity: .75; }
/* Collection roles (#428): the role chips under the quick filters, and the card's role control */
.quick.roles { margin-top: 4px; }
body.mobile .rchipm { border-left: 3px solid var(--rc); }
body.mobile .rchipm.on { background: var(--rc); border-color: var(--rc); color: var(--paper); }
body.mobile .rchipm.rc-undecided { border-left-style: dashed; }
body.mobile .role-seg { margin: 4px 0 6px; border: 1px solid var(--rule-2); }
body.mobile .role-seg button { min-height: 38px; font-size: 12.5px; padding: 0 2px; border-radius: 0; box-shadow: none; }
body.mobile .tags .rbadge { margin-right: 4px; }
.tcard.sort { border-left-style: dashed; border-color: var(--ink-3); }

/* Collection, one vocabulary (#428 design pass): the role dot on chips, badges and the role control, the same
   tinted "on" as the desktop, and Wholesale's Sell now riding on its chip */
body.mobile .coll-q .chip { font-weight: 500; color: var(--ink-2); }
body.mobile .coll-q .chip.on { background: color-mix(in srgb, var(--amber) 18%, var(--card)); border-color: color-mix(in srgb, var(--amber) 60%, transparent); color: var(--ink); }
body.mobile .rchipm { display: inline-flex; align-items: center; gap: 7px; border-left: 1px solid var(--gp3); }
body.mobile .rchipm::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rc); }
body.mobile .rchipm.rc-undecided { border-left-style: solid; }
body.mobile .rchipm.rc-undecided::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rc); }
body.mobile .rchipm.on { background: color-mix(in srgb, var(--rc) 20%, var(--card)); border-color: color-mix(in srgb, var(--rc) 65%, transparent); color: var(--ink); }
body.mobile .rchip-split { display: inline-flex; flex: none; }
body.mobile .rchip-split .rchipm { border-radius: 999px 0 0 999px; }
body.mobile .rchip-act { min-height: 36px; padding: 0 13px 0 11px; border: 1px solid var(--gp3); border-left: 0; border-radius: 0 999px 999px 0; background: var(--card); color: var(--brick); font-size: 13px; font-weight: 600; box-shadow: none; white-space: nowrap; }
body.mobile .rchip-act:active { background: var(--brick); color: #fff; }
body.mobile .quick.roles.coll-q { margin-top: 0; }
body.mobile .tags .rbadge { gap: 5px; margin-right: 4px; padding: 1px 8px 1px 6px; font-size: 11.5px; line-height: 15px; }
body.mobile .tags .rbadge.rb-undecided { padding-left: 1px; }
body.mobile .rchipm.rc-boarded { color: var(--ink-3); border-style: dotted; } /* (#662) quiet, at the end of the row */
body.mobile .rchipm.rc-boarded::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rc); }
body.mobile .role-seg { border: 1px solid var(--gp3); border-radius: 12px; background: var(--card); }
body.mobile .role-seg button { gap: 4px; min-height: 40px; padding: 0 2px; font-size: 12px; border-radius: 0; }
body.mobile .role-seg button::before { width: 6px; height: 6px; }
/* the card's role control (#893): two rows of three, thumb-sized, the names whole */
body.mobile .role-seg.role-pick { margin: 2px 0 0; background: var(--gp3); border-radius: 12px; }
body.mobile .role-seg.role-pick button { gap: 7px; height: 44px; min-height: 44px; padding: 0 6px; border: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-2); background: var(--card); }
body.mobile .role-seg.role-pick button::before { width: 8px; height: 8px; }
body.mobile .role-seg.role-pick button:active { transform: none; }
body.mobile .role-seg.role-pick button.on { background: color-mix(in srgb, var(--rc) 18%, var(--card)); color: var(--ink); font-weight: 600; }
body.mobile .role-seg.role-pick button:disabled { opacity: 1; color: color-mix(in srgb, var(--ink-3) 60%, var(--card)); }
body.mobile .role-what { margin: 7px 0 8px; font-size: 13px; }

/* racks set aside (#559) */
body.mobile .rackbox > header { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "no name keep open sell" "no meta keep open sell"; }
body.mobile .rackbox.idle > header, body.mobile .rackbox.desk > header, body.mobile .rackbox.inc > header { grid-template-areas: "no name keep open sell" "no meta keep open sell"; }
body.mobile .rackbox > header .rk-keep { grid-area: keep; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
body.mobile .rk-keep.on { color: var(--moss); font-weight: 700; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--moss) 55%, transparent); }
body.mobile .rk-row .rk-keep { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
body.mobile .kp-h { margin: 14px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
body.mobile .kp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.mobile .kp-num { display: flex; gap: 8px; align-items: center; } body.mobile .kp-num select { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); font: 600 15px var(--sans); } /* renumber a rack (#616) */
body.mobile .kp-chips button { min-height: 36px; padding: 6px 13px; border-radius: 99px; border: 1.5px solid var(--gp3); background: transparent; color: var(--ink-2); font-size: 14px; }
body.mobile .kp-chips button.on { background: var(--moss); border-color: var(--moss); color: #fff; font-weight: 700; }
body.mobile .kp-note { margin: 14px 0 12px; line-height: 1.45; }
body.mobile .kp-done { width: 100%; }
/* the sell queue: the Sell chip (#429) */
body.mobile .sq-head.m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--gp3); border-left: 3px solid var(--sky); border-radius: 12px; background: var(--card); }
body.mobile .sq-head.m .sq-line { font-size: 13.5px; line-height: 1.35; }
body.mobile .sq-head.m .sq-note { font-size: 12px; color: var(--ink-3); }
body.mobile .sq-head.m .sq-whole { margin-left: auto; min-height: 32px; padding: 0 4px; border: 0; background: transparent; box-shadow: none; color: var(--moss); text-decoration: underline; font-size: 13px; }
body.mobile .sq-btns .sq-btn { min-height: 36px; }
body.mobile .sq-card { position: relative; }
body.mobile .sq-card .sq-pos { position: absolute; top: 6px; left: 6px; z-index: 1; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--sky); color: #fff; font: 600 12px/22px var(--mono, monospace); text-align: center; }
body.mobile .sq-card .sq-pos:empty { display: none; }
body.mobile .sq-card.sq-held { opacity: .75; }
body.mobile .sq-card .sq-when { color: var(--ink); }
body.mobile .sq-card .sq-when.on { color: var(--sky); }
body.mobile .sq-nudge { margin-top: 3px; font-size: 12px; color: #e0a43a; }
body.mobile .sq-ctl { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
body.mobile .sq-askbox { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; margin: 0; letter-spacing: normal; text-transform: none; font-size: 12.5px; color: var(--ink-3); }
body.mobile .sq-askbox input { width: 62px; min-height: 34px; padding: 0 6px; font-size: 15px; text-align: right; }
body.mobile .sq-price { font-size: 12.5px; color: var(--ink-2); }
body.mobile .sq-ctl [data-pull] { margin-left: auto; white-space: nowrap; }

/* compact sticky bars (#508, #581): stickyPanelHeader puts .ph-stick on the Collection's search and chips, Breeding's
   tab row with its search and chips, and the Shop's search, tabs and chips; the title above scrolls away, and a shadow
   shows once cards pass beneath */
body.mobile .ph-stick { position: sticky; top: calc(-1 * var(--ph-ptop, 12px)); z-index: 5; margin: 0 calc(-1 * var(--view-px, 14px)) 6px; padding: 8px var(--view-px, 14px) 6px; background: var(--gp); transition: box-shadow .15s; }
body.mobile .ph-stick.stuck { box-shadow: 0 10px 14px -10px rgba(0, 0, 0, .5); border-bottom: 1px solid var(--gp3); }
body.mobile .coll-stick-m .toolbar { margin-bottom: 4px; }
body.mobile .ph-stick > :last-child { margin-bottom: 0; }
body.mobile .breed-bar-m .tabs, body.mobile .shop-bar-m .tabs { margin-bottom: 8px; }
body.mobile .breed-bar-m .gq-row.sb-search-m, body.mobile .shop-bar-m .shop-search.m { margin: 0 0 6px; }

/* the genetics search on the phone (#420) */
body.mobile .gq-help > summary { width: 30px; height: 30px; font-size: 14px; }
body.mobile .gq-row.m { margin: 8px 0; }
body.mobile .gq-row.m input { padding: 7px 9px; font-size: 14px; }
body.mobile .mk-bar.m .gq-help { align-self: center; }
body.mobile .mk-genes-m { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
body.mobile .mk-genes-m::-webkit-scrollbar { display: none; }
body.mobile .mk-genes-m .chip { flex: none; min-height: 32px; padding: 4px 11px; font-size: 13px; }
/* the Genes filter (#1370) */
body.mobile .mk-gcap-m { display: flex; margin: 0 0 8px; } body.mobile .mm-chips-m { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; } body.mobile .mk-gcap-m .seg { border-radius: 10px; overflow: hidden; } body.mobile .mk-gcap-m .seg button { min-height: 32px; padding: 0 11px; font-size: 13px; }
/* Season board search and the male picker's chips and hidden-count line (#434) */
body.mobile .gq-x { flex: none; min-height: 0; height: 30px; width: 30px; padding: 0; border-radius: 50%; border: 0; background: var(--paper-2); color: var(--ink-2); font-size: 17px; line-height: 1; }
body.mobile .sb-search-m input::-webkit-search-cancel-button { display: none; }
.mp-chips-m { margin: 2px 0 0; }
.mp-hidden { margin: 6px 2px 4px; font-size: 12.5px; }
body.mobile .tb-hid { margin: -2px 2px 8px; font-size: 12.5px; } /* the trade builder's search per side (#795) */
body.mobile label.row-card.tb-row { flex-direction: row; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); cursor: pointer; } /* a picker row, not a form label: no column, no caps (#795) */
body.mobile .tb-row input[type=checkbox] { flex: none; width: 22px; height: 22px; padding: 0; border-radius: 6px; margin: 0 2px 0 0; }
body.mobile .mp-hidden .linkish, body.mobile .tb-hid .linkish, body.mobile .lb-line .linkish { min-height: 0; height: auto; padding: 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--moss); font: inherit; font-weight: 600; }
/* breeding projects (#431): the phone's tweaks; the rest is in style.css */
body.mobile .pj-card { background: var(--card); border-radius: var(--r); }
body.mobile .pj-odds { margin-left: 0; width: 100%; }
body.mobile .pj-groups { font-size: 12px; } body.mobile .pj-groups th:last-child, body.mobile .pj-groups td:last-child { display: none; }
body.mobile .pj-modal { width: auto; }
body.mobile .pj-genes { max-height: 160px; }
body.mobile .pj-move label { min-height: 36px; align-items: center; } /* a copy's founder boxes (#1003): thumb-sized rows */
body.mobile .rchipm.rc-proj::before { display: none; }
body.mobile .rchipm.rc-proj.on { --rc: var(--ink-2); }
body.mobile .pj-sec-h .abtn { margin-left: 0; }
body.mobile .pj-name { min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 19px; }
/* the planner by project (#432): the phone's tweaks */
body.mobile .mp-seg { margin: 10px 0 8px; } body.mobile .mp-seg button { padding: 0 8px; }
body.mobile .mp-once-m { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; } /* Once / Every season (#1009) */
body.mobile .plan-once-m { display: inline-flex; border-radius: 10px; overflow: hidden; vertical-align: middle; margin-right: 6px; } body.mobile .plan-once-m button { min-height: 30px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
body.mobile .pj-plan-row { min-height: 40px; }
body.mobile .mp-noadv-acts { align-self: stretch; } body.mobile .mp-noadv-acts button { flex: 1 1 40%; }
/* Projects accordion (#582): a folded card is its name line plus one line of counts and odds */
body.mobile .pj-fold { flex-wrap: wrap; row-gap: 2px; } body.mobile .pj-fold .pj-sum { order: 5; flex: 1 1 auto; white-space: normal; }
body.mobile .pj-fold .pj-odds { order: 6; width: auto; margin-left: 0; } body.mobile .pj-fold .abtn { order: 7; margin-left: auto; }
body.mobile .pj-lg-name, body.mobile .pj-fin-name { min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } /* the Finished section (#992) folds like Legacy */
body.mobile .pj-name .pj-caret, body.mobile .pj-lg-name .pj-caret, body.mobile .pj-fin-name .pj-caret { font-size: 13px; width: 14px; }
body.mobile .pj-card.finished { background: color-mix(in srgb, var(--ink) 3%, var(--card)); }
body.mobile .pj-top { flex-wrap: wrap; row-gap: 6px; } body.mobile .pj-live { font-size: 12.5px; }
body.mobile .pj-clean { background: color-mix(in srgb, var(--amber) 7%, var(--card)); } body.mobile .pj-clean-go .abtn, body.mobile .pj-clean-bar .abtn { min-height: 40px; } /* Clean up (#996) */
body.mobile .pj-clean-role input { width: 20px; height: 20px; }
body.mobile .mp-noadv button { align-self: stretch; }
/* the Shop and Market project fit (#592) */
body.mobile .mm-mbody .pj-fit { display: flex; width: max-content; max-width: 100%; font-size: 10.5px; margin: 2px 0 3px; }
body.mobile .shop-bar-m .fit-row { margin: 6px 0 2px; }
/* Shop (#832): the tab counts, Equipment's sub-chips over the racks' size chips, and Facility's status cards */
body.mobile .shop-bar-m .tabs .tc { font-size: 11px; font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums; }
body.mobile .shop-bar-m .equip-chips { margin-bottom: 4px; }
body.mobile .shop-bar-m .equip-chips .chip { font-weight: 700; }
body.mobile .fac-card .fac-lbl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
body.mobile .fac-card .t { font-size: 16px; }
body.mobile .fac-card { flex-direction: row; flex-wrap: wrap; align-items: center; } /* the desktop .fac-card is a column (style.css), which centred these on the phone (#900) */
body.mobile .fac-card .body { flex: 1 1 100%; text-align: left; }
body.mobile .fac-card > button { margin-left: auto; }
body.mobile .fac-card .linkish { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--moss-2); font-weight: 600; }
body.mobile .fit-row .chip { min-height: 30px; }

/* the Collection's Filters (#580): the pill beside the search box, the sheet, the match line with its bulk role */
body.mobile .nf-btn { flex: none; height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink-2); font-size: 13px; }
body.mobile .nf-btn.on { color: var(--paper); background: var(--moss, #3f7f4f); border-color: var(--moss, #3f7f4f); }
body.mobile #sheetBody .nf-body { margin-top: 12px; font-size: 14px; }
body.mobile #sheetBody .nf-row { grid-template-columns: 1fr; }
body.mobile #sheetBody .nf-row > * { grid-column: 1; }
body.mobile #sheetBody .nf-lbl { grid-row: auto; padding-top: 0; }
body.mobile #sheetBody .nf-pair input { width: 96px; height: 36px; font-size: 15px; }
body.mobile #sheetBody .nf-pm, body.mobile #sheetBody .nf-x { width: 36px; height: 36px; }
body.mobile #sheetBody .nf-step select { height: 36px; font-size: 15px; }
body.mobile #sheetBody .nf-chip { padding: 6px 12px; font-size: 13px; }
body.mobile .nf-done { margin-top: 14px; display: flex; justify-content: flex-end; }
body.mobile .coll-sum-m { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 2px 2px 6px; font-size: 12.5px; }
body.mobile .coll-sum-m .linkish { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--moss-2); font-size: 12.5px; font-weight: 600; } /* a link, not a button (#742) */
body.mobile .cap-changed .linkish { min-height: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--moss-2); font: inherit; font-weight: 600; } /* a link, not a button (#730) */

/* Field Guide (#603): term links read as links, not buttons; complex chips and Show super stay small */
body.mobile .g-link, body.mobile .g-link:hover, body.mobile .g-link:active { border: 0; background: none; box-shadow: none; min-height: 0; padding: 0; border-radius: 0; font-weight: 500; color: var(--moss); transform: none; }
body.mobile .g-cx { min-height: 0; padding: 2px 9px; border: 1px solid var(--gp3); border-radius: 999px; box-shadow: none; font-size: 11px; font-weight: 500; }
body.mobile .g-super { min-height: 0; padding: 3px 4px; font-size: 11px; }
body.mobile .g-index .chip { min-height: 26px; padding: 2px 9px; font-size: 11px; }
body.mobile .g-term h4 { font-size: 18px; }

/* the animal sheet (#747): the name once, the stats as one strip (value first), and List / Wholesale near the top */
body.mobile .sh-title .name { font-size: 20px; line-height: 1.15; }
#sheet .stats.sh-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 8px 0; }
body.mobile #sheet .sh-stats div { min-width: 0; padding: 6px 8px; border-radius: 10px; box-shadow: none; border: 1px solid var(--gp3); }
body.mobile #sheet .sh-stats .sh-val { grid-column: span 2; }
#sheet .sh-stats .lbl { font-size: 9.5px; }
#sheet .sh-stats b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sheet .sh-stats .sh-val b { font-size: 16px; }
.sh-sell { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 4px; }
body.mobile .sh-sell button { min-height: 44px; padding: 0 8px; border-radius: 10px; font-weight: 700; }
/* Animals, readable on a phone (#742): a big square picture with the value under it, the whole name over two lines,
   one line of sex / weight / age / place, then role, status and hets as one run of chips. Only the search row is pinned. */
body.mobile .coll-h-m { display: flex; align-items: center; gap: 8px; }
body.mobile .coll-h-m .meta { font-family: var(--sans); font-size: 13px; }
body.mobile .coll-h-m #selM { margin-left: auto; min-height: 34px; padding: 0 14px; font-size: 13px; }
body.mobile .coll-stick-m .toolbar { gap: 6px; }
body.mobile .coll-stick-m .toolbar #cf { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; font-size: 16px; } /* 16px: iOS zooms in on anything smaller */
body.mobile .coll-stick-m .nf-btn { height: 42px; min-height: 0; padding: 0 12px; border-radius: 12px; border: 2px solid var(--gp3); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: none; }
body.mobile .coll-stick-m .nf-btn.on { color: #fff; background: var(--moss); border-color: var(--moss); }
body.mobile .sort-m { position: relative; flex: none; display: flex; align-items: center; margin: 0; }
body.mobile .sort-m svg { position: absolute; left: 10px; width: 15px; height: 15px; fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
body.mobile .sort-m select { flex: none; width: auto; max-width: 112px; height: 42px; padding: 0 10px 0 30px; font-size: 14px; font-weight: 600; color: var(--ink); -webkit-appearance: none; appearance: none; }
body.mobile .coll-sum-m { margin: 6px 2px 0; align-items: center; }
body.mobile .coll-on-m { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0 0 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--amber) 60%, transparent); background: color-mix(in srgb, var(--amber) 18%, var(--card)); color: var(--ink); font-size: 13px; }
body.mobile .coll-on-m b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mobile .coll-on-m b svg { width: 12px; height: 12px; vertical-align: -1px; }
body.mobile .coll-x-m { flex: none; width: 30px; height: 28px; min-height: 0; padding: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--ink-2); font-size: 18px; line-height: 1; }
body.mobile .coll-stick-m + .quick.coll-q { margin-top: 2px; }
body.mobile .quick.coll-q { margin-bottom: 4px; }

body.mobile .acard-m { position: relative; align-items: flex-start; gap: 12px; padding: 10px 12px 10px 10px; }
body.mobile .acard-m .ac-pic { flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.mobile .row-card.acard-m canvas { width: 92px; height: 92px; border-radius: 12px; }
body.mobile .acard-m .ac-val { font: 700 14px/1 var(--mono); color: var(--ink); letter-spacing: -.02em; white-space: nowrap; }
body.mobile .acard-m .body { padding-top: 1px; }
body.mobile .row-card.acard-m .t { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15.5px; line-height: 1.25; overflow-wrap: anywhere; }
body.mobile .acard-m .ac-mo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 1px; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
body.mobile .row-card.acard-m .m { margin-top: 3px; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .acard-m .m svg { width: 13px; height: 13px; vertical-align: -2px; }
body.mobile .acard-m .ac-chips { margin-top: 7px; gap: 4px; } /* the row grows to fit every chip (#1312): a two-line clamp cut a third line's chips in half */
body.mobile .acard-m .ac-chips > * { margin: 0; }
body.mobile .acard-m .ac-chips .tag, body.mobile .acard-m .ac-chips .pill, body.mobile .tags.ac-chips .rbadge { font-size: 11.5px; line-height: 18px; padding: 1px 8px; }
body.mobile .tags.ac-chips .rbadge { padding-left: 6px; }
body.mobile .acard-m .ac-tick, body.mobile .acard-m .ac-lock { display: none; }

/* Select (#3): a tick on every card, the picked ones outlined, the ones that can't be sold dimmed with why */
body.mobile .coll-selecting .acard-m .body { padding-right: 30px; }
body.mobile .coll-selecting .acard-m .ac-tick { display: block; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--gp3); background: var(--card); }
body.mobile .coll-selecting .acard-m .ac-tick::after { content: ''; position: absolute; left: 7.5px; top: 3.5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); opacity: 0; }
body.mobile .coll-selecting .acard-m.picked .ac-tick { background: var(--moss); border-color: var(--moss); }
body.mobile .coll-selecting .acard-m.picked .ac-tick::after { opacity: 1; }
body.mobile .coll-selecting .row-card.acard-m.picked { box-shadow: 0 0 0 2.5px var(--moss), var(--shadow-card); }
body.mobile .coll-selecting .acard-m.locked { opacity: .6; }
body.mobile .coll-selecting .acard-m.locked .ac-lock { display: block; position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 8px; background: var(--gp2); color: var(--ink-2); font-size: 11px; font-weight: 700; }
body.mobile .coll-selecting .acard-m.locked .body { padding-right: 64px; }
body.mobile .coll-selbar-m { position: sticky; bottom: -24px; z-index: 6; display: grid; gap: 8px; margin: 10px calc(-1 * var(--view-px, 14px)) -24px; padding: 10px var(--view-px, 14px) 12px; background: var(--gp); border-top: 1px solid var(--gp3); box-shadow: 0 -10px 16px -10px rgba(0, 0, 0, .4); }
body.mobile .coll-selbar-m .csb-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.mobile .coll-selbar-m .csb-top b { font-size: 15px; white-space: nowrap; }
body.mobile .coll-selbar-m .csb-top .meta { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .coll-selbar-m .csb-top button { flex: none; min-height: 32px; padding: 0 10px; }
body.mobile .coll-selbar-m .csb-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
body.mobile .coll-selbar-m .csb-acts button { min-height: 42px; padding: 0 4px; font-size: 13.5px; }

/* the Filters sheet (#742): the chips wrap, and the search help sits open in it */
body.mobile #sheetBody .fs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.mobile #sheetBody .fs-chips .chip { flex: none; }
body.mobile #sheetBody .fs-help .gq-help { display: block; }
body.mobile #sheetBody .fs-help .gq-help > summary { display: none; }
body.mobile #sheetBody .fs-help .gq-pop { position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }

/* Shop → Racks (#748): compact rows, four or so to a screen; a tap on a row shows its whole blurb */
body.mobile .rack-list .rack-row { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 12px; padding: 8px 10px 8px 8px; border: 1px solid var(--gp3); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-card); cursor: pointer; }
body.mobile .rack-list .rack-row canvas { width: 96px; height: 96px; border-radius: 10px; background: var(--thumb-bg); }
body.mobile .rack-row .sr-top b { font-size: 15px; }
body.mobile .rack-row .sr-top .tag { margin: 0; }
body.mobile .rack-row .sr-blurb { font-size: 12px; line-height: 1.35; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .rack-row.open .sr-blurb { white-space: normal; }
body.mobile .rack-row .sr-buy { grid-column: auto; justify-content: space-between; margin-top: 4px; }
body.mobile .rack-row .sr-buy .price { font-size: 15px; font-weight: 700; }
/* which project a clutch is for (#735): the Eggs card's Project chips and the chip under a clutch's parents */
body.mobile .inc-projs-m { margin-top: 10px; }
body.mobile .specimen .body > .pj-fit { display: flex; width: max-content; max-width: 100%; font-size: 10.5px; margin: 2px 0 3px; }

/* Market (#750): search (with its ? inside), the sex switch and the sort on one row */
body.mobile .mk-bar.m { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; }
body.mobile .mk-bar.m .mk-q { position: relative; min-width: 0; }
body.mobile .mk-bar.m .mk-q input { width: 100%; height: 42px; margin: 0; padding: 0 40px 0 12px; font-size: 16px; } /* 16px: iOS zooms in on anything smaller */
body.mobile .mk-bar.m .mk-q .gq-help { position: absolute; right: 6px; top: 7px; }
body.mobile .gq-help .gq-pop { position: fixed; left: 14px; right: 14px; top: auto; width: auto; } /* every ? on the phone (the market's, the Breed bar's, the male picker's, #1322): the screen's width under its box, never hanging off the left edge */
body.mobile .mk-bar.m .mk-q .gq-help > summary { width: 28px; height: 28px; font-size: 13px; }
body.mobile .mk-bar.m .seg { height: 42px; }
body.mobile .mk-bar.m .seg button { min-height: 0; height: 100%; padding: 0 9px; }
body.mobile .mk-bar.m #mkSort { width: auto; max-width: 100px; height: 42px; margin: 0; padding: 0 8px; font-size: 14px; font-weight: 600; }

/* Room to-dos (#751): two rows of the most urgent, the rest one tap away; a card's second line stays one line */
body.mobile .today .tcard { padding: 8px 10px 8px 14px; }
body.mobile .today .tcard b, body.mobile .today .tcard span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .today .tmore { grid-column: 1 / -1; min-height: 34px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--moss-2); font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.mobile .today .tcard.dying span { white-space: normal; } /* who, why and how long: never cut */

/* Hatch (#752): its own section bar (home, search, post, messages, activity, profile) sits at the top under the title
   and stays there while you scroll, so the phone has one bottom bar, the game's tabs */
body.mobile .ig > .ig-top { order: 0; position: static; }
body.mobile .ig > .ig-tabs { order: 1; position: sticky; top: 0; bottom: auto; margin-top: 0; padding: 4px 0; border-top: 0; border-bottom: 1px solid var(--rule); box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .35); }
body.mobile .ig > .ig-body { order: 2; }

/* Breed → Season (#749): only the tabs and the search stay pinned; Filters opens the chips in a sheet, and a line under
   the search says what's on, with × to show every female again */
body.mobile .sb-search-m { display: flex; align-items: center; gap: 6px; }
body.mobile .sb-search-m input#sbq { flex: 1 1 auto; min-width: 0; height: 40px; font-size: 16px; } /* 16px: iOS zooms in on anything smaller */
body.mobile .sb-filt-m { flex: none; height: 40px; min-height: 0; padding: 0 12px; border-radius: 12px; border: 2px solid var(--gp3); background: var(--card); color: var(--ink); box-shadow: none; font-size: 14px; font-weight: 600; }
body.mobile .sb-filt-m.on { color: #fff; background: var(--moss); border-color: var(--moss); }
body.mobile .sb-on-m { margin: 2px 2px 0; }
body.mobile .sb-on-m span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0 0 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--amber) 60%, transparent); background: color-mix(in srgb, var(--amber) 18%, var(--card)); font-size: 13px; }
body.mobile .sb-on-m b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .sb-on-m button { flex: none; width: 30px; height: 28px; min-height: 0; padding: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--ink-2); font-size: 18px; line-height: 1; }
body.mobile #sheetBody .sb-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
/* ================= cutting screen: a baby per row, its sex up front, every gene a tap away (#794) ================= */
/* a cut baby takes the tray's width (three of its columns on a tablet), its picture beside the details; the eggs still
   to cut pack round it. The name is the look in full; hets are pills; Genes drops down the whole list. */
.eggs.tray { grid-auto-flow: row dense; }
.eggs.tray .egg.open.baby { grid-column: span 2; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 12px; align-items: start; justify-content: stretch; text-align: left; padding: 10px; min-height: 0; overflow: hidden; }
@media (min-width: 760px) { .eggs.tray .egg.open.baby { grid-column: span 3; } }
.egg.open.baby > canvas { width: 96px; height: 96px; border-radius: 10px; }
.egg.open.baby > .baby-genes, .egg.open.baby > .eggacts { grid-column: 1 / -1; }
.egg-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.egg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding-right: 2px; }
.egg.open.baby .v { font-size: 15px; font-weight: 600; color: var(--ink); }
.egg.open.baby .n { display: block; -webkit-line-clamp: unset; overflow: visible; text-align: left; font-size: 15px; font-weight: 700; line-height: 1.25; word-break: normal; overflow-wrap: anywhere; }
.egg.open.baby .egg-hets { display: flex; flex-wrap: wrap; gap: 4px; }
.egg.open.baby .egg-flag { color: var(--amber); font-weight: 700; font-size: 12px; letter-spacing: .08em; }
.egg.open.baby .egg-from { text-align: left; white-space: normal; }
.egg.open.baby .egg-proj { margin: 0; }
.egg.open.baby .egg-rule { justify-content: flex-start; }
.egg-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.egg.open.baby .baby-genes { justify-content: flex-start; gap: 5px; padding: 10px 0 2px; }
.egg.open.baby .baby-genes .gene { font-size: 12.5px; padding: 3px 9px; }
.egg.open.baby .eggacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; padding-top: 0; }
.egg.open.baby .eggacts .chip { min-height: 42px; padding: 4px 2px; line-height: 1.15; justify-content: center; text-align: center; white-space: normal; }
.egg.open.baby .eggacts small { display: block; font-size: 11px; font-weight: 500; opacity: .85; }
.egg.open.baby .stamp { top: 64px; right: auto; left: 18px; } /* on the picture, as before, clear of the price */
.egg.open.baby .hand-pin { top: 14px; left: 14px; } /* on the picture's corner (#811) */
.egg.open.baby > .own-n { top: 14px; left: 14px; } .egg.open.baby > .own-n ~ .hand-pin { top: 34px; } /* the ×N badge (#709) on the picture's corner, the by-hand pin under it */
.egg.open.baby > .own-n.by-sex { padding: 0 4px; font-size: 10px; } /* ♂5 · ♀10 (#955) fits the 96px picture */
body.mobile .acard-m .ac-pic > .own-n { top: 4px; left: 4px; }
.hatch-bulk.hatch-price { flex-direction: row; flex-wrap: wrap; align-items: center; } /* the asking chips in one row: Sell cards show them too now (#811) */
.bulk-btns #bulkSell small { display: block; font-size: 11px; font-weight: 500; opacity: .8; } /* how many list now, how many queue (#811) */
.egg.open.baby .baby-sex { padding: 2px 10px 2px 7px; font-size: 12.5px; } .egg.open.baby .baby-sex .sx { width: 14px; height: 14px; }
.hatch-sort .hs-genes { display: contents; }
/* the Wardrobe on the animal sheet (#640, #893): the desktop's tiles (style.css) on the sheet's card surfaces */
body.mobile .wardrobe { margin: 14px 0 4px; gap: 7px; }
body.mobile .wardrobe :is(.wr-slot, .wr-item) { min-height: 0; padding: 9px 4px 10px; border: 1px solid var(--gp3); border-radius: 12px; background: var(--card); font-weight: 400; }
body.mobile .wardrobe :is(.wr-slot, .wr-item):active { transform: none; background: var(--gp2); }
body.mobile .wardrobe :is(.wr-slot, .wr-item).on { border-color: var(--moss); background: color-mix(in srgb, var(--moss) 12%, var(--card)); box-shadow: inset 0 0 0 1px var(--moss); }
body.mobile .wardrobe :is(.wr-slot, .wr-item) b { font-size: 12.5px; }
body.mobile .wardrobe .wr-sn { font-size: 10px; }
body.mobile .wardrobe .wr-pick { padding: 10px; border-color: var(--gp3); border-radius: 14px; background: var(--gp2); }
body.mobile .wardrobe .wr-pick::before { border-color: var(--gp3); }
body.mobile .wardrobe .wr-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.mobile .wardrobe .wr-item small { font-size: 12px; }
body.mobile .wardrobe .wr-foot { align-items: center; margin-top: 8px; }
body.mobile .wardrobe .wr-foot .wr-note { font-size: 13px; }
body.mobile .wardrobe .wr-off, body.mobile .wardrobe .wr-off:hover { min-height: 36px; padding: 0 2px; border: 0; background: none; font-size: 14px; color: var(--ink-2); }
/* the OAuth confirm (#702) is a bottom sheet on the phone, thumbs' reach from its two buttons */
body.mobile .oc-scrim { align-items: flex-end; padding: 0; }
body.mobile .oc-sheet { width: 100%; min-height: 0; justify-content: flex-start; padding: 22px 20px max(22px, env(safe-area-inset-bottom)); background: #f3eee4; color: #1e1a15; border-top: 6px solid var(--moss); }
body.mobile .oc-sheet .meta { color: #5d564c; }
body.mobile .oc-sheet button { min-height: 48px; border: 1px solid #1e1a15; border-radius: 2px; background: transparent; color: #1e1a15; font: 500 16px var(--sans); }
body.mobile .oc-sheet button.primary { background: var(--moss); border-color: var(--moss); color: #fff; }

/* the sheet's picture opens the 3D view (#809): the coil is the button, with a 3D badge */
.sh-3d { position: relative; flex: none; width: auto; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
.sh-3d .b3d { position: absolute; right: -2px; bottom: 2px; padding: 1px 8px; border-radius: 99px; background: var(--ink); color: var(--paper); font: 800 11px/1.6 var(--sans); letter-spacing: .04em; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.mm-mphoto-w { position: relative; }
.mm-mphoto-w .b3d-btn { position: absolute; right: 10px; bottom: 10px; width: auto; min-height: 0; height: 32px; padding: 0 14px; border: 0; border-radius: 99px; background: rgba(20, 18, 15, .78); color: #f3eee4; font: 800 13px/1 var(--sans); letter-spacing: .04em; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }

/* the Shop's category bar on the phone (#831): the same tiles, one scrolling row */
body.mobile .shop-cats.m.sc-bar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; border: 0; }
body.mobile .shop-cats.m.sc-bar::-webkit-scrollbar { display: none; }
body.mobile .shop-cats.m .sc { flex: none; min-width: 76px; min-height: 64px; padding: 8px 8px 7px; border-radius: 12px; border: 1px solid var(--gp3, var(--rule)); background: var(--card, var(--paper-2)); color: var(--ink-2); box-shadow: none; }
body.mobile .shop-cats.m .sc.on { background: color-mix(in srgb, var(--sc) 18%, var(--card, var(--paper-2))); border-color: var(--sc); color: var(--ink); box-shadow: 0 0 0 1px var(--sc) inset, 0 4px 12px color-mix(in srgb, var(--sc) 28%, transparent); }
/* Breeder loans under Trades, always (#843): the explanation over its button, then each group under a label */
body.mobile .loan-intro.m { flex-direction: column; align-items: stretch; gap: 10px; border: 1px solid var(--gp3); background: var(--card); font-size: 13.5px; line-height: 1.45; }
body.mobile .loan-intro.m button { align-self: flex-start; }
body.mobile .loan-lbl { display: block; margin: 12px 0 6px; }

/* ================= the desktop's look on the phone (#823) ================= */
/* One system with the desktop panels: a flat panel with grain (the white glow was for paper and greyed the dark theme),
   Fraunces page titles with the panel's one-line subtitle, small-caps labels, mono numbers, hairline borders instead of
   shadows, and the desktop's radii. */
body.mobile { --r: 12px; --card: #fffdf8; --gp2: #ece5d7; --gp3: #d9cfbd; }
:root[data-theme="dark"] body.mobile { --gp: #1f1d1a; --gp2: #27241f; --gp3: #3a352e; --card: #26231f; --field: #15130f; }
body.mobile, body.mobile #view, body.mobile .ph-stick { background: var(--gp); background-image: none; } /* flat, so the pinned bars and the page are one colour */
/* page titles */
body.mobile #view h2 { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; margin: 8px 0 2px; }
body.mobile #view h2 .meta { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
body.mobile #view .ph-sub { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: var(--ink-2); max-width: 36em; }
body.mobile .roomhead h2 { margin-bottom: 0; }
body.mobile .sheet-box .name, body.mobile .modal h2, body.mobile #modalBox2 h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
body.mobile .modal h2 { font-size: 24px; }
body.mobile #view h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
/* section labels: small caps over a hairline, as on the desktop */
body.mobile .section, body.mobile .lbl { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
body.mobile .section::after { height: 1px; background: var(--gp3); border-radius: 0; }
/* the top bar: one dark strip, labels in small caps, numbers in mono, no boxes */
body.mobile #top { background: #151310; padding: 6px 8px 7px; gap: 2px; box-shadow: 0 1px 0 #2c2823; }
body.mobile #top .stat { background: transparent; border-radius: 0; padding: 3px 8px; gap: 7px; border-right: 1px solid rgba(243, 238, 228, .1); }
body.mobile #top .stat:last-of-type { border-right: 0; }
body.mobile #top .stat .lbl { font-size: 8.5px; letter-spacing: .14em; color: rgba(243, 238, 228, .5) !important; }
body.mobile #top .stat b { font-size: 15px; font-weight: 500; }
body.mobile #top .hi { background: rgba(243, 238, 228, .08); border-radius: 6px; }
body.mobile #top .gear { background: transparent; border: 1px solid rgba(243, 238, 228, .14); border-radius: 10px; width: 36px; height: 36px; }
body.mobile #dayBar { height: 2px; }
/* the tab bar: each section's colour, as on the desktop's rail; the open one filled */
body.mobile #tabs { background: var(--gp); box-shadow: 0 -1px 0 var(--gp3); padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); }
body.mobile #tabs button { color: var(--ink-3); font-weight: 500; font-size: 10.5px; }
body.mobile #tabs button .tile { width: 36px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--tc) 14%, transparent); box-shadow: none; }
:root[data-theme="dark"] body.mobile #tabs button .tile { background: color-mix(in srgb, var(--tc) 26%, transparent); }
body.mobile #tabs button .tile svg { stroke: color-mix(in srgb, var(--tc) 75%, var(--ink)); }
:root[data-theme="dark"] body.mobile #tabs button[data-view="social"] .tile { background: rgba(243, 238, 228, .1); }
:root[data-theme="dark"] body.mobile #tabs button[data-view="social"] .tile svg { stroke: var(--ink-2); }
body.mobile #tabs button.on { color: var(--ink); font-weight: 600; }
body.mobile #tabs button.on .tile { background: var(--tc); transform: none; box-shadow: 0 2px 6px color-mix(in srgb, var(--tc) 40%, transparent); }
:root[data-theme="dark"] body.mobile #tabs button[data-view="social"].on .tile { background: #4a443b; }
body.mobile #tabs button.on .tile svg { stroke: #fff; }
/* sub-tabs: underlined, the desktop's weight */
body.mobile .tabs button { font-weight: 500; color: var(--ink-3); }
body.mobile .tabs button.on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--moss); }
/* surfaces: hairline, no shadow */
body.mobile .rackbox, body.mobile .specimen, body.mobile .me-card, body.mobile .ev-now, body.mobile .goals, body.mobile .restock, body.mobile .expo-card, body.mobile .row-card, body.mobile .tcard, body.mobile .stats div, body.mobile .sq-head.m { background: var(--card); border: 1px solid var(--gp3); border-radius: var(--r); box-shadow: none; }
body.mobile .row-card { padding: 10px; margin-bottom: 8px; }
body.mobile .row-card canvas { border-radius: 8px; }
body.mobile .tcard { padding: 10px 12px 10px 15px; }
body.mobile .tcard::before { width: 3px; }
body.mobile .tcard b { font-weight: 600; letter-spacing: 0; }
body.mobile .stats div { border-radius: 10px; }
body.mobile .stats .lbl { font-size: 9.5px; }
body.mobile .stats b, body.mobile .row-card .v, body.mobile .price { font-family: var(--mono); font-weight: 500; }
/* buttons: flat, a hairline, the desktop's moss and brick without the glow */
body.mobile button, body.mobile .button-link { border-radius: 10px; font-weight: 600; font-family: var(--sans); letter-spacing: 0; }
body.mobile button.primary, body.mobile button.primary:hover { background: var(--moss); border-color: var(--moss); color: #fff; box-shadow: none; }
body.mobile button.danger, body.mobile button.danger:hover { background: var(--brick); border-color: var(--brick); color: #fff; box-shadow: none; }
body.mobile button.small { border-radius: 9px; }
body.mobile button:disabled { opacity: .5; }
body.mobile .cut-all { border-radius: 10px; height: 44px; box-shadow: none; }
body.mobile .bigcta { border-radius: 12px; box-shadow: none; background: var(--moss); }
/* chips and pills */
body.mobile .chip { font-weight: 500; }
body.mobile .chip.on { background: var(--ink); border-color: var(--ink); color: var(--gp); font-weight: 600; }
body.mobile .tag, body.mobile .gene, body.mobile .pill { border-width: 1px; font-weight: 500; }
/* fields */
body.mobile input, body.mobile select, body.mobile textarea { border: 1px solid var(--gp3); border-radius: 10px; }
:root[data-theme="dark"] body.mobile input, :root[data-theme="dark"] body.mobile select, :root[data-theme="dark"] body.mobile textarea { background: var(--field); border-color: var(--rule-2); }
/* sheets and windows */
body.mobile .sheet-box, body.mobile #modalBox2 { border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, .35); border-top: 1px solid var(--gp3); }
body.mobile .sh-head canvas.coilbig { box-shadow: none; border: 1px solid var(--gp3); border-radius: 14px; background: var(--thumb-bg); }
/* empties: one quiet line */
body.mobile #view .empty { border-radius: 10px; font-weight: 400; font-style: italic; font-family: var(--serif); font-size: 14px; }
/* a market row: the animal and its price on top, its buttons on a row of their own under it (#823) */
body.mobile .row-card[data-mrow] { flex-wrap: wrap; row-gap: 8px; }
body.mobile .row-card[data-mrow] .body { flex: 1 1 0; }
body.mobile .row-card[data-mrow] > .v { align-self: flex-start; text-align: right; font-size: 15px; line-height: 1.5; }
body.mobile .row-card[data-mrow] > .mk-acts { flex: 1 0 100%; display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid var(--gp3); }
body.mobile .row-card[data-mrow] > .mk-acts button { flex: 1 1 0; max-width: 140px; min-height: 36px; }
body.mobile .row-card[data-mrow] .t { white-space: normal; }
/* A bottom sheet never taller than what's on screen (#858). 88vh counts the browser's address and tool bars as screen, so a
   long card (a long morph name was enough) outgrew the visible area and its top, grip and × sat above it, out of reach of
   a scroll. dvh is the space actually showing, and the sheet's own box (fixed to the screen) caps it too; vh stays first
   for browsers without dvh. */
body.mobile .sheet-box { max-height: 88vh; max-height: min(88dvh, calc(100% - 12px - env(safe-area-inset-top))); }
body.mobile #modalBox2 { max-height: 80vh; max-height: min(80dvh, calc(100% - 12px - env(safe-area-inset-top))); }

/* the supporter card on the phone (#922): the desktop card's look, full width in the sheet */
body.mobile #modalBox.spc-host { padding: 0; background: none; border: 0; box-shadow: none; max-height: 92vh; overflow: auto; }
body.mobile .spc.m { border-radius: 16px; overflow: hidden; }
body.mobile .spc.m .spc-pgrid { grid-template-columns: 1fr; }
body.mobile .spc.m .spc-foot { flex-wrap: wrap; }
body.mobile .spc.m .spc-foot .btn.primary { flex: 1 1 100%; min-height: 50px; font-size: 16px; display: flex; align-items: center; justify-content: center; text-align: center; }
body.mobile .spc.m .spc-checkout { min-height: 420px; }
body.mobile .sup-row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
body.mobile .sup-row .sup-ros svg { width: 22px; height: 22px; display: block; }

/* the Market's hide-locked switch (#931) */
body.mobile .mk-lockrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-card); font-weight: 600; font-size: 14px; }
body.mobile .mk-lockrow input { width: 20px; height: 20px; accent-color: var(--moss); }
body.mobile .mk-lockrow span { flex: 1; } body.mobile .mk-lockrow i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--ink-3); }
body.mobile .lb-line { margin: 0 0 8px; color: var(--ink-3); font-size: 13px; } /* lowball offers declined today (#954) */
/* Breeding → Pair picker: the Project filter and what each male adds toward it (#1008) */
body.mobile .pp-projs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; } body.mobile .pp-projs .chip { flex: none; } body.mobile .pp-projs .chip span { margin-left: 4px; opacity: .7; }
body.mobile .pp-adv { color: var(--moss); font-weight: 600; }

/* the room's top, folded by default: one flush bar (the room, its counts, the rank, a chevron) in the game's slab; the tub
   boxes and Room view open under it */
body.mobile .rh-fold { margin: 0 0 12px; border: 1px solid var(--gp3, #3a352e); border-radius: 14px; background: linear-gradient(180deg, rgb(46, 42, 37), rgb(38, 35, 32)); box-shadow: 0 2px 0 rgb(14, 13, 11); overflow: hidden; }
body.mobile .rh-bar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; margin: 0; padding: 8px 12px 8px 14px; border: 0; border-radius: 0; background: none; color: inherit; text-align: left; box-shadow: none; }
body.mobile .rh-t { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
body.mobile .rh-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 20px/1.1 var(--serif, Georgia, serif); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
body.mobile .rh-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/1.3 var(--sans); color: var(--ink-3); }
body.mobile .rh-bar .rankchip { flex: none; }
body.mobile .rh-chev { flex: none; width: 10px; height: 10px; margin: 0 2px 4px 2px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .18s; }
body.mobile .rh-fold.open .rh-chev { transform: rotate(-135deg); margin-bottom: -2px; }
body.mobile .rh-body { display: none; padding: 0 12px 12px; border-top: 1px solid rgba(255, 255, 255, .05); }
body.mobile .rh-fold.open .rh-body { display: block; }
body.mobile .rh-body .roomhead { justify-content: flex-end; margin: 10px 0 8px; }
body.mobile .rh-body .roomhead-r { flex-direction: row; }
/* the exact cash, under the chip */
body.mobile .cash-pop { position: fixed; z-index: 80; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgb(31, 29, 26); box-shadow: 0 10px 24px rgba(0, 0, 0, .5), 0 2px 0 rgb(14, 13, 11); animation: cashPop .14s ease-out both; }
body.mobile .cash-pop small { font: 700 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
body.mobile .cash-pop b { font: 400 22px/1.1 var(--gmf, var(--sans)); color: #ffd84a; }
@keyframes cashPop { from { opacity: 0; transform: translateY(-4px); } }
body.mobile #top .stat.cash { cursor: pointer; }
body.mobile .cash-pop .cash-earn { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 0; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #58ad6f, #3f9257); color: #fff; font: 700 13.5px/1 var(--sans); box-shadow: 0 3px 0 #2a6b3d; }
body.mobile .cash-pop .cash-earn span { font-size: 18px; line-height: 1; }

/* the tutorial card at the bottom: the page keeps its height free under the content, so everything can be scrolled above
   it, and it folds to a slim bar (its step and title) with the chevron in its corner */
body.mobile #view { padding-bottom: calc(24px + var(--coach-h, 0px)); }
body.mobile .coach-min { flex: none; width: 34px; height: 30px; min-height: 0; margin-left: 6px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); position: relative; }
body.mobile .coach-min::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -6px 0 0 -4px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); }
body.mobile .coach.min .coach-min::after { margin-top: -2px; transform: rotate(-135deg); }
body.mobile .coach.min { padding-bottom: 10px; }
body.mobile .coach.min :is(.coach-bar, .coach-body, .coach-wait, .coach-act, .coach-sure) { display: none; }
body.mobile .coach.min h3 { margin: 6px 0 0; font-size: 16px; }

/* Settings → Account: the sign-in methods (#911) */
.ml .auth-card .auth-hint { margin: -4px 0 0; font-size: 12px; text-transform: none; letter-spacing: 0; }
.signin-mrow .signin-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.signin-mrow .signin-acts:empty { display: none; }
body.mobile .more-list .signin-acts button { display: inline-flex; width: auto; min-height: 36px; margin: 0; padding: 6px 14px; font-size: 13.5px; border-radius: 999px; box-shadow: none; background: transparent; border: 1px solid var(--rule-2, currentColor); }
body.mobile .more-list .signin-acts button.danger { color: var(--danger, #d0624c); border-color: currentColor; background: transparent; }
/* the display picker sheet (#1278): a display's spots, what is in the chosen one, and the picker */
body.mobile .dpm-spots { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
body.mobile .dpm-spot { min-width: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--card); font-weight: 700; }
body.mobile .dpm-spot.full { border-style: solid; border-color: var(--amber); }
body.mobile .dpm-spot.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body.mobile .dpm-cur { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
body.mobile .dpm-cur canvas, body.mobile .dpm-row canvas, body.mobile .dpm-ex canvas { width: 104px; height: 60px; flex: none; }
body.mobile .dpm-empty { width: 104px; height: 60px; flex: none; display: grid; place-items: center; border: 1px dashed var(--rule-2); border-radius: 8px; color: var(--ink-3); font-size: 12px; }
body.mobile .dpm-modes { margin: 4px 0 6px; }
body.mobile .dpm-clear { margin-bottom: 8px; }
body.mobile .dpm-tools { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 8px; } body.mobile .dpm-tools .sb-fchips { flex: 1; } body.mobile .dpm-tools select { flex: none; }
body.mobile .dpm-row, body.mobile .dpm-ex { display: flex; gap: 10px; align-items: center; }
body.mobile .dpm-row.shown { outline: 1px dashed var(--amber); } body.mobile .dpm-row.here { opacity: 0.55; }
body.mobile .dpm-where { color: var(--amber); }
body.mobile .dpm-buy { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
body.mobile .dpm-more { display: block; width: 100%; margin: 4px 0 8px; }
body.mobile .dpm-count { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-left: 6px; }
body.mobile .dpm-with { display: flex; gap: 6px; align-items: center; width: 100%; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
/* Hatch visual pass (#1401): the grid is flat squares edge to edge, the way the desktop phone has it */
body.mobile #view .ig .ig-grid { gap: 2px; padding: 2px 0; }
body.mobile #view .ig .ig-cell, body.mobile #view .ig .ig-cell:hover, body.mobile #view .ig .ig-cell:active { padding: 0; border: 0; border-radius: 0; background: var(--thumb-bg); box-shadow: none; transform: none; min-height: 0; }
body.mobile #view .ig .ig-cell canvas { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
body.mobile #view .ig .ig-cell span { right: 5px; bottom: 5px; font-size: 11px; font-weight: 600; }
body.mobile #view .ig .ig-cell span.ig-cell-pin { left: 5px; top: 5px; right: auto; bottom: auto; } /* a pinned post (#963) */
/* For you / Following: the chosen one is the filled pill */
body.mobile #view .ig .ig-feedmode button.on { background: var(--ink); color: var(--paper); box-shadow: none; }
/* the comment line is a line, not a dark box */
body.mobile #view .ig .ig-cform input, body.mobile #view .ig .ig-cform input:focus { flex: 1; min-width: 0; height: auto; min-height: 0; padding: 6px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-size: 14px; }
body.mobile #view .ig .ig-cform button { min-height: 0; padding: 4px 2px; background: transparent; color: var(--ig-blue); font-weight: 600; }
/* the app's icon row: the open tab gets a short bar under it */
body.mobile #view .ig .ig-tabs button { position: relative; }
body.mobile #view .ig .ig-tabs button.on::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: currentColor; }
/* the post's ⋯ for your own posts */
body.mobile #view .ig .igp header .meta { display: inline-flex; align-items: center; gap: 4px; }
body.mobile #view .ig button.igp-dots { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }
/* top animals: two short lines for a long morph */
body.mobile #view .ig .ig-best small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.25; margin-top: 3px; }
/* Posts / Keepsakes: flat tabs with a line under the open one, as on the desktop phone */
body.mobile #view .ig .ig-ptabs { gap: 0; }
body.mobile #view .ig .ig-ptabs button, body.mobile #view .ig .ig-ptabs button:hover, body.mobile #view .ig .ig-ptabs button:active { border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 -1px 0 var(--rule); transform: none; color: var(--ink-3); }
body.mobile #view .ig .ig-ptabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
/* the Pair picker's groups (#1376): the project's own males, then a line, then the others that could help */
body.mobile .pp-list .pp-div { font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 8px 2px 4px; border-bottom: 1px solid var(--rule-2); }
body.mobile .pp-list .pp-div[data-ppdiv="1"] { margin-top: 10px; }
/* Pair now under a ready male's value in the Season male picker (#1418) */
.sb-m .sb-pbest { font-family: var(--sans); white-space: nowrap; } .sb-m .sb-pbest.off { opacity: .5; }
/* the animal card on the phone (#1281): the bar sticks at the sheet's top edge, in the sheet's own colour */
body.mobile .sheet-box .ac-bar { top: -8px; margin: 6px 0 4px; padding: 8px 0; background: var(--gp, var(--paper)); border-bottom: 0; }
body.mobile.gl .sheet-box .ac-bar { background: var(--g-bg); }
body.mobile .ac-bar > button, body.mobile .ac-more > summary { min-height: 44px; font-size: 14px; }
body.mobile .ac-menu { min-width: 220px; } body.mobile .ac-menu > button { min-height: 44px; }
body.mobile .ac-fold > summary { min-height: 44px; align-items: center; }
body.mobile .ac-bar .d-moveeggs, body.mobile .ac-bar > :not(button):not(details) { flex: 1 1 100%; }
/* care in place (#239): the card's fix and the Handle all bar, in the Attention filter */
.ac-care { margin-top: 6px; }
.care-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.care-btn, .care-all { min-height: 36px; padding: 4px 12px; font-size: 14px; border-radius: 8px; border: 1px solid var(--rule-2, #555); background: var(--paper-2, transparent); color: inherit; white-space: nowrap; }
.care-btn.care-treat, .care-all.care-treat { border-color: #6b5a3c; color: #e0a43a; }
.care-btn:disabled { opacity: .5; }
.care-hint, .care-note { font-size: 13px; }
.care-note { color: #e0a43a; }
.care-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }

/* the card's value, weight and age under the name (#1486) */
body.mobile .sh-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 2px 0 4px; font-size: 13px; color: var(--ink-2); }
body.mobile .sh-fval { font-family: var(--mono); color: var(--ink); }
/* the burst counter (#1549), finger-sized */
body.mobile #toasts .toast-more { min-height: 36px; font-size: 13px; }
/* the no-recovery bar (#1515) on the phone: in the page's column under the top bar, so it pushes the screen down rather
   than covering it; it wraps to two or three lines at 360 px */
body.mobile .rbar { position: static; height: auto; flex: none; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 12.5px; line-height: 1.35; }
body.mobile .rbar-t { white-space: normal; overflow: visible; }
body.mobile .rbar-go { height: 36px; min-height: 36px; padding: 0 12px; font-size: 13px; }
/* the Collection's chip rows folded into one bar (#1477) */
body.mobile .coll-tools-m { margin: 4px 0 6px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card, var(--paper)); }
body.mobile .coll-tools-m > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
body.mobile .coll-tools-m > summary::-webkit-details-marker { display: none; }
body.mobile .coll-tools-m > summary > span:first-child { flex: 1; }
body.mobile .coll-tools-on { padding: 1px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11.5px; }
body.mobile .coll-tools-car { transition: transform .12s; } body.mobile .coll-tools-m[open] .coll-tools-car { transform: rotate(180deg); }
body.mobile .coll-tools-m[open] { padding-bottom: 4px; } body.mobile .coll-tools-m .coll-q { padding: 0 8px; }
@media (prefers-reduced-motion: reduce) { body.mobile .coll-tools-car { transition: none; } }
/* Collection folders (#1599): one row under the search that scrolls sideways (open subfolders sit in it too), so the
   cards don't start lower; the picked folder scrolls into sight */
body.mobile .fold-bar.fold-bar-m { flex-wrap: nowrap; gap: 6px; margin: 6px -12px 4px; padding: 2px 12px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
body.mobile .fold-bar.fold-bar-m::-webkit-scrollbar { display: none; }
body.mobile .fold-bar-m .fbar-lbl { font-size: 0; gap: 0; margin-right: 0; }
body.mobile .fold-bar-m .fbar-lbl .fic { width: 18px; height: 18px; }
body.mobile .fold-bar-m .fchip, body.mobile .fold-bar-m .ftwist, body.mobile .fold-bar-m .fbtn { flex: none; height: 36px; min-height: 36px; }
body.mobile .fold-bar-m .fchip { max-width: 170px; font-size: 12.5px; border-radius: 10px; }
body.mobile .fold-bar-m .fgrp { flex: none; flex-wrap: nowrap; }
body.mobile .fold-bar-m .fgrp.has-kids > .fchip.top { border-radius: 10px 0 0 10px; }
body.mobile .fold-bar-m .ftwist { border-radius: 0 10px 10px 0; padding: 0 9px 0 6px; }
body.mobile .fold-bar-m .fchip.sub { height: 32px; min-height: 32px; max-width: 150px; }
body.mobile .fold-bar-m .fbtn { padding: 0 12px; border-radius: 10px; font-size: 14px; }
body.mobile .fold-bar-m .fedit { margin-left: 0; }
body.mobile .fold-bar-m .fhint { flex: none; font-size: 12.5px; }
body.mobile .dt-folder-m { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
body.mobile .fpick-name { margin-bottom: 8px; }
body.mobile .fpick { min-height: 46px; font-size: 15px; }
body.mobile .fpick.sub { min-height: 42px; }
body.mobile .fpick-foot .fbtn { min-height: 42px; }