/* landing.css — pagina principală (/). Un singur ecran, fără scroll (320–1920).
   Construit peste tr.css. Momentul de mișcare: graficul. */

html,body{ height:100%; }
.lp{
  display:flex; flex-direction:column;
  height:100vh; height:100dvh; overflow:hidden;
  background:
    radial-gradient(60% 45% at 78% 55%, rgba(212,255,26,.07), transparent 70%),
    radial-gradient(120% 70% at 50% -10%, #0C141D 0%, transparent 60%),
    var(--bg);
}
/* grilă fină de terminal în fundal */
.lp::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/48px 48px;
  -webkit-mask-image:radial-gradient(80% 70% at 60% 50%, #000 0%, transparent 75%);
          mask-image:radial-gradient(80% 70% at 60% 50%, #000 0%, transparent 75%);
}
.lp-news{ flex:none; padding-top:var(--safe-t); height:calc(38px + var(--safe-t)); }
.lp-news .tr-breaking{ top:var(--safe-t); }
.lp-brfx{ display:flex; gap:4px; margin-left:auto; flex:none; }
.lp-brfx .tr-fx{ background:#000; }

.lp-main{
  flex:1 1 auto; min-height:0;
  display:grid; gap:12px;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(120px,1fr) auto auto;
  grid-template-areas:"head" "stage" "join" "foot";
  width:100%; max-width:640px; margin:0 auto;
  padding:14px 16px calc(10px + var(--safe-b));
}

/* ---------- titlu ---------- */
.lp-head{ grid-area:head; min-width:0; }
.lp-h{
  margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:.12em .2em;
  font:700 clamp(40px, 15vw, 72px)/.86 var(--f-dis); letter-spacing:-.045em; text-transform:uppercase;
  animation:lp-in .7s var(--ease) both;
}
.lp-h__a{ display:block; }
.lp-h__b{
  display:inline-flex; align-items:center; gap:.18em;
  font-size:.6em; letter-spacing:-.02em; line-height:1;
  padding:.14em .26em .1em .2em; background:var(--volt); color:#000;
  transform:rotate(-3deg); box-shadow:.1em .1em 0 var(--down);
}
.lp-h__b i{ width:.42em; height:.42em; border-radius:50%; background:var(--down); animation:lp-rec 1.2s steps(2) infinite; }
@keyframes lp-rec{ 50%{ opacity:.15; } }
.lp-sub{ margin:8px 0 0; font:500 clamp(15px, 4.2vw, 19px)/1.25 var(--f-ui); color:var(--tx-2); animation:lp-in .7s .1s var(--ease) both; }
.lp-sub b{ color:var(--tx); font-weight:700; }
@keyframes lp-in{ from{ opacity:0; transform:translateY(12px); } }

/* ---------- scena: graficul ---------- */
.lp-stage{ grid-area:stage; min-height:0; display:flex; flex-direction:column; gap:6px; animation:lp-in .8s .15s var(--ease) both; }
.lp-chart{ flex:1 1 auto; min-height:110px; box-shadow:0 30px 80px -40px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb, var(--ac) 18%, transparent); }
.lp-chart.is-swap .tr-chart__cv,.lp-chart.is-swap .tr-chart__hd{ animation:lp-swap .45s var(--ease) both; }
@keyframes lp-swap{ from{ opacity:0; transform:translateX(14px); } }
.lp-assets{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.lp-a{
  display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; height:32px;
  background:var(--panel); border:1px solid var(--line); border-top:2px solid var(--ac);
  font-size:13px; color:var(--tx-2); transition:background-color var(--t-med), border-color var(--t-med);
}
.lp-a b{ font-weight:700; white-space:nowrap; }
.lp-a.is-up b{ color:var(--up); } .lp-a.is-down b{ color:var(--down); }
.lp-a.is-on{ background:color-mix(in srgb, var(--ac) 12%, var(--panel)); border-color:color-mix(in srgb, var(--ac) 60%, var(--line)); border-top-color:var(--ac); }

/* ---------- „Ai un cod?” ---------- */
.lp-join{ grid-area:join; min-width:0; animation:lp-in .8s .25s var(--ease) both; }
.lp-join__l{ display:block; margin-bottom:6px; font:700 13px/1 var(--f-num); letter-spacing:.12em; text-transform:uppercase; color:var(--volt); }
.lp-join__row{ display:flex; gap:8px; min-width:0; }
.lp-code{
  flex:1 1 auto; min-width:0; min-height:64px; height:64px;
  font-size:clamp(26px, 8.4vw, 40px); letter-spacing:.24em; padding:0 0 0 .24em;
  background:rgba(11,16,22,.85);
}
.lp-code::placeholder{ color:var(--line-2); }
.lp-go{ flex:none; min-height:64px; height:64px; padding:0 18px; font-size:20px; }
.lp-go svg{ width:24px; height:24px; flex:none; }
.lp-join.is-ready .lp-go{ animation:lp-ready 1s ease-in-out infinite alternate; }
@keyframes lp-ready{ to{ box-shadow:inset 0 -5px 0 var(--bd), 0 0 28px rgba(212,255,26,.55); } }
.lp-join.is-ready .lp-code{ border-color:var(--volt); }
.lp-err{ margin:4px 0 0; min-height:0; font-size:13px; }
.lp-err:empty{ display:none; }
@media (max-width:399px){
  .lp-go__t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .lp-go{ width:64px; padding:0; }
}

/* ---------- semnătura FSE ---------- */
.lp-foot{ grid-area:foot; min-width:0; display:flex; align-items:center; }
.lp-mark{ display:inline-flex; align-items:center; gap:10px; color:var(--tx-2); text-decoration:none; min-height:36px; }
.lp-mark__box{ background:var(--volt); color:#000; font:700 13px/1 var(--f-dis); padding:6px 6px 5px; }
.lp-mark__tx{ font:600 10.5px/1.2 var(--f-ui); letter-spacing:.07em; text-transform:uppercase; }
.lp-mark:hover .lp-mark__tx{ color:var(--tx); }

/* ---------- telefoane scunde ---------- */
@media (max-height:700px) and (max-width:899px){
  .lp-main{ gap:9px; padding-top:10px; }
  .lp-h{ font-size:clamp(36px, 13.5vw, 60px); }
  .lp-sub{ margin-top:5px; font-size:14px; }
  .lp-code,.lp-go{ height:56px; min-height:56px; }
  .lp-go{ width:auto; }
  .lp-a{ height:28px; font-size:12px; }
}
@media (max-height:700px) and (max-width:399px){ .lp-go{ width:56px; } }
@media (max-height:520px) and (max-width:899px){
  .lp{ height:auto; min-height:100vh; overflow:auto; }
  .lp-main{ grid-template-rows:auto 220px auto auto; }
}

/* ---------- desktop / proiector ---------- */
@media (min-width:900px){
  .lp-main{
    max-width:1680px;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr) auto;
    grid-template-areas:". stage" "head stage" "join stage" ". stage" "foot stage";
    column-gap:clamp(28px, 4vw, 80px); row-gap:clamp(20px, 3vh, 40px);
    padding:clamp(24px, 5vh, 64px) clamp(24px, 4vw, 72px) clamp(20px, 4vh, 48px);
  }
  .lp-h{ flex-direction:column; align-items:flex-start; font-size:clamp(84px, 9.4vw, 190px); gap:.06em; }
  .lp-h__b{ font-size:.62em; margin-left:.04em; }
  .lp-sub{ margin-top:clamp(14px, 2.6vh, 28px); font-size:clamp(18px, 1.5vw, 28px); }
  .lp-stage{ gap:10px; }
  .lp-chart{ min-height:300px; }
  .lp-chart .tr-chart__hd{ padding:14px 16px; gap:6px 12px; }
  .lp-chart .tr-chart__name{ font-size:14px; }
  .lp-chart .tr-chart__px{ font-size:clamp(30px, 2.6vw, 52px); }
  .lp-chart .tr-pct{ font-size:clamp(14px, 1.1vw, 20px); }
  .lp-a{ height:40px; font-size:15px; }
  .lp-join{ max-width:520px; }
  .lp-join__l{ font-size:14px; margin-bottom:10px; }
  .lp-code{ height:76px; min-height:76px; font-size:40px; }
  .lp-go{ height:76px; min-height:76px; font-size:24px; padding:0 26px; }
  .lp-foot{ align-self:end; }
  .lp-mark__box{ font-size:15px; padding:8px 8px 7px; }
  .lp-mark__tx{ font-size:11.5px; }
  .lp-news{ height:46px; font-size:16px; }
}
@media (min-width:1600px){
  .lp-news{ height:54px; font-size:19px; }
  .lp-chart .tr-chart__name{ font-size:16px; }
}

@media (prefers-reduced-motion: reduce){
  .lp-h__b i{ animation:none; }
  .lp-join.is-ready .lp-go{ animation:none; box-shadow:inset 0 -5px 0 var(--bd), 0 0 28px rgba(212,255,26,.55); }
}

/* ---------- regulile în 3 jetoane ---------- */
.lp-chips{ margin:10px 0 0; display:flex; flex-wrap:wrap; gap:6px; animation:lp-in .7s .18s var(--ease) both; }
.lp-chips span{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px 6px 8px;
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:2px;
  font-size:clamp(12px, 3.4vw, 15px); color:var(--tx-2);
}
.lp-chips .tr-emoji{ font-style:normal; font-size:1.1em; }
.lp-chips b{ color:var(--tx); font-weight:800; white-space:nowrap; }
@media (max-height:600px){ .lp-chips{ margin-top:6px; } .lp-chips span{ padding:4px 8px 4px 6px; } }