/* V1.47 ยท Semantic battle-log language and true-fresh entry cadence. */ html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log[data-semantic-log="v147"] { scrollbar-gutter: stable !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log[data-semantic-log="v147"] > article.battle-log-entry { --battle-log-accent: #6faec1; --battle-log-wash: rgba(83, 159, 182, .08); position: relative !important; display: grid !important; grid-template-columns: 28px minmax(0, 1fr) auto !important; grid-template-areas: "marker title badge" "marker detail detail" !important; align-items: center !important; column-gap: 8px !important; row-gap: 3px !important; min-width: 0 !important; padding: 9px 9px 10px 8px !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--battle-log-accent) 31%, rgba(104, 148, 160, .22)) !important; border-left: 3px solid var(--battle-log-accent) !important; border-radius: 8px !important; background: linear-gradient(90deg, var(--battle-log-wash), transparent 48%), linear-gradient(180deg, rgba(255,255,255,.9), rgba(235,247,250,.82)) !important; box-shadow: 0 5px 13px rgba(32, 67, 78, .09), inset 0 1px 0 rgba(255,255,255,.86) !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry[data-log-tone="danger"] { --battle-log-accent: #d95f56; --battle-log-wash: rgba(217, 95, 86, .1); } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry[data-log-tone="support"] { --battle-log-accent: #2d9f83; --battle-log-wash: rgba(45, 159, 131, .1); } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry[data-log-tone="guard"] { --battle-log-accent: #4a8fc0; --battle-log-wash: rgba(74, 143, 192, .1); } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry[data-log-tone="artifact"] { --battle-log-accent: #b88a30; --battle-log-wash: rgba(212, 163, 60, .12); } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry[data-log-tone="opportunity"] { --battle-log-accent: #b0792d; --battle-log-wash: rgba(208, 148, 53, .1); } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry[data-log-tone="control"] { --battle-log-accent: #8568b8; --battle-log-wash: rgba(133, 104, 184, .1); } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry[data-log-tone="skill"] { --battle-log-accent: #3c91a6; --battle-log-wash: rgba(60, 145, 166, .09); } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry[data-log-priority="major"] { border-left-width: 4px !important; box-shadow: 0 7px 16px rgba(32, 67, 78, .12), 0 0 12px color-mix(in srgb, var(--battle-log-accent) 15%, transparent), inset 0 1px 0 rgba(255,255,255,.9) !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log .battle-log-semantic-marker { grid-area: marker !important; align-self: center !important; width: 26px !important; height: 26px !important; display: grid !important; place-items: center !important; margin: 0 !important; padding: 0 !important; border: 1px solid color-mix(in srgb, var(--battle-log-accent) 54%, rgba(255,255,255,.72)) !important; border-radius: 50% !important; color: color-mix(in srgb, var(--battle-log-accent) 78%, #173946) !important; background: radial-gradient(circle, rgba(255,255,255,.92), color-mix(in srgb, var(--battle-log-accent) 12%, #edf7f8)) !important; box-shadow: 0 3px 8px rgba(31,69,81,.12), 0 0 8px color-mix(in srgb, var(--battle-log-accent) 15%, transparent) !important; font: 950 11px/1 system-ui, "Microsoft YaHei", sans-serif !important; font-style: normal !important; text-shadow: 0 1px 0 rgba(255,255,255,.8) !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry > strong { grid-area: title !important; min-width: 0 !important; margin: 0 !important; color: #173d49 !important; -webkit-text-fill-color: #173d49 !important; font-size: clamp(12px, .82vw, 15px) !important; line-height: 1.24 !important; overflow-wrap: anywhere !important; text-shadow: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry > small { grid-area: detail !important; min-width: 0 !important; margin: 0 !important; color: #48666f !important; -webkit-text-fill-color: #48666f !important; font-size: clamp(10px, .68vw, 12px) !important; line-height: 1.32 !important; overflow-wrap: anywhere !important; text-shadow: none !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log .battle-log-semantic-label { grid-area: badge !important; align-self: start !important; display: block !important; margin: 0 !important; padding: 2px 4px !important; border: 1px solid color-mix(in srgb, var(--battle-log-accent) 38%, transparent) !important; border-radius: 3px !important; color: color-mix(in srgb, var(--battle-log-accent) 82%, #173945) !important; background: color-mix(in srgb, var(--battle-log-accent) 8%, rgba(255,255,255,.72)) !important; font: 900 8px/1 system-ui, "Microsoft YaHei", sans-serif !important; letter-spacing: .04em !important; white-space: nowrap !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry.is-latest-log-entry { border-color: color-mix(in srgb, var(--battle-log-accent) 52%, rgba(89,133,146,.25)) !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry.is-fresh-log-entry { animation: battle-log-fresh-entry 360ms cubic-bezier(.12,.82,.18,1) both !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry.is-fresh-log-entry::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(105deg, transparent 18%, color-mix(in srgb, var(--battle-log-accent) 15%, rgba(255,255,255,.36)) 46%, transparent 70%) !important; transform: translateX(-120%) !important; animation: battle-log-fresh-scan 520ms ease-out 70ms both !important; } @keyframes battle-log-fresh-entry { 0% { opacity: 0; transform: translateX(8px) scale(.985); } 100% { opacity: 1; transform: translateX(0) scale(1); } } @keyframes battle-log-fresh-scan { 0% { opacity: 0; transform: translateX(-120%); } 36% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } } @media (max-width: 720px) { html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log[data-semantic-log="v147"] > article.battle-log-entry { grid-template-columns: 26px minmax(0, 1fr) auto !important; column-gap: 7px !important; padding: 8px 8px 9px 7px !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log .battle-log-semantic-marker { width: 24px !important; height: 24px !important; font-size: 10px !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry > strong { font-size: 12px !important; } html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry > small { font-size: 10px !important; } } @media (prefers-reduced-motion: reduce) { html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry.is-fresh-log-entry, html body:not(.maintenance-mode) #appRoot#appRoot.app #sidePanel#sidePanel.side #log#log.log > .battle-log-entry.is-fresh-log-entry::after { animation-duration: 100ms !important; animation-delay: 0ms !important; } }