/* /updates: Clash of Clans balance changes, public. Colors follow the app's theme tokens. */
.gu { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.gu-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.gu-brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: 1.1rem; color: var(--app-ink, #171520); text-decoration: none; }
.gu-brand img { height: 28px; }
.gu-brand span { color: var(--app-accent, #ff5247); }
.gu-bar-tag { font-size: .8rem; font-weight: 700; color: var(--app-mute, #64748b); display: inline-flex; gap: .3rem; align-items: center; }
.gu-cta { margin-left: auto; }
.gu-main { display: flex; flex-direction: column; gap: 1rem; }
.gu-intro h1 { font-size: 1.6rem; font-weight: 800; margin: 0; }
.gu-intro p { color: var(--app-ink-soft, #475569); margin: .3rem 0 0; max-width: 80ch; }

.gu-card { background: var(--app-surface, #fff); border: 1px solid var(--app-line, #e2e8f0); border-radius: 16px; padding: 1.1rem 1.25rem; min-width: 0; }
.gu-empty { color: var(--app-mute, #64748b); display: flex; gap: .5rem; align-items: center; }
.gu-update { display: flex; flex-direction: column; gap: 1rem; scroll-margin-top: 1rem; }
.gu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
.gu-head h2 { font-size: 1.3rem; font-weight: 800; margin: 0; }
.gu-meta { color: var(--app-mute, #64748b); font-size: .85rem; margin-top: .15rem; }
.gu-counts { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

.gu-tag { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .12rem .55rem; font-size: .72rem; font-weight: 800; border: 1px solid var(--app-line, #e2e8f0); white-space: nowrap; color: var(--app-ink-soft, #475569); }
.gu-tag.is-buff, .gu-tag.is-easier { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.gu-tag.is-nerf, .gu-tag.is-harder { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.gu-tag.is-mixed { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.gu-tag.is-new { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
[data-theme-mode="dark"] .gu-tag.is-buff, [data-theme-mode="dark"] .gu-tag.is-easier { background: rgba(16, 185, 129, .12); color: #6ee7b7; border-color: rgba(16, 185, 129, .35); }
[data-theme-mode="dark"] .gu-tag.is-nerf, [data-theme-mode="dark"] .gu-tag.is-harder { background: rgba(239, 68, 68, .12); color: #fca5a5; border-color: rgba(239, 68, 68, .35); }
[data-theme-mode="dark"] .gu-tag.is-mixed { background: rgba(245, 158, 11, .12); color: #fcd34d; border-color: rgba(245, 158, 11, .35); }
[data-theme-mode="dark"] .gu-tag.is-new { background: rgba(59, 130, 246, .14); color: #93c5fd; border-color: rgba(59, 130, 246, .35); }

.gu-section h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--app-mute, #64748b); margin: 0 0 .55rem; display: flex; gap: .35rem; align-items: center; }
.gu-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: .6rem; }
.gu-item { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .7rem; align-items: start; border: 1px solid var(--app-line, #e2e8f0); border-left-width: 4px; border-radius: 12px; padding: .65rem .75rem; }
.gu-item.is-buff, .gu-item.is-easier { border-left-color: #10b981; }
.gu-item.is-nerf, .gu-item.is-harder { border-left-color: #ef4444; }
.gu-item.is-mixed { border-left-color: #f59e0b; }
.gu-pic { width: 3rem; height: 3rem; border-radius: 10px; background: var(--app-surface-2, #f1f5f9); display: grid; place-items: center; overflow: hidden; color: var(--app-fade, #94a3b8); font-size: 1.2rem; }
.gu-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gu-item-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gu-item-head b { font-size: .95rem; }
.gu-lines { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .3rem; }
.gu-lines li { font-size: .86rem; font-weight: 700; color: var(--app-ink, #171520); }
.gu-lines li.is-good span { color: #047857; }
.gu-lines li.is-bad span { color: #b91c1c; }
[data-theme-mode="dark"] .gu-lines li.is-good span { color: #6ee7b7; }
[data-theme-mode="dark"] .gu-lines li.is-bad span { color: #fca5a5; }
.gu-lines small { display: block; font-weight: 500; font-size: .76rem; color: var(--app-mute, #64748b); }

.gu-new { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: .5rem; }
.gu-new li { display: flex; gap: .6rem; align-items: center; border: 1px solid #bfdbfe; background: #f8fbff; border-radius: 12px; padding: .5rem .65rem; }
[data-theme-mode="dark"] .gu-new li { border-color: rgba(59, 130, 246, .35); background: rgba(59, 130, 246, .06); }
.gu-new b { display: block; font-size: .9rem; }
.gu-new small { color: var(--app-mute, #64748b); font-size: .76rem; }
.gu-caps { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: var(--app-ink-soft, #475569); columns: 2 18rem; }
.gu-foot { font-size: .8rem; color: var(--app-mute, #64748b); border-top: 1px solid var(--app-line-soft, #f1f5f9); padding-top: .7rem; }

@media (max-width: 640px) {
    .gu-intro h1 { font-size: 1.3rem; }
    .gu-card { padding: .9rem .9rem; }
    .gu-cta { margin-left: 0; }
}

/* releases (folded after the third), their patches, and every affected level */
.gu-toc { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.gu-toc a { border: 1px solid var(--app-line, #e2e8f0); border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; font-weight: 700; text-decoration: none; color: var(--app-ink, #171520); background: var(--app-surface, #fff); }
.gu-toc a small { color: var(--app-mute, #64748b); font-weight: 600; margin-left: .2rem; }
.gu-release { display: flex; flex-direction: column; gap: .75rem; }
.gu-release > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; padding: .4rem .2rem; border-bottom: 2px solid var(--app-line, #e2e8f0); }
.gu-release > summary::-webkit-details-marker { display: none; }
.gu-release-title { font-size: 1.15rem; font-weight: 800; }
.gu-chev { margin-left: auto; transition: transform .15s; color: var(--app-mute, #64748b); }
.gu-release[open] > summary .gu-chev { transform: rotate(180deg); }
.gu-release[open] > .gu-update { margin-top: .75rem; }
.gu-sub { font-size: .72rem; font-weight: 700; color: var(--app-mute, #64748b); }
.gu-levels { margin-top: .45rem; }
.gu-levels > summary { cursor: pointer; font-size: .78rem; font-weight: 700; color: var(--app-accent, #ff5247); }
.gu-table-wrap { overflow-x: auto; margin-top: .4rem; }
.gu-table { border-collapse: collapse; font-size: .76rem; width: 100%; }
.gu-table th, .gu-table td { padding: .25rem .45rem; border-bottom: 1px solid var(--app-line-soft, #f1f5f9); white-space: nowrap; text-align: left; }
.gu-table thead th { font-size: .68rem; color: var(--app-mute, #64748b); font-weight: 800; }
.gu-table tbody th { font-weight: 800; }
.gu-table td.is-same { color: var(--app-fade, #94a3b8); }
.gu-table td.is-good b { color: #047857; }
.gu-table td.is-bad b { color: #b91c1c; }
[data-theme-mode="dark"] .gu-table td.is-good b { color: #6ee7b7; }
[data-theme-mode="dark"] .gu-table td.is-bad b { color: #fca5a5; }
.gu-update .gu-empty { font-size: .86rem; }

/* new levels: compact chips */
.gu-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.gu-chips li { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #a7f3d0; background: #f7fefb; border-radius: 999px; padding: .15rem .6rem .15rem .25rem; font-size: .78rem; }
.gu-chips li img { width: 1.4rem; height: 1.4rem; object-fit: contain; }
.gu-chips li span { color: var(--app-mute, #64748b); }
[data-theme-mode="dark"] .gu-chips li { border-color: rgba(16, 185, 129, .35); background: rgba(16, 185, 129, .06); }

/* versions with nothing tracked changed */
.gu-quiet { font-size: .82rem; color: var(--app-mute, #64748b); display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: baseline; padding: 0 .2rem; }
.gu-quiet span { color: var(--app-ink-soft, #475569); font-weight: 700; }
.gu-quiet small { font-weight: 500; color: var(--app-mute, #64748b); }

/* inside the app: the app's own frame and width */
.gu.is-app { max-width: none; padding: 1rem 1.25rem 2rem; }
.gu-intro h2 a, .gu-head h2 a { color: inherit; text-decoration: none; }
.gu-head h2 a:hover { color: var(--app-accent, #ff5247); }
.gu-crumbs { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; font-weight: 700; margin-bottom: .4rem; }
.gu-crumbs a { color: var(--app-accent, #ff5247); text-decoration: none; }
.gu-quiet a { color: inherit; }

/* stat icons */
.gu-ico { font-size: 1.05em; vertical-align: -.12em; }