/* ============================================================================ TMIB Team Planner — Stylesheet Dark-themed to match the Godforge site aesthetic. Intentionally uses the site's existing .rarity-* classes. ============================================================================ */ /* ── Scoped tokens ───────────────────────────────────────────────────────── */ .tmib-tp { --tp-bg: #0d0f18; --tp-surface: #161923; --tp-surface-2: #1e2130; --tp-border: #2a2e42; --tp-accent: #f0a800; --tp-accent-dark: #c48a00; --tp-accent-glow: rgba(240,168,0,.18); --tp-text: #dde0ef; --tp-text-muted: #7a7f9a; --tp-buff: #1b4d2a; --tp-buff-light: #4caf50; --tp-debuff: #4d1b1b; --tp-debuff-light: #e53935; --tp-disable: #2e1b4d; --tp-disable-light:#9c57e8; --tp-radius: 8px; --tp-radius-lg: 14px; --tp-shadow: 0 4px 24px rgba(0,0,0,.6); --tp-transition: 0.16s ease; } /* ── Page-width override ─────────────────────────────────────────────────── */ /* Force the planner to use the full viewport width regardless of the theme's content column constraint. Applies only when the planner is the primary content on the page. */ .tmib-tp-page .site-content, .tmib-tp-page .entry-content, .tmib-tp-page .wp-block-post-content, .tmib-tp-page article, .tmib-tp-page .content-area { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* ── Outer wrapper ───────────────────────────────────────────────────────── */ .tmib-tp { background: var(--tp-bg); color: var(--tp-text); border-radius: var(--tp-radius-lg); padding: 1.5rem; font-family: inherit; /* Full-bleed on pages that carry .tmib-tp-page on */ width: 100%; box-sizing: border-box; } /* ── Header ──────────────────────────────────────────────────────────────── */ .tmib-tp__title { font-size: 1.7rem; font-weight: 700; margin: 0 0 .65rem; color: var(--tp-text); } .tmib-tp__title-row { margin-bottom: 1.1rem; } .tmib-tp__label { display: block; font-size: .85rem; font-weight: 700; color: #9ca3af; margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .07em; } .tmib-tp__team-title-input { width: 100%; box-sizing: border-box; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); color: var(--tp-text); padding: .6rem .9rem; font-size: 1rem; transition: border-color var(--tp-transition), box-shadow var(--tp-transition); } .tmib-tp__team-title-input:focus { outline: none; border-color: var(--tp-accent); box-shadow: 0 0 0 3px var(--tp-accent-glow); } .tmib-tp__team-title-input::placeholder { color: var(--tp-text-muted); } /* ── Slot grid ───────────────────────────────────────────────────────────── */ .tmib-tp__slots { display: grid; grid-template-columns: repeat( 5, minmax(0, 1fr) ); gap: .75rem; margin-bottom: 1.25rem; } @media ( max-width: 1100px ) { .tmib-tp__slots { grid-template-columns: repeat( 3, minmax(0,1fr) ); } } @media ( max-width: 680px ) { .tmib-tp__slots { grid-template-columns: repeat( 2, minmax(0,1fr) ); } } @media ( max-width: 400px ) { .tmib-tp__slots { grid-template-columns: 1fr; } } .tmib-tp__slot { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); padding: .85rem .8rem; display: flex; flex-direction: column; gap: .55rem; min-height: 180px; transition: border-color var(--tp-transition), box-shadow var(--tp-transition); /* Ensure content never overflows the column */ overflow: hidden; min-width: 0; } /* When a hero is assigned, border & glow shift to their rarity colour */ .tmib-tp__slot:has(.tmib-tp__slot-filled:not([hidden])) { border-color: var(--tp-rarity-colour, var(--tp-border)); box-shadow: 0 0 12px color-mix(in srgb, var(--tp-rarity-colour, transparent) 20%, transparent); } /* Fallback for browsers without :has() — JS sets the property directly */ .tmib-tp__slot { border-color: var(--tp-rarity-colour, var(--tp-border)); } .tmib-tp__slot--leader { /* Leader slot: rarity colour takes priority; accent is the fallback */ border-color: var(--tp-rarity-colour, var(--tp-accent)); } .tmib-tp__slot-header { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; } .tmib-tp__slot-label { font-weight: 700; font-size: 1rem; white-space: nowrap; color: var(--tp-text-muted); } .tmib-tp__leader-badge { background: transparent; color: #fff; font-size: .8rem; font-weight: 700; padding: 0; border-radius: 0; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; } .tmib-tp__slot-clear { margin-left: auto; background: none; border: none; color: var(--tp-text-muted); cursor: pointer; font-size: .7rem; line-height: 1; padding: 0 .1rem; flex-shrink: 0; transition: color var(--tp-transition); } .tmib-tp__slot-clear:hover { color: var(--tp-debuff-light); } /* ── Slot — empty state ──────────────────────────────────────────────────── */ .tmib-tp__slot-empty { flex: 1; display: flex; align-items: center; justify-content: center; } /* ── Slot — filled state ─────────────────────────────────────────────────── */ .tmib-tp__slot-filled { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 0; } .tmib-tp__hero-avatar { width: 77px; height: 77px; border-radius: 50%; object-fit: cover; border: 2px solid var(--tp-rarity-colour, var(--tp-border)); align-self: center; display: block; flex-shrink: 0; } .tmib-tp__hero-name { text-align: center; font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hero name uses site rarity classes — no extra rule needed, but let's make sure the colour doesn't get overridden here. */ .tmib-tp__hero-name.rarity-legendary { color: #fbbf24; } .tmib-tp__hero-name.rarity-epic { color: #c084fc; } .tmib-tp__hero-name.rarity-rare { color: #60a5fa; } .tmib-tp__hero-archetype { display: block; text-align: center; font-size: .72rem; color: var(--tp-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: -.15rem; } .tmib-tp__sub-label { display: block; font-size: .68rem; color: var(--tp-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .15rem; } /* ── Dropdowns ───────────────────────────────────────────────────────────── */ .tmib-tp__weapon-wrap, .tmib-tp__imprint-wrap, .tmib-tp__armor-wrap { min-width: 0; } .tmib-tp__weapon-select, .tmib-tp__imprint-select, .tmib-tp__armor-add-select { width: 100%; box-sizing: border-box; background: var(--tp-surface-2); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); color: var(--tp-text); padding: .38rem .55rem; font-size: .78rem; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237a7f9a' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .55rem center; padding-right: 1.6rem; /* Prevent overflow inside narrow slots */ min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: border-color var(--tp-transition); } /* Armor set selector gets a bit more breathing room */ .tmib-tp__armor-add-select { font-size: .82rem; padding: .45rem .55rem; padding-right: 1.6rem; } .tmib-tp__weapon-select:focus, .tmib-tp__imprint-select:focus, .tmib-tp__armor-add-select:focus { outline: none; border-color: var(--tp-accent); } .tmib-tp__weapon-select option, .tmib-tp__imprint-select option, .tmib-tp__armor-add-select option { background: var(--tp-surface-2); color: var(--tp-text); } /* ── Equipped item icon row (weapon / imprint) ───────────────────────────── */ .tmib-tp__equip-icon-row { display: flex; align-items: center; justify-content: center; margin-top: .25rem; } .tmib-tp__equip-icon { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--tp-border); cursor: help; transition: border-color var(--tp-transition), box-shadow var(--tp-transition); display: block; } .tmib-tp__equip-icon:hover { border-color: var(--tp-accent); box-shadow: 0 0 8px var(--tp-accent-glow); } /* ── Armor list ──────────────────────────────────────────────────────────── */ .tmib-tp__armor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; } .tmib-tp__armor-item { display: flex; align-items: flex-start; gap: .4rem; background: var(--tp-surface-2); border: 1px solid var(--tp-border); border-radius: 6px; padding: .35rem .55rem; font-size: .85rem; cursor: help; min-width: 0; } .tmib-tp__armor-icon { width: 22px; height: 22px; object-fit: cover; border-radius: 3px; flex-shrink: 0; margin-top: .1rem; } /* Wrapper for name row + bonus line */ .tmib-tp__armor-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .tmib-tp__armor-name-row { display: flex; align-items: center; gap: .3rem; min-width: 0; } .tmib-tp__armor-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } /* Piece count badge: 4pc / 6pc */ /* color: !important prevents body.dark-mode span { color: #e0e0e0 } from washing out the text */ .tmib-tp__armor-count { background: var(--tp-accent-dark); color: #000 !important; font-size: .62rem; font-weight: 800; border-radius: 4px; padding: .05rem .3rem; flex-shrink: 0; white-space: nowrap; } /* Active bonus text below the name */ .tmib-tp__armor-bonus { font-size: .7rem; color: var(--tp-buff-light); white-space: normal; line-height: 1.3; } .tmib-tp__armor-remove { background: none; border: none; color: var(--tp-text-muted); cursor: pointer; font-size: .7rem; line-height: 1; flex-shrink: 0; padding: 0 .1rem; transition: color var(--tp-transition); } .tmib-tp__armor-remove:hover { color: var(--tp-debuff-light); } /* ── SPD override ────────────────────────────────────────────────────────── */ .tmib-tp__spd-wrap { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; } .tmib-tp__spd-wrap .tmib-tp__sub-label { margin-bottom: 0; white-space: nowrap; flex-shrink: 0; } .tmib-tp__spd-input { width: 100%; box-sizing: border-box; background: var(--tp-surface-2); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); color: var(--tp-text); padding: .3rem .5rem; font-size: .82rem; text-align: center; /* Hide browser spin arrows */ -moz-appearance: textfield; appearance: textfield; transition: border-color var(--tp-transition), box-shadow var(--tp-transition); } .tmib-tp__spd-input::-webkit-outer-spin-button, .tmib-tp__spd-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .tmib-tp__spd-input:focus { outline: none; border-color: var(--tp-accent); box-shadow: 0 0 0 2px var(--tp-accent-glow); } /* In the turn order list, highlight an overridden speed value */ .tmib-tp__turn-spd--override { color: var(--tp-accent); font-style: italic; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .tmib-tp__btn { display: inline-flex; align-items: center; justify-content: center; padding: .52rem 1.1rem; border-radius: var(--tp-radius); font-size: .88rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: background var(--tp-transition), color var(--tp-transition), border-color var(--tp-transition), box-shadow var(--tp-transition); white-space: nowrap; } .tmib-tp__btn--primary { background: var(--tp-accent); color: #000; border-color: var(--tp-accent); } .tmib-tp__btn--primary:hover { background: var(--tp-accent-dark); border-color: var(--tp-accent-dark); box-shadow: 0 0 10px var(--tp-accent-glow); } .tmib-tp__btn--secondary { background: var(--tp-surface-2); color: var(--tp-text); border-color: var(--tp-border); } .tmib-tp__btn--secondary:hover { border-color: var(--tp-text-muted); } .tmib-tp__btn--outline { background: transparent; color: var(--tp-text); border-color: var(--tp-border); } .tmib-tp__btn--outline:hover { border-color: var(--tp-accent); color: var(--tp-accent); } .tmib-tp__btn--danger { background: transparent; color: var(--tp-debuff-light); border-color: var(--tp-debuff); } .tmib-tp__btn--danger:hover { background: var(--tp-debuff); } .tmib-tp__btn--sm { padding: .28rem .65rem; font-size: .78rem; } .tmib-tp__select-hero-btn { background: var(--tp-accent); color: #000; font-weight: 700; border: none; border-radius: var(--tp-radius); padding: .55rem 1rem; cursor: pointer; font-size: .88rem; transition: background var(--tp-transition), box-shadow var(--tp-transition); } .tmib-tp__select-hero-btn:hover { background: var(--tp-accent-dark); box-shadow: 0 0 10px var(--tp-accent-glow); } /* ── Modal ───────────────────────────────────────────────────────────────── */ .tmib-tp__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 9998; backdrop-filter: blur(2px); } .tmib-tp__modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: none; } .tmib-tp__modal:not([hidden]) { pointer-events: auto; } .tmib-tp__modal-inner { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); box-shadow: var(--tp-shadow); width: min( 860px, 96vw ); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; } .tmib-tp__modal-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.2rem; border-bottom: 1px solid var(--tp-border); } .tmib-tp__modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; } .tmib-tp__modal-close { background: none; border: none; color: var(--tp-text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color var(--tp-transition); } .tmib-tp__modal-close:hover { color: var(--tp-text); } .tmib-tp__modal-filters { display: flex; gap: .55rem; padding: .7rem 1.2rem; border-bottom: 1px solid var(--tp-border); flex-wrap: wrap; } .tmib-tp__hero-search, .tmib-tp__filter-select { flex: 1; min-width: 100px; background: var(--tp-surface-2); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); color: var(--tp-text); padding: .42rem .7rem; font-size: .88rem; transition: border-color var(--tp-transition); } .tmib-tp__hero-search:focus, .tmib-tp__filter-select:focus { outline: none; border-color: var(--tp-accent); } .tmib-tp__hero-search::placeholder { color: var(--tp-text-muted); } .tmib-tp__hero-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 105px, 1fr ) ); gap: .65rem; padding: 1rem 1.2rem; overflow-y: auto; flex: 1; } /* ── Hero card (modal) ───────────────────────────────────────────────────── */ .tmib-tp__hero-card { background: var(--tp-surface-2); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); padding: .65rem .45rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; transition: border-color var(--tp-transition), transform var(--tp-transition), box-shadow var(--tp-transition); text-align: center; } .tmib-tp__hero-card:hover { border-color: var(--tp-rarity-colour, var(--tp-accent)); transform: translateY(-2px); /* Fallback glow for browsers without color-mix() */ box-shadow: 0 4px 18px var(--tp-accent-glow); /* Rarity-tinted glow for modern browsers */ box-shadow: 0 4px 18px color-mix(in srgb, var(--tp-rarity-colour, var(--tp-accent)) 35%, transparent); } .tmib-tp__hero-card:hover .tmib-tp__hero-card-avatar { border-color: var(--tp-rarity-colour, var(--tp-accent)); } .tmib-tp__hero-card--used { opacity: .3; cursor: not-allowed; pointer-events: none; } .tmib-tp__hero-card-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--tp-surface); display: flex; align-items: center; justify-content: center; border: 2px solid var(--tp-rarity-colour, var(--tp-border)); flex-shrink: 0; transition: border-color var(--tp-transition), box-shadow var(--tp-transition); } .tmib-tp__hero-card-avatar img { width: 100%; height: 100%; object-fit: cover; } .tmib-tp__hero-card-initial { font-size: 1.3rem; font-weight: 700; color: var(--tp-accent); } .tmib-tp__hero-card-name { font-size: .75rem; font-weight: 600; line-height: 1.2; word-break: break-word; } /* Rarity on modal hero cards */ .tmib-tp__hero-card-name.rarity-legendary { color: #fbbf24; } .tmib-tp__hero-card-name.rarity-epic { color: #c084fc; } .tmib-tp__hero-card-name.rarity-rare { color: #60a5fa; } .tmib-tp__hero-card-meta { font-size: .65rem; color: var(--tp-text-muted); } .tmib-tp__no-results { grid-column: 1 / -1; text-align: center; color: var(--tp-text-muted); padding: 2rem 0; } /* ── Notes ───────────────────────────────────────────────────────────────── */ .tmib-tp__notes-section { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); margin-bottom: 1.1rem; overflow: hidden; } .tmib-tp__notes-tabs { display: flex; border-bottom: 1px solid var(--tp-border); } .tmib-tp__notes-tab { padding: .55rem 1rem; background: none; border: none; color: var(--tp-text-muted); cursor: pointer; font-size: .86rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--tp-transition), border-color var(--tp-transition); } .tmib-tp__notes-tab--active { color: var(--tp-text); border-bottom-color: var(--tp-accent); } .tmib-tp__notes-body { padding: .7rem 1rem; } .tmib-tp__notes-textarea { width: 100%; box-sizing: border-box; background: transparent; border: none; color: var(--tp-text); font-family: inherit; font-size: .9rem; resize: vertical; min-height: 120px; line-height: 1.6; } .tmib-tp__notes-textarea:focus { outline: none; } .tmib-tp__notes-textarea::placeholder { color: var(--tp-text-muted); } .tmib-tp__notes-hint { margin: .35rem 0 0; font-size: .72rem; color: var(--tp-accent); opacity: .85; } .tmib-tp__notes-preview { min-height: 60px; font-size: .9rem; line-height: 1.7; } .tmib-tp__notes-preview h3, .tmib-tp__notes-preview h4, .tmib-tp__notes-preview h5 { margin: .5rem 0 .2rem; color: var(--tp-accent); } .tmib-tp__notes-preview ul, .tmib-tp__notes-preview ol { margin: .25rem 0 .25rem 1.3rem; padding: 0; } .tmib-tp__notes-preview code { background: var(--tp-surface-2); border: 1px solid var(--tp-border); border-radius: 4px; padding: .1em .35em; font-size: .85em; } .tmib-tp__notes-preview hr { border: none; border-top: 1px solid var(--tp-border); margin: .75rem 0; } .tmib-tp__notes-empty { color: var(--tp-text-muted); font-style: italic; } /* ── Actions row ─────────────────────────────────────────────────────────── */ .tmib-tp__actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-bottom: 1.1rem; align-items: center; } /* ── My Teams panel ──────────────────────────────────────────────────────── */ .tmib-tp__teams-panel { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); padding: 1rem 1.2rem; margin-bottom: 1.1rem; } .tmib-tp__teams-panel-title { margin: 0 0 .7rem; font-size: 1rem; font-weight: 700; } .tmib-tp__teams-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; } .tmib-tp__teams-item { display: flex; align-items: center; justify-content: space-between; background: var(--tp-surface-2); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); padding: .45rem .8rem; gap: .65rem; } .tmib-tp__teams-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; } .tmib-tp__teams-item-actions { display: flex; gap: .35rem; flex-shrink: 0; } .tmib-tp__teams-empty { color: var(--tp-text-muted); font-size: .88rem; } /* ── Summary panel ───────────────────────────────────────────────────────── */ .tmib-tp__summary { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-lg); padding: 1.1rem 1.2rem; } .tmib-tp__summary-title { margin: 0 0 .9rem; font-size: 1.05rem; font-weight: 700; } .tmib-tp__summary-section { margin-bottom: 1.1rem; } .tmib-tp__summary-section:last-child { margin-bottom: 0; } .tmib-tp__summary-section h4 { margin: 0 0 .45rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tp-text-muted); display: flex; align-items: center; gap: .4rem; } .tmib-tp__summary-section h4::after { content: ''; flex: 1; height: 1px; background: var(--tp-border); } .tmib-tp__summary-section h4 small { text-transform: none; font-size: .75em; letter-spacing: 0; } /* ── Turn order ──────────────────────────────────────────────────────────── */ .tmib-tp__turn-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; } .tmib-tp__turn-item { display: flex; align-items: center; gap: .55rem; background: var(--tp-surface-2); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); padding: .38rem .7rem; } .tmib-tp__turn-rank { width: 1.4rem; text-align: center; font-weight: 800; color: var(--tp-accent); flex-shrink: 0; font-size: .9rem; } .tmib-tp__turn-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .tmib-tp__turn-name { flex: 1; font-size: .88rem; font-weight: 500; } .tmib-tp__turn-spd { font-size: .75rem; color: var(--tp-accent); flex-shrink: 0; font-weight: 600; } /* ── Effect lists ────────────────────────────────────────────────────────── */ .tmib-tp__effect-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .28rem; } .tmib-tp__effect-none { color: var(--tp-text-muted); font-size: .82rem; font-style: italic; } .tmib-tp__effect-item details { background: var(--tp-surface-2); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); overflow: hidden; } .tmib-tp__effect-item summary { display: flex; align-items: baseline; gap: .35rem; padding: .4rem .7rem; cursor: pointer; list-style: none; user-select: none; /* Allow long descriptions to wrap rather than push layout */ flex-wrap: wrap; row-gap: .1rem; } .tmib-tp__effect-item summary::-webkit-details-marker { display: none; } .tmib-tp__effect-item details[open] summary { border-bottom: 1px solid var(--tp-border); } .tmib-tp__effect-name { font-size: .86rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; } /* Inline description after the name (NAME – description) */ .tmib-tp__effect-desc-inline { font-size: .78rem; color: var(--tp-text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; } /* Buff / Debuff / Disable colour — use enhanced site-level colours */ .tmib-tp__effect-list--buff .tmib-tp__effect-name { color: #4caf50; } .tmib-tp__effect-list--debuff .tmib-tp__effect-name { color: #e53935; } .tmib-tp__effect-list--disable .tmib-tp__effect-name { color: #9c57e8; } .tmib-tp__effect-multi { margin-left: auto; background: #dc2626; color: #fff; font-size: .68rem; font-weight: 800; border-radius: 4px; padding: .05rem .32rem; flex-shrink: 0; align-self: center; } .tmib-tp__effect-sources { list-style: none; margin: 0; padding: .35rem .7rem .45rem 1.4rem; } .tmib-tp__effect-sources li { font-size: .76rem; color: var(--tp-text-muted); line-height: 1.75; } .tmib-tp__effect-sources li::before { content: '→ '; color: var(--tp-accent); } /* ── Toast ───────────────────────────────────────────────────────────────── */ .tmib-tp__toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 10000; padding: .6rem 1.1rem; border-radius: var(--tp-radius); font-size: .86rem; font-weight: 500; box-shadow: var(--tp-shadow); max-width: 300px; pointer-events: none; animation: tmib-tp-fadein .2s ease; } .tmib-tp__toast--info { background: var(--tp-surface-2); color: var(--tp-text); border: 1px solid var(--tp-border); } .tmib-tp__toast--success { background: var(--tp-buff); color: #c8f5ce; border: 1px solid var(--tp-buff-light); } .tmib-tp__toast--warning { background: #4a3500; color: var(--tp-accent); border: 1px solid var(--tp-accent); } .tmib-tp__toast--error { background: var(--tp-debuff); color: #ffc5c5; border: 1px solid var(--tp-debuff-light); } @keyframes tmib-tp-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }