:root{
  --maxw: 1400px;
  --gap: 12px;
  --sidew: 380px;

  /* Tema escuro suave */
  --bg:        #14171c;
  --bg-grad-1: #1d222b;
  --bg-grad-2: #171b22;
  --fg:        #e7ebf0;
  --muted:     #a3adba;

  --card-bg:   #1b2029;
  --panel-bg:  #161b22;
  --border:    #2a303a;

  --pill-bg:   #181d25;
  --stage-border: #2d3441;
  --accent:    #60a5fa;
}

*{box-sizing:border-box}
html,body{height:100%; overflow:hidden;}
body{
  margin:0; font-family:system-ui; line-height:1.45; color:var(--fg);
  background:url('../assets/images/fundo/fundo.png') center/cover fixed;
}
.wrap{
  width:100%;
  height:100vh;
  min-height:100vh;
  margin:0 auto;
  padding:12px;
  position:relative;
}

.layout-root{height:100%;}
.app-shell{
  display:grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap:var(--gap);
  height:100%;
  min-height:0;
}
.side-column{
  min-height:0;
  height:100%;
  display:flex;
  align-items:stretch;
}
.center-column{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  overflow:hidden;
  position:relative;
}
.center-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  width:min(820px, 100%);
  margin:0 auto;
  min-height:100%;
}
.top-header{
  width:100%;
  text-align:center;
}
.top-info{ display:flex; flex-direction:column; align-items:center; gap:10px; }
h1{ margin:0; font-size:2.4rem; letter-spacing:.3px; }
.top-meta{ display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; }
.stats{ display:flex;gap:12px;flex-wrap:wrap;justify-content:center; }
.settings-btn{ display:flex; align-items:center; gap:8px; }
/* Topo */
header{ text-align:center; position:relative; z-index:10; padding-bottom:4px; }
.pill{
  display:inline-block;padding:6px 12px;border:1px solid var(--border);
  background:var(--pill-bg); border-radius:999px; color:var(--fg)
}
#pts{font-size:1.6rem;font-variant-numeric:tabular-nums}

.buff-hud{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:stretch;
  min-height:62px;
}
.buff-hud__empty{
  font-size:.9rem;
  color:var(--muted);
  opacity:.85;
}
.buff-slot{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(23,27,36,.92);
  cursor:default;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  overflow:hidden;
  min-width:150px;
  color:var(--fg);
  transition:border-color .18s ease, transform .12s ease;
}
.buff-slot:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.buff-slot__icon{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:#0f172a;
  padding:4px;
}
.buff-slot__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
}
.buff-slot__sigla{
  font-weight:700;
  letter-spacing:.5px;
}
.buff-slot__time{
  font-size:.85rem;
  opacity:.85;
}
.buff-slot__timer{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:4px;
  background:rgba(255,255,255,.08);
}
.buff-slot__timer::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(96,165,250,.8), rgba(59,130,246,.5));
  width:calc(var(--buff-progress, 1) * 100%);
}
.buff-slot--negativo{
  border-color:rgba(248,113,113,.35);
}
.buff-slot--negativo .buff-slot__timer::after{
  background:linear-gradient(90deg, rgba(239,68,68,.9), rgba(248,113,113,.5));
}
.buff-slot--positivo{
  border-color:rgba(16,185,129,.35);
}
.buff-slot--positivo .buff-slot__timer::after{
  background:linear-gradient(90deg, rgba(16,185,129,.9), rgba(52,211,153,.5));
}
.buff-slot--flash{
  opacity:.9;
}
.buff-slot__time--instantaneo{
  font-style:italic;
}

/* simple button style (missing before) */
.btn{ 
  padding:10px 14px;border:1px solid var(--border);border-radius:12px;
  background:#171c24;color:var(--fg);cursor:pointer;
  transition:filter .15s ease, transform .08s ease;
  font-weight:600;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(1px) }

/* Preferências (configurações) */
.settings-section{ margin-top:16px; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--panel-bg); }
.settings-section h3{ margin:0 0 6px 0; font-size:1.05rem; }
.settings-section p{ margin:0 0 12px 0; font-size:.9rem; }
.number-format-options{ display:flex; flex-wrap:wrap; gap:10px; }
.number-format-option{ flex:1 1 180px; justify-content:center; display:flex; align-items:center; }
.number-format-option.is-active{
  background:rgba(96,165,250,.16);
  border-color:rgba(96,165,250,.65);
  color:var(--accent);
}
.number-format-option[aria-pressed="true"]{ box-shadow:0 0 0 2px rgba(96,165,250,.3); }

.settings-slider{ display:flex; align-items:center; gap:12px; }
.settings-slider input[type="range"]{ flex:1; accent-color:var(--accent); }
.settings-slider__value{ min-width:54px; text-align:right; font-variant-numeric:tabular-nums; font-weight:700; color:var(--fg); }

/* Grid principal */
.card{ border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--card-bg); height:100%; }
.card p{ color:var(--muted); }
.muted{ color:var(--muted); }

/* Upgrades (aba esquerda) */
.panel{ display:flex; flex-direction:column; gap:10px; min-height:0; overflow:hidden; height:100%; }
.panel-header{ display:flex; flex-direction:column; gap:6px; padding:6px 4px 8px; border-bottom:1px solid var(--border); }
.panel-content{ flex:1; overflow-y:auto; padding:10px 4px 12px; }
.upgrades-card{ display:flex; flex-direction:column; gap:10px; min-height:0; background:url('../assets/images/fundo/fundoupgrade.png') repeat, rgba(18,22,30,.9); background-size:auto; }
.upgrades-title{ margin:6px 0 0; font-size:1.35rem; letter-spacing:.4px; }
.upgrades-sub{ margin:0; font-size:.92rem; }
.upgrade-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(72px,1fr));
  gap:18px 12px;
  position:relative;
}
.tooltip-host{ position:relative; }

.upgrade-tile{
  position:relative;
  width:100%;
  aspect-ratio:1;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel-bg);
  padding:0;
  overflow:hidden;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
  display:block;
  font:inherit;
  color:inherit;
}
.upgrade-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}
.upgrade-tile.available{
  border-color:rgba(96,165,250,.65);
  box-shadow:0 10px 26px rgba(96,165,250,.26);
  background:linear-gradient(180deg, rgba(96,165,250,.22) 0%, rgba(23,27,34,1) 60%);
  filter:saturate(1.05) brightness(1.02);
}
.upgrade-tile.available:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(59,130,246,.32); }
.upgrade-tile.locked{
  filter:grayscale(.85) brightness(.72);
  border-color:rgba(32,38,48,.9);
  background:#12161d;
  opacity:.8;
}
.upgrade-tile.purchased{
  cursor:default;
  border-color:rgba(96,165,250,.55);
  box-shadow:0 12px 28px rgba(96,165,250,.24);
  filter:saturate(1.08) brightness(1.05);
}
.upgrade-tile:disabled{ cursor:default; }
.upgrade-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.upgrade-check{
  position:absolute;
  right:6px;
  top:6px;
  background:rgba(15,23,42,.85);
  color:var(--accent);
  border-radius:999px;
  padding:2px 6px;
  font-size:12px;
  font-weight:700;
  display:none;
  align-items:center;
  justify-content:center;
}
.upgrade-tile.purchased .upgrade-check{ display:flex; }
.upgrade-tile.buzz{ animation:buzz .15s linear 2; }

/* make the shop card match stage height so items don't look "outside" */
.shop-card{ min-height:0; display:flex; flex-direction:column; background:url('../assets/images/fundo/fundoloja.png') repeat, rgba(18,22,30,.92); background-size:auto; }

/* Modal de configurações */
.settings-btn{ display:flex; align-items:center; gap:8px; }
.settings-btn svg{ width:18px; height:18px; }

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,12,18,.78);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:40;
}
.modal-overlay.open{ display:flex; }
.modal-card{
  width:min(760px, 92vw);
  max-height:88vh;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px 12px 24px;
  border-bottom:1px solid var(--border);
}
.modal-header h2{ margin:0; font-size:1.5rem; }
.modal-close{
  background:none;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:1.6rem;
  line-height:1;
  padding:4px 8px;
}
.modal-tabs{
  display:flex;
  gap:8px;
  padding:14px 24px;
  border-bottom:1px solid var(--border);
}
.modal-tab{
  border:none;
  border-radius:999px;
  padding:8px 18px;
  background:var(--pill-bg);
  color:var(--muted);
  cursor:pointer;
  font-weight:600;
  transition:filter .15s ease, background .15s ease, color .15s ease;
}
.modal-tab.active{
  background:rgba(96,165,250,.16);
  color:var(--fg);
  box-shadow:0 0 0 1px rgba(96,165,250,.4);
}
.modal-content{
  padding:24px;
  overflow:auto;
  flex:1;
}
.modal-panel{ display:none; }
.modal-panel.active{ display:block; }

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
  margin-bottom:22px;
}
.stat-card{
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
}
.stat-card span{ display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px; }
.stat-card strong{ font-size:1.1rem; letter-spacing:.3px; }

.collection-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.collection-count{ color:var(--muted); font-weight:600; }

.collection-section{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);
  gap:16px;
  align-items:start;
}
.collection-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(88px,1fr));
  gap:14px;
  max-height:calc(80vh - 260px);
  overflow-y:auto;
  padding-right:6px;
  flex:1 1 300px;
}
.collection-slot{
  position:relative;
  aspect-ratio:1;
  border:1px dashed var(--border);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--panel-bg);
  overflow:hidden;
}
.collection-slot img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.slot-placeholder{
  font-size:2rem;
  color:var(--muted);
  opacity:.65;
}
.collection-slot.owned{ border-style:solid; border-color:rgba(96,165,250,.55); box-shadow:0 10px 26px rgba(96,165,250,.24); }
.collection-slot.selected{
  border-style:solid;
  border-color:rgba(96,165,250,.75);
  box-shadow:0 0 0 2px rgba(96,165,250,.35), 0 14px 32px rgba(96,165,250,.30);
}
.collection-slot.owned .slot-placeholder{ display:none; }
.collection-slot .slot-name{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  background:rgba(13,17,23,.78);
  border-radius:12px;
  padding:4px 6px;
  font-size:.7rem;
  text-align:center;
  color:var(--fg);
}

.collection-details{
  flex:1 1 240px;
  min-width:240px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--panel-bg);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  position:sticky;
  top:0;
}
.collection-details h4{
  margin:0;
  font-size:1.1rem;
}
.collection-details p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.4;
}
.collection-detail-meta{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.collection-detail-meta .label{
  display:block;
  font-size:.75rem;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.collection-detail-meta strong{
  font-size:.95rem;
}
.collection-detail-meta ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.4;
}
.collection-detail-meta ul li{ margin-bottom:4px; }
.collection-detail-meta ul li:last-child{ margin-bottom:0; }
.collection-detail-ownership{
  margin-top:auto;
  font-size:.8rem;
  color:var(--muted);
}
@media (max-width:720px){
  .collection-section{ grid-template-columns:1fr; }
  .collection-details{ flex-basis:100%; position:static; }
  .collection-grid{ max-height:none; }
}

.achievements-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.achievements-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:14px;
}
.achievement-card{
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
  min-height:96px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  position:relative;
}
.achievement-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  transition:opacity .2s ease;
  opacity:0;
  box-shadow:0 12px 28px rgba(96,165,250,.18);
}
.achievement-card.unlocked::before{ opacity:1; }
.achievement-card.locked{
  opacity:.68;
  filter:grayscale(.78);
}
.achievement-name{
  margin:0;
  font-weight:700;
  font-size:1rem;
}
.achievement-desc{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}

.achievement-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translate(-50%, 22px);
  background:rgba(15,23,42,.92);
  color:var(--fg);
  border:1px solid rgba(96,165,250,.55);
  border-radius:999px;
  padding:10px 20px;
  font-weight:700;
  font-size:.95rem;
  box-shadow:0 18px 38px rgba(15,23,42,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
  z-index:35;
  text-align:center;
}
.achievement-toast.show{
  opacity:1;
  transform:translate(-50%, 0);
}

#purchaseToast{
  position:fixed;
  top:18px;
  left:50%;
  transform:translate(-50%, -16px);
  background:rgba(10,14,22,.94);
  color:#e2e8f0;
  border:1px solid rgba(148,163,184,.45);
  border-radius:10px;
  padding:10px 22px;
  font-family:'Fira Code', 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 0 6px rgba(148,163,184,.25);
  box-shadow:0 18px 40px rgba(2,6,14,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:48;
  animation:purchaseToastGlitch 1.1s steps(3) infinite;
}
#purchaseToast.show{
  opacity:1;
  transform:translate(-50%, 0);
}
#purchaseToast.toast-final{
  background:linear-gradient(135deg, rgba(220,38,38,.92), rgba(249,115,22,.88));
  border-color:rgba(248,250,252,.4);
  color:#fef2f2;
  box-shadow:0 24px 48px rgba(220,38,38,.45);
}
@keyframes purchaseToastGlitch{
  0%,100%{ text-shadow:0 0 6px rgba(148,163,184,.24); opacity:1; }
  40%{ text-shadow:-1px 0 rgba(96,165,250,.28), 1px 0 rgba(14,165,233,.16); }
  70%{ text-shadow:1px 0 rgba(94,234,212,.22), -1px 0 rgba(79,70,229,.18); }
}

body.glitch-prelude{
  cursor:wait;
}
body.glitch-prelude .click-img,
body.glitch-prelude .shop tbody tr,
body.glitch-prelude .btn,
body.glitch-prelude .upgrade-tile{
  pointer-events:none;
  filter:saturate(.82);
}
@keyframes glitchHue{
  0%{ filter:hue-rotate(-6deg) contrast(1.12) brightness(1.05); }
  100%{ filter:hue-rotate(6deg) contrast(1.22) brightness(1.08); }
}
body.collapse-scene-active{
  overflow:hidden;
}
body.collapse-scene-active .wrap,
body.collapse-scene-active header,
body.collapse-scene-active main,
body.collapse-scene-active .modal-overlay,
body.collapse-scene-active #purchaseToast,
body.collapse-scene-active #saveToast,
body.collapse-scene-active #achievementToast{
  pointer-events:none;
}
body.collapse-scene-active .wrap{
  filter:saturate(.68) contrast(.92);
}

body.collapse-phase-crack .wrap{
  filter:contrast(1.1) saturate(1.2) brightness(1.04);
  animation:collapseCrackStutter .12s steps(2,end) infinite;
}
body.collapse-phase-crack header,
body.collapse-phase-crack main{
  filter:contrast(.96) brightness(1.05);
}

body.collapse-phase-glitch{
  animation:collapseBodyHue .34s steps(2,end) infinite;
}
body.collapse-phase-glitch .wrap{
  animation:collapseShake .09s steps(2,end) infinite;
  filter:contrast(1.35) saturate(1.55) brightness(1.08);
}
body.collapse-phase-glitch .wrap::after{
  content:'';
  position:absolute;
  inset:-120px;
  pointer-events:none;
  background:linear-gradient(120deg, rgba(96,165,250,.32) 0%, rgba(244,63,94,.18) 45%, rgba(6,182,212,.24) 100%);
  mix-blend-mode:screen;
  opacity:.55;
  animation:collapseWrapFlash .16s steps(2,end) infinite;
  z-index:2;
}

body.collapse-phase-glitch.collapse-glitch-invert .wrap,
body.collapse-phase-glitch.collapse-glitch-invert header,
body.collapse-phase-glitch.collapse-glitch-invert main{
  filter:invert(1) hue-rotate(180deg) contrast(1.3) saturate(1.5) brightness(1.12);
}
body.collapse-phase-glitch.collapse-glitch-invert .wrap::after{
  mix-blend-mode:difference;
  opacity:.72;
}

body.collapse-phase-blue .wrap,
body.collapse-phase-blue header,
body.collapse-phase-blue main{
  filter:brightness(.25) saturate(.4);
}

body.collapse-phase-logs .wrap,
body.collapse-phase-logs header,
body.collapse-phase-logs main{
  filter:brightness(.32) saturate(.38);
}

.collapse-overlay{
  position:fixed;
  inset:0;
  display:none;
  z-index:160;
  pointer-events:none;
}
.collapse-overlay.open{
  display:block;
}
.collapse-layer--crack{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .18s ease;
  overflow:hidden;
}
.collapse-overlay.phase-crack .collapse-layer--crack{
  opacity:1;
}
.collapse-crack{
  position:absolute;
  inset:-12%;
  opacity:0;
  transform:scale(1.04);
}
.collapse-overlay.phase-crack .collapse-crack{
  animation:collapseCrackReveal .92s cubic-bezier(.25,.82,.16,.99) forwards;
}
.collapse-crack::before,
.collapse-crack::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
.collapse-crack::before{
  background:
    radial-gradient(circle at 52% 48%, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(circle at 58% 52%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 50% 50%, rgba(30,41,59,.55) 0%, rgba(15,23,42,0) 70%);
  mix-blend-mode:screen;
}
.collapse-crack::after{
  background-repeat:no-repeat;
  background-image:
    linear-gradient(112deg, rgba(255,255,255,.85) 0 1px, transparent 1px),
    linear-gradient(136deg, rgba(255,255,255,.7) 0 1px, transparent 1px),
    linear-gradient(160deg, rgba(255,255,255,.55) 0 1px, transparent 1px),
    linear-gradient(206deg, rgba(255,255,255,.4) 0 1px, transparent 1px),
    linear-gradient(252deg, rgba(255,255,255,.3) 0 1px, transparent 1px);
  background-size:60% 100%, 45% 100%, 38% 100%, 42% 100%, 34% 100%;
  background-position:50% 0, 50% 0, 50% 0, 50% 0, 50% 0;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.35));
  transform-origin:center;
  mix-blend-mode:screen;
}
.collapse-overlay.closing{
  animation:collapseOverlayFade .7s ease forwards;
}

.collapse-layer{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .28s ease, transform .28s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}

.collapse-overlay.phase-glitch .collapse-layer--glitch,
.collapse-overlay.phase-blue .collapse-layer--blue,
.collapse-overlay.phase-logs .collapse-layer--logs{
  opacity:1;
}

.collapse-layer--glitch{
  overflow:hidden;
  background:rgba(10,12,18,.4);
}
.collapse-glitch-bands{
  position:absolute;
  inset:-60px;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.18) 0px,
    rgba(255,255,255,.18) 2px,
    rgba(12,14,20,0) 2px,
    rgba(12,14,20,0) 6px
  );
  mix-blend-mode:screen;
  opacity:.28;
  animation:collapseGlitchBands .08s steps(2,end) infinite;
}
.collapse-glitch-noise{
  position:absolute;
  inset:-220px;
  background:repeating-conic-gradient(
    from 0deg,
    rgba(248,250,252,.24) 0deg 3deg,
    rgba(14,17,26,0) 3deg 6deg
  );
  mix-blend-mode:soft-light;
  opacity:.28;
  animation:collapseGlitchNoise .18s steps(3,end) infinite;
}

.collapse-layer--blue{
  background:#0a2fd1;
  box-shadow:inset 0 0 120px rgba(8,12,42,.6);
}
.collapse-blue-screen{
  width:min(720px, 88vw);
  padding:34px 38px;
  border-radius:18px;
  border:2px solid rgba(199,210,254,.42);
  background:rgba(7,14,58,.72);
  box-shadow:0 26px 80px rgba(0,0,0,.55);
  font-family:"Fira Mono", "IBM Plex Mono", Consolas, "Liberation Mono", monospace;
  color:#e4edff;
}
.collapse-blue-screen h2{
  margin:0 0 20px;
  font-size:clamp(1.1rem, 2.8vw, 1.6rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#cdd9ff;
}
.collapse-blue-messages{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.collapse-blue-line{
  opacity:0;
  transform:translateY(16px);
  filter:blur(3px);
  transition:opacity .24s ease, transform .24s ease, filter .24s ease;
  font-size:clamp(.92rem, 2.6vw, 1.12rem);
  letter-spacing:.05em;
  text-shadow:0 0 12px rgba(37,99,235,.32);
}
.collapse-blue-line.show{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.collapse-layer--logs{
  background:#010203;
  box-shadow:inset 0 0 90px rgba(0,0,0,.8);
}
.collapse-log-screen{
  width:min(780px, 90vw);
  max-height:80vh;
  border-radius:16px;
  border:1px solid rgba(103,232,249,.24);
  background:rgba(2,8,18,.92);
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  padding:32px;
  overflow:hidden;
  font-family:"Fira Mono", "IBM Plex Mono", Consolas, "Liberation Mono", monospace;
}
.collapse-log-lines{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:100%;
  overflow:hidden;
  color:#67f6ff;
}
.collapse-log-line{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .22s ease, transform .22s ease;
  letter-spacing:.04em;
  line-height:1.4;
}
.collapse-log-line::before{
  content:'> ';
  color:#38f2ff;
}
.collapse-log-line.show{
  opacity:1;
  transform:translateY(0);
}
.collapse-log-line.terminal-final{
  margin-top:16px;
  font-weight:700;
  color:#fef08a;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.collapse-log-line.terminal-final::before{
  content:'';
}
@keyframes collapseCrackStutter{
  0%{ transform:translate3d(-1.6px,-0.8px,0); }
  50%{ transform:translate3d(1.4px,0.6px,0); }
  100%{ transform:translate3d(-0.8px,1.2px,0); }
}

@keyframes collapseCrackReveal{
  0%{ opacity:0; transform:scale(1.12); }
  30%{ opacity:.86; transform:scale(1); }
  55%{ opacity:.94; }
  100%{ opacity:0; transform:scale(1.06); }
}

@keyframes collapseShake{
  0%{ transform:translate3d(0,0,0) skewX(0deg); }
  20%{ transform:translate3d(6px,-4px,0) skewX(-4deg); }
  40%{ transform:translate3d(-5px,3px,0) skewX(3deg); }
  60%{ transform:translate3d(4px,5px,0) skewX(-2deg); }
  80%{ transform:translate3d(-6px,-3px,0) skewX(5deg); }
  100%{ transform:translate3d(0,0,0) skewX(0deg); }
}
@keyframes collapseWrapFlash{
  0%,100%{ opacity:.35; }
  35%{ opacity:.65; }
  60%{ opacity:.18; }
}
@keyframes collapseBodyHue{
  0%{ filter:none; }
  40%{ filter:hue-rotate(12deg) contrast(1.18) brightness(1.05); }
  70%{ filter:invert(.15) contrast(1.3) saturate(1.6); }
  100%{ filter:hue-rotate(-14deg) contrast(1.2); }
}
@keyframes collapseGlitchBands{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-18px); }
  100%{ transform:translateY(14px); }
}
@keyframes collapseGlitchNoise{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:.22; }
  40%{ transform:translate3d(-30px,18px,0) scale(1.06); opacity:.32; }
  70%{ transform:translate3d(24px,-24px,0) scale(1.04); opacity:.28; }
  100%{ transform:translate3d(0,0,0) scale(1.02); opacity:.3; }
}
@keyframes collapseOverlayFade{
  from{ opacity:1; }
  to{ opacity:0; }
}

/* Palco */
.stage-wrapper{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-height:0;
}
.stage{
  position:relative;
  display:grid;
  place-items:center;
  width:min(560px, 92%);
  min-height:340px;
  margin:-20px auto 0;
  border:none;
  background:transparent;
  overflow:visible;
  box-shadow:none;
  transition:transform .06s ease, filter .15s ease; user-select:none;
  padding:0;
}
.memarkez-button{
  position:relative;
  isolation:isolate;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  width:380px;
  height:520px;
  box-shadow:none;
  cursor:pointer;
  transition:filter .12s ease;
}
.memarkez-button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}
.memarkez-button:hover{
  filter:brightness(1.04);
}
.memarkez-frame{
  position:relative;
  width:100%;
  height:100%;
  padding:0;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--panel-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 16px 42px rgba(0,0,0,.32);
}
.memarkez-portrait{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:none;
  border-radius:18px;
  border:none;
  margin:0 auto;
}

@keyframes memarkezPress {
  0%{ transform:scale(1); }
  50%{ transform:scale(.97); }
  100%{ transform:scale(1); }
}
.memarkez-button.is-pressed .memarkez-portrait{
  animation:memarkezPress 180ms ease;
}

.glitch-jitter{
  filter:contrast(.98) saturate(.94) blur(.3px);
}
.glitch-shift{
  filter:contrast(.94) saturate(.9);
}
.wrap.glitch-scanlines::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg, rgba(148,163,184,.05) 0 2px, rgba(8,10,18,0) 2px 6px);
  mix-blend-mode:screen;
  opacity:.05;
  pointer-events:none;
}

.mema-event-icon{
  position:absolute;
  width:clamp(64px, 12vw, 96px);
  height:clamp(64px, 12vw, 96px);
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, filter .18s ease, opacity .18s ease;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
  z-index:5;
}
.mema-event-icon:hover{
  transform:scale(1.08);
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));
}
.mema-event-icon--buff{
  animation:memaPulse 1.4s ease-in-out infinite;
}
.mema-event-icon--debuff{
  animation:memaPulse 1s ease-in-out infinite;
}
.mema-event-icon--flash{
  width:clamp(48px, 10vw, 72px);
  height:clamp(48px, 10vw, 72px);
  z-index:6;
}

@keyframes memaPulse{
  0%,100%{ opacity:0.9; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.05); }
}

/* Indicador de save */
.save-toast{
  position:fixed; right:16px; bottom:16px;
  background:#0b1f47; color:var(--accent);
  border:1px solid #1d4ed8; border-radius:999px;
  padding:8px 12px; font-weight:700; font-size:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .6s ease, transform .6s ease;
}
.save-toast.show{ opacity:1; transform:translateY(0); }

/* LOJA – tabela clicável */
.shop-title{margin:10px 0 12px;font-weight:800; letter-spacing:.2px;}

table.shop{width:100%; border-collapse:separate; border-spacing:0 12px; table-layout:fixed}
.shop thead th{font-size:12px; text-align:left; opacity:.75; padding:0 10px}
.shop tbody tr{
  background:var(--panel-bg); border:1px solid var(--border); border-radius:12px;
  transition:background .12s ease, transform .06s ease, box-shadow .12s ease, filter .12s ease;
  position:relative;
}
.shop tbody td{padding:14px 12px; vertical-align:middle; overflow:hidden}
.shop tbody td.name{padding-left:10px;}
.shop .name{font-weight:700}
.shop-item-header{display:flex; align-items:center; gap:12px;}
.shop-icon img{width:100%; height:100%; object-fit:contain; display:block;}
.shop-title-text{line-height:1.2;}
.shop .limit{opacity:.85}
.shop .status{font-size:12px; opacity:.85; margin-top:6px}

/* linha clicável */
.shop tr.clickable{ cursor:pointer; }
.shop tr.clickable:hover{ filter:brightness(1.08); box-shadow:0 8px 22px rgba(0,0,0,.28); }
.shop tr.clickable:active{ transform:scale(.992); }
/* limite atingido */
.shop tr.max{ opacity:.6; cursor:not-allowed; }

/* linha com grana suficiente */
.shop tr.afford{
  box-shadow:0 0 0 1px rgba(16,185,129,.30), 0 6px 18px rgba(0,0,0,.25);
}
.shop tr.afford:hover{
  filter:brightness(1.08);
}
/* owned/limit estilo grande (novo) */
.owned-limit{ font-weight:800; font-size:1.05rem; letter-spacing:.6px; color:var(--fg); }
.owned-limit .owned{ color:var(--fg); opacity:0.95; margin-right:6px; }
.owned-limit .sep{ opacity:0.6; margin: 0 6px; color:var(--muted) }

/* linha travada (não aparece até desbloquear) */
.shop tr.locked{ display:none; }

/* “faltam pontos” + buzz */
.need{ font-size:12px; color:#93c5fd; opacity:.95; margin-top:4px }
@keyframes buzz{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-2px)} 40%{transform:translateX(2px)} 60%{transform:translateX(-1px)} 80%{transform:translateX(1px)} }
.buzz{ animation:buzz .15s linear 2 }

@keyframes flashG{ from{box-shadow:0 0 0 2px rgba(16,185,129,.55)} to{box-shadow:0 0 0 10px rgba(16,185,129,0)} }
.flashG{ animation:flashG .42s ease-out 1; }

/* evita highlight azul no mobile e seleção de texto */
.shop tbody tr{ -webkit-tap-highlight-color:transparent; user-select:none; }

/* Responsivo */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; grid-auto-rows:1fr; height:100%; }
  .top-area{ height:auto; }
  .stage{ max-width:100%; }
  .panel{ min-height:0; }
}

/* === Tooltip de melhorias === */
.tooltip-card{
  position:fixed;
  z-index:1000;
  max-width:280px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(20,20,24,0.94);
  color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.04) inset;
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .12s ease, transform .12s ease;
}
.tooltip-card.visible{ opacity:1; transform:translateY(0); }
.tooltip-card .tooltip-name{ font-weight:700; margin-bottom:4px; }
.tooltip-card .tooltip-effect{ font-size:.92rem; line-height:1.25rem; opacity:.92; margin-bottom:6px; }
.tooltip-card .tooltip-cost{ font-size:.85rem; opacity:.82; }
.tooltip-card--buff{
  max-width:320px;
}
.tooltip-card--buff .tooltip-meta{
  font-size:.85rem;
  opacity:.82;
  font-style:italic;
}
.particle {
  position: absolute;
  font-size: 20px;
  pointer-events: none;
  user-select: none;
  animation: subir 1s ease-out forwards;
  text-shadow: 0 0 8px currentColor;
  font-weight: bold;
  z-index: 9999;
}

.buff-feedback{
  position:fixed;
  padding:8px 14px;
  border-radius:12px;
  background:rgba(0,0,0,.85);
  color:#fff;
  font-weight:600;
  font-size:1rem;
  pointer-events:none;
  z-index:2000;
  opacity:0;
  transform:translate(-50%, 0) translateY(6px);
  transition:opacity .18s ease;
  animation:buffFeedbackRise 1.2s forwards;
}
.buff-feedback--positivo{
  box-shadow:0 0 0 1px rgba(16,185,129,.5), 0 16px 34px rgba(0,0,0,.5);
}
.buff-feedback--negativo{
  box-shadow:0 0 0 1px rgba(239,68,68,.4), 0 16px 34px rgba(0,0,0,.5);
}
.buff-feedback.show{
  opacity:1;
}

@keyframes buffFeedbackRise{
  0%{ opacity:1; transform:translate(-50%, 0) translateY(0); }
  70%{ opacity:.95; transform:translate(-50%, -40px); }
  100%{ opacity:0; transform:translate(-50%, -72px); }
}

@keyframes subir {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.5); }
}

// === Mini-game: Acerte o Mema ===
function iniciarMiniGame() {
  const memaMini = document.createElement('img');
  memaMini.src = 'assets/images/variacoes-mema/mema_reset.png';
  memaMini.className = 'mema-mini';
  memaMini.style.position = 'fixed';
  memaMini.style.width = '100px';
  memaMini.style.cursor = 'pointer';
  memaMini.style.zIndex = '9999';
  
  // posição aleatória na tela
  const x = Math.random() * (window.innerWidth - 100);
  const y = Math.random() * (window.innerHeight - 100);
  memaMini.style.left = `${x}px`;
  memaMini.style.top = `${y}px`;

  document.body.appendChild(memaMini);

  // desaparece depois de 1.5s se não for clicado
  const timeout = setTimeout(() => {
    memaMini.remove();
  }, 1500);

  // clique dá bônus
  memaMini.addEventListener('click', () => {
    clearTimeout(timeout);
    pts += 1000; // bônus
    renderStatsPanel(); // atualiza pontos
    memaMini.remove();

    // pequena partícula de "+1000"
    const part = document.createElement('span');
    part.textContent = '+1000!';
    part.className = 'particle';
    part.style.left = `${x + 40}px`;
    part.style.top = `${y}px`;
    document.body.appendChild(part);
    setTimeout(() => part.remove(), 1000);
  });
}

// aparecer aleatoriamente a cada 30–60 segundos
setInterval(() => {
  if (Math.random() < 0.5) { // 50% de chance
    iniciarMiniGame();
  }
}, 30000);
//mini game
  .mema-bonus {
  position: fixed;
  width: 80px;
  height: 80px;
  cursor: pointer;
  z-index: 2000;
  animation: brilhar 1s infinite alternate;
}

@keyframes brilhar {
  from { filter: brightness(1); transform: scale(1); }
  to { filter: brightness(2) drop-shadow(0 0 10px gold); transform: scale(1.1); }
}

.bonus-text {
  position: fixed;
  font-weight: bold;
  color: gold;
  font-size: 20px;
  animation: subirBonus 1s ease-out forwards;
  pointer-events: none;
  z-index: 3000;
}

@keyframes subirBonus {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-50px); }
}

  #menuExtras button {
  background: #ff6;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 8px;
  cursor: pointer;
}

.painel {
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 15px;
  border-radius: 10px;
  margin-top: 10px;
}

.oculto {
  display: none;
}