/* --bg, --fg, --bg-r/g/b, --fg-r/g/b, --base-size are set by JS */
:root {
  --bg: #000000;
  --fg: #ffffff;
  --bg-r:0; --bg-g:0; --bg-b:0;
  --fg-r:255; --fg-g:255; --fg-b:255;
  --base-size: 20px;
}


*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  font-size: var(--base-size);
}
html, body {
  height:100%; width:100%;
  background: var(--bg); color: var(--fg);
  font-family:'Texturina', serif;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}
a {
  color:inherit; text-decoration:none;
}


#app {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
}


#deck {
  flex:1; overflow-y:scroll;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#deck::-webkit-scrollbar { display:none; }


.card {
  scroll-snap-align:start;
  height:100vh;
  height:100dvh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 3em 1.6em 4em;
  position:relative;
  touch-action:pan-y;
  overflow:hidden;
}
.card-body {
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.card.swiping .card-body {
  transition:none;
}
.card-body {
  max-width: 30em;
  width:100%;
  text-align: center;
}


.card.swipe-exit-left .card-body {
  transition:transform .35s cubic-bezier(.4,0,1,1) !important;
  transform:translateX(-120vw) rotate(-12deg) !important;
}
.card.swipe-exit-right .card-body {
  transition:transform .35s cubic-bezier(.4,0,1,1) !important;
  transform:translateX(120vw) rotate(12deg) !important;
}


.card-actions button.highlight {
  background: rgba(var(--fg-r),var(--fg-g),var(--fg-b),.5) !important;
  color: var(--bg) !important;
  border-color: rgba(var(--fg-r),var(--fg-g),var(--fg-b),.6) !important;
  transition:none;
}
.card-actions button.glow {
  border-color: rgba(var(--fg-r),var(--fg-g),var(--fg-b),.3);
  transition:none;
}


.card-body p {
    font-size: clamp(1.1em, 4.5vw, 1.7em);
    line-height: 1.2;
    margin: 0.5em 0;
    font-weight: 600;
    letter-spacing: -0.025em;
    opacity: 0;
    transform: translateY(1em) scale(.97);
    transition: none;
    /* text-wrap: balance; */
    text-wrap: pretty;

}
.card.visible .card-body p {
  animation:revealLine .55s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes revealLine {
  to { opacity:1; transform:translateY(0) scale(1); }
}


.secondary { font-size:.75em; letter-spacing:.1em; color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.2); }

.card-meta {
  /* margin-top: 3em; */
  font-size: 66%;
  letter-spacing: 0;
  /* text-transform:uppercase; */
  opacity:0;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.2);
}
.card-meta a {color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.2);font-weight: 800;}
.card-meta a:hover { color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.4); }
.meta-sep { display:inline-block; width:1.5em; text-align:center; opacity:.2; font-size:.8em; }
.meta-sep::after { content:'\2014'; }
.meta-likes { white-space:nowrap;font-weight:800; }
.meta-likes i {
    font-size: .9em;
    vertical-align: baseline;
    color: var(--fg);
    opacity: 0.2;

}
.btn-curate {/* border:none; *//* color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.5); */}
.btn-curate:hover { color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.8); }
.card.visible .card-meta {
  animation:revealLine .45s .5s cubic-bezier(.22,1,.36,1) forwards;
}


.bar-btn, .btn-action, .card-actions button, .card-actions .btn-curate, nav .nav-group a {
  width: 2.5rem;
  height: 2.5rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 100%;
  cursor:pointer;
  transition:all .25s;
  background:none;
  text-decoration:none;
  position:relative;
}


.card .card-actions {
  position:absolute;
  bottom: 2rem;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 1em;
  /* opacity:0; */
}
.card.visible .card-actions {
  animation: revealLine 1s .55s cubic-bezier(.22,1,.36,1) forwards;
}
.card-actions {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1.8em;
  /* margin-top:1.4em; */
}
.card-actions .btn-action {
  border:1px solid rgba(var(--fg-r),var(--fg-g),var(--fg-b),.1);
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.4);
}
.card-actions button:active {
  background:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.12);
  color: var(--fg);
  transform:scale(.92);
}
.card-actions button .hint {
  display:none;
  position:absolute;
  bottom:-1.5em; left:50%;
  transform:translateX(-50%);
  font-size:.7em;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.15);
  white-space:nowrap;
  transition:opacity .3s;
}
.hints-hidden .card-actions button .hint {
  opacity:0;
}


.list-card {
  max-width: 30em;
  margin: 0 auto 1rem;
  padding: 2em 3em;
  background:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.025);
  border:1px solid rgba(var(--fg-r),var(--fg-g),var(--fg-b),.06);
  border-radius: 0.75rem;
  text-align: center;
}
.list-card p {
  font-size: clamp(1em, 3.5vw, 1.25em);
  line-height: 1.2;
  margin:0.5em 0;
<
  div class="list-card" data-id="19924"><p>Eres un bocotas, un jetón y un papelonero, y es la última vez que te traemos a Pelokitos</p><p>No puede ser que te asustes con el esprai y empieces a repartir derechazos</p><p>Y no mides tu fuerza, ya sabes, porque eres mogólico</p><div class="card-footer"><div class="card-meta"><a href="https: //narx.ar/carlos#19924">#19924</a><span class="meta-sep"></span><span class="meta-likes"><i class="ri-heart-fill"></i> 1</span></div><div class="card-actions"><a href="curate.php?id=19924" target="carlos_curate" class="btn-curate" title="Curar"><i class="ri-edit-line"></i></a><button class="btn-share" data-id="19924" title="Compartir"><i class="ri-share-2-line"></i></button><button class="btn-toggle-fav" data-id="19924" title="Favorito"><i class="ri-heart-fill"></i></button></div></div></div>;
<
  div class="list-card" data-id="19924"><p>Eres un bocotas, un jetón y un papelonero, y es la última vez que te traemos a Pelokitos</p><p>No puede ser que te asustes con el esprai y empieces a repartir derechazos</p><p>Y no mides tu fuerza, ya sabes, porque eres mogólico</p><div class="card-footer"><div class="card-meta"><a href="https: //narx.ar/carlos#19924">#19924</a><span class="meta-sep"></span><span class="meta-likes"><i class="ri-heart-fill"></i> 1</span></div><div class="card-actions"><a href="curate.php?id=19924" target="carlos_curate" class="btn-curate" title="Curar"><i class="ri-edit-line"></i></a><button class="btn-share" data-id="19924" title="Compartir"><i class="ri-share-2-line"></i></button><button class="btn-toggle-fav" data-id="19924" title="Favorito"><i class="ri-heart-fill"></i></button></div></div></div>;
  text-wrap: pretty;
  letter-spacing: -0.025em;
}
/* List card: meta + actions in same row */
.list-card .card-footer {
  display:flex;
  align-items:center;
  /* margin-top:.8em; */
  margin-right: -0.5em;
  margin-bottom: -0.5em;
}
.list-card .card-meta {
  margin-top:0;
  animation:none;
  opacity:1;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.2);
  font-size:.75em;
  flex:1;
  text-align: left;
}
.list-card .card-meta a {color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.2);font-weight: 800;}
.list-card .card-actions {
  animation:none;
  opacity:1;
  margin-top:0;
  gap: 0;
}
.list-card .card-actions>* {
  border:none;
  /* width:2em; */
  /* height:2em; */
  /* font-size:1em; */
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.25);
}
.list-card .card-actions button:active {
  color: var(--fg);
  background:none;
}


#toast {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.9);
  background:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.1);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(var(--fg-r),var(--fg-g),var(--fg-b),.12);
  padding:.8em 1.8em;
  border-radius:2em;
  font-size:.85em; letter-spacing:.1em; text-transform:uppercase;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s, transform .35s;
  z-index:100;
}
#toast.show {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}


#action-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  z-index:90;
  opacity:0;
}
#action-overlay i {
  font-size:4rem;
  color: var(--fg);
  opacity:0;
}
#action-overlay.playing {
  animation:overlayFade 1s ease forwards;
}
#action-overlay.playing i {
  animation:iconKenBurns 1s linear forwards;
}
@keyframes overlayFade {
  0%   { opacity:0; }
  15%  { opacity:1; }
  75%  { opacity:1; }
  100% { opacity:0; }
}
@keyframes iconKenBurns {
  0%   { opacity:0; transform:scale(1); }
  20%  { opacity:1; transform:scale(1.2); }
  60%  { opacity:1; transform:scale(1.6); }
  100% { opacity:0; transform:scale(2); }
}


nav {
  position:fixed;
  top: 1rem;
  left:0;
  right:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  z-index:50;
  pointer-events:none;
}
.nav-group {
  display:flex;
  align-items:center;
  gap: 1rem;
  border-bottom:1px solid rgba(var(--fg-r),var(--fg-g),var(--fg-b),.1);
  padding-bottom: 0.5rem;
  pointer-events:auto;
}
nav .nav-group a {
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.3);
  border:none;
}
nav .nav-group a.active { color: var(--fg); }


.screen {
    display: none;
    position: absolute;
    inset: 0;
    background: var(--bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 3rem 1rem;
    z-index: 10;

}
.screen.active { display:block; }

.screen h1 {
  font-size: 1em;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform:uppercase;
  margin: 1rem;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.35);
  text-align:center;
}

/* search input */
#search-input {
  width:100%;
  max-width: 20rem;
  display:block;
  margin:0 auto 2em;
  background:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.05);
  border:1px solid rgba(var(--fg-r),var(--fg-g),var(--fg-b),.1);
  color: var(--fg);
  font-family:'Texturina', serif;
  font-size: 150%;
  padding: 0.3em;
  border-radius:2em;
  outline:none;
  text-align:center;
  transition:border-color .3s;
  font-style: italic;
ñ
  ome: 1;
}
#search-input:focus { border-color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.3); }
#search-input::placeholder { color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.18); }

/* info screen */
#screen-info.active {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:100%;
}
#screen-info p {
  max-width:30em;
  font-size:clamp(.9em, 3vw, 1.05em);
  line-height:1.7;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.5);
  margin-bottom:1em;
  text-align:center;
}
#screen-info h2 {
  font-size:.75em; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.25);
  margin:1.5em 0 .5em;
}

.empty-state {
  text-align:center;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.2);
  font-size:.9em;
  padding:3em 1em;
  letter-spacing:.04em;
  font-style: italic;
}

/* spinner */
.spinner {
  display:flex; align-items:center; justify-content:center;
  padding:2em;
}
.spinner::after {
  content:'';
  width:1.4em; height:1.4em;
  border:2px solid rgba(var(--fg-r),var(--fg-g),var(--fg-b),.08);
  border-top-color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.4);
  border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }


#settings-panel {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  padding: 2em;
  background: var(--bg);
  z-index:11;
}

.settings-label {
  font-size:.6em;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.15);
  /* margin-bottom:.8em; */
  text-align:center;
}

.settings-row,.settings-footer {
  display:flex;
  align-items:center;
  justify-content: center;
  max-width: 30em;
  margin:0 auto;
  gap: 3rem;
  padding: 1rem;
}

/* Theme presets — color circles */
#theme-presets {
  display:flex;
  gap:.4em;
  align-items:center;
}
.pill-preset {
  width: 2rem;
  height: 2rem;
  border-radius:50%;
  border:2px solid transparent;
  font-size:.75em;
  cursor:pointer;
  transition:all .2s;
  padding:0;
  line-height:1;
  color:transparent;
  overflow:hidden;
}
.pill-preset.active {
  border-color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.5);
}
.pill-preset.pill-custom {
  background:transparent !important;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.3) !important;
  border:1px solid rgba(var(--fg-r),var(--fg-g),var(--fg-b),.15);
  font-size:.65em;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Scale controls — Aa buttons */
#scale-controls {
  display:flex;
  align-items:center;
  gap:.4em;
}
#scale-controls button {
  width: 2rem;
  height: 2rem;
  border-radius:50%;
  border:1px solid rgba(var(--fg-r),var(--fg-g),var(--fg-b),.12);
  background:none;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.3);
  cursor:pointer;
  font-family:'Texturina', serif;
  transition:all .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
#scale-controls button:active {
  background:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.1);
  color: var(--fg);
}
.aa-small {font-size: 0.7em;}
.aa-big {font-size: 1.2em;line-height: 10%;}

/* Custom color inputs */
#custom-colors {
  display:flex;
  gap: 0.2rem;
  justify-content:center;
  /* margin-top:.8em; */
}
#custom-colors label {
  font-size:.65em;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.2);
  display:flex;
  align-items:center;
  gap:.5em;
}
#custom-colors input[type="color"] {
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid rgba(var(--fg-r),var(--fg-g),var(--fg-b),.15);
  border-radius: 5px;
  background: rgba(var(--fg-r),var(--fg-g),var(--fg-b),.15);
  cursor:pointer;
  padding:0;
}

/* Clear session button */
.settings-footer {border-top: 1px solid rgba(var(--fg-r),var(--fg-g),var(--fg-b),.1);gap: 0.5rem;}
.settings-footer button {
  padding:.3em .9em;
  border-radius:2em;
  border:1px solid rgba(var(--fg-r),var(--fg-g),var(--fg-b),.1);
  background:none;
  color:rgba(var(--fg-r),var(--fg-g),var(--fg-b),.2);
  font-family:'Texturina', serif;
  font-size:.6em;
  cursor:pointer;
  transition:all .2s;
}
#clear-data:hover {
  border-color:rgba(255,80,80,.4);
  color:rgba(255,80,80,.7);
}
#clear-data:active {
  background:rgba(255,80,80,.1);
  color:rgba(255,80,80,.9);
}


@media (max-width:768px){
  
.list-card {
  padding:1rem;
}
.settings-row {
    flex-direction: column;
    gap: 1rem;
}
.settings-footer {}
  .pill-preset {width:1rem;height:1rem;}
  .card .card-actions {bottom: 1rem;}
  nav {top: 0;}
  .nav-group {
    padding: 0.25rem;
}
}