/* Real or Fake? — mobile-first, no external assets */
:root{
  --bg:#0b0e14; --panel:#141924; --line:#232b3b; --txt:#e8edf7; --dim:#8c97ad;
  --real:#2fbf71; --fake:#e4544a; --accent:#5aa9ff;
  --pad: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--txt); overscroll-behavior:none;
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.screen{display:none;flex-direction:column;min-height:100svh;padding:18px 16px calc(18px + var(--pad));gap:14px}
.screen.active{display:flex}
#game.active{height:100svh;min-height:0;overflow:hidden}

h1{font-size:1.9rem;margin:0;letter-spacing:-.02em}
h2{font-size:.82rem;margin:0 0 10px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);font-weight:600}
.title{margin-top:4vh;text-align:center}
.sub{margin:.4em 0 0;color:var(--dim);font-size:.95rem}
.leader{margin:.7em 0 0;font-size:1.05rem;font-weight:650}
.hint{margin:8px 0 0;color:var(--dim);font-size:.8rem}
.hint.tight{margin:0;text-align:center}
.warn{margin:8px 0 0;color:var(--fake);font-size:.85rem}
.rules{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:8px}
.rules li{color:var(--txt);font-size:.92rem}
.rules b{color:#fff}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}
button,input{font-family:inherit}
.primary{
  background:var(--accent);color:#05101f;border:0;border-radius:14px;padding:16px;
  font-size:1.05rem;font-weight:700;cursor:pointer;width:100%
}
.primary:disabled{opacity:.45;cursor:default}
.secondary{
  background:transparent;color:var(--txt);border:1px solid var(--line);border-radius:14px;
  padding:14px;font-size:.95rem;cursor:pointer;width:100%
}
.textbtn{background:none;border:0;color:var(--accent);font-weight:650;padding:0;cursor:pointer}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:.85rem;color:var(--dim)}
.field input{
  background:#0d111a;color:var(--txt);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:1rem
}
.field input:focus{outline:2px solid var(--accent);border-color:transparent}
#login .primary{margin-top:14px}

.gamebar{display:flex;align-items:center;gap:12px}
.progress{flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden}
#progress-fill{height:100%;width:0;background:var(--accent);transition:width .25s}
.counter{color:var(--dim);font-size:.85rem;font-variant-numeric:tabular-nums;min-width:4.2em;text-align:right}

.stage{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#000;border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative
}
.stage img{width:100%;height:100%;object-fit:contain;display:block}
#img-error{position:absolute;inset:auto 12px 12px;text-align:center;background:rgba(8,10,16,.88);padding:8px;border-radius:10px}

.vote{display:flex;flex-direction:column;gap:2px;--thumb:#8c97ad}
.ends{display:flex;justify-content:space-between;font-weight:750;font-size:1rem}
.ends .fake{color:var(--fake)}
.ends .real{color:var(--real)}
#vote-out{text-align:center;font-weight:750;font-variant-numeric:tabular-nums;min-height:1.3em}
#vote{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;
  background:transparent;margin:0;touch-action:pan-y
}
#vote:focus{outline:none}
#vote:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
#vote::-webkit-slider-runnable-track{
  height:14px;border-radius:999px;
  background:linear-gradient(90deg, var(--fake), #2a3142 50%, var(--real))
}
#vote::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:34px;height:34px;margin-top:-10px;
  border-radius:50%;background:#f4f7fb;border:4px solid var(--thumb);
  box-shadow:0 1px 4px rgba(0,0,0,.45)
}
#vote::-moz-range-track{
  height:14px;border-radius:999px;border:0;
  background:linear-gradient(90deg, var(--fake), #2a3142 50%, var(--real))
}
#vote::-moz-range-thumb{
  width:34px;height:34px;border-radius:50%;background:#f4f7fb;border:4px solid var(--thumb)
}

#score{font-size:3.2rem;font-variant-numeric:tabular-nums}
.review{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.tile{
  position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:2px solid;
  cursor:pointer;background:#000;padding:0;color:inherit
}
.tile.ok{border-color:var(--real)}
.tile.bad{border-color:var(--fake)}
.tile.mid{border-color:var(--line)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile .tag{
  position:absolute;left:0;right:0;bottom:0;background:rgba(5,8,14,.82);
  font-size:.68rem;padding:3px 4px;text-align:center;letter-spacing:.04em;font-weight:700
}
.tile .mark{position:absolute;top:3px;right:5px;font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums}
.tile.ok .mark{color:var(--real)}
.tile.bad .mark{color:var(--fake)}
.tile.mid .mark{color:var(--dim)}

.calib{width:100%;height:auto;display:block}
#lightbox{position:fixed;inset:0;background:rgba(4,6,10,.96);z-index:50;display:flex;
  align-items:center;justify-content:center;padding:14px}
#lightbox[hidden]{display:none}
.lb-inner{display:flex;flex-direction:column;gap:12px;max-height:100%;width:min(560px,100%);align-items:center}
#lb-img{max-width:100%;max-height:68svh;object-fit:contain;border-radius:12px;border:1px solid var(--line)}
.lb-meta{text-align:center;font-size:.95rem;line-height:1.55}
.lb-meta .k{color:var(--dim)}