/* TheCastPod — dark art-deco theme: near-black base, champagne gold accents,
   teal glow for primary actions. Palette taken from the brand poster. */
:root{
  --bg:#0a0908; --card:#161410; --card2:#1d1a13; --line:#2a251b;
  --gold:#d4b878; --gold-strong:#eeda9f; --gold-dim:#9c8f74; --gold-deep:#6d5a35;
  --teal:#63d3c3; --teal-soft:#c8f2e6; --teal-ink:#062621;
  --cream:#f3ead6; --green:#58c99a; --red:#e05656;
  --shadow:0 10px 28px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;}
body{background:#040404;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:16px;}

.phone{width:410px;max-width:100%;height:820px;max-height:96vh;background:var(--bg);
  border-radius:36px;box-shadow:0 24px 70px rgba(0,0,0,.7);overflow:hidden;
  display:flex;flex-direction:column;position:relative;border:8px solid #1d1d1f;}
@media (max-width:480px){
  body{padding:0;}
  .phone{width:100%;height:100vh;max-height:100vh;border:none;border-radius:0;}
}

.screen{flex:1;overflow-y:auto;display:none;flex-direction:column;}
.screen.active{display:flex;}

svg.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
svg.icon.sm{width:14px;height:14px;}

/* ---------- language toggle ---------- */
.lang-toggle{position:absolute;top:14px;right:14px;z-index:20;display:flex;
  background:rgba(16,14,10,.72);backdrop-filter:blur(6px);border-radius:999px;padding:3px;
  border:1px solid var(--line);}
.lang-toggle button{border:none;background:none;padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:800;color:var(--gold-dim);cursor:pointer;}
.lang-toggle button.on{background:var(--gold);color:#1a1408;}

/* ---------- bottom nav ---------- */
.navbar{display:none;background:#100e0a;border-top:1px solid var(--line);
  padding:10px 0 14px;justify-content:space-around;}
.navbar.visible{display:flex;}
.nav-btn{background:none;border:none;cursor:pointer;text-align:center;color:var(--gold-dim);
  font-size:11px;font-weight:600;width:72px;opacity:.7;}
.nav-btn svg{display:block;margin:0 auto 3px;width:22px;height:22px;stroke-width:1.8;}
.nav-btn.active{color:var(--gold);opacity:1;}

/* ---------- welcome ---------- */
#welcome{background:var(--bg);align-items:center;text-align:center;padding:30px 26px 34px;}
.w-brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px;}
.w-mark{width:46px;height:46px;fill:none;stroke:var(--gold);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.w-word{font-size:12px;letter-spacing:5px;color:var(--gold);font-weight:700;}
.w-head{font-family:Georgia,'Times New Roman',serif;font-size:27px;color:var(--gold-strong);
  line-height:1.2;font-weight:700;letter-spacing:.3px;}
.w-sub{font-size:14px;color:#c9b98f;margin-top:8px;}
.hero{border:1px solid var(--gold);outline:1px solid rgba(212,184,120,.35);outline-offset:4px;
  margin:20px 4px 4px;width:calc(100% - 8px);}
.hero img{display:block;width:100%;height:auto;}
.w-cats{font-size:11px;letter-spacing:2.5px;color:var(--gold);font-weight:700;margin:18px 0 16px;}
.wform{width:100%;display:flex;flex-direction:column;gap:9px;margin-bottom:6px;}
.wform input{border:1px solid var(--line);border-radius:13px;padding:13px 16px;font-size:14.5px;
  width:100%;background:#14120d;color:var(--cream);}
.wform input::placeholder{color:#8a7d63;}
.wform input:focus{outline:none;border-color:var(--gold-deep);}
.btn-primary{background:linear-gradient(90deg,var(--teal-soft),var(--teal));color:var(--teal-ink);
  border:none;border-radius:999px;padding:15px 28px;font-size:15.5px;font-weight:800;
  letter-spacing:.4px;cursor:pointer;width:100%;box-shadow:0 0 26px rgba(99,211,195,.28);}
.btn-primary:active{transform:scale(.97);}
.btn-primary:disabled{opacity:.6;}
.btn-ghost{background:none;border:1px solid var(--gold-deep);color:var(--gold);border-radius:999px;
  padding:12px 28px;font-size:13.5px;font-weight:700;cursor:pointer;width:100%;margin-top:9px;}
.wlink{background:none;border:none;color:var(--gold-dim);font-size:13px;font-weight:700;cursor:pointer;
  margin-top:12px;text-decoration:underline;}
.fine{font-size:11.5px;color:#8a7d63;margin-top:10px;}
.werror{background:rgba(224,86,86,.14);border:1px solid #6d2c2c;border-radius:10px;
  padding:8px 12px;font-size:12.5px;color:#f0bdbd;margin-top:10px;display:none;}
.werror.visible{display:block;}

/* ---------- common ---------- */
.header{padding:22px 20px 12px;}
.header h2{font-family:Georgia,'Times New Roman',serif;font-size:24px;color:var(--gold-strong);letter-spacing:.3px;}
.header p{font-size:13px;color:var(--gold-dim);margin-top:2px;}
.empty{padding:30px 20px;text-align:center;color:var(--gold-dim);font-size:13.5px;line-height:1.5;}

/* ---------- home ---------- */
/* Brand image as a dim watermark behind the feed; the dark overlay keeps the
   content readable and the image stays put while the feed scrolls. */
#home{background:linear-gradient(rgba(10,9,8,.90),rgba(10,9,8,.96)),url('/hero.png') center 30%/cover no-repeat;}
.chips{display:flex;gap:8px;overflow-x:auto;padding:6px 20px 14px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;background:none;border:1px solid var(--line);color:var(--gold-dim);
  border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer;}
.chip.on{background:var(--gold);border-color:var(--gold);color:#1a1408;}

.trend{margin:0 20px 14px;background:linear-gradient(140deg,var(--card2),var(--card));
  border:1px solid var(--gold-deep);border-radius:18px;padding:14px;box-shadow:var(--shadow);}
.trend.hidden{display:none;}
.trend-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px;}
.trend-title{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--gold);}
.trend-title svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.trend-tabs{display:flex;gap:3px;}
.trend-tabs button{border:none;background:none;padding:4px 9px;border-radius:999px;font-size:11px;
  font-weight:700;color:var(--gold-dim);cursor:pointer;white-space:nowrap;}
.trend-tabs button.on{background:var(--gold);color:#1a1408;}
.trend-body{display:flex;gap:12px;align-items:center;}
.trend-badge{font-size:11px;font-weight:800;color:var(--gold);margin-top:4px;display:flex;
  align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.5px;}
.trend-badge svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.trend-info{flex:1;min-width:0;}
.trend-info h3{font-size:14px;color:var(--cream);line-height:1.3;}

.feed{padding:0 20px 20px;display:flex;flex-direction:column;gap:12px;}
.pod{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;
  box-shadow:var(--shadow);display:flex;gap:12px;}
.avatar{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;color:#1a1408;letter-spacing:.5px;flex-shrink:0;
  background:linear-gradient(140deg,var(--gold-strong),#b08d4f);overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.trend .avatar{width:44px;height:44px;font-size:14px;border-radius:12px;}
.pod-body{flex:1;min-width:0;}
.pod-body h3{font-size:15px;color:var(--cream);line-height:1.3;}
.pod-meta{font-size:12px;color:var(--gold-dim);margin-top:3px;}
.tag{display:inline-flex;align-items:center;gap:4px;background:#241f14;color:var(--gold);border-radius:6px;
  padding:2px 7px;font-size:11px;font-weight:700;margin-top:6px;border:none;vertical-align:middle;}
.tag.lang{background:#16211f;color:#8fc9be;margin-left:4px;}
.tag.duo{background:#122622;color:var(--teal);margin-left:4px;}
.pod-actions{display:flex;flex-direction:column;align-items:center;gap:6px;}
.play{width:38px;height:38px;border-radius:50%;border:none;background:var(--teal);color:var(--teal-ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 14px rgba(99,211,195,.25);}
.play svg{width:14px;height:14px;fill:currentColor;stroke:none;}
.like{background:none;border:none;cursor:pointer;font-size:13px;color:var(--gold-dim);font-weight:700;
  display:flex;align-items:center;gap:4px;}
.like svg{width:15px;height:15px;}
.like.liked{color:var(--gold-strong);}

/* ---------- record ---------- */
#record{align-items:center;text-align:center;}
.saldo{margin:8px auto 0;background:#1c1812;border:1px solid var(--line);color:var(--gold);
  border-radius:999px;padding:6px 16px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;}
.buy-min{margin:10px auto 0;background:none;border:1.5px dashed var(--teal);
  color:var(--teal);border-radius:999px;padding:6px 16px;font-size:12.5px;font-weight:700;cursor:pointer;}
.modo{display:flex;background:var(--card);border-radius:14px;padding:4px;margin:14px auto 0;
  border:1px solid var(--line);}
.modo button{border:none;background:none;padding:9px 22px;border-radius:11px;font-size:14px;
  font-weight:700;color:var(--gold-dim);cursor:pointer;}
.modo button.on{background:var(--gold);color:#1a1408;}
.duo-panel{margin:14px 20px 0;width:calc(100% - 40px);background:var(--card);border-radius:16px;
  padding:16px;border:1px solid var(--line);box-shadow:var(--shadow);}
.duo-panel .btn-coral{margin-top:0;width:100%;}
.duo-or{font-size:12px;font-weight:700;color:var(--gold-dim);margin:10px 0;text-transform:uppercase;letter-spacing:.6px;}
.duo-join{display:flex;gap:8px;}
.duo-join input{flex:1;border:1px solid var(--line);border-radius:11px;padding:10px 13px;
  font-size:15px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--cream);
  background:#14120d;text-align:center;min-width:0;}
.duo-code{display:block;font-size:34px;font-weight:800;letter-spacing:6px;color:var(--gold-strong);
  background:#241f14;border:1px solid var(--gold-deep);border-radius:12px;padding:12px 8px;}
.duo-status{font-size:13px;color:var(--gold-dim);margin-top:10px;line-height:1.4;}
.duo-status.connected{color:var(--green);font-weight:700;}
.timer{font-size:58px;font-weight:200;color:var(--cream);margin:18px 0 4px;font-variant-numeric:tabular-nums;letter-spacing:2px;}
.timer-label{font-size:13px;color:var(--gold-dim);}
.rec-wrap{margin:22px 0 6px;}
.rec{width:90px;height:90px;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--teal-soft),var(--teal));color:var(--teal-ink);
  cursor:pointer;box-shadow:0 0 34px rgba(99,211,195,.35);display:flex;align-items:center;justify-content:center;}
.rec svg{width:30px;height:30px;}
.rec:disabled{opacity:.4;box-shadow:none;}
.rec.grabando{animation:pulso 1.2s infinite;background:#d94848;color:#fff;}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(217,72,72,.5);}70%{box-shadow:0 0 0 22px rgba(217,72,72,0);}100%{box-shadow:0 0 0 0 rgba(217,72,72,0);}}
.rec-hint{font-size:13px;color:var(--gold-dim);margin-top:8px;padding:0 30px;line-height:1.4;}

.publish-panel{margin:16px 20px;width:calc(100% - 40px);background:var(--card);border-radius:16px;
  padding:16px;border:1px solid var(--line);box-shadow:var(--shadow);display:none;text-align:left;}
.publish-panel.visible{display:block;}
.publish-panel label{font-size:12.5px;font-weight:700;color:var(--gold-dim);display:block;margin-bottom:6px;}
.publish-panel audio{width:100%;height:38px;}
.publish-panel input{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  font-size:14px;color:var(--cream);background:#14120d;}
.publish-actions{display:flex;gap:8px;margin-top:12px;}
.btn-coral{background:linear-gradient(90deg,var(--teal-soft),var(--teal));color:var(--teal-ink);
  border:none;border-radius:12px;flex:1;padding:12px;font-size:14px;font-weight:800;cursor:pointer;}
.btn-coral:disabled{opacity:.6;}
.btn-plain{background:none;border:1px solid var(--line);color:var(--gold-dim);border-radius:12px;
  padding:12px 16px;font-size:13px;font-weight:700;cursor:pointer;}

.ia-panel{margin:0 20px 16px;width:calc(100% - 40px);background:var(--card);border-radius:16px;
  padding:14px 16px;border:1px solid var(--line);box-shadow:var(--shadow);display:none;text-align:left;}
.ia-panel.visible{display:block;}
.ia-step{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--gold-dim);padding:5px 0;}
.ia-step .ok{color:var(--green);font-weight:700;}
.ia-step .bad{color:var(--red);font-weight:700;}
.ia-step b{color:var(--cream);}
.spin{display:inline-block;width:15px;height:15px;border:2.5px solid var(--line);border-top-color:var(--gold);
  border-radius:50%;animation:girar .8s linear infinite;flex-shrink:0;}
@keyframes girar{to{transform:rotate(360deg);}}

/* ---------- profile ---------- */
.perfil-top{background:linear-gradient(160deg,#242013,var(--bg));border-bottom:1px solid var(--gold-deep);
  padding:30px 20px 20px;text-align:center;color:var(--cream);}
.pavatar-wrap{position:relative;width:70px;margin:0 auto 8px;cursor:pointer;}
.pavatar{width:70px;height:70px;border-radius:22px;background:linear-gradient(140deg,var(--gold-strong),#b08d4f);
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#1a1408;
  letter-spacing:1px;overflow:hidden;}
.pavatar img{width:100%;height:100%;object-fit:cover;display:block;}
.pavatar-edit{position:absolute;right:-6px;bottom:-6px;width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:#1a1408;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);}
.pavatar-edit svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.perfil-top h2{font-family:Georgia,'Times New Roman',serif;font-size:20px;color:var(--gold-strong);}
.perfil-top p{font-size:13px;color:var(--gold-dim);}
.badge-mes{display:inline-block;background:none;border:1px solid var(--gold-deep);color:var(--gold);
  border-radius:8px;padding:3px 10px;font-size:12px;font-weight:700;margin-top:8px;}
.stats{display:flex;gap:10px;padding:16px 20px 0;}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 8px;
  text-align:center;box-shadow:var(--shadow);}
.stat b{display:block;font-size:21px;color:var(--cream);}
.stat span{font-size:11px;color:var(--gold-dim);font-weight:600;}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;
  margin:14px 20px 0;box-shadow:var(--shadow);}
.card h3{font-size:15px;color:var(--cream);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.card h3 svg{color:var(--gold);}
.card p{font-size:13px;color:var(--gold-dim);margin-top:8px;line-height:1.5;}
.ladder{display:flex;gap:4px;}
.step{flex:1;text-align:center;font-size:10.5px;font-weight:700;color:#8a7a55;
  background:#241f14;border-radius:7px;padding:7px 0;}
.step.won{background:linear-gradient(140deg,var(--gold-strong),#b08d4f);color:#1a1408;}
.step.max{background:none;color:var(--gold);border:1.5px dashed var(--gold-deep);}
.ranks{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.rank{text-align:center;padding:11px 4px 9px;border-radius:12px;background:#14120d;
  border:1px solid var(--line);}
.rank svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto 5px;}
.rank b{display:block;font-size:11px;color:var(--cream);line-height:1.2;}
.rank small{display:block;font-size:9.5px;color:var(--gold-dim);margin-top:2px;line-height:1.3;}
.rank.won{border-color:var(--gold-deep);background:#241d10;}
.rank.won svg{color:var(--gold);}
.rank.locked svg{color:#55503f;}
.rank.locked b{color:var(--gold-dim);}
.invite-row{display:flex;gap:8px;margin-top:10px;}
.invite-code{flex:1;background:#14120d;border:1.5px dashed var(--gold-deep);border-radius:10px;
  padding:9px 12px;font-weight:800;letter-spacing:1px;color:var(--gold-strong);font-size:13px;text-align:center;}
.invite-btn{background:var(--teal);color:var(--teal-ink);border:none;border-radius:10px;
  padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
.reglas li{font-size:13px;color:var(--gold-dim);margin:6px 0 6px 18px;line-height:1.45;}
.logout{display:block;margin:20px 20px 26px;width:calc(100% - 40px);background:none;
  border:1px solid #6d2c2c;color:#e08585;border-radius:12px;padding:12px;
  font-size:13.5px;font-weight:700;cursor:pointer;}

/* ---------- modal ---------- */
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.65);display:none;
  align-items:flex-end;z-index:30;}
.modal-bg.visible{display:flex;}
.modal{background:var(--card2);border-top:1px solid var(--gold-deep);width:100%;
  border-radius:26px 26px 0 0;padding:24px 20px 30px;text-align:center;}
.modal h3{font-size:19px;color:var(--gold-strong);display:flex;align-items:center;justify-content:center;gap:8px;}
.modal h3 svg{color:var(--gold);}
.modal .mdesc{font-size:13px;color:var(--gold-dim);margin-top:6px;line-height:1.5;}
.modal .btn-coral{width:100%;margin-top:16px;flex:none;}
.mclose{background:none;border:none;color:var(--gold-dim);font-size:13px;font-weight:700;
  margin-top:10px;cursor:pointer;}

.toast{position:absolute;bottom:86px;left:50%;transform:translateX(-50%);background:var(--gold-strong);
  color:#1a1408;border-radius:12px;padding:10px 18px;font-size:13px;font-weight:700;z-index:40;
  opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;}
.toast.visible{opacity:1;}