/* ============================================================
   MEME WARS — retro CRT / synthwave stylesheet
   ============================================================ */
:root{
  --bg:#0a0014;
  --bg2:#13002b;
  --ink:#e8e6ff;
  --magenta:#ff2e97;
  --cyan:#1ff7ff;
  --green:#39ff14;
  --amber:#ffd23f;
  --red:#ff3b3b;
  --purple:#9d4edd;
  --dim:#7a6f9e;
  --line:rgba(157,78,221,.35);
  --glow-c:0 0 6px var(--cyan), 0 0 14px rgba(31,247,255,.5);
  --glow-m:0 0 6px var(--magenta), 0 0 16px rgba(255,46,151,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #2a0050 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 110%, #003a4d 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:'VT323',ui-monospace,monospace;
  font-size:20px;
  line-height:1.25;
  overflow-x:hidden;
  -webkit-font-smoothing:none;
}
.crt{position:relative;min-height:100%;}

/* ---- CRT overlays ---- */
.scanlines{
  pointer-events:none;position:fixed;inset:0;z-index:9000;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 1px,transparent 2px,transparent 3px);
  mix-blend-mode:multiply;animation:flicker 6s infinite;
}
.vignette{pointer-events:none;position:fixed;inset:0;z-index:8999;
  background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.65) 100%);}
@keyframes flicker{0%,100%{opacity:.5}48%{opacity:.62}50%{opacity:.4}52%{opacity:.6}}

/* ---- screens ---- */
.screen{display:none;min-height:100vh;animation:fadein .4s ease}
.screen.active{display:block}
@keyframes fadein{from{opacity:0}to{opacity:1}}

h2,.panel-h{font-family:'Press Start 2P',monospace}

/* ============================================================
   TITLE SCREEN
   ============================================================ */
.title-wrap{max-width:780px;margin:0 auto;padding:5vh 18px 40px;text-align:center;position:relative}
.logo{
  font-family:monospace;font-weight:bold;line-height:1;
  font-size:clamp(11px,3.6vw,26px);color:var(--magenta);
  text-shadow:var(--glow-m);white-space:pre;display:inline-block;
  animation:hue 8s linear infinite;
}
@keyframes hue{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}
.tagline{color:var(--cyan);text-shadow:var(--glow-c);font-size:clamp(14px,2.5vw,22px);margin:14px 0 22px;letter-spacing:1px}
.title-panel{
  border:2px solid var(--line);background:linear-gradient(180deg,rgba(30,0,60,.6),rgba(10,0,25,.6));
  padding:22px;border-radius:8px;box-shadow:0 0 30px rgba(157,78,221,.25),inset 0 0 30px rgba(0,0,0,.5);
  text-align:left;
}
.brief{font-size:20px;margin-bottom:12px;color:var(--ink)}
.brief b{color:var(--green);text-shadow:0 0 6px rgba(57,255,20,.5)}
.brief.dim{color:var(--dim)}
.diff-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0;justify-content:center}
.diff-row .lbl{color:var(--amber);font-size:16px}
.diff-btn{
  font-family:'VT323',monospace;font-size:18px;background:transparent;color:var(--cyan);
  border:1px solid var(--cyan);padding:6px 12px;cursor:pointer;border-radius:4px;transition:.15s;
}
.diff-btn:hover{background:rgba(31,247,255,.12)}
.diff-btn.active{background:var(--cyan);color:#001014;box-shadow:var(--glow-c);font-weight:bold}
.big-btn{
  display:block;width:100%;margin:14px 0 10px;padding:16px;cursor:pointer;
  font-family:'Press Start 2P',monospace;font-size:18px;color:#0a0014;
  background:linear-gradient(90deg,var(--magenta),var(--purple));border:none;border-radius:6px;
  box-shadow:0 0 18px rgba(255,46,151,.6);transition:.15s;letter-spacing:1px;
}
.big-btn:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(255,46,151,.9)}
.big-btn:active{transform:translateY(1px)}
.ghost-btn{display:block;width:100%;background:transparent;border:1px dashed var(--dim);color:var(--dim);
  padding:10px;cursor:pointer;font-family:'VT323',monospace;font-size:18px;border-radius:4px}
.ghost-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.hiscore-line{margin-top:20px;color:var(--amber);font-size:18px;text-shadow:0 0 8px rgba(255,210,63,.4)}
.credit{color:var(--dim);font-size:15px;margin-top:6px}
.blink-slow{animation:blink 1.4s step-start infinite}

/* ---- language switch ---- */
.lang-switch{display:inline-flex;gap:4px;border:1px solid var(--line);border-radius:5px;padding:3px;background:rgba(10,0,25,.6)}
.lang-switch.title-lang{position:absolute;top:14px;right:14px}
.lang-btn{font-family:'VT323',monospace;font-size:16px;line-height:1;color:var(--dim);background:transparent;
  border:none;border-radius:3px;padding:5px 9px;cursor:pointer;transition:.12s;letter-spacing:1px}
.lang-btn:hover{color:var(--cyan)}
.lang-btn.active{background:var(--magenta);color:#0a0014;font-weight:bold;box-shadow:0 0 8px rgba(255,46,151,.5)}
@keyframes blink{50%{opacity:.35}}

/* ============================================================
   GAME SCREEN
   ============================================================ */
.topbar{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-bottom:2px solid var(--line);background:rgba(10,0,25,.7);
  position:sticky;top:0;z-index:50;backdrop-filter:blur(2px);
}
.brand{font-family:'Press Start 2P',monospace;font-size:15px;color:var(--magenta);text-shadow:var(--glow-m)}
.loc-tag{color:var(--cyan);text-shadow:var(--glow-c);font-size:20px}
.day-tag{margin-left:auto;color:var(--amber);font-size:20px}
.icon-btn{background:none;border:1px solid var(--line);color:var(--ink);cursor:pointer;border-radius:4px;padding:2px 8px;font-size:18px}

.stat-strip{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:var(--line);border-bottom:2px solid var(--line);
}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:rgba(13,0,33,.85)}
.stat .k{font-size:13px;color:var(--dim);letter-spacing:1px}
.stat .v{font-size:22px;color:var(--ink)}
.stat .v.cash{color:var(--green);text-shadow:0 0 6px rgba(57,255,20,.4)}
.stat .v.debt{color:var(--red)}
.stat.net{background:rgba(40,0,30,.9)}
.stat.net .v{color:var(--amber);text-shadow:0 0 8px rgba(255,210,63,.5)}

.game-grid{display:grid;grid-template-columns:1fr 300px;gap:12px;padding:12px;max-width:1100px;margin:0 auto}
.panel{border:2px solid var(--line);border-radius:8px;background:linear-gradient(180deg,rgba(20,0,43,.6),rgba(8,0,20,.6));padding:12px}
.panel-h{font-size:12px;color:var(--purple);margin-bottom:10px;letter-spacing:1px;text-shadow:0 0 8px rgba(157,78,221,.5)}

/* market */
.market-head,.market-row{display:grid;grid-template-columns:1fr 90px 56px 120px;align-items:center;gap:6px}
.market-head{font-size:13px;color:var(--dim);padding:0 4px 8px;border-bottom:1px dashed var(--line);letter-spacing:1px}
.market-head .r,.market-row .r{text-align:right}
.market-list{display:flex;flex-direction:column}
.market-row{padding:7px 4px;border-bottom:1px solid rgba(157,78,221,.12)}
.market-row .meme{display:flex;align-items:center;gap:8px;font-size:20px}
.market-row .emoji{font-size:22px;filter:drop-shadow(0 0 4px rgba(255,255,255,.2))}
.market-row .price{font-size:20px;color:var(--green)}
.market-row .price.hot{color:var(--magenta);text-shadow:var(--glow-m);animation:pulse 1s infinite}
.market-row .price.cold{color:var(--cyan)}
@keyframes pulse{50%{opacity:.55}}
.market-row .owned{font-size:18px;color:var(--amber);text-align:right}
.market-row .owned .basis{display:block;font-size:13px;line-height:1;margin-top:1px;color:var(--dim);letter-spacing:.5px}
.market-row .owned .basis.up{color:var(--green)}
.market-row .owned .basis.down{color:var(--red)}
.tradebtns{display:flex;gap:5px;justify-content:flex-end}
.mini-btn{font-family:'VT323',monospace;font-size:16px;border:1px solid var(--cyan);background:transparent;color:var(--cyan);
  padding:3px 9px;cursor:pointer;border-radius:3px;transition:.12s}
.mini-btn:hover:not(:disabled){background:var(--cyan);color:#001014}
.mini-btn.sell{border-color:var(--magenta);color:var(--magenta)}
.mini-btn.sell:hover:not(:disabled){background:var(--magenta);color:#1a0010}
.mini-btn:disabled{opacity:.25;cursor:not-allowed}
.tag-hot{font-size:12px;color:var(--magenta);border:1px solid var(--magenta);border-radius:3px;padding:0 4px;margin-left:4px}
.tag-cold{font-size:12px;color:var(--cyan);border:1px solid var(--cyan);border-radius:3px;padding:0 4px;margin-left:4px}

/* side */
.act-btn{display:block;width:100%;text-align:left;margin-bottom:8px;padding:10px;cursor:pointer;
  font-family:'VT323',monospace;font-size:19px;color:var(--ink);background:rgba(157,78,221,.12);
  border:1px solid var(--line);border-radius:5px;transition:.12s}
.act-btn:hover{background:rgba(157,78,221,.28);border-color:var(--purple);transform:translateX(2px)}
.divider{height:1px;background:var(--line);margin:12px 0}
.hint{font-size:14px;color:var(--dim);margin-bottom:8px}
.travel-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.travel-btn{font-family:'VT323',monospace;font-size:17px;color:var(--cyan);background:transparent;
  border:1px solid var(--cyan);border-radius:4px;padding:8px 4px;cursor:pointer;transition:.12s;display:flex;flex-direction:column;align-items:center;gap:2px}
.travel-btn:hover:not(:disabled){background:rgba(31,247,255,.14);box-shadow:var(--glow-c)}
.travel-btn .pe{font-size:20px}
.travel-btn.here{border-color:var(--amber);color:var(--amber);opacity:.6;cursor:default}
.travel-btn:disabled{opacity:.5}

/* log */
.logbar{display:flex;gap:8px;align-items:center;max-width:1100px;margin:0 auto 16px;padding:10px 14px;
  border:2px solid var(--line);border-top:none;border-radius:0 0 8px 8px;background:rgba(8,0,20,.7);min-height:46px}
.log-tick{color:var(--green);animation:blink 1s step-start infinite}
.log{font-size:19px;color:var(--green);text-shadow:0 0 6px rgba(57,255,20,.3)}

/* ============================================================
   MULTIPLAYER (PVP)
   ============================================================ */
.mp-btn{background:linear-gradient(90deg,var(--cyan),var(--purple));box-shadow:0 0 18px rgba(31,247,255,.5)}
.mp-btn:hover{box-shadow:0 0 28px rgba(31,247,255,.85)}
#screen-mp .stat .v.net-v{color:var(--amber);text-shadow:0 0 8px rgba(255,210,63,.5)}
.mp-phasebox{text-align:center}
.mp-phase{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--amber);padding:6px 0;letter-spacing:1px}
.mp-phase.live{color:var(--green);text-shadow:0 0 10px rgba(57,255,20,.5);animation:pulse 1.4s infinite}
#mp-start{margin-top:8px;text-align:center;color:var(--green);border-color:var(--green)}
.mp-board{display:flex;flex-direction:column;gap:3px;margin-bottom:4px}
.mp-board-row{display:flex;justify-content:space-between;gap:8px;padding:5px 8px;border:1px solid rgba(157,78,221,.18);border-radius:4px;font-size:17px}
.mp-board-row .bn{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-board-row .bv{color:var(--amber);flex-shrink:0}
.mp-board-row.me{border-color:var(--cyan);background:rgba(31,247,255,.08)}
.mp-board-row.me .bn{color:var(--cyan)}
.mp-feed{display:flex;flex-direction:column;gap:2px;max-height:160px;overflow-y:auto}
.mp-feed-line{font-size:15px;color:var(--dim);border-bottom:1px dotted rgba(157,78,221,.12);padding:2px 0}
.mp-feed-line:first-child{color:var(--green)}

.mp-connect{display:none;position:fixed;inset:0;z-index:9400;background:rgba(2,0,8,.9);
  align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}
.mp-connect.show{display:flex}
.mp-connect-box{width:100%;max-width:420px;border:2px solid var(--cyan);border-radius:10px;
  background:linear-gradient(180deg,rgba(0,30,40,.97),rgba(8,0,22,.97));padding:26px;text-align:center;
  box-shadow:0 0 40px rgba(31,247,255,.35)}
.mp-connect-box h3{font-family:'Press Start 2P',monospace;font-size:14px;color:var(--cyan);margin-bottom:16px;text-shadow:var(--glow-c)}
.mp-connect-box input{width:100%;font-family:'VT323',monospace;font-size:24px;text-align:center;
  background:#0a0014;color:var(--green);border:1px solid var(--line);border-radius:5px;padding:10px;margin-bottom:14px}
.mp-connect-box .big-btn{margin-bottom:12px}
.mp-connect-box .dim{font-size:15px;color:var(--dim);margin-bottom:14px}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay{display:none;position:fixed;inset:0;z-index:9500;background:rgba(2,0,8,.82);
  align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}
.modal-overlay.show{display:flex}
.modal{width:100%;max-width:480px;border:2px solid var(--magenta);border-radius:10px;
  background:linear-gradient(180deg,rgba(25,0,50,.97),rgba(10,0,22,.97));
  box-shadow:0 0 40px rgba(255,46,151,.4),inset 0 0 30px rgba(0,0,0,.6);padding:22px;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal h3{font-family:'Press Start 2P',monospace;font-size:15px;color:var(--magenta);margin-bottom:14px;line-height:1.5;text-shadow:var(--glow-m)}
.modal p{font-size:19px;margin-bottom:12px}
.modal p.dim{color:var(--dim);font-size:17px}
.modal .big-emoji{font-size:54px;text-align:center;display:block;margin:6px 0 12px;filter:drop-shadow(0 0 12px rgba(255,46,151,.5))}
.modal label{display:block;font-size:16px;color:var(--cyan);margin:10px 0 4px}
.modal input[type=range]{width:100%;accent-color:var(--magenta)}
.modal input[type=number]{width:100%;font-family:'VT323',monospace;font-size:22px;background:#0a0014;
  color:var(--green);border:1px solid var(--line);border-radius:4px;padding:8px;text-align:center}
.qty-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.qty-big{font-size:30px;color:var(--green);min-width:70px;text-align:center}
.modal .row{display:flex;gap:10px;margin-top:16px}
.modal .row .big-btn,.modal .row .ghost-btn{margin:0}
.modal .info{display:flex;justify-content:space-between;font-size:18px;color:var(--dim);padding:4px 0;border-bottom:1px dashed var(--line)}
.modal .info b{color:var(--ink)}
.shop-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:6px;padding:10px;margin-bottom:10px}
.shop-item .si-emo{font-size:32px}
.shop-item .si-txt{flex:1}
.shop-item .si-txt .n{font-size:19px;color:var(--ink)}
.shop-item .si-txt .d{font-size:15px;color:var(--dim)}
.encounter-foes{text-align:center;font-size:40px;letter-spacing:8px;margin:8px 0}
.hp-bar{height:10px;background:#2a0030;border:1px solid var(--line);border-radius:5px;overflow:hidden;margin:6px 0 14px}
.hp-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .3s}
.gameover-score{font-size:40px;color:var(--amber);text-align:center;text-shadow:0 0 14px rgba(255,210,63,.6);margin:10px 0}
.rank{text-align:center;font-size:22px;color:var(--cyan);margin-bottom:14px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:860px){
  body{font-size:18px}
  .game-grid{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(4,1fr)}
  .stat.net{grid-column:span 4}
  .market-head,.market-row{grid-template-columns:1fr 76px 44px 104px}
  .brand{font-size:12px}
  .day-tag,.loc-tag{font-size:17px}
}
@media(max-width:480px){
  .stat-strip{grid-template-columns:repeat(3,1fr)}
  .stat.net{grid-column:span 3}
  .market-row .meme{font-size:17px}
}

/* floating +/- money popups */
.float{position:fixed;z-index:9600;pointer-events:none;font-size:24px;font-weight:bold;
  animation:floatup 1s ease-out forwards;text-shadow:0 0 8px currentColor}
.float.gain{color:var(--green)}
.float.loss{color:var(--red)}
@keyframes floatup{from{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}