/* ChumSum 0.1.2 "Retro 90s" theme — loaded after chumsum.css (default theme; ?theme=modern for the non-retro look).
   Reusable window chrome for pop-up/draggable windows:
   .win  .win-titlebar  .win-title  .win-ctrls  .win-ctl  .win-body  .win-statusbar  .btn98  .field98  .inset98
   Pixel font: Press Start 2P (SIL OFL 1.1, self-hosted, see fonts/OFL-PressStart2P.txt). */
@font-face{font-family:"PressStart";src:url("../fonts/PressStart2P-Regular.ttf") format("truetype");font-display:swap}
:root{
  --w-face:#c0c0c0; --w-light:#fff; --w-hi:#dfdfdf; --w-shadow:#808080; --w-dark:#0a0a0a;
  --w-title1:#000080; --w-title2:#1084d0; --w-title-off1:#808080; --w-title-off2:#b5b5b5;
  --w-desk:#008080; --w-ink:#000; --w-link:#0000ee; --w-sel:#000080;
  --ui-font:Tahoma,"MS Sans Serif","Microsoft Sans Serif","Segoe UI",Geneva,Verdana,sans-serif;
  --px-font:"PressStart","Courier New",monospace; --tb-h:38px;
  --ink:#000; --muted:#404040; --card:#c0c0c0; --card2:#c0c0c0; --accent:#000080;
}
html.theme-retro body{font-family:var(--ui-font);font-size:14px;line-height:1.4;color:var(--w-ink);
  background:var(--w-desk);min-height:100vh;padding-bottom:calc(var(--tb-h) + 8px)}
html.theme-retro a{color:var(--w-link);text-decoration:underline}
html.theme-retro a:visited{color:#551a8b}
html.theme-retro .meta,html.theme-retro .sub{color:#404040;font-size:12px}
html.theme-retro h2,html.theme-retro h3,html.theme-retro .page-title{font-family:var(--px-font);font-size:13px;line-height:1.6;letter-spacing:.5px;margin:6px 0 8px;font-weight:normal}
html.theme-retro h3{font-size:11px}
html.theme-retro :focus-visible{outline:1px dotted #000;outline-offset:-4px}
html.theme-retro .foot{display:none}
html.theme-retro .appbar{display:none}

/* ---------- window chrome (reusable) ---------- */
.win{background:var(--w-face);color:var(--w-ink);border:0;border-radius:0;padding:3px;
  box-shadow:inset -1px -1px var(--w-dark),inset 1px 1px var(--w-hi),inset -2px -2px var(--w-shadow),inset 2px 2px var(--w-light),3px 3px 0 rgba(0,0,0,.25)}
.win-titlebar{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:22px;padding:2px 3px 2px 4px;
  background:linear-gradient(90deg,var(--w-title1),var(--w-title2));color:#fff;font-weight:bold;font-size:13px;user-select:none;-webkit-user-select:none}
.win:not(.active) > .win-titlebar,.wm .win:not(.active) > .win-titlebar{background:linear-gradient(90deg,var(--w-title-off1),var(--w-title-off2));color:#e8e8e8}
body:not(.wm) .win > .win-titlebar{background:linear-gradient(90deg,var(--w-title1),var(--w-title2));color:#fff}
.win-title{display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.win-title img{image-rendering:pixelated;flex:none}
.win-title-text{overflow:hidden;text-overflow:ellipsis}
.win-ctrls{display:flex;gap:2px;flex:none}
.win-ctl{display:inline-grid;place-items:center;width:18px;height:16px;padding:0;background:var(--w-face);color:#000!important;font:bold 11px/1 var(--ui-font);
  text-decoration:none!important;border:0;cursor:pointer;
  box-shadow:inset -1px -1px var(--w-dark),inset 1px 1px var(--w-light),inset -2px -2px var(--w-shadow),inset 2px 2px var(--w-hi)}
.win-ctl:active{box-shadow:inset 1px 1px var(--w-dark),inset -1px -1px var(--w-light),inset 2px 2px var(--w-shadow);padding:1px 0 0 1px}
.win-ctl.win-close{margin-left:2px}
.win-back{display:none}
.win-body{padding:10px;max-width:none;margin:0}
.win-statusbar{display:flex;gap:3px;margin-top:3px;font-size:12px}
.win-statusbar .sb-cell{padding:2px 6px;box-shadow:inset -1px -1px var(--w-light),inset 1px 1px var(--w-shadow);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-statusbar .sb-cell.uc-badge,.win-statusbar .sb-hits{flex:none}
.inset98,.field98,
html.theme-retro input[type=text],html.theme-retro input[type=email],html.theme-retro input[type=password],html.theme-retro input[type=search],
html.theme-retro input[type=url],html.theme-retro input[type=number],html.theme-retro textarea,html.theme-retro select,
html.theme-retro .search,html.theme-retro .login-card input,html.theme-retro dialog input{
  background:#fff;color:#000;border:0;border-radius:0;padding:5px 6px;font:14px var(--ui-font);
  box-shadow:inset -1px -1px var(--w-light),inset 1px 1px var(--w-shadow),inset -2px -2px var(--w-hi),inset 2px 2px var(--w-dark)}
html.theme-retro textarea{width:100%;resize:vertical}
html.theme-retro input:focus,html.theme-retro textarea:focus{outline:1px dotted #000;outline-offset:-4px}

/* buttons that press in */
.btn98,html.theme-retro .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:28px;min-width:72px;padding:4px 12px;
  background:var(--w-face);color:#000!important;font:14px var(--ui-font);text-decoration:none!important;border:0;border-radius:0;cursor:pointer;filter:none;transform:none;
  box-shadow:inset -1px -1px var(--w-dark),inset 1px 1px var(--w-light),inset -2px -2px var(--w-shadow),inset 2px 2px var(--w-hi)}
.btn98:hover,html.theme-retro .btn:hover{filter:none}
.btn98:active,html.theme-retro .btn:active,.btn98.pressed{transform:none;padding:5px 11px 3px 13px;
  box-shadow:inset -1px -1px var(--w-light),inset 1px 1px var(--w-dark),inset -2px -2px var(--w-hi),inset 2px 2px var(--w-shadow)}
html.theme-retro .btn:focus-visible{outline:1px dotted #000;outline-offset:-5px}
html.theme-retro .btn:disabled{color:#808080!important;text-shadow:1px 1px #fff;opacity:1;cursor:default}
html.theme-retro .btn.primary{font-weight:bold;box-shadow:0 0 0 1px #000,inset -1px -1px var(--w-dark),inset 1px 1px var(--w-light),inset -2px -2px var(--w-shadow),inset 2px 2px var(--w-hi)}
html.theme-retro .btn.plusish,html.theme-retro .btn.minusish,html.theme-retro .btn.ghost,html.theme-retro .btn.tab{background:var(--w-face)}
html.theme-retro .btn.plusish{color:#006400!important;font-weight:bold}
html.theme-retro .btn.minusish{color:#a00000!important;font-weight:bold}

/* ---------- desktop ---------- */
.desktop{position:relative;min-height:calc(100vh - var(--tb-h));padding:12px 12px 12px 100px}
.signed-out .desktop{padding:12px}
.desk-icons{position:absolute;left:8px;top:10px;display:flex;flex-direction:column;gap:14px;width:84px;z-index:1}
.desk-icon{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff!important;text-decoration:none!important;font-size:12px;text-align:center;text-shadow:1px 1px 0 #000;padding:2px}
.desk-icon:focus-visible span:last-child,.desk-icon:hover span:last-child{background:var(--w-sel);outline:1px dotted #fff}
.di-img{width:36px;height:36px;display:grid;place-items:center;font-size:26px;line-height:1;filter:drop-shadow(1px 1px 0 #000)}
.di-feed::before{content:"📰"}.di-list::before{content:"📇"}.di-profile::before{content:"🧑"}.di-edit::before{content:"🛠️"}.di-buddies::before{content:"🌼"}
.app-window{max-width:980px;margin:0 auto}
body:not(.wm) .app-window{position:relative}

/* ---------- window manager (JS on) ---------- */
.wm .wm-win{position:absolute;display:flex;flex-direction:column;min-width:240px;min-height:120px;max-width:calc(100vw - 8px)}
.wm .wm-win > .win-body{flex:1;overflow:auto;background:var(--w-face)}
.wm .wm-win.maxed{left:0!important;top:0!important;width:100%!important;height:calc(100vh - var(--tb-h))!important;position:fixed}
.wm .wm-win.minimized{display:none}
.wm .wm-win .win-titlebar{cursor:move;touch-action:none}
.wm-pop{animation:wmPop .22s cubic-bezier(.2,1.6,.4,1) both}
.wm-closing{animation:wmClose .16s ease-in both;pointer-events:none}
.wm-mini{animation:wmMini .18s ease-in both}
@keyframes wmPop{0%{transform:scale(.25);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes wmClose{to{transform:scale(.3);opacity:0}}
.wm-closing.wm-vacuum{animation:wmVacuum var(--wm-close-ms,600ms) cubic-bezier(.55,0,.9,.4) both;transform-origin:var(--ox,50%) var(--oy,50%)}
@keyframes wmVacuum{0%{transform:scale(1) rotate(0);opacity:1;clip-path:inset(0 0 0 0)}70%{opacity:1}100%{transform:scale(.05) rotate(-10deg);opacity:0;clip-path:inset(var(--oy,50%) var(--ox2,50%) var(--oy2,50%) var(--ox,50%))}}
@keyframes wmMini{to{transform:translateY(60vh) scale(.2);opacity:0}}
.win.title-flash > .win-titlebar{animation:tflash .9s steps(1) infinite}
@keyframes tflash{0%{background:linear-gradient(90deg,#800000,#d01010)}50%{background:linear-gradient(90deg,var(--w-title1),var(--w-title2))}}

/* ---------- taskbar ---------- */
.w95-taskbar{position:fixed;left:0;right:0;bottom:0;height:var(--tb-h);z-index:9000;display:flex;align-items:center;gap:4px;padding:3px 3px;
  background:var(--w-face);box-shadow:inset 0 1px var(--w-hi),inset 0 2px var(--w-light);font-size:13px}
.w95-start{position:relative;flex:none}
.w95-start > summary{list-style:none;font-weight:bold;min-width:70px;height:30px}
.w95-start > summary::-webkit-details-marker{display:none}
.w95-start[open] > summary{box-shadow:inset -1px -1px var(--w-light),inset 1px 1px var(--w-dark),inset -2px -2px var(--w-hi),inset 2px 2px var(--w-shadow)}
.w95-startmenu{position:absolute;bottom:34px;left:0;min-width:220px;display:flex;z-index:9100}
.sm-band{width:26px;background:linear-gradient(0deg,var(--w-title1),var(--w-title2));display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}
.sm-band span{writing-mode:vertical-rl;transform:rotate(180deg);color:#c0c0c0;font:bold 16px var(--ui-font)}.sm-band b{color:#fff}
.w95-startmenu ul{list-style:none;margin:0;padding:2px;flex:1}
.w95-startmenu li a{display:block;padding:7px 10px;color:#000!important;text-decoration:none!important;white-space:nowrap}
.w95-startmenu li a:hover,.w95-startmenu li a:focus-visible{background:var(--w-sel);color:#fff!important}
.w95-startmenu .sm-sep{border-top:1px solid var(--w-shadow);box-shadow:0 -1px 0 #fff inset}
.w95-tasks{flex:1;display:flex;gap:3px;overflow:hidden;min-width:0}
.w95-task{display:flex;align-items:center;gap:4px;max-width:180px;flex:1 1 0;min-width:0;height:30px;padding:0 8px;background:var(--w-face);border:0;font:13px var(--ui-font);color:#000;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:inset -1px -1px var(--w-dark),inset 1px 1px var(--w-light),inset -2px -2px var(--w-shadow),inset 2px 2px var(--w-hi)}
.w95-task.active{font-weight:bold;background:repeating-conic-gradient(#c0c0c0 0 25%,#fff 0 50%) 0 0/2px 2px;
  box-shadow:inset -1px -1px var(--w-light),inset 1px 1px var(--w-dark),inset -2px -2px var(--w-hi),inset 2px 2px var(--w-shadow)}
.w95-task.flash{animation:taskflash .9s steps(1) infinite}
@keyframes taskflash{50%{background:var(--w-sel);color:#fff}}
.w95-task .badge,.tab-badge{background:#d00000;color:#fff;border-radius:8px;padding:0 5px;font-size:11px;font-weight:bold}
.w95-tray{display:flex;align-items:center;gap:6px;height:30px;padding:0 8px;flex:none;box-shadow:inset -1px -1px var(--w-light),inset 1px 1px var(--w-shadow)}
.tray-btn{background:none;border:0;cursor:pointer;font-size:15px;padding:0;line-height:1}
.tray-new{color:#c00000;font-size:16px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{visibility:hidden}}
.tabbar{display:none}
.hitcounter{font-family:"Courier New",monospace;background:#000;color:#39ff14;padding:0 4px;letter-spacing:2px}
.uc-badge{background:repeating-linear-gradient(45deg,#ffd800 0 8px,#000 8px 16px)!important;color:#fff;font:9px var(--px-font);text-shadow:1px 1px #000,-1px -1px #000;padding:3px 8px!important}

/* ---------- sign on (AIM-ish) ---------- */
html.theme-retro .auth-wrap{min-height:calc(100vh - 80px);padding:16px 8px}
html.theme-retro .login-card{width:min(360px,100%);border-radius:0;padding:3px 3px 12px;background:var(--w-face)}
html.theme-retro .login-card > :not(.win-titlebar){margin-left:12px;margin-right:12px}
html.theme-retro .login-card .logo{margin:12px auto 4px;width:auto;height:64px;border-radius:0;display:grid;place-items:center;font:20px var(--px-font);color:#ffd800;
  text-shadow:2px 2px 0 #000;background:linear-gradient(180deg,#0a2a8a,#1e6ad6 60%,#7fb2ff);box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px #fff}
html.theme-retro .login-card h1{font:12px/1.6 var(--px-font);margin:10px 12px 2px}
html.theme-retro .login-card .ver{font:11px var(--ui-font)}
html.theme-retro .login-card label{color:#000;font-size:13px;font-weight:bold}
html.theme-retro .login-actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}
html.theme-retro .linkish{width:100%;text-align:right;font-size:12px}
html.theme-retro .oauth-divider{color:#404040}
html.theme-retro .oauth-divider::before,html.theme-retro .oauth-divider::after{background:var(--w-shadow);box-shadow:0 1px #fff}
html.theme-retro .btn.oauth{justify-content:flex-start;background:var(--w-face)!important;color:#000!important;border:0;font-weight:normal}
html.theme-retro .btn.oauth .oauth-icon{border-radius:0;width:20px;height:20px;box-shadow:1px 1px 0 #000}
html.theme-retro .btn.oauth.discord .oauth-icon{background:#5865F2}
html.theme-retro .btn.oauth.steam .oauth-icon{background:#1b2838;color:#66c0f4}
html.theme-retro .btn.oauth.x .oauth-icon{background:#000;color:#fff}
html.theme-retro .oauth-hint{color:#404040}
html.theme-retro .oauth-hint code{background:#fff}

/* ---------- messages ---------- */
html.theme-retro .flash,html.theme-retro .login-error.show{border-radius:0;font-weight:normal;color:#000;background:#ffffe1;border:1px solid #000;padding:8px 10px 8px 34px;position:relative}
html.theme-retro .flash::before,html.theme-retro .login-error.show::before{content:"i";position:absolute;left:8px;top:7px;width:18px;height:18px;border-radius:50%;background:#000080;color:#fff;font:bold 12px/18px Georgia,serif;text-align:center}
html.theme-retro .flash.err::before,html.theme-retro .login-error.show::before{content:"✕";background:#c00000;font-family:var(--ui-font)}
html.theme-retro .flash.warn::before{content:"!";background:#d8a800;color:#000}
html.theme-retro .empty{border-radius:0;background:#fff;color:#000;border:0;box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px #fff;padding:12px}

/* ---------- feed: buddy list + IM log ---------- */
.feed-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px;align-items:start}
html.theme-modern .feed-layout{display:block}
.buddy-list,.bl-body{background:#fff;box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px #fff,inset 2px 2px var(--w-dark);padding:6px;font-size:13px}
.buddy-group > summary{cursor:pointer;font-weight:bold;padding:2px 0;list-style:none}
.buddy-group > summary::before{content:"▸ ";font-size:10px}
.buddy-group[open] > summary::before{content:"▾ "}
.buddy-group ul{list-style:none;margin:0 0 6px;padding:0 0 0 10px}
.buddy{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:2px 3px;cursor:default}
.buddy.clickable{cursor:pointer}.buddy.clickable:hover,.buddy.clickable:focus-visible{background:var(--w-sel);color:#fff}
.buddy.clickable:hover .away-msg,.buddy.clickable:focus-visible .away-msg{color:#ddd}
.buddy-name{font-weight:bold}
.away-msg{width:100%;padding-left:16px;font-size:11px;color:#555;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block;background:#e0b000;box-shadow:inset -1px -1px rgba(0,0,0,.35),0 0 0 1px #6b5500}
.status-dot.on,.buddy.online .status-dot{background:#2bd12b;box-shadow:inset -1px -1px rgba(0,0,0,.35),0 0 0 1px #0a5a0a}
.buddy.offline .status-dot{background:#c8c8c8;box-shadow:0 0 0 1px #777}
.buddy.offline .buddy-name{color:#666;font-weight:normal}
.buddy .unread{margin-left:auto;background:#d00000;color:#fff;border-radius:8px;padding:0 5px;font-size:11px;font-weight:bold}
.buddy-legend{font-size:11px;color:#404040;display:flex;align-items:center;gap:4px;margin:4px 0 0}
.im-window{display:flex;flex-direction:column;gap:6px}
html.theme-retro .feed-list{gap:0;background:#fff;padding:8px;box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px #fff,inset 2px 2px var(--w-dark);max-height:60vh;overflow:auto}
html.theme-retro .feed-card{display:block;background:none;border:0;border-radius:0;box-shadow:none;padding:4px 0;transform:none!important;border-bottom:1px dotted #c0c0c0}
html.theme-retro .feed-card .row{display:inline-flex;gap:6px;margin-right:6px}
html.theme-retro .feed-card .row strong{color:#c00000}
html.theme-retro .feed-card .row strong::after{content:":"}
html.theme-retro .feed-card > div:nth-child(2){display:inline}
html.theme-retro .feed-card .meta{display:block;font-size:11px;color:#808080}
.im-compose{display:flex;gap:6px;align-items:stretch}
.im-fake-input{flex:1;background:#fff;padding:6px;color:#808080;box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px #fff,inset 2px 2px var(--w-dark)}

/* ---------- score pills, napster-style tables ---------- */
html.theme-retro .score-pill{border-radius:0;min-width:44px;padding:1px 6px;font:12px var(--ui-font);font-weight:bold;box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px #fff}
html.theme-retro .score-pill.pos{background:#fff;color:#006400}
html.theme-retro .score-pill.neg{background:#fff;color:#a00000}
html.theme-retro .score-pill.zero{background:#fff;color:#404040}
html.theme-retro .toolbar{gap:6px}
html.theme-retro .stats{font-size:12px}
html.theme-retro .grid.napster{display:block;background:#fff;box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px #fff,inset 2px 2px var(--w-dark);padding:2px}
.napster-head{display:grid;position:sticky;top:0;z-index:1}
.napster-head span{background:var(--w-face);padding:3px 6px;font-size:12px;box-shadow:inset -1px -1px var(--w-dark),inset 1px 1px #fff,inset -2px -2px var(--w-shadow)}
html.theme-retro .napster .card{display:grid;align-items:center;gap:0;background:none;border:0;border-radius:0;box-shadow:none;padding:0;transform:none!important}
html.theme-retro .napster .card:nth-of-type(odd){background:#f2f2f2}
html.theme-retro .napster .card:hover{background:var(--w-sel);color:#fff}
html.theme-retro .napster .card:hover a,html.theme-retro .napster .card:hover .meta{color:#fff}
html.theme-retro .napster .card > .row{display:contents}
html.theme-retro .napster .card > *,html.theme-retro .napster .card > .row > *{padding:3px 6px}
html.theme-retro .napster .name{font-weight:normal;font-size:14px}
html.theme-retro .napster .score-actions .btn{min-width:44px;min-height:24px;padding:1px 6px;margin:2px}
.napster-list .napster-head,html.theme-retro .napster-list .card{grid-template-columns:minmax(0,1fr) 64px 60px 60px 110px}
.napster-rankers .napster-head,html.theme-retro .napster-rankers .card{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}
html.theme-retro .napster .meta{font-size:11px}

/* ---------- dialogs = IM-style windows ---------- */
html.theme-retro dialog.dlg{border-radius:0;padding:3px;background:var(--w-face);color:#000;width:min(380px,94vw)}
html.theme-retro dialog.dlg::backdrop{background:rgba(0,0,0,.15)}
html.theme-retro dialog.dlg form{padding:0 0 8px;gap:8px}
html.theme-retro dialog.dlg form > :not(h2){margin:0 10px}
html.theme-retro dialog.dlg h2{margin:0;padding:3px 6px;background:linear-gradient(90deg,var(--w-title1),var(--w-title2));color:#fff;font:bold 13px var(--ui-font);display:flex;justify-content:space-between}
html.theme-retro dialog.dlg h2::after{content:"✕";background:var(--w-face);color:#000;width:16px;height:14px;font-size:10px;display:grid;place-items:center;box-shadow:inset -1px -1px #000,inset 1px 1px #fff}

/* ---------- profile ---------- */
html.theme-retro .globalsum-card{background:#000;border:0;border-radius:0;color:#39ff14;box-shadow:inset 2px 2px var(--w-shadow),inset -2px -2px #fff;padding:12px}
html.theme-retro .globalsum{font:28px var(--px-font);text-shadow:0 0 6px #39ff14}
html.theme-retro .globalsum-card .label{color:#ffd800;font-family:var(--px-font);font-size:10px}
html.theme-retro .globalsum-card .meta{color:#9f9}
.profile-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.profile-head .btn{margin-left:auto}
.avatar{width:48px;height:48px;object-fit:cover;box-shadow:inset 1px 1px var(--w-shadow),1px 1px 0 #fff}
.avatar-ph{display:grid;place-items:center;background:#000080;color:#fff;font:18px var(--px-font)}
.profile-blocks{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.pblock-view{background:#fff;padding:10px 12px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.25);font-family:system-ui,"Segoe UI",sans-serif;color:#111}
.pblock-view .pb-title{font:10px var(--px-font);color:#000080;margin:0 0 8px}
.pb-about{white-space:pre-wrap}
.pb-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pb-links a{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef;text-decoration:none;color:#123}
.pb-net{font-size:11px;color:#556}
.pb-embed{position:relative;aspect-ratio:16/9}
.pb-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:4px}
.pb-steam{display:flex;gap:10px;align-items:flex-start;background:linear-gradient(135deg,#1b2838,#2a475e);color:#c7d5e0;padding:10px;border-radius:4px}
.pb-steam a{color:#66c0f4}.pb-steam .meta{color:#8fa3b5}
.pb-steam-av{width:64px;height:64px;border-radius:3px;flex:none}
.pb-steam-ph{display:grid;place-items:center;background:#171a21;color:#66c0f4;font:20px var(--px-font)}
.pb-games{list-style:none;margin:6px 0 0;padding:0;font-size:13px}
.pb-films{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.pb-films a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:#111;font-size:12px}
.pb-films img,.pb-noposter{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:3px;background:#223;display:grid;place-items:center;font-size:28px}
.pb-stars{color:#00a000;letter-spacing:1px}
.profile-custom{position:relative;overflow:hidden;contain:content;isolation:isolate;max-width:100%}
.profile-custom iframe{max-width:100%;border:0}
.profile-custom img{max-width:100%;height:auto}
/* editor */
.block-editor{display:flex;flex-direction:column;gap:8px}
.pblock{border:0;margin:0;padding:6px 10px 10px;background:var(--w-face);box-shadow:inset -1px -1px #fff,inset 1px 1px var(--w-shadow),inset -2px -2px var(--w-shadow),inset 2px 2px #fff}
.pblock legend{display:flex;align-items:center;gap:8px;font-weight:bold;padding:0 4px;background:var(--w-face)}
.pblock input[type=text],.pblock input[type=url]{width:100%}
.pblock.dragging{opacity:.5}.pblock.drop-target{outline:2px dashed #000080}
.drag-handle{cursor:grab;font-size:14px;color:#404040}
.pb-move .btn{min-width:28px;min-height:22px;padding:0 4px;font-size:10px}
.wm .pb-pos{display:none}
body:not(.wm) .pb-move,body:not(.wm) .drag-handle{display:none}

/* ---------- JS windows: buddy list (ICQ), IM, settings ---------- */
.bl-win .win-body{display:flex;flex-direction:column;gap:6px;padding:6px}
.bl-me{display:flex;flex-direction:column;gap:4px;font-size:12px}
.bl-me .row{gap:4px}
.bl-me input{flex:1;min-width:0;padding:3px 5px!important;font-size:12px!important}
.bl-body{flex:1;overflow:auto;min-height:120px}
.bl-note{font-size:11px;color:#555;margin:2px 0}
.im-win .win-body{display:flex;flex-direction:column;gap:6px;padding:6px}
.im-tools{display:flex;gap:4px;flex-wrap:wrap}
.im-tools .btn98{min-width:0;min-height:24px;padding:2px 8px;font-size:12px}
.im-log{flex:1;min-height:120px;overflow:auto;background:#fff;padding:6px;font-size:14px;box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px #fff,inset 2px 2px var(--w-dark);word-wrap:break-word}
.im-line{margin:0 0 3px}
.im-line .who{font-weight:bold}.im-line.mine .who{color:#c00000}.im-line.theirs .who{color:#0000c0}
.im-line .ts{color:#888;font-size:11px}
.im-sys{color:#808080;font-style:italic;font-size:12px}
.im-form{display:flex;gap:6px;align-items:stretch}
.im-form textarea{flex:1;height:52px;resize:none}
.im-count{font-size:11px;color:#555;align-self:flex-end}
.settings-body label{display:flex;align-items:center;gap:6px;margin:6px 0}

/* ---------- mobile / portrait: full-screen cards + bottom tab bar ---------- */
@media (max-width:700px),(orientation:portrait) and (max-width:900px){
  :root{--tb-h:58px}
  html.theme-retro body{font-size:16px}
  .desktop{padding:8px 8px 8px}
  .desk-icons{position:static;flex-direction:row;flex-wrap:wrap;width:auto;gap:10px;margin-bottom:10px;justify-content:space-around}
  .desk-icon{width:72px}
  .wm .desk-icons{display:none}
  .wm .wm-win{position:fixed!important;left:0!important;top:0!important;width:100%!important;height:calc(100% - var(--tb-h))!important;max-width:none;padding:0;box-shadow:none}
  .wm .wm-win .win-titlebar{cursor:default;min-height:44px;font-size:15px}
  .win-back{display:inline-grid!important;width:auto!important;height:32px!important;padding:0 10px!important;margin-right:4px;font-size:14px!important}
  .win-ctl{width:36px;height:30px;font-size:14px}
  .wm .win-min,.wm .win-max{display:none}
  .wm-pop{animation:wmSlide .2s ease-out both}
  @keyframes wmSlide{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
  html.theme-retro .btn,.btn98{min-height:44px}
  .w95-tasks,.w95-tray,.w95-start > summary,.w95-ql,.tb-uc{display:none!important}
  .tabbar{display:flex;flex:1;justify-content:space-around;align-items:stretch;height:100%}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:20px;color:#000!important;text-decoration:none!important;min-height:48px;position:relative}
  .tabbar a span{font-size:11px}
  .tabbar a.on{box-shadow:inset 1px 1px var(--w-dark),inset -1px -1px #fff;background:#d4d4d4}
  .tab-badge{position:absolute;top:2px;right:18%}
  .w95-startmenu{bottom:60px;left:auto;right:0;position:fixed}
  .feed-layout{grid-template-columns:1fr}
  .napster-list .napster-head,html.theme-retro .napster-list .card{grid-template-columns:minmax(0,1fr) 56px 54px 54px}
  html.theme-retro .napster-list .card .meta,.napster-list .napster-head span:last-child{display:none}
  .bl-win.wm-win{height:calc(100% - var(--tb-h))!important}
}
@media (prefers-reduced-motion:reduce){
  .wm-pop,.wm-closing,.wm-mini,.tray-new,.win.title-flash > .win-titlebar,.w95-task.flash{animation:none!important}
}
/* desktop fills the viewport when the window manager is running */
.wm .desktop{position:fixed;inset:0 0 var(--tb-h) 0;overflow:hidden;padding:0;min-height:0}
.wm .app-window{margin:0;max-width:none}
/* Custom 8-way window resize (native resize:both is SE-only) */
@media (min-width:701px){
  .wm .wm-win{overflow:hidden}
  .wm-resize{position:absolute;z-index:6;background:transparent;touch-action:none}
  .wm-resize-n{top:-3px;left:10px;right:10px;height:8px;cursor:ns-resize}
  .wm-resize-s{bottom:-3px;left:10px;right:10px;height:8px;cursor:ns-resize}
  .wm-resize-e{right:-3px;top:10px;bottom:10px;width:8px;cursor:ew-resize}
  .wm-resize-w{left:-3px;top:10px;bottom:10px;width:8px;cursor:ew-resize}
  .wm-resize-nw{top:-4px;left:-4px;width:14px;height:14px;cursor:nwse-resize}
  .wm-resize-ne{top:-4px;right:-4px;width:14px;height:14px;cursor:nesw-resize}
  .wm-resize-sw{bottom:-4px;left:-4px;width:14px;height:14px;cursor:nesw-resize}
  .wm-resize-se{bottom:-4px;right:-4px;width:14px;height:14px;cursor:nwse-resize}
  .wm .wm-win.maxed .wm-resize,.wm .wm-win.minimized .wm-resize{display:none}
}
@media (max-width:700px),(orientation:portrait) and (max-width:900px){
  .wm-resize{display:none!important}
}
html.theme-retro .login-card .ver,html.theme-retro .ver{background:none;color:#404040;padding:0;border:0}
html.theme-retro .feed-layout{display:block}
html.theme-retro .pb-move .btn{min-width:30px;min-height:22px;padding:0 6px;font-size:10px}
html.theme-retro .btn.oauth:disabled{color:#808080!important;text-shadow:1px 1px #fff;cursor:not-allowed}html.theme-retro .btn.oauth:disabled .oauth-icon{opacity:.45}

/* procedural fireworks overlay — never capture clicks */
canvas.cs-fireworks{position:fixed;inset:0;z-index:2;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges}
/* 0.1.4: "You:" row stands apart from contacts; one-way chums show no presence */
.bl-me{background:#ffffe1;border:1px solid #000;padding:4px 5px}
.bl-you{font-weight:bold;color:#000080}
.buddy.private .status-dot{width:8px;height:8px;background:transparent;box-shadow:none;border:1px dashed #888}
.buddy.private .buddy-name{color:#666;font-weight:normal}

/* ======================= 0.0.0.4: early-2000s touches (MyYearbook / MySpace / AIM / ICQ era) =======================
   This whole file is only loaded for the retro theme, so none of this reaches ?theme=modern.
   Pixel font for titles, menus and labels: Pixelify Sans (SIL OFL 1.1, self-hosted; see fonts/README.md and
   fonts/OFL-PixelifySans.txt). Body text keeps --ui-font so long text stays readable. */
@font-face{font-family:"PixelifySans";src:url("../fonts/PixelifySans-Variable.ttf") format("truetype");font-weight:400 700;font-display:swap}
:root{--lbl-font:"PixelifySans",Tahoma,"MS Sans Serif",Verdana,sans-serif;--tk-h:22px}
.win-titlebar,.w95-startmenu li a,.w95-start > summary,.w95-task,.desk-icon,.btn98,html.theme-retro .btn,
html.theme-retro .login-card label,.pblock legend,.buddy-group > summary,.bl-you,.cs-ticker,.fr-label,.fr-note,
.win-statusbar .sb-cell:not(.uc-badge),.bl-legend{font-family:var(--lbl-font)}
.win-titlebar{font-weight:600;letter-spacing:.2px}

/* 16x16 / 32x32 pixel icons (server/static/img/px/*.svg, made by tools/make_pixel_icons.py) */
.px16{width:16px;height:16px;image-rendering:pixelated;flex:none;vertical-align:-3px}
.px32,.di-px img{width:32px;height:32px;image-rendering:pixelated}
.win-title img,.w95-startmenu img,.w95-tray img,.tb-uc,.w95-ql img,.uc-gif{image-rendering:pixelated}
.w95-startmenu li a{display:flex;align-items:center;gap:8px}
.tray-btn img,.tray-new img{display:block}
.di-px{font-size:0}

/* desktop icon column: a little tighter so 7 icons fit 1280x720; wraps to a 2nd column instead of running under the taskbar */
.desk-icons{gap:10px;bottom:8px;flex-wrap:wrap;align-content:flex-start}
.signed-out .desktop{padding-left:100px}

/* news ticker (lines from server/desktop_items.json). CSS animation, pauses on hover/focus, static under reduced motion */
.cs-ticker{position:fixed;top:0;left:0;right:0;height:var(--tk-h);z-index:8999;overflow:hidden;display:flex;align-items:center;
  background:linear-gradient(180deg,#24247a,#000046);color:#ffd800;font-size:13px;line-height:1;white-space:nowrap;
  border-bottom:1px solid #000;box-shadow:inset 0 -1px #6a6ae0}
.cs-ticker-track{display:inline-flex;flex:none;animation:csTicker var(--tk-dur,30s) linear infinite;will-change:transform}
.cs-ticker-run{display:inline-flex;flex:none;min-width:100vw}
.cs-tk-item{padding:0 14px}
.cs-tk-sep{color:#ff66cc}
html.theme-retro .cs-ticker a,html.theme-retro .cs-ticker a:visited{color:#7fffd4;text-decoration:underline}
.cs-ticker:hover .cs-ticker-track,.cs-ticker:focus-within .cs-ticker-track{animation-play-state:paused}
@keyframes csTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
body.has-ticker{padding-top:var(--tk-h)}
.wm.has-ticker .desktop{top:var(--tk-h)}
.wm.has-ticker .wm-win.maxed{top:var(--tk-h)!important;height:calc(100vh - var(--tb-h) - var(--tk-h))!important}

/* small animated under-construction sign on the desktop itself: bottom-right corner just above the taskbar, BELOW every
   window (z-index 0) and clear of the icon column; without the window manager the desktop gets bottom padding so page
   content never reaches it */
/* 0.0.0.24: sign moved into the taskbar (far right, left of the tray); 88x31 gif fits the 32px inner bar height at 1:1 */
.tb-uc{display:block;flex:none;width:88px;height:31px;margin-left:auto;pointer-events:none}
.w95-ql{display:flex;align-items:center;flex:none;gap:2px;height:30px;padding:0 4px;margin-left:2px;box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px var(--w-light)}
.ql-btn{display:grid;place-items:center;width:26px;height:26px;border:0;text-decoration:none}
.ql-btn:hover{box-shadow:inset -1px -1px var(--w-shadow),inset 1px 1px var(--w-hi)}
.ql-btn:active{box-shadow:inset 1px 1px var(--w-shadow),inset -1px -1px var(--w-hi)}
.bugrep-body label{display:block;margin:6px 0 2px}.bugrep-body input[type=text],.bugrep-body textarea,.bugrep-body select{width:100%;box-sizing:border-box}.bugrep-body textarea{height:100px;resize:vertical}
body.has-ticker:not(.wm) .desktop{min-height:calc(100vh - var(--tb-h) - var(--tk-h) - 8px)}
html.theme-retro body.has-ticker .auth-wrap{min-height:calc(100vh - 170px)} /* sign-on page still fits one screen with the ticker */

/* "Future Releases" folder (window manager opens it as a window; without JS / signed out it opens via #future-releases) */
.folder-win{display:none}
.folder-win:target{display:block;position:absolute;left:110px;top:16px;width:min(460px,calc(100% - 120px));z-index:30;scroll-margin-top:60px}
.wm .folder-win:not(.wm-win){display:none!important}
.fr-body,.folder-wm > .win-body{background:#fff!important}
.fr-note{font-size:13px;color:#404040;margin:0 0 10px}
.fr-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.fr-tile{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;color:#000!important;text-decoration:none!important;padding:6px 4px;font-size:13px}
.fr-tile:hover .fr-label,.fr-tile:focus-visible .fr-label{background:var(--w-sel);color:#fff;outline:1px dotted #000}
.fr-icon{position:relative;display:inline-block;width:32px;height:32px}
.soon-badge{position:absolute;left:22px;top:-7px;background:#d00000;color:#fff;font:bold 9px/1 var(--lbl-font);padding:2px 3px;border:1px solid #000;box-shadow:1px 1px 0 #000;letter-spacing:.5px}
.uc-gif{width:88px;height:31px}
.game-ph{text-align:center;padding:6px 4px}
.game-ph h3{margin:8px 0 4px}
.game-ph .soon-big{display:inline-block;background:repeating-linear-gradient(45deg,#ffd800 0 8px,#000 8px 16px);padding:3px;margin:6px 0}
.game-ph .soon-big span{display:block;background:#ffd800;color:#000;font:bold 14px var(--lbl-font);padding:4px 10px}

/* AIM-style status dots: green = online, yellow = away / idle, red = busy / do-not-disturb, grey = offline */
.status-dot{width:10px;height:10px;background:radial-gradient(circle at 35% 35%,#fff7a8 0 18%,#ffcc00 24% 100%);box-shadow:0 0 0 1px #6b5500}
.status-dot.on,.buddy.online .status-dot{background:radial-gradient(circle at 35% 35%,#c8ffc8 0 18%,#10c010 24% 100%);box-shadow:0 0 0 1px #0a5a0a}
.status-dot.busy,.buddy.busy .status-dot,.buddy.dnd .status-dot{background:radial-gradient(circle at 35% 35%,#ffc0c0 0 18%,#e00000 24% 100%);box-shadow:0 0 0 1px #600000}
.buddy.offline .status-dot,.status-dot.off{background:#c8c8c8;box-shadow:0 0 0 1px #777}
.buddy.offline .buddy-name{color:#808080;font-style:italic}
.buddy-group.g-offline > summary{color:#666}
.bl-legend{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px;color:#404040;margin:0}
.bl-legend span{display:inline-flex;align-items:center;gap:4px}

@media (max-width:700px),(orientation:portrait) and (max-width:900px){
  .signed-out .desktop{padding:8px}
  .has-ticker.wm .wm-win{top:var(--tk-h)!important;height:calc(100% - var(--tb-h) - var(--tk-h))!important}
  .has-ticker .bl-win.wm-win{height:calc(100% - var(--tb-h) - var(--tk-h))!important}
  .folder-win:target{left:8px;right:8px;width:auto;top:8px}
}
@media (prefers-reduced-motion:reduce){
  .cs-ticker{overflow-x:auto}
  .cs-ticker-track{animation:none!important;transform:none}
  .cs-ticker-run[aria-hidden]{display:none}
  .cs-ticker-run{min-width:0}
}
html.theme-retro .login-card .logo .logo-gg{width:56px;height:56px}