/* Patch notes: start-menu button (left of "?"), version list + notes modal, update bubble */
html:not(.battlemon-mobile) #homeScreen #btnPatchNotes { position: absolute; top: 1.5rem; right: 6.8rem; z-index: 10; width: 2.5rem; height: 2.5rem; min-height: 0; padding: 0; border-radius: .8rem; display: inline-grid; place-items: center; color: #dff5ff; border: 1px solid #38bdf877; background: linear-gradient(135deg, #1b2b43f5, #0b1426f5); box-shadow: 0 .25rem 1rem #0006, inset 0 1px #ffffff15; }
html:not(.battlemon-mobile) #homeScreen #btnPatchNotes svg { width: 1.2rem; height: 1.2rem; }
html:not(.battlemon-mobile) #homeScreen #btnPatchNotes:hover { border-color: #7dd3fc; box-shadow: 0 .25rem 1rem #0006, 0 0 1rem #38bdf840; }
/* Discord: roxo da marca, ao lado do botão de patch notes */
html:not(.battlemon-mobile) #homeScreen #btnDiscord { position: absolute; top: 1.5rem; right: 9.9rem; z-index: 10; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: .8rem; display: inline-grid; place-items: center; color: #fff; text-decoration: none; border: 1px solid #8ea1ff; background: linear-gradient(135deg, #6d79f7, #4752c4); box-shadow: 0 .25rem 1rem #0006, inset 0 1px #ffffff30; transition: transform .15s, box-shadow .15s, filter .15s; }
html:not(.battlemon-mobile) #homeScreen #btnDiscord svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
html:not(.battlemon-mobile) #homeScreen #btnDiscord:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 .25rem 1rem #0006, 0 0 1.1rem #5865f2aa; }
.pn-button { position: relative; }
.pn-dot { position: absolute; top: -.25rem; right: -.25rem; width: .7rem; height: .7rem; border-radius: 50%; background: #f43f5e; border: 2px solid #0b1426; box-shadow: 0 0 .6rem #f43f5e; animation: pnPulse 1.6s ease-in-out infinite; }
.pn-dot[hidden] { display: none; }

.pn-card { width: min(52rem, 94vw); height: min(34rem, 90vh); display: flex; flex-direction: column; }
.pn-card .modal-header small { display: block; margin-top: .25rem; color: #94a3b8; font: 700 .58rem var(--font-pixel-ui); letter-spacing: .05em; }
.pn-layout { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: .9rem; flex: 1; min-height: 0; padding: .8rem 1rem 1rem; }
.pn-list { display: grid; align-content: start; gap: .4rem; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #2e4063 transparent; }
.pn-ver { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem .4rem; padding: .55rem .7rem; border-radius: .6rem; border: 1px solid #2c3f60; background: linear-gradient(180deg, #14213a, #0e1829); color: #cbd5e1; text-align: left; cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s; }
.pn-ver b { color: #e8f5ff; font: 800 .8rem var(--font-pixel-ui); }
.pn-ver small { grid-column: 1; color: #7f93b0; font: 700 .6rem var(--font-clean, inherit); }
.pn-ver em { grid-row: 1 / 3; grid-column: 2; padding: .15rem .4rem; border-radius: .4rem; background: #4ade80; color: #04170b; font: 800 .52rem var(--font-pixel-ui); font-style: normal; }
.pn-ver:hover { transform: translateX(2px); border-color: #38bdf8; }
.pn-ver.is-on { border-color: #fbbf24; background: linear-gradient(90deg, #3a2a08, #14213a); box-shadow: 0 0 1rem #fbbf2433, inset .2rem 0 #fbbf24; }
.pn-body { display: grid; align-content: start; gap: .8rem; overflow-y: auto; min-height: 0; padding-right: .3rem; scrollbar-width: thin; scrollbar-color: #2e4063 transparent; }
.pn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #2c3f60; }
.pn-head h3 { margin: 0; color: #fff; font: 800 1.05rem var(--font-pixel-ui); letter-spacing: .04em; }
.pn-head span { color: #fbbf24; font: 800 .68rem var(--font-pixel-ui); white-space: nowrap; }
.pn-sec { padding: .7rem .8rem; border-radius: .8rem; border: 1px solid color-mix(in srgb, var(--pc) 45%, #0b1424); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 10%, #101b2e), #0e1829 70%); }
.pn-sec h4 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; color: var(--pc); font: 800 .72rem var(--font-pixel-ui); letter-spacing: .06em; }
.pn-sec h4 b { min-width: 1.2rem; padding: .1rem .35rem; border-radius: 1rem; background: color-mix(in srgb, var(--pc) 25%, #0b1424); color: #fff; font: 800 .6rem var(--font-clean, inherit); text-align: center; }
.pn-sec ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.pn-sec li { position: relative; padding-left: 1.1rem; color: #dbe7f7; font: 600 .8rem/1.45 var(--font-clean, inherit); }
.pn-sec li::before { content: ''; position: absolute; left: .1rem; top: .5rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--pc); box-shadow: 0 0 .5rem var(--pc); }

/* update bubble: same bubble as the shop clerk / tower tips, tail pointing up at the button */
.pn-bubble { position: absolute; top: 4.9rem; right: 5.4rem; z-index: 12; width: min(17.5rem, calc(100% - 2rem)); padding: .85rem 1rem 1.1rem; border: 3px solid #1b2333; border-radius: 1rem; background: linear-gradient(180deg, #fdfdfd, #e9eef7); color: #1b2333; box-shadow: 0 .3rem 0 #0b1426, 0 .6rem 1.4rem #0007; cursor: pointer; transform-origin: 80% 0; }
.pn-bubble::before, .pn-bubble::after { content: ''; position: absolute; right: 2.1rem; border-style: solid; }
.pn-bubble::before { top: -1.05rem; border-width: 0 .75rem 1.05rem .75rem; border-color: transparent transparent #1b2333 transparent; }
.pn-bubble::after { top: -.7rem; right: 2.3rem; border-width: 0 .55rem .75rem .55rem; border-color: transparent transparent #fdfdfd transparent; }
.pn-bubble-name { position: absolute; top: -.75rem; left: 1rem; padding: .1rem .55rem; border-radius: .4rem; background: #f5b400; color: #3a2600; border: 2px solid #1b2333; font: 800 .62rem var(--font-pixel-ui); letter-spacing: .08em; }
.pn-bubble p { margin: 0; padding-right: 1.2rem; font: 600 .82rem/1.45 var(--font-clean, inherit); }
.pn-bubble p b { color: #b45309; }
.pn-bubble-close { position: absolute; top: .3rem; right: .45rem; width: 1.3rem; height: 1.3rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #64748b; font-size: .7rem; cursor: pointer; }
.pn-bubble-close:hover { background: #1b233318; color: #1b2333; }
.pn-bubble-timer { position: absolute; left: 1rem; right: 1rem; bottom: .4rem; height: .18rem; border-radius: 1rem; background: #1b233318; overflow: hidden; }
.pn-bubble-timer i { display: block; height: 100%; background: linear-gradient(90deg, #2f7cf6, #f5b400); transform-origin: left; animation: pnTimer 15s linear forwards; }
.pn-bubble.is-entering { animation: pnPop .45s cubic-bezier(.3, 1.5, .5, 1); }

@keyframes pnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes pnTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes pnPop { 0% { opacity: 0; transform: scale(.6) translateY(-.6rem); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pn-dot, .pn-bubble.is-entering { animation: none; } }
@media (max-width: 700px) { .pn-layout { grid-template-columns: 1fr; } .pn-list { grid-auto-flow: column; grid-auto-columns: 9rem; overflow-x: auto; overflow-y: hidden; } }

#patchNotesModal .pn-sec li { text-transform: none; }