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

/* ═══ DESIGNER PALETTE (extracted from spec) ═══
   bg_main:        #0d0a1b   (deep navy/black)
   titlebar_blue:  #1662bf   (XP blue gradient top)
   titlebar_dark:  #135ba6   (gradient bottom)
   menubar_gray:   #d9d9d9   (gray menu bar — desktop mode)
   teal_primary:   #58dbff   (bright cyan ASCII / brand)
   teal_box:       #58dbff   (dashed box border + commands border)
   gm_white:       #ffffff   (gm anon. text)
   subtle:         #6a6e7a   (sub text — "you found...")
   warn_yellow:    #f5c344   (do you accept?)
   err_red:        #ff3d3d   (full red mode)
   purple_tb:      #6c3590   (desktop window titlebar)
   purple_dark:    #3d1a5c   (darker purple gradient)
   taskbar:        #0d0a1b
   start_btn:      #171d35
*/

*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  width:100%;height:100%;overflow:hidden;
  font-family:'Share Tech Mono',monospace;
  background:#0d0a1b;color:#fff;
}

/* ═══════════════════════════════════════════════════
   FULLSCREEN TERMINAL (default)
═══════════════════════════════════════════════════ */
#terminal-win{
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  background:#0d0a1b;
  display:flex;flex-direction:column;
  z-index:300;
  font-family:'Share Tech Mono',monospace;
  transition:top 0.22s ease,left 0.22s ease,width 0.22s ease,height 0.22s ease;
}

/* When in desktop mode (windowed) */
#terminal-win.windowed{
  top:30px;left:200px;
  width:1100px;height:680px;
  border:1px solid #2a2a4a;
  box-shadow:6px 6px 0 rgba(0,0,0,0.5);
}
#terminal-win.windowed .t-titlebar{
  background:linear-gradient(180deg,#6c3590 0%,#3d1a5c 100%);
}
#terminal-win.windowed .t-menubar{
  background:#d9d9d9;
  border-bottom:1px solid #999;
}
#terminal-win.windowed .t-menu-item{color:#000;}
#terminal-win.windowed .t-menu-item:hover{background:#1662bf;color:#fff;}
#terminal-win.minimized{display:none;}

/* TITLE BAR — XP blue */
.t-titlebar{
  background:linear-gradient(180deg,#1662bf 0%,#135ba6 100%);
  padding:5px 8px;
  display:flex;align-items:center;gap:8px;
  user-select:none;flex-shrink:0;
  cursor:default;
}
#terminal-win.windowed .t-titlebar{cursor:move;}
.t-tb-icon-img{
  width:18px;height:18px;
  background:#0d0a1b;
  border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  color:#58dbff;font-size:11px;
}
.t-tb-title{flex:1;color:#fff;font-size:13px;letter-spacing:0.5px;}
.t-tb-btns{display:flex;gap:3px;}
.t-tb-btn{
  width:22px;height:18px;
  border:1px solid #ffffff44;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-weight:700;font-size:11px;
  background:linear-gradient(180deg,#3a82de,#1662bf);
  color:#fff;
}
.t-tb-btn.cls{background:linear-gradient(180deg,#e74848,#c93030);}

/* MENU BAR — desktop mode = gray, fullscreen mode = dark */
.t-menubar{
  background:#0d0a1b;
  padding:4px 8px;
  display:flex;gap:0;flex-shrink:0;
  position:relative;z-index:10;
  border-bottom:1px solid transparent;
}
.t-menu-item{
  padding:3px 10px;font-size:13px;
  color:#fff;cursor:pointer;
  border:1px solid transparent;
  position:relative;
}
.t-menu-item:hover{background:#1662bf;color:#fff;}
.t-menu-item.open{background:#1662bf;color:#fff;}
.t-dropdown{
  position:absolute;top:100%;left:0;
  background:#171d35;border:1px solid #2a3a5a;
  min-width:220px;display:none;z-index:20;
  box-shadow:3px 3px 0 rgba(0,0,0,0.5);
}
.t-menu-item.open .t-dropdown{display:block;}
.t-dd-item{
  padding:6px 14px;font-size:12px;color:#c8d8f0;cursor:pointer;
}
.t-dd-item:hover{background:#1662bf;color:#fff;}
.t-dd-sep{border-top:1px solid #2a3a5a;margin:2px 0;}

/* MAIN CONTENT — header layout matching design */
#t-main{
  flex:1;
  padding:32px 60px 0 0;
  display:flex;flex-direction:column;
  overflow-x:hidden;overflow-y:hidden;
  position:relative;
}

/* Top section: ASCII left, info right */
#t-top-section{
  display:flex;
  gap:40px;
  align-items:flex-start;
  margin-bottom:30px;
  flex-shrink:0;
}

#t-agent-ascii{
  flex:0 0 480px;
  max-width:480px;
  overflow:visible;
  font-size:5.5px;
  line-height:1.18;
  color:#58dbff;
  white-space:pre;
  letter-spacing:0.04px;
  font-family:'Share Tech Mono',monospace;
  transition:color 0.4s;
  user-select:none;
}

/* ── TRANSITION KEYFRAMES ── */
@keyframes agentGlitch{
  0%  { transform:translate(0,0)   skewX(0deg);   opacity:1;   filter:none; }
  15% { transform:translate(-3px,1px) skewX(-4deg); opacity:0.7; filter:brightness(2) hue-rotate(40deg); }
  30% { transform:translate(3px,-1px) skewX(3deg);  opacity:0.5; filter:brightness(0.3); }
  50% { transform:translate(-2px,2px) skewX(-2deg); opacity:0.8; filter:brightness(3) saturate(2); }
  70% { transform:translate(2px,0px)  skewX(1deg);  opacity:0.6; filter:brightness(0.5) hue-rotate(-30deg); }
  85% { transform:translate(-1px,1px) skewX(-1deg); opacity:0.9; filter:none; }
  100%{ transform:translate(0,0)   skewX(0deg);   opacity:1;   filter:none; }
}
@keyframes agentSlam{
  0%  { transform:scale(1.08) translateY(-4px); opacity:0.6; filter:brightness(2); }
  40% { transform:scale(0.97) translateY(1px);  opacity:1;   filter:none; }
  70% { transform:scale(1.01) translateY(0);    opacity:1; }
  100%{ transform:scale(1)    translateY(0);    opacity:1; }
}
@keyframes agentFadeUp{
  0%  { transform:translateY(6px); opacity:0; filter:blur(0.5px); }
  100%{ transform:translateY(0);   opacity:1; filter:none; }
}
@keyframes agentStatic{
  0%,100%{ filter:none; opacity:1; }
  20%    { filter:brightness(3) contrast(2); opacity:0.8; }
  40%    { filter:invert(1) brightness(0.5); opacity:0.6; }
  60%    { filter:brightness(4) saturate(0); opacity:0.9; }
  80%    { filter:brightness(0.2); opacity:0.4; }
}
@keyframes agentShake{
  0%,100%{ transform:translate(0,0); }
  20%    { transform:translate(-4px, 1px); }
  40%    { transform:translate(4px,-2px); }
  60%    { transform:translate(-2px, 2px); }
  80%    { transform:translate(3px,-1px); }
}
@keyframes agentPulse{
  0%  { transform:scale(0.94); opacity:0.5; filter:brightness(0.5); }
  50% { transform:scale(1.03); opacity:1;   filter:brightness(1.4); }
  100%{ transform:scale(1);    opacity:1;   filter:none; }
}

.agent-transition-glitch { animation: agentGlitch 0.22s steps(1,end) forwards; }
.agent-transition-slam   { animation: agentSlam   0.28s cubic-bezier(.2,1.6,.4,1) forwards; }
.agent-transition-fadeup { animation: agentFadeUp 0.30s ease-out forwards; }
.agent-transition-static { animation: agentStatic 0.18s steps(1,end) forwards; }
.agent-transition-shake  { animation: agentShake  0.20s ease-in-out forwards; }
.agent-transition-pulse  { animation: agentPulse  0.25s ease-out forwards; }

/* Quest art is larger canvas — scale down to match other arts */
#t-agent-ascii.quest-art{
  font-size:3.8px;
  line-height:1.1;
}

#t-agent-ascii.red{color:#ff3d3d!important;text-shadow:0 0 4px rgba(255,0,0,0.5);}
#t-agent-ascii.purple{color:#a78bfa!important;}

#t-info{
  display:flex;flex-direction:column;
  gap:10px;
  margin-top:10px;
  flex:1;
  min-width:280px;
}
.t-info-line{
  font-size:14px;color:#fff;
  letter-spacing:0.3px;
  font-family:'Share Tech Mono',monospace;
}
.t-info-line.subtle{color:#6a6e7a;}

/* Dashed box for "IDOL64 TERMINAL" */
.t-dash-box{
  display:table;
  width:auto;
  align-self:flex-start;
  border:none;
  position:relative;
  padding:6px 12px;
  font-size:13px;
  color:#58dbff;
  letter-spacing:2.5px;
  margin:6px 0;
  font-weight:400;
  white-space:nowrap;
}
.t-dash-box::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(90deg,#58dbff 50%, transparent 50%),
    linear-gradient(90deg,#58dbff 50%, transparent 50%),
    linear-gradient(0deg,#58dbff 50%, transparent 50%),
    linear-gradient(0deg,#58dbff 50%, transparent 50%);
  background-position:left top, left bottom, left top, right top;
  background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
  background-size:14px 1px, 14px 1px, 1px 14px, 1px 14px;
  pointer-events:none;
}
.t-dash-box.err{color:#ff3d3d;}
.t-dash-box.err::before{
  background-image:
    linear-gradient(90deg,#ff3d3d 50%, transparent 50%),
    linear-gradient(90deg,#ff3d3d 50%, transparent 50%),
    linear-gradient(0deg,#ff3d3d 50%, transparent 50%),
    linear-gradient(0deg,#ff3d3d 50%, transparent 50%);
}
.t-dash-box.warn{color:#58dbff;}

/* COMMANDS section */
#t-commands-section{flex-shrink:0;margin-bottom:20px;}
.t-section-divider{
  font-size:13px;
  color:#fff;
  letter-spacing:1px;
  margin-bottom:12px;
  font-family:'Share Tech Mono',monospace;
}

/* Commands grid box */
.t-cmd-box{
  border:1.5px solid #58dbff;
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:900px;
}
.t-cmd-cell{
  padding:12px 24px;
  display:flex;align-items:center;
  gap:30px;
  border-right:1px solid #58dbff;
  font-size:13px;
}
.t-cmd-cell:nth-child(2n){border-right:none;}
.t-cmd-cell:nth-child(-n+2){border-bottom:1px solid #58dbff;}
.t-cmd-name{color:#58dbff;width:130px;flex-shrink:0;}
.t-cmd-desc{color:#fff;}

/* SCREEN — output area */
#t-screen{
  flex:1;
  overflow-y:auto;
  margin-bottom:10px;
  scroll-behavior:smooth;
}
/* scrollbar: herdada do XP.css (visual Luna clássico) */

.t-line{
  font-size:13px;line-height:1.85;
  color:#fff;
  font-family:'Share Tech Mono',monospace;
  white-space:pre-wrap;word-break:break-all;
}
.t-line.dim{color:#6a6e7a;}
.t-line.ok{color:#58dbff;}
.t-line.warn{color:#f5c344;}
.t-line.err{color:#ff3d3d;}
.t-line.cmd{color:#58dbff;}
.t-line a{color:#58dbff;text-decoration:underline;cursor:pointer;}
.t-line.err a{color:#ff3d3d;}

/* YN buttons inline */
.t-yn-row{display:inline-flex;gap:14px;font-size:13px;color:#fff;font-family:'Share Tech Mono',monospace;}
.t-yn-btn{
  background:transparent;border:none;
  color:#fff;font-family:inherit;font-size:13px;
  cursor:pointer;padding:0;
}
.t-yn-btn:hover{color:#58dbff;}
.t-yn-btn.no:hover{color:#ff3d3d;}

/* Input bar — bottom */
#t-input-bar{
  border-top:1px solid #2a3a4a;
  padding:14px 60px;
  display:flex;align-items:center;
  flex-shrink:0;
  background:transparent;
  position:relative;
}
.t-prompt{
  color:#fff;font-size:13px;
  margin-right:10px;
  font-family:'Share Tech Mono',monospace;
  user-select:none;
}
#t-cmd-in{
  flex:1;background:transparent;border:none;outline:none;
  color:#fff;font-family:'Share Tech Mono',monospace;
  font-size:13px;caret-color:#58dbff;
  caret-shape:block;
}
#t-cmd-in::placeholder{color:#6a6e7a;}

/* STATUSBAR */
#t-statusbar{
  background:#d9d9d9;
  color:#000;
  padding:3px 14px;
  display:flex;gap:30px;
  font-size:12px;
  flex-shrink:0;
  font-family:'Share Tech Mono',monospace;
}

/* RED MODE — full red error */
#terminal-win.red-mode{
  background:#0a0000;
}
#terminal-win.red-mode .t-titlebar{
  background:linear-gradient(180deg,#8b1a1a,#5a0d0d);
}
#terminal-win.red-mode #t-agent-ascii{color:#ff3d3d!important;}
#terminal-win.red-mode .t-info-line{color:#fff;}
#terminal-win.red-mode .t-info-line.subtle{color:#6a4a4a;}