/* ══════════════════════════════════════════════
   Πόσο Μαλάκας Είσαι™ — mobile first
   ══════════════════════════════════════════════ */

:root{
  --bg:#0a0f1e;
  --bg2:#111a33;
  --card:#151f3d;
  --card2:#1c2950;
  --line:rgba(255,255,255,.10);
  --txt:#f3f6ff;
  --dim:#93a1c4;
  --accent:#ffd23f;
  --hot:#ff3b6b;
  --ok:#22c55e;
  --lvl:#22c55e;           /* τρέχον χρώμα μαλακομετρητή */
  --r:18px;
  --meter-h:74px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}

/* Το [hidden] του UA stylesheet χάνει από οποιοδήποτε author `display`
   (π.χ. .trap-zone{display:flex}), οπότε το κρυφό στοιχείο εμφανιζόταν
   κανονικά. Αυτός ο κανόνας το κλειδώνει για όλη τη σελίδα. */
[hidden]{display:none !important;}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:17px;
  line-height:1.45;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,59,107,.22), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(255,210,63,.10), transparent 60%),
    linear-gradient(180deg,#0a0f1e 0%, #0d1428 60%, #0a0f1e 100%);
  transition:background 1.2s ease;
}

.wrap{
  position:relative; z-index:1;
  max-width:620px; margin:0 auto;
  padding:20px 18px calc(40px + var(--safe-b));
}

.screen{animation:fadeUp .34s cubic-bezier(.2,.7,.3,1) both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ─────────── ΜΑΛΑΚΟΜΕΤΡΗΤΗΣ ─────────── */
.meter{
  position:sticky; top:0; z-index:20;
  background:rgba(10,15,30,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:10px 18px 11px;
}
.meter-top{
  display:flex; align-items:baseline; justify-content:space-between;
  max-width:620px; margin:0 auto;
}
.meter-label{
  font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--dim);
}
.meter-right{display:flex; align-items:center; gap:10px;}
.narrator{
  font-size:22px; line-height:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.narrator.shift{animation:faceShift .5s cubic-bezier(.2,.8,.3,1);}
@keyframes faceShift{
  0%{transform:scale(.5) rotate(-18deg); opacity:0;}
  60%{transform:scale(1.25) rotate(6deg);}
  100%{transform:none; opacity:1;}
}
.meter-val{
  font-size:26px; font-weight:900; letter-spacing:-.02em;
  color:var(--lvl); font-variant-numeric:tabular-nums;
  transition:color .5s ease;
}
.meter-track{
  max-width:620px; margin:6px auto 0;
  height:9px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden;
}
.meter-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--lvl),color-mix(in srgb,var(--lvl) 55%, #fff));
  box-shadow:0 0 14px -2px var(--lvl);
  transition:width .55s cubic-bezier(.2,.8,.2,1), background .5s ease;
}
.meter-note{
  max-width:620px; margin:6px auto 0;
  font-size:13px; color:var(--dim); min-height:19px;
}
.meter-note.pop{animation:pop .4s ease;}
@keyframes pop{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}

/* ─────────── ΕΙΣΑΓΩΓΗ ─────────── */
.hero{text-align:center; padding:26px 0 10px;}

/* Το domain είναι ο ήρωας της σελίδας — πρέπει να μείνει στο μυαλό. */
.wordmark{
  font-size:clamp(46px,15vw,74px); line-height:1;
  font-weight:900; letter-spacing:-.045em; margin:0 0 18px;
  background:linear-gradient(180deg,#fff 0%,#ffd9e2 45%,#ff8aa8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 10px 34px rgba(255,59,107,.45));
}
.wordmark .tld{
  background:linear-gradient(180deg,#ffe98a,#ffc400);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.kicker{
  display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.16em;
  color:var(--accent); border:1px solid rgba(255,210,63,.35);
  padding:6px 12px; border-radius:99px; margin-bottom:20px; text-transform:uppercase;
}
.tagline{
  font-size:clamp(27px,8vw,38px); line-height:1.1; font-weight:900;
  letter-spacing:-.025em; margin:0 0 20px; color:var(--txt);
}
.tagline .hl{
  background:linear-gradient(180deg,#ff6b8f,#ff2d61);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tm{font-size:.36em; vertical-align:super; color:var(--dim); -webkit-text-fill-color:var(--dim);}
.lead{font-size:17px; color:#dbe3f7; margin:0 0 26px;}
.dim{color:var(--dim);}

/* Ο ψεύτικος κρατικός υπερυπολογιστής */
.sysbox{
  border:1px dashed rgba(255,255,255,.22); border-radius:14px;
  padding:14px 16px; margin:0 0 22px;
  background:rgba(255,255,255,.03);
}
.sysbox-name{
  font-size:19px; font-weight:900; letter-spacing:.06em; color:var(--txt);
}
.sysbox-expand{
  font-size:12.5px; color:var(--dim); line-height:1.5; margin-top:6px;
}
.sysbox-expand b{color:var(--accent); font-weight:900;}
.sysbox-since{
  font-size:11px; letter-spacing:.1em; color:#6b7a9e; margin-top:8px; text-transform:uppercase;
}
.welcome-back{
  font-size:14.5px; color:var(--accent); margin:0 0 20px;
  background:rgba(255,210,63,.08); border:1px solid rgba(255,210,63,.28);
  border-radius:12px; padding:11px 14px;
}

.meta-row{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:22px;
}
.meta-row span{
  font-size:12.5px; color:var(--dim);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  padding:6px 11px; border-radius:99px;
}
.disclaimer{font-size:12px; color:#6b7a9e; margin-top:26px; text-align:center;}

/* ─────────── ΚΟΥΜΠΙΑ ─────────── */
.btn{
  font-family:inherit; font-size:16px; font-weight:800;
  border:none; border-radius:14px; padding:15px 22px;
  cursor:pointer; color:#fff; transition:transform .12s ease, filter .15s ease;
}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:linear-gradient(180deg,#ff5a80,#ff2d61);
  box-shadow:0 10px 28px -10px rgba(255,45,97,.85);
  letter-spacing:.05em;
}
.btn-xl{font-size:19px; padding:18px 44px; border-radius:16px;}
.btn-block{display:block; width:100%;}
.btn-ghost{
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--txt);
  margin-top:20px;
}

/* ─────────── ΕΡΩΤΗΣΗ ─────────── */
.q-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:6px 0 10px;
}
.q-cat{font-size:13px; font-weight:700; color:var(--accent);}
.q-count{font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums;}
.q-progress{height:4px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:26px;}
.q-progress-fill{height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .4s ease;}

.q-text{
  font-size:26px; line-height:1.22; font-weight:800; letter-spacing:-.02em;
  margin:0 0 20px;
}
.q-quote{
  border-left:3px solid var(--accent);
  background:rgba(255,210,63,.07);
  padding:12px 14px; border-radius:0 10px 10px 0;
  font-style:italic; color:#ffe89a; margin:-6px 0 20px; font-size:17px;
}

.options{display:flex; flex-direction:column; gap:11px;}
.opt{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--r); padding:16px 16px;
  color:var(--txt); font-family:inherit; font-size:16.5px; line-height:1.32;
  cursor:pointer; transition:transform .12s ease, border-color .15s, background .15s;
}
.opt:active{transform:scale(.985);}
@media (hover:hover){ .opt:hover{border-color:rgba(255,255,255,.28); background:var(--card2);} }
.opt-dot{
  flex:0 0 22px; height:22px; border-radius:50%;
  border:2px solid rgba(255,255,255,.28); transition:all .18s;
}
.opt.sel{border-color:var(--hot); background:rgba(255,59,107,.14);}
.opt.sel .opt-dot{border-color:var(--hot); background:var(--hot); box-shadow:0 0 0 4px rgba(255,59,107,.2);}
.opt.dimmed{opacity:.4;}
.opt[disabled]{cursor:default;}

.reaction{
  margin-top:16px; text-align:center; font-size:16px; font-weight:700;
  color:var(--accent); min-height:24px;
  animation:pop .3s ease;
}

/* ─────────── ΠΑΓΙΔΑ (πραγματικό κουμπί) ─────────── */
.trap-zone{display:flex; justify-content:center; margin:6px 0 22px;}
.trap-btn{
  font-family:inherit; font-size:19px; font-weight:900; letter-spacing:.04em;
  color:#fff; border:none; border-radius:18px; padding:26px 34px; width:100%;
  background:linear-gradient(180deg,#ff4d4d,#c1121f);
  box-shadow:0 14px 34px -12px rgba(255,45,45,.9), inset 0 -4px 0 rgba(0,0,0,.25);
  cursor:pointer; animation:tempt 1.5s ease-in-out infinite;
}
.trap-btn:active{transform:translateY(2px) scale(.99);}
@keyframes tempt{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.035);}
}
.trap-btn[disabled]{animation:none; opacity:.5; cursor:default;}

/* ─────────── ΠΑΡΑΤΗΡΗΣΗ ─────────── */
.obs-card{
  text-align:center; padding:36px 22px 32px; margin-top:14px;
  background:linear-gradient(170deg,var(--card),#0f1730);
  border:1px solid var(--line); border-radius:24px;
  box-shadow:0 22px 60px -26px rgba(0,0,0,.9);
}
.obs-icon{font-size:56px; line-height:1; margin-bottom:14px;}
.obs-title{
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.obs-body{font-size:19px; line-height:1.35; font-weight:700; margin:0 0 18px;}
.obs-quote{
  font-style:italic; color:#ffe89a; font-size:18px;
  background:rgba(255,210,63,.07); border-left:3px solid var(--accent);
  padding:13px 15px; border-radius:0 10px 10px 0; text-align:left;
  margin:0 0 26px;
}

/* ψεύτικη μπάρα ανάλυσης */
.ana{margin:0 0 20px;}
.ana-bar{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:19px; letter-spacing:.08em; color:var(--accent);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.ana-bar b{font-variant-numeric:tabular-nums; color:var(--txt);}
.ana-track{
  height:6px; border-radius:99px; background:rgba(255,255,255,.09);
  overflow:hidden; margin-top:10px;
}
.ana-fill{height:100%; width:0; background:linear-gradient(90deg,var(--hot),var(--accent));}

/* παραλλαγές παρεμβολής: το σφάλμα μοιάζει με system dialog */
.obs-error{
  border-color:rgba(255,77,77,.5);
  background:linear-gradient(170deg,#2a1220,#140c1c);
}
.obs-error .obs-title{color:#ff7a7a; letter-spacing:.2em;}
.obs-error .obs-quote{
  color:#ffc9c9; border-left-color:#ff4d4d; background:rgba(255,77,77,.08);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-style:normal;
}
/* η αμφισβήτηση */
.obs-actions{display:flex; flex-direction:column; gap:10px;}
.obs-actions .btn{width:100%;}
.obs-challenge{border-color:rgba(255,210,63,.45);}
.obs-challenge .obs-title{color:var(--accent); font-size:22px; letter-spacing:0; text-transform:none; font-weight:900;}
.obs-verdict .obs-title{color:#ff7a7a; letter-spacing:.18em;}
.obs-verdict .obs-quote{
  color:#ffd0d0; border-left-color:#ff4d4d; background:rgba(255,77,77,.1);
  font-size:20px; font-weight:700; font-style:normal;
}

/* callback: «πριν λίγο μας είπες ότι...» */
.recall{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px;}
.recall li{
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:12px; padding:12px 13px 12px 40px; position:relative;
  font-size:15.5px; line-height:1.35; text-align:left;
}
.recall li::before{
  content:"✔"; position:absolute; left:14px; top:12px;
  color:var(--ok); font-weight:900;
}
.obs-recall .obs-title{color:var(--accent); font-size:14px; letter-spacing:.06em; text-transform:none;}
.obs-panel .obs-title{color:#c9b6ff;}
/* το κουτσομπολιό: πιο μαλακό, εμπιστευτικό ύφος */
.obs-gossip{border-color:rgba(255,255,255,.16); background:linear-gradient(170deg,#1a1f36,#101526);}
.obs-gossip .obs-title{color:#b9c4de; letter-spacing:.1em; text-transform:none; font-size:14px;}
.obs-gossip .obs-body{font-weight:600;}
.obs-gossip .obs-quote{color:#e8edf9; border-left-color:#8f9cbe; background:rgba(255,255,255,.05);}
.obs-panel .obs-quote{color:#e3d9ff; border-left-color:#a855f7; background:rgba(168,85,247,.1);}
.obs-fact .obs-title{color:#8ab6ff;}
.obs-fact .obs-quote{color:#cfe0ff; border-left-color:#4d8bff; background:rgba(77,139,255,.08);}
.obs-analysis .obs-title{color:var(--accent);}

/* ─────────── ΨΕΥΤΙΚΑ POPUP ─────────── */
.toast-wrap{
  position:fixed; left:0; right:0; bottom:calc(14px + var(--safe-b));
  z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; padding:0 14px;
}
.toast{
  max-width:560px; width:100%;
  background:rgba(22,31,58,.96); color:var(--txt);
  border:1px solid rgba(255,255,255,.16); border-radius:14px;
  padding:13px 16px; font-size:14.5px; line-height:1.35;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.95);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transform:translateY(16px); opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.3,1), opacity .32s ease;
}
.toast.in{transform:none; opacity:1;}

/* ─────────── ΓΡΗΓΟΡΟΣ ΓΥΡΟΣ ─────────── */
.rapid-card{text-align:center; padding:46px 20px;}
.rapid-emoji{font-size:64px; animation:zap .9s ease infinite alternate;}
@keyframes zap{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.12) rotate(4deg)}}
.rapid-title{font-size:34px; font-weight:900; letter-spacing:-.02em; margin:10px 0 12px;}
.rapid-sub{color:var(--dim); margin:0 0 30px;}
.rapid .opt{justify-content:center;}

/* ναι/όχι */
.options.yn{flex-direction:row; gap:12px;}
.options.yn .opt{justify-content:center; font-size:19px; font-weight:800; padding:22px 12px;}
.options.yn .opt-dot{display:none;}
.opt-yes{border-color:rgba(255,59,107,.4)!important;}
.opt-no{border-color:rgba(34,197,94,.35)!important;}

/* ─────────── ΦΟΡΤΩΣΗ ─────────── */
.loading-card{text-align:center; padding:70px 10px;}
.spinner{
  width:56px; height:56px; margin:0 auto 26px;
  border:5px solid rgba(255,255,255,.12); border-top-color:var(--hot);
  border-radius:50%; animation:spin .85s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-size:18px; font-weight:700; min-height:52px; animation:pop .3s ease;}
.loading-track{height:6px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; margin-top:26px;}
.loading-fill{height:100%; width:0; background:linear-gradient(90deg,var(--hot),var(--accent)); transition:width .4s linear;}

/* ─────────── ΠΙΣΤΟΠΟΙΗΤΙΚΟ ─────────── */
/* Είναι το μοναδικό αποτέλεσμα και μπαίνει πρώτο, οπότε πιάνει όλο το πλάτος. */
.cert-block{margin:4px 0 4px; text-align:center;}
.cert-label{
  font-size:17px; font-weight:900; letter-spacing:-.01em;
  color:var(--lvl); margin-bottom:14px;
  transition:color .5s ease;
}
.cert-img{
  display:block; width:100%; max-width:520px; margin:0 auto;
  border-radius:16px;
  box-shadow:0 26px 70px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08);
  animation:certIn .55s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes certIn{from{opacity:0; transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.cert-loading{
  font-size:15px; color:var(--dim); line-height:1.6;
  padding:46px 14px; border:1px dashed var(--line); border-radius:16px;
}

/* ─────────── SHARE ─────────── */
.share-block{margin-top:26px;}
.share-title{
  text-align:center; font-size:12px; letter-spacing:.14em; font-weight:800;
  color:var(--dim); text-transform:uppercase; margin-bottom:12px;
}
.share-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
/* Το «Κατέβασε το πιστοποιητικό» δεν χωράει σε μία γραμμή στο μισό πλάτος·
   το grid ισοϋψώνει μόνο του τα δύο κουμπιά της ίδιας σειράς. */
.btn-share{
  font-size:15px; padding:14px 8px; line-height:1.25; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.btn-viber{background:#7360f2;}
.btn-wa{background:#25d366; color:#06301a;}
.btn-img{background:#7c5cff;}
.btn-copy{background:rgba(255,255,255,.09); border:1px solid var(--line);}
.share-hint{text-align:center; font-size:13px; color:var(--dim); margin-top:12px; min-height:19px;}
/* Οδηγία που δεν πρέπει να χαθεί (π.χ. «κάνε επικόλληση στο Facebook»). */
.share-hint.big{
  font-size:15.5px; line-height:1.45; color:var(--txt); font-weight:700;
  background:rgba(255,210,63,.10); border:1px solid rgba(255,210,63,.42);
  border-radius:12px; padding:13px 15px; margin-top:14px;
}
.share-hint.big b{color:var(--accent);}
.share-hint.pulse{animation:hintPulse .5s cubic-bezier(.2,.8,.3,1);}
@keyframes hintPulse{from{transform:scale(.96); opacity:0}to{transform:none; opacity:1}}

/* ─────────── FOOTER ─────────── */
.foot{
  position:relative; z-index:1; text-align:center;
  font-size:12px; color:#5b6a8c;
  padding:8px 18px calc(26px + var(--safe-b));
}

/* ─────────── ΜΕΓΑΛΕΣ ΟΘΟΝΕΣ ─────────── */
@media (min-width:600px){
  .q-text{font-size:30px;}
  .cert-label{font-size:19px;}
  .wrap{padding-top:28px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important;}
}