/* Whisperwood.app site styles. Minimal v1 baseline — enough to look intentional. */

* { box-sizing: border-box; }

/* html + body share the Grove dark moss so first-paint and any flash before the .ww
   wrapper's background paints over them looks intentional. Matches whisperwood.css's
   --bg token for the midday Grove baseline. */
html, body {
    background: #131a14;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #dbe2cd;
    line-height: 1.5;
}

a { color: #d9a05a; text-decoration: none; }
a:hover { text-decoration: underline; }

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.nav-tabs {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    background: #2a2a36;
    border-bottom: 1px solid #3a3a48;
}

.nav-tabs .brand {
    font-weight: bold;
    font-size: 18px;
    color: #fff;
}

.nav-tabs .tabs {
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-tabs .tabs a,
.nav-tabs .tabs .tab {
    color: #c4c4cc;
    padding: 6px 12px;
    border-radius: 4px;
}

.nav-tabs .tabs a:hover,
.nav-tabs .tabs .tab:hover {
    background: #3a3a48;
    color: #fff;
    text-decoration: none;
}

/* Blazor's NavLink applies this class when the route matches. */
.nav-tabs .tabs .tab.active {
    background: #5865F2;
    color: #fff;
}

.nav-tabs .user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Discord-style round avatar in the top nav.
   - Wrapper with overflow:hidden + border-radius:50% defines the visible region.
   - clip-path:circle(50%) is a second guarantee for browsers that anti-alias the
     border-radius edge inconsistently.
   - Inner <img> fills 100% with object-fit:cover so non-square sources still circle. */
.nav-tabs .user-avatar {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    overflow: hidden;
    clip-path: circle(50%);
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 0;
    aspect-ratio: 1;
}

.nav-tabs .user-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
}

.nav-tabs .user-name {
    color: #e8e8ec;
}

/* Native <select> living in the top nav, just left of the avatar. */
.nav-tabs .nav-guild-select {
    background: #2a2a36;
    color: #e8e8ec;
    border: 1px solid #3a3a48;
    padding: 4px 8px;
    border-radius: 4px;
    font: inherit;
    font-size: 14px;
    max-width: 200px;
}

.nav-tabs .nav-guild-select:focus {
    outline: none;
    border-color: #5865F2;
}

.nav-tabs .login,
.btn {
    display: inline-block;
    background: #5865F2;
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}

.nav-tabs .login:hover,
.btn:hover {
    background: #4752c4;
    text-decoration: none;
}

.hero {
    max-width: 720px;
    margin: 64px auto 32px;
    text-align: center;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 16px;
}

.hero .lede {
    color: #c4c4cc;
    font-size: 18px;
    margin-bottom: 24px;
}

.muted {
    color: #8a8a98;
}

/* Tile grid on the landing page — each tile links to a major route. */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    max-width: 960px;
    margin: 0 auto 48px;
}

.tile {
    display: block;
    background: #2a2a36;
    border: 1px solid #3a3a48;
    border-radius: 8px;
    padding: 20px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

.tile:hover {
    border-color: #5865F2;
    transform: translateY(-2px);
    text-decoration: none;
}

.tile h2 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #fff;
}

.tile p {
    margin: 0;
    color: #c4c4cc;
    font-size: 14px;
}

/* Game page wrapper. The iframe fills the viewport below the top nav so the game has
   as much room as possible while keeping the nav visible. */
.game-shell {
    width: 100%;
    height: calc(100vh - 64px); /* approx nav-tabs height */
    margin: -32px -32px;        /* cancel .content padding so the iframe is flush */
    padding: 0;
}

.game-shell .content & {
    /* no-op nesting tag in case of build tool whitespace differences */
}

.game-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

.submission-photo {
    max-width: 320px;
    max-height: 480px;
    border: 1px solid #3a3a48;
    border-radius: 8px;
    background: #000;
}

.card-preview-wrapper {
    margin: 16px 0;
    text-align: center;
}

.card-preview {
    max-width: 360px;
    max-height: 500px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Live card builder. The frame keeps the card's aspect ratio (825 × 1125) and the photo
   window inside is positioned in percentages so it scales with the frame. Children are
   absolutely positioned with the same percent offsets the compositor uses on the server,
   so what you see on screen approximates what the baked PNG will produce. */
.card-builder {
    /* Half the native 825×1125 size — comfortable on-screen size without dominating
       the viewport. Shrinks proportionally on narrow viewports. */
    max-width: 412px;
    margin: 16px auto;
    user-select: none;
}

.card-builder-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 825 / 1125;
    /* Matches CardCompositorService.CardCornerRadius so the browser preview and the saved
       PNG agree on the corner curve. */
    border-radius: 24px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Photo window fills the card frame. The image inside is fit-to-contain on initial load
   (whole image visible) and the user drags/zooms to position. overflow:hidden clips the
   image to the card so the card is the only visible element. */
.card-builder-photo-window {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: grab;
    background: rgba(0, 0, 0, 0.25);
    touch-action: none;
}

.card-builder-photo-window:active {
    cursor: grabbing;
}

/* Note: the photo img element gets its inline styles directly in the Razor markup. No
   class-based size rules — the img renders at natural size and the JS transform handles
   positioning and zoom. */

.card-builder-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    text-align: center;
    padding: 16px;
    pointer-events: none;
}

/* Server-rendered chrome overlay: frame + name + stars + element + stats + description,
   with the photo region punched transparent. Sits on top of the photo window so events
   pass through (pointer-events:none) and the user can still drag the photo underneath. */
.card-builder-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}

.card-builder-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.card-builder-controls button {
    background: #3a3a48;
    color: #fff;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-builder-controls button:hover:not(:disabled) {
    background: #5865F2;
}

.card-builder-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.card-builder-hint {
    text-align: center;
    color: #8a8a98;
    font-size: 13px;
    margin-top: 4px;
}

@media (max-width: 700px) {
    .content {
        padding: 16px;
    }

    .nav-tabs {
        flex-wrap: wrap;
        gap: 12px;
        padding: 8px 12px;
    }

    .nav-tabs .tabs {
        flex-wrap: wrap;
        gap: 8px;
    }

    .nav-tabs .user {
        order: -1;
        width: 100%;
        justify-content: flex-end;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

.guild-picker {
    margin-bottom: 24px;
}

.guild-picker select {
    background: #2a2a36;
    color: #e8e8ec;
    border: 1px solid #3a3a48;
    padding: 8px 12px;
    border-radius: 4px;
    font: inherit;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.card-tile {
    background: #2a2a36;
    border: 1px solid #3a3a48;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.card-tile img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.card-tile .name {
    font-weight: bold;
    margin-top: 8px;
}

.card-tile .count {
    color: #a78bfa;
    font-size: 14px;
}

.empty-state {
    text-align: center;
    color: #8a8a98;
    padding: 48px 24px;
}

.form-row {
    margin-bottom: 16px;
}

.form-row label {
    display: block;
    margin-bottom: 4px;
    color: #c4c4cc;
}

.form-row input[type="text"],
.form-row input[type="number"],
.form-row textarea,
.form-row select {
    background: #2a2a36;
    color: #e8e8ec;
    border: 1px solid #3a3a48;
    padding: 8px 12px;
    border-radius: 4px;
    font: inherit;
    width: 100%;
}

.form-row textarea {
    min-height: 80px;
    resize: vertical;
}

.error {
    color: #f87171;
}

.success {
    color: #4ade80;
}

.stat-picker {
    display: flex;
    gap: 12px;
    align-items: center;
}

.budget-display {
    font-family: monospace;
    color: #a78bfa;
}

/* ── Background color swatch picker ─────────────────────────────────────── */

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 2px solid #3a3a48;
    padding: 0;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.color-swatch:hover {
    transform: scale(1.05);
}

/* "Halo" the selected swatch: inner shadow matches the page bg so the indicator ring
   reads cleanly regardless of the swatch color underneath. */
.color-swatch.selected {
    border-color: #5865F2;
    box-shadow: 0 0 0 2px #1a1a22, 0 0 0 4px #5865F2;
}

/* Custom-color picker: a <label> with a conic-gradient background, an icon overlay, and
   a hidden <input type="color"> that catches clicks and opens the browser's native
   picker. The icon (a pencil-and-line) signals "custom value" so it doesn't read as just
   another preset swatch. */
.color-swatch-wheel {
    position: relative;
    background:
        conic-gradient(from 180deg,
            #ff0000, #ffaa00, #ffff00, #00ff00,
            #00ffff, #0000ff, #aa00ff, #ff00ff, #ff0000);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.color-swatch-wheel input[type="color"] {
    /* Hidden but clickable — the label's click forwards to the input via standard form
       behavior. opacity:0 keeps it interactable (display:none would suppress the click). */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
}

.color-swatch-wheel svg {
    /* Pencil icon overlaid on the gradient. Drop-shadow keeps it legible against any of
       the rainbow colors below. pointer-events:none lets clicks fall through to the input. */
    color: #fff;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
    pointer-events: none;
    position: relative;
}

/* Eyedropper button — flat dark surface with a stroked icon. */
.color-swatch-eyedropper {
    background: #2a2a36;
    color: #e8e8ec;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.color-swatch-eyedropper:hover {
    background: #3a3a48;
    color: #fff;
}

/* Photo-window styling while the canvas-fallback eyedropper is waiting for the user's
   click. A faint accent ring inside the photo region signals "click anywhere here to
   pick a pixel." The crosshair cursor is set inline by the JS to avoid CSS specificity
   battles with .card-builder-photo-window's cursor:grab. */
.card-builder-photo-window.picking-color {
    outline: 2px dashed #5865F2;
    outline-offset: -2px;
}

/* ── Admin pages ───────────────────────────────────────────────────────────── */

.admin-page-header {
    margin-bottom: 24px;
}

.admin-page-header h1 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 4px;
}

/* Pending-count pill next to the page title. */
.badge-count {
    display: inline-block;
    background: #5865F2;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
}

/* Queue page: submission tiles. Wider than the catalog tiles so the thumbnail
   reads at a usable size and the metadata has room to breathe. */
.submission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.submission-tile {
    display: flex;
    flex-direction: column;
    background: #2a2a36;
    border: 1px solid #3a3a48;
    border-radius: 8px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

.submission-tile:hover {
    border-color: #5865F2;
    transform: translateY(-2px);
    text-decoration: none;
}

.submission-thumb {
    width: 100%;
    aspect-ratio: 825 / 1125;
    background: #1a1a22;
    overflow: hidden;
}

.submission-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.submission-meta {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.submission-name {
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.submission-subline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.submission-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.rarity-stars {
    color: gold;
    letter-spacing: 2px;
}

/* EditCard / EditTemplate: two-column layout with sticky preview on the left,
   form on the right. Collapses to a single column on narrow viewports. */
.admin-edit-layout {
    display: grid;
    grid-template-columns: minmax(280px, 412px) 1fr;
    gap: 32px;
    align-items: start;
}

.admin-edit-preview {
    /* Sticky so the preview stays visible as the admin scrolls the form. */
    position: sticky;
    top: 24px;
}

.admin-edit-preview .card-builder {
    margin: 0;
}

.admin-edit-form {
    min-width: 0;  /* allow form children to shrink under grid */
}

.admin-edit-form h2 {
    margin-top: 0;
    margin-bottom: 16px;
}

.submission-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

/* "Edited" pill on field labels in EditCard, indicating the admin changed the
   value vs. what the submitter sent. */
.diff-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 1px 8px;
    border-radius: 999px;
    cursor: help;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Destructive-action section: visually separated from the approval flow so an
   admin doesn't misclick. Red border, slightly muted background. */
.danger-zone {
    margin-top: 32px;
    padding: 16px 20px;
    border: 1px solid rgba(248, 113, 113, 0.4);
    background: rgba(248, 113, 113, 0.05);
    border-radius: 8px;
}

.danger-zone h2 {
    margin-top: 0;
    color: #f87171;
    font-size: 18px;
}

.btn-danger {
    background: #b91c1c;
}

.btn-danger:hover {
    background: #991b1b;
}

@media (max-width: 900px) {
    .admin-edit-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .admin-edit-preview {
        position: static;
    }
}