.guild-page { --cat-novice: #a3adb8; --cat-easy: #7fc463; --cat-adept: #58aee3; --cat-intermediate: #b085e6; --cat-hard: #e8954a; --cat-expert: #f2c66a; }
.gd-body { display: grid; grid-template-columns: minmax(13.5rem, 15.5rem) minmax(0, 1fr) minmax(16rem, 20rem); gap: 1rem; align-items: start; }
@media (max-width: 1319px) { .gd-body { grid-template-columns: minmax(12.5rem, 14rem) minmax(0, 1fr); } .gd-body > .gd-side { grid-column: 2; } }
.is-hud .stage .guild-page.win-page > .gd-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: .3rem; }
.gd-main, .gd-side { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.gd-card { display: grid; gap: .7rem; align-content: start; padding: 1rem 1.1rem; min-width: 0; }
.guild-page .win-caps { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; margin: 0; font: 400 .79rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }
.guild-page .win-caps small { font-size: .84rem; letter-spacing: .01em; text-transform: none; color: var(--text-3); }
.gd-fine { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-3); text-wrap: pretty; }

.gd-crest { position: relative; display: inline-grid; flex: none; border-radius: 50%; }
.gd-crest.is-ring::after, .gd-crest.is-prime::after { content: ''; position: absolute; inset: -.18rem; border-radius: 50%; border: .14rem solid color-mix(in srgb, var(--skill) 70%, #fff 0%); pointer-events: none; }
.gd-crest.is-prime::after { border-color: var(--gold-1); box-shadow: 0 0 0 1px #000, 0 0 .7rem rgba(242, 198, 106, .35); }
.gd-crest.is-none .medal { opacity: .55; }

.gd-rail { display: grid; gap: .8rem; align-content: start; min-width: 0; }
.gd-group { display: grid; gap: .3rem; }
.gd-group > small { padding: 0 .3rem; font-size: .72rem; letter-spacing: .14em; color: var(--gold-3); }
.gd-skill { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; width: 100%; min-height: 3rem; padding: .35rem .6rem .35rem .4rem; border-radius: .7rem; text-align: left; color: var(--text-1);
  border: 1px solid rgba(255, 255, 255, .07); background: rgba(10, 15, 25, .55); transition: border-color .15s, background .15s; }
.gd-skill:hover, .gd-skill:focus-visible { border-color: color-mix(in srgb, var(--skill) 55%, transparent); background: rgba(20, 30, 46, .7); }
.gd-skill.is-on { border-color: var(--skill); background: linear-gradient(90deg, color-mix(in srgb, var(--skill) 20%, transparent), rgba(10, 15, 25, .6)); }
.gd-skill.is-locked { opacity: .6; }
.gd-skill-copy { display: grid; gap: .05rem; min-width: 0; }
.gd-skill-copy b { font-weight: 400; font-size: .98rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-skill-copy small { font-size: .8rem; color: var(--text-3); white-space: nowrap; }
.gd-skill.is-on .gd-skill-copy small { color: var(--skill); }
.gd-skill-pts { font-size: .95rem; color: var(--text-2); white-space: nowrap; text-align: right; }
.gd-skill-pts small { margin-left: .15rem; font-size: .76rem; color: var(--text-3); }

.gd-hero { grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: center; border-color: color-mix(in srgb, var(--skill) 40%, transparent) !important; }
.gd-hero-copy { display: grid; gap: .45rem; min-width: 0; }
.gd-hero-copy > small.t-caps { font-size: .76rem; letter-spacing: .14em; color: var(--skill); }
.gd-hero-copy h2 { margin: 0; font: 400 1.8rem/1.1 var(--font-display); color: var(--gold-0); }
.gd-points { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; color: var(--text-2); font-size: .95rem; }
.gd-points > b { font: 400 1.7rem var(--font-num); color: var(--text-1); }
.gd-done { color: var(--text-3); }
.gd-next { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.gd-next b { font-weight: 400; color: var(--text-1); }
.gd-locked { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .88rem; color: var(--text-3); }
.gd-locked .ia-glyph { width: 1rem; height: 1rem; color: var(--gold-3); }

.gd-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; margin: 0; padding: 0; list-style: none; }
.gd-ladder li { display: grid; justify-items: center; gap: .15rem; padding: .45rem .25rem; border-radius: .6rem; text-align: center; border: 1px solid rgba(255, 255, 255, .07); color: var(--text-3); min-width: 0; }
.gd-ladder li .ia-glyph { width: 1rem; height: 1rem; }
.gd-ladder li b { font-weight: 400; font-size: .86rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gd-ladder li small { font-size: .74rem; white-space: nowrap; }
.gd-ladder li.is-got { border-color: color-mix(in srgb, var(--skill) 45%, transparent); background: color-mix(in srgb, var(--skill) 10%, transparent); color: var(--skill); }
.gd-ladder li.is-got b { color: var(--text-1); }
.gd-ladder li.is-next { border-color: rgba(242, 198, 106, .45); color: var(--gold-2); }
.gd-ladder li:last-child.is-got { border-color: var(--gold-2); background: rgba(242, 198, 106, .1); color: var(--gold-1); }

.gd-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.gd-tab { display: inline-flex; align-items: baseline; gap: .4rem; min-height: 2.2rem; padding: .3rem .75rem; border-radius: .6rem; color: var(--text-2); font-size: .92rem;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(10, 15, 25, .5); }
.gd-tab small { font-size: .78rem; color: var(--text-3); }
.gd-tab[data-cat] { border-left: .2rem solid var(--cat, rgba(255, 255, 255, .2)); }
.gd-tab.is-on { color: var(--text-1); border-color: var(--gold-3); background: rgba(242, 198, 106, .1); }
.gd-filters { display: flex; flex-wrap: wrap; gap: .3rem; }
.gd-filter { min-height: 1.9rem; padding: .2rem .7rem; border-radius: 1rem; font-size: .84rem; color: var(--text-3); border: 1px solid rgba(255, 255, 255, .08); }
.gd-filter.is-on { color: var(--text-1); border-color: color-mix(in srgb, var(--skill) 55%, transparent); background: color-mix(in srgb, var(--skill) 12%, transparent); }
[data-cat="novice"] { --cat: var(--cat-novice); } [data-cat="easy"] { --cat: var(--cat-easy); } [data-cat="adept"] { --cat: var(--cat-adept); }
[data-cat="intermediate"] { --cat: var(--cat-intermediate); } [data-cat="hard"] { --cat: var(--cat-hard); } [data-cat="expert"] { --cat: var(--cat-expert); }

.gd-tasks { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.gd-task { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: .65rem; border: 1px solid rgba(255, 255, 255, .06); background: rgba(10, 15, 25, .45); }
.gd-pts { display: grid; place-items: center; height: 2rem; border-radius: .5rem; font-size: .95rem; color: #10141c; background: var(--cat, var(--gold-2)); box-shadow: inset 0 -.15rem 0 rgba(0, 0, 0, .25); }
.gd-task-copy { display: grid; gap: .3rem; min-width: 0; }
.gd-task-copy strong { font-weight: 400; font-size: .98rem; line-height: 1.3; color: var(--text-1); text-wrap: pretty; }
.gd-task-bar { display: grid; grid-template-columns: minmax(4rem, 14rem) auto; align-items: center; gap: .6rem; }
.gd-task-bar small { font-size: .82rem; color: var(--text-3); white-space: nowrap; }
.gd-task.is-done { opacity: .78; }
.gd-task.is-done .gd-pts { background: rgba(255, 255, 255, .14); color: var(--text-2); box-shadow: none; }
.gd-when { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; color: var(--skill); white-space: nowrap; }
.gd-when .ia-glyph { width: .95rem; height: .95rem; }
.gd-track { display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem; padding: .2rem .65rem; border-radius: .55rem; font-size: .84rem; color: var(--text-2); white-space: nowrap; border: 1px solid rgba(255, 255, 255, .1); }
.gd-track .ia-glyph { width: .95rem; height: .95rem; color: var(--gold-3); }
.gd-track:hover:not(:disabled), .gd-track:focus-visible { border-color: var(--gold-3); color: var(--text-1); }
.gd-track.is-on { border-color: var(--gold-2); background: rgba(242, 198, 106, .12); color: var(--gold-0); }
.gd-track:disabled { opacity: .45; }
.gd-empty { margin: 0; padding: .8rem .2rem; font-size: .95rem; color: var(--text-3); }

.gd-tracked { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: .6rem; border: 1px solid color-mix(in srgb, var(--skill) 28%, transparent); }
.gd-tracked-copy { display: grid; gap: .25rem; min-width: 0; }
.gd-tracked-copy strong { font-weight: 400; font-size: .92rem; line-height: 1.3; color: var(--text-1); }
.gd-tracked-copy small { font-size: .78rem; color: var(--text-3); }
.gd-untrack { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .5rem; color: var(--text-3); }
.gd-untrack:hover, .gd-untrack:focus-visible { color: var(--text-1); background: rgba(255, 255, 255, .06); }
.gd-untrack .ia-glyph { width: .95rem; height: .95rem; }
.gd-recent { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.gd-recent li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem; }
.gd-recent li > span { display: grid; gap: .05rem; min-width: 0; }
.gd-recent li b { font-weight: 400; font-size: .9rem; line-height: 1.3; color: var(--text-1); }
.gd-recent li small { font-size: .78rem; color: var(--text-3); }
.gd-recent li.is-rank b { color: var(--gold-0); }
.gd-recent li.is-retro .ia-emblem { width: 1.5rem; height: 1.5rem; }

.gd-phone { display: grid; gap: .8rem; }
.gd-ph-head { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; }
.gd-ph-head .ia-emblem { width: 2.8rem; height: 2.8rem; flex: none; }
.gd-ph-head > div { display: grid; min-width: 0; flex: 1; }
.gd-ph-head .t-caps { font-size: .7rem; letter-spacing: .14em; color: var(--gold-3); }
.gd-ph-head h1 { margin: 0; font: 400 1.5rem/1.1 var(--font-display); color: var(--gold-0); }
.gd-ph-stats { font-size: .84rem; color: var(--text-3); white-space: nowrap; }
.gd-phone .gd-rail { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: .6rem; padding-bottom: .2rem; }
.gd-phone .gd-group { grid-auto-flow: column; grid-auto-columns: max-content; align-items: end; }
.gd-phone .gd-group > small { display: none; }
.gd-phone .gd-skill { grid-template-columns: auto auto; width: auto; }
.gd-phone .gd-skill-pts { display: none; }
.gd-phone .gd-hero { grid-template-columns: 1fr; justify-items: start; }
.gd-phone .gd-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd-phone .gd-task { grid-template-columns: 2.2rem minmax(0, 1fr); }
.gd-phone .gd-task > :last-child { grid-column: 2; justify-self: start; }

.gd-strip { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; width: 100%; margin-top: .55rem; padding: .35rem 2.1rem .35rem .35rem; border-radius: .7rem; text-align: left; color: var(--text-1);
  border: 1px solid color-mix(in srgb, var(--skill) 30%, rgba(255, 255, 255, .06)); background: rgba(10, 15, 25, .45); transition: border-color .15s, background .15s; }
.gd-strip:hover, .gd-strip:focus-visible { border-color: var(--skill); background: color-mix(in srgb, var(--skill) 10%, rgba(10, 15, 25, .5)); }
.gd-strip-copy { flex: 0 1 auto; min-width: 0; }
.gd-strip-copy small { display: block; font-size: .66rem; letter-spacing: .14em; color: var(--gold-3); }
.gd-strip-copy b { display: inline-block; margin-right: .45rem; font-weight: 400; font-size: .95rem; color: var(--skill); white-space: nowrap; }
.gd-strip-copy .t-num { display: inline-block; font-size: .82rem; color: var(--text-3); white-space: nowrap; }
.gd-strip-next { flex: 1 1 auto; display: grid; gap: .2rem; min-width: 5rem; }
.gd-strip-next small { font-size: .76rem; color: var(--text-3); }
.gd-strip > .ia-glyph { position: absolute; right: .55rem; top: 50%; translate: 0 -50%; width: 1rem; height: 1rem; color: var(--text-3); }

.gd-goals { display: grid; gap: .4rem; margin-top: .3rem; padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.gd-goals-head { display: flex; align-items: center; justify-content: space-between; font-size: .7rem; letter-spacing: .14em; color: var(--gold-3); }
.gd-goals-open { display: inline-flex; align-items: center; gap: .2rem; font-size: .78rem; letter-spacing: .02em; text-transform: none; color: var(--text-3); }
.gd-goals-open .ia-glyph { width: .85rem; height: .85rem; }
.gd-goals-open:hover, .gd-goals-open:focus-visible { color: var(--text-1); }
.gd-tracked.is-goal { padding: .35rem .4rem; }

.gd-retro { border-color: rgba(242, 198, 106, .55); background: linear-gradient(180deg, rgba(48, 38, 16, .9), rgba(10, 15, 25, .92)); }
.gd-retro .broadcast-kicker { color: var(--gold-1); }

.gd-profile { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }
.gd-profile > small { font-size: .7rem; letter-spacing: .14em; color: var(--gold-3); }
.gd-profile-crests { display: inline-flex; gap: .25rem; }
.gd-profile > b { font-weight: 400; font-size: .9rem; color: var(--text-2); }

.toast.is-guild { gap: .7rem; padding: .5rem 1rem .5rem .5rem; border-color: color-mix(in srgb, var(--skill, var(--gold-2)) 60%, var(--gold-4)); }
.toast.is-guild .medal { --size: 2.1rem; flex: none; }
.toast.is-guild .toast-copy small { color: var(--text-2); }
.toast.is-guild .gd-drop-pts { flex: none; font: 400 1.2rem var(--font-num); color: var(--gold-1); }
.level-up.is-guild { border-color: color-mix(in srgb, var(--skill) 60%, var(--gold-3)); }
.level-up.is-guild .lu-copy span { color: var(--gold-1); }
.level-up.is-guild .lu-gives { display: grid; gap: .1rem; margin-top: .3rem; font: 600 .82rem/1.3 var(--font-ui); font-style: normal; color: var(--text-2); }
.level-up.is-guild.is-prime { padding: 1.2rem 2.6rem 1.2rem 1.2rem; border-color: var(--gold-1); background: linear-gradient(90deg, rgba(40, 30, 10, .94), rgba(20, 32, 52, .94));
  box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(242, 198, 106, .32), 0 1.2rem 3.5rem rgba(0, 0, 0, .65), 0 0 3.2rem rgba(242, 198, 106, .4); animation-delay: 0s, 6.4s; }
.level-up.is-guild.is-prime .lu-copy strong { font-size: 2.3rem; }
@media (prefers-reduced-motion: reduce) { .level-up.is-guild .lu-rays { display: none; } }

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .guild-page { font-size: .9rem; }
  .guild-page :is(.gd-skill, .gd-tab, .gd-filter, .gd-track, .btn) { min-height: 3.3rem; }
  .guild-page .gd-filter { padding-inline: .9rem; }
  .guild-page .gd-untrack { width: 3.3rem; height: 3.3rem; }
  .guild-page .gd-task { gap: .55rem; }
  .guild-page .gd-task-bar { grid-template-columns: minmax(3rem, 1fr) auto; }
  .guild-page :is(.t-caps, .btn-sm, .win-caps, .win-caps small, .gd-group > small, .gd-skill-copy small, .gd-skill-pts small, .gd-tab small, .gd-filter, .gd-track, .gd-task-bar small, .gd-when,
    .gd-ladder li b, .gd-ladder li small, .gd-tracked-copy small, .gd-recent li small, .gd-ph-head .t-caps, .gd-ph-stats, .gd-hero-copy > small.t-caps) { font-size: .9rem; }
  .guild-page :is(.gd-group > small, .gd-ph-head .t-caps, .gd-hero-copy > small.t-caps, .win-caps) { letter-spacing: .06em; }
}