/* ════════════════════════════════════════════════════════════════
   XP-LUNA.CSS — re-skin completo estilo Windows XP clássico (Luna)
   Framework base: XP.css (css/vendor/xp.css) — botões, inputs,
   scrollbars e fontes. Esta camada mapeia as classes existentes do
   site (popup-win, taskbar, start-menu, terminal…) para o visual
   Luna, inspirado no KinitoPET. Carrega por último e vence tudo.
   Paleta Luna:
     titlebar: #0997ff → #003dd7    borda janela: #0831d9
     face:     #ECE9D8              seleção:      #316ac5
     taskbar:  #245edb / #1941a5    start verde:  #3c9838
════════════════════════════════════════════════════════════════ */

:root{
  --xp-titlebar: linear-gradient(180deg,#0997ff 0%,#0053ee 8%,#0050ee 40%,#0066ff 88%,#0066ff 93%,#005bff 95%,#003dd7 96%,#003dd7 100%);
  --xp-border: #0831d9;
  --xp-face: #ECE9D8;
  --xp-sel: #316ac5;
  --xp-font: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  --xp-btn-face: linear-gradient(180deg,#ffffff 0%,#ecebe5 86%,#d8d0c4 100%);
  --xp-btn-border: #003c74;
}

/* ── Neutralizações do XP.css global que não queremos ── */
pre{background:transparent;color:inherit;padding:0;margin:0;border-radius:0;}
.t-yn-btn{min-width:0!important;min-height:0!important;box-shadow:none!important;border:none!important;border-radius:0!important;background:transparent!important;}
.ch{min-width:0!important;min-height:0!important;}

/* ════════════════════════════════════════
   DESKTOP — céu + colinas (Bliss em CSS)
════════════════════════════════════════ */
/* Wallpaper animado original (vídeo + GIFs por horário via JS) mantido.
   O gradiente "Bliss" abaixo é só fallback enquanto o vídeo carrega. */
#desktop{
  background:
    radial-gradient(130% 62% at 72% 108%, #2f8f1f 0%, #46ab2b 28%, rgba(70,171,43,0) 66%),
    radial-gradient(150% 55% at 18% 114%, #256e14 0%, #4fb32e 42%, rgba(79,179,46,0) 72%),
    radial-gradient(120% 40% at 45% 118%, #63c73d 0%, rgba(99,199,61,0) 60%),
    linear-gradient(180deg,#2a63c9 0%, #3f83dd 28%, #7ab3ec 58%, #b9d9f4 78%, #d3e9f9 100%);
}
#desktop::before,#desktop::after{display:none;}  /* sem grid nem scanlines por cima */

/* Ícones de desktop — seleção/hover Luna */
.desk-icon{transition:none;}
.desk-icon:hover{transform:none;}
.desk-icon:hover .desk-icon-img{
  filter:drop-shadow(0 2px 0 rgba(0,0,0,0.35)) brightness(1.1);
}
.desk-icon:hover .desk-icon-label{
  color:#fff;text-shadow:1px 1px 2px #000;
}
.desk-icon.selected{
  background:rgba(49,106,197,0.45);
  border:1px dotted rgba(255,255,255,0.7);
  box-shadow:none;
}
.desk-icon-label{
  font-family:var(--xp-font);
  font-size:11px;
  text-shadow:1px 1px 2px rgba(0,0,0,0.9);
}

/* ════════════════════════════════════════
   TASKBAR — azul Luna + start verde
════════════════════════════════════════ */
#taskbar{
  height:30px;
  background:linear-gradient(180deg,
    #3168d5 0%, #4993e6 3%, #2661de 6%, #2563e2 10%,
    #245edb 50%, #2054cd 85%, #1941a5 100%);
  border-top:1px solid #0831d9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);
  font-family:var(--xp-font);
}
#start-btn{
  background:linear-gradient(180deg,
    #7ede77 0%, #3c9838 8%, #37932f 40%,
    #2f8b2c 60%, #237721 88%, #1c5f1a 100%);
  border:none;border-right:none;
  border-radius:0 12px 12px 0;
  color:#fff;
  font-family:'Franklin Gothic Medium',Tahoma,sans-serif;
  font-size:16px;font-style:italic;font-weight:bold;
  text-shadow:1px 1px 2px rgba(0,0,0,0.55);
  padding:0 26px 0 10px;height:30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),
             2px 0 4px rgba(0,0,0,0.3);
}
#start-btn:hover{
  background:linear-gradient(180deg,
    #90e889 0%, #4cae48 8%, #45a83d 40%,
    #3d9c3a 60%, #2f882d 88%, #256b23 100%);
}
#start-btn:active{box-shadow:inset 0 2px 5px rgba(0,0,0,0.4);}
.start-flag{
  filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
  animation:none;
}
#start-btn:hover .start-flag{animation:none;transform:none;}

.tb-item{
  background:linear-gradient(180deg,#4e91e8 0%,#3576e0 10%,#2a67d8 55%,#2258c8 100%);
  border:1px solid #1941a5;
  border-top-color:#6ba4ee;border-left-color:#6ba4ee;
  border-radius:3px;
  color:#fff;font-family:var(--xp-font);
  text-shadow:1px 1px 1px rgba(0,0,0,0.35);
  height:24px;
}
.tb-item:hover{
  background:linear-gradient(180deg,#5f9ff0 0%,#4485e8 10%,#3876e0 55%,#2f66d0 100%);
}
.tb-item.active{
  background:linear-gradient(180deg,#1740a0 0%,#1c4bb0 10%,#2258c8 60%,#2a67d8 100%);
  box-shadow:inset 1px 1px 3px rgba(0,0,0,0.45);
  border-color:#12327e;
}
#tb-tray{
  background:linear-gradient(180deg,
    #1290e9 0%, #0b74d2 4%, #0763c8 10%,
    #0855b3 90%, #073e8c 100%);
  border-left:1px solid #0831d9;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,0.3);
  height:30px;
  font-family:var(--xp-font);
}

/* ════════════════════════════════════════
   START MENU — Luna azul de verdade
════════════════════════════════════════ */
#start-menu{
  border:1px solid #0831d9;
  border-radius:6px 6px 0 0;
  box-shadow:2px -2px 12px rgba(0,0,0,0.5);
}
#sm-header{
  background:linear-gradient(180deg,#3a81e8 0%,#1c64d0 12%,#1861cd 88%,#2a74e0 100%);
  border-bottom:2px solid #d68a37;   /* linha laranja icônica do Luna */
  padding:9px 12px 8px;
}
#sm-avatar{
  border:2px solid rgba(255,255,255,0.75);
  border-radius:4px;
  background:#1c64d0;
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
}
#sm-footer{
  background:linear-gradient(180deg,#4993e6 0%,#1c64d0 12%,#1552b8 88%,#123f96 100%);
  border-top:1px solid #95bdee;
}
.sm-foot-btn{
  min-width:0;min-height:0;
  background:transparent;border:none;border-radius:3px;
  box-shadow:none;color:#fff;
  font-family:var(--xp-font);font-size:11px;
  padding:3px 10px;
}
.sm-foot-btn:hover{background:rgba(255,255,255,0.18);box-shadow:none;}
.sm-foot-btn:active{box-shadow:inset 0 1px 3px rgba(0,0,0,0.4);}
#sm-right{background:#d3e5fa;border-left:1px solid #95bdee;}
.sm-sep-line{background:#95bdee;}
#sm-all-btn{background:#fff;border-top:1px solid #c9d5e5;}
#sm-all-btn:hover{background:var(--xp-sel);color:#fff;}
#sm-allprog-fly{background:#fff;border:1px solid #aca899;box-shadow:3px 3px 6px rgba(0,0,0,0.3);}

/* ════════════════════════════════════════
   JANELAS POPUP — chrome Luna
════════════════════════════════════════ */
.popup-win{
  background:var(--xp-face);
  border:3px solid var(--xp-border);
  border-top:none;
  border-radius:8px 8px 0 0;
  box-shadow:4px 4px 14px rgba(0,0,0,0.45);
  font-family:var(--xp-font);
  overflow:hidden;
}
.popup-tb{
  background:var(--xp-titlebar);
  padding:4px 4px 4px 8px;
  border-radius:5px 5px 0 0;
  min-height:26px;
}
.popup-tb-title{
  font-family:'Trebuchet MS',var(--xp-font);
  font-weight:700;font-size:13px;
  color:#fff;
  text-shadow:1px 1px 1px rgba(10,36,106,0.7);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Botões da titlebar (X + o min injetado pelo window-manager) */
.popup-tb-x,.popup-tb-min,.t-tb-btn,.xp-tb-btn{
  width:21px;height:21px;
  border:1px solid #fff;
  border-radius:3px;
  font-family:Tahoma,sans-serif;
  font-size:11px;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  background:linear-gradient(180deg,#8bb0ef 0%,#3c6cd8 30%,#2858c0 70%,#1c48a8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  flex-shrink:0;
}
.popup-tb-x,.xp-tb-btn.cls,.t-tb-btn.cls{
  background:linear-gradient(180deg,#f1907c 0%,#e35e49 26%,#d64524 60%,#b52c0b 100%);
}
.popup-tb-x:hover,.popup-tb-min:hover,.t-tb-btn:hover,.xp-tb-btn:hover{
  filter:brightness(1.18);
}
.popup-tb-x:active,.popup-tb-min:active,.t-tb-btn:active,.xp-tb-btn:active{
  filter:brightness(0.85);box-shadow:inset 0 1px 3px rgba(0,0,0,0.4);
}

/* Corpo padrão: face XP clara com texto preto */
.popup-body{
  background:var(--xp-face);
  color:#000;
  font-family:var(--xp-font);
  font-size:12px;
}

/* Listas de arquivos (My Documents / Recycle Bin) */
.file-item{border:1px solid transparent;}
.file-item .fi-name{color:#000;font-family:var(--xp-font);}
.file-item .fi-desc{color:#666;}
.file-item:hover{background:var(--xp-sel);border-color:var(--xp-sel);}
.file-item:hover .fi-name,.file-item:hover .fi-desc{color:#fff;}
.file-item.trashed .fi-name{color:#888;}

/* Popups de easter-egg claros */
.bull-title{color:#c05000;}
.bull-msg{color:#000;}
.raid-msg{color:#000;}
.opinion-msg{color:#5a3a8a;}

/* Notepad */
#notepad-win{background:var(--xp-face);}
#notepad-textarea{border:none;border-top:1px solid #aca899;border-radius:0;box-shadow:none;}

/* Team selector — cartões claros */
.team-card{border:1px solid #aca899;background:#fff;border-radius:3px;}
.team-card:hover{border-color:var(--xp-sel);box-shadow:0 0 4px rgba(49,106,197,0.5);}
.team-card.selected{border-color:#e5a01a;background:#fff6dd;}
.team-card .tc-name{color:#00309c;}
.team-card .tc-desc{color:#666;}

/* Janelas que continuam escuras por dentro (mídia/jogos/console) */
/* #wallet-win itself needs the override too, not just .popup-body -- the XP
   .popup-win rule above sets a cream background on every window, and when
   wallet-win's content is shorter than its min-height, the unfilled gap was
   showing that raw cream instead of the intended dark theme. */
#wallet-win{background:#0d0a1b;}
#wallet-win .popup-body{background:#0d0a1b;color:#fff;}

/* iDOL.exe mantém o rosa (o charme KinitoPET) — só herda os botões XP */

/* ════════════════════════════════════════
   TERMINAL — janela de console XP
════════════════════════════════════════ */
.t-titlebar{
  background:var(--xp-titlebar) !important;
  padding:4px 6px !important;
  min-height:28px;
  box-shadow:none;
  border-bottom:none;
}
#terminal-win.windowed{
  border:3px solid var(--xp-border) !important;
  border-top:none !important;
  border-radius:8px 8px 0 0;
  box-shadow:4px 4px 14px rgba(0,0,0,0.45) !important;
  overflow:hidden;
}
#terminal-win.windowed .t-titlebar{
  background:var(--xp-titlebar) !important;
  border-radius:5px 5px 0 0;
}
.t-tb-title{
  font-family:'Trebuchet MS',var(--xp-font) !important;
  font-weight:700 !important;font-size:13px !important;
  text-shadow:1px 1px 1px rgba(10,36,106,0.7);
}
.t-tb-icon-img{
  background:#000 !important;color:#ccc !important;
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:none !important;
}
.t-tb-btn{
  background:linear-gradient(180deg,#8bb0ef 0%,#3c6cd8 30%,#2858c0 70%,#1c48a8 100%) !important;
  border:1px solid #fff !important;
  border-radius:3px !important;
  width:21px;height:21px;
}
.t-tb-btn.cls{background:linear-gradient(180deg,#f1907c 0%,#e35e49 26%,#d64524 60%,#b52c0b 100%) !important;}

/* Menubar — cinza XP com hover azul */
.t-menubar,
#terminal-win.windowed .t-menubar{
  background:var(--xp-face) !important;
  border-bottom:1px solid #aca899 !important;
  font-family:var(--xp-font);
  backdrop-filter:none;
}
.t-menu-item{color:#000;font-size:12px !important;font-family:var(--xp-font) !important;}
.t-menu-item:hover,.t-menu-item.open,
#terminal-win.windowed .t-menu-item:hover{
  background:var(--xp-sel);color:#fff;
}
.t-dropdown{
  background:#fff;border:1px solid #aca899;
  box-shadow:3px 3px 5px rgba(0,0,0,0.3);
}
.t-dd-item{color:#000;font-family:var(--xp-font);font-size:12px;}
.t-dd-item:hover{background:var(--xp-sel);color:#fff;}
.t-dd-sep{border-top:1px solid #e0ddd0;margin:3px 2px;}

/* Statusbar XP */
#t-statusbar{
  background:var(--xp-face) !important;
  border-top:1px solid #aca899 !important;
  font-family:var(--xp-font) !important;
  font-size:11px !important;
  color:#000 !important;
  text-transform:none;
  letter-spacing:0 !important;
  padding:3px 8px !important;
}
#t-status-wallet{color:#000 !important;}
#t-statusbar span{
  border:1px solid;
  border-color:#aca899 #fff #fff #aca899;
  padding:1px 8px;
}

/* Menus do IE simulado */
.ie-dropdown{background:#fff;border:1px solid #aca899;box-shadow:3px 3px 5px rgba(0,0,0,0.3);}
.ie-dd-item:hover{background:var(--xp-sel);color:#fff;}

/* ════════════════════════════════════════
   BOTÕES / INPUTS — pushbutton XP
════════════════════════════════════════ */
.e-btn,.btn,#urlgo{
  background:var(--xp-btn-face);
  border:1px solid var(--xp-btn-border);
  border-radius:3px;
  color:#000;
  font-family:var(--xp-font);
  font-size:11px;
  padding:3px 12px;min-height:22px;
  box-shadow:none;
  cursor:pointer;
  letter-spacing:0;
}
.e-btn:hover,.btn:hover,#urlgo:hover{
  background:var(--xp-btn-face);
  color:#000;
  border-color:var(--xp-btn-border);
  box-shadow:inset 0 0 0 1px #ffc73c, inset 0 0 0 2px rgba(255,199,60,0.45);
}
.e-btn:active,.btn:active,#urlgo:active{
  background:linear-gradient(180deg,#d8d0c4,#ecebe5);
  transform:none;box-shadow:none;
}
.e-btn.cancel{border-color:var(--xp-btn-border);color:#a00;}
.e-btn.cancel:hover{background:var(--xp-btn-face);color:#a00;}
.e-btn:disabled{color:#aca899;box-shadow:none;}

/* iRadio: o interior escuro (redesign do production-polish) fica — é um
   player "skinado", estilo Winamp na era XP. Só o chrome vira Luna. */
#radio-win .popup-tb{
  background:var(--xp-titlebar);
  border-bottom:none;
}
#radio-win .btn,#radio-win #urlgo{
  background:transparent;border:1px solid #181228;color:#556070;
  font-family:'Share Tech Mono',monospace;font-size:10px;
  min-width:0;min-height:0;border-radius:0;padding:4px 10px;box-shadow:none;
}
#radio-win .btn:hover,#radio-win #urlgo:hover{
  border-color:#58dbff;color:#58dbff;background:rgba(88,219,255,.04);box-shadow:none;
}

/* ════════════════════════════════════════
   XP ERROR POPUPS (easter eggs) — Luna
════════════════════════════════════════ */
.xp-error-win{
  background:var(--xp-face);
  border:3px solid var(--xp-border);
  border-top:none;
  border-radius:8px 8px 0 0;
  box-shadow:4px 4px 14px rgba(0,0,0,0.45);
  font-family:var(--xp-font);
  overflow:hidden;
}
.xp-tb{
  background:var(--xp-titlebar);
  border-bottom:none;
  padding:4px 4px 4px 8px;
  border-radius:5px 5px 0 0;
}
.xp-tb-title{
  font-family:'Trebuchet MS',var(--xp-font);
  text-shadow:1px 1px 1px rgba(10,36,106,0.7);
  font-size:12px;
}
.xp-body,.xp-btns{background:var(--xp-face);}
.xp-body-msg{font-family:var(--xp-font);}
.xp-btn{
  background:var(--xp-btn-face);
  border:1px solid var(--xp-btn-border);
  border-radius:3px;
  box-shadow:none;
  font-family:var(--xp-font);
}
.xp-btn:active{border-color:var(--xp-btn-border);padding-top:0;padding-left:12px;}
.xp-btn:focus{outline:1px dotted #000;outline-offset:-4px;}

/* ════════════════════════════════════════
   CONTEXT MENU do desktop — XP branco
════════════════════════════════════════ */
#desk-ctx{
  background:#fff;
  border:1px solid #aca899;
  box-shadow:3px 3px 5px rgba(0,0,0,0.3);
  font-family:var(--xp-font);
  padding:2px;
}
#desk-ctx .dctx-item:hover{background:var(--xp-sel);color:#fff;}
#desk-ctx .dctx-sep{background:#e0ddd0;}

/* ════════════════════════════════════════
   EDIT OVERLAY (upload de agente) — diálogo XP
════════════════════════════════════════ */
#edit-box{
  background:var(--xp-face);
  border:3px solid var(--xp-border);
  border-radius:8px;
  font-family:var(--xp-font);
}
#edit-box h3{color:#00309c;font-family:var(--xp-font);}
#edit-dropzone{
  border:2px dashed #7f9db9;color:#555;background:#fff;
}
#edit-dropzone:hover{border-color:var(--xp-sel);color:var(--xp-sel);}
#edit-status{color:#555!important;}
#edit-overlay .e-btn.cancel{margin-left:8px;}

/* Snake popup: mantém o miolo escuro (jogo), chrome já é Luna */

/* Ajustes finos: títulos com emoji na titlebar ficam alinhados */
.popup-tb > span:first-child{filter:drop-shadow(1px 1px 1px rgba(0,0,0,0.3));}