:root {
    color-scheme: dark;
    --gold: #c8943d;
    --gold2: #e0bf73;
    --gold3: #f0d38b;
    --line: #68491f;
    --text: #d8c39a;
    --muted: #8e8061;
    --red: #b54b3b;
    --green: #78c985;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #000; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font: 14px/1.45 Georgia, "Times New Roman", serif;
    background: #000 url('../../assets/theme/retrod2_armory_bg.png') center center / cover no-repeat fixed;
}
a { color: #dfb75c; }
a:hover { color: #fff0ad; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.shell {
    position: relative;
    z-index: 1;
    width: min(1500px, calc(100vw - 40px));
    margin: 0 auto;
    padding: 22px 0 40px;
}
.topbar {
    height: 96px;
    border: 1px solid rgba(175,132,61,.55);
    background: rgba(0,0,0,.44);
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    align-items: center;
    box-shadow: 0 0 22px #000 inset, 0 0 18px #000;
}
.d2logo { text-align: center; }
.d2logo img {
    max-width: 138px;
    max-height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px #000) drop-shadow(0 0 7px rgba(180,55,10,.55));
}
.title { display:flex; align-items:center; justify-content:center; text-align:center; padding:4px 8px; }
.title img {
    display:block;
    max-width:min(760px,100%);
    max-height:78px;
    width:auto;
    height:auto;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.9));
}
.title span { color:var(--gold2); font-size:36px; letter-spacing:3px; text-shadow:0 2px 7px #000; text-transform:uppercase; }
.nav {
    display:flex;
    gap:18px;
    align-items:center;
    padding:10px 18px;
    border-left:1px solid rgba(175,132,61,.45);
    border-right:1px solid rgba(175,132,61,.45);
    border-bottom:1px solid rgba(175,132,61,.45);
    background:rgba(0,0,0,.38);
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.8px;
    overflow:auto;
}
.nav a { color:#dfb75c; text-decoration:none; white-space:nowrap; }
.nav a:hover,.nav a.active { color:#fff0ad; }

.planner-page {
    margin-top: 22px;
    border: 1px solid rgba(175,132,61,.52);
    background: rgba(0,0,0,.34);
    box-shadow: 0 0 18px rgba(0,0,0,.55) inset, 0 0 14px rgba(0,0,0,.48);
    padding: 20px;
}
.planner-heading {
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:flex-end;
    margin-bottom:20px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(175,132,61,.34);
}
.kicker { color:#a88a50; text-transform:uppercase; letter-spacing:1.8px; font-size:11px; margin-bottom:4px; }
.planner-heading h1 { margin:0; color:var(--gold2); font-size:30px; line-height:1.08; text-transform:uppercase; letter-spacing:1.1px; }
.planner-heading p { margin:7px 0 0; max-width:830px; color:#cdbb91; }
.planner-version { color:#817355; white-space:nowrap; font-size:12px; }

.planner-layout {
    display:grid;
    grid-template-columns:minmax(245px, .9fr) 320px minmax(300px, 1.15fr);
    gap:20px;
    align-items:start;
    justify-content:center;
}
.control-card,.detail-card {
    border:1px solid rgba(108,76,35,.88);
    background:rgba(0,0,0,.42);
    box-shadow:0 0 18px #000 inset,0 0 14px rgba(0,0,0,.60);
    padding:18px;
    min-width:0;
}
h2,h3 { margin:0 0 14px; color:var(--gold2); font-weight:400; font-variant:small-caps; letter-spacing:.7px; }
h2 { font-size:22px; }
h3 { margin-top:20px; font-size:16px; }
.field-label,label>span { display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:7px; }
.class-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:16px; }
.class-button,.action-stack button,.saved-row button,select,input {
    color:#e4d2a9;
    border:1px solid #65502c;
    background:linear-gradient(#2b251c,#111);
    box-shadow:0 0 8px #000 inset;
    min-height:38px;
}
.class-button:hover,.action-stack button:hover,.saved-row button:hover { border-color:#ad7934; color:#fff0ad; filter:brightness(1.12); }
.class-button.active { border-color:#ad7934; color:#ffd475; background:linear-gradient(#5c1a0d,#210805); }
.number-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
input,select { width:100%; padding:7px 9px; }
select {
    color-scheme:dark;
    color:#f5dfaa;
    background-color:#120d08;
    font-weight:600;
    text-shadow:0 1px 2px #000;
}
select option {
    color:#f5dfaa;
    background:#120d08;
}
.saved-row select {
    border-color:#98703a;
    background:linear-gradient(#241a0e,#090604);
    min-height:42px;
    font-size:14px;
}
.saved-row button {
    color:#ffe39b;
    background:linear-gradient(#352512,#0c0804);
    border-color:#98703a;
}
.point-ledger { border-top:1px solid #40331f; border-bottom:1px solid #40331f; margin:18px 0 12px; padding:10px 0; }
.point-ledger div,.tree-summary div { display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.point-ledger strong { color:var(--gold3); }
.point-ledger strong.invalid { color:#ff7566; }
.tree-summary { color:var(--muted); font-size:13px; }
.tree-summary strong { color:#d9c792; }
.action-stack { display:grid; gap:7px; }
.action-stack button { width:100%; padding:8px 10px; }
.danger-button { color:#e3a096 !important; }
.saved-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; margin-top:8px; }
.saved-row button { padding:0 9px; }
.interaction-help { color:var(--muted); font-size:12px; line-height:1.45; margin:16px 0 0; }
.status-message { min-height:1.3em; margin:10px 0 0; color:var(--gold3); font-size:12px; }
.status-message.error { color:#ff7967; }

.game-panel-wrap { width:320px; filter:drop-shadow(0 12px 18px #000c); }
.game-panel { position:relative; width:320px; height:432px; user-select:none; }
.tree-background {
    position:absolute;
    inset:0;
    width:320px;
    height:432px;
    image-rendering:auto;
}
.skill-icons { position:absolute; inset:0; }
.skill-button { position:absolute; width:48px; height:48px; padding:0; border:0; background:transparent; overflow:visible; }
.skill-button img {
    display:block;
    width:48px;
    height:48px;
    pointer-events:none;
    /* All unlearned icons use one consistent light embossed shade. */
    filter:grayscale(.78) brightness(.52) contrast(1.12);
    transition:filter .08s ease;
}
.skill-button.available img,
.skill-button.locked img {
    filter:grayscale(.78) brightness(.52) contrast(1.12);
}
/* Learned skills and the icon currently under the pointer use the original DC6 color frame. */
.skill-button.learned img,
.skill-button.highlighted img {
    filter:none;
    opacity:1;
}
.skill-button:hover,.skill-button.selected { outline:1px solid #d7b65b; outline-offset:-2px; }
.skill-button.selected { box-shadow:0 0 7px rgba(224,191,115,.62) inset; }
.skill-button.full { outline:1px solid #f0d38b; outline-offset:-2px; }
.skill-rank {
    position:absolute;
    left:48px;
    top:45px;
    min-width:14px;
    height:14px;
    line-height:14px;
    padding:0 1px;
    border:0;
    border-radius:0;
    background:rgba(0,0,0,.54);
    color:#e9e7e2;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:-.3px;
    text-align:center;
    pointer-events:none;
    z-index:6;
    text-shadow:
        -1px -1px 0 #000,
         0px -1px 0 #000,
         1px -1px 0 #000,
        -1px  0px 0 #000,
         1px  0px 0 #000,
        -1px  1px 0 #000,
         0px  1px 0 #000,
         1px  1px 0 #000;
}
.skill-rank[data-digits="1"] { left:48px; width:14px; }
.skill-rank[data-digits="2"] { left:45px; width:20px; font-size:11px; }
.skill-rank[data-digits="3"] { left:42px; width:26px; font-size:10px; }
.choices-box { position:absolute; left:231px; top:8px; width:84px; text-align:center; color:#d8d1c5; font-size:10px; letter-spacing:.15em; line-height:1.15; text-shadow:1px 1px #000; }
.choices-box strong { display:block; margin:16px auto 0; width:50px; color:#eee7da; font:18px Georgia,serif; }
.tree-tab { position:absolute; left:229px; width:91px; height:103px; border:0; background:transparent; padding:12px 7px; color:#d5d0c7; font-size:11px; line-height:1.13; letter-spacing:.06em; text-transform:uppercase; text-shadow:1px 1px #000; }
.tree-tab[data-tree="3"] { top:115px; }
.tree-tab[data-tree="2"] { top:219px; }
.tree-tab[data-tree="1"] { top:323px; }
.tree-tab:hover,.tree-tab.active { color:#ffe7a1; }
.tree-tab:focus-visible { outline:2px solid var(--gold); outline-offset:-5px; }

.skill-detail { min-height:300px; line-height:1.42; }
.empty-detail { color:var(--muted); font-style:italic; }
.skill-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:5px; }
.skill-detail h3 { font-size:22px; margin:0; color:#f0c561; }
.skill-level-pill { border:1px solid #66502a; background:rgba(0,0,0,.42); color:#d9c792; padding:3px 7px; font-size:11px; white-space:nowrap; }
.skill-description { white-space:pre-line; color:#ded4bd; margin:10px 0 8px; }
.rank-effect-summary { margin:0 0 14px; color:#d6bd78; font-size:13px; }
.detail-raw-data { margin-top:15px; padding-top:8px; border-top:1px solid rgba(104,73,31,.42); }
.detail-raw-data .parameter-list { margin-top:9px; }
.skill-tooltip > div { white-space:pre-line; }
.skill-meta { display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 10px; margin:0 0 15px; padding:10px 0; border-top:1px solid rgba(104,73,31,.55); border-bottom:1px solid rgba(104,73,31,.55); }
.skill-meta dt { color:var(--muted); }
.skill-meta dd { margin:0; color:#d8c39a; }
.skill-meta .bad { color:#ff7768; }
.skill-meta .good { color:#80d38a; }
.detail-section { margin-top:15px; }
.detail-section h4 { margin:0 0 7px; color:#c9a955; font-size:13px; text-transform:uppercase; letter-spacing:.7px; }
.skill-stat-table { width:100%; border-collapse:collapse; background:rgba(0,0,0,.22); }
.skill-stat-table th,.skill-stat-table td { border:1px solid rgba(91,64,30,.66); padding:6px 8px; text-align:left; vertical-align:top; }
.skill-stat-table th { width:48%; color:#a99569; font-weight:400; }
.skill-stat-table td { color:#e1d3b2; }
.skill-source-text { margin:6px 0; padding-left:10px; border-left:2px solid #5b421e; color:#cbb990; }
.parameter-list { margin:0; padding:0; list-style:none; }
.parameter-list li { display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px dotted rgba(104,73,31,.35); }
.parameter-list span { color:#a99569; }
.parameter-list strong { color:#d8c39a; font-weight:400; text-align:right; }
.data-caveat { margin:10px 0 0; color:#7f7256; font-size:11px; }
.validation-box { margin-top:18px; padding:11px; border:1px solid #4f3b20; background:rgba(0,0,0,.30); font-size:12px; line-height:1.45; }
.validation-box.valid { color:#99d39a; }
.validation-box.invalid { color:#f08c7d; border-color:#743f38; }
.version-notes { margin-top:18px; color:var(--muted); font-size:12px; }
.version-notes summary { color:#c7b589; cursor:pointer; }
.version-notes code { color:#b9c4da; }

.skill-tooltip { position:fixed; z-index:100; width:min(310px,calc(100vw - 24px)); pointer-events:none; border:1px solid #76664a; background:rgba(3,3,3,.96); box-shadow:0 8px 24px #000; padding:10px 12px; color:#e7e1d6; font-size:12px; line-height:1.35; }
.skill-tooltip strong { display:block; color:#f0cb62; font-size:15px; margin-bottom:4px; }
.skill-tooltip .tooltip-stat { color:#cdbb91; margin-top:4px; }
.skill-tooltip .red { color:#ff6d5d; margin-top:5px; }
.skill-tooltip .green { color:#7ed18b; margin-top:5px; }
.footer { text-align:center; color:#7f7055; margin:22px 0 0; font-size:12px; }

@media(max-width:1100px) {
    .planner-layout { grid-template-columns:minmax(245px,1fr) 320px; }
    .detail-card { grid-column:1/-1; }
}
@media(max-width:900px) {
    .shell { width:100%; padding:0; }
    .topbar { grid-template-columns:1fr; height:auto; }
    .d2logo { display:none; }
    .title { padding:14px 8px; }
    .title img { max-height:54px; }
    .nav { gap:14px; }
    .planner-page { margin:0; border-left:0; border-right:0; padding:14px 12px 24px; }
    .planner-heading { display:block; }
    .planner-version { margin-top:9px; }
}
@media(max-width:700px) {
    .planner-layout { display:flex; flex-direction:column; align-items:stretch; }
    .game-panel-wrap { align-self:center; }
    .control-card,.detail-card { padding:14px; }
    .planner-heading h1 { font-size:25px; }
}
@media(max-width:360px) {
    .game-panel-wrap,.game-panel { transform-origin:top left; }
    .game-panel-wrap { width:304px; height:411px; }
    .game-panel { transform:scale(.95); }
}


.exact-progression { margin-top:16px; }
.exact-progression h4 { margin:14px 0 7px; color:#c9a955; font-size:13px; text-transform:uppercase; letter-spacing:.7px; }
.progression-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:rgba(91,64,30,.55); border:1px solid rgba(91,64,30,.66); }
.progression-grid > div { display:flex; justify-content:space-between; gap:8px; padding:5px 7px; background:rgba(0,0,0,.75); }
.progression-grid span { color:#9f906f; }
.progression-grid strong { color:#e1d3b2; font-weight:400; }
@media(max-width:700px) { .progression-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* v1.3.13 account-scoped planner saves: high-contrast status text */
.save-scope {
    margin:9px 0 0;
    padding:8px 10px;
    color:#ddc99d;
    font-size:13px;
    line-height:1.45;
    background:rgba(0,0,0,.62);
    border-left:2px solid #9f7436;
    text-shadow:0 1px 2px #000;
}
.save-scope strong { color:#ffe09a; }
.save-scope a { color:#f0c96c; white-space:nowrap; }
.interaction-help {
    color:#c8b48d;
    font-size:13px;
    text-shadow:0 1px 2px #000;
}