/* Destruitor Idle — aba Roda (a Roda do Destino) da janela do personagem (roda.js). Usa as cores do app.css. */

/* 5 abas na janela do personagem (Personagem, Outfit, Proficiência, Roda, Mortes) */
.ptabs.ptabs5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.rd { display: flex; flex-direction: column; gap: 12px; font-size: 13px; position: relative; min-width: 0; }
.rd-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rd-topo b { color: var(--txt); font-size: 15px; font-variant-numeric: tabular-nums; }
.rd-topo small { color: var(--dim); }
.rd-topo .rd-cidade { color: #e0b05a; margin-left: auto; }
.rd-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.rd-roda { display: grid; place-items: center; min-width: 0; }
.rd-svg { width: 100%; max-width: 440px; height: auto; display: block; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.rd-borda { fill: #0f1320; stroke: #2a3044; stroke-width: 2; }
.rd-meio { fill: #121624; stroke: #39425a; stroke-width: 1.5; }
.rd-livres { fill: var(--dim); font: 800 17px/1 system-ui, sans-serif; text-anchor: middle; }
.rd-livres.tem { fill: var(--gold); }
.rd-livres-t { fill: #6f7a99; font: 600 9.5px/1 system-ui, sans-serif; text-anchor: middle; letter-spacing: .06em; }
.rd-s { cursor: pointer; outline: none; }
.rd-s path { stroke-width: 1.2; stroke-opacity: .55; transition: fill-opacity .15s; }
.rd-s text { fill: #e8ecf8; font: 700 12px/1 system-ui, sans-serif; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #0b0e18; stroke-width: 2.5px; }
.rd-s.cheio path { stroke-opacity: 1; stroke-width: 2; }
.rd-s.trava path { stroke-dasharray: 3 3; stroke-opacity: .35; }
.rd-s.trava text { font-size: 9px; opacity: .55; }
.rd-s.pode:not(.cheio) path { stroke-opacity: .9; }
.rd-s.novo text { fill: var(--gold); }
.rd-s.sel path { stroke: #fff; stroke-width: 3; stroke-opacity: 1; }
.rd-s:hover path, .rd-s:focus-visible path { stroke: #e6ecff; stroke-opacity: 1; }

.rd-lado { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rd-card { background: #121624; border: 1px solid #2a3044; border-radius: 8px; padding: 10px; min-width: 0; }
.rd-sec { color: #aab3c8; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin: 2px 0 8px; }
.rd-sec small { letter-spacing: 0; text-transform: none; }
.rd-card .rd-sec ~ .rd-sec { margin-top: 12px; }
.rd-dica { margin: 2px 0; line-height: 1.45; }
.rd-det-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rd-det-h i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.rd-det-h b { color: var(--txt); font-size: 14px; }
.rd-det-p { margin-left: auto; color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.rd-l { display: grid; grid-template-columns: 78px 1fr; gap: 6px; margin: 4px 0; line-height: 1.35; }
.rd-l span { color: var(--dim); }
.rd-l b { color: var(--txt); font-weight: 600; overflow-wrap: anywhere; }
.rd-bts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.rd-bts .btn { padding: 7px 2px; min-width: 0; }
.rd-bts .btn:nth-child(5), .rd-bts .btn:nth-child(6) { grid-column: span 2; }
.rd-aviso { color: #e0b05a; margin: 6px 0 0; }

.rd-rev { margin-bottom: 8px; }
.rd-rev-h { display: flex; align-items: center; gap: 6px; }
.rd-rev-h i { width: 10px; height: 10px; border-radius: 3px; }
.rd-rev-h small { margin-left: auto; color: var(--dim); font-variant-numeric: tabular-nums; }
.rd-rev-bar { position: relative; height: 6px; margin: 4px 0 3px; border-radius: 3px; background: #22283a; overflow: hidden; }
.rd-rev-bar i { display: block; height: 100%; opacity: .85; }
.rd-rev-bar em { position: absolute; top: 0; bottom: 0; width: 1px; background: #0f1320; }
.rd-rev-st { font-size: 12px; }
.rd-ok { color: var(--ok); font-weight: 700; }

.rd-pe { display: flex; gap: 8px; align-items: center; }
.rd-pe-esp { flex: 1; }
.rd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.rd-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.rd-kv div { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px dashed #2a3044; padding: 3px 0; min-width: 0; }
.rd-kv span { color: var(--dim); }
.rd-kv b { color: var(--txt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-mags { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rd-mag { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border: 1px solid #2c3346; border-radius: 6px; background: #0f1320; }
.rd-mag b { color: var(--txt); }
.rd-mag b em { font-style: normal; color: var(--gold); margin-left: 4px; }
.rd-mag small { color: var(--dim); line-height: 1.35; }
.rd-mont { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #2a3044; flex-wrap: wrap; }
.rd-mont-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 140px; }
.rd-mont-t small { color: var(--dim); font-variant-numeric: tabular-nums; }
.rd-mont-t small i { font-style: normal; }
.rd-mont-b { display: flex; gap: 6px; }
.rd-mont.trava { opacity: .55; flex-direction: column; align-items: flex-start; gap: 2px; }
.rd-mont.trava small { color: #e0b05a; }
.rd-perg { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #2a3044; }
.rd-perg img { width: 28px; height: 28px; image-rendering: pixelated; flex: none; }
.rd-perg-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rd-perg-t b { color: var(--txt); overflow: hidden; text-overflow: ellipsis; }
.rd-perg-t small { color: var(--dim); }
.rd-perg.lido { opacity: .75; }
.rd-ficha { margin: 6px 0 0; color: #c9b8ff; }
.rd-ficha b { color: #e2d6ff; }
.rd-fechada p { margin: 6px 0 0; line-height: 1.45; }

.rd-conf { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 10, 18, .72); border-radius: 8px; z-index: 5; }
.rd-conf-b { width: min(360px, calc(100% - 24px)); padding: 14px; border: 1px solid #39425a; border-radius: 10px; background: #171a23; box-shadow: 0 10px 30px #0008; }
.rd-conf-b b { color: var(--txt); font-size: 14px; }
.rd-conf-b p { color: var(--dim); margin: 8px 0 12px; line-height: 1.45; }
.rd-conf-bt { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 759px) {
  .ptabs.ptabs5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rd-main { grid-template-columns: 1fr; }
  .rd-svg { max-width: 340px; }
  .rd-cols { grid-template-columns: 1fr; }
  .rd-kv { grid-template-columns: 1fr; }
  .rd-topo .rd-cidade { margin-left: 0; flex-basis: 100%; }
  .rd-conf { position: fixed; border-radius: 0; z-index: 80; }
  .rd-pe .btn { padding-left: 10px; padding-right: 10px; }
}