/* =========================================================================
   FLAPPY KOL — the game window's contents
   Shell chrome lives in os.css. This file styles only what is inside the
   flappyKOL window: the canvas stage and its overlay screens.
   One committed visual world, so a single theme; every colour is explicit.
   ========================================================================= */

:root{
  --sky:        #64c2de;
  --ink:        #241d13;
  --paper:      #ffeec4;
  --gold:       #ffcf3f;
  --ember:      #e4572e;

  --slate:      #223945;
  --slate-hi:   #2f4d5c;
  --slate-line: #12202a;
  --steel:      #9fc4d4;
  --steel-dim:  #6f8f9d;

  --btn-a:      #ffe08a;
  --btn-b:      #f5b942;
  --btn-shadow: #a97116;
  --alt-a:      #dff0f6;
  --alt-b:      #a9cfdd;
  --alt-shadow: #5b8496;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100%; overflow:hidden }

body{
  background:#0d1519;
  color:#fff;
  font-family:'Press Start 2P', ui-monospace, 'Courier New', monospace;
  -webkit-font-smoothing:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

img, canvas{
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
}

/* the window body centres the stage; any sliver left over is sky */
#gameViewport{
  display:flex; align-items:center; justify-content:center;
  background:var(--sky);
  overflow:hidden;
}

#stage{
  position:relative;
  flex:0 0 auto;
  background:var(--sky);
  overflow:hidden;
  touch-action:manipulation;
  cursor:pointer;
}
#game{ display:block; width:100%; height:100% }

/* ---------- overlay layers ---------- */
.layer{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:16px;
  text-align:center;
  pointer-events:none; opacity:0;
  transition:opacity .18s ease;
}
.layer.on{ opacity:1; pointer-events:auto }
.layer.dim{ background:rgba(16,26,32,.55) }

#menu{ justify-content:center; padding-bottom:9% }

/* ---------- registration gate ---------- */
#nameGate{ gap:9px; padding:14px }
.fieldrow{
  display:flex; flex-direction:column; gap:5px;
  width:min(360px, 92%);
  cursor:text;
}
.fieldrow .fl{ font-size:7px; letter-spacing:1px; text-align:left; color:#d8f0fb }
.fwrap{
  display:flex; align-items:stretch;
  background:#16262e;
  border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.5);
}
.fwrap:focus-within{ border-color:var(--gold) }
.fwrap .at{
  display:grid; place-items:center;
  padding:0 2px 0 9px;
  font-size:12px; color:var(--gold);
}
.fwrap input{
  flex:1; min-width:0;
  font:inherit; font-size:11px; letter-spacing:1px;
  padding:11px 10px 11px 6px;
  color:var(--paper); background:none;
  border:0; outline:none;
}
.fwrap input::placeholder{ color:#496a79; letter-spacing:.5px }
#walletInput{ font-size:9px; letter-spacing:0 }
#nameMsg{ color:#ffb4a2 }
#nameMsg.ok{ color:#b6f0a0 }
.gatenote{ font-size:6px; color:#9fc4d4; letter-spacing:1px }

@media (max-width:520px){
  .fieldrow{ width:94% }
  .fwrap input{ font-size:10px }
  #walletInput{ font-size:8px }
}

.rankline{
  margin-top:10px; padding-top:9px;
  box-shadow:inset 0 1px 0 rgba(122,94,44,.4);
  font-size:8px; color:#8a6a34; letter-spacing:1px; text-align:center;
}
.rankline b{ color:#4a3413; font-size:11px }
#ready{ justify-content:flex-start; padding-top:19%; gap:10px }

/* ---------- pixel text ---------- */
.pxt{
  color:var(--paper);
  text-shadow:
     2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink),
     2px 2px var(--ink), -2px 2px var(--ink), 2px -2px var(--ink), -2px -2px var(--ink),
     0 5px rgba(0,0,0,.35);
  line-height:1.5;
  letter-spacing:.5px;
}
#title{
  font-size:clamp(20px, 5.2vmin, 34px);
  color:var(--gold);
  text-wrap:balance;
}
#title small{
  display:block;
  font-size:clamp(7px, 1.5vmin, 10px);
  color:#fff;
  margin-top:12px;
  letter-spacing:3px;
}

/* ---------- buttons ---------- */
.btn{
  font:inherit; font-size:11px;
  color:#3a2a10;
  background:linear-gradient(var(--btn-a), var(--btn-b));
  border:3px solid var(--ink);
  border-radius:4px;
  padding:11px 16px;
  min-width:148px;
  cursor:pointer;
  box-shadow:0 5px 0 0 var(--btn-shadow), 0 5px 0 3px var(--ink);
  transition:transform .06s ease, box-shadow .06s ease, filter .12s;
}
.btn:hover{ filter:brightness(1.07) }
.btn:active{ transform:translateY(4px); box-shadow:0 1px 0 0 var(--btn-shadow), 0 1px 0 3px var(--ink) }
.btn.ghost{
  background:linear-gradient(var(--alt-a), var(--alt-b));
  box-shadow:0 5px 0 0 var(--alt-shadow), 0 5px 0 3px var(--ink);
}
.btn.ghost:active{ box-shadow:0 1px 0 0 var(--alt-shadow), 0 1px 0 3px var(--ink) }
.btn.sm{ font-size:9px; padding:9px 12px; min-width:0 }

.row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }

:where(button, .card):focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

/* ---------- hud ---------- */
#hud{
  position:absolute; top:14px; left:0; right:0;
  display:flex; justify-content:center;
  font-size:30px;
  font-variant-numeric:tabular-nums;
  pointer-events:none; opacity:0;
  transition:opacity .2s;
}
#hud.on{ opacity:1 }

/* ---------- game over panel ---------- */
.panel{
  background:linear-gradient(#fff3d2, #f0d69b);
  border:4px solid var(--ink);
  border-radius:6px;
  box-shadow:0 8px 0 0 rgba(0,0,0,.35);
  padding:15px 18px;
  color:#4a3413;
  min-width:min(286px, 90%);
}
.stats{ display:flex; justify-content:space-around; gap:14px }
.stat{ font-size:8px; color:#8a6a34; letter-spacing:1px }
.stat b{
  display:block; margin-top:8px;
  font-size:20px; color:#4a3413;
  font-variant-numeric:tabular-nums;
}
.medalrow{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px }
#medal{ width:46px; height:46px }
#medalName{ font-size:8px; color:#8a6a34; letter-spacing:1px }
#ovWho{ color:#c0392b }

/* ---------- character select ---------- */
#select{
  justify-content:center;
  background:rgba(11,19,25,.88);
  padding:12px;
}
.tray{
  width:min(720px, 100%);
  max-height:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:11px;
  padding:14px 14px 16px;
  background:linear-gradient(rgba(29,48,60,.97), rgba(17,30,38,.97));
  border:4px solid var(--ink);
  border-radius:8px;
  box-shadow:0 10px 0 -2px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.05);
}
#select h2{ font-size:clamp(10px, 2.4vmin, 14px); color:var(--gold); letter-spacing:1px }

#roster{
  width:100%; flex:0 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  display:flex; flex-wrap:wrap;
  gap:10px;
  padding:4px;
  justify-content:center;
  align-content:center;
  scrollbar-width:thin;
  scrollbar-color:var(--alt-shadow) transparent;
}
#roster::-webkit-scrollbar{ width:8px }
#roster::-webkit-scrollbar-thumb{ background:var(--alt-shadow); border-radius:8px }

.card{
  font:inherit;
  width:138px; flex:0 0 auto;
  background:linear-gradient(var(--slate-hi), var(--slate));
  border:3px solid var(--slate-line);
  border-radius:5px;
  padding:8px 5px 7px;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  position:relative;
  transition:transform .08s ease, background .12s, border-color .12s;
}
.card:hover{ transform:translateY(-3px); background:linear-gradient(#3a5e70, #28434f) }
.card.sel{ border-color:var(--gold); background:linear-gradient(#4a6b2e, #33511f) }
.card.sel::after{
  content:'✓';
  position:absolute; top:-9px; right:-7px;
  width:22px; height:22px;
  display:grid; place-items:center;
  background:var(--gold); color:#3a2a10;
  border:3px solid var(--slate-line); border-radius:50%;
  font-size:9px;
}
.card .pic{ height:64px; display:flex; align-items:center; justify-content:center }
.card .pic img{ display:block }
.card .nm{ font-size:8px; color:#fff; letter-spacing:.5px }
.card .tg{ font-size:6px; color:var(--steel); line-height:1.6; min-height:19px }
.card .bs{ font-size:6px; color:var(--gold); font-variant-numeric:tabular-nums }

#hint{ font-size:7px; color:#8fb3c2; letter-spacing:1px }

/* ---------- ready-screen prompt ---------- */

#tapnote{
  font-size:8px; color:#fff; letter-spacing:1px;
  animation:blink 1.1s steps(2, end) infinite;
}
@keyframes blink{ 50%{ opacity:.15 } }

/* ---------- responsive ---------- */
@media (max-width:720px){
  .btn{ min-width:132px; font-size:10px }
  .card{ width:124px }
  #select{ padding:8px }
  .tray{ padding:10px 10px 12px; gap:8px }
}

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