/* ============================================================
   ZIHOU.OS — pixel / retro-game styling
   ============================================================ */
/* Self-hosted fonts (reliable in regions where Google Fonts is blocked) */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/pressstart2p.woff2') format('woff2');
}
@font-face {
  font-family: 'VT323';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/vt323.woff2') format('woff2');
}

:root {
  --bg:        #0b0f1a;
  --bg-panel:  #141a2e;
  --bg-panel2: #1b2340;
  --ink:       #e8f0ff;
  --dim:       #7c89b8;
  --green:     #39ff8b;
  --cyan:      #38e1ff;
  --pink:      #ff5d9e;
  --yellow:    #ffd23f;
  --purple:    #b78bff;
  --red:       #ff5d5d;
  --border:    #2c3660;
  --shadow:    rgba(0,0,0,0.55);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'VT323', monospace;
  font-size:20px;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  image-rendering:pixelated;
}

/* CRT scanline overlay */
body::after {
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
}
/* subtle starfield grid */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.25;
  background-image:
    radial-gradient(circle, rgba(56,225,255,0.12) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,93,158,0.10) 1px, transparent 1px);
  background-size:48px 48px, 96px 96px;
  background-position:0 0, 24px 24px;
}

.pixel-font { font-family:'Press Start 2P', monospace; }

a { color:var(--cyan); text-decoration:none; }
a:hover { color:var(--green); }

.wrap { position:relative; z-index:1; max-width:880px; margin:0 auto; padding:0 18px; }

/* ---- top status bar ---- */
.topbar {
  position:sticky; top:0; z-index:50;
  background:var(--bg-panel); border-bottom:3px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; box-shadow:0 4px 0 var(--shadow);
}
.topbar .brand { font-family:'Press Start 2P'; font-size:12px; color:var(--green); letter-spacing:1px; }
.topbar .brand .blink { animation:blink 1s steps(1) infinite; }
.topbar nav { display:flex; gap:14px; align-items:center; }
.topbar nav a { font-size:18px; }
@keyframes blink { 50% { opacity:0; } }

/* ---- pixel button ---- */
.btn {
  font-family:'Press Start 2P'; font-size:11px; cursor:pointer;
  color:var(--bg); background:var(--green);
  border:none; padding:12px 16px; line-height:1.4;
  box-shadow:4px 4px 0 #0a3d22; transition:transform .05s, box-shadow .05s;
  text-transform:uppercase;
}
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:translate(4px,4px); box-shadow:0 0 0 #0a3d22; }
.btn.cyan   { background:var(--cyan);   box-shadow:4px 4px 0 #0a4a5c; }
.btn.pink   { background:var(--pink);   box-shadow:4px 4px 0 #5c1a3a; color:#fff; }
.btn.yellow { background:var(--yellow); box-shadow:4px 4px 0 #5c4a0a; }
.btn.ghost  { background:transparent; color:var(--ink); border:2px solid var(--border); box-shadow:none; }
.btn.ghost:hover { border-color:var(--cyan); color:var(--cyan); }
.btn.red    { background:var(--red); box-shadow:4px 4px 0 #5c1a1a; color:#fff; }
.btn.sm { font-size:9px; padding:8px 10px; box-shadow:3px 3px 0 #0a3d22; }

/* ---- panel / window ---- */
.panel {
  background:var(--bg-panel); border:3px solid var(--border);
  box-shadow:6px 6px 0 var(--shadow); margin:22px 0; position:relative;
}
.panel .titlebar {
  background:var(--bg-panel2); border-bottom:3px solid var(--border);
  padding:8px 12px; font-family:'Press Start 2P'; font-size:10px; color:var(--cyan);
  display:flex; align-items:center; gap:8px; letter-spacing:1px;
}
.panel .titlebar .dots { display:flex; gap:5px; }
.panel .titlebar .dots i { width:10px; height:10px; display:inline-block; }
.panel .titlebar .dots .r{background:var(--red);} .panel .titlebar .dots .y{background:var(--yellow);} .panel .titlebar .dots .g{background:var(--green);}
.panel .body { padding:18px; }

/* ---- HERO ---- */
.hero { min-height:calc(100vh - 56px); display:flex; flex-direction:column; justify-content:center; padding:40px 0; }
.hero .cardframe {
  background:linear-gradient(180deg,var(--bg-panel),var(--bg-panel2));
  border:3px solid var(--border); box-shadow:8px 8px 0 var(--shadow); padding:26px;
}
.hero h1 { font-family:'Press Start 2P'; font-size:clamp(20px,6vw,44px); color:var(--ink); line-height:1.3; margin-bottom:8px; text-shadow:4px 4px 0 var(--pink); }
.hero h1 .nm { color:var(--green); text-shadow:4px 4px 0 #0a3d22; }
.hero .sub { font-size:24px; color:var(--dim); margin-bottom:20px; }
.hero .sub .hz { color:var(--purple); }

/* stat block */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:18px 0; }
.stat { border:2px solid var(--border); padding:10px 12px; background:rgba(0,0,0,0.25); }
.stat .k { font-family:'Press Start 2P'; font-size:8px; color:var(--dim); letter-spacing:1px; }
.stat .v { font-size:26px; color:var(--yellow); }
.xpbar { height:18px; border:2px solid var(--border); background:#0a0e18; margin-top:6px; position:relative; }
.xpbar > i { display:block; height:100%; width:0; background:repeating-linear-gradient(90deg,var(--green),var(--green) 6px,#2ad06f 6px,#2ad06f 12px); transition:width 1.4s steps(20); }

.menu { list-style:none; margin-top:18px; font-size:24px; }
.menu li { padding:6px 0; cursor:pointer; }
.menu li::before { content:'> '; color:var(--green); opacity:0; }
.menu li:hover { color:var(--green); }
.menu li:hover::before { opacity:1; }

/* boot/typing line */
.boot { font-size:22px; color:var(--green); min-height:1.5em; }
.boot .cursor { animation:blink 1s steps(1) infinite; }

/* ---- generic section ---- */
section.block { padding:50px 0; }
h2.h { font-family:'Press Start 2P'; font-size:clamp(14px,4vw,22px); color:var(--cyan); margin-bottom:14px; }
h2.h .em { color:var(--pink); }
p.lead { font-size:22px; color:var(--ink); }
p.lead.dim { color:var(--dim); }

/* interest grid */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:18px; }
.tile { border:2px solid var(--border); background:var(--bg-panel); padding:16px; transition:transform .1s, border-color .1s; }
.tile:hover { transform:translateY(-4px); border-color:var(--cyan); }
.tile .ic { font-size:30px; }
.tile h3 { font-family:'Press Start 2P'; font-size:10px; color:var(--yellow); margin:8px 0 6px; line-height:1.4; }
.tile p { font-size:18px; color:var(--dim); }

/* ---- blog list ---- */
.post { border:2px solid var(--border); background:var(--bg-panel); margin:10px 0; }
/* collapsed thread row */
.post .post-row { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; user-select:none; }
.post .post-row:hover { background:var(--bg-panel2); }
.post .post-row .tag { color:var(--green); font-family:'Press Start 2P'; font-size:9px; flex:0 0 auto; }
.post .post-row .post-title { font-size:19px; color:var(--ink); flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post .post-row .post-date { color:var(--dim); font-size:14px; flex:0 0 auto; }
.post .post-row .post-cc { color:var(--cyan); font-size:14px; flex:0 0 auto; }
.post .post-row .post-caret { color:var(--dim); flex:0 0 auto; width:1em; text-align:center; }
/* expanded detail */
.post .post-detail { display:none; padding:0 16px 16px; border-top:2px solid var(--border); }
.post.open .post-detail { display:block; }
.post .post-detail .content { font-size:20px; color:var(--ink); white-space:pre-wrap; word-wrap:break-word; padding-top:14px; }
.post .post-detail .post-img { width:100%; border:2px solid var(--border); margin:14px 0 4px; display:block; image-rendering:auto; }
.post .pactions { padding:14px 0 0; display:flex; gap:10px; }

/* comments */
.comments { margin-top:18px; border-top:2px dashed var(--border); padding-top:14px; }
.cmt-list { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.cmt { background:var(--bg-panel2); border:2px solid var(--border); padding:8px 10px; }
.cmt-head { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.cmt-name { color:var(--green); font-family:'Press Start 2P'; font-size:9px; }
.cmt-date { color:var(--dim); font-size:13px; }
.cmt-del { margin-left:auto; background:var(--red); color:#fff; border:none; font-family:'Press Start 2P'; font-size:8px; padding:2px 6px; cursor:pointer; }
.cmt-body { font-size:18px; color:var(--ink); white-space:pre-wrap; word-wrap:break-word; }
.cmt-empty { color:var(--dim); font-size:16px; margin-bottom:12px; }
.cmt-form { display:flex; flex-direction:column; gap:8px; }
.cmt-form .cmt-in { margin:0; }
.cmt-form textarea.cmt-in { min-height:64px; resize:vertical; }
.cmt-msg { font-size:14px; color:var(--dim); }
.cmt-msg.err { color:var(--red); }

/* editor photo preview */
.editor-preview { margin-top:10px; }
.editor-preview img { width:100%; max-height:240px; object-fit:cover; border:2px solid var(--border); display:block; margin-bottom:8px; image-rendering:auto; }
input.in[type=file] { padding:8px; cursor:pointer; }
input.in[type=file]::file-selector-button { font-family:'Press Start 2P',monospace; font-size:8px; background:var(--cyan); color:var(--bg); border:none; padding:8px 10px; margin-right:10px; cursor:pointer; }

.empty { text-align:center; color:var(--dim); padding:40px 16px; font-size:22px; }

/* ---- world map ---- */
.map-stage { position:relative; width:100%; aspect-ratio:2 / 1; background:#070b14; border:2px solid var(--border); overflow:hidden; }
.map-stage.addmode { cursor:crosshair; box-shadow:inset 0 0 0 2px var(--green); }
#map-canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; display:block; }
#map-pins { position:absolute; inset:0; }
.pin { position:absolute; transform:translate(-50%,-100%); z-index:2; }
.pin .flag { font-size:18px; line-height:1; filter:drop-shadow(0 2px 0 rgba(0,0,0,0.6)); animation:pindrop .35s cubic-bezier(.2,.9,.2,1); cursor:default; }
.pin .lbl {
  position:absolute; left:50%; top:-6px; transform:translate(-50%,-100%);
  background:var(--bg-panel); border:2px solid var(--border); color:var(--ink);
  font-size:14px; line-height:1.2; padding:3px 7px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .12s; box-shadow:3px 3px 0 var(--shadow);
}
.pin:hover .lbl { opacity:1; }
.pin .del {
  position:absolute; left:50%; top:2px; transform:translateX(-50%);
  background:var(--red); color:#fff; border:none; font-family:'Press Start 2P',monospace;
  font-size:8px; padding:2px 5px; cursor:pointer; display:none;
}
.map-stage.owner .pin:hover .del { display:block; }
@keyframes pindrop { from { transform:translateY(-14px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.map-status { margin-top:10px; font-size:18px; color:var(--green); min-height:1.3em; }

/* ---- forms / modal ---- */
.modal-bg { position:fixed; inset:0; z-index:200; background:rgba(5,8,16,0.82); display:none; align-items:center; justify-content:center; padding:18px; }
.modal-bg.show { display:flex; }
.modal { width:100%; max-width:560px; }
label.fld { display:block; margin:12px 0 4px; font-family:'Press Start 2P'; font-size:9px; color:var(--dim); letter-spacing:1px; }
input.in, textarea.in {
  width:100%; font-family:'VT323',monospace; font-size:20px; color:var(--ink);
  background:#0a0e18; border:2px solid var(--border); padding:10px 12px; outline:none;
}
input.in:focus, textarea.in:focus { border-color:var(--cyan); }
textarea.in { resize:vertical; min-height:160px; }
.row { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.msg { font-size:18px; margin-top:10px; min-height:1.2em; }
.msg.err { color:var(--red); } .msg.ok { color:var(--green); }

/* ---- photo vault ---- */
.vault-note { display:block; font-size:14px; margin-top:6px; }
#vault-add { margin-top:8px; }
.gallery { columns:3 180px; column-gap:12px; margin-top:16px; }
.gallery img { width:100%; display:block; image-rendering:auto; }
.vphoto { break-inside:avoid; margin-bottom:12px; border:2px solid var(--border); background:var(--bg-panel2); position:relative; }
.vphoto.priv { border-color:var(--yellow); }
.vphoto figcaption { font-size:15px; color:var(--ink); padding:6px 8px; }
.vphoto .vtools { display:flex; gap:6px; padding:0 8px 8px; flex-wrap:wrap; }
.vphoto.priv::after { content:"🔒"; position:absolute; top:6px; right:8px; font-size:16px; filter:drop-shadow(0 1px 0 #000); }
.locked { text-align:center; padding:34px 16px; border:2px dashed var(--border); color:var(--dim); font-size:22px; }
.locked .lock { font-size:40px; display:block; margin-bottom:10px; }

/* checkbox row */
label.chk { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:16px; color:var(--ink); cursor:pointer; }
label.chk input { width:18px; height:18px; accent-color:var(--green); cursor:pointer; }

footer { text-align:center; padding:50px 18px 70px; color:var(--dim); font-size:18px; }
footer .heart { color:var(--pink); }

.hidden { display:none !important; }

@media (max-width:560px){
  body{font-size:18px;}
  .topbar .brand{font-size:9px;}
  .topbar nav a{font-size:16px;}
}