/* shared.css — Kampung AI v2.0 Design System */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

:root {
  --gold:#ffd700;--cyan:#00f5ff;--purple:#cc00ff;--green:#00ff88;
  --orange:#ff6600;--pink:#ff00cc;--amber:#ffaa00;--brown:#bb8844;
  --red:#ff3333;--blue:#3399ff;
  --panel:rgba(4,6,18,0.93);--border:rgba(0,245,255,0.12);
  --text:#e0f0ff;--dim:#4a6080;--dimmer:#2a3850;
  --pixel:'Press Start 2P',monospace;--sans:'Plus Jakarta Sans',sans-serif;
  --bg:#020408;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100vh;background:var(--bg);font-family:var(--sans);color:var(--text)}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:rgba(0,245,255,0.12)}
canvas.rain{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ── TOP BAR ── */
.hud-top{
  position:fixed;top:0;left:0;right:0;height:54px;z-index:100;
  background:rgba(2,4,12,0.97);border-bottom:1px solid rgba(0,245,255,0.07);
  display:flex;align-items:center;padding:0 12px;gap:8px;
}
.hb{background:rgba(0,0,0,0.5);border:1px solid rgba(0,245,255,0.15);border-radius:4px;padding:5px 10px;display:flex;align-items:center;gap:7px}
.px{font-family:var(--pixel);font-size:0.38rem;letter-spacing:0.06em}
.sp{flex:1;text-align:center}
.mb{display:flex;align-items:center;gap:7px;background:rgba(255,215,0,0.07);border:1px solid rgba(255,215,0,0.2);border-radius:4px;padding:5px 11px;cursor:pointer}
.ma{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#ffd700,#ff8c00);display:flex;align-items:center;justify-content:center;font-size:0.56rem;font-weight:800;color:#1a0a00}
.od{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;animation:blink 2s infinite}
.nt{display:flex;gap:3px}
.ntb{font-family:var(--pixel);font-size:0.3rem;padding:4px 7px;border-radius:3px;border:1px solid transparent;cursor:pointer;background:transparent;color:var(--dim);transition:all 0.15s;text-decoration:none;display:inline-flex;align-items:center;gap:3px}
.ntb.on,.ntb:hover{background:rgba(0,245,255,0.07);border-color:rgba(0,245,255,0.2);color:var(--cyan);text-shadow:0 0 5px var(--cyan)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

/* ── PAGE WRAPPER ── */
.page{padding-top:70px;padding-bottom:30px;min-height:100vh;position:relative;z-index:10}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ── BACK LINK ── */
.back-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--pixel);font-size:0.3rem;color:var(--dim);text-decoration:none;padding:8px 12px;border:1px solid var(--border);border-radius:4px;margin-bottom:18px;transition:all 0.15s}
.back-link:hover{color:var(--cyan);border-color:rgba(0,245,255,0.25);background:rgba(0,245,255,0.04)}

/* ── PAGE HEADER ── */
.page-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.page-icon{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,0.07);flex-shrink:0}
.page-icon-fallback{width:56px;height:56px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.page-title{font-family:var(--pixel);font-size:0.7rem;letter-spacing:0.08em;margin-bottom:4px}
.page-sub{font-size:0.7rem;color:var(--dim);line-height:1.5}

/* ── CARDS ── */
.card{background:var(--panel);border:1px solid var(--border);border-radius:6px;backdrop-filter:blur(14px);overflow:hidden}
.card-header{font-family:var(--pixel);font-size:0.34rem;padding:8px 12px;border-bottom:1px solid var(--border);letter-spacing:0.06em}
.card-body{padding:14px}

/* ── STAT BOX ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:20px}
.stat-box{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px 14px;text-align:center}
.stat-val{font-family:var(--pixel);font-size:0.8rem;margin-bottom:4px}
.stat-lbl{font-size:0.58rem;color:var(--dim)}

/* ── BUTTON ── */
.btn-primary{background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:var(--pixel);font-size:0.32rem;padding:8px 14px;border-radius:4px;cursor:pointer;text-shadow:0 0 6px var(--gold);transition:all 0.15s;text-decoration:none;display:inline-block}
.btn-primary:hover{background:rgba(255,215,0,0.09);box-shadow:0 0 18px rgba(255,215,0,0.2)}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--dim);font-family:var(--pixel);font-size:0.3rem;padding:7px 12px;border-radius:4px;cursor:pointer;transition:all 0.15s;text-decoration:none;display:inline-block}
.btn-secondary:hover{border-color:rgba(0,245,255,0.25);color:var(--cyan)}

/* ── STATUS DOT ── */
.dot-idle{display:inline-block;width:8px;height:8px;border-radius:50%;background:#223}
.dot-active{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);animation:blink 2s infinite}
.dot-busy{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 5px var(--orange);animation:blink 0.7s infinite}

/* ── TAG ── */
.tag{font-family:var(--pixel);font-size:0.26rem;padding:2px 6px;border-radius:3px;display:inline-block}
.tag-green{background:rgba(0,255,136,0.07);color:var(--green);border:1px solid rgba(0,255,136,0.2)}
.tag-red{background:rgba(255,51,51,0.07);color:var(--red);border:1px solid rgba(255,51,51,0.2)}
.tag-orange{background:rgba(255,102,0,0.07);color:var(--orange);border:1px solid rgba(255,102,0,0.2)}
.tag-cyan{background:rgba(0,245,255,0.07);color:var(--cyan);border:1px solid rgba(0,245,255,0.2)}
.tag-gold{background:rgba(255,215,0,0.07);color:var(--gold);border:1px solid rgba(255,215,0,0.2)}

/* ── INPUT ── */
.inp{width:100%;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.1);border-radius:4px;color:var(--text);font-family:var(--sans);font-size:0.85rem;padding:10px 12px;outline:none;transition:border-color 0.2s}
.inp:focus{border-color:rgba(0,245,255,0.35);box-shadow:0 0 10px rgba(0,245,255,0.06)}
textarea.inp{resize:vertical;min-height:80px}

/* ── TABLE ── */
.tbl{width:100%;border-collapse:collapse;font-size:0.7rem}
.tbl th{font-family:var(--pixel);font-size:0.27rem;padding:7px 10px;border-bottom:1px solid var(--border);color:var(--dim);text-align:left;letter-spacing:0.06em}
.tbl td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,0.03);line-height:1.4}
.tbl tr:hover td{background:rgba(0,245,255,0.02)}

/* ── PROGRESS BAR ── */
.prog-wrap{background:rgba(255,255,255,0.06);border-radius:3px;height:6px;overflow:hidden}
.prog-fill{height:100%;border-radius:3px;transition:width 0.5s}

/* ── RAIN (shared) ── */

/* ── PAGE TRANSITIONS ── */
.page { animation: fadeInPage 0.25s ease; }
@keyframes fadeInPage { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* ── BUILDING SPRITE SHADOW ── */
.plot-building { filter: drop-shadow(0 6px 12px rgba(0,0,0,0.7)); }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .od, .dot-active, .dot-busy, .ad { animation: none !important; }
}