/* ============================================================
   JabrielOS - an original XP-flavored desktop, built from scratch.
   No Microsoft assets: all chrome is CSS, all icons are inline SVG.
   ============================================================ */

:root{
  --blue-deep:#0831d9; --blue:#245edb; --blue-light:#3f8cf3;
  --title-a:#0997ff; --title-b:#0053ee; --title-c:#0050ee; --title-d:#06f;
  --green-a:#3c9838; --green-b:#2d8a2b;
  --jf-red:#c81e1e; --ink:#111;
  --xp-face:#ece9d8; --xp-border:#0831d9;
  /* Enlarged XP-style cursors (original SVG drawings) */
  --cur-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34"><g transform="translate(2,1)"><path d="M0 0 L0 24 L5.5 19 L9 27 L13 25.4 L9.6 17.6 L17 17 Z" fill="black" opacity=".28" transform="translate(1.6,1.8)"/><path d="M0 0 L0 24 L5.5 19 L9 27 L13 25.4 L9.6 17.6 L17 17 Z" fill="white" stroke="black" stroke-width="1.1"/></g></svg>') 2 1, auto;
  --cur-hand: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><g transform="translate(6,2)"><path d="M8 1.5 C8 .5 9.6 .5 9.6 1.5 L9.6 12 L11 12 L11 8.5 C11 7.4 12.6 7.4 12.6 8.5 L12.6 12 L14 12 L14 9.5 C14 8.4 15.6 8.4 15.6 9.5 L15.6 13 L17 13 L17 11 C17 9.9 18.6 9.9 18.6 11 L18.6 19 C18.6 24 15 27.5 10.5 27.5 C6.5 27.5 4.6 25.6 3 22.5 L.6 17.8 C-.4 16 1.6 14.8 2.8 16.2 L5 18.8 L5 3 C5 2 6.6 2 6.6 3 L6.6 12 L8 12 Z" fill="black" opacity=".28" transform="translate(1.4,1.6)"/><path d="M8 1.5 C8 .5 9.6 .5 9.6 1.5 L9.6 12 L11 12 L11 8.5 C11 7.4 12.6 7.4 12.6 8.5 L12.6 12 L14 12 L14 9.5 C14 8.4 15.6 8.4 15.6 9.5 L15.6 13 L17 13 L17 11 C17 9.9 18.6 9.9 18.6 11 L18.6 19 C18.6 24 15 27.5 10.5 27.5 C6.5 27.5 4.6 25.6 3 22.5 L.6 17.8 C-.4 16 1.6 14.8 2.8 16.2 L5 18.8 L5 3 C5 2 6.6 2 6.6 3 L6.6 12 L8 12 Z" fill="white" stroke="black" stroke-width="1.1"/></g></svg>') 12 2, pointer;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:Tahoma,'Segoe UI',Verdana,sans-serif;font-size:13px;color:var(--ink);
  background:#000;cursor:var(--cur-arrow);
  -webkit-font-smoothing:antialiased;
}
a,button,[role="button"],.dt-icon,.fold-item,.sm-item,.tb-btn,.tt-btn{cursor:var(--cur-hand)}
img{-webkit-user-drag:none;user-select:none}
::selection{background:var(--blue);color:#fff}

/* ---------- SEO hidden block ---------- */
/* shown only when JavaScript is off, so it is real visible content, never hidden text */
.nojs-content{position:relative;z-index:9999;max-width:760px;margin:0 auto;padding:40px 24px;
  color:#eaf2ff;font:15px/1.7 Tahoma,Verdana,sans-serif;background:#0b1b33}
.nojs-content h1{font-size:26px;line-height:1.25;margin:0 0 16px}
.nojs-content nav{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.nojs-content a{color:#7fd4ff}

/* ---------- Boot screen ---------- */
#boot{position:fixed;inset:0;background:#000;z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .5s}
#boot.done{opacity:0;pointer-events:none}
.boot-inner{text-align:center}
.boot-logo{width:190px;filter:drop-shadow(0 0 24px rgba(255,255,255,.15))}
.boot-name{color:#fff;font-size:30px;font-weight:700;letter-spacing:1px;margin:18px 0 26px;font-family:'Trebuchet MS',Tahoma,sans-serif}
.boot-name span{color:var(--jf-red)}
.boot-bar{width:200px;height:16px;margin:0 auto;border:2px solid #8a8a8a;border-radius:8px;overflow:hidden;display:flex;gap:3px;padding:2px;justify-content:flex-start}
.boot-bar span{width:12px;height:100%;background:linear-gradient(180deg,#5aa0ff,#1b54d9);border-radius:2px;animation:bootmove 1.6s linear infinite}
.boot-bar span:nth-child(2){animation-delay:.12s}
.boot-bar span:nth-child(3){animation-delay:.24s}
@keyframes bootmove{0%{transform:translateX(-40px)}100%{transform:translateX(200px)}}

/* ---------- Desktop ---------- */
#desktop{position:fixed;inset:0;background:url('../images/wallpaper.jpg') center/cover no-repeat;overflow:hidden;transition:filter .45s}
#desktop.bw{filter:grayscale(1) contrast(1.05)}
#desktop::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 180px rgba(0,20,60,.18)}

/* ---------- Desktop icons ---------- */
#icons{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:6px;z-index:1}
.dt-icon{width:96px;padding:8px 4px;border:1px solid transparent;border-radius:4px;text-align:center;background:transparent;
  display:block;text-decoration:none;font:inherit;color:inherit}
.dt-icon:hover{background:rgba(49,106,197,.28);border-color:rgba(255,255,255,.35)}
.dt-icon:focus,.dt-icon.sel{background:rgba(49,106,197,.45);border-color:rgba(255,255,255,.5);outline:none}
.dt-icon .ig{width:52px;height:52px;margin:0 auto 5px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45))}
.dt-icon .ig svg,.dt-icon .ig img{width:50px;height:50px;object-fit:contain}
.dt-icon span{display:block;color:#fff;font-size:12px;line-height:1.25;text-shadow:1px 1px 2px #000, 0 0 6px rgba(0,0,0,.6);word-wrap:break-word}

/* ---------- Windows ---------- */
.win{
  position:absolute;min-width:300px;background:var(--xp-face);
  border:1px solid var(--xp-border);border-radius:8px 8px 3px 3px;
  box-shadow:2px 6px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.35);
  display:flex;flex-direction:column;overflow:hidden;
  animation:winopen .14s ease-out;
}
@keyframes winopen{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.win.closing{animation:winclose .12s ease-in forwards}
@keyframes winclose{to{transform:scale(.92);opacity:0}}
.win.inactive .tbar{filter:saturate(.35) brightness(1.12)}
.tbar{
  height:30px;flex:0 0 30px;display:flex;align-items:center;gap:6px;padding:0 4px 0 8px;
  background:linear-gradient(180deg,var(--title-a) 0%,var(--title-b) 8%,var(--title-c) 40%,var(--title-d) 88%,#003dd7 100%);
  color:#fff;font-weight:700;font-size:13px;text-shadow:1px 1px 1px rgba(0,0,0,.5);
  user-select:none;touch-action:none;
}
.tbar img{width:18px;height:18px;object-fit:contain}
.tbar .tt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-btn{
  width:22px;height:22px;flex:0 0 22px;border-radius:3px;border:1px solid rgba(255,255,255,.65);
  color:#fff;font-size:12px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#7ba1e8,#3162c6);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.tt-btn:hover{filter:brightness(1.15)}
.tt-btn.close{background:linear-gradient(180deg,#f1907a,#d64424 45%,#c33d1f)}
.win-body{flex:1;overflow:auto;background:#fff;position:relative}
.win-body.pad{padding:16px}
.win-status{flex:0 0 22px;background:var(--xp-face);border-top:1px solid #c9c5b2;font-size:11px;color:#444;display:flex;align-items:center;padding:0 8px;gap:14px}

/* ---------- Folder window content ---------- */
.fold-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:16px}
.fold-item{border:1px solid transparent;border-radius:4px;padding:10px 6px;text-align:center;background:transparent}
/* hover only where there is a real pointer. On a phone the "hover" sticks to
   whatever lands under the finger, which is how Music Videos lit up by accident */
@media (hover:hover){ .fold-item:hover{background:#e8f0fb;border-color:#bcd4f5} }
/* the folder to open first */
.fold-item.lead{background:#e8f0fb;border-color:#bcd4f5;animation:foldPulse 2.2s ease-in-out infinite}
@keyframes foldPulse{0%,100%{box-shadow:0 0 0 0 rgba(36,94,219,0)}50%{box-shadow:0 0 0 6px rgba(36,94,219,.22)}}
@media (prefers-reduced-motion:reduce){ .fold-item.lead{animation:none} }
.fold-item .ig{height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.fold-item .ig svg{width:54px;height:54px;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.25))}
.fold-item b{display:block;font-weight:400;font-size:12px;line-height:1.3}
.fold-item i{display:block;font-style:normal;font-size:10.5px;color:#777;margin-top:2px}

/* video tiles */
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;padding:16px}
.vid-tile{border:1px solid #e3e0d3;border-radius:6px;overflow:hidden;background:#fff;text-align:left;transition:box-shadow .15s,transform .15s}
.vid-tile:hover{box-shadow:0 4px 16px rgba(0,0,0,.18);transform:translateY(-2px)}
.vid-tile .th{display:block;position:relative;aspect-ratio:16/9;background-color:#111;background-size:cover;background-position:center;background-repeat:no-repeat}
.vid-tile .th.poster{aspect-ratio:2/3;background-position:top center}
.vid-tile .th::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}
.vid-tile .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(200,30,30,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.vid-tile .nsfw{position:absolute;top:9px;left:9px;z-index:2;font-size:9px;font-weight:800;letter-spacing:.18em;padding:4px 8px;border-radius:5px;background:rgba(255,107,107,.9);color:#2a0606;font-family:Arial,Helvetica,sans-serif}
.vid-tile .play::after{content:"";border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;margin-left:3px}
.vid-tile .vm{display:block;padding:9px 11px 11px}
.vid-tile .vm b{display:block;font-size:12.5px;line-height:1.3}
.vid-tile .vm i{display:block;font-style:normal;font-size:11px;color:#8a1616;margin-top:3px}
.vid-tile .vm em{display:block;font-style:normal;font-size:10.5px;color:#777;margin-top:3px}

/* ---------- Player window ---------- */
.player-body{background:#000;display:flex;flex-direction:column}
.player-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-info{background:#101010;color:#eee;padding:10px 14px;font-size:12px}
.player-info b{color:#fff}
.player-info i{font-style:normal;color:#f0655f;display:block;margin-top:2px}

/* movie window */
.movie-wrap{display:flex;gap:18px;padding:18px;background:#fff}
.movie-wrap img{width:220px;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.movie-txt{flex:1;min-width:200px}
.movie-txt h2{font-family:'Trebuchet MS',Tahoma;font-size:20px;margin-bottom:6px}
.movie-txt .r{color:#8a1616;font-weight:700;font-size:12px;margin-bottom:10px}
.movie-txt p{font-size:12.5px;line-height:1.55;color:#333;margin-bottom:14px}
.movie-links{display:flex;flex-wrap:wrap;gap:8px}
.xp-btn{
  display:inline-flex;align-items:center;gap:6px;padding:5px 16px;font-size:12px;font-family:Tahoma;
  background:linear-gradient(180deg,#fff,#ece9d8);border:1px solid #003c74;border-radius:3px;color:#000;text-decoration:none;
  box-shadow:inset 1px 1px 0 #fff;
}
.xp-btn:hover{background:linear-gradient(180deg,#fff,#dcf0fa);border-color:#0078d7}
.xp-btn.primary{background:linear-gradient(180deg,#e57373,#c81e1e);border-color:#8a1616;color:#fff;font-weight:700}
.xp-btn.primary:hover{filter:brightness(1.08)}

/* ---------- About window ---------- */
.about-wrap{display:flex;gap:18px;padding:18px}
.about-wrap img{width:170px;height:170px;object-fit:cover;border-radius:4px;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.about-txt{flex:1;min-width:220px}
.about-txt h2{font-family:'Trebuchet MS',Tahoma;font-size:19px;margin-bottom:8px}
.about-txt p{font-size:12.5px;line-height:1.6;color:#333;margin-bottom:10px}
.about-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:6px}
.about-stats div{background:#faf9f4;border:1px solid #e6e2d0;border-radius:4px;padding:8px;text-align:center}
.about-stats b{display:block;font-size:17px;color:var(--jf-red)}
.about-stats span{font-size:10.5px;color:#666}

/* ---------- Browser (IE-style) window ---------- */
.brow-bar{flex:0 0 auto;background:var(--xp-face);border-bottom:1px solid #c9c5b2;padding:4px 8px;display:flex;align-items:center;gap:8px}
.brow-bar .nav{display:flex;gap:4px}
.brow-bar .nav button{width:26px;height:26px;border-radius:50%;border:1px solid #9db8dd;background:linear-gradient(180deg,#fff,#d8e4f8);font-size:13px}
.brow-addr{flex:1;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #7f9db9;padding:3px 8px;font-size:12px;color:#333;border-radius:2px;overflow:hidden;white-space:nowrap}
.brow-addr img{width:14px;height:14px}
.brow-frame{flex:1;border:0;width:100%;background:#fff}

/* ---------- Chat (JabrielBot) ---------- */
.chat-body{display:flex;flex-direction:column;height:100%;background:#fff}
.chat-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,#fdfdfd,#f3f6fb)}
.msg{max-width:82%;padding:7px 11px;border-radius:10px;font-size:12.5px;line-height:1.45;animation:winopen .18s}
.msg.bot{align-self:flex-start;background:#eef3fb;border:1px solid #d3e0f5;border-bottom-left-radius:3px}
.msg.me{align-self:flex-end;background:#c81e1e;color:#fff;border-bottom-right-radius:3px}
.msg.bot b{color:#0a3d91}
.chat-quick{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-top:1px solid #e4e4e4;background:#fafafa}
.chat-quick button{font-size:11px;padding:4px 10px;border-radius:12px;border:1px solid #c81e1e;background:#fff;color:#c81e1e}
.chat-quick button:hover{background:#c81e1e;color:#fff}
.chat-log a{color:#c81e1e;font-weight:700}
.chat-in{display:flex;gap:6px;padding:8px 12px;border-top:1px solid #d8d8d8;background:var(--xp-face)}
.chat-in input{flex:1;border:1px solid #7f9db9;padding:6px 8px;font-family:Tahoma;font-size:12.5px}
.chat-in button{padding:6px 16px}

/* ---------- Notepad ---------- */
.notepad{width:100%;height:100%;border:0;resize:none;font-family:'Lucida Console',Consolas,monospace;font-size:12.5px;line-height:1.7;padding:12px;background:#fff;color:#111;outline:none}

/* ---------- Command prompt ---------- */
.cmd-body{background:#000;color:#c5c5c5;font-family:'Lucida Console',Consolas,monospace;font-size:12.5px;padding:10px;height:100%;overflow-y:auto}
.cmd-body .ln{white-space:pre-wrap;word-break:break-word;line-height:1.5}
.cmd-body .ln .red{color:#f0655f}
.cmd-in{display:flex}
.cmd-in span{white-space:pre}
.cmd-in input{flex:1;background:transparent;border:0;outline:none;color:#c5c5c5;font:inherit}

/* ---------- Image viewer ---------- */
.iv-body{background:#3b3b3b;display:flex;flex-direction:column;height:100%}
.iv-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px}
.iv-stage img{max-width:100%;max-height:100%;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.iv-bar{flex:0 0 40px;background:var(--xp-face);display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid #c9c5b2}
.iv-bar span{font-size:11px;color:#555;min-width:130px;text-align:center}

/* ---------- Media player ---------- */
.wmp-body{background:linear-gradient(160deg,#1b2735,#090d12);display:flex;flex-direction:column;height:100%}
.wmp-frame{flex:1;position:relative;min-height:220px}
.wmp-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wmp-bar{flex:0 0 46px;display:flex;align-items:center;gap:10px;padding:0 14px;background:linear-gradient(180deg,#2c3e50,#17202b);color:#cfe0f5;font-size:11.5px}
.wmp-bar .dot{width:9px;height:9px;border-radius:50%;background:#38d45a;box-shadow:0 0 8px #38d45a;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.4}}

/* ---------- Dialogs ---------- */
.dlg{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);min-width:330px;max-width:min(430px,92vw);
  background:var(--xp-face);border:1px solid var(--xp-border);border-radius:8px 8px 3px 3px;
  box-shadow:3px 8px 30px rgba(0,0,0,.5);z-index:9000;animation:dlgopen .15s;overflow:hidden;
}
.dlg .win-body{background:var(--xp-face)}
.dlg-msg{display:flex;gap:14px;padding:18px 18px 8px;align-items:flex-start}
.dlg-msg .qi{flex:0 0 36px}
.dlg-msg p{font-size:12.5px;line-height:1.5}
.dlg-btns{display:flex;justify-content:center;gap:10px;padding:14px}
.dlg-btns .xp-btn{min-width:78px;justify-content:center}
.dlg-form{padding:6px 18px 4px}
.dlg-form label{display:block;font-size:11.5px;margin:9px 0 3px;color:#333}
.dlg-form input{width:100%;border:1px solid #7f9db9;padding:6px 8px;font-family:Tahoma;font-size:12.5px}
.dlg-form .err{color:#c00;font-size:11px;margin-top:6px;display:none}
.dlg-sub{font-size:10.5px;color:#777;padding:0 18px 6px;line-height:1.4}

/* balloon */
#balloon{
  position:fixed;right:14px;bottom:52px;max-width:260px;background:#ffffe1;border:1px solid #000;border-radius:6px;
  padding:10px 12px;font-size:11.5px;box-shadow:2px 4px 12px rgba(0,0,0,.35);z-index:9500;display:none;
}
#balloon b{display:block;margin-bottom:3px}
#balloon::after{content:"";position:absolute;bottom:-9px;right:26px;border-width:9px 8px 0 8px;border-style:solid;border-color:#ffffe1 transparent transparent}

/* ---------- Taskbar ---------- */
#taskbar{
  position:absolute;left:0;right:0;bottom:0;height:38px;z-index:8000;display:flex;align-items:stretch;
  background:linear-gradient(180deg,#3f8cf3 0%,#245edb 5%,#245edb 85%,#1941a5 100%);
  box-shadow:0 -1px 4px rgba(0,0,0,.35);
}
#start-btn{
  display:flex;align-items:center;gap:7px;padding:0 20px 0 12px;border:none;color:#fff;font-style:italic;font-weight:700;font-size:17px;
  font-family:'Trebuchet MS',Tahoma;text-shadow:1px 1px 2px rgba(0,0,0,.5);
  background:linear-gradient(180deg,#5abe4d 0%,var(--green-a) 8%,var(--green-b) 70%,#1f6d1e 100%);
  border-radius:0 10px 10px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 2px 0 6px rgba(0,0,0,.25);
}
#start-btn:hover{filter:brightness(1.08)}
#start-btn img{height:24px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
#task-buttons{flex:1;display:flex;gap:4px;padding:4px 6px;overflow:hidden}
.tb-btn{
  display:flex;align-items:center;gap:6px;min-width:0;max-width:170px;flex:0 1 auto;padding:0 10px;border-radius:3px;border:none;
  background:linear-gradient(180deg,#4a86e8,#2a63cf);color:#fff;font-size:11.5px;font-family:Tahoma;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.tb-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-btn img{width:15px;height:15px;flex:0 0 15px;object-fit:contain}
.tb-btn.active{background:linear-gradient(180deg,#1c4ab1,#16389b);box-shadow:inset 0 2px 3px rgba(0,0,0,.4)}
#tray{
  display:flex;align-items:center;gap:10px;padding:0 12px 0 14px;color:#fff;font-size:12px;
  background:linear-gradient(180deg,#1290e9 0%,#0b63c6 60%,#0a52a1 100%);box-shadow:inset 2px 0 4px rgba(0,0,0,.25);
}
#tray-vol{font-size:15px}
/* the paintbrush next to the music note. It flips the desktop into DARKMODE and back,
   so the second look is a visible button instead of something buried in a menu. */
#tray-paint{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:20px;padding:0;margin:0;cursor:pointer;
  background:none;border:0;border-radius:4px;color:#fff;
  transition:background .15s ease, transform .15s ease;
}
#tray-paint svg{width:15px;height:15px;fill:currentColor;display:block}
#tray-paint:hover{background:rgba(255,255,255,.28)}
#tray-paint:active{transform:translateY(1px)}
#tray-paint:focus-visible{outline:2px solid #fff;outline-offset:1px}
#tray-paint[aria-pressed="true"]{background:rgba(255,255,255,.22)}
#clock{min-width:52px;text-align:center;text-shadow:0 1px 1px rgba(0,0,0,.4)}

/* ---------- Start menu ---------- */
#start-menu{
  position:absolute;left:0;bottom:38px;width:400px;z-index:8500;
  border:1px solid var(--blue-deep);border-radius:8px 8px 0 0;overflow:visible;
  box-shadow:4px -2px 24px rgba(0,0,0,.45);animation:smopen .16s ease-out;transform-origin:bottom left;
}
@keyframes smopen{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.sm-head{border-radius:7px 7px 0 0;
  height:62px;display:flex;align-items:center;gap:12px;padding:0 14px;color:#fff;font-size:15px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5);
  background:linear-gradient(180deg,#1b64d6 0%,#0f47ab 50%,#1b64d6 100%);
}
.sm-head img{height:42px;background:#fff;border:2px solid #9db8dd;border-radius:5px;padding:2px;object-fit:contain}
.sm-body{display:flex;background:#fff}
.sm-left{flex:1.1;padding:8px 4px;background:#fff;display:flex;flex-direction:column}
.sm-right{flex:1;padding:8px 4px;background:#d3e5fa;border-left:1px solid #95bdee;display:flex;flex-direction:column}
.sm-item{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border:none;background:transparent;text-align:left;width:100%;
  font-family:Tahoma;font-size:12px;color:#111;border-radius:3px;position:relative;
}
.sm-item:hover{background:var(--blue);color:#fff}
.sm-item:hover i{color:#dce8fb}
.sm-item .ig{width:30px;height:30px;flex:0 0 30px;display:flex;align-items:center;justify-content:center}
.sm-item .ig svg,.sm-item .ig img{width:28px;height:28px;object-fit:contain}
.sm-item b{display:block;font-weight:700}
.sm-item i{display:block;font-style:normal;font-size:10px;color:#888}
.sm-item.small b{font-weight:400}
.sm-item .arr{margin-left:auto;font-size:10px}
.sm-sep{height:1px;background:linear-gradient(90deg,transparent,#c9c5b2,transparent);margin:5px 8px}
.sm-right .sm-sep{background:linear-gradient(90deg,transparent,#95bdee,transparent)}
.sm-foot{
  height:44px;display:flex;justify-content:flex-end;gap:6px;align-items:center;padding:0 12px;
  background:linear-gradient(180deg,#1b64d6 0%,#0f47ab 60%,#1b64d6 100%);
}
.sm-foot button{display:flex;align-items:center;gap:7px;background:transparent;border:none;color:#fff;font-family:Tahoma;font-size:12px;padding:5px 9px;border-radius:3px}
.sm-foot button:hover{background:rgba(255,255,255,.18)}
.sm-ico{width:22px;height:22px;border-radius:4px;display:inline-block}
.sm-ico.logoff{background:linear-gradient(145deg,#f5b63f,#e07f0e);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.sm-ico.shutdown{background:linear-gradient(145deg,#e5605b,#b3221c);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* submenu flyout */
.sm-fly{position:absolute;left:calc(100% + 6px);bottom:-4px;min-width:210px;background:#fff;border:1px solid #9db8dd;box-shadow:3px 4px 14px rgba(0,0,0,.3);border-radius:0 4px 4px 0;padding:5px 4px;display:none;z-index:2}
.sm-item:hover .sm-fly,.sm-fly:hover,.sm-item.open .sm-fly{display:block}
.sm-fly .sm-item{color:#111}

/* ---------- Overlays (logoff/shutdown) ---------- */
#overlay{position:fixed;inset:0;z-index:9800;display:none;align-items:center;justify-content:center;color:#fff;text-align:center;
  background:linear-gradient(180deg,#5a7edc 0%,#3b63c4 45%,#2c53b0 100%)}
#overlay.on{display:flex}
#overlay .ov-inner img{height:80px;margin-bottom:20px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
#overlay .ov-inner h2{font-family:'Trebuchet MS',Tahoma;font-size:26px;margin-bottom:10px;text-shadow:1px 2px 3px rgba(0,0,0,.4)}
#overlay .ov-inner p{font-size:13px;opacity:.9;margin-bottom:24px}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  :root{--cur-arrow:auto;--cur-hand:pointer}
  #icons{top:10px;left:10px;right:10px;bottom:auto;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}
  .dt-icon{width:84px}
  .win{left:0 !important;top:0 !important;width:100% !important;height:calc(100% - 38px) !important;border-radius:0;min-width:0}
  .tbar{border-radius:0}
  #start-menu{width:100%;border-radius:8px 8px 0 0}
  .movie-wrap{flex-direction:column;align-items:center;text-align:center}
  .movie-links{justify-content:center}
  .about-wrap{flex-direction:column;align-items:center;text-align:center}
  .dlg{width:92vw;min-width:0}
}


/* ---------- Dark mode ---------- */
#desktop.darkmode{background:#000}
#desktop.darkmode::after{box-shadow:inset 0 0 220px rgba(200,30,30,.08)}
#dm-logo{display:none;position:absolute;inset:0;align-items:center;justify-content:center;pointer-events:none;z-index:0}
#desktop.darkmode #dm-logo{display:flex}
#dm-logo .card{background:#fff;border-radius:20px;padding:28px 36px;box-shadow:0 0 80px rgba(255,255,255,.14)}
#dm-logo img{width:min(400px,58vw);display:block}
.darkmode #taskbar{background:linear-gradient(180deg,#2c2c2c 0%,#111 6%,#111 85%,#000 100%)}
.darkmode #start-btn{background:linear-gradient(180deg,#e5605b 0%,#c81e1e 8%,#a01812 70%,#7c0f0a 100%)}
.darkmode #tray{background:linear-gradient(180deg,#242424,#000)}
.darkmode .tb-btn{background:linear-gradient(180deg,#3a3a3a,#181818)}
.darkmode .tb-btn.active{background:linear-gradient(180deg,#0d0d0d,#000);box-shadow:inset 0 2px 3px rgba(0,0,0,.7)}
.darkmode .tbar{background:linear-gradient(180deg,#4a4a4a 0%,#2a2a2a 40%,#161616 100%)}
.darkmode .tt-btn{background:linear-gradient(180deg,#666,#333);border-color:rgba(255,255,255,.35)}
.darkmode .tt-btn.close{background:linear-gradient(180deg,#e5605b,#a01812)}
.darkmode .win{border-color:#000}
.darkmode #start-menu{border-color:#000}
.darkmode .sm-head,.darkmode .sm-foot{background:linear-gradient(180deg,#3a3a3a,#161616)}
.darkmode .sm-right{background:#e8e8e8;border-left-color:#bbb}
.darkmode #balloon{background:#1e1e1e;color:#eee;border-color:#e5605b}
.darkmode #balloon::after{border-color:#1e1e1e transparent transparent}

/* ---------- Log Off dialog ---------- */
.logoff-dlg{min-width:360px}
.lo-band{background:linear-gradient(180deg,#5a7edc,#3b63c4 55%,#2c53b0);display:flex;justify-content:center;gap:clamp(18px,4vw,36px);padding:28px 22px}
.lo-band button{background:transparent;border:none;color:#fff;font-family:Tahoma;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:9px;text-shadow:1px 1px 2px rgba(0,0,0,.4)}
.lo-band button:hover .lo-ic{filter:brightness(1.15)}
.lo-ic{width:46px;height:46px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 3px 8px rgba(0,0,0,.35)}
.lo-ic.sw{background:linear-gradient(160deg,#7ed957,#2d8a2b)}
.lo-ic.off{background:linear-gradient(160deg,#f5b63f,#e07f0e)}
.lo-foot{display:flex;justify-content:flex-end;padding:10px 14px;background:var(--xp-face)}

/* ---------- Login screen ---------- */
#login{position:fixed;inset:0;z-index:9700;display:flex;flex-direction:column;color:#fff;font-family:Tahoma;background:linear-gradient(180deg,#5a7edc 0%,#3f66c9 40%,#2c53b0 100%)}
.lg-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:44px;padding:24px;flex-wrap:wrap;overflow-y:auto}
.lg-left{text-align:right;max-width:300px}
.lg-left img{width:230px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.lg-left p{font-size:17px;margin-top:16px;text-shadow:1px 1px 3px rgba(0,0,0,.4)}
.lg-div{width:2px;align-self:stretch;background:linear-gradient(180deg,transparent,rgba(255,255,255,.6),transparent)}
.lg-right{display:flex;flex-direction:column;gap:14px;min-width:300px;max-width:360px}
.lg-prof{border-radius:8px;padding:10px}
.lg-prof.open{background:rgba(255,255,255,.15)}
.lg-head{display:flex;align-items:center;gap:14px;cursor:var(--cur-hand)}
.av{width:56px;height:56px;flex:0 0 56px;border-radius:9px;border:2px solid #fff;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.av.dark{background:#000}
.av img{width:88%;object-fit:contain}
.nm{font-size:18px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.45)}
.lg-pass{display:none;margin:10px 0 0 72px;position:relative}
.lg-prof.open .lg-pass{display:block}
.lg-pass>span{font-size:11.5px}
.lg-row{display:flex;gap:6px;margin-top:5px}
.lg-row input{width:180px;border:1px solid #7f9db9;padding:6px 8px;font-size:13px;color:#111;font-family:Tahoma}
.lg-go,.lg-hint{width:28px;height:28px;border-radius:4px;border:1px solid rgba(0,0,0,.35);font-weight:700;font-size:13px}
.lg-go{background:linear-gradient(180deg,#7ed957,#2d8a2b);color:#fff}
.lg-hint{background:linear-gradient(180deg,#fff,#cfe3f7);color:#0a3d91}
.lg-balloon{display:none;position:absolute;top:calc(100% + 13px);left:0;width:280px;background:#ffffe1;color:#111;border:1px solid #000;border-radius:6px;padding:10px 12px;font-size:11.5px;line-height:1.45;box-shadow:2px 4px 14px rgba(0,0,0,.45);z-index:3}
.lg-balloon b{display:block;margin-bottom:5px}
.lg-balloon::before{content:"";position:absolute;top:-9px;left:26px;border-width:0 8px 9px;border-style:solid;border-color:transparent transparent #ffffe1}
.lg-bot{height:52px;border-top:2px solid #e8a33d;background:linear-gradient(180deg,#2c53b0,#1c3a85);display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:11.5px;color:#cfe0f5;flex:0 0 52px}
@media (max-width:720px){.lg-left{text-align:center}.lg-div{display:none}.lg-pass{margin-left:0}}

/* ---------- Merch ---------- */
.merch-wrap{padding:24px;text-align:center}
.merch-wrap>svg{width:160px;height:160px}
.merch-wrap h2{font-family:'Trebuchet MS',Tahoma;font-size:19px;margin:10px 0 6px}
.merch-wrap p{font-size:12.5px;color:#444;margin-bottom:16px}
.merch-bar{height:15px;border:1px solid #8a8a8a;border-radius:8px;margin:0 34px 18px;overflow:hidden;position:relative;background:#f4f2ea}
.merch-bar span{position:absolute;top:2px;bottom:2px;width:64px;border-radius:5px;background:linear-gradient(90deg,#e5605b,#c81e1e);animation:merchload 2.2s linear infinite}
@keyframes merchload{0%{left:-70px}100%{left:100%}}

#lg-skip{color:#ffd98a;font-weight:700;text-decoration:underline}
#lg-skip:hover{color:#fff}

.player-frame.local-note,.wmp-frame.local-note{display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;position:relative}
.local-note::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.72)}
.local-note .ln-inner{position:relative;text-align:center;padding:20px}
.local-note .ln-inner p{color:#bbb;font-size:11.5px;line-height:1.6;margin-top:14px}
.player-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.player-info .watch-ext{margin-left:auto;color:#8fc7ff;font-size:11px;text-decoration:none;white-space:nowrap}
.player-info .watch-ext:hover{text-decoration:underline}


/* ---------- TRIBE7 Lens Rental ---------- */
.t7-body{background:#060607;color:#e8e8ea;display:flex;flex-direction:column;padding:0;overflow:hidden}
.t7-top{flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #1c1c20;background:rgba(6,6,7,.92);backdrop-filter:blur(8px);z-index:2}
.t7-brand{font-family:'Trebuchet MS',Tahoma;font-size:13px;letter-spacing:.42em;color:#fff}
.t7-brand em{font-style:normal;color:#8a8a92}
.t7-rent{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border:1px solid #c81e1e;border-radius:999px;color:#fff;font-size:11.5px;letter-spacing:.24em;text-decoration:none;background:linear-gradient(135deg,rgba(200,30,30,.25),rgba(200,30,30,.05));box-shadow:0 0 18px rgba(200,30,30,.35), inset 0 0 12px rgba(200,30,30,.15);transition:box-shadow .25s,transform .2s}
.t7-rent:hover{box-shadow:0 0 30px rgba(200,30,30,.65), inset 0 0 18px rgba(200,30,30,.3);transform:translateY(-1px)}
.t7-rent span{font-size:13px}
.t7-scroll{flex:1;overflow-y:auto;scroll-behavior:smooth}
.t7-hero{text-align:center;padding:46px 30px 40px;background:radial-gradient(ellipse 60% 45% at 50% 30%,rgba(200,30,30,.12),transparent 70%)}
.t7-lens{width:150px;filter:drop-shadow(0 14px 34px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(200,30,30,.2));margin-bottom:20px;animation:t7float 6s ease-in-out infinite}
@keyframes t7float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.t7-eyebrow{font-size:10px;letter-spacing:.45em;color:#8a8a92;margin-bottom:16px}
.t7-hero h1{font-family:'Trebuchet MS',Tahoma;font-size:clamp(22px,4vw,34px);line-height:1.18;font-weight:700;color:#fff;letter-spacing:.02em}
.t7-hero h1 span{color:#e04a3a;text-shadow:0 0 26px rgba(224,74,58,.5)}
.t7-sub{max-width:520px;margin:18px auto 22px;color:#a9a9b2;font-size:13px;line-height:1.75}
.t7-chips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.t7-chips span{border:1px solid #2c2c33;border-radius:999px;padding:6px 16px;font-size:11.5px;letter-spacing:.18em;color:#d8d8de;background:#0d0d10}
.t7-sec{max-width:640px;margin:0 auto;padding:34px 26px;border-top:1px solid #17171b}
.t7-sec h3{font-family:'Trebuchet MS',Tahoma;font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:#e04a3a;margin-bottom:16px}
.t7-note{color:#a9a9b2;font-size:12.5px;line-height:1.7;margin-bottom:16px}
.t7-list{display:flex;flex-wrap:wrap;gap:8px}
.t7-list span{border:1px solid #232329;border-radius:8px;padding:9px 14px;font-size:12px;color:#d8d8de;background:linear-gradient(180deg,#101014,#0a0a0d);line-height:1.5}
.t7-group{margin-bottom:18px}
.t7-group h4{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:#8a8a92;margin-bottom:10px}
.t7-posters{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.t7-poster{position:relative;aspect-ratio:2/3;border:1px solid #232329;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#141419,#0a0a0d 60%,#17090a);display:flex;align-items:flex-end;transition:transform .2s,border-color .2s}
.t7-poster:hover{transform:translateY(-3px);border-color:#e04a3a}
.t7-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t7-poster span{position:relative;width:100%;padding:8px 8px 9px;font-family:'Trebuchet MS',Tahoma;font-size:10.5px;font-weight:700;color:#fff;line-height:1.3;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85) 45%);text-shadow:0 1px 3px #000}
.t7-callout{border:1px solid #2c2c33;border-radius:14px;background:#0c0c10;margin:34px auto;padding:26px}
.t7-callout p{color:#a9a9b2;font-size:12.5px;line-height:1.75;margin-bottom:10px}
.t7-callout b{color:#e8e8ea}
.t7-why{text-align:center;padding-bottom:52px}
.t7-why p{color:#c9c9d0;font-size:13.5px;line-height:1.8;max-width:480px;margin:0 auto 24px}
.t7-why b{color:#fff}
.t7-scroll::-webkit-scrollbar{width:9px}
.t7-scroll::-webkit-scrollbar-thumb{background:#26262c;border-radius:5px}
.t7-scroll::-webkit-scrollbar-track{background:#0a0a0d}
.t7-mini-rent{color:#ff7a6e !important;font-weight:700;letter-spacing:.14em}

/* ---------- WMP toggle ---------- */
.wmp-toggle{width:30px;height:30px;border-radius:50%;border:1px solid #4a6a8f;background:linear-gradient(180deg,#3a5a80,#1d3450);color:#cfe0f5;font-size:11px;flex:0 0 30px;display:flex;align-items:center;justify-content:center}
.wmp-toggle:hover{filter:brightness(1.2)}

/* ---------- Enjoy balloon ---------- */
#enjoy-balloon{position:fixed;right:14px;bottom:52px;max-width:270px;background:#ffffe1;border:1px solid #000;border-radius:6px;padding:12px 14px;font-size:11.5px;line-height:1.55;box-shadow:2px 4px 12px rgba(0,0,0,.35);z-index:9500;animation:winopen .2s}
#enjoy-balloon b{display:block;margin-bottom:4px;font-size:12.5px}
#enjoy-balloon a{color:#c81e1e;font-weight:700}
#enjoy-balloon::after{content:"";position:absolute;bottom:-9px;right:26px;border-width:9px 8px 0 8px;border-style:solid;border-color:#ffffe1 transparent transparent}
#enjoy-balloon .eb-x{position:absolute;top:5px;right:6px;border:none;background:transparent;font-size:10px;color:#666;padding:2px}
#plain-balloon{position:fixed;right:14px;bottom:52px;max-width:270px;background:#ffffe1;border:1px solid #000;border-radius:6px;padding:12px 14px;font-size:11.5px;line-height:1.55;box-shadow:2px 4px 12px rgba(0,0,0,.35);z-index:9500;animation:winopen .2s}
#plain-balloon b{display:block;margin-bottom:4px;font-size:12.5px}
#plain-balloon{cursor:pointer}
#plain-balloon a{color:#c81e1e;font-weight:700}
#plain-balloon::after{content:"";position:absolute;bottom:-9px;right:26px;border-width:9px 8px 0 8px;border-style:solid;border-color:#ffffe1 transparent transparent}
#plain-balloon .eb-x{position:absolute;top:5px;right:6px;border:none;background:transparent;font-size:10px;color:#666;padding:2px}

.t7-lens-set{width:min(440px,86%);filter:drop-shadow(0 16px 30px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(200,30,30,.18));margin-bottom:18px;animation:t7float 6s ease-in-out infinite}

/* ---------- Round 4 ---------- */
.iv-stage video{max-width:100%;max-height:100%;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.t7-video .t7-frame{position:relative;aspect-ratio:16/9;border:1px solid #232329;border-radius:12px;overflow:hidden;background:#000}
.t7-video .t7-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.movie-txt .r .r2{display:block;color:#666;font-weight:400;font-size:11.5px;margin-top:3px;text-transform:none}

/* ---------- Round 7 ---------- */
.sm-item.sm-dead{opacity:.45;pointer-events:none;cursor:default}
.sm-item.sm-dead b{font-weight:400}

/* ============================================================
   Mobile pass (V12): thumb-sized targets, a start menu that
   works without sideways room, and a taskbar that stays legible.
   Nothing here changes how any of it looks on a desktop.
   ============================================================ */

@media (max-width:640px){
  /* the flyout had nowhere to go sideways, so it drops open in place */
  .sm-fly{position:static;left:auto;bottom:auto;min-width:0;width:100%;
    border:0;border-radius:0;box-shadow:none;background:#e8f1fd;
    padding:4px 0 6px;margin-top:6px}
  .sm-item:hover .sm-fly{display:none}
  .sm-item.open .sm-fly{display:block}
  .sm-item.open{flex-wrap:wrap}
  .sm-fly .sm-item{padding-left:18px}
  #start-menu{max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* taskbar buttons stay readable and scroll instead of shrinking to slivers */
  #taskbar{height:46px}
  #task-buttons{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:5px}
  #task-buttons::-webkit-scrollbar{display:none}
  .tb-btn{min-width:118px;flex:0 0 auto;height:34px}
  #start-btn{height:38px}
  #tray{min-height:44px;display:flex;align-items:center}

  /* window chrome sized for a thumb: same XP look, bigger hit area */
  .tbar{height:48px;padding-right:4px}
  .tt-btn{width:42px;height:34px;flex:0 0 42px;font-size:15px}
  .win-status{min-height:34px;display:flex;align-items:center}

  /* image viewer arrows */
  .iv-bar{flex:0 0 56px}
  .iv-bar .xp-btn{padding:13px 20px;min-height:44px;display:inline-flex;align-items:center}

  /* tray and start button */
  #tray > span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .wmp-toggle{min-width:44px;min-height:44px}
  .fold-item{min-height:44px}
}

/* the media player is an audio widget, not a document: on a phone it docks
   above the taskbar instead of swallowing the whole screen */
@media (max-width:720px){
  .win.win-mini{
    left:10px !important;right:10px !important;width:auto !important;
    top:auto !important;bottom:52px !important;height:208px !important;
    border-radius:7px 7px 4px 4px;
  }
  .win.win-mini .tbar{border-radius:6px 6px 0 0}
  .win.win-mini .wmp-frame{min-height:0}
  .win.win-mini.maxed{left:0 !important;right:0 !important;top:0 !important;
    bottom:auto !important;height:calc(100% - 46px) !important;border-radius:0}
}

/* Log Off gains a way out to the ordinary website, no password required */
.logoff-dlg{min-width:430px}
.lo-ic.web{background:linear-gradient(160deg,#5bc8f0,#1a72d8)}
.lo-note{padding:0 18px 12px;font-size:11px;line-height:1.5;color:#3a4a5a;text-align:center}
@media (max-width:640px){
  .logoff-dlg{min-width:0;width:92vw;max-width:92vw;left:50%;right:auto;box-sizing:border-box}
  .lo-band{flex-wrap:wrap;gap:12px 8px;padding:20px 12px}
  .lo-band button{flex:1 1 28%;min-width:0;font-size:11px}
  .lo-band button span.lo-ic{width:40px;height:40px;font-size:19px}
  .lo-note{padding:0 14px 12px;font-size:10.5px}
}

/* phones zoom into any box with text under 16px and stay zoomed */
@media (pointer:coarse){ .dlg-form input,.lg-row input,.chat-in input{font-size:16px} .cmd-body{font-size:16px} }

/* dialogs keep their centring while they animate in. The old animation dropped the centring
   for a split second, which pushed the dialog off the right edge and made phones zoom out */
@keyframes dlgopen{from{transform:translate(-50%,-50%) scale(.92);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* The welcome window owns the centre of the screen. The newsletter question sits below it,
   so if someone never closes the welcome the two still do not collide. */
#nl-dlg{top:auto;bottom:13vh;transform:translateX(-50%);animation:dlgup .2s ease-out}

/* on phones the newsletter question sits at the bottom, above the taskbar, so it never covers a video */
@keyframes dlgup{from{transform:translate(-50%,16px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media (max-width:720px){
  #nl-dlg{top:auto;bottom:56px;transform:translateX(-50%);animation:dlgup .2s ease-out}
}

/* on phones the TRIBE7 teaser docks small above the taskbar, like the Media Player */
@media (max-width:720px){
  .win.t7-mini .player-body{display:flex;flex-direction:column;height:100%}
  .win.t7-mini .player-frame{flex:1;min-height:0;aspect-ratio:auto}
  .win.t7-mini .player-frame iframe{width:100%;height:100%}
}


/* ---------- Front door ---------- */
/* The backdrop lives on two halves so it can part like a curtain. Both halves carry
   the same image at twice their own width, one anchored left and one right, which
   makes them read as a single continuous screen until they slide apart. */
/* transparent so the parting curtain reveals the desktop itself, not another backdrop.
   The left half overlaps by 1px below, so nothing shows through before it opens. */
#boot{background:transparent}
.cur{
  position:absolute;top:0;bottom:0;width:50%;overflow:hidden;
  background-image:
    radial-gradient(118% 88% at 50% 16%, rgba(103,232,240,.20) 0%, rgba(103,232,240,.055) 34%, transparent 64%),
    radial-gradient(95% 72% at 50% 112%, rgba(17,144,168,.26) 0%, transparent 62%),
    linear-gradient(172deg, #0e2c37 0%, #09202a 44%, #050f13 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:100vw 100vh,100vw 100vh,100vw 100vh,140px 140px;
  transition:transform .95s cubic-bezier(.76,0,.24,1);
  will-change:transform;
  animation:doorBreathe 9s ease-in-out infinite;
}
.cur-l{left:0;width:calc(50% + 1px);background-position:0 0,0 0,0 0,0 0}
.cur-r{right:0;background-position:-50vw 0,-50vw 0,-50vw 0,0 0}
/* both halves breathe identically, so nothing gives away the join */
@keyframes doorBreathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.07)}}

.boot-inner{position:relative;z-index:2;transition:opacity .32s ease,transform .32s ease}

/* choosing JabrielOS parts the curtain */
#boot.open{pointer-events:none}
#boot.open .boot-inner{opacity:0;transform:scale(.965)}
#boot.open .cur-l{transform:translateX(-100%)}
#boot.open .cur-r{transform:translateX(100%)}

/* Choosing the Studio is a plain link. Nothing is animated on the way out.
   A page load cannot be animated across reliably: the browser tears down one
   document and builds the next, and on a slow connection that gap is however
   long it is. Anything we play over it turns into a black hold. */

#boot-choice{margin-top:30px;animation:bcIn .45s ease-out}
@keyframes bcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bc-q{color:#fff;font:600 17px/1.4 'Trebuchet MS',Tahoma,sans-serif;margin:0 0 22px}
.bc-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.bc-btn{display:inline-flex;align-items:center;justify-content:center;min-width:232px;
  padding:14px 26px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.06);color:#fff;font:700 14px/1 Tahoma,sans-serif;letter-spacing:.02em;
  cursor:pointer;text-decoration:none;transition:transform .15s,filter .2s}
.bc-btn:hover{transform:translateY(-2px)}
.bc-btn.primary{background:linear-gradient(180deg,#8ff1f7 0%,#67e8f0 42%,#1190a8 100%);
  border-color:rgba(190,248,252,.9);color:#04181d;text-shadow:0 1px 0 rgba(255,255,255,.35);
  animation:aquaGlow 3.4s ease-in-out infinite}
@keyframes aquaGlow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 0 18px rgba(103,232,240,.34),0 6px 18px rgba(0,0,0,.35)}
  50%    {box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 0 32px rgba(103,232,240,.66),0 6px 18px rgba(0,0,0,.35)}}
.bc-btn.silver{background:linear-gradient(180deg,#f8fafb 0%,#e1e8eb 40%,#b7c3c8 100%);
  border-color:rgba(255,255,255,.92);color:#12222a;text-shadow:0 1px 0 rgba(255,255,255,.75);
  animation:silverGlow 3.4s ease-in-out infinite}
@keyframes silverGlow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 18px rgba(214,230,236,.34),0 6px 18px rgba(0,0,0,.35)}
  50%    {box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 32px rgba(232,244,249,.66),0 6px 18px rgba(0,0,0,.35)}}
.bc-btn.silver:hover{background:linear-gradient(180deg,#fff 0%,#eaf0f3 40%,#c4d0d5 100%)}
.bc-note{color:rgba(255,255,255,.55);font:12px/1.65 Tahoma,sans-serif;margin:24px 0 0}
/* v51 door: one big ENTER to the classic site, JabrielOS offered underneath */
.bc-enter{min-width:270px;padding:18px 30px 18px calc(30px + .34em);font:800 16px/1 Tahoma,sans-serif;
  letter-spacing:.34em;text-transform:uppercase}
.bc-alt{margin:26px auto 0;max-width:330px;padding:0 22px}
.bc-alt p{color:rgba(255,255,255,.62);font:13px/1.6 Tahoma,sans-serif;margin:0 0 12px}
.bc-btn.bc-ghost{min-width:0;padding:11px 22px;font-size:13px;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.38)}
.bc-btn.bc-ghost:hover{background:rgba(103,232,240,.1);border-color:rgba(103,232,240,.7)}
@media (max-width:620px){
  .bc-enter{width:100%;max-width:300px}
  .bc-btn.bc-ghost{width:auto;padding:11px 22px}
}
@media (max-width:620px){
  .boot-logo{width:132px}
  #boot-choice{margin-top:24px}
  .bc-btns{flex-direction:column;align-items:center;padding:0 22px}
  .bc-btn{width:100%;max-width:300px;min-width:0;padding:15px 20px}
}
@media (prefers-reduced-motion:reduce){
  .cur,.bc-btn.primary,.bc-btn.silver{animation:none;transition:none}
  #boot.open .cur-l,#boot.open .cur-r{display:none}
}

/* ---------- Permanent way out, in the tray ---------- */
#tray-plain{
  display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  color:#fff;font-size:11px;text-decoration:none;white-space:nowrap;transition:background .2s}
#tray-plain:hover{background:rgba(255,255,255,.32)}
.darkmode #tray-plain{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}

/* ---------- Log Off, with a line saying where it goes ---------- */
.sm-foot{height:auto;min-height:50px}
.sm-lbl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;text-align:left}
.sm-lbl small{font-size:10px;color:rgba(255,255,255,.66);font-weight:400;margin-top:1px}

/* ---------- Come and click me ---------- */
@keyframes jfPulse{0%,100%{box-shadow:0 0 0 0 rgba(103,232,240,0)}50%{box-shadow:0 0 0 7px rgba(103,232,240,.26)}}
@keyframes jfGlow{0%,100%{filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45))}
  50%{filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45)) drop-shadow(0 0 9px rgba(103,232,240,.95))}}
.dt-icon.pulse{animation:jfPulse 2.4s ease-in-out infinite;border-radius:6px}
.dt-icon.pulse .ig{animation:jfGlow 2.4s ease-in-out infinite}
#start-btn.pulse{animation:jfPulse 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .dt-icon.pulse,.dt-icon.pulse .ig,#start-btn.pulse,#boot-choice{animation:none}
}

/* ============================================================
   V44 · phone pass, after going live
   ============================================================ */

/* ---------- the video window ---------- */
/* the still shows the moment the window opens; the player draws over it */
.player-frame{background-position:center;background-size:cover;background-repeat:no-repeat}
.player-frame iframe{z-index:1}
.pf-load{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  border:3px solid rgba(255,255,255,.28);border-top-color:#fff;animation:pfSpin .8s linear infinite;pointer-events:none;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.player-frame.ready .pf-load,.player-frame.local-note .pf-load{display:none}
@keyframes pfSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .pf-load{animation-duration:2.4s} }
.player-credit{display:none}

@media (max-width:720px){
  /* ---------- taskbar: Start, then the tray, on one clean surface ---------- */
  #taskbar{height:46px;background:linear-gradient(180deg,#1290e9 0%,#0b63c6 60%,#0a52a1 100%)}
  .darkmode #taskbar{background:linear-gradient(180deg,#242424,#000)}
  /* every window fills a phone screen, so a row of window tabs has nothing to do
     and nowhere to fit */
  #task-buttons{display:none}
  #start-btn{height:46px;padding:0 15px 0 9px;border-radius:0 13px 13px 0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 4px 0 10px -2px rgba(0,0,0,.35)}
  #tray,.darkmode #tray{flex:1 1 auto;min-width:0;min-height:0;justify-content:flex-end;gap:2px;
    padding:0 8px 0 6px;background:none;box-shadow:none}
  #tray > #tray-vol,#tray-paint{width:40px;min-width:40px;height:46px;min-height:46px;flex:0 0 40px}
  #tray-vol{font-size:20px}
  #tray-paint svg{width:19px;height:19px}
  #tray-plain{flex:0 0 auto;height:32px;padding:0 14px;margin:0 6px 0 4px;font-size:13.5px;line-height:1}
  /* the time over AM / PM, the way a narrow tray shows it */
  #tray > #clock{display:block;flex:0 0 auto;width:36px;min-width:36px;min-height:0;white-space:normal;
    font-size:11px;line-height:1.2;text-align:center}
  #start-menu{bottom:46px}

  /* windows stop at the top of the bar instead of sliding 8px under it */
  .win{height:calc(100% - 46px) !important}
  /* with no tabs there is nowhere to bring a minimised window back from */
  .win:not(.win-mini) .tt-btn.min{display:none}

  /* ---------- the video window ---------- */
  .player-body{height:100%;min-height:0}
  .player-frame{flex:0 0 auto}
  /* a vertical video takes all the room there is */
  .player-frame.tall{flex:1 1 0;min-height:0;aspect-ratio:auto}
  .player-info{flex:0 0 auto;font-size:13px;padding:12px 14px}
  .player-info .watch-ext{font-size:12.5px}
  /* the credit panel says it better, so the short note does not repeat above it */
  .player-body.has-credit .player-info i{display:none}

  .player-credit{flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:22px 26px 26px;text-align:center;color:#fff;
    background:radial-gradient(120% 70% at 50% 0%,#1b1b1d 0%,#0a0a0b 60%,#000 100%);
    border-top:1px solid #1f1f22;font-family:'Trebuchet MS',Tahoma,sans-serif}
  .pc-role{font-size:11.5px;line-height:1.6;letter-spacing:.3em;text-transform:uppercase;color:#f0655f;margin-bottom:8px;padding-left:.3em;max-width:100%}
  .pc-name{font-size:27px;line-height:1.1;font-weight:700;letter-spacing:.01em}
  .pc-rule{width:38px;height:1px;background:rgba(255,255,255,.3);margin:18px 0 16px}
  .pc-desc{font-family:Tahoma,Verdana,sans-serif;font-size:14.5px;line-height:1.55;color:#c9c9cc;max-width:30ch;margin:0}
}
/* a phone on its side has no spare room under the video */
@media (max-width:720px) and (max-height:560px){ .player-credit{display:none} .player-body.has-credit .player-info i{display:block} }
@media (max-width:350px){ #tray > #clock{display:none} #tray-plain{padding:0 11px;font-size:13px} }

/* A phone on its side is too short for the Start menu, and the top was off the screen.
   Only screens under 490px tall get this: the menu stops at the top and scrolls. */
@media (max-height:490px){#start-menu{max-height:calc(100vh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch}}