/* Palco fixo 1280x720 escalado para caber na janela, como no jogo original. Toda a interface é posicionada em px dentro do palco. */
:root {
  --ink: #2a1a10; --wood: #d9a066; --wood-light: #f6d9a8; --wood-dark: #a86d3d; --orange: #ff8c1a; --orange-dark: #b8580e;
  --paper: #ffffff; --text: #3b2a1e; --muted: #7a6657; --yellow: #ffcf3a; --blue: #2d8ee8; --red: #e5322d; --grey: #8d8d8d;
  --display: "Fredoka", "Nunito", system-ui, sans-serif; --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #140c0c; color: var(--text); font-family: var(--body); overflow: hidden; }
.stage { position: absolute; left: 50%; top: calc(50% - 12px); width: 1280px; height: 720px; transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: center; overflow: hidden; border-radius: 8px; background: #3a1a1f; user-select: none; }
/* o cursor do jogo (e o "cursor: none" da página) é estilizado por common.js (initCursor), junto com o elemento que ele cria */
/* Loja: como Build/Background na cena — sprite 8 x 6.56 unidades em modo Tiled, escala 1.2, centrado em (-4, -0.55);
   a 96 px/unidade são ladrilhos de 921.6 x 756 px repetidos na horizontal, e abaixo vem a cor de PaddingBottom.
   Batalha: fundo a 1280px de largura, -90px põe a faixa de chão de cima sob os pets. */
.bg { position: absolute; inset: 0; background: #3f1e1e url("../img/sprites/CaveBuild.png") 332.8px -85.2px / 921.6px 756px repeat-x; }
.bg.blur { background: url("../img/sprites/CaveWallpaper.png") center / cover no-repeat; }
.half { position: absolute; top: 0; bottom: 0; width: 50%; background-size: 1280px auto; background-position: 50% -90px; background-repeat: no-repeat; }
.half.left { left: 0; background-image: url("../img/sprites/CaveBattle.png"); }
.half.right { right: 0; background-image: url("../img/sprites/FieldBattle.png"); }
.abs { position: absolute; }
img { -webkit-user-drag: none; object-fit: contain; }
button { font-family: var(--display); border: 0; background: none; padding: 0; color: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* --- texto com contorno --- */
.outline { color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; font-family: var(--display); font-weight: 700; }
/* glifos brancos do jogo (Bars, Back, Paw, Swords...) ganham o contorno escuro que o jogo aplica por cor */
.glyph { filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)); }

/* --- botões: sprites 512x512 do jogo em 9-slice (borda preta de 32px; a faixa de sombra fica na fatia de baixo) --- */
.btn-wood { position: absolute; width: 420px; height: 72px; border-style: solid; border-width: 8px 8px 12px; border-image: url("../img/sprites/PlankEven1.png") 64 64 96 fill; filter: drop-shadow(0 5px 0 rgba(0,0,0,.35)); font-family: var(--display); font-weight: 700; font-size: 36px; color: #4e2d14; display: flex; align-items: center; justify-content: center; gap: 12px; }
.btn-wood.primary { filter: brightness(1.14) drop-shadow(0 5px 0 rgba(0,0,0,.35)); }
.btn-wood:hover { filter: brightness(1.08) drop-shadow(0 5px 0 rgba(0,0,0,.35)); }
.btn-wood.primary:hover { filter: brightness(1.2) drop-shadow(0 5px 0 rgba(0,0,0,.35)); }
.btn-wood:disabled { opacity: .6; }
.btn-wood .ico { width: 44px; height: 44px; }
.btn-wood .ribbon { position: absolute; right: -36px; top: 10px; transform: rotate(45deg); background: var(--ink); color: #fff; font-size: 16px; padding: 2px 44px; }
.btn-orange { position: absolute; height: 62px; border-style: solid; border-width: 8px 8px 17px; border-image: url("../img/sprites/ButtonShadeOrange.png") 64 64 136 fill; font-family: var(--display); font-weight: 700; font-size: 30px; color: #4e2d14; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; }
.btn-orange:active { transform: translateY(3px); }
.btn-orange:disabled { filter: grayscale(.6) brightness(.8); }
.btn-orange .ico { width: 34px; height: 34px; }
.btn-orange.small { height: 44px; font-size: 22px; padding: 0 8px; border-width: 6px 6px 13px; }
.btn-orange.small .ico { width: 24px; height: 24px; }
.iconbtn { position: absolute; width: 44px; height: 44px; border-style: solid; border-width: 6px 6px 13px; border-image: url("../img/sprites/ButtonShadeOrange.png") 64 64 136 fill; display: flex; align-items: center; justify-content: center; }
.iconbtn .ico { width: 24px; height: 24px; }
.back { position: absolute; left: 0; top: 0; width: 96px; height: 56px; border-style: solid; border-width: 7px 7px 10px; border-image: url("../img/sprites/PlankEven1.png") 64 64 96 fill; display: flex; align-items: center; justify-content: center; }
.back .ico { width: 34px; height: 34px; }

/* --- HUD --- */
.pill { position: absolute; top: 18px; height: 34px; background: #fff; border: 3px solid var(--ink); border-radius: 10px; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 6px; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); white-space: nowrap; }
.pill img { width: 26px; height: 26px; }
.pill.name { font-size: 15px; font-family: var(--body); font-weight: 800; }

/* --- pets da batalha, pads e medalhas --- */
/* os sprites já trazem o contorno branco; o pet só ganha uma sombra no chão */
.pad { position: absolute; width: 100px; height: 32px; border-radius: 50%; background: radial-gradient(ellipse closest-side, rgba(0,0,0,.38), rgba(0,0,0,.18) 60%, rgba(0,0,0,0)); }
.pet { position: absolute; width: 88px; height: 88px; object-fit: contain; transition: transform .12s ease; }
.pet.flip { transform: scaleX(-1); }
.stat { position: absolute; width: 44px; height: 40px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 21px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; background-size: contain; background-repeat: no-repeat; background-position: center; }
.stat.atk { background-image: url("../img/sprites/Fist.png"); }
.stat.hp { background-image: url("../img/sprites/Heart.png"); }
.stat.tmp { box-shadow: 0 0 0 3px #9fd8ff; border-radius: 10px; }
.lvl { position: absolute; width: 58px; height: 24px; background: #3b2314; border: 2px solid #fff; border-radius: 4px; color: #fff; font-family: var(--display); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 0 0 2px var(--ink); }
.lvl b { color: var(--yellow); font-size: 20px; line-height: 1; }
.lvl::after { content: ""; position: absolute; left: 10px; bottom: -8px; border: 6px solid transparent; border-top: 6px solid #3b2314; border-bottom: 0; }
.perk { position: absolute; width: 32px; height: 32px; }
.perk img { width: 32px; height: 32px; }
.coin { position: absolute; width: 36px; height: 36px; background: url("../img/sprites/CoinBlank_2x.png") center / contain no-repeat; font-family: var(--display); font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; padding-bottom: 3px; color: var(--ink); }

/* --- placas (Background/Decorations): o ponto da cena é a base do poste; Sign2 aponta para a direita, a da loja é espelhada --- */
.sign { position: absolute; width: 112px; height: 94px; isolation: isolate; font-family: var(--display); font-weight: 700; font-size: 19px; color: #6b3f12; text-align: center; padding: 13px 12px 0 0; transform: translate(-50%, -92%) rotate(-5deg); pointer-events: none; }
.sign::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/sprites/Sign2.png") center / contain no-repeat; }
.sign.left { padding: 13px 0 0 12px; transform: translate(-50%, -92%) rotate(5deg); }
.sign.left::before { transform: scaleX(-1); }

/* --- loja: espaços com pedra (Space) e as peças do prefab MinionView, em escala do jogo --- */
.spr { position: absolute; max-width: none; transform: translate(-50%, -50%) scale(calc(var(--f, 1) * var(--k)), var(--k)); pointer-events: none; }
.space { position: absolute; width: 96px; height: 176px; touch-action: none; outline-offset: -4px; }
.space.teampet::before { content: ""; position: absolute; left: 0; right: 0; top: -64px; height: 64px; } /* a seta (1.2 acima) também é clicável */
.space .juice { position: absolute; inset: 0; transform-origin: 48px 80px; }
.space .focuser, .space .selector, .space .ind, .space .aim { display: none; }
.space.hover.filled:not(.selected) .focuser, .space.hover.play .focuser, .space.hover.merge .focuser { display: block; }
.space.selected .selector { display: block; }
.space.play .ind, .space.merge .ind { display: block; animation: bob .9s ease-in-out infinite; }
.space.hover .ind { filter: brightness(0); }
.space.aim.hover .aim { display: block; }
.space.dragging .animal { filter: brightness(0); }
.space.punch .juice { animation: punch .2s linear; }
.space.shake .juice { animation: shake .2s linear; }
.space .ice { opacity: .65; } /* o Frozen do MinionView é desenhado translúcido */
.space.icepop .ice { animation: icepop .3s ease-out; }
.space .exp { position: absolute; left: 7px; top: 18px; width: calc(33px * var(--e)); height: 9px; border-radius: 3px; background: #ffcf3a; pointer-events: none; }
.space .num { position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; pointer-events: none; }
.space .num.tmp { color: #9fe0ff; }
.space .num.price { font-size: 15px; -webkit-text-stroke: 3px var(--ink); }
#arc { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#arc i { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
#fx .ghost { position: absolute; }
.puff { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; opacity: 0; animation: puff .55s ease-out forwards; }
.coinfly { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0; animation: coinfly .6s cubic-bezier(.35,.05,.45,1) forwards; }
#pill-gold.bump { animation: bump .25s ease; }
@keyframes bob { 50% { translate: 0 -6px; } }
@keyframes punch { 0%, 100% { scale: 1; } 25% { scale: 1.2; } 50% { scale: .93; } 75% { scale: 1.07; } } /* DOPunchScale(0.2, 0.2 s, vibrato 3) */
@keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -10px; } 40% { translate: 9px; } 60% { translate: -6px; } 80% { translate: 4px; } } /* Feedback.Shake(0.2 s) */
@keyframes icepop { 0% { scale: .5; opacity: 0; } 70% { scale: 1.12; opacity: 1; } 100% { scale: 1; } }
@keyframes puff { 0% { opacity: .95; transform: translate(0, 0) scale(.3); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); } }
@keyframes coinfly { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 25% { transform: translate(calc(var(--tx) * .1), -50px) scale(1); } 100% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(.7); } }
@keyframes bump { 50% { scale: 1.15; } }
@media (prefers-reduced-motion: reduce) { .space .juice, .space .ind, .space .ice, .puff, .coinfly { animation: none !important; } .puff, .coinfly { display: none; } }

/* --- tooltip card --- */
.tip { position: absolute; transform-origin: 50% 100%; width: 330px; background: #fff; border: 4px solid var(--ink); border-radius: 14px; padding: 10px 14px 12px; z-index: 7; pointer-events: none; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.tip .head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; }
.tip .head img.ico { width: 38px; height: 38px; }
.tip .head .nm { text-align: center; font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--orange); -webkit-text-stroke: 1px #7a3d00; paint-order: stroke fill; }
.tip .rule { position: relative; height: 3px; background: var(--ink); margin: 8px 0 10px; }
.tip .rule i { position: absolute; left: 50%; top: -9px; width: 20px; height: 20px; margin-left: -10px; background: #fff; border: 3px solid var(--ink); border-radius: 5px; }
.tip .body { font-family: var(--body); font-weight: 700; font-size: 17px; line-height: 1.35; text-align: center; color: var(--ink); }
.tip .body img { width: 20px; height: 20px; vertical-align: -4px; }
.tip .meta { text-align: center; font-size: 13px; color: var(--muted); margin-top: 6px; font-weight: 700; }
.tip .row { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.tip .tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; background: #ffe7c7; color: #8a4a0a; }

/* --- diálogos --- */
.dim { position: absolute; inset: 0; background: rgba(0,0,0,.72); z-index: 8; }
.dialog { position: absolute; left: 260px; top: 290px; width: 760px; background: #fff; border: 4px solid var(--ink); border-radius: 16px; padding: 24px 18px 18px; z-index: 9; text-align: center; font-family: var(--body); font-weight: 800; font-size: 24px; color: var(--ink); }
.dialog .btns { display: flex; gap: 18px; margin-top: 18px; }
.dialog .btns .btn-orange { position: static; flex: 1; height: 58px; font-size: 30px; }
.toast { position: absolute; left: 50%; top: 596px; transform: translateX(-50%); background: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 4px 14px; font-family: var(--body); font-weight: 800; font-size: 16px; color: var(--ink); z-index: 6; white-space: nowrap; }

/* --- balão ButtonTooltip: ComicFlat branco, sem a seta; fonte 32 e padding 16 unidades do canvas (20 px; 10 px contando a borda) --- */
.defs { position: absolute; width: 0; height: 0; }
.ttip { position: absolute; z-index: 25; box-sizing: border-box; background: #fff; border: 4px solid var(--ink); border-radius: 8px; padding: 6px; font-family: var(--body); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--ink); pointer-events: none; }
.ttip[hidden] { display: none; }
/* Paw branco tingido com a cor do rótulo (ButtonBase.UpdateLook pinta o ícone com GetLabelColor) */
.paw { display: inline-block; flex: none; aspect-ratio: 256 / 236; background: currentColor; -webkit-mask: url("../img/sprites/Paw.png") center / contain no-repeat; mask: url("../img/sprites/Paw.png") center / contain no-repeat; }
.btn-orange .paw { height: 34px; }

/* --- escolha de modo (ModeMenu): coluna Buttons centrada (VerticalLayoutGroup, espaço 32 unidades = 20 px). Arena tem o Look
   PlankLarge (800 x 300, PlankEvenLight) e os outros o Plank (800 x 160, PlankEven1); rótulo de 160 e 96 unidades na cor do Look.
   O texto fica na área Padding (24 dos lados, 8 acima do centro). Com o ponteiro em cima (ou foco), só o fundo recebe o material
   HoverButton (SelectableBase.SetSelector); apertado, o Tween inteiro desce 8 unidades (SetPressed). --- */
.mode { position: absolute; left: 387px; width: 506px; height: 101px; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 15px 23px; font-family: var(--display); font-weight: 700; font-size: 58px; line-height: 1; color: #57291a; white-space: nowrap; }
.mode::before { content: ""; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: 8px 8px 12px; border-image: url("../img/sprites/PlankEven1.png") 64 64 96 fill; }
.mode.large { height: 190px; font-size: 92px; gap: 18px; }
.mode.large::before { border-image-source: url("../img/sprites/PlankEvenLight.png"); }
.mode.large .paw { height: 80px; }
.mode:hover::before, .mode:focus-visible::before { filter: url(#hover-gui); }
.mode:active { transform: translateY(5px); }
.mode .ribbon { position: absolute; right: -30px; top: 22px; transform: rotate(45deg); background: var(--ink); color: #fff; font-size: 18px; padding: 3px 44px; }
.bubble.nudge { animation: shake .2s linear; }
@media (prefers-reduced-motion: reduce) { .mode:active { transform: none; } .bubble.nudge { animation: none; } }

/* --- menu --- */
/* logo do Pata Royale (img/marca), no canto do menu e da tela de entrada; o cartão da conta começa em y = 148 */
.logo { position: absolute; left: 20px; top: 6px; height: 136px; width: auto; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); pointer-events: none; }
.bubble { position: absolute; right: 16px; bottom: 16px; background: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 6px 12px; font-family: var(--body); font-weight: 800; font-size: 15px; color: var(--ink); }
.panel { position: absolute; left: 60px; top: 70px; width: 1160px; height: 600px; background: rgba(255,255,255,.96); border: 4px solid var(--ink); border-radius: 16px; padding: 18px 22px; overflow: auto; color: var(--ink); font-family: var(--body); }
.panel h2 { font-family: var(--display); font-size: 30px; margin: 0 0 10px; color: #6b3f12; }
.panel h3 { font-family: var(--display); font-size: 22px; margin: 14px 0 6px; color: var(--orange); }
.panel p { font-size: 16px; line-height: 1.5; max-width: 70ch; }
.codex { display: flex; flex-wrap: wrap; gap: 10px; }
.codex .entry { width: 104px; height: 128px; border: 3px solid #e4d3bf; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 4px; gap: 2px; position: relative; background: #fff8ee; }
.codex .entry:hover, .codex .entry.selected { border-color: var(--orange); }
.codex .entry img { width: 60px; height: 60px; }
.codex .entry .nm { font-family: var(--display); font-weight: 700; font-size: 14px; text-align: center; line-height: 1.05; }
.codex .entry .st { font-family: var(--display); font-weight: 700; font-size: 14px; display: flex; gap: 6px; }
.codex .entry .st .a { color: #6b6b6b; } .codex .entry .st .h { color: var(--red); }
.hist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hist li { padding: 8px 12px; border: 3px solid #e4d3bf; border-radius: 10px; background: #fff8ee; font-weight: 800; display: flex; gap: 12px; align-items: center; }
.hist li.win { border-color: #78c66b; } .hist li.loss { border-color: #e98282; }
.hist .out { display: inline-flex; align-items: center; gap: 6px; } .hist .out img { width: 24px; height: 24px; object-fit: contain; }

/* --- batalha --- */
.banner { position: absolute; top: 220px; height: 56px; background: #fff; border: 4px solid var(--ink); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 22px; font-family: var(--display); font-weight: 700; font-size: 26px; white-space: nowrap; }
.banner.mine { color: var(--blue); } .banner.theirs { color: #ff7a1a; }
.vs { position: absolute; left: 596px; top: 212px; width: 88px; height: 72px; background: #fff; border: 4px solid var(--ink); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--ink); z-index: 2; }
.bpet { position: absolute; width: 110px; height: 170px; }
.bpet .pet.hit { animation: hit .35s ease; }
.bpet .pet.attacking { animation: lunge .35s ease; }
.bpet.theirs .pet.attacking { animation: lungeL .35s ease; }
.bpet .pet.buffed { animation: pop .4s ease; }
.bpet.fainted { animation: fade .4s ease forwards; }
@keyframes hit { 0%,100% { translate: 0 0; } 30% { translate: -8px 0; } 60% { translate: 8px 0; } }
@keyframes lunge { 50% { translate: 22px 0; } }
@keyframes lungeL { 50% { translate: -22px 0; } }
@keyframes pop { 50% { scale: 1.15; } }
@keyframes fade { to { opacity: 0; translate: 0 24px; } }
@media (prefers-reduced-motion: reduce) { .bpet .pet, .bpet { animation: none !important; } }
.floater { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); font-family: var(--display); font-weight: 700; font-size: 30px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; animation: rise .9s ease forwards; pointer-events: none; z-index: 4; }
.floater.dmg { color: #ff5a4a; } .floater.buf { color: #7bf06b; }
@keyframes rise { to { transform: translate(-50%, -50px); opacity: 0; } }
.blog { position: absolute; left: 12px; top: 300px; width: 330px; max-height: 250px; overflow: auto; background: rgba(0,0,0,.55); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 700; display: flex; flex-direction: column; gap: 2px; z-index: 3; }
.blog .sys { color: #ffd77a; }
.controls { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 10px; align-items: center; z-index: 3; }
.controls select { font-family: var(--display); font-size: 18px; border: 3px solid var(--ink); border-radius: 8px; padding: 4px 8px; background: #fff; color: var(--ink); }
.controls .btn-orange { position: static; }

/* --- resultado --- */
.result { position: absolute; inset: 0; z-index: 9; }
.result .dim { z-index: auto; } /* fica atrás de troféus, rosto e corações, que vêm depois no DOM */
.trophies { position: absolute; left: 0; right: 0; top: 36px; display: flex; justify-content: center; gap: 22px; }
.trophies img { width: 68px; height: 68px; object-fit: contain; }
.face { position: absolute; left: 520px; top: 150px; width: 240px; height: 240px; object-fit: contain; }
.face.glyph { filter: drop-shadow(4px 0 0 var(--ink)) drop-shadow(-4px 0 0 var(--ink)) drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 -4px 0 var(--ink)); }
.result-text { position: absolute; left: 0; right: 0; top: 404px; text-align: center; font-size: 54px; letter-spacing: .04em; }
.hearts { position: absolute; left: 0; right: 0; top: 500px; display: flex; justify-content: center; gap: 26px; }
.hearts img { width: 84px; height: 84px; object-fit: contain; }
.result .btn-orange { left: 520px; top: 616px; width: 240px; }
.legal { position: fixed; left: 0; right: 0; bottom: 0; text-align: center; font-size: 11px; color: #9b8b80; padding: 4px 12px; font-family: var(--body); pointer-events: none; }
/* partículas do perk (js/perkfx.js, PerkFX do client): o contêiner fica no centro do pet e o laço posiciona cada <img class="spr">.
   Ao arrastar, o espaço fica com a silhueta e os ícones seguem o fantasma no #fx (MinionDragger). */
.perkfx { position: absolute; width: 0; height: 0; pointer-events: none; }
.space.dragging .perkfx { display: none; }