/* Seasonal monsters: the screen, the map card and the hunt result */
.mo-head { --c: #e8893a; display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: linear-gradient(color-mix(in srgb, var(--c) 22%, #1b1711), #14120d); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.mo-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mo-top > b { font-size: 16px; color: var(--c); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mo-caps > div { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.3); min-width: 0; }
.mo-caps small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-caps b { font-size: 15px; }
.mo-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.mo-bar i { display: block; height: 100%; background: var(--c, var(--c-amber)); border-radius: 3px; }

.mo-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mo-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.mo-chip.tok { background: rgba(240,180,60,.16); border-color: rgba(240,180,60,.55); color: var(--c-amber-pale); }
.mo-chips.tight { gap: 3px; } .mo-chips.tight .mo-chip { padding: 1px 5px; font-size: 11px; }

.mo-sec { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mo-link { min-height: 28px; padding: 3px 10px; font-size: 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.mo-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; width: 100%; margin: 6px 0; padding: 8px 10px; border-radius: 12px; text-align: left; color: var(--text);
  background: linear-gradient(#26332b, #18211b); border: 1px solid var(--line); border-left: 4px solid #e8893a; }
.mo-item.rally { border-left-color: var(--c-blood); } .mo-item.hunt { border-left-color: #6d7a70; } .mo-item.hunt.good { border-left-color: var(--good); } .mo-item.hunt.bad { border-left-color: var(--bad); }
.mo-item .mid { display: grid; gap: 2px; min-width: 0; }
.mo-item .mid b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-item .mid em { margin-left: 6px; font-style: normal; font-size: 11px; color: var(--c-amber-pale); }
.mo-item .mid small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-face { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; font-size: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #4a3a26, #15120c); border: 2px solid var(--c, #e8893a); }
.mo-face.sm { width: 46px; height: 46px; font-size: 24px; border-radius: 12px; --c: #5a4a32; }
.mo-item.rally .mo-face.sm { --c: #7a3a30; background: radial-gradient(circle at 50% 35%, #4a2a22, #1a100d); }
.mo-face i { position: absolute; left: 0; right: 0; bottom: 0; font: 800 10px/13px system-ui; text-align: center; color: #ffe9c4; background: rgba(40,28,12,.9); border-radius: 0 0 9px 9px; }
.mo-go { min-width: 52px; padding: 8px 12px; border-radius: 10px; font-weight: 800; background: linear-gradient(var(--c-amber), #c98a1e); border: 0; color: #1c1a10; }
.mo-go.ghost { min-width: 0; background: none; color: var(--muted); font-size: 20px; padding: 0 4px; }
.mo-find { display: grid; gap: 5px; margin: 4px 0 2px; }
.mo-find small { font-size: 11.5px; color: var(--muted); }
.mo-levels { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.mo-levels button { padding: 5px 0; min-width: 0; font-size: 12px; font-weight: 800; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--text); }
.mo-levels button.done { background: rgba(94,196,107,.18); border-color: rgba(94,196,107,.6); color: #9ff0c4; }
.mo-rules { margin-top: 12px; }

/* map card */
.mo-banner { --c: #e8893a; display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 10px; margin: 6px 0 8px; border-radius: 12px; border-left: 6px solid var(--c); background: color-mix(in srgb, var(--c) 14%, #12170f); }
.mo-banner > div { display: grid; gap: 2px; min-width: 0; } .mo-banner b { color: var(--c); } .mo-banner small { font-size: 12.5px; opacity: .85; }
.mo-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.mo-row b { text-align: right; }
.mo-odds { --c: var(--c-amber); margin: 8px 0 2px; padding: 6px; border-radius: 10px; text-align: center; font-weight: 900; color: var(--c); border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.mo-role { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
.mo-first { display: grid; gap: 6px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px dashed var(--line); }
.mo-first.open { color: var(--c-amber-pale); background: rgba(240,180,60,.1); border: 1px solid rgba(240,180,60,.5); }
.mo-why { margin: 8px 0 0; padding: 7px 10px; border-radius: 10px; background: rgba(224,87,76,.12); border: 1px solid rgba(224,87,76,.45); color: #ffb3aa; font-size: 13px; text-align: center; }
.mo-why.soft { background: rgba(255,255,255,.05); border-color: var(--line); color: var(--muted); }
.mo-result { margin: 6px 0 8px; padding: 10px; border-radius: 12px; text-align: center; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.mo-result.good { background: rgba(94,196,107,.14); border-color: rgba(94,196,107,.6); color: #b9f5c9; } .mo-result.bad { background: rgba(224,87,76,.14); border-color: rgba(224,87,76,.6); color: #ffb3aa; }

/* reward table */
.mo-table { display: grid; gap: 2px; margin: 8px 0; }
.mo-tr { display: grid; grid-template-columns: 28px 58px 1fr 1fr; gap: 6px; align-items: center; padding: 5px 4px; font-size: 12.5px; border-radius: 8px; background: rgba(255,255,255,.04); }
.mo-tr.head { background: none; color: var(--muted); font-size: 11.5px; } .mo-tr.done { background: rgba(94,196,107,.08); } .mo-tr .ok { color: #9ff0c4; font-size: 12px; }
/* the rally sheet shows what a monster rally pays */
.rl-note { font-size: 12px; color: var(--c-amber-pale); }