/* CLEATIONS Workshop v3: the main menu in the PSD's pixels (2560x1440), scaled to the window by its height (--s).
   Where each piece sits comes from menu.json (the dev mode writes it); this file only says how they look. */
:root {
  --s: 0.5;
  --tilt: -5deg;
  --red: #a3141c;
  --text: #f1eef6;
  --muted: #b9b3c6;
  --world: #b6a6d3;
  --ui-font: "Michroma", "Eurostile Extended", "Eurostile", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--world); color: var(--text); font-family: var(--ui-font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
[hidden], .off { display: none !important; }

/* ---------- the world, and the glass over it while a screen is open ---------- */
.world { position: fixed; inset: 0; background: var(--world) center / cover no-repeat; }
/* the menu's ambience (public/worldfx.js): over the world, under the 3D and the panels */
.world-fx { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.veil { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: linear-gradient(120deg, rgba(14, 9, 24, .62), rgba(24, 12, 34, .5)); backdrop-filter: blur(14px) saturate(1.1); }
body:not([data-screen="menu"]):not([data-screen="skins"]):not([data-screen="workshop"]) .veil { opacity: 1; }

/* ---------- stages: PSD pixels ---------- */
.stage { position: fixed; top: 0; z-index: 2; width: 2560px; height: 1440px; transform: scale(var(--s)); pointer-events: none; }
.stage:not(.stage-right) { left: 0; transform-origin: 0 0; }
.stage-right { right: 0; transform-origin: 100% 0; }
.reference { position: absolute; left: 0; top: 0; width: 2560px; height: 1440px; }
.piece { position: absolute; }

/* the middle of the window, in PSD pixels: x = the distance from the centre, 0 being dead centre */
.top-center { position: fixed; left: 50%; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; transform: scale(var(--s)); transform-origin: top center; }
.top-center > * { position: absolute; transform: translateX(-50%); }
.title, .title-art { transition: opacity .5s, left .7s cubic-bezier(.65, 0, .25, 1); }
/* in SKINS the title stands dead centre, whatever offset the menu gives it (the dev mode's x is the menu's) */
body:is([data-screen="skins"], [data-screen="workshop"]) :is(.title-art, .title) { left: 0 !important; }
.title { width: 1384px; display: flex; justify-content: space-between; font-size: 26px; line-height: 1; color: #fff; opacity: .92; text-shadow: 0 0 12px rgba(255, 255, 255, .25); }
.corner-mark { opacity: .95; }
body:not([data-screen="menu"]) .title, body:not([data-screen="menu"]) .title-art { opacity: 0; }

/* ---------- the panels ---------- */
.panel, .panel-skins { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.65, 0, .25, 1), opacity .6s; }
.panel-art { position: absolute; left: 0; top: 0; }
/* while the PSD's "painel" is not exported: the raw panel layer, graded by eye towards the PSD's look */
body.temp-panel .panel-art { filter: contrast(.8) brightness(1.3) saturate(.32); }
/* the logo of the panel: still, with a light that crosses it now and then */
.logo-art { line-height: 0; }
.logo-art img { display: block; }
.logo-art .shine { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%) 200% 0 / 260% 100% no-repeat; }
body:not(.no-logo-anim) .logo-art .shine { animation: logo-shine 9s ease-in-out infinite; }
@keyframes logo-shine { 0%, 62% { background-position: 210% 0; } 100% { background-position: -70% 0; } }
.blend-overlay { mix-blend-mode: overlay; }
.blend-screen { mix-blend-mode: screen; }

/* the menu's panel slides out on every other screen; the SKINS panel waits on the left and takes its place */
body:not([data-screen="menu"]) .panel { transform: translateX(-1700px); opacity: 0; }
.panel-skins { transform: translateX(-1700px); opacity: 0; }
body[data-screen="skins"] .panel-skins { transform: translateX(0); opacity: 1; }
.skins-logo { padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; border-radius: 10px; transition: filter .25s; }
.skins-logo span { position: absolute; left: 30px; bottom: -34px; font-size: 13px; letter-spacing: .28em; color: #fff; opacity: 0;
  transition: opacity .25s; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.skins-logo:hover { filter: brightness(1.12) drop-shadow(0 0 14px rgba(255, 255, 255, .25)); }
.skins-logo:hover span { opacity: .85; }

/* menu buttons: text in the game's kind of font, with the game's brush line and arrow */
.menu-item { position: absolute; z-index: 2; pointer-events: auto; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  font-size: 50px; line-height: 1; letter-spacing: .01em; white-space: nowrap; transform: rotate(var(--tilt)); transform-origin: 0 50%; outline: none; }
.menu-item .label { position: relative; z-index: 1; display: inline-block; padding: 10px 0 12px; text-shadow: 0 3px 10px rgba(0, 0, 0, .45); transition: text-shadow .25s, color .25s; }
.menu-item .arrow { position: absolute; left: -58px; top: 50%; width: 42px; height: 27px; margin-top: 2px; pointer-events: none;
  background: url("ui/arrow.png") center / contain no-repeat; transition: transform .25s, filter .25s; }
/* ---------- the menu's two looks ----------
   "jogo" (the default) is the main menu's: our own brush underline, the game's triangle with the blood splash behind
   it, and the red paint that sweeps in behind the word (7 drawn frames, from tools/menu-art.js). "sangue" is the
   other stroke the menu has, the one that bleeds. The dev mode of the MENU page picks between them. */

/* ours, for anything that is not one of the two menu looks */
.menu-item .line { position: absolute; left: -10px; right: -54px; bottom: -8px; height: 24px; pointer-events: none;
  background: url("ui/line-brush.png") 0 50% / 128% 100% no-repeat;
  transform-origin: 0 50%; transform: scaleX(.92); opacity: .95; transition: right .3s, filter .3s, opacity .3s; }
.menu-item:is(:hover, :focus-visible) .line { right: -66px; opacity: 1; filter: brightness(1.45) drop-shadow(0 0 8px rgba(255, 40, 40, .5)); }

/* ---- the stroke the two menu looks share: the game's own, with its glow and its blood ----
   The three drawings are the same 256x64 frame, so the glow and the blood sit on the stroke by simply lying over it;
   the bleeding one sits higher in its frame to leave room for the drops, hence --bleed. */
:is(.menu-jogo, .menu-sangue) .menu-item .line { --bleed: 18%;
  left: -16px; right: -58px; bottom: 0; height: auto; aspect-ratio: 256 / 64;
  transform: translateY(calc(52% + 5px)); transform-origin: 50% 50%;
  background: url("ui/menu/line-red.png") 50% 50% / 100% 100% no-repeat; opacity: .88;
  transition: filter .3s, opacity .3s; }
:is(.menu-jogo, .menu-sangue) .menu-item:is(:hover, :focus-visible) .line { right: -58px; opacity: 1;
  transform: translateY(calc(52% + 5px)); filter: brightness(1.15) drop-shadow(0 0 9px rgba(255, 40, 40, .4)); }
:is(.menu-jogo, .menu-sangue) .menu-item .line::before,
:is(.menu-jogo, .menu-sangue) .menu-item .line::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .28s; }
:is(.menu-jogo, .menu-sangue) .menu-item .line::before { background: url("ui/menu/line-glow.png") 50% 50% / 100% 140% no-repeat; }
:is(.menu-jogo, .menu-sangue) .menu-item .line::after { top: calc(var(--bleed) + var(--menu-linedrip-y, 0px));
  background: url("ui/menu/line-blood.png") 50% 50% / 100% 100% no-repeat;
  clip-path: inset(0 0 100% 0); transition: opacity .25s, clip-path var(--menu-linedrip-time, 1.5s) cubic-bezier(.35, .05, .5, 1); }
:is(.menu-jogo, .menu-sangue) .menu-item:is(:hover, :focus-visible) .line::before { opacity: .7; }
body:not(.no-drip-anim):is(.menu-jogo, .menu-sangue) .menu-item:is(:hover, :focus-visible) .line::after { opacity: 1; clip-path: inset(0 0 0 0); transition-delay: 0s, .35s; }
.no-menu-linedrip .menu-item .line::after { display: none; }

/* ---- "jogo": the triangle, with its blood splash behind ----
   The splash and its blood are the item's own ::before and ::after, not the arrow's: a pseudo-element with a negative
   z-index still paints over its own element's background, which buried the triangle in its own splash. As the item's
   children they come before the arrow, so the triangle stays on top of them. */
/* every size here is a knob the dev mode of the MENU page turns (app.js writes them onto the page) */
.menu-jogo .menu-item .arrow { left: calc(var(--menu-x, -45px) - var(--menu-arrow, 30px) / 2 + var(--menu-arrow-x, 0px));
  width: var(--menu-arrow, 30px); height: var(--menu-arrow, 30px);
  margin-top: calc(var(--menu-arrow, 30px) / -2 + var(--menu-arrow-y, 0px));
  background-image: url("ui/menu/arrow.png"); filter: grayscale(1) brightness(1.55); opacity: .92;
  transform: scale(1); transition: transform .35s cubic-bezier(.2, .9, .3, 1), filter .3s, opacity .3s; }
.menu-jogo .menu-item:is(:hover, :focus-visible) .arrow { transform: scale(var(--menu-arrow-grow, 1.16)); filter: none; opacity: 1; }

.menu-jogo .menu-item::before { content: ""; position: absolute; left: var(--menu-x, -45px); top: 50%;
  width: var(--menu-splash, 88px); height: var(--menu-splash, 88px);
  margin: calc(var(--menu-splash, 88px) / -2) 0 0 calc(var(--menu-splash, 88px) / -2); pointer-events: none;
  background: url("ui/menu/splash.png") 50% 50% / contain no-repeat;
  opacity: var(--menu-splash-rest, .5); transform: scale(var(--menu-splash-small, .68));
  transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .3, 1); }
.menu-jogo .menu-item:is(:hover, :focus-visible)::before { opacity: var(--menu-splash-on, .95); transform: scale(1); }
.no-menu-mark .menu-item::before { display: none; }
.no-menu-markdrip .menu-item::after { display: none; }
/* the blood runs down from under the splash while the mouse stays */
.menu-jogo .menu-item::after { content: ""; position: absolute; left: var(--menu-x, -45px); top: 50%;
  width: var(--menu-drip-w, 70px); height: var(--menu-drip-h, 64px);
  margin: var(--menu-drip-y, 16px) 0 0 calc(var(--menu-drip-w, 70px) / -2); pointer-events: none; opacity: 0;
  background: url("ui/menu/drip.png") 50% 0 / 100% 100% no-repeat;
  clip-path: inset(0 0 100% 0);
  transition: opacity .3s, clip-path var(--menu-drip-time, 1.4s) cubic-bezier(.35, .05, .5, 1); }
body:not(.no-drip-anim).menu-jogo .menu-item:is(:hover, :focus-visible)::after { opacity: .9; clip-path: inset(0 0 0 0); transition-delay: 0s, .35s; }

/* ---- "sangue": the same stroke, without the triangle and its mark ---- */
.menu-item.locked .line::after, .menu-item.locked::before, .menu-item.locked::after { display: none; }
.menu-item:is(:hover, :focus-visible) .arrow { transform: translateX(10px); filter: brightness(1.25); }
.menu-item:is(:hover, :focus-visible) .label { text-shadow: 0 0 22px rgba(255, 70, 70, .45), 0 3px 10px rgba(0, 0, 0, .45); }
.menu-item.locked { cursor: not-allowed; color: #9d97a8; }
.menu-item.locked .line, .menu-item.locked .arrow { filter: grayscale(1); opacity: .45; }
.menu-item .lock { position: absolute; right: -76px; top: 20px; font-size: 30px; pointer-events: none; }

/* the PSD's hand-drawn strokes: the other set (dev mode, or ?tracos=concept) */
.stroke { position: absolute; z-index: 1; pointer-events: none; transition: transform .25s, filter .3s; }
.stroke.line { transform-origin: 0 60%; }
body:not(.strokes-concept) .stroke { display: none; }
body.strokes-concept .menu-item .line, body.strokes-concept .menu-item .arrow { display: none; }
[data-go="workshop"]:is(:hover, :focus-visible) ~ .s-workshop.arrow,
[data-go="skins"]:is(:hover, :focus-visible) ~ .s-skins.arrow,
[data-go="socials"]:is(:hover, :focus-visible) ~ .s-socials.arrow { transform: translateX(10px); filter: brightness(1.4); }
[data-go="workshop"]:is(:hover, :focus-visible) ~ .s-workshop.line,
[data-go="skins"]:is(:hover, :focus-visible) ~ .s-skins.line,
[data-go="socials"]:is(:hover, :focus-visible) ~ .s-socials.line { transform: translateX(6px); filter: brightness(1.45) drop-shadow(0 0 8px rgba(255, 40, 40, .55)); }
[data-go="workshop"].locked ~ .s-workshop { filter: grayscale(1) opacity(.5); }

/* ---------- the display: the skins in the spotlight ---------- */
.mini-logo { padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; line-height: 0; transition: transform .3s, filter .3s; }
.mini-logo img { display: block; }
body:not(.no-logo-anim) .mini-logo img { animation: logo-breathe 4.5s ease-in-out infinite; }
.mini-logo:hover { transform: translateY(-2px); filter: brightness(1.3) drop-shadow(0 0 12px rgba(255, 255, 255, .45)); }
@keyframes logo-breathe { 0%, 100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

.display-shot { padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.display-shot img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .55)); transition: opacity .35s, transform .35s; }
.display-shot img.out { opacity: 0; transform: translateX(-18px); }
.display-shot:hover img { transform: scale(1.04); }
.display-arrow { padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; line-height: 0; }
.display-arrow img { display: block; transition: transform .25s, filter .25s; }
.display-arrow:hover img { filter: brightness(1.6) drop-shadow(0 0 8px rgba(255, 255, 255, .5)); }
.display-arrow.prev:hover img { transform: translateX(-7px); }
.display-arrow.next:hover img { transform: translateX(7px); }
body:not(.no-arrow-anim) .display-arrow.prev img { animation: nudge-left 2.8s ease-in-out infinite; }
body:not(.no-arrow-anim) .display-arrow.next img { animation: nudge-right 2.8s ease-in-out infinite; }
body:not(.no-arrow-anim) .display-arrow:hover img { animation: none; }
@keyframes nudge-left { 0%, 70%, 100% { transform: translateX(0); opacity: .85; } 85% { transform: translateX(-6px); opacity: 1; } }
@keyframes nudge-right { 0%, 70%, 100% { transform: translateX(0); opacity: .85; } 85% { transform: translateX(6px); opacity: 1; } }
.display-new { animation: badge-in .5s ease-out both; }
@keyframes badge-in { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
.display-name { text-align: center; font-size: 11px; letter-spacing: .32em; color: #e9e5ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- screens past the menu ---------- */
.back { position: fixed; top: 22px; left: 26px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border: 0;
  background: url("ui/line-brush.png") 0 100% / 100% 10px no-repeat; font-size: 15px; letter-spacing: .12em; cursor: pointer; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.back span { color: var(--red); font-size: 13px; }
.back:hover { filter: brightness(1.3); }
.screen { position: fixed; z-index: 4; animation: screen-in .5s .2s both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(12px); } }
.screen-skins, .screen-socials { inset: 0; display: grid; place-items: center; pointer-events: none; }

/* ---------- SKINS: a personagem em 3D ---------- */
/* the canvas sits between the world and the panels, so the world stays all around her */
.skins-canvas { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; display: none; touch-action: none; }
body:is([data-screen="skins"], [data-screen="workshop"]) .skins-canvas { display: block; cursor: grab; }
body.world-3d .skins-canvas { display: block; pointer-events: none; cursor: default; }
body:is([data-screen="skins"], [data-screen="workshop"]) .skins-canvas.dragging { cursor: grabbing; }
.skins-status { margin: 0; padding: 10px 18px; font-size: 14px; letter-spacing: .06em; background: rgba(16, 10, 26, .6);
  backdrop-filter: blur(10px); border-left: 3px solid var(--red); }
.skins-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0;
  font-family: system-ui, sans-serif; font-size: 12px; color: var(--muted); opacity: .8; }

/* the slots, one under the other on the panel, as the game's gear screen has them */
.skins-rail { display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
.slot { width: 72px; height: 72px; padding: 4px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(12, 8, 20, .42);
  backdrop-filter: blur(8px); cursor: pointer; transition: border-color .2s, transform .2s, background .2s, box-shadow .2s; }
.slot img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .7; transition: opacity .2s; }
.slot:hover { border-color: rgba(255, 255, 255, .5); transform: translateX(5px); }
.slot:hover img, .slot.worn img { opacity: 1; }
.slot.worn { border-color: var(--red); box-shadow: 0 0 14px rgba(163, 20, 28, .4); }
.slot.open { border-color: #fff; background: rgba(38, 20, 40, .6); }
.slot.empty { opacity: .42; }

/* the skins of the slot that is open */
.skins-list { width: 540px; max-height: 860px; overflow-y: auto; overflow-x: hidden; padding: 18px 20px 20px; pointer-events: auto;
  background: rgba(16, 10, 26, .52); backdrop-filter: blur(18px) saturate(1.15); border-left: 3px solid var(--red);
  animation: lista-in .3s ease-out both; }
@keyframes lista-in { from { opacity: 0; transform: translateX(-16px); } }
/* the slot's name, and under it the light and the piece's own switch */
.skins-list .cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.skins-list h3 { flex: 1 0 100%; margin: 0; font-size: 17px; font-weight: 400; letter-spacing: .18em; }
.skins-list .luz { display: flex; }
.skins-list .luz .so + .so { margin-left: -1px; }
/* the switches: the light, the piece on her or on its own, the weapon's inspect */
.skins-list .so { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(8, 6, 14, .45);
  font-size: 11px; letter-spacing: .08em; cursor: pointer; white-space: nowrap; transition: border-color .2s, color .2s; }
.skins-list .so:hover:not(:disabled) { border-color: rgba(255, 255, 255, .55); }
.skins-list .so.on { border-color: var(--red); color: #fff; background: rgba(40, 12, 18, .5); }
.skins-list .so:disabled { opacity: .35; cursor: default; }
/* not there yet: dimmed, and "soon" under it on hover */
.skins-list .so.locked { position: relative; color: rgba(255, 255, 255, .32); cursor: not-allowed; }
.skins-list .so.locked:hover { border-color: rgba(255, 255, 255, .2); }
.skins-list .so.locked:hover::after { content: attr(data-soon); position: absolute; left: 50%; top: calc(100% + 6px); z-index: 1;
  transform: translateX(-50%); padding: 3px 8px; background: rgba(8, 6, 14, .92); border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: 10px; letter-spacing: .14em; pointer-events: none; }
.skins-list .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.skins-list .note { margin: 12px 0 0; font-family: system-ui, sans-serif; font-size: 13px; line-height: 1.5; color: var(--muted); }
.tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(8, 6, 14, .4); cursor: pointer; transition: border-color .2s, background .2s; }
.tile img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.tile span { font-size: 10px; letter-spacing: .1em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile:hover { border-color: rgba(255, 255, 255, .45); background: rgba(24, 14, 32, .5); }
.tile.chosen { border-color: var(--red); background: rgba(40, 12, 18, .45); }
.tile.chosen span { color: #fff; }
.soon { max-width: 520px; margin: 0 24px; padding: 28px 30px; background: rgba(18, 14, 26, .55); border-left: 3px solid var(--red);
  backdrop-filter: blur(12px) saturate(1.1); pointer-events: auto; }
.soon h2 { margin: 0 0 10px; font-size: 26px; letter-spacing: .12em; font-weight: 400; }
.soon p { margin: 0 0 8px; font-family: system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: #ddd8e6; }
.soon-skin { color: #fff !important; }

.dev-hint { position: fixed; right: 12px; bottom: 10px; z-index: 9; font: 12px system-ui, sans-serif; color: rgba(255, 255, 255, .8); background: rgba(0, 0, 0, .45); padding: 4px 8px; border-radius: 4px; }

/* G: the PSD's flattened image over the menu, half see-through, to line things up */
.reference.ghost { z-index: 10; opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .panel, .panel-skins, .menu-item .line, .menu-item .arrow, .stroke, .display-shot img, .screen, .veil, .display-arrow img, .mini-logo img { transition: none; animation: none; }
  .menu-item .line::after { display: none; }
}

/* ---------- the whole project's boxes: round corners and frosted glass (dev mode, "Todo o projeto") ---------- */
:root { --radius: 10px; --glass-a: .52; --glass-blur: 18px; }
.glass, .skins-list { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 12px 32px rgba(8, 4, 16, .28); }
.skins-list, .slot, .tile, .skins-list .so, .skins-status { border-radius: var(--radius); }
.skins-list .luz .so:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.skins-list .luz .so:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.skins-list .luz .so:not(:first-child):not(:last-child) { border-radius: 0; }
.tile img { border-radius: calc(var(--radius) * .6); }
/* the pages that hide the big title or the corner logo (each page chooses) */
body.no-title .top-center { display: none; }
body.no-corner .stage-right { display: none; }