/*
 * Square-edge override pass.
 *
 * Drops the rounded-corner aesthetic across the public site for a sharper,
 * more modern look. Loaded AFTER `{% block extra_css %}` in base.html and
 * admin_base.html so it wins source-order on every other linked stylesheet
 * AND on inline `<style>` blocks declared inside `extra_css`.
 *
 * What this file does NOT change:
 *   - circular avatars / status dots / loaders (.rounded-circle, anything
 *     using `border-radius: 50%`) — those need to stay round.
 *   - icon glyphs and tiny indicator badges where a hard square would clip
 *     into the icon (handled per-class below).
 *
 * Strategy:
 *   1. Redefine the project's radius tokens so every rule that uses
 *      `var(--radius-*)` shrinks to crisp 0–3 px.
 *   2. Aggressive attribute-selector flatten for any class that looks like
 *      a card / pill / badge / button / panel / banner / shell — these
 *      cover the dozens of bespoke surfaces across the site that weren't
 *      worth listing one-by-one. Uses `!important` to win against inline
 *      `<style>` blocks declared in template content (which loads after
 *      head links).
 *   3. Explicit `!important` overrides for the highest-volume named
 *      surfaces: hero / boss-status / activity-ticker / status-bar pills /
 *      community-stats / bottom-nav / v2/* / Bootstrap chrome / form
 *      controls / Bootstrap `.rounded-*` utilities.
 *   4. Preserve `.rounded-circle` and explicit `:not(...)` exceptions for
 *      circle-bearing classes (status dots, avatars, loaders, casino
 *      dice).
 */

:root,
.compact-view,
.compact-mode {
    --radius-sm: 0px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-xl: 3px;
}

/* ── 1. Aggressive attribute-selector flatten ──────────────────────
 *
 * Any class containing the listed substrings ends up flat. False
 * positives are acceptable here because the user's brief is "square
 * corners everywhere"; if a niche element gets squared by accident the
 * result still matches intent.
 */
[class*="-card"]:not(.rounded-circle),
[class*="-pill"]:not(.rounded-circle),
[class*="-badge"]:not(.rounded-circle),
[class*="-button"]:not(.rounded-circle),
[class*="-btn"]:not(.rounded-circle),
[class*="-cell"]:not(.rounded-circle),
[class*="-section"]:not(.rounded-circle),
[class*="-banner"]:not(.rounded-circle),
[class*="-panel"]:not(.rounded-circle),
[class*="-shell"]:not(.rounded-circle),
[class*="-container"]:not(.rounded-circle),
[class*="-wrapper"]:not(.rounded-circle),
[class*="-tile"]:not(.rounded-circle),
[class*="-chip"]:not(.rounded-circle),
[class*="-tag"]:not(.rounded-circle),
[class*="-box"]:not(.rounded-circle),
[class*="-modal"]:not(.rounded-circle),
[class*="-toast"]:not(.rounded-circle),
[class*="-alert"]:not(.rounded-circle),
[class*="-popover"]:not(.rounded-circle),
[class*="-tooltip"]:not(.rounded-circle),
[class*="-dropdown"]:not(.rounded-circle),
[class*="-menu"]:not(.rounded-circle),
[class*="-tab"]:not(.rounded-circle),
[class*="-input"]:not(.rounded-circle),
[class*="-select"]:not(.rounded-circle),
[class*="-control"]:not(.rounded-circle),
[class*="-group"]:not(.rounded-circle),
[class*="-list"]:not(.rounded-circle),
[class*="-row"]:not(.rounded-circle),
[class*="-col"]:not(.rounded-circle),
[class*="-grid"]:not(.rounded-circle),
[class*="-frame"]:not(.rounded-circle),
[class*="-block"]:not(.rounded-circle),
[class*="-surface"]:not(.rounded-circle),
[class*="-overlay"]:not(.rounded-circle),
[class*="-hero"]:not(.rounded-circle) {
    border-radius: 2px !important;
}

/* ── 2. Bootstrap chrome flatten ───────────────────────────────────── */
.btn,
.btn-group > .btn,
.card,
.card-header,
.card-body,
.card-footer,
.alert,
.badge,
.list-group,
.list-group-item,
.dropdown-menu,
.dropdown-item,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.form-control,
.form-control-sm,
.form-control-lg,
.form-select,
.form-select-sm,
.form-select-lg,
.input-group,
.input-group-text,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.tab-content,
.toast,
.toast-header,
.toast-body,
.popover,
.popover-body,
.tooltip-inner,
.table,
.table thead,
.table tbody,
.progress,
.progress-bar,
.accordion,
.accordion-item,
.accordion-button,
.accordion-body,
.pagination .page-link {
    border-radius: 2px !important;
}

/* ── 3. Project-named surfaces ────────────────────────────────────── */

/* Activity ticker (top of every page). */
.site-ticker-shell,
.site-ticker-brand,
.ticker-brand-link,
.site-ticker-constants,
.ticker-const-pill,
.site-ticker-viewport,
.site-ticker-track,
.site-ticker-item {
    border-radius: 2px !important;
}

/* Hero / homepage hero pills + community stats row */
.status-bar,
.status-bar-item,
.status-bar-discord,
.status-bar-jackpot,
.community-stats-row,
.community-stats-cell,
.community-stats-link,
.community-stats-cell--link {
    border-radius: 2px !important;
}

/* Bottom nav */
.site-bottom-nav,
.site-bottom-nav-shell,
.site-bottom-nav-bar,
.site-bottom-nav-item,
.site-bottom-nav-rewards,
.site-bottom-nav-meta,
.site-bottom-nav-badge,
.site-bottom-nav-item-spotlight,
.site-bottom-nav-item-market-label {
    border-radius: 2px !important;
}

/* Hero / homepage cards */
.hero-section,
.hero-content,
.homepage-content-shell,
.hero-actions,
.hero-actions .btn,
.hero-logo-container,
.hero-boss-status,
.hero-boss-summary,
.hero-boss-grid,
.hero-boss-card,
.hero-boss-empty,
.hero-boss-card-story,
.hero-boss-card-raid,
.hero-boss-card-top,
.hero-boss-layout,
.hero-boss-info-column,
.hero-boss-preview-column,
.hero-boss-map-preview,
.hero-boss-map-preview-badge,
.hero-boss-map-preview-pin,
.hero-boss-map-preview-footer,
.hero-boss-map-preview-location,
.hero-boss-map-preview-action,
.hero-boss-server,
.hero-boss-name,
.hero-boss-progress,
.hero-boss-progress-bar,
.hero-boss-progress-fill,
.hero-boss-stat,
.hero-boss-stat-icon,
.hero-boss-stat-value,
.hero-boss-cta,
.hero-boss-rewards,
.hero-boss-reward-chip {
    border-radius: 2px !important;
}

/* Featured sales / story banner / vote banner */
.featured-sales-card,
.featured-sales-section,
.story-event-banner,
.story-event-card,
.story-event-pulse,
.site-sale-banner,
.site-sale-banner-inner,
.vote-banner,
.vote-card {
    border-radius: 2px !important;
}

/* World-map preview block on the homepage hero. Distinct from the boss
 * map preview (`.hero-boss-map-preview`); this is the standalone "Live
 * Map" thumbnail that operators flagged as still rounded. */
.hero-map-preview,
.hero-map-heading,
.hero-map-kicker,
.hero-map-link,
.hero-map-thumbnail-link,
.hero-map-thumbnail,
.hero-map-overlay,
.hero-map-overlay-label,
[class^="hero-map-"]:not(.rounded-circle),
[class*=" hero-map-"]:not(.rounded-circle) {
    border-radius: 2px !important;
}

/* MORE drawer (bottom-nav slide-up) — every action button, profile
 * surface, market card, status chip, drawer header, etc. Operator
 * flagged that drawer buttons still rendered with the original
 * 14–22 px radii after the cascade fix. */
.site-nav-drawer,
.site-drawer-hero,
.site-drawer-handle,
.site-drawer-handle-bar,
.site-drawer-stat,
.site-drawer-kicker,
.site-drawer-title,
.site-drawer-subtitle,
.site-drawer-section-title,
.site-more-profile,
.site-more-profile-copy,
.site-more-profile-heading,
.site-more-actions,
.site-more-action,
.site-more-action-icon,
.site-more-action-copy,
.site-more-action-title,
.site-more-action-subtitle,
.site-more-action-badge,
.site-more-action-gold,
.site-more-action-attention,
.site-more-progress-shell,
.site-more-progress-meta,
.site-more-progress-stats,
.site-more-progress-bar,
.site-more-progress-bar span,
.site-more-progress-highlights,
.site-more-market-grid,
.site-more-market-card,
.site-more-market-kicker,
.site-more-market-title,
.site-more-market-description,
.site-more-market-cta,
.site-more-command-summary,
.site-more-command-summary-title,
.site-more-level-badge,
.site-nav-minimize-btn,
.site-status-row,
.sr-chip,
.sr-balance-chip,
.sr-reminder-chip,
.sr-giveaway-chip,
.sr-dream,
.sr-premium,
[class^="site-more-"]:not(.rounded-circle):not([class*="-avatar"]),
[class*=" site-more-"]:not(.rounded-circle):not([class*="-avatar"]),
[class^="site-drawer-"]:not(.rounded-circle),
[class*=" site-drawer-"]:not(.rounded-circle),
[class^="site-nav-"]:not(.rounded-circle),
[class*=" site-nav-"]:not(.rounded-circle),
[class^="sr-"]:not(.rounded-circle) {
    border-radius: 2px !important;
}

/* v2 design system surfaces (desktop + mobile share class names) */
[class^="v2-"]:not(.rounded-circle),
[class*=" v2-"]:not(.rounded-circle) {
    border-radius: 2px !important;
}

/* Casino / gacha / market / leaderboard / chat / streak / personal-bests
 * — explicit so attribute selectors above don't miss the un-suffixed
 *   parent shells. */
.casino-page,
.gacha-page,
.gacha-machine,
.gacha-spin-btn,
.gacha-result-card,
.market-page,
.market-listing,
.auction-card,
.auction-listing,
.leaderboard-row,
.leaderboard-entry,
.leaderboard-rank,
.streak-milestone,
.personal-best-row,
.chat-message-group,
.chat-input-bar,
.message-bubble,
.daily-challenge,
.shop-item,
.product-tile,
.purchase-tile,
.coin-pack,
.boost-banner,
.giveaway-notifier {
    border-radius: 2px !important;
}

/* Form control focus retention so the focus ring doesn't paint flush
 * against the text edge — crisp but not pinched. */
.form-control:focus,
.form-select:focus,
.form-control-sm:focus,
.form-select-sm:focus {
    border-radius: 2px !important;
}

/* Bootstrap `.rounded-*` utilities — flatten ALL of them, then restore
 * `.rounded-circle` to its 50 % so avatars / status dots / casino dice
 * stay round. */
.rounded,
.rounded-0,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-4,
.rounded-5,
.rounded-top,
.rounded-end,
.rounded-bottom,
.rounded-start,
.rounded-pill {
    border-radius: 2px !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

/* Explicit circle exceptions where we deliberately want round shapes
 * back, even though the attribute selectors above caught them. */
.status-dot.online,
.status-dot.offline,
.site-ticker-dot,
.site-vote-dot,
.casino-chip,
.casino-dice,
.user-avatar,
.profile-avatar,
.avatar,
.discord-avatar,
[class*="-avatar"],
[class*="loader"]:not([class*="-loader-card"]),
.spinner-border,
.spinner-grow {
    border-radius: 50% !important;
}