/* ============================================================
   SHADOWSKINGS — RESEARCH CHAMBER
   Frontend Presentation Layer
   ============================================================ */


/* ============================================================
   ROOT / PANEL
   ============================================================ */

#researchPanel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    color: #eee7ff;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(91, 31, 145, 0.18),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #09070d 0%,
            #0c0911 45%,
            #070609 100%
        );

    font-family: "Cinzel", Georgia, serif;
}


.research-panel-container {
    position: relative;
    width: 100%;
    box-sizing: border-box;

    padding: 24px 28px 50px;
}


.research-chamber {
    width: min(1500px, 100%);
    margin: 0 auto;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

#researchPanel::-webkit-scrollbar {
    width: 10px;
}

#researchPanel::-webkit-scrollbar-track {
    background: #08060b;
}

#researchPanel::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #7136a8,
            #321447
        );

    border: 2px solid #09070c;
    border-radius: 10px;
}

#researchPanel::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #9c59dc,
            #4a2065
        );
}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.panel-close-btn {
    position: fixed;
    top: 14px;
    right: 22px;

    z-index: 100;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #7642a5;
    border-radius: 50%;

    color: #e9dcff;

    background:
        radial-gradient(
            circle,
            #251337,
            #09070d
        );

    box-shadow:
        0 0 10px rgba(124, 55, 190, 0.65),
        inset 0 0 8px rgba(120, 65, 175, 0.22);

    font-family: Georgia, serif;
    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease;
}

.panel-close-btn:hover {
    color: #ffffff;
    border-color: #bb81f2;

    transform: scale(1.08);

    box-shadow:
        0 0 17px rgba(164, 87, 231, 0.9),
        inset 0 0 10px rgba(150, 83, 210, 0.3);
}


/* ============================================================
   RESEARCH CHAMBER HEADER
   ============================================================ */

.research-chamber-header {
    position: relative;

    margin-bottom: 22px;
    padding: 34px 30px 26px;

    text-align: center;

    overflow: hidden;

    border: 1px solid #51316e;
    border-radius: 12px;

    background:
        radial-gradient(
            ellipse at 50% -20%,
            rgba(126, 58, 184, 0.28),
            transparent 52%
        ),
        linear-gradient(
            180deg,
            rgba(25, 17, 34, 0.97),
            rgba(8, 7, 11, 0.98)
        );

    box-shadow:
        0 0 22px rgba(82, 31, 124, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.04);
}

.research-chamber-header::before {
    content: "";

    position: absolute;
    left: 7%;
    right: 7%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8d55c2,
            #d0a7ef,
            #8d55c2,
            transparent
        );

    box-shadow:
        0 0 12px #8144b9;
}

.research-chamber-eyebrow {
    margin-bottom: 5px;

    color: #a875d3;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 7px;
}

.research-chamber-title {
    margin: 0;

    color: #f3ecff;

    font-size: clamp(30px, 4vw, 52px);
    font-weight: 600;

    letter-spacing: 5px;

    text-shadow:
        0 0 12px rgba(174, 110, 224, 0.45),
        0 2px 3px #000;
}

.research-chamber-motto {
    margin-top: 8px;

    color: #9d8aaa;

    font-size: 11px;
    letter-spacing: 4px;
}


/* ============================================================
   HEADER STATS
   ============================================================ */

.research-header-stats {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    max-width: 900px;

    margin: 24px auto 0;
}

.research-header-stat {
    min-height: 68px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 10px;

    border: 1px solid #3e2a50;
    border-radius: 6px;

    background:
        linear-gradient(
            180deg,
            rgba(28, 19, 38, 0.78),
            rgba(11, 9, 14, 0.82)
        );
}

.research-header-stat strong {
    color: #d9baff;

    font-size: 16px;
    font-weight: 600;
}

.research-header-stat span {
    margin-top: 5px;

    color: #7f7189;

    font-size: 9px;
    letter-spacing: 1.6px;
}


/* ============================================================
   STANDARD SECTIONS
   ============================================================ */

.research-section {
    position: relative;

    margin: 18px 0;

    border: 1px solid #352441;
    border-radius: 9px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(18, 14, 23, 0.96),
            rgba(9, 8, 12, 0.98)
        );

    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.28);
}

.research-section-header {
    padding: 15px 20px 13px;

    border-bottom: 1px solid #33223e;

    background:
        linear-gradient(
            90deg,
            rgba(71, 34, 95, 0.26),
            rgba(17, 13, 22, 0.4),
            rgba(71, 34, 95, 0.08)
        );
}

.research-section-title {
    margin: 0;

    color: #d9c2ec;

    font-size: 17px;
    font-weight: 600;

    letter-spacing: 2px;
}

.research-section-subtitle {
    margin: 5px 0 0;

    color: #82758b;

    font-family: Georgia, serif;
    font-size: 12px;
    font-style: italic;
}

.research-section-body {
    padding: 18px;
}


/* ============================================================
   TOKEN STORAGE
   ============================================================ */

.research-token-storage {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}

.research-token-card {
    position: relative;

    min-height: 86px;

    display: grid;

    grid-template-columns:
        44px 1fr auto;

    align-items: center;

    gap: 10px;

    padding: 12px 16px;

    border: 1px solid #443052;
    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #19121f,
            #0c0a0f
        );

    box-shadow:
        inset 0 0 12px rgba(92, 47, 124, 0.08);
}

.research-token-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 15%;
    bottom: 15%;

    width: 2px;

    background: #7540a0;

    box-shadow:
        0 0 7px #7540a0;
}

.research-token-icon {
    color: #b67ce3;

    font-size: 27px;

    text-align: center;

    text-shadow:
        0 0 9px rgba(168, 92, 220, 0.7);
}

.research-token-label {
    color: #d8cbe2;

    font-size: 13px;
    letter-spacing: 1px;
}

.research-token-count {
    color: #b990d4;

    font-size: 18px;
    font-weight: 600;
}


/* ============================================================
   ACTIVE RESEARCH
   ============================================================ */

.research-active-card {
    position: relative;

    padding: 24px;

    border: 1px solid #68418a;
    border-radius: 8px;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(109, 51, 154, 0.19),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #18101f,
            #0b090e 70%
        );

    box-shadow:
        0 0 18px rgba(87, 40, 123, 0.18),
        inset 0 0 24px rgba(98, 49, 136, 0.06);
}

.research-active-meta {
    color: #9f74bd;

    font-size: 10px;
    letter-spacing: 2px;

    text-transform: uppercase;
}

.research-active-title {
    margin-top: 6px;

    color: #f1e9f8;

    font-size: clamp(21px, 2.3vw, 30px);

    text-shadow:
        0 0 10px rgba(158, 93, 205, 0.28);
}

.research-active-progress {
    height: 13px;

    margin-top: 19px;

    overflow: hidden;

    border: 1px solid #4b315e;
    border-radius: 20px;

    background: #08070a;

    box-shadow:
        inset 0 2px 6px #000;
}

.research-active-progress-fill {
    height: 100%;

    width: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #4a176d,
            #8136b5,
            #c176f2
        );

    box-shadow:
        0 0 10px rgba(161, 73, 220, 0.8);

    transition: width 0.5s linear;
}

.research-active-countdown {
    margin-top: 13px;

    color: #d9b8f0;

    font-size: clamp(18px, 2vw, 25px);
    font-weight: 600;

    letter-spacing: 1px;
}

.research-active-countdown-label {
    margin-top: 2px;

    color: #75677e;

    font-size: 9px;
    letter-spacing: 2px;
}

.research-active-facts {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 17px;
}

.research-fact {
    padding: 11px 13px;

    border: 1px solid #30233a;
    border-radius: 5px;

    background: rgba(0, 0, 0, 0.22);
}

.research-fact span {
    display: block;

    color: #716779;

    font-size: 9px;
    letter-spacing: 1px;
}

.research-fact strong {
    display: block;

    margin-top: 4px;

    color: #c9b8d5;

    font-size: 13px;
}

.research-accelerate-btn {
    margin-top: 18px;

    min-width: 180px;

    padding: 11px 20px;

    border: 1px solid #8550ad;
    border-radius: 5px;

    color: #f1e8f8;

    background:
        linear-gradient(
            180deg,
            #51216d,
            #2c123c
        );

    font-family: "Cinzel", Georgia, serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;

    cursor: pointer;

    box-shadow:
        0 0 10px rgba(109, 44, 154, 0.25);

    transition: 0.18s ease;
}

.research-accelerate-btn:hover {
    border-color: #b778e4;

    background:
        linear-gradient(
            180deg,
            #6b2d8f,
            #351548
        );

    box-shadow:
        0 0 14px rgba(142, 66, 194, 0.5);
}


/* ============================================================
   NO ACTIVE RESEARCH
   ============================================================ */

.research-active-empty {
    padding: 34px 20px;

    text-align: center;

    border: 1px dashed #3e2b4a;
    border-radius: 7px;

    background: rgba(0, 0, 0, 0.16);
}

.research-active-empty-symbol {
    color: #72428f;

    font-size: 33px;

    text-shadow:
        0 0 13px rgba(116, 59, 157, 0.65);
}

.research-active-empty-title {
    margin-top: 8px;

    color: #c9b7d5;

    font-size: 15px;
    letter-spacing: 2px;
}

.research-active-empty-text {
    max-width: 600px;

    margin: 8px auto 0;

    color: #776d7d;

    font-family: Georgia, serif;
    font-size: 13px;
}


/* ============================================================
   ACCELERATION PICKER
   ============================================================ */

.research-acceleration-picker {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;

    margin-top: 14px;

    padding-top: 14px;

    border-top: 1px solid #33233f;
}

.research-acceleration-token-btn {
    padding: 10px;

    border: 1px solid #583970;
    border-radius: 5px;

    color: #d7c7e2;

    background: #160e1d;

    font-family: "Cinzel", Georgia, serif;

    cursor: pointer;
}

.research-acceleration-token-btn strong,
.research-acceleration-token-btn span {
    display: block;
}

.research-acceleration-token-btn span {
    margin-top: 4px;

    color: #9b75b5;
}

.research-acceleration-token-btn:hover:not(:disabled) {
    border-color: #9a60c4;

    background: #24122f;
}

.research-acceleration-token-btn:disabled {
    opacity: 0.3;

    cursor: not-allowed;
}


/* ============================================================
   DISCIPLINE GRID
   ============================================================ */

.research-discipline-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.research-discipline-card {
    position: relative;

    min-height: 105px;

    padding: 14px;

    text-align: left;

    border: 1px solid #382842;
    border-radius: 7px;

    color: #c9bdd0;

    background:
        linear-gradient(
            145deg,
            #17111c,
            #0b090d
        );

    font-family: "Cinzel", Georgia, serif;

    cursor: pointer;

    overflow: hidden;

    transition:
        border-color 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.research-discipline-card:hover {
    transform: translateY(-2px);

    border-color: #6c4285;

    background:
        linear-gradient(
            145deg,
            #211529,
            #0d0a10
        );
}

.research-discipline-card.active {
    border-color: #955ac0;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(130, 61, 178, 0.22),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #211429,
            #0d0911
        );

    box-shadow:
        0 0 13px rgba(124, 54, 171, 0.32),
        inset 0 0 14px rgba(117, 56, 159, 0.08);
}

.research-discipline-card.active::after {
    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    bottom: 0;

    height: 2px;

    background: #9e5cc9;

    box-shadow:
        0 0 8px #9e5cc9;
}

.research-discipline-icon {
    float: left;

    width: 38px;

    margin-right: 9px;

    color: #9861bc;

    font-size: 26px;

    text-align: center;

    text-shadow:
        0 0 8px rgba(144, 75, 188, 0.55);
}

.research-discipline-name {
    padding-top: 2px;

    color: #e2d5eb;

    font-size: 13px;
    letter-spacing: 1px;
}

.research-discipline-progress,
.research-discipline-depth {
    margin-left: 47px;

    color: #776a80;

    font-size: 9px;
    letter-spacing: 0.8px;
}

.research-discipline-progress {
    margin-top: 7px;
}

.research-discipline-depth {
    margin-top: 3px;

    color: #9a72b4;
}


/* ============================================================
   BRANCH NAVIGATION
   ============================================================ */

.research-branch-navigation {
    margin-top: 20px;
    padding-top: 18px;

    border-top: 1px solid #31213b;
}

.research-branch-heading {
    margin-bottom: 12px;
}

.research-branch-discipline {
    color: #ba8ed5;

    font-size: 15px;
    letter-spacing: 2px;
}

.research-branch-prompt {
    margin-top: 3px;

    color: #706576;

    font-size: 9px;
    letter-spacing: 1.8px;
}

.research-branch-tabs {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.research-branch-tab {
    padding: 8px 13px;

    border: 1px solid #382742;
    border-radius: 4px;

    color: #998aa3;

    background: #100c14;

    font-family: "Cinzel", Georgia, serif;
    font-size: 9px;
    letter-spacing: 0.8px;

    cursor: pointer;

    transition: 0.16s ease;
}

.research-branch-tab:hover {
    color: #d2bfdf;

    border-color: #68417d;
}

.research-branch-tab.active {
    color: #f0e3f8;

    border-color: #945ab8;

    background:
        linear-gradient(
            180deg,
            #3a194b,
            #1d1026
        );

    box-shadow:
        0 0 8px rgba(132, 67, 174, 0.3);
}


/* ============================================================
   RESEARCH MOUNTAIN
   ============================================================ */

.research-mountain-section .research-section-body {
    padding: 0;
}

.research-mountain {
    position: relative;

    width: 100%;

    min-height: 650px;

    overflow: hidden;

    background: #060509;
}

.research-mountain::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(5, 4, 7, 0.12) 0%,
            transparent 40%,
            rgba(7, 5, 10, 0.1) 65%,
            rgba(7, 5, 10, 0.36) 100%
        ),
        linear-gradient(
            180deg,
            transparent 70%,
            rgba(4, 3, 6, 0.45) 100%
        );
}

.research-mountain-image {
    display: block;

    width: 100%;
    height: auto;

    min-height: 650px;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(0.92)
        contrast(1.04)
        brightness(0.88);
}


/* ============================================================
   MOUNTAIN TIER OVERLAY
   ============================================================ */

.research-mountain-tier-overlay {
    position: absolute;

    z-index: 4;

    top: 6%;
    right: 2%;

    width: min(34%, 430px);
    height: 83%;

    pointer-events: none;
}

.research-mountain-tier {
    position: absolute;

    right: 0;

    width: 100%;

    display: grid;

    grid-template-columns:
        40px 1fr auto;

    align-items: center;

    gap: 8px;

    padding: 7px 10px;

    border: 1px solid transparent;
    border-radius: 5px;

    color: #d7ccd9;

    background:
        linear-gradient(
            90deg,
            rgba(7, 5, 10, 0.28),
            rgba(9, 6, 12, 0.78)
        );

    font-family: "Cinzel", Georgia, serif;

    text-align: left;

    cursor: pointer;

    pointer-events: auto;

    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease,
        box-shadow 0.16s ease;
}

.research-mountain-tier:hover {
    transform: translateX(-5px);

    border-color: rgba(157, 91, 201, 0.6);

    background:
        linear-gradient(
            90deg,
            rgba(41, 19, 53, 0.42),
            rgba(12, 8, 16, 0.9)
        );
}

.research-mountain-tier.selected {
    border-color: #9b5cc5;

    background:
        linear-gradient(
            90deg,
            rgba(81, 31, 111, 0.48),
            rgba(13, 8, 18, 0.91)
        );

    box-shadow:
        0 0 12px rgba(138, 65, 188, 0.42);
}

.research-mountain-tier::before {
    content: "";

    position: absolute;

    left: -70px;
    top: 50%;

    width: 65px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(167, 103, 211, 0.65)
        );
}

.research-mountain-tier-roman {
    color: #c69ae3;

    font-size: 19px;

    text-align: center;

    text-shadow:
        0 0 8px rgba(150, 81, 196, 0.65);
}

.research-mountain-tier-copy {
    display: flex;
    flex-direction: column;
}

.research-mountain-tier-copy strong {
    color: #e5dbe9;

    font-size: 12px;
    letter-spacing: 1.3px;
}

.research-mountain-tier-copy small {
    margin-top: 2px;

    color: #7d7182;

    font-size: 7px;
    letter-spacing: 1.2px;
}

.research-mountain-tier-state {
    color: #8e7d98;

    font-size: 7px;
    letter-spacing: 1px;
}


/* tier vertical positions */

.research-mountain-tier.tier-7 {
    top: 0%;
}

.research-mountain-tier.tier-6 {
    top: 14%;
}

.research-mountain-tier.tier-5 {
    top: 28%;
}

.research-mountain-tier.tier-4 {
    top: 42%;
}

.research-mountain-tier.tier-3 {
    top: 56%;
}

.research-mountain-tier.tier-2 {
    top: 70%;
}

.research-mountain-tier.tier-1 {
    top: 84%;
}


/* ============================================================
   MOUNTAIN STATES
   ============================================================ */

.research-mountain-tier.locked,
.research-mountain-tier.future {
    opacity: 0.53;

    filter: grayscale(0.55);
}

.research-mountain-tier.available {
    opacity: 1;
}

.research-mountain-tier.available
.research-mountain-tier-state {
    color: #c997e7;
}

.research-mountain-tier.researching {
    opacity: 1;

    border-color: #c28a3c;

    box-shadow:
        0 0 13px rgba(190, 128, 45, 0.35);
}

.research-mountain-tier.researching
.research-mountain-tier-roman,
.research-mountain-tier.researching
.research-mountain-tier-state {
    color: #e7b866;
}

.research-mountain-tier.completed {
    opacity: 1;

    border-color: #4e8464;
}

.research-mountain-tier.completed
.research-mountain-tier-roman,
.research-mountain-tier.completed
.research-mountain-tier-state {
    color: #8ac49c;
}


/* ============================================================
   CURRENT RESEARCH DEPTH
   ============================================================ */

.research-current-depth {
    position: absolute;

    z-index: 5;

    left: 3%;
    bottom: 4%;

    padding: 10px 15px;

    border-left: 2px solid #8e4db7;

    background:
        linear-gradient(
            90deg,
            rgba(7, 5, 10, 0.86),
            rgba(7, 5, 10, 0.12)
        );

    text-shadow: 0 2px 3px #000;
}

.research-current-depth span {
    display: block;

    color: #8c779a;

    font-size: 8px;
    letter-spacing: 2px;
}

.research-current-depth strong {
    display: block;

    margin-top: 4px;

    color: #e0c8ef;

    font-size: 13px;
    letter-spacing: 1px;
}


/* ============================================================
   TECHNOLOGY GRID
   ============================================================ */

.research-technology-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px;
}

.research-technology-card {
    position: relative;

    padding: 18px;

    border: 1px solid #382940;
    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #17121b,
            #0c0a0e
        );

    box-shadow:
        inset 0 0 16px rgba(93, 48, 118, 0.04);

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.research-technology-card:hover {
    transform: translateY(-2px);

    border-color: #624073;
}

.research-technology-card.available {
    border-color: #65407a;
}

.research-technology-card.researching {
    border-color: #9d6c32;

    box-shadow:
        inset 0 0 18px rgba(158, 100, 35, 0.07),
        0 0 10px rgba(148, 94, 32, 0.14);
}

.research-technology-card.completed {
    border-color: #42664e;

    background:
        linear-gradient(
            145deg,
            #111a15,
            #090d0a
        );
}

.research-technology-card.locked {
    opacity: 0.58;

    filter: grayscale(0.45);
}

.research-technology-card-top {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;
}

.research-technology-branch {
    color: #88649e;

    font-size: 8px;
    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.research-technology-title {
    margin: 4px 0 0;

    color: #e3d8e9;

    font-size: 18px;
    font-weight: 600;
}

.research-technology-status {
    flex: 0 0 auto;

    padding: 5px 7px;

    border: 1px solid #46334f;
    border-radius: 3px;

    color: #9d8ca7;

    background: #0b090d;

    font-size: 7px;
    letter-spacing: 1px;
}

.research-technology-status.available {
    color: #c996e5;

    border-color: #71458a;
}

.research-technology-status.researching {
    color: #e1b363;

    border-color: #865f31;
}

.research-technology-status.completed {
    color: #8ec49e;

    border-color: #42654d;
}

.research-technology-tier {
    margin-top: 8px;

    color: #75657d;

    font-size: 8px;
    letter-spacing: 1.4px;
}

.research-technology-description {
    margin: 13px 0;

    color: #9c919f;

    font-family: Georgia, serif;
    font-size: 13px;
    line-height: 1.55;
}


/* ============================================================
   TECHNOLOGY EFFECTS / UNLOCKS
   ============================================================ */

.research-technology-list {
    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid #2b2131;
}

.research-technology-list-title {
    margin-bottom: 6px;

    color: #8f70a0;

    font-size: 8px;
    letter-spacing: 1.4px;
}

.research-technology-list ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.research-technology-list li {
    position: relative;

    margin: 4px 0;
    padding-left: 14px;

    color: #aaa0ad;

    font-family: Georgia, serif;
    font-size: 12px;
}

.research-technology-list li::before {
    content: "?";

    position: absolute;

    left: 0;
    top: 1px;

    color: #6e3d88;

    font-size: 7px;
}

.research-technology-list.unlocks {
    padding: 10px 11px;

    border: 1px solid #493059;
    border-radius: 4px;

    background:
        rgba(74, 34, 97, 0.12);
}

.research-technology-list.unlocks
.research-technology-list-title {
    color: #bd88dc;
}

.research-technology-list.unlocks li {
    color: #d3bee0;
}


/* ============================================================
   REQUIREMENTS
   ============================================================ */

.research-requirements {
    margin-top: 12px;
    padding-top: 10px;

    border-top: 1px solid #2b2131;
}

.research-requirement {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 5px;

    color: #988e9b;

    font-family: Georgia, serif;
    font-size: 11px;
}

.research-requirement-marker {
    width: 15px;

    text-align: center;
}

.research-requirement.met
.research-requirement-marker {
    color: #72a884;
}

.research-requirement.unmet
.research-requirement-marker {
    color: #a65454;
}

.research-requirement.unmet {
    color: #927b7b;
}


/* ============================================================
   TECHNOLOGY COSTS
   ============================================================ */

.research-technology-costs {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 6px;

    margin-top: 14px;
}

.research-technology-cost {
    padding: 8px;

    text-align: center;

    border: 1px solid #2d2333;
    border-radius: 4px;

    background: rgba(0, 0, 0, 0.2);
}

.research-technology-cost span {
    display: block;

    color: #6e6472;

    font-size: 7px;
    letter-spacing: 1px;
}

.research-technology-cost strong {
    display: block;

    margin-top: 4px;

    color: #b9abbf;

    font-size: 11px;
}


/* ============================================================
   TECHNOLOGY ACTION
   ============================================================ */

.research-technology-action {
    margin-top: 14px;
}

.research-start-btn {
    width: 100%;

    padding: 10px 12px;

    border: 1px solid #8450a2;
    border-radius: 4px;

    color: #f1e8f6;

    background:
        linear-gradient(
            180deg,
            #4b205f,
            #281231
        );

    font-family: "Cinzel", Georgia, serif;
    font-size: 10px;
    letter-spacing: 1.6px;

    cursor: pointer;

    transition: 0.17s ease;
}

.research-start-btn:hover {
    border-color: #b06ed1;

    background:
        linear-gradient(
            180deg,
            #63297d,
            #351641
        );

    box-shadow:
        0 0 10px rgba(136, 61, 174, 0.35);
}

.research-start-btn:disabled {
    opacity: 0.45;

    cursor: wait;
}

.research-technology-action-state {
    padding: 9px;

    text-align: center;

    border: 1px solid #302634;
    border-radius: 4px;

    color: #746a78;

    background: rgba(0, 0, 0, 0.18);

    font-size: 8px;
    letter-spacing: 1.2px;
}

.research-technology-action-state.completed {
    color: #79ad89;
}

.research-technology-action-state.researching {
    color: #c89b51;
}


/* ============================================================
   EMPTY TECHNOLOGY TIER
   ============================================================ */

.research-technology-empty {
    padding: 45px 20px;

    text-align: center;

    border: 1px dashed #34273c;
    border-radius: 6px;
}

.research-technology-empty-rune {
    color: #68407f;

    font-size: 34px;
}

.research-technology-empty-title {
    margin-top: 8px;

    color: #b9a7c4;

    font-size: 15px;
    letter-spacing: 2px;
}

.research-technology-empty-text {
    max-width: 650px;

    margin: 9px auto 0;

    color: #756a7a;

    font-family: Georgia, serif;
    font-size: 12px;
    line-height: 1.55;
}


/* ============================================================
   RESEARCH PROFILE
   ============================================================ */

.research-profile-summary {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 9px;

    margin-bottom: 15px;
}

.research-profile-stat {
    padding: 12px;

    text-align: center;

    border: 1px solid #35283e;
    border-radius: 5px;

    background: rgba(0, 0, 0, 0.2);
}

.research-profile-stat span {
    display: block;

    color: #726778;

    font-size: 8px;
    letter-spacing: 1px;
}

.research-profile-stat strong {
    display: block;

    margin-top: 5px;

    color: #c6b1d3;

    font-size: 13px;
}

.research-profile-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}

.research-profile-discipline {
    padding: 11px;

    border: 1px solid #30243a;
    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            #141017,
            #0b090d
        );
}

.research-profile-discipline-head {
    display: flex;

    justify-content: space-between;

    gap: 8px;

    color: #a99bad;

    font-size: 9px;
}

.research-profile-discipline-head strong {
    color: #926eaa;

    font-size: 8px;
}

.research-profile-progress {
    height: 5px;

    margin-top: 8px;

    overflow: hidden;

    border-radius: 10px;

    background: #070608;
}

.research-profile-progress-fill {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #4a1f61,
            #9455b8
        );

    box-shadow:
        0 0 6px rgba(132, 65, 167, 0.45);
}

.research-profile-count {
    margin-top: 5px;

    color: #6d6471;

    font-size: 8px;
}


/* ============================================================
   MILESTONES
   ============================================================ */

.research-milestone-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 9px;
}

.research-milestone-card {
    min-height: 85px;

    padding: 13px;

    border: 1px solid #34263d;
    border-radius: 5px;

    background: #100c13;
}

.research-milestone-card.completed {
    border-color: #42634c;

    background: #0d140f;
}

.research-milestone-name {
    color: #c4b1cf;

    font-size: 11px;
}

.research-milestone-description {
    margin-top: 6px;

    color: #756b79;

    font-family: Georgia, serif;
    font-size: 11px;
}

.research-milestone-placeholder {
    padding: 35px 20px;

    text-align: center;

    border: 1px dashed #33263b;
    border-radius: 6px;
}

.research-milestone-placeholder-symbol {
    color: #6f4685;

    font-size: 29px;
}

.research-milestone-placeholder-title {
    margin-top: 7px;

    color: #b9a7c3;

    font-size: 13px;
    letter-spacing: 2px;
}

.research-milestone-placeholder-text {
    max-width: 620px;

    margin: 7px auto 0;

    color: #716776;

    font-family: Georgia, serif;
    font-size: 11px;
}


/* ============================================================
   ACCELERATION STORE
   ============================================================ */

.research-token-store {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.research-store-card {
    padding: 16px;

    text-align: center;

    border: 1px solid #382a42;
    border-radius: 6px;

    background:
        linear-gradient(
            145deg,
            #17111c,
            #0b090e
        );
}

.research-store-token-icon {
    color: #9f66c0;

    font-size: 27px;

    text-shadow:
        0 0 8px rgba(144, 74, 186, 0.5);
}

.research-store-token-name {
    margin-top: 7px;

    color: #d0c0d8;

    font-size: 12px;
    letter-spacing: 1px;
}

.research-store-owned {
    margin-top: 4px;

    color: #796c80;

    font-size: 8px;
}

.research-store-prices {
    display: grid;

    gap: 5px;

    margin-top: 12px;
}

.research-store-buy {
    padding: 8px;

    border: 1px solid #4b3558;
    border-radius: 4px;

    color: #c8b8d0;

    background: #140e19;

    font-family: "Cinzel", Georgia, serif;
    font-size: 8px;

    cursor: pointer;
}

.research-store-buy:hover {
    border-color: #80509a;

    background: #21132a;
}

.research-store-unavailable {
    padding: 8px;

    color: #665c6a;

    font-size: 7px;
    letter-spacing: 1px;
}


/* ============================================================
   TOAST
   ============================================================ */

.research-toast {
    position: fixed;

    z-index: 500;

    left: 50%;
    bottom: 30px;

    max-width: min(520px, 85vw);

    padding: 12px 18px;

    transform:
        translate(-50%, 20px);

    opacity: 0;

    border: 1px solid #624178;
    border-radius: 5px;

    color: #ded1e6;

    background:
        rgba(15, 10, 19, 0.97);

    box-shadow:
        0 0 20px rgba(0, 0, 0, 0.55);

    font-size: 11px;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;

    pointer-events: none;
}

.research-toast.visible {
    opacity: 1;

    transform:
        translate(-50%, 0);
}

.research-toast.success {
    border-color: #4e7b5d;
}

.research-toast.warning {
    border-color: #9b713b;
}

.research-toast.error {
    border-color: #934a4a;
}


/* ============================================================
   LOADING / ERROR
   ============================================================ */

.research-loading,
.research-load-error {
    min-height: 450px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}

.research-loading-rune {
    color: #a565cb;

    font-size: 42px;

    text-shadow:
        0 0 18px rgba(157, 78, 207, 0.75);

    animation:
        researchRunePulse 1.5s ease-in-out infinite;
}

.research-loading-title,
.research-load-error-title {
    margin-top: 13px;

    color: #d0bfdb;

    font-size: 15px;
    letter-spacing: 2px;
}

.research-loading-text,
.research-load-error-text {
    max-width: 500px;

    margin-top: 7px;

    color: #786c7d;

    font-family: Georgia, serif;
    font-size: 12px;
}

.research-retry-btn {
    margin-top: 15px;

    padding: 9px 20px;

    border: 1px solid #79489a;
    border-radius: 4px;

    color: #ddd0e5;

    background: #281333;

    font-family: "Cinzel", Georgia, serif;

    cursor: pointer;
}

@keyframes researchRunePulse {

    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.94);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .research-panel-container {
        padding:
            18px 18px 40px;
    }

    .research-discipline-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .research-mountain {
        min-height: 520px;
    }

    .research-mountain-image {
        min-height: 520px;
    }

    .research-mountain-tier-overlay {
        width: 40%;
    }

    .research-mountain-tier {
        grid-template-columns:
            30px 1fr;
    }

    .research-mountain-tier-state {
        display: none;
    }

    .research-profile-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .research-panel-container {
        padding:
            12px 10px 32px;
    }

    .research-chamber-header {
        padding:
            26px 12px 18px;
    }

    .research-chamber-eyebrow {
        letter-spacing: 4px;
    }

    .research-chamber-title {
        letter-spacing: 2px;
    }

    .research-chamber-motto {
        letter-spacing: 2px;
    }

    .research-header-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .research-token-storage {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .research-active-facts {
        grid-template-columns: 1fr;
    }

    .research-acceleration-picker {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    /*
       Requirement:
       Research Disciplines remain visible,
       but collapse to two columns.
    */

    .research-discipline-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .research-discipline-card {
        min-height: 100px;
    }

    .research-technology-grid {
        grid-template-columns: 1fr;
    }

    .research-profile-summary {
        grid-template-columns: 1fr;
    }

    .research-profile-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .research-milestone-grid {
        grid-template-columns: 1fr;
    }

    .research-token-store {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* ========================================================
       MOBILE RESEARCH MOUNTAIN

       Do NOT hide tiers.

       Artwork remains visible and the seven-tier control
       becomes a stacked progression underneath it.
       ======================================================== */

    .research-mountain {
        min-height: 0;

        overflow: visible;
    }

    .research-mountain-image {
        width: 100%;
        min-height: 0;
        height: auto;

        object-fit: contain;
    }

    .research-mountain-tier-overlay {
        position: relative;

        top: auto;
        right: auto;

        width: auto;
        height: auto;

        display: flex;
        flex-direction: column;

        gap: 6px;

        padding: 10px;
    }

    .research-mountain-tier {
        position: relative;

        top: auto !important;
        right: auto;

        width: 100%;

        grid-template-columns:
            35px 1fr auto;

        padding: 9px 10px;

        background:
            linear-gradient(
                90deg,
                #160e1d,
                #0c090f
            );
    }

    .research-mountain-tier::before {
        display: none;
    }

    .research-mountain-tier-state {
        display: block;
    }

    .research-current-depth {
        position: relative;

        left: auto;
        bottom: auto;

        margin: 0 10px 12px;

        background: #0e0a12;
    }

    .research-mountain::after {
        display: none;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .research-section-body {
        padding: 12px;
    }

    .research-section-header {
        padding: 12px 13px;
    }

    .research-token-card {
        grid-template-columns:
            34px 1fr;

        padding: 10px;
    }

    .research-token-count {
        grid-column:
            1 / -1;

        padding-left: 43px;

        font-size: 14px;
    }

    .research-discipline-card {
        padding: 10px;
    }

    .research-discipline-icon {
        width: 30px;

        font-size: 21px;
    }

    .research-discipline-progress,
    .research-discipline-depth {
        margin-left: 38px;
    }

    .research-technology-costs {
        grid-template-columns: 1fr;
    }

    .research-profile-grid {
        grid-template-columns: 1fr;
    }

    .research-mountain-tier {
        grid-template-columns:
            30px 1fr;
    }

    .research-mountain-tier-state {
        grid-column:
            2;

        margin-top: 2px;
    }
}
/* THRONE ROOM RETURN */
.research-throne-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 12px auto 0;
    padding: 8px 18px;
    border: 1px solid rgba(217,180,93,.58);
    border-radius: 4px;
    color: #f0d58b;
    background: linear-gradient(180deg,rgba(58,29,78,.96),rgba(28,17,38,.98));
    font: inherit;
    font-weight: 900;
    letter-spacing: .075em;
    cursor: pointer;
}

.research-throne-button:hover {
    color: #fff1c2;
    border-color: rgba(240,213,139,.92);
    background: linear-gradient(180deg,rgba(91,43,122,.98),rgba(48,24,65,.98));
}


/* ============================================================
   SHADOWSKINGS — PREMIUM TOKENS
   Research Chamber
   ============================================================ */

.research-chamber-header {

    position: relative;
}


/* ------------------------------------------------------------
   PREMIUM TOKEN BALANCE — TOP LEFT
   ------------------------------------------------------------ */

.research-premium-token-display {

    position: absolute;

    top: 14px;

    left: 14px;

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 155px;

    padding: 9px 12px;

    box-sizing: border-box;

    border: 1px solid rgba(190, 160, 255, 0.45);

    border-radius: 6px;

    background:
        rgba(18, 11, 31, 0.94);

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.35);

    z-index: 50;
}


.research-premium-token-icon {

    font-size: 13px;

    line-height: 1;

    opacity: 0.9;
}


.research-premium-token-text {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.08em;

    white-space: nowrap;
}


.research-premium-token-amount {

    margin-left: auto;

    font-size: 16px;

    line-height: 1;

    white-space: nowrap;
}


/* ------------------------------------------------------------
   PREMIUM FINISH BUTTON
   ------------------------------------------------------------ */

.research-premium-finish-button {

    display: block;

    width: 100%;

    margin-top: 10px;

    padding: 11px 14px;

    box-sizing: border-box;

    border: 1px solid rgba(190, 160, 255, 0.45);

    border-radius: 6px;

    background:
        rgba(30, 18, 48, 0.96);

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.06em;

    cursor: pointer;
}


.research-premium-finish-button:hover:not(:disabled) {

    filter: brightness(1.15);
}


.research-premium-finish-button:active:not(:disabled) {

    transform: translateY(1px);
}


.research-premium-finish-button:disabled {

    opacity: 0.45;

    cursor: not-allowed;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 700px) {

    .research-premium-token-display {

        top: 8px;

        left: 8px;

        min-width: 135px;

        padding: 7px 9px;
    }


    .research-premium-token-text {

        font-size: 9px;
    }


    .research-premium-token-amount {

        font-size: 14px;
    }


    .research-premium-finish-button {

        padding: 10px 12px;

        font-size: 10px;
    }
}



/* ============================================================
   SHADOWSKINGS — PREMIUM RESEARCH ACCELERATION PANEL
   ============================================================ */

.research-premium-acceleration {

    margin-top: 18px;

    padding: 18px;

    border: 1px solid rgba(174, 104, 255, 0.55);

    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            rgba(34, 18, 49, 0.96),
            rgba(15, 10, 22, 0.98)
        );

    box-shadow:
        inset 0 0 24px rgba(116, 54, 170, 0.08),
        0 4px 18px rgba(0, 0, 0, 0.25);

    box-sizing: border-box;
}


.research-premium-acceleration-header {

    margin-bottom: 15px;

    text-align: center;
}


.research-premium-acceleration-title {

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.research-premium-acceleration-subtitle {

    margin-top: 5px;

    font-size: 11px;

    opacity: 0.72;
}


.research-premium-acceleration-stats {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 12px;
}


.research-premium-acceleration-stat {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 72px;

    padding: 10px;

    border: 1px solid rgba(174, 104, 255, 0.30);

    border-radius: 5px;

    background:
        rgba(8, 6, 13, 0.55);

    box-sizing: border-box;
}


.research-premium-acceleration-label {

    margin-bottom: 4px;

    font-size: 9px;

    letter-spacing: 0.12em;

    opacity: 0.65;
}


.research-premium-acceleration-value {

    font-size: 18px;

    line-height: 1.15;
}


.research-premium-acceleration-detail {

    margin-top: 3px;

    font-size: 8px;

    letter-spacing: 0.08em;

    opacity: 0.55;
}


.research-premium-acceleration-rate {

    margin-bottom: 11px;

    text-align: center;

    font-size: 8px;

    letter-spacing: 0.08em;

    opacity: 0.55;
}


/*
 * Override the earlier Premium Finish button styling.
 */

.research-premium-acceleration
.research-premium-finish-button {

    width: 100%;

    margin: 0;

    min-height: 38px;

    padding: 10px 14px;

    border: 1px solid rgba(195, 133, 255, 0.72);

    border-radius: 5px;

    background:
        rgba(72, 32, 103, 0.78);

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.08em;

    cursor: pointer;
}


.research-premium-acceleration
.research-premium-finish-button:hover:not(:disabled) {

    filter: brightness(1.2);
}


.research-premium-acceleration
.research-premium-finish-button:disabled {

    opacity: 0.45;

    cursor: not-allowed;
}


@media (max-width: 700px) {

    .research-premium-acceleration {

        padding: 13px;
    }


    .research-premium-acceleration-stats {

        grid-template-columns: 1fr;
    }


    .research-premium-acceleration-value {

        font-size: 16px;
    }
}



/* ============================================================
   SHADOWSKINGS — SELECTABLE PREMIUM ACCELERATION
   ============================================================ */

.research-premium-selector {

    margin: 12px 0;

    padding: 14px;

    border: 1px solid rgba(174, 104, 255, 0.28);

    border-radius: 5px;

    background:
        rgba(7, 5, 12, 0.48);
}


.research-premium-selector-label {

    margin-bottom: 9px;

    text-align: center;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.12em;

    opacity: 0.72;
}


.research-premium-selector-controls {

    display: grid;

    grid-template-columns:
        42px minmax(90px, 150px) 42px;

    justify-content: center;

    gap: 7px;
}


.research-premium-selector-step {

    min-height: 38px;

    border: 1px solid rgba(190, 132, 255, 0.55);

    border-radius: 4px;

    background:
        rgba(55, 27, 79, 0.82);

    font-family: inherit;

    font-size: 20px;

    font-weight: 700;

    cursor: pointer;
}


.research-premium-selector-step:disabled {

    opacity: 0.35;

    cursor: not-allowed;
}


.research-premium-selector-input {

    width: 100%;

    min-height: 38px;

    box-sizing: border-box;

    border: 1px solid rgba(190, 132, 255, 0.55);

    border-radius: 4px;

    background:
        rgba(8, 6, 13, 0.88);

    color: inherit;

    font-family: inherit;

    font-size: 16px;

    font-weight: 700;

    text-align: center;
}


.research-premium-time-removed {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-top: 10px;

    font-size: 9px;

    letter-spacing: 0.08em;

    opacity: 0.75;
}


.research-premium-time-removed strong {

    font-size: 12px;

    opacity: 1;
}


.research-premium-use-button {

    display: block;

    width: 100%;

    min-height: 38px;

    margin-top: 11px;

    padding: 10px 14px;

    box-sizing: border-box;

    border: 1px solid rgba(194, 135, 255, 0.72);

    border-radius: 5px;

    background:
        rgba(80, 36, 112, 0.86);

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.07em;

    cursor: pointer;
}


.research-premium-use-button:hover:not(:disabled) {

    filter: brightness(1.18);
}


.research-premium-use-button:disabled {

    opacity: 0.4;

    cursor: not-allowed;
}


@media (max-width: 700px) {

    .research-premium-selector-controls {

        grid-template-columns:
            38px minmax(80px, 1fr) 38px;
    }
}