/* Comparar criaturas (web/compare.js, mockup approved): face to face on the Tibia floor, the attributes from the centre to the
   side that wins (yours blue, the chosen one red), ▲/▼ chips; fits a phone. Colours of docs/DESIGN.md only. */
.cm-modal{width:min(380px,calc(100vw - 16px));max-height:calc(100dvh - 16px)}
.cm-body{display:grid;gap:5px;padding:6px}
.cm-seg{display:grid;grid-template-columns:1fr 1fr;gap:2px}.cm-seg button{min-height:28px}.cm-seg button.is-on{box-shadow:inset 0 0 0 2px #e8c547;color:#fff}
.cm-strip{display:flex;gap:4px;justify-content:center;align-items:center;flex-wrap:wrap}
.cm-pick{position:relative;display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0;background:#262626;border:1px solid #111;border-image:none;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.cm-pick.is-sel{box-shadow:inset 0 0 0 2px #e8c547,1px 1px #6a6a6a}
.cm-pick .cm-pic{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.cm-pick .cm-pl{position:absolute;left:2px;bottom:0;font-size:11px;color:#fff;text-shadow:1px 1px #000,-1px 0 #000}
.cm-pick .cm-st{position:absolute;right:2px;top:0;font-size:11px;line-height:11px;color:#e8c547;text-shadow:1px 1px #000}
.cm-strip select{max-width:120px;min-height:28px}
.cm-arena{position:relative;line-height:0;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;background:#000}
.cm-arena canvas{width:100%;height:auto;image-rendering:pixelated}
.cm-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;line-height:22px;color:#e8c547;text-shadow:2px 2px #000,-1px -1px #000,1px -1px #000,-1px 1px #000}
.cm-plates{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cm-plate{display:grid;gap:2px;align-content:start;padding:4px 5px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 0 2px var(--cm)}
.cm-plate.cm-a{--cm:#4b98da}.cm-plate.cm-b{--cm:#e8584c}
.cm-nm{display:flex;justify-content:space-between;align-items:baseline;gap:4px}.cm-nm b{color:#fff;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cm-lv{color:#e8c547}
.cm-stars{color:#e8c547;letter-spacing:-1px}.cm-stars i{font-style:normal;color:#3d3d3d}
.cm-plate small{color:#a9a9a9;line-height:12px}
.cm-sp{display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px;align-items:center;min-height:38px}.cm-sp small{color:#c0c0c0}
.cm-force{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;padding:2px 6px;background:#111;border:1px solid #000}
.cm-force b{font-size:22px;line-height:26px;font-weight:normal;color:#a9a9a9}.cm-force b.is-w{color:#fff}.cm-force b.is-w::before{content:"♛ ";color:#e8c547;font-size:16px}.cm-force small{color:#e8c547}
.cm-duelrows{display:grid;gap:3px;padding:5px 6px}
.cm-row{display:grid;grid-template-columns:38px minmax(0,1fr) 92px minmax(0,1fr) 38px;align-items:center;gap:3px}
.cm-n{color:#a9a9a9;text-align:right}.cm-n.cm-rn{text-align:left}.cm-n.is-w{color:#fff}
.cm-bar{display:flex;height:8px;background:#111;border:1px solid #000;box-shadow:1px 1px #3d3d3d}.cm-bar.cm-l{justify-content:flex-end}
.cm-bar u{display:block;height:100%;background:#5e5e5e}.cm-bar.cm-l.is-w u{background:#4b98da}.cm-bar.cm-r.is-w u{background:#e8584c}
.cm-lab{display:flex;align-items:center;justify-content:center;gap:3px;color:#c0c0c0;white-space:nowrap}
.cm-verdict{margin:0;display:flex;flex-wrap:wrap;gap:3px;align-items:center}.cm-verdict>b{font-weight:normal;color:#a9a9a9;margin-right:2px}
.cm-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 5px;background:#1c1c1c;border:1px solid #111;color:#c0c0c0}
.cm-chip.cm-up{color:#5fc85f}.cm-chip.cm-dn{color:#e8584c}
.cm-acts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px}.cm-acts button{min-height:36px}
.cm-none{margin:8px 0;text-align:center}