/* Big Obi Layout */
.frame {
    position: relative;
    display: grid;
    grid-template-columns: var(--spine-w) var(--obi-w) 1fr;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}

/* --- SPINE --- */
.spine {
    position: relative;
    isolation: isolate;
    background-image:
        linear-gradient(180deg,
        color-mix(in srgb, var(--spine-a) 92%, white 8%) 0%,
        transparent 55%,
        color-mix(in srgb, var(--spine-a) 92%, black 8%) 100%
        ),
        var(--stage-image, none),
        linear-gradient(180deg,
        color-mix(in srgb, var(--spine-a) 94%, black 6%) 0%,
        var(--spine-a) 40%,
        color-mix(in srgb, var(--spine-a) 92%, black 8%) 100%
        );

    background-size:
        cover,                 /* gloss */
        cover,                 /* image */
        cover;                 /* base */
    background-repeat: no-repeat;
    background-blend-mode:
        overlay,
        var(--stageimg-blend, soft-light),
        normal;

    box-shadow:
        inset 1vw 1vh 3vw rgba(0,0,0,0.35),
        inset -1vw -1vh 2vh rgba(0,0,0,0.3);

    overflow: hidden;

}

.spine::after {
    content:"";
    position:absolute; inset:0;
    pointer-events:none;

    background:
    linear-gradient(180deg,
        color-mix(in srgb, var(--spine-b) 14%, transparent) 0%,
        color-mix(in srgb, var(--spine-a) 10%, transparent) 45%,
        color-mix(in srgb, var(--spine-a) 18%, black 82%) 100%
    );

    mix-blend-mode: var(--spine-veil-mix);
    opacity: var(--spine-veil-opacity);

    backdrop-filter: var(--spine-backdrop);
    -webkit-backdrop-filter: var(--spine-backdrop);
}

/* --- OBI --- */
.obi {
    position: relative;
    display: grid;
    grid-template-rows: 30px 1fr;
    background: linear-gradient(180deg, var(--obi-bg) 0%, var(--obi-surface) 100%);
    color: var(--obi-text);
    box-shadow: 0.5vw 2vh 2vw rgba(0,0,0,0.45);
    z-index: 99;
    border-right: 0;
    padding: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.obi::after {
    content:"";
    position:absolute;
    inset:0;
    background:url("/assets/img/texture/sharp-grain-inv.png") repeat;
    background-size:auto;
    image-rendering:crisp-edges;
    opacity:0.7;
    pointer-events:none;
    z-index:2;
}

.obi__strip {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0px;
    z-index: 1;
    min-height: 0;

}

.obi__strip::-webkit-scrollbar { display: none; }

/* Obi Main Section */
.obi__main {
    display: flex;
    flex-direction: column;
    padding: 0;
    flex-grow: 1;
    order: 2;
    gap: 0;
}

/* Obi - Cedit Row */
.obi__meta {
    user-select: none;
    color: var(--acc-700);
    opacity: 0.85;
    font-size: 0.6em;
    font-weight: 600;
}

.obi__sub {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

h1.obi__sitetitle {
    all: unset;
    display: inline;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* Obi Top */
.obi__top {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: flex-start;
    /* flex-grow: 1;
    padding: 20px; */
}

/* Obi - Middle */
.obi__mid {
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
    align-items: flex-start;
    flex-grow: 1;
    padding: 10px;
    gap: 10px;
}

.obi__label {
    display: flex;
    height: 100%;
    user-select: none;
}

.obi__desc {
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    z-index: 1;
}

.obi__desc__entry {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    background-color: var(--lite);
    padding: 0px 10px;
    pointer-events: none;
}

.obi__end {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 10px 10px 10px;
}

.obi__icons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
}

/* Obi text */
.obi__title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-optical-sizing: auto;
    font-style: normal;
    letter-spacing: -0.0025em;
    font-size: clamp(50px,10vh,80px);
    color: var(--acc-600);
    text-transform: uppercase;
    mix-blend-mode: multiply;
    line-height: 0.7;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    padding: 0px 5px 0px 5px;
    border-left: 2px dotted var(--acc-600);
}

.obi__series {
    writing-mode:vertical-rl;
    text-orientation:mixed;
    color:var(--acc-600);
}

.obi__line {
    flex-grow: 1;
    border-right: 2px dotted var(--acc-600);
    width: 2px;
}

.obi__mono {
    writing-mode: vertical-rl;
    font-size: 14px;
}

/* Ribbon container: horizontal flex row, full height */
.obi__ribbon{
    display: flex;
    flex-direction: row;
    height: 30px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    /* z-index: 2;
    box-shadow: -3px 3px 4px rgba( 0, 0, 0, 0.4); */
}

/* Base button: fills height and expands horizontally */
.obi__refresh,
.obi__copy{
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-grow: 1;
    flex-basis: 0;
    height: 100%;
    margin: 0;
    padding: 0 .9rem;
    border: none;
    transition: filter .15s ease, transform .1s ease;
}

.obi__refresh--primary { flex-grow: 8; }
.obi__copy             { flex-grow: 2; }

.obi__refresh--primary{
    background: var(--obi-accent);
    color: var(--obi-surface);
}
.obi__copy{
    background: var(--obi-accent-2);
    color: var(--obi-surface);
}

/* Hover + active states */
.obi__refresh:hover,
.obi__copy:hover {
    filter: saturate(1.08) brightness(1.02);
}
.obi__refresh:active,
.obi__copy:active {
    filter: brightness(0.96);
}

.obi__refresh:focus-visible,
.obi__copy:focus-visible{
    outline: 2px solid color-mix(in srgb, var(--obi-accent) 60%, white);
    outline-offset: -2px;
}

/* Icon system */
.icon{
    display:inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    /* Mask setup */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Individual glyphs */
.icon--shuffle{
    -webkit-mask-image: url("/assets/icon/shuffle.svg");
    mask-image: url("/assets/icon/shuffle.svg");
}
.icon--copy{
    -webkit-mask-image: url("/assets/icon/copy.svg");
    mask-image: url("/assets/icon/copy.svg");
}
.icon--discord{
    -webkit-mask-image: url("/assets/icon/discord.svg");
    mask-image: url("/assets/icon/discord.svg");
}

/* Obi Emblem Row */
.obi__emblems {
    display: flex;
    gap: 10px;
}

.obi__emblem-box {
    display: flex;
    align-items: end;
    padding: 5px;
    flex-basis: 70%;
    flex-grow: 1;
    background: linear-gradient(33deg, var(--acc-700), var(--acc-600));
    opacity: 0.2;
}

.obi__stamp {
    margin-top:auto;
    display: flex;
    align-items:end;
    padding: 5px;
    border: 2px dashed var(--obi-accent);
    flex-basis: 50%;
    flex-grow: 1;
}

.stamp {
    width: 100%;
    height: 20vh;
    min-height: 128px;
    max-height: 512px;
    display:block;
    background: linear-gradient(140deg, var(--obi-text), var(--obi-accent), var(--obi-accent-2));
    -webkit-mask-image: var(--stamp-image);
    mask-image: var(--stamp-image);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 10%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-mode: luminance;
    mask-mode: luminance;
    position: relative;
}

.stamp::after {
    content:"";
    position:absolute; inset:0;
    background: url("/assets/img/texture/sharp-grain-inv.png") repeat;
    opacity:.35;
    pointer-events:none;
}

/* Discord Button */
.discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.55em 1em;
    border-radius: 0px;
    background: var(--acc-600);
    color: var(--obi-surface);
    font-family: "Fira Mono", monospace;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    letter-spacing: 0.03em;
}

.discord-icon {
    width: 1.3em;
    height: 1.3em;
    display: inline-block;
    background-color: var(--obi-surface);
    -webkit-mask: url("/assets/icon/discord.svg") no-repeat center / contain;
    mask: url("/assets/icon/discord.svg") no-repeat center / contain;
}

.discord-btn img {
    width: 1em;
    height: 1.3em;
    display: block;
}

.discord-btn:hover {
    background: var(--acc-700);
}

.discord-btn:active {
    background: var(--ink-900);
}

/* Placeholder Spots */
.icon--fill {
    display: flex;
    padding: 20px;
}

.icon--ghost {
    background: linear-gradient(33deg, var(--acc-700), var(--acc-600));
    flex-grow: 1;
    opacity: 0.125;
    height: 100%;
}

.icon--dotted {
    background-color: transparent;
    border: 2px dashed var(--obi-accent);
    height: 100%;
}

/* Stage */
.stage {
    position: relative;       /* establish containing block for ::before */
    isolation: isolate;       /* blend only within the stage */
    background-blend-mode: normal, overlay;
    background:
            radial-gradient(
            circle at 25%,
            var(--r1)  3.3%,
            var(--r2a) 5.5%,
            var(--r2) 6%,
            var(--r3) 7%,
            var(--r4) 8%,
            var(--r5) 9%,
            var(--r6) 15%,
            var(--r7) 16%,
            var(--r8) 17%,
            var(--r9) 19%,
            var(--r10) 20%,
            var(--r11) 21%,
            var(--r12) 22%,
            var(--r13) 67%,
            var(--r14) 68%,
            var(--r15) 69%,
            var(--r16) 70%,
            var(--r17) 90%
        ),
        conic-gradient(
        from var(--conic-from, 150deg) at 25%,
            var(--c1)   0deg,
            var(--c2)  40deg,
            var(--c3) 100deg,
            var(--c4) 130deg,
            var(--c5) 180deg,
            var(--c6) 220deg,
            var(--c7) 310deg,
            var(--c8) 360deg
        );
}

.stage::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--stage-image, none);
    background-size: cover;
    background-position: 50% 25%;
    opacity: var(--stageimg-opacity, .25);
    mix-blend-mode: var(--stageimg-blend, soft-light);
    pointer-events: none;
    z-index: 0;               /* sits under any stage content; above stage base background */
}

.stage-dust {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
}