/* ============================================================================
   internetgame desktop
   Win2000 / Mac OS 8 chrome with a GeoCities heart. Everything here is CSS and
   inline SVG data URIs - no image files, no fonts to download.
   ========================================================================= */

:root{
  --face:#d4d0c8;          /* the beige of a thousand dialog boxes */
  --face-hi:#ffffff;
  --face-lo:#808080;
  --face-lo2:#404040;
  --title-a:#000080;       /* that blue */
  --title-b:#1084d0;
  --title-fg:#ffffff;
  --title-off-a:#808080;
  --title-off-b:#b5b5b5;
  --ink:#000;
  --link:#0000ee;
  --wallpaper:#008080;     /* teal, obviously */
  --tile:none;
  --ui:"Tahoma","Geneva","Verdana",sans-serif;
  --fun:"Comic Sans MS","Chalkboard","Marker Felt",cursive;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow:hidden;
  font:12px/1.35 var(--ui);color:var(--ink);
  background-color:var(--wallpaper);
  background-image:var(--tile);
  image-rendering:pixelated;
  user-select:none;
}

/* ---------------------------------------------------------------- bevels */
/* The whole look is four borders and two shadows. */
.out{border:2px solid;border-color:var(--face-hi) var(--face-lo2) var(--face-lo2) var(--face-hi);
     box-shadow:inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo)}
.in {border:2px solid;border-color:var(--face-lo2) var(--face-hi) var(--face-hi) var(--face-lo2);
     box-shadow:inset 1px 1px 0 var(--face-lo), inset -1px -1px 0 var(--face)}

/* --------------------------------------------------------------- windows */

#desktop{position:absolute;inset:0 0 30px 0;overflow:hidden}

.win{
  position:absolute;min-width:220px;min-height:90px;
  background:var(--face);padding:3px;
  border:2px solid;border-color:var(--face-hi) var(--face-lo2) var(--face-lo2) var(--face-hi);
  box-shadow:inset 1px 1px 0 var(--face), inset -1px -1px 0 var(--face-lo), 3px 3px 0 rgba(0,0,0,.28);
  display:flex;flex-direction:column;
}
.win.min{display:none}

.titlebar{
  display:flex;align-items:center;gap:5px;padding:3px 3px 3px 5px;cursor:default;
  background:linear-gradient(90deg,var(--title-a),var(--title-b));
  color:var(--title-fg);font-weight:700;font-size:12px;letter-spacing:.2px;flex:none;
}
.win:not(.focused) .titlebar{background:linear-gradient(90deg,var(--title-off-a),var(--title-off-b))}
.titlebar .ico{width:16px;height:16px;flex:none;display:grid;place-items:center;font-size:12px}
.titlebar .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:1px 1px 0 rgba(0,0,0,.35)}
.titlebar .btns{display:flex;gap:2px}
.tbtn{
  width:16px;height:14px;min-width:0;flex:none;box-shadow:none;
  background:var(--face);font:700 10px/1 var(--ui);color:#000;
  border:1px solid;border-color:var(--face-hi) var(--face-lo2) var(--face-lo2) var(--face-hi);
  display:grid;place-items:center;cursor:pointer;padding:0
}
.tbtn:active{padding:0;border-color:var(--face-lo2) var(--face-hi) var(--face-hi) var(--face-lo2)}

.winbody{
  flex:1;overflow:auto;background:var(--face);padding:8px;margin-top:3px;
  border:2px solid;border-color:var(--face-lo2) var(--face-hi) var(--face-hi) var(--face-lo2);
  user-select:text;
}
.winbody.plain{background:var(--face);border:0;box-shadow:none}
.resize{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 45%,var(--face-lo) 45% 55%,transparent 55%,
             transparent 70%,var(--face-lo) 70% 80%,transparent 80%)}

/* --------------------------------------------------------------- taskbar */

#taskbar{
  position:absolute;left:0;right:0;bottom:0;height:30px;z-index:99999;
  background:var(--face);display:flex;align-items:center;gap:4px;padding:2px 4px;
  border-top:2px solid var(--face-hi)
}
#start{
  display:flex;align-items:center;gap:5px;font-weight:700;padding:3px 8px;background:var(--face);
  border:2px solid;border-color:var(--face-hi) var(--face-lo2) var(--face-lo2) var(--face-hi);
  cursor:pointer
}
#start.open{border-color:var(--face-lo2) var(--face-hi) var(--face-hi) var(--face-lo2)}
#tasks{flex:1;display:flex;gap:3px;overflow:hidden}
.task{
  min-width:110px;max-width:180px;padding:3px 7px;background:var(--face);cursor:pointer;
  border:2px solid;border-color:var(--face-hi) var(--face-lo2) var(--face-lo2) var(--face-hi);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;gap:5px;align-items:center
}
.task.active{border-color:var(--face-lo2) var(--face-hi) var(--face-hi) var(--face-lo2);
  background:repeating-linear-gradient(45deg,#e8e6e2 0 2px,var(--face) 2px 4px);font-weight:700}
#tray{padding:3px 9px;font-variant-numeric:tabular-nums;
  border:2px solid;border-color:var(--face-lo2) var(--face-hi) var(--face-hi) var(--face-lo2)}

#startmenu{
  position:absolute;left:4px;bottom:32px;width:210px;z-index:99998;background:var(--face);
  border:2px solid;border-color:var(--face-hi) var(--face-lo2) var(--face-lo2) var(--face-hi);
  padding:3px;display:none
}
#startmenu.open{display:block}
#startmenu .banner{
  position:absolute;left:3px;top:3px;bottom:3px;width:22px;
  background:linear-gradient(180deg,var(--title-b),var(--title-a));color:#fff;
  writing-mode:vertical-rl;transform:rotate(180deg);text-align:right;
  font:700 13px var(--ui);padding:8px 3px;letter-spacing:1px
}
#startmenu ul{list-style:none;margin:0;padding:0 0 0 25px}
#startmenu li{padding:6px 8px;cursor:pointer;display:flex;gap:8px;align-items:center}
#startmenu li:hover{background:var(--title-a);color:#fff}
#startmenu hr{border:0;border-top:1px solid var(--face-lo);border-bottom:1px solid var(--face-hi);
  margin:3px 6px 3px 25px}

/* ------------------------------------------------------------- controls */

button,.btn{
  font:12px var(--ui);background:var(--face);color:#000;padding:4px 12px;cursor:pointer;min-width:70px;
  border:2px solid;border-color:var(--face-hi) var(--face-lo2) var(--face-lo2) var(--face-hi);
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 var(--face-lo)
}
button:active:not(:disabled){border-color:var(--face-lo2) var(--face-hi) var(--face-hi) var(--face-lo2);
  box-shadow:inset 1px 1px 0 var(--face-lo);padding:5px 11px 3px 13px}
button:disabled{color:var(--face-lo);text-shadow:1px 1px 0 var(--face-hi);cursor:default}
button.small{min-width:0;padding:2px 7px;font-size:11px}
input[type=text],input[type=number],select{
  font:12px var(--ui);padding:3px 4px;background:#fff;color:#000;
  border:2px solid;border-color:var(--face-lo2) var(--face-hi) var(--face-hi) var(--face-lo2)
}
fieldset{border:1px solid var(--face-lo);border-top-color:var(--face-lo2);margin:0 0 9px;padding:9px}
legend{padding:0 4px;font-weight:700}
label{cursor:pointer}
a{color:var(--link)}
.row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.row+.row{margin-top:7px}
.spread{justify-content:space-between}
.muted{color:#555}
.tiny{font-size:11px}

/* GeoCities flourishes, used sparingly enough to stay cozy */
.rainbow{
  background:linear-gradient(90deg,#f00,#f80,#fd0,#0c0,#08f,#66f,#c0f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:var(--fun);font-weight:700
}
.hr-fun{height:6px;border:0;margin:9px 0;
  background:repeating-linear-gradient(90deg,#ff4d4d 0 8px,#ffd24d 8px 16px,#4dff88 16px 24px,#4dd2ff 24px 32px)}
.blink{animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.badge{display:inline-block;padding:1px 5px;border:1px solid var(--face-lo2);background:#ffffc8;
  font-size:10px;font-family:var(--fun)}

/* ----------------------------------------------------------------- cards */

.card{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:42px;height:60px;background:#fff;color:#111;line-height:1;flex:none;
  border:1px solid #777;border-radius:3px;box-shadow:1px 1px 0 rgba(0,0,0,.25)
}
.card .rk{font:700 15px var(--ui)}
.card .st{font-size:14px}
.card.red{color:#c00}
.card.sm{width:32px;height:46px} .card.sm .rk{font-size:12px} .card.sm .st{font-size:11px}
.card.xs{width:25px;height:36px} .card.xs .rk{font-size:10px} .card.xs .st{font-size:9px}
.card.pick{cursor:pointer;position:relative;transition:transform .08s}
.card.pick input{position:absolute;opacity:0;width:0;height:0}
.card.pick:hover{transform:translateY(-4px)}
.card.pick:has(input:checked){transform:translateY(-12px);
  border-color:var(--title-a);box-shadow:0 0 0 2px var(--title-b),1px 1px 0 rgba(0,0,0,.25)}
.fan{display:flex;flex-wrap:wrap;gap:5px;min-height:62px;align-items:flex-end;
  background:#0a6b3d;padding:7px;border-radius:4px;
  border:2px solid;border-color:#064d2c #0e8f52 #0e8f52 #064d2c}
.pile{display:flex;flex-wrap:wrap;gap:3px}
.felt{background:#0a6b3d;padding:7px;border-radius:4px;
  border:2px solid;border-color:#064d2c #0e8f52 #0e8f52 #064d2c;color:#dff5e8}
.felt .nil{color:#9fd8b8}

/* seats / scoreboard */
.seats{display:flex;flex-wrap:wrap;gap:6px}
.seat{flex:1;min-width:120px;background:var(--face);padding:5px 7px;
  border:2px solid;border-color:var(--face-hi) var(--face-lo2) var(--face-lo2) var(--face-hi)}
.seat.turn{background:#ffffd0;border-color:var(--title-a) var(--title-a) var(--title-a) var(--title-a)}
.seat.away{color:#888}
.seat .nm{display:flex;align-items:center;gap:5px;font-weight:700}
.seat .sc{font:700 19px var(--ui);font-variant-numeric:tabular-nums}
.seat .meta{font-size:11px;color:#444}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;
     border:1px solid rgba(0,0,0,.4)}

.melds{display:flex;flex-wrap:wrap;gap:6px}
.meld{padding:4px;background:#0a6b3d;border:2px solid #064d2c;cursor:default;min-width:0}
.melds.armed .meld{cursor:pointer;border-color:#ffd24d}
.melds.armed .meld:hover{background:#0e8f52}
.asCard{background:none;border:0;padding:0;cursor:pointer;min-width:0;box-shadow:none}
.asCard:active{padding:0}

.statusbar{display:flex;gap:6px;align-items:center;margin-top:7px;padding:3px 6px;
  border:2px solid;border-color:var(--face-lo2) var(--face-hi) var(--face-hi) var(--face-lo2)}
.statusbar .msg{flex:1;min-width:0}
.log{max-height:120px;overflow:auto;background:#fff;padding:5px;
  border:2px solid;border-color:var(--face-lo2) var(--face-hi) var(--face-hi) var(--face-lo2)}
.log div{padding:1px 0;font-size:11px}
.log div:first-child{font-weight:700}
.nil{color:#666}
.err{color:#a00;font-weight:700}
.win-banner{background:#ffffc8;border:2px dashed #c8a000;padding:7px;text-align:center;
  font-family:var(--fun);font-size:15px;margin-bottom:8px}