/* I Love You in Different Languages. Mobile first; tokens only so dark mode works. */
.tool.ily { gap: 20px; }
.tool .ily-main { gap: 20px; }
.tool .ily-sec { font-size: 13px; line-height: 18px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--ink) / .62); margin: 0 0 8px; }

/* Language chips: one scrollable row on phones, wraps on desktop */
.tool .ily-pickwrap { display: flex; flex-direction: column; gap: 8px; }
.tool .ily-chips {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none;
}
.tool .ily-chips::-webkit-scrollbar { display: none; }
.tool .ily-chips button {
  flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; padding: 0 16px; border-radius: 22px; font-size: 15px; font-weight: 750;
  background: var(--surface); color: rgb(var(--ink) / .75); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08);
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.tool .ily-chips button:active { transform: scale(.96); }
.tool .ily-chips button[aria-pressed="true"] { background: rgb(var(--ink)); color: var(--surface); box-shadow: none; }
.tool .ily-chips .ily-all { display: inline-flex; align-items: center; gap: 6px; color: var(--link); }
.tool .ily-chips .ily-all .tool-icon { width: 18px; height: 18px; }
.tool .ily-chips .ily-all[aria-expanded="true"] { background: var(--surface-2); }
@media (min-width: 600px) { .tool .ily-chips { margin: 0 -24px; padding: 2px 24px 6px; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent); } }

.tool .ily-panel { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: 8px; animation: ily-in .3s var(--ease-out) both; }
.tool .ily-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 16px; background: rgb(var(--ink) / .05); }
.tool .ily-search .tool-icon { width: 18px; height: 18px; color: rgb(var(--ink) / .45); flex: 0 0 auto; }
.tool .ily-search input[type="search"] { background: transparent; box-shadow: none; padding-left: 0; }
.tool .ily-list { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; margin-top: 6px; display: grid; }
.tool .ily-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; width: 100%;
  min-height: 52px; padding: 8px 12px; border-radius: 14px; background: transparent; color: rgb(var(--ink));
}
.tool .ily-row:active { background: rgb(var(--ink) / .06); }
@media (hover: hover) { .tool .ily-row:hover { background: rgb(var(--ink) / .04); } }
.tool .ily-row[aria-current="true"] { background: var(--surface-2); }
.tool .ily-row-name { display: flex; flex-direction: column; min-width: 0; }
.tool .ily-row-name b { font-size: 15px; line-height: 20px; font-weight: 800; }
.tool .ily-row-name small { font-size: 13px; line-height: 18px; font-weight: 650; color: rgb(var(--ink) / .62); }
.tool .ily-row-say { font-size: 15px; font-weight: 750; color: var(--link); text-align: right; max-width: 55%; overflow-wrap: anywhere; }

/* Gender */
.tool .ily-gender { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 20px; background: var(--surface); }
.tool .ily-gender .tool-hint { margin: 0; }

/* Hero card */
.tool .ily-hero {
  position: relative; text-align: center; padding: 28px 20px 20px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.tool .ily-hero.is-new { animation: card-in .45s var(--ease-out) both; }
.tool .ily-hero-label { font-size: 14px; line-height: 20px; font-weight: 800; color: rgb(var(--ink) / .62); margin: 0 0 4px; }
.tool .ily-hero-text {
  font-size: 48px; line-height: 1.15; font-weight: 900; letter-spacing: -.01em; color: rgb(var(--ink)); margin: 0;
  text-wrap: balance; overflow-wrap: anywhere;
}
.tool .ily-hero-text.is-long { font-size: 34px; }
.tool .ily-hero-text.is-xlong { font-size: 26px; line-height: 1.25; }
.tool .ily-hero-roman { font-size: 20px; line-height: 28px; font-weight: 750; color: var(--link); margin: 2px 0 0; }
.tool .ily-hero-say { font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .7); margin: 4px 0 0; }
.tool .ily-hero-note { font-size: 14px; line-height: 20px; font-weight: 650; color: rgb(var(--ink) / .72); margin: 4px 0 0; max-width: 420px; }
.tool .ily-hero-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.tool .ily-act { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; padding: 0; background: transparent; color: rgb(var(--ink) / .8); -webkit-tap-highlight-color: transparent; }
.tool .ily-act-i { width: 52px; height: 52px; border-radius: 26px; display: grid; place-items: center; background: rgb(var(--ink) / .06); transition: transform .16s var(--ease-out), background-color .2s ease, color .2s ease; }
.tool .ily-act-i .tool-icon { width: 22px; height: 22px; }
.tool .ily-act-l { font-size: 12px; line-height: 16px; font-weight: 800; color: rgb(var(--ink) / .7); }
.tool .ily-act:active .ily-act-i { transform: scale(.96); }
@media (hover: hover) { .tool .ily-act:hover .ily-act-i { background: rgb(var(--ink) / .1); } }
.tool .ily-act.is-main .ily-act-i { background: rgb(var(--ink)); color: var(--surface); }
.tool .ily-act.is-playing .ily-act-i { background: rgb(var(--accent)); color: #fff; }
.tool .ily-act[aria-pressed="true"] .ily-act-i { color: var(--link); background: var(--surface-2); }
.tool .ily-act[aria-pressed="true"] .tool-icon { fill: currentColor; }
.tool .ily-hero .ily-hero-actions { gap: 14px; }
.tool .ily-alt { width: 100%; max-width: 420px; }
.tool .ily-alt:empty { display: none; }
.tool .ily-hero .ily-alt-line { margin-top: 10px; }

.tool .ily-alt-line { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 16px; background: rgb(var(--ink) / .045); text-align: left; }
.tool .ily-alt-tag { font-size: 12px; line-height: 16px; font-weight: 800; color: rgb(var(--ink) / .68); flex: 0 0 auto; max-width: 40%; }
.tool .ily-alt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tool .ily-alt-t b { font-size: 16px; line-height: 22px; font-weight: 800; overflow-wrap: anywhere; }
.tool .ily-alt-t small { font-size: 13px; line-height: 18px; color: var(--link); font-weight: 700; }
.tool .ily-alt-line .lv-ib { width: 36px; height: 36px; flex-basis: 36px; }
.tool .ily-alt-line .lv-ib .tool-icon { width: 16px; height: 16px; }

/* Phrase list */
.tool .ily-phrases { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tool .ily-p { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 14px 16px; border-radius: 20px; background: var(--surface); min-width: 0; }
.tool .ily-p-top { display: flex; gap: 12px; align-items: flex-start; }
.tool .ily-p-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.tool .ily-p-en { font-size: 13px; line-height: 18px; font-weight: 800; color: rgb(var(--ink) / .62); }
.tool .ily-p-en small { font-weight: 650; }
.tool .ily-p-t { font-size: 22px; line-height: 30px; font-weight: 850; color: rgb(var(--ink)); overflow-wrap: anywhere; }
.tool .ily-p-r { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--link); }
.tool .ily-p-n { font-size: 14px; line-height: 20px; font-weight: 650; color: rgb(var(--ink) / .7); margin-top: 2px; }
.tool .ily-p .ily-alt-line { margin: 2px 4px 0 0; }
.tool .ily-p > .ily-p-n { margin: 0; }
.tool .ily-p-act { display: flex; gap: 4px; margin: -2px -2px 0 0; }
.tool .ily-p-act .lv-ib { width: 40px; height: 40px; flex-basis: 40px; box-shadow: none; background: rgb(var(--ink) / .045); }
.tool .ily-p-act .lv-ib .tool-icon { width: 18px; height: 18px; }
.tool .ily-p-act .lv-ib.is-playing { background: rgb(var(--accent)); }
@media (min-width: 600px) { .tool .ily-p-top { align-items: center; } .tool .ily-p-act { gap: 6px; } .tool .ily-p-act .lv-ib { width: 44px; height: 44px; flex-basis: 44px; } }

/* Pets */
.tool .ily-pet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tool .ily-pet {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 96px; padding: 12px 8px;
  border-radius: 20px; background: var(--surface); color: rgb(var(--ink)); text-align: center;
  transition: transform .16s var(--ease-out), box-shadow .2s ease;
}
.tool .ily-pet:active { transform: scale(.96); }
.tool .ily-pet.is-playing { box-shadow: inset 0 0 0 2px rgb(var(--accent)); }
.tool .ily-pet b { font-size: 18px; line-height: 24px; font-weight: 850; overflow-wrap: anywhere; }
.tool .ily-pet small { font-size: 13px; line-height: 18px; font-weight: 750; color: var(--link); }
.tool .ily-pet span { font-size: 12px; line-height: 16px; font-weight: 650; color: rgb(var(--ink) / .68); }

.tool .ily-tip { padding: 16px; border-radius: 20px; background: var(--surface-2); }
.tool .ily-tip p:last-child { font-size: 15px; line-height: 22px; }

/* Saved */
.tool .ily-saved-list { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.tool .ily-saved-list li { flex: 0 0 auto; }
.tool .ily-saved-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 16px; background: var(--surface); color: rgb(var(--ink)); text-align: left; max-width: 220px; }
.tool .ily-saved-list small { font-size: 12px; line-height: 16px; font-weight: 750; color: rgb(var(--ink) / .5); }
.tool .ily-saved-list b { font-size: 17px; line-height: 22px; font-weight: 850; }

/* Send */
.tool .ily-send { display: flex; flex-direction: column; gap: 12px; padding: 20px 16px; border-radius: 24px; background: var(--surface); }
.tool .ily-send .ily-sec { margin: 0; }
.tool .ily-send input[type="text"] { background: rgb(var(--ink) / .04); }

/* Received card */
.tool .ily-gift {
  text-align: center; padding: 28px 20px 20px; border-radius: 28px; color: #fff;
  background: var(--ramp); box-shadow: 0 12px 40px rgb(121 35 192 / .35); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.tool .ily-gift.is-new { animation: card-in .5s var(--ease-out) both; }
.tool .ily-gift p { color: #fff; }
.tool .ily-gift .ily-gift-from { font-size: 15px; line-height: 22px; font-weight: 800; opacity: .85; }
.tool .ily-gift .ily-gift-t { font-size: 44px; line-height: 1.15; font-weight: 900; margin: 6px 0 0; overflow-wrap: anywhere; }
.tool .ily-gift .ily-p-r { color: #fff; opacity: .9; font-size: 18px; }
.tool .ily-gift .ily-gift-en { font-size: 15px; font-weight: 700; opacity: .8; }
.tool .ily-gift .tool-note { color: #fff; opacity: .8; margin-top: 10px; }
.tool .ily-gift .lv-ib { background: rgb(255 255 255 / .2); color: #fff; box-shadow: none; }
.tool .ily-gift .lv-ib.lv-ib-solid { background: #fff; color: #7923C0; }

/* Practice */
.tool .ily-practice { display: flex; flex-direction: column; gap: 14px; }
.tool .ily-pbar { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 800; color: rgb(var(--ink) / .7); }
.tool .ily-card {
  width: 100%; min-height: 260px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); color: rgb(var(--ink));
  display: grid; place-items: center; padding: 24px; text-align: center; transition: transform .16s var(--ease-out);
}
.tool .ily-card:active { transform: scale(.98); }
.tool .ily-card.is-new { animation: card-in .4s var(--ease-out) both; }
.tool .ily-card.is-flipped .ily-face { animation: ily-flip .35s var(--ease-out) both; }
.tool .ily-face { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tool .ily-face small { font-size: 14px; line-height: 20px; font-weight: 800; color: rgb(var(--ink) / .5); }
.tool .ily-face b { font-size: 34px; line-height: 1.2; font-weight: 900; overflow-wrap: anywhere; text-wrap: balance; }
.tool .ily-tap { font-size: 13px; font-weight: 700; color: rgb(var(--ink) / .4); margin-top: 10px; }
.tool .ily-done { text-align: center; padding: 28px 16px; border-radius: 28px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.tool .ily-done.is-new { animation: card-in .45s var(--ease-out) both; }

@keyframes ily-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes ily-flip { from { opacity: 0; transform: translateY(8px) scale(.98); } }

@media (max-width: 599px) {
  .tool .ily-hero-text { font-size: 42px; }
  .tool .ily-hero-text.is-long { font-size: 30px; }
  .tool .ily-hero-text.is-xlong { font-size: 24px; }
  .tool .ily-p-t { font-size: 20px; line-height: 28px; }
  .tool .ily-pbar .lv-ib { flex: 0 0 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool .ily-panel, .tool .ily-hero.is-new, .tool .ily-gift.is-new, .tool .ily-card.is-new, .tool .ily-card.is-flipped .ily-face, .tool .ily-done.is-new { animation: none; }
}

/* Round 2 additions */
.tool .ily-block { display: flex; flex-direction: column; gap: 0; }
.tool .ily-p-s { font-size: 14px; line-height: 20px; font-weight: 700; color: rgb(var(--ink) / .7); }
.tool .ily-p-more { display: flex; gap: 4px; margin: 2px 0 -6px -8px; }
.tool .ily-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 18px; background: transparent; font-size: 13px; font-weight: 800; color: rgb(var(--ink) / .62); }
.tool .ily-link .tool-icon { width: 16px; height: 16px; }
.tool .ily-link:active { background: rgb(var(--ink) / .06); }
.tool .ily-link[aria-pressed="true"] { color: var(--link); }
.tool .ily-link[aria-pressed="true"] .tool-icon { fill: currentColor; }
.tool .ily-pet { position: relative; }
.tool .ily-pet-play { position: absolute; top: 8px; right: 8px; color: rgb(var(--ink) / .35); line-height: 0; }
.tool .ily-pet-play .tool-icon { width: 14px; height: 14px; }
.tool .ily-tip { margin-top: 8px; }
.tool .ily-practice-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 18px; border-radius: 20px; background: var(--surface); }
.tool .ily-practice-cta div { display: flex; flex-direction: column; min-width: 0; }
.tool .ily-practice-cta b { font-size: 16px; line-height: 22px; font-weight: 850; color: rgb(var(--ink)); }
.tool .ily-practice-cta span { font-size: 13px; line-height: 18px; font-weight: 650; color: rgb(var(--ink) / .65); }
.tool .ily-practice-cta .btn { flex: 0 0 auto; width: auto; min-height: 44px; padding: 0 18px; }
.tool .ily-preview { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 16px; border-radius: 20px; background: var(--ramp); color: #fff; text-align: center; }
.tool .ily-preview small { font-size: 13px; line-height: 18px; font-weight: 750; opacity: .85; }
.tool .ily-preview b { font-size: 26px; line-height: 1.2; font-weight: 900; overflow-wrap: anywhere; }
.tool .ily-preview span { font-size: 14px; font-weight: 700; opacity: .9; }
.tool .ily-imgbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tool .ily-imgbtn .tool-icon { width: 20px; height: 20px; }
.tool .ily-saved-list li { display: flex; align-items: center; gap: 4px; padding-right: 6px; border-radius: 16px; background: var(--surface); }
.tool .ily-saved-list .ily-saved-go { background: transparent; }
.tool .ily-saved-list .lv-ib { width: 36px; height: 36px; flex-basis: 36px; box-shadow: none; }
.tool .ily-pcount { margin-left: auto; font-variant-numeric: tabular-nums; color: rgb(var(--ink) / .6); }
.tool .ily-practice .tool-meter > span { min-width: 6px; }
.tool .ily-pact { flex-direction: row !important; }
.tool .ily-pact .btn { flex: 1 1 0; width: auto !important; min-width: 0; padding-left: 12px; padding-right: 12px; }
.tool .ily-card { min-height: 220px; }
.tool .ily-gift { position: relative; }
.tool .ily-gift .ily-gift-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; flex-basis: 40px; }
.tool .ily-gift .ily-gift-from { padding: 0 36px; }
.tool .ily-gift .ily-gift-r { font-size: 18px; line-height: 24px; font-weight: 750; opacity: .9; }
.tool .ily-gift .ily-gift-hint { font-size: 14px; line-height: 20px; font-weight: 650; opacity: .85; margin-top: 12px; }
.tool .ily-gift .ily-act { color: #fff; }
.tool .ily-gift .ily-act-l { color: #fff; }
.tool .ily-gift .ily-act-i { background: rgb(255 255 255 / .2); }
.tool .ily-gift .ily-act.is-main .ily-act-i { background: #fff; color: #7923C0; }

/* Round 3 */
.tool.ily { scroll-margin-top: 88px; }
.tool.ily .tool-note, .tool.ily .tool-sub, .tool.ily .tool-hint { color: rgb(var(--ink) / .7); }
.tool .ily-chips { mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.tool .ily-gender-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tool .ily-gender-row .lv-seg-row { flex-direction: column; align-items: flex-start; gap: 6px; }
.tool .ily-gender-row .lv-seg { width: 100%; }
.tool .ily-gender-row .lv-seg button { flex: 1; padding: 0 8px; }
.tool .ily-gender-row .tool-label { font-size: 13px; }
.tool .ily-alt-line { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; }
.tool .ily-alt-tag { max-width: none; grid-column: 1; }
.tool .ily-alt-t { grid-column: 1; }
.tool .ily-alt-line .lv-ib { grid-column: 2; grid-row: 1 / span 2; }
.tool .ily-voiceline { font-size: 12px; line-height: 16px; font-weight: 700; color: rgb(var(--ink) / .55); margin: 8px 0 0; }
.tool .ily-voiceline:empty { display: none; }
.tool .ily-seeall { align-self: center; margin-top: -8px; color: var(--link); }
.tool .ily-rowwrap { display: flex; align-items: center; gap: 4px; }
.tool .ily-rowwrap .ily-row { flex: 1; min-width: 0; }
.tool .ily-rowwrap .lv-ib { width: 40px; height: 40px; flex-basis: 40px; box-shadow: none; background: rgb(var(--ink) / .05); }
.tool .ily-row-say { display: flex; flex-direction: column; align-items: flex-end; }
.tool .ily-row-say small { font-size: 12px; line-height: 16px; font-weight: 700; color: rgb(var(--ink) / .6); }
.tool .ily-pc-btns { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tool .ily-pc-btns .ily-link { min-height: 32px; font-size: 12px; padding: 0 4px; }
.tool .ily-practice .tool-streak { margin: -6px 0 0; }
.tool .ily-row-say .is-short { white-space: nowrap; }
.tool .ily-practice-cta .ily-famlink { align-self: flex-start; min-height: 32px; margin: 2px 0 -6px -10px; font-size: 13px; color: var(--link); }
.tool .ily-hero-form { font-size: 12px; line-height: 16px; font-weight: 800; color: var(--link); background: var(--surface-2); padding: 3px 10px; border-radius: 10px; margin: -2px 0 6px; }
.tool .ily-hero-form:empty { display: none; }
.tool .ily-hero .ily-hero-actions { gap: 8px; }
.tool .ily-act { min-width: 52px; }
@media (max-width: 380px) { .tool .ily-act-i { width: 46px; height: 46px; } }
@media (prefers-color-scheme: dark) { .tool .ily-chips button { box-shadow: inset 0 0 0 1px rgb(var(--ink) / .2); color: rgb(var(--ink) / .9); } }
.tool .ily-practice-cta .ily-famlink { text-align: left; }

/* Round 5 */
.tool .ily-chips { margin: 0 !important; padding: 2px 0 6px !important; }
.tool .ily-hero-say { color: rgb(var(--ink) / .8); }
.tool .ily-hero-note { color: rgb(var(--ink) / .82); }
.tool.ily .tool-hint, .tool.ily .tool-note { color: rgb(var(--ink) / .8); }
.tool .ily-p-n, .tool .ily-p-s { color: rgb(var(--ink) / .8); }
.tool .ily-gender.is-ask { box-shadow: inset 0 0 0 2px rgb(var(--accent)); }
.tool .ily-gender.is-ask .ily-ghint { color: var(--link); font-weight: 750; }
.tool .ily-p-more { margin-top: 0; }
/* After round 5: actions share the label row, the phrase gets the full card width */
.tool .ily-p-top { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }
.tool .ily-p-top .ily-p-main { display: contents; }
.tool .ily-p-top .ily-p-en { grid-column: 1; grid-row: 1; }
.tool .ily-p-top .ily-p-act { grid-column: 2; grid-row: 1; }
.tool .ily-p-top .ily-p-t, .tool .ily-p-top .ily-p-r, .tool .ily-p-top .ily-p-s { grid-column: 1 / -1; justify-self: start; }
.tool .ily-gender .lv-seg button[aria-checked="true"] { background: rgb(var(--accent)); color: #fff; }