:root{--bg-body:#121212;--bg-panel-indigo:#1a237e;--bg-panel-deep-blue:#283593;--bg-panel-dark:#2c3e50;--bg-panel-inner:#34495e;--bg-log:#222;--bg-composition:#0003;--color-green:#4caf50;--color-light-green:#aed581;--color-blue-grey:#607d8b;--color-accent-blue:#3f51b5;--color-orange:#ff9800;--color-red:#e74c3c;--color-dark-red:#c0392b;--color-blue:#2980b9;--color-carrot:#e67e22;--color-purple:#9b59b6;--text-white:#fff;--text-light-gray:#ccc;--text-lighter-gray:#ddd;--text-muted:#aaa;--text-light-muted:#bdc3c7;--text-gold:gold;--text-gray:gray;--border-color:#5c6bc0;--border-dark:#333;--border-input:#444}body{background-color:var(--bg-body);color:var(--text-white);margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{max-width:500px;margin:0 auto;padding:20px}.flex-row{gap:10px;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.align-center{align-items:center}.gap-8{gap:8px}.flex-1{flex:1}.flex-2{flex:2}.w-100{box-sizing:border-box;width:100%}.text-center{text-align:center}.m-0{margin:0}.mt-0{margin-top:0}.mt-15{margin-top:15px}.mt-20{margin-top:20px}.mb-5{margin-bottom:5px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}.mb-20{margin-bottom:20px}.pt-20{padding-top:20px}.text-white{color:var(--text-white)}.status-text{color:var(--text-gray)}.text-gold{color:var(--text-gold)}.text-green{color:var(--color-green)}.text-red{color:var(--color-red)}.text-orange{color:var(--color-orange)}.text-muted{color:var(--text-muted)}.text-light-muted{color:var(--text-light-muted)}.text-light-gray{color:var(--text-light-gray)}.text-light-green{color:var(--color-light-green)}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.text-sm{font-size:14px}.text-13{font-size:13px}.text-xs{font-size:12px}.text-xxs{font-size:11px}.form-input{box-sizing:border-box;border:1px solid var(--border-input);color:#000;background:#fff;border-radius:4px;padding:8px}.form-select{color:#000;box-sizing:border-box;background:#ecf0f1;border:none;border-radius:4px;padding:8px;font-weight:700}.form-textarea{box-sizing:border-box;resize:vertical;border:none;border-radius:3px;padding:5px;font-size:12px}.label-block{display:block}.btn{cursor:pointer;color:#fff;text-align:center;box-sizing:border-box;border:none;border-radius:4px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-sm{border-radius:3px;padding:3px 8px;font-size:12px}.btn-md{padding:8px 15px}.btn-lg{padding:10px}.btn-xl{padding:12px}.btn-save{border-radius:3px;padding:6px;font-size:12px}.btn-inner{padding:8px}.btn-green{background:var(--color-green)}.btn-blue-grey{background:var(--color-blue-grey)}.btn-accent-blue{background:var(--color-accent-blue)}.btn-orange{background:var(--color-orange)}.btn-red{background:var(--color-red)}.btn-dark-red{background:var(--color-dark-red)}.btn-blue{background:var(--color-blue)}.btn-carrot{background:var(--color-carrot)}.btn-purple{background:var(--color-purple)}.btn-inner-bg{background:var(--bg-panel-inner)}.panel{border-radius:8px}.panel-indigo{background:var(--bg-panel-indigo);padding:20px}.panel-deep-blue{background:var(--bg-panel-deep-blue);padding:15px}.panel-dark{background:var(--bg-panel-dark);padding:15px}.panel-inner{background:var(--bg-panel-inner);border-radius:4px;padding:10px}.game-board{background:var(--bg-panel-indigo);border-radius:8px;padding:15px}.divider-top{border-top:1px solid var(--border-color)}.divider-bottom{border-top:none;border-bottom:1px solid var(--border-dark);margin:15px 0}.list-unstyled{color:var(--text-lighter-gray);margin:0;padding:0;list-style:none}.log-box{background:var(--bg-log);border-radius:5px;min-height:100px;padding:10px}.composition-box{color:var(--color-green);background:var(--bg-composition);border-radius:3px;padding:8px;font-size:14px;font-weight:700;line-height:1.6}.death-tag{color:var(--color-red);text-shadow:2px 2px 4px #000;font-size:28px;font-weight:700}.my-role-title{margin:5px 0}.role-config-row{flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:8px;display:flex}@media (width<=600px){.role-config-row>.role-name{flex:100px!important}.role-config-row>.role-count{flex:40px!important}.role-config-row>label{margin-right:5px;font-size:11px}}