/* Level color applies to counters, leaving the main pages neutral. */
:root { --rank-color:#69b8ff; }
.daily-card,.vocabulary-summary,.score-hero { background:var(--rank-color); background:linear-gradient(130deg,color-mix(in srgb,var(--rank-color),white 16%),var(--rank-color)); color:var(--rank-ink,var(--ink)); transition:background-color .45s ease; }
#progressCareerCard { margin-top:1rem; }
.career-card[aria-busy=true] .career-chevron { animation:level-loading .85s ease-in-out infinite alternate; }
@keyframes level-loading { to { opacity:.3; } }
.career-ladder[open] { animation:level-ladder-enter .42s cubic-bezier(.18,.75,.25,1) both; }
@keyframes level-ladder-enter { from {opacity:0;translate:0 18px;scale:.97;} to {opacity:1;translate:0 0;scale:1;} }
.vocabulary-tabs { position:relative;display:flex;padding:.25rem;gap:.25rem;border:1px solid var(--line);border-radius:1rem;background:#eef0f6;margin:1rem 0;isolation:isolate; }
.vocabulary-tabs::before { content:'';position:absolute;z-index:-1;left:.25rem;top:.25rem;bottom:.25rem;width:calc(50% - .375rem);border-radius:.75rem;background:var(--surface);box-shadow:0 2px 6px #10141c0a;transition:translate .28s cubic-bezier(.2,.7,.3,1); }
.vocabulary-tabs[data-status=learned]::before { translate:calc(100% + .25rem) 0; }
.vocabulary-tabs button { flex:1;min-height:2.75rem;border:0;border-radius:.75rem;background:transparent;font-size:.75rem;font-weight:600;color:var(--muted); }
.vocabulary-tabs button[aria-selected=true] { color:var(--ink); }
#vocabularyPanel { transition:opacity .16s ease,translate .2s ease; }
#vocabularyPanel.is-switching { opacity:0;translate:0 5px;pointer-events:none; }
#vocabularyPanel .vocabulary-summary { margin-top:0; }
.friends-section { margin-top:1.7rem; }
.friends-card { border:1px solid var(--line);border-radius:1.4rem;background:var(--surface);padding:1rem; }
.referral-bonus { --referral-accent:color-mix(in srgb,var(--rank-color) 60%,#10141c);display:flex;align-items:flex-start;gap:.85rem;margin-top:.8rem;padding:1rem;border:1px solid color-mix(in srgb,var(--rank-color) 22%,white);border-radius:1.4rem;background:color-mix(in srgb,var(--rank-color) 10%,white);color:var(--ink); }
.referral-bonus-badge { flex:none;display:grid;place-items:center;min-width:3.2rem;height:3.2rem;border-radius:1rem;background:color-mix(in srgb,var(--rank-color) 20%,white);color:var(--referral-accent);font-size:1.1rem;font-weight:700; }
.referral-bonus-copy { min-width:0; }
.referral-bonus h3 { margin:0;font-size:.85rem;line-height:1.4;font-weight:700; }
.referral-bonus p { margin:.45rem 0;font-size:.72rem;line-height:1.65; }
.referral-bonus small { display:block;font-size:.61rem;line-height:1.6;color:var(--muted); }
.referral-bonus .text-button { display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;margin-top:.25rem;padding:.4rem 0;color:var(--referral-accent);font-size:.72rem;font-weight:700; }
.referral-bonus .text-button:focus-visible { outline:2px solid currentColor;outline-offset:4px;border-radius:.25rem; }
@media(max-width:359px) { .referral-bonus { padding:.8rem;gap:.65rem; } .referral-bonus-badge { min-width:2.6rem;height:2.6rem;font-size:.95rem; } }
.friends-own { display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.65rem;color:var(--muted);padding-bottom:.75rem;border-bottom:1px solid var(--line); }
.friends-own span { overflow-wrap:anywhere; }
.friends-own .text-button { flex:none;font-size:.6rem;padding:.4rem 0;min-height:2rem; }
.friend-ranking { padding:0;margin:.4rem 0;list-style:none; }
.friend-ranking li { display:grid;grid-template-columns:1.2rem 1.2rem minmax(0,1fr) max-content 1.8rem;align-items:center;gap:.5rem;min-height:3.4rem;padding:.2rem .5rem;border-bottom:1px solid #10141c0a; }
.friend-ranking li:last-child { border-bottom:0; }
.friend-ranking li.is-self { background:#6a90ff12;border-radius:.75rem; }
.friend-self-label { display:block;font-size:.5rem;font-weight:500;color:var(--accent); }
.friend-position { grid-area:1 / 1;text-align:center;color:var(--muted);font-size:.65rem;font-variant-numeric:tabular-nums; }
.friend-trophy { grid-area:1 / 2;width:1.2rem;height:1.4rem; }
.friend-nickname { grid-area:1 / 3;min-width:0;overflow-wrap:anywhere;font-size:.75rem;line-height:1.35; }
.friend-score { grid-area:1 / 4;display:grid;text-align:right;font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums; }
.friend-score small { font-size:.5rem;color:var(--muted);font-weight:400; }
.friend-remove { grid-area:1 / 5;display:grid;place-items:center;border:0;border-radius:50%;width:1.8rem;height:1.8rem;padding:0;background:transparent;color:var(--muted);font-size:1.1rem; }
.friend-add { display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:3rem;margin:.9rem 0 .6rem;border:1px solid #b7c0d5;border-radius:.9rem;background:#f3f5fa;font-size:.7rem; }
.friend-add>span { font-size:1.5rem;font-weight:400;color:var(--accent); }
#friendsEmptyCopy,#friendsLimitCopy { margin:.6rem 0 1rem;font-size:.65rem;line-height:1.6;color:var(--muted);text-align:center; }
#shareFactoryButton { width:100%;min-height:2.8rem;margin-top:.2rem;padding:.75rem;font-size:.62rem;line-height:1.45; }
#strongestAccuracy { font-size:.8rem; }
.profile-form-dialog { position:fixed;left:50%;margin:0;transform:translate(-50%,-50%);top:var(--form-center,50%);max-height:var(--form-height,85dvh);overflow-y:auto;transition:top .25s ease-out,max-height .25s ease-out; }
.profile-form-dialog form { display:grid;gap:.65rem; }
.profile-form-dialog h2 { margin:.2rem 0;font-size:1.6rem; }
.profile-form-dialog p { margin:.25rem 0;font-size:.75rem;line-height:1.55; }
.profile-form-dialog label { font-size:.65rem;font-weight:600; }
.profile-form-dialog .field-hint { font-size:.6rem;color:var(--muted); }
.profile-form-dialog .primary-button { width:100%;min-height:3rem;margin-top:.25rem; }
.profile-form-dialog .dialog-close,#shareDialog .dialog-close { border-radius:50%; }
/* Celebration: restrained paper confetti behind the content and a staged reveal. */
.career-promotion[open].is-celebrating { animation:promotion-reveal .7s cubic-bezier(.16,.8,.24,1) both;background:radial-gradient(ellipse at 50% 32%,color-mix(in srgb,var(--promotion-color),transparent 75%),transparent 65%),#f8f9fd; }
.career-promotion-body { position:relative;z-index:1; }
.promotion-confetti { position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0; }
.promotion-confetti i { position:absolute;top:-2rem;left:var(--x);width:.4rem;height:.75rem;background:var(--confetti);border-radius:var(--shape);opacity:0;animation:confetti-flight var(--flight) var(--delay) cubic-bezier(.15,.45,.55,1) 2 both; }
.career-promotion.is-celebrating .promotion-helmet { animation:helmet-reveal .9s .12s cubic-bezier(.15,.8,.2,1) both; }
.career-promotion.is-celebrating h1 { animation:promotion-copy .65s .3s both; }
.career-promotion.is-celebrating .promotion-earned { animation:promotion-copy .6s .4s both; }
.career-promotion.is-celebrating .primary-button { animation:promotion-copy .6s .55s both; }
@keyframes promotion-reveal { from {opacity:0;translate:0 24px;scale:.97;} to {opacity:1;translate:0 0;scale:1;} }
@keyframes helmet-reveal { from {opacity:0;transform:translateY(24px) scale(.7) rotate(-8deg);} to {opacity:1;transform:none;} }
@keyframes promotion-copy { from {opacity:0;transform:translateY(12px);} to {opacity:1;transform:none;} }
@keyframes confetti-flight { 0% {opacity:0;transform:translate3d(0,-2vh,0) rotate(0);} 10% {opacity:.8;} 85% {opacity:.7;} 100% {opacity:0;transform:translate3d(var(--drift),110vh,0) rotate(var(--spin));} }
@media(max-width:359px) { .friends-card {padding:.7rem;} .friend-ranking li {gap:.3rem;} .friend-nickname {font-size:.68rem;} }
@media(prefers-reduced-motion:reduce) { .career-ladder[open],.career-promotion[open].is-celebrating,.career-promotion.is-celebrating *,.career-card[aria-busy=true] .career-chevron {animation:none!important;} .promotion-confetti {display:none;} .vocabulary-tabs::before,#vocabularyPanel,.profile-form-dialog {transition:none;} }
.vocabulary-intro p { min-height:2.85rem; }
.strongest-card { grid-template-columns:minmax(0,1fr); }
.strongest-card b { font-size:.75rem;font-weight:500;color:var(--muted); }

.career-promotion h1[tabindex] { outline:none; }

/* Forms share the same centred layout; the close button must not float beside it. */
.friends-section > .subsection-label { margin-bottom:.875rem; }
.profile-form-dialog { text-align:center; }
.profile-form-dialog form { width:100%;min-width:0; }
.profile-form-dialog .kicker { padding:0 2rem; }
.profile-form-dialog h2 { text-align:center; }
.profile-form-dialog input {
  display:block;box-sizing:border-box;width:100%;min-width:0;min-height:3.25rem;
  padding:.75rem 1rem;border:2px solid var(--line);border-radius:1.1rem;
  background:var(--paper);color:var(--ink);font:inherit;font-size:max(16px,.875rem);
  text-align:center;outline:none;transition:border-color .2s ease,background-color .2s ease;
}
.profile-form-dialog input:focus { outline:none;border-color:var(--accent);box-shadow:none; }
.profile-form-dialog .dialog-close,.career-ladder > .dialog-close {
  position:absolute;top:.6rem;right:.6rem;float:none;border:0;background:transparent;box-shadow:none;
}
.profile-form-dialog .dialog-close:focus,.career-ladder > .dialog-close:focus { outline:none;box-shadow:none; }
.profile-form-dialog .dialog-close:focus-visible,.career-ladder > .dialog-close:focus-visible { color:var(--accent);background:#6a90ff12; }
.profile-form-dialog .form-error:empty { min-height:.5rem; }
#shareDialog { padding-top:3rem; }
#shareFactoryButton { transition:background-color .2s,color .2s,transform .18s; }
#shareFactoryButton:active { transform:scale(.97); }
#shareFactoryButton.is-copying { opacity:.7; }
#shareFactoryButton.is-copied { background:var(--ink);color:var(--surface);animation:link-copied .4s ease-out; }
@keyframes link-copied { 0% {transform:scale(.97);} 60% {transform:scale(1.025);} 100% {transform:scale(1);} }
@media(prefers-reduced-motion:reduce) { #shareFactoryButton.is-copied {animation:none;} #shareFactoryButton,.profile-form-dialog input {transition:none;} }

.game-card .card-index { color:var(--ink); }

.friends-section { scroll-margin-top:1.2rem;outline:none; }
.friend-add { padding:.7rem;line-height:1.4;transition:background-color .25s,transform .2s,opacity .2s; }
.friend-add:active { transform:scale(.985); }
.friend-add[aria-busy=true] { opacity:.6; }
.friend-invite-dialog { text-align:center;padding:2.5rem 1.3rem 1.3rem; }
.friend-invite-dialog h2 { font-size:1.65rem;line-height:1.15; }
.friend-invite-dialog p { color:var(--muted);font-size:.8rem;line-height:1.6; }
.friend-invite-dialog .kicker { color:var(--accent);font-size:.6rem; }
.friend-invite-dialog .primary-button { width:100%;min-height:3rem;white-space:normal; }
.friend-invite-dialog .invite-reward-symbol { width:4rem;white-space:nowrap;background:color-mix(in srgb,var(--rank-color) 16%,white);color:color-mix(in srgb,var(--rank-color) 60%,#10141c);font-size:1.5rem;font-weight:700; }
.invite-reward { margin:1.2rem 0;padding:1rem;border:1px solid color-mix(in srgb,var(--rank-color) 22%,white);border-radius:1rem;background:color-mix(in srgb,var(--rank-color) 10%,white); }
.invite-reward strong { display:block;color:var(--ink);font-size:.9rem;line-height:1.45; }
.friend-invite-dialog .invite-reward p { margin:.6rem 0;color:var(--ink);font-size:.76rem; }
.invite-reward small { display:block;color:var(--muted);font-size:.65rem;line-height:1.5; }
.invite-symbol { width:3rem;height:3rem;margin:0 auto 1rem;display:grid;place-items:center;border-radius:1rem;background:#6a90ff15;color:var(--accent);font-size:1.8rem; }
.invite-later { display:block;margin:.8rem auto 0;min-height:2.5rem; }
.invite-nickname { display:block;margin:1rem 0;overflow-wrap:anywhere;font-size:1.1rem;color:var(--accent); }
#friendInviteLink { font-size:16px;margin:1rem 0; }
#friendShareDialog .friend-actions { display:grid;gap:.6rem; }
#friendShareDialog { max-height:calc(100dvh - 2rem);overflow-y:auto; }
.friend-invite-dialog[open] { animation:dialog-enter .38s cubic-bezier(.16,.8,.24,1); }
@media(prefers-reduced-motion:reduce) { .friend-add {transition:none;} .friend-invite-dialog[open] {animation:none;} }
#friendForm .friend-actions { display:grid;gap:.6rem;margin-top:0; }
.friend-actions button { width:100%;min-height:3rem;padding:.75rem 1rem;font-size:.7rem;line-height:1.4;white-space:normal; }
.friend-actions .primary-button { margin-top:0; }
#friendNicknameHint .text-button { font:inherit; }

/* Every popup uses the same unframed close control as the nickname form. */
:is(.paper-dialog,.code-dialog) .dialog-close {
  display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;
  appearance:none;-webkit-appearance:none;border:0;border-radius:50%;
  background:transparent;box-shadow:none;outline:none;color:var(--ink);font-size:1.25rem;
}
:is(.paper-dialog,.code-dialog) .dialog-close:focus,
:is(.paper-dialog,.code-dialog) .dialog-close:focus-visible {
  border:0;outline:none;box-shadow:none;background:transparent;
}
:is(.paper-dialog,.code-dialog) .dialog-close:focus-visible { color:var(--accent); }

/* Daily streak: a quiet entry point and a vivid, single announcement. */
.boost-strip { display:flex;align-items:center;gap:.65rem;width:100%;margin:.8rem 0;padding:.85rem 1rem;text-align:left;border:1px solid #b5c5ed;border-radius:1rem;background:linear-gradient(120deg,#eff3ff,#f5eefa 60%,#e6f7f1);color:var(--ink);transition:box-shadow .3s,transform .25s; }
.boost-strip>span:nth-child(2) { flex:1;min-width:0; }
.boost-strip strong,.boost-strip small { display:block;line-height:1.5; }
.boost-strip strong { font-size:.72rem; }
.boost-strip small { font-size:.6rem;color:var(--muted); }
.boost-icon { font-size:1.6rem;color:#7564c8; }
.boost-chevron { font-size:1rem; }
.boost-strip.is-active { background:linear-gradient(115deg,#d2f3e5,#dae6ff 65%,#f4dcfa);box-shadow:0 4px 18px #798bc418; }
.boost-strip:active { transform:scale(.99); }
.boost-dialog { position:relative;overflow-x:hidden;overflow-y:auto;max-height:calc(100dvh - 2rem);text-align:center;padding:2.3rem 1.2rem 1.2rem;background:linear-gradient(150deg,#eef3ff 2%,#faf0ff 46%,#e3fbef); }
.boost-dialog[open] { animation:boost-reveal .5s cubic-bezier(.16,.8,.24,1); }
.boost-dialog h2 { position:relative;font-size:1.65rem;line-height:1.12;margin:.5rem 0 1rem; }
.boost-dialog .kicker { color:#6753b5;font-size:.6rem;position:relative; }
.boost-art { position:relative;width:6rem;height:4rem;margin:0 auto .4rem;display:grid;place-items:center; }
.boost-art span { z-index:1;font-size:3.4rem;color:#8273d9;text-shadow:0 4px 14px #c2adee; }
.boost-art i { position:absolute;width:4rem;height:4rem;border-radius:50%;background:#b8d4fa88;left:0; }
.boost-art i:nth-child(2) { left:2rem;top:0;background:#ecc2ee88; }
.boost-art i:nth-child(3) { left:1rem;top:.5rem;background:#b3ead088; }
.boost-dialog[open] .boost-art span { animation:boost-star .8s cubic-bezier(.2,.7,.3,1); }
.boost-limit { display:flex;justify-content:center;align-items:baseline;gap:.6rem;flex-wrap:wrap;position:relative; }
.boost-limit>span { font-size:1.6rem;color:#8c8b9d;text-decoration:line-through;text-decoration-thickness:1px; }
.boost-limit i { font-size:1.4rem;font-style:normal;color:#8b7ac4; }
.boost-limit strong { font-size:3.6rem;line-height:1;letter-spacing:-.06em;color:#52469d; }
.boost-limit small { flex-basis:100%;font-size:.65rem;margin:.2rem 0 .6rem;color:var(--muted); }
.boost-description { font-size:.78rem;line-height:1.55; }
.boost-days { display:flex;gap:.3rem;margin:1.15rem 0 .4rem; }
.boost-days span { flex:1;display:grid;place-items:center;min-height:2rem;border-radius:.55rem;background:#ffffffa6;border:1px solid #c8cbe1;font-size:.7rem;color:#87869e; }
.boost-days span.is-done { background:linear-gradient(130deg,#a8dce9,#addec9);border-color:#99c6c8;color:#254552; }
.boost-status { font-size:.65rem;color:#655997;font-weight:600; }
.boost-fineprint { font-size:.6rem;line-height:1.6;color:#686a7f;margin:.9rem 0 1.2rem; }
.boost-dialog .dialog-close { position:absolute;top:.6rem;right:.6rem;float:none;z-index:2; }
.boost-dialog .primary-button { width:100%;min-height:3rem;background:#514a81; }
@keyframes boost-reveal { from {opacity:0;translate:0 18px;scale:.965;} to {opacity:1;translate:0 0;scale:1;} }
@keyframes boost-star { from {opacity:0;transform:scale(.6) rotate(-35deg);} to {opacity:1;transform:none;} }
@media(prefers-reduced-motion:reduce) { .boost-strip {transition:none;} .boost-dialog[open],.boost-dialog[open] .boost-art span {animation:none;} }

.friend-copy-icon { flex:none;width:1.15rem;height:1.15rem;stroke:currentColor;stroke-width:1.6;color:#687ca7;transition:color .25s; }
.friend-add.is-copied { background:#e6f4ef;border-color:#8abfaf; }
.friend-add.is-copied .friend-copy-icon { color:#3e806c; }

#friendConsentDialog { max-height:calc(100dvh - 2rem);overflow-y:auto; }
#friendConsentDialog h2, #friendConsentIntro { overflow-wrap:anywhere; }
#friendConsentDialog .friend-actions { display:grid;gap:.6rem; }
#friendConsentDialog h2 { margin:.85rem 0;font-size:1.4rem;line-height:1.25; }
.friend-consent-name { display:block;margin-top:.5rem;font-size:clamp(.82rem,3.8vw,1.05rem);color:var(--accent);letter-spacing:0; }
.friend-invite-dialog .dialog-close { position:absolute;top:.55rem;right:.55rem; }
.friend-invite-dialog .friend-actions button { transition:opacity .2s ease,transform .2s cubic-bezier(.2,.7,.3,1),background-color .25s ease,box-shadow .25s ease; }
.friend-invite-dialog .friend-actions button:active:not(:disabled) { opacity:.9;transform:scale(.985);transition-duration:.16s; }
.friend-invite-dialog .friend-actions button:disabled { opacity:.6;cursor:wait; }
@media (hover:hover) { .friend-invite-dialog .outline-button:hover { background:#edf0fa; } }
@media(prefers-reduced-motion:reduce) {
  .friend-invite-dialog .friend-actions button { transition:none; }
  .friend-invite-dialog .friend-actions button:active:not(:disabled) { transform:none; }
}

.daily-card .progress-track,.score-hero .progress-track { background:linear-gradient(to right,var(--rank-ink,var(--ink)) 0%,var(--rank-ink,var(--ink)) var(--progress),var(--track-color) var(--progress),var(--track-color) 100%); }