/* ÉLŐ FAL — közös stíluslap (mindhárom frontend importálja) */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Figtree:wght@400;500;600;700&display=swap');
* { box-sizing: border-box; margin: 0; }
.ef-root{
  --bg:#0b0b0f; --panel:#15151c; --panel2:#1d1d27; --line:#2b2b38;
  --txt:#f4f4f7; --muted:#9696a6; --lime:#d6ff3f; --coral:#ff6b66;
  font-family:'Figtree',system-ui,sans-serif; color:var(--txt);
  background:var(--bg); min-height:100vh; width:100%; position:relative; overflow-x:hidden;
}
.ef-display-font, .ef-display{ font-family:'Bricolage Grotesque',sans-serif; letter-spacing:-0.02em; }
button{ font-family:inherit; cursor:pointer; border:none; }

/* háttér blobok */
.ef-blob{ position:fixed; border-radius:50%; filter:blur(90px); opacity:.5; z-index:0; pointer-events:none; }
.ef-blob-1{ width:46vw; height:46vw; background:var(--lime); top:-12vw; right:-10vw; animation:float1 18s ease-in-out infinite; }
.ef-blob-2{ width:40vw; height:40vw; background:var(--coral); bottom:-14vw; left:-10vw; opacity:.35; animation:float2 22s ease-in-out infinite; }
@keyframes float1{ 50%{ transform:translate(-4vw,4vw) scale(1.1);} }
@keyframes float2{ 50%{ transform:translate(4vw,-3vw) scale(1.08);} }

/* HOME */
.ef-home{ position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 20px; }
.ef-home-inner{ max-width:760px; width:100%; text-align:center; }
.ef-kicker{ font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--lime); margin-bottom:14px; }
.ef-title{ font-size:clamp(56px,14vw,120px); font-weight:800; line-height:.9; }
.ef-sub{ color:var(--muted); max-width:480px; margin:18px auto 38px; font-size:16px; line-height:1.55; }
.ef-cards{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:680px){ .ef-cards{ grid-template-columns:repeat(2,1fr);} }
@media(min-width:920px){ .ef-cards{ grid-template-columns:repeat(4,1fr);} }
.ef-card{ position:relative; text-align:left; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:22px; color:var(--txt); display:flex; flex-direction:column; gap:6px;
  transition:transform .18s, border-color .18s, background .18s; opacity:0; animation:rise .5s forwards; }
.ef-card:hover{ transform:translateY(-4px); border-color:var(--accent); background:var(--panel2); }
.ef-card-ico{ font-size:30px; }
.ef-card-t{ font-size:24px; font-weight:700; }
.ef-card-d{ color:var(--muted); font-size:14px; min-height:38px; }
.ef-card-go{ color:var(--accent); font-weight:700; font-size:14px; margin-top:6px; }
.ef-warn{ margin-top:26px; font-size:13px; color:#ffd27d; background:rgba(255,180,60,.08);
  border:1px solid rgba(255,180,60,.25); border-radius:12px; padding:12px 14px; line-height:1.5; }
@keyframes rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }

/* SHELL */
.ef-shell{ position:relative; z-index:1; min-height:100vh; }
.ef-topbar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:rgba(11,11,15,.8); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.ef-back{ width:34px; height:34px; border-radius:10px; background:var(--panel2); color:var(--txt); font-size:18px; }
.ef-topbar-title{ font-weight:800; letter-spacing:.04em; font-size:15px; text-transform:uppercase; }
.ef-shell-body{ max-width:520px; margin:0 auto; padding:22px 18px 60px; }
.ef-shell-body.wide{ max-width:1000px; }

/* FORM */
.ef-form{ display:flex; flex-direction:column; gap:8px; }
.ef-label{ font-size:13px; font-weight:600; color:var(--muted); margin-top:10px; }
.ef-input{ width:100%; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:13px 14px; color:var(--txt); font-size:16px; outline:none; transition:border-color .15s; }
.ef-input:focus{ border-color:var(--lime); }
.ef-textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.ef-count{ text-align:right; font-size:12px; color:var(--muted); }
.ef-btn{ border-radius:12px; padding:14px 16px; font-weight:700; font-size:15px; transition:transform .12s, opacity .15s; }
.ef-btn:active{ transform:scale(.98); }
.ef-btn:disabled{ opacity:.55; }
.ef-btn-primary{ background:var(--lime); color:#101006; margin-top:6px; }
.ef-btn-ghost{ background:transparent; border:1px dashed var(--line); color:var(--txt); }
.ef-fine{ font-size:12px; color:var(--muted); text-align:center; margin-top:4px; }
.ef-err{ color:#ff9b97; font-size:14px; background:rgba(255,80,80,.08); border:1px solid rgba(255,80,80,.25);
  border-radius:10px; padding:10px 12px; }
.ef-attach{ display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:10px; }
.ef-attach-name{ font-size:13px; color:var(--muted); font-weight:600; }
.ef-chip-x{ margin-left:auto; background:var(--panel2); color:var(--coral); border-radius:8px; padding:8px 10px; font-size:13px; font-weight:600; }

/* MÉDIA */
.ef-media{ display:block; object-fit:cover; background:#000; }
.ef-media.thumb{ width:64px; height:64px; border-radius:8px; }
.ef-media.card{ width:100%; height:160px; border-top-left-radius:14px; border-top-right-radius:14px; }
.ef-media.hero{ max-width:min(70vw,640px); max-height:52vh; width:auto; height:auto; border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,.6); }
.ef-skel{ background:linear-gradient(90deg,#1a1a22,#222230,#1a1a22); animation:shimmer 1.4s infinite; }
@keyframes shimmer{ 0%{opacity:.6;} 50%{opacity:1;} 100%{opacity:.6;} }

/* SUCCESS */
.ef-success{ text-align:center; padding:40px 10px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.ef-success-ico{ width:74px; height:74px; border-radius:50%; background:var(--lime); color:#101006;
  font-size:38px; display:grid; place-items:center; font-weight:800; animation:pop .4s; }
.ef-success h2{ font-size:32px; }
.ef-success p{ color:var(--muted); max-width:320px; line-height:1.5; }
@keyframes pop{ from{transform:scale(.5); opacity:0;} to{transform:scale(1); opacity:1;} }

/* ADMIN */
.ef-admin-bar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.ef-tab{ background:var(--panel); border:1px solid var(--line); color:var(--muted); border-radius:999px;
  padding:9px 14px; font-weight:600; font-size:13px; }
.ef-tab.on{ background:var(--txt); color:#0b0b0f; border-color:var(--txt); }
.ef-tab-danger{ margin-left:auto; color:var(--coral); border-color:rgba(255,107,102,.35); }
.ef-badge{ background:rgba(255,255,255,.12); border-radius:999px; padding:1px 8px; margin-left:4px; font-size:12px; }
.ef-tab.on .ef-badge{ background:rgba(0,0,0,.15); }
.ef-empty{ color:var(--muted); text-align:center; padding:40px 0; }
.ef-mod-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:640px){ .ef-mod-grid{ grid-template-columns:repeat(2,1fr);} }
.ef-mod-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.ef-mod-body{ padding:14px; }
.ef-mod-name{ font-weight:700; color:var(--lime); font-size:14px; margin-bottom:4px; }
.ef-mod-text{ font-size:16px; line-height:1.5; }
.ef-mod-meta{ font-size:12px; color:var(--muted); margin-top:8px; }
.ef-mod-actions{ display:flex; gap:8px; padding:0 14px 14px; }
.ef-btn-ok{ flex:1; background:rgba(214,255,63,.15); color:var(--lime); border:1px solid rgba(214,255,63,.4); padding:10px; }
.ef-btn-no{ flex:1; background:rgba(255,107,102,.12); color:var(--coral); border:1px solid rgba(255,107,102,.35); padding:10px; }
.ef-btn-pin{ flex:1; background:rgba(255,255,255,.06); color:var(--muted); border:1px solid var(--line); padding:10px; }
.ef-btn-pin.on{ background:rgba(255,206,107,.15); color:#ffce6b; border-color:rgba(255,206,107,.45); }

/* DISPLAY */
.ef-display-screen{ position:relative; z-index:1; min-height:100vh; overflow:hidden; }
.ef-beam{ position:fixed; inset:-40%; z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(214,255,63,.10) 40deg, transparent 95deg, rgba(125,211,252,.08) 200deg, transparent 255deg);
  animation:spin 44s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.ef-vignette{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 40%, transparent 42%, rgba(0,0,0,.6) 100%); }
.ef-back-mini{ position:fixed; top:16px; left:16px; z-index:9; background:rgba(255,255,255,.08);
  color:var(--muted); border-radius:8px; padding:6px 12px; font-size:13px; }
.ef-disp-head{ position:fixed; top:18px; right:24px; z-index:9; display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.1em; font-size:14px; color:var(--txt); }
.ef-disp-count{ color:var(--muted); font-weight:600; letter-spacing:0; }
.ef-disp-foot{ position:fixed; bottom:16px; left:24px; z-index:9; font-size:13px; font-weight:600;
  color:var(--muted); letter-spacing:.04em; }
.ef-live-dot{ width:10px; height:10px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 0 rgba(255,107,102,.6); animation:live 1.6s infinite; }
@keyframes live{ 0%{box-shadow:0 0 0 0 rgba(255,107,102,.6);} 70%{box-shadow:0 0 0 14px rgba(255,107,102,0);} 100%{box-shadow:0 0 0 0 rgba(255,107,102,0);} }
.ef-disp-empty{ position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-size:clamp(28px,5vw,52px); color:var(--muted); padding:20px; }

/* fal (mozaik) */
.ef-wall{ position:relative; z-index:1; column-gap:20px; column-count:2; padding:84px 28px 64px; }
@media(min-width:720px){ .ef-wall{ column-count:3; } }
@media(min-width:1200px){ .ef-wall{ column-count:4; } }
.ef-tile{ position:relative; break-inside:avoid; width:100%; margin:0 0 20px; border-radius:20px; padding:24px;
  border:1px solid rgba(255,255,255,.10); box-shadow:0 20px 55px rgba(0,0,0,.5); overflow:hidden;
  animation:tileIn .65s cubic-bezier(.2,.8,.2,1) both; }
.ef-tile.pinned{ border-color:var(--ac); box-shadow:0 0 0 2px var(--ac), 0 20px 55px rgba(0,0,0,.5); }
.ef-tile.has-media{ padding:0; }
.ef-tile.has-media .ef-tile-text{ padding:18px 22px 4px; }
.ef-tile.has-media .ef-tile-name{ padding:0 22px 20px; margin-top:6px; }
.ef-pin{ position:absolute; top:12px; right:14px; z-index:2; font-size:18px; }
.ef-tile-text{ font-size:clamp(20px,2vw,30px); font-weight:700; line-height:1.18; }
.ef-tile-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.ef-tile.has-media .ef-tile-foot{ padding:0 22px 20px; margin-top:6px; }
.ef-tile-name{ font-size:14px; font-weight:600; color:var(--ac); }
.ef-tile-likes{ font-size:14px; font-weight:700; color:#ff9bd0; background:rgba(255,155,208,.12);
  border-radius:999px; padding:3px 10px; white-space:nowrap; }
/* népszerűségi szintek – minél több reakció, annál nagyobb és hangsúlyosabb */
.ef-tile.lvl-2{ box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,155,208,.4); }
.ef-tile.lvl-2 .ef-tile-text{ font-size:clamp(24px,2.6vw,40px); }
.ef-tile.lvl-3{ box-shadow:0 0 0 2px #ff9bd0, 0 30px 80px rgba(255,107,160,.3); animation:tileIn .65s cubic-bezier(.2,.8,.2,1) both, pulseHot 2.6s ease-in-out 1s infinite; }
.ef-tile.lvl-3 .ef-tile-text{ font-size:clamp(30px,3.6vw,56px); font-weight:800; }
@keyframes pulseHot{ 50%{ box-shadow:0 0 0 3px #ff9bd0, 0 30px 90px rgba(255,107,160,.5);} }
.ef-media.tile{ width:100%; max-height:340px; height:auto; display:block; }
@keyframes tileIn{ from{opacity:0; transform:translateY(26px) scale(.96);} to{opacity:1; transform:none;} }

/* reflektor */
.ef-spotlight{ position:fixed; inset:0; z-index:8; display:grid; place-items:center; padding:6vw;
  background:radial-gradient(circle at 50% 42%, rgba(11,11,15,.72), rgba(11,11,15,.97)); backdrop-filter:blur(7px); animation:fadeIn .45s; }
.ef-spot-card{ position:relative; text-align:center; max-width:1100px; display:flex; flex-direction:column; align-items:center; gap:26px;
  animation:spotIn .7s cubic-bezier(.2,.85,.2,1); }
.ef-spot-badge{ font-size:14px; font-weight:800; letter-spacing:.18em; color:var(--ac);
  border:1px solid var(--ac); border-radius:999px; padding:6px 16px; }
.ef-spot-text{ font-size:clamp(40px,7.4vw,104px); font-weight:800; line-height:1.02; }
.ef-spot-name{ font-size:clamp(20px,2.6vw,32px); color:var(--ac); font-weight:600; }
.ef-spot-foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; }
.ef-spot-likes{ font-size:clamp(20px,2.6vw,30px); font-weight:800; color:#ff9bd0;
  background:rgba(255,155,208,.14); border:1px solid rgba(255,155,208,.4); border-radius:999px; padding:6px 18px; }
.ef-spot-media .ef-media.hero{ max-height:56vh; }
@keyframes spotIn{ from{opacity:0; transform:scale(.86) translateY(28px);} to{opacity:1; transform:none;} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

/* REAGÁLÁS (közönség) */
.ef-react-intro{ text-align:center; color:var(--muted); margin-bottom:18px; font-size:15px; }
.ef-mod-react{ color:#ff9bd0; font-weight:700; }
.ef-react-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media(min-width:560px){ .ef-react-grid{ grid-template-columns:repeat(2,1fr);} }
@media(min-width:900px){ .ef-react-grid{ grid-template-columns:repeat(3,1fr);} }
.ef-react-card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.ef-react-body{ padding:14px; flex:1; }
.ef-react-name{ font-weight:700; color:var(--lime); font-size:13px; margin-bottom:5px; }
.ef-react-text{ font-size:16px; line-height:1.45; }
.ef-like{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
  background:rgba(255,155,208,.10); border-top:1px solid var(--line); color:#ff9bd0;
  padding:14px; font-size:17px; font-weight:800; transition:background .15s, transform .1s; overflow:visible; }
.ef-like:hover{ background:rgba(255,155,208,.18); }
.ef-like:active{ transform:scale(.97); }
.ef-like-heart{ font-size:20px; transition:transform .12s; }
.ef-like:active .ef-like-heart{ transform:scale(1.4); }
.ef-like-n{ font-variant-numeric:tabular-nums; }
.ef-like-mine{ font-size:12px; color:#ff9bd0; opacity:.7; }
.ef-float{ position:absolute; bottom:10px; font-size:22px; pointer-events:none; animation:floatUp .9s ease-out forwards; }
@keyframes floatUp{ from{opacity:1; transform:translateY(0) scale(1);} to{opacity:0; transform:translateY(-70px) scale(1.6);} }

/* INTRO / Bemutató gomb (kezdőlap, a kártyák felett) */
.ef-intro-btn{ display:flex; align-items:center; gap:16px; max-width:560px; margin:0 auto 22px;
  background:linear-gradient(120deg, rgba(214,255,63,.14), rgba(255,107,102,.10));
  border:1px solid rgba(214,255,63,.4); border-radius:18px; padding:18px 22px; text-decoration:none;
  color:var(--txt); transition:transform .18s, border-color .18s, box-shadow .18s; }
.ef-intro-btn:hover{ transform:translateY(-3px); border-color:var(--lime); box-shadow:0 18px 50px rgba(214,255,63,.18); }
.ef-intro-ico{ width:46px; height:46px; flex:none; border-radius:50%; background:var(--lime); color:#101006;
  display:grid; place-items:center; font-size:18px; padding-left:3px; box-shadow:0 0 24px rgba(214,255,63,.5); }
.ef-intro-txt{ display:flex; flex-direction:column; text-align:left; flex:1; gap:2px; }
.ef-intro-t{ font-size:21px; font-weight:700; line-height:1; }
.ef-intro-d{ font-size:13px; color:var(--muted); line-height:1.35; }
.ef-intro-go{ color:var(--lime); font-size:22px; font-weight:700; flex:none; }
@media(max-width:480px){ .ef-intro-d{ display:none; } }

/* =====================================================================
   MOBIL-OPTIMALIZÁLÁS
   ===================================================================== */

/* iOS: stabil teljes magasság (a 100vh hibát kerüli) + sima görgetés */
@supports (height: 100dvh) {
  .ef-home, .ef-shell, .ef-display-screen { min-height: 100dvh; }
}
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
* { -webkit-overflow-scrolling: touch; }

/* input zoom tiltása iOS-en: a 16px-es betű miatt nem zoom-ol rá */
.ef-input { font-size: 16px; }

/* gombok/linkek minimum tap-target méret */
.ef-btn, .ef-tab, .ef-like, .ef-back, .ef-back-mini, .ef-card, .ef-chip-x, .ef-intro-btn {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {
  /* KEZDŐLAP */
  .ef-home { padding: 26px 16px; }
  .ef-title { font-size: clamp(46px, 17vw, 84px); }
  .ef-sub { font-size: 15px; margin: 14px auto 26px; }
  .ef-card { padding: 18px; }
  .ef-card-d { min-height: 0; }
  .ef-intro-btn { gap: 12px; padding: 15px 16px; }

  /* SHELL (beküldő, reakció, admin) */
  .ef-shell-body { padding: 18px 14px 48px; }
  .ef-topbar { padding: 12px 12px; }
  .ef-back { width: 38px; height: 38px; font-size: 19px; }

  /* BEKÜLDŐ űrlap */
  .ef-btn { padding: 14px; min-height: 50px; }
  .ef-textarea { min-height: 110px; }

  /* ADMIN moderálás */
  .ef-admin-bar { gap: 6px; }
  .ef-tab { padding: 9px 12px; font-size: 12px; }
  .ef-tab-danger { margin-left: 0; width: 100%; margin-top: 4px; }
  .ef-mod-actions { flex-wrap: wrap; }
  .ef-mod-actions .ef-btn { flex: 1 1 calc(50% - 4px); min-height: 44px; padding: 10px; }

  /* REAKCIÓ */
  .ef-react-grid { gap: 12px; }
  .ef-like { padding: 16px; min-height: 56px; }   /* nagyobb, könnyen koppintható */
  .ef-react-intro { font-size: 14px; }

  /* KIJELZŐ — mobilon is jól nézzen ki, ha valaki telefonon nyitja meg */
  .ef-wall { column-count: 1; column-gap: 0; padding: 70px 16px 70px; }
  .ef-tile { margin-bottom: 14px; }
  .ef-tile-text { font-size: 18px; }
  .ef-tile.lvl-2 .ef-tile-text { font-size: 21px; }
  .ef-tile.lvl-3 .ef-tile-text { font-size: 25px; }
  .ef-disp-head { top: 14px; right: 14px; font-size: 12px; }
  .ef-disp-count { display: none; }                /* kis helyen a szám elhagyható */
  .ef-back-mini { top: 12px; left: 12px; }
  .ef-disp-foot { font-size: 11px; left: 14px; bottom: 12px; }

  /* REFLEKTOR mobilon */
  .ef-spotlight { padding: 24px 18px; }
  .ef-spot-card { gap: 18px; }
  .ef-spot-text { font-size: clamp(30px, 9vw, 52px); }
  .ef-media.hero { max-width: 86vw; max-height: 44vh; }
}

/* nagyon kicsi kijelzők (≤380px) */
@media (max-width: 380px) {
  .ef-title { font-size: 42px; }
  .ef-mod-actions .ef-btn { flex: 1 1 100%; }
  .ef-intro-t { font-size: 19px; }
}

/* fekvő tájolás, alacsony kijelző (pl. telefon oldalra fordítva) */
@media (max-height: 480px) and (orientation: landscape) {
  .ef-home, .ef-shell { min-height: auto; }
  .ef-spot-text { font-size: clamp(26px, 6vw, 44px); }
  .ef-media.hero { max-height: 60vh; }
}