/* Lock in (focus.html) */
body.lockin { background: var(--soft, #EAF4FB); }
body.lockin #app-bar .bar__tab path { fill: var(--soft, #EAF4FB); }
.li { max-width: 1240px; margin: 0 auto; padding: 34px 32px 8px; } /* a small gap above the footer (owner, 2026-10-21: "too much empty space"; the lock-in dock reserves its own room) */
.li button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.li svg { width: 18px; height: 18px; }
.li-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.li-head h1 { font-size: clamp(34px, 4vw, 46px); font-weight: 700; letter-spacing: -0.03em; }
.li-head p { margin-top: 6px; max-width: 520px; font-size: 16px; color: var(--muted); }
.li-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.li-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 96px; }
.li-card { border-radius: 28px; background: var(--card); box-shadow: 0 1px 0 var(--line); }

/* setup */
.li-setup { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px; padding: 26px; }
.li-preview { border-radius: 22px; background: linear-gradient(180deg, #F3FAF5, #E3F3E8); display: grid; place-items: end center; padding: 20px 10px 6px; min-height: 320px; }
.li-form { padding: 4px 10px 4px 22px; }
.li-lbl { margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.li-lbl:first-child { margin-top: 0; }
.li-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.li-chips button { height: 36px; padding: 0 14px; border-radius: 12px !important; background: #F2F3F5 !important; font-size: 13.5px !important; font-weight: 600 !important; transition: background-color .15s; }
.li-chips button:hover { background: #E8E9EC !important; }
.li-chips button.is-on { background: var(--ink) !important; color: #fff !important; }
.li-custom { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 12px; background: #F2F3F5; font-size: 13px; font-weight: 600; color: var(--muted); }
.li-custom input { width: 64px; border: 0; background: none; font: inherit; color: var(--ink); outline: 0; }
.li-rules { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.li-tog { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #F6F7F9; cursor: pointer; }
.li-tog input { position: absolute; opacity: 0; pointer-events: none; }
.li-tog i { flex: none; position: relative; width: 38px; height: 22px; margin-top: 1px; border-radius: 999px; background: #D5D7DC; transition: background-color .2s; }
.li-tog i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s; }
.li-tog input:checked + i { background: var(--ink); } .li-tog input:checked + i::after { transform: translateX(16px); }
.li-tog input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.li-tog span { font-size: 12.5px; line-height: 1.45; color: var(--muted); } .li-tog b { display: block; font-size: 14px; color: var(--ink); }
.li-start { margin-top: 18px; width: 100%; height: 54px; border-radius: 16px !important; background: var(--ink) !important; color: #fff !important; font-size: 15.5px !important; font-weight: 700 !important; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform .15s, opacity .15s; }
.li-start:hover:not(:disabled) { transform: translateY(-1px); }
.li-start:disabled { opacity: .45; cursor: not-allowed; }
.li-skip { display: block; margin: 10px auto 0; font-size: 13px !important; font-weight: 600 !important; color: var(--muted) !important; text-decoration: underline; text-underline-offset: 3px; }

/* phone card */
.li-phone { display: flex; align-items: center; gap: 14px; padding: 18px; }
.li-phone b { display: block; font-size: 15px; } .li-phone span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.li-phone__ic { position: relative; flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: #F2F3F5; color: var(--muted); }
.li-phone__ic svg { width: 22px; height: 22px; }
.li-phone__ic i { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; background: #C4C6CC; }
.li-phone--ok .li-phone__ic { background: #CDF2DD; color: #1E8A55; } .li-phone--ok .li-phone__ic i { background: #3CB179; }
.li-phone--bad .li-phone__ic { background: #FAD4DE; color: #B83560; } .li-phone--bad .li-phone__ic i { background: #E5484D; animation: lipulse 1s ease-in-out infinite; }
.li-phone--wait .li-phone__ic i { background: #F2C94C; animation: lipulse 1.2s ease-in-out infinite; }
@keyframes lipulse { 50% { transform: scale(1.25); } }
.li-help { padding: 4px 18px; }
.li-help summary { padding: 12px 0; font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; }
.li-help summary::-webkit-details-marker { display: none; }
.li-help summary::after { content: "+"; float: right; color: var(--muted); }
.li-help[open] summary::after { content: "–"; }
.li-help ol { padding: 0 0 14px 18px; font-size: 13px; line-height: 1.55; color: var(--muted); } .li-help li + li { margin-top: 6px; } .li-help b { color: var(--ink); }
.li-help code { font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; border-radius: 5px; background: #F2F3F5; color: var(--ink); }

.li-empty { font-size: 13px; color: var(--muted); }

/* running */
.li-run, .li-done { position: relative; padding: 26px; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 560px; background: linear-gradient(180deg, #FFFFFF 0%, #F1F9F3 100%); }
.li-run__top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.li-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #F2F3F5; color: var(--muted); }
.li-pill svg { width: 15px; height: 15px; }
.li-pill--pause { background: #DCE6FA; color: #3A5BA0; }
.li-pill--ok { background: #CDF2DD; color: #1E8A55; } .li-pill--bad { background: #FAD4DE; color: #B83560; } .li-pill--wait { background: #FCEBB6; color: #8A5E00; }
.li-subj { font-size: 13px; font-weight: 700; color: var(--muted); padding: 6px 12px; border-radius: 999px; background: #F2F3F5; }
.li-time { margin-top: 4px; font-size: clamp(56px, 8vw, 84px); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.li-bar { width: min(420px, 90%); height: 6px; margin-top: 18px; border-radius: 999px; background: rgba(14, 14, 16, .08); overflow: hidden; }
.li-bar i { display: block; height: 100%; border-radius: inherit; background: #3FA56C; transition: width 1s linear; }
.li-warn { margin-top: 16px; padding: 10px 14px; border-radius: 14px; background: #FCEBB6; font-size: 13.5px; font-weight: 600; color: #6B4A00; }
.li-warn.is-danger { background: #FAD4DE; color: #9A2148; animation: lishake .5s ease-in-out; }
@keyframes lishake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.li-give { margin-top: auto; padding-top: 18px; font-size: 13px !important; font-weight: 600 !important; color: var(--muted) !important; }
.li-give:hover { color: #B83560 !important; }
.li-done h2 { margin-top: 10px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.li-done p { margin-top: 6px; font-size: 15px; color: var(--muted); }
.li-done__acts { width: min(360px, 100%); margin-top: 8px; }
.li-done.is-fail { background: linear-gradient(180deg, #FFFFFF 0%, #F6F2EC 100%); }

/* while a session runs, the rest of the page steps back */



/* ---------- phone check picker ---------- */
.li-checks { display: flex; flex-direction: column; gap: 6px; }
.li-checks button { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px !important; background: #F6F7F9 !important; text-align: left; transition: background-color .15s, box-shadow .15s; }
.li-checks button:hover { background: #EFF1F4 !important; }
.li-checks button.is-on { background: #fff !important; box-shadow: inset 0 0 0 2px var(--ink); }
.li-checks i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid #C4C6CC; }
.li-checks button.is-on i { border: 5px solid var(--ink); }
.li-checks span { font-size: 12.5px; line-height: 1.45; color: var(--muted); } .li-checks b { display: block; font-size: 14px; color: var(--ink); }
/* "Stay on ai45" is its own setting, not a third phone-check option: keep it clear of the boxes above */
.li-form > .li-tog, .li-checks + .li-tog { margin-top: 16px; }
/* the phone check is the only way now: one line that says how it works (no choice to make) */
.li-check1 { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #F6F7F9; }
.li-check1 svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ink); }
html[data-theme="dark"] .li-check1 { background: var(--card-2, #24262c); }
html[data-theme="dark"] .li-check1 svg { color: var(--paper, #fff); }
.li-start + .li-sl__note { margin-top: 8px; text-align: center; }

/* ---------- link card with the QR code ---------- */
.li-link { padding: 18px; }
.li-link__h { display: flex; align-items: center; gap: 14px; }
.li-link__h b { display: block; font-size: 15px; } .li-link__h span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.li-link.li-phone--ok .li-phone__ic { background: #CDF2DD; color: #1E8A55; } .li-link.li-phone--ok .li-phone__ic i { background: #3CB179; }
.li-link.li-phone--bad .li-phone__ic { background: #FAD4DE; color: #B83560; } .li-link.li-phone--bad .li-phone__ic i { background: #E5484D; }
.li-link.li-phone--wait .li-phone__ic i { background: #F2C94C; animation: lipulse 1.2s ease-in-out infinite; }
.li-qr { margin: 16px auto 0; width: 190px; height: 190px; padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; }
.li-qr svg { width: 100% !important; height: 100% !important; }
.li-qr a { font-size: 11px; word-break: break-all; }
.li-code { margin-top: 12px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted); }
.li-code b { color: var(--ink); letter-spacing: .04em; }
.li-join { padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.li-join b { font-size: 15px; } .li-join > span { font-size: 12.5px; color: var(--muted); }
.li-join div { display: flex; gap: 8px; margin-top: 8px; }
.li-join input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 13px; background: #F2F3F5; font: 700 17px var(--font-display); letter-spacing: .12em; text-transform: uppercase; outline: 0; }
.li-join input:focus { background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.li-join button { height: 44px; padding: 0 18px; border: 0; border-radius: 13px; background: var(--ink); color: #fff; font: 700 14px var(--font-display); }

/* ---------- arming: flip to start ---------- */
.li-arm h2 { margin-top: 18px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.li-arm p { margin-top: 6px; font-size: 15px; color: var(--muted); max-width: 420px; }
.li-flip { margin-top: 30px; width: 84px; height: 84px; border-radius: 26px; background: var(--ink); color: #fff; display: grid; place-items: center; animation: liflip 2.4s cubic-bezier(.6, 0, .3, 1) infinite; }
.li-flip svg { width: 40px !important; height: 40px !important; }
@keyframes liflip { 0%, 20% { transform: perspective(400px) rotateX(0); } 50%, 70% { transform: perspective(400px) rotateX(180deg); } 100% { transform: perspective(400px) rotateX(360deg); } }

/* ---------- the phone screens (phone-only session, linked phone) ---------- */
body.li-solo-on { background: #0B0C0E; }
body.li-solo-on #app-bar, body.li-solo-on .tools, body.li-solo-on .footer, body.li-solo-on .drawer { display: none !important; }
body.li-solo-on { padding-top: 0 !important; }
/* the page-in animation (app.css ai45-in, fill both) leaves a transform on <main>, which would make the phone screen
   (position: fixed) only as tall as <main>, so its red warning covered just the top of the phone */
body.li-solo-on main { animation: none !important; transform: none !important; }
/* battery saver: face down, the phone page is pure black (OLED screens draw almost nothing for black) */
.li-ph.is-save { background: #000 !important; }
.li-ph.is-save .li-ph__in { opacity: 0; transition: opacity .3s; }
.li-ph__note { margin-top: 18px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 196, 0, .14); color: #FFD772; font-size: 13px; line-height: 1.45; }
.li-ph__note[hidden] { display: none; }
.li-ph { position: fixed; inset: 0; z-index: 50; background: #0B0C0E; color: #fff; display: grid; place-items: center; padding: 24px; text-align: center; transition: background-color .4s; }
.li-ph.is-run { background: #000; }
.li-ph.is-warn { background: #3A0E18; }
.li-ph__in { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; }
.li-ph h2 { margin-top: 20px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.li-ph p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.li-ph p b { color: #fff; letter-spacing: .06em; }
.li-ph__dim { font-size: 13px !important; color: rgba(255, 255, 255, .35) !important; }
.li-ph__err { color: #FFB4C4 !important; font-size: 13px !important; }
.li-ph__icon { width: 92px; height: 92px; border-radius: 28px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
.li-ph__icon svg { width: 44px !important; height: 44px !important; }
.li-ph__icon--ok { background: rgba(60, 177, 121, .2); color: #5FD39A; }
.li-ph__icon--flip { background: #fff; color: #0B0C0E; animation: liflip 2.4s cubic-bezier(.6, 0, .3, 1) infinite; }
.li-ph__btn { margin-top: 24px; width: 100%; height: 56px; border-radius: 18px !important; background: #fff !important; color: #0B0C0E !important; font-size: 16px !important; font-weight: 700 !important; }
.li-ph__tree { width: min(260px, 70vw); }
.li-ph.is-run .li-ph__tree { opacity: .55; }
.li-ph__time { margin-top: 8px; font-size: 64px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.li-ph.is-run .li-ph__time { color: rgba(255, 255, 255, .3); }
.li-ph__msg { margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, .55); }
.li-ph__warn { margin-top: 18px; padding: 12px 16px; border-radius: 16px; background: #E5484D; color: #fff; font-weight: 700; font-size: 15px; animation: lishake .5s ease-in-out; }
.li-ph.is-warn .li-ph__tree, .li-ph.is-warn .li-ph__time { opacity: 1; color: #fff; }
.li-ph__give { margin-top: 36px; font-size: 13px !important; font-weight: 600 !important; color: rgba(255, 255, 255, .35) !important; }


/* ============================================================ aquarium ============================================================ */
.li-tank { display: block; width: 100%; touch-action: pan-y; }
.li-preview { position: relative; padding: 0; background: linear-gradient(180deg, #F2F9FE, #E1F0FB); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.li-preview .li-tank { height: 300px; }
.li-preview__cap { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 3px; }
.li-preview__cap b { font-size: 18px; letter-spacing: -0.01em; } .li-preview__cap span:last-child { font-size: 13px; color: var(--muted); }
.li-preview__cap .li-rar { align-self: flex-start; }
.li-rar { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.li-rar--common { background: #EEF0F3; color: #6B7079; } .li-rar--uncommon { background: #DDF5E8; color: #1E8A55; } .li-rar--rare { background: #DCE8FD; color: #2F6FE4; }
.li-rar--epic { background: #EBDFFD; color: #7B3FD9; } .li-rar--mythic { background: linear-gradient(90deg, #FFD2C8, #FFE4D6, #FFD2C8); background-size: 200% 100%; color: #B3261E; animation: lishimmer 2s steps(40) infinite; }
.li-rar--seasonal { background: linear-gradient(90deg, #FF7417, #FFB04A 50%, #FF7417); background-size: 200% 100%; color: #fff; text-shadow: 0 1px 1px rgba(150, 50, 0, .35); box-shadow: 0 0 10px rgba(255, 128, 32, .5); animation: lishimmer 2.6s steps(52) infinite; } /* the same glow as .season-tag (owner, 4 Nov) */
.li-rar--beta { background: linear-gradient(90deg, #1F1B3D, #3A2F6E, #1F1B3D); background-size: 200% 100%; color: #FFC860; animation: lishimmer 2.6s steps(52) infinite; }
html[data-theme="dark"] .li-rar--mythic { background: linear-gradient(90deg, #4A1712, #66251B, #4A1712); background-size: 200% 100%; color: #FF9A8A; }
.li-rar--legendary { background: #FFF3BF; color: #8A6E00; } /* plain yellow, no shimmer, never orange (owner, 5 Nov) */
html[data-theme="dark"] .li-rar--legendary { background: var(--card-2); color: #F5D547; }
@keyframes lishimmer { to { background-position: -200% 0; } }
.li-lbl small { margin-left: 6px; font-weight: 600; color: var(--faint, #9A9DA4); }
.li-fishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; padding: 2px; scrollbar-width: thin; }
.li-fish { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 14px !important; background: #F6F7F9 !important; font-size: 11.5px !important; font-weight: 600 !important; transition: background-color .15s, box-shadow .15s, transform .15s; }
.li-fish canvas { width: 100%; height: 46px; }
.li-fish span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.li-fish:hover { transform: translateY(-2px); background: #EEF5FB !important; }
.li-fish.is-on { background: #fff !important; box-shadow: inset 0 0 0 2px var(--ink); }
.li-fish--uncommon { box-shadow: inset 0 -3px 0 #8FDDB6; } .li-fish--rare { box-shadow: inset 0 -3px 0 #9DBDF7; } .li-fish--epic { box-shadow: inset 0 -3px 0 #C6A6F5; } .li-fish--legendary { box-shadow: inset 0 -3px 0 #F0D24A; }
.li-fish.is-on.li-fish--uncommon, .li-fish.is-on.li-fish--rare, .li-fish.is-on.li-fish--epic, .li-fish.is-on.li-fish--legendary { box-shadow: inset 0 0 0 2px var(--ink); }
.li-fish.is-locked { color: var(--faint, #9A9DA4) !important; cursor: help; }
.li-fish__lock { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--muted); }
.li-fish__lock svg { width: 11px !important; height: 11px !important; }
.li-unlock { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: #F6F7F9; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.li-unlock b { color: var(--ink); }
.li-dex__bar { display: block; height: 5px; margin-top: 8px; border-radius: 999px; background: rgba(14, 14, 16, .08); overflow: hidden; }
.li-dex__bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }

/* the big tank while a session runs */
.li-run, .li-done { padding: 18px; background: linear-gradient(180deg, #FFFFFF 0%, #EEF7FD 100%); min-height: 0; }
.li-tankwrap { position: relative; width: 100%; margin-top: 10px; }
.li-tank--big { height: min(460px, 56vh); }
.li-time { position: absolute; left: 0; right: 0; top: 34px; text-align: center; font-size: clamp(54px, 7vw, 80px); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: rgba(14, 14, 16, .82); text-shadow: 0 2px 20px rgba(255, 255, 255, .8); pointer-events: none; }
.li-run .li-warn { margin-top: 12px; }
.li-run .li-give { margin-top: 12px; padding-top: 0; }
.li-arm .li-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.li-arm .li-over h2 { margin-top: 14px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.li-arm .li-over p { margin-top: 4px; font-size: 14.5px; color: var(--muted); max-width: 380px; }
.li-arm .li-flip { margin-top: 0; }
.li-done { text-align: center; }
.li-done h2 { margin-top: 8px; font-size: 26px; }
.li-done__badge { margin-top: 14px; }
.li-done.is-fail { background: linear-gradient(180deg, #FFFFFF 0%, #F4F1EA 100%); }
.li-new { margin: 14px auto 0; max-width: 460px; padding: 12px 14px; border-radius: 16px; background: #FFF7E1; text-align: left; }
.li-new b { font-size: 13.5px; } .li-new div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.li-new__f { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }

/* your aquarium + fishdex */
.li-aq { margin-top: 34px; }
.li-aq__h { margin: 26px 0 12px; }
.li-aq__h h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.li-aq__h p { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.li-aq__tank { padding: 0; background: none; box-shadow: none; overflow: hidden; } /* the tank is the box: its glass runs to the card edge */
.li-tank--home { height: min(440px, 52vh); cursor: crosshair; }
.li-dex { display: flex; flex-direction: column; gap: 14px; }
.li-dex__row { padding: 16px; border-radius: 24px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.li-dex__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.li-dex__h .li-dex__bar { flex: 1 1 120px; max-width: 220px; margin-top: 0; }
.li-dex__g { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.li-dex__c { display: flex; flex-direction: column; align-items: center; padding: 8px 8px 12px; border-radius: 18px; background: linear-gradient(180deg, #F3F9FE, #E8F3FB); }
.li-dex__c canvas { width: 100%; height: 70px; }
.li-dex__c b { font-size: 13.5px; } .li-dex__c span { font-size: 11.5px; color: var(--muted); }
.li-dex__c.is-locked { background: #F4F5F7; } .li-dex__c.is-locked b { color: var(--faint, #9A9DA4); }

/* phone screens with a tank */
.li-ph__tank { width: min(320px, 82vw); height: 210px; display: block; }
.li-ph.is-run .li-ph__tank { opacity: .35; }
.li-ph.is-warn .li-ph__tank { opacity: 1; }

@media (max-width: 980px) { .li-preview .li-tank { height: 220px; } }
@media (max-width: 640px) { .li-tank--big { height: 52vh; } .li-tank--home { height: 340px; } .li-dex__g { grid-template-columns: repeat(2, 1fr); } .li-fishes { grid-template-columns: repeat(3, 1fr); } }

.li-setup { align-items: start; }
.li-preview { justify-content: flex-start; position: sticky; top: 96px; align-self: start; }

/* tablets + phones (restored) */
@media (max-width: 980px) { .li-grid { grid-template-columns: 1fr; } .li-side { position: static; } .li-setup { grid-template-columns: 1fr; } .li-preview { position: static; } .li-form { padding: 6px 4px; } }
@media (max-width: 640px) { .li { padding: 22px 16px 8px; } .li-setup, .li-run, .li-done { padding: 14px; } }
.li-preview { align-items: stretch; place-items: stretch; padding: 0; min-height: 0; }

/* the extension card */
button.li-ext { width: 100%; font: inherit; text-align: left; cursor: pointer; border: 0; }
.li-ext { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-top: 12px; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
a.li-ext:hover, button.li-ext:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .3); }
.li-ext b { display: block; font-size: 14.5px; } .li-ext span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.li-ext__ic { flex: none; width: 44px; height: 44px; border-radius: 14px; background: #DCE8FD; color: #2F6FE4; display: grid; place-items: center; }
.li-ext__ic svg { width: 22px !important; height: 22px !important; }
.li-ext.is-on .li-ext__ic { background: #CDF2DD; color: #1E8A55; }

/* ============================================================
   2026-10-15: tabs, cycles, focus mode (lockin.js)
   ============================================================ */
:root { --li-ease: cubic-bezier(0.32, 0.72, 0, 1); }
/* header strip: goal ring */
/* tabs with a sliding ink */
.li-tabs { position: relative; margin-top: 22px; display: inline-flex; gap: 2px; padding: 5px; border-radius: 18px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.li-tabs button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 13px; font-size: 14px; font-weight: 700; color: var(--muted); transition: color .3s; }
.li-tabs button svg { width: 17px; height: 17px; }
.li-tabs button:hover { color: var(--paper); }
.li-tabs button.is-on { color: #fff; }
.li-tabs__ink { position: absolute; z-index: 0; left: 0; top: 5px; height: 40px; border-radius: 13px; background: var(--ink); transition: transform .5s var(--li-ease), width .5s var(--li-ease); }
/* panels slide in from the side you're going towards */
/* the same gap under the tab row on every tab (owner, 2026-10-21: Shop and Stats sat right against it) */
.li-panels { margin-top: 24px; }
.li-panel > :first-child { margin-top: 0 !important; }
.li-panel { opacity: 0; transform: translateX(calc(var(--dir, 1) * 18px)); transition: opacity .3s, transform .5s var(--li-ease); }
.li-panel.is-on { opacity: 1; transform: none; }
.li-soon { margin-top: 24px; color: var(--muted); }
/* setup in place: chips animate, the break row opens, the plan line pops */
.li-chips button { transition: background-color .25s, color .25s, transform .2s var(--li-ease) !important; }
.li-chips button:active { transform: scale(.96); }
.li-custom.is-on input { box-shadow: 0 0 0 2px var(--ink); }
.li-brk { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--li-ease), opacity .3s; }
.li-brk.is-open { grid-template-rows: 1fr; opacity: 1; }
.li-brk__in { min-height: 0; overflow: hidden; }
.li-plan { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--navy); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.li-plan.is-pop { animation: lipop .45s var(--li-ease); }
@keyframes lipop { from { transform: translateY(4px); opacity: .4; } }
.li-preview__cap { transition: opacity .18s, transform .3s var(--li-ease); }
.li-preview__cap.is-swap { opacity: 0; transform: translateY(6px); }
.li-fish { transition: transform .25s var(--li-ease), background-color .25s, box-shadow .25s !important; }
.li-fish:hover:not(.is-locked) { transform: translateY(-2px); }
.li-start span { transition: opacity .2s; }
.li-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--card); font-size: 13.5px; font-weight: 700; box-shadow: 0 1px 0 var(--line); transition: transform .2s var(--li-ease); }
.li-btn:hover { transform: translateY(-1px); } .li-btn svg { width: 16px; height: 16px; }
.li-aq__h { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.li-aq__h h3 { font-size: 18px; font-weight: 700; }
.li-aq__h .li-btn { flex: none; white-space: nowrap; } /* "Arrange tank" stays on one line (owner, 4 Nov) */
/* aquarium pickers: backgrounds and decorations */
.li-pickrow { display: flex; flex-wrap: wrap; gap: 8px; }
.li-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 130px; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: 0 1px 0 var(--line); text-align: left; transition: transform .25s var(--li-ease), box-shadow .25s, background-color .25s; }
.li-pick:hover:not(:disabled) { transform: translateY(-2px); }
.li-pick b { font-size: 13.5px; } .li-pick small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.li-pick small svg { width: 12px; height: 12px; }
.li-pick.is-on { box-shadow: 0 0 0 2px var(--ink); }
.li-pick.is-locked { opacity: .55; cursor: not-allowed; }
.li-pick__sw { width: 100%; height: 34px; border-radius: 10px; background: linear-gradient(#7FC4E8, #2C7DB6); }
.li-pick__sw--reef { background: linear-gradient(#8FD9D0, #2B8FA3); } .li-pick__sw--dusk { background: linear-gradient(#FAAA46, #F49276 38%, #C8AAE4); }
.li-pick__sw--christmas { background: linear-gradient(#ECF4FA, #D6ECF6 40%, #68A0CE 80%, #F6F9FC 80%); }
.li-pick__sw--night { background: linear-gradient(#2A3A6B, #0B1530); } .li-pick__sw--deep { background: linear-gradient(#0E2A4A, #020A18); }

/* ---------- focus mode: a full-screen tank over everything ---------- */
.li-fx { position: fixed; inset: 0; z-index: 400; overflow: hidden; color: #fff; background: #0B1A2C; clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%)); transition: clip-path .9s cubic-bezier(0.32, 0.72, 0, 1); will-change: clip-path; }
.li-fx.is-in { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); }
.li-fx.is-out { clip-path: circle(0 at 50% 50%); transition-duration: .6s; }
.li-fx__tank { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.li-fx__shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 40%, transparent, rgba(5, 12, 24, .45)); transition: background .6s; }
.li-fx.is-warn .li-fx__shade { background: radial-gradient(80% 60% at 50% 40%, rgba(255, 60, 90, .1), rgba(90, 10, 30, .55)); }
.li-fx__top { position: absolute; top: 18px; left: 22px; right: 22px; display: flex; align-items: center; gap: 12px; z-index: 2; }
.li-fx__cyc { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .8); }
.li-fx__cyc i { width: 22px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .22); transition: background-color .5s, width .5s var(--li-ease); }
.li-fx__cyc i.is-done { background: #FFB27A; } .li-fx__cyc i.is-now { width: 34px; background: #fff; }
.li-fx__cyc span { margin-left: 6px; }
.li-fx__top .li-pill { margin-left: auto; background: rgba(255, 255, 255, .14); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.li-fx__top .li-pill--bad { background: rgba(255, 90, 120, .35); } .li-fx__top .li-pill--ok { background: rgba(80, 220, 150, .25); }
.li-fx__icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; transition: background-color .2s; }
.li-fx__icon:hover { background: rgba(255, 255, 255, .22); } .li-fx__icon svg { width: 18px; height: 18px; }
.li-fx__top > * { min-width:0; }
.li-fx__top .lr__strip { flex:1; overflow-x:auto; }
.li-fx__top .li-pill { flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.li-fx__top .li-fx__study { flex:none; width:auto; display:flex; gap:8px; padding:0 13px; font-size:13px; font-weight:700; }
@media(max-width:640px) { .li-fx__top { left:12px; right:12px; flex-wrap:wrap; gap:8px; } .li-fx__top .lr__strip { order:4; flex-basis:100%; } .li-fx__top .li-fx__cyc:empty { display:none; } }
.li-fx__mid { position: absolute; left: 50%; top: 42%; z-index: 2; width: min(640px, 90vw); transform: translate(-50%, -50%); text-align: center; transition: opacity .26s, transform .5s var(--li-ease), filter .26s; }
.li-fx__mid.is-swap { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); filter: blur(6px); }
.li-fx.is-in .li-fx__mid { animation: lifxin .9s var(--li-ease) .35s both; }
@keyframes lifxin { from { opacity: 0; transform: translate(-50%, calc(-50% + 30px)) scale(.96); filter: blur(10px); } }
/* a session with breaks: what the big time counts to, and the whole session's time left under it at half the size */
.li-fx__lbl { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
.li-fx__total { margin-top: 10px; font-size: clamp(16px, 2vw, 22px); font-weight: 600; opacity: .8; }
.li-fx__total b { font-size: clamp(38px, 7vw, 84px); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin-right: 8px; opacity: 1; }
.li-fx__time { font-size: clamp(76px, 14vw, 168px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 10px 50px rgba(0, 20, 50, .45); }
.li-fx__sub { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; font-weight: 700; }
.li-fx__warn { margin: 16px auto 0; max-width: 420px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 70, 100, .9); font-size: 15px; font-weight: 700; animation: liwarn 1s ease-in-out infinite alternate; }
.li-fx__pz { display: block; margin-top: 4px; font-size: 26px; font-variant-numeric: tabular-nums; }
@keyframes liwarn { to { transform: scale(1.03); } }
.li-fx__msg h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; text-shadow: 0 8px 40px rgba(0, 20, 50, .4); }
.li-fx__msg p { margin: 14px auto 0; max-width: 520px; font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.li-fx__msg .li-flip { margin: 0 auto 22px; background: rgba(255, 255, 255, .14); }
.li-fx__msg.is-soft .li-fx__time { font-size: clamp(60px, 10vw, 120px); opacity: .95; }
.li-fx__k { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FFD3B0; }
.li-fx__k svg { width: 18px; height: 18px; }
/* the end of a break: the time goes red for the last 30 s; after it, a red "waiting for your phone" */
.li-fx__time.is-red { color: #FF4D5E; animation: li-redpulse 1s ease-in-out infinite; }
@keyframes li-redpulse { 50% { opacity: .7; } }
.li-fx.is-late::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 6px rgba(225, 40, 60, .85), inset 0 0 120px 20px rgba(225, 40, 60, .35); animation: li-redpulse 1.2s ease-in-out infinite; z-index: 2; }
.li-late .li-fx__k { color: #FF8A95 !important; }
.li-ph__time--brk { font-size: 84px; line-height: 1; margin-top: 18px; }
/* the break rule (10 minutes over ends the session), shown in setup, focus mode and on the phone */
.li-brkrule { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--muted, #6b6b75); }
.li-brkrule svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.li-brkrule.is-fx { display: block; margin: 14px auto 0; max-width: 460px; padding: 8px 14px; border-radius: 12px; background: rgba(0, 0, 0, .22); color: rgba(255, 255, 255, .9); font-size: 13px; font-weight: 600; }
.li-fx:not(.is-dark) .li-brkrule.is-fx { background: rgba(255, 255, 255, .6); color: #2a2a33; }
.li-brkrule.is-ph { display: block; margin: 16px auto 0; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); font-size: 13px; }
.li-brkrule.is-red { color: #FF8A95 !important; background: rgba(225, 40, 60, .16) !important; }
.li-ph.is-warn .li-ph__time--brk { color: #FF6B78; }
@media (prefers-reduced-motion: reduce) { .li-fx__time.is-red, .li-fx.is-late::after { animation: none; } }
.li-fx__badge { margin-bottom: 12px; display: flex; justify-content: center; }
.li-fx .li-new { background: rgba(255, 255, 255, .12); color: #fff; margin-top: 18px; }
.li-fx__bot { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 20px; }
.li-fx__btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 15px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 15px; font-weight: 700; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .2s, transform .25s var(--li-ease); }
.li-fx__btn:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); }
.li-fx__btn.is-p { background: #fff; color: #0E0E10; } .li-fx__btn.is-p:hover { background: #FFE6D4; }
.li-fx__btn svg { width: 17px; height: 17px; }
.li-fx[data-phase="break"] { background: #2A2340; }
.li-fx[data-phase="break"] .li-fx__shade { background: radial-gradient(80% 60% at 50% 40%, rgba(255, 190, 140, .12), rgba(30, 20, 50, .55)); }
/* celebration: bubbles rise when a fish joins */
/* the celebration dots: two tall sheets slid by the graphics chip, so nothing repaints while they rise */
.li-fx.is-cele::before, .li-fx.is-cele::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260vh; pointer-events: none; will-change: transform, opacity; }
.li-fx.is-cele::after { background-image: radial-gradient(circle, rgba(255, 255, 255, .7) 0 3px, transparent 4px), radial-gradient(circle, rgba(255, 220, 180, .7) 0 2px, transparent 3px); background-size: 120px 160px, 90px 120px; background-position: 0 0, 20px 0; animation: licele 2.6s ease-out forwards; }
.li-fx.is-cele::before { z-index: 30; background-image: radial-gradient(circle, rgba(255, 255, 255, .55) 0 5px, transparent 6px); background-size: 190px 230px; background-position: 40px 0; animation: licele2 2.6s ease-out forwards; }
@keyframes licele { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-120vh); opacity: 0; } }
@keyframes licele2 { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-140vh); opacity: 0; } }
.li-fx.is-aq .li-fx__mid { top: 16%; }
/* a catch card (bought, given or reeled in later) sits in the middle like a session's, never off the top */
.li-fx.is-aq .li-fx__mid:has(.li-reveal) { top: 46%; }
body.li-fx-on { overflow: hidden; }
/* the slim bar when focus mode is hidden */
.li-mini { position: relative; vertical-align: top; margin: 22px 0 0 12px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5); animation: limini .5s var(--li-ease); font-size: 14px; }
.li-mini[hidden] { display: none; }
@keyframes limini { from { transform: translateX(-10px); opacity: 0; } }
/* the session timer in the top bar (lockin.js paintMini): a dot and the time; click for "Back to focus mode" */
.lbm { position: relative; flex: none; }
.lbm[hidden] { display: none; }
.lbm__pill { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; cursor: pointer; transition: background-color .2s; animation: lbmin .4s var(--li-ease); }
.lbm__pill:hover, .lbm.is-open .lbm__pill { background: rgba(255, 255, 255, .14); }
.lbm__pill b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.lbm__t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.lbm__t small { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.lbm__t small[hidden] { display: none; }
.lbm.is-two .lbm__pill { height: 44px; }
.lbm.is-two .lbm__pill b { font-size: 16px; }
.lbm__dot { width: 8px; height: 8px; border-radius: 50%; background: #5FD39A; box-shadow: 0 0 0 4px rgba(95, 211, 154, .25); animation: lidot 1.6s ease-in-out infinite; }
.lbm.is-late .lbm__pill b { color: #FF8A94; }
@keyframes lbmin { from { opacity: 0; transform: scale(.92); } }
.lbm__pop { position: absolute; left: 0; top: calc(100% + 10px); z-index: 300; display: flex; flex-direction: column; gap: 10px; min-width: 210px; padding: 12px; border-radius: 16px; background: #fff; color: #0E0E10; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45), 0 0 0 1px rgba(14, 14, 16, .06); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .25s var(--li-ease); }
.lbm.is-open .lbm__pop { opacity: 1; transform: none; pointer-events: auto; }
.lbm__pop span { font-size: 12.5px; font-weight: 600; color: #6B6E76; }
.lbm__pop button { height: 40px; border: 0; border-radius: 12px; background: #0E0E10; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
html[data-theme="dark"] .lbm__pop { background: var(--card-2, #24262c); color: var(--paper, #fff); }
html[data-theme="dark"] .lbm__pop button { background: #fff; color: #0E0E10; }
.li-mini b { font-variant-numeric: tabular-nums; } .li-mini > span:not(.li-mini__dot) { color: rgba(255, 255, 255, .6); }
.li-mini__dot { width: 8px; height: 8px; border-radius: 50%; background: #5FD39A; box-shadow: 0 0 0 4px rgba(95, 211, 154, .25); animation: lidot 1.6s ease-in-out infinite; }
@keyframes lidot { 50% { box-shadow: 0 0 0 8px rgba(95, 211, 154, 0); } }
.li-mini button { height: 36px; padding: 0 14px; border-radius: 12px; background: #fff; color: #0E0E10; font-weight: 700; font-size: 13.5px; }
@media (max-width: 760px) { .li-mini { margin: 10px 0 0; } .li-tabs { display: flex; overflow-x: auto; } .li-tabs button span { display: none; } .li-fx__bot { bottom: 22px; } .li-fx__cyc span { display: none; } }
@media (prefers-reduced-motion: reduce) { .li-fx, .li-panel, .li-tabs__ink, .li-brk, .li-fx__mid { transition: none !important; animation: none !important; } .li-fx.is-cele::before, .li-fx.is-cele::after { display: none; } }
/* light tanks (lagoon, reef, dusk): dark type on the water; dark tanks (night, deep, aurora): light type */
.li-fx:not(.is-dark) { background: var(--soft, #EAF4FB); color: #0E0E10; }
.li-fx:not(.is-dark) .li-fx__shade { background: radial-gradient(70% 55% at 50% 42%, rgba(255, 255, 255, .55), transparent 75%); }
.li-fx:not(.is-dark) .li-fx__time, .li-fx:not(.is-dark) .li-fx__msg h2 { text-shadow: 0 10px 40px rgba(255, 255, 255, .8); }
.li-fx:not(.is-dark) .li-fx__msg p { color: rgba(14, 14, 16, .72); }
.li-fx:not(.is-dark) .li-fx__cyc { color: rgba(14, 14, 16, .65); }
.li-fx:not(.is-dark) .li-fx__cyc i { background: rgba(14, 14, 16, .14); } .li-fx:not(.is-dark) .li-fx__cyc i.is-done { background: var(--orange, #E37239); } .li-fx:not(.is-dark) .li-fx__cyc i.is-now { background: #0E0E10; }
.li-fx:not(.is-dark) :is(.li-fx__sub, .li-fx__btn, .li-fx__icon, .li-fx__top .li-pill, .li-new) { background: rgba(255, 255, 255, .7); color: #0E0E10; box-shadow: 0 1px 0 rgba(14, 14, 16, .06); }
.li-fx:not(.is-dark) :is(.li-fx__btn, .li-fx__icon):hover { background: #fff; }
.li-fx:not(.is-dark) .li-fx__btn.is-p { background: #0E0E10; color: #fff; } .li-fx:not(.is-dark) .li-fx__btn.is-p:hover { background: #2A2B30; }
.li-fx:not(.is-dark) .li-fx__msg .li-flip { background: #0E0E10; color: #fff; }
.li-fx:not(.is-dark) .li-fx__k { color: #B4531F; }
.li-fx:not(.is-dark)[data-phase="break"] { background: #F3ECFA; }
.li-fx:not(.is-dark) .li-fx__top .li-pill--ok { background: #CDF2DD; color: #1E8A55; } .li-fx:not(.is-dark) .li-fx__top .li-pill--bad { background: #FAD4DE; color: #B83560; }

/* ---------- Together: study rooms (assets/lockin-rooms.js) ---------- */
.lr { margin-top: 24px; }
.lr__hero h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -0.03em; }
.lr__hero p { margin-top: 10px; max-width: 680px; font-size: 18px; line-height: 1.55; color: var(--muted); }
.lr__two { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lr__card { display: flex; flex-direction: column; gap: 16px; padding: 32px; min-height: 340px; }
.lr__card > b { font-size: 28px; letter-spacing: -0.02em; } .lr__card > span { font-size: 16px; line-height: 1.5; color: var(--muted); margin-top: -8px; }
.lr__card label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 700; color: var(--muted); }
.lr__card input:not([type="radio"]) { height: 64px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--navy); color: var(--paper); font: inherit; font-size: 24px; font-weight: 600; outline: 0; transition: box-shadow .2s, background-color .2s; }
.lr__card input:not([type="radio"]):focus { background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.lr__code { letter-spacing: .3em; text-transform: uppercase; font-family: var(--font-mono, "IBM Plex Mono", monospace) !important; }
.lr__rule { display: flex; flex-direction: column; gap: 8px; }
.lr__rule label { flex-direction: row; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; background: var(--navy); color: var(--paper); font-weight: 500; cursor: pointer; transition: box-shadow .2s; }
.lr__rule label:has(input:checked) { box-shadow: 0 0 0 2px var(--ink); }
.lr__rule input { margin-top: 3px; accent-color: var(--ink); }
.lr__rule span { font-size: 13px; color: var(--muted); } .lr__rule b { display: block; font-size: 14px; color: var(--paper); }
.lr__card .li-start { margin-top: auto; min-height: 60px; font-size: 18px; }
.lr__note { margin-top: 16px; font-size: 14px; color: var(--muted); }
.lr__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lr__k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.lr__big { font: 600 clamp(40px, 6vw, 64px) var(--font-mono, "IBM Plex Mono", monospace); letter-spacing: .12em; line-height: 1; margin-top: 4px; }
.lr__top p { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.lr__share { display: flex; gap: 8px; flex-wrap: wrap; }
.lr__tankcard { position: relative; margin-top: 18px; overflow: hidden; }
.lr__tank { height: min(300px, 40vh); }
.lr__count { position: absolute; left: 16px; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 700; color: #0E0E10; }
.lr__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.lr__p { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--card); box-shadow: 0 1px 0 var(--line); transition: box-shadow .3s, transform .3s var(--li-ease); animation: lrin .5s var(--li-ease) both; }
@keyframes lrin { from { opacity: 0; transform: translateY(10px); } }
.lr__p canvas { grid-row: 1 / 3; width: 54px; height: 36px; }
.lr__n b { display: block; font-size: 14.5px; } .lr__n small { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.lr__bar { grid-column: 2; display: block; height: 4px; border-radius: 4px; background: var(--navy); overflow: hidden; }
.lr__bar i { display: block; height: 100%; background: var(--orange); transition: width 1s var(--li-ease); }
.lr__p--running small { color: #1E8A55; } .lr__p--done { box-shadow: 0 0 0 2px #5FC78A; }
.lr__p--failed { opacity: .6; } .lr__p.is-bad { box-shadow: 0 0 0 2px #E5484D; animation: lrbad .8s ease-in-out infinite alternate; }
@keyframes lrbad { to { transform: translateX(2px); } }
.lr__go { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; flex-wrap: wrap; }
.lr__go b { display: block; font-size: 17px; } .lr__go span { font-size: 13.5px; color: var(--muted); }
.lr__go .li-start { width: auto; margin: 0; padding: 0 22px; }
/* the people row in focus mode */
.lr__strip { display: flex; gap: 4px; }
.lr__dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, .7); color: #0E0E10; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); transition: box-shadow .3s, opacity .3s; }
.lr__dot--running { box-shadow: 0 0 0 2px #5FC78A; } .lr__dot--break { box-shadow: 0 0 0 2px #F5B74E; }
.lr__dot--failed { opacity: .4; } .lr__dot.is-bad { box-shadow: 0 0 0 2px #E5484D; }
@media (max-width: 760px) { .lr__two { grid-template-columns: 1fr; } }
.li-what { display: block; width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: 14px; background: #F2F3F5; color: var(--paper); font: inherit; font-size: 15.5px; font-weight: 600; outline: 0; transition: background-color .2s, box-shadow .25s; }
.li-what::placeholder { color: var(--faint, #9A9DA4); font-weight: 500; }
.li-what:focus { background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
html[data-theme="dark"] .li-what { background: var(--card-2); }
/* the "Give up?" box (lockin.js askGiveUp): above focus mode (.li-fx is 400) */
.li-ask { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 20px; background: rgba(8, 9, 12, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .22s cubic-bezier(0.32, 0.72, 0, 1); }
.li-ask.is-in { opacity: 1; }
.li-ask__card { width: min(380px, 100%); padding: 22px; border-radius: 24px; background: var(--card); color: var(--paper); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); transform: translateY(8px) scale(.98); transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1); }
.li-ask.is-in .li-ask__card { transform: none; }
.li-ask h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.li-ask p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.li-ask__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.li-ask__btn { height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--paper); background: var(--navy); transition: background-color .2s, filter .2s; }
.li-ask__btn:hover { background: var(--slate); }
.li-ask__btn--bad { background: #C0313F; color: #fff; }
.li-ask__btn--bad:hover { background: #C0313F; filter: brightness(1.1); }
html[data-theme="dark"] .li-ask__card { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 0 0 1px var(--line); }
@media (prefers-reduced-motion: reduce) { .li-ask, .li-ask__card { transition: none; } }
/* ---------- session length (LOCK-03 to 05): readout + 5-minute steps + slider + three presets ---------- */
.li-dur { --p: 10%; padding: 14px 16px 16px; border-radius: 20px; background: var(--navy); }
.li-dur__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.li-dur__val { display: flex; align-items: baseline; gap: 6px; }
.li-dur__val b { font-family: var(--font-display); font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--paper); }
.li-dur__val span { font-size: 15px; font-weight: 700; color: var(--muted); }
.li-dur__step { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; font-weight: 700; line-height: 1; color: var(--paper); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: background-color .15s, transform .15s var(--li-ease); }
.li-dur__step:hover { background: var(--slate); }
.li-dur__step:active { transform: scale(.93); }
.li-dur__range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; margin: 18px 0 6px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--orange) var(--p), rgba(var(--fg-rgb), .12) var(--p)); }
.li-dur__range:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.li-dur__range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--orange), 0 3px 8px rgba(0, 0, 0, .25); transition: transform .15s; }
.li-dur__range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--orange), 0 3px 8px rgba(0, 0, 0, .25); }
.li-dur__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.li-dur__scale { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 11.5px; font-weight: 600; color: var(--faint, #9A9DA4); }
.li-dur__presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.li-dur__presets button { width: 100%; background: var(--card) !important; box-shadow: inset 0 0 0 1px var(--line); }
.li-dur__presets button.is-on { background: var(--ink) !important; color: #fff !important; box-shadow: none; }
html[data-theme="dark"] .li-dur__presets button.is-on { background: var(--paper) !important; color: var(--navy) !important; }
/* the fish you have up front; locked ones fold away */
.li-fishes--open { max-height: none; }
.li-locked { margin-top: 8px; border-radius: 16px; background: var(--navy); }
.li-locked summary { display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 700; color: var(--paper); }
.li-locked summary::-webkit-details-marker { display: none; }
.li-locked summary svg { width: 15px; height: 15px; color: var(--muted); }
.li-locked summary small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.li-locked summary::after { content: ""; width: 8px; height: 8px; margin-left: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--li-ease); }
.li-locked[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.li-locked .li-fishes { padding: 0 10px 12px; max-height: 260px; }
@media (prefers-reduced-motion: reduce) { .li-dur__step, .li-dur__range::-webkit-slider-thumb { transition: none; } }
/* ---------- the measuring jug (LOCK-06 to 10): water = session length, tap fills it, drag to set ---------- */
.li-dur.has-jug { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "jug top" "jug hint" "pre pre"; column-gap: 16px; row-gap: 10px; align-items: center; }
.li-dur.has-jug .li-dur__side { display: contents; } .li-dur.has-jug .li-jug { grid-area: jug; } .li-dur.has-jug .li-dur__top { grid-area: top; align-self: end; } .li-dur.has-jug .li-dur__hint { grid-area: hint; align-self: start; } .li-dur.has-jug .li-dur__presets { grid-area: pre; margin-top: 4px; }
.li-jug { display: block; width: 100%; height: 200px; touch-action: none; border-radius: 14px; cursor: ns-resize; }
.li-jug:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.li-dur__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.li-dur__val b span { margin: 0 6px 0 3px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.li-dur__val b span:last-child { margin-right: 0; }
.li-dur.has-jug .li-dur__step { flex: none; }

.li-dur.has-jug .li-dur__top { gap: 8px; } .li-dur.has-jug .li-dur__val b { font-size: 38px; } .li-dur.has-jug .li-dur__step { width: 40px; height: 40px; }
.li-dur__hint { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
@media (max-width: 420px) { .li-dur.has-jug { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; } .li-jug { height: 170px; } .li-dur__val b { font-size: 36px; } .li-dur__step { width: 40px; height: 40px; } }
/* a bigger tank up front (LOCK-11) */
.li-setup { grid-template-columns: 372px minmax(0, 1fr); }
.li-preview .li-tank { height: 360px; }
.li-tank--home { height: clamp(480px, 90vh, 900px); }
@media (max-width: 980px) { .li-setup { grid-template-columns: 1fr; } .li-preview .li-tank { height: 260px; } }
@media (max-width: 640px) { .li-tank--home { height: clamp(400px, 72vh, 620px); } }
.li-pick__sw--sunrise { background: linear-gradient(#FFD9B8, #4E7CC4); } .li-pick__sw--arctic { background: linear-gradient(#EAF6FC, #4F92C6); }
.li-pick__sw--mangrove { background: linear-gradient(#C9DEB8, #2C6A50); } .li-pick__sw--aurora { background: linear-gradient(#1C6A6A, #0A1230); }

/* ---------- your tank (replaces the preview tank + fish picker, owner 2026-10-17) ---------- */

.li-pool { padding: 14px 16px; border-radius: 18px; background: var(--navy); }

.li-pool__fish { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.li-pool__f { display: grid; place-items: center; width: 54px; height: 38px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }

.li-pool__f canvas { width: 46px; height: 30px; display: block; }

.li-pool p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.li-pool__more { padding: 0; background: none; border: 0; font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- the catch: a top-down pond over focus mode ---------- */

.li-cast { position: absolute; inset: 0; z-index: 6; opacity: 0; transition: opacity .6s cubic-bezier(0.32, 0.72, 0, 1); }

.li-cast.is-in { opacity: 1; } .li-cast.is-out { opacity: 0; pointer-events: none; }

.li-cast__pond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.li-cast__cap { position: absolute; left: 50%; bottom: 13%; z-index: 1; margin: 0; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: rgba(6, 22, 34, .45); color: #fff; font-size: 16px; font-weight: 700; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.li-cast__skip { position: absolute; right: 20px; bottom: 20px; z-index: 1; height: 38px; padding: 0 16px; border-radius: 12px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13.5px; font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.li-cast__skip:hover { background: rgba(255, 255, 255, .26); }

.li-fx.is-casting .li-fx__mid, .li-fx.is-casting .li-fx__bot { opacity: 0; pointer-events: none; }

/* ---------- the reveal card ---------- */

.li-reveal__k { font-size: 13px; font-weight: 700; letter-spacing: .02em; opacity: .75; }

.li-reveal__stage { position: relative; width: min(340px, 74vw); height: 170px; margin: 4px auto 0; }

.li-reveal.is-small .li-reveal__stage { height: 110px; width: min(240px, 60vw); }

.li-reveal__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.li-reveal__glow { position: absolute; inset: 8% 14%; border-radius: 50%; background: radial-gradient(closest-side, var(--rc, #fff), transparent); opacity: 0; transform: scale(.6); transition: opacity .5s, transform .7s cubic-bezier(0.32, 0.72, 0, 1); }

.li-reveal.is-shown .li-reveal__glow { opacity: .45; transform: scale(1); animation: lirvglow 2.6s ease-in-out .7s infinite; }

@keyframes lirvglow { 50% { opacity: .28; transform: scale(1.08); } }

.li-reveal__out { opacity: 0; transform: translateY(12px); transition: opacity .45s .1s, transform .6s .1s cubic-bezier(0.32, 0.72, 0, 1); }

.li-reveal.is-shown .li-reveal__out { opacity: 1; transform: none; }

.li-reveal.is-small .li-reveal__out h2 { font-size: 22px; margin: 6px 0 2px; }

@media (prefers-reduced-motion: reduce) { .li-cast, .li-reveal__glow, .li-reveal__out { transition: none; animation: none; } }

.li-cast { touch-action: none; -webkit-user-select: none; user-select: none; }

.li-cast__again { position: absolute; left: 50%; top: 58%; z-index: 2; transform: translateX(-50%); height: 50px; padding: 0 26px; border-radius: 16px; background: #fff; color: #0E1A2C; font-size: 16px; font-weight: 800; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); animation: lirvagain .4s cubic-bezier(0.32, 0.72, 0, 1); }

.li-cast__again:hover { transform: translateX(-50%) scale(1.03); }

.li-cast__again:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

@keyframes lirvagain { from { opacity: 0; transform: translate(-50%, 8px); } }


/* special Fishdex rows (seasonal, beta): each fish shows on its own; the season tag */
.li-dex__season { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(var(--fg-rgb, 20,20,30), .07); }
.li-dex__season.is-on { background: #E0622A; color: #fff; }
.li-dex__c--christmas { text-align: center; padding-bottom: 16px; }
.li-dex__c--christmas .li-dex__season { margin-top: 10px; justify-content: center; font-size: 11px; white-space: nowrap; }

/* a step past 5 minutes or 4 hours: the readout shakes (lockin.js stepMins) */
.li-dur__val b.is-limit, .li-odds__len b.is-limit { animation: li-limit .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes li-limit { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .li-dur__val b.is-limit, .li-odds__len b.is-limit { animation: none; } }

/* ---------- the shop (water you earn by focusing buys fish and decorations) ---------- */
.li-shop__wallet { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; padding: 18px 22px; }
.li-shop__wallet div { display: flex; flex-direction: column; }
.li-shop__wallet span { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.li-shop__wallet b { font-family: var(--font-display); font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.li-shop__wallet small { font-size: 12px; color: var(--muted); }
.li-shop__wallet p { font-size: 14px; color: var(--muted); max-width: 46ch; }
.li-shop__wallet p strong { font-weight: 800; color: var(--paper); }
@media (max-width: 640px) { .li-shop__wallet { grid-template-columns: 1fr; gap: 8px; } }
/* the converter (owner, 2026-11-09): sits at the right end of the card (owner, 2026-11-09: "move it more right"), same colour as the card */
.li-shop__wallet:has(.li-cv) { grid-template-columns: auto auto 1fr; }
.li-shop__wallet .li-cv { justify-self: end; margin-right: 12px; gap: 8px; }
.li-shop__wallet .li-cv__h { font-size: 12.5px; }
.li-shop__wallet .li-cv__row { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.li-cv input { width: 52px; height: 38px; border: 0; border-radius: 10px; background: rgba(var(--fg-rgb), .06); color: var(--paper); font: 800 16px/1 var(--font-display, inherit); text-align: center; font-variant-numeric: tabular-nums; outline: none; transition: box-shadow .2s; }
.li-cv input.li-cv__m { width: 68px; }
.li-cv input:focus { box-shadow: inset 0 0 0 2px var(--orange); }
.li-cv label { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.li-cv__sw { font-size: 17px; color: var(--muted); margin: 0 2px; }
.li-shop__wallet .li-cv__l { font-size: 13.5px; }
.li-cv__l strong { color: var(--paper); font-weight: 800; }
@media (max-width: 900px) { .li-shop__wallet:has(.li-cv) { grid-template-columns: auto 1fr; } .li-shop__wallet .li-cv { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 640px) { .li-shop__wallet:has(.li-cv) { grid-template-columns: 1fr; } }
.li-shop__g { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.li-shop__g--themes { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
.li-shop__g--themes .li-shop__c { flex: 1 0 146px; min-width: 0; max-width: 200px; }
.li-shop__g--themes .li-shop__buy { white-space: nowrap; }
.li-shop__two { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: auto; }
.li .li-shop__two .li-shop__buy { margin: 0; }
.li .li-shop__prev { width: 100%; height: 32px; padding: 0 4px; white-space: nowrap; border-radius: 10px; background: rgba(var(--fg-rgb, 14, 14, 16), .07); color: var(--paper); font-size: 12.5px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line); transition: transform .15s, background .15s; }
.li .li-shop__prev:hover { transform: translateY(-1px); }
.li-fx.is-preview .li-fx__bot .li-fx__btn { min-width: 132px; justify-content: center; }
.li-fx.is-preview .li-fx__btn[disabled] { opacity: .6; cursor: default; transform: none; }
.li-fx--pier.is-preview .li-fx__top .li-pill { background: rgba(10, 18, 44, .55); color: #fff; } /* the name stays readable on a pale sky */
.li-shop__c { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 10px 12px; border-radius: 18px; background: var(--card); box-shadow: 0 1px 0 var(--line); text-align: center; }
.li-shop__c canvas { width: 100%; height: 76px; }
.li canvas[data-fishpic][data-locked="1"] { --li-fish-silhouette: rgba(var(--fg-rgb), .24); }
html[data-theme="dark"] .li canvas[data-fishpic][data-locked="1"] { --li-fish-silhouette: rgba(var(--fg-rgb), .55); }
.li-shop__c .li-shop__sw { display: block; height: 76px; flex: none; margin-bottom: 4px; }
.li-shop__g--decor .li-shop__c canvas { height: 84px; }
.li-shop__c b { font-size: 14px; }
.li-shop__c small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.li-shop__place { font-size: 11px; font-weight: 700; color: var(--muted); }
.li .li-shop__buy { margin-top: auto; width: 100%; height: 34px; border-radius: 10px; background: var(--paper); color: var(--card); font-size: 12.5px; font-weight: 700; transition: transform .15s, background .15s; }
.li .li-shop__buy:hover:not([disabled]) { transform: translateY(-1px); }
.li .li-shop__buy.is-sure { background: var(--orange); color: #fff; }
.li .li-shop__buy[disabled] { background: rgba(var(--fg-rgb, 20,20,30), .07); color: var(--muted); cursor: default; }
.li-shop__own { margin-top: auto; font-size: 12px; font-weight: 700; color: #2F9E68; }
.li-shop__c.is-own { opacity: .85; }
.li-shop__done { padding: 18px; color: var(--muted); }
.li-shop .li-dex__row { margin-top: 10px; }

/* ---------- arranging the tank ---------- */
.li-tank.is-arranging { touch-action: none; cursor: grab; outline: 2px dashed rgba(232,106,42,.6); outline-offset: -6px; border-radius: 22px; }
.li-tank.is-arranging.is-out { outline-color: rgba(220,60,60,.8); }
.li .li-btn.is-p { background: var(--paper); color: var(--card); }
.li-tray { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 18px; background: rgba(var(--fg-rgb, 20,20,30), .05); }
.li .li-tray__i { display: flex; flex-direction: column; align-items: center; width: 96px; padding: 6px; border-radius: 14px; background: var(--card); box-shadow: 0 1px 0 var(--line); cursor: grab; touch-action: none; user-select: none; }
.li .li-tray__i canvas { width: 80px; height: 56px; pointer-events: none; }
.li .li-tray__i span { font-size: 11.5px; font-weight: 700; pointer-events: none; }
.li-tray__empty { padding: 6px 4px; font-size: 13px; color: var(--muted); }
.li-drag-ghost { position: fixed; left: 0; top: 0; z-index: 500; width: 64px; height: 48px; pointer-events: none; opacity: .85; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.li-drag-ghost.is-in { opacity: 0; }

/* setup without the old preview tank (owner, 2026-10-17: "so much empty space"): the form uses the whole card, in two
   columns on wide screens (how long + blocks + the plan | what you're on, your tank, phone check, start) */
.li-setup { grid-template-columns: minmax(0, 1fr); }
.li-form { padding: 0 6px; }
.li-form__a > .li-lbl:first-child, .li-form__b > .li-lbl:first-child { margin-top: 0; }
.li-form__b > .li-lbl:first-child { margin-top: 0; }
/* the divider (the right column's left border) runs the whole height, so it follows the left side down when Breaks opens (owner, 2026-10-22) */
@media (min-width: 1100px) { .li-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 36px; align-items: stretch; } .li-form > * { align-self: stretch; } .li-form__b { padding-left: 36px; border-left: 1px solid var(--line); margin-left: -18px; } }
@media (max-width: 1099px) { .li-form__b { margin-top: 18px; } }
/* the readout beside the jug: the number on its own line, − and + under it (they used to overflow the box) */
@media (min-width: 1100px) { .li-form { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.li-dur.has-jug { grid-template-columns: 128px minmax(0, 1fr); }
.li-dur.has-jug .li-dur__top { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "val val val" "less more ."; gap: 8px; align-items: center; }
.li-dur.has-jug .li-dur__val { grid-area: val; }
.li-dur.has-jug .li-dur__step[data-step="-5"] { grid-area: less; }
.li-dur.has-jug .li-dur__step[data-step="5"] { grid-area: more; }
.li-dur.has-jug .li-dur__val b { font-size: 36px; white-space: nowrap; }
@media (max-width: 420px) { .li-dur.has-jug { grid-template-columns: 108px minmax(0, 1fr); } .li-dur.has-jug .li-dur__val b { font-size: 30px; } }

/* ---------- fish on the line (2026-10-19): the pile on the setup page, Catch later, the linked phone's fishing screen ---------- */
.li-line { padding: 14px 16px; border-radius: 18px; background: var(--sky); margin-bottom: 14px; }
/* dark: the same yellow as light mode, just deeper (no coloured top strip: light mode has none) */
html[data-theme="dark"] .li-line { background: var(--sky); }
.li-line .li-line__full { margin: -2px 0 10px; padding: 8px 12px; border-radius: 12px; background: rgba(var(--fg-rgb), .07); font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--paper); }
/* bobbing floats (owner, 2026-11-05): the water takes the equipped background's colours (inline), one float per fish */
.li-line__water { position: relative; height: 96px; border-radius: 12px; overflow: hidden; background: linear-gradient(#7ED0F6, #2E80E2); }
.li-line__water::before { content: ""; position: absolute; inset: 0 0 auto; height: 36px; background: rgba(255, 255, 255, .22); }
.li .li-line__fl { position: absolute; top: 20px; width: 34px; height: 44px; margin-left: -17px; padding: 6px; border: 0; background: none; cursor: pointer; animation: li-float 1.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.li .li-line__fl svg { display: block; }
.li .li-line__fl:hover { filter: brightness(1.08); }
.li .li-line__fl:focus-visible { outline: 2px solid #fff; outline-offset: 0; border-radius: 10px; }
.li-line__sh { position: absolute; top: 60px; width: 46px; height: 16px; margin-left: -23px; border-radius: 50%; background: rgba(10, 40, 70, .28); animation: li-tug 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.li-line__rg { position: absolute; top: 46px; width: 30px; height: 8px; margin-left: -15px; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 50%; animation: li-ring 1.8s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes li-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes li-tug { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(6px, 2px); } 60% { transform: translate(-4px, -1px); } }
@keyframes li-ring { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes li-bob { 50% { transform: translateY(-3px); } }
.li-cast__later { position: absolute; right: 18px; top: 18px; z-index: 2; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(6, 22, 34, .45); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.li-cast__later:hover { background: rgba(6, 22, 34, .62); }
.li-ph__fishing { width: min(260px, 70vw); margin: 0 auto 6px; }
.li .li-ph__fishing svg.li-rod { display: block; width: 100% !important; height: auto !important; overflow: visible; }
.li-rod__rod { stroke: #c9a46a; stroke-width: 5; stroke-linecap: round; fill: none; }
.li-rod__line { stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; fill: none; transform-origin: 150px 22px; animation: li-line 3.2s ease-in-out infinite; }
.li-rod__float { transform-box: fill-box; transform-origin: center; animation: li-float 3.2s ease-in-out infinite; }
.li-rod__fb { fill: #fff; } .li-rod__fr { stroke: #ff6b3d; stroke-width: 5; } .li-rod__ft { fill: #ff6b3d; }
.li-rod__water { fill: rgba(80, 170, 230, .28); }
.li-rod__ring { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: li-ring 3.2s ease-out infinite; opacity: 0; }
.li-rod__ring--2 { animation-delay: .5s; }
.li-rod__shadow { fill: rgba(0, 0, 0, .28); animation: li-shadow 3.2s ease-in-out infinite; }
/* bob, bob, then a tug pulls the float under */
@keyframes li-float { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-3px); } 40% { transform: translateY(1px); } 55% { transform: translateY(-2px); } 70% { transform: translateY(12px); } 78% { transform: translateY(4px); } }
@keyframes li-line { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-2.5deg); } }
@keyframes li-ring { 0%, 64% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes li-shadow { 0%, 100% { transform: translateX(-20px); } 70% { transform: translateX(22px); } }
/* the line snapped (the phone's failed screen): the rod springs back once, the loose end sways, the float drifts away */
.li-rod--snap .li-rod__rod { transform-origin: 22px 150px; animation: li-snap-rod .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.li-rod__line--snap { animation: li-snap-sway 2.6s ease-in-out .7s infinite; }
.li-rod__tail { stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; fill: none; stroke-dasharray: 3 4; }
.li-rod__drift { animation: li-snap-drift 4.5s cubic-bezier(.25, .6, .35, 1) .3s both; }
.li-rod__ring--snap { animation: li-snap-ring 1.4s ease-out .1s both; }
.li-rod__shadow--away { animation: li-snap-away 1.6s cubic-bezier(.5, 0, .9, .5) .2s both; }
@keyframes li-snap-rod { 0% { transform: rotate(4deg); } 45% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
@keyframes li-snap-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }
@keyframes li-snap-drift { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(52px, 4px) rotate(14deg); opacity: .15; } }
@keyframes li-snap-ring { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes li-snap-away { 0% { transform: translateX(0); opacity: .9; } 100% { transform: translateX(-140px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .li .li-line__fl, .li-line__sh, .li-line__rg,.li-rod__line, .li-rod__float, .li-rod__ring, .li-rod__shadow, .li-rod--snap .li-rod__rod, .li-rod__drift { animation: none; } }

/* ---------- naming, My fish, name tags (2026-10-19) ---------- */
.li-name { display: flex; align-items: center; gap: 10px; width: min(380px, 100%); margin: 16px auto 0; padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: 0 8px 30px -14px rgba(0, 20, 50, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-shadow: none; }
.li-name span { font-size: 13px; font-weight: 700; color: #0E0E10; white-space: nowrap; }
.li-name input { flex: 1; min-width: 0; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: #0E0E10; font: inherit; font-size: 15px; line-height: 1.4; outline: none; box-shadow: inset 0 0 0 1px rgba(14, 14, 16, .1); }
.li-name input:focus { box-shadow: inset 0 0 0 2px var(--orange); }
.li-name em { font-style: normal; font-size: 12px; font-weight: 700; color: #1f8a4c; padding-right: 8px; }
.li-fx.is-dark .li-name { background: rgba(10, 16, 30, .55); } .li-fx.is-dark .li-name span { color: #fff; }
.li-reveal.is-small .li-name { margin-top: 10px; }
.li-aq__tank { position: relative; }
.li-myf__all { display: flex; gap: 8px; flex: none; } /* Fill / Hide all / Sell fish on one row (owner, 5 Nov) */
@media (max-width: 720px) { .li-aq__h:has(.li-myf__all) { flex-wrap: wrap; } }
.li-myf { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 22px; }
.li-myf__c { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: opacity .2s; }
.li-myf__c canvas { width: 64px; height: 44px; display: block; border-radius: 10px; background: rgba(var(--fg-rgb), .04); }
.li-myf__c.is-off canvas, .li-myf__c.is-off .li-myf__t { opacity: .45; }
.li-myf__t { display: grid; gap: 2px; min-width: 0; }
.li-myf__t b { font-size: 14.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-myf__t small { font-size: 12px; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-myf__in { position: absolute; opacity: 0; pointer-events: none; }
.li-myf__sw { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(var(--fg-rgb), .18); transition: background-color .2s; }
.li-myf__sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(0.32, 0.72, 0, 1); }
.li-myf__in:checked + .li-myf__sw { background: var(--ink); }
html[data-theme="dark"] .li-myf__in:checked + .li-myf__sw { background: var(--orange); }
.li-myf__in:checked + .li-myf__sw::after { transform: translateX(16px); }
.li-myf__in:focus-visible + .li-myf__sw { outline: 2px solid var(--orange); outline-offset: 2px; }
.li .li-myf__more { grid-column: 1 / -1; justify-self: center; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(var(--fg-rgb), .07); color: var(--paper); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.li-tag { position: absolute; z-index: 5; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 7px; padding: 4px 5px 4px 11px; border-radius: 999px; background: rgba(14, 14, 16, .8); box-shadow: 0 0 0 2px var(--rc, transparent), 0 6px 18px -8px rgba(0, 0, 0, .5); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.li-tag .li-rar { height: 19px; padding: 0 8px; font-size: 10.5px; }
.li-tag[hidden] { display: none; }
/* rename in My fish: the name is a button; click it (or the pencil) to type a new one */
.li .li-myf__nm { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--paper); font: inherit; text-align: left; cursor: text; }
.li-myf__nm b { min-width: 0; font-size: 14.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-myf__nm svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: opacity .15s; }
.li-myf__nm:hover svg, .li-myf__nm:focus-visible svg { opacity: 1; stroke: var(--orange); }
.li-myf__nm:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
.li-myf__ip { width: 100%; min-width: 0; height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: rgba(var(--fg-rgb), .06); color: var(--paper); font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.4; outline: none; box-shadow: inset 0 0 0 2px var(--orange); }
.li-myf__swl { display: inline-flex; padding: 6px; margin: -6px; cursor: pointer; }
/* selling (2026-11-05): "Sell fish" turns the cards into a picker with a padlock each; the bar holds the total and Sell */
.li-myf__bar { position: sticky; top: 84px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -16px rgba(0, 0, 0, .35); font-size: 14px; line-height: 1.4; }
.li-myf__bar[hidden] { display: none; }
.li-myf__bar b { font-weight: 800; }
.li .li-myf__sell { background: var(--ink); color: var(--card); }
html[data-theme="dark"] .li .li-myf__sell { background: var(--orange); color: #0E0E10; }
.li .li-myf__sell:disabled { opacity: .4; cursor: default; }
.li-myf.is-selmode { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.li-myf.is-selmode .li-myf__t b { max-width: 100%; }
.li-myf__ctl { display: inline-flex; align-items: center; gap: 8px; }
.li .li-myf__lock { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--fg-rgb), .06); color: var(--muted); cursor: pointer; }
.li-myf__lock svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.li .li-myf__lock.is-on { background: var(--ink); color: var(--card); }
html[data-theme="dark"] .li .li-myf__lock.is-on { background: var(--orange); color: #0E0E10; }
.li-myf__pick { width: 20px; height: 20px; margin: 0; accent-color: var(--orange); cursor: pointer; }
.li-myf__pick:disabled { cursor: default; opacity: .35; }
.li-myf__c.is-picked { box-shadow: inset 0 0 0 2px var(--orange); }
.li-myf__c.is-nosell canvas, .li-myf__c.is-nosell .li-myf__t { opacity: .5; }

/* ---------- breaks: switch, sliders, timeline (2026-10-19) ---------- */
.li-brktog { margin-top: 16px; }
.li-brktog.is-off { opacity: .6; cursor: default; }
.li-brk__in { min-height: 0; overflow: hidden; }
.li-brk__box { display: grid; gap: 14px; margin-top: 10px; padding: 16px; border-radius: 18px; background: var(--navy); }
.li-sl { display: grid; gap: 8px; }
.li-sl__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.li-sl__h b { font-size: 15px; color: var(--paper); font-variant-numeric: tabular-nums; }
.li-sl__h small { font-weight: 500; font-size: 12px; color: var(--faint, var(--muted)); text-align: right; }
.li-tl__h { margin-top: 2px; flex-wrap: wrap; }
.li-range { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: 40px; padding: 6px 4px; margin: 0; overflow: visible; background: transparent; cursor: pointer; --f: 0%; }
.li-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: rgba(var(--fg-rgb), .14); }
.li-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(var(--fg-rgb), .14); }
.li-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--ink); }
.li-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 2px var(--ink), 0 2px 6px rgba(0, 0, 0, .2); transition: transform .15s; }
.li-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 2px var(--ink), 0 2px 6px rgba(0, 0, 0, .2); }
.li-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.li-range:disabled { cursor: default; opacity: .75; }
.li-sl__note { font-size: 12px; color: var(--muted, #6b6b75); margin-top: -4px; }
.li-sl__note[hidden] { display: none; }
.li-range:focus-visible { outline: none; } .li-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px rgba(var(--fg-rgb), .2); }
html[data-theme="dark"] .li-range::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--orange), 0 2px 6px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .li-range::-moz-range-thumb { box-shadow: 0 0 0 2px var(--orange), 0 2px 6px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .li-range::-moz-range-progress { background: var(--orange); }
.li-tl { display: grid; gap: 6px; }
.li-tl__bar { position: relative; height: 54px; border-radius: 14px; background: rgba(var(--fg-rgb), .06); touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.li-tl__b { position: absolute; top: 6px; bottom: 6px; display: grid; place-items: center; padding: 0 2px; border-radius: 10px; background: var(--sky); box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .06); overflow: hidden; transition: left .12s, width .12s; }
/* dark: the same blue as light mode, just deeper (no coloured top edge) */
html[data-theme="dark"] .li-tl__b { background: var(--sky-2); box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .08); }
.li-tl__b span { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--paper); white-space: nowrap; }
.li .li-tl__k { position: absolute; top: 0; bottom: 0; min-width: 14px; transform: translateX(0); padding: 0; border: 0; border-radius: 10px; background: repeating-linear-gradient(135deg, rgba(var(--fg-rgb), .16) 0 4px, rgba(var(--fg-rgb), .05) 4px 8px); cursor: grab; transition: left .12s, width .12s; }
.li .li-tl__k i { position: absolute; left: 50%; top: 50%; width: 8px; height: 26px; transform: translate(-50%, -50%); border-radius: 999px; background: var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .li .li-tl__k i { background: var(--orange); }
.li .li-tl__k em { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.li .li-tl__k.is-drag { cursor: grabbing; } .li .li-tl__k.is-drag, .li .li-tl__k.is-drag + .li-tl__b, .li-tl__bar:has(.is-drag) .li-tl__b { transition: none; }
.li .li-tl__k:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.li-tl__ends { display: flex; justify-content: space-between; margin-top: 16px; font-size: 12px; font-weight: 600; color: var(--muted); }
/* full tank note on the catch card; the catch date in name tags */
.li-full { margin: 10px auto 0 !important; max-width: 440px; font-size: 14px !important; font-weight: 600; }
.li-tag__t { display: grid; gap: 0; }
.li-tag__t small { font-size: 11px; font-weight: 600; opacity: .75; }

/* Lock in together, live (2026-10-21): people arrive and leave in place, a "joined" bubble over the tank, invites */
.lr__tankcard { position: relative; }
.lr__joins { position: absolute; left: 0; right: 0; bottom: 46px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.lr__join { padding: 8px 16px; border-radius: 99px; background: #1E8A55; color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 12px 26px -10px rgba(30, 138, 85, .7); animation: lr-join 3.2s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
.lr__join.is-out { background: rgba(14, 14, 16, .75); box-shadow: none; }
@keyframes lr-join { 0% { opacity: 0; transform: translateY(16px) scale(.8); } 12% { opacity: 1; transform: translateY(0) scale(1.06); } 20% { transform: scale(1); } 80% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-26px); } }
.lr__p.is-new { animation: lr-pop .8s cubic-bezier(0.32, 0.72, 0, 1) both; box-shadow: 0 0 0 2px #5FC78A, 0 14px 30px -14px rgba(30, 138, 85, .6); }
@keyframes lr-pop { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: none; } }
.lr__p.is-leaving { animation: lr-out .4s ease forwards; }
@keyframes lr-out { to { opacity: 0; transform: translateX(30px) scale(.95); } }
.lr__inv { margin-top: 14px; padding: 18px; }
.lr__inv-h { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; } .lr__inv-h b { font-size: 16px; } .lr__inv-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lr__inv-heading span { font-size: 13px; color: var(--muted); }
.lr__inv-search { display: flex; align-items: center; gap: 8px; flex: 0 1 260px; min-width: 180px; padding: 0 12px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.lr__inv-search:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }
.lr__inv-search svg { flex: none; width: 17px; height: 17px; color: var(--muted); }
.lr__inv-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--paper); font: inherit; font-size: 14px; }
.lr__inv-search input::placeholder { color: var(--muted); }
@media (max-width: 640px) { .lr__inv-h { flex-direction: column; align-items: stretch; gap: 12px; } .lr__inv-search { flex: none; width: 100%; } }
.lr__inv-list { display: flex; flex-direction: column; gap: 4px; }
.lr__inv-r { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 14px; }
.lr__inv-r[hidden], .lr__inv-list [data-invite-empty][hidden] { display: none; }
.lr__inv-r + .lr__inv-r { border-top: 1px solid var(--line); }
.lr__inv-av { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #B98CFF, #6A3DE8); color: #fff; font-weight: 800; }
.lr__inv-av.is-on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #2FB36A; box-shadow: 0 0 0 2px var(--card); }
.lr__inv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .lr__inv-t b { font-size: 14.5px; } .lr__inv-t small { font-size: 12.5px; color: var(--muted); } .lr__inv-t small.is-on { color: #1E8A55; font-weight: 700; }
.lr__inv-b.is-sent { background: #DDF5E8 !important; color: #1E8A55 !important; }
.lr__inv-b:disabled { opacity: .7; cursor: default; }
@media (prefers-reduced-motion: reduce) { .lr__join, .lr__p.is-new, .lr__p.is-leaving { animation: none; } }

/* the room's own session settings (the host's), 2026-10-21 */
.lr__set { margin-top: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.lr__set-h { display: flex; flex-direction: column; gap: 2px; } .lr__set-h b { font-size: 16px; } .lr__set-h span { font-size: 13px; color: var(--muted); }
.lr__set-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lr__set-r > span:first-child { width: 64px; font-size: 13px; font-weight: 800; color: var(--muted); }
.lr__set-r small { font-size: 13px; color: var(--muted); }
.lr__step { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--navy, #F3F4F6); }
.lr__step button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: var(--card); color: var(--paper); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.lr__step b { min-width: 74px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.lr__presets { display: inline-flex; gap: 4px; }
.lr__presets button { height: 32px; padding: 0 11px; border: 0; border-radius: 10px; background: var(--navy, #F3F4F6); color: var(--paper); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lr__presets button.is-on { background: var(--ink, #0E0E10); color: #fff; }
.lr__sw { position: relative; width: 44px; height: 26px; flex: none; cursor: pointer; }
.lr__sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.lr__sw i { position: absolute; inset: 0; border-radius: 99px; background: rgba(var(--fg-rgb, 21, 22, 26), .18); transition: background .2s; }
.lr__sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(0.32, 0.72, 0, 1); }
.lr__sw input:checked + i { background: #1E8A55; } .lr__sw input:checked + i::after { transform: translateX(18px); }
.lr__plan { margin: 0; padding: 10px 14px; border-radius: 12px; background: #DDF5E8; color: #1E5E3D; font-size: 14px; font-weight: 700; }
html[data-theme="dark"] .lr__plan { background: rgba(47, 179, 106, .14); color: #9BE7BE; }
.lr__go2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .lr__go2 > span { font-size: 13px; color: var(--muted); }

/* ============ the pier (owner, 2026-10-21; assets/lockin-pier.js): replaces the jug and the filling tank ============ */
/* setup: the scene is the length picker (drag the line, or − / +); the bait under it */
.li-dur.has-pier { display: flex; flex-direction: column; gap: 12px; }
.li-pier { display: block; width: 100%; height: 250px; border-radius: 16px; }
.li-pier:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.li-bait { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.li-bait canvas { width: 44px; height: 36px; flex: none; border-radius: 10px; background: rgba(var(--fg-rgb), .07); }
.li-bait span { display: flex; flex-direction: column; min-width: 0; }
.li-bait b { font-size: 14.5px; color: var(--paper); } .li-bait small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.li-dur.has-pier .li-dur__val b { font-size: 40px; }
@media (max-width: 420px) { .li-pier { height: 210px; } }
/* focus mode on the pier: the clock sits in the sky, the sea and the line below it */
.li-fx--pier { background: #ECF7FC; }
.li-fx--pier.is-dark { background: #0A1230; }
.li-fx--pier:not(.is-warn) .li-fx__shade, .li-fx--xmas:not(.is-warn) .li-fx__shade { background: none; }
.li-fx--pier .li-fx__mid { top: 24%; }
.li-fx--pier .li-fx__time { font-size: clamp(60px, 10.5vw, 128px); }
.li-fx--pier .li-fx__msg:not(.li-reveal) { padding: 18px 24px; border-radius: 26px; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.li-fx--pier.is-dark .li-fx__msg:not(.li-reveal) { background: rgba(10, 18, 44, .5); }
.li-fx--pier .li-fx__msg:has(> .li-fx__time:first-child) { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.li-fx--pier .li-fx__bot { z-index: 3; }
@media (max-height: 640px) { .li-fx--pier .li-fx__mid { top: 30%; } }
.li-fx--pier .li-fx__mid:has(.li-reveal) { top: 50%; } /* the catch card, as before the pier */

/* Together: the room's pier */
.lr__scene { position: relative; margin-top: 18px; overflow: hidden; padding: 0; }
.lr__pier { display: block; width: 100%; height: clamp(280px, 44vh, 440px); border-radius: inherit; }
.lr__tags { position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.lr__tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .86); color: #0E0E10; font-size: 13px; font-weight: 700; box-shadow: 0 1px 0 rgba(14, 14, 16, .06); }
html[data-theme="dark"] .lr__tag { background: rgba(14, 20, 36, .8); color: #fff; }
/* the room's friends luck (owner, 2026-11-09): "Luck +N%" in gold */
.lr__luck b { color: #B07A00; font-weight: 800; }
html[data-theme="dark"] .lr__luck b { color: #FFC940; }
.lr__phic { display: inline-flex; gap: 2px; }
.lr__phic i { position: relative; display: grid; place-items: center; width: 16px; height: 18px; color: rgba(14, 14, 16, .3); }
.lr__phic i svg { width: 14px; height: 14px; }
.lr__phic i.is-on { color: #1E8A55; } .lr__phic i.is-down { color: #1E8A55; }
.lr__phic i.is-down::after { content: ""; position: absolute; right: -1px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #2FB673; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.lr__phic i.is-none { opacity: .45; }
html[data-theme="dark"] .lr__phic i { color: rgba(255, 255, 255, .35); } html[data-theme="dark"] .lr__phic i.is-on, html[data-theme="dark"] .lr__phic i.is-down { color: #6FE0A5; }
.lr__scene .lr__joins { bottom: auto; top: 16px; }
.lr__bait { font-size: 13px; font-weight: 700; color: var(--muted); }
/* the room's pill buttons: `.li button` (no background) used to win over .li-btn, so they showed as bare text */
.li .li-btn { background: var(--card); color: var(--paper); box-shadow: 0 0 0 1px rgba(var(--fg-rgb), .12), 0 1px 2px rgba(var(--fg-rgb), .06); }
.li .li-btn:hover { background: var(--card); box-shadow: 0 0 0 1px rgba(var(--fg-rgb), .22), 0 2px 6px rgba(var(--fg-rgb), .08); }
.li .lr__pillbtn { height: 40px; padding: 0 18px; border-radius: 999px; }

/* a room round's catches (in the Together tab and under your catch in focus mode) */
.lr__catchcard { margin-top: 14px; padding: 18px; }
/* localhost only: pretend people join / leave */
.lr__test { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; border: 1.5px dashed rgba(var(--fg-rgb, 14, 14, 16), .2); font-size: 13px; }
.lr__test b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lr__test span { color: var(--muted); }
.lr__catchcard[hidden] { display: none; }
.lr__catch-h { display: block; font-size: 15px; margin-bottom: 8px; }
/* who gave up / whose line snapped this round */
.lr__lost { margin-bottom: 12px; }
.lr__lost ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lr__lost li { padding: 8px 12px; border-radius: 12px; background: rgba(229, 72, 77, .1); box-shadow: inset 3px 0 0 #E5484D; font-size: 14px; font-weight: 600; }
.li-fx .li-roomcatch .lr__lost { padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .7); color: #0E0E10; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.li-fx.is-dark .li-roomcatch .lr__lost { background: rgba(10, 18, 44, .6); color: #fff; }
.lr__catch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lr__catch li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(var(--fg-rgb), .05); font-size: 14px; }
.lr__catch li.is-me { box-shadow: inset 0 0 0 1.5px rgba(var(--fg-rgb), .18); }
.lr__c-n { font-weight: 700; } .lr__c-f { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); } .lr__c-f b { color: var(--paper); }
.li-roomcatch { margin: 18px auto 0; max-width: 420px; text-align: left; }
.li-roomcatch[hidden] { display: none; }
.li-fx .li-roomcatch .lr__catch { padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .7); color: #0E0E10; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.li-fx.is-dark .li-roomcatch .lr__catch { background: rgba(10, 18, 44, .6); color: #fff; }
.li-fx .li-roomcatch li { background: rgba(127, 127, 127, .12); }
.li-fx .li-roomcatch .lr__c-f { color: inherit; opacity: .8; } .li-fx .li-roomcatch .lr__c-f b { color: inherit; }
/* the room's own setup (the solo layout, locked for everyone but the host) */
.lr__set { margin-top: 0; padding: 0; display: block; }
.lr__grid { margin-top: 18px; }
.lr__dur .li-bait { order: -1; }
.lr__grid.is-view .li-tog, .lr__grid.is-view .li-range { opacity: .75; cursor: default; }
.li-tl__k.is-static { cursor: default; }
.lr__wait { margin-top: 18px; padding: 20px; display: flex; flex-direction: column; gap: 4px; } .lr__wait span { color: var(--muted); font-size: 14px; }
.lr__pier, .li-pier { animation: lr-scene-in .5s cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes lr-scene-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lr__pier, .li-pier { animation: none; } }

/* the setup and the column beside it are ONE card that scrolls as one (owner, 2026-10-21: "when scrolling down make
   these two as one"): no sticky side column, a hairline between them, and the side's cards become soft panels inside */
.li-grid { gap: 0; padding: 0; border-radius: 28px; background: var(--card); box-shadow: 0 1px 0 var(--line); align-items: stretch; }
.li-grid > .li-main > .li-setup { background: none; box-shadow: none; }
.li-grid > .li-side { position: static; margin: 26px 0; padding: 0 26px 0 24px; border-left: 1px solid var(--line); }
.li-grid > .li-side .li-card { background: var(--card-2, #F7F8FA); box-shadow: none; border-radius: 20px; }
.li-grid > .li-side .li-ext:hover { transform: none; box-shadow: inset 0 0 0 1.5px var(--line); }
@media (max-width: 980px) { .li-grid > .li-side { margin: 0 18px 18px; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); } }

/* the phone may lock its own screen (Low Power Mode, owner 2026-10-22) */
.li-lowpow { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--amber, #F9982F) 16%, var(--card)); color: color-mix(in srgb, var(--amber, #F9982F) 50%, #000); font-size: 13px; font-weight: 600; line-height: 1.45; }
html[data-theme="dark"] .li-lowpow { color: color-mix(in srgb, var(--amber, #F9982F) 70%, #fff); }
/* rooms: your display name shown, not a field (owner, 2026-10-22); every room is all or nothing */
/* the rule fills the start card (owner, 2026-10-24: no gap before Create a room), the button sits right under it */
.lr__allrule { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 22px 24px; border-radius: 18px; background: var(--navy); font-size: 16px; line-height: 1.5; color: var(--muted); }
.lr__allrule b { display: block; font-size: 24px; letter-spacing: -0.02em; color: var(--paper); }
.lr__allrule + .li-start { margin-top: 0; }

/* ---------- the setup in two columns (owner, 2026-10-26): no middle column (tank, phone check and "Stay on ai45" are
   gone); How long on the left, bigger, with more room; the phone, the desktop app and Start on the right; switching
   Breaks on opens their settings as a middle column ---------- */
.li-grid { grid-template-columns: minmax(0, 1fr) 400px; }
.li-grid > .li-main > .li-setup { padding: 30px 30px 32px; }
.li-grid > .li-side { margin: 30px 0; padding: 0 30px; gap: 16px; display: flex; flex-direction: column; }
.li-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
.li-form__a .li-lbl { font-size: 15px; margin-bottom: 12px; }
.li-form__a .li-brktog { margin-top: 22px; }
.li-form__b.li-brk { display: none; }
.li-form__b.li-brk.is-open { display: grid; }
.li-form__b .li-lbl { margin-top: 0; font-size: 15px; }
@media (min-width: 1100px) {
  .li-form, .li-form:has(.li-brk.is-open) { grid-template-columns: minmax(0, 1fr); }
  .li-form:has(.li-brk.is-open) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 40px; }
  .li-form__b.li-brk { padding-left: 40px; border-left: 1px solid var(--line); margin-left: 0; }
}
@media (max-width: 1099px) { .li-form__b.li-brk.is-open { margin-top: 22px; } }
.li-form .li-dur__presets button { height: 50px; font-size: 16px; }
.li-form .li-dur__hint { font-size: 14.5px; }
/* the desktop app: just its name, bigger and centred */
.li-grid > .li-side .li-ext--t { flex-direction: column; justify-content: center; gap: 12px; padding: 24px 18px; margin-top: 0; text-align: center; }
.li-ext--t b { font-size: 18px; }
.li-ext--t .li-ext__ic { width: 52px; height: 52px; border-radius: 16px; }
/* Link / Start sits at the bottom of the right column */
.li-side__go { margin-top: auto; }
.li-side__go .li-start { margin-top: 0; height: 60px; font-size: 17px !important; }
@media (max-width: 980px) { .li-grid { grid-template-columns: 1fr; } .li-grid > .li-side { margin: 0 18px 18px; padding: 18px 0 0; } .li-grid > .li-main > .li-setup { padding: 20px; } }

/* layout C (owner, 2026-10-26, mockups/lockin-setup): the three columns start on one line (a label each: How long,
   Breaks, Your phone); Breaks has no box of its own, sits on the card and gets the most room */
.li-grid { grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width:980px) { .li-grid { grid-template-columns:minmax(0,1fr); } .li-main,.li-side { min-width:0; } }
.li-grid > .li-side .li-side__lbl { margin: 0 0 12px; font-size: 15px; }
.li-grid > .li-side > [data-online]:empty { display: none; }
.li-form__a > .li-lbl:first-child, .li-form__b .li-lbl, .li-grid > .li-side .li-side__lbl { height: 24px; line-height: 24px; margin-top: 0; margin-bottom: 12px; }
@media (min-width: 1100px) { .li-form:has(.li-brk.is-open) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.li-form__b .li-brk__box { margin-top: 0; padding: 20px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.li-form__b .li-brk__box > .li-lbl { margin: -20px 0 12px; }

/* "Just the timer" (owner, 2026-10-30: "some people think of it as distracting, the fish"): while a session is on, focus
   mode is black with only the white timer in the middle (and the time to the break / in total); the pier comes back for
   the catch at the end */
.li-baitrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.li-baitrow .li-bait { flex: 1 1 220px; min-width: 0; }
.li-plaintog { flex: none; align-items: center; padding: 8px 12px; background: transparent; border: 1px solid rgba(var(--fg-rgb), .12); }
.li-plaintog span { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; }
.li-plaintog b { font-size: 14px; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) { background: #000; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) :is(.li-fx__tank, .li-fx__shade, .li-fx__sub, .lr__strip, [data-roomcatch]) { display: none !important; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) { color: #fff !important; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) .li-fx__mid { top: 50%; color: #fff !important; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) :is(.li-fx__time, .li-fx__total, .li-fx__total b, .li-fx__lbl, .li-fx__msg h2, .li-fx__msg p, .li-fx__k) { color: #fff !important; text-shadow: none; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) .li-fx__time.is-red { color: #FF4D5E !important; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) :is(.li-fx__btn, .li-fx__icon) { background: transparent; color: rgba(255, 255, 255, .7) !important; border: 1px solid rgba(255, 255, 255, .25); -webkit-backdrop-filter: none; backdrop-filter: none; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) :is(.li-fx__btn, .li-fx__icon):hover { color: #fff !important; border-color: rgba(255, 255, 255, .6); }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) .li-fx__top .li-pill { background: transparent; color: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .2); box-shadow: none; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) .li-fx__cyc { color: rgba(255, 255, 255, .6) !important; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) .li-fx__cyc i { background: rgba(255, 255, 255, .22) !important; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) .li-fx__cyc i:is(.is-done, .is-now) { background: rgba(255, 255, 255, .8) !important; }
.li-fx.is-plain:is([data-phase="arming"], [data-phase="running"], [data-phase="break"]) :is(.li-fx__total, .li-fx__lbl) { opacity: 1; }
/* "Lock in without your phone" (owner, 2026-10-30, temporary until the app; a switch since 2026-10-31) */
.li-nophone { margin-top: 12px; align-items: center; }
[data-checkcard].is-dim { opacity: .45; transition: opacity .2s; }
/* the phone card, smaller and higher (owner, 2026-10-31: no "Or open … and enter CODE" line; the QR is enough) */
.li-grid > .li-side .li-side__lbl { margin-bottom: 8px; }
.li-link { padding: 14px 16px; }
.li-link .li-qr { width: 150px; height: 150px; margin-top: 12px; padding: 8px; border-radius: 16px; }

/* the desktop app card while its alarm is on (owner, 2026-10-31) */
html .li-ext.is-alarm { box-shadow: inset 0 0 0 2px #E5484D !important; } /* (beats the side column's flat card style) */

/* Timer and Stopwatch share the same setup, with distinct drawn icons. */
.li-modes { display:flex; gap:4px; width:fit-content; padding:4px; margin:0 0 16px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.li-modes button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:9px 16px; border:0; border-radius:10px; color:var(--muted); background:transparent; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.li-modes button[aria-pressed="true"] { background:var(--ink,#172640); color:#fff; }
.li-modes button:disabled { cursor:default; }
.li-modes svg,.li-mode-icon svg { width:20px; height:20px; flex:none; display:block; }
.li-mode-icon { display:inline-flex; align-items:center; }

/* Stopwatch setup guidance is 1.5 times the 14px "Just the timer" label. */
.li-form .li-dur__hint.li-watch-hint { font-size:21px; line-height:1.25; }
.li-watch-hint strong { font-weight:900; color:var(--paper); }

/* The main Stopwatch control keeps its theme colors; only confirmation Stop is red. */
.li-fx.li-fx--pier .li-fx__bot :is([data-watchstop], [data-watchpause], [data-watchgo]), .li-ph .li-ph__btn:is([data-watchstop], [data-watchpause], [data-watchgo]) { justify-content:center; text-align:center; }
/* the one Stopwatch pause (owner, 2026-11-04): on the phone, Pause / Continue and Reel it up sit side by side */
.li-ph__pair { display:flex; gap:10px; width:100%; } .li-ph__pair .li-ph__btn { flex:1; min-width:0; }
.li-watch-ask .ai-ask__btn[data-yes] { background:#C0313F; color:#fff; border-radius:999px; justify-content:center; text-align:center; }
.li-watch-ask .ai-ask__acts { justify-content:center; }
.li-watch-ask .ai-ask__btn { display:inline-flex; align-items:center; justify-content:center; min-width:110px; text-align:center; }
.li-watch-ask .ai-ask__btn[data-no] { background:#fff; color:#0E0E10; box-shadow:inset 0 0 0 1px rgba(14,14,16,.12); }

/* ---------- See odds (owner, 2026-11-04): a button under Breaks (Timer) or under the pier (Stopwatch), and its box, which
   is the Give up box (.li-ask) a little wider ---------- */
.li .li-oddsbtn { margin-top: 14px; width: 100%; justify-content: center; background: var(--navy); box-shadow: none; }
.li .li-oddsbtn:hover { background: var(--slate); }
.li-ask__card.li-odds__card { width: min(420px, 100%); }
.li-odds p { margin-top: 4px; }
.li-odds__len { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.li-odds__len b { min-width: 110px; text-align: center; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.li-odds__len .li-dur__step { width: 38px; height: 38px; font-size: 20px; border-radius: 12px; }
.li-odds .li-odds__range { margin: 16px 0 10px; }
.li-odds .li-odds__pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.li-odds .li-odds__pill { justify-content: space-between; height: 36px; padding: 0 14px; font-size: 13px; }
.li-odds__pill b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Rods in the shop (owner, 2026-11-04) ---------- */
.li-shop__c.is-on { box-shadow: inset 0 0 0 2px #2F9E68; }
.li .li-shop__buy.li-shop__equip { background: var(--navy); color: var(--paper); }
.li .li-shop__buy.li-shop__equip:hover { background: var(--slate); }
/* the focus screen's view switch, top left (owner, 2026-11-04): Fishing or Just the timer, for this session, for you alone */
.li-fx__view { flex: none; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.li-fx__view button { border: 0; background: transparent; color: rgba(255, 255, 255, .78); font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }
.li-fx__view button:hover { color: #fff; }
.li-fx__view button[aria-pressed="true"] { background: #fff; color: #0E0E10; }
.li-fx__view button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.li-fx:not(.is-dark):not(.is-plain) .li-fx__view { background: rgba(255, 255, 255, .7); box-shadow: 0 1px 0 rgba(14, 14, 16, .06); }
.li-fx:not(.is-dark):not(.is-plain) .li-fx__view button { color: rgba(14, 14, 16, .65); }
.li-fx:not(.is-dark):not(.is-plain) .li-fx__view button[aria-pressed="true"] { background: #0E0E10; color: #fff; }
.li-fx.is-plain .li-fx__view { background: transparent; border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.li-fx.is-plain .li-fx__view button { color: rgba(255, 255, 255, .6); }
.li-fx.is-plain .li-fx__view button[aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: #000; }
/* only while the line is in: not on the reel, the result or a session running on your other device */
.li-fx:not(:is([data-phase="arming"], [data-phase="running"], [data-phase="break"])) .li-fx__view { display: none; }
@media (max-width: 640px) { .li-fx__view button { padding: 6px 10px; font-size: 12px; } }

/* ---------- the Deep rod and the Leviathan (owner, 2026-11-04; from rods-lab.html and leviathan-catch-lab.html) ---------- */
/* the Deep rod's blurb word, and the Secret tier's pill (its odds are never shown: "Secret ???") */
.secretw { font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #1E9FD6; text-shadow: 0 0 10px rgba(95, 230, 255, .55), 0 0 1px rgba(127, 212, 255, .9); }
.li-rodname--christmas { color: #D23A3A; } /* the Christmas rod's name: plain red (owner, 4 Nov) */
/* Coral and Deep rod names take their rod's colours too (owner, 5 Nov) */
.li-rodname--coral { color: #D9584F; }
.li-rodname--lantern { background: linear-gradient(90deg, #6A55C8, #23A99A); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="dark"] .li-rodname--coral { color: #F08A7A; }
html[data-theme="dark"] .li-rodname--lantern { background-image: linear-gradient(90deg, #9C8BFF, #56E3D0); filter: drop-shadow(0 0 6px rgba(86, 227, 208, .35)); }
.li-rar--secret { position: relative; overflow: hidden; gap: 5px; background: linear-gradient(135deg, #1A2856, #070B1A 58%, #0F1B40); color: #A6E6FF; letter-spacing: .03em; box-shadow: inset 0 0 0 1px rgba(127, 212, 255, .4), 0 0 14px -3px rgba(95, 230, 255, .55); }
.li-rar--secret::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(170, 238, 255, .4) 50%, transparent 65%); transform: translateX(-130%); animation: lisheen 3.4s ease-in-out infinite; }
.li-rar--secret svg { width: 12px; height: 12px; flex: none; }
.li-odds__pill.li-rar--secret { justify-content: flex-start; } .li-odds__pill.li-rar--secret b { margin-left: auto; }
.li-rar--big { height: 30px; padding: 0 14px; font-size: 14px; gap: 7px; }
.li-rar--big svg { width: 16px; height: 16px; }
@keyframes lisheen { 55%, 100% { transform: translateX(130%); } }
/* the catch card turns to dark glass for the Leviathan */
.li-reveal--lev { padding: 20px 22px 22px; border-radius: 28px; color: #EAF8FF; background: rgba(4, 12, 24, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(95, 230, 255, .18), 0 30px 80px -30px rgba(0, 0, 0, .7); text-shadow: none; }
.li-reveal--lev .li-reveal__glow { background: radial-gradient(closest-side, #5FE6FF, transparent); }
.li-reveal--lev .li-reveal__out h2 { font-weight: 900; letter-spacing: -0.01em; }
.li-reveal--lev .li-reveal__out p { color: #A6E6FF; }
.li-reveal--lev .li-name input:focus { box-shadow: inset 0 0 0 2px #5FE6FF; }
/* the shout-out: the Secret chip and the name, spread wide, drawing their letters together over a jolt */
.li-levshout { position: absolute; left: 0; right: 0; top: 13%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; opacity: 0; }
.li-levshout.is-on { animation: lilevrise 1s cubic-bezier(.2, .8, .2, 1) forwards; }
.li-levshout.is-off { opacity: 1; animation: lilevfade .8s ease forwards; }
.li-levshout__name { font-size: clamp(34px, 7vw, 64px); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #EAF8FF; text-shadow: 0 0 24px rgba(95, 230, 255, .7), 0 0 2px #fff; }
.li-levshout.is-on .li-levshout__name { animation: lilevtrack 2.4s cubic-bezier(.2, .8, .2, 1) both, lilevpulse 2.6s ease-in-out 2.4s infinite; }
.li-levshout__sub { font-weight: 800; font-size: 16px; color: #A6E6FF; letter-spacing: .04em; padding: 5px 16px; border-radius: 999px; background: rgba(1, 6, 14, .82); box-shadow: 0 0 0 1px rgba(95, 230, 255, .35); }
.li-fx.is-levshake { animation: lilevshake .8s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes lilevrise { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lilevtrack { from { letter-spacing: .5em; opacity: 0; } to { letter-spacing: .14em; opacity: 1; } }
@keyframes lilevpulse { 50% { text-shadow: 0 0 36px rgba(95, 230, 255, .95), 0 0 2px #fff; } }
@keyframes lilevfade { from { opacity: 1; } to { opacity: 0; } }
@keyframes lilevshake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 3px); } 40%, 60% { transform: translate(7px, -3px); } }
@media (prefers-reduced-motion: reduce) { .li-rar--secret::after, .li-levshout, .li-levshout__name, .li-fx.is-levshake { animation: none !important; } .li-levshout.is-on { opacity: 1; } .li-levshout.is-off { opacity: 0; } }
/* a Leviathan caught in a room: everyone sees it, only the catcher gets the fish */
.li-roomlev { display: flex; align-items: center; gap: 12px; margin: 10px auto 0; padding: 8px 14px 8px 8px; width: fit-content; max-width: 100%; border-radius: 18px; color: #EAF8FF; background: rgba(4, 12, 24, .78); box-shadow: 0 0 0 1px rgba(95, 230, 255, .25); text-align: left; }
.li-roomlev canvas { width: 96px; height: 48px; flex: none; }
.li-roomlev b { font-size: 14px; }

/* sell checkout (owner, 2026-11-05): each fish and its price, the total, the Depth after */
.li-ask__card.li-co__card { width: min(600px, 100%); color: rgb(var(--fg-rgb)); }
.li-co h2 { margin-bottom: 14px; font-size: 20px; font-weight: 800; }
.li-co__list { display: flex; flex-direction: column; gap: 6px; max-height: min(360px, 50vh); overflow: auto; }
.li-co__r { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 14px; background: var(--card-2); }
.li-co__r canvas { width: 64px; height: 44px; display: block; }
.li-co__n { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.li-co__n b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-co__n .li-rar { align-self: flex-start; }
.li-co__m { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.li-co__sum { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.li-co__line { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.li-co__line--tot { font-size: 18px; font-weight: 800; color: rgb(var(--fg-rgb)); }
.li-co__acts { display: flex; gap: 10px; margin-top: 16px; }
.li-co__btn { flex: 1; height: 46px; border: 0; border-radius: 14px; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; background: var(--card-2); color: rgb(var(--fg-rgb)); }
.li-co__btn--go { background: var(--ink); color: var(--card); }
html[data-theme="dark"] .li-co__btn--go { background: #F2F4F8; color: #12151C; }
.li-co__btn:disabled { opacity: .6; cursor: default; }
/* a rod's speed and luck on its shop card (owner, 2026-11-05) */
/* rod cards: line, then the stats in one row just above the button (lined up across the row), never wrapping */
.li-shop__g--rods { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.li-rodstats { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; margin-top: auto; padding-top: 8px; }
.li .li-rodstats + .li-shop__buy, .li .li-rodstats + .li-shop__own { margin-top: 8px; }
.li-shop__g--rods .li-shop__own { min-height: 34px; display: flex; align-items: center; justify-content: center; }
.li-rodstats span { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: rgba(var(--fg-rgb, 14, 14, 16), .06); color: var(--paper); white-space: nowrap; }
.li-rodstats .is-luck { color: #2F9E68; background: rgba(47, 158, 104, .12); }
/* the shop's secret tier: "???" where a fish's shadow would be */
.li-shop__q { display: grid; place-items: center; width: 100%; height: 76px; font-size: 30px; font-weight: 800; letter-spacing: .08em; color: var(--faint, #9A9DA4); }
.li-shop__c--secret b { color: var(--faint, #9A9DA4); }
/* the same big "???" on the fish collection's Secret card, in place of the Leviathan's shadow (owner, 2026-11-05) */
.li-dex__c .li-shop__q { height: 70px; font-size: 30px; color: var(--faint, #9A9DA4); }
.li-dex__c--secret.is-locked b { color: var(--faint, #9A9DA4); }