/* Pixel SMP — profilside-temaer + edit/visnings-styling */

/* ===== Tema-presets (sættes på .profile-themed) ===== */
.profile-themed {
    --profile-accent: #a259ff;
    --profile-bg-grad:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--profile-accent) 22%, transparent), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(62,211,90,.10), transparent 50%),
        linear-gradient(180deg, color-mix(in srgb, var(--profile-accent) 6%, transparent), transparent 70%);
    --profile-card-grad: linear-gradient(180deg, rgba(34,18,56,.7), rgba(22,12,37,.7));
    --profile-card-glow: color-mix(in srgb, var(--profile-accent) 35%, transparent);
}
.profile-theme-nether {
    --profile-accent: #ff5c2b;
    --profile-bg-grad:
        radial-gradient(circle at 20% 10%, rgba(255,80,40,.32), transparent 60%),
        radial-gradient(circle at 80% 90%, rgba(120,10,10,.45), transparent 55%),
        linear-gradient(180deg, rgba(60,10,5,.6), transparent 70%);
    --profile-card-grad: linear-gradient(180deg, rgba(60,16,8,.78), rgba(30,8,4,.78));
}
.profile-theme-end {
    --profile-accent: #d6c0ff;
    --profile-bg-grad:
        radial-gradient(circle at 50% 30%, rgba(220,200,255,.22), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(130,80,200,.18), transparent 55%),
        linear-gradient(180deg, rgba(20,12,30,.85), rgba(8,4,16,.95) 70%);
    --profile-card-grad: linear-gradient(180deg, rgba(36,22,55,.85), rgba(20,10,32,.85));
}
.profile-theme-ocean {
    --profile-accent: #5cd1ff;
    --profile-bg-grad:
        radial-gradient(circle at 30% 20%, rgba(60,180,255,.30), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(20,80,180,.30), transparent 55%),
        linear-gradient(180deg, rgba(8,18,40,.8), rgba(4,8,18,.95) 70%);
    --profile-card-grad: linear-gradient(180deg, rgba(12,32,68,.8), rgba(6,16,40,.8));
}
.profile-theme-forest {
    --profile-accent: #3ed35a;
    --profile-bg-grad:
        radial-gradient(circle at 30% 20%, rgba(80,200,90,.25), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(20,120,40,.28), transparent 55%),
        linear-gradient(180deg, rgba(8,30,16,.8), rgba(4,16,8,.95) 70%);
    --profile-card-grad: linear-gradient(180deg, rgba(16,46,24,.8), rgba(8,28,14,.8));
}
.profile-theme-cave {
    --profile-accent: #6cf2d8;
    --profile-bg-grad:
        radial-gradient(circle at 50% 30%, rgba(100,240,220,.18), transparent 60%),
        radial-gradient(circle at 80% 90%, rgba(80,40,160,.25), transparent 55%),
        linear-gradient(180deg, rgba(8,4,16,.95), rgba(0,0,4,.98) 70%);
    --profile-card-grad: linear-gradient(180deg, rgba(20,12,40,.85), rgba(10,4,18,.9));
}
.profile-theme-sky {
    --profile-accent: #ffd23d;
    --profile-bg-grad:
        radial-gradient(circle at 30% 20%, rgba(255,210,80,.25), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(120,180,255,.22), transparent 55%),
        linear-gradient(180deg, rgba(40,32,80,.7), rgba(12,8,24,.9) 70%);
    --profile-card-grad: linear-gradient(180deg, rgba(50,40,90,.75), rgba(20,14,40,.8));
}

/* ===== Banner ===== */
.profile-banner {
    width: 100%;
    aspect-ratio: 16 / 5;
    max-height: 420px;
    background: var(--profile-bg-grad);
    background-size: cover;
    background-position: center;
    border-bottom: 2px solid #000;
    box-shadow: inset 0 -40px 60px rgba(0,0,0,.45);
}
.profile-banner.has-image {
    background-image: var(--profile-banner-image);
    background-blend-mode: normal;
}

/* ===== Tagline & extra info on /@navn ===== */
.profile-tagline {
    color: var(--c-text-dim, #bbb);
    font-style: italic;
    margin: .25rem 0 .75rem;
}
.profile-chips {
    display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .25rem;
}
.profile-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .65rem;
    background: rgba(162,89,255,.12);
    border: 1px solid color-mix(in srgb, var(--profile-accent, #a259ff) 35%, transparent);
    border-radius: .35rem;
    font-size: .82rem;
    color: var(--c-text, #fff);
}
.profile-chip-label { color: var(--c-text-mut, #888); margin-right: .15rem; }

.profile-bio {
    background: var(--profile-card-grad);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--profile-accent, #a259ff) 30%, transparent), 0 4px 0 #000;
    padding: 1.25rem 1.4rem;
    margin: 1.5rem 0;
    white-space: pre-wrap;
    line-height: 1.55;
    color: var(--c-text, #f4f0ff);
}

/* ===== Social links ===== */
.profile-links {
    display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0 1rem;
}
.profile-link {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem .9rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--profile-accent, #a259ff) 18%, transparent), transparent);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--profile-accent, #a259ff) 40%, transparent), 0 3px 0 #000;
    color: var(--c-text, #fff);
    text-decoration: none;
    font-size: .9rem;
    transition: transform .12s ease;
}
.profile-link:hover { transform: translateY(-2px); }
.profile-link svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* ===== Screenshots-galleri ===== */
.profile-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .8rem;
    margin-top: 1rem;
}
.profile-gallery-item {
    position: relative;
    background: #000;
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--profile-accent, #a259ff) 30%, transparent), 0 4px 0 #000;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    cursor: zoom-in;
}
.profile-gallery-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s ease;
}
.profile-gallery-item:hover img { transform: scale(1.04); }
.profile-gallery-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: .5rem .7rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
    color: #fff; font-size: .82rem;
}

/* Lightbox */
.profile-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.92);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
}
.profile-lightbox img {
    max-width: 100%; max-height: 100%;
    box-shadow: 0 0 40px rgba(162,89,255,.4);
}
.profile-lightbox-cap {
    position: absolute; bottom: 1rem; left: 0; right: 0;
    text-align: center; color: #fff; font-size: .95rem;
}

/* ===== Edit-page ===== */
/* Når hele <main> har profile-themed lægger vi en blød tema-baggrund bag siden,
   så det valgte tema/accent reflekteres på hele edit-fladen og /@navn. */
main.profile-themed {
    position: relative;
    background:
        var(--profile-bg-grad),
        linear-gradient(180deg, rgba(8,4,16,.0), rgba(8,4,16,.0));
    background-attachment: fixed, scroll;
    transition: background-color .25s ease;
}
main.profile-themed h1,
main.profile-themed .eyebrow,
main.profile-themed .player-name {
    color: color-mix(in srgb, var(--profile-accent, #a259ff) 80%, #fff);
}
main.profile-themed a:not(.btn):not(.profile-link) {
    color: color-mix(in srgb, var(--profile-accent, #a259ff) 80%, #fff);
}
main.profile-themed .btn-primary {
    background: var(--profile-accent, #a259ff);
    border-color: color-mix(in srgb, var(--profile-accent, #a259ff) 60%, #000);
    color: #1a0a2a;
    text-shadow: none;
}
main.profile-themed .btn-primary:hover {
    filter: brightness(1.1);
}
main.profile-themed .profile-edit-section,
main.profile-themed .card,
main.profile-themed .stat-card {
    background: var(--profile-card-grad, rgba(20,12,32,.78));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--profile-accent, #a259ff) 25%, transparent),
        0 4px 0 #000;
}
main.profile-themed .stat-value,
main.profile-themed .stat-card .stat-value {
    color: var(--profile-accent, #a259ff);
}

.profile-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .profile-edit-grid { grid-template-columns: 1fr; }
    .profile-edit-grid .profile-edit-side { position: static; }
}
.profile-edit-side {
    position: sticky; top: 1rem; align-self: start;
}
.profile-edit-section {
    background: rgba(20,12,32,.75);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162,89,255,.18), 0 4px 0 #000;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
}
.profile-edit-section h2 {
    margin: 0 0 .25rem;
    font-family: 'Minecraft', sans-serif;
    font-size: 1.15rem;
    color: #fff;
    display: flex; align-items: center; gap: .5rem;
}
.profile-edit-section h2::before {
    content: '';
    width: 6px; height: 18px;
    background: linear-gradient(180deg, var(--profile-accent, #a259ff), color-mix(in srgb, var(--profile-accent, #a259ff) 50%, #000));
    border: 1px solid #000;
}
.profile-edit-section .help {
    color: var(--c-text-mut, #999);
    font-size: .82rem;
    margin: 0 0 .75rem;
}
.profile-edit-section label {
    display: block;
    font-size: .82rem;
    color: var(--c-text-dim, #bbb);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: .8rem 0 .35rem;
}
.profile-edit-section input[type=text],
.profile-edit-section input[type=url],
.profile-edit-section textarea {
    width: 100%;
    padding: .55rem .75rem;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(162,89,255,.3);
    border-radius: .25rem;
    color: #fff;
    font-family: inherit;
    font-size: .95rem;
    box-sizing: border-box;
}
.profile-edit-section textarea { min-height: 110px; resize: vertical; }
.profile-edit-section input:focus,
.profile-edit-section textarea:focus {
    outline: none;
    border-color: var(--profile-accent, #a259ff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--profile-accent, #a259ff) 30%, transparent);
}
.profile-edit-counter {
    font-size: .72rem;
    color: var(--c-text-mut, #888);
    text-align: right;
    margin-top: .25rem;
}

/* Theme picker */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .6rem;
    margin-top: .5rem;
}
.theme-card {
    cursor: pointer;
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162,89,255,.2), 0 3px 0 #000;
    padding: .6rem;
    text-align: center;
    color: #fff;
    font-size: .85rem;
    transition: transform .12s ease;
    background: var(--theme-preview-bg, #221234);
    position: relative;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card.is-selected {
    box-shadow: inset 0 0 0 2px var(--profile-accent, #a259ff), 0 4px 0 #000, 0 0 12px color-mix(in srgb, var(--profile-accent, #a259ff) 50%, transparent);
}
.theme-swatch {
    height: 36px; border: 1px solid rgba(0,0,0,.6); margin-bottom: .35rem;
}

/* Accent-farve picker */
.accent-grid {
    display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem;
}
.accent-swatch {
    width: 32px; height: 32px;
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
    cursor: pointer;
    position: relative;
}
.accent-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.accent-swatch.is-selected {
    box-shadow: inset 0 0 0 2px #fff, 0 0 8px rgba(255,255,255,.4);
}

/* Banner upload */
.banner-preview {
    width: 100%; aspect-ratio: 16 / 5; max-height: 200px;
    background: rgba(0,0,0,.5) center/cover no-repeat;
    border: 2px dashed rgba(162,89,255,.4);
    display: flex; align-items: center; justify-content: center;
    color: var(--c-text-mut, #888);
    font-size: .85rem;
    margin-top: .5rem;
}
.banner-preview.has-image { border-style: solid; }

/* Screenshots */
.shots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .65rem;
    margin-top: .75rem;
}
.shot-tile {
    background: #000;
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(162,89,255,.25), 0 3px 0 #000;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
}
.shot-tile img { width: 100%; height: 100%; object-fit: cover; }
.shot-tile .shot-actions {
    position: absolute; top: .25rem; right: .25rem;
    display: flex; gap: .25rem;
}
.shot-tile .shot-actions button {
    background: rgba(0,0,0,.75); color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    cursor: pointer; padding: .25rem .45rem; font-size: .75rem;
    border-radius: .2rem;
}
.shot-tile .shot-cap-input {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,.65); color: #fff;
    border: 0; border-top: 1px solid rgba(255,255,255,.15);
    padding: .35rem .5rem; font-size: .78rem; box-sizing: border-box;
}
.shot-tile.is-uploading::after {
    content: '⟳'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.6); color: #fff; font-size: 2rem;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.shot-add {
    background: rgba(162,89,255,.08);
    border: 2px dashed rgba(162,89,255,.5);
    aspect-ratio: 16 / 9;
    display: flex; align-items: center; justify-content: center;
    color: var(--profile-accent, #a259ff);
    cursor: pointer;
    font-size: .9rem;
    text-align: center;
    padding: .5rem;
}
.shot-add:hover { background: rgba(162,89,255,.15); }
.shot-add input { display: none; }

/* Status / save bar */
.profile-savebar {
    position: sticky; bottom: 1rem;
    display: flex; gap: .75rem; align-items: center;
    background: rgba(11,8,20,.95);
    border: 2px solid #000;
    box-shadow: 0 0 0 1px rgba(162,89,255,.3), 0 6px 24px rgba(0,0,0,.5);
    padding: .75rem 1rem;
    margin-top: 1rem;
}
.profile-status { font-size: .85rem; color: var(--c-text-mut, #888); margin-right: auto; }
.profile-status.is-success { color: #4ade80; }
.profile-status.is-error   { color: #ff6c6c; }

/* Links editor */
.link-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: .5rem;
    margin-top: .5rem;
    align-items: center;
}
@media (max-width: 600px) {
    .link-row { grid-template-columns: 1fr; }
}
.link-row select,
.link-row input {
    padding: .45rem .6rem;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(162,89,255,.3);
    border-radius: .25rem;
    color: #fff;
    font-family: inherit;
}
.link-row .link-remove {
    background: rgba(255,60,60,.15);
    border: 1px solid rgba(255,60,60,.4);
    color: #ff9c9c;
    cursor: pointer;
    padding: .35rem .65rem;
    border-radius: .25rem;
}