/* ══════ desktop.css — Desktop-Icons, Taskbar, Start-Menü ══════ */

/* ── Win98 Desktop Icons ── */
.desk-icons{display:none;position:absolute;inset:0 0 42px 0;z-index:1;
  --grid-w:clamp(64px,5.5vw,100px);--grid-h:clamp(72px,7vh,100px)}
@media(min-width:900px){.desk-icons{display:block}}
.desk-icon{
  position:absolute;width:var(--grid-w);height:var(--grid-h);
  padding:clamp(4px,0.5vh,8px) 2px;display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:default;border:1px solid transparent;border-radius:2px;user-select:none;
  text-decoration:none;transition:none;
}
.desk-icon.dragging{z-index:999;opacity:0.8;pointer-events:none}
.desk-icon-ghost{position:absolute;border:1px dashed rgba(255,255,255,0.3);border-radius:2px;
  background:rgba(0,0,128,0.15);pointer-events:none;z-index:998;transition:left 0.1s,top 0.1s}
.desk-icon:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.25)}
.desk-icon.selected .desk-icon-label{background:#00007B;color:#fff}
.desk-icon.selected .desk-icon-img{filter:brightness(0.85) saturate(1.3) drop-shadow(0 0 1px rgba(0,0,128,0.5))}
.desk-icon-img{
  width:clamp(32px,4vw,56px);height:clamp(32px,4vw,56px);display:flex;align-items:center;justify-content:center;
  font-size:clamp(24px,3.2vw,44px);line-height:1;
  image-rendering:pixelated;-webkit-font-smoothing:none;
  -moz-osx-font-smoothing:grayscale;font-smooth:never;
  filter:contrast(1.15);
  position:relative;
}
/* Shortcut arrow overlay (Win98 curved arrow) */
.desk-icon.shortcut .desk-icon-img::after{
  content:'';position:absolute;bottom:-2px;left:-2px;
  width:clamp(14px,1.6vw,22px);height:clamp(14px,1.6vw,22px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23fff'/%3E%3Crect x='0' y='0' width='16' height='16' fill='none' stroke='%23808080' stroke-width='1'/%3E%3Cpath d='M4 13 L4 7 C4 4 7 4 9 4 L12 4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M9 1 L12 4 L9 7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/contain;
  image-rendering:pixelated;
}
/* TToT icon: mystical hourglass */
.ttot-ico{
  animation:ttot-glow 3s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(0,204,102,0.6)) drop-shadow(0 0 8px rgba(86,212,221,0.3));
}
@keyframes ttot-glow{
  0%,100%{filter:drop-shadow(0 0 4px rgba(0,204,102,0.6)) drop-shadow(0 0 8px rgba(86,212,221,0.3))}
  50%{filter:drop-shadow(0 0 8px rgba(0,204,102,0.9)) drop-shadow(0 0 16px rgba(86,212,221,0.6)) drop-shadow(0 0 24px rgba(255,85,85,0.3))}
}
/* jNet Explorer icon */
.jnet-ico{position:relative;overflow:visible}
.jnet-j{
  font-family:'Consolas','Courier New',monospace;
  font-style:italic;font-weight:900;
  font-size:clamp(26px,3.4vw,48px);line-height:1;
  color:#1E5FC2;
  -webkit-text-stroke:clamp(1px,0.15vw,2px) #0A2E6E;
  paint-order:stroke fill;
  image-rendering:pixelated;
  -webkit-font-smoothing:none;font-smooth:never;
}
.jnet-ring{
  position:absolute;inset:-12% -18%;
  border:clamp(3px,0.35vw,5px) solid #D4A017;
  border-radius:50%;
  transform:rotate(-30deg);
  border-top-color:transparent;
  border-left-color:transparent;
  image-rendering:pixelated;
}
/* jAMP icon */
.jamp-ico{position:relative}
.jamp-note{font-size:inherit}
.jamp-bolt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:60%;filter:drop-shadow(0 0 2px rgba(0,0,0,0.5))}
.desk-icon-label{
  font-family:'MS Sans Serif',Tahoma,Arial,sans-serif;font-size:clamp(9px,1vw,13px);
  color:#fff;text-align:center;line-height:1.2;word-break:break-all;
  text-shadow:1px 1px 0 #000;
  -webkit-font-smoothing:none;font-smooth:never;
}

/* ── Win98 Taskbar ── */
#taskbar{
  display:none;position:absolute;bottom:0;left:0;right:0;height:42px;
  background:#C0C0C0;border-top:2px solid #DFDFDF;z-index:10;
  font-family:'MS Sans Serif',Tahoma,Arial,sans-serif;font-size:12px;
  align-items:center;padding:0 4px;gap:3px;user-select:none;
}
@media(min-width:900px){#taskbar{display:flex}}
#start-btn{
  height:42px;padding:0 4px;background:#C0C0C0!important;
  border:2px solid;border-color:#DFDFDF #808080 #808080 #DFDFDF;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  flex-shrink:0;position:relative;overflow:hidden;
  -webkit-appearance:none;appearance:none;outline:none;
}
#start-btn img{height:34px!important;width:auto}
#start-btn:active,#start-btn.pressed{border-color:#808080 #DFDFDF #DFDFDF #808080}
.tb-sep{width:1px;height:36px;border-left:1px solid #808080;border-right:1px solid #DFDFDF;margin:0 3px}
.tb-quick{display:flex;align-items:center;gap:2px;padding:2px 4px;min-height:36px;border:2px solid transparent;transition:border-color .15s,background .15s}
.tb-quick.ql-drop-hover{border:2px dashed #00007B;background:rgba(0,0,128,0.06)}
.tb-qbtn{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;border:1px solid transparent;text-decoration:none;
}
.tb-qbtn:hover{border-color:#DFDFDF #808080 #808080 #DFDFDF}
.tb-qbtn:active{border-color:#808080 #DFDFDF #DFDFDF #808080}
#tb-programs,.tb-programs{
  flex:1;display:flex;align-items:center;gap:3px;min-width:0;height:36px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
}
#tb-programs::-webkit-scrollbar{height:8px}
#tb-programs::-webkit-scrollbar-thumb{background:#808080;border:1px solid #C0C0C0}
#tb-programs::-webkit-scrollbar-track{background:#C0C0C0}
.tb-task{
  height:32px;padding:0 10px;background:#C0C0C0;
  border:2px solid;border-color:#DFDFDF #808080 #808080 #DFDFDF;
  display:flex;align-items:center;gap:5px;font-size:12px;font-weight:bold;
  min-width:40px;max-width:180px;overflow:hidden;white-space:nowrap;
  cursor:pointer;flex-shrink:1;flex-basis:120px;color:#000;
}
.tb-task span{overflow:hidden;text-overflow:ellipsis}
.tb-task.active{
  border-color:#808080 #DFDFDF #DFDFDF #808080;
  background:#B8B8B8;
}
.tb-task:not(.active){font-weight:normal}
.tb-tray{
  display:flex;align-items:center;gap:8px;padding:0 8px;height:42px;
  border:1px solid;border-color:#808080 #DFDFDF #DFDFDF #808080;
  font-size:12px;color:#000;flex-shrink:0;
}
.tb-tray-icons{display:flex;align-items:center;gap:4px}
.tb-tray-icons span{font-size:14px}
.tb-tray-clock{text-align:right;line-height:1.2}
#tb-clock{font-size:12px;font-weight:bold;display:block}
#tb-date{font-size:9px;color:#404040;display:block}

/* ── Start Menu ── */
#start-menu{
  display:none;position:absolute;bottom:42px;left:0;
  width:200px;background:#C0C0C0;
  border:2px solid;border-color:#DFDFDF #808080 #808080 #DFDFDF;
  box-shadow:2px 2px 0 rgba(0,0,0,0.5);z-index:11;
  font-family:'MS Sans Serif',Tahoma,Arial,sans-serif;font-size:11px;
}
#start-menu.active{display:block}
#start-menu-sidebar{
  position:absolute;left:0;top:0;bottom:0;width:22px;
  background:linear-gradient(to top,#00007B,#1060C8);
  display:flex;align-items:flex-end;padding:4px 2px;
}
#start-menu-sidebar span{
  color:#fff;font-weight:bold;font-size:11px;writing-mode:vertical-rl;
  transform:rotate(180deg);letter-spacing:1px;
}
#start-menu-items{margin-left:22px;padding:2px 0}
.sm-item{
  display:flex;align-items:center;gap:8px;padding:4px 10px;cursor:pointer;
  color:#000;text-decoration:none;position:relative;
}
.sm-item:hover{background:#00007B;color:#fff}
.sm-item-icon{font-size:16px;width:20px;text-align:center}
.sm-item-label{flex:1}
.sm-sep{height:1px;margin:2px 10px 2px 32px;border-top:1px solid #808080;border-bottom:1px solid #DFDFDF}
.sm-item.has-arrow::after{content:'►';font-size:8px;margin-left:auto;font-family:sans-serif}
/* Submenu */
.sm-sub{
  display:none;position:absolute;left:100%;bottom:-2px;
  width:180px;background:#C0C0C0;
  border:2px solid;border-color:#DFDFDF #808080 #808080 #DFDFDF;
  box-shadow:2px 2px 0 rgba(0,0,0,0.4);padding:2px 0;z-index:12;
}
.sm-item:hover>.sm-sub{display:block}