/**
 * Battle — the arena skin.
 *
 * Ported from stitch_minimalist_web_page_design. That mock is built on a
 * Tailwind CDN build with its own config: `bg-brand-crimson`, `font-orbitron`,
 * `shadow-glow-cyan`, and so on. None of those exist here -- tuka.css is a
 * compiled artifact with no build step on this host, so a class that is not
 * already inside it renders as nothing at all, silently.
 *
 * So the design is ported as real CSS rather than as utilities that would
 * quietly do nothing. Component classes rather than a second utility
 * vocabulary: `.bt-card` instead of eleven chained utilities repeated on
 * every card. The markup stays readable and the look lives in one file that
 * can be changed in one place.
 *
 * Scoped under `.bt` so nothing here can leak into Party, Discover or the
 * room, which keep the app's own theme.
 */

/* ------------------------------------------------------------- tokens */

.bt {
    --bt-void: #030108;
    --bt-card: #0a0618;
    --bt-card-light: #120b2a;
    --bt-plate: #080514;

    --bt-crimson: #ff0055;
    --bt-pink: #ff2a85;
    --bt-cyan: #00f6ff;
    --bt-amber: #ffb800;
    --bt-gold: #facc15;
    --bt-violet: #8b5cf6;
    --bt-purple: #a855f7;
    --bt-emerald: #10b981;

    /* Per-card accent. Each card overrides these two and everything
       inside it -- border, glow, aurora, score -- follows. */
    --bt-accent: var(--bt-crimson);
    --bt-accent-2: var(--bt-purple);
}

/* ------------------------------------------------------------ surface */

.bt-stage {
    position: relative;
    background-color: var(--bt-void);
    background-image:
        radial-gradient(circle at 50% -10%, rgba(139, 92, 246, .28) 0%, transparent 55%),
        radial-gradient(circle at 10% 25%, rgba(255, 0, 85, .18) 0%, transparent 45%),
        radial-gradient(circle at 90% 65%, rgba(0, 246, 255, .16) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(255, 184, 0, .12) 0%, transparent 45%);
    background-attachment: fixed;
}

/* The 32px scan grid that sits under everything. */
.bt-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-size: 32px 32px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
}

.bt-mesh {
    background-image: radial-gradient(rgba(0, 246, 255, .08) 1px, transparent 1px);
    background-size: 16px 16px;
}

/* -------------------------------------------------------------- shape */

/* The chamfered chassis. Two nested clips so the 1.5px gradient rim reads
   as a bevelled edge rather than a border. */
.bt-card {
    position: relative;
    padding: 1.5px;
    clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px,
                       100% calc(100% - 20px), calc(100% - 20px) 100%,
                       20px 100%, 0 calc(100% - 20px));
    background-image: linear-gradient(to bottom,
        color-mix(in srgb, var(--bt-accent) 60%, transparent),
        color-mix(in srgb, var(--bt-violet) 30%, transparent),
        color-mix(in srgb, var(--bt-accent-2) 50%, transparent));
    transition: filter .3s ease;
}

.bt-card:active {
    filter: brightness(1.12);
}

.bt-card__inner {
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px,
                       100% calc(100% - 18px), calc(100% - 18px) 100%,
                       18px 100%, 0 calc(100% - 18px));
    background-image: linear-gradient(to bottom, var(--bt-card-light), var(--bt-card) 55%, var(--bt-plate));
}

/* The two blurred auroras in opposite corners. Pseudo-elements, because
   they are decoration and should never be in the accessibility tree. */
.bt-card__inner::before,
.bt-card__inner::after {
    content: '';
    position: absolute;
    width: 12rem;
    height: 12rem;
    border-radius: 9999px;
    filter: blur(48px);
    pointer-events: none;
}

.bt-card__inner::before {
    top: -4rem;
    left: -4rem;
    background: color-mix(in srgb, var(--bt-accent) 25%, transparent);
}

.bt-card__inner::after {
    bottom: -4rem;
    right: -4rem;
    background: color-mix(in srgb, var(--bt-accent-2) 25%, transparent);
}

/* A parallelogram status ribbon. */
.bt-tag {
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

/* ------------------------------------------------------------- glows */

.bt-glow          { box-shadow: 0 0 25px -2px color-mix(in srgb, var(--bt-accent) 65%, transparent); }
.bt-glow-cyan     { box-shadow: 0 0 25px -2px rgba(0, 246, 255, .65); }
.bt-glow-amber    { box-shadow: 0 0 25px -2px rgba(255, 184, 0, .65); }
.bt-glow-crimson  { box-shadow: 0 0 25px -2px rgba(255, 0, 85, .65); }

/* --------------------------------------------------------- typography */

/* Orbitron for numbers, Chakra Petch for labels. Both are loaded beside
   the app's own faces; Space Grotesk the theme already has. */
.bt-num {
    font-family: Orbitron, 'Space Grotesk', monospace;
    font-weight: 900;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.bt-tech {
    font-family: 'Chakra Petch', 'Space Grotesk', sans-serif;
    font-weight: 700;
}

/* A score that looks poured rather than printed. */
.bt-score {
    background-image: linear-gradient(to right, #fde68a, var(--bt-amber), var(--bt-crimson));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 10px rgba(255, 184, 0, .5));
}

.bt-score--cool {
    background-image: linear-gradient(to right, #a5f3fc, var(--bt-cyan), var(--bt-violet));
    filter: drop-shadow(0 2px 10px rgba(0, 246, 255, .45));
}

.bt-vs-text {
    background-image: linear-gradient(to right, var(--bt-cyan), #fff, var(--bt-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ------------------------------------------------------------ portrait */

.bt-face {
    padding: 2px;
    border-radius: 1rem;
    background-image: linear-gradient(to top right, var(--bt-amber), #fef08a, var(--bt-crimson));
}

.bt-face--cool {
    background-image: linear-gradient(to top right, var(--bt-cyan), #60a5fa, var(--bt-violet));
}

.bt-face--muted {
    background-image: linear-gradient(to top right, #5b21b6, #312e81);
}

.bt-face__img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
    background: #1a0e30;
}

/* --------------------------------------------------------- the clash */

/*
 * Left fighter | VS | right fighter, on one line.
 *
 * The mock does this with `grid-cols-12` and `col-span-5 / 2 / 5`. None of
 * those three exist in this app's compiled sheet, so the grid collapsed to
 * a single column and the second fighter dropped underneath the VS -- the
 * one thing the whole card is built around. Real CSS, so it cannot happen
 * again.
 *
 * minmax(0, …) on the side columns is what lets `truncate` work on a long
 * username: without it a grid column refuses to shrink below its content
 * and the name pushes the VS off-centre instead of ellipsing.
 */
.bt-clash {
    display: grid;
    grid-template-columns: minmax(0, 5fr) auto minmax(0, 5fr);
    align-items: center;
    gap: .5rem;
}

.bt-clash__side {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
}

.bt-clash__side--right {
    flex-direction: row-reverse;
    text-align: right;
}

/* The portraits must not shrink when a name is long. */
.bt-clash__face { flex: 0 0 auto; }
.bt-clash__meta { min-width: 0; }

.bt-clash__core {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Under about 340px -- an iPhone SE with the pane inset -- three columns
   stop fitting with a 64px portrait each side. Shrink the faces rather
   than stack, because stacking is what this is fixing. */
@media (max-width: 360px) {
    .bt-clash { gap: .375rem; }
    .bt-clash__face .bt-face { width: 3.25rem; height: 3.25rem; }
}

/* ---------------------------------------------------------- the meter */

.bt-meter {
    display: flex;
    height: .75rem;
    width: 100%;
    padding: 2px;
    border-radius: 9999px;
    overflow: hidden;
    background: #070312;
    border: 1px solid rgba(168, 85, 247, .35);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
}

.bt-meter__lead {
    position: relative;
    height: 100%;
    border-radius: 9999px 0 0 9999px;
    background-image: linear-gradient(to right, var(--bt-amber), var(--bt-crimson), var(--bt-pink));
    box-shadow: 0 0 18px -2px rgba(255, 0, 85, .7);
    transition: width .6s cubic-bezier(.2, .9, .3, 1);
}

.bt-meter__rest {
    flex: 1;
    height: 100%;
    border-radius: 0 9999px 9999px 0;
    background-image: linear-gradient(to right, #4c1d95, #1e1b4b);
    opacity: .7;
}

/* The white spark where the two beams meet. */
.bt-meter__spark {
    position: absolute;
    right: -.5rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    margin-top: -.5rem;
    border-radius: 9999px;
    background: #fff;
    z-index: 2;
}

/* ------------------------------------------------------- motion */

@keyframes bt-vortex {
    0%   { transform: rotate(0deg);   filter: drop-shadow(0 0 12px rgba(0, 246, 255, .7)); }
    50%  { transform: rotate(180deg); filter: drop-shadow(0 0 24px rgba(255, 0, 85, .9)); }
    100% { transform: rotate(360deg); filter: drop-shadow(0 0 12px rgba(0, 246, 255, .7)); }
}

@keyframes bt-collision {
    0%, 100% { transform: scale(1);   opacity: .85; filter: drop-shadow(0 0 8px #fff); }
    50%      { transform: scale(1.4); opacity: 1;
               filter: drop-shadow(0 0 18px var(--bt-cyan)) drop-shadow(0 0 10px var(--bt-crimson)); }
}

@keyframes bt-radar {
    0%   { transform: scale(.8); opacity: 1; }
    100% { transform: scale(2.6); opacity: 0; }
}

@keyframes bt-shimmer {
    0%   { transform: translateX(-160%) skewX(-20deg); }
    100% { transform: translateX(200%) skewX(-20deg); }
}

.bt-vortex    { animation: bt-vortex 8s linear infinite; }
.bt-collision { animation: bt-collision 1.4s ease-in-out infinite; }
.bt-radar     { animation: bt-radar 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
.bt-shimmer   { animation: bt-shimmer 2.8s cubic-bezier(.4, 0, .2, 1) infinite; }

/*
 * A battle screen that never stops moving is a battle screen nobody can
 * read. Everything decorative stops; the meter keeps its width because
 * that is information, not motion.
 */
/* ------------------------------------------------------ borrowed utils */

/*
 * Utilities the duel card and the lobby header use that the compiled sheet
 * does not define. Fifteen of them, all rendering as nothing: the card kept
 * its .bt-* chrome and lost its borders, its heading sizes and every accent
 * colour on the two sides of the clash.
 *
 * Scoped to `.bt`, so these names still mean nothing anywhere else.
 */
.bt .border-2            { border-width: 2px; }
.bt .bg-current          { background-color: currentColor; }

.bt .text-base           { font-size: 1rem; line-height: 1.5rem; }
.bt .text-xl             { font-size: 1.25rem; line-height: 1.75rem; }
.bt .text-\[17px\]       { font-size: 17px; }

.bt .text-black          { color: #000; }
.bt .text-purple-300     { color: #d8b4fe; }
.bt .text-pink-300\/90   { color: rgba(249, 168, 212, .9); }
.bt .border-cyan-100     { border-color: #cffafe; }
.bt .border-yellow-100   { border-color: #fef9c3; }

.bt .bg-white\/\[0\.03\]     { background-color: rgba(255, 255, 255, .03); }
.bt .bg-white\/\[0\.06\]     { background-color: rgba(255, 255, 255, .06); }
.bt .border-white\/\[0\.07\] { border-color: rgba(255, 255, 255, .07); }
.bt .border-white\/\[0\.08\] { border-color: rgba(255, 255, 255, .08); }

.bt .mb-1\.5             { margin-bottom: .375rem; }
.bt .mt-3\.5             { margin-top: .875rem; }
.bt .mt-4                { margin-top: 1rem; }
.bt .py-space-sm         { padding-top: .5rem; padding-bottom: .5rem; }
.bt .p-0                 { padding: 0; }
.bt .ring-surface-container { --tw-ring-color: #181922; }

@media (prefers-reduced-motion: reduce) {
    .bt-vortex, .bt-collision, .bt-radar, .bt-shimmer {
        animation: none !important;
    }
    .bt-meter__lead { transition: none; }
}