.surge-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}

.surge-tiles button{padding:10px 5px;min-height:59px;color:var(--muted);background:#213044;border:1px solid var(--line);border-radius:10px}

.surge-tiles button strong{display:block;font-size:1.18rem;color:var(--gold)}

.surge-tiles button.active{background:#334b60;border-color:var(--mint);color:white}

.surge-tiles button small{display:block;font-size:.65rem}

.surge-result-placeholder{padding:17px;text-align:center;color:var(--muted);border:1px dashed #567087;border-radius:11px;margin-top:12px}

.rolled{border:1px solid #5d6f6c;border-radius:14px;background:linear-gradient(135deg,#224846,#1c2f43);padding:15px;margin-top:11px}

.rolled strong{color:var(--gold)}

.rolled p{font-size:.92rem;margin-bottom:0}

.log{max-height:195px;overflow:auto;padding:3px 8px 3px 19px;color:var(--muted);font-size:.79rem}

.log li{padding:3px 0}

.toggle{background:#263849;border:1px solid var(--line);border-radius:10px;padding:7px 10px;cursor:pointer}

.toggle input{accent-color:var(--mint)}

.softdivider{height:1px;background:var(--line);margin:14px 0}

.bigemoji{font-size:1.25rem}

.safetag{display:inline-block;padding:4px 8px;background:#543b36;color:#ffd4a0;font-size:.73rem;font-weight:700;border-radius:8px}

.d100-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

.d100-entry{padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#142236;font-size:.84rem}

.d100-entry b{display:block;color:var(--gold);margin-bottom:5px}

.d100-entry.hot{border-color:var(--gold);background:#334031}

.d100-entry[hidden]{display:none}

.d100-entry p{margin:0}

.rolled .d100-result{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:10px}

.rolled .d100-result b{color:var(--gold)}

@media(max-width:740px){.d100-grid{grid-template-columns:1fr}.surge-tiles{grid-template-columns:repeat(4,1fr)}}

@media(max-width:365px){.surge-tiles button{min-height:62px;font-size:.73rem}}