/* Kenku web app ??? pixel UI adapted from the frozen kenku-app demo.
   Same palette + type; the encyclopedia screen is the "Songbook" everywhere. */
:root{
  --bg:#F5F1E4; --ink:#1E241B; --deep:#14281D; --green:#2D6A4F; --amber:#D9A441;
  --rust:#B7410E; --sand:#EAE3CF; --line:#B9B19A; --faint:#5A6350;
}
*{margin:0;padding:0;box-sizing:border-box;image-rendering:pixelated;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#0D1B13;font-family:'VT323',monospace;color:var(--ink)}
.px{font-family:'Press Start 2P',monospace}
/* phone frame on desktop, full-bleed on mobile */
#phone{width:100%;max-width:400px;height:100dvh;margin:0 auto;background:var(--bg);position:relative;overflow:hidden;display:flex;flex-direction:column}
@media(min-width:480px){
  body{display:flex;align-items:center;justify-content:center}
  #phone{height:min(844px,94vh);border:6px solid #000;box-shadow:0 0 0 4px #2D6A4F,0 30px 80px #000c}
}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit;color:var(--ink)}
/* ===== HUD ===== */
#hud{height:60px;background:#1E3A2A;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:4px solid #0D1B13;flex:none}
#avatar{width:36px;height:36px;background:var(--amber);border:3px solid #0D1B13;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
#hudmid{min-width:0}
#who{font-size:10px;color:var(--bg);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
#sub{font-size:14px;color:#8FA88F;line-height:1.2}
#chip{margin-left:auto;background:var(--green);border:3px solid #0D1B13;color:var(--bg);font-size:15px;padding:2px 8px;white-space:nowrap}
#out{width:30px;height:30px;background:#0D1B13;border:3px solid var(--green);color:var(--bg);font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
/* ===== views ===== */
main{flex:1;position:relative;overflow:hidden}
.view{position:absolute;inset:0;display:none;flex-direction:column}
.view.on{display:flex}
.scroll{flex:1;overflow-y:auto;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
/* ===== nav ===== */
#nav{height:70px;background:#1E3A2A;border-top:4px solid #0D1B13;display:none;flex:none}
#nav.on{display:flex}
.navbtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#8FA88F;font-size:14px;background:none;border:none}
.navbtn .ic{font-size:19px}
.navbtn.on{background:var(--green);color:var(--bg);box-shadow:inset 0 -6px 0 var(--amber)}
/* ===== auth ===== */
#authbox{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:22px;background:var(--deep)}
#logo{font-size:26px;color:var(--amber);letter-spacing:4px;text-shadow:3px 3px 0 #0D1B13}
#tagline{text-align:center;color:#BFE3C9;font-size:17px;line-height:1.4}
#authcard{width:100%;max-width:320px;background:var(--bg);border:4px solid #0D1B13;box-shadow:8px 8px 0 #0008;padding:14px}
.fl{font-family:'Press Start 2P';font-size:8px;color:var(--green);display:block;margin:8px 2px 3px}
#authcard input{width:100%;font-size:18px;padding:8px;border:3px solid #0D1B13;background:#FAF6E9}
#authrow{display:flex;gap:10px;margin-top:14px}
#autherr{min-height:20px;margin-top:8px;font-size:15px;color:var(--rust)}
/* ===== buttons / rows ===== */
.btn{flex:1;text-align:center;font-family:'Press Start 2P';font-size:9px;padding:13px 0 11px;border:4px solid #0D1B13;box-shadow:0 5px 0 #0D1B13;background:var(--bg);color:var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #0D1B13}
.btn.g{background:var(--green);color:var(--bg)}
.btn.a{background:var(--amber);color:var(--ink)}
.btn.sm{font-size:8px;padding:8px 0 6px}
.sechead{margin:16px 14px 0;font-family:'Press Start 2P';font-size:9px;color:var(--green)}
.row-item{margin:8px 14px 0;border:3px solid #0D1B13;background:#FAF6E9;padding:9px 11px}
.row-item .rt{font-family:'Press Start 2P';font-size:9px}
.row-item .rs{font-size:15px;color:var(--faint);margin-top:4px;line-height:1.3}
.dot{display:inline-block;width:11px;height:11px;border:2px solid #0D1B13;margin-right:6px;vertical-align:-1px}
.dot.g{background:var(--green)} .dot.a{background:var(--amber)} .dot.r{background:var(--rust)}
.badge{font-size:13px;border:2px solid #0D1B13;padding:1px 6px;background:var(--sand);white-space:nowrap}
.badge.g{background:var(--green);color:var(--bg)} .badge.a{background:var(--amber)} .badge.r{background:var(--rust);color:var(--bg)}
.empty{margin:8px 14px 0;border:3px dashed var(--faint);background:var(--sand);padding:10px 12px;font-size:16px;color:var(--faint)}
/* feed */
.fitem{display:flex;gap:10px;align-items:center;margin:8px 14px 0;border:3px solid #0D1B13;background:#FAF6E9;padding:8px 10px}
.fitem img{height:36px}
.fitem .ft{font-size:16px;line-height:1.25;min-width:0}
.fitem .fm{font-size:12.5px;color:var(--faint)}
.fitem .fbad{margin-left:auto;font-size:11.5px;border:2px solid #0D1B13;padding:1px 6px;white-space:nowrap}
.fitem .fbad.e{background:var(--green);color:var(--bg)}
.fitem .fbad.p{background:var(--sand);color:var(--faint)}
/* songbook */
.sbgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}
.sbc{border:4px solid #0D1B13;background:#FAF6E9;padding:8px;text-align:center;cursor:pointer;box-shadow:5px 5px 0 #0D1B1322;transition:transform .08s}
.sbc:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #0D1B1322}
.sbc img{height:74px}
.sbc .sn{font-family:'Press Start 2P';font-size:8px;margin-top:6px;line-height:1.6}
.sbc .sl{font-size:14px;color:var(--faint)}
.sbc .sq{font-family:'Press Start 2P';font-size:9px;color:var(--faint);margin-top:6px}
.sbc .sst{color:var(--amber);font-size:12px;letter-spacing:2px}
.sbc.unknown img{filter:brightness(0);opacity:.22}
/* species detail */
#sp-head{background:var(--deep);padding:12px 14px 10px;border-bottom:4px solid #0D1B13;flex:none}
#sp-head .row{display:flex;justify-content:space-between;align-items:center}
#spback{background:none;border:3px solid var(--amber);color:var(--amber);font-size:13px;padding:4px 8px}
#sp-stars{color:#E9C46A;font-size:10px;letter-spacing:2px}
#sp-portrait{margin:14px;height:230px;background:#FAF6E9;border:4px solid #0D1B13;box-shadow:8px 8px 0 #0D1B1322;display:flex;align-items:center;justify-content:center;position:relative}
#sp-portrait img{height:210px}
#sparkle{position:absolute;top:10px;right:12px;font-size:22px;color:var(--amber);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
#sp-name{padding:0 14px}
#sp-name .n{font-size:14px;line-height:1.6}
#sp-name .s{font-size:18px;color:var(--faint);margin-top:3px}
#sp-stats{margin:10px 14px 0;display:flex;gap:10px}
.stat{flex:1}
.stat .lbl{font-size:14px;color:var(--faint);margin-bottom:2px}
.stat .bar{height:12px;border:2px solid #0D1B13;background:#FAF6E9}
.stat .bar i{display:block;height:100%;background:var(--green)}
.stat:nth-child(2) .bar i{background:var(--amber)}
.stat:nth-child(3) .bar i{background:var(--rust)}
/* friends */
.suggest{display:flex;align-items:center;gap:8px;margin:10px 14px 0;border:3px dashed var(--faint);background:var(--sand);padding:8px 10px;font-size:15.5px}
.suggest input{flex:1;min-width:0;font-size:16px;padding:5px;border:3px solid #0D1B13;background:#FAF6E9}
.suggest button{font-family:'Press Start 2P';font-size:8px;border:3px solid #0D1B13;background:var(--green);color:var(--bg);padding:7px 9px;cursor:pointer}
.privacy{margin:8px 14px 0;background:var(--sand);border:3px dashed var(--faint);padding:8px 10px;font-size:15px;color:var(--faint);line-height:1.35}
.fbtns{margin-left:auto;text-align:right;white-space:nowrap}
.fbtns button{font-family:'Press Start 2P';font-size:8px;border:3px solid #0D1B13;background:var(--green);color:var(--bg);padding:6px 8px;cursor:pointer;margin-left:6px}
.fbtns button.no{background:var(--rust)}
.fbtns button.mu{background:var(--sand);color:var(--ink)}
/* toast */
#toast{position:absolute;top:70px;left:14px;right:14px;background:var(--bg);border:4px solid #0D1B13;box-shadow:6px 6px 0 #0D1B1388;padding:8px 10px;display:flex;align-items:center;gap:10px;z-index:40;transform:translateY(calc(-100% - 70px));visibility:hidden;transition:transform .25s steps(6),visibility 0s .25s}
#toast.on{transform:translateY(0);visibility:visible;transition:transform .25s steps(6),visibility 0s}
#toast img{width:38px;height:38px}
#toast .t1{font-family:'Press Start 2P';font-size:10px;color:var(--rust)}
#toast .t2{font-size:17px}