:root{--line:#555951;--green:#86d48c;--red:#f27d7e;--gold:#dfb75e}body{background:linear-gradient(90deg,rgba(6,9,9,.80),rgba(6,9,9,.65)),url('assets/kentucky-dusk.jpg') center/cover fixed;color:#deded6}header{padding:5px 0 10px}header h1{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:38px;letter-spacing:.045em;text-shadow:1px 2px #000;color:#dbd8cc}header h1 span{color:inherit}header p{color:#b6b8b4} .panel{background:rgba(8,12,12,.92);border:1px solid #686a5e;box-shadow:inset 0 0 0 2px #272a27,0 2px 6px #0007;border-radius:2px}.panel h2{background:rgba(21,25,23,.76);font-family:'Arial Narrow',Arial,sans-serif;font-weight:800;letter-spacing:.025em;border-color:#454b43}.trait-layout{grid-template-columns:1fr 1fr 1.30fr}.trait-heading{display:flex;gap:9px;align-items:center}.trait-heading>span{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:2px solid currentColor;border-radius:50%;font-size:22px}.trait-explanation{font-size:13px;line-height:1.4;color:#c2c4be;margin:7px 14px 9px}.trait-layout .list{padding:3px 9px 8px}.trait-layout .list .row{border:1px solid #424a43;box-shadow:inset 0 0 0 1px #191e19;margin-bottom:4px;background:rgba(19,24,21,.60);border-radius:2px}.row:hover{background:#2a3028!important}.row.chosen{border-color:var(--gold);background:#393424}.choose{font-weight:600}.trait-layout .choose{font-size:15px;padding:9px 8px}.step,.reset{background:rgba(12,16,15,.90);border:1px solid #6c6d5f;box-shadow:inset 0 0 0 2px #252b27;border-radius:2px}.step.current,.random-button{border-color:var(--gold);background:rgba(67,52,21,.80)}.primary{background:#a47e35;color:#fff1cb}.stepbar,.trait-toolbar{background:rgba(9,13,12,.85);border:1px solid #52584e;padding:9px 12px}.points strong{color:var(--gold)}.points.over strong{color:var(--red)}.bottom{padding:8px;background:rgba(8,12,11,.93);border:1px solid #52584e}.chips{min-height:80px}.chips .chip{background:#111a13}.chips .chip.negative{background:#211314}.summary-content{padding:0 13px 16px}.skills-grid{display:block}.skill-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:auto}.skill-table th{text-align:left;font-weight:400;color:#c5c9c1;padding:10px 6px;background:#161b18}.skill-table td{border-top:1px solid #464b43;padding:10px 6px}.skill-table th:last-child,.skill-table td:last-child{text-align:right}.skill-table th:first-child{width:42%}.skill-table th:nth-child(2){min-width:90px}.level-cell{display:flex;align-items:center;gap:8px;justify-content:flex-end}.level-cell strong{font-weight:400;min-width:14px}.level-cell .bars{height:14px;gap:2px;display:flex;min-width:60px;flex:1;max-width:110px}.level-cell .bar{width:auto;flex:1;background:#292d29;border:1px solid #454b40}.level-cell .bar.on{background:var(--gold);border-color:#b99243}.xp-bonus{color:var(--green);font-weight:bold;white-space:nowrap;min-width:65px}.status{color:#bdc1b7}footer{color:#b0b4a9}.tooltip{background:#080c0a;border-color:#8d8c70}.profession-description{color:#d1d2ca}.trait-toolbar input[type=search]{background:#101612;color:#eee;border-color:#5d6658}.profession-grid .row{background:#111713}.empty{color:#acb5a9}
@media(max-width:1100px){.trait-layout{grid-template-columns:1fr 1fr 1.2fr}.level-cell .bars{display:none}.skill-table{font-size:14px}.skill-table td,.skill-table th{padding:8px 4px}.trait-heading>span{display:none}header h1{font-size:30px}}
@media(max-width:720px){.trait-layout{grid-template-columns:1fr 1fr}.level-cell .bars{display:flex}.stepbar{background:#0d120f}.bottom{background:#0d120f}.trait-toolbar{gap:8px}.trait-explanation{font-size:12px;margin:6px 10px}.trait-layout .choose{font-size:14px}.panel h2{font-size:15px}header h1{font-size:27px}.trait-layout>.panel:not(.summary){height:65dvh}.skill-table th:first-child{width:40%}}

.skill-table{table-layout:fixed}.skill-table th:first-child{width:50%}.skill-table th:nth-child(2){width:22%;min-width:0}.skill-table th:last-child{width:28%}.skill-table td:first-child{overflow-wrap:anywhere}.xp-bonus{min-width:0}.skill-table .level-cell{min-width:0}
/* Keep the working lists tall while retaining the survival theme and XP. */
@media(min-width:721px){
 body{padding:10px 16px 6px}
 header{padding:0;margin-bottom:5px}header h1{font-size:27px}header p{margin-top:3px}
 #app{gap:6px}.stepbar,.trait-toolbar{padding:5px 9px}.step{padding:7px 12px}
 .bottom{padding:4px 7px;gap:7px}.bottom .reset{padding:8px 10px}
 .random-controls{flex-direction:row;align-items:center;gap:8px}
 .trait-layout{grid-template-columns:1fr 1fr 1.08fr}
 .panel h2{padding:9px 12px;font-size:17px}.trait-heading>span{display:none}
 .trait-explanation{margin:4px 12px;font-size:12px}
 .trait-layout .list .row{margin-bottom:0;box-shadow:none;border:0;border-bottom:1px solid #424a43;min-height:34px}
 .trait-layout .choose{padding:7px 6px;font-size:14px}
 .profession-grid{gap:4px 10px;padding:8px}.profession-grid .row{min-height:38px}.profession-grid .choose{padding:8px;font-size:15px}
 .skill-table td,.skill-table th{padding:6px 4px}.skill-table th:first-child{width:54%}.skill-table th:nth-child(2){width:18%}
 .level-cell .bars{display:none}.panel h3{margin:12px 0 8px}.chips{min-height:0;gap:5px}.chips .choose{padding:7px}
 .profession-description{line-height:1.35;margin:10px 0}.primary{margin:9px}
 footer{margin-top:4px;line-height:1.3}
}
@media(min-width:1101px){.skill-table th:first-child{width:46%}.skill-table th:nth-child(2){width:30%}.skill-table th:last-child{width:24%}.level-cell .bars{display:flex;min-width:0;max-width:80px}}