/* ========================================
   DRAW RUNES — one panel, minimal chrome
   Sits on the site's own dark ground; only the sheet and its controls
   are styled here, using the site's existing rune colours.
   ======================================== */

:root {
    --dc-surface:    rgba(255, 255, 255, 0.035);
    --dc-surface-hi: rgba(255, 255, 255, 0.075);
    --dc-line:       rgba(255, 255, 255, 0.10);
    --dc-line-hi:    rgba(91, 155, 213, 0.42);
    --dc-ink:        #e8eaf0;
    --dc-ink-soft:   #9aa1ad;
    --dc-paper:      #14141f;   /* the sheet's own solid colour, used to knock
                                   holes in linework behind labels */
    --dc-rule:       rgba(255, 255, 255, 0.10);
    --dc-form:       #a78bfa;
    --dc-essence:    #7bc9a6;
    --dc-additive:   #60a5fa;
    --dc-select:     #d6dbe4;
    --dc-danger:     #f87171;
}

/* ── the single panel ────────────────────────────────────────────────── */
.dc-panel {
    max-width: 860px;
    margin: 0 auto;
    border: 1px solid var(--dc-line);
    border-radius: 16px;
    background: rgba(13, 13, 20, 0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}

.dc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--dc-line);
}

.dc-title {
    font-family: 'Lora', serif;
    font-size: 14px;
    color: var(--dc-ink);
    letter-spacing: 0.02em;
}

.dc-head-spacer { flex: 1 1 auto; }

.dc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid var(--dc-line);
    border-radius: 9px;
    color: var(--dc-ink-soft);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.dc-icon-btn:hover {
    background: var(--dc-surface-hi);
    color: #fff;
    border-color: var(--dc-line-hi);
}

.dc-icon-btn.active {
    background: rgba(91, 155, 213, 0.18);
    color: #fff;
    border-color: var(--dc-line-hi);
}

/* ── body: rail + sheet ──────────────────────────────────────────────── */
.dc-body {
    display: grid;
    grid-template-columns: 168px 1fr;
    height: 400px;
}

.dc-rail {
    border-right: 1px solid var(--dc-line);
    padding: 10px 2px 6px;
    display: flex;
    flex-direction: column;
    min-height: 0;      /* lets the legend scroll instead of stretching */
}

.dc-search {
    margin: 0 10px 8px;
    padding: 7px 10px;
    font-family: 'Lora', serif;
    font-size: 12.5px;
    outline: none;
}

.dc-legend {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 0;
    min-height: 0;
    padding: 0 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.14) transparent;
}

.dc-legend::-webkit-scrollbar { width: 6px; }
.dc-legend::-webkit-scrollbar-track { background: transparent; }
.dc-legend::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.13);
    border-radius: 3px;
}

.dc-group {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 13px 8px 5px;
    font-family: 'Lora', serif;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dc-group[data-type="form"]     .dc-group-label { color: var(--dc-form); }
.dc-group[data-type="essence"]  .dc-group-label { color: var(--dc-essence); }
.dc-group[data-type="additive"] .dc-group-label { color: var(--dc-additive); }
.dc-group-count { color: var(--dc-ink-soft); font-size: 9.5px; letter-spacing: 0; }

.dc-rune {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px;
    border-radius: 7px;
    cursor: grab;
    user-select: none;
    font-family: 'Lora', serif;
    font-size: 12.5px;
    color: var(--dc-ink);
    transition: background 0.15s ease;
}

.dc-rune:hover { background: var(--dc-surface-hi); }
.dc-rune.dc-dragging { opacity: 0.4; cursor: grabbing; }
.dc-rune-name { flex: 1; }
.dc-rune-tier { color: var(--dc-ink-soft); font-size: 10px; }
.dc-custom .dc-rune-name::after {
    content: '✦';
    color: var(--dc-additive);
    font-size: 8px;
    margin-left: 5px;
    vertical-align: super;
}

/* legend marks: Form runes show their shape, everything else its glyph */
.dc-glyph {
    flex: 0 0 auto;
    width: 15px;
    text-align: center;
    font-family: 'Segoe UI Historic', 'Segoe UI Symbol', 'Noto Sans Runic', serif;
    font-size: 14px;
    line-height: 1;
}

.dc-rune[data-type="essence"]  .dc-glyph { color: var(--dc-essence); }
.dc-rune[data-type="additive"] .dc-glyph { color: var(--dc-additive); }

.dc-mark {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border: 1.4px solid var(--dc-form);
    background: transparent;
}

.dc-mark-circle   { border-radius: 50%; }
.dc-mark-square   { border-radius: 1px; }
.dc-mark-hexagon  { clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.dc-mark-octagon  { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
.dc-mark-triangle {
    width: 0; height: 0;
    border: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 11px solid var(--dc-form);
}

.dc-legend-empty {
    padding: 18px 12px;
    color: var(--dc-ink-soft);
    font-family: 'Lora', serif;
    font-size: 12px;
    text-align: center;
}

/* ── the sheet ───────────────────────────────────────────────────────── */
.dc-sheet {
    position: relative;
    overflow: hidden;
    /* Opaque on purpose: the page's drifting orbs read straight through a
       translucent sheet and fight the circles drawn on it. */
    background:
        radial-gradient(120% 100% at 50% 0%,
            rgba(30, 30, 44, 0.97) 0%,
            rgba(16, 16, 25, 0.99) 100%),
        #10101a;
}

#drawCanvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: pan-y;   /* vertical page scroll stays with the page */
    cursor: crosshair;
}

/* ── settings screen ─────────────────────────────────────────────────── */
.dc-screen {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 16, 0.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 22px;
    overflow-y: auto;
    z-index: 4;
    animation: dcFade 0.16s ease;
}

.dc-screen[hidden] { display: none; }

@keyframes dcFade { from { opacity: 0; } to { opacity: 1; } }

.dc-screen-inner {
    width: 100%;
    max-width: 380px;
    background: rgba(20, 20, 30, 0.92);
    border: 1px solid var(--dc-line);
    border-radius: 14px;
    padding: 6px 16px 16px;
}

.dc-screen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--dc-line);
    font-family: 'Lora', serif;
    font-size: 13px;
    color: var(--dc-ink);
    letter-spacing: 0.04em;
}

.dc-set-group { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.dc-set-group:last-child { border-bottom: none; }

.dc-set-label {
    display: block;
    font-family: 'Lora', serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dc-ink-soft);
    margin-bottom: 9px;
}

.dc-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: 10px;
}

.dc-seg-btn {
    flex: 1;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--dc-ink-soft);
    font-family: 'Lora', serif;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.dc-seg-btn:hover { color: var(--dc-ink); background: var(--dc-surface); }
.dc-seg-btn.active { background: rgba(91, 155, 213, 0.18); color: #fff; }

.dc-switch {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-family: 'Lora', serif;
    font-size: 12.5px;
    color: var(--dc-ink);
    cursor: pointer;
}

.dc-switch input { accent-color: var(--dc-additive); cursor: pointer; }

.dc-set-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.dc-btn {
    padding: 6px 12px;
    font-family: 'Lora', serif;
    font-size: 12px;
    cursor: pointer;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: 9px;
    color: var(--dc-ink);
    transition: background 0.16s ease, border-color 0.16s ease;
}

.dc-btn:hover { background: var(--dc-surface-hi); border-color: var(--dc-line-hi); }

/* ── foot: reading, cast, result ─────────────────────────────────────── */
.dc-foot {
    padding: 14px 18px 16px;
    border-top: 1px solid var(--dc-line);
    text-align: center;
}

.dc-reading {
    font-family: 'Lora', serif;
    font-size: 17px;
    color: var(--dc-ink);
    letter-spacing: 0.02em;
    word-break: break-word;
    min-height: 26px;
}

.dc-reading-empty { color: var(--dc-ink-soft); }

.dc-note {
    font-family: 'Lora', serif;
    font-size: 12px;
    color: var(--dc-ink-soft);
    min-height: 17px;
    margin: 5px 0 12px;
}

.dc-note-error { color: var(--dc-danger); }

#drawCastBtn {
    min-width: 210px;
    padding: 10px 26px;
    font-family: 'Lora', serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #5b9bd5 0%, #6fa8bd 50%, #7bc9a6 100%);
    border-radius: 12px;
    letter-spacing: 0.12em;
}

#drawCastBtn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none !important; }

.dc-result:empty { display: none; }
.dc-result { margin-top: 18px; }
.dc-result .result-table-wrapper { margin: 0; }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dc-body { grid-template-columns: 1fr; height: auto; }
    .dc-rail { border-right: none; border-bottom: 1px solid var(--dc-line); height: 170px; }
    .dc-sheet { height: 340px; }
    .dc-screen { padding: 14px; }
}

@media (max-width: 480px) {
    .dc-sheet { height: 300px; }
    .dc-reading { font-size: 15px; }
    #drawCastBtn { min-width: 170px; }
}

/* The draw panel shows its own result, so the shared block below it would
   otherwise sit there displaying its empty-state message. */
body.draw-runes-mode > .container #result,
body.draw-runes-mode #mainPage > #result { display: none !important; }

.dc-result { margin-top: 16px; }
.dc-result:empty { display: none; }
.dc-result .result-table-wrapper { margin: 0; }
.dc-result table { margin: 0; }

/* ── "see as circle" on a cast result ─────────────────────────────────── */
.see-as-circle-wrap { text-align: center; padding: 8px 0 2px; }

.see-as-circle-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    color: #9aa1ad;
    font-family: 'Lora', serif;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    padding: 5px 13px;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.see-as-circle-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(91, 155, 213, 0.45);
}

.see-as-circle-btn .sac-mark { margin-right: 5px; opacity: 0.8; }

/* ── PDF+ live preview ────────────────────────────────────────────────── */
.pdfplus-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 14, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pdfplus-overlay.open { display: flex; }

.pdfplus-shell {
    width: min(940px, 100%);
    height: min(88vh, 1100px);
    background: #14141e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pdfplus-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.pdfplus-title {
    font-family: 'Lora', serif;
    font-size: 13.5px;
    color: #e8eaf0;
    letter-spacing: 0.03em;
}

.pdfplus-note {
    font-family: 'Lora', serif;
    font-size: 11.5px;
    font-style: italic;
    color: #9aa1ad;
}

.pdfplus-spacer { flex: 1 1 auto; }

.pdfplus-btn {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    color: #e8eaf0;
    font-family: 'Lora', serif;
    font-size: 12px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.pdfplus-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(91, 155, 213, 0.45);
}

.pdfplus-close { font-size: 16px; line-height: 1; padding: 3px 10px; }

.pdfplus-frame {
    flex: 1 1 auto;
    width: 100%;
    border: none;
    background: #fff;
}

@media (max-width: 700px) {
    .pdfplus-overlay { padding: 10px; }
    .pdfplus-shell { height: 92vh; }
    .pdfplus-title { display: none; }
}

/* ── dragging past the edge discards ──────────────────────────────────── */
#drawCanvas.dc-discarding { cursor: not-allowed; }

/* ── search bar fit ───────────────────────────────────────────────────── */
/* `overflow: hidden` here clipped the horizontal rune strip on a phone: the
   strip's own overflow-x could scroll, but the rail cropped it. The rail only
   needs to hide vertical spill. */
.dc-rail { overflow-x: visible; overflow-y: hidden; }
.dc-search {
    width: auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 8px 8px;
}

/* ── the help icon must not crowd the settings gear ───────────────────── */
/* The global rule in tooltips.css pins .input-help-icon to
   `position:absolute; top:12px; right:12px`. That is right for a textarea
   corner and wrong here: .dc-head is the positioned ancestor, so the "?" was
   lifted out of the flex row and dropped straight on top of the gear button.
   Put it back in the flow — the row already places it. */
.dc-head .input-help-icon {
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    margin-right: 2px;
}
.dc-head-spacer { min-width: 8px; }

/* ── mobile ───────────────────────────────────────────────────────────
   On a phone the rune list becomes a single horizontal strip of chips. A
   vertical list was eating a third of the screen to show two and a half
   runes, while the sheet sat mostly empty.
   ------------------------------------------------------------------- */
@media (max-width: 760px) {
    .dc-panel { max-width: 100%; border-radius: 12px; }
    .dc-head { padding: 9px 12px; gap: 8px; }
    .dc-title { font-size: 13px; }

    .dc-body { grid-template-columns: 1fr; height: auto; }

    .dc-rail {
        border-right: none;
        border-bottom: 1px solid var(--dc-line);
        height: auto;
        max-height: none;
        flex: 0 0 auto;
        padding: 8px 0 6px;
    }
    .dc-search { margin: 0 10px 7px; padding: 9px 11px; font-size: 14px; }

    /* one scrolling row, not a column.
       The base rule is `flex: 1 1 0; min-height: 0`, which is right for a
       column inside a fixed-height rail but collapses a row to nothing —
       so the strip needs its own height here. */
    .dc-legend {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        flex: 0 0 auto;
        height: 52px;
        max-height: none;
        min-height: 52px;
        padding: 2px 10px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* claim horizontal panning for the strip so the browser scrolls it
           natively instead of waiting on a JS gesture decision */
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }
    /* the strip scrolls, so a cut-off rune is reachable — hint that it does */
    .dc-legend::after {
        content: '';
        flex: 0 0 4px;
    }
    .dc-legend::-webkit-scrollbar { height: 4px; }

    /* the type heading becomes a divider chip in the strip */
    .dc-group {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0 6px 0 2px;
        border-left: 1px solid var(--dc-line);
        margin-left: 4px;
        font-size: 9px;
        line-height: 1.15;
    }
    .dc-group:first-child { border-left: none; margin-left: 0; }
    .dc-group-count { font-size: 8.5px; }

    .dc-rune {
        flex: 0 0 auto;
        scroll-snap-align: start;
        gap: 6px;
        padding: 9px 11px;          /* thumb-sized */
        border: 1px solid var(--dc-line);
        border-radius: 999px;
        font-size: 13px;
        white-space: nowrap;
    }
    .dc-rune-tier { display: none; }   /* the tier is not why you tap it */

    .dc-sheet { height: 62vh; min-height: 320px; }

    .dc-foot { padding: 12px 12px 14px; }
    .dc-reading { font-size: 15px; }
    #drawCastBtn { min-width: 0; width: 100%; padding: 13px 16px; }

    .dc-result .result-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dc-result table { min-width: 620px; }

    .dc-screen { padding: 10px; align-items: stretch; }
    .dc-screen-inner { max-width: 100%; }
    .dc-set-actions .dc-btn { flex: 1 1 auto; padding: 9px 12px; }
    .dc-icon-btn { width: 36px; height: 36px; }
}

/* landscape: the sheet is the point, so give it the room */
@media (max-width: 940px) and (orientation: landscape) {
    .dc-sheet { height: 78vh; min-height: 240px; }
    .dc-rail { padding: 6px 0 4px; }
    .dc-foot { padding: 9px 12px 11px; }
}

@media (max-width: 430px) {
    .dc-sheet { height: 58vh; min-height: 290px; }
    .dc-reading { font-size: 14px; }
}

/* The canvas must not swallow vertical scrolling: it only claims the
   gesture when a rune is actually under the finger (see draw-cast.js). */
#drawCanvas { touch-action: pan-y; }

/* ── synergy toggle pill, in the settings menu ────────────────────────── */
.syn-pill-wrap { padding-bottom: 4px; }

.syn-pill {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-family: 'Lora', serif;
    text-align: left;
    transition: background .16s ease;
}
.syn-pill:hover { background: rgba(255, 255, 255, 0.06); }

.syn-pill-track {
    flex: 0 0 auto;
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background .18s ease, border-color .18s ease;
}
.syn-pill-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #9aa1ad;
    transition: transform .18s ease, background .18s ease;
}
.syn-pill.on .syn-pill-track {
    background: rgba(123, 201, 166, 0.3);
    border-color: rgba(123, 201, 166, 0.6);
}
.syn-pill.on .syn-pill-knob { transform: translateX(16px); background: #7bc9a6; }

.syn-pill-text { display: flex; flex-direction: column; min-width: 0; }
.syn-pill-title { font-size: 13.5px; color: #e8eaf0; line-height: 1.25; }
.syn-pill-sub { font-size: 11.5px; color: #9aa1ad; margin-top: 1px; }

/* a synergy shown among the runes */
.dc-rune[data-synergy="1"] .dc-rune-name::after {
    content: '⁑';
    color: #7bc9a6;
    font-size: 10px;
    margin-left: 5px;
    vertical-align: super;
}