html{background-color:#2b2f33;font-family:sans-serif}body{width:100%;max-width:200ch;height:100%;margin:0 auto;padding:1rem;line-height:1.5}*{box-sizing:border-box}h1{color:#3ce3d6;font-size:4rem;margin:1rem 0}h2{color:#888}button:hover{cursor:pointer}.main-content{display:flex;flex-direction:column;gap:1rem;padding:1rem;justify-content:center;align-items:center}.initiative-tracker{width:100%;border-collapse:collapse;color:#f5f7fa;background-color:#1f2327}.initiative-tracker-container{width:min(100%,80rem);overflow-x:visible}.initiative-tracker th,.initiative-tracker td{padding:.75rem 1rem;border:1px solid #3b434b;text-align:left}.initiative-tracker th{color:#3ce3d6}.initiative-tracker thead th:nth-child(6),.initiative-tracker tbody tr:not(.new-character-row) td:nth-child(6){width:15rem;min-width:15rem;max-width:15rem}.initiative-tracker tr.active{color:#c2ba23}.initiative-tracker tr.dragging{opacity:.45}.initiative-tracker tr.drop-top td{border-top:2px solid #3ce3d6}.initiative-tracker tr.drop-bottom td{border-bottom:2px solid #3ce3d6}.row-drag-handle{width:1.75rem;height:1.75rem;border:1px solid #3b434b;border-radius:.25rem;background-color:#2b2f33;color:#f5f7fa;cursor:grab;line-height:1}.row-drag-handle:active{cursor:grabbing}.row-actions-cell{text-align:center;white-space:nowrap}.row-delete-button{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:1px solid #4b2323;border-radius:999px;background-color:transparent;color:#f87171;padding:0;font-size:1rem;font-weight:700;line-height:.9;cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease,transform .15s ease}.row-delete-button:hover{border-color:#7f1d1d;background-color:#991b1b29;color:#fca5a5}.row-delete-button:active{transform:translateY(1px)}.row-delete-button:focus-visible{outline:2px solid rgba(252,165,165,.8);outline-offset:2px}.health-cell{display:flex;flex-direction:row;gap:.35rem;flex-wrap:wrap;align-items:center;justify-content:space-between}.health-controls{display:flex;align-items:stretch;justify-content:flex-end;gap:.35rem;margin-bottom:.4rem}.health-adjust-stack{display:flex;flex-direction:column;gap:.25rem}.health-adjust-button{width:2rem;height:2rem;border:1px solid #3b434b;border-radius:.25rem;background-color:#2b2f33;color:#f5f7fa;cursor:pointer;font-size:1.1rem;font-weight:700;line-height:1;padding:0}.health-adjust-button.add{color:#86efac;border-color:#1f6c3b}.health-adjust-button.subtract{color:#fca5a5;border-color:#7f1d1d}.health-adjust-input,.character-initiative-input{width:4rem;border:1px solid #3b434b;border-radius:.25rem;background-color:#2b2f33;color:#f5f7fa;padding:.35rem .4rem;font-size:.9rem;text-align:center}.health-adjust-input{align-self:stretch}.character-initiative-input{height:2rem}.health-adjust-input::-webkit-inner-spin-button,.health-adjust-input::-webkit-outer-spin-button,.character-initiative-input::-webkit-inner-spin-button,.character-initiative-input::-webkit-outer-spin-button{align-self:stretch;opacity:1;margin-left:.25rem}.health-container{flex-grow:1}.health-bar{width:100%;height:.45rem;margin-top:.35rem;background-color:#3b434b;border-radius:999px;overflow:hidden;z-index:1}.health-bar-fill{height:100%;transition:width .15s ease}.shield-bar{width:100%;height:.45rem;margin-top:.35rem;background-color:transparent;border-radius:999px;overflow:hidden;z-index:2}.shield-bar-fill{height:100%;transition:width .15s ease;background-color:#3b82f6}.health-bar-fill.health-high{background-color:#22c55e}.health-bar-fill.health-mid{background-color:#eab308}.health-bar-fill.health-low{background-color:#ef4444}.initiative-tracker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;color:#fff}.status-cell{position:relative;width:100%;--condition-icon-size: 3rem}.status-icon-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--condition-icon-size),1fr));align-items:center;gap:.3rem}.status-icon-list>.condition-chip,.status-icon-list>.status-menu-toggle{width:100%;min-width:0;height:auto;aspect-ratio:1 / 1}.condition-chip,.status-menu-item{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--condition-icon-size);height:var(--condition-icon-size);border:1px solid #3b434b;border-radius:.35rem;background-color:#2b2f33;color:#f5f7fa;font-size:1rem;line-height:1;padding:.15rem;cursor:pointer}.condition-chip{border-color:#3ce3d6;background-color:#3ce3d61f;cursor:help}.condition-chip img,.status-menu-item img{display:block;width:100%;height:100%;object-fit:contain}.status-menu-toggle{width:var(--condition-icon-size);height:var(--condition-icon-size);border:1px dashed #3b434b;border-radius:.35rem;background-color:transparent;color:#9aa4ae;font-size:1rem;font-weight:700;line-height:1;padding:0}.status-menu-toggle:hover,.status-menu-item:hover{border-color:#3ce3d6;color:#3ce3d6}.status-menu{position:absolute;z-index:20;top:calc(100% + .35rem);left:0;display:grid;grid-template-columns:repeat(4,auto);gap:.3rem;padding:.5rem;border:1px solid #3b434b;border-radius:.5rem;background-color:#1f2327;box-shadow:0 8px 20px #00000073}.status-menu-item.active{border-color:#3ce3d6;background-color:#3ce3d62e}.condition-tooltip{position:absolute;bottom:calc(100% + .4rem);left:50%;transform:translate(-50%);z-index:30;width:16rem;padding:.5rem .6rem;border:1px solid #3b434b;border-radius:.4rem;background-color:#11151a;color:#f5f7fa;font-size:.75rem;line-height:1.35;text-align:left;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease}.condition-tooltip strong{display:block;color:#3ce3d6;margin-bottom:.2rem}.condition-chip:hover .condition-tooltip,.condition-chip:focus-visible .condition-tooltip,.status-menu-item:hover .condition-tooltip,.status-menu-item:focus-visible .condition-tooltip{opacity:1;visibility:visible}.initiative-tracker-footer{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.5rem}.initiative-tracker-audio-container{color:#fff;display:flex;gap:.5rem;align-items:flex-start;flex-direction:column}.audio-select-container{display:flex;gap:.5rem;align-items:center}.initiative-tracker-turn-buttons-container{display:flex;gap:1rem;justify-content:flex-end;align-items:center;margin-top:.5rem}.audio-players-container{display:flex;gap:.5rem;align-items:flex-start;flex-direction:column}.audio-container{display:flex;align-items:center;gap:8px}.add-character-row td{text-align:center}.add-character-row-button-container{display:flex;justify-content:center;align-items:center;gap:.5rem}.add-character-row button,.new-character-actions button{border:1px solid #3b434b;border-radius:.25rem;background-color:#2b2f33;color:#f5f7fa;padding:.4rem .75rem}.new-character-row input:not([type=checkbox]){width:100%;border:1px solid #3b434b;border-radius:.25rem;background-color:#2b2f33;color:#f5f7fa;padding:.4rem .5rem}.initiative-input-wrap{display:flex;flex-direction:column;gap:.1rem}.initiative-input:disabled{opacity:.55;cursor:not-allowed}.initiative-auto-roll-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;color:#cbd5e1;font-size:.8rem;cursor:pointer;user-select:none}.initiative-auto-roll-checkbox{width:auto;height:auto;flex:0 0 auto;margin:0;cursor:pointer}.new-character-health-inputs{display:flex;align-items:center;gap:.35rem}.new-character-health-inputs input{min-width:0}.new-character-actions{display:flex;align-items:center;gap:.5rem}.new-character-actions input{min-width:8rem}.monster-search{position:relative}.monster-suggestion-list{position:absolute;z-index:20;top:calc(100% + .25rem);left:0;right:0;list-style:none;margin:0;padding:.25rem;border:1px solid #3b434b;border-radius:.25rem;background-color:#1f2327;max-height:14rem;overflow-y:auto}.monster-suggestion-option{display:flex;width:100%;border:0;border-radius:.25rem;background:transparent;color:#f5f7fa;cursor:pointer;text-align:left;padding:.35rem .5rem;gap:.3rem;flex-direction:column}.monster-suggestion-option:hover,.monster-suggestion-option:focus-visible{background-color:#2b2f33;outline:none}.monster-suggestion-name{font-size:.95rem}.monster-suggestion-meta{font-size:.75rem;color:#9ca3af}.copyright-footer{width:100%;margin:1em;text-align:center;font-size:.875rem;color:#888}