/* Koło Jelita — panel czołowy lampowego wzmacniacza:
   czarny tolex, mosiądz, chromowe pokrętło, czerwona lampka kontrolna. */

:root {
    --tolex:      #14100D;
    --tolex-hi:   #1F1913;
    --panel:      #191410;
    --panel-line: #2E251C;
    --brass:      #C9A227;
    --brass-hi:   #F2DC90;
    --brass-dim:  #8C6F1C;
    --jewel:      #E0391F;
    --bone:       #E9E2CE;
    --ink:        #16130F;
    --dim:        #9C907B;

    --font-display: 'Anton', 'Haettenschweiler', 'Impact', sans-serif;
    --font-ui: 'Barlow', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font-ui);
    color: var(--bone);
    background-color: var(--tolex);
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -10%, rgba(201, 162, 39, .10), transparent 60%),
        repeating-linear-gradient(45deg,  rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, rgba(0,0,0,.30) 0 1px, transparent 1px 4px);
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.wordmark {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass-hi);
}

.jewel {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #FF9A7A, var(--jewel) 45%, #6E1206 100%);
    box-shadow: 0 0 8px rgba(224, 57, 31, .55), inset 0 0 3px rgba(0,0,0,.6);
    flex: none;
}

.jewel.lit {
    animation: jewel-pulse .55s ease-in-out infinite alternate;
}

@keyframes jewel-pulse {
    from { box-shadow: 0 0 8px  rgba(224, 57, 31, .5),  inset 0 0 3px rgba(0,0,0,.6); }
    to   { box-shadow: 0 0 26px rgba(255, 90, 45, .95), inset 0 0 3px rgba(0,0,0,.4); }
}

/* ── Bramka hasła ─────────────────────────────────────────────────── */

.gate {
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.gate-panel {
    width: min(28rem, 100%);
    padding: 2rem 1.75rem 1.75rem;
    background: linear-gradient(180deg, var(--tolex-hi), var(--panel));
    border: 1px solid var(--panel-line);
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
}

.gate-lead {
    margin: 1rem 0 1.75rem;
    color: var(--dim);
    font-size: .95rem;
}

.field { display: block; }

.field-label {
    display: block;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: .45rem;
}

input[type="password"], input[type="text"] {
    width: 100%;
    padding: .7rem .8rem;
    font: 400 1rem/1.3 var(--font-ui);
    color: var(--bone);
    background: #0D0A08;
    border: 1px solid var(--panel-line);
    border-radius: 3px;
}

input::placeholder { color: #6A6151; }

.gate-error {
    margin: .8rem 0 0;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: #FF8163;
}

.btn-primary {
    margin-top: 1.25rem;
    width: 100%;
    padding: .8rem;
    font: 400 1.05rem/1 var(--font-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, var(--brass-dim));
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-primary:active { transform: translateY(1px); }

/* ── Układ ────────────────────────────────────────────────────────── */

.rig {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem .25rem;
    border-bottom: 1px solid var(--panel-line);
}

.bar-link {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dim);
    text-decoration: none;
}

.bar-link:hover { color: var(--brass); }

.deck {
    display: grid;
    gap: 2.5rem;
    padding-top: 2rem;
}

@media (min-width: 62rem) {
    .deck {
        grid-template-columns: minmax(0, 1fr) 22rem;
        gap: 3rem;
        align-items: start;
    }
}

/* ── Pokrętło ─────────────────────────────────────────────────────── */

.stage { display: grid; justify-items: center; }

.wheel-wrap {
    position: relative;
    width: min(100%, 26rem);
    aspect-ratio: 1;
}

/* Chromowy pierścień z radełkowaniem — obudowa, nie kręci się. */
.bezel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 5.5%;
    background:
        conic-gradient(from 210deg,
            rgba(255,255,255,.42), rgba(255,255,255,0) 18%,
            rgba(0,0,0,.45) 34%, rgba(255,255,255,.30) 52%,
            rgba(0,0,0,.40) 72%, rgba(255,255,255,.22) 88%, rgba(255,255,255,.42)),
        repeating-conic-gradient(from 0deg,
            #7C7A78 0deg 1.1deg, #3A3836 1.1deg 2.2deg);
    box-shadow:
        0 18px 44px rgba(0,0,0,.65),
        inset 0 0 0 1px rgba(255,255,255,.14),
        inset 0 -6px 14px rgba(0,0,0,.5);
}

.dial-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #0C0A08;
    box-shadow: inset 0 0 0 3px #14120F, inset 0 8px 24px rgba(0,0,0,.75);
}

.wheel { display: block; width: 100%; height: 100%; }

.seg-label {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: .01em;
}

.seg-number {
    font-family: var(--font-mono);
    font-weight: 600;
}

.wheel-hub      { fill: #17140F; }
.wheel-hub-ring { fill: none; stroke: rgba(242, 220, 144, .35); stroke-width: 1.5; }
.wheel-hub-dot  { fill: var(--brass); }

/* Wskaźnik pozycji — nacięcie na godzinie 12. */
.marker {
    position: absolute;
    top: -2%;
    left: 50%;
    width: 1.7rem;
    height: 2.4rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--bone), #9C947F);
    clip-path: polygon(50% 100%, 0 22%, 22% 0, 78% 0, 100% 22%);
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.7));
}

.btn-spin {
    margin-top: 2rem;
    padding: 1rem 3.5rem;
    font: 400 1.6rem/1 var(--font-display);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink);
    background: linear-gradient(180deg, var(--brass-hi), var(--brass) 52%, var(--brass-dim));
    border: none;
    border-radius: 3px;
    box-shadow: 0 6px 0 #4A3A0C, 0 12px 24px rgba(0,0,0,.5);
    cursor: pointer;
    transition: transform .06s ease, box-shadow .06s ease;
}

.btn-spin:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #4A3A0C, 0 6px 14px rgba(0,0,0,.5);
}

.btn-spin:disabled {
    color: #6A6151;
    background: linear-gradient(180deg, #3A342A, #262117);
    box-shadow: 0 6px 0 #1A160F;
    cursor: not-allowed;
}

.stage-hint {
    margin: 1rem 0 0;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--dim);
    text-align: center;
}

/* ── Wynik: kartka z setlisty ─────────────────────────────────────── */

.result {
    margin-top: 2rem;
    width: min(100%, 30rem);
    padding: 1.25rem 1.5rem 1.5rem;
    background: linear-gradient(180deg, #F3EDDC, var(--bone));
    color: var(--ink);
    border-radius: 2px;
    box-shadow: 0 14px 34px rgba(0,0,0,.55);
    animation: result-in .45s cubic-bezier(.22,1,.36,1) both;
}

@keyframes result-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.result-eyebrow {
    margin: 0 0 .35rem;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #7A6F58;
}

.result-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 8vw, 2.9rem);
    line-height: 1.02;
    letter-spacing: .01em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.result-note {
    margin: .7rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid rgba(22,19,15,.18);
    font-family: var(--font-mono);
    font-size: .85rem;
    color: #4A4438;
}

.result-note:empty { display: none; }

/* ── Repertuar ────────────────────────────────────────────────────── */

.repertoire {
    padding: 1.25rem;
    background: linear-gradient(180deg, var(--tolex-hi), var(--panel));
    border: 1px solid var(--panel-line);
    border-radius: 4px;
}

.rep-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--panel-line);
}

.rep-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass-hi);
}

.rep-count {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--dim);
}

.songs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.song {
    display: grid;
    grid-template-columns: 2.1rem 1.6rem 1fr auto;
    align-items: center;
    gap: .55rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(46,37,28,.6);
}

.song.off .song-title { color: #6E6555; }
.song.off .song-note  { color: #57503F; }

.song-index {
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--brass-dim);
    text-align: right;
}

.song-main { min-width: 0; }

.song-title {
    display: block;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.song-note {
    display: block;
    margin-top: .15rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--dim);
    overflow-wrap: anywhere;
}

.song-note:empty { display: none; }

.song-tools {
    display: flex;
    align-items: center;
    gap: .15rem;
}

.icon-btn {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    font-size: .95rem;
    color: var(--dim);
    background: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.icon-btn:hover { color: var(--brass-hi); background: rgba(201,162,39,.10); }

/* Przełącznik „w puli” */
.pool {
    position: relative;
    width: 2.1rem;
    height: 1.15rem;
    flex: none;
}

.pool input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pool-track {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background: #0D0A08;
    box-shadow: inset 0 0 0 1px var(--panel-line);
    transition: background .15s ease;
}

.pool-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: #5A5346;
    transition: transform .15s ease, background .15s ease;
}

.pool input:checked + .pool-track { background: rgba(201,162,39,.22); }

.pool input:checked + .pool-track::after {
    transform: translateX(.95rem);
    background: var(--brass-hi);
}

.pool input:focus-visible + .pool-track {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

/* Edycja i potwierdzenie usunięcia rozwijają się w wierszu */
.song-edit {
    grid-column: 1 / -1;
    display: grid;
    gap: .5rem;
    padding: .25rem 0 .5rem;
}

.song-edit-actions,
.song-confirm {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.song-confirm {
    grid-column: 1 / -1;
    padding: .25rem 0 .5rem;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--dim);
}

.btn-ghost, .btn-danger, .btn-save {
    padding: .4rem .8rem;
    font: 500 .82rem/1 var(--font-ui);
    border-radius: 3px;
    border: 1px solid var(--panel-line);
    background: none;
    color: var(--bone);
    cursor: pointer;
}

.btn-save   { background: var(--brass); border-color: var(--brass); color: var(--ink); font-weight: 600; }
.btn-danger { background: #7E1D0F; border-color: #7E1D0F; }
.btn-ghost:hover { border-color: var(--brass-dim); }

.rep-empty {
    padding: 1.25rem 0 .5rem;
    color: var(--dim);
    font-size: .92rem;
}

.add {
    display: grid;
    gap: .5rem;
    padding-top: 1rem;
}

.btn-add {
    padding: .65rem;
    font: 500 .95rem/1 var(--font-ui);
    color: var(--brass-hi);
    background: none;
    border: 1px dashed var(--brass-dim);
    border-radius: 3px;
    cursor: pointer;
}

.btn-add:hover { background: rgba(201,162,39,.08); }

.rep-error {
    margin: .75rem 0 0;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: #FF8163;
}

@media (prefers-reduced-motion: reduce) {
    .jewel.lit { animation: none; }
    .result { animation-duration: .01ms; }
}

.bar-tools {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.bar-sound {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    font-size: .95rem;
    line-height: 1;
    background: none;
    border: 1px solid var(--panel-line);
    border-radius: 3px;
    cursor: pointer;
    filter: grayscale(.4);
}

.bar-sound:hover { border-color: var(--brass-dim); filter: none; }