@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --bg:#0a0a0a;
  --fg:#33ff33;
  --fg-dim:#1a8a1a;
  --fg-bright:#88ff88;
  --amber:#ffb833;
  --amber-dim:#996e1f;
  --red:#ff3333;
  --red-dim:#992020;
  --cyan:#33cccc;
  --border:#1a3a1a;
  --panel:#0d120d;
  --panel-hover:#112211;
  --selection:rgba(51,255,51,0.15);
  --scrollbar:#1a3a1a;
  --font:'Share Tech Mono','Courier New',monospace;
}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:13px;
  line-height:1.6;
  overflow:hidden;
  cursor:default;
}

::selection{background:var(--selection);color:var(--fg-bright);}

::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--fg-dim);}

/* CRT overlay */
.crt-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:9999;
}
.crt-overlay::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.15) 2px,
    rgba(0,0,0,0.15) 4px
  );
}
.crt-overlay::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,0.4) 100%);
}

/* Flicker */
@keyframes flicker{
  0%{opacity:0.97;}
  5%{opacity:0.95;}
  10%{opacity:0.98;}
  15%{opacity:0.96;}
  20%{opacity:0.99;}
  100%{opacity:0.97;}
}
.terminal-wrapper{
  height:100vh;display:flex;flex-direction:column;
  animation:flicker 8s infinite;
}

/* Header bar */
.header-bar{
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:6px 16px;
  display:flex;justify-content:space-between;align-items:center;
  flex-shrink:0;
}
.header-title{
  font-size:11px;letter-spacing:2px;color:var(--fg-dim);
  text-transform:uppercase;
}
.header-status{
  font-size:11px;color:var(--fg-dim);
  display:flex;gap:20px;
}
.header-status .status-item{display:flex;align-items:center;gap:6px;}
.status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--fg);
  animation:pulse-dot 2s infinite;
}
.status-dot.warning{background:var(--amber);animation:pulse-dot-warn 1s infinite;}
.status-dot.danger{background:var(--red);animation:pulse-dot-danger 0.5s infinite;}

@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:0.4;}}
@keyframes pulse-dot-warn{0%,100%{opacity:1;}50%{opacity:0.3;}}
@keyframes pulse-dot-danger{0%,100%{opacity:1;}50%{opacity:0.2;}}

/* Main area */
.main-area{
  flex:1;display:flex;overflow:hidden;
}

/* Sidebar / file tree */
.sidebar{
  width:260px;min-width:200px;max-width:320px;
  background:var(--panel);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  flex-shrink:0;
}
.sidebar-header{
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  font-size:11px;letter-spacing:1px;
  color:var(--fg-dim);text-transform:uppercase;
}
.file-tree{
  flex:1;overflow-y:auto;padding:4px 0;
}
.tree-folder{
  user-select:none;
}
.tree-folder-label{
  padding:3px 12px;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  color:var(--fg-dim);font-size:12px;
  transition:background 0.15s;
}
.tree-folder-label:hover{background:var(--panel-hover);color:var(--fg);}
.tree-folder-label .folder-icon{color:var(--amber-dim);font-size:10px;}
.tree-folder-label.open .folder-icon{transform:rotate(90deg);}
.tree-folder-children{
  display:none;padding-left:16px;
}
.tree-folder.open>.tree-folder-children{display:block;}

.tree-file{
  padding:3px 12px 3px 28px;cursor:pointer;
  font-size:12px;color:var(--fg-dim);
  transition:background 0.15s, color 0.15s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tree-file:hover{background:var(--panel-hover);color:var(--fg);}
.tree-file.active{background:var(--selection);color:var(--fg-bright);}
.tree-file::before{
  content:'> ';color:var(--fg-dim);font-size:10px;
}

.tree-locked{
  padding:8px 12px;
  border-top:1px solid var(--border);
  margin-top:4px;
}
.tree-locked-label{
  font-size:11px;color:var(--red-dim);
  display:flex;align-items:center;gap:6px;
  cursor:not-allowed;
}
.tree-locked-label .lock-icon{font-size:10px;}
.tree-locked-sublabel{
  font-size:10px;color:#444;padding-left:18px;
  margin-top:2px;
}

/* Content viewer */
.content-area{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
}
.content-path{
  padding:6px 16px;
  border-bottom:1px solid var(--border);
  font-size:11px;color:var(--fg-dim);
  flex-shrink:0;
  background:var(--panel);
}
.content-path span{color:var(--fg);}

.content-viewer{
  flex:1;overflow-y:auto;padding:16px 24px;
  line-height:1.7;
}

/* Content styling */
.doc-title{
  color:var(--fg-bright);font-size:15px;
  margin-bottom:12px;
  border-bottom:1px solid var(--border);
  padding-bottom:6px;
}
.doc-meta{
  color:var(--fg-dim);font-size:11px;
  margin-bottom:16px;
}
.doc-section{margin-bottom:16px;}
.doc-section h3{
  color:var(--amber);font-size:12px;
  margin-bottom:6px;letter-spacing:1px;
  text-transform:uppercase;
}
.doc-divider{
  border:none;border-top:1px dashed var(--border);
  margin:16px 0;
}

/* Tables */
.sys-table{
  border-collapse:collapse;
  width:100%;margin:8px 0;
  font-size:12px;
}
.sys-table th{
  text-align:left;
  padding:4px 10px;
  color:var(--amber);
  border-bottom:1px solid var(--border);
  font-weight:normal;
  font-size:11px;letter-spacing:1px;
}
.sys-table td{
  padding:4px 10px;
  border-bottom:1px solid rgba(26,58,26,0.4);
  color:var(--fg);
}
.sys-table tr:hover td{background:rgba(51,255,51,0.03);}

/* Log entries */
.log-entry{
  font-size:12px;padding:2px 0;
  display:flex;gap:12px;
}
.log-ts{color:var(--fg-dim);min-width:140px;flex-shrink:0;}
.log-level{min-width:60px;flex-shrink:0;text-align:center;}
.log-level.info{color:var(--fg-dim);}
.log-level.warn{color:var(--amber);}
.log-level.error{color:var(--red);}
.log-level.critical{color:var(--red);font-weight:bold;text-decoration:underline;}
.log-msg{color:var(--fg);}

/* Redacted text */
.redacted{
  background:var(--fg);color:var(--fg);
  padding:0 2px;cursor:default;
  user-select:none;
}
.redacted:hover{background:var(--fg);color:var(--fg);}

/* Highlight/anomaly text */
.anomaly{color:var(--amber);font-weight:bold;}
.danger-text{color:var(--red);}
.dim{color:var(--fg-dim);}
.bright{color:var(--fg-bright);}
.cyan-text{color:var(--cyan);}

/* あかね trace - special styling */
.akane-trace{
  color:#ff8899;
  font-style:italic;
  opacity:0.7;
  animation:trace-flicker 4s infinite;
}
@keyframes trace-flicker{
  0%,90%,100%{opacity:0.7;}
  92%{opacity:0.3;}
  94%{opacity:0.8;}
  96%{opacity:0.2;}
  98%{opacity:0.9;}
}

/* Access code input */
.access-panel{
  background:rgba(26,58,26,0.2);
  border:1px solid var(--border);
  padding:16px;
  margin:12px 0;
  max-width:400px;
}
.access-panel label{
  display:block;
  font-size:11px;color:var(--amber);
  margin-bottom:8px;letter-spacing:1px;
}
.access-input{
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--fg);
  font-family:var(--font);
  font-size:14px;
  padding:6px 10px;
  width:200px;
  letter-spacing:3px;
  outline:none;
}
.access-input:focus{border-color:var(--fg-dim);}
.access-btn{
  background:transparent;
  border:1px solid var(--fg-dim);
  color:var(--fg);
  font-family:var(--font);
  font-size:12px;
  padding:6px 16px;
  margin-left:8px;
  cursor:pointer;
  transition:all 0.2s;
}
.access-btn:hover{background:var(--fg-dim);color:var(--bg);}
.access-error{
  color:var(--red);font-size:11px;
  margin-top:8px;display:none;
}
.access-success{
  color:var(--fg-bright);font-size:11px;
  margin-top:8px;display:none;
}

/* Command line (bottom) */
.command-bar{
  background:var(--panel);
  border-top:1px solid var(--fg-dim);
  padding:8px 16px;
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
  animation:cmd-pulse 3s ease-in-out infinite;
}
@keyframes cmd-pulse{
  0%,100%{border-top-color:var(--fg-dim);box-shadow:none;}
  50%{border-top-color:var(--fg);box-shadow:0 -2px 12px rgba(51,255,51,0.08);}
}
.command-prompt{color:var(--fg);font-size:12px;flex-shrink:0;}
.command-input{
  flex:1;background:transparent;border:none;
  color:var(--fg);font-family:var(--font);font-size:13px;
  outline:none;
  caret-color:var(--fg);
}
.command-input::placeholder{color:#2a6a2a;}

/* Status bar */
.status-bar{
  background:var(--panel);
  border-top:1px solid var(--border);
  padding:4px 16px;
  display:flex;justify-content:space-between;
  font-size:10px;color:var(--fg-dim);
  flex-shrink:0;
}

/* Welcome screen */
.welcome-screen{
  padding:40px 24px;
  max-width:700px;
}
.welcome-ascii{
  color:var(--fg-dim);font-size:11px;line-height:1.3;
  white-space:pre;margin-bottom:20px;
}
.welcome-info{margin-top:16px;}
.welcome-info p{margin-bottom:6px;font-size:12px;}

/* Level transition effect */
@keyframes level-unlock{
  0%{opacity:0;transform:translateY(4px);}
  100%{opacity:1;transform:translateY(0);}
}
.level-unlocking .tree-folder{
  animation:level-unlock 0.3s ease forwards;
}

/* Glitch effects for Night5 transition — 3 progressive stages */

/* Stage 1: subtle instability */
@keyframes sys-glitch-1{
  0%,85%{transform:translate(0);filter:none;}
  86%{transform:translate(-2px,0);filter:brightness(1.1);}
  88%{transform:translate(1px,1px);filter:none;}
  90%{transform:translate(0,-1px);}
  100%{transform:translate(0);filter:none;}
}
.sys-glitch-1{animation:sys-glitch-1 3s infinite;}

/* Stage 2: heavy distortion */
@keyframes sys-glitch-2{
  0%{transform:translate(0);filter:none;}
  15%{transform:translate(-4px,2px);filter:hue-rotate(30deg);}
  17%{transform:translate(3px,-2px);filter:brightness(1.4);}
  20%{transform:translate(0);filter:none;}
  50%{transform:skewX(-1deg);}
  52%{transform:skewX(2deg);filter:saturate(2);}
  55%{transform:skewX(0);filter:none;}
  80%{transform:translate(-2px,1px);}
  82%{transform:translate(5px,-3px);filter:hue-rotate(180deg) brightness(0.7);}
  85%{transform:translate(0);filter:none;}
  100%{transform:translate(0);}
}
.sys-glitch-2{animation:sys-glitch-2 0.8s infinite;}

/* Stage 3: terminal dying */
@keyframes sys-glitch-3{
  0%{transform:translate(0) skewX(0);filter:none;opacity:1;}
  5%{transform:translate(-8px,4px) skewX(5deg);filter:hue-rotate(90deg) brightness(2);opacity:0.8;}
  8%{transform:translate(6px,-3px) skewX(-3deg);filter:invert(1);opacity:0.6;}
  12%{transform:translate(0) skewX(0);filter:none;opacity:1;}
  30%{opacity:1;}
  32%{opacity:0.1;}
  34%{opacity:1;}
  60%{transform:translate(0);filter:none;}
  62%{transform:translate(-3px,0) skewX(8deg);filter:hue-rotate(180deg) saturate(3);}
  65%{transform:translate(4px,2px) skewX(-5deg);filter:brightness(0.3);}
  68%{transform:translate(0) skewX(0);filter:none;}
  90%{opacity:1;}
  92%{opacity:0.3;filter:blur(2px);}
  95%{opacity:0.8;filter:none;}
  100%{opacity:1;transform:translate(0);filter:none;}
}
.sys-glitch-3{animation:sys-glitch-3 0.5s infinite;}

/* Scanline anomaly during collapse */
@keyframes scanline-tear{
  0%{background-position:0 0;}
  100%{background-position:0 100vh;}
}
.scanline-tear::before{
  content:'';position:fixed;inset:0;z-index:99990;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent 0px,
    rgba(255,0,0,0.03) 2px,
    transparent 4px,
    transparent 6px,
    rgba(255,0,0,0.06) 8px,
    transparent 10px
  );
  animation:scanline-tear 2s linear infinite;
}

/* Lockdown folder death */
@keyframes folder-die{
  0%{opacity:1;transform:translateX(0);}
  30%{opacity:0.6;transform:translateX(-3px);}
  60%{opacity:0.3;transform:translateX(2px);color:var(--red-dim);}
  100%{opacity:0.15;transform:translateX(0);}
}
.folder-dying{animation:folder-die 0.8s forwards;pointer-events:none;}

/* Content area corruption */
@keyframes content-corrupt{
  0%{opacity:1;filter:none;}
  100%{opacity:0.05;filter:blur(3px) hue-rotate(90deg);}
}
.content-dying{animation:content-corrupt 3s forwards;}

/* Blackout overlay */
.blackout-overlay{
  position:fixed;inset:0;z-index:99998;
  background:#000;opacity:0;
  transition:opacity 1.5s;
  pointer-events:none;
}
.blackout-overlay.active{opacity:1;pointer-events:all;}

/* Forced terminal window (黒幕 message) */
.kuromaku-terminal{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:600px;max-width:90vw;
  max-height:80vh;overflow-y:auto;
  background:#050000;
  border:1px solid var(--red-dim);
  padding:30px 36px;
  z-index:99997;
  font-size:14px;
  line-height:2.0;
  box-shadow:0 0 60px rgba(255,0,0,0.2),0 0 120px rgba(255,0,0,0.05);
  display:none;
}
.kuromaku-terminal.active{display:block;animation:kuromaku-appear 0.5s ease-out;}
@keyframes kuromaku-appear{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0.95);filter:brightness(3);}
  50%{opacity:1;filter:brightness(1.5);}
  100%{transform:translate(-50%,-50%) scale(1);filter:none;}
}
.kuromaku-line{
  color:var(--red);
  opacity:0;
  transition:opacity 1.0s;
  min-height:1.2em;
}
.kuromaku-line.visible{opacity:1;}
.kuromaku-line.bright{color:#ff6666;font-size:16px;font-weight:bold;}
.kuromaku-line.dim{color:#661111;font-size:12px;}
.kuromaku-line.pause{min-height:2em;}
.kuromaku-cursor{
  display:inline-block;
  width:8px;height:14px;
  background:var(--red);
  animation:blink-cursor 1s step-end infinite;
  vertical-align:text-bottom;
}
@keyframes blink-cursor{0%,100%{opacity:1;}50%{opacity:0;}}

/* Responsive */
@media(max-width:768px){
  .sidebar{width:200px;min-width:160px;}
  .content-viewer{padding:12px 16px;}
  .kuromaku-terminal{width:90vw;padding:16px;}
}
@media(max-width:500px){
  .sidebar{width:160px;min-width:120px;font-size:11px;}
  .tree-file{padding-left:20px;}
}

/* Progress bar */
.progress-bar{
  width:200px;height:8px;
  background:var(--bg);
  border:1px solid var(--border);
  margin:4px 0;
  display:inline-block;
  vertical-align:middle;
}
.progress-fill{
  height:100%;
  background:var(--fg);
  transition:width 0.5s;
}
.progress-fill.danger{background:var(--red);}
.progress-fill.amber{background:var(--amber);}

/* Data bars (text-art style) */
.data-bar{color:var(--fg);white-space:pre;font-size:11px;}