/* ==========================================================================
   FLAPPY FACES — retro shell
   Hard edges only: no border-radius, no blur, no soft shadows. Borders are
   drawn with box-shadow so they stay crisp at any zoom.
   ========================================================================== */

:root{
  --bg:      #0f0f1b;
  --panel:   #1b1b2f;
  --panel2:  #262641;
  --ink:     #05050a;
  --fg:      #f4f4f8;
  --dim:     #8a8ab0;
  --yellow:  #ffcf4d;
  --red:     #ff5d6c;
  --green:   #5bd66b;
  --blue:    #4dc4ff;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  width:100%; height:100%; overflow:hidden; position:fixed;
  overscroll-behavior:none; background:var(--bg); color:var(--fg);
  font-family:'Press Start 2P', ui-monospace, 'Courier New', monospace;
  font-size:10px; line-height:1.7; letter-spacing:.02em;
  -webkit-font-smoothing:none;
  user-select:none; -webkit-user-select:none;
}

#app{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

/* faint scanlines over everything */
#app::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:60;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity:.5;
}

.screen{
  display:none; flex:1; min-height:0;
  flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:18px 16px; text-align:center;
}
.screen.on{ display:flex; }
.list-screen{ justify-content:flex-start; gap:8px; padding:12px 10px; }

/* ---------- pixel chrome ---------- */
.panel{
  width:100%; max-width:300px; background:var(--panel); padding:16px 14px;
  box-shadow:0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink),
             -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink),
             0 0 0 4px var(--panel2) inset;
  display:flex; flex-direction:column; gap:12px;
}

.btn{
  font:inherit; font-size:11px; color:var(--ink); background:var(--yellow);
  border:0; padding:12px 14px; cursor:pointer; letter-spacing:.06em;
  box-shadow:0 4px 0 0 #a37a12, 0 -4px 0 0 var(--ink) inset;
}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 0 #a37a12; }
.btn:disabled{ background:#5c5c74; box-shadow:0 4px 0 0 #34344a; color:#9a9ab4; }
.btn.primary{ background:var(--yellow); }
.btn.big{ font-size:16px; padding:18px 40px; width:100%; max-width:300px; }

.linkish{
  font:inherit; font-size:8px; background:none; border:0; color:var(--blue);
  cursor:pointer; padding:4px; letter-spacing:.04em;
}
.linkish.dim{ color:var(--dim); }

.ghost-btn{
  font:inherit; font-size:10px; color:var(--fg); background:var(--panel2);
  border:0; width:26px; height:26px; cursor:pointer;
  box-shadow:0 2px 0 0 var(--ink), 0 -2px 0 0 var(--ink),
             -2px 0 0 0 var(--ink), 2px 0 0 0 var(--ink);
}

/* ---------- type ---------- */
h2{ font-size:11px; letter-spacing:.08em; color:var(--fg); }

.logo{ display:flex; flex-direction:column; gap:6px; line-height:1.2; }
.logo-a{ font-size:26px; color:var(--fg);   text-shadow:4px 4px 0 var(--ink); }
.logo-b{ font-size:26px; color:var(--yellow); text-shadow:4px 4px 0 var(--ink); }
.logo.small .logo-a,.logo.small .logo-b{ font-size:17px; text-shadow:3px 3px 0 var(--ink); }
.tagline{ font-size:8px; color:var(--dim); }
.domain{ font-size:7px; color:var(--yellow); letter-spacing:.14em; opacity:.75; margin-top:-6px; }

.field{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.field span{ font-size:8px; color:var(--dim); }
.field input{
  font:inherit; font-size:11px; color:var(--fg); background:var(--ink);
  border:0; padding:11px 10px; width:100%; outline:0;
  box-shadow:0 0 0 2px var(--panel2) inset;
}
.field input:focus{ box-shadow:0 0 0 2px var(--yellow) inset; }
.field input::placeholder{ color:#4a4a68; font-size:8px; }

.note{ font-size:8px; color:var(--dim); min-height:12px; line-height:1.5; }
.note.warn{ color:var(--red); }

.kv{ display:flex; justify-content:space-between; align-items:center; font-size:9px; gap:10px; }
.kv span{ color:var(--dim); }
.kv b{ color:var(--fg); font-weight:normal; }
.kv b.hi{ color:var(--yellow); font-size:13px; }

.menu-foot{ display:flex; gap:18px; align-items:center; }
.offline{ font-size:7px; color:var(--red); max-width:280px; display:none; }
.offline.show{ display:block; }

/* ---------- game ---------- */
#screen-game{ padding:0; gap:0; justify-content:center; }
#stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; touch-action:none;
}
#game-canvas{
  display:block; image-rendering:pixelated; image-rendering:crisp-edges;
  box-shadow:0 0 0 2px var(--ink);
}

#hud{
  position:absolute; top:0; left:0; right:0; padding:10px 12px;
  display:flex; align-items:flex-start; justify-content:space-between;
  pointer-events:none; z-index:10;
}
#hud .ghost-btn{ pointer-events:auto; }
#hud-score{
  font-size:30px; color:#fff; text-shadow:3px 3px 0 var(--ink);
  flex:1; text-align:center; margin-right:26px;
}

#hud-banner{
  position:absolute; left:50%; top:26%; transform:translate(-50%,-8px);
  background:rgba(5,5,10,.82); padding:12px 18px; z-index:12;
  opacity:0; pointer-events:none; text-align:center;
  box-shadow:0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink),
             -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink),
             0 0 0 2px var(--yellow) inset;
}
#hud-banner.show{ animation:bannerIn 2s steps(12) forwards; }
@keyframes bannerIn{
  0%   { opacity:0; transform:translate(-50%,-18px); }
  12%  { opacity:1; transform:translate(-50%,-8px); }
  78%  { opacity:1; transform:translate(-50%,-8px); }
  100% { opacity:0; transform:translate(-50%,-8px); }
}
#banner-level{ font-size:8px; color:var(--dim); }
#banner-name{ font-size:18px; color:var(--yellow); margin-top:6px; }

#over{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(5,5,12,.78); z-index:20; padding:16px;
}
#over.show{ display:flex; }
.over-panel{ gap:8px; align-items:stretch; }
.over-big{ font-size:34px; color:#fff; text-shadow:3px 3px 0 var(--ink); }
.over-sub{ font-size:8px; color:var(--dim); }
.rankline{ font-size:9px; color:var(--blue); min-height:12px; }
.newbest{ font-size:9px; color:var(--yellow); display:none; }
.newbest.show{ display:block; animation:blink .7s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.25; } }

/* ---------- lists (ranks + chat) ---------- */
.bar{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:4px 4px 8px;
}
.scroller{
  width:100%; flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--panel); padding:8px;
  box-shadow:0 0 0 3px var(--ink);
  display:flex; flex-direction:column; gap:5px;
}
.chat-note{ font-size:8px; color:var(--dim); min-height:11px; width:100%; text-align:left; }
.chat-note.warn{ color:var(--red); }

.rank-me{ font-size:8px; color:var(--yellow); width:100%; text-align:left; }
.rank-row{
  display:grid; grid-template-columns:28px 1fr auto auto; gap:6px;
  align-items:center; font-size:9px; padding:6px 4px; background:var(--panel2);
  text-align:left;
}
.rank-row.me{ box-shadow:0 0 0 2px var(--yellow) inset; }
.rank-pos{ color:var(--dim); }
.rank-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-face{ font-size:7px; color:var(--dim); }
.rank-score{ color:var(--yellow); }

.msg{ font-size:9px; text-align:left; line-height:1.6; word-break:break-word; }
.msg-who{ margin-right:6px; }
.msg-who::after{ content:':'; color:var(--dim); }
.msg-body{ color:var(--fg); }
.msg-time{ font-size:7px; color:#4a4a68; margin-left:6px; }
.msg.mine .msg-body{ color:var(--yellow); }

#chat-form{ width:100%; display:flex; gap:6px; }
#chat-input{
  flex:1; font:inherit; font-size:10px; color:var(--fg); background:var(--ink);
  border:0; padding:11px 10px; outline:0; min-width:0;
  box-shadow:0 0 0 2px var(--panel2) inset;
}
#chat-input:focus{ box-shadow:0 0 0 2px var(--yellow) inset; }
#chat-input::placeholder{ color:#4a4a68; font-size:8px; }
#chat-form .btn{ padding:11px 16px; }

/* ---------- tabs ---------- */
#tabs{
  display:flex; width:100%; background:var(--ink); flex:0 0 auto;
}
#tabs.hidden{ display:none; }
.tab{
  flex:1; font:inherit; font-size:9px; color:var(--dim); background:var(--ink);
  border:0; padding:14px 4px; cursor:pointer; letter-spacing:.06em;
}
.tab.active{ color:var(--yellow); background:var(--panel); }

/* wider screens: keep it phone shaped */
@media (min-width:520px){
  .screen{ max-width:420px; width:100%; margin:0 auto; }
  #tabs{ max-width:420px; margin:0 auto; }
}